/* ============================================================
   ISB — InSecure Bank
   Design system: "Banknote"
   Security-print vernacular: verdigris ink on cool bank paper,
   hairline rules, guilloche rosettes, vermilion stamp for alerts.
   One bold element (the guilloche); everything else stays quiet.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ================================================
   TOKENS — LIGHT (default)
   ================================================ */
:root {
  /* Ink / brand */
  --ink:          #0E1B1A;   /* near-black with green undertone, for text on paper */
  --verdigris:    #0F5A52;   /* primary brand */
  --verdigris-hi: #0B4640;   /* hover / pressed */
  --verdigris-lo: #DCEBE7;   /* tint for chips, selected rows */
  --brass:        #A8863A;   /* hairline accent, used sparingly */
  --stamp:        #C93B2B;   /* vermilion: errors, destructive, "stamp" */

  /* Paper surfaces */
  --bg:        #EDF1EF;
  --surface:   #F8FAF9;
  --surface-2: #E4EAE7;
  --surface-3: #D8E0DC;
  --border:    #CBD5D1;
  --border-2:  #AEBBB6;

  /* Text */
  --text-1: #0E1B1A;
  --text-2: #33433F;
  --text-3: #5B6B67;
  --text-4: #8A9894;

  /* Brand roles */
  --brand:        var(--verdigris);
  --brand-light:  #1F8174;
  --brand-dark:   var(--verdigris-hi);
  --on-brand:     #F4FAF8;

  /* Semantic */
  --green:      #1E7F5C;
  --green-bg:   #DDF0E7;
  --green-text: #11573D;
  --red:        var(--stamp);
  --red-bg:     #F8E1DD;
  --red-text:   #8E2418;
  --amber:      #B7791F;
  --amber-bg:   #F6E9CC;
  --amber-text: #77500F;
  --sky:        #2F6F8F;
  --sky-bg:     #DCEAF1;
  --sky-text:   #1F4B62;

  /* Rail (sidebar) follows the theme: paper in light, ink in dark */
  --rail-bg:     #E4EAE7;
  --rail-border: #CBD5D1;

  /* Banknote panel (balance card, brand panels) */
  --note-bg:     #0F5A52;
  --note-ink:    #F1F8F6;
  --note-ink-2:  rgba(241,248,246,0.72);
  --note-line:   rgba(241,248,246,0.22);
  --guilloche:   rgba(241,248,246,0.20);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radii: precise, not pillowy. Controls < panels < notes */
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  18px;
  --r-full: 9999px;

  /* Elevation: hairlines first, shadow only for overlays */
  --shadow-sm:  0 1px 0 rgba(14,27,26,0.04);
  --shadow-md:  0 2px 8px rgba(14,27,26,0.08);
  --shadow-lg:  0 12px 32px rgba(14,27,26,0.14);
  --shadow-xl:  0 24px 64px rgba(14,27,26,0.22);
  --focus-ring: 0 0 0 3px rgba(15,90,82,0.28);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 420ms;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h:  60px;
}

/* ================================================
   TOKENS — DARK
   ================================================ */
[data-theme="dark"] {
  --bg:        #0A1413;
  --surface:   #101D1B;
  --surface-2: #162826;
  --surface-3: #1D3330;
  --border:    #25403C;
  --border-2:  #35574F;

  --text-1: #E6EFEC;
  --text-2: #B5C6C1;
  --text-3: #8AA09A;
  --text-4: #5F776F;

  --brand:       #3FB5A3;
  --brand-light: #6FD0C0;
  --brand-dark:  #2E9484;
  --on-brand:    #04201C;
  --verdigris-lo: rgba(63,181,163,0.14);

  --green-bg:   rgba(63,196,140,0.14);
  --green-text: #7FDDB4;
  --red:        #E8604F;
  --red-bg:     rgba(232,96,79,0.14);
  --red-text:   #F5A397;
  --amber-bg:   rgba(214,160,60,0.15);
  --amber-text: #E8C378;
  --sky-bg:     rgba(90,160,200,0.15);
  --sky-text:   #9CCBE3;

  --rail-bg:     #0D1918;
  --rail-border: #1F3733;

  --note-bg:     #0B3F39;
  --note-ink:    #EAF5F2;
  --note-ink-2:  rgba(234,245,242,0.70);
  --note-line:   rgba(234,245,242,0.20);
  --guilloche:   rgba(111,208,192,0.18);

  --shadow-sm:  0 1px 0 rgba(0,0,0,0.3);
  --shadow-md:  0 2px 10px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.55);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.65);
  --focus-ring: 0 0 0 3px rgba(63,181,163,0.35);
}

