/* Small overrides that go beyond Tailwind utility classes */

/* ---------- Theme colours ---------- */
/* Every theme token class (bg-card, text-ink-muted, border-line, text-link…,
   see tailwind.config.js) reads one of these, so a colour is changed here
   once for the whole site. Values are "R G B" so opacity modifiers work.
   All text tokens pass WCAG AA (4.5:1) on both page and card. */
:root {
  --c-page: 244 246 250;        /* #f4f6fa cool off-white, so white cards stand out */
  --c-card: 255 255 255;
  --c-field: 241 244 249;
  --c-tint: 238 242 247;
  --c-tint-strong: 225 231 240;
  --c-chrome: 11 31 58;         /* navy-900 top bar / footer */
  --c-ink: 11 31 58;            /* headings, main text */
  --c-ink-soft: 36 52 79;       /* body copy */
  --c-ink-muted: 61 81 112;     /* secondary text */
  --c-ink-subtle: 82 106 138;   /* hints, dates, captions */
  --c-ink-faint: 96 116 143;    /* the quietest text that's still readable */
  --c-line: 223 229 238;
  --c-line-soft: 235 239 245;
  --c-line-strong: 197 208 222;
  --c-link: 35 75 130;          /* navy-600 blue */
  --c-link-hover: 26 58 102;
  --c-accent: 200 151 58;       /* gold-500 buttons, with navy text */
  --c-accent-hover: 177 127 38;
  --c-gold-ink: 141 101 31;     /* gold text that's readable on white (gold-700) */
  --c-solid: 11 31 58;          /* navy buttons and selected tabs (white text) */
  --c-solid-hover: 26 58 102;
}
.dark {
  color-scheme: dark;           /* native date pickers / scrollbars follow the theme */
  --c-page: 10 23 48;           /* #0a1730 */
  --c-card: 16 34 63;           /* #10223f, one step up from the page */
  --c-field: 11 26 51;          /* inputs sit "into" the card, not on top of it */
  --c-tint: 24 45 80;
  --c-tint-strong: 33 58 99;
  --c-chrome: 7 18 38;
  --c-ink: 238 242 248;         /* off-white, less glare than pure white */
  --c-ink-soft: 201 212 227;
  --c-ink-muted: 180 194 214;
  --c-ink-subtle: 150 167 192;
  --c-ink-faint: 122 140 168;
  --c-line: 34 58 99;
  --c-line-soft: 26 47 82;
  --c-line-strong: 46 74 120;
  --c-link: 143 180 234;        /* soft sky blue */
  --c-link-hover: 181 205 242;
  --c-accent: 216 171 85;       /* gold-400 glows better on navy */
  --c-accent-hover: 227 192 124;
  --c-gold-ink: 227 192 124;
  --c-solid: 41 76 130;         /* lifted so navy buttons don't vanish on a navy card */
  --c-solid-hover: 54 94 156;
}
::selection { background: rgb(238 216 171); color: rgb(11 31 58); }

/* ---------- Role colours ---------- */
/* One colour per kind of user, so you can tell at a glance whose dashboard
   you're on and what kind of account a name in a list is. .role-<role> sets
   the variables — on <html> for the signed-in user (header.php), or on a
   badge/element for someone else (role_badge() in includes/auth.php).
   --c-role: the colour itself · --c-role-ink: readable text in it on the
   page/card · --c-role-bright: for the navy top bar/sidebar (both themes). */
.role-admin    { --c-role: 200 151 58; --c-role-ink: 141 101 31; --c-role-bright: 216 171 85; }   /* gold */
.role-manager  { --c-role: 234 88 12;  --c-role-ink: 194 65 12;  --c-role-bright: 251 146 60; }  /* orange */
.role-employee { --c-role: 79 70 229;  --c-role-ink: 67 56 202;  --c-role-bright: 165 180 252; }  /* indigo */
.role-client   { --c-role: 2 132 199;  --c-role-ink: 3 105 161;  --c-role-bright: 56 189 248; }   /* sky blue */
.role-host     { --c-role: 5 150 105;  --c-role-ink: 4 120 87;   --c-role-bright: 52 211 153; }   /* emerald */
.role-cleaner  { --c-role: 192 38 211; --c-role-ink: 162 28 175; --c-role-bright: 232 121 249; }  /* fuchsia */
.role-accounts { --c-role: 15 118 110; --c-role-ink: 13 94 88; --c-role-bright: 45 212 191; }   /* teal: SmartBooks only */
.dark .role-admin,    .dark.role-admin    { --c-role: 216 171 85;  --c-role-ink: 227 192 124; }
.dark .role-manager,  .dark.role-manager  { --c-role: 251 146 60;  --c-role-ink: 253 186 116; }
.dark .role-employee, .dark.role-employee { --c-role: 129 140 248; --c-role-ink: 199 210 254; }
.dark .role-client,   .dark.role-client   { --c-role: 56 189 248;  --c-role-ink: 125 211 252; }
.dark .role-host,     .dark.role-host     { --c-role: 52 211 153;  --c-role-ink: 110 231 183; }
.dark .role-cleaner,  .dark.role-cleaner  { --c-role: 232 121 249; --c-role-ink: 240 171 252; }
.dark .role-accounts, .dark.role-accounts { --c-role: 45 212 191; --c-role-ink: 153 246 228; }
/* Neutral, for contacts of type "Other" (and so a badge never inherits the viewer's own colour). */
.role-other { --c-role: var(--c-ink-faint); --c-role-ink: var(--c-ink-muted); --c-role-bright: var(--c-ink-faint); }
.role-badge {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  font-size: 10px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .45rem; border-radius: 9999px; white-space: nowrap;
  background: rgb(var(--c-role, var(--c-tint-strong)) / .14); color: rgb(var(--c-role-ink, var(--c-ink-muted)));
}
.role-badge::before { content: ''; width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--c-role, var(--c-ink-faint))); }
.role-ring { box-shadow: 0 0 0 2px rgb(var(--c-role-bright, var(--c-accent))); }
.role-edge { border-left: 3px solid rgb(var(--c-role, var(--c-line))) !important; }

/* ---------- Status tones (includes/ui.php → status_pill()) ---------- */
/* Five meanings, the same on every page: info = waiting / normal,
   warn = look soon, bad = act now, ok = done and fine, neutral = closed.
   Gold (--c-accent) is the brand / main-action colour and never a status. */
