/* SPACING: reach for a token — `--card-pad`, `--card-gap`, `--sp-1`…`--sp-6` —
   not a raw rem, and not the value in the rule above. Cards on the padding
   contract are enforced by `test/layout-tokens.test.js`; the contract and the
   list of what is on it are in `docs/visual-language.md` → Tokens. Raw values
   still in this file are legacy from a 2px grid, not a precedent to follow. */
/* Admin. */
/* ══ Admin ═════════════════════════════════════════════════════════════ */
/* ── The category / source lists, their cards and the colour palette. The
   whole of Admin is styled here; nothing earlier states any of it. ── */
/* Every admin card spans the full page width; the item lists inside them split into two columns. */
.admin-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);margin-bottom:var(--sp-5);}
/* Surface, border and radius come from the shared card rule in
   04-base-type-and-cards.css; only the padding is Admin's own. */
.admin-card{padding:var(--sp-5);}
/* Standalone admin-cards (Starting Balance, Backup & Restore, About & Data — not
   inside .admin-grid, which already spaces its own children via gap) need their
   own bottom margin, same as chart-card/table-wrap, or they sit flush against
   each other with no visible gap. */
.panel>.admin-card{margin-bottom:var(--sp-5);}
.cat-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-4);}
@media(max-width:640px){
  .cat-list{grid-template-columns:1fr;}
}
.cat-item{
  display:flex;
  align-items:center;
  gap:0.625rem;
  padding:0.5625rem var(--sp-3);
  background:var(--surface2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  transition:opacity .15s;
}
.cat-item.dragging{opacity:.4;}
.drag-handle{
  cursor:grab;
  color:var(--muted);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:2px;
  line-height:0;
}
.drag-handle:active{cursor:grabbing;}
.cat-name{flex:1;font-size:var(--fs-body);}
.cat-items-label{
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:var(--fs-micro);
  padding:2px 0.3125rem;
  white-space:nowrap;
  transition:color .15s;
}
.cat-items-label:hover{color:var(--text);}
.cat-items-label.active{color:var(--text);font-weight:600;}
.cat-items-popover-row{padding:0.375rem 0.875rem;font-size:var(--fs-meta);color:var(--text);}
.cat-items-popover-row.empty{color:var(--muted);}
.cat-item.editing{
  grid-column:1/-1;
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-3);
  border-color:var(--accent);
}
.cat-edit-row{display:flex;gap:0.625rem;align-items:center;}
.cat-edit-input{
  flex:1;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:var(--sp-2) 0.625rem;
  font-size:var(--fs-body);
  outline:none;
  transition:border-color .15s;
}
.cat-edit-input:focus{border-color:var(--accent);}
.cat-edit-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;}
.new-cat-row{display:flex;gap:var(--sp-2);align-items:center;}
.new-cat-row input{
  flex:1;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:0.5625rem var(--sp-3);
  font-size:var(--fs-body);
  outline:none;
  transition:border-color .15s;
}
.new-cat-row input:focus{border-color:var(--accent);}
.new-cat-row input[type=color]{width:2.75rem;padding:var(--sp-1);cursor:pointer;flex-shrink:0;}
.palette{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:0.875rem;}
.pal-swatch{
  width:1.625rem;
  height:1.625rem;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .1s,border-color .1s;
}
.pal-swatch:hover{transform:scale(1.15);}
/* var(--text), not #fff: on the light theme the card behind this is #FFFFFF, so
   a white ring made the selected colour indistinguishable from the rest. */
.pal-swatch.selected{border-color:var(--text);transform:scale(1.15);}
@media(max-width:900px){
  .admin-grid{grid-template-columns:1fr;}
}
/* Admin was a stack of bordered "admin-card" blocks with their own headings.
   Give it the same rhythm as every other section: small-caps section label
   outside, plain card inside. */
#panel-admin .admin-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--elev);
  padding:1.125rem;
  margin-bottom:1.125rem;
}
#panel-admin .admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.125rem;}
#panel-admin .admin-grid .admin-card{margin-bottom:0;}
#panel-admin .new-cat-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);}
#panel-admin .new-cat-row input{flex:1;border-radius:var(--radius-sm) !important;padding:0.5625rem var(--sp-3);}
#panel-admin .card-head.theme-note{margin-top:var(--sp-3);}
#panel-admin .theme-picker{display:flex;gap:var(--sp-2);}
#panel-admin .lang-picker{margin-top:var(--sp-4);}
#panel-admin .theme-opt{
  padding:0.5625rem 1.125rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-body);
  font-weight:500;
  cursor:pointer;
}
#panel-admin .theme-opt:hover{border-color:var(--accent);}
#panel-admin .theme-opt.sel{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:#fff;
  font-weight:600;
}
#panel-admin .note{
  padding:var(--sp-3) 0.875rem;
  color:var(--muted);
}
#panel-admin .danger-zone{border-color:var(--neg);}
.ad-actions-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4);}
.ad-meta{margin-top:var(--sp-3);font-size:var(--fs-meta);color:var(--muted);}
#bk-actions{margin-top:var(--sp-3);}
#autobackup-row{margin-top:var(--sp-5);}
/* Expense categories keep growing, so that card spans the full row and its list
   flows into as many columns as fit; income and sources share the row below.
   align-items:start stops a long card stretching its neighbours. */
#panel-admin #tour-ad-grid{grid-template-columns:1fr 1fr;align-items:start;}
@media(max-width:760px){
  #panel-admin #tour-ad-grid{grid-template-columns:1fr;}
}
#tour-ad-grid .admin-card-wide{grid-column:1/-1;}
#tour-ad-grid .admin-card-wide .cat-list{grid-template-columns:repeat(auto-fill,minmax(14.125rem,1fr));}
/* Backups card (desktop app): one row per kept backup, newest first. */
.bk-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-1);}
.bk-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  padding:.625rem .875rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.bk-when{font-size:var(--fs-body);font-weight:600;color:var(--text);}
.bk-when .sub{color:var(--muted);font-weight:400;font-size:var(--fs-label);margin-inline-start:.4rem;}
.bk-meta{font-size:var(--fs-meta);color:var(--muted);margin-top:2px;}
.bk-when .pill{margin-inline-start:.4rem;vertical-align:1px;}
#ad-backups .btn:disabled{opacity:.4;cursor:not-allowed;}