/*
 * Akshara "Hall & Shift" — token + base layer. THE canonical token file.
 * Spec: ai/design.md · Rationale: ai/decisions/0047-hall-and-shift-design-system.md
 *
 * Load order (partials/head-assets.blade.php):
 *   bootstrap.min.css → app.css (this file) → shell.css
 *
 * Swiss-editorial system: square corners, hairline rules, no shadows, no
 * gradients. Structure is drawn with 1px lines and whitespace; emphasis comes
 * from type weight and one vivid accent. Identity is grounded in the object the
 * software manages — a numbered desk, sold in shifts, paid monthly. Akshara is
 * a STUDY library: no collection, no catalogue.
 */

/* ============================================================================
   1. Fonts — self-hosted, no CDN. Three files.
   Archivo carries the display voice (heavy, tight, large); Public Sans is the
   body/table face (wide apertures, sturdy at 13px, good numerals); IBM Plex
   Mono is the micro-label and code voice — already vendored, so it costs
   nothing to keep.
   ============================================================================ */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   2. Tokens — light
   ============================================================================ */
:root,
:root[data-bs-theme="light"] {
  --app-header-h: 3.4rem;
  --ak-daybar-h: 3.1rem;

  --ak-ink: #14141A;                  /* text, headings, OCCUPANCY fill */
  --ak-ink-muted: #63636E;
  --ak-ground: #EDEDED;               /* page background */
  --ak-panel: #FFFFFF;                /* cards, inputs, table surface */

  /* One vivid accent, exactly as the references use one. Brand-true (the logo's
     indigo at full chroma) rather than the references' vermilion: in a
     collections product red already means "overdue", and a red brand accent
     would make every screen read as an alarm. */
  --ak-accent: #3B2FE0;
  --ak-accent-ink: #FFFFFF;           /* text ON the accent */

  --ak-paid: #0E7C5A;
  --ak-overdue: #C4342B;

  --ak-line: #D9D9DE;                 /* hairline rules — the main structural device */
  --ak-line-strong: #77777F;          /* CONTROL borders — inputs need 3:1 */
  --ak-track: #CFCFD6;                /* empty shift segment / meter track */

  --ak-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ak-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ak-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================================
   3. Tokens — dark
   ============================================================================ */
[data-bs-theme="dark"] {
  --ak-ink: #F0F0F2;
  --ak-ink-muted: #9C9CA8;
  --ak-ground: #0E0E12;
  --ak-panel: #17171D;

  --ak-accent: #8B7FFF;
  --ak-accent-ink: #0E0E12;

  --ak-paid: #3FAE84;
  --ak-overdue: #E4635A;

  --ak-line: #2A2A32;
  --ak-line-strong: #6A6A76;
  --ak-track: #33333D;
}

/* ============================================================================
   4. Bootstrap bridge — map --bs-* onto the tokens so stock components follow
   the theme without being restyled one by one.
   ============================================================================ */
:root,
:root[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--ak-ground);
  --bs-body-color: var(--ak-ink);
  --bs-emphasis-color: var(--ak-ink);
  --bs-secondary-color: var(--ak-ink-muted);
  --bs-secondary-bg: var(--ak-panel);
  --bs-tertiary-bg: color-mix(in srgb, var(--ak-ink) 4%, var(--ak-panel));
  --bs-border-color: var(--ak-line);

  /* Square. Every corner in the system. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;

  --bs-primary: var(--ak-accent);
  --bs-success: var(--ak-paid);
  --bs-danger: var(--ak-overdue);
  --bs-warning: var(--ak-accent);
  --bs-info: var(--ak-ink-muted);

  --bs-link-color: var(--ak-accent);
  --bs-link-hover-color: var(--ak-accent);

  --bs-font-sans-serif: var(--ak-font-sans);
  --bs-font-monospace: var(--ak-font-mono);
}

/* ----------------------------------------------------------------------------
   4b. Migration aliases — views and older CSS still reference the superseded
   "Ink & Amber" custom properties. These keep unmigrated screens coherent while
   phases 3–6 land. REMOVED IN PHASE 7 — do not write new code against them.
   ---------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --app-ink: var(--ak-ink);
  --app-surface: var(--ak-panel);
  --app-surface-soft: color-mix(in srgb, var(--ak-ink) 5%, var(--ak-panel));
  --app-accent: var(--ak-accent);
  --app-accent-soft: var(--ak-ink-muted);
  --ak-chalk: var(--ak-ground);       /* renamed in the editorial revision */
  --ak-sheet: var(--ak-panel);
  --ak-gold: var(--ak-accent);        /* gold folded into the single accent */
  --ak-gold-text: var(--ak-accent);
  --ak-paid-text: var(--ak-paid);
  --ak-overdue-text: var(--ak-overdue);
  --font-display: var(--ak-font-display);
  --font-sans: var(--ak-font-sans);
  --font-mono: var(--ak-font-mono);
}

/* ============================================================================
   5. Base
   ============================================================================ */
