/* ============================================================
   Admin / Settings styles
   --------------------------------------------------------------
   THE single home for the Settings (AdminLayout) tabs. Every tab
   under AdminPage.razor (Users, Teams, Staff, Workspaces, Risk,
   Business, API Keys, Billing) draws its chrome from here so the
   tabs stay visually consistent.

   Rule of thumb: shared tab vocabulary lives in THIS file. A tab's
   own scoped .razor.css is only for genuinely one-off pieces
   (e.g. role badges, tier cards) — never re-declare the shared
   .ak-* / .admin-* / .entity-* patterns there, or the tabs drift.
   ============================================================ */

/* --- Settings tab: list rows ---
   The standard "list of records" card body — rows with a name /
   mono sub-line / meta and right-aligned actions. The tab header
   (title + primary action) is owned by SettingsScaffold now, so
   this file only styles the rows. used by: AdminApiKeysTab, and the
   staff-enrolment row in AdminUsersTab. */
.ak-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-default);
}

.ak-row:last-child {
    border-bottom: none;
}

.ak-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ak-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ak-name {
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-default);
}

.ak-prefix {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--fg-muted);
}

.ak-meta {
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    margin-top: 2px;
}

.ak-badge {
    font-size: var(--text-2xs);
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--fg-muted);
}

/* --- Admin tab toolbar / search / actions ---
   The toolbar is now the search + filters row beneath the header,
   rendered by SettingsScaffold's Toolbar slot; the primary action
   (.admin-action-btn) has moved up into the header's right cluster
   (PageHeader RightContent). used by: SettingsScaffold + the tabs. */
.admin-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}
.admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    flex: 0 1 360px;
    max-width: 360px;
}
.admin-search input {
    border: none;
    background: none;
    outline: none;
    color: var(--fg-default);
    font-size: var(--text-sm);
    width: 100%;
}
.admin-search input::placeholder { color: var(--fg-subtle); }

.admin-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: var(--accent-fg);
    border: 1px solid var(--accent-fg);
    color: var(--fg-on-emphasis);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
    white-space: nowrap;
    margin-left: auto;
}
.admin-action-btn:hover {
    background: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
}

.show-inactive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--fg-muted);
    cursor: pointer;
    white-space: nowrap;
}
.show-inactive-toggle input[type="checkbox"] { accent-color: var(--accent-fg); }

/* --- Admin grid + table ---
   used by: AdminWorkspacesTab.razor, AdminUsersTab.razor,
            AdminTeamsTab.razor, AdminLocationsTab.razor,
            AdminBusinessTab.razor */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px)  { .admin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .admin-grid { grid-template-columns: 1fr; } }

.admin-table-wrap {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--border-default);
    background: var(--canvas-subtle);
}
.admin-table tbody tr.clickable { cursor: pointer; }
.admin-table tbody tr:hover { background: var(--canvas-subtle); }
.admin-table tbody td {
    padding: 12px 16px;
    font-size: var(--text-sm);
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-empty {
    padding: 32px;
    text-align: left;
    color: var(--fg-subtle);
    font-size: var(--text-sm);
}

/* ============================================================
   AdminLayout — hand-rolled docked sidebar (NOT a MudDrawer).
   Docks & pushes content at >=900px; slides in as a fixed overlay
   below 900px. Width comes from --admin-sidebar-width; the dock->overlay
   switch reuses the app-wide 900px breakpoint. used by: AdminLayout.razor
   ============================================================ */
.admin-shell {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* --- Docked rail --- */
.admin-sidebar {
    flex: 0 0 var(--admin-sidebar-width);
    width: var(--admin-sidebar-width);
    box-sizing: border-box;
    padding: 8px 12px 24px;
    border-right: 1px solid var(--border-default);
    /* Dock full-height under the topbar and stay put while AppShell's .main scrolls
       the content. align-self:flex-start (not stretch) leaves room for sticky to work. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: calc(100vh - var(--topbar-height));
    overflow-y: auto;
    transition: margin-left 0.2s ease;
}
.admin-sidebar-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-subtle);
    padding: 8px 12px 12px;
}

/* MudNavMenu / MudNavLink inside the rail. */
.admin-nav .mud-nav-link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-muted);
    border-radius: 8px;
    margin: 2px 0;
    min-height: 40px;
    gap: 14px;
    border: 1px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.admin-nav .mud-nav-link .mud-icon-root {
    font-size: var(--text-xl);
    color: var(--fg-subtle);
    transition: color 0.15s ease;
}
.admin-nav .mud-nav-link:hover {
    color: var(--fg-default);
    background: var(--canvas-subtle);
}
.admin-nav .mud-nav-link:hover .mud-icon-root {
    color: var(--fg-default);
}
.admin-nav .mud-nav-link.active {
    color: var(--accent-fg);
    background: var(--canvas-default);
    border-color: var(--border-default);
    font-weight: 600;
}
.admin-nav .mud-nav-link.active .mud-icon-root {
    color: var(--accent-fg);
}

/* --- Content column --- */
.admin-content {
    flex: 1 1 auto;
    min-width: 0;
}
/* Hamburger row: hidden on laptop+ (the rail is permanent there); only the mobile
   overlay needs a trigger, so it re-appears in the <900px block below. */
.admin-bar {
    display: none;
    align-items: center;
    padding: 0 0 4px 4px;
}
.admin-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 9px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--canvas-default);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-hamburger:hover { background: var(--canvas-subtle); }
.admin-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--fg-muted);
    border-radius: 2px;
}

