/**
 * MilitarySci — Workspace Layer v5.0 "Dark Galaxy Intelligence"
 * ---------------------------------------------------------------
 * Additive layer over dashboard.css (loads after it via dep chain).
 * Scope: app shells only (body.msi-app-surface) + dashboard primitives
 * that were referenced by templates but never styled (statsband,
 * createpanel, keyreveal, code, notices, formactions).
 *
 * Rules:
 *   - --ms-* tokens ONLY (no --msi-* legacy aliases).
 *   - Logical properties only (inline/block/inset-*).
 *   - Role-family accents through --ms-ws-accent, set from path-based
 *     body classes: member = violet · company = teal ·
 *     exhibitor/organizer = cobalt · control center = accent orange.
 */

/* ============================================================
   1. WORKSPACE ACCENT SYSTEM (role families)
   ============================================================ */
body.msi-app-surface {
        --ms-ws-accent:      var(--ms-color-violet);
        --ms-ws-accent-soft: var(--ms-color-violet-soft);
        --ms-ws-accent-line: color-mix(in srgb, var(--ms-color-violet) 38%, transparent);
}
body.msi-ws-company {
        --ms-ws-accent:      var(--ms-color-teal);
        --ms-ws-accent-soft: var(--ms-color-teal-soft);
        --ms-ws-accent-line: color-mix(in srgb, var(--ms-color-teal) 38%, transparent);
}
body.msi-ws-exhibitor,
body.msi-ws-exhibitions {
        --ms-ws-accent:      var(--ms-color-cobalt);
        --ms-ws-accent-soft: var(--ms-color-cobalt-soft);
        --ms-ws-accent-line: color-mix(in srgb, var(--ms-color-cobalt) 38%, transparent);
}
body.msi-ws-control-center {
        --ms-ws-accent:      var(--ms-color-accent);
        --ms-ws-accent-soft: var(--ms-color-accent-soft);
        --ms-ws-accent-line: var(--ms-color-accent-line);
}

/* Topbar on app surfaces — quieter hairline, operational depth. */
body.msi-app-surface .msi-header {
        border-block-end-color: var(--ms-color-hairline);
        box-shadow: var(--ms-shadow-1);
}

/* ============================================================
   2. SHELL GRID + SIDEBAR (glass surface, hairline seams)
   ============================================================ */
.msi-appshell {
        grid-template-columns: 264px minmax(0, 1fr);
}

.msi-app-surface .msi-appsidebar {
        background: var(--ms-color-glass);
        backdrop-filter: blur(12px) saturate(1.25);
        -webkit-backdrop-filter: blur(12px) saturate(1.25);
        border-inline-end: 1px solid var(--ms-color-hairline);
        padding-block-start: var(--ms-space-6);
}

/* Group caption with trailing hairline. */
.msi-app-surface .msi-appnav__grouptitle {
        display: flex;
        align-items: center;
        gap: var(--ms-space-2);
        margin-block: 0 var(--ms-space-3);
        padding-inline: var(--ms-space-3);
        font-family: var(--ms-font-display);
        font-weight: 600;
}
.msi-app-surface .msi-appnav__grouptitle::after {
        content: "";
        flex: 1;
        block-size: 1px;
        background: var(--ms-color-hairline);
}

