/* --- Monochromatic Theme --- */
/* Uses various tones, shades, and tints of a single hue (slate gray) */
/* Clean, sophisticated, and unified look between light and dark */

:root.theme-mono {
    /* Core Palette - Pure Slate */
    --mono-50: #f8fafc;
    --mono-100: #f1f5f9;
    --mono-200: #e2e8f0;
    --mono-300: #cbd5e1;
    --mono-400: #94a3b8;
    --mono-500: #64748b;
    --mono-600: #475569;
    --mono-700: #334155;
    --mono-800: #1e293b;
    --mono-900: #0f172a;
    --mono-950: #020617;
    
    /* Theme Variables Mapped - Mid-tone base */
    --title: var(--mono-700);
    --body: var(--mono-100);
    --htitle: var(--mono-800);
    --hbody: var(--mono-50);
    --table-row: #ffffff;
    --table-row-hover: var(--mono-100);
    --primal: var(--mono-600);
    --primal_dark: var(--mono-800);
    --primal-rgb: 71, 85, 105;
    --btn-primary-shadow: rgba(71, 85, 105, 0.3);
    --nav-item-color: var(--mono-600);
    color-scheme: light;

    /* Bootstrap Overrides with Slate */
    --bs-primary: var(--mono-600);
    --bs-primary-rgb: var(--primal-rgb);
    --bs-btn-bg: var(--mono-600);
    --bs-btn-border-color: var(--mono-600);
    --bs-btn-hover-bg: var(--mono-700);
    --bs-btn-hover-border-color: var(--mono-700);
    --bs-link-color: var(--mono-600);
    --bs-link-hover-color: var(--mono-800);
    --bs-body-bg: var(--mono-100);
    --bs-body-color: var(--title);

    /* Login Theme Variables */
    --bg-gradient: linear-gradient(135deg, var(--mono-100) 0%, var(--mono-200) 100%);
    --right-bg: var(--title);
    --primary-color: var(--mono-600);
    
    /* Setup Builder Theme Tokens - Monochrome Edition */
    --ms-setup-shell-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
    --ms-setup-shell-border: rgba(203, 213, 225, 0.6);
    --ms-setup-card-bg: rgba(255, 255, 255, 0.9);
    --ms-setup-card-border: rgba(203, 213, 225, 0.5);
    --ms-setup-pane-bg: rgba(241, 245, 249, 0.7);
    --ms-setup-pane-border: rgba(203, 213, 225, 0.4);
    --ms-setup-item-bg: rgba(255, 255, 255, 0.95);
    --ms-setup-item-border: rgba(203, 213, 225, 0.6);
    --ms-setup-item-hover-bg: rgba(71, 85, 105, 0.04);
    --ms-setup-item-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --ms-setup-item-active-bg: rgba(71, 85, 105, 0.06);
    --ms-setup-item-active-ring: rgba(71, 85, 105, 0.15);
    --ms-setup-tree-bg: linear-gradient(180deg, rgba(241, 245, 249, 0.95), rgba(248, 250, 252, 0.95));
    --ms-setup-tree-accent: rgba(71, 85, 105, 0.18);
    --ms-setup-connector: rgba(148, 163, 184, 0.4);
    --ms-setup-badge-bg: rgba(71, 85, 105, 0.1);
    --ms-setup-badge-color: var(--mono-700);
    --ms-setup-text: var(--title);
    --ms-setup-muted: var(--mono-500);
    --ms-table-header-surface: linear-gradient(180deg, rgba(71, 85, 105, 0.055), rgba(255, 255, 255, 0.985));
    --ms-table-border-strong: rgba(71, 85, 105, 0.2);
    --ms-table-row-odd: rgba(251, 252, 254, 0.98);
    --ms-table-row-even: rgba(241, 245, 249, 0.98);
    --ms-table-row-hover: rgba(225, 232, 240, 0.98);
}

