/*
=============================================================================
  DARK / LIGHT THEME SYSTEM + ULTRA-RESPONSIVE ENHANCEMENTS
  Addon pour app.css (Rocker Admin)
  Stratégie : data-theme="dark" | data-theme="light" + prefers-color-scheme
=============================================================================
*/

/* ─────────────────────────────────────────────────────────────────────────
   1. VARIABLES LIGHT THEME (défaut)
───────────────────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    /* Brand */
    --primary-color: #17c8bd;
    --secondary-color: #01274f;
    --card-header: #01274f;
    --blue-color: #0866b3;
    --primary-gradient: linear-gradient(135deg, #17c8bd 0%, #01274f 100%);
    --secondary-gradient: linear-gradient(135deg, #01274f 0%, #17c8bd 100%);
    --success-gradient: linear-gradient(135deg, #28a745 0%, #0a8a82 100%);
    --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #c44569 100%);
    --warning-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

    /* Shadows */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 15px 45px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);

    /* Sidebar */
    --sidebar-bg: linear-gradient(180deg, #01274f 0%, #0a3a6b 100%);
    --sidebar-glass: rgba(1, 39, 79, 0.95);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: #6c757d;
    --hover-bg: rgba(23, 200, 189, 0.15);
    --active-bg: rgba(23, 200, 189, 0.25);
    --border-color: rgba(23, 200, 189, 0.2);
    --glass-effect: rgba(245, 241, 241, 0.989);

    /* Body / Layout */
    --body-bg: #f7f7ff;
    --body-color: #4c5258;
    --surface-bg: #ffffff;
    --surface-bg-2: #f8f9fa;
    --surface-border: #e4e4e4;
    --surface-border-light: rgba(0, 0, 0, 0.08);

    /* Topbar */
    --topbar-bg: rgba(245, 241, 241, 0.989);
    --topbar-border: rgba(23, 200, 189, 0.1);
    --topbar-shadow: 0 2px 6px rgba(218, 218, 253, 0.65), 0 2px 6px rgba(206, 206, 238, 0.54);

    /* Cards */
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Text shades */
    --text-heading: #01274f;
    --text-body: #4c5258;
    --text-muted-ui: #6c757d;
    --text-light: #b0afaf;
    --text-hover: #01274f;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #dee2e6;
    --input-color: #4c5258;
    --input-placeholder: #adb5bd;
    --input-focus-border: #17c8bd;
    --input-focus-shadow: rgba(23, 200, 189, 0.25);

    /* Tables */
    --table-bg: #ffffff;
    --table-stripe: rgba(23, 200, 189, 0.04);
    --table-hover: rgba(23, 200, 189, 0.07);
    --table-border: rgba(0, 0, 0, 0.05);
    --table-header-bg: var(--secondary-gradient);

    /* Chat / Email */
    --chat-bg: #ffffff;
    --chat-sidebar-bg: #ffffff;
    --chat-left-msg-bg: #eff2f5;
    --chat-right-msg-bg: #dcedff;
    --chat-border: rgba(0, 0, 0, 0.125);

    /* Badges / Status */
    --badge-pending-bg: rgba(255, 193, 7, 0.1);
    --badge-pending-color: #856404;
    --badge-validated-bg: rgba(40, 167, 69, 0.1);
    --badge-validated-color: #155724;
    --badge-cancelled-bg: rgba(220, 53, 69, 0.1);
    --badge-cancelled-color: #721c24;

    /* Dropdown */
    --dropdown-bg: #ffffff;
    --dropdown-border: rgba(23, 200, 189, 0.1);
    --dropdown-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    --dropdown-item-hover: rgba(23, 200, 189, 0.1);
    --dropdown-divider: #ededed;

    /* Scrollbar */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;

    /* Misc */
    --icon-badge-bg: #f2f2f2;
    --widgets-icon-bg: #ededed;
    --fm-file-box-bg: #e9ecef;
    --theme-icons-bg: #ffffff;
    --chip-bg: #f1f1f1;
    --app-box-bg: #f6f6f6;
    --order-actions-bg: #f1f1f1;
    --footer-bg: #ffffff;
    --notification-icon-bg: rgba(255, 255, 255, 0.8);

    /* Flow loading */
    --flow-loading-bg: rgba(255, 255, 255, 0.9);

    /* Filters */
    --filters-section-bg: rgba(248, 249, 250, 0.8);
    --advanced-filters-bg: rgba(255, 255, 255, 0.9);
    --search-box-bg: #ffffff;
    --dropdown-search-bg: #ffffff;
    --time-filter-bg: #ffffff;

    /* Message / ticket */
    --message-internal-bg: #f8f9fa;
    --message-admin-bg: #e7f7f6;
    --message-initial-bg: #fff3cd;
    --reply-form-bg: #f8f9fa;
    --ticket-hover-bg: #f8f9fa;
    --ticket-active-bg: #e7f7f6;
    --info-item-border: #eee;

    /* Step indicator */
    --step-circle-bg: #e9ecef;
    --step-circle-color: #6c757d;
    --step-circle-border: #dee2e6;
    --step-line-bg: #dee2e6;

    /* KPI */
    --kpi-card-bg: #ffffff;
    --chart-container-bg: #ffffff;
    --alert-modern-bg: #ffffff;

    /* Breadcrumb */
    --breadcrumb-border: #aaa4a4;

    /* Transition */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

    color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. VARIABLES DARK THEME
───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Brand (inchangés) */
    --primary-color: #17c8bd;
    --secondary-color: #7dd3fc;  /* bleu clair lisible sur fond sombre */
    --blue-color: #60a5fa;
    --primary-gradient: linear-gradient(135deg, #17c8bd 0%, #1e40af 100%);
    --secondary-gradient: linear-gradient(135deg, #1e3a5f 0%, #17c8bd 100%);

    /* Shadows (plus visibles sur fond sombre) */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 15px 45px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);

    /* Sidebar */
    --sidebar-bg: linear-gradient(180deg, #0a1628 0%, #0d1f3c 100%);
    --sidebar-glass: rgba(10, 22, 40, 0.98);
    --text-primary: #f1f5f9;
    --text-secondary: rgba(241, 245, 249, 0.8);
    --text-muted: rgba(255, 255, 255, 0.94);
    --hover-bg: rgba(23, 200, 189, 0.12);
    --active-bg: rgba(23, 200, 189, 0.2);
    --border-color: rgba(23, 200, 189, 0.15);
    --glass-effect: rgba(15, 23, 42, 0.97);

    /* Body / Layout */
    --body-bg: #0f172a;
    --body-color: #cbd5e1;
    --surface-bg: #1e293b;
    --surface-bg-2: #0f172a;
    --surface-border: #334155;
    --surface-border-light: rgba(255, 255, 255, 0.06);

    /* Topbar */
    --topbar-bg: rgba(15, 23, 42, 0.97);
    --topbar-border: rgba(23, 200, 189, 0.12);
    --topbar-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

    /* Cards */
    --card-bg: #1e293b;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Text shades */
    --text-heading: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted-ui: #94a3b8;
    --text-light: #475569;

    /* Inputs */
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-color: #e2e8f0;
    --input-placeholder: #64748b;
    --input-focus-border: #17c8bd;
    --input-focus-shadow: rgba(23, 200, 189, 0.2);

    /* Tables */
    --table-bg: #1e293b;
    --table-stripe: rgba(255, 255, 255, 0.02);
    --table-hover: rgba(23, 200, 189, 0.06);
    --table-border: rgba(255, 255, 255, 0.05);
    --table-header-bg: linear-gradient(135deg, #0d1f3c 0%, #17c8bd 100%);

    /* Chat / Email */
    --chat-bg: #1e293b;
    --chat-sidebar-bg: #1e293b;
    --chat-left-msg-bg: #2d3748;
    --chat-right-msg-bg: #1a3a5c;
    --chat-border: rgba(255, 255, 255, 0.08);

    /* Badges / Status */
    --badge-pending-bg: rgba(255, 193, 7, 0.15);
    --badge-pending-color: #fbbf24;
    --badge-validated-bg: rgba(40, 167, 69, 0.15);
    --badge-validated-color: #4ade80;
    --badge-cancelled-bg: rgba(220, 53, 69, 0.15);
    --badge-cancelled-color: #f87171;

    /* Dropdown */
    --dropdown-bg: #1e293b;
    --dropdown-border: rgba(23, 200, 189, 0.15);
    --dropdown-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
    --dropdown-item-hover: rgba(23, 200, 189, 0.12);
    --dropdown-divider: #334155;

    /* Scrollbar */
    --scrollbar-track: #1e293b;
    --scrollbar-thumb: #475569;

    /* Misc */
    --icon-badge-bg: #2d3748;
    --widgets-icon-bg: #2d3748;
    --fm-file-box-bg: #2d3748;
    --theme-icons-bg: #2d3748;
    --chip-bg: #2d3748;
    --app-box-bg: #2d3748;
    --order-actions-bg: #2d3748;
    --footer-bg: #1e293b;
    --notification-icon-bg: rgba(30, 41, 59, 0.9);

    /* Flow loading */
    --flow-loading-bg: rgba(15, 23, 42, 0.9);

    /* Filters */
    --filters-section-bg: rgba(30, 41, 59, 0.8);
    --advanced-filters-bg: rgba(30, 41, 59, 0.9);
    --search-box-bg: #1e293b;
    --dropdown-search-bg: #1e293b;
    --time-filter-bg: #1e293b;

    /* Message / ticket */
    --message-internal-bg: #252d3d;
    --message-admin-bg: #1a3040;
    --message-initial-bg: #2d2a1a;
    --reply-form-bg: #252d3d;
    --ticket-hover-bg: #252d3d;
    --ticket-active-bg: #1a3040;
    --info-item-border: #334155;

    /* Step indicator */
    --step-circle-bg: #2d3748;
    --step-circle-color: #94a3b8;
    --step-circle-border: #334155;
    --step-line-bg: #334155;

    /* KPI */
    --kpi-card-bg: #1e293b;
    --chart-container-bg: #1e293b;
    --alert-modern-bg: #1e293b;

    /* Breadcrumb */
    --breadcrumb-border: #475569;

    color-scheme: dark;
}

/* Auto dark mode si préférence OS (et pas de data-theme forcé) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #17c8bd;
    --secondary-color: #7dd3fc;  /* bleu clair lisible sur fond sombre */
    --blue-color: #60a5fa;
    --primary-gradient: linear-gradient(135deg, #17c8bd 0%, #1e40af 100%);
    --secondary-gradient: linear-gradient(135deg, #1e3a5f 0%, #17c8bd 100%);

    /* Shadows (plus visibles sur fond sombre) */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 15px 45px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);

    /* Sidebar */
    --sidebar-bg: linear-gradient(180deg, #0a1628 0%, #0d1f3c 100%);
    --sidebar-glass: rgba(10, 22, 40, 0.98);
    --text-primary: #f1f5f9;
    --text-secondary: rgba(241, 245, 249, 0.8);
    --text-muted: rgba(255, 255, 255, 0.94);
    --hover-bg: rgba(23, 200, 189, 0.12);
    --active-bg: rgba(23, 200, 189, 0.2);
    --border-color: rgba(23, 200, 189, 0.15);
    --glass-effect: rgba(15, 23, 42, 0.97);

    /* Body / Layout */
    --body-bg: #0f172a;
    --body-color: #cbd5e1;
    --surface-bg: #1e293b;
    --surface-bg-2: #0f172a;
    --surface-border: #334155;
    --surface-border-light: rgba(255, 255, 255, 0.06);

    /* Topbar */
    --topbar-bg: rgba(15, 23, 42, 0.97);
    --topbar-border: rgba(23, 200, 189, 0.12);
    --topbar-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

    /* Cards */
    --card-bg: #1e293b;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Text shades */
    --text-heading: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted-ui: #94a3b8;
    --text-light: #475569;

    /* Inputs */
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-color: #e2e8f0;
    --input-placeholder: #64748b;
    --input-focus-border: #17c8bd;
    --input-focus-shadow: rgba(23, 200, 189, 0.2);

    /* Tables */
    --table-bg: #1e293b;
    --table-stripe: rgba(255, 255, 255, 0.02);
    --table-hover: rgba(23, 200, 189, 0.06);
    --table-border: rgba(255, 255, 255, 0.05);
    --table-header-bg: linear-gradient(135deg, #0d1f3c 0%, #17c8bd 100%);

    /* Chat / Email */
    --chat-bg: #1e293b;
    --chat-sidebar-bg: #1e293b;
    --chat-left-msg-bg: #2d3748;
    --chat-right-msg-bg: #1a3a5c;
    --chat-border: rgba(255, 255, 255, 0.08);

    /* Badges / Status */
    --badge-pending-bg: rgba(255, 193, 7, 0.15);
    --badge-pending-color: #fbbf24;
    --badge-validated-bg: rgba(40, 167, 69, 0.15);
    --badge-validated-color: #4ade80;
    --badge-cancelled-bg: rgba(220, 53, 69, 0.15);
    --badge-cancelled-color: #f87171;

    /* Dropdown */
    --dropdown-bg: #1e293b;
    --dropdown-border: rgba(23, 200, 189, 0.15);
    --dropdown-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
    --dropdown-item-hover: rgba(23, 200, 189, 0.12);
    --dropdown-divider: #334155;

    /* Scrollbar */
    --scrollbar-track: #1e293b;
    --scrollbar-thumb: #475569;

    /* Misc */
    --icon-badge-bg: #2d3748;
    --widgets-icon-bg: #2d3748;
    --fm-file-box-bg: #2d3748;
    --theme-icons-bg: #2d3748;
    --chip-bg: #2d3748;
    --app-box-bg: #2d3748;
    --order-actions-bg: #2d3748;
    --footer-bg: #1e293b;
    --notification-icon-bg: rgba(30, 41, 59, 0.9);

    /* Flow loading */
    --flow-loading-bg: rgba(15, 23, 42, 0.9);

    /* Filters */
    --filters-section-bg: rgba(30, 41, 59, 0.8);
    --advanced-filters-bg: rgba(30, 41, 59, 0.9);
    --search-box-bg: #1e293b;
    --dropdown-search-bg: #1e293b;
    --time-filter-bg: #1e293b;

    /* Message / ticket */
    --message-internal-bg: #252d3d;
    --message-admin-bg: #1a3040;
    --message-initial-bg: #2d2a1a;
    --reply-form-bg: #252d3d;
    --ticket-hover-bg: #252d3d;
    --ticket-active-bg: #1a3040;
    --info-item-border: #334155;

    /* Step indicator */
    --step-circle-bg: #2d3748;
    --step-circle-color: #94a3b8;
    --step-circle-border: #334155;
    --step-line-bg: #334155;

    /* KPI */
    --kpi-card-bg: #1e293b;
    --chart-container-bg: #1e293b;
    --alert-modern-bg: #1e293b;

    /* Breadcrumb */
    --breadcrumb-border: #475569;

    color-scheme: dark;

    }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. TRANSITIONS GLOBALES POUR LE THÈME
───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Évite les transitions sur les animations */
.kpi-card, .filter-select, .menu-item, .submenu-item,
.notification-icon, .message-icon, .toggle-icon,
.back-to-top, .logo-container, .user-profile-link {
    transition: var(--theme-transition), transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. APPLICATION DES VARIABLES AU BODY ET ÉLÉMENTS DE BASE
───────────────────────────────────────────────────────────────────────── */
body {
    background: var(--body-bg) !important;
    color: var(--body-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. SIDEBAR (dark par design, override pour light theme)
───────────────────────────────────────────────────────────────────────── */
.sidebar-wrapper {
    background: var(--sidebar-bg) !important;
    border-right-color: var(--border-color) !important;
    box-shadow: var(--shadow-soft) !important;
}

[data-theme="light"] .sidebar-wrapper,
:root:not([data-theme="dark"]) .sidebar-wrapper {
    /* Sidebar garde son fond foncé en light, c'est voulu par votre design */
    background: var(--sidebar-bg) !important;
}

.sidebar-header {
    background: rgba(1, 39, 79, 0.5) !important;
    border-bottom-color: var(--border-color) !important;
    width: 250px;
}

.sidebar-footer {
    background: rgba(1, 39, 79, 0.5) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .sidebar-footer {
    background: rgba(10, 22, 40, 0.8) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. TOPBAR
───────────────────────────────────────────────────────────────────────── */
.topbar {
    background: var(--topbar-bg) !important;
    border-bottom-color: var(--topbar-border) !important;
    box-shadow: var(--topbar-shadow) !important;
}

.topbar .navbar .navbar-nav .nav-link {
    color: var(--text-body) !important;
}

[data-theme="dark"] .topbar .navbar .navbar-nav .nav-link {
    color: var(--text-body) !important;
}

.topbar .navbar .dropdown-large .dropdown-menu::after,
.topbar .navbar .dropdown-menu::after {
    background: var(--dropdown-bg) !important;
    border-top-color: var(--dropdown-divider) !important;
    border-left-color: var(--dropdown-divider) !important;
}

.full-search-bar {
    background: var(--topbar-bg) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. PAGE WRAPPER / FOOTER
───────────────────────────────────────────────────────────────────────── */
.page-footer {
    background: var(--footer-bg) !important;
    border-top-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. CARDS BOOTSTRAP + CUSTOM
───────────────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-body) !important;
}

.card-header {
    background-color: var(--card-header) !important;
    border-bottom-color: var(--surface-border) !important;
    color: var(--text-heading) !important;
}
.badge-card{
    background-color: var(--card-header) !important;
    border-bottom-color: var(--surface-border) !important;
    color: #fff !important;
}

.card-footer {
    background-color: var(--card-header) !important;
    border-top-color: var(--surface-border) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. TABLES
───────────────────────────────────────────────────────────────────────── */
.table {
    color: var(--text-body) !important;
}

/* .table > :not(caption) > * > * {
    background-color: var(--table-bg) !important;
    border-bottom-color: var(--table-border) !important;
    color: var(--text-body) !important;
} */

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe) !important;
    color: var(--text-body) !important;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover) !important;
}

.table-section {
    background: var(--table-bg) !important;
    box-shadow: var(--card-shadow) !important;
}

.table-row {
    border-bottom-color: var(--table-border) !important;
    /* color: var(--text-primary) !important; */
}

.table-row:hover {
    background: var(--table-hover) !important;
    color: var(--text-heading) !important;

}

.card-title{
    color: var(--text-dark) !important;
}

.row-number {
    color: var(--secondary-color) !important;
}

.code-link {
    color: var(--primary-color) !important;
}

.code-link:hover {
    color: var(--secondary-color) !important;
}

.tresor-name {
    color: var(--text-body) !important;
}

.libelle-text {
    color: var(--text-body);
}

.item-title {
    color: var(--secondary-color) !important;
}

.item-subtitle {
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. DROPDOWNS
───────────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    box-shadow: var(--dropdown-shadow) !important;
}

.dropdown-item {
    color: var(--text-body) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dropdown-item-hover) !important;
    color: var(--primary-color) !important;
}

.dropdown-divider {
    border-top-color: var(--dropdown-divider) !important;
}

.dropdown-large .msg-header {
    background: var(--dropdown-bg) !important;
    border-bottom-color: var(--dropdown-divider) !important;
}

.dropdown-large .msg-header .msg-header-title {
    color: var(--text-heading) !important;
}

.dropdown-large .msg-footer {
    color: var(--text-heading) !important;
    border-top-color: var(--dropdown-divider) !important;
}

.dropdown-large .dropdown-menu .dropdown-item {
    border-bottom-color: var(--dropdown-divider) !important;
}

.dropdown-large .notify {
    background-color: var(--icon-badge-bg) !important;
}

.user-dropdown,
.notification-dropdown,
.message-dropdown {
    background: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FORMULAIRES / INPUTS
───────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-color) !important;
}

.form-control::placeholder {
    color: var(--input-placeholder) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow) !important;
    color: var(--input-color) !important;
}

.input-group-text {
    background-color: var(--surface-bg-2) !important;
    border-color: var(--input-border) !important;
    color: var(--text-body) !important;
}

.filter-select {
    background: var(--input-bg) !important;
    color: var(--secondary-color) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .filter-select {
    color: var(--text-heading) !important;
    border-color: var(--input-border) !important;
}

.search-box {
    background: var(--search-box-bg) !important;
    border-color: var(--input-border) !important;
}

.search-input {
    background: transparent !important;
    color: var(--input-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. NAVIGATION METISMENU (light sidebar reste dark)
───────────────────────────────────────────────────────────────────────── */
.sidebar-wrapper .metismenu a {
    color: var(--text-secondary) !important;
}

.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
    color: #ffffff !important;
    background: var(--hover-bg) !important;
}

.sidebar-wrapper .metismenu ul {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-color) !important;
}

.menu-label {
    color: var(--text-muted) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. TOPBAR USER BOX
───────────────────────────────────────────────────────────────────────── */
.user-box {
    border-left-color: var(--surface-border) !important;
}

.user-info .user-name {
    color: var(--text-heading) !important;
}

.user-info .designattion,
.designation {
    color: var(--text-muted-ui) !important;
}

.notification-icon,
.message-icon {
    background: var(--notification-icon-bg) !important;
    border-color: var(--topbar-border) !important;
}

.notification-badge,
.message-badge {
    border-color: var(--surface-bg) !important;
}

.user-status-indicator {
    border-color: var(--surface-bg) !important;
}

.user-profile-link {
    background: var(--notification-icon-bg) !important;
    border-color: var(--topbar-border) !important;
}

[data-theme="dark"] .user-profile-link:hover {
    background: var(--surface-bg) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. BREADCRUMB
───────────────────────────────────────────────────────────────────────── */
.breadcrumb-title {
    border-right-color: var(--breadcrumb-border) !important;
    color: var(--text-heading) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--text-muted-ui) !important;
}

.breadcrumb-item.active {
    color: var(--primary-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. BADGES & STATUTS
───────────────────────────────────────────────────────────────────────── */
.status-badge.pending {
    background: var(--badge-pending-bg) !important;
    color: var(--badge-pending-color) !important;
}

.status-badge.validated {
    background: var(--badge-validated-bg) !important;
    color: var(--badge-validated-color) !important;
}

.status-badge.cancelled {
    background: var(--badge-cancelled-bg) !important;
    color: var(--badge-cancelled-color) !important;
}

.category-badge {
    background: rgba(23, 79, 200, 0.12) !important;
    color: var(--secondary-color) !important;
}

[data-theme="dark"] .category-badge {
    background: rgba(23, 79, 200, 0.2) !important;
}

.devise-badge {
    background: rgba(108, 117, 125, 0.15) !important;
    color: var(--text-body) !important;
}

.devise-badge.foreign {
    background: rgba(255, 193, 7, 0.15) !important;
    color: var(--badge-pending-color) !important;
}

.conversion-text {
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   16. WIDGETS & ICONS
───────────────────────────────────────────────────────────────────────── */
.icon-badge {
    background: var(--icon-badge-bg) !important;
}

.widgets-icons,
.widgets-icons-2 {
    background-color: var(--widgets-icon-bg) !important;
}

.theme-icons {
    background-color: var(--theme-icons-bg) !important;
}

.fm-file-box {
    background: var(--fm-file-box-bg) !important;
}

.fm-icon-box {
    background: var(--surface-bg) !important;
}

.app-box {
    background-color: var(--app-box-bg) !important;
}

.order-actions a {
    background: var(--order-actions-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

.contacts-social a,
.customers-contacts a {
    background: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

.user-plus {
    background: var(--surface-bg) !important;
    color: var(--text-body) !important;
}

.chip {
    background-color: var(--chip-bg) !important;
    border-color: var(--surface-border-light) !important;
    color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. PRODUITS / IMAGES
───────────────────────────────────────────────────────────────────────── */
.product-img,
.product-img-2 {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
}

.recent-product-img {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
}

.product-discount {
    background-color: var(--surface-bg) !important;
}

.product-list .row {
    background-color: var(--surface-bg-2) !important;
}

@media (min-width: 992px) {
    [data-theme="dark"] .product-list .row:hover {
        background-color: var(--surface-bg) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   18. CHAT
───────────────────────────────────────────────────────────────────────── */
.chat-wrapper,
.chat-sidebar,
.chat-sidebar-header {
    background: var(--chat-bg) !important;
}

.chat-sidebar,
.chat-sidebar-header {
    border-color: var(--chat-border) !important;
}

.chat-header,
.chat-footer {
    background: var(--chat-bg) !important;
    border-color: var(--chat-border) !important;
}

.chat-footer {
    background: var(--surface-bg-2) !important;
}

.chat-content-leftside .chat-left-msg {
    background-color: var(--chat-left-msg-bg) !important;
    color: var(--text-body) !important;
}

.chat-content-rightside .chat-right-msg {
    background-color: var(--chat-right-msg-bg) !important;
    color: var(--text-body) !important;
}

.chat-list .list-group-item {
    background-color: transparent !important;
    color: var(--text-body) !important;
}

.chat-list .list-group-item:hover {
    background-color: var(--table-hover) !important;
}

.chat-title {
    color: var(--text-heading) !important;
}

.chat-msg,
.chat-time {
    color: var(--text-muted-ui) !important;
}

.chat-footer-menu a,
.chat-top-header-menu a,
.chat-toggle-btn {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border-light) !important;
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. EMAIL
───────────────────────────────────────────────────────────────────────── */
.email-wrapper,
.email-sidebar,
.email-sidebar-header,
.email-content {
    background: var(--chat-bg) !important;
}

.email-sidebar,
.email-navigation {
    border-color: var(--chat-border) !important;
}

.email-header {
    background: var(--chat-bg) !important;
    border-color: var(--chat-border) !important;
}

.email-navigation a.list-group-item,
.email-meeting a.list-group-item {
    background-color: var(--chat-bg) !important;
    color: var(--text-body) !important;
}

.email-navigation a.list-group-item:hover {
    background-color: var(--table-hover) !important;
}

.email-list div.email-message {
    background: var(--chat-bg) !important;
    border-bottom-color: var(--surface-border-light) !important;
    color: var(--text-body) !important;
}

.email-list div.email-message:hover {
    background-color: var(--surface-bg-2) !important;
}

.email-toggle-btn {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   20. INVOICE
───────────────────────────────────────────────────────────────────────── */
.invoice {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}

.invoice header {
    border-bottom-color: var(--secondary-color) !important;
}

.invoice main .notices {
    border-left-color: var(--secondary-color) !important;
    background: rgba(23, 200, 189, 0.08) !important;
}

.invoice table td,
.invoice table th {
    background: var(--surface-bg-2) !important;
    border-bottom-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}

.invoice footer {
    border-top-color: var(--surface-border) !important;
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   21. DASHBOARD / KPI / CHARTS
───────────────────────────────────────────────────────────────────────── */
.kpi-card {
    background: var(--kpi-card-bg) !important;
    box-shadow: var(--card-shadow) !important;
}

.kpi-label {
    color: var(--text-muted-ui) !important;
}

.chart-container {
    background: var(--chart-container-bg) !important;
    box-shadow: var(--shadow-soft) !important;
    border-color: var(--card-border) !important;
}

.chart-header {
    color: var(--secondary-color) !important;
}

.time-filter {
    background: var(--time-filter-bg) !important;
    box-shadow: var(--shadow-soft) !important;
}

.alert-modern {
    background: var(--alert-modern-bg) !important;
    box-shadow: var(--shadow-soft) !important;
}

.stats-number {
    color: var(--text-heading) !important;
}

.stats-label {
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   22. TICKETS / SUPPORT
───────────────────────────────────────────────────────────────────────── */
.ticket-item {
    border-bottom-color: var(--surface-border) !important;
}

.ticket-item:hover {
    background-color: var(--ticket-hover-bg) !important;
}

.ticket-item.active {
    background-color: var(--ticket-active-bg) !important;
}

.ticket-title {
    color: var(--text-heading) !important;
}

.message {
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

.message.internal,
.message.user-reply {
    background-color: var(--message-internal-bg) !important;
}

.message.admin-reply {
    background-color: var(--message-admin-bg) !important;
}

.initial-message {
    background-color: var(--message-initial-bg) !important;
}

.reply-form,
.internal-note-form {
    background-color: var(--reply-form-bg) !important;
    border-color: var(--surface-border) !important;
}

.info-item {
    border-bottom-color: var(--info-item-border) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   23. STEPS INDICATOR
───────────────────────────────────────────────────────────────────────── */
.step-circle {
    background-color: var(--step-circle-bg) !important;
    color: var(--step-circle-color) !important;
    border-color: var(--step-circle-border) !important;
}

.step-line {
    background-color: var(--step-line-bg) !important;
}

.step-label {
    color: var(--text-muted-ui) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   24. FILTRES / SEARCH BOX / DROPDOWN SEARCH
───────────────────────────────────────────────────────────────────────── */
.filters-section {
    background: var(--filters-section-bg) !important;
    border-color: var(--card-border) !important;
}

.filter-label {
    color: var(--secondary-color) !important;
}

.advanced-filters {
    background: var(--advanced-filters-bg) !important;
    border-color: var(--card-border) !important;
}

.dropdown-search-results {
    background: var(--dropdown-search-bg) !important;
    border-color: var(--input-border) !important;
    box-shadow: var(--shadow-hover) !important;
}

.dropdown-search-item {
    border-bottom-color: var(--surface-border-light) !important;
    color: var(--text-body) !important;
}

.dropdown-search-item:hover {
    background: var(--dropdown-item-hover) !important;
}

.dropdown-search-clear {
    color: var(--text-muted-ui) !important;
}

.date-input-group {
    background: var(--input-bg) !important;
    border-color: var(--surface-border-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   25. FLOW LOADING
───────────────────────────────────────────────────────────────────────── */
.flow-loading {
    background: var(--flow-loading-bg) !important;
    color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   26. SCROLLBARS CUSTOM
───────────────────────────────────────────────────────────────────────── */
.tickets-list::-webkit-scrollbar-track,
.ticket-messages::-webkit-scrollbar-track {
    background: var(--scrollbar-track) !important;
}

.tickets-list::-webkit-scrollbar-thumb,
.ticket-messages::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
}

/* Scrollbar globale */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ─────────────────────────────────────────────────────────────────────────
   27. ROW GROUP BORDERS
───────────────────────────────────────────────────────────────────────── */
.row.row-group > div {
    border-right-color: var(--surface-border-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   28. TOGGLE DARK/LIGHT BUTTON (à intégrer dans le HTML)
───────────────────────────────────────────────────────────────────────── */
.theme-toggle-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--notification-icon-bg);
    border: 1px solid var(--topbar-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-body);
    font-size: 1.2rem;
}

.theme-toggle-btn:hover {
    background: var(--primary-color);
    /* color: white; */
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ─────────────────────────────────────────────────────────────────────────
   29. DIVERS
───────────────────────────────────────────────────────────────────────── */
.logo-text {
    color: var(--text-primary) !important; /* sidebar toujours blanc */
}

.enterprise-link {
    color: var(--secondary-color) !important;
}

.enterprise-abbr {
    color: var(--secondary-color) !important;
}

.enterprise-name {
    color: var(--text-body) !important;
}

.enterprise-separator {
    color: var(--text-muted-ui) !important;
}

.scrolling-text {
    color: var(--text-muted-ui) !important;
}

.status-text {
    color: var(--text-body) !important;
}

.mobile-toggle-menu {
    color: var(--text-body) !important;
}

/* List groups */
.list-group-item {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

/* FM menu */
.fm-menu .list-group a {
    color: var(--text-body) !important;
}

.fm-menu .list-group a:hover {
    background: var(--secondary-color) !important;
    color: white !important;
}

/* Nav tabs / pills */
.nav-tabs {
    border-bottom-color: var(--surface-border) !important;
}

.nav-tabs .nav-link {
    color: var(--text-muted-ui) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

.nav-primary.nav-tabs .nav-link.active {
    color: var(--secondary-color) !important;
    border-color: var(--secondary-color) var(--secondary-color) var(--surface-bg) !important;
    background: var(--surface-bg) !important;
}

/* Pagination */
.page-link {
    background-color: var(--surface-bg) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-body) !important;
}

.page-link:hover {
    background-color: var(--table-hover) !important;
    color: var(--primary-color) !important;
}

.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Modal */
.modal-content {
    background-color: var(--surface-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-body) !important;
}

.modal-header {
    border-bottom-color: var(--surface-border) !important;
}

.modal-footer {
    border-top-color: var(--surface-border) !important;
}

/* Alert */
[data-theme="dark"] .alert {
    border-color: transparent !important;
}

/* Tooltips */
.tooltip .tooltip-inner {
    background: var(--secondary-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Back to top */
.back-to-top {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

.back-to-top:hover {
    background-color: var(--primary-color) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   30. ULTRA-RESPONSIVE BREAKPOINTS SYSTEM
   xs: <320px | sm: 320-480px | md: 480-768px | lg: 768-1024px | xl: 1024-1280px | xxl: >1280px
═════════════════════════════════════════════════════════════════════════ */

/* ── XS : très petits écrans (320px et moins) ── */
@media screen and (max-width: 320px) {
    body {
        font-size: 12px !important;
    }

    .page-content {
        padding: 0.5rem !important;
    }

    .topbar .navbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .notification-icon,
    .message-icon {
        width: 34px !important;
        height: 34px !important;
    }

    .dropdown-large .dropdown-menu {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    .kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .kpi-value {
        font-size: 1.2rem !important;
    }

    .breadcrumb-title {
        font-size: 14px !important;
    }

    .logo-header {
        width: 36px !important;
        height: 36px !important;
    }

    .enterprise-info {
        display: none !important;
    }

    .user-img {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ── SM : petits mobiles (321px → 480px) ── */
@media screen and (min-width: 321px) and (max-width: 480px) {
    body {
        font-size: 13px !important;
    }

    .page-content {
        padding: 0.75rem !important;
    }

    .topbar .navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .kpi-value {
        font-size: 1.3rem !important;
    }

    .filter-select {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    .table-th,
    .table-td {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    .header-title {
        font-size: 1.1rem !important;
    }
}

/* ── MD : tablettes portrait (481px → 768px) ── */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .page-content {
        padding: 1rem !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .sidebar-wrapper {
        width: 280px !important;
    }

    .filter-select {
        padding: 10px 16px !important;
    }
}

/* ── LG : tablettes paysage / petits laptops (769px → 1024px) ── */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .page-content {
        padding: 1.25rem !important;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .table-th,
    .table-td {
        padding: 0.9rem 0.75rem !important;
    }
}

/* ── XL : grands écrans (1025px → 1280px) — déjà géré par votre CSS ── */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── XXL : très grands écrans (1281px+) ── */
@media screen and (min-width: 1281px) {
    .kpi-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .page-content {
        padding: 1.75rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   31. RESPONSIVE TABLE (mobile-first table scroll)
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .table-section {
        border-radius: 12px !important;
    }

    .table-responsive-stack th {
        display: none;
    }

    .table-responsive-stack td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 1rem !important;
        border-bottom: 1px solid var(--table-border) !important;
    }

    .table-responsive-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted-ui);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 1rem;
        min-width: 100px;
    }

    .libelle-text {
        max-width: 100px !important;
    }

    /* Table horizontale scrollable */
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-th,
    .table-td {
        white-space: nowrap;
        font-size: 0.82rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   32. RESPONSIVE CARDS / KPI
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
    .kpi-card {
        padding: 12px !important;
    }

    .kpi-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }

    .kpi-value {
        font-size: 1.2rem !important;
    }

    .chart-container {
        padding: 12px !important;
    }

    .chart-header {
        font-size: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   33. RESPONSIVE SIDEBAR HEADER / FOOTER
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
    .sidebar-header {
        width: 100% !important;
        padding: 0.75rem 0.75rem !important;
    }

    .page-footer {
        padding: 5px !important;
        font-size: 11px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   34. RESPONSIVE CHAT & EMAIL
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
    .chat-wrapper,
    .email-wrapper {
        height: auto !important;
        min-height: 400px;
    }

    .chat-list {
        height: auto !important;
        max-height: 250px;
    }

    .ticket-messages {
        max-height: 280px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   35. RESPONSIVE FILTERS
───────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .time-filter {
        padding: 15px !important;
        border-radius: 12px !important;
    }

    .quick-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .stat-badge {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   36. CONTAINER FLUID MAX-WIDTH POUR TRÈS GRANDS ÉCRANS
───────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1600px) {
    .page-content {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   37. TOUCH OPTIMIZATIONS
───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Agrandir les zones de clic sur mobile */
    .menu-item {
        padding: 0.9rem 0.75rem !important;
        min-height: 44px;
    }

    .submenu-item {
        padding: 0.8rem 0.75rem !important;
        min-height: 44px;
    }

    .nav-link,
    .list-group-item,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn {
        min-height: 44px;
    }

    .theme-toggle-btn,
    .notification-icon,
    .message-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Désactiver hover effects sur touch */
    .kpi-card:hover {
        transform: none !important;
    }

    .filter-select:hover {
        transform: none !important;
    }

    .menu-item:hover {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   38. PRINT ADAPTATIONS DARK THEME
───────────────────────────────────────────────────────────────────────── */
@media print {
    [data-theme="dark"] body,
    [data-theme="dark"] .page-content,
    [data-theme="dark"] .card,
    [data-theme="dark"] .table {
        background: white !important;
        color: black !important;
    }

    .sidebar-wrapper,
    .topbar,
    .page-footer {
        display: none !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }
}