/*
 * Admin Panel — Shell Layout (Sidebar + Header)
 *
 * Loaded LAST so it has the final word on shell layout.
 * Consumes --admin-* tokens from admin-tokens.css.
 *
 * Goals:
 *   1. Lock the sidebar nav to a single vertical column at all times.
 *      No future theme tweak can put Dashboard + Users on the same row.
 *   2. Unify header action buttons (theme toggle, 2FA, logout) to one
 *      consistent height/treatment so the row reads as a single cluster.
 *   3. Provide a focus ring and accessible touch targets everywhere.
 *
 * Scope: body[data-page="admin"] — never leaks to other pages.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * SIDEBAR — bulletproof vertical layout
 * ═══════════════════════════════════════════════════════════════════════
 * The nav element is forced to flex-column with gap. Every direct child
 * gets full width. This survives any future utility-class injection
 * because the rules are scoped to #sidebar and use !important on the
 * primitives that have historically been overridden.
 */

body[data-page="admin"] #sidebar {
    width: var(--admin-sidebar-width) !important;
    background: var(--admin-surface);
    border-right: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow-1);
}

body[data-page="admin"] #sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--admin-space-1) !important;
    padding: var(--admin-space-3) !important;
    margin: 0 !important;
}

/* Sidebar section dividers (decorative wrappers — added later if grouped) */
body[data-page="admin"] #sidebar nav .admin-nav-group + .admin-nav-group {
    margin-top: var(--admin-space-3);
    padding-top: var(--admin-space-3);
    border-top: 1px solid var(--admin-border);
}

body[data-page="admin"] #sidebar nav .admin-nav-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-subtle);
    padding: var(--admin-space-2) var(--admin-space-3) var(--admin-space-1);
}

/* Each nav link occupies a full row, regardless of label length. */
body[data-page="admin"] #sidebar .nav-link,
body[data-page="admin"] #sidebar a[href="../index.html"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: var(--admin-tap-h) !important;
    padding: var(--admin-space-2) var(--admin-space-3) !important;
    gap: var(--admin-space-3) !important;
    border: 1px solid transparent !important;
    border-radius: var(--admin-radius-md) !important;
    background: transparent !important;
    color: var(--admin-text-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: background var(--admin-dur-1) var(--admin-ease),
                color var(--admin-dur-1) var(--admin-ease),
                border-color var(--admin-dur-1) var(--admin-ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="admin"] #sidebar .nav-link svg,
body[data-page="admin"] #sidebar a[href="../index.html"] svg {
    width: var(--admin-icon-md) !important;
    height: var(--admin-icon-md) !important;
    flex: 0 0 auto !important;
    stroke-width: 2;
}

body[data-page="admin"] #sidebar .nav-link span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="admin"] #sidebar .nav-link:hover {
    background: var(--admin-surface-raised) !important;
    color: var(--admin-text) !important;
}

body[data-page="admin"] #sidebar .nav-link.active {
    background: var(--admin-accent-soft) !important;
    color: var(--admin-accent) !important;
    border-color: var(--admin-accent-ring) !important;
}

body[data-page="admin"] #sidebar .nav-link:focus-visible {
    outline: none !important;
    box-shadow: var(--admin-focus) !important;
}

/* Back-to-app link (footer link in sidebar) */
body[data-page="admin"] #sidebar a[href="../index.html"] {
    margin-top: var(--admin-space-2);
    color: var(--admin-text-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * HEADER — unified action cluster
 * ═══════════════════════════════════════════════════════════════════════
 */

body[data-page="admin"] > #admin-container > header {
    height: var(--admin-header-height);
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body[data-page="admin"] > #admin-container > header > div {
    height: 100%;
    padding-left: var(--admin-space-5) !important;
    padding-right: var(--admin-space-5) !important;
}

body[data-page="admin"] > #admin-container > header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--admin-text);
    letter-spacing: -0.01em;
}