/* Subtle texture overlay for sophistication */
:root.theme-mono::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 100% 0%, rgba(148, 163, 184, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, rgba(100, 116, 139, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Force options to inherit mono theme colors */
:root.theme-mono select option {
    background-color: #ffffff;
    color: var(--title);
}

/* --- Global Elements with Pure Slate --- */

/* 1. Global, Cards & Modals - Clean Panels */
:root.theme-mono .card:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-mono .card-body:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-mono .dashboard-card:not([class*="text-bg-"]):not([class*="bg-"]), 
:root.theme-mono .option-section:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-mono .list-group-item:not([class*="text-bg-"]):not([class*="bg-"]):not(.active),
:root.theme-mono .modal-content,
:root.theme-mono .chart-container-sys {
    background-color: #ffffff !important;
    color: var(--title) !important;
    /* border: 1px solid var(--mono-200) !important; */
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

:root.theme-mono .card:hover,
:root.theme-mono .dashboard-card:hover {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    border-color: var(--mono-300) !important;
}

:root.theme-mono .card.ms-table-card:not([class*="text-bg-"]):not([class*="bg-"]),
:root.theme-mono .card.ms-table-card > .card-body:not([class*="text-bg-"]):not([class*="bg-"]) {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:root.theme-mono .card.ms-table-card:hover,
:root.theme-mono .card.ms-table-card:hover > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Selective Border Coloring */
:root.theme-mono .card:not([class*="border-"]),
:root.theme-mono .card-body:not([class*="border-"]),
:root.theme-mono .dashboard-card:not([class*="border-"]),
:root.theme-mono .list-group-item:not([class*="border-"]),
:root.theme-mono .modal-content:not([class*="border-"]),
:root.theme-mono .chart-container-sys:not([class*="border-"]) {
    border-color: var(--mono-200) !important;
}

/* Chart Fix */
:root.theme-mono .chart-container-sys {
    background-color: transparent !important;
    border-color: var(--mono-300) !important;
    box-shadow: none !important;
}

:root.theme-mono .list-group-item.bg-transparent {
    background-color: transparent !important;
}

/* Sidebar - Minimal Edition */
:root.theme-mono #sidebar {
    background: linear-gradient(180deg, var(--mono-50) 0%, #ffffff 100%) !important;
    border-left: 1px solid var(--mono-200) !important;
    box-shadow: -2px 0 12px rgba(15, 23, 42, 0.04) !important;
}

:root.theme-mono .text-muted,
:root.theme-mono .text-secondary {
    color: var(--mono-500) !important;
}

:root.theme-mono .bg-light {
    background-color: var(--mono-50) !important;
    border-color: var(--mono-200) !important;
}

:root.theme-mono .bg-white {
    background-color: #ffffff !important;
    color: var(--title) !important;
}

:root.theme-mono .border-white {
    border-color: var(--mono-200) !important;
}

/* 2. Titlebar - Clean Header */
:root.theme-mono .titlebar {
    background: linear-gradient(90deg, #ffffff 0%, var(--mono-50) 100%) !important;
    border-bottom: 1px solid var(--mono-200) !important;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.03) !important;
}

:root.theme-mono .titlebar p,
:root.theme-mono .titlebar .btn-light,
:root.theme-mono .titlebar .btn-light .bi {
    color: var(--mono-700) !important;
}

:root.theme-mono .titlebar .btn-light:hover {
    background-color: var(--mono-100) !important;
    color: var(--mono-900) !important;
}

/* 3. Forms & Inputs - Minimal Fields */
:root.theme-mono .microsys-form,
:root.theme-mono .archive-document-form,
:root.theme-mono .microsys-filter {
    --archive-form-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    --archive-form-border: var(--mono-200);
    --archive-form-border-strong: var(--mono-400);
    --archive-form-focus-ring: rgba(71, 85, 105, 0.12);
    --archive-form-muted: var(--mono-500);
}

:root.theme-mono .form-control,
:root.theme-mono .form-select,
:root.theme-mono .input-group-text {
    background-color: #ffffff !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

:root.theme-mono .form-control:focus,
:root.theme-mono .form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--mono-500) !important;
    color: var(--mono-900) !important;
    box-shadow: 0 0 0 0.2rem rgba(71, 85, 105, 0.1) !important;
    outline: none !important;
}

/* 4. Tables - Clean Data Grid */
:root.theme-mono .table {
    color: var(--title) !important;
    --bs-table-color: var(--title) !important;
    --bs-table-striped-color: var(--title) !important;
    --bs-table-active-color: var(--title) !important;
}

:root.theme-mono .table thead th {
    background: var(--ms-table-header-surface) !important;
    color: var(--mono-800) !important;
    border-color: var(--mono-200) !important;
    border-bottom: 2px solid var(--mono-400) !important;
    font-weight: 600 !important;
}

:root.theme-mono .table>tbody>tr:nth-child(odd)>td, 
:root.theme-mono .table>tbody>tr:nth-child(odd)>th {
    --bs-table-bg-type: #ffffff !important; 
    background-color: #ffffff !important;
    color: var(--htitle) !important;
}

:root.theme-mono .table>tbody>tr:nth-child(even)>td, 
:root.theme-mono .table>tbody>tr:nth-child(even)>th {
    --bs-table-bg-type: var(--mono-50) !important;
    background-color: var(--mono-50) !important;
    color: var(--htitle) !important;
}

:root.theme-mono .table>tbody>tr:hover>td,
:root.theme-mono .table>tbody>tr:hover>th {
    background-color: var(--mono-100) !important;
}

/* 5. Dropdowns - Clean Menu */
:root.theme-mono .dropdown-menu {
    background-color: #ffffff !important;
    border-color: var(--mono-200) !important;
    border: 1px solid var(--mono-200) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

:root.theme-mono .dropdown-item {
    color: var(--title) !important;
}

:root.theme-mono .dropdown-item:hover,
:root.theme-mono .dropdown-item:focus,
:root.theme-mono .dropdown-item:active,
:root.theme-mono .dropdown-item.active {
    background-color: var(--mono-100) !important;
    color: var(--mono-800) !important;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.1) !important;
    text-shadow: none !important;
}

:root.theme-mono .dropdown-item:hover i,
:root.theme-mono .dropdown-item:focus i,
:root.theme-mono .dropdown-item:active i,
:root.theme-mono .dropdown-item.active i {
    color: var(--mono-700) !important;
    opacity: 1 !important;
}

/* 6. Buttons - Minimal Primary */
:root.theme-mono .btn-primary, 
:root.theme-mono .btn-primary:hover,
:root.theme-mono .btn-primary:active,
.theme-mono .btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, var(--mono-100) 100%) !important;
    border-color: var(--mono-400) !important;
    color: var(--mono-900) !important;
    font-weight: 500 !important;
}

:root.theme-mono .btn-primary *,
.theme-mono .btn-primary * {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

:root.theme-mono .btn-primary:hover {
    background: linear-gradient(135deg, var(--mono-50) 0%, var(--mono-200) 100%) !important;
    border-color: var(--mono-500) !important;
    color: var(--mono-950) !important;
    box-shadow: 0 2px 12px rgba(71, 85, 105, 0.16) !important;
}

:root.theme-mono .btn-primary:focus,
:root.theme-mono .btn-primary:active,
:root.theme-mono .btn-primary.active,
.theme-mono .btn-primary:focus,
.theme-mono .btn-primary:active,
.theme-mono .btn-primary.active {
    background: linear-gradient(135deg, var(--mono-100) 0%, var(--mono-200) 100%) !important;
    border-color: var(--mono-500) !important;
    color: var(--mono-950) !important;
    box-shadow: 0 0 0 0.18rem rgba(71, 85, 105, 0.16) !important;
}

:root.theme-mono .microsys-filter .microsys-filter-action.btn-primary > .bi,
.theme-mono .microsys-filter .microsys-filter-action.btn-primary > .bi {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Soft button text fix */
:root.theme-mono .btn-secondary,
:root.theme-mono .btn-success,
:root.theme-mono .btn-info,
:root.theme-mono .btn-warning,
:root.theme-mono .btn-danger,
:root.theme-mono .btn-light {
    color: var(--mono-900) !important;
}

:root.theme-mono .btn-secondary .bi,
:root.theme-mono .btn-success .bi,
:root.theme-mono .btn-info .bi,
:root.theme-mono .btn-warning .bi,
:root.theme-mono .btn-danger .bi,
:root.theme-mono .btn-light .bi {
    color: inherit !important;
}

:root.theme-mono .microsys-filter .btn.microsys-filter-submit.btn-secondary {
    background:
        radial-gradient(circle at top, rgba(71, 85, 105, 0.08), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98)) !important;
    border-color: var(--mono-300) !important;
    color: var(--mono-800) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 8px 18px -16px rgba(15, 23, 42, 0.18) !important;
}

:root.theme-mono .microsys-filter .btn.microsys-filter-submit.btn-secondary i {
    color: var(--mono-800) !important;
}

/* 7. Sidebar Active State */
:root.theme-mono .sidebar,
.theme-mono .sidebar {
    --sidebar-divider-color: rgba(71, 85, 105, 0.055);
    --sidebar-hover-bg: rgba(71, 85, 105, 0.06);
    --sidebar-folder-bg: rgba(255, 255, 255, 0.52);
    --sidebar-folder-active-bg: rgba(71, 85, 105, 0.12);
    --sidebar-folder-active-edge: rgba(71, 85, 105, 0.95);
    --sidebar-root-active-bg: rgba(71, 85, 105, 0.08);
    --sidebar-active-color: var(--mono-800);
    --sidebar-active-underline: linear-gradient(90deg, transparent 0%, rgba(71, 85, 105, 0.12) 12%, rgba(71, 85, 105, 0.9) 50%, rgba(71, 85, 105, 0.12) 88%, transparent 100%);
    --sidebar-folder-indicator-bg: rgba(255, 255, 255, 0.72);
    --sidebar-folder-indicator-border: rgba(71, 85, 105, 0.16);
    --sidebar-guide-color: rgba(71, 85, 105, 0.12);
}

:root.theme-mono .sidebar .list-group-item,
:root.theme-mono .sidebar .accordion-button,
:root.theme-mono .sidebar .accordion-item,
:root.theme-mono .sidebar .accordion-body,
:root.theme-mono .sidebar .group-url-btn,
.theme-mono .sidebar .list-group-item,
.theme-mono .sidebar .accordion-button,
.theme-mono .sidebar .accordion-item,
.theme-mono .sidebar .accordion-body,
.theme-mono .sidebar .group-url-btn {
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:root.theme-mono .sidebar .sidebar-root-item.active,
:root.theme-mono .sidebar .sidebar-group-item.active,
.theme-mono .sidebar .sidebar-root-item.active,
.theme-mono .sidebar .sidebar-group-item.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mono-500) 0%, var(--mono-600) 100%) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.16) !important;
}

