/* ============================================================================
   Athena Deploy Center — Application shell (tactical-ops)
   ----------------------------------------------------------------------------
   The authenticated chrome: the left rail, the nav, the top bar — plus the
   stat/content card primitives and the base .btn / .table / .status /
   .action-btn rules the page sections build on.

   The chrome half of this file is the tactical-ops translation of the <aside>
   and <header> in Mock/tactical-ops/dashboard.html, matching the language the
   sign-in screen already ships (Pages/Login.razor + Login.razor.css). The big
   move is an INVERSION: the rail was a #1e3a8a→#075985 navy gradient with white
   text and emoji icons; it is now the mock's light #e2e8f1 surface with dark
   ink and stroke SVG icons.

   The primitives below the chrome (.stats, .content-card, .btn, .table,
   .status, .action-btn) are deliberately left as they were — the Dashboard and
   Agents page conversions own those, and restyling them here would collide.

   CASCADE — three rules this file must respect:
     1. It is linked BEFORE site.css in _Host.cshtml, so every page section that
        re-declares one of these selectors (.btn, .content-card, .card-title,
        .stat-label, .status, .user-info, .action-btn) still wins. Unchanged.
     2. responsive.css is linked AFTER site.css and owns the Phase 32-36 mobile
        shell — `.hamburger-btn { display: flex }`, `.sidebar { position: fixed }`
        and the drawer transition. Nothing here may out-rank those, so this file
        never sets `display` on .hamburger-btn or `position` on .sidebar at a
        higher specificity, and it contains no @media blocks of its own.
     3. The mock's rail is 232px, not the 250px `--sidebar-width` that site.css
        declares on :root. The new width is declared on `.container` (below) so
        it INHERITS to .sidebar — which is what responsive.css's drawer reads —
        without editing site.css or responsive.css.
   ============================================================================ */

.container {
    display: flex;
    min-height: 100vh;

    /* See cascade note 3. Custom properties inherit down the DOM, so both the
       .sidebar drawer and .wizard-actions (position:fixed, left: var(--sidebar-width),
       site.css) pick the new rail width up from here. */
    --sidebar-width: 232px;
}

/* ============================================================================
   Left rail
   ============================================================================ */

.sidebar {
    width: var(--sidebar-width);
    flex: none;
    display: flex;
    flex-direction: column;
    background: #e2e8f1;
    border-right: 1px solid #c6d0de;
    color: var(--tac-ink);
    font-family: var(--tac-body);
    font-size: var(--tac-fs-body);

    /* Per-rail token override, exactly as the mock's <aside> carries one: inside
       the rail the "surface" is the rail itself, so lines and the active-row wash
       are re-tuned to read against #e2e8f1 instead of white. Scoped to .sidebar —
       the :root values in tactical-tokens.css are untouched. */
    --tac-s1: #e2e8f1;
    --tac-line: #cfd8e4;
    --tac-acc-dim: rgba(3, 105, 161, 0.14);
}

/* Identity block — 56px, the same height as the top bar so the two align. */
.sidebar .logo {
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid var(--tac-line);
}

.sidebar .tac-brandmark {
    width: 26px;
    height: 26px;
    flex: none;
}

.sidebar .tac-brandmark-hex {
    stroke: var(--tac-acc);
    stroke-width: 1.4;
}

.sidebar .tac-brandmark-glyph {
    stroke: var(--tac-ink0);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar .tac-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.sidebar .tac-wordmark-name {
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tac-ink0);
}

.sidebar .tac-wordmark-sub {
    margin-top: 3px;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    /* 0.22em cost 17 chars x 2.64px = 45px of pure tracking, so "DEPLOYMENT CENTER"
       measured 167px inside a 159px wordmark slot and the ellipsis below ate it as
       "DEPLOYMENT CENT...". The product name is not a place to show an ellipsis.
       0.14em is still unmistakably tactical - the rail's other mono labels run
       0.04em to 0.1em - and lands the wordmark at ~151px with real slack. Keep the
       micro step: the fix is the tracking, not the size. */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-acc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav. Scrolls independently of the identity block so a short viewport (or a
   role with every entry unlocked) never pushes rows off the rail. */
.nav-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0 12px;
    overflow-y: auto;
    min-height: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    flex: none;
    padding: 0 14px 0 16px;
    border-left: 2px solid transparent;
    color: var(--tac-ink2);
    font-size: var(--tac-fs-body);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
    color: var(--tac-ink);
    background: rgba(3, 105, 161, 0.07);
    text-decoration: none;
}