:root {
  --tone-info-bg: 227 238 251;  --tone-info-fg: 29 78 150;
  --tone-ok-bg: 228 244 234;    --tone-ok-fg: 21 112 58;
  --tone-warn-bg: 253 240 217;  --tone-warn-fg: 146 84 0;
  --tone-bad-bg: 253 231 228;   --tone-bad-fg: 180 35 24;
  --tone-bad-solid: 220 38 38;
}
.dark {
  --tone-info-bg: 22 44 82;     --tone-info-fg: 147 187 240;
  --tone-ok-bg: 18 52 33;       --tone-ok-fg: 110 220 150;
  --tone-warn-bg: 62 44 14;     --tone-warn-fg: 243 190 100;
  --tone-bad-bg: 66 24 20;      --tone-bad-fg: 255 145 130;
  --tone-bad-solid: 220 38 38;
}
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; line-height: 1.25rem; font-weight: 600; padding: 0 .55rem; border-radius: 9999px; white-space: nowrap; vertical-align: middle; }
.pill > i { font-size: .7rem; }
.pill-dot::before { content: ''; width: .4rem; height: .4rem; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
.pill-info    { background: rgb(var(--tone-info-bg)); color: rgb(var(--tone-info-fg)); }
.pill-ok      { background: rgb(var(--tone-ok-bg));   color: rgb(var(--tone-ok-fg)); }
.pill-warn    { background: rgb(var(--tone-warn-bg)); color: rgb(var(--tone-warn-fg)); }
.pill-bad     { background: rgb(var(--tone-bad-bg));  color: rgb(var(--tone-bad-fg)); }
.pill-neutral { background: rgb(var(--c-tint-strong)); color: rgb(var(--c-ink-muted)); }
.pill-urgent  { background: rgb(var(--tone-bad-solid)); color: #fff; }   /* "new — nobody on it yet" */

/* Tone utilities — the five status meanings as text / soft background /
   soft border, already right in light and dark (replaces pairs like
   text-green-700 dark:text-green-400). */
.text-ok   { color: rgb(var(--tone-ok-fg)); }
.text-bad  { color: rgb(var(--tone-bad-fg)); }
.text-warn { color: rgb(var(--tone-warn-fg)); }
.text-info { color: rgb(var(--tone-info-fg)); }
.bg-ok-soft   { background-color: rgb(var(--tone-ok-bg)); }
.bg-bad-soft  { background-color: rgb(var(--tone-bad-bg)); }
.bg-warn-soft { background-color: rgb(var(--tone-warn-bg)); }
.bg-info-soft { background-color: rgb(var(--tone-info-bg)); }
.border-ok-soft   { border-color: rgb(var(--tone-ok-fg) / .3); }
.border-bad-soft  { border-color: rgb(var(--tone-bad-fg) / .3); }
.border-warn-soft { border-color: rgb(var(--tone-warn-fg) / .3); }
.border-info-soft { border-color: rgb(var(--tone-info-fg) / .3); }

/* Charts (includes/charts.php): fixed series colours so a figure is the same
   colour on every chart — 1 gold = revenue / invoiced, 2 blue = bookings /
   nights, 3 slate = cost or comparison, 4 green = profit. */
/* Each bar colour is at least 3:1 against the card in both themes (WCAG non-text contrast). */
:root { --chart-1: 177 127 38; --chart-2: 47 93 158; --chart-3: 107 125 150; --chart-4: 21 128 61; }
.dark { --chart-1: 216 171 85; --chart-2: 120 165 230; --chart-3: 140 158 184; --chart-4: 74 200 120; }
.chart-c1 { background: rgb(var(--chart-1)); } .chart-c2 { background: rgb(var(--chart-2)); }
.chart-c3 { background: rgb(var(--chart-3)); } .chart-c4 { background: rgb(var(--chart-4)); }
.chart-grid { border-top: 1px dashed rgb(var(--c-line)); }
.chart-zero { border-top: 1px solid rgb(var(--c-line-strong)); }
.chart-bar:hover .chart-val, .chart-bar:focus-within .chart-val, .chart-bar:focus .chart-val { opacity: 1; }
.chart-bar:focus { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; border-radius: 2px; }

/* Accounts dashboard charts (assets/js/acc-charts.js). --viz-1…6: one colour per
   company (or category), always in this order — checked for colour-blind safety
   and contrast as a set, light and dark (worst neighbours ΔE 9.1 / 8.4, normal
   vision 19.6 / 19.3). Never reorder or add a 7th: fold the rest into "Other".
   --viz-ink is the single-series colour, --viz-muted the "for comparison" grey. */
:root {
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-6: #4a3aa7;
  --viz-ink: #234b82; --viz-muted: #b5bfcc; --viz-gold: #d8ab55;
  --viz-grid: rgb(var(--c-line-soft)); --viz-axis: rgb(var(--c-line-strong)); --viz-surface: rgb(var(--c-card));
}
.dark {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #9085e9;
  --viz-ink: #8fb4ea; --viz-muted: #4a6285;
}
.viz-s1 { --s: var(--viz-1); } .viz-s2 { --s: var(--viz-2); } .viz-s3 { --s: var(--viz-3); }
.viz-s4 { --s: var(--viz-4); } .viz-s5 { --s: var(--viz-5); } .viz-s6 { --s: var(--viz-6); }
.viz-sink { --s: var(--viz-ink); } .viz-smuted { --s: var(--viz-muted); } .viz-sgold { --s: var(--viz-gold); }
.viz-sok { --s: rgb(var(--tone-ok-fg)); } .viz-swarn { --s: rgb(var(--tone-warn-fg)); }   /* status: the statement check ring, always with an icon + label */
.viz-swatch { display: inline-block; width: .625rem; height: .625rem; border-radius: 3px; background: var(--s); flex-shrink: 0; }
.viz-fill { background: var(--s); }
.viz { position: relative; }
.viz svg { display: block; overflow: visible; }
.viz text { fill: rgb(var(--c-ink-subtle)); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz .viz-cap { fill: rgb(var(--c-ink-muted)); font-weight: 600; }
.viz [data-hit] { cursor: pointer; outline: none; }
.viz [data-hit]:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 1px; }
.viz .viz-dim { opacity: .35; transition: opacity .15s; }
.viz-tip { position: absolute; z-index: 20; pointer-events: none; min-width: 9rem; max-width: 16rem; padding: .5rem .625rem; border-radius: .5rem;
  background: rgb(var(--c-card)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); box-shadow: 0 8px 24px rgb(11 31 58 / .18);
  font-size: .75rem; line-height: 1.35; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.viz-tip.on { opacity: 1; transform: none; }
.viz-grow { transform-box: fill-box; transform-origin: bottom; animation: viz-grow .6s cubic-bezier(.2,.8,.2,1) both; }
.viz-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: viz-draw .9s ease-out .1s forwards; }
.viz-fade { animation: viz-fade .6s ease-out both; }
@keyframes viz-grow { from { transform: scaleY(0); } }
@keyframes viz-draw { to { stroke-dashoffset: 0; } }
@keyframes viz-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .viz-grow, .viz-draw, .viz-fade { animation: none; stroke-dashoffset: 0; } }
/* the navy-and-gold headline band */
.acc-hero { background: radial-gradient(120% 140% at 100% 0%, rgb(var(--hero-glow, 200 151 58) / .22) 0%, transparent 45%),
  linear-gradient(135deg, var(--hero-a, #0b1f3a) 0%, var(--hero-b, #13305a) 60%, var(--hero-c, #1a3d6e) 100%); color: #fff; }
.dark .acc-hero { background: radial-gradient(120% 140% at 100% 0%, rgb(var(--hero-glow, 216 171 85) / .18) 0%, transparent 45%),
  linear-gradient(135deg, var(--hero-a, #0d2445) 0%, var(--hero-b, #163a6b) 60%, var(--hero-c, #1d4a85) 100%); }
.hero-acc { color: var(--hero-acc, #d8ab55); }
.hero-acc-bg { background: var(--hero-acc, #d8ab55); color: var(--hero-a, #0b1f3a); }
.hero-line { background: linear-gradient(90deg, transparent, var(--hero-acc, #d8ab55), transparent); }
.acc-hero .viz text { fill: rgb(255 255 255 / .6); }
.acc-glass { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); }
/* ---------- Dashboard / SmartBooks themes (each person's own: Account settings › Theme, SmartBooks' palette button) ----------
   The accounts pages put acc-theme-<name> on <html>; each theme sets the same colour
   tokens as above for light and dark, plus the headline band (--hero-*). No class =
   the RelocateHub navy. Every text colour was checked for contrast on its cards
   (body 14:1+, muted 8:1+, faintest 4.5:1+, button text 6:1+); the chart colours
   (--viz-*) stay as they are, readable on all the dark backgrounds. Ocean, Midnight, Rose and Espresso were\n   checked the same way, with the faintest text 4.5:1+ on tinted strips too. */
html.acc-theme-ledger {
  --c-page: 242 245 241; --c-card: 255 255 255; --c-field: 240 244 240; --c-tint: 230 238 232; --c-tint-strong: 214 227 218;
  --c-chrome: 18 53 36; --c-ink: 16 38 27; --c-ink-soft: 33 58 45; --c-ink-muted: 57 82 68; --c-ink-subtle: 76 98 85; --c-ink-faint: 92 113 100;
  --c-line: 217 227 219; --c-line-soft: 232 238 233; --c-line-strong: 188 204 192; --c-link: 22 101 66; --c-link-hover: 14 76 49;
  --c-accent: 196 150 58; --c-accent-hover: 176 131 40; --c-gold-ink: 128 92 20; --c-solid: 18 53 36; --c-solid-hover: 28 76 52; --c-on-accent: 28 20 4;
  --hero-a: #0f2c1e; --hero-b: #16402b; --hero-c: #1d5238; --hero-glow: 214 178 94; --hero-acc: #d6b25e; --viz-gold: #d6b25e;
}
html.dark.acc-theme-ledger {
  --c-page: 10 22 17; --c-card: 17 34 26; --c-field: 11 24 18; --c-tint: 26 50 39; --c-tint-strong: 35 65 51;
  --c-chrome: 6 16 12; --c-ink: 232 240 234; --c-ink-soft: 201 215 206; --c-ink-muted: 177 196 184; --c-ink-subtle: 149 171 157; --c-ink-faint: 121 144 130;
  --c-line: 34 58 46; --c-line-soft: 25 45 36; --c-line-strong: 50 80 64; --c-link: 134 207 166; --c-link-hover: 176 226 197;
  --c-accent: 214 178 94; --c-accent-hover: 228 199 128; --c-gold-ink: 228 199 128; --c-solid: 37 94 65; --c-solid-hover: 49 114 80; --c-on-accent: 28 20 4;
  --hero-a: #0f2a1d; --hero-b: #173f2b; --hero-c: #1f5339;
}
html.acc-theme-graphite {
  --c-page: 243 244 245; --c-card: 255 255 255; --c-field: 241 243 245; --c-tint: 235 238 241; --c-tint-strong: 221 226 231;
  --c-chrome: 28 33 38; --c-ink: 20 24 28; --c-ink-soft: 38 44 50; --c-ink-muted: 66 74 82; --c-ink-subtle: 85 93 102; --c-ink-faint: 100 108 118;
  --c-line: 222 226 230; --c-line-soft: 236 238 241; --c-line-strong: 196 202 209; --c-link: 13 110 103; --c-link-hover: 10 88 82;
  --c-accent: 20 184 166; --c-accent-hover: 13 160 145; --c-gold-ink: 13 110 103; --c-solid: 28 33 38; --c-solid-hover: 45 52 60; --c-on-accent: 4 38 34;
  --hero-a: #1a1f24; --hero-b: #242b32; --hero-c: #2f3841; --hero-glow: 45 212 191; --hero-acc: #2dd4bf; --viz-gold: #2dd4bf;
}
html.dark.acc-theme-graphite {
  --c-page: 16 18 21; --c-card: 25 28 32; --c-field: 18 20 24; --c-tint: 34 38 43; --c-tint-strong: 44 49 56;
  --c-chrome: 9 10 12; --c-ink: 236 238 240; --c-ink-soft: 206 210 215; --c-ink-muted: 180 186 193; --c-ink-subtle: 152 159 167; --c-ink-faint: 124 131 140;
  --c-line: 42 47 53; --c-line-soft: 32 36 41; --c-line-strong: 58 64 72; --c-link: 94 234 212; --c-link-hover: 153 246 228;
  --c-accent: 45 212 191; --c-accent-hover: 94 234 212; --c-gold-ink: 94 234 212; --c-solid: 52 60 70; --c-solid-hover: 66 75 87; --c-on-accent: 4 38 34;
  --hero-a: #15191d; --hero-b: #1f252b; --hero-c: #2a3139;
}
html.acc-theme-aubergine {
  --c-page: 246 243 247; --c-card: 255 255 255; --c-field: 244 240 245; --c-tint: 238 231 241; --c-tint-strong: 226 214 231;
  --c-chrome: 51 32 61; --c-ink: 36 23 43; --c-ink-soft: 55 38 64; --c-ink-muted: 86 68 96; --c-ink-subtle: 103 85 113; --c-ink-faint: 118 101 128;
  --c-line: 229 222 233; --c-line-soft: 240 235 242; --c-line-strong: 207 195 213; --c-link: 109 53 132; --c-link-hover: 86 40 105;
  --c-accent: 208 138 92; --c-accent-hover: 190 118 72; --c-gold-ink: 150 80 40; --c-solid: 51 32 61; --c-solid-hover: 72 47 85; --c-on-accent: 42 19 10;
  --hero-a: #2a1832; --hero-b: #3b2346; --hero-c: #4b2e5a; --hero-glow: 216 137 90; --hero-acc: #e0a27a; --viz-gold: #e0a27a;
}
html.dark.acc-theme-aubergine {
  --c-page: 21 14 25; --c-card: 31 21 37; --c-field: 23 15 28; --c-tint: 43 30 50; --c-tint-strong: 56 40 65;
  --c-chrome: 14 9 18; --c-ink: 241 234 244; --c-ink-soft: 215 203 221; --c-ink-muted: 190 176 197; --c-ink-subtle: 163 147 171; --c-ink-faint: 141 125 150;
  --c-line: 53 38 61; --c-line-soft: 40 28 46; --c-line-strong: 70 52 80; --c-link: 214 170 232; --c-link-hover: 232 204 243;
  --c-accent: 216 137 90; --c-accent-hover: 230 164 122; --c-gold-ink: 230 164 122; --c-solid: 82 54 96; --c-solid-hover: 99 67 115; --c-on-accent: 42 19 10;
  --hero-a: #22142a; --hero-b: #32203d; --hero-c: #43294f;
}html.acc-theme-ocean {
  --c-page: 241 246 248; --c-card: 255 255 255; --c-field: 238 244 247; --c-tint: 228 239 243; --c-tint-strong: 210 227 234;
  --c-chrome: 12 52 66; --c-ink: 10 37 48; --c-ink-soft: 28 56 68; --c-ink-muted: 52 82 95; --c-ink-subtle: 70 99 112; --c-ink-faint: 80 106 119;
  --c-line: 216 228 233; --c-line-soft: 232 239 242; --c-line-strong: 186 205 213; --c-link: 12 102 128; --c-link-hover: 8 78 99;
  --c-accent: 232 115 90; --c-accent-hover: 214 96 70; --c-gold-ink: 168 66 44; --c-solid: 12 52 66; --c-solid-hover: 22 74 92; --c-on-accent: 43 14 6;
  --hero-a: #0b2f3c; --hero-b: #0f4152; --hero-c: #145468; --hero-glow: 240 128 100; --hero-acc: #f08a6e; --viz-gold: #f08a6e;
}
html.dark.acc-theme-ocean {
  --c-page: 8 22 28; --c-card: 14 33 42; --c-field: 9 24 31; --c-tint: 22 48 59; --c-tint-strong: 31 62 76;
  --c-chrome: 5 15 19; --c-ink: 232 241 244; --c-ink-soft: 200 216 222; --c-ink-muted: 174 195 203; --c-ink-subtle: 146 170 180; --c-ink-faint: 132 157 168;
  --c-line: 31 57 69; --c-line-soft: 23 45 55; --c-line-strong: 46 77 91; --c-link: 120 205 230; --c-link-hover: 168 224 240;
  --c-accent: 240 128 100; --c-accent-hover: 246 156 133; --c-gold-ink: 246 156 133; --c-solid: 26 86 106; --c-solid-hover: 34 104 127; --c-on-accent: 43 14 6;
  --hero-a: #0a2833; --hero-b: #0f3a49; --hero-c: #154c5f;
}
html.acc-theme-midnight {
  --c-page: 244 244 250; --c-card: 255 255 255; --c-field: 241 241 248; --c-tint: 234 234 246; --c-tint-strong: 219 219 238;
  --c-chrome: 30 27 75; --c-ink: 22 20 56; --c-ink-soft: 40 38 76; --c-ink-muted: 66 64 104; --c-ink-subtle: 85 83 122; --c-ink-faint: 100 98 136;
  --c-line: 224 224 238; --c-line-soft: 237 237 246; --c-line-strong: 198 198 222; --c-link: 67 56 202; --c-link-hover: 55 48 163;
  --c-accent: 245 158 11; --c-accent-hover: 228 140 6; --c-gold-ink: 146 78 0; --c-solid: 30 27 75; --c-solid-hover: 49 46 129; --c-on-accent: 41 22 0;
  --hero-a: #17153b; --hero-b: #221f55; --hero-c: #2e2a70; --hero-glow: 251 191 36; --hero-acc: #fbbf24; --viz-gold: #fbbf24;
}
html.dark.acc-theme-midnight {
  --c-page: 12 11 30; --c-card: 20 19 45; --c-field: 13 12 33; --c-tint: 31 29 64; --c-tint-strong: 42 40 82;
  --c-chrome: 7 6 20; --c-ink: 236 236 250; --c-ink-soft: 208 208 232; --c-ink-muted: 184 184 214; --c-ink-subtle: 156 156 192; --c-ink-faint: 140 140 180;
  --c-line: 40 38 76; --c-line-soft: 30 28 60; --c-line-strong: 57 55 100; --c-link: 165 180 252; --c-link-hover: 199 210 254;
  --c-accent: 251 191 36; --c-accent-hover: 252 211 77; --c-gold-ink: 252 211 77; --c-solid: 67 56 160; --c-solid-hover: 79 70 185; --c-on-accent: 41 22 0;
  --hero-a: #141233; --hero-b: #1f1c4d; --hero-c: #2b2766;
}
html.acc-theme-rose {
  --c-page: 246 244 245; --c-card: 255 255 255; --c-field: 244 241 243; --c-tint: 240 234 237; --c-tint-strong: 228 218 223;
  --c-chrome: 38 33 38; --c-ink: 30 24 29; --c-ink-soft: 50 42 48; --c-ink-muted: 80 70 77; --c-ink-subtle: 98 88 95; --c-ink-faint: 113 103 110;
  --c-line: 230 224 228; --c-line-soft: 241 237 239; --c-line-strong: 208 199 205; --c-link: 176 40 86; --c-link-hover: 140 30 68;
  --c-accent: 232 110 140; --c-accent-hover: 214 88 120; --c-gold-ink: 166 36 78; --c-solid: 38 33 38; --c-solid-hover: 60 52 59; --c-on-accent: 45 6 18;
  --hero-a: #221d22; --hero-b: #2f282f; --hero-c: #3d343d; --hero-glow: 236 112 145; --hero-acc: #f28aa5; --viz-gold: #f28aa5;
}
html.dark.acc-theme-rose {
  --c-page: 19 16 19; --c-card: 29 25 29; --c-field: 21 18 21; --c-tint: 40 34 39; --c-tint-strong: 52 45 51;
  --c-chrome: 11 9 11; --c-ink: 243 237 240; --c-ink-soft: 218 208 214; --c-ink-muted: 194 182 189; --c-ink-subtle: 166 153 161; --c-ink-faint: 152 139 147;
  --c-line: 50 43 49; --c-line-soft: 38 33 38; --c-line-strong: 68 59 67; --c-link: 244 160 186; --c-link-hover: 249 196 213;
  --c-accent: 236 112 145; --c-accent-hover: 242 145 171; --c-gold-ink: 242 145 171; --c-solid: 92 64 82; --c-solid-hover: 110 78 98; --c-on-accent: 45 6 18;
  --hero-a: #1c171c; --hero-b: #2a222a; --hero-c: #382e38;
}
html.acc-theme-espresso {
  --c-page: 247 244 240; --c-card: 255 255 255; --c-field: 245 241 236; --c-tint: 240 233 225; --c-tint-strong: 229 218 205;
  --c-chrome: 56 38 28; --c-ink: 40 27 19; --c-ink-soft: 61 44 34; --c-ink-muted: 92 72 60; --c-ink-subtle: 110 90 77; --c-ink-faint: 116 96 84;
  --c-line: 232 224 215; --c-line-soft: 242 237 231; --c-line-strong: 211 198 184; --c-link: 150 75 25; --c-link-hover: 120 58 18;
  --c-accent: 214 154 84; --c-accent-hover: 194 132 62; --c-gold-ink: 133 82 22; --c-solid: 56 38 28; --c-solid-hover: 80 56 42; --c-on-accent: 40 22 6;
  --hero-a: #2e1f16; --hero-b: #3f2b1f; --hero-c: #513829; --hero-glow: 226 170 102; --hero-acc: #e2aa66; --viz-gold: #e2aa66;
}
html.dark.acc-theme-espresso {
  --c-page: 22 16 12; --c-card: 33 25 20; --c-field: 24 18 14; --c-tint: 45 35 28; --c-tint-strong: 58 46 37;
  --c-chrome: 13 9 7; --c-ink: 245 238 231; --c-ink-soft: 222 210 198; --c-ink-muted: 199 184 170; --c-ink-subtle: 172 155 140; --c-ink-faint: 158 141 127;
  --c-line: 55 43 35; --c-line-soft: 42 33 27; --c-line-strong: 74 59 48; --c-link: 236 184 128; --c-link-hover: 244 207 166;
  --c-accent: 226 170 102; --c-accent-hover: 236 192 138; --c-gold-ink: 236 192 138; --c-solid: 98 70 52; --c-solid-hover: 118 86 64; --c-on-accent: 40 22 6;
  --hero-a: #24180f; --hero-b: #33231a; --hero-c: #443024;
}

/* Buttons — one set for every dashboard page (see includes/ui.php):
   btn-primary  gold, the one main action on a page or form
   btn-dark     navy, applying a filter / secondary submit
   btn-secondary outlined, everything else
   btn-danger   red, destructive (always behind a confirm) or urgent
   btn-ok       green, completing something (Mark done, Record payment)
   btn-sm       the compact size for rows and drawers
   Only display is written with :where() (no specificity) so hidden /
   md:inline-flex on the element still win; the rest must beat Tailwind's
   button reset, so don't add colour or padding utilities next to .btn. */
:where(.btn) { display: inline-flex; }   /* zero specificity: hidden / md:hidden / md:inline-flex on the element still win */
.btn { align-items: center; justify-content: center; gap: .375rem; font-size: .875rem; line-height: 1.25rem;
  font-weight: 600; padding: .5rem 1rem; border-radius: .375rem; border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s; text-decoration: none; }
.btn > i.mr-1 { margin-right: 0; }
.btn-sm { font-size: .75rem; line-height: 1rem; padding: .375rem .75rem; }
.btn-primary { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent, 11 31 58)); }
.on-accent { color: rgb(var(--c-on-accent, 11 31 58)); }
/* An on/off switch: <input type="checkbox" class="switch"> (VAT registered, company in use). */
.switch { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 2.5rem; height: 1.4rem; border-radius: 9999px; cursor: pointer;
  background: rgb(var(--c-line-strong)); transition: background-color .15s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); border-radius: 9999px;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .15s; }
/* the site's "tick boxes are transparent" rule (input[type=checkbox] … !important) must not reach a switch */
input.switch[type="checkbox"] { background-color: rgb(var(--c-line-strong)) !important; }
input.switch[type="checkbox"]:checked { background-color: rgb(var(--tone-ok-fg)) !important; }
.switch:checked::after { transform: translateX(1.1rem); }
.switch:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
/* Business setup: the item just saved glows, its button says "Saved", and a note slides up at the bottom. */
.acc-saved-glow { animation: acc-glow 2.6s ease-out; border-radius: .75rem; }
@keyframes acc-glow { 0%, 35% { box-shadow: 0 0 0 2px rgb(var(--c-accent)), 0 0 22px 2px rgb(var(--c-accent) / .45); } 100% { box-shadow: 0 0 0 0 transparent; } }
.acc-saved-btn { background: rgb(var(--tone-ok-bg)) !important; color: rgb(var(--tone-ok-fg)) !important; border-color: rgb(var(--tone-ok-fg) / .4) !important; }
.acc-note { position: fixed; left: 50%; bottom: 1.25rem; z-index: 60; transform: translateX(-50%); max-width: calc(100vw - 2rem); width: max-content;
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; padding: .7rem 1rem; border-radius: .6rem; border: 1px solid; font-size: .875rem; box-shadow: 0 10px 30px rgb(0 0 0 / .25); animation: acc-note-in .25s ease-out; }
.acc-note-out { opacity: 0; transform: translate(-50%, 8px); transition: opacity .5s, transform .5s; }
@keyframes acc-note-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .acc-saved-glow, .acc-note { animation: none; } .acc-saved-glow { box-shadow: 0 0 0 2px rgb(var(--c-accent)); } }   /* text on an accent background: the theme's own (navy on RelocateHub) */
.btn-primary:hover { background: rgb(var(--c-accent-hover)); }
.btn-dark { background: rgb(var(--c-solid)); color: #fff; }
.btn-dark:hover { background: rgb(var(--c-solid-hover)); }
.btn-secondary { background: rgb(var(--c-card)); border-color: rgb(var(--c-line)); color: rgb(var(--c-ink-soft)); }
.btn-secondary:hover { background: rgb(var(--c-tint)); border-color: rgb(var(--c-line-strong)); color: rgb(var(--c-ink)); }
.btn-danger { background: rgb(var(--tone-bad-solid)); color: #fff; }
.btn-danger:hover { background: rgb(185 28 28); }
/* Delete / Remove / Discard: an outlined button in red (class "text-bad" on a .btn) — red text and icon,
   a red edge, a soft red fill on hover — so anything that deletes always looks like it. */
.btn.text-bad { color: rgb(var(--tone-bad-fg)); border-color: rgb(var(--tone-bad-fg) / .45); }
.btn.text-bad:hover { color: rgb(var(--tone-bad-fg)); background: rgb(var(--tone-bad-bg)); border-color: rgb(var(--tone-bad-fg) / .7); }
/* "Look at me": a notice that glows red a few times when the page opens, then settles back to its own colour
   (the Companies House deadlines on the SmartBooks dashboard). Only colour changes — nothing moves — so it plays
   even with Windows' "reduce animations" setting on (which many PCs have). */
@keyframes acc-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  12%, 42%, 72% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .85), 0 0 26px 6px rgba(239, 68, 68, .45); background-color: rgba(239, 68, 68, .22); border-color: rgb(239 68 68); }
  27%, 57%, 87% { box-shadow: 0 0 0 1px rgba(239, 68, 68, .35), 0 0 10px 2px rgba(239, 68, 68, .15); }
}
.acc-attention { animation: acc-attention 3.2s ease-in-out .4s 1; }
/* A company logo (see-through background) straight on the page, unfiltered so it stays sharp. A logo with a
   dark-page version (made in the logo editor: dark lettering turned light) shows that one in the dark theme. */
.acc-logo-d { display: none; }
html.dark .acc-logo-d { display: inline-block; }
html.dark .acc-logo-l { display: none; }
/* behind a logo preview: a checkerboard, so see-through parts show as see-through */
.acc-checker { background-color: #fff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
html .acc-checker .acc-logo-l { display: inline-block; } html .acc-checker .acc-logo-d { display: none; }   /* the preview tile is white: the normal logo */
/* the dashboard's company arrows (either side of the logo): a glassy accent-ringed disc with a drawn arrow;
   on hover it fills with the accent colour, the arrow's tail grows out and the disc nudges the way it points,
   with a ring rippling out. The dots under the logo: where you are in the round. */
.acc-co-arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; flex-shrink: 0;
  color: rgb(var(--c-gold-ink)); border: 1px solid rgb(var(--c-accent) / .55);
  --co-shine: rgb(255 255 255 / .55); background: radial-gradient(120% 120% at 30% 20%, var(--co-shine), transparent 55%), linear-gradient(145deg, rgb(var(--c-accent) / .28), rgb(var(--c-accent) / .07));
  box-shadow: 0 6px 16px -6px rgb(var(--c-accent) / .7), inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 6px rgb(var(--c-accent) / .18);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s, box-shadow .25s; }
html.dark .acc-co-arrow { --co-shine: rgb(255 255 255 / .12); }
.acc-co-arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.acc-co-arrow .acc-co-arrow-tail { stroke-dasharray: 11; stroke-dashoffset: 11; transition: stroke-dashoffset .3s ease; }
.acc-co-arrow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid rgb(var(--c-accent)); opacity: 0; pointer-events: none; }
.acc-co-arrow:hover, .acc-co-arrow:focus-visible, .acc-co-arrow.is-going { color: rgb(var(--c-on-accent, 11 31 58)); background: linear-gradient(145deg, rgb(var(--c-accent-hover)), rgb(var(--c-accent)));
  box-shadow: 0 10px 24px -8px rgb(var(--c-accent) / .9), inset 0 1px 0 rgb(255 255 255 / .5); outline: none; }
.acc-co-arrow:hover .acc-co-arrow-tail, .acc-co-arrow:focus-visible .acc-co-arrow-tail, .acc-co-arrow.is-going .acc-co-arrow-tail { stroke-dashoffset: 0; }
.acc-co-arrow-prev:hover, .acc-co-arrow-prev.is-going { transform: translateX(-3px) scale(1.08); }
.acc-co-arrow-next:hover, .acc-co-arrow-next.is-going { transform: translateX(3px) scale(1.08); }
.acc-co-arrow:hover::after, .acc-co-arrow.is-going::after { animation: acc-co-ripple .9s ease-out; }
.acc-co-arrow:active { transform: scale(.94); }
@keyframes acc-co-ripple { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
.acc-co-dot { width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--c-accent) / .3); transition: width .25s, background .2s; }
.acc-co-dot:hover { background: rgb(var(--c-accent) / .7); }
.acc-co-dot.is-on { width: 1.25rem; background: rgb(var(--c-accent)); }
@media (prefers-reduced-motion: reduce) { .acc-co-arrow, .acc-co-arrow .acc-co-arrow-tail, .acc-co-dot { transition: none; } .acc-co-arrow::after { animation: none !important; } }
/* SmartBooks › Upload: the company chips (a hidden radio each) and the drop area — a soft accent field with a
   dashed edge that lights up while files are dragged over the window, and says "Uploading…" once sent. */
.acc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-card)); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.acc-chip:hover { border-color: rgb(var(--c-accent) / .6); }
.acc-chip:has(input:checked) { border-color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / .14); box-shadow: 0 0 0 1px rgb(var(--c-accent)); }
.acc-chip:has(input:focus-visible) { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.acc-drop { border: 2px dashed rgb(var(--c-accent) / .45); background: radial-gradient(120% 140% at 50% 0%, rgb(var(--c-accent) / .10), transparent 60%), rgb(var(--c-tint) / .45);
  transition: border-color .2s, background .2s, transform .2s; }
.acc-drop:hover, .acc-drop:focus-visible { border-color: rgb(var(--c-accent)); outline: none; }
.acc-drop-icon { background: linear-gradient(145deg, rgb(var(--c-accent) / .30), rgb(var(--c-accent) / .10)); color: rgb(var(--c-gold-ink)); box-shadow: 0 10px 24px -12px rgb(var(--c-accent) / .9); }
.acc-drop.is-over { border-style: solid; border-color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / .16); transform: scale(1.01); }
.acc-drop.is-sending { pointer-events: none; opacity: .85; }
/* the drop areas' background drawings (includes/accounts/art.php): faint, in the accent colour; they lift a little when files are dragged over */
.acc-drop { overflow: hidden; isolation: isolate; }
.acc-drop > :not(.acc-drop-art):not(input) { position: relative; z-index: 1; }
.acc-drop-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: rgb(var(--c-accent)); opacity: .32; transition: opacity .25s, transform .35s; }
.dark .acc-drop-art { opacity: .26; }
.acc-drop-art-l, .acc-drop-art-r { transition: transform .35s ease; transform-box: fill-box; }
.acc-drop:hover .acc-drop-art, .acc-drop.is-over .acc-drop-art { opacity: .5; }
.acc-drop.is-over .acc-drop-art-l { transform: translate(-6px, -4px) rotate(-2deg); }
.acc-drop.is-over .acc-drop-art-r { transform: translate(6px, -4px) rotate(2deg); }
@media (max-width: 767px) { .acc-drop-art { opacity: .14; } .dark .acc-drop-art { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .acc-drop-art, .acc-drop-art-l, .acc-drop-art-r { transition: none; } }
@media (prefers-reduced-motion: reduce) { .acc-drop { transition: none; } .acc-drop.is-over { transform: none; } }
/* SmartBooks › Upload: the progress bar while sending, and the rows just added (marked until the page is left) */
.acc-up-bar { display: block; height: 8px; border-radius: 9999px; background: rgb(var(--c-line)); overflow: hidden; }
.acc-up-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(var(--c-accent)); transition: width .25s ease; }
.acc-up-row.is-new { background: rgb(var(--c-accent) / .08); box-shadow: inset 4px 0 0 rgb(var(--c-accent)); }
.acc-up-row.is-flash { animation: acc-up-flash 1.6s ease; }
@keyframes acc-up-flash { 0%, 40% { background: rgb(var(--c-accent) / .28); } 100% { background: transparent; } }
/* the waiting list: possible duplicates in red — a red edge, a big red mark beside a red Check & save */
.acc-up-row[hidden] { display: none !important; }   /* filtered out (its flex layout would otherwise win over [hidden]) */
.acc-up-row.is-dup { background: rgb(var(--tone-bad-bg) / .55); box-shadow: inset 4px 0 0 rgb(var(--tone-bad-solid)); }
.acc-up-row.is-dup.is-new { box-shadow: inset 4px 0 0 rgb(var(--tone-bad-solid)); }
.acc-dup-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; flex: none;
  background: rgb(var(--tone-bad-solid)); color: #fff; font-size: 1.05rem; box-shadow: 0 6px 14px -8px rgb(var(--tone-bad-solid)); }
/* its filters: state chips (with counts) over Company · Uploaded by · Find · Sort, lined up in columns */
.acc-ftools { display: grid; gap: .75rem; align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .acc-ftools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .acc-ftools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); } }
.acc-fchip { font-size: .8rem; padding: .3rem .7rem; }
.acc-fchip[aria-pressed="true"] { border-color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / .14); box-shadow: 0 0 0 1px rgb(var(--c-accent)); }
.acc-fchip.is-bad { color: rgb(var(--tone-bad-fg)); border-color: rgb(var(--tone-bad-solid) / .45); }
.acc-fchip.is-bad[aria-pressed="true"] { background: rgb(var(--tone-bad-solid)); color: #fff; border-color: rgb(var(--tone-bad-solid)); box-shadow: none; }
.acc-fchip-n { font-weight: 700; opacity: .85; }
.acc-fchip[data-empty] { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .acc-up-bar > span { transition: none; } .acc-up-row.is-flash { animation: none; outline: 2px solid rgb(var(--c-accent)); } }
/* SmartBooks › Messages (accounts/messages.php): a tag (#T-12, #R-…, a pasted SmartBooks link) shows as a small card, an
   @mention as a highlight; both keep their own colours inside a coloured "mine" bubble */
.msg-tag { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; vertical-align: middle; margin: .1rem 0; padding: .15rem .5rem .15rem .2rem;
  border-radius: .55rem; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-card)); color: rgb(var(--c-ink)); font-size: .78rem; line-height: 1.35;
  text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / .06); transition: border-color .15s, box-shadow .15s; }