:root.theme-mono .sidebar .sidebar-root-item.active i,
:root.theme-mono .sidebar .sidebar-group-item.active i,
.theme-mono .sidebar .sidebar-root-item.active i,
.theme-mono .sidebar .sidebar-group-item.active i {
    color: #ffffff !important;
}

:root.theme-mono .sidebar .sidebar-root-item:not(.active):hover,
:root.theme-mono .sidebar .sidebar-group-item:not(.active):hover {
    background-color: var(--sidebar-hover-bg) !important;
    color: var(--mono-800) !important;
}

:root.theme-mono .sidebar .accordion-button:not(.collapsed),
.theme-mono .sidebar .accordion-button:not(.collapsed),
:root.theme-mono .sidebar.collapsed .accordion-button.has-active-child,
.theme-mono .sidebar.collapsed .accordion-button.has-active-child {
    color: var(--mono-900) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)),
        rgba(71, 85, 105, 0.055) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(71, 85, 105, 0.05) !important;
}

:root.theme-mono .sidebar .list-group-item::before,
:root.theme-mono .sidebar .accordion-button::before,
:root.theme-mono .sidebar .group-url-btn::before,
.theme-mono .sidebar .list-group-item::before,
.theme-mono .sidebar .accordion-button::before,
.theme-mono .sidebar .group-url-btn::before {
    height: 1px !important;
    background: rgba(148, 163, 184, 0.055) !important;
}

