/* ============================================================
   App colour themes + "colourful" module accents.

   The base tokens live in theme.css (Forest, the default). Each theme
   below re-points the accent family and the tinted neutrals; the dark
   variants re-point them for html[data-theme="dark"]. Everything else
   in the app is written against the tokens, so a theme is ~20 lines.

   html[data-tt-theme]     — chosen by the admin (Settings › Appearance)
   html[data-tt-colorful]  — module colours on the rail / dock / tabs
   ============================================================ */

/* ---------------------------------------------------------- Forest (default) */
html[data-tt-theme="forest"] { --accent-2: #14b8a6; }

/* ---------------------------------------------------------- Ocean */
html[data-tt-theme="ocean"] {
    --bg: #f5f7fa; --ink: #0c1a2b; --ink-2: #2b3f56; --muted: #5d7590; --faint: #8ea3ba;
    --border: #e1e9f2; --border-strong: #c9d7e6;
    --accent: #2f80ed; --accent-hover: #1c5fbf; --accent-soft: #e2edfc; --accent-2: #38bdf8;
    --hover-bg: #edf3fa; --row-hover: #f7fafd; --nav-bg: rgba(255,255,255,.85); --tracker-border: #bcd6f6;
}
html[data-tt-theme="ocean"][data-theme="dark"] {
    --bg: #0b1220; --surface: #121a2a; --ink: #e8eef8; --ink-2: #c4d0e2; --muted: #8ea2bd; --faint: #667a95;
    --border: #22304a; --border-strong: #32425e;
    --accent: #5aa0ff; --accent-hover: #86baff; --accent-soft: #172a47; --accent-2: #38bdf8;
    --hover-bg: #182338; --row-hover: #141e30; --nav-bg: rgba(16,24,40,.88); --tracker-border: #2b4a78;
}

/* ---------------------------------------------------------- Lavender */
html[data-tt-theme="lavender"] {
    --bg: #f5f7fa; --ink: #17122b; --ink-2: #3a3358; --muted: #6d6690; --faint: #9a94b8;
    --border: #e7e4f3; --border-strong: #d2cde6;
    --accent: #7c5cff; --accent-hover: #5b3fd6; --accent-soft: #ece8ff; --accent-2: #ec4899;
    --hover-bg: #f0edf9; --row-hover: #f9f8fd; --nav-bg: rgba(255,255,255,.85); --tracker-border: #d3c8ff;
}
html[data-tt-theme="lavender"][data-theme="dark"] {
    --bg: #100d1c; --surface: #191529; --ink: #efebfb; --ink-2: #cfc8e6; --muted: #9c93bd; --faint: #726a92;
    --border: #2a2442; --border-strong: #3b3358;
    --accent: #a48cff; --accent-hover: #c0aeff; --accent-soft: #261e45; --accent-2: #f472b6;
    --hover-bg: #211b36; --row-hover: #1c1730; --nav-bg: rgba(22,18,38,.88); --tracker-border: #4a3a86;
}

/* ---------------------------------------------------------- Sunset (coral) */
html[data-tt-theme="sunset"] {
    --bg: #f5f7fa; --ink: #2a1512; --ink-2: #553a35; --muted: #8a6a64; --faint: #b09892;
    --border: #f1e4df; --border-strong: #e3cdc6;
    --accent: #ef6351; --accent-hover: #cf4736; --accent-soft: #fde6e2; --accent-2: #f59e0b;
    --hover-bg: #f9eeea; --row-hover: #fdf8f6; --nav-bg: rgba(255,255,255,.85); --tracker-border: #f8c9c0;
}
html[data-tt-theme="sunset"][data-theme="dark"] {
    --bg: #170f0d; --surface: #211613; --ink: #f8ecea; --ink-2: #e0cbc6; --muted: #b3958f; --faint: #866963;
    --border: #3a2822; --border-strong: #4f372f;
    --accent: #ff8a78; --accent-hover: #ffa89a; --accent-soft: #3d201b; --accent-2: #fbbf24;
    --hover-bg: #2c1d19; --row-hover: #261915; --nav-bg: rgba(30,20,17,.88); --tracker-border: #6b3a30;
}

/* ---------------------------------------------------------- Rose */
html[data-tt-theme="rose"] {
    --bg: #f5f7fa; --ink: #2b1220; --ink-2: #553244; --muted: #8b6478; --faint: #b394a4;
    --border: #f2e1e8; --border-strong: #e5cad6;
    --accent: #e0457b; --accent-hover: #ba2f60; --accent-soft: #fce3ec; --accent-2: #a855f7;
    --hover-bg: #f9ecf1; --row-hover: #fdf7f9; --nav-bg: rgba(255,255,255,.85); --tracker-border: #f6c4d6;
}
html[data-tt-theme="rose"][data-theme="dark"] {
    --bg: #170d12; --surface: #221419; --ink: #f9ebf1; --ink-2: #e2c9d4; --muted: #b492a2; --faint: #866576;
    --border: #3a2530; --border-strong: #50333f;
    --accent: #ff77a8; --accent-hover: #ff9dc0; --accent-soft: #3f1d2c; --accent-2: #c084fc;
    --hover-bg: #2d1c25; --row-hover: #271820; --nav-bg: rgba(30,18,24,.88); --tracker-border: #6c3550;
}

/* ---------------------------------------------------------- Honey (amber) */
html[data-tt-theme="honey"] {
    --bg: #f5f7fa; --ink: #2a1d08; --ink-2: #553f1e; --muted: #8a7350; --faint: #b19e7d;
    --border: #f0e6d3; --border-strong: #e2d3b7;
    --accent: #d98c1f; --accent-hover: #b06f10; --accent-soft: #fdefd8; --accent-2: #ef6351;
    --hover-bg: #f8f0e2; --row-hover: #fdfaf4; --nav-bg: rgba(255,255,255,.85); --tracker-border: #f3d7a6;
}
html[data-tt-theme="honey"][data-theme="dark"] {
    --bg: #15100a; --surface: #201810; --ink: #f8f0e3; --ink-2: #e2d3bd; --muted: #b39d7f; --faint: #857158;
    --border: #382b1b; --border-strong: #4e3d28;
    --accent: #f2a93b; --accent-hover: #ffc46a; --accent-soft: #3c2a10; --accent-2: #ff8a78;
    --hover-bg: #2b2015; --row-hover: #251b11; --nav-bg: rgba(28,22,14,.88); --tracker-border: #6e4d1c;
}

/* ---------------------------------------------------------- Teal */
html[data-tt-theme="teal"] {
    --bg: #f5f7fa; --ink: #0b1f1f; --ink-2: #2b4a4a; --muted: #5c7d7d; --faint: #8ea9a9;
    --border: #dfecec; --border-strong: #c6dcdc;
    --accent: #14a3a3; --accent-hover: #0e7c7c; --accent-soft: #dcf5f4; --accent-2: #6366f1;
    --hover-bg: #ebf5f5; --row-hover: #f6fafa; --nav-bg: rgba(255,255,255,.85); --tracker-border: #b3e6e4;
}
html[data-tt-theme="teal"][data-theme="dark"] {
    --bg: #0a1414; --surface: #12201f; --ink: #e8f4f3; --ink-2: #c4d9d8; --muted: #8fadab; --faint: #648180;
    --border: #213432; --border-strong: #2f4745;
    --accent: #2ed3c7; --accent-hover: #63e4da; --accent-soft: #14342f; --accent-2: #818cf8;
    --hover-bg: #172927; --row-hover: #142321; --nav-bg: rgba(16,28,27,.88); --tracker-border: #245a54;
}

/* ---------------------------------------------------------- Graphite (neutral) */
html[data-tt-theme="graphite"] {
    --bg: #f5f7fa; --ink: #111827; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
    --border: #e5e8ee; --border-strong: #cfd6e0;
    --accent: #475569; --accent-hover: #1f2937; --accent-soft: #e7ebf1; --accent-2: #0ea5e9;
    --hover-bg: #eef1f5; --row-hover: #f8f9fb; --nav-bg: rgba(255,255,255,.85); --tracker-border: #cbd5e1;
}
html[data-tt-theme="graphite"][data-theme="dark"] {
    --bg: #0f1216; --surface: #171b21; --ink: #eef1f5; --ink-2: #cbd3dd; --muted: #98a4b3; --faint: #6b7787;
    --border: #262c36; --border-strong: #363e4b;
    --accent: #9fb0c6; --accent-hover: #c2cfdf; --accent-soft: #232c38; --accent-2: #38bdf8;
    --hover-bg: #1e242c; --row-hover: #1a1f26; --nav-bg: rgba(20,24,30,.88); --tracker-border: #3d4a5c;
}

/* on dark surfaces the bright accent needs dark text — every theme */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .tk-primary, html[data-theme="dark"] .tt-start-btn { color: #0b1210 !important; }

/* ---------------------------------------------------------- primary buttons: soft gradient + glow */
.btn-primary, .tk-primary {
    background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%); background-image: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, var(--accent-2, var(--accent-hover))) 100%);
    border-color: transparent;
    box-shadow: 0 1px 2px transparent, 0 4px 12px transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .tk-primary:hover {
    background-image: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important;
    box-shadow: 0 2px 4px transparent, 0 6px 16px transparent; box-shadow: 0 2px 4px color-mix(in srgb, var(--accent-hover) 24%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------------------------------------------------------- module colours (colourful mode) */
:root {
    --mc-dashboard: #6366f1; --mc-track: #10b981; --mc-mail: #3b82f6; --mc-chat: #a855f7; --mc-drive: #f59e0b;
    --mc-contacts: #ec4899; --mc-tasks: #14b8a6; --mc-admin: #64748b; --mc-notes: #eab308; --mc-docs: #0ea5e9;
    --mc-profile: #f97316; --mc-settings: #64748b; --mc-monitor: #dc2626;
}
html[data-theme="dark"] {
    --mc-dashboard: #818cf8; --mc-track: #34d399; --mc-mail: #60a5fa; --mc-chat: #c084fc; --mc-drive: #fbbf24;
    --mc-contacts: #f472b6; --mc-tasks: #2dd4bf; --mc-admin: #94a3b8; --mc-notes: #facc15; --mc-docs: #38bdf8;
    --mc-profile: #fb923c; --mc-settings: #94a3b8; --mc-monitor: #f87171;
}
[data-panel="dashboard"] { --mc: var(--mc-dashboard); } [data-panel="track"] { --mc: var(--mc-track); }
[data-panel="mail"] { --mc: var(--mc-mail); } [data-panel="chat"] { --mc: var(--mc-chat); }
[data-panel="drive"] { --mc: var(--mc-drive); } [data-panel="contacts"] { --mc: var(--mc-contacts); }
[data-panel="tasks"] { --mc: var(--mc-tasks); } [data-panel="admin"] { --mc: var(--mc-admin); }
[data-panel="notes"] { --mc: var(--mc-notes); } [data-panel="docs"] { --mc: var(--mc-docs); }
[data-panel="profile"] { --mc: var(--mc-profile); } [data-panel="settings"] { --mc: var(--mc-settings); }
[data-panel="monitor"] { --mc: var(--mc-monitor); }

/* rail: each module gets its own pastel pill */
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel] .tt-icon { color: var(--mc, var(--muted)); color: color-mix(in srgb, var(--mc, var(--muted)) 78%, var(--muted)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel]:hover .tt-rail-ico { background: var(--surface); background: color-mix(in srgb, var(--mc, var(--accent)) 14%, var(--surface)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel]:hover { color: var(--mc, var(--ink)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel].active { color: var(--mc, var(--accent-hover)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel].active .tt-rail-ico { background: var(--surface); background: color-mix(in srgb, var(--mc, var(--accent)) 18%, var(--surface)); box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc, var(--accent)) 35%, transparent); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel].active .tt-icon { color: var(--mc, var(--accent-hover)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-rail-item[data-panel].active::before { background: var(--mc, var(--accent)); box-shadow: 0 0 8px transparent; box-shadow: 0 0 8px color-mix(in srgb, var(--mc, var(--accent)) 40%, transparent); }

/* tab strip: the active tab carries its module colour */
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-tab[data-panel].active { box-shadow: inset 0 -2px 0 var(--mc, var(--accent)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-tab[data-panel] .tt-tab-ico, html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-tab[data-panel] .tt-icon { color: var(--mc, var(--muted)); }

/* panel title (tabs off) + side-nav active item pick up the module colour */
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-shell[data-panel] .tt-panel-title-ico { color: var(--mc, var(--accent)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-shell[data-panel] .tt-sidenav-link.active { background: var(--surface); background: color-mix(in srgb, var(--mc, var(--accent)) 14%, var(--surface)); color: var(--mc, var(--accent-hover)); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-shell[data-panel] .tt-sidenav-link.active .tt-icon { color: var(--mc, var(--accent-hover)); }

/* page headers: a soft coloured hairline under the title */
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-shell[data-panel] .page-header h1::after { content: ''; display: block; width: 44px; height: 4px; border-radius: 2px; margin-top: 8px; background: linear-gradient(90deg, var(--mc, var(--accent)), transparent); background: linear-gradient(90deg, var(--mc, var(--accent)), color-mix(in srgb, var(--mc, var(--accent)) 30%, transparent)); }

/* the right dock: tool buttons coloured by tool */
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="chat"] { --mc: var(--mc-chat); } html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="mail"] { --mc: var(--mc-mail); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="contacts"] { --mc: var(--mc-contacts); } html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="notes"] { --mc: var(--mc-notes); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="drive"] { --mc: var(--mc-drive); } html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="tasks"] { --mc: var(--mc-tasks); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="docs"], html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool="sheets"] { --mc: var(--mc-docs); }
html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool]:hover, html[data-tt-colorful]:not([data-tt-colorful="0"]) .tt-dock-btn[data-tool].active { color: var(--mc, var(--accent-hover)); background: var(--surface); background: color-mix(in srgb, var(--mc, var(--accent)) 14%, var(--surface)); }

/* cards & surfaces: a touch more depth, pastel hover */
html[data-tt-theme] .card { border-color: var(--border); box-shadow: var(--shadow-sm); }
html[data-tt-theme] .card-header { background: var(--surface); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border-bottom-color: var(--border); }
/* the tinted header must follow the card's rounded corners */
html[data-tt-theme] .card > .card-header:first-child { border-top-left-radius: calc(var(--radius) - 1px); border-top-right-radius: calc(var(--radius) - 1px); }
html[data-tt-theme] .card > .card-footer:last-child { border-bottom-left-radius: calc(var(--radius) - 1px); border-bottom-right-radius: calc(var(--radius) - 1px); }
html[data-tt-theme] .table > :not(caption) > * > * { border-bottom-color: var(--border); }
html[data-tt-theme] .badge.bg-light { background: var(--accent-soft) !important; color: var(--accent-hover) !important; border-color: transparent !important; }

/* ---------------------------------------------------------- theme picker (Settings › Appearance) */
.tt-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tt-theme-opt { position: relative; display: block; cursor: pointer; margin: 0; }
.tt-theme-opt input { position: absolute; opacity: 0; inset: 0; }
.tt-theme-card { display: block; border: 2px solid var(--border); border-radius: 14px; padding: 10px; background: var(--surface); transition: border-color .12s, box-shadow .12s, transform .12s; }
.tt-theme-opt:hover .tt-theme-card { transform: translateY(-1px); border-color: var(--border-strong); }
.tt-theme-opt input:checked + .tt-theme-card { border-color: var(--t-accent); box-shadow: 0 0 0 4px transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent) 20%, transparent); }
.tt-theme-prev { display: block; height: 64px; border-radius: 9px; background: var(--t-bg); position: relative; overflow: hidden; border: 1px solid var(--t-bg); border: 1px solid color-mix(in srgb, var(--t-accent) 18%, var(--t-bg)); }
.tt-theme-prev::before { content: ''; position: absolute; left: 8px; top: 8px; width: 14px; height: 48px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tt-theme-prev::after { content: ''; position: absolute; left: 28px; top: 8px; right: 8px; height: 10px; border-radius: 4px; background: var(--t-accent); }
.tt-theme-prev i, .tt-theme-prev b { display: block; } .tt-theme-prev i { position: absolute; left: 28px; top: 24px; height: 8px; width: 60%; border-radius: 4px; background: var(--t-soft); }
.tt-theme-prev i + i { top: 38px; width: 40%; }
.tt-theme-prev b { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--t-accent2); }
.tt-theme-name { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.tt-theme-name small { color: var(--faint); font-weight: 500; font-size: .7rem; margin-left: auto; padding-right: 6px; }
.tt-theme-opt input:checked + .tt-theme-card .tt-theme-name::after { content: '✓'; color: var(--t-accent); font-weight: 800; }

/* ---------------------------------------------------------- module colour INSIDE the module (level 2 = "everywhere")
   Every module's CSS is written against --accent / --accent-hover / --accent-soft, so re-pointing them for the
   page content colours that module's buttons, links, active states, focus rings, selection, timers… The rail,
   top bar and dock keep the theme accent (they show every module). Teleported layers (task panel, modals) hang
   off <body>, which mirrors the shell's data-panel, so they follow too. Dashboard / Admin / Settings / Profile
   are not "a module" and keep the theme accent. */
html[data-tt-colorful="2"] .tt-shell[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]),
html[data-tt-colorful="2"] body[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]) > .tk-drawer-wrap,
html[data-tt-colorful="2"] body[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]) > .tk-modal-wrap {
    --accent: var(--mc);
    --accent-hover: color-mix(in srgb, var(--mc) 74%, #16182a);
    --accent-soft: color-mix(in srgb, var(--mc) 13%, var(--surface));
    --tracker-border: color-mix(in srgb, var(--mc) 35%, var(--surface));
}
html[data-tt-colorful="2"][data-theme="dark"] .tt-shell[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]),
html[data-tt-colorful="2"][data-theme="dark"] body[data-panel] > .tk-drawer-wrap,
html[data-tt-colorful="2"][data-theme="dark"] body[data-panel] > .tk-modal-wrap {
    --accent-hover: color-mix(in srgb, var(--mc) 78%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--mc) 18%, var(--surface));
}

