/*
 * 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. On very wide screens
 * we cap at --admin-content-max so dashboards stay readable, but the
 * cap is generous enough that most desktops never hit it. */
body[data-page="admin"] main .section-content {
    width: 100%;
    max-width: var(--admin-content-max);
    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;
}

/* 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;
    }
}