/*
 * "Modern" theme — a refreshed look layered on top of the existing Tailwind markup.
 *
 * Every rule is scoped under :root[data-theme="modern"] (set by wwwroot/js/theme.js), so the
 * classic theme is completely unaffected. This is plain CSS rather than Tailwind source on
 * purpose: it re-skins the utility classes the pages already use (crisper blue accent,
 * gray → slate neutrals, square-ish corners, softer cards, dark sidebar) without touching
 * any page markup and without needing `npm run build:css`.
 *
 * Layout hooks used below (added in _SidebarLayout / _CustomerLayout):
 *   .app-sidebar  .app-header  .app-main  .app-footer
 */

:root[data-theme="modern"] {
    --m-accent-50:  #eff6ff;
    --m-accent-100: #dbeafe;
    --m-accent-200: #bfdbfe;
    --m-accent-300: #93c5fd;
    --m-accent-400: #60a5fa;
    --m-accent-500: #3b82f6;
    --m-accent-600: #2563eb;
    --m-accent-700: #1d4ed8;
    --m-accent-800: #1e40af;
    --m-accent-900: #1e3a8a;
    --m-accent-gradient: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);

    --m-ink-900: #0f172a;
    --m-ink-800: #1e293b;
    --m-ink-700: #334155;
    --m-ink-600: #475569;
    --m-ink-500: #64748b;
    --m-ink-400: #94a3b8;
    --m-ink-300: #cbd5e1;
    --m-line:    #e6eaf1;
    --m-line-soft: #eff2f7;
    --m-surface-muted: #f8fafc;
    --m-page: #f4f6f9;

    --m-sidebar-from: #0f172a;
    --m-sidebar-to:   #1e293b;
    --m-sidebar-line: rgba(255, 255, 255, 0.07);

    /* Square shapes with a slight rounding everywhere */
    --m-radius-sm: 4px;
    --m-radius: 6px;

    --m-shadow-card: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.14);
    --m-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.18);

    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--m-accent-600);
}

/* ─── Typography & page ─────────────────────────────────────────────────────── */

:root[data-theme="modern"],
:root[data-theme="modern"] body,
:root[data-theme="modern"] button,
:root[data-theme="modern"] input,
:root[data-theme="modern"] select,
:root[data-theme="modern"] textarea {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
}

:root[data-theme="modern"] body,
:root[data-theme="modern"] body.bg-gray-100,
:root[data-theme="modern"] body.bg-gray-50 {
    color: var(--m-ink-800);
    background-color: var(--m-page);
    background-image: radial-gradient(1100px 520px at 100% -10%, rgba(59, 130, 246, 0.07), transparent 60%);
    background-attachment: fixed;
}

:root[data-theme="modern"] ::selection {
    background: rgba(59, 130, 246, 0.2);
}

:root[data-theme="modern"] h1,
:root[data-theme="modern"] h2,
:root[data-theme="modern"] h3 {
    letter-spacing: -0.015em;
}

/* ─── Shape: square corners with a slight radius ────────────────────────────── */
/* rounded-full is left alone on purpose (status dots, spinners, toggle knobs). */

:root[data-theme="modern"] :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) {
    border-radius: var(--m-radius);
}
:root[data-theme="modern"] .rounded-sm { border-radius: var(--m-radius-sm); }

:root[data-theme="modern"] :is(.rounded-t, .rounded-t-md, .rounded-t-lg, .rounded-t-xl, .rounded-t-2xl) {
    border-top-left-radius: var(--m-radius);
    border-top-right-radius: var(--m-radius);
}
:root[data-theme="modern"] :is(.rounded-b, .rounded-b-md, .rounded-b-lg, .rounded-b-xl, .rounded-b-2xl) {
    border-bottom-left-radius: var(--m-radius);
    border-bottom-right-radius: var(--m-radius);
}
:root[data-theme="modern"] :is(.rounded-l, .rounded-l-md, .rounded-l-lg, .rounded-l-xl, .rounded-l-2xl) {
    border-top-left-radius: var(--m-radius);
    border-bottom-left-radius: var(--m-radius);
}
:root[data-theme="modern"] :is(.rounded-r, .rounded-r-md, .rounded-r-lg, .rounded-r-xl, .rounded-r-2xl) {
    border-top-right-radius: var(--m-radius);
    border-bottom-right-radius: var(--m-radius);
}

