/*
 * themes.css - colour themes, sidebar styles and text sizes (loaded after modern.css).
 * Chosen from the palette menu in the top bar (navbar.php); remembered in cookies (header.php):
 *   html[data-theme]    colour theme: light, dark, ocean, forest, sunset, lavender, rose, graphite, contrast,
 *                       midnight, carbon, pine ("auto" picks light or dark from the system before the page paints)
 *   html[data-mode]     light | dark: what every dark theme shares (Bootstrap follows data-bs-theme)
 *   html[data-sidebar]  light | dark | colored
 *   html[data-size]     small | medium | large | xlarge
 * Every theme only sets the design tokens of modern.css, so all pages follow.
 */

/* ---------- What every dark theme shares ---------- */
html[data-mode="dark"] {
    color-scheme: dark;
    --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --m-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    --m-shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, .6), 0 8px 16px -6px rgba(0, 0, 0, .4);
    --m-backdrop: #000;
    --m-stripe-shade: rgba(255, 255, 255, .025);
    --bs-secondary-bg: var(--m-surface-2);
    --bs-tertiary-bg: var(--m-surface-2);
    --bs-secondary-color: var(--m-muted);
}
html[data-mode="dark"] .modal-backdrop.show { opacity: .6; }
html[data-mode="dark"] .gl .gl-badge.warn { color: #fbbf24; }

/* ---------- Light themes ---------- */
html[data-theme="ocean"] {
    --m-bg: #F0F7FA; --m-surface: #FFFFFF; --m-surface-2: #F5FAFC; --m-hover: #E8F3F7; --m-border: #D7E7EE; --m-border-strong: #BFD6E0;
    --m-text: #0B2530; --m-text-2: #24414D; --m-muted: #5B7783; --m-placeholder: #8EA6B0; --m-scroll: #BFD6E0;
    --m-primary: #0E7490; --m-primary-hover: #155E75; --m-primary-soft: #ECFEFF; --m-row-hover: #EEF7FA; --m-stripe: #F7FBFC; --m-selection: #A5F3FC;
    --m-overlay: rgba(240, 247, 250, .85);
    --bs-primary: #0E7490; --bs-primary-rgb: 14, 116, 144; --bs-link-color: #0E7490; --bs-link-color-rgb: 14, 116, 144; --bs-link-hover-color: #155E75; --bs-link-hover-color-rgb: 21, 94, 117;
    --bs-focus-ring-color: rgba(14, 116, 144, .25);
}
html[data-theme="forest"] {
    --m-bg: #F3F7F2; --m-surface: #FFFFFF; --m-surface-2: #F7FAF6; --m-hover: #EDF3EB; --m-border: #DCE7D9; --m-border-strong: #C3D5BE;
    --m-text: #142414; --m-text-2: #2F4630; --m-muted: #61775F; --m-placeholder: #93A790; --m-scroll: #C3D5BE;
    --m-primary: #15803D; --m-primary-hover: #166534; --m-primary-soft: #F0FDF4; --m-row-hover: #F0F6EE; --m-stripe: #F9FBF8; --m-selection: #BBF7D0;
    --m-overlay: rgba(243, 247, 242, .85);
    --bs-primary: #15803D; --bs-primary-rgb: 21, 128, 61; --bs-link-color: #15803D; --bs-link-color-rgb: 21, 128, 61; --bs-link-hover-color: #166534; --bs-link-hover-color-rgb: 22, 101, 52;
    --bs-focus-ring-color: rgba(21, 128, 61, .25);
}
html[data-theme="sunset"] {
    --m-bg: #FBF7F2; --m-surface: #FFFFFF; --m-surface-2: #FDFAF6; --m-hover: #F7EFE5; --m-border: #EEE2D3; --m-border-strong: #E0CDB6;
    --m-text: #2A1A0B; --m-text-2: #4A3522; --m-muted: #85705B; --m-placeholder: #B39E88; --m-scroll: #E0CDB6;
    --m-primary: #C2410C; --m-primary-hover: #9A3412; --m-primary-soft: #FFF7ED; --m-row-hover: #FBF3EA; --m-stripe: #FDFAF6; --m-selection: #FED7AA;
    --m-overlay: rgba(251, 247, 242, .85);
    --bs-primary: #C2410C; --bs-primary-rgb: 194, 65, 12; --bs-link-color: #C2410C; --bs-link-color-rgb: 194, 65, 12; --bs-link-hover-color: #9A3412; --bs-link-hover-color-rgb: 154, 52, 18;
    --bs-focus-ring-color: rgba(194, 65, 12, .25);
}
html[data-theme="lavender"] {
    --m-bg: #F6F5FB; --m-surface: #FFFFFF; --m-surface-2: #FAF9FD; --m-hover: #F0EEF8; --m-border: #E4E1F1; --m-border-strong: #CFCAE6;
    --m-text: #1E1633; --m-text-2: #3B3157; --m-muted: #6E6688; --m-placeholder: #A39CBB; --m-scroll: #CFCAE6;
    --m-primary: #7C3AED; --m-primary-hover: #6D28D9; --m-primary-soft: #F5F3FF; --m-row-hover: #F3F0FB; --m-stripe: #FBFAFE; --m-selection: #DDD6FE;
    --m-overlay: rgba(246, 245, 251, .85);
    --bs-primary: #7C3AED; --bs-primary-rgb: 124, 58, 237; --bs-link-color: #7C3AED; --bs-link-color-rgb: 124, 58, 237; --bs-link-hover-color: #6D28D9; --bs-link-hover-color-rgb: 109, 40, 217;
    --bs-focus-ring-color: rgba(124, 58, 237, .25);
}
html[data-theme="rose"] {
    --m-bg: #FBF5F7; --m-surface: #FFFFFF; --m-surface-2: #FDF9FA; --m-hover: #F8EDF1; --m-border: #F0DFE5; --m-border-strong: #E5C7D2;
    --m-text: #2B1119; --m-text-2: #4C2A35; --m-muted: #86636E; --m-placeholder: #B898A2; --m-scroll: #E5C7D2;
    --m-primary: #BE185D; --m-primary-hover: #9D174D; --m-primary-soft: #FDF2F8; --m-row-hover: #FBF0F4; --m-stripe: #FDF9FA; --m-selection: #FBCFE8;
    --m-overlay: rgba(251, 245, 247, .85);
    --bs-primary: #BE185D; --bs-primary-rgb: 190, 24, 93; --bs-link-color: #BE185D; --bs-link-color-rgb: 190, 24, 93; --bs-link-hover-color: #9D174D; --bs-link-hover-color-rgb: 157, 23, 77;
    --bs-focus-ring-color: rgba(190, 24, 93, .25);
}
html[data-theme="graphite"] {
    --m-bg: #F4F4F5; --m-surface: #FFFFFF; --m-surface-2: #FAFAFA; --m-hover: #F0F0F1; --m-border: #E4E4E7; --m-border-strong: #D4D4D8;
    --m-text: #18181B; --m-text-2: #3F3F46; --m-muted: #71717A; --m-placeholder: #A1A1AA; --m-scroll: #D4D4D8;
    --m-primary: #3F3F46; --m-primary-hover: #27272A; --m-primary-soft: #F4F4F5; --m-row-hover: #F4F4F5; --m-stripe: #FAFAFA; --m-selection: #D4D4D8;
    --m-overlay: rgba(244, 244, 245, .85);
    --bs-primary: #3F3F46; --bs-primary-rgb: 63, 63, 70; --bs-link-color: #3F3F46; --bs-link-color-rgb: 63, 63, 70; --bs-link-hover-color: #18181B; --bs-link-hover-color-rgb: 24, 24, 27;
    --bs-focus-ring-color: rgba(63, 63, 70, .25);
}
/* high contrast: black on white, strong borders, a deep blue accent and a visible focus */
html[data-theme="contrast"] {
    --m-bg: #FFFFFF; --m-surface: #FFFFFF; --m-surface-2: #F2F2F2; --m-hover: #E6E6E6; --m-border: #6B6B6B; --m-border-strong: #000000;
    --m-text: #000000; --m-text-2: #000000; --m-muted: #2B2B2B; --m-placeholder: #555555; --m-scroll: #6B6B6B;
    --m-primary: #0040B0; --m-primary-hover: #002E80; --m-primary-soft: #E5EDFF; --m-row-hover: #EEF3FF; --m-stripe: #F5F5F5; --m-selection: #FFE066;
    --m-overlay: rgba(255, 255, 255, .9); --m-shadow-sm: none; --m-shadow: none;
    --bs-primary: #0040B0; --bs-primary-rgb: 0, 64, 176; --bs-link-color: #0040B0; --bs-link-color-rgb: 0, 64, 176; --bs-link-hover-color: #002E80; --bs-link-hover-color-rgb: 0, 46, 128;
    --bs-focus-ring-color: rgba(0, 64, 176, .5); --bs-body-color: #000;
}
html[data-theme="contrast"] a { text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="contrast"] #menu a, html[data-theme="contrast"] .btn, html[data-theme="contrast"] .nav-link, html[data-theme="contrast"] .dropdown-item { text-decoration: none; }
html[data-theme="contrast"] :focus-visible { outline: 3px solid #FFB000 !important; outline-offset: 2px; }

/* ---------- Dark themes ---------- */
html[data-theme="midnight"] {
    --m-bg: #0B0A1F; --m-surface: #14122E; --m-surface-2: #1B1840; --m-hover: #24204F; --m-border: #2B2756; --m-border-strong: #3C3775;
    --m-text: #EEF0FF; --m-text-2: #C7C9F0; --m-muted: #9093C2; --m-placeholder: #6E70A0; --m-scroll: #3C3775;
    --m-primary: #818CF8; --m-primary-hover: #A5B4FC; --m-primary-soft: rgba(129, 140, 248, .18); --m-row-hover: #1F1C47; --m-stripe: #17153A; --m-selection: #3730A3;
    --m-overlay: rgba(11, 10, 31, .85);
    --bs-primary: #818CF8; --bs-primary-rgb: 129, 140, 248; --bs-link-color: #A5B4FC; --bs-link-color-rgb: 165, 180, 252; --bs-link-hover-color: #C7D2FE; --bs-link-hover-color-rgb: 199, 210, 254;
    --bs-focus-ring-color: rgba(129, 140, 248, .35);
}
html[data-theme="carbon"] {
    --m-bg: #0E0E10; --m-surface: #18181B; --m-surface-2: #1F1F23; --m-hover: #27272A; --m-border: #2E2E33; --m-border-strong: #3F3F46;
    --m-text: #FAFAFA; --m-text-2: #D4D4D8; --m-muted: #A1A1AA; --m-placeholder: #71717A; --m-scroll: #3F3F46;
    --m-primary: #38BDF8; --m-primary-hover: #7DD3FC; --m-primary-soft: rgba(56, 189, 248, .16); --m-row-hover: #222226; --m-stripe: #1B1B1F; --m-selection: #075985;
    --m-overlay: rgba(14, 14, 16, .85);
    --bs-primary: #38BDF8; --bs-primary-rgb: 56, 189, 248; --bs-link-color: #7DD3FC; --bs-link-color-rgb: 125, 211, 252; --bs-link-hover-color: #BAE6FD; --bs-link-hover-color-rgb: 186, 230, 253;
    --bs-focus-ring-color: rgba(56, 189, 248, .35);
}
html[data-theme="pine"] {
    --m-bg: #0A1410; --m-surface: #10201A; --m-surface-2: #152A22; --m-hover: #1B342A; --m-border: #1F3A2F; --m-border-strong: #2C4F41;
    --m-text: #ECFDF5; --m-text-2: #C2E5D3; --m-muted: #86B09A; --m-placeholder: #5E8573; --m-scroll: #2C4F41;
    --m-primary: #34D399; --m-primary-hover: #6EE7B7; --m-primary-soft: rgba(52, 211, 153, .16); --m-row-hover: #183027; --m-stripe: #12251D; --m-selection: #065F46;
    --m-overlay: rgba(10, 20, 16, .85);
    --bs-primary: #34D399; --bs-primary-rgb: 52, 211, 153; --bs-link-color: #6EE7B7; --bs-link-color-rgb: 110, 231, 183; --bs-link-hover-color: #A7F3D0; --bs-link-hover-color-rgb: 167, 243, 208;
    --bs-focus-ring-color: rgba(52, 211, 153, .35);
}
/* a light accent on a dark theme needs dark text on its buttons */
/* button text on a light accent: --m-on-primary (HUD-style options below) */

/* ---------- Sidebar styles (the menu keeps its own tokens, the rest of the page is unchanged) ---------- */
html[data-sidebar="dark"] #column-left {
    --m-surface: #0F172A; --m-surface-2: #16213A; --m-hover: #1E293B; --m-border: #1E293B; --m-border-strong: #334155;
    --m-text: #FFFFFF; --m-text-2: #CBD5E1; --m-muted: #94A3B8; --m-placeholder: #64748B; --m-primary-soft: rgba(255, 255, 255, .08);
}
html[data-sidebar="colored"] #column-left {
    background: var(--m-primary) !important;
    --m-surface: transparent; --m-surface-2: rgba(255, 255, 255, .08); --m-hover: rgba(255, 255, 255, .14); --m-border: rgba(255, 255, 255, .18);
    --m-text: #FFFFFF; --m-text-2: rgba(255, 255, 255, .92); --m-muted: rgba(255, 255, 255, .75); --m-placeholder: rgba(255, 255, 255, .6); --m-primary-soft: rgba(255, 255, 255, .16);
}
html[data-sidebar="colored"] #column-left .fa { color: inherit; }
html[data-mode="dark"][data-sidebar="colored"] #column-left { --m-text: #0B1120; --m-text-2: rgba(11, 17, 32, .9); --m-muted: rgba(11, 17, 32, .7); }

