/* =============================================
   PROFESSIONAL CORPORATE THEMES
   Modern Admin Dashboard Color System
   ============================================= */

/* =============================================
   THEME: LIGHT (Default Corporate)
   ============================================= */
:root,
[data-theme="light"] {
    --bg-primary: #f4f6f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #ebeef2;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --text-primary: #1a1a2e;
    --text-secondary: #5a6270;
    --text-muted: #8c939d;
    --text-inverse: #ffffff;
    --accent-primary: #5c6bc0;
    --accent-secondary: #7c4dff;
    --accent-hover: #3949ab;
    --accent-light: rgba(92, 107, 192, 0.1);
    --border-color: #e3e6ea;
    --border-hover: #5c6bc0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --header-bg: linear-gradient(135deg, #5c6bc0 0%, #7c4dff 100%);
    --header-text: #ffffff;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
    --info: #2196f3;
    /* Editable cell colors */
    --editable-bg: #fff9e6;
    --editable-hover: #fff3cc;
}

/* =============================================
   THEME: DARK (Midnight Professional)
   ============================================= */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #0c1222;
    --bg-card: #1e293b;
    --bg-card-hover: #273549;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    --accent-primary: #818cf8;
    --accent-secondary: #a78bfa;
    --accent-hover: #6366f1;
    --accent-light: rgba(129, 140, 248, 0.15);
    --border-color: #334155;
    --border-hover: #818cf8;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --header-text: #f1f5f9;
    /* Editable cell colors - dark theme */
    --editable-bg: #3d3520;
    --editable-hover: #4a4025;
}

/* =============================================
   THEME: OCEAN (Corporate Blue)
   ============================================= */
[data-theme="ocean"] {
    --bg-primary: #0c1929;
    --bg-secondary: #132337;
    --bg-tertiary: #091420;
    --bg-card: #132337;
    --bg-card-hover: #1a3a5c;
    --text-primary: #e2e8f0;
    --text-secondary: #90a4b8;
    --text-muted: #5d7a94;
    --text-inverse: #0c1929;
    --accent-primary: #0ea5e9;
    --accent-secondary: #38bdf8;
    --accent-hover: #0284c7;
    --accent-light: rgba(14, 165, 233, 0.15);
    --border-color: #1e4976;
    --border-hover: #0ea5e9;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #0077b6 0%, #0ea5e9 100%);
    --header-text: #ffffff;
    /* Editable cell colors - ocean theme */
    --editable-bg: #1a3545;
    --editable-hover: #204050;
}

/* =============================================
   THEME: FOREST (Nature Green)
   ============================================= */
[data-theme="forest"] {
    --bg-primary: #0f1f17;
    --bg-secondary: #162821;
    --bg-tertiary: #0a1610;
    --bg-card: #162821;
    --bg-card-hover: #1e3d30;
    --text-primary: #e2f0e8;
    --text-secondary: #8cb89e;
    --text-muted: #5a8a6f;
    --text-inverse: #0f1f17;
    --accent-primary: #22c55e;
    --accent-secondary: #4ade80;
    --accent-hover: #16a34a;
    --accent-light: rgba(34, 197, 94, 0.15);
    --border-color: #2d5a42;
    --border-hover: #22c55e;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    --header-text: #ffffff;
    /* Editable cell colors - forest theme */
    --editable-bg: #1e3525;
    --editable-hover: #284530;
}

/* =============================================
   THEME: ROYAL (Premium Purple)
   ============================================= */
[data-theme="royal"] {
    --bg-primary: #1a1625;
    --bg-secondary: #231c33;
    --bg-tertiary: #12101a;
    --bg-card: #231c33;
    --bg-card-hover: #342a4a;
    --text-primary: #ede9f5;
    --text-secondary: #a89cc4;
    --text-muted: #7a6a9e;
    --text-inverse: #1a1625;
    --accent-primary: #a855f7;
    --accent-secondary: #c084fc;
    --accent-hover: #9333ea;
    --accent-light: rgba(168, 85, 247, 0.15);
    --border-color: #4a3a6e;
    --border-hover: #a855f7;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --header-text: #ffffff;
    /* Editable cell colors - royal theme */
    --editable-bg: #2e2540;
    --editable-hover: #3a3050;
}

/* =============================================
   THEME: EMBER (Warm Orange)
   ============================================= */
