/* ============================================================================
   admin.css — the admin/workspace app (MainLayout and everything inside it).
   Every rule is scoped under .admin-shell (the MainLayout root), so nothing
   here can leak into the marketing site. Shared foundations (fonts, brand
   tokens, error UI) live in css/tokens.css. Conventions: docs/admin-ui.md.

   Structure:
     1. Shell tokens (--ds-*)
     2. Header band (navy) — brand, area nav, icon buttons, headline
     3. Sidebar card + navigation
     4. Content surface
     5. Component kit — themed Bootstrap defaults (cards, tables, buttons, badges)
   ========================================================================= */

/* ---------- 1. Shell tokens ---------- */
.admin-shell {
    --ds-sidebar-w: 15rem;
    --ds-surface-muted: #eef0f5;
    --ds-shadow-sm: 0 0.125rem 0.5rem rgba(4, 20, 66, 0.07);
    --ds-shadow: 0 0.625rem 1.75rem rgba(4, 20, 66, 0.10);
    background-color: var(--ds-surface-muted);
}

/* Brand navy surface — kept for ad-hoc navy panels inside the admin app. */
.admin-shell .bg-doranis-navy {
    background-color: var(--ds-navy);
}

/* ---------- 2. Header band ---------- */
.admin-shell .admin-header {
    background-color: var(--ds-navy);
    /* Subtle diagonal sheen, echoing the reference design's textured band. */
    background-image: linear-gradient(112deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%);
    padding-bottom: 0.75rem;
}

/* The logo in a light-blue ring — the shell's "avatar" spot. */
.admin-shell .admin-logo-ring {
    display: inline-flex;
    padding: 0.2rem;
    border: 2px solid var(--ds-blue-light);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
}

    .admin-shell .admin-logo-ring img {
        display: block;
        border-radius: 50%;
    }

/* SALES / SERVICE / PAYMENTS: quiet caps that light up (underline in the ring blue) when active. */
.admin-shell .admin-area-nav .nav-link {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.03em;
}

    .admin-shell .admin-area-nav .nav-link:hover,
    .admin-shell .admin-area-nav .nav-link:focus {
        color: #fff;
    }

    .admin-shell .admin-area-nav .nav-link.active {
        color: #fff;
        box-shadow: inset 0 -2px 0 var(--ds-blue-light);
    }

/* Below lg the area nav and the headline take their own toolbar rows, so the brand and the
   user cluster keep the first row on narrow screens instead of overflowing. */
@media (max-width: 991.98px) {
    .admin-shell .admin-area-nav {
        order: 10;
        width: 100%;
        margin-top: 0.25rem;
    }

    .admin-shell .admin-headline {
        order: 12;
        width: 100%;
        margin: 0.25rem 0 0.25rem;
    }
}

/* Round translucent icon buttons (bell, cog) on the navy band — a Bootstrap button variant
   expressed purely through the documented --bs-btn-* variables. */
.admin-shell .admin-icon-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0.10);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.30);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: rgba(255, 255, 255, 0.4);
    --bs-btn-disabled-bg: rgba(255, 255, 255, 0.06);
    --bs-btn-disabled-border-color: transparent;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The global account/contact search — a floating white field with the magnifying glass inside,
   sitting in the navy band right next to the brand. */
.admin-shell .admin-search .bi-search {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.admin-shell .admin-search-input {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow: var(--ds-shadow-sm);
    padding-left: 2.5rem;
    width: 20rem;
    max-width: 100%;
}

    .admin-shell .admin-search-input:focus {
        box-shadow: var(--ds-shadow-sm), 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
    }

/* The page headline (title + breadcrumb via <AdminPageHeader>) — tops the content column, on
   the grey surface. Collapses on pages that render their own headline. */
.admin-shell .admin-headline:not(:empty) {
    margin-bottom: 1rem;
}

.admin-shell .admin-headline .breadcrumb {
    font-size: 0.875rem;
}

/* ---------- 3. Sidebar card + navigation ---------- */
.admin-shell .admin-sidebar {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: var(--ds-shadow-sm);
    margin-top: 1rem; /* below lg: a block between the band and the content */
}

/* Menu links: calm by default, navy + a left bar in the ring blue when active. */
.admin-shell .admin-sidebar .nav {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--ds-navy);
}

.admin-shell .admin-sidebar .nav-pills {
    --bs-nav-pills-link-active-bg: rgba(110, 168, 254, 0.12);
    --bs-nav-pills-link-active-color: var(--ds-navy);
}

.admin-shell .admin-sidebar .nav-link.active {
    color: var(--ds-navy);
    font-weight: 600;
}

.admin-shell .admin-sidebar .nav-pills > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 var(--ds-blue-light);
}

/* ---------- 4. Content surface ---------- */
.admin-shell .admin-main {
    min-width: 0; /* let tables/kanban scroll instead of widening the column */
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

/* ---------- 5. Component kit ----------
   Themed defaults, so plain Bootstrap markup is correct by default: write
   `card`, not `card border-0 shadow-sm rounded-4`. Extend ONLY through the
   documented --bs-* component variables — never restyle component internals. */

/* Cards float: borderless, soft radius, one shadow token. */
.admin-shell .card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0.5rem;
    --bs-card-inner-border-radius: calc(0.5rem - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--ds-shadow-sm);
}

