/* App-prefixed chrome rules referenced by internal/shared/ui's
   layout.templ and error.templ. The `cl-` namespace is the menuda-ui library's
   contract; this file only adds `app-` rules that compose those
   components into the design viewer's own pages. */

[class^="app-"], [class*=" app-"] {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--cl-color-bg, #ffffff);
    color: var(--cl-color-text, #1d1f20);
    font-family: var(--cl-font-family, system-ui, -apple-system, sans-serif);
}

a {
    color: inherit;
}

/* Main content region inside AppShell. Task 12 wraps this with a
   sidebar; until then the main is the whole viewport. */
.app-main {
    padding: var(--cl-space-5, 24px);
    min-height: 100vh;
}

/* Generic error page. */
.app-error {
    max-width: 480px;
    margin: 12vh auto 0;
    padding: var(--cl-space-6, 32px);
    text-align: center;
}
.app-error__heading {
    margin: 0 0 var(--cl-space-2, 8px);
    font-size: 20px;
    font-weight: var(--cl-font-weight-heading, 600);
}
.app-error__body {
    margin: 0;
    color: var(--cl-color-text-muted, rgba(29, 31, 32, 0.7));
    font-size: var(--cl-font-size-md, 14px);
    line-height: 1.5;
}

/* Login page (docs/design/login.html): the menuda-ui card centred on
   the surface, with the brand mark above and a muted footnote below.
   Only layout lives here; the card, alert, fields and button are
   menuda-ui components and keep their own styling. */
.app-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-5);
    min-height: 100vh;
    padding: var(--cl-space-5) 16px;
    background: var(--cl-color-surface);
}

.app-login .cl-card {
    width: 100%;
    max-width: 380px;
}

.app-login form {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-4);
}

.app-login .cl-input {
    width: 100%;
}

.app-login__foot {
    color: var(--cl-color-text-muted);
    font-size: var(--cl-font-size-xs);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: var(--cl-space-2);
    font-weight: var(--cl-font-weight-heading);
    font-size: var(--cl-font-size-lg);
    letter-spacing: -0.01em;
}

.app-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cl-control-height-sm);
    height: var(--cl-control-height-sm);
    border-radius: var(--cl-radius-component);
    background: var(--cl-color-accent);
    color: var(--cl-color-on-accent);
}

.app-brand__mark .cl-icon {
    width: var(--cl-icon-size-sm);
    height: var(--cl-icon-size-sm);
}

/* ---------- App shell (sidebar chrome) ---------- */

/* Specificity matches the library's `.cl-sidebar-menu-button > span`
   label rule (which would stretch this span); app.css loads after the
   component CSS, so this wins on order without naming a cl- class. */
span.app-sidebar-meta {
    flex: none;
    margin-left: auto;
    color: var(--cl-color-text-muted);
    font-size: var(--cl-font-size-2xs);
    font-variant-numeric: tabular-nums;
}

.app-sidebar-empty {
    padding: var(--cl-space-2) var(--cl-space-3);
    color: var(--cl-color-text-muted);
    font-size: var(--cl-font-size-sm);
    list-style: none;
}

/* The filter toggles [hidden]; keep it winning over component display rules. */
[data-app-project][hidden],
.app-sidebar-empty[hidden] {
    display: none !important;
}

.app-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--cl-line-height-ui);
    text-align: left;
}

.app-user__role {
    color: var(--cl-color-text-muted);
    font-size: var(--cl-font-size-2xs);
}

/* The popover root fills the footer; its trigger looks like a menu row. */
.app-user-menu {
    display: block;
    width: 100%;
}

.app-user-trigger {
    width: 100%;
}

.app-user-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-user-menu__list form {
    margin: 0;
}

/* Slim bar holding the drawer trigger; only shown below 768px. */
.app-mobilebar {
    padding: var(--cl-space-2) var(--cl-space-3);
    border-bottom: 1px solid var(--cl-color-divider);
}

.app-only-mobile {
    display: none;
}

@media (max-width: 767px) {
    .app-only-mobile {
        display: inline-flex;
    }

    .app-mobilebar.app-only-mobile {
        display: flex;
    }
}

/* ---------- Content pages (admin users, account) ---------- */

/* A centred column inside .app-main (which already pads it), with a
   title + muted lede header, as in docs/design/admin-users.html. */
.app-page {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.app-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-1);
    margin-bottom: var(--cl-space-6);
}

.app-page__header h1 {
    margin: 0;
}

.app-page__header p {
    margin: 0;
    color: var(--cl-color-text-muted);
}

.app-page__alerts {
    margin-bottom: var(--cl-space-5);
}

/* Main column plus a 320px side card; stacks below 1280px, where the
   users table would otherwise be squeezed beside the card. */
.app-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--cl-space-5);
    align-items: start;
}

@media (max-width: 1280px) {
    .app-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-stack {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-4);
}

.app-stack p {
    margin: 0;
}

