/* =========================================================================
   DWH bookkeeping — single stylesheet, design-token driven.

   A "theme" is the block of custom properties under :root. To restyle the
   whole app (colours, fonts, spacing, radii) edit the tokens here; the rest
   of the file and the templates only ever reference var(--…), never raw
   values. No build step — Django/WhiteNoise serves this file directly, and
   the font url()s below are rewritten by ManifestStaticFilesStorage in prod.
   ========================================================================= */

/* --- Fonts (already shipped in static/fonts/) ---------------------------- */
@font-face {
  font-family: "Mulish";          /* variable: weight axis 200–1000 */
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Mulish.17e081942f31.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";         /* static light, used for headings */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Poppins-Light.7c448dffabde.ttf") format("truetype");
}

/* --- Theme: DWH brand ---------------------------------------------------- */
:root {
  /* Brand palette (straight from the logo) */
  --brand-blue:   #2aaae2;
  --brand-green:  #3bb34a;
  --brand-purple: #66328f;
  --brand-orange: #f04e28;
  --brand-yellow: #f6ec27;

  /* Semantic colours (darkened where they carry text on white, for contrast) */
  --accent:        #1488c4;   /* primary action / links */
  --accent-strong: #0f6e9e;   /* hover/active */
  --money-in:      #2f9442;   /* credits */
  --money-out:     #c93d1c;   /* debits */
  --warn:          #b45309;   /* uncategorised / attention */

  /* Surfaces & text */
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --ink:       #1a1a1a;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --border-soft: #f1f5f9;

  /* Header */
  --header-bg:   #eef2f6;
  --header-ink:  #1a1a1a;
  --header-link: #475569;

  /* Type */
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;

  /* Shape & rhythm */
  --radius:    .5rem;
  --radius-sm: .25rem;
  --gap:       1rem;
  --pad:       1.5rem;
  --shadow:    0 1px 2px rgba(15, 23, 42, .06);

  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--ink);
}

/* --- Base elements ------------------------------------------------------- */
* { box-sizing: border-box; }

body { margin: 0; color: var(--ink); background: var(--bg); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 300; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1.25rem; }
/* Data-dense pages (e.g. the transactions table) opt into a wider container
   via {% block main_class %}main--wide{% endblock %}. */
main.main--wide { max-width: 110rem; }

