/* Brevlyt "Prism White", as this app's two rooms.
 *
 * The light palette is the design system's own token set, unchanged. The dark
 * one is DERIVED from it rather than invented: Material Design 3 token sets are
 * built to invert, and several of the dark values are already sitting in the
 * light file waiting to be used --  `inverse-primary` (#b5c4ff) becomes the
 * dark accent, `tertiary-fixed-dim` (#ffb95d) becomes the dark warning, and
 * `on-surface-variant` (#434653) becomes the dark border. Same hues, swapped
 * surfaces, so the CFO's desk reads as the same product with the lights down.
 *
 * Colours are stored as space-separated RGB so Tailwind's opacity modifiers
 * (`bg-primary/90`, `border-warning/40`) still resolve.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brevlyt tokens, verbatim ---- */
  --brand-primary: #2f57c2;
  --brand-primary-container: #6b8efc;
  --gradient-prism: linear-gradient(135deg, #2f57c2 0%, #6b8efc 100%);
  --shadow-atmospheric: 0 20px 60px -10px rgba(25, 28, 30, 0.06);
  --blur-glass: 20px;
  --duration-fast: 0.2s;
  --duration-standard: 0.6s;

  /* Radius. The house rule is "no sharp corners on main containers": cards at
     2.5rem, pills for anything clickable. 1.5rem is the working panel radius —
     2.5rem on a dense table would swallow its own first row. */
  --radius: 1.5rem;
  --radius-card: 2.5rem;
  --radius-cta: 3rem;

  /* ---- Light: Prism White ---- */
  --background: 248 249 251;          /* surface            #f8f9fb */
  --foreground: 25 28 30;             /* on-surface         #191c1e — never black */
  --card: 255 255 255;                /* container-lowest   #ffffff */
  --card-foreground: 25 28 30;
  --popover: 255 255 255;
  --popover-foreground: 25 28 30;
  --primary: 47 87 194;               /* primary            #2f57c2 */
  --primary-foreground: 255 255 255;
  --secondary: 242 244 246;           /* container-low      #f2f4f6 */
  --secondary-foreground: 47 87 194;
  --muted: 242 244 246;
  --muted-foreground: 67 70 83;       /* on-surface-variant #434653 */
  --accent: 231 232 234;              /* container-high     #e7e8ea */
  --accent-foreground: 25 28 30;
  --destructive: 186 26 26;           /* error              #ba1a1a */
  --destructive-foreground: 255 255 255;
  --warning: 133 84 0;                /* tertiary           #855400 */
  --warning-foreground: 255 255 255;
  --success: 0 109 59;
  --success-foreground: 255 255 255;
  --border: 196 197 213;              /* outline-variant    #c4c5d5 — felt, not seen */
  --input: 196 197 213;
  --ring: 47 87 194;
}

.dark {
  --gradient-prism: linear-gradient(135deg, #2f57c2 0%, #6b8efc 100%);
  --shadow-atmospheric: 0 20px 60px -10px rgba(0, 0, 0, 0.45);

  --background: 17 20 22;
  --foreground: 225 226 228;          /* container-highest, inverted   #e1e2e4 */
  --card: 25 28 30;                   /* on-surface becomes the card   #191c1e */
  --card-foreground: 225 226 228;
  --popover: 25 28 30;
  --popover-foreground: 225 226 228;
  --primary: 181 196 255;             /* inverse-primary               #b5c4ff */
  --primary-foreground: 0 37 115;     /* on-primary-container          #002573 */
  --secondary: 39 42 44;
  --secondary-foreground: 220 225 255;/* primary-fixed                 #dce1ff */
  --muted: 29 32 34;
  --muted-foreground: 196 197 213;    /* outline-variant, now text     #c4c5d5 */
  --accent: 39 42 44;
  --accent-foreground: 225 226 228;
  --destructive: 255 180 171;
  --destructive-foreground: 105 0 5;
  --warning: 255 185 93;              /* tertiary-fixed-dim            #ffb95d */
  --warning-foreground: 42 23 0;      /* on-tertiary-fixed             #2a1700 */
  --success: 109 213 140;
  --success-foreground: 17 20 22;
  --border: 67 70 83;                 /* on-surface-variant            #434653 */
  --input: 67 70 83;
  --ring: 181 196 255;
}

* { border-color: rgb(var(--border)); }

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* Money never jitters between rows. One line, more effect on a finance UI than
   any component library. */
.tabular, table, .money, .font-mono { font-variant-numeric: tabular-nums; }

/* Display and headline both sit at 800 with -0.02em in the brand. Applied here
   rather than per-heading so the whole app inherits the voice. */
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 800; }