/* User avatars: square tiles instead of circles */
:root[data-theme="modern"] .rounded-full.bg-gradient-to-br,
:root[data-theme="modern"] .app-sidebar .rounded-full:is(.bg-blue-100, .bg-violet-100) {
    border-radius: var(--m-radius);
}

/* ─── Neutral palette: gray → slate ─────────────────────────────────────────── */

:root[data-theme="modern"] .text-gray-900 { color: var(--m-ink-900); }
:root[data-theme="modern"] .text-gray-800 { color: var(--m-ink-800); }
:root[data-theme="modern"] .text-gray-700 { color: var(--m-ink-700); }
:root[data-theme="modern"] .text-gray-600 { color: var(--m-ink-600); }
:root[data-theme="modern"] .text-gray-500 { color: var(--m-ink-500); }
:root[data-theme="modern"] .text-gray-400 { color: var(--m-ink-400); }

:root[data-theme="modern"] .border-gray-100 { border-color: var(--m-line-soft); }
:root[data-theme="modern"] .border-gray-200 { border-color: var(--m-line); }
:root[data-theme="modern"] .border-gray-300 { border-color: #dbe1ea; }
:root[data-theme="modern"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--m-line-soft); }
:root[data-theme="modern"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--m-line); }

:root[data-theme="modern"] .bg-gray-50 { background-color: var(--m-surface-muted); }
:root[data-theme="modern"] .bg-gray-100 { background-color: #f1f4f8; }
:root[data-theme="modern"] .hover\:bg-gray-50:hover { background-color: #f4f7fc; }
:root[data-theme="modern"] .hover\:bg-gray-100:hover { background-color: #edf1f7; }

/* ─── Accent palette: crisper blue ──────────────────────────────────────────── */

:root[data-theme="modern"] .bg-blue-50  { background-color: var(--m-accent-50); }
:root[data-theme="modern"] .bg-blue-100 { background-color: var(--m-accent-100); }
:root[data-theme="modern"] .bg-blue-500 { background-color: var(--m-accent-500); }
:root[data-theme="modern"] .bg-blue-600 { background-color: var(--m-accent-600); }
:root[data-theme="modern"] .bg-blue-700 { background-color: var(--m-accent-700); }
:root[data-theme="modern"] .hover\:bg-blue-50:hover  { background-color: var(--m-accent-50); }
:root[data-theme="modern"] .hover\:bg-blue-100:hover { background-color: var(--m-accent-100); }
:root[data-theme="modern"] .hover\:bg-blue-700:hover { background-color: var(--m-accent-700); }

:root[data-theme="modern"] .text-blue-400 { color: var(--m-accent-400); }
:root[data-theme="modern"] .text-blue-500 { color: var(--m-accent-500); }
:root[data-theme="modern"] .text-blue-600 { color: var(--m-accent-600); }
:root[data-theme="modern"] .text-blue-700 { color: var(--m-accent-700); }
:root[data-theme="modern"] .text-blue-800 { color: var(--m-accent-800); }
:root[data-theme="modern"] .text-blue-900 { color: var(--m-accent-900); }
:root[data-theme="modern"] .hover\:text-blue-600:hover,
:root[data-theme="modern"] .hover\:text-blue-700:hover,
:root[data-theme="modern"] .hover\:text-primary:hover { color: var(--m-accent-600); }
:root[data-theme="modern"] .text-primary { color: var(--m-accent-600); }
:root[data-theme="modern"] .bg-primary { background-color: var(--m-accent-600); }

:root[data-theme="modern"] .border-blue-200 { border-color: var(--m-accent-200); }
:root[data-theme="modern"] .border-blue-300 { border-color: var(--m-accent-300); }
:root[data-theme="modern"] .border-blue-400 { border-color: var(--m-accent-400); }
:root[data-theme="modern"] .border-blue-500,
:root[data-theme="modern"] .border-blue-600 { border-color: var(--m-accent-500); }

:root[data-theme="modern"] .focus\:ring-blue-400:focus,
:root[data-theme="modern"] .focus\:ring-blue-500:focus,
:root[data-theme="modern"] .focus\:ring-primary:focus { --tw-ring-color: rgba(59, 130, 246, 0.35); }
:root[data-theme="modern"] .focus\:border-blue-500:focus { border-color: var(--m-accent-400); }

/* Gradients built from blue/indigo stops (avatars, notification header) — keep them blue */
:root[data-theme="modern"] .from-blue-500 { --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); }
:root[data-theme="modern"] .from-blue-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position); }
:root[data-theme="modern"] .to-blue-600,
:root[data-theme="modern"] .to-indigo-600 { --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); }
:root[data-theme="modern"] .to-blue-700 { --tw-gradient-to: #1e40af var(--tw-gradient-to-position); }

/* Violet / indigo (customer portal chrome, timelines) → the same blue, so no purple remains */
:root[data-theme="modern"] :is(.bg-violet-50, .bg-indigo-50, .hover\:bg-violet-50:hover) { background-color: var(--m-accent-50); }
:root[data-theme="modern"] :is(.bg-violet-100, .hover\:bg-violet-100:hover) { background-color: var(--m-accent-100); }
:root[data-theme="modern"] .bg-violet-200 { background-color: var(--m-accent-200); }
:root[data-theme="modern"] .bg-violet-300 { background-color: var(--m-accent-300); }
:root[data-theme="modern"] .bg-violet-400 { background-color: var(--m-accent-400); }
:root[data-theme="modern"] .bg-violet-500 { background-color: var(--m-accent-500); }
:root[data-theme="modern"] :is(.bg-violet-600, .bg-indigo-600) { background-color: var(--m-accent-600); }
:root[data-theme="modern"] :is(.hover\:bg-violet-700:hover, .hover\:bg-indigo-700:hover) { background-color: var(--m-accent-700); }
:root[data-theme="modern"] :is(.text-violet-100) { color: var(--m-accent-100); }
:root[data-theme="modern"] :is(.text-violet-200) { color: var(--m-accent-200); }
:root[data-theme="modern"] :is(.text-violet-300) { color: var(--m-accent-300); }
:root[data-theme="modern"] :is(.text-violet-400, .text-indigo-400) { color: var(--m-accent-400); }
:root[data-theme="modern"] :is(.text-violet-500, .text-indigo-500) { color: var(--m-accent-500); }
:root[data-theme="modern"] :is(.text-violet-600, .text-indigo-600, .hover\:text-violet-600:hover) { color: var(--m-accent-600); }
:root[data-theme="modern"] :is(.text-violet-700, .text-indigo-700) { color: var(--m-accent-700); }
:root[data-theme="modern"] :is(.text-violet-800, .text-indigo-800) { color: var(--m-accent-800); }
:root[data-theme="modern"] :is(.border-violet-100, .border-indigo-100) { border-color: var(--m-accent-100); }
:root[data-theme="modern"] :is(.border-violet-200, .border-indigo-200) { border-color: var(--m-accent-200); }
:root[data-theme="modern"] :is(.border-violet-300, .border-indigo-300) { border-color: var(--m-accent-300); }
:root[data-theme="modern"] :is(.border-violet-500, .border-indigo-500) { border-color: var(--m-accent-500); }
:root[data-theme="modern"] .ring-violet-50 { --tw-ring-color: var(--m-accent-50); }
:root[data-theme="modern"] .shadow-violet-200 { --tw-shadow-color: var(--m-accent-200); }
:root[data-theme="modern"] .from-violet-500 { --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); }
:root[data-theme="modern"] .from-violet-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position); }
:root[data-theme="modern"] :is(.to-violet-600, .to-violet-700) { --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); }
:root[data-theme="modern"] .app-sidebar svg rect[fill="#7c3aed"] { fill: #2563eb; }

/* ─── Cards & surfaces ──────────────────────────────────────────────────────── */

/* Soft layered shadow + hairline ring replaces the flat Tailwind shadow on content cards */
:root[data-theme="modern"] :is(div, section, article, form).bg-white:is(.shadow, .shadow-sm, .shadow-md) {
    box-shadow: var(--m-shadow-card);
}

/* Elevated surfaces (dropdowns, modals) — deeper, softer shadow */
:root[data-theme="modern"] .bg-white:is(.shadow-lg, .shadow-xl, .shadow-2xl):not(.app-sidebar) {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 20px 40px -16px rgba(15, 23, 42, 0.28);
}

/* Modal backdrops: tinted slate + blur */
:root[data-theme="modern"] :is(.bg-black\/40, .bg-black\/50, .bg-black.bg-opacity-50, .bg-gray-900.bg-opacity-50, .bg-gray-600.bg-opacity-50, .bg-gray-500.bg-opacity-75) {
    background-color: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */

:root[data-theme="modern"] table thead th {
    color: var(--m-ink-500);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

:root[data-theme="modern"] table thead:is(.bg-gray-50, .bg-gray-100),
:root[data-theme="modern"] table thead tr:is(.bg-gray-50, .bg-gray-100) {
    background-color: var(--m-surface-muted);
}

:root[data-theme="modern"] table tbody tr {
    transition: background-color 0.15s ease;
}

/* ─── Form controls ─────────────────────────────────────────────────────────── */

:root[data-theme="modern"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

:root[data-theme="modern"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):not(.bg-transparent):hover:not(:focus):not(:disabled) {
    border-color: #c5cdda;
}

:root[data-theme="modern"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):not(.bg-transparent):focus {
    border-color: var(--m-accent-500);
    box-shadow: var(--m-focus-ring);
    outline: none;
}

:root[data-theme="modern"] ::placeholder {
    color: var(--m-ink-400);
}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */

:root[data-theme="modern"] :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-primary, .btn-primary) {
    background-image: var(--m-accent-gradient);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="modern"] :is(button, a, input[type="submit"]).bg-green-600 {
    background-color: #059669;
    background-image: linear-gradient(180deg, #10b981 0%, #059669 100%);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="modern"] :is(button, a, input[type="submit"]).bg-red-600 {
    background-color: #dc2626;
    background-image: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="modern"] :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-primary, .btn-primary, .bg-green-600, .bg-red-600) {
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}

:root[data-theme="modern"] :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-primary, .btn-primary, .bg-green-600, .bg-red-600):hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root[data-theme="modern"] :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-primary, .btn-primary, .bg-green-600, .bg-red-600):active:not(:disabled) {
    filter: brightness(0.96);
}

:root[data-theme="modern"] :is(button, a):focus-visible {
    outline: 2px solid var(--m-accent-500);
    outline-offset: 2px;
}

/* ─── Scrollbars ────────────────────────────────────────────────────────────── */

:root[data-theme="modern"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="modern"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="modern"] ::-webkit-scrollbar-thumb {
    background-color: #cfd6e2;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}
:root[data-theme="modern"] ::-webkit-scrollbar-thumb:hover { background-color: #aab4c5; }

/* ─── Layout chrome: header, main, footer ───────────────────────────────────── */

:root[data-theme="modern"] .app-header {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--m-line);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

:root[data-theme="modern"] .app-header h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--m-ink-900);
}

:root[data-theme="modern"] .app-main,
:root[data-theme="modern"] .app-main.bg-gray-100 {
    background-color: transparent;
}

:root[data-theme="modern"] .app-footer {
    background-color: transparent;
    border-top-color: var(--m-line);
}

/* ─── Sidebar (dark) ────────────────────────────────────────────────────────── */

:root[data-theme="modern"] .app-sidebar {
    background-color: var(--m-sidebar-from);
    background-image:
        radial-gradient(420px 260px at 0% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
        linear-gradient(180deg, var(--m-sidebar-from) 0%, var(--m-sidebar-to) 100%);
    border-right-color: transparent;
    box-shadow: 4px 0 24px -12px rgba(15, 23, 42, 0.5);
    color: #cbd5e1;
}

:root[data-theme="modern"] .app-sidebar :is(.border-b, .border-t, .border-gray-100, .border-gray-200, .border-violet-100) {
    border-color: var(--m-sidebar-line);
}

:root[data-theme="modern"] .app-sidebar .text-gray-900 { color: #f8fafc; }
:root[data-theme="modern"] .app-sidebar .text-gray-800,
:root[data-theme="modern"] .app-sidebar .text-gray-700 { color: #cbd5e1; }
:root[data-theme="modern"] .app-sidebar .text-gray-600 { color: #94a3b8; }
:root[data-theme="modern"] .app-sidebar .text-gray-500,
:root[data-theme="modern"] .app-sidebar .text-gray-400 { color: #7b879c; }

/* Brand mark */
:root[data-theme="modern"] .app-sidebar svg rect[fill] { fill: #2563eb; }

/* Avatar tile */
:root[data-theme="modern"] .app-sidebar .rounded-full:is(.bg-blue-100, .bg-violet-100) {
    background-color: transparent;
    background-image: var(--m-accent-gradient);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
:root[data-theme="modern"] .app-sidebar .rounded-full:is(.bg-blue-100, .bg-violet-100) > svg { color: #ffffff; }

/* Menu skeleton & inline search box */
:root[data-theme="modern"] .app-sidebar .bg-gray-100 { background-color: rgba(255, 255, 255, 0.06); }
:root[data-theme="modern"] .app-sidebar .bg-white {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: none;
}
:root[data-theme="modern"] .app-sidebar input,
:root[data-theme="modern"] .app-sidebar input:focus { color: #e2e8f0; box-shadow: none; }

/* Menu items */
:root[data-theme="modern"] .app-sidebar nav :is(a, button) {
    border-radius: var(--m-radius);
}
:root[data-theme="modern"] .app-sidebar :is(.hover\:bg-blue-50, .hover\:bg-violet-50, .hover\:bg-blue-100):hover {
    background-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="modern"] .app-sidebar :is(.hover\:text-blue-600, .hover\:text-violet-600, .hover\:text-gray-600):hover {
    color: #ffffff;
}
:root[data-theme="modern"] .app-sidebar :is(.bg-blue-50, .bg-violet-50).text-blue-600,
:root[data-theme="modern"] .app-sidebar :is(.bg-blue-50, .bg-violet-50).text-violet-600 {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Active item: solid blue block (wins over the hover tint) */
:root[data-theme="modern"] .app-sidebar a:is(.bg-blue-100.text-blue-700, .bg-violet-100.text-violet-700),
:root[data-theme="modern"] .app-sidebar a:is(.bg-blue-100.text-blue-700, .bg-violet-100.text-violet-700):hover {
    background-color: transparent;
    background-image: var(--m-accent-gradient);
    color: #ffffff;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Submenu: indented with a guide line */
:root[data-theme="modern"] .app-sidebar ul.ml-8 {
    margin-left: 1.55rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--m-sidebar-line);
}

/* Collapsed-sidebar flyout */
:root[data-theme="modern"] .app-sidebar .hover-dropdown {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: var(--m-radius);
    box-shadow: 0 20px 40px -16px rgba(2, 6, 23, 0.7);
}
:root[data-theme="modern"] .app-sidebar .hover-dropdown .text-gray-900 { color: #f8fafc; }
:root[data-theme="modern"] .app-sidebar .hover-dropdown a:hover { color: #ffffff; }

/* Menu search highlight (original uses !important) */
:root[data-theme="modern"] .app-sidebar .menu-search-match {
    background-color: rgba(250, 204, 21, 0.16) !important;
    color: #fde68a !important;
}

/* Thin sidebar scrollbar */
:root[data-theme="modern"] .app-sidebar .sidebar-scrollbar::-webkit-scrollbar { width: 4px; }
:root[data-theme="modern"] .app-sidebar .sidebar-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.14);
    border: 0;
}

/* ─── Auth pages (Login / Forgot / Reset / Change password) ────────────────── */
/* Those pages carry inline brand colours, hence the !important overrides. */

:root[data-theme="modern"] body.auth-page {
    background:
        radial-gradient(800px 500px at 15% 10%, rgba(59, 130, 246, 0.28), transparent 60%),
        radial-gradient(700px 500px at 90% 90%, rgba(14, 165, 233, 0.18), transparent 60%),
        linear-gradient(135deg, #0f172a 0%, #172554 60%, #1e3a8a 100%) !important;
    background-attachment: fixed !important;
}

:root[data-theme="modern"] body.auth-page > div > div.rounded-xl {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -24px rgba(2, 6, 23, 0.65);
}

:root[data-theme="modern"] body.auth-page [style*="linear-gradient(to right"] {
    background:
        radial-gradient(500px 320px at 20% 15%, rgba(147, 197, 253, 0.28), transparent 65%),
        linear-gradient(150deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%) !important;
}

:root[data-theme="modern"] body.auth-page svg circle[fill="#1976d2"] { fill: #2563eb; }

:root[data-theme="modern"] body.auth-page button[style*="background-color"] {
    background-image: var(--m-accent-gradient) !important;
    border-radius: var(--m-radius);
    box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.75);
    transition: filter 0.15s ease;
}
:root[data-theme="modern"] body.auth-page button[style*="background-color"]:hover:not(:disabled) {
    filter: brightness(1.06);
}

:root[data-theme="modern"] body.auth-page a[style*="color"] { color: var(--m-accent-600) !important; }

:root[data-theme="modern"] body.auth-page :is(input:not([type="checkbox"]):not([type="radio"])) {
    border-radius: var(--m-radius);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* ─── Theme switcher control itself ─────────────────────────────────────────── */

:root[data-theme="modern"] .ts-trigger:hover { background-color: #edf1f7; color: var(--m-accent-600); }