/* Table headers: quiet uppercase labels, like the reference's list views. */
.admin-shell .table > thead {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

/* The action accent — the shell's call-to-action button (the reference's teal CTA),
   expressed purely through Bootstrap's documented button variables. */
.admin-shell .btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ds-accent);
    --bs-btn-border-color: var(--ds-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1fa3d8;
    --bs-btn-hover-border-color: #1fa3d8;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1b93c4;
    --bs-btn-active-border-color: #1b93c4;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ds-accent);
    --bs-btn-disabled-border-color: var(--ds-accent);
    --bs-btn-focus-shadow-rgb: 53, 182, 232;
    font-weight: 600;
}

/* Attention-count pill (the sidebar's "9+"): pair with .badge. */
.admin-shell .admin-count-badge {
    background-color: var(--ds-pink);
    color: #fff;
    border-radius: 50rem;
}

/* StatTile's icon disc (see StatTile.razor). */
.admin-shell .stat-tile-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ds-surface-muted);
    font-size: 1.25rem;
}

/* Small variant for list rows (call backs, the dashboard's inbox rows). */
.admin-shell .stat-tile-icon-sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

/* The Task List's Filter tile: a subtle brand tint so the filter mechanism reads as one. */
.admin-shell .admin-filter-card {
    background-color: rgba(110, 168, 254, 0.10);
}

/* The Opportunity journey bar (OpportunityJourney.razor): equal-width steps, a 2px line running
   through the dot centres, halves colored independently so progress stops exactly where the deal
   stands. */
.admin-shell .opp-journey {
    display: flex;
}

.admin-shell .opp-step {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    min-width: 0;
}

.admin-shell .opp-line {
    position: absolute;
    top: 1rem;
    height: 2px;
    background-color: var(--bs-border-color);
}

.admin-shell .opp-line.start {
    left: 0;
    right: 50%;
    margin-right: 1.375rem;
}

.admin-shell .opp-line.end {
    left: 50%;
    right: 0;
    margin-left: 1.375rem;
}

.admin-shell .opp-line.reached {
    background-color: var(--bs-success);
}

.admin-shell .opp-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    font-size: .875rem;
}

.admin-shell .opp-step-label {
    margin-top: .375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 .25rem;
}

.admin-shell .opp-step-date {
    font-size: .75rem;
}

/* The Leads overview's activity log (LeadsActivityLog.razor): a fixed time gutter and a
   continuous vertical rail the cards hang off (the row's bottom padding sits INSIDE the flex row,
   so the rail never breaks between cards). */
.admin-shell .admin-log-time {
    width: 3.5rem;
    flex-shrink: 0;
    padding-top: 1rem;
}

.admin-shell .admin-log-rail {
    width: 2px;
    flex-shrink: 0;
    background-color: var(--bs-border-color);
    margin: 0 1.25rem 0 1rem;
}

/* The log tile's body: capped so 20 entries scroll inside the card, not the page. */
.admin-shell .admin-log-body {
    max-height: 36rem;
    overflow-y: auto;
}

/* The owner chip's suggestion dropdown (LeadOwnerChip.razor). */
.admin-shell .admin-assign-dropdown {
    z-index: 1050;
    max-height: 12rem;
    overflow-y: auto;
    min-width: max(100%, 13rem);
}

/* The inbox reading pane's sandboxed message body (InboxView.razor). */
.admin-shell .admin-mail-frame {
    width: 100%;
    border: 0;
    min-height: 24rem;
    background-color: var(--bs-white);
}

/* Underlined icon tabs (InboundView.razor): icon + label riding a hairline, the active tab in
   the Doranis accent blue with a thick underline overlapping the hairline. */
.admin-shell .admin-tabs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.admin-shell .admin-tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

    .admin-shell .admin-tab:hover {
        color: var(--ds-navy);
    }

    .admin-shell .admin-tab.active {
        color: var(--ds-accent);
        border-bottom-color: var(--ds-accent);
    }

.admin-shell .admin-tab .bi {
    font-size: 1.125rem;
}

/* The activity entries: a whisper of the brand blue (fainter than .admin-filter-card). */
.admin-shell .admin-log-card {
    background-color: rgba(110, 168, 254, 0.07);
}

/* The admin shell's sticky footer (FeatureRequestFooter.razor): a slim white bar riding the
   viewport bottom. It lives in normal flow at the end of the shell's flex column — sticky keeps
   it visible while scrolling, margin-top pushes it down when the page is short. */
.admin-shell .admin-feature-footer {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    margin-top: auto;
    background-color: var(--bs-white);
    border-top: 1px solid var(--bs-border-color);
    /* --ds-shadow-sm, mirrored upward. */
    box-shadow: 0 -0.125rem 0.5rem rgba(4, 20, 66, 0.07);
}

/* lg+: compact band; the area nav docks right before the icon cluster; fixed-width sticky
   sidebar; the headline sits on the grey surface at the top of the content column. */
@media (min-width: 992px) {
    .admin-shell .admin-area-nav {
        margin-right: 6rem;
    }

    .admin-shell .admin-sidebar {
        width: var(--ds-sidebar-w);
        flex-shrink: 0;
        position: sticky;
        top: 1rem;
        margin-top: 1.5rem;
    }

    .admin-shell .admin-main {
        padding-top: 1.5rem;
    }
}