/* Labels: uppercase, wide, 700. The brand's technical-metadata voice. */
.brand-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.75rem;
}

.prism-gradient { background: var(--gradient-prism); }
.atmospheric-shadow { box-shadow: var(--shadow-atmospheric); }
.glass-nav {
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

/* Entrance: once per section load, never a decorative loop. */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.animate-slide-up-fade {
  animation: slideUpFade var(--duration-standard) ease-out both;
}

/* ------------------------------------------------------------------------
 * The prism room.
 *
 * The CFO's desk sits INSIDE the brand gradient rather than in a neutral dark
 * shell — the same treatment as the sign-in page's right panel, applied to a
 * whole working surface. Panels become glass over the gradient, which is what
 * `--blur-glass` and `.glass-nav` were always for.
 *
 * Everything here is scoped to .prism-room, so the owner's office keeps the
 * plain Prism White surfaces.
 * ---------------------------------------------------------------------- */
.prism-room {
  --foreground: 255 255 255;
  --card-foreground: 255 255 255;
  --popover: 26 48 116;
  --popover-foreground: 255 255 255;
  --muted-foreground: 190 206 250;
  --primary: 255 255 255;          /* Button onGradient: white fill, blue text */
  --primary-foreground: 47 87 194;
  --secondary: 255 255 255;
  --secondary-foreground: 47 87 194;
  --accent: 255 255 255;
  --accent-foreground: 47 87 194;
  --warning: 255 205 140;
  --warning-foreground: 42 23 0;
  --destructive: 255 190 182;
  --destructive-foreground: 105 0 5;
  --success: 150 235 175;
  --success-foreground: 17 20 22;
  --border: 255 255 255;
  --input: 255 255 255;
  --ring: 255 255 255;

  color: #fff;
  /* A deeper prism than the sign-in panel, and deliberately so. That panel is
     a narrow column carrying four lines of text; this is a working surface
     holding dense tables, and mid-blue cannot support white body copy at that
     density. The darks are the brand's own -- on-primary-fixed (#00164d) and
     on-primary-fixed-variant (#073da9) -- so it stays the same gradient
     family, lit from the top right. */
  background:
    radial-gradient(75rem 55rem at 85% -10%, rgba(107, 142, 252, .38), transparent 62%),
    linear-gradient(150deg, #00164d 0%, #062b7a 48%, #0a3496 100%);
  background-attachment: fixed;
  position: relative;
}

/* Texture only. The depth now lives in the background itself. */
.prism-room::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background:
    linear-gradient(#fff 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, #fff 1px, transparent 1px) 0 0 / 64px 64px;
}
.prism-room > * { position: relative; z-index: 1; }

/* Borders on glass are white at a whisper, never the solid token. */
.prism-room *, .prism-room *::before, .prism-room *::after {
  border-color: rgba(255, 255, 255, .18);
}

/* The panel. Replaces bg-card inside the room. */
.glass {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid rgba(255, 255, 255, .18);
}
.glass-strong { background: rgba(255, 255, 255, .13); }
.glass-deep {
  background: rgba(0, 14, 52, .72);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid rgba(255, 255, 255, .14);
}
/* Outline buttons hover to a wash, not a slab. `--accent` is white in this
   room, so the shared `hover:bg-accent` recipe would fill them solid — which
   is right on paper and wrong on glass. */
.prism-room .hover\:bg-accent:hover {
  background-color: rgba(255, 255, 255, .16);
}
.prism-room .hover\:text-accent-foreground:hover { color: #fff; }
.prism-room .hover\:bg-primary\/90:hover { background-color: rgba(255, 255, 255, .88); }

/* A menu is not a card. The house rule against borders is about content
   surfaces sitting in the page; a popover floats above it and needs an edge,
   because the atmospheric shadow alone cannot separate white from #f8f9fb. */
.popover {
  border: 1px solid rgb(var(--border));
  box-shadow: 0 12px 32px -8px rgba(25, 28, 30, .18);
}
.prism-room .popover {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 16px 40px -8px rgba(0, 8, 32, .55);
}

.prism-room thead { background: rgba(255, 255, 255, .10); }
.prism-room tbody tr:hover { background: rgba(255, 255, 255, .07); }
.prism-room .divide-y > * + * { border-top-color: rgba(255, 255, 255, .14); }
.prism-room dialog { color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 9999px; }
::-webkit-scrollbar-track { background: transparent; }

dialog::backdrop { background: rgba(25, 28, 30, 0.5); backdrop-filter: blur(4px); }