a.msg-tag:hover { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 1px rgb(var(--c-accent)); }
.msg-tag-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: .4rem; font-size: .68rem;
  color: rgb(var(--ico)); background: rgb(var(--ico) / .12); }
.dark .msg-tag-ico { color: rgb(var(--ico-bright)); background: rgb(var(--ico-bright) / .14); }
.msg-tag-code { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-tag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--c-ink-soft)); }
.msg-tag-pill .pill { font-size: .62rem; padding: .05rem .4rem; }
.msg-tag-missing { padding: .1rem .45rem; color: rgb(var(--c-ink-muted)); background: rgb(var(--c-tint)); text-decoration: line-through; box-shadow: none; }
.msg-mention { font-weight: 700; border-radius: .3rem; padding: 0 .2rem; background: rgb(var(--c-accent) / .18); }
.msg-mention.is-me { background: rgb(var(--c-accent)); color: rgb(7 18 38); }
.msg-suggest [aria-selected="true"] { background: rgb(var(--c-tint)); }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 3px rgb(var(--c-accent)); } 100% { box-shadow: 0 0 0 3px transparent; } }
.msg-flash { animation: msg-flash 2.2s ease-out 1; border-radius: 1rem; }
/* SmartBooks › Tasks › Calendar: one small chip per ticket, in its kind's colour; late red, done struck through, repeats to come faint */
.cal-chip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; line-height: 1.35; padding: .1rem .35rem; border-radius: .3rem;
  border-left: 3px solid rgb(var(--ico)); background: rgb(var(--ico) / .1); color: rgb(var(--c-ink)); text-decoration: none; }