/* Legacy aliases (some inline styles / older rules still read these) */
:root {
  --primary-color: var(--brand);
  --primary-dark:  var(--verdigris-hi);
  --secondary-color: var(--green);
  --danger-color:  var(--red);
  --warning-color: var(--amber);
  --success-color: var(--green);
  --info-color:    var(--sky);
  --text-color:    var(--text-1);
  --text-light:    var(--text-3);
  --text-dark:     var(--text-1);
  --background-color: var(--bg);
  --border-color:  var(--border);
  --shadow-color:  rgba(14,27,26,0.08);
  --accent: var(--brand);
  --accent-dim: var(--brand-dark);
  --accent-text: var(--on-brand);
}

/* ================================================
   RESET
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-mid) ease, color var(--dur-mid) ease;
}
img, svg { max-width: 100%; }
img { height: auto; }
::selection { background: var(--brand); color: var(--on-brand); }

/* ================================================
   ACCESSIBILITY
   ================================================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  padding: 0.75rem 1.25rem; background: var(--ink); color: #fff;
  font-weight: 600; border-radius: 0 0 var(--r-md) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

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

/* ================================================
   TYPOGRAPHY
   Display: Bricolage Grotesque. Body: Instrument Sans.
   Scale (1.25): 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49
   ================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-1);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p  { color: var(--text-2); max-width: 68ch; }
a  { color: var(--brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease; }
a:hover { color: var(--brand-dark); text-decoration-color: currentColor; }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; font-feature-settings: "zero" 1; }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: var(--r-sm); }

/* ================================================
   BUTTONS
   ================================================ */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
  border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary, button[type="submit"] {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}
.btn-primary:hover, button[type="submit"]:hover:not(:disabled) {
  background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand);
}
.btn-primary:active, button[type="submit"]:active { transform: translateY(1px); }

.btn-accent {
  background: var(--ink); color: #F4FAF8; border-color: var(--ink);
}
[data-theme="dark"] .btn-accent { background: var(--surface-3); color: var(--text-1); border-color: var(--border-2); }
.btn-accent:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.btn-secondary {
  background: var(--surface); color: var(--text-1); border-color: var(--border-2);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text-1); }

.btn-ghost { background: transparent; color: var(--text-2); padding: 0.5rem 0.75rem; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }

.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: var(--red-text); border-color: var(--red-text); color: #fff; }