/* --- Header / nav -------------------------------------------------------- */
.brandbar {                 /* thin five-colour stripe echoing the logo */
  height: 4px;
  background: linear-gradient(90deg,
    var(--brand-blue)   0 20%,
    var(--brand-green)  20% 40%,
    var(--brand-yellow) 40% 60%,
    var(--brand-orange) 60% 80%,
    var(--brand-purple) 80% 100%);
}
header.site {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .5rem 1.25rem;
  background: var(--header-bg); color: var(--header-ink);
  border-bottom: 1px solid var(--border);
}
header.site .brand { display: flex; align-items: center; gap: .6rem; color: var(--header-ink); }
header.site .brand img { height: 28px; width: auto; display: block; }
header.site .brand strong {            /* DWH wordmark in the five brand colours */
  background: linear-gradient(90deg,
    var(--brand-orange), var(--brand-yellow), var(--brand-green),
    var(--brand-blue), var(--brand-purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
header.site nav { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
header.site .usernav { margin-left: auto; gap: .5rem; }
header.site nav a {
  color: var(--header-link); padding: .4rem .7rem; border-radius: .4rem;
  transition: background-color .15s ease, color .15s ease;
}
/* utility (user) nav: subtle neutral hover box */
header.site nav a:hover { background: rgba(0, 0, 0, .06); color: var(--header-ink); text-decoration: none; }
/* main nav: each item lights up in a brand colour, cycling through all five */
header.site .mainnav a:nth-child(5n+1) { --hl: var(--brand-blue);   --hl-ink: #1a1a1a; }
header.site .mainnav a:nth-child(5n+2) { --hl: var(--brand-green);  --hl-ink: #1a1a1a; }
header.site .mainnav a:nth-child(5n+3) { --hl: var(--brand-yellow); --hl-ink: #1a1a1a; }
header.site .mainnav a:nth-child(5n+4) { --hl: var(--brand-orange); --hl-ink: #1a1a1a; }
header.site .mainnav a:nth-child(5n+5) { --hl: var(--brand-purple); --hl-ink: #ffffff; }
header.site .mainnav a:hover { background: var(--hl); color: var(--hl-ink); }
header.site .logout { background: none; border: 0; color: var(--header-link);
  padding: .4rem .3rem; cursor: pointer; font: inherit; }
header.site .logout:hover { color: var(--header-ink); }

/* --- Cards & layout helpers --------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--gap); }
/* …but cards side by side in a .row must keep their tops aligned (the rule
   above is for vertically stacked cards). */
.row > .card { margin-top: 0; }

/* Auth pages (login / OTP): a single card centred in the viewport. */
.auth { min-height: calc(100vh - 3rem); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 24rem; }
.auth-card h1 { margin-top: 0; }
.auth-card form p:last-child { margin-bottom: 0; }
.auth-card .btn { margin-top: .5rem; }

.row    { display: flex; gap: var(--gap); flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); }
.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.grow   { flex: 1; min-width: 14rem; }
.muted  { color: var(--muted); }
.stat   { font-size: 1.6rem; margin: .2rem 0; }

/* --- Forms --------------------------------------------------------------- */
form p { margin: .5rem 0; }
label { display: block; font-weight: 600; }
input, select, textarea {
  padding: .4rem; border: 1px solid #cbd5e1; border-radius: var(--radius-sm);
  width: 100%; max-width: 22rem; box-sizing: border-box; font: inherit;
  background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
/* Checkboxes and radios should never stretch to the field width. */
input[type=checkbox], input[type=radio] { width: auto; }

/* Language switcher (public pages): small inline buttons, current one inert. */
.langswitch { display: flex; gap: .4rem; align-items: flex-start; }
.langswitch button { padding: .25rem .6rem; font-size: .85rem; }
.langswitch button[disabled] { opacity: 1; cursor: default; }

/* Receipts file list (receipt_files.js): chosen files with a remove button. */
.filelist { list-style: none; padding: 0; margin: .5rem 0 0;
            display: flex; flex-direction: column; gap: .35rem; }
.filelist li { display: flex; align-items: center; justify-content: space-between;
               gap: .5rem; max-width: 22rem; padding: .3rem .5rem;
               background: var(--border-soft); border: 1px solid var(--border);
               border-radius: var(--radius-sm); }
.filelist-remove { padding: .1rem .5rem; font-size: .8rem; }

/* --- Field rows (shared two-column label / field layout) ----------------- */
.field-row { display: grid; grid-template-columns: 16rem 1fr; gap: var(--gap);
             align-items: center; margin: .65rem 0; max-width: 42rem; }
.field-row > label { margin: 0; }
.field-row input[type=checkbox] { width: auto; }
.field-row .help { color: var(--muted); font-size: .85rem; font-weight: 400;
                   margin-top: .25rem; }
.field-row .errorlist { list-style: none; padding: 0; margin: .25rem 0 0;
                        color: var(--money-out); font-size: .9rem; }

/* Journal-entry line editor: the raw DELETE checkbox is driven by the
   per-row Remove button (static/js/memoriaal_lines.js), so keep it hidden. */
.del-box { display: none; }
.line-row.removed { display: none; }
.balance { font-weight: 600; margin: .5rem 0; }

/* --- Buttons ------------------------------------------------------------- */
button, .btn {
  display: inline-block; padding: .5rem 1rem; border: 0;
  border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  cursor: pointer; font: inherit; text-decoration: none; line-height: 1.2;
}
button:hover, .btn:hover { background: var(--accent-strong); color: #fff; text-decoration: none; }
.btn-muted { background: var(--muted); }
.btn-muted:hover { background: #4b5563; }
.btn-sm { padding: .25rem .6rem; font-size: .85rem; }
a > button, a > .btn { vertical-align: middle; }

/* Inline row controls (e.g. Edit link next to a Delete button) sit on one line. */
.row-actions { display: inline-flex; align-items: center; gap: .6rem; }

/* Drag-to-reorder rows (rules list). The handle hints the row is draggable; the
   row itself is the drag source so grabbing anywhere works. */
.table tr[draggable="true"] { cursor: grab; }
.table tr.dragging { opacity: .5; background: var(--border-soft); }
.drag-handle { color: var(--muted); cursor: grab; user-select: none; font-size: 1.1rem; }

/* --- Tables -------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .5rem .35rem; }
.table thead th { text-align: left; border-bottom: 1px solid var(--border); }
.table tbody tr { border-bottom: 1px solid var(--border-soft); }
.table tr.total td { border-top: 2px solid var(--border); font-weight: 600; }
.table tr.total--strong td { border-top: 2px solid var(--ink); }
/* Grouping-parent row in the budget overview: its figures roll up its children. */
.table tr.cat-parent td { font-weight: 600; }
/* Sortable column headers: the whole cell is one click target; a neutral
   ↕ marks sortable-but-unsorted columns, ▲/▼ the active sort direction. */
th.sortable { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: .3rem; width: 100%;
  padding: .5rem .35rem; color: inherit; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.th-sort--right { justify-content: flex-end; }
.th-sort:hover { color: var(--accent); text-decoration: none; }
.th-sort:hover .sort-ind--idle { color: var(--accent); }
.sort-ind { font-size: .8em; line-height: 1; color: var(--accent); }
.sort-ind--idle { color: #cbd5e1; }   /* visible but quiet until hovered */

/* --- Transactions filter bar (inline, above the table) ------------------- */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--gap);
  margin-bottom: var(--gap); padding: var(--gap);
  background: var(--border-soft); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filterbar__fields {
  flex: 1; display: grid; gap: .6rem var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.filterbar__actions { display: flex; gap: .5rem; align-items: end; }
.filter-field { display: flex; flex-direction: column; gap: .25rem; }
.filter-field > label {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em;
}
.filter-field select, .filter-field > input { width: 100%; max-width: none; }
/* Range fields hold two inputs side by side, so give them twice the width of a
   single field (date inputs can't shrink below their intrinsic min-width). */
.filter-field--range { grid-column: span 2; }
.filter-range { display: flex; align-items: center; gap: .4rem; }
.filter-range input { width: 100%; max-width: none; }
.filter-range__sep { color: var(--muted); }

/* --- Active-filter chips ------------------------------------------------- */
.chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-bottom: var(--gap);
}
.chips__label { color: var(--muted); font-size: .85rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .35rem .2rem .65rem; border-radius: 1em;
  background: #e8f4fb; border: 1px solid #bfe2f4; color: var(--accent-strong);
  font-size: .82rem; line-height: 1.6; text-decoration: none;
}
.chip:hover { background: #d7ecf8; color: var(--accent-strong); text-decoration: none; }
.chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: rgba(15, 110, 158, .15); font-size: .72em;
}
.chip:hover .chip__x { background: rgba(15, 110, 158, .32); }

/* --- Screen-reader-only helper ------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Table view tools (above the table) ---------------------------------- */
.table-tools {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 1rem; margin-bottom: .5rem;
}
/* Let a wide table scroll within its card instead of overflowing the page. */
.table-scroll { overflow-x: auto; }

/* Generic dropdown: a <details> button (styled as .btn) that reveals a menu. */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::marker { content: ""; }
.dropdown[open] > summary.btn-muted { background: #4b5563; }
.dropdown__menu {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 30;
  min-width: 9rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
  display: flex; flex-direction: column;
}
.dropdown__menu a, .dropdown__menu button {
  display: block; width: 100%; padding: .4rem .6rem; border-radius: var(--radius-sm);
  background: none; border: 0; color: var(--ink); font: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.dropdown__menu a:hover, .dropdown__menu button:hover {
  background: var(--border-soft); color: var(--ink); text-decoration: none;
}

/* Columns dropdown: a button that reveals per-column show/hide checkboxes. */
.colmenu { position: relative; display: inline-block; }
.colmenu__toggle { list-style: none; padding: .4rem .8rem; font-size: .85rem; }
.colmenu__toggle::-webkit-details-marker { display: none; }
.colmenu__toggle::marker { content: ""; }
.colmenu[open] .colmenu__toggle { background: #4b5563; }
.colmenu__panel {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 30;
  min-width: 13rem; padding: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
}
.colmenu__hint {
  margin: 0 0 .25rem; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
}
.colmenu__item {
  display: flex; align-items: center; gap: .5rem; padding: .25rem .3rem;
  border-radius: var(--radius-sm); font-size: .9rem; cursor: pointer;
}
.colmenu__item:hover { background: var(--border-soft); }
.colmenu__item input { margin: 0; width: auto; }
.toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--muted); cursor: pointer; user-select: none;
}
.toggle input { margin: 0; }

/* --- Searchable select (searchable_select.js) ---------------------------- */
/* A `<select data-searchable>` enhanced into a type-to-filter combobox. The
   native <select> is hidden but still holds and submits the value. */
.ss { position: relative; max-width: 22rem; }
.ss__native { display: none; }
.ss__input { width: 100%; max-width: none; }
.ss__panel {
  position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
  overflow: hidden;
}
.ss__list {
  list-style: none; margin: 0; padding: .25rem;
  max-height: 15rem; overflow-y: auto;
}
.ss__option {
  padding: .35rem .55rem; border-radius: var(--radius-sm);
  cursor: pointer; font-size: .95rem;
}
.ss__option--active { background: var(--border-soft); }
.ss__option--selected { font-weight: 600; }
.ss__empty { padding: .4rem .55rem; color: var(--muted); font-size: .9rem; }

/* Description column: single line, truncated with an ellipsis by default.
   The "Wrap descriptions" toggle adds .tx-wrap to the table to show the
   full text across multiple lines (width stays capped so the table is stable). */
.desc {
  max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
/* Expanded: either globally (the toggle) or one row at a time (click). */
.tx-wrap .desc, .desc--open { overflow: visible; white-space: normal; }
.tx-wrap .desc { cursor: auto; }

/* Clickable rows: the row opens the transaction; cell links filter instead. */
tr.txrow { cursor: pointer; }
tr.txrow:hover { background: var(--border-soft); }
.cellfilter { color: inherit; text-decoration: none; }
.cellfilter:hover { text-decoration: underline; }

/* --- Money & status tags ------------------------------------------------- */
.amount      { text-align: right; }
.text-in,  .amount--in  { color: var(--money-in); }
.text-out, .amount--out { color: var(--money-out); }

.tag { display: inline-block; }
.tag--muted { color: var(--muted); }
.tag--warn  { color: var(--warn); }

/* Count badge (e.g. unprocessed declaraties in the nav) */
.badge {
  display: inline-block; min-width: 1.3em; padding: 0 .4em;
  border-radius: 1em; background: var(--brand-orange); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 1.5; text-align: center;
}

/* --- Coloured / status buttons ------------------------------------------- */
.btn-ok     { background: var(--money-in); }
.btn-ok:hover     { background: #257a37; }
.btn-danger { background: var(--money-out); }
.btn-danger:hover { background: #a8330f; }

/* --- Utilities ----------------------------------------------------------- */
.num, .right { text-align: right; }
.left   { text-align: left; }
.w-full { width: 100%; max-width: none; }
.inline { display: inline; }
.mt  { margin-top: var(--gap); }
.mb  { margin-bottom: var(--gap); }
.ml  { margin-left: .5rem; }
.mt0 { margin-top: 0; }
.m0  { margin: 0; }

/* --- Messages ------------------------------------------------------------ */
.messages { list-style: none; padding: 0; }
.messages li {
  padding: .5rem .75rem; border-radius: var(--radius-sm); margin: .25rem 0;
  background: #ecfdf5; border: 1px solid #a7f3d0;
}
.messages li.error   { background: #fef2f2; border-color: #fecaca; }
.messages li.warning { background: #fffbeb; border-color: #fde68a; }