/* ===================================
   1. THEME VARIABLES (Global)
=================================== */
:root {
    --sidebar-bg: #ffffff;
    --sidebar-header-bg: #0d9488;
    --sidebar-text: #334155;
    --sidebar-hover-bg: #f1f5f9;
    --sidebar-active-bg: #e0f2f1;
    --sidebar-active-text: #0d9488;
    --sidebar-border: #dee2e6;
    
    --main-bg: #ebebeb;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --navbar-bg: #ffffff;
    --table-header: #94a3b8;
    --setting-section-title: #495057;

    /* Global Button Colors */
    --btn-teal: #0d9488;
    --btn-teal-hover: #0b7a70;
    --btn-dark-teal: #134e4a;
    --btn-success: #10b981;
    --btn-primary: #3b82f6;

    --scrollbar-bg: #e2e8f0;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
}

body.dark-mode {
    --sidebar-bg: #0f172a;
    --sidebar-header-bg: #0d9488; 
    --sidebar-text: #cbd5e1;
    --sidebar-hover-bg: #334155; /* MODIFIED: Changed from #1e293b to #334155 to be visible against the card background */
    --sidebar-active-bg: #14b8a6;
    --sidebar-active-text: #ffffff;
    --sidebar-border: #1e293b;
    
    --main-bg: #0f172a;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --navbar-bg: #1e293b;
    --table-header: #334155;
    --setting-section-title: #e9e9e9;

     /* Bootstrap variables Tom Select reads directly */
    --bs-body-bg: #0f172a;
    --bs-body-color: #f8fafc;
    --bs-border-color: #334155;
    --bs-border-color-translucent: #334155;
    --bs-tertiary-bg: #334155;
    --bs-secondary-bg: #1e293b;
    --bs-secondary-color: #94a3b8;

    --scrollbar-bg: #0f172a;     
    --scrollbar-thumb: #334155;   
    --scrollbar-thumb-hover: #475569;
}

/* ===================================
   2. GLOBAL STYLES & TYPOGRAPHY
=================================== */
body {
    color: var(--text-main);
    background-color: var(--main-bg);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

.extra-small {
    font-size: 0.75rem !important;
    color: var(--text-main);
    letter-spacing: 0.01rem;
}

/* ===================================
   3. GLOBAL FORM COMPONENTS (Uniform)
=================================== */

.uniform-input, 
.input-group-text.uniform-input,
select.uniform-input {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid #cbd5e1 !important; 
    border-radius: 0.4rem !important; 
    padding: 0.25rem 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    color-scheme: light;
}

/* Fix for Search Bar (Input Group) edges */
.input-group > .uniform-input:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .uniform-input:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.uniform-input:focus {
    border-color: var(--sidebar-header-bg) !important;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15) !important;
    outline: none;
}

/* Checkboxes & Radios */
.visible-check {
    width: 1.15em !important;
    height: 1.15em !important;
    border: 2px solid #94a3b8 !important; 
    border-radius: 0.25rem; 
    cursor: pointer;
}

.visible-check:checked {
    background-color: var(--sidebar-header-bg) !important;
    border-color: var(--sidebar-header-bg) !important;
}
/* Custom Cross/Check Toggle variant */
.cross-check {
    position: relative;
    text-align: center;
    line-height: 1;
}

/* Unchecked state: display X */
.cross-check:not(:checked):before {
    content: "✕";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 900;
    color: #ef4444; /* Red color for X */
}

/* Checked state: display Check (overrides X) */
.cross-check:checked:before {
    content: "";
    color: #ffffff; /* White check mark */
}

/* Dark mode adjustment for the red X if needed */
body.dark-mode .cross-check:not(:checked):before {
    color: #f87171; 
}

/* Global Button Overrides */
.btn-teal { background-color: var(--btn-teal); border: none; border-radius: 0.4rem; }
.btn-teal:hover { background-color: var(--btn-teal-hover); }
.btn-teal:active { background-color: var(--btn-teal-hover) !important; }