/* Welcome text */
body[data-page="admin"] > #admin-container > header .text-gray-400 {
    color: var(--admin-text-muted) !important;
}
body[data-page="admin"] > #admin-container > header #admin-username {
    color: var(--admin-text) !important;
}

/* Right-side action cluster — every control gets the same height */
body[data-page="admin"] > #admin-container > header > div > div:last-child {
    display: flex;
    align-items: center;
    gap: var(--admin-space-3);
}

/* Theme toggle */
body[data-page="admin"] #ds-theme-toggle {
    height: var(--admin-control-h);
    min-width: var(--admin-control-h);
    padding: 0 var(--admin-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--admin-space-2);
    background: var(--admin-surface-raised);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    color: var(--admin-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--admin-dur-1) var(--admin-ease),
                border-color var(--admin-dur-1) var(--admin-ease);
}
body[data-page="admin"] #ds-theme-toggle:hover {
    background: var(--admin-surface-elevated);
    border-color: var(--admin-border-strong);
}
body[data-page="admin"] #ds-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--admin-focus);
}
body[data-page="admin"] #ds-theme-toggle [data-theme-icon] {
    font-size: 14px;
    line-height: 1;
}

/* 2FA / Account settings icon button — same height as siblings,
 * with a visible border so it stops reading as an "empty circle". */
body[data-page="admin"] #manage-2fa-link {
    height: var(--admin-control-h) !important;
    width: var(--admin-control-h) !important;
    min-width: var(--admin-control-h);
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--admin-surface-raised) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius-md) !important;
    color: var(--admin-text) !important;
    transition: background var(--admin-dur-1) var(--admin-ease),
                border-color var(--admin-dur-1) var(--admin-ease);
}
body[data-page="admin"] #manage-2fa-link:hover {
    background: var(--admin-surface-elevated) !important;
    border-color: var(--admin-border-strong) !important;
    color: var(--admin-accent) !important;
}
body[data-page="admin"] #manage-2fa-link:focus-visible {
    outline: none !important;
    box-shadow: var(--admin-focus) !important;
}
body[data-page="admin"] #manage-2fa-link svg {
    width: var(--admin-icon-md) !important;
    height: var(--admin-icon-md) !important;
}

/* Logout button — primary-danger styling, consistent height */
body[data-page="admin"] #logout-btn {
    height: var(--admin-control-h);
    padding: 0 var(--admin-space-4) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--admin-space-2);
    background: var(--admin-danger);
    border: 1px solid transparent;
    border-radius: var(--admin-radius-md);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter var(--admin-dur-1) var(--admin-ease);
}
body[data-page="admin"] #logout-btn:hover {
    filter: brightness(1.08);
}
body[data-page="admin"] #logout-btn:focus-visible {
    outline: none;
    box-shadow: var(--admin-focus);
}