:root.theme-mono ::-webkit-scrollbar-track {
    background: var(--mono-100); 
}

:root.theme-mono ::-webkit-scrollbar-thumb {
    background: var(--mono-400) !important;
    border: 3px solid var(--mono-100);
    border-radius: 10px;
}

:root.theme-mono ::-webkit-scrollbar-thumb:hover {
    background: var(--mono-500) !important;
}

/* 8. Text Elements - Clean Typography */
:root.theme-mono h1, 
:root.theme-mono h2, 
:root.theme-mono h3, 
:root.theme-mono h4, 
:root.theme-mono h5, 
:root.theme-mono h6,
:root.theme-mono .header-title,
:root.theme-mono .stat-value,
:root.theme-mono .form-text,
:root.theme-mono .accordion-button,
:root.theme-mono label,
:root.theme-mono .form-label,
:root.theme-mono .titlebar p,
:root.theme-mono .card-title-sys,
.theme-mono h1, 
.theme-mono h2, 
.theme-mono h3, 
.theme-mono h4, 
.theme-mono h5, 
.theme-mono h6,
.theme-mono .header-title,
.theme-mono .stat-value,
.theme-mono .form-text,
.theme-mono .accordion-button,
.theme-mono label,
.theme-mono .form-label,
.theme-mono .titlebar p,
.theme-mono .card-title-sys {
    color: var(--mono-800) !important;
}

