/* ============================================================================
 * BigBreakingWire Prime — Premium Surface Layer (whole product)
 * ----------------------------------------------------------------------------
 * One additive stylesheet that gives every page the same premium finish:
 * refined canvas, glass top bar, calmer sidebar, deeper card depth, quieter
 * tables, consistent focus rings and motion. It is loaded LAST in <head> so
 * it can gently normalise the shell classes every template already renders.
 *
 * SAFETY CONTRACT — cosmetic only:
 * - No data, control, layout or display behaviour changes. No !important, no
 *   z-index changes, no width/height on functional nodes, no overflow edits.
 * - Rules target the existing shared vocabulary (.app-shell, .top-header,
 *   .side, .nav-item, .content, .panel, .panel-card, .ins-card, .fd-card …)
 *   and known page card shells. Marketing/auth pages keep their own sheets.
 * - Every value carries a var(--bbw-*, <canonical fallback>) fallback, so a
 *   page without the token sheet renders identically to this sheet's intent.
 * - Motion is opacity-only and disappears under prefers-reduced-motion.
 *
 * Load order: tokens -> shell -> components -> page CSS -> premium -> loader.
 * ========================================================================== */

:root {
    --bbw-prem-shadow-card: inset 0 1px 0 #ffffff,
        0 1px 2px rgba(11, 21, 38, .04),
        0 10px 28px -22px rgba(11, 21, 38, .38);
    --bbw-prem-shadow-float: 0 18px 48px -30px rgba(11, 21, 38, .5);
    --bbw-prem-canvas:
        radial-gradient(rgba(11, 42, 91, .038) 1px, transparent 1px),
        radial-gradient(1100px 460px at 18% -10%, rgba(255, 255, 255, .92), transparent 64%),
        linear-gradient(180deg, #f4f7fb 0%, #eef1f5 440px, #eef1f5 100%);
    --bbw-prem-canvas-size: 24px 24px, auto, auto;
    --bbw-prem-hairline: rgba(207, 216, 227, .72);
}

/* ---- §1 Global chrome ----------------------------------------------------- */

::selection {
    background: rgba(30, 86, 224, .16);
    color: inherit;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #c6d1de transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c6d1de;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #a8b6c7; background-clip: content-box; }

:where(a, button, [role="button"], summary):focus-visible {
    outline: 2px solid rgba(30, 86, 224, .55);
    outline-offset: 2px;
}

/* ---- §2 Application shell ------------------------------------------------- */

.app-shell {
    color: var(--bbw-ink, #0b1526);
    font-family: var(--bbw-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.app-shell > .top-header {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--bbw-prem-hairline);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -30px rgba(11, 21, 38, .55);
}

.app-shell .brand-mark {
    background: linear-gradient(150deg, #1745b5, #1e56e0 58%, #3f74ff);
    box-shadow: 0 4px 10px -6px rgba(30, 86, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.app-shell .side {
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 240px);
    border-right-color: var(--bbw-prem-hairline);
}

.app-shell .nav-item {
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.app-shell .nav-item:hover { background: #f4f7fb; }

.app-shell .nav-item.active {
    background: linear-gradient(90deg, #e9f0ff, #f3f7ff);
}

.app-shell .avatar-pill {
    transition: border-color .14s ease, box-shadow .14s ease;
}

.app-shell .avatar-pill:hover {
    border-color: var(--bbw-border-strong, #cfd8e3);
    box-shadow: 0 2px 10px -6px rgba(11, 21, 38, .35);
}

/* The content canvas: faint institutional dot grid over a soft top light. */
.app-shell > .shell-body > .content {
    background-image: var(--bbw-prem-canvas);
    background-size: var(--bbw-prem-canvas-size);
    background-repeat: no-repeat;
    background-attachment: local, scroll, scroll;
}

/* ---- §3 Surfaces --------------------------------------------------------- */

.app-shell :is(
    .panel,
    .panel-card,
    .ins-card,
    .ins-tile,
    .fd-card,
    .mf-card,
    .mf-table-card,
    .bg-card,
    .bg-chartcard,
    .pc-panel
) {
    border-color: #e3e8ef;
    box-shadow: var(--bbw-prem-shadow-card);
}

.app-shell :is(.panel-head, .ins-card-head, .mf-section-head) {
    border-bottom-color: #edf1f6;
}

.app-shell :is(.panel-title, .ins-card-title, .mf-section-title, .mc-title) {
    letter-spacing: -.2px;
}

.app-shell .ins-tile {
    transition: box-shadow .16s ease, border-color .16s ease;
}

.app-shell .ins-tile:hover {
    border-color: #d7e0ea;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(11, 21, 38, .04), 0 16px 34px -26px rgba(11, 21, 38, .48);
}

/* ---- §4 Tables ----------------------------------------------------------- */

.app-shell :is(
    .data-table,
    .ins-table,
    .fd-table,
    .mf-table,
    .bg-table,
    .dt-table
) th {
    letter-spacing: .06em;
}

.app-shell :is(
    .data-table,
    .ins-table,
    .fd-table,
    .mf-table,
    .bg-table,
    .dt-table
) td {
    font-variant-numeric: tabular-nums;
}

.app-shell .data-table tbody tr,
.app-shell .ins-table tbody tr,
.app-shell .fd-table tbody tr {
    transition: background-color .12s ease;
}

/* ---- §5 Controls --------------------------------------------------------- */

.app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
    outline: none;
    border-color: rgba(30, 86, 224, .6);
    box-shadow: 0 0 0 3px rgba(30, 86, 224, .14);
}

.app-shell :is(button, .btn, [role="button"]) {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.app-shell :is(button, .btn, [role="button"]):not(:disabled):active {
    filter: brightness(.97);
}

/* ---- §6 Typography ------------------------------------------------------- */

.app-shell .content h1 {
    letter-spacing: -.028em;
    text-wrap: balance;
}

.app-shell .content h2,
.app-shell .content h3 {
    text-wrap: balance;
}

/* ---- §7 Page enter ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .app-shell > .shell-body > .content {
        animation: bbw-prem-enter .3s ease-out;
    }

    .auth-card {
        animation: bbw-prem-enter .34s ease-out;
    }
}

@keyframes bbw-prem-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- §8 Mobile ----------------------------------------------------------- */

@media (max-width: 900px) {
    .app-shell > .top-header {
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        backdrop-filter: saturate(160%) blur(10px);
    }

    .app-shell .side {
        background: #ffffff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell .nav-item,
    .app-shell .ins-tile,
    .app-shell :is(button, .btn, [role="button"]),
    .app-shell :is(.data-table tbody tr, .ins-table tbody tr, .fd-table tbody tr) {
        transition: none;
    }

    .app-shell > .shell-body > .content,
    .auth-card {
        animation: none;
    }
}