html { font-size: 15px; }             /* dense operations tool, read standing up */

body {
  background: var(--ak-ground);
  color: var(--ak-ink);
  font-family: var(--ak-font-sans);
  font-weight: 400;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}

/* Display voice: Archivo, heavy, TIGHT tracking, sentence case, large. The
   headings are the design — they carry the personality the palette does not. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.app-page-title, .app-wordmark, .ak-display {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -.025em;
  line-height: 1.04;
  color: var(--ak-ink);
}
h4, h5, h6, .h4, .h5, .h6 { letter-spacing: -.017em; line-height: 1.15; }

.app-page-title { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.35rem); margin-bottom: 0; }
.app-wordmark { font-size: 1rem; letter-spacing: -.02em; }

a { color: var(--ak-accent); text-decoration: none; }
a:hover { color: var(--ak-accent); text-decoration: underline; text-underline-offset: .18em; }

hr, .app-rule, .app-hairline { border: 0; border-top: 1px solid var(--ak-line); opacity: 1; }

/* Panels are white boxes with a hairline. No shadow, no radius, no gradient. */
.card {
  background: var(--ak-panel);
  border: 1px solid var(--ak-line);
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================================
   6. Micro-labels — the references' signature device.
   Mono, uppercase, wide-tracked, IN THE ACCENT. Used as eyebrows above every
   heading and as table headers. This is what makes the layout read as authored
   rather than assembled.
   ============================================================================ */
.app-eyebrow {
  font-family: var(--ak-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .625rem;
  line-height: 1.4;
  color: var(--ak-accent);
}
.app-eyebrow--muted { color: var(--ak-ink-muted); }

.ak-code {
  font-family: var(--ak-font-mono);
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--ak-ink-muted);
}
/* Money in a table cell: right-aligned, tabular, never wrapped. */
.ak-money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* A standalone figure (KPI tile, summary line). Same numerals, no alignment.
   It must never break mid-number — "₹62,354.00" wrapping to "₹62,354" / ".00"
   reads as two different amounts — so instead of wrapping it SCALES DOWN to fit.
   A six-figure rupee amount is much wider than a two-digit count, so a fixed
   size either overflows the tile or wastes it. */
.ak-figure {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block;
  min-width: 0;
  font-size: clamp(.95rem, 4.6vw, 1.3rem);
  line-height: 1.15;
}
@media (min-width: 576px) { .ak-figure { font-size: clamp(1rem, 1.9vw, 1.35rem); } }
@media (min-width: 1200px) { .ak-figure { font-size: 1.35rem; } }

/* Section group: a rule above at the group's width. */
.ak-group { border-top: 1px solid var(--ak-ink); padding-top: .6rem; margin-top: 1.7rem; }
.ak-group:first-child { margin-top: 0; }

.app-page-header {
  border-bottom: 1px solid var(--ak-ink);
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
}

/* ============================================================================
   7. Buttons — square, hairline, one solid accent CTA.
   Precompiled Bootstrap resolves .btn-* from the Sass $primary (blue), not from
   --bs-primary, so each variant is handed the token explicitly. This is what
   stops raw Bootstrap blue/grey leaking through the theme.
   ============================================================================ */
.btn {
  font-family: var(--ak-font-sans);
  font-weight: 600;
  border-radius: 0;
  letter-spacing: -.004em;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
}
.btn-primary, .btn-accent {
  --bs-btn-color: var(--ak-accent-ink);
  --bs-btn-bg: var(--ak-accent);
  --bs-btn-border-color: var(--ak-accent);
  --bs-btn-hover-color: var(--ak-accent-ink);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ak-accent) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ak-accent) 86%, #000);
  --bs-btn-active-bg: var(--ak-accent);
  --bs-btn-active-border-color: var(--ak-accent);
  --bs-btn-disabled-color: var(--ak-accent-ink);
  --bs-btn-disabled-bg: var(--ak-ink-muted);
  --bs-btn-disabled-border-color: var(--ak-ink-muted);
  --bs-btn-disabled-opacity: 1;
}
.btn-dark {
  --bs-btn-color: var(--ak-panel);
  --bs-btn-bg: var(--ak-ink);
  --bs-btn-border-color: var(--ak-ink);
  --bs-btn-hover-color: var(--ak-panel);
  --bs-btn-hover-bg: var(--ak-ink);
  --bs-btn-hover-border-color: var(--ak-ink);
}
.btn-outline-primary, .btn-outline-secondary, .btn-secondary {
  --bs-btn-color: var(--ak-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ak-ink);
  --bs-btn-hover-color: var(--ak-panel);
  --bs-btn-hover-bg: var(--ak-ink);
  --bs-btn-hover-border-color: var(--ak-ink);
  --bs-btn-active-color: var(--ak-panel);
  --bs-btn-active-bg: var(--ak-ink);
  --bs-btn-active-border-color: var(--ak-ink);
  --bs-btn-disabled-color: var(--ak-ink-muted);
  --bs-btn-disabled-border-color: var(--ak-line);
}
.btn-outline-danger, .btn-danger {
  --bs-btn-color: var(--ak-overdue);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ak-overdue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ak-overdue);
  --bs-btn-hover-border-color: var(--ak-overdue);
  --bs-btn-active-bg: var(--ak-overdue);
  --bs-btn-active-border-color: var(--ak-overdue);
}
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--ak-overdue); }
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ak-paid);
  --bs-btn-border-color: var(--ak-paid);
}
.btn-link { --bs-btn-color: var(--ak-accent); --bs-btn-hover-color: var(--ak-accent); font-weight: 600; }
.btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .6rem; font-size: .82rem; }