:root.theme-mono h1, 
:root.theme-mono h2, 
:root.theme-mono .page-title,
.theme-mono h1, 
.theme-mono h2, 
.theme-mono .page-title {
    font-weight: 700 !important;
}

:root.theme-mono .card-text-sys {
    color: var(--mono-600) !important;
}

/* 9. Glass Components - Clean Glass */
:root.theme-mono .glass-profile,
:root.theme-mono .glass-card,
:root.theme-mono .glass-detail {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--mono-200) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

:root.theme-mono .info-label,
:root.theme-mono .info-label-sm,
:root.theme-mono .form-label-custom {
    color: var(--mono-600) !important;
}

:root.theme-mono .info-value,
:root.theme-mono .info-value-lg,
:root.theme-mono .section-header,
:root.theme-mono .page-title {
    color: var(--mono-800) !important;
}

:root.theme-mono .form-control-glass {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

:root.theme-mono .form-control-glass:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mono-500) !important;
    box-shadow: 0 0 0 0.2rem rgba(71, 85, 105, 0.1) !important;
}

/* 10. Nav Tabs - Clean Tabs */
:root.theme-mono .nav-link {
    color: var(--mono-600) !important;
}

:root.theme-mono .nav-link:hover {
    color: var(--mono-800) !important;
}

:root.theme-mono .nav-link.active,
:root.theme-mono .nav-tabs .nav-link.active,
:root.theme-mono #decreeTabs .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mono-600) 0%, var(--mono-700) 100%) !important;
    border-color: var(--mono-600) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.2) !important;
    font-weight: 500 !important;
}

:root.theme-mono .nav-link.active i,
:root.theme-mono .nav-tabs .nav-link.active i,
:root.theme-mono #decreeTabs .nav-link.active i {
    color: #ffffff !important;
}

:root.theme-mono .modern-tabs .nav-link {
    border-color: var(--mono-300) !important;
    background: var(--mono-50);
}

:root.theme-mono .modern-tabs .nav-link:hover {
    background: var(--mono-100) !important;
    color: var(--mono-800) !important;
    border-color: var(--mono-400) !important;
}

:root.theme-mono .modern-tabs .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mono-600) 0%, var(--mono-700) 100%) !important;
    border-color: var(--mono-600) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.2) !important;
}

:root.theme-mono .btn[class*="btn-outline-"] {
    border-color: var(--mono-400) !important;
    color: var(--mono-800) !important;
}

:root.theme-mono .btn[class*="btn-outline-"]:hover,
:root.theme-mono .btn[class*="btn-outline-"]:focus,
:root.theme-mono .btn[class*="btn-outline-"]:active,
:root.theme-mono .btn[class*="btn-outline-"].active,
.theme-mono .btn[class*="btn-outline-"]:hover,
.theme-mono .btn[class*="btn-outline-"]:focus,
.theme-mono .btn[class*="btn-outline-"]:active,
.theme-mono .btn[class*="btn-outline-"].active,
:root.theme-mono .btn-check:checked + .btn,
.theme-mono .btn-check:checked + .btn {
    background: linear-gradient(135deg, var(--mono-50) 0%, var(--mono-200) 100%) !important;
    border-color: var(--mono-500) !important;
    color: var(--mono-950) !important;
}

:root.theme-mono .btn[class*="btn-outline-"] *,
:root.theme-mono .btn-check:checked + .btn *,
.theme-mono .btn[class*="btn-outline-"] *,
.theme-mono .btn-check:checked + .btn * {
    color: inherit !important;
}

/* 11. Reports & Gen Report - Clean */
:root.theme-mono .glass-container,
:root.theme-mono .report-stat-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--mono-200) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

:root.theme-mono .filter-label, 
:root.theme-mono .stat-title {
    color: var(--mono-600) !important;
}