.dark .cal-chip { border-left-color: rgb(var(--ico-bright)); background: rgb(var(--ico-bright) / .12); }
a.cal-chip:hover { background: rgb(var(--ico) / .2); }
.cal-chip.is-late { border-left-color: rgb(var(--tone-bad-fg)); background: rgb(var(--tone-bad-bg)); }
.cal-chip.is-done { opacity: .6; text-decoration: line-through; }
.cal-chip.is-ghost { opacity: .55; border-left-style: dashed; background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--c-line)); }
/* SmartBooks › Tasks (accounts/tasks.php): cards you're on carry an accent edge; dragging one dims it, the column it's over lights up */
.task-card { transition: box-shadow .15s, opacity .15s, transform .15s; }
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:hover { box-shadow: 0 6px 18px -10px rgb(0 0 0 / .35); }
.task-card.task-mine { box-shadow: inset 3px 0 0 rgb(var(--c-accent)); }
.task-card.task-mine[draggable="true"]:hover { box-shadow: inset 3px 0 0 rgb(var(--c-accent)), 0 6px 18px -10px rgb(0 0 0 / .35); }
.task-card.is-dragging { opacity: .45; transform: rotate(1deg); }
/* the three columns, each its own colour (its .ico-<colour>): a soft tint, a coloured top edge, a coloured heading */
.task-col { transition: background .15s, box-shadow .15s; background: rgb(var(--ico) / .07); border: 1px solid rgb(var(--ico) / .28); border-top: 4px solid rgb(var(--ico)); }
.dark .task-col { background: rgb(var(--ico-bright) / .07); border-color: rgb(var(--ico-bright) / .22); border-top-color: rgb(var(--ico-bright)); }
.task-col-head { color: rgb(var(--ico)); }
.dark .task-col-head { color: rgb(var(--ico-bright)); }
.task-col-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .45rem; font-size: .75rem; background: rgb(var(--ico) / .16); }
.dark .task-col-ico { background: rgb(var(--ico-bright) / .18); }
.task-col-count { font-size: .7rem; font-weight: 700; line-height: 1; padding: .2rem .5rem; border-radius: 999px; color: #fff; background: rgb(var(--ico)); }
.dark .task-col-count { color: rgb(7 18 38); background: rgb(var(--ico-bright)); }
.task-col .task-col-head a { color: inherit; }
.task-col.is-over { background: rgb(var(--c-accent) / .10); box-shadow: inset 0 0 0 2px rgb(var(--c-accent)); }
/* SmartBooks dashboard › Customise (assets/js/dash-layout.js): while editing, each tile gets a toolbar over its top
   edge (drag handle, its name, move, width, hide), a dashed outline, and its own links and charts stop taking clicks. */
.dash-tools { display: none; }
.dash-editing .dash-tile { outline: 2px dashed rgb(var(--c-accent) / .55); outline-offset: 4px; border-radius: 1rem; margin-top: 1rem; cursor: grab; }
.dash-editing .dash-tile > :not(.dash-tools) { pointer-events: none; user-select: none; }
.dash-editing .dash-tools { display: flex; position: absolute; z-index: 6; top: -1.35rem; left: .75rem; right: .75rem; align-items: center; gap: .15rem;
  padding: .2rem .35rem; border-radius: .6rem; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-accent) / .7); font-size: .75rem;
  box-shadow: 0 8px 18px -10px rgb(0 0 0 / .45); }