[data-theme="ember"] {
    --bg-primary: #1c1410;
    --bg-secondary: #261b15;
    --bg-tertiary: #140e0b;
    --bg-card: #261b15;
    --bg-card-hover: #3d2a1f;
    --text-primary: #fef3eb;
    --text-secondary: #c4a68f;
    --text-muted: #9a7a5e;
    --text-inverse: #1c1410;
    --accent-primary: #f97316;
    --accent-secondary: #fb923c;
    --accent-hover: #ea580c;
    --accent-light: rgba(249, 115, 22, 0.15);
    --border-color: #5a3d28;
    --border-hover: #f97316;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --header-text: #ffffff;
    /* Editable cell colors - ember theme */
    --editable-bg: #3d2e20;
    --editable-hover: #4a3828;
}

/* =============================================
   THEME: ARCTIC (Cool Cyan)
   ============================================= */
[data-theme="arctic"] {
    --bg-primary: #0d1b1e;
    --bg-secondary: #142428;
    --bg-tertiary: #091315;
    --bg-card: #142428;
    --bg-card-hover: #1c363c;
    --text-primary: #e5f4f7;
    --text-secondary: #8cc4cf;
    --text-muted: #5a9aa8;
    --text-inverse: #0d1b1e;
    --accent-primary: #06b6d4;
    --accent-secondary: #22d3ee;
    --accent-hover: #0891b2;
    --accent-light: rgba(6, 182, 212, 0.15);
    --border-color: #1e4a54;
    --border-hover: #06b6d4;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
    --header-bg: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    --header-text: #ffffff;
    /* Editable cell colors - arctic theme */
    --editable-bg: #1a3540;
    --editable-hover: #204550;
}

/* =============================================
   GLOBAL BASE STYLES
   ============================================= */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-content {
    background: var(--bg-primary) !important;
}

/* =============================================
   HEADER
   ============================================= */
.app-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    box-shadow: var(--shadow-md) !important;
}

.app-header a, .app-header .nav-link, .app-header .header-title {
    color: var(--header-text) !important;
}

/* Back Button */
.back-btn, .btn-back, a[href*="dashboard"].btn, .breadcrumb-back {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--accent-primary) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.back-btn:hover, .btn-back:hover, a[href*="dashboard"].btn:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
    transform: translateX(-3px) !important;
}

/* =============================================
   CARDS - Unified
   ============================================= */
.card, .content-card, .panel-card, .table-card, .menu-card, .stat-card, .info-card, .summary-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    transition: all 0.25s ease !important;
}

.card:hover, .content-card:hover, .panel-card:hover, .menu-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.content-card h1, .content-card h2, .content-card h3,
.menu-card h3, .menu-card h4, .panel-card h3, .panel-card h4 {
    color: var(--text-primary) !important;
}

.card p, .card span:not(.badge), .content-card p, .menu-card p {
    color: var(--text-secondary) !important;
}

.card .icon, .menu-card .icon, .card i, .menu-card i {
    color: var(--accent-primary) !important;
}

/* =============================================
   WELCOME CARD
   ============================================= */
.welcome-card, .page-header-card {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border: none !important;
}

.welcome-card h1, .welcome-card h2, .welcome-card h3, .welcome-card p, .welcome-card span {
    color: var(--header-text) !important;
}

/* =============================================
   STAT CARDS
   ============================================= */
.stat-card .stat-value, .stat-card .stat-number, .stat-card h2 {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.stat-card .stat-label, .stat-card p {
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary, .btn-accent {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover, .btn-accent:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-secondary, .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-info { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }

/* Action Buttons */
.action-btn, .btn-icon, .btn-action {
    background: var(--accent-light) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--accent-primary) !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.action-btn:hover, .btn-icon:hover, .btn-action:hover {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* =============================================
   FORM INPUTS
   ============================================= */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-light) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}

label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

/* =============================================
   TABLES & DATATABLES
   ============================================= */
table, .dataTable {
    background: var(--bg-card) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

table thead th, .dataTable thead th {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

table tbody tr, .dataTable tbody tr {
    background: transparent !important;
    transition: all 0.15s ease !important;
}

table tbody tr:hover, .dataTable tbody tr:hover {
    background: var(--accent-light) !important;
}

table tbody td, .dataTable tbody td {
    color: var(--text-primary) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}

table tbody tr:nth-child(even), .dataTable tbody tr:nth-child(even) {
    background: var(--bg-tertiary) !important;
}

table tbody tr:nth-child(even):hover, .dataTable tbody tr:nth-child(even):hover {
    background: var(--accent-light) !important;
}

/* DataTable Controls */
.dataTables_wrapper { color: var(--text-secondary) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--text-secondary) !important; }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-primary) !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    margin: 0 3px !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* =============================================
   MODALS & POPUPS
   ============================================= */
.modal-content, .popup-container, .popup-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}

.modal-header, .popup-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 24px !important;
}

