/**
 * Eish W Melh - Modern Admin Panel Design System (2026)
 * A world-class, clean, tactile, and minimalist SaaS aesthetic.
 */

:root {
    /* Brand & Culinary Palette */
    --primary-hue: 168;
    --primary: #0d9488;
    --primary-hover: #0f766e;
    --primary-light: #f0fdfa;
    --primary-glow: rgba(13, 148, 136, 0.2);

    --accent-amber: #f59e0b;
    --accent-amber-light: #fffbeb;
    --accent-rose: #f43f5e;
    --accent-rose-light: #fff1f2;
    --accent-indigo: #6366f1;
    --accent-indigo-light: #eef2ff;

    /* Neutrals & Spatial Canvas */
    --bg-canvas: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #f1f5f9;
    --border-subtle: #e2e8f0;
    --border-muted: #cbd5e1;

    /* Text Hierarchy */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Sidebar Palette (Sleek Slate) */
    --sidebar-bg: #0f172a;
    --sidebar-card: #1e293b;
    --sidebar-hover: rgba(255, 255, 255, 0.07);
    --sidebar-active: #0d9488;
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #ffffff;

    /* Soft Diffuse Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    --shadow-elevated: 0 12px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --shadow-hover: 0 16px 36px -6px rgba(13, 148, 136, 0.12), 0 6px 14px -2px rgba(0, 0, 0, 0.04);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

/* ==========================================================================
   Base Typography & Layout
   ========================================================================== */
body {
    font-family: 'Cairo', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

.main-panel {
    background-color: var(--bg-canvas) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-panel > .content {
    margin-top: 75px !important;
    padding: 24px 28px !important;
    min-height: calc(100vh - 140px);
}

/* ==========================================================================
   Modern Sleek Sidebar
   ========================================================================== */
.sidebar {
    background: var(--sidebar-bg) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sidebar .sidebar-wrapper {
    width: 260px !important;
    padding-bottom: 40px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar .logo {
    padding: 20px 22px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02);
}

.sidebar .logo .simple-text {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sidebar .sidebar-section-title {
    padding: 16px 22px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.sidebar .nav li.nav-item {
    margin: 3px 12px !important;
}

.sidebar .nav li .nav-link {
    padding: 11px 16px !important;
    border-radius: var(--radius-md) !important;
    color: var(--sidebar-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
}

.sidebar .nav li .nav-link i.material-icons {
    font-size: 20px !important;
    margin-right: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.2s ease !important;
}

.sidebar .nav li .nav-link p {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.sidebar .nav li:hover:not(.active) .nav-link {
    background: var(--sidebar-hover) !important;
    color: #ffffff !important;
    transform: translateX(3px);
}

.sidebar .nav li:hover:not(.active) .nav-link i.material-icons {
    color: #ffffff !important;
}

.sidebar .nav li.active > .nav-link {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--primary-glow) !important;
    font-weight: 700 !important;
}

.sidebar .nav li.active > .nav-link i.material-icons {
    color: #ffffff !important;
}

/* Submenus in Sidebar */
.sidebar .collapse .nav {
    padding-left: 10px !important;
    margin: 4px 0 !important;
    border-left: 1px dashed rgba(255, 255, 255, 0.12) !important;
}

.sidebar .collapse .nav li .nav-link {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.sidebar .collapse .nav li .nav-link i.material-icons {
    font-size: 16px !important;
    margin-right: 8px !important;
}

/* ==========================================================================
   Modern Top Navbar (Glassmorphism)
   ========================================================================== */
.navbar.navbar-transparent {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    padding: 12px 28px !important;
    min-height: 64px !important;
}

.navbar .navbar-brand {
    font-family: 'Cairo', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.navbar .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-full) !important;
    transition: all 0.2s ease !important;
}

.navbar .nav-link:hover {
    background: var(--bg-surface-secondary) !important;
    color: var(--text-primary) !important;
}

.navbar .notification {
    background: var(--accent-rose) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: var(--radius-full) !important;
    padding: 2px 7px !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.3) !important;
}

/* ==========================================================================
   Modern Floating Cards (No harsh retro headers)
   ========================================================================== */
.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    margin-bottom: 24px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    box-shadow: var(--shadow-elevated) !important;
}

.card .card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 18px 24px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.card .card-header.card-header-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px var(--primary-glow) !important;
    color: #ffffff !important;
}

.card .card-header.card-header-info {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.25) !important;
    color: #ffffff !important;
}

.card .card-header.card-header-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25) !important;
    color: #ffffff !important;
}

.card .card-header.card-header-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
}