.dash-tools button { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem; border-radius: .4rem; color: rgb(var(--c-ink-soft)); white-space: nowrap; }
.dash-tools button:hover, .dash-tools button:focus-visible { background: rgb(var(--c-tint)); outline: none; }
.dash-tools [data-dash-hide]:hover { color: rgb(var(--c-bad, 220 38 38)); }
.dash-tools .dash-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--c-ink-soft)); }
.dash-grip { cursor: grab; padding: 0 .35rem; color: rgb(var(--c-gold-ink)); }
.dash-dragging { opacity: .35; }
.dash-flash { animation: dash-flash 1.2s ease-out 1; }
@keyframes dash-flash { 0% { box-shadow: 0 0 0 4px rgb(var(--c-accent) / .8); border-radius: 1rem; } 100% { box-shadow: 0 0 0 4px rgb(var(--c-accent) / 0); } }
@media (prefers-reduced-motion: reduce) { .dash-flash { animation: none; } }
/* a <summary> styled as a button (e.g. Delete group): Tailwind's reset makes it a list item, so no gap
   between the icon and the words — give it the button layout back */
summary.btn { display: inline-flex; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-ok { background: rgb(22 163 74); color: #fff; }   /* completing something: Mark done, Record payment */
.btn-ok:hover { background: rgb(21 128 61); }

/* Page titles: one size on every dashboard page, whatever the page wrote. */
#dashLayout h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 639px) { #dashLayout h1 { font-size: 1.3rem; line-height: 1.75rem; } }

/* Back link above a detail page's title ("← Bookings"), from back_link(). */
.back-link { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: rgb(var(--c-ink-muted)); margin-bottom: .5rem; }
.back-link:hover { color: rgb(var(--c-accent-hover)); }

/* Star rating picker (includes/stay-reviews.php review_star_input): radios
   5→1 in the DOM, shown 1→5 by row-reverse, so ~ colours the lower stars. */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; border: 0; padding: 0; margin: 0; }
.star-input label { cursor: pointer; font-size: 1.6rem; line-height: 1; color: rgb(var(--c-line-strong)); transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: rgb(var(--c-accent)); }
.star-input input:focus-visible + label { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; border-radius: 2px; }

/* The "what this page is for" bar at the top of every dashboard page
   (includes/page-help.php): its own teal "guide" colour with a stripe on the
   left, so it stands apart from blue info messages and gold actions. */
:root { --guide-bg: 228 246 243; --guide-fg: 17 94 89; --guide-edge: 13 148 136; --guide-link: 15 118 110; }
.dark { --guide-bg: 14 48 56; --guide-fg: 178 240 230; --guide-edge: 45 212 191; --guide-link: 94 234 212; }
.page-help-bar { background: rgb(var(--guide-bg)); color: rgb(var(--guide-fg)); border: 1px solid rgb(var(--guide-edge) / .3); border-left: 4px solid rgb(var(--guide-edge)); }
.page-help-bar a { color: rgb(var(--guide-link)); }
.page-help-icon { color: rgb(var(--guide-edge)); }
/* Clickable table rows (ui.js, tr[data-row-href]) */
tr.row-link { cursor: pointer; }
tr.row-link:hover, tr.row-link:focus-visible { background: rgb(var(--c-tint)); }
tr.row-link:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: -2px; }