/* ---------- Text size (Bootstrap uses rem, the program sets the body in px) ---------- */
html[data-size="small"] { font-size: 15px; }
html[data-size="small"] body { font-size: 13px; }
html[data-size="large"] { font-size: 17.5px; }
html[data-size="large"] body { font-size: 15.5px; }
html[data-size="xlarge"] { font-size: 19px; }
html[data-size="xlarge"] body { font-size: 17px; }

/* ---------- The appearance menu in the top bar ---------- */
#appearance-menu .dropdown-toggle::after { display: none; }
#appearance-btn {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0;
    border-radius: var(--m-radius-sm); background: transparent; color: var(--m-muted); font-size: 16px; cursor: pointer;
}
#appearance-btn:hover, #appearance-btn.show { background: var(--m-hover); color: var(--m-text); }
.appearance-panel { width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 60px); overflow-y: auto; padding: 14px; }
.appearance-panel h6 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--m-muted); margin: 0 0 8px; }
.appearance-panel h6:not(:first-child) { margin-top: 14px; }
.appearance-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.appearance-choice {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px; border: 2px solid transparent; border-radius: var(--m-radius-sm);
    background: transparent; color: var(--m-text-2); font-size: 11.5px; cursor: pointer; line-height: 1.1;
}
.appearance-choice:hover { background: var(--m-hover); }
.appearance-choice.active { border-color: var(--m-primary); color: var(--m-text); font-weight: 600; }
.appearance-swatch { position: relative; width: 52px; height: 34px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .15); }
.appearance-swatch i { position: absolute; display: block; }
.appearance-swatch .s-bg { inset: 0; }
.appearance-swatch .s-side { left: 0; top: 0; bottom: 0; width: 13px; }
.appearance-swatch .s-card { left: 18px; right: 5px; top: 6px; height: 12px; border-radius: 3px; }
.appearance-swatch .s-acc { left: 18px; width: 18px; bottom: 6px; height: 6px; border-radius: 3px; }
.appearance-row { display: flex; gap: 6px; }
.appearance-row .appearance-opt {
    flex: 1; padding: 6px 4px; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); background: var(--m-surface-2);
    color: var(--m-text-2); font-size: 12px; cursor: pointer; text-align: center;
}
.appearance-row .appearance-opt:hover { background: var(--m-hover); }
.appearance-row .appearance-opt.active { border-color: var(--m-primary); background: var(--m-primary-soft); color: var(--m-primary); font-weight: 600; }
.appearance-reset { margin-top: 12px; width: 100%; font-size: 12px; }