/* Sidebar toggle (mobile only) */
body[data-page="admin"] #toggle-sidebar {
    height: var(--admin-control-h) !important;
    width: var(--admin-control-h) !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-surface-raised) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius-md) !important;
    color: var(--admin-text) !important;
}
body[data-page="admin"] #toggle-sidebar:hover {
    background: var(--admin-surface-elevated) !important;
}
body[data-page="admin"] #toggle-sidebar:focus-visible {
    outline: none !important;
    box-shadow: var(--admin-focus) !important;
}
body[data-page="admin"] #toggle-sidebar svg {
    width: var(--admin-icon-md) !important;
    height: var(--admin-icon-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * MAIN CONTENT — align with sidebar width, take full available width
 * ═══════════════════════════════════════════════════════════════════════ */

body[data-page="admin"] main.flex-1 {
    width: 100%;
    min-width: 0;
    padding: var(--admin-space-5) !important;
}

@media (min-width: 1024px) {
    body[data-page="admin"] main.flex-1 {
        margin-left: var(--admin-sidebar-width) !important;
        padding: var(--admin-space-6) !important;
    }
}

/* Section content takes the FULL width of main — no cap. The owner prefers
 * dashboards/tables to use the whole screen; --admin-content-max stays
 * defined only for components that opt in explicitly. */
body[data-page="admin"] main .section-content {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Every direct child of section-content gets full width by default. */
body[data-page="admin"] main .section-content > * {
    width: 100%;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * V2-MODAL MISUSE FIX — full-width content cards
 * ═══════════════════════════════════════════════════════════════════════
 * The .v2-modal class is widely (mis)used inside admin sections as a
 * generic "card" wrapper, e.g.:
 *   <div class="rounded-lg border p-6 v2-modal">...table...</div>
 *
 * .v2-modal in v2-tokens.css sets max-width: 560px (because it was
 * designed for actual modal dialogs). On wide admin pages this
 * collapses tables and content to 560px wide with massive empty space.
 *
 * Fix: inside <main>, treat .v2-modal as a content card (no max-width).
 * Restore proper modal sizing only when nested under a real modal
 * backdrop (.v2-modal-backdrop or [role="dialog"]).
 */

body[data-page="admin"] main .v2-modal {
    max-width: none !important;
    width: auto !important;
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius-lg) !important;
    box-shadow: var(--admin-shadow-1) !important;
    color: var(--admin-text) !important;
    /* clear the linear-gradient overlay from v2-tokens that hardcodes dark colors */
    background-image: none !important;
}

/* Restore real-modal sizing when v2-modal is inside an actual modal overlay */
body[data-page="admin"] main .v2-modal-backdrop .v2-modal,
body[data-page="admin"] main [role="dialog"] .v2-modal {
    max-width: 560px !important;
    width: 100% !important;
    background: var(--admin-surface-elevated) !important;
    box-shadow: var(--admin-shadow-3) !important;
}

/* The width modifier (.v2-modal-wide / -xl / -full) is placed on the BACKDROP
 * by admin modals so the rules above can size the inner .v2-modal. But
 * css/v2-tokens.css's `.v2-modal-wide { max-width }` (etc.) ALSO matches the
 * backdrop directly, which shrinks the full-screen overlay and pins it to the
 * left edge (over the sidebar) instead of centering it. The overlay must always
 * fill the viewport — the width belongs to the inner card, never the backdrop. */
body[data-page="admin"] .v2-modal-backdrop.v2-modal-wide,
body[data-page="admin"] .v2-modal-backdrop.v2-modal-xl,
body[data-page="admin"] .v2-modal-backdrop.v2-modal-full {
    max-width: none !important;
}

/* Wide modal variant (v2-modal-wide on backdrop) */
body[data-page="admin"] main .v2-modal-backdrop.v2-modal-wide .v2-modal,
body[data-page="admin"] main .v2-modal-wide > .v2-modal {
    max-width: min(920px, calc(100vw - 24px)) !important;
}

/* XL modal variant */
body[data-page="admin"] main .v2-modal-backdrop.v2-modal-xl .v2-modal {
    max-width: min(1240px, calc(100vw - 24px)) !important;
}

/* Modals OUTSIDE main (children of body, e.g. create-org-modal,
 * edit-user-modal) keep the original .v2-modal sizing from v2-tokens.css.
 * We add admin-aware surface tokens for readability in light theme. */
body[data-page="admin"] > #admin-container ~ .v2-modal-backdrop .v2-modal,
body[data-page="admin"] > .v2-modal-backdrop .v2-modal {
    background: var(--admin-surface-elevated) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * TABLES INSIDE ADMIN SECTIONS
 * ═══════════════════════════════════════════════════════════════════════
 * Many admin tables wrap text awkwardly when constrained. With full-width
 * cards we still want to: prevent labels wrapping vertically, keep cells
 * tidy, and only show a horizontal scrollbar when the table truly
 * exceeds the card.
 */

body[data-page="admin"] main .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overflow-y: visible;
}

body[data-page="admin"] main table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

body[data-page="admin"] main table th,
body[data-page="admin"] main table td {
    padding: var(--admin-space-3);
    vertical-align: middle;
    text-align: left;
}
body[data-page="admin"] main table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--admin-text-muted);
    background: var(--admin-surface-raised);
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}
body[data-page="admin"] main table td {
    font-size: 13px;
    color: var(--admin-text);
    border-bottom: 1px solid var(--admin-border);
}
body[data-page="admin"] main table tbody tr:last-child td {
    border-bottom: none;
}
body[data-page="admin"] main table tbody tr:hover td {
    background: var(--admin-surface-raised);
}