/* Messages: initials avatars (six colours, picked per person) and your own bubble. */
.avatar-c1 { background: rgb(219 234 254); color: rgb(29 78 216); }
.avatar-c2 { background: rgb(220 252 231); color: rgb(21 128 61); }
.avatar-c3 { background: rgb(243 232 255); color: rgb(126 34 206); }
.avatar-c4 { background: rgb(254 243 199); color: rgb(180 83 9); }
.avatar-c5 { background: rgb(255 228 230); color: rgb(190 18 60); }
.avatar-c6 { background: rgb(204 251 241); color: rgb(15 118 110); }
.dark .avatar-c1 { background: rgb(59 130 246 / .2); color: rgb(147 197 253); }
.dark .avatar-c2 { background: rgb(34 197 94 / .2);  color: rgb(134 239 172); }
.dark .avatar-c3 { background: rgb(168 85 247 / .2); color: rgb(216 180 254); }
.dark .avatar-c4 { background: rgb(245 158 11 / .2); color: rgb(252 211 77); }
.dark .avatar-c5 { background: rgb(244 63 94 / .2);  color: rgb(253 164 175); }
.dark .avatar-c6 { background: rgb(20 184 166 / .2); color: rgb(94 234 212); }
.bubble-mine { background: rgb(var(--c-chrome)); color: #fff; }
.dark .bubble-mine { background: rgb(var(--c-accent)); color: rgb(7 18 38); }

/* Message boxes: .alert-ok (saved — with data-flash it becomes a toast, see
   assets/js/ui.js) and .alert-bad (what went wrong, stays next to the form).
   Layout (padding, margin) stays on the element; colour comes from the tones. */
.alert { border: 1px solid transparent; }
.alert-ok  { background: rgb(var(--tone-ok-bg));  color: rgb(var(--tone-ok-fg));  border-color: rgb(var(--tone-ok-fg) / .25); }
.alert-bad { background: rgb(var(--tone-bad-bg)); color: rgb(var(--tone-bad-fg)); border-color: rgb(var(--tone-bad-fg) / .25); }
.alert-warn { background: rgb(var(--tone-warn-bg)); color: rgb(var(--tone-warn-fg)); border-color: rgb(var(--tone-warn-fg) / .25); }
.alert-info { background: rgb(var(--tone-info-bg)); color: rgb(var(--tone-info-fg)); border-color: rgb(var(--tone-info-fg) / .25); }
.alert a { color: inherit; }

/* Toast: success messages after saving (flash()). */
.toast { position: fixed; z-index: 120; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); max-width: min(26rem, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 500;
  background: rgb(var(--c-chrome)); color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .25); border-left: 4px solid rgb(var(--tone-ok-fg)); }