/* segmented radios (Appearance › Module colours) */
.tt-seg-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.tt-seg-radio { position: relative; margin: 0; cursor: pointer; }
.tt-seg-radio input { position: absolute; opacity: 0; inset: 0; }
.tt-seg-radio > span { display: block; border: 2px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.tt-seg-radio > span b { display: block; font-size: .88rem; font-weight: 650; color: var(--ink); }
.tt-seg-radio > span small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.35; margin-top: 2px; }
.tt-seg-radio:hover > span { border-color: var(--border-strong); }
.tt-seg-radio input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

/* per-module colour pickers (Appearance) */
.tt-mcolors { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tt-mcolor { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.tt-mcolor.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tt-mcolor-swatch { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--c); flex: none; cursor: pointer; margin: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.tt-mcolor-swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.tt-mcolor-body { flex: 1; min-width: 0; line-height: 1.25; }
.tt-mcolor-body b { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); }
.tt-mcolor-body small { color: var(--faint); font-size: .72rem; }
.tt-mcolor-reset { font-size: .74rem; padding: 0 4px; text-decoration: none; }
.tt-mc-preset { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); margin: 0 2px; cursor: pointer; box-shadow: 0 0 0 1px var(--border-strong); vertical-align: middle; transition: transform .1s; }
.tt-mc-preset:hover { transform: scale(1.2); }