/* Nav items — quiet by default, family accent when current. */
.msi-app-surface .msi-appnav__list { gap: 2px; }
.msi-app-surface .msi-appnav__item { position: relative; }
.msi-app-surface .msi-appnav__link {
        inline-size: 100%;
        box-sizing: border-box;
        padding: 9px var(--ms-space-3);
        border: 1px solid transparent;
        border-radius: var(--ms-radius-sm);
        font-size: var(--ms-fs-small);
        line-height: var(--ms-lh-tight);
        color: var(--ms-color-text-secondary);
}
.msi-app-surface .msi-appnav__link:hover {
        background: var(--ms-color-surface-hi);
        border-color: var(--ms-color-hairline);
        color: var(--ms-color-text);
}
.msi-app-surface .msi-appnav__link:focus-visible {
        outline: none;
        box-shadow: var(--ms-focus-ring);
}
.msi-app-surface .msi-appnav__link[aria-current="page"] {
        background: var(--ms-ws-accent-soft);
        border-color: var(--ms-ws-accent-line);
        color: var(--ms-ws-accent);
        box-shadow: none;
        font-weight: 600;
}
.msi-app-surface .msi-appnav__link[aria-current="page"]::before {
        content: "";
        position: absolute;
        inset-block: 22%;
        inset-inline-start: 0;
        inline-size: 2px;
        border-radius: var(--ms-radius-pill);
        background: var(--ms-ws-accent);
}
.msi-app-surface .msi-appnav__icon {
        inline-size: 22px;
        color: var(--ms-color-text-tertiary);
        transition: color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-app-surface .msi-appnav__link:hover .msi-appnav__icon { color: var(--ms-color-text-secondary); }
.msi-app-surface .msi-appnav__link[aria-current="page"] .msi-appnav__icon { color: var(--ms-ws-accent); }

/* ============================================================
   3. MAIN COLUMN + PAGE HEAD
   ============================================================ */
.msi-app-surface .msi-appmain {
        background-image: var(--ms-atmo-vignette);
}

.msi-app-surface .msi-apphead { gap: var(--ms-space-5); }
.msi-app-surface .msi-apphead__title {
        font-family: var(--ms-font-display);
        font-weight: 700;
        line-height: 1.35; /* Arabic ascender headroom in Changa */
        padding-inline-start: var(--ms-space-3);
        border-inline-start: 3px solid var(--ms-ws-accent);
}
.msi-app-surface .msi-apphead__desc {
        color: var(--ms-color-text-tertiary);
        font-size: var(--ms-fs-small);
}

.msi-app-surface .msi-appgrid { gap: var(--ms-space-4); }

/* ============================================================
   4. PANELS AS OPERATIONAL SURFACES
   ============================================================ */
.msi-app-surface .msi-panel {
        box-shadow: var(--ms-shadow-1);
}
.msi-app-surface .msi-panel__head {
        background: var(--ms-color-bg-secondary);
        border-block-end: 1px solid var(--ms-color-hairline);
        padding-block: var(--ms-space-3);
}
.msi-app-surface .msi-panel__title { font-size: var(--ms-fs-body); }
.msi-app-surface .msi-panel__title .msi-icon,
.msi-app-surface .msi-panel__title svg { color: var(--ms-ws-accent); }

/* Direct panel children carry their own inset (templates rely on it). */
.msi-app-surface .msi-panel > :not(.msi-panel__head):not(.msi-tablewrap):not(.msi-panel__body) {
        padding-inline: var(--ms-space-5);
        padding-block: var(--ms-space-4);
}
.msi-app-surface .msi-panel > .msi-empty {
        padding-block: var(--ms-space-8) var(--ms-space-6);
}

/* Tables sit flush under the panel toolbar. */
.msi-app-surface .msi-panel > .msi-tablewrap {
        border: 0;
        border-radius: 0;
        background: transparent;
}
.msi-app-surface .msi-table td strong,
.msi-app-surface .msi-table strong { color: var(--ms-color-text); }

/* ============================================================
   5. STATS — statsband (was unstyled) + statcard tones
   ============================================================ */
.msi-statsband {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.msi-statsband--grid { gap: var(--ms-space-3); }
.msi-statsband__cell {
        display: grid;
        gap: 3px;
        padding: var(--ms-space-4) var(--ms-space-5);
        background: var(--ms-color-surface-raised);
        border: 1px solid var(--ms-color-hairline);
        border-block-start: 2px solid var(--ms-ws-accent-line);
        border-radius: var(--ms-radius-lg);
        box-shadow: var(--ms-shadow-inset);
}
.msi-statsband__num {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h2);
        font-weight: 600;
        line-height: 1.15;
        color: var(--ms-color-text);
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: embed;
}
.msi-statsband__label {
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
}

/* Stat cards — tone hairline comes from the tone or the family accent. */
.msi-statcard--gold   { --ms-ws-stat: var(--ms-color-amber); }
.msi-statcard--green  { --ms-ws-stat: var(--ms-color-green); }
.msi-statcard--violet { --ms-ws-stat: var(--ms-color-violet); }
.msi-statcard--cobalt { --ms-ws-stat: var(--ms-color-cobalt); }
.msi-statcard--teal   { --ms-ws-stat: var(--ms-color-teal); }
.msi-app-surface .msi-statcard {
        --ms-ws-stat: var(--ms-ws-accent);
        gap: 4px;
        padding: var(--ms-space-4) var(--ms-space-5);
        background: var(--ms-color-surface-raised);
}
.msi-app-surface .msi-statcard::before {
        background: linear-gradient(90deg, var(--ms-ws-stat), transparent 72%);
        opacity: .5;
}
.msi-app-surface .msi-statcard:hover::before { opacity: 1; }
.msi-app-surface .msi-statcard:hover {
        border-color: color-mix(in srgb, var(--ms-ws-stat) 36%, transparent);
}
.msi-app-surface .msi-statcard__value { font-size: var(--ms-fs-h2); }
html[dir="rtl"] .msi-app-surface .msi-statcard::before {
        background: linear-gradient(270deg, var(--ms-ws-stat), transparent 72%);
}

/* ============================================================
   6. ROW LISTS / TASKS + NOTIFICATIONS
   ============================================================ */
.msi-app-surface .msi-rows { gap: var(--ms-space-2); }
.msi-app-surface .msi-rowcard {
        border-radius: var(--ms-radius-md);
        padding-block: var(--ms-space-3);
        transition:
                border-color var(--ms-dur-fast) var(--ms-ease-out),
                background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-app-surface .msi-rowcard:hover {
        border-color: var(--ms-color-border-strong);
        background: var(--ms-color-surface-raised);
}
.msi-app-surface .msi-rowcard__title { font-size: var(--ms-fs-small); }
.msi-app-surface .msi-rowcard__title a { color: var(--ms-color-text); }
.msi-app-surface .msi-rowcard__title a:hover { color: var(--ms-ws-accent); }

.msi-app-surface .msi-notif {
        position: relative;
        overflow: hidden;
        gap: var(--ms-space-3);
        padding: var(--ms-space-3) var(--ms-space-4);
        background: transparent;
        border: 1px solid var(--ms-color-hairline);
        border-radius: var(--ms-radius-md);
        transition: border-color var(--ms-dur-fast) var(--ms-ease-out), background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-app-surface .msi-notif:hover {
        background: var(--ms-color-surface-hi);
        border-color: var(--ms-color-border);
}
.msi-app-surface .msi-notif:not(.is-read)::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 2px;
        background: var(--ms-ws-accent);
        opacity: .75;
}
.msi-app-surface .msi-notif__text { font-size: var(--ms-fs-small); }
.msi-app-surface .msi-notif__desc { font-size: var(--ms-fs-small); color: var(--ms-color-text-tertiary); }

/* ============================================================
   7. QUICK CREATE (was unstyled)
   ============================================================ */
.msi-app-surface .msi-createpanel__desc {
        margin: 0;
        padding-block-end: var(--ms-space-4);
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-tertiary);
}
.msi-createpanel__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--ms-space-3);
}
.msi-createpanel__item {
        display: flex;
        align-items: center;
        gap: var(--ms-space-3);
        padding: var(--ms-space-3) var(--ms-space-4);
        background: var(--ms-color-surface-raised);
        border: 1px solid var(--ms-color-hairline);
        border-radius: var(--ms-radius-md);
        color: var(--ms-color-text-secondary);
        font-size: var(--ms-fs-small);
        font-weight: 500;
        transition:
                border-color var(--ms-dur-fast) var(--ms-ease-out),
                color var(--ms-dur-fast) var(--ms-ease-out),
                transform var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-createpanel__item:hover {
        border-color: var(--ms-ws-accent-line);
        color: var(--ms-color-text);
        transform: translateY(-1px);
}
.msi-createpanel__icon {
        display: inline-grid;
        place-items: center;
        inline-size: 26px;
        block-size: 26px;
        border-radius: var(--ms-radius-sm);
        background: var(--ms-ws-accent-soft);
        color: var(--ms-ws-accent);
        flex-shrink: 0;
}
.msi-createpanel__icon svg { inline-size: 14px; block-size: 14px; }
.msi-createpanel__label { flex: 1; min-inline-size: 0; }
.msi-createpanel__cta {
        display: inline-grid;
        place-items: center;
        color: var(--ms-color-text-quaternary);
        transition: color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-createpanel__cta svg { inline-size: 14px; block-size: 14px; }
.msi-createpanel__item:hover .msi-createpanel__cta { color: var(--ms-ws-accent); }

/* ============================================================
   8. API KEYS / CODE / NOTICES / FORMS (were unstyled)
   ============================================================ */
.msi-app-surface .msi-code {
        display: inline-block;
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-tiny);
        line-height: 1.7;
        padding: 2px var(--ms-space-2);
        background: var(--ms-color-bg-deep);
        border: 1px solid var(--ms-color-hairline);
        border-radius: var(--ms-radius-sm);
        color: var(--ms-color-text-secondary);
        direction: ltr;
        unicode-bidi: embed;
        overflow-wrap: anywhere;
}
.msi-app-surface .msi-code--lg {
        font-size: var(--ms-fs-body);
        padding: var(--ms-space-3) var(--ms-space-4);
        color: var(--ms-color-text);
        border-color: var(--ms-color-border);
}
.msi-app-surface .msi-code--block {
        display: block;
        padding: var(--ms-space-4);
        overflow-x: auto;
        white-space: pre;
}
.msi-app-surface .msi-keyreveal {
        display: flex;
        align-items: center;
        gap: var(--ms-space-3);
        flex-wrap: wrap;
}

.msi-app-surface .msi-notice {
        padding: var(--ms-space-3) var(--ms-space-4);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-md);
        background: var(--ms-color-surface);
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-secondary);
}
.msi-app-surface .msi-notice p { margin: 0; }
.msi-app-surface .msi-notice--error {
        border-color: var(--ms-color-danger-soft);
        background: var(--ms-color-danger-soft);
        color: var(--ms-color-danger);
}