/* ========== HUD-style options (accent colours, HUD look, background covers, layout, loading bar, appearance panel) ========== */
/* Every colour goes through --m-primary, so an accent recolours links, buttons, menus, focus rings and the HUD marks. */
:root { --m-on-primary: #FFFFFF; }
html[data-mode="dark"] { --m-on-primary: #0B1120; }
html[data-theme="dark"] { --m-on-primary: #FFFFFF; }   /* its blue is dark enough for white text */

html[data-accent="red"] { --m-primary: #DC2626; --m-primary-hover: color-mix(in srgb, #DC2626 82%, #000); --m-primary-soft: color-mix(in srgb, #DC2626 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #DC2626 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #DC2626; --bs-primary-rgb: 220, 38, 38; --bs-link-color: #DC2626; --bs-link-color-rgb: 220, 38, 38; --bs-link-hover-color: color-mix(in srgb, #DC2626 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #DC2626 28%, transparent); }
html[data-mode="dark"][data-accent="red"] { --m-primary: #F87171; --m-primary-hover: color-mix(in srgb, #F87171 80%, #fff); --m-primary-soft: color-mix(in srgb, #F87171 16%, transparent); --m-selection: color-mix(in srgb, #F87171 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #F87171; --bs-primary-rgb: 248, 113, 113; --bs-link-color: #F87171; --bs-link-color-rgb: 248, 113, 113; --bs-link-hover-color: color-mix(in srgb, #F87171 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #F87171 35%, transparent); }
html[data-accent="pink"] { --m-primary: #DB2777; --m-primary-hover: color-mix(in srgb, #DB2777 82%, #000); --m-primary-soft: color-mix(in srgb, #DB2777 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #DB2777 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #DB2777; --bs-primary-rgb: 219, 39, 119; --bs-link-color: #DB2777; --bs-link-color-rgb: 219, 39, 119; --bs-link-hover-color: color-mix(in srgb, #DB2777 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #DB2777 28%, transparent); }
html[data-mode="dark"][data-accent="pink"] { --m-primary: #F472B6; --m-primary-hover: color-mix(in srgb, #F472B6 80%, #fff); --m-primary-soft: color-mix(in srgb, #F472B6 16%, transparent); --m-selection: color-mix(in srgb, #F472B6 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #F472B6; --bs-primary-rgb: 244, 114, 182; --bs-link-color: #F472B6; --bs-link-color-rgb: 244, 114, 182; --bs-link-hover-color: color-mix(in srgb, #F472B6 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #F472B6 35%, transparent); }
html[data-accent="orange"] { --m-primary: #EA580C; --m-primary-hover: color-mix(in srgb, #EA580C 82%, #000); --m-primary-soft: color-mix(in srgb, #EA580C 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #EA580C 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #EA580C; --bs-primary-rgb: 234, 88, 12; --bs-link-color: #EA580C; --bs-link-color-rgb: 234, 88, 12; --bs-link-hover-color: color-mix(in srgb, #EA580C 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #EA580C 28%, transparent); }
html[data-mode="dark"][data-accent="orange"] { --m-primary: #FB923C; --m-primary-hover: color-mix(in srgb, #FB923C 80%, #fff); --m-primary-soft: color-mix(in srgb, #FB923C 16%, transparent); --m-selection: color-mix(in srgb, #FB923C 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #FB923C; --bs-primary-rgb: 251, 146, 60; --bs-link-color: #FB923C; --bs-link-color-rgb: 251, 146, 60; --bs-link-hover-color: color-mix(in srgb, #FB923C 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #FB923C 35%, transparent); }
html[data-accent="yellow"] { --m-primary: #CA8A04; --m-primary-hover: color-mix(in srgb, #CA8A04 82%, #000); --m-primary-soft: color-mix(in srgb, #CA8A04 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #CA8A04 28%, transparent); --m-on-primary: #1A1A1A;
    --bs-primary: #CA8A04; --bs-primary-rgb: 202, 138, 4; --bs-link-color: #CA8A04; --bs-link-color-rgb: 202, 138, 4; --bs-link-hover-color: color-mix(in srgb, #CA8A04 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #CA8A04 28%, transparent); }
html[data-mode="dark"][data-accent="yellow"] { --m-primary: #FACC15; --m-primary-hover: color-mix(in srgb, #FACC15 80%, #fff); --m-primary-soft: color-mix(in srgb, #FACC15 16%, transparent); --m-selection: color-mix(in srgb, #FACC15 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #FACC15; --bs-primary-rgb: 250, 204, 21; --bs-link-color: #FACC15; --bs-link-color-rgb: 250, 204, 21; --bs-link-hover-color: color-mix(in srgb, #FACC15 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #FACC15 35%, transparent); }
html[data-accent="lime"] { --m-primary: #65A30D; --m-primary-hover: color-mix(in srgb, #65A30D 82%, #000); --m-primary-soft: color-mix(in srgb, #65A30D 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #65A30D 28%, transparent); --m-on-primary: #1A1A1A;
    --bs-primary: #65A30D; --bs-primary-rgb: 101, 163, 13; --bs-link-color: #65A30D; --bs-link-color-rgb: 101, 163, 13; --bs-link-hover-color: color-mix(in srgb, #65A30D 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #65A30D 28%, transparent); }
html[data-mode="dark"][data-accent="lime"] { --m-primary: #A3E635; --m-primary-hover: color-mix(in srgb, #A3E635 80%, #fff); --m-primary-soft: color-mix(in srgb, #A3E635 16%, transparent); --m-selection: color-mix(in srgb, #A3E635 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #A3E635; --bs-primary-rgb: 163, 230, 53; --bs-link-color: #A3E635; --bs-link-color-rgb: 163, 230, 53; --bs-link-hover-color: color-mix(in srgb, #A3E635 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #A3E635 35%, transparent); }
html[data-accent="green"] { --m-primary: #16A34A; --m-primary-hover: color-mix(in srgb, #16A34A 82%, #000); --m-primary-soft: color-mix(in srgb, #16A34A 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #16A34A 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #16A34A; --bs-primary-rgb: 22, 163, 74; --bs-link-color: #16A34A; --bs-link-color-rgb: 22, 163, 74; --bs-link-hover-color: color-mix(in srgb, #16A34A 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #16A34A 28%, transparent); }
html[data-mode="dark"][data-accent="green"] { --m-primary: #4ADE80; --m-primary-hover: color-mix(in srgb, #4ADE80 80%, #fff); --m-primary-soft: color-mix(in srgb, #4ADE80 16%, transparent); --m-selection: color-mix(in srgb, #4ADE80 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #4ADE80; --bs-primary-rgb: 74, 222, 128; --bs-link-color: #4ADE80; --bs-link-color-rgb: 74, 222, 128; --bs-link-hover-color: color-mix(in srgb, #4ADE80 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #4ADE80 35%, transparent); }
html[data-accent="teal"] { --m-primary: #0D9488; --m-primary-hover: color-mix(in srgb, #0D9488 82%, #000); --m-primary-soft: color-mix(in srgb, #0D9488 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #0D9488 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #0D9488; --bs-primary-rgb: 13, 148, 136; --bs-link-color: #0D9488; --bs-link-color-rgb: 13, 148, 136; --bs-link-hover-color: color-mix(in srgb, #0D9488 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #0D9488 28%, transparent); }
html[data-mode="dark"][data-accent="teal"] { --m-primary: #2DD4BF; --m-primary-hover: color-mix(in srgb, #2DD4BF 80%, #fff); --m-primary-soft: color-mix(in srgb, #2DD4BF 16%, transparent); --m-selection: color-mix(in srgb, #2DD4BF 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #2DD4BF; --bs-primary-rgb: 45, 212, 191; --bs-link-color: #2DD4BF; --bs-link-color-rgb: 45, 212, 191; --bs-link-hover-color: color-mix(in srgb, #2DD4BF 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #2DD4BF 35%, transparent); }
html[data-accent="cyan"] { --m-primary: #0891B2; --m-primary-hover: color-mix(in srgb, #0891B2 82%, #000); --m-primary-soft: color-mix(in srgb, #0891B2 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #0891B2 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #0891B2; --bs-primary-rgb: 8, 145, 178; --bs-link-color: #0891B2; --bs-link-color-rgb: 8, 145, 178; --bs-link-hover-color: color-mix(in srgb, #0891B2 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #0891B2 28%, transparent); }
html[data-mode="dark"][data-accent="cyan"] { --m-primary: #22D3EE; --m-primary-hover: color-mix(in srgb, #22D3EE 80%, #fff); --m-primary-soft: color-mix(in srgb, #22D3EE 16%, transparent); --m-selection: color-mix(in srgb, #22D3EE 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #22D3EE; --bs-primary-rgb: 34, 211, 238; --bs-link-color: #22D3EE; --bs-link-color-rgb: 34, 211, 238; --bs-link-hover-color: color-mix(in srgb, #22D3EE 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #22D3EE 35%, transparent); }
html[data-accent="blue"] { --m-primary: #2563EB; --m-primary-hover: color-mix(in srgb, #2563EB 82%, #000); --m-primary-soft: color-mix(in srgb, #2563EB 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #2563EB 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235; --bs-link-color: #2563EB; --bs-link-color-rgb: 37, 99, 235; --bs-link-hover-color: color-mix(in srgb, #2563EB 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #2563EB 28%, transparent); }
html[data-mode="dark"][data-accent="blue"] { --m-primary: #60A5FA; --m-primary-hover: color-mix(in srgb, #60A5FA 80%, #fff); --m-primary-soft: color-mix(in srgb, #60A5FA 16%, transparent); --m-selection: color-mix(in srgb, #60A5FA 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #60A5FA; --bs-primary-rgb: 96, 165, 250; --bs-link-color: #60A5FA; --bs-link-color-rgb: 96, 165, 250; --bs-link-hover-color: color-mix(in srgb, #60A5FA 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #60A5FA 35%, transparent); }
html[data-accent="purple"] { --m-primary: #9333EA; --m-primary-hover: color-mix(in srgb, #9333EA 82%, #000); --m-primary-soft: color-mix(in srgb, #9333EA 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #9333EA 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #9333EA; --bs-primary-rgb: 147, 51, 234; --bs-link-color: #9333EA; --bs-link-color-rgb: 147, 51, 234; --bs-link-hover-color: color-mix(in srgb, #9333EA 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #9333EA 28%, transparent); }
html[data-mode="dark"][data-accent="purple"] { --m-primary: #C084FC; --m-primary-hover: color-mix(in srgb, #C084FC 80%, #fff); --m-primary-soft: color-mix(in srgb, #C084FC 16%, transparent); --m-selection: color-mix(in srgb, #C084FC 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #C084FC; --bs-primary-rgb: 192, 132, 252; --bs-link-color: #C084FC; --bs-link-color-rgb: 192, 132, 252; --bs-link-hover-color: color-mix(in srgb, #C084FC 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #C084FC 35%, transparent); }
html[data-accent="indigo"] { --m-primary: #4F46E5; --m-primary-hover: color-mix(in srgb, #4F46E5 82%, #000); --m-primary-soft: color-mix(in srgb, #4F46E5 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #4F46E5 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #4F46E5; --bs-primary-rgb: 79, 70, 229; --bs-link-color: #4F46E5; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: color-mix(in srgb, #4F46E5 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #4F46E5 28%, transparent); }
html[data-mode="dark"][data-accent="indigo"] { --m-primary: #818CF8; --m-primary-hover: color-mix(in srgb, #818CF8 80%, #fff); --m-primary-soft: color-mix(in srgb, #818CF8 16%, transparent); --m-selection: color-mix(in srgb, #818CF8 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #818CF8; --bs-primary-rgb: 129, 140, 248; --bs-link-color: #818CF8; --bs-link-color-rgb: 129, 140, 248; --bs-link-hover-color: color-mix(in srgb, #818CF8 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #818CF8 35%, transparent); }
html[data-accent="gray"] { --m-primary: #52525B; --m-primary-hover: color-mix(in srgb, #52525B 82%, #000); --m-primary-soft: color-mix(in srgb, #52525B 10%, var(--m-surface)); --m-selection: color-mix(in srgb, #52525B 28%, transparent); --m-on-primary: #FFFFFF;
    --bs-primary: #52525B; --bs-primary-rgb: 82, 82, 91; --bs-link-color: #52525B; --bs-link-color-rgb: 82, 82, 91; --bs-link-hover-color: color-mix(in srgb, #52525B 82%, #000); --bs-focus-ring-color: color-mix(in srgb, #52525B 28%, transparent); }
html[data-mode="dark"][data-accent="gray"] { --m-primary: #A1A1AA; --m-primary-hover: color-mix(in srgb, #A1A1AA 80%, #fff); --m-primary-soft: color-mix(in srgb, #A1A1AA 16%, transparent); --m-selection: color-mix(in srgb, #A1A1AA 35%, transparent); --m-on-primary: #0B1120;
    --bs-primary: #A1A1AA; --bs-primary-rgb: 161, 161, 170; --bs-link-color: #A1A1AA; --bs-link-color-rgb: 161, 161, 170; --bs-link-hover-color: color-mix(in srgb, #A1A1AA 80%, #fff); --bs-focus-ring-color: color-mix(in srgb, #A1A1AA 35%, transparent); }

/* buttons and focus rings follow the theme / accent (modern.css had the blue written in) */
.btn-primary {
    --bs-btn-bg: var(--m-primary); --bs-btn-border-color: var(--m-primary); --bs-btn-color: var(--m-on-primary);
    --bs-btn-hover-bg: var(--m-primary-hover); --bs-btn-hover-border-color: var(--m-primary-hover); --bs-btn-hover-color: var(--m-on-primary);
    --bs-btn-active-bg: var(--m-primary-hover); --bs-btn-active-border-color: var(--m-primary-hover); --bs-btn-active-color: var(--m-on-primary);
    --bs-btn-disabled-bg: var(--m-primary); --bs-btn-disabled-border-color: var(--m-primary); --bs-btn-disabled-color: var(--m-on-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--m-primary); --bs-btn-border-color: var(--m-primary); --bs-btn-hover-bg: var(--m-primary); --bs-btn-hover-border-color: var(--m-primary);
    --bs-btn-hover-color: var(--m-on-primary); --bs-btn-active-bg: var(--m-primary); --bs-btn-active-border-color: var(--m-primary); --bs-btn-active-color: var(--m-on-primary);
}
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-primary) 25%, transparent); }
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }
::selection { background: var(--m-selection); }

/* ---------- HUD look: see-through cards with corner marks (data-hud="1"); no markup changes ---------- */
html[data-hud="1"] { --hud-c: var(--m-primary); --hud-l: 14px; --hud-w: 2px; }
html[data-hud="1"] :is(.card, .gl-card, .dash-card, .tile, .modal-content, .dropdown-menu.appearance-panel) {
    position: relative;
    border-radius: 3px !important;
    border-color: color-mix(in srgb, var(--m-primary) 22%, var(--m-border)) !important;
    background-color: color-mix(in srgb, var(--m-surface) 80%, transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-hud="1"] :is(.card, .gl-card, .dash-card, .tile)::after {
    content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
    background:
        linear-gradient(var(--hud-c), var(--hud-c)) top left / var(--hud-l) var(--hud-w),
        linear-gradient(var(--hud-c), var(--hud-c)) top left / var(--hud-w) var(--hud-l),
        linear-gradient(var(--hud-c), var(--hud-c)) top right / var(--hud-l) var(--hud-w),
        linear-gradient(var(--hud-c), var(--hud-c)) top right / var(--hud-w) var(--hud-l),
        linear-gradient(var(--hud-c), var(--hud-c)) bottom left / var(--hud-l) var(--hud-w),
        linear-gradient(var(--hud-c), var(--hud-c)) bottom left / var(--hud-w) var(--hud-l),
        linear-gradient(var(--hud-c), var(--hud-c)) bottom right / var(--hud-l) var(--hud-w),
        linear-gradient(var(--hud-c), var(--hud-c)) bottom right / var(--hud-w) var(--hud-l);
    background-repeat: no-repeat;
}
/* titles of cards: small capitals, like an instrument panel */
html[data-hud="1"] :is(.gl-card > h2, .gl-card > h3, .dash-card > h2, .card-header, .tile-heading) {
    text-transform: uppercase; letter-spacing: .08em; font-size: .78rem !important; font-weight: 600; color: var(--m-muted);
}
html[data-hud="1"] .dash .kpi .ico { border-radius: 3px; }
html[data-hud="1"] .btn { border-radius: 3px; }
html[data-hud="1"] #header, html[data-hud="1"] #column-left {
    background-color: color-mix(in srgb, var(--m-surface) 82%, transparent) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: color-mix(in srgb, var(--m-primary) 18%, var(--m-border)) !important;
}
html[data-hud="1"] table.table, html[data-hud="1"] .table > :not(caption) > * > * { --bs-table-bg: transparent; }
@media print { html[data-hud="1"] :is(.card, .gl-card, .dash-card, .tile)::after { display: none; } }

/* ---------- Background covers: one layer behind the page (body::before), tinted by the accent ---------- */
html[data-cover]:not([data-cover=""]) body { background-color: var(--m-bg); }
html[data-cover]:not([data-cover=""]) body::before,
.cover-thumb::before { content: ""; pointer-events: none; }
html[data-cover]:not([data-cover=""]) body::before { position: fixed; inset: 0; z-index: -1; }
.cover-thumb { position: relative; overflow: hidden; background: var(--m-bg); }
.cover-thumb::before { position: absolute; inset: 0; }

html[data-cover="aurora"] body::before, .cover-thumb[data-cover="aurora"]::before {
    background:
        radial-gradient(55% 45% at 8% 0%, color-mix(in srgb, var(--m-primary) 22%, transparent), transparent 70%),
        radial-gradient(45% 40% at 95% 8%, color-mix(in srgb, #14B8A6 18%, transparent), transparent 70%),
        radial-gradient(60% 55% at 55% 105%, color-mix(in srgb, #A855F7 16%, transparent), transparent 70%);
}
html[data-cover="grid"] body::before, .cover-thumb[data-cover="grid"]::before {
    background:
        linear-gradient(color-mix(in srgb, var(--m-primary) 9%, transparent) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, color-mix(in srgb, var(--m-primary) 9%, transparent) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--m-primary) 10%, transparent), transparent 75%);
}
html[data-cover="dots"] body::before, .cover-thumb[data-cover="dots"]::before {
    background: radial-gradient(color-mix(in srgb, var(--m-primary) 26%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px;
}
html[data-cover="mesh"] body::before, .cover-thumb[data-cover="mesh"]::before {
    background:
        radial-gradient(40% 50% at 0% 30%, color-mix(in srgb, var(--m-primary) 18%, transparent), transparent 70%),
        radial-gradient(35% 45% at 100% 20%, color-mix(in srgb, #F472B6 15%, transparent), transparent 70%),
        radial-gradient(40% 45% at 80% 100%, color-mix(in srgb, #22D3EE 16%, transparent), transparent 70%),
        radial-gradient(35% 40% at 15% 100%, color-mix(in srgb, #FACC15 12%, transparent), transparent 70%);
}
html[data-cover="lines"] body::before, .cover-thumb[data-cover="lines"]::before {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--m-primary) 7%, transparent) 0 1px, transparent 1px 16px);
}
html[data-cover="sunset"] body::before, .cover-thumb[data-cover="sunset"]::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, #F97316 14%, transparent), transparent 45%),
        radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, #8B5CF6 16%, transparent), transparent 75%);
}
/* pattern covers: an SVG used as a mask over the accent colour, so the pattern follows the accent */
html[data-cover="waves"] body::before, .cover-thumb[data-cover="waves"]::before {
    background: color-mix(in srgb, var(--m-primary) 14%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20 Q20 0 40 20 T80 20 T120 20 T160 20' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 160px 40px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20 Q20 0 40 20 T80 20 T120 20 T160 20' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 160px 40px repeat;
}
html[data-cover="circuit"] body::before, .cover-thumb[data-cover="circuit"]::before {
    background: color-mix(in srgb, var(--m-primary) 16%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M10 10h30v20h40v-20h30M10 60h20l10 10h40l10-10h20M60 30v30M30 110v-20h60v20M110 40v40'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='110' cy='10' r='3'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='30' cy='110' r='3'/%3E%3Ccircle cx='110' cy='80' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M10 10h30v20h40v-20h30M10 60h20l10 10h40l10-10h20M60 30v30M30 110v-20h60v20M110 40v40'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='110' cy='10' r='3'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='30' cy='110' r='3'/%3E%3Ccircle cx='110' cy='80' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
}
/* cards stay readable over a cover even without the HUD look */
html[data-cover]:not([data-cover=""]):not([data-hud="1"]) :is(.gl-card, .dash-card, .card) { background-color: color-mix(in srgb, var(--m-surface) 94%, transparent); }

/* ---------- Layout: boxed content ---------- */
html[data-width="boxed"] .m110 > .container-fluid, html[data-width="boxed"] #content.container-fluid { max-width: 1400px; margin-inline: auto; }

/* ---------- Loading bar at the top (data-loader="1") ---------- */
#ama-loader { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 2000; background: var(--m-primary);
    box-shadow: 0 0 8px color-mix(in srgb, var(--m-primary) 60%, transparent); opacity: 0; transition: width .25s ease, opacity .3s ease; }
html[data-loader="0"] #ama-loader { display: none; }
#ama-loader.run { opacity: 1; width: 85%; transition: width 6s cubic-bezier(.1, .7, .2, 1), opacity .2s; }
#ama-loader.done { opacity: 0; width: 100%; transition: width .2s ease, opacity .4s ease .2s; }
@media (prefers-reduced-motion: reduce) { #ama-loader, #ama-loader.run { transition: none; } }

/* ---------- Appearance panel (offcanvas on the right, gear tab on the edge) ---------- */
#appearance-tab {
    position: fixed; top: 40%; inset-inline-end: 0; z-index: 1030; width: 38px; height: 42px; border: 1px solid var(--m-border); border-inline-end: 0;
    border-start-start-radius: 10px; border-end-start-radius: 10px; background: var(--m-surface); color: var(--m-primary); box-shadow: var(--m-shadow);
    display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
}
#appearance-tab:hover { color: var(--m-primary-hover); }
#appearance-tab .fa { animation: ama-spin 6s linear infinite; }
@keyframes ama-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #appearance-tab .fa { animation: none; } }
@media print { #appearance-tab, #ama-loader { display: none !important; } }
.ama-panel { --bs-offcanvas-width: 360px; background: var(--m-surface); color: var(--m-text-2); border-color: var(--m-border); }
.ama-panel .offcanvas-header { border-bottom: 1px solid var(--m-border); }
.ama-panel .offcanvas-title { font-size: 1rem; font-weight: 600; color: var(--m-text); }
.ama-panel .offcanvas-body { padding: 14px 16px 24px; }
.ama-panel h6 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--m-muted); margin: 16px 0 8px; }
.ama-panel h6:first-child { margin-top: 0; }
.ama-accents { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ama-accent { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--m-surface); box-shadow: 0 0 0 1px var(--m-border); cursor: pointer; padding: 0; position: relative; }
.ama-accent.active { box-shadow: 0 0 0 2px var(--m-text); }
.ama-accent.active::after { content: "\f00c"; font-family: FontAwesome; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.ama-accent.is-theme { background: conic-gradient(#2563EB, #16A34A, #F59E0B, #DC2626, #9333EA, #2563EB); }
.ama-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ama-cover { padding: 0; border: 2px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; color: var(--m-text-2); font-size: 11.5px; }
.ama-cover .cover-thumb { display: block; height: 52px; border-radius: 7px; border: 1px solid var(--m-border); margin-bottom: 3px; }
.ama-cover.active { border-color: var(--m-primary); color: var(--m-text); font-weight: 600; }
.ama-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); background: var(--m-surface-2); }
.ama-switch small { display: block; color: var(--m-muted); }

/* ---------- Apps menu (grid of tiles in the top bar) ---------- */
#apps-menu .dropdown-toggle::after { display: none; }
#apps-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0;
    border-radius: var(--m-radius-sm); background: transparent; color: var(--m-muted); font-size: 18px; cursor: pointer; }
#apps-btn:hover, #apps-btn.show { background: var(--m-hover); color: var(--m-text); }
.apps-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-success, #16A34A); box-shadow: 0 0 0 2px var(--m-surface); }
.ama-apps { padding: 0 !important; width: 330px; display: grid !important; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.ama-apps:not(.show) { display: none !important; }
.ama-app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 6px 14px; text-decoration: none; color: var(--m-text-2);
    border-inline-end: 1px solid var(--m-border); border-bottom: 1px solid var(--m-border); transition: background .12s, color .12s; }
.ama-app:nth-child(3n) { border-inline-end: 0; }
.ama-app:nth-last-child(-n+3) { border-bottom: 0; }
.ama-app:hover { background: var(--m-primary-soft); color: var(--m-primary); text-decoration: none; }
.ama-app__ic { position: relative; font-size: 26px; line-height: 1; color: var(--m-muted); }
.ama-app:hover .ama-app__ic { color: var(--m-primary); }
.ama-app__lbl { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.ama-app__badge { position: absolute; top: -8px; inset-inline-end: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--m-danger, #DC2626);
    color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--m-font); }


/* ---------- confirm / alert dialogs (really-simple-jquery-dialog): the colours of the theme ----------
   The plugin had a fixed light-cyan box and no text colour, so the text took the page colour (unreadable in dark
   mode); it also sat under the Bootstrap windows (z-index 11). */
.simple-dialog { z-index: 1090; background-color: rgba(0, 0, 0, .5); }
.simple-dialog-content {
    background-color: var(--m-surface, #fff);
    color: var(--m-text, #111827);
    border: 1px solid var(--m-border, #e5e7eb);
    border-radius: var(--m-radius, 12px);
    box-shadow: var(--m-shadow-lg, 0 10px 30px rgba(0, 0, 0, .25));
    width: min(340px, 92vw);
    overflow: hidden;
}
.simple-dialog-header .title { color: var(--m-text, #111827); font-size: 1.05rem; font-weight: 600; }
.simple-dialog-body { color: var(--m-text-2, #374151); }
.simple-dialog-close:before { color: var(--m-muted, #6b7280); }
.simple-dialog-button { border-radius: var(--m-radius-sm, 8px); }

/* Sidebar "hidden" (the default): no side menu and no room kept for it; the logo opens it over the page
   (header.php closes it again on a click outside and does not reopen it on the next page). */
html[data-sidebar="hidden"] #column-left:not(.active) { display: none; }
html[data-sidebar="hidden"] #column-left.active { z-index: 1035; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
html[data-sidebar="hidden"] .m110 > .container-fluid,
html[data-sidebar="hidden"] .m110 > .container,
html[data-sidebar="hidden"] #content.container-fluid { padding-left: 18px; padding-right: 18px; }
html[data-sidebar="hidden"] #column-left + #content,
html[data-sidebar="hidden"] #column-left + #content + #footer { margin-left: 0; }
html[data-sidebar="hidden"] #newID { padding-left: 0 !important; padding-right: 0 !important; }
html[data-sidebar="hidden"] #button-menu { cursor: pointer; }

/* top bar: the menu button opens the side menu, the logo goes to Home (navbar.php) */
#header > .ama-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px !important;
    margin: 0 0 0 8px; padding: 0; border: 0; border-radius: var(--m-radius-sm, 8px); background: transparent; color: var(--m-text-2, #374151); font-size: 17px; cursor: pointer; }
#header > .ama-menu-btn:hover { background: var(--m-hover, #f3f4f6); color: var(--m-text, #111827); }
#header > .ama-logo { display: inline-flex; align-items: center; height: 32px; margin: 0 0 0 6px; padding: 1px 3px; border-radius: var(--m-radius-sm, 8px); }
#header > .ama-logo:hover { background: var(--m-hover, #f3f4f6); }
#header > .ama-logo img { height: 30px; }
[dir="rtl"] #header > .ama-menu-btn { margin: 0 8px 0 0; }
[dir="rtl"] #header > .ama-logo { margin: 0 6px 0 0; }

/* the menu button is not shown (the user's choice): Home, the tiles and the bars of each part lead everywhere */
#header > #button-menu { display: none !important; }

/* "Back" next to the logo (navbar.php), on every page but Home: a soft pill with the arrow in a round badge,
   the arrow slides back on hover; colours from the theme, so it follows light / dark */
#header > .ama-back {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 0 10px; padding: 0 14px 0 4px;
  border-radius: 999px; border: 1px solid var(--m-border, #e5e7eb);
  background: var(--m-surface, #fff); color: var(--m-text, #111827);
  font-size: .875rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; vertical-align: middle; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
#header > .ama-back .fa {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--m-primary-soft, #eff6ff); color: var(--m-primary, #2563eb); font-size: .8rem;
  transition: transform .18s ease, background-color .15s ease, color .15s ease;
}
#header > .ama-back:hover {
  border-color: var(--m-primary, #2563eb); color: var(--m-primary, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .15);
}
#header > .ama-back:hover .fa { background: var(--m-primary, #2563eb); color: #fff; transform: translateX(-2px); }
#header > .ama-back:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
#header > .ama-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--m-primary-soft, #dbeafe), 0 0 0 4px var(--m-primary, #2563eb); }
[data-theme="dark"] #header > .ama-back, .theme-dark #header > .ama-back { box-shadow: none; }
[dir="rtl"] #header > .ama-back { margin: 0 10px 0 0; padding: 0 4px 0 14px; }
[dir="rtl"] #header > .ama-back .fa-arrow-left { transform: scaleX(-1); }
[dir="rtl"] #header > .ama-back:hover .fa-arrow-left { transform: scaleX(-1) translateX(-2px); }
@media (prefers-reduced-motion: reduce) { #header > .ama-back, #header > .ama-back .fa { transition: none; } }
@media (max-width: 575px) { #header > .ama-back span { display: none; } #header > .ama-back { padding: 0 4px; gap: 0; } }

/* ---------- WhatsApp in the top bar (navbar.php #wa-menu, apps/wa_bar.js) ---------- */
#wa-menu .dropdown-toggle::after { display: none; }
#wa-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0;
    border-radius: var(--m-radius-sm); background: transparent; color: var(--m-muted); font-size: 18px; cursor: pointer; }
#wa-btn:hover, #wa-btn.show { background: var(--m-hover); color: #25D366; }
#wa-btn.wa-has { color: #25D366; }
#wa-btn.wa-has i { animation: wa-pulse 2.4s ease-in-out infinite; }
@keyframes wa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.wa-count { position: absolute; top: 1px; inset-inline-end: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e11d48; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--m-surface, #fff); }
.wa-drop { width: 340px; max-width: calc(100vw - 16px); padding: 0 !important; overflow: hidden; border-radius: 12px !important; }
.wa-drop .wa-head { padding: 11px 14px; background: #008069; color: #fff; font-weight: 600; }
.wa-drop .wa-list { max-height: 360px; overflow-y: auto; }
.wa-drop .wa-empty { padding: 18px 14px; color: var(--m-muted); text-align: center; }
.wa-row, .wa-toast { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none !important; color: var(--m-text, #111) !important; }
.wa-row + .wa-row { border-top: 1px solid var(--m-border, #eef0f2); }
.wa-row:hover { background: var(--m-hover, #f5f6f6); }
.wa-av { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.wa-tt { flex: 1; min-width: 0; }
.wa-tt b, .wa-tt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tt small { color: var(--m-muted, #667781); font-size: .8rem; }
.wa-row.wa-un .wa-tt b { font-weight: 700; }
.wa-row.wa-un .wa-tt small { color: var(--m-text, #111); }
.wa-meta { text-align: end; font-size: .72rem; color: var(--m-muted, #667781); white-space: nowrap; }
.wa-row.wa-un .wa-meta { color: #25D366; font-weight: 600; }
.wa-n { display: block; margin: 3px 0 0 auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #25D366; color: #fff; font-size: .7rem; line-height: 19px; text-align: center; }
.wa-drop .wa-perm, .wa-drop .wa-foot { display: block; padding: 10px 14px; border-top: 1px solid var(--m-border, #eef0f2); text-decoration: none; font-weight: 600; color: #008069 !important; }
.wa-drop .wa-perm { font-weight: 500; font-size: .85rem; color: var(--m-muted, #667781) !important; }
.wa-drop .wa-foot:hover, .wa-drop .wa-perm:hover { background: var(--m-hover, #f5f6f6); }
.wa-toast { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 10060; width: 340px; max-width: calc(100vw - 24px); background: var(--m-surface, #fff);
    border-radius: 12px; border-inline-start: 4px solid #25D366; box-shadow: 0 12px 34px rgba(0,0,0,.22); opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s; }
.wa-toast.in { opacity: 1; transform: none; }
.wa-toast .wa-tt b i { color: #25D366; }
.wa-toast .wa-tx { align-self: flex-start; color: var(--m-muted, #667781); font-size: 18px; line-height: 1; padding: 0 2px; }