/* ==========================================================================
   All Bank Balance — admin panel
   --------------------------------------------------------------------------
   Everything colour- and size-related is a custom property, so retheming means
   editing :root and nothing else.

   Two layout rules matter and are easy to undo by accident:

   1. The sidebar is `position:fixed`, and `main` carries a matching left margin.
      It used to be a flex child of <body>, which meant it scrolled away with the
      page on any long table.
   2. The table's own scrollbar lives on .table-wrap, not on the page. Without a
      dedicated wrapper a wide table stretches the whole document and the sticky
      header stops sticking.
   ========================================================================== */

:root {
  --bg:          #f1f5f9;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e2e8f0;
  --border-soft: #eef2f7;

  --text:        #0f172a;
  --text-soft:   #475569;
  --text-muted:  #64748b;

  --brand:       #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft:  #eff6ff;
  --brand-ring:  rgba(37, 99, 235, .35);

  --danger:      #dc2626;
  --danger-hover:#b91c1c;

  --side-bg:     #111827;
  --side-bg-2:   #0b1220;
  --side-text:   #cbd5e1;
  --side-dim:    #64748b;
  --side-hover:  #1f2937;

  --side-w:      248px;
  --radius:      10px;
  --radius-sm:   7px;
  --shadow:      0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-lg:   0 10px 30px rgba(15, 23, 42, .10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- sidebar -- */

.side {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--side-w);
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  padding: 18px 0 14px;
  z-index: 20;
  /* Only scrolls if the viewport is genuinely too short for the nav. */
  overflow-y: auto;
  scrollbar-width: thin;
}
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.side .brand {
  font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -.01em;
  padding: 0 20px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  margin-bottom: 8px;
}
.side .grp {
  padding: 16px 20px 6px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--side-dim);
}
.side a {
  color: var(--side-text); text-decoration: none;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 20px; font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.side a:hover { background: var(--side-hover); color: #fff; }
.side a.on {
  background: rgba(37, 99, 235, .16);
  border-left-color: var(--brand);
  color: #fff; font-weight: 600;
}

.side .out { margin-top: auto; padding: 16px 20px 0; }
.side .out button {
  width: 100%; background: none; border: 1px solid #334155; color: #94a3b8;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 12px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side .out button:hover { border-color: #475569; color: #e2e8f0; }

/* ------------------------------------------------------------------- main -- */

main {
  margin-left: var(--side-w);
  padding: 28px 34px 60px;
  max-width: 1500px;
}
main.bare {
  margin-left: 0; max-width: none;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}

/* -------------------------------------------------------------- typography -- */

h1 { font-size: 22px; margin: 0 0 5px; letter-spacing: -.02em; font-weight: 650; }
h2 { font-size: 15px; margin: 28px 0 10px; font-weight: 650; }

/* The strapline sits tight under the h1 but needs room before whatever follows —
   a note, a flash, a form. Inside .page-head that gap belongs to the header itself,
   so it is reset there rather than doubled. */
.sub { color: var(--text-muted); margin: 0 0 20px; font-size: 13px; }
.page-head .sub { margin-bottom: 0; }
.muted { color: var(--text-muted); font-size: 12.5px; }

code {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------- page head -- */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-head .btn { flex: none; }

/* ---------------------------------------------------------------- toolbar -- */
/* One row: filters, then search, then the buttons. Wraps only when narrow. */

.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar select,
.toolbar input[type=text] {
  width: auto; min-width: 150px; max-width: 240px; flex: 0 1 200px;
  margin: 0; padding: 8px 11px; height: 38px;
}
.toolbar input[type=text] { flex: 1 1 220px; }
.toolbar .btn { flex: none; height: 38px; display: inline-flex; align-items: center; }
.toolbar select:disabled {
  background: var(--surface-2); color: var(--text-muted); cursor: not-allowed;
}

/* legacy alias — a few views still say .bar */
.bar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.bar input, .bar select { width: auto; max-width: 240px; margin: 0; height: 38px; }
.bar .btn { height: 38px; display: inline-flex; align-items: center; }

/* ----------------------------------------------------------------- tables -- */

.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: auto; max-height: calc(100vh - 230px);
}
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.table-wrap + .table-wrap { margin-top: 16px; }

th, td {
  text-align: left; padding: 11px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--text-soft);
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--brand-soft); }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
td.actions form { display: inline; }

/* Tables outside a .table-wrap (dashboard, versions) still need a card look. */
main > table {
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
main > table th { position: static; }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block; background: var(--brand); color: #fff; border: 1px solid transparent;
  padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: var(--brand-hover); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.btn.sec { background: var(--surface); color: var(--text-soft); border-color: #cbd5e1; }
.btn.sec:hover { background: var(--surface-2); border-color: #94a3b8; }
.btn.ghost { background: none; color: var(--text-muted); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ------------------------------------------------------------------ forms -- */

label { display: block; margin: 16px 0 5px; font-weight: 600; font-size: 13px; color: var(--text-soft); }
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%; max-width: 540px; padding: 9px 11px;
  border: 1px solid #cbd5e1; border-radius: var(--radius-sm);
  font: inherit; color: var(--text); background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
textarea { min-height: 88px; resize: vertical; }
.help { color: var(--text-muted); font-size: 12px; margin-top: 4px; max-width: 540px; }

/* ------------------------------------------------------------- field hint -- */
/*
   The same help text, on demand instead of always.

   It used to sit under each control, which in a four-column grid is what set the
   row's height — one long note pushed three unrelated fields down and left a ragged
   gap beside them.

   The trigger is placed in the label rather than inside the control. Inside looks
   tidier on a plain text box and collides on everything else: a <select> already has
   its arrow in that corner, date inputs have the browser's calendar button and number
   inputs have spinners, all drawn by the browser at the right edge where they cannot
   be moved. Of the fields that carry help here, four of the six types are one of those.

   It is focusable, so it opens on keyboard focus and on a touch tap, not only on
   hover — the text is the explanation of a field, not decoration, and hover alone
   would hide it from anyone not using a mouse. */

label { position: relative; }

.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px;
  border: 1px solid #cbd5e1; border-radius: 50%;
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--text-muted); background: var(--surface);
  cursor: help; user-select: none;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.hint:hover, .hint:focus { color: #fff; border-color: var(--brand); background: var(--brand); outline: none; }

/* Pinned to the label's box, so the bubble is exactly one column wide and can never
   spill out of the grid — not centred on the icon, which would overflow the window
   on the right-hand column. */
.hint-tip {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 7px);
  padding: 8px 10px;
  background: #0f172a; color: #e2e8f0;
  border-radius: var(--radius-sm);
  font: 400 12px/1.5 inherit; font-family: inherit; text-align: left;
  letter-spacing: normal; text-transform: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.hint-tip::before {
  content: ''; position: absolute; bottom: 100%; left: 14px;
  border: 5px solid transparent; border-bottom-color: #0f172a;
}
.hint-tip code {
  background: rgba(255, 255, 255, .16); color: inherit;
  padding: 1px 4px; border-radius: 3px; font-size: 11px;
}
.hint:hover .hint-tip, .hint:focus .hint-tip {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

/* ------------------------------------------------------------- form grid -- */
/* Four fields per row. Each .field is its own column, so the label and control stay
   together and rows line up.
   `align-content: start` keeps short fields from stretching to match tall ones. */

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 20px;
  align-items: start;
}
.form-grid .field { min-width: 0; display: flex; flex-direction: column; }
.form-grid .field.wide { grid-column: span 2; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid label { margin-top: 14px; }
.form-grid input, .form-grid select, .form-grid textarea { max-width: none; }
.form-grid .help { max-width: none; }
.form-grid textarea { min-height: 76px; }

.form-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-soft);
}

@media (max-width: 1180px) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field.wide, .form-grid .field.full { grid-column: auto; }
}

/* ------------------------------------------------------------------ cards -- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
a.stat:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.stat .n { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.stat .l { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }

/* --------------------------------------------------------------- messages -- */

.flash, .note, .err-list {
  padding: 12px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px;
}
.flash.ok   { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.flash.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.flash.err  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.note       { background: var(--brand-soft); border: 1px solid #bfdbfe; color: #1e40af; }
.err-list   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.err-list ul { margin: 6px 0 0; padding-left: 18px; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
}
.pill.y { background: #dcfce7; color: #166534; }
.pill.n { background: #f1f5f9; color: var(--text-muted); }

/* ------------------------------------------------------------------ login -- */

.login {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 34px; width: 360px; box-shadow: var(--shadow-lg);
}

img.logo { height: 24px; vertical-align: middle; border-radius: 4px; }

/* -------------------------------------------------------------- pagination -- */

.pager { display: flex; gap: 10px; align-items: center; margin-top: 16px; }

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .side {
    position: static; width: 100%; height: auto; flex-direction: row;
    flex-wrap: wrap; align-items: center; gap: 2px; padding: 10px 12px;
    overflow: visible;
  }
  .side .brand { border: none; margin: 0; padding: 0 12px 0 4px; width: 100%; }
  .side .grp { display: none; }
  .side a { padding: 6px 10px; font-size: 12.5px; border-left: none; border-radius: 6px; }
  .side a.on { border-left: none; }
  .side .out { margin: 0 0 0 auto; padding: 0; width: auto; }
  main { margin-left: 0; padding: 20px 16px 48px; }
  .table-wrap { max-height: none; }
}

/* ----------------------------------------------------------- app switcher -- */
/* Sits under the brand in the sidebar. Everything in the panel is scoped to it,
   so it belongs where it is always visible, not buried in a settings page. */
.side .appsw {
  padding: 0 20px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  margin-bottom: 8px;
}
.side .appsw label {
  display: block; margin: 0 0 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--side-dim);
}
.side .appsw select {
  width: 100%; padding: 7px 9px; font-size: 13px;
  background: rgba(148, 163, 184, .10);
  color: #fff; border: 1px solid #334155; border-radius: var(--radius-sm);
}
.side .appsw select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.side .appsw option { color: #0f172a; }