.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover { background: var(--green-text); border-color: var(--green-text); color: #fff; }

.btn-sm { min-height: 32px; padding: 0.3rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { min-height: 48px; padding: 0.75rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ================================================
   FORMS
   Visible labels above fields; errors beside the field.
   ================================================ */
label {
  display: block; font-size: 0.875rem; font-weight: 600;
  color: var(--text-1); margin-bottom: 0.375rem;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], input[type="search"], input[type="tel"],
select, textarea {
  width: 100%; min-height: 42px; padding: 0.55rem 0.8rem;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--text-1); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-mid) ease;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
input[type="file"] { font-size: 0.875rem; color: var(--text-2); }
.form-group { margin-bottom: 1.25rem; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.form-helper { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.375rem; }

/* ================================================
   PANEL (generic bordered surface)
   ================================================ */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

/* ================================================
   TABLES — ledger style: ruled lines, no zebra
   ================================================ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem 1rem; text-align: left; font-size: 0.9375rem; }
th {
  font-weight: 600; color: var(--text-3); font-size: 0.8125rem;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
[data-theme="dark"] th { border-bottom-color: var(--border-2); }
td { border-bottom: 1px solid var(--border); color: var(--text-2); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--verdigris-lo); }

/* ================================================
   MESSAGES  (#message is a JS hook: login/register/etc.)
   ================================================ */
#message:empty { display: none; }
#message {
  padding: 0.75rem 1rem; border-radius: var(--r-md);
  font-size: 0.9375rem; font-weight: 500; margin-bottom: 1.25rem;
  border: 1px solid var(--border); border-left-width: 4px;
  background: var(--surface-2); color: var(--text-1);
}
#message.success { background: var(--green-bg); color: var(--green-text); border-color: var(--green); }
#message.error   { background: var(--red-bg);   color: var(--red-text);   border-color: var(--red); }

/* ================================================
   BADGES / STATUS
   ================================================ */
.badge, .status-pending, .status-approved {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: var(--r-sm);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.badge-success, .status-approved { background: var(--green-bg); color: var(--green-text); }
.badge-danger  { background: var(--red-bg);   color: var(--red-text); }
.badge-warning, .status-pending { background: var(--amber-bg); color: var(--amber-text); }
.badge-info    { background: var(--sky-bg);   color: var(--sky-text); }
.badge-neutral { background: var(--surface-2); color: var(--text-3); }

/* ================================================
   PAGINATION
   ================================================ */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.875rem;
}
.page-summary { color: var(--text-3); }
.page-controls { display: flex; align-items: center; gap: 0.5rem; }
.page-link {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0.3rem 0.75rem; border: 1px solid var(--border-2); border-radius: var(--r-md);
  font-size: 0.875rem; font-weight: 600; color: var(--text-1); background: var(--surface);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.page-link:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text-1); }
.page-info { font-weight: 600; color: var(--text-3); }

/* ================================================
   LOADING
   ================================================ */
.loading-spinner {
  display: inline-block; width: 28px; height: 28px;
  border: 3px solid var(--border); border-radius: 50%;
  border-top-color: var(--brand); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================
   THEME TOGGLE — single icon button; markup holds both icons:
   <button class="theme-toggle" onclick="toggleTheme()" aria-label="Switch colour theme">
     <svg class="icon-sun">…</svg><svg class="icon-moon">…</svg>
   </button>
   ================================================ */
.theme-toggle {
  width: 40px; height: 40px; min-height: 0; padding: 0; position: relative;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text-1); }
.theme-toggle svg { width: 18px; height: 18px; position: absolute; inset: 0; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ================================================
   GUILLOCHE — the one bold element.
   Apply .guilloche to any positioned element; it paints the rosette
   behind content using --guilloche as ink. Content must sit above (z-index:1).
   ================================================ */
.guilloche { position: relative; isolation: isolate; overflow: hidden; }
.guilloche::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: var(--g-size, 120%); aspect-ratio: 1;
  right: var(--g-right, -25%); top: var(--g-top, -45%);
  background: var(--guilloche);
  -webkit-mask: url('guilloche.svg') center / contain no-repeat;
          mask: url('guilloche.svg') center / contain no-repeat;
  animation: guilloche-draw 1.4s var(--ease) both;
}
@keyframes guilloche-draw {
  from { opacity: 0; transform: rotate(-14deg) scale(0.92); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ================================================
   UTILITIES
   ================================================ */
.text-center { text-align: center; }
.hidden { display: none !important; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }

/* Legacy: sections used to fade up on scroll. Content is now visible by default,
   so any leftover .reveal class (and its observer) is harmless. */
.reveal, .reveal.revealed { opacity: 1; transform: none; }