/* app/static/css/app.css */

/* --- THEME PALETTES --- */
:root, html[data-app-theme="default"] {
    --app-primary: 13, 110, 253; 
    --app-gradient-start: #0d6efd;
    --app-gradient-end: #8b5cf6;
}
html[data-app-theme="emerald"] {
    --app-primary: 16, 185, 129; 
    --app-gradient-start: #10b981;
    --app-gradient-end: #0ea5e9; 
}
html[data-app-theme="sunset"] {
    --app-primary: 249, 115, 22; 
    --app-gradient-start: #f97316;
    --app-gradient-end: #ef4444; 
}
html[data-app-theme="midnight"] {
    --app-primary: 79, 70, 229; 
    --app-gradient-start: #4f46e5;
    --app-gradient-end: #ec4899; 
}
html {
    --bs-primary: rgb(var(--app-primary));
    --bs-primary-rgb: var(--app-primary);
}

/* --- MODERN APP BASE --- */
html, body { height: 100%; font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
.app-wrapper { display: flex; height: 100vh; overflow: hidden; background-color: var(--bs-body-bg); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(150, 150, 150, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150, 150, 150, 0.5); }

/* 🟢 MOBILE Z-INDEX FIX: z-index set to 1050 !important */
.sidebar { width: 280px; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-right: 1px solid rgba(128, 128, 128, 0.1) !important; background: var(--bs-body-bg); z-index: 1050 !important;}
.sidebar .nav-link { transition: all 0.2s ease; border-radius: 0.5rem; white-space: nowrap; font-weight: 500; color: var(--bs-secondary-color); padding: 0.6rem 1rem; margin-bottom: 0.2rem; }
.sidebar .nav-link:hover:not(.active) { background-color: rgba(128, 128, 128, 0.08); color: var(--bs-body-color); transform: translateX(3px); }
.sidebar .nav-link.active { background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%); color: #fff !important; box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25); }
.submenu-icon { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0.6; }
.nav-link[aria-expanded="true"] .submenu-icon { transform: rotate(180deg); opacity: 1; }
.submenu-list .nav-link { font-size: 0.9rem; font-weight: 400; }

.main-content { flex-grow: 1; overflow-y: auto; overflow-x: hidden; background-color: rgba(128, 128, 128, 0.02); }
.glass-header { background: rgba(var(--bs-body-bg-rgb), 0.75) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; z-index: 1030; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.2); background: transparent; color: var(--bs-body-color); transition: all 0.2s; }
.icon-btn:hover { background: rgba(128, 128, 128, 0.1); border-color: rgba(128, 128, 128, 0.3); }

@media (min-width: 992px) {
    .sidebar.collapsed { width: 84px; }
    .sidebar.collapsed .sidebar-text, .sidebar.collapsed .submenu-icon { display: none !important; }
    .sidebar.collapsed .nav-link { justify-content: center; padding: 0.6rem 0; }
    .sidebar.collapsed .nav-link i.main-icon { margin-right: 0 !important; font-size: 1.4rem; }
    .sidebar.collapsed .sidebar-brand, .sidebar.collapsed .sidebar-footer { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
    .sidebar.collapsed .sidebar-footer-text, .sidebar.collapsed .submenu-list { display: none !important; }
}
/* Asynchronous Loading Bar */
.htmx-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: var(--bs-primary);
    width: 0%;
    z-index: 9999;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s ease;
}
body.htmx-request .htmx-indicator {
    width: 100%;
    opacity: 1;
    transition: width 1s ease-in-out;
}


/* ========================================================
   DATATABLES & LIST STYLING (Light & Dark Compatible)
   ======================================================== */
table.dataTable { margin-top: 0.5rem !important; margin-bottom: 1.5rem !important; border-collapse: collapse !important; }
table.dataTable tbody td { padding: 1rem 0.5rem !important; border: none !important; }

/* Light Mode Base (Default) */
.custom-filter {
    background-color: var(--bs-body-bg) !important; 
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important; 
    border-radius: 0.5rem !important; 
    transition: all 0.2s ease;
}
.custom-filter:focus { 
    border-color: var(--app-gradient-end) !important; 
    background-color: var(--bs-body-bg) !important; 
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important; 
}

table.dataTable tbody tr { background-color: transparent !important; border-bottom: 1px solid var(--bs-border-color) !important; transition: background-color 0.2s ease; }
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(0, 0, 0, 0.02) !important; box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg); }
table.dataTable tbody tr:hover > * { --bs-table-bg-state: rgba(0, 0, 0, 0.04) !important; box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state) !important; }

table.dataTable thead th {
    border-bottom: 1px solid var(--bs-border-color) !important; 
    color: var(--bs-secondary-color) !important;
    font-size: 0.75rem; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.1em;
    padding-bottom: 1rem !important; padding-left: 0.5rem !important; border-top: none !important;
}

.dataTables_info { color: var(--bs-secondary-color) !important; font-size: 0.9rem; padding-top: 0 !important; }
.dataTables_wrapper .pagination { margin-top: 0; margin-bottom: 0; gap: 0.25rem; }
.dataTables_wrapper .pagination .page-item .page-link {
    background-color: transparent !important; 
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important; 
    border-radius: 0.4rem !important; padding: 0.4rem 0.85rem !important; font-weight: 500; transition: all 0.2s ease;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important;
    border: none !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}
.dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover { background-color: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: var(--bs-body-color) !important; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { opacity: 0.4; border-color: transparent !important; }

/* Dark Mode Overrides */
[data-bs-theme="dark"] .custom-filter {
    background-color: rgba(255, 255, 255, 0.02) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #fff !important;
}
[data-bs-theme="dark"] .custom-filter:focus { background-color: rgba(0, 0, 0, 0.2) !important; }
[data-bs-theme="dark"] .custom-filter option { background-color: #1e1e24; color: #fff; }

[data-bs-theme="dark"] table.dataTable tbody tr { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(255, 255, 255, 0.015) !important; }
[data-bs-theme="dark"] table.dataTable tbody tr:hover > * { --bs-table-bg-state: rgba(255, 255, 255, 0.03) !important; }

[data-bs-theme="dark"] table.dataTable thead th { border-bottom-color: rgba(255, 255, 255, 0.08) !important; color: #a1a1aa !important; }
[data-bs-theme="dark"] .dataTables_info { color: #8a9099 !important; }

[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-item .page-link { border-color: rgba(255, 255, 255, 0.08) !important; color: #8a9099 !important; }
[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover { background-color: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #fff !important; }