:root.theme-mono .glass-input {
    background-color: #ffffff !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

/* 12. Alerts - Clean Notifications */
:root.theme-mono .alert-success {
    background-color: var(--mono-100) !important;
    border-color: var(--mono-400) !important;
    color: var(--mono-700) !important;
}

:root.theme-mono .alert-warning {
    background-color: #fefce8 !important;
    border-color: #eab308 !important;
    color: #854d0e !important;
}

:root.theme-mono .alert-danger {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

:root.theme-mono .alert-info {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

/* 13. Pagination - Clean Navigation */
:root.theme-mono .pagination .page-link {
    background-color: #ffffff !important;
    border-color: var(--mono-200) !important;
    color: var(--mono-600) !important;
}

:root.theme-mono .pagination .page-link:hover {
    background-color: var(--mono-100) !important;
    border-color: var(--mono-300) !important;
    color: var(--mono-800) !important;
}

:root.theme-mono .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--mono-600) 0%, var(--mono-700) 100%) !important;
    border-color: var(--mono-600) !important;
    color: #ffffff !important;
}

:root.theme-mono .pagination .page-item.disabled .page-link {
    background-color: var(--mono-100) !important;
    border-color: var(--mono-200) !important;
    color: var(--mono-400) !important;
}

/* 14. Badges - Clean Indicators */
:root.theme-mono .badge.bg-primary {
    background: linear-gradient(135deg, var(--mono-600) 0%, var(--mono-700) 100%) !important;
    color: #ffffff !important;
}

:root.theme-mono .badge.bg-success {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

:root.theme-mono .badge.bg-warning {
    background-color: #eab308 !important;
    color: #ffffff !important;
}

:root.theme-mono .badge.bg-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* 15. File Input */
:root.theme-mono input[type="file"].form-control {
    background-color: #ffffff !important;
    color: var(--title) !important;
    border-color: var(--mono-300) !important;
}

:root.theme-mono input[type="file"]::file-selector-button {
    background-color: var(--mono-100) !important;
    color: var(--mono-700) !important;
    border: none !important;
    border-right: 1px solid var(--mono-300) !important;
}

/* 16. Sidebar Tooltip */
:root.theme-mono .tooltip-custom .tooltip-inner {
    background-color: var(--mono-800) !important;
    color: #ffffff !important;
    border: 1px solid var(--mono-700) !important;
}

/* 17. Permissions Card */
:root.theme-mono .permissions-card-header {
    background-color: var(--mono-100) !important;
    color: var(--mono-800) !important;
    border-bottom: 1px solid var(--mono-200) !important;
}

:root.theme-mono .form-check-input:checked {
    background-color: var(--mono-600) !important;
    border-color: var(--mono-600) !important;
}

:root.theme-mono .permissions-card-header h5.app-title {
    color: var(--mono-800) !important;
}

:root.theme-mono .permissions-card-body {
    background-color: #ffffff !important;
    color: var(--title) !important;
}

:root.theme-mono .model-group {
    background-color: var(--mono-50) !important;
    border: 1px solid var(--mono-200) !important;
}

:root.theme-mono .model-header {
    background-color: var(--mono-100) !important;
    border-bottom: 1px solid var(--mono-200) !important;
    color: var(--mono-800) !important;
}

:root.theme-mono .model-title {
    color: var(--title) !important;
}

:root.theme-mono .model-permissions {
    background-color: #ffffff !important;
}

:root.theme-mono .permission-item:hover {
    background-color: var(--mono-100) !important;
}

:root.theme-mono .permissions-card-footer {
    background-color: var(--mono-50) !important;
    border-top: 1px solid var(--mono-200) !important;
}

/* 18. Login Screen - Clean */
:root.theme-mono .page .left {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--mono-200) !important;
    box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.06) !important;
}

:root.theme-mono .page .right {
    background: linear-gradient(135deg, var(--mono-50) 0%, var(--mono-100) 100%) !important;
    color: var(--mono-700) !important;
}

:root.theme-mono .page label {
    color: var(--mono-700) !important;
}

:root.theme-mono .page input {
    background: #ffffff !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

:root.theme-mono .page input:focus {
    background: #ffffff !important;
    border-color: var(--mono-500) !important;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1) !important;
}

/* 19. Progress Bars */
:root.theme-mono .progress-bar {
    background: linear-gradient(90deg, var(--mono-600) 0%, var(--mono-700) 100%) !important;
}

/* 20. Theme Preview */
:root.theme-mono .theme-preview.active {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--mono-600) !important;
}

/* 21. User Hub, Activity, Tutorial, and System Settings */
:root.theme-mono .ms-user-trigger {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96)) !important;
    border-color: var(--mono-300) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

