/* ===================================================================
   The Bloc — Shell theme (Phase 2 #4b)
   Global pass over every page that extends base.html. Surgically
   overrides the common Tailwind gray-* card/border patterns so the
   inner panels pick up the new aesthetic without per-template edits.
   - Body gets the locked surface + halftone backdrop.
   - .bg-gray-900 cards re-fill with translucent card chrome.
   - Card borders shift from gray to the locked blue-tinted border.
   - Form inputs (bg-gray-800, border-gray-700 on inputs) are left
     alone — they read fine as-is and rewriting them risks contrast
     regressions. Per-page polish can refine inputs later.
   =================================================================== */

:root {
    /* Brand surface + accents. --bloc-primary MUST stay in sync with
       bloc.500 in base.html's Tailwind config — they're the same orange.
       Templates can reach this color via either var(--bloc-primary) (here)
       or `bg-bloc-500`/`text-bloc-500` (Tailwind utility). Pick whichever
       reads more naturally for the context. */
    --bloc-surface:      #0A0E1A;
    --bloc-card-fill:    rgba(10, 14, 26, .65);
    --bloc-text:         #BBB4A3;
    --bloc-muted:        #777268;
    --bloc-primary:      #FF6A1F;
    --bloc-secondary:    #4A6BFF;
    --bloc-border:       rgba(74, 107, 255, .25);
    --bloc-border-strong:rgba(74, 107, 255, .4);
    --bloc-halftone:     rgba(74, 107, 255, .18);
}

html {
    background: var(--bloc-surface);
}

body {
    background-color: var(--bloc-surface);
    background-image: radial-gradient(circle at 1px 1px, var(--bloc-halftone) 1px, transparent 0);
    background-size: 6px 6px;
}

/* --- Card surfaces ------------------------------------------------ */
/* `body` prefix bumps specificity to 0,1,1 — higher than Tailwind's
   bare class selectors, so this wins regardless of stylesheet order. */

body .bg-gray-950 { background-color: var(--bloc-surface); }
body .bg-gray-900 { background-color: var(--bloc-card-fill); }

/* --- Borders ------------------------------------------------------ */

body .border-gray-800 { border-color: var(--bloc-border); }
body .border-gray-700 { border-color: var(--bloc-border); }

/* Sticky top bar in base.html — keep it card-fill for visual continuity */
body header.bg-gray-900 {
    background-color: var(--bloc-card-fill);
    backdrop-filter: blur(4px);
}

/* Sidebar — same treatment, slightly opaque so menu items read */
body aside.bg-gray-900 {
    background-color: rgba(10, 14, 26, .78);
}

/* --- Hover states -------------------------------------------------- */
/* Tailwind utility classes with colons need escaped selectors. */

body .hover\:bg-gray-800:hover { background-color: rgba(74, 107, 255, .12); }
body .hover\:bg-gray-700:hover { background-color: rgba(74, 107, 255, .16); }
body .hover\:bg-gray-800\/50:hover { background-color: rgba(74, 107, 255, .08); }
body .hover\:border-gray-700:hover { border-color: var(--bloc-border-strong); }
body .hover\:border-gray-600:hover { border-color: var(--bloc-border-strong); }

/* --- Translucent variants (Tailwind alpha syntax) ----------------- */
body .border-gray-800\/50 { border-color: rgba(74, 107, 255, .15); }
body .bg-gray-900\/50     { background-color: rgba(10, 14, 26, .4); }

/* --- Login page extras -------------------------------------------- */
/* Login uses `focus:ring-offset-gray-950` — adjust to navy so the
   ring offset doesn't reveal pure black. */
body .focus\:ring-offset-gray-950:focus { --tw-ring-offset-color: var(--bloc-surface); }