/* =========================================================================
   Banki design tokens
   Light palette on :root; dark palette re-declared under
   prefers-color-scheme so it follows the OS/browser setting automatically
   (no manual toggle). Bootstrap 5's own root-level variables are remapped
   to these tokens too, so its built-in components (links, borders, body
   text, table striping) reskin for free wherever they weren't hardcoded.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --color-paper: #EDEBE0;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F7F5EC;
  --color-border: #DDD9C8;

  /* Text */
  --color-text: #1E3454;
  --color-text-rgb: 30, 52, 84;
  --color-text-secondary: #57627A;
  --color-text-tertiary: #8891A3;

  /* Accent (buttons, links, focus rings) — same color as primary text/headings */
  --color-accent: #1E3454;
  --color-accent-rgb: 30, 52, 84;
  --color-accent-hover: #16283F;
  --color-accent-active: #101D2E;
  --color-on-accent: #FFFFFF;

  /* Status colors — state only, never used as the general accent */
  --status-good-fg: #1F7A4C;
  --status-good-bg: #E4F1E8;
  --status-warning-fg: #9C6B1E;
  --status-warning-bg: #F5EBD6;
  --status-critical-fg: #AE3B2C;
  --status-critical-bg: #F5E1DC;

  /* Type */
  --font-heading: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #15181D;
    --color-surface: #1E232B;
    --color-surface-alt: #191D24;
    --color-border: #2C313B;

    --color-text: #E8EAF0;
    --color-text-rgb: 232, 234, 240;
    --color-text-secondary: #A9B0C0;
    --color-text-tertiary: #6E7688;

    --color-accent: #8CB0E0;
    --color-accent-rgb: 140, 176, 224;
    --color-accent-hover: #9FC1EA;
    --color-accent-active: #B3D0EF;
    --color-on-accent: #15181D;

    --status-good-fg: #4ADE93;
    --status-good-bg: #163625;
    --status-warning-fg: #E3AE5C;
    --status-warning-bg: #3A2C12;
    --status-critical-fg: #E58A76;
    --status-critical-bg: #3A1E17;
  }
}

/* Bootstrap's own variables, remapped to the tokens above. Anything Bootstrap
   derives from these (body background/text, links, borders, secondary/
   tertiary text, table striping, body font) reskins without touching that
   component's rule directly. */
:root {
  --bs-body-bg: var(--color-paper);
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-emphasis-color-rgb: var(--color-text-rgb);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-color: var(--color-text-tertiary);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-accent);
  --bs-link-color-rgb: var(--color-accent-rgb);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-font-sans-serif: var(--font-body);
  --bs-font-monospace: var(--font-mono);
  --bs-table-striped-bg: var(--color-surface-alt);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: var(--font-body);
}

/* Headings use the display face; the general accent color already carries
   over from --bs-body-color, so only the family/weight need setting. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

h1 {
  font-weight: 700;
}

h2, h3 {
  font-weight: 600;
}

h4, h5, h6 {
  font-weight: 500;
}

/* =========================================================================
   Bootstrap component overrides — anything the framework hardcodes rather
   than driving from its own root variables.
   ========================================================================= */

.btn-primary {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--color-accent-rgb);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent-active);
  --bs-btn-active-border-color: var(--color-accent-active);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
}

.form-control,
.form-select {
  background-color: var(--color-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-accent-rgb), 0.25);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--color-surface), 0 0 0 0.25rem var(--color-accent);
}

.alert-success {
  --bs-alert-color: var(--status-good-fg);
  --bs-alert-bg: var(--status-good-bg);
  --bs-alert-border-color: var(--status-good-fg);
  --bs-alert-link-color: var(--status-good-fg);
}

.alert-danger {
  --bs-alert-color: var(--status-critical-fg);
  --bs-alert-bg: var(--status-critical-bg);
  --bs-alert-border-color: var(--status-critical-fg);
  --bs-alert-link-color: var(--status-critical-fg);
}

@media (prefers-color-scheme: dark) {
  /* The select chevron and navbar hamburger icon are baked-in SVG data URIs
     with a fixed dark stroke — invisible on a dark surface unless swapped
     for a light-stroke version here. */
  .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8EAF0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }

  .navbar-toggler {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232, 234, 240, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =========================================================================
   Banki-specific structural classes
   ========================================================================= */

/* Site header nav bar (replaces the default navbar-light/bg-white utility
   classes so it reskins with the surface/border tokens in both themes). */
.site-header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text) !important;
}

/* Card container for standalone forms (Login, Create User) */
.card-surface {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 2rem;
}

@media (prefers-color-scheme: dark) {
  .card-surface {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

/* Numbers, dates, IDs — anything tabular. Money values in particular should
   always carry this. */
.mono, .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Status pills — for invoice/payment status once that UI exists (Epic 3),
   not yet used anywhere in the app. */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
}

.status-pill--good {
  color: var(--status-good-fg);
  background-color: var(--status-good-bg);
}

.status-pill--warning {
  color: var(--status-warning-fg);
  background-color: var(--status-warning-bg);
}

.status-pill--critical {
  color: var(--status-critical-fg);
  background-color: var(--status-critical-bg);
}