.msi-app-surface .msi-form--inline {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--ms-space-3);
}
.msi-app-surface .msi-form--inline .msi-field__label {
        inline-size: 100%;
        margin-block-end: var(--ms-space-1);
}
.msi-app-surface .msi-form--inline .msi-input { inline-size: min(380px, 100%); }
.msi-app-surface .msi-formactions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-3);
}

/* Facts list (API scope) — entities.css does not load on app surfaces. */
.msi-app-surface .msi-facts {
        margin: 0;
        display: grid;
}
.msi-app-surface .msi-facts__row {
        display: grid;
        grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
        gap: var(--ms-space-2) var(--ms-space-5);
        padding: var(--ms-space-3) 0;
        border-block-end: 1px solid var(--ms-color-hairline);
}
.msi-app-surface .msi-facts__row:last-child { border-block-end: 0; }
.msi-app-surface .msi-facts__label {
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
        padding-block-start: 2px;
}
.msi-app-surface .msi-facts__value {
        margin: 0;
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text);
        overflow-wrap: anywhere;
}

/* ============================================================
   9. BADGES — tones referenced by dashboards, never defined
   ============================================================ */
.msi-badge--gold  { border-color: transparent; background: var(--ms-color-amber-soft); color: var(--ms-color-amber); }
.msi-badge--green { border-color: transparent; background: var(--ms-color-green-soft); color: var(--ms-color-success); }
.msi-badge--muted { background: transparent; border-color: var(--ms-color-hairline); color: var(--ms-color-text-quaternary); }