/* Radio/checkbox rendered as a card. Stock .btn-check:checked fills flat
   Bootstrap grey — the most visible "unfinished" leak in the app before this. */
.btn-check:checked + .btn,
.btn-check:active + .btn {
  --bs-btn-active-color: var(--ak-ink);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--ak-accent);
  box-shadow: inset 0 0 0 2px var(--ak-accent);
}
.btn-check:focus-visible + .btn { outline: 2px solid var(--ak-accent); outline-offset: 2px; }

/* ============================================================================
   8. Forms — square, hairline, accent focus.
   ============================================================================ */
.form-control, .form-select {
  background-color: var(--ak-panel);
  color: var(--ak-ink);
  border: 1px solid var(--ak-line-strong);
  border-radius: 0;
  padding: .5rem .7rem;
  font-size: .92rem;
}
.form-control::placeholder { color: color-mix(in srgb, var(--ak-ink-muted) 75%, transparent); }
.form-control:focus, .form-select:focus {
  background-color: var(--ak-panel);
  color: var(--ak-ink);
  border-color: var(--ak-accent);
  box-shadow: inset 0 0 0 1px var(--ak-accent);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ak-overdue); }
.form-label {
  font-family: var(--ak-font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .6rem;
  color: var(--ak-ink-muted);
  margin-bottom: .3rem;
}
.form-text { font-size: .76rem; color: var(--ak-ink-muted); margin-top: .25rem; }
.invalid-feedback { font-size: .78rem; color: var(--ak-overdue); }
.input-group-text {
  background: var(--ak-ground);
  border-color: var(--ak-line-strong);
  border-radius: 0;
  color: var(--ak-ink-muted);
}
.form-check-input {
  border-color: var(--ak-line-strong);
  background-color: var(--ak-panel);
  border-radius: 0;
}
.form-check-input:checked { background-color: var(--ak-accent); border-color: var(--ak-accent); }
.form-check-input:focus {
  border-color: var(--ak-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ak-accent) 25%, transparent);
}
.form-switch .form-check-input { border-radius: 2rem; }

/* ============================================================================
   9. Status — square tags, always paired with text.
   ============================================================================ */
.badge {
  font-family: var(--ak-font-mono);
  font-weight: 500;
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 0;
  padding: .28em .5em;
}
.badge-paid, .badge-active, .bg-success, .text-bg-success {
  background: color-mix(in srgb, var(--ak-paid) 13%, var(--ak-panel)) !important;
  color: var(--ak-paid) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-paid) 40%, transparent);
}
.badge-overdue, .bg-danger, .text-bg-danger {
  background: color-mix(in srgb, var(--ak-overdue) 13%, var(--ak-panel)) !important;
  color: var(--ak-overdue) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-overdue) 40%, transparent);
}
.badge-live, .badge-due-today {
  background: color-mix(in srgb, var(--ak-accent) 13%, var(--ak-panel));
  color: var(--ak-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-accent) 40%, transparent);
}
.badge-due, .badge-neutral, .text-bg-light, .bg-secondary, .text-bg-secondary {
  background: var(--ak-ground) !important;
  color: var(--ak-ink-muted) !important;
  box-shadow: inset 0 0 0 1px var(--ak-line);
}

/* Rows that need chasing: a solid left edge. Overdue only — no decorative edges. */
tr.row-overdue > td:first-child { box-shadow: inset 3px 0 var(--ak-overdue); }

/* ============================================================================
   10. Utilities
   ============================================================================ */
/* Occupancy meters read as a quantity, so they are drawn in ink like the Shift
   Band — the accent is reserved for "live now / due today". */
.progress { background: var(--ak-track); border-radius: 0; height: .5rem; }
.progress-bar { background: var(--ak-ink); }
.bg-ink { background-color: var(--ak-ink) !important; }

.text-accent, .text-live { color: var(--ak-accent) !important; }
.bg-accent, .bg-live { background-color: var(--ak-accent) !important; color: var(--ak-accent-ink) !important; }
.bg-accent-subtle, .bg-live-subtle { background-color: color-mix(in srgb, var(--ak-accent) 11%, transparent) !important; }
.border-accent { border-color: var(--ak-accent) !important; }
.text-secondary { color: var(--ak-ink-muted) !important; }

/* ============================================================================
   11. Accessibility floor — non-negotiable (ai/design.md §11.4)
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--ak-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}