.toast.is-hiding { opacity: 0; transform: translateY(.5rem); transition: opacity .3s, transform .3s; }
@media (prefers-reduced-motion: reduce) {
  .toast.is-hiding { transition: none; }
  .animate-pulse, .animate-spin, .animate-bounce, .animate-ping { animation: none !important; }
  .transition, .transition-all, .transition-colors, .transition-transform { transition: none !important; }
  .card-hover:hover { transform: none !important; }
}

/* Confirm panel (data-confirm on a form — see dashboard-bottom.php). */
.confirm-backdrop { position: fixed; inset: 0; z-index: 130; background: rgb(7 18 38 / .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.confirm-panel { width: 100%; max-width: 28rem; background: rgb(var(--c-card)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); border-radius: .875rem; box-shadow: 0 20px 50px rgb(0 0 0 / .35); padding: 1.25rem; }

/* Top bar: a thin line underneath — gold for visitors, the signed-in user's role colour on dashboards. */
.site-header { border-bottom: 2px solid rgb(var(--c-accent) / .85); }
.is-dashboard .site-header { border-bottom: 3px solid rgb(var(--c-role-bright, var(--c-accent))); }

/* Dashboard sidebar: the page you're on, marked in the user's role colour. */
.nav-active { background: rgb(var(--c-chrome)); color: #fff; box-shadow: inset 3px 0 0 rgb(var(--c-role-bright, var(--c-accent))); }
.dark .nav-active { background: rgb(var(--c-tint-strong)); }

/* Font Awesome (loaded after tailwind.css) sets display:inline-block on
   every icon, which beat Tailwind's .hidden — so an icon meant to be hidden
   still showed (e.g. the theme toggle showed sun AND moon in light mode).
   :where() keeps this rule as light as a plain .hidden, so variants like
   dark:inline / sm:block (more specific) still win over it. */
.hidden:where(.fa-solid, .fa-regular, .fa-brands, .fa) { display: none; }

/* Homepage coverage map (includes/coverage-map.php): background dots fade
   in and out at their own pace; live towns get a ring that ripples out. */
.map-twinkle { animation: mapTwinkle 3s ease-in-out infinite; }
@keyframes mapTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
.map-ring { transform-box: fill-box; transform-origin: center; animation: mapRing 2.4s ease-out infinite; }
@keyframes mapRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .map-twinkle { animation: none; opacity: .6; }
  .map-ring { animation: none; opacity: 0; }
}

.hero-bg {
  background:
    linear-gradient(120deg, rgba(11,31,58,0.92) 0%, rgba(11,31,58,0.75) 60%, rgba(11,31,58,0.55) 100%),
    radial-gradient(circle at 80% 20%, #1a3a66 0%, #0b1f3a 60%);
}

.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11,31,58,0.15);
}
.card-hover img {
  transition: transform .4s ease;
}
.card-hover:hover img {
  transform: scale(1.05);
}

/* Form fields get a subtly tinted background distinct from the white/navy
   card they sit on, so an input/select/textarea is easy to spot at a glance
   instead of blending into its container (previously only a thin border
   told them apart). Checkboxes/radios keep native rendering but pick up
   the gold accent colour to match the rest of the theme.
   !important is needed here: individual inputs across the site carry their
   own Tailwind dark:bg-navy-900 utility class, whose compiled selector
   (two classes) outranks a plain ".dark input" rule (one class + one tag),
   so without it this global override would silently lose to every one of
   those per-element classes. */
input, select, textarea {
  background-color: rgb(var(--c-field)) !important;
}
/* Field borders one step stronger than card borders, so empty boxes are easy to see. */
input.border-line, select.border-line, textarea.border-line { border-color: rgb(var(--c-line-strong)); }
input::placeholder, textarea::placeholder { color: rgb(var(--c-ink-faint)); opacity: 1; }
input[type="checkbox"], input[type="radio"] {
  background-color: transparent !important;
  accent-color: rgb(var(--c-accent));
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--c-accent) / .35);
  border-color: rgb(var(--c-accent));
}
/* Keyboard focus on buttons and links gets the same gold ring. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid rgb(var(--c-accent));
  outline-offset: 2px;
}

/* ---------- Phone boxes: country picker (assets/js/phone-input.js) ---------- */
.iti { display: block; width: 100%; }
.iti {
  --iti-hover-color: rgb(var(--c-tint));
  --iti-border-color: rgb(var(--c-line));
  --iti-icon-color: rgb(var(--c-ink-subtle));
  --iti-country-selector-bg: rgb(var(--c-card));
}
.iti__selected-country { border-radius: .375rem 0 0 .375rem; }
.iti__selected-dial-code { color: rgb(var(--c-ink-soft)); }
.iti__dropdown-content {
  background: rgb(var(--c-card)); color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-line)); border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(7, 15, 31, .25); z-index: 1100;
}
.iti__search-input { background: rgb(var(--c-field)) !important; color: rgb(var(--c-ink)); border-bottom: 1px solid rgb(var(--c-line)); }
.iti__dial-code { color: rgb(var(--c-ink-subtle)); }
.iti__country.iti__highlight { background: rgb(var(--c-tint)); }
.iti__divider { border-color: rgb(var(--c-line)); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Scroll-reveal: fade + rise into place the first time an element enters
   the viewport. animations.js adds .is-visible via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Same effect for every direct child of a container, staggered — so a
   card grid can opt in with one class instead of marking every card. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: .4s; }

/* One-shot entrance for above-the-fold content (hero) — plays on load,
   no scroll trigger needed since it's already in view. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeInUp .7s ease both;
}
.animate-in-delay-1 { animation-delay: .1s; }
.animate-in-delay-2 { animation-delay: .2s; }
.animate-in-delay-3 { animation-delay: .3s; }
.animate-in-delay-4 { animation-delay: .4s; }

/* Sticky header gains depth once the page scrolls under it, instead of
   always casting a shadow (flatter, more modern at the very top). */