:root.theme-mono .ms-user-trigger:hover,
:root.theme-mono .ms-user-dropdown-card,
:root.theme-mono .stats-card,
:root.theme-mono .timeline-content,
:root.theme-mono .driver-popover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)) !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

:root.theme-mono .ms-user-dropdown-card,
:root.theme-mono .driver-popover {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

:root.theme-mono .ms-dropdown-header,
:root.theme-mono #activityLogDetailModal .modal-footer,
:root.theme-mono #activityLogDetailModal .modal-header {
    border-color: var(--mono-200) !important;
}

:root.theme-mono .ms-dropdown-toolbar,
:root.theme-mono .completeness-container,
:root.theme-mono .glass-profile .bg-light.border,
:root.theme-mono .glass-card .bg-light.border,
:root.theme-mono #activityLogDetailModal .bg-light,
:root.theme-mono #backupCodesModal .alert.alert-warning,
:root.theme-mono #otpSetupSuccess .alert.alert-warning {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98)) !important;
    border-color: var(--mono-300) !important;
    color: var(--title) !important;
}

:root.theme-mono .ms-user-role,
:root.theme-mono #activityLogDetailModal .badge.bg-secondary {
    background: rgba(71, 85, 105, 0.1) !important;
    color: var(--mono-700) !important;
    border: 1px solid rgba(71, 85, 105, 0.18) !important;
}

:root.theme-mono .ms-tool-btn,
:root.theme-mono .ms-avatar-preview.bg-light {
    background: #ffffff !important;
    border-color: var(--mono-300) !important;
    color: var(--mono-700) !important;
}

:root.theme-mono .ms-tool-btn:hover,
:root.theme-mono .driver-popover-prev-btn:hover {
    background: var(--mono-100) !important;
    border-color: var(--mono-400) !important;
    color: var(--mono-800) !important;
}

:root.theme-mono .ms-avatar-preview,
:root.theme-mono .ms-trigger-avatar,
:root.theme-mono .profile-img-container,
:root.theme-mono .preview-img,
:root.theme-mono .ms-image-preview-circle {
    border-color: var(--mono-300) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

:root.theme-mono .stats-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1) !important;
}

:root.theme-mono .stats-value,
:root.theme-mono .stats-icon,
:root.theme-mono #activityLogDetailModal .modal-title,
:root.theme-mono #activityLogDetailModal h6,
:root.theme-mono #activityLogDetailModal .text-secondary,
:root.theme-mono .driver-popover-title {
    color: var(--mono-800) !important;
}

:root.theme-mono .stats-label,
:root.theme-mono .timeline-time,
:root.theme-mono .driver-popover-progress-text,
:root.theme-mono .driver-popover-close-btn,
:root.theme-mono .text-white-50 {
    color: var(--mono-500) !important;
}

:root.theme-mono .activity-timeline {
    border-color: var(--mono-300) !important;
}

:root.theme-mono .timeline-title,
:root.theme-mono .driver-popover-description {
    color: var(--title) !important;
}

:root.theme-mono .timeline-dot {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.16) !important;
}

:root.theme-mono .progress-custom {
    background-color: var(--mono-200) !important;
}

:root.theme-mono .activitylog-page-card,
:root.theme-mono #activityLogDetailModal .table-responsive {
    background: transparent !important;
}

:root.theme-mono .ms-tooltip {
    --ms-tooltip-bg: rgba(15, 23, 42, 0.94);
    --ms-tooltip-color: #ffffff;
    --ms-tooltip-border: var(--mono-700);
    background: rgba(15, 23, 42, 0.94) !important;
    color: #ffffff !important;
    border-color: var(--mono-700) !important;
}

:root.theme-mono .driver-popover-next-btn {
    background: linear-gradient(90deg, var(--mono-700), var(--mono-600)) !important;
    border-color: var(--mono-700) !important;
    color: #ffffff !important;
}

:root.theme-mono .driver-popover-next-btn:hover {
    background: linear-gradient(90deg, var(--mono-800), var(--mono-700)) !important;
}

:root.theme-mono .driver-popover-prev-btn {
    background: #ffffff !important;
    color: var(--mono-700) !important;
    border-color: var(--mono-300) !important;
}

:root.theme-mono .driver-popover-close-btn:hover {
    color: var(--mono-800) !important;
}

