/* Design tokens and the reset every page starts from.
 *
 * The palette used to be copy-pasted into style.css, four inline <style>
 * blocks and a Python string, with the copies already drifting: the login page
 * still carried an older blue, and --surface3/--green/--yellow existed only in
 * some of them. One definition here, and pages keep only what is theirs.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Tells the browser this UI is dark so native chrome — scrollbars, select
     dropdowns, date pickers — renders dark instead of clashing light widgets. */
  color-scheme: dark;

  --bg:        #0a0d12;
  --surface:   #11151c;
  --surface2:  #161b24;
  --surface3:  #1c222d;
  --border:    #262d3a;
  --border-hi: #323b4a;

  --text:  #e8edf5;
  --muted: #8a93a3;
  --faint: #5a6373;

  --green:  #3ddc97;
  --red:    #ff5d6c;
  --yellow: #ffc857;
  --blue:   #5b9dff;

  --radius:   10px;
  --header-h: 52px;

  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Same four colours as RGB triplets, for rgba() tints. They lived in
     style.css, which only two pages load — so the notification panel came out
     colourless everywhere else. */
  --pos-c:  61,220,151;
  --neg-c:  255,93,108;
  --warn-c: 255,200,87;
  --acct-c: 91,157,255;
}

/* Icon-only button: used by the header, the modals and the notification panel,
   so it belongs to the shared layer rather than to the dashboard's stylesheet. */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 7px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, transform .08s;
}
.icon-btn:active { transform: scale(.93); background: var(--surface3); color: var(--text); }
/* Touch devices get no hover — it used to swallow the first tap. */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--surface3); color: var(--text); }
}

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* Scrollbars: the default light ones cut through every dark panel.
   color-scheme:dark above already darkens the OS default; this thins it down
   and ties the colour to the theme. The first rule is what Firefox reads. */
* { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #3d4757; }

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