.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5,
.popup-header h1, .popup-header h2, .popup-header h3 {
    color: var(--header-text) !important;
    margin: 0 !important;
}

.modal-header p, .popup-header p {
    color: rgba(255,255,255,0.8) !important;
}

.modal-body, .popup-body {
    padding: 24px !important;
    color: var(--text-primary) !important;
}

.modal-footer, .popup-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 16px 24px !important;
}

/* Close Button */
.close-btn, .btn-close, button.close {
    color: var(--header-text) !important;
    opacity: 0.7 !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.close-btn:hover, .btn-close:hover, button.close:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.2) !important;
    transform: rotate(90deg) !important;
}

/* =============================================
   LIST ITEMS
   ============================================= */
.form-list-item, .list-item, .popup-item, .saved-form-item, .form-item {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.form-list-item:hover, .list-item:hover, .popup-item:hover, .saved-form-item:hover, .form-item:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
    transform: translateX(4px) !important;
}

.form-list-item h3, .form-list-item h4, .list-item h3, .list-item h4,
.saved-form-item h3, .saved-form-item h4 {
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
}

.form-list-item p, .form-list-item span, .list-item p, .list-item span,
.saved-form-item p, .saved-form-item span {
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
}

/* =============================================
   SEARCH & FILTER
   ============================================= */
.search-box, .search-container, .filter-container {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 4px !important;
}

.search-box input, .search-container input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
}

/* =============================================
   DROPDOWNS
   ============================================= */
.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    transition: all 0.15s ease !important;
}

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

/* =============================================
   BADGES
   ============================================= */