/* ---------------------------------------------------------- Bootstrap utility classes follow the accent
   Modules still use a few Bootstrap colour utilities (.btn-success on Mail's Compose, .text-success, .badge.bg-success…).
   Map the "success" family onto the accent so every theme / module colour reaches them; real state colours
   (danger, warning) stay as they are. */
.btn-success, .btn-success:disabled { background: var(--accent); border-color: var(--accent); background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%); background-image: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, var(--accent-2, var(--accent-hover))) 100%); box-shadow: 0 1px 2px transparent, 0 4px 12px transparent; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-hover) 20%, transparent), 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-check:checked + .btn-success { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; background-image: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%) !important; }
.btn-outline-success { color: var(--accent-hover); border-color: var(--accent); }
.btn-outline-success:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-outline-primary { color: var(--accent-hover); border-color: var(--accent); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-info { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); } .btn-info:hover { background: var(--accent); color: #fff; }
.text-success, .link-success { color: var(--accent-hover) !important; }
.text-primary, .link-primary { color: var(--accent-hover) !important; }
.bg-success:not(.badge) { background-color: var(--accent) !important; }
.badge.bg-success { background: var(--accent-soft) !important; color: var(--accent-hover) !important; }
.badge.bg-primary { background: var(--accent-soft) !important; color: var(--accent-hover) !important; }
.badge.bg-secondary { background: var(--hover-bg) !important; color: var(--muted) !important; }
.form-check-input:checked, .form-check-input:focus { border-color: var(--accent); }
.form-check-input:checked { background-color: var(--accent); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.progress-bar { background-color: var(--accent); }
.nav-pills .nav-link.active, .list-group-item.active, .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); }
a { color: var(--accent-hover); }
html[data-theme="dark"] .btn-success, html[data-theme="dark"] .btn-outline-success:hover, html[data-theme="dark"] .btn-outline-primary:hover { color: #0b1210 !important; }

/* ---------------------------------------------------------- old browsers (no color-mix())
   Chrome/Edge < 111, Firefox < 113 and older Chromium forks do not know color-mix(). Every direct
   use above carries a plain fallback declaration; the custom properties of the per-module accent
   are redefined here so buttons, pagination and avatars keep the module colour instead of
   falling through to a broken value. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    html[data-tt-colorful="2"] .tt-shell[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]),
    html[data-tt-colorful="2"] body[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]) > .tk-drawer-wrap,
    html[data-tt-colorful="2"] body[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]) > .tk-modal-wrap,
    html[data-tt-colorful="2"][data-theme="dark"] .tt-shell[data-panel]:not([data-panel=""]):not([data-panel="dashboard"]):not([data-panel="admin"]):not([data-panel="settings"]):not([data-panel="profile"]),
    html[data-tt-colorful="2"][data-theme="dark"] body[data-panel] > .tk-drawer-wrap,
    html[data-tt-colorful="2"][data-theme="dark"] body[data-panel] > .tk-modal-wrap {
        --accent-hover: var(--mc);
        --accent-soft: var(--surface);
        --tracker-border: var(--border);
    }
}