.btn-dark-teal { background-color: var(--btn-dark-teal); color: white !important; border: none; border-radius: 0.4rem; }
.btn-dark-teal:hover { background-color: #0e3b38;} 
.btn-dark-teal:active { background-color: #0b302d !important; }

.btn-outline-teal {border: 1px solid var(--btn-teal) !important; border-radius: 0.4rem;}
.btn-primary { background-color: var(--btn-primary); border: none; border-radius: 0.4rem; }
.btn-success { background-color: var(--btn-success); border: none; border-radius: 0.4rem; }

/* Dark Mode Global Component Fixes (Forcing search bar color) */
body.dark-mode .uniform-input,
body.dark-mode .input-group-text,
body.dark-mode select.uniform-input {
    background-color: #0f172a !important; 
    border-color: #334155 !important; 
    color: #f8fafc !important;
    color-scheme: dark;
}

/* FIX: Forces Search Icon (text-muted) to be visible in Dark Mode */
body.dark-mode .text-muted { color: var(--text-muted) !important; }

body.dark-mode .uniform-input::placeholder { color: var(--text-muted); opacity: 0.8; }

body.dark-mode .uniform-input::-webkit-datetime-edit-fields-wrapper,
body.dark-mode .uniform-input::-webkit-datetime-edit-text,
body.dark-mode .uniform-input::-webkit-datetime-edit-month-field,
body.dark-mode .uniform-input::-webkit-datetime-edit-day-field,
body.dark-mode .uniform-input::-webkit-datetime-edit-year-field {
    color: #f8fafc !important;
}

body.dark-mode .visible-check { background-color: #0f172a !important; border-color: #475569 !important; }

/* ===================================
   4. GLOBAL TABLE & CARD STYLES
=================================== */
/* Header Fix: Small, Professional, Compact */
thead th { 
    background-color: var(--table-header) !important; 
    color: #ffffff !important; 
    border-bottom: none !important;
    font-size: 0.72rem !important; 
    padding: 10px 12px !important; 
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    font-weight: 700;
}

/* FIX: Force white table rows and cards to change in Dark Mode */
body.dark-mode .table,
body.dark-mode table {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--text-main) !important;
    --bs-table-border-color: var(--sidebar-border) !important;
    --bs-table-hover-bg: var(--sidebar-hover-bg) !important;
}

body.dark-mode .table tr, 
body.dark-mode .table td {
    background-color: transparent !important;
    color: var(--text-main) !important;
}

/* MODIFIED: Explicit rule to force hover visibility in dark mode */
body.dark-mode .table tbody tr:hover td {
    background-color: var(--sidebar-hover-bg) !important;
}

body.dark-mode .bg-white { background-color: var(--card-bg) !important; }
body.dark-mode .bg-light, body.dark-mode .bg-light-subtle { background-color: rgba(255, 255, 255, 0.03) !important; }

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--sidebar-border);
    transition: background-color 0.3s;
}

/* ===================================
   TOM SELECT DARK MODE FIX
=================================== */