.site-header {
  transition: box-shadow .25s ease;
}
.site-header.scrolled {
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* ---------- Rich text editor (Quill) ---------- */
/* Quill's "snow" theme is light-only out of the box — these bring its
   toolbar/editor in line with the site's own dark mode. Icon colours use
   !important since Quill's own .ql-stroke/.ql-fill rules carry the same
   specificity and would otherwise win on load order alone. */
.ql-toolbar.ql-snow, .ql-container.ql-snow {
  font-family: inherit;
}
.dark .ql-toolbar.ql-snow {
  background: rgb(var(--c-tint));
  border-color: rgb(var(--c-line)) !important;
}
.dark .ql-container.ql-snow {
  border-color: rgb(var(--c-line)) !important;
}
.dark .ql-editor {
  color: rgb(var(--c-ink));
}
.dark .ql-snow .ql-stroke {
  stroke: rgb(var(--c-ink-muted)) !important;
}
.dark .ql-snow .ql-fill, .dark .ql-snow .ql-stroke.ql-fill {
  fill: rgb(var(--c-ink-muted)) !important;
}
.dark .ql-snow .ql-picker {
  color: rgb(var(--c-ink-muted));
}
.dark .ql-snow .ql-picker-options {
  background: rgb(var(--c-card));
  border-color: rgb(var(--c-line)) !important;
}
.dark .ql-snow .ql-tooltip {
  background: rgb(var(--c-card));
  border-color: rgb(var(--c-line));
  color: rgb(var(--c-ink));
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.dark .ql-snow .ql-tooltip a.ql-action, .dark .ql-snow .ql-tooltip a.ql-remove {
  color: rgb(var(--c-gold-ink));
}

/* ---------- Dashboard text/spacing density ---------- */
/* Every dashboard page uses Tailwind's default rem-based utilities (text-sm,
   px-5, py-3...) which are all sized relative to the ROOT <html> font-size,
   not the element they're on — so shrinking that one root value scales every
   dashboard page's text AND spacing together, proportionally, with no need
   to touch each page's own classes. Below 1920px (below the existing "hd"
   breakpoint used elsewhere for the opposite — growing max-width on big
   monitors) more content fits on typical laptop/1080p screens; at 1920px+
   it's back to the normal, unscaled size those monitors already looked fine at. */
html.is-dashboard {
  font-size: 14px;
}
@media (min-width: 1920px) {
  html.is-dashboard {
    font-size: 16px;
  }
}

/* ---------- Dashboards on phones ---------- */
/* The 14px density above is for fitting more on a laptop; on a phone it just
   made already-small text (text-xs became 10.5px) hard to read. */
@media (max-width: 767px) {
  html.is-dashboard {
    font-size: 15px;
  }
  /* iPhones zoom the whole page in whenever you tap a field whose text is
     under 16px, and don't zoom back out. Selects inside list tables (inline
     status pickers) are left compact — they open the native picker wheel
     rather than editing in place, and 16px wouldn't fit the column. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,
  select:not(table select) {
    font-size: 16px;
  }
  /* List tables: the desktop px-5 cell padding eats a quarter of a phone's
     width across a few columns. */
  html.is-dashboard table th,
  html.is-dashboard table td {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* ---------- Collapsible dashboard sidebar ---------- */
/* Desktop: collapses to an icon rail. State is toggled by adding/removing
   .sidebar-collapsed on <html> (see header.php's pre-paint script + the
   toggle button in dashboard-top.php) and persisted via localStorage. On
   phones the menu is instead folded behind a "Menu" button (see
   dashboard-top.php) so each page's content starts at the top. */
@media (min-width: 768px) {
  html.sidebar-collapsed #dashLayout { grid-template-columns: 64px 1fr; }
  html.sidebar-collapsed #dashSidebar { width: 64px; }
  html.sidebar-collapsed #dashSidebar .sidebar-label { display: none; }
  html.sidebar-collapsed #dashSidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-collapsed #dashSidebar .sidebar-badge-dot { display: block; }
  html.sidebar-collapsed #dashSidebar .collapse-toggle i { transform: rotate(180deg); }
  html.sidebar-collapsed #dashSidebar .sidebar-divider { display: block; }
  /* The icon rail has no group headings to click, so the folded "Setup" icons always show. */
}
#dashSidebar, #dashLayout {
  transition: width .15s ease, grid-template-columns .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .animate-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card-hover:hover img { transform: none; }
  html { scroll-behavior: auto; }
}

/* Business setup › Bank accounts: each company folds to a summary; open it to edit or add. */
.acc-fold { scroll-margin-top: 4.5rem; }
.acc-fold > summary::-webkit-details-marker { display: none; }
.acc-fold-chev { transition: transform .2s; }
.acc-fold[open] .acc-fold-chev { transform: rotate(180deg); }
.acc-fold[open] .acc-fold-peek, .acc-fold[open] .acc-fold-when-shut, .acc-fold:not([open]) .acc-fold-when-open { display: none; }
/* the row's Edit / Close button: icon and word spaced like every other button; while open it looks pressed (accent) */
.acc-fold-when-shut, .acc-fold-when-open { display: inline-flex; align-items: center; gap: .4rem; }
.acc-fold[open] > summary .btn:has(.acc-fold-when-open) { border-color: rgb(var(--c-accent) / .7); background: rgb(var(--c-accent) / .12); color: rgb(var(--c-gold-ink)); }
.acc-fold[open] > summary .btn:has(.acc-fold-when-open):hover { background: rgb(var(--c-accent) / .2); }
@media (prefers-reduced-motion: reduce) { .acc-fold-chev { transition: none; } }

/* Icon tiles (SmartBooks menu and page titles, includes/accounts/layout.php + page_header()):
   one colour per section. --ico is the light-mode colour, --ico-bright the one for dark
   backgrounds (dark mode, and the selected menu item on the dark menu highlight). */
.ico-blue   { --ico: 37 99 235;  --ico-bright: 96 165 250; }
.ico-amber  { --ico: 180 110 0;  --ico-bright: 251 191 36; }
.ico-teal   { --ico: 13 148 136; --ico-bright: 45 212 191; }
.ico-violet { --ico: 124 58 237; --ico-bright: 167 139 250; }
.ico-green  { --ico: 22 163 74;  --ico-bright: 74 222 128; }
.ico-pink   { --ico: 219 39 119; --ico-bright: 244 114 182; }
.ico-orange { --ico: 234 88 12;  --ico-bright: 251 146 60; }
.ico-sky    { --ico: 2 132 199;  --ico-bright: 56 189 248; }
.ico-indigo { --ico: 79 70 229;  --ico-bright: 129 140 248; }
.ico-red     { --ico: 220 38 38;  --ico-bright: 248 113 113; }
.ico-cyan    { --ico: 8 145 178;  --ico-bright: 34 211 238; }
.ico-emerald { --ico: 5 150 105;  --ico-bright: 52 211 153; }
.ico-fuchsia { --ico: 192 38 211; --ico-bright: 232 121 249; }
.ico-lime    { --ico: 77 124 15;  --ico-bright: 163 230 53; }
.ico-slate   { --ico: 71 85 105;  --ico-bright: 148 163 184; }
.ico-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.85rem; height: 1.85rem; border-radius: .55rem;
  font-size: .85rem; color: rgb(var(--ico)); background: rgb(var(--ico) / .12); box-shadow: inset 0 0 0 1px rgb(var(--ico) / .18); transition: transform .15s; }
.dark .ico-tile { color: rgb(var(--ico-bright)); background: rgb(var(--ico-bright) / .14); box-shadow: inset 0 0 0 1px rgb(var(--ico-bright) / .2); }
a:hover > .ico-tile { transform: scale(1.08); }
.nav-active .ico-tile { color: rgb(var(--ico-bright)); background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(var(--ico-bright) / .45), 0 0 14px rgb(var(--ico-bright) / .35); }
.ico-tile-lg { width: 2.75rem; height: 2.75rem; border-radius: .8rem; font-size: 1.2rem; margin-top: .1rem;
  background: linear-gradient(135deg, rgb(var(--ico) / .2), rgb(var(--ico) / .06)); box-shadow: inset 0 0 0 1px rgb(var(--ico) / .25), 0 6px 16px -8px rgb(var(--ico) / .6); }
.dark .ico-tile-lg { background: linear-gradient(135deg, rgb(var(--ico-bright) / .24), rgb(var(--ico-bright) / .06)); box-shadow: inset 0 0 0 1px rgb(var(--ico-bright) / .3), 0 6px 18px -8px rgb(var(--ico-bright) / .55); }
@media (prefers-reduced-motion: reduce) { .ico-tile { transition: none; } a:hover > .ico-tile { transform: none; } }
/* RelocateHub dashboard: the page title's tile sits inside the <h1> (added by includes/dashboard-top.php). */
.ico-inline { vertical-align: middle; margin: -.2rem .75rem 0 0; }

/* A small preview bubble on hover / keyboard focus: <a class="tip" data-tip="…"> (e.g. a payment's "by rule" chip). */
.tip { position: relative; }
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(22rem, 80vw);
  white-space: normal; text-transform: none; letter-spacing: normal; font-weight: 500; font-size: .75rem; line-height: 1.4;
  padding: .45rem .6rem; border-radius: .5rem; background: rgb(var(--c-chrome)); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .25); pointer-events: none;
}
.tip[data-tip]:hover::before, .tip[data-tip]:focus-visible::before {
  content: ""; position: absolute; left: 14px; bottom: calc(100% + 2px); z-index: 30; border: 6px solid transparent; border-top-color: rgb(var(--c-chrome)); pointer-events: none;
}
/* Statements › Rules: the rule a payment linked to is lit up */
.rule-row:target { background: rgb(var(--c-accent) / .14); box-shadow: inset 4px 0 0 rgb(var(--c-accent)); }

/* Back to top (ui.js): a round button in the bottom-right corner once the page is scrolled down; it lifts above a bar stuck to the bottom of the screen (--lift) */
.to-top { position: fixed; right: 1.25rem; bottom: calc(1.25rem + var(--lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent, 15 23 42)); border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / .28); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .2s, transform .2s, background-color .15s, bottom .15s; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgb(var(--c-accent-hover)); }
.to-top:focus-visible { outline: 3px solid rgb(var(--c-accent) / .5); outline-offset: 3px; }
@media (max-width: 640px) { .to-top { right: .9rem; width: 2.5rem; height: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }
.has-popup .to-top { opacity: 0 !important; pointer-events: none !important; }   /* a pop-up menu is open (ui.js) */