.badge { font-weight: 500 !important; padding: 5px 10px !important; border-radius: 6px !important; }
.badge-success, .badge.bg-success { background: var(--success) !important; color: #fff !important; }
.badge-warning, .badge.bg-warning { background: var(--warning) !important; color: #000 !important; }
.badge-danger, .badge.bg-danger { background: var(--danger) !important; color: #fff !important; }
.badge-info, .badge.bg-info { background: var(--info) !important; color: #fff !important; }
.badge-primary, .badge.bg-primary { background: var(--accent-primary) !important; color: #fff !important; }
.count-badge { background: var(--accent-light) !important; color: var(--accent-primary) !important; font-weight: 600 !important; }

/* =============================================
   ALERTS
   ============================================= */
.alert { border-radius: 10px !important; border: none !important; }
.alert-success { background: rgba(76, 175, 80, 0.15) !important; color: var(--success) !important; }
.alert-warning { background: rgba(255, 152, 0, 0.15) !important; color: var(--warning) !important; }
.alert-danger { background: rgba(244, 67, 54, 0.15) !important; color: var(--danger) !important; }
.alert-info { background: rgba(33, 150, 243, 0.15) !important; color: var(--info) !important; }

/* =============================================
   BREADCRUMBS
   ============================================= */
.breadcrumb, .content-breadcrumb {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
}

.breadcrumb a, .content-breadcrumb a {
    color: var(--accent-primary) !important;
    text-decoration: none !important;
}

.breadcrumb a:hover, .content-breadcrumb a:hover {
    color: var(--accent-hover) !important;
}

/* =============================================
   SIDEBAR / NAV
   ============================================= */
.sidebar, .nav-sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

.nav-link {
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

.nav-link.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* =============================================
   HR & DIVIDERS
   ============================================= */
hr { border-color: var(--border-color) !important; opacity: 0.5 !important; }

/* =============================================
   TEXT UTILITIES
   ============================================= */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent-primary) !important; }

a { color: var(--accent-primary) !important; text-decoration: none !important; transition: color 0.2s ease !important; }
a:hover { color: var(--accent-hover) !important; }

/* =============================================
   EMPTY STATES
   ============================================= */
.empty-state, .no-data {
    color: var(--text-muted) !important;
    text-align: center !important;
    padding: 40px 20px !important;
}

.empty-state i, .no-data i {
    font-size: 48px !important;
    color: var(--text-muted) !important;
    margin-bottom: 16px !important;
}

/* =============================================
   SCROLLBAR (Dark themes)
   ============================================= */
[data-theme="dark"] ::-webkit-scrollbar,
[data-theme="ocean"] ::-webkit-scrollbar,
[data-theme="forest"] ::-webkit-scrollbar,
[data-theme="royal"] ::-webkit-scrollbar,
[data-theme="ember"] ::-webkit-scrollbar,
[data-theme="arctic"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track,
[data-theme="ocean"] ::-webkit-scrollbar-track,
[data-theme="forest"] ::-webkit-scrollbar-track,
[data-theme="royal"] ::-webkit-scrollbar-track,
[data-theme="ember"] ::-webkit-scrollbar-track,
[data-theme="arctic"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
[data-theme="ocean"] ::-webkit-scrollbar-thumb,
[data-theme="forest"] ::-webkit-scrollbar-thumb,
[data-theme="royal"] ::-webkit-scrollbar-thumb,
[data-theme="ember"] ::-webkit-scrollbar-thumb,
[data-theme="arctic"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="ocean"] ::-webkit-scrollbar-thumb:hover,
[data-theme="forest"] ::-webkit-scrollbar-thumb:hover,
[data-theme="royal"] ::-webkit-scrollbar-thumb:hover,
[data-theme="ember"] ::-webkit-scrollbar-thumb:hover,
[data-theme="arctic"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* =============================================
   SMOOTH TRANSITIONS
   ============================================= */
body, .app-header, .main-content, .card, .content-card, .panel-card, .menu-card,
.form-control, input, select, textarea, table, th, td, .modal-content, .dropdown-menu, .sidebar, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* =============================================
   LIGHT THEME SPECIFIC OVERRIDES
   ============================================= */
[data-theme="light"] .modal-header,
[data-theme="light"] .popup-header {
    color: #ffffff !important;
}

[data-theme="light"] .modal-header h1,
[data-theme="light"] .modal-header h2,
[data-theme="light"] .modal-header h3,
[data-theme="light"] .modal-header h4,
[data-theme="light"] .popup-header h1,
[data-theme="light"] .popup-header h2,
[data-theme="light"] .popup-header h3 {
    color: #ffffff !important;
}

/* =============================================
   PANEL.HTML SPECIFIC OVERRIDES
   Form Manager Modal, Popups, etc.
   ============================================= */

/* Popup Overlay & Popup Box */
.popup-overlay .popup {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.popup h3 {
    color: var(--text-primary) !important;
}

.popup p {
    color: var(--text-secondary) !important;
}

.popup-btn.primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

.popup-btn.secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Form Manager Modal */
.form-manager-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

.form-manager-modal {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* FM Header - Keep gradient, it's fine */
.fm-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.fm-header h2, .fm-header p {
    color: var(--header-text) !important;
}

/* FM Toolbar */
.fm-toolbar {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.fm-search-box {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
}

.fm-search-box:focus-within {
    border-color: var(--accent-primary) !important;
}

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

.fm-toolbar-actions select {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.fm-btn-secondary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.fm-btn-secondary:hover {
    background: var(--border-color) !important;
}

/* FM Stats */
.fm-stats {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.fm-stat-item {
    background: var(--bg-tertiary) !important;
}

.fm-stat-number {
    color: var(--accent-primary) !important;
}

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

/* FM Table */
.fm-table-container {
    background: var(--bg-card) !important;
}

.fm-table {
    background: var(--bg-card) !important;
}

.fm-table thead {
    background: var(--bg-tertiary) !important;
}

.fm-table th {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.fm-table td {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.fm-table tbody tr {
    background: transparent !important;
}

.fm-table tbody tr:hover {
    background: var(--accent-light) !important;
}

.fm-form-icon {
    background: var(--accent-light) !important;
}

.fm-form-name strong {
    color: var(--text-primary) !important;
}

.fm-form-name small {
    color: var(--text-muted) !important;
}

.fm-date {
    color: var(--text-secondary) !important;
}

/* FM Status Badge */
.fm-status-badge.active {
    background: rgba(76, 175, 80, 0.15) !important;
    color: var(--success) !important;
}

.fm-status-badge.inactive {
    background: rgba(244, 67, 54, 0.15) !important;
    color: var(--danger) !important;
}

/* FM Action Buttons */
.fm-action-btn {
    background: var(--accent-light) !important;
    border: none !important;
    color: var(--accent-primary) !important;
    transition: all 0.2s ease !important;
}

.fm-action-btn:hover {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.fm-action-btn.edit { color: var(--info) !important; }
.fm-action-btn.edit:hover { background: var(--info) !important; color: #fff !important; }
.fm-action-btn.assign { color: var(--success) !important; }
.fm-action-btn.assign:hover { background: var(--success) !important; color: #fff !important; }
.fm-action-btn.preview { color: var(--accent-primary) !important; }
.fm-action-btn.preview:hover { background: var(--accent-primary) !important; color: #fff !important; }
.fm-action-btn.delete { color: var(--danger) !important; }
.fm-action-btn.delete:hover { background: var(--danger) !important; color: #fff !important; }

/* FM Assignment Button */
.fm-assignment-btn {
    background: var(--accent-light) !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.fm-assignment-btn:hover {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

.fm-assignment-count {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* FM Empty State */
.fm-empty-state {
    color: var(--text-muted) !important;
}

.fm-empty-state h3 {
    color: var(--text-primary) !important;
}

.fm-empty-state p {
    color: var(--text-secondary) !important;
}

/* FM Bulk Actions */
.fm-bulk-actions {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Assign Modal */
.assign-modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

.assign-modal {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.assign-modal-header {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
}

.assign-modal-header h3 {
    color: var(--header-text) !important;
}

.assign-modal-body {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.assign-modal-footer {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Welcome Card - Override inline styles */
.welcome-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.welcome-card h2 {
    color: var(--text-primary) !important;
}

.welcome-card p {
    color: var(--text-secondary) !important;
}

/* Menu Card - Override inline styles */
.menu-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.menu-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

.menu-card h3 {
    color: var(--text-primary) !important;
}

.menu-card p {
    color: var(--text-secondary) !important;
}

.menu-card .count-badge {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

/* Header Styles - Override inline */
.header, .app-header {
    background: var(--header-bg) !important;
}

.header-btn {
    background: rgba(255,255,255,0.15) !important;
    color: var(--header-text) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.header-btn:hover {
    background: rgba(255,255,255,0.25) !important;
}

.header-user {
    background: rgba(255,255,255,0.1) !important;
    color: var(--header-text) !important;
}

/* DataTables specific for panel */
.fm-table input[type="checkbox"] {
    accent-color: var(--accent-primary) !important;
}

/* Select/Option styling */
select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Modal Close Button */
.fm-close-btn {
    background: rgba(255,255,255,0.15) !important;
    color: var(--header-text) !important;
}

.fm-close-btn:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* Permissions page specific */
.permission-card, .client-card, .user-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.permission-card:hover, .client-card:hover, .user-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-hover) !important;
}

/* Tab buttons */
.tab-btn, .tab-button {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.tab-btn.active, .tab-button.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}

.tab-btn:hover, .tab-button:hover {
    background: var(--accent-light) !important;
    color: var(--accent-primary) !important;
}

/* Checkbox lists */
.checkbox-list, .user-list, .client-list {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

.checkbox-item, .list-item {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.checkbox-item:hover, .list-item:hover {
    background: var(--accent-light) !important;
}

/* Info boxes */
.info-box, .help-text {
    background: var(--accent-light) !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* Section headers */
.section-header, .section-title {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Loading states */
.loading, .spinner-container {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
/* =============================================
   SCROLLBAR STYLING
   ============================================= */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

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

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

/* =============================================
   TRANSITIONS & ANIMATIONS
   ============================================= */
.card, .menu-card, .btn, .table-row, .fm-action-btn, 
.modal, .popup, .dropdown-item, .nav-item {
    transition: all 0.2s ease !important;
}

/* Smooth theme transition */
body, .container, .header, .sidebar, .content, 
.card, .table, .modal, .popup {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease !important;
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .header, .sidebar, .no-print {
        display: none !important;
    }
}