.app-row {
    display: flex;
    align-items: center;
    gap: var(--cl-space-2);
}

.app-row--end {
    justify-content: flex-end;
}

.app-stack--loose {
    gap: var(--cl-space-5);
}

.app-stack--tight {
    gap: var(--cl-space-2);
}

/* An inline form row: field and button share a baseline at the bottom,
   wrapping on narrow screens. */
.app-row--form {
    flex-wrap: wrap;
    align-items: flex-end;
}

/* The one-time token box and its copy button (account page). */
.app-secret {
    display: flex;
    align-items: center;
    gap: var(--cl-space-2);
    padding: var(--cl-space-2) var(--cl-space-2) var(--cl-space-2) var(--cl-space-3);
    border: 1px solid var(--cl-color-divider);
    border-radius: var(--cl-radius-component);
    background: var(--cl-color-surface);
}

/* The token itself: a bare read-only input so it can be selected, set
   in the monospace face the design shows as code. */
.app-secret__value {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--cl-font-mono);
    font-size: var(--cl-font-size-sm);
    outline: none;
}

.app-account td,
.app-account th {
    white-space: nowrap;
}

.app-muted {
    color: var(--cl-color-text-muted);
}

/* Forms inside table cells and rows carry no default margin. */
.app-row form,
.app-users td form {
    margin: 0;
}

.app-stack .cl-input,
.app-stack .cl-combobox-field {
    width: 100%;
}

.app-stack {
    --cl-combobox-trigger-min-width: 100%;
}

/* Users table: keep cells on one line (the container scrolls sideways
   if it must) and give the inline role picker a compact width. */
.app-users td,
.app-users th {
    white-space: nowrap;
}

.app-users td {
    --cl-combobox-trigger-min-width: 120px;
}

/* ---------- Viewer ---------- */

/* The viewer needs a full-bleed stage: drop the shell's padding and let
   the toolbar and stage stack to the viewport height. Its toolbar carries
   its own drawer trigger, so the shell's mobile bar is hidden. */
.app-main:has(.app-stage) {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.cl-sidebar-inset:has(.app-stage) .app-mobilebar {
    display: none;
}

.app-viewer {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cl-space-2) var(--cl-space-3);
    min-height: 56px;
    padding: var(--cl-space-2) var(--cl-space-4);
    border-bottom: 1px solid var(--cl-color-divider);
    background: var(--cl-color-bg);
}

.app-topbar__title {
    display: flex;
    align-items: center;
    gap: var(--cl-space-2);
    min-width: 0;
}

.app-topbar__project {
    font-weight: var(--cl-font-weight-heading);
    font-size: var(--cl-font-size-lg);
    white-space: nowrap;
}

.app-topbar__sep {
    color: var(--cl-color-text-muted);
}

.app-topbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cl-space-2);
    margin-left: auto;
}

/* Version badge beside the page picker: "v7 · updated 2 h ago by pablo". */
.app-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--cl-space-2);
    color: var(--cl-color-text-muted);
    font-size: var(--cl-font-size-sm);
    white-space: nowrap;
}

.app-vrule {
    width: 1px;
    height: 20px;
    background: var(--cl-color-divider);
}

.app-stage {
    flex: 1;
    display: flex;
    justify-content: center;
    /* A frame wider than the stage (834px tablet beside the sidebar)
       must overflow to the right, where it can be scrolled to, not to
       both sides. */
    justify-content: safe center;
    align-items: stretch;
    min-height: 0;
    padding: var(--cl-space-5);
    background: var(--cl-color-surface);
    overflow: auto;
}

.app-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 56px - var(--cl-space-5) * 2);
    border: 1px solid var(--cl-color-divider);
    border-radius: var(--cl-radius-lg);
    /* Backdrop for designs that paint no background of their own. App
       override hook; defaults to the theme surface. */
    background: var(--app-frame-bg, var(--cl-color-bg));
    box-shadow: var(--cl-shadow-md);
    overflow: hidden;
    transition: width var(--cl-transition-base, 180ms ease-out);
}

.app-frame[data-viewport="tablet"] {
    width: 834px;
    flex: none;
}

.app-frame[data-viewport="mobile"] {
    width: 390px;
    flex: none;
}

.app-frame iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent; /* shows .app-frame's --app-frame-bg */
}

.app-frame__loading {
    display: flex;
    flex-direction: column;
    gap: var(--cl-space-4);
    padding: var(--cl-space-6);
}

@media (max-width: 767px) {
    .app-hide-mobile {
        display: none !important;
    }

    .app-stage {
        padding: var(--cl-space-2);
    }

    /* The viewport toggle is hidden here, so a tablet / mobile choice
       remembered from a wide screen must not leave a fixed-width frame. */
    .app-frame[data-viewport] {
        width: 100%;
        flex: 1;
    }

    .app-topbar__actions {
        margin-left: 0;
    }
}