/* Backdrop only appears in the mobile overlay state. */
.admin-backdrop { display: none; }

/* Laptop+ (>=900px): the rail is permanent. There is no collapsed state and no
   toggle — the open/collapsed shell classes only take effect in the mobile block. */

/* --- Mobile (<900px): rail becomes a fixed overlay below the topbar, driven by
   the hamburger. --- */
@media (max-width: 900px) {
    .admin-bar { display: flex; }

    .admin-sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        bottom: 0;
        z-index: 350;
        width: min(var(--admin-sidebar-width), 80vw);
        flex-basis: min(var(--admin-sidebar-width), 80vw);
        height: auto;
        background: var(--canvas-default);
        box-shadow: var(--shadow-floating);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0.2s ease;
        overflow-y: auto;
    }
    .admin-shell--open .admin-sidebar {
        transform: translateX(0);
        visibility: visible;
    }
    .admin-shell--open .admin-backdrop {
        display: block;
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        z-index: 349;
        background: rgba(0, 0, 0, 0.4);
    }
}
@media (max-width: 900px) {
    .admin-table thead th,
    .admin-table tbody td { padding: 10px 12px; font-size: var(--text-xs); }
    .admin-search { max-width: none; }
}
@media (max-width: 600px) {
    .admin-table thead th,
    .admin-table tbody td { padding: 8px 10px; font-size: var(--text-2xs); }
    .admin-table thead th:nth-child(4),
    .admin-table tbody td:nth-child(4),
    .admin-table thead th:nth-child(5),
    .admin-table tbody td:nth-child(5) { display: none; }
}

/* --- Entity cards (workspaces, locations, teams) ---
   used by: AdminWorkspacesTab.razor, AdminTeamsTab.razor,
            AdminLocationsTab.razor */
.entity-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.entity-card:hover {
    background: var(--canvas-subtle);
}
.entity-card.inactive { opacity: 0.55; border-style: dashed; }
.entity-card.inactive:hover { opacity: 0.8; }
.entity-card-header { display: flex; gap: 12px; align-items: flex-start; }
.entity-card-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.entity-card-info { flex: 1; min-width: 0; }
.entity-card-name { font-size: var(--text-md); font-weight: 500; color: var(--fg-default); display: flex; align-items: center; gap: 8px; }
.entity-card-desc { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.5; margin-top: 2px; }
.entity-card-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.entity-meta-item { display: flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--fg-subtle); font-family: var(--font-mono); }
.entity-card-actions { display: flex; gap: 6px; border-top: 1px solid var(--border-muted); padding-top: 12px; }