/* Belt-and-suspenders: covers any Tom Select state that might still hardcode a color */
body.dark-mode .ts-control,
body.dark-mode .ts-wrapper.single.input-active .ts-control,
body.dark-mode .full .ts-control {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode .ts-wrapper .ts-control input {
    color: #f8fafc !important;
}

body.dark-mode .ts-wrapper .ts-control input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

body.dark-mode .ts-dropdown {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode .ts-dropdown .option {
    color: #f8fafc !important;
    background-color: transparent !important;
}

body.dark-mode .ts-dropdown .active {
    background-color: var(--sidebar-header-bg) !important;
    color: #ffffff !important;
}

/* Match the small height of your other inputs */
.ts-wrapper.form-select-sm .ts-control {
    min-height: 31px !important;
    padding: 2px 8px !important;
    border-radius: 0.4rem !important;
}
/* Audit trail actions */
.bg-purple-subtle { background-color: #f3e8ff !important; }
.text-purple { color: #7e22ce !important; }
.border-purple-subtle { border-color: #e9d5ff !important; }

/* Custom Scrollbar Styles */

/* For Webkit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
/* ===================================
   5. SIDEBAR STRUCTURE
=================================== */
.sidebar { width: 260px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1050; }
.sidebar-header { height: 64px; background: var(--sidebar-header-bg); color: white; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sidebar-menu { flex: 1; overflow-y: auto; padding: 15px 0; }
.logo-container { display: flex; align-items: center; gap: 12px; user-select: none; }
.logo-icon-box { background: rgba(255, 255, 255, 0.2); color: white; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); font-family: 'Syne', sans-serif; cursor: pointer; transition: transform 0.2s, background 0.2s; }
.logo-icon-box:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); }
.logo-text-group { display: flex; flex-direction: column; line-height: 1; }
.logo-main { font-size: 1.1rem; font-weight: 800; letter-spacing: 1px; color: #ffffff; text-transform: uppercase; }
.logo-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 2px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }

.sidebar .nav-link { color: var(--sidebar-text); padding: 12px 18px; margin: 4px 12px; border-radius: 8px; display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; transition: 0.2s; }
.sidebar .nav-link.active { background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; }
.sidebar .nav-link:hover:not(.active) { background-color: var(--sidebar-hover-bg); color: var(--sidebar-active-text); }
.sidebar .submenu .nav-link.active-sub { background-color: transparent !important; color: #0d9488; font-weight: 700; border-left: 2px solid #0d9488; border-radius: 0; }
.sidebar-footer .dropdown-menu { border: 1px solid var(--sidebar-border) !important; background-color: var(--sidebar-bg) !important; }
.sidebar-footer .dropdown-item { color: var(--sidebar-text) !important; font-size: 0.85rem; padding: 8px 16px; background: transparent; }
.sidebar-footer .dropdown-item:hover { background-color: var(--sidebar-hover-bg) !important; color: var(--sidebar-active-text) !important; }
.dropdown-divider { border-top: 1px solid var(--sidebar-border) !important; opacity: 1; }
#sidebarThemeIcon { color: #14b8a6; font-size: 1rem; }
.sidebar-footer .dropdown-item.text-danger, .sidebar-footer .dropdown-item.text-danger i { color: #ef4444 !important; }
.sidebar-footer .bi-gear { color: var(--sidebar-active-text); }
.sidebar-footer .dropdown-item i { width: 1.2rem; display: inline-flex; justify-content: center; }
.text-teal { color: #14b8a6 !important; }
.sidebar .arrow-icon { margin-left: auto; transition: transform 0.3s; }
.sidebar .nav-link[aria-expanded="true"] .arrow-icon { transform: rotate(180deg); }
.sidebar-footer { padding: 15px 20px; border-top: 1px solid var(--sidebar-border); background: var(--sidebar-bg); }
.user-profile-link { width: 100%; display: flex !important; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; transition: background 0.2s; color: var(--sidebar-text); text-decoration: none; }
.user-profile-link:hover { background: var(--sidebar-hover-bg); }
.user-name { color: var(--sidebar-text); font-weight: 600; }
.user-role { color: var(--text-muted); font-size: 0.75rem; }

/* ===================================
   6. NAVBAR & MAIN CONTENT
=================================== */
.main { flex: 1; min-width: 0; margin-left: 260px; background: var(--main-bg); min-height: 100vh; transition: all 0.3s ease; display: flex; flex-direction: column; }
.navbar { background: var(--navbar-bg); border-bottom: 1px solid var(--sidebar-border); height: 64px; display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030; transition: transform 0.3s ease-in-out; width: 100%; }
.nav-hidden { transform: translateY(-100%); }

.ts-dropdown,
.ts-dropdown .ts-dropdown-content,
.ts-control,
.ts-wrapper {
    transition: none !important;
    animation: none !important;
}
/* ===================================
   7. RESPONSIVE
=================================== */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main {
        margin-left: 0 !important;
    }

    .sidebar-overlay.show {
        display: block;
    }

    .content {
        padding-top: 1rem !important;
    }
    #globalBackBtn { display: none !important; }
}

@media (min-width: 992px) {
    .sidebar.collapsed {
        width: 80px;
    }

    .sidebar.collapsed~.main {
        margin-left: 80px;
    }

    .sidebar.collapsed .logo-text,
    .sidebar.collapsed span,
    .sidebar.collapsed .user-info,
    .sidebar.collapsed .arrow-icon,
    .sidebar.collapsed .user-name, .sidebar.collapsed .user-role { display: none !important; } .sidebar.collapsed .nav-link { justify-content: center; } .sidebar.collapsed .sidebar-footer .dropdown-toggle::after { display: none !important; } }