/* ====================================================================
   TrackSys - Modern Glassmorphism Light Theme
==================================================================== */

/* 1. Global Background & Body */
html {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%) !important;
    background-attachment: fixed !important;
    min-height: 100%;
}

body {
    background: transparent !important;
    color: #334155 !important;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Background animated decorative circles (applies to page-content) */
/* Background animated decorative circles */
.page-content {
    background: transparent !important;
}



/* 2. Glassmorphism Cards */
.card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    color: #1e293b !important;
}

.card-body {
    color: #1e293b !important;
}

.card-header,
.card-footer {
    background: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
label {
    color: #0f172a !important;
}

p {
    color: #475569 !important;
}

.text-muted {
    color: #64748b !important;
}

.text-body {
    color: #2563eb !important;
}

/* 3. Navigation: Topbar & Sidebar */
#page-topbar {
    background: #ffffff !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

.vertical-menu {
    background: #ffffff !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.vertical-menu .sub-menu {
    background: #f1f5f9 !important;
    border-radius: 8px;
    margin: 0 12px;
    padding: 8px 0;
}

.vertical-menu .sub-menu li a {
    color: #475569 !important;
    padding: 8px 20px !important;
}

.vertical-menu .sub-menu li a:hover {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.10) !important;
    border-radius: 6px;
}

.vertical-menu .sub-menu li.mm-active>a,
.vertical-menu .sub-menu li a.active {
    color: #ffffff !important;
    background-color: #4f46e5 !important;
    background-image: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.5) !important;
}

#sidebar-menu ul li a {
    color: #475569 !important;
}

#sidebar-menu ul li a:hover {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.4) !important;
    border-radius: 8px;
    margin: 0 8px;
}

#sidebar-menu ul li.mm-active>a,
#sidebar-menu ul li a.active {
    color: #ffffff !important;
    background-color: #4f46e5 !important;
    background-image: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1) !important;
    border-radius: 8px;
    margin: 0 8px;
}

#sidebar-menu .menu-title {
    color: #94a3b8 !important;
    font-weight: 600;
    background: transparent !important;
    letter-spacing: 0.05em;
}

#sidebar-menu ul li {
    background: transparent !important;
}

#sidebar-menu ul li a i {
    color: #64748b !important;
}

#sidebar-menu ul li a:hover i {
    color: #4f46e5 !important;
}

#sidebar-menu ul li.mm-active>a i,
#sidebar-menu ul li a.active i {
    color: #ffffff !important;
}

#sidebar-menu ul li a.has-arrow::after {
    color: #94a3b8 !important;
}

#sidebar-menu ul li a:hover.has-arrow::after {
    color: #4f46e5 !important;
}

#sidebar-menu ul li.mm-active>a.has-arrow::after,
#sidebar-menu ul li a.active.has-arrow::after {
    color: #ffffff !important;
}

.navbar-brand-box {
    background: transparent !important;
}

.logo-txt {
    color: #1e293b !important;
}

/* 4. Form Controls & Buttons */
.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.15) !important;
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.2) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: #475569 !important;
    border-radius: 10px !important;
}

/* 5. Tables & DataTables */
.table {
    color: #334155 !important;
}

.table-light {
    background-color: rgba(241, 245, 249, 0.5) !important;
    color: #0f172a !important;
}

.table-light th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

.table td,
.table th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

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

table.dataTable tbody tr.odd {
    background-color: rgba(241, 245, 249, 0.4) !important;
}

table.dataTable tbody tr:hover {
    background-color: rgba(226, 232, 240, 0.5) !important;
}

/* DataTables pagination and search */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #475569 !important;
}

.dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1e293b !important;
    border-radius: 8px !important;
}

/* Modals */
.modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px !important;
    color: #1e293b !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Footer */
.footer {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    color: #64748b !important;
}