.entity-btn {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--canvas-default);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}
.entity-btn:hover { background: var(--canvas-subtle); color: var(--fg-default); }
.entity-btn.deactivate { color: var(--fg-subtle); }
.entity-btn.deactivate:hover { background: var(--danger-subtle); border-color: var(--danger-muted); color: var(--danger-fg); }
.entity-btn.reactivate { color: var(--fg-subtle); }
.entity-btn.reactivate:hover { background: var(--success-subtle); border-color: var(--success-muted); color: var(--success-fg); }

.inactive-badge {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--danger-subtle);
    border: 1px solid var(--danger-muted);
    font-size: var(--text-10);
    font-weight: 500;
    color: var(--danger-fg);
    font-family: var(--font-mono);
}

/* ── Users section: shared across the list, view and edit pages ──
   Promoted from the old AdminUsersTab.razor.css so the routed
   /settings/users/{id} view/edit pages reuse the same chips/badges. */
.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-fg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 500;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* Role badge */
.role-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--text-2xs);
    font-weight: 500;
    font-family: var(--font-mono);
    background: var(--canvas-inset);
    border: 1px solid var(--border-default);
    color: var(--fg-muted);
}

.role-badge.operator {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-fg);
}

.role-badge.manager {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: var(--done-fg);
}

.role-badge.staff {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success-fg);
}

/* Access (surface grant) chips — which surfaces a user reaches */
.grant-chip {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--text-10);
    font-weight: 500;
    font-family: var(--font-mono);
    background: var(--canvas-inset);
    border: 1px solid var(--border-default);
    color: var(--fg-muted);
}

.grant-chip.portal {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: var(--done-fg);
}

.grant-chip.staff {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.25);
    color: var(--info-fg);
}

/* Team chips */
.team-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.team-chip {
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    font-size: var(--text-10);
    font-weight: 500;
    color: var(--info-fg);
    font-family: var(--font-mono);
}

.team-add-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed var(--border-default);
    background: none;
    color: var(--fg-subtle);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.team-add-chip:hover {
    border-color: var(--accent-fg);
    color: var(--accent-fg);
    background: rgba(59, 130, 246, 0.08);
}

/* Read-only key/value rows on the user View page. */
.user-view-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 20px;
    align-items: baseline;
}

.user-view-grid dt {
    color: var(--fg-subtle);
    font-size: var(--text-sm);
}

.user-view-grid dd {
    margin: 0;
    color: var(--fg-default);
    font-size: var(--text-sm);
}

/* ── Risk register: promoted from AdminRisksTab.razor.css so the routed
   Risk edit page (/settings/risk/{id}/edit) shares the list + form styles. */
.ar-ws-filter { min-width: 200px; }

.ar-sev {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ar-cat,
.ar-ws {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--fg-muted);
}

.ar-ws { margin-left: auto; }

/* Related modules (risk edit form) */
.ar-mod-hint {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    padding: 4px 0;
}

.ar-mod-list {
    display: flex;
    flex-direction: column;
    margin: 4px 0 8px;
}

.ar-mod-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-default);
}

.ar-mod-row:last-child { border-bottom: none; }

.ar-mod-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-default);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ar-mod-meta {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.ar-mod-add-head {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}

.ar-mod-search {
    width: 100%;
    padding: 7px 10px;
    font-size: var(--text-sm);
    color: var(--fg-default);
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    outline: none;
}

.ar-mod-search:focus { border-color: var(--accent-fg); }

.ar-mod-icon-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 2px;
}

.ar-mod-icon-btn:hover:not(:disabled) { color: var(--tone-danger-fg); }

.ar-mod-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-default);
    cursor: pointer;
    flex-shrink: 0;
}

.ar-mod-link-btn:hover:not(:disabled) {
    border-color: var(--accent-fg);
    color: var(--accent-fg);
}

.ar-mod-icon-btn:disabled,
.ar-mod-link-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Business context size picker: promoted from AdminBusinessTab.razor.css
   so the routed Business edit page (/settings/business/edit) shares it. */
.size-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.size-option {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--canvas-subtle);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.size-option:hover {
    border-color: var(--accent-fg);
    color: var(--accent-fg);
}

.size-option.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--accent-fg);
}