.nav-item.active {
    color: var(--tac-ink);
    background: linear-gradient(90deg, var(--tac-acc-dim), transparent 70%);
    border-left-color: var(--tac-acc);
    font-weight: 600;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    line-height: 1;
}

.nav-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.nav-item.active svg {
    stroke: var(--tac-acc);
    opacity: 1;
}

.nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live firing-alert count on the Alerts nav entry (v10.0 Phase 126, ALRT-10).
   The ONLY count in the rail: the mock's "Agents 52" / "Deployments 3" numbers were
   dropped for want of a data source, but this one is real and pushed. margin-left: auto
   pushes it to the right edge of the flex row; rendered only when > 0, so there is no
   "zero" state to style. Restyled to the mock's .sev.crit chip — square, mono, tabular. */
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.09);
    color: var(--tac-crit);
    font-family: var(--tac-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================================
   Main content
   ============================================================================ */

.main-content {
    flex: 1;
    padding: var(--content-padding, 30px);
    overflow-x: hidden;
    min-width: 0;
    color: var(--tac-ink);
    font-family: var(--tac-body);

    /* Blueprint-grid ground — the same 32px treatment the sign-in screen uses
       (Layouts/LoginLayout.razor.css), replacing the flat grey. */
    background-color: #eef2f7;
    background-image:
        linear-gradient(rgba(3, 105, 161, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 105, 161, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
}

/* ============================================================================
   Top bar
   ============================================================================ */

.header {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--tac-line);

    /* Full-bleed across the content column. Pulling out by exactly the
       .main-content padding makes the bar measure the parent's padding-box width
       — with border-box sizing that is an exact fit, so it cannot overflow (and
       .main-content clips on x anyway). min-height, not height: responsive.css
       lets this bar wrap onto two rows on phone. */
    margin: calc(-1 * var(--content-padding, 30px));
    margin-bottom: var(--header-margin, 30px);
}

.header h1 {
    font-family: var(--tac-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
    letter-spacing: 0.04em;
    color: var(--tac-ink0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* App.razor:12 has <FocusOnNavigate Selector="h1" />, which stamps tabindex="-1" on the
   page title and focuses it on EVERY navigation so screen readers announce the new page.
   Chrome then paints its default focus ring, so a heavy black box has been sitting around
   the page title on every route change (visible in the old navy shell too — this predates
   the tactical-ops work).

   An earlier attempt used :focus:not(:focus-visible), on the assumption that programmatic
   focus never matches :focus-visible. Chrome disagrees: measured live, the focused h1
   reports matches(':focus-visible') === true, so that rule never applied and the black box
   was still there. Verified by screenshot, not by reading the spec.

   The [tabindex="-1"] qualifier is what makes the blanket :focus safe. A negative tabindex
   removes the element from the sequential focus order, so the Tab key can never land here
   and there is no keyboard affordance to lose; the only paths in are FocusOnNavigate and a
   mouse click. The a11y purpose of the focus move — the screen-reader announcement — does
   not depend on a visible ring. Keep the attribute selector: without it this would strip
   the ring from every h1, including any that IS keyboard-reachable. */
.header h1[tabindex="-1"]:focus {
    outline: none;
}

/* The hamburger's base display lives in site.css and its `flex` in responsive.css;
   only the ink is restated here, at a specificity that beats site.css's navy but
   touches nothing about layout. See cascade note 2. */
.header .hamburger-btn:hover {
    background: rgba(3, 105, 161, 0.08);
}

.header .hamburger-btn .hamburger-line {
    background: var(--tac-ink0);
}

/* ---------------------------------------------------------------- identity */

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: none;
}

/* DOM order is <span class="tac-user-id"> then the .avatar tile, because
   responsive.css hides `.user-info > span:first-child` on phone to keep the bar
   from overflowing. The mock's visual order — tile first, then the name — is
   produced here with `order` rather than by reshuffling the markup. */
.tac-user-id {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    min-width: 0;
}

.tac-user-name {
    font-size: var(--tac-fs-meta);
    font-weight: 600;
    color: var(--tac-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tac-user-role {
    display: flex;
    align-items: center;
    font-family: var(--tac-mono);
    font-size: var(--tac-fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tac-ink3);
    white-space: nowrap;
}

/* The separator is generated, not markup: it is punctuation, and the adjacent
   sibling combinator means it only appears when there IS a role to separate. */
.tac-user-provider + .tac-user-rolename::before {
    content: "\00B7";
    margin: 0 5px;
}

/* The bracketed initials tile — the round #60a5fa circle is gone. Kept on the
   `.avatar` class so responsive.css's 44px phone touch target still applies. */
.avatar {
    order: 1;
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--tac-acc);
    color: var(--tac-acc);
    font-family: var(--tac-display);
    font-weight: 700;
    font-size: var(--tac-fs-meta);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.avatar:hover {
    background: var(--tac-acc);
    color: #ffffff;
}

/* ------------------------------------------------------------- account menu */

.user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    min-width: 190px;
    z-index: 1000;
    overflow: hidden;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    color: var(--tac-ink);
    font-size: var(--tac-fs-meta);
}

.user-menu-item:hover {
    background: rgba(3, 105, 161, 0.07);
    color: var(--tac-ink0);
}

.user-menu-divider {
    height: 1px;
    background: var(--tac-line);
    margin: 4px 0;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    line-height: 1;
}

.user-menu-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

/* ============================================================================
   Page primitives — NOT part of the shell restyle.

   Everything below this line is carried over from the pre-tactical-ops shell,
   structurally untouched. The Dashboard and Agents conversions own these
   selectors; they are listed here only because this file is where they have
   always lived.

   The one exception: the four navy ink values (#1e3a8a on .stat-value and
   .card-title, #075985 on .btn-primary:hover and .status.running) were retired
   to the tactical palette, so no navy survives anywhere in the shell sheet.
   Sizes, spacing and structure are unchanged.
   ============================================================================ */

/* Stats Cards */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gap, 20px);
    margin-bottom: var(--header-margin, 30px);
}

.stat-card {
    background: white;
    padding: var(--card-padding, 25px);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid #60a5fa;
    display: flex;
    align-items: center;
    gap: var(--card-gap, 20px);
}

.stat-card.success { border-left-color: #10b981; }
.stat-card.warning { border-left-color: #f59e0b; }
.stat-card.danger { border-left-color: #ef4444; }

.stat-value {
    font-size: 64px;
    font-weight: bold;
    color: var(--tac-acc-deep);
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.stat-label {
    color: #666;
    font-size: x-large;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: right;
}

.stat-trend {
    font-size: var(--tac-fs-display);
    color: #10b981;
    margin-top: 5px;
    text-align: right;
}

/* Content Cards */
.content-card {
    background: white;
    border-radius: 12px;
    padding: var(--card-padding, 25px);
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.card-title {
    font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 600;
    color: var(--tac-acc-deep);
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-fixed {
    min-width: 180px;
    text-align: center;
}

.btn-primary {
    background: #0369a1;
    color: white;
}

.btn-primary:hover {
    background: #075985;
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: #f8fafc;
}

.table th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
    color: #475569;
    font-size: var(--tac-fs-body);
}

.table td {
    padding: 15px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.table tr:hover {
    background: #f8fafc;
}

/* Status Badges */
.status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: var(--tac-fs-micro);
    font-weight: 600;
    display: inline-block;
}

.status.online { background: #dcfce7; color: #166534; }
.status.offline { background: #fee2e2; color: #991b1b; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.running { background: #eef5fa; color: #075985; }
.status.completed { background: #dcfce7; color: #166534; }
.status.failed { background: #fee2e2; color: #991b1b; }
.status.maintenance { background: #fef3c7; color: #92400e; border: 1px dashed #d97706; }
.status.skipped { background: #fef3c7; color: #92400e; border: 1px dashed #d97706; }

/* Actions */
.actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--tac-fs-meta);
    transition: all 0.2s;
}

.action-btn:hover {
    background: #f3f4f6;
    border-color: #0369a1;
    color: #0369a1;
}