:root.theme-mono .driver-popover-arrow {
    color: rgba(255, 255, 255, 0.98) !important;
}

:root.theme-mono .text-bg-primary,
:root.theme-mono .badge.text-bg-primary,
:root.theme-mono .ms-system-settings-shell .text-bg-primary {
    background: linear-gradient(135deg, var(--mono-700) 0%, var(--mono-600) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(71, 85, 105, 0.24) !important;
    text-shadow: none !important;
}

:root.theme-mono .sidebar-toolbar {
    border-top-color: rgba(203, 213, 225, 0.72) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08)),
        linear-gradient(to top, rgba(71, 85, 105, 0.12), rgba(248, 250, 252, 0.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 -10px 20px rgba(15, 23, 42, 0.08) !important;
}

:root.theme-mono .sidebar-toolbar::before {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.34)),
        repeating-linear-gradient(
            90deg,
            rgba(71, 85, 105, 0.035) 0 1px,
            transparent 1px 24px
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

:root.theme-mono .sidebar-toolbar-link,
:root.theme-mono .reorder-toggle {
    color: var(--mono-600) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 5px 14px rgba(15, 23, 42, 0.08) !important;
}

:root.theme-mono .sidebar-toolbar-link:hover,
:root.theme-mono .reorder-toggle:hover,
:root.theme-mono .reorder-toggle.active {
    color: var(--mono-800) !important;
    background:
        radial-gradient(circle at top, rgba(71, 85, 105, 0.12), transparent 70%),
        rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
}

:root.theme-mono .theme-arrow {
    color: var(--mono-700) !important;
}

:root.theme-mono .current-theme-indicator {
    border-color: rgba(71, 85, 105, 0.34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 6px 14px rgba(15, 23, 42, 0.1) !important;
}

:root.theme-mono .theme-popup {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: var(--mono-800) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

:root.theme-mono .theme-popup .small {
    color: var(--mono-700) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

:root.theme-mono .theme-option-circle {
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.12) !important;
}

:root.theme-mono .theme-option-circle.active {
    border-color: var(--mono-700) !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--mono-700) !important;
}


/* 22. Tutorial Controls Bar */
:root.theme-mono #tutorial-controls {
    --tut-bar-bg: rgba(255, 255, 255, 0.98);
    --tut-bar-border: var(--mono-200);
    --tut-bar-shadow: rgba(15, 23, 42, 0.06);
    --tut-progress-color: var(--mono-600);
    --tut-next-bg: linear-gradient(135deg, var(--mono-600), var(--mono-700));
    --tut-next-bg-hover: linear-gradient(135deg, var(--mono-700), var(--mono-800));
    --tut-next-color: #fff;
    --tut-next-shadow: rgba(71, 85, 105, 0.2);
    --tut-prev-bg: #ffffff;
    --tut-prev-bg-hover: var(--mono-100);
    --tut-prev-color: var(--mono-700);
    --tut-prev-border: var(--mono-300);
    --tut-skip-color: #ef4444;
    --tut-skip-border: #fecaca;
    --tut-skip-bg-hover: #fef2f2;
}

:root.theme-mono .tut-btn-next {
    background: var(--tut-next-bg) !important;
}

:root.theme-mono .tut-btn-next:hover {
    background: var(--tut-next-bg-hover) !important;
}

/* Toggle cards — sharper contrast between inactive/active for grayscale palette */
:root.theme-mono .lang-option,
.theme-mono .lang-option {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96)) !important;
    border-color: rgba(71, 85, 105, 0.1) !important;
    color: var(--mono-500) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
:root.theme-mono .lang-option:hover,
.theme-mono .lang-option:hover {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
    border-color: rgba(71, 85, 105, 0.28) !important;
    color: var(--mono-700) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.08) !important;
}
:root.theme-mono .lang-option.lang-active,
:root.theme-mono .lang-active,
.theme-mono .lang-option.lang-active,
.theme-mono .lang-active {
    background: linear-gradient(180deg, #dde4ee, #c8d4e0) !important;
    border-color: var(--mono-600) !important;
    color: var(--mono-900) !important;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.22), 0 4px 12px rgba(71, 85, 105, 0.14) !important;
}

/* Print */
@media print {
    :root.theme-mono * {
        box-shadow: none !important;
    }
    
    :root.theme-mono::before {
        display: none !important;
    }
}