/* Cell content that has multi-line wrappers (limit warnings, plan info)
 * should stay inline-flex with reasonable gap rather than collapsing to
 * a vertical word-per-line layout when the column is "narrow". */
body[data-page="admin"] main table td > .flex,
body[data-page="admin"] main table td > div {
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════
 */

@media (max-width: 1023px) {
    body[data-page="admin"] #sidebar {
        width: min(82vw, var(--admin-sidebar-width)) !important;
        box-shadow: var(--admin-shadow-2);
    }

    /* Welcome text hidden on small screens to keep cluster tight */
    body[data-page="admin"] > #admin-container > header .text-sm.text-gray-400 {
        display: none;
    }
}

@media (max-width: 640px) {
    body[data-page="admin"] > #admin-container > header > div {
        padding-left: var(--admin-space-3) !important;
        padding-right: var(--admin-space-3) !important;
    }

    body[data-page="admin"] > #admin-container > header > div > div:last-child {
        gap: var(--admin-space-2);
    }

    /* On phones, theme toggle becomes icon-only to save room */
    body[data-page="admin"] #ds-theme-toggle [data-theme-label] {
        display: none;
    }
    body[data-page="admin"] #ds-theme-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════
 */

@media (prefers-reduced-motion: reduce) {
    body[data-page="admin"] #sidebar .nav-link,
    body[data-page="admin"] #ds-theme-toggle,
    body[data-page="admin"] #manage-2fa-link,
    body[data-page="admin"] #logout-btn,
    body[data-page="admin"] #toggle-sidebar {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * AI KILL SWITCH BANNER (W-2, saas_196/197)
 * ═══════════════════════════════════════════════════════════════════════
 * Fixed full-width bar above the header, created/removed by
 * admin-platform-settings.js only while the platform-wide AI kill switch is
 * ON — a rare, deliberately loud state. Header, sidebar, and the main
 * content wrapper are all independently `position: fixed`/offset by the
 * header height, so each needs its own top/padding-top bump while the
 * banner is present (toggled by the body.has-ai-kill-switch-banner class).
 */

#ai-kill-switch-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--admin-space-3);
    height: 40px;
    padding: 0 var(--admin-space-4);
    background: var(--admin-danger, #ef4444);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--admin-shadow-2);
}

#ai-kill-switch-banner .ai-kill-switch-banner__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ai-kill-switch-banner .ai-kill-switch-banner__manage {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--admin-radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#ai-kill-switch-banner .ai-kill-switch-banner__manage:hover {
    background: rgba(255, 255, 255, 0.24);
}

body[data-page="admin"].has-ai-kill-switch-banner > #admin-container > header {
    top: 40px !important;
}

body[data-page="admin"].has-ai-kill-switch-banner > #admin-container #sidebar {
    top: calc(var(--admin-header-height) + 40px) !important;
}

body[data-page="admin"].has-ai-kill-switch-banner > #admin-container #admin-body-wrap {
    padding-top: calc(var(--admin-header-height) + 40px) !important;
}

@media (max-width: 640px) {
    #ai-kill-switch-banner {
        height: 52px;
        font-size: 12px;
        white-space: normal;
        text-align: left;
        justify-content: space-between;
    }

    body[data-page="admin"].has-ai-kill-switch-banner > #admin-container > header {
        top: 52px !important;
    }

    body[data-page="admin"].has-ai-kill-switch-banner > #admin-container #sidebar {
        top: calc(var(--admin-header-height) + 52px) !important;
    }

    body[data-page="admin"].has-ai-kill-switch-banner > #admin-container #admin-body-wrap {
        padding-top: calc(var(--admin-header-height) + 52px) !important;
    }
}