.card .card-header.card-header-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.25) !important;
    color: #ffffff !important;
}

.card .card-header .card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.card .card-header .card-category {
    font-size: 13px !important;
    margin-top: 4px !important;
    opacity: 0.85 !important;
}

.card .card-body {
    padding: 24px !important;
}

.card .card-footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: transparent !important;
}

/* Modern Dashboard Stat Cards (KPI) */
.card-stats {
    position: relative !important;
    overflow: hidden !important;
}

.card-stats .card-header.card-header-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 10px !important;
    border-bottom: none !important;
}

.card-stats .card-header .card-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 0 !important;
}

.card-stats .card-header .card-icon i.material-icons {
    font-size: 26px !important;
    line-height: 52px !important;
}

.card-stats .card-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 8px 0 0 !important;
}

.card-stats .card-category {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   Modern DataTables & Regular Tables
   ========================================================================== */
.table {
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.table thead th {
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-secondary) !important;
    border-bottom: 2px solid var(--border-subtle) !important;
    border-top: none !important;
    padding: 14px 16px !important;
    background: var(--bg-surface-secondary) !important;
    white-space: nowrap;
}

.table tbody tr {
    transition: all 0.15s ease !important;
}

.table tbody tr:hover {
    background-color: rgba(13, 148, 136, 0.03) !important;
}

.table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid var(--border-subtle) !important;
    font-size: 14px !important;
}

/* DataTables Controls & Pagination */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    font-weight: 600 !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    background: #ffffff !important;
    outline: none !important;
    min-width: 220px !important;
    transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-surface-secondary) !important;
    border-color: transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--primary) !important;
}

/* ==========================================================================
   Modern Buttons & Tactile States
   ========================================================================== */
.btn {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: var(--radius-md) !important;
    padding: 9px 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: var(--shadow-card) !important;
}

.btn:active {
    transform: translateY(1px) !important;
}

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

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    box-shadow: 0 4px 14px var(--primary-glow) !important;
}

.btn-info {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
    background: transparent !important;
}

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

/* Round / Icon Buttons */
.btn.btn-just-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: var(--radius-full) !important;
}

/* ==========================================================================
   Modern Form Controls
   ========================================================================== */
.form-control {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    background-color: #ffffff !important;
    background-image: none !important;
    transition: all 0.2s ease !important;
}

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
    background-color: #ffffff !important;
}

.form-group label, .bmd-label-static {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 6px !important;
}

/* Toggle Switches */
.togglebutton label input[type=checkbox]:checked + .toggle {
    background-color: var(--primary) !important;
}

.togglebutton label input[type=checkbox]:checked + .toggle:after {
    background-color: var(--primary-hover) !important;
}

/* ==========================================================================
   Badges & Pills
   ========================================================================== */
.badge {
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    border-radius: var(--radius-full) !important;
    letter-spacing: 0 !important;
}

.badge-primary {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(13, 148, 136, 0.2) !important;
}

.badge-success {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.badge-warning {
    background-color: var(--accent-amber-light) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.badge-danger {
    background-color: var(--accent-rose-light) !important;
    color: #e11d48 !important;
    border: 1px solid rgba(244, 63, 94, 0.2) !important;
}

.badge-info {
    background-color: var(--accent-indigo-light) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Progress Bars */
.progress {
    background-color: var(--bg-surface-secondary) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    height: 8px !important;
}

.progress-bar {
    border-radius: var(--radius-full) !important;
    transition: width 0.6s ease !important;
}

.progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--primary) 0%, #2dd4bf 100%) !important;
}

/* Alerts */
.alert {
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
}

.alert-success {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border-left: 4px solid #10b981 !important;
}

.alert-danger {
    background-color: #fff1f2 !important;
    color: #9f1239 !important;
    border-left: 4px solid #f43f5e !important;
}

/* Footer */
footer.footer {
    padding: 18px 28px !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: #ffffff !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
}