/* ============================================================
   10. CONTROL CENTER / QUICK-AREA CARDS
   ============================================================ */
.msi-app-surface .msi-cc-top { padding-block: var(--ms-space-3); }
.msi-app-surface .msi-cccard__icon { color: var(--ms-ws-accent); }
.msi-app-surface .msi-cccard:hover { border-color: var(--ms-ws-accent-line); }
.msi-app-surface .msi-segpill.is-active {
        background: var(--ms-ws-accent-soft);
        border-color: var(--ms-ws-accent-line);
        color: var(--ms-ws-accent);
}

/* ============================================================
   11. RESPONSIVE — 900 / 640
   ============================================================ */
@media (max-width: 600px) {
        body.msi-admin-bar .msi-header { inset-block-start: 0; }
}

@media (max-width: 900px) {
        .msi-appshell { grid-template-columns: 1fr; }

        /* Sidebar collapses into a horizontal pill row. */
        .msi-app-surface .msi-appsidebar {
                padding: var(--ms-space-3) var(--ms-space-4);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                background: var(--ms-color-bg-secondary);
        }
        .msi-app-surface .msi-appnav__grouptitle { display: none; }
        .msi-app-surface .msi-appnav__list {
                display: flex;
                flex-wrap: wrap;
                gap: var(--ms-space-1);
        }
        .msi-app-surface .msi-appnav__link { inline-size: auto; padding: 7px var(--ms-space-3); }
        .msi-app-surface .msi-appnav__link[aria-current="page"]::before { display: none; }

        /* Legacy admin-bar min-height kept the collapsed sidebar
           viewport-tall on mobile — collapse it fully. The compound
           body selector out-specifies legacy body.msi-admin-bar rule. */
        body.msi-admin-bar.msi-app-surface .msi-appsidebar,
        .msi-app-surface .msi-appsidebar {
                position: static;
                min-height: 0;
        }
}

@media (max-width: 640px) {
        .msi-app-surface .msi-appmain { padding-block: var(--ms-space-5); }
        .msi-app-surface .msi-apphead__title { font-size: var(--ms-fs-h2); }
        .msi-app-surface .msi-apphead__actions { inline-size: 100%; }

        .msi-statsband--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .msi-statsband__num { font-size: var(--ms-fs-h3); }
        .msi-statsband__cell { padding: var(--ms-space-3) var(--ms-space-4); }

        .msi-app-surface .msi-panel > :not(.msi-panel__head):not(.msi-tablewrap):not(.msi-panel__body) {
                padding-inline: var(--ms-space-4);
        }
        .msi-createpanel__grid { grid-template-columns: 1fr; }
        .msi-ccgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
        .msi-app-surface .msi-facts__row { grid-template-columns: 1fr; gap: 2px; }
        .msi-app-surface .msi-code--lg {
                font-size: var(--ms-fs-small);
                overflow-wrap: anywhere;
                white-space: normal;
        }
        .msi-app-surface .msi-code--block { white-space: pre-wrap; }
}