/* ───────────────────────────────────────────
   FMS — Freight Management System
   Project-specific styles for AdminLTE 4
   ─────────────────────────────────────────── */

/* ── Brand Colors ── */
:root {
    --fms-primary: #0ea5e9;
    --fms-secondary: #1e293b;
    --fms-accent: #3b82f6;
}

/* ── Sidebar Theme ── */
.app-sidebar.sidebar-dark-primary {
    background-color: #1e293b;
}
.app-sidebar.sidebar-dark-primary .sidebar-brand {
    background-color: #1a222f;
}

/* ── Sidebar Brand ── */
.brand-link .brand-image {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* ── Content Area ── */
.content-wrapper {
    min-height: calc(100vh - 57px);
}

/* ── Dashboard ── */
.small-box {
    border-radius: 0.5rem;
}

/* ── DataTables ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* ── Select2 ── */
.select2-container--bootstrap5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Select2 in Bootstrap 5 modals — ensure dropdowns appear above modal content */
.select2-container {
    z-index: 1051;
}
.select2-container--open {
    z-index: 1060;
}
.select2-dropdown {
    z-index: 1060 !important;
}
.modal .select2-dropdown {
    z-index: 1065 !important;
}

/* ── Flatpickr ── */
.flatpickr-input[readonly] {
    background-color: #fff;
}

/* ── Login Page Overrides ── */
.login-page {
    background: linear-gradient(135deg, var(--fms-secondary) 0%, #0f172a 100%);
}
.login-box .card {
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ── Card Tweaks ── */
.card {
    border-radius: 0.5rem;
}
.card-header {
    border-bottom: none;
    padding: 1rem 1.25rem;
}

/* ── Button Tweaks ── */
.btn {
    border-radius: 0.25rem;
}
.btn-group-sm > .btn, .btn-sm {
    border-radius: 0.2rem;
}

/* ── Table Tweaks ── */
.table > thead > tr > th {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.025em;
}

/* ── Flash Alerts ── */
.alert ul {
    padding-left: 1.25rem;
}

/* ── Responsive Tweaks ── */
@media (max-width: 768px) {
    .content-header h1 {
        font-size: 1.5rem;
    }
}

/* ── Dark Mode Support ── */
.dark-mode .small-box {
    --bs-card-bg: #343a40;
}
.dark-mode .select2-container--bootstrap5 .select2-selection {
    background-color: #343a40;
    color: #e2e8f0;
}

/* ─── Comprehensive Dark Mode ─── */
.dark-mode {
    --bs-body-bg: #1e293b;
    --bs-body-color: #e2e8f0;
    --bs-card-bg: #334155;
    --bs-card-border-color: #475569;
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #475569;
    --bs-table-hover-bg: #334155;
    --bs-dropdown-bg: #334155;
    --bs-dropdown-border-color: #475569;
    --bs-dropdown-link-color: #e2e8f0;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #475569;
    --bs-modal-bg: #334155;
    --bs-modal-border-color: #475569;
    --bs-input-bg: #1e293b;
    --bs-input-border-color: #475569;
    --bs-input-color: #e2e8f0;
    --bs-form-check-input-bg: #1e293b;
    --bs-form-check-input-border-color: #475569;
}

.dark-mode body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.dark-mode .main-header,
.dark-mode .main-footer {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
}

.dark-mode .card {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
}

.dark-mode .card-header {
    background-color: #334155 !important;
    border-color: var(--bs-card-border-color) !important;
}

.dark-mode .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #475569;
}

.dark-mode .table-hover > tbody > tr:hover > td,
.dark-mode .table-hover > tbody > tr:hover > th {
    background-color: var(--bs-table-hover-bg) !important;
}

.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--fms-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25) !important;
    color: var(--bs-input-color) !important;
}

.dark-mode .modal-content {
    background-color: var(--bs-modal-bg) !important;
    border-color: var(--bs-modal-border-color) !important;
}

.dark-mode .dropdown-menu {
    background-color: var(--bs-dropdown-bg) !important;
    border-color: var(--bs-dropdown-border-color) !important;
}

.dark-mode .dropdown-item {
    color: var(--bs-dropdown-link-color) !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--bs-dropdown-link-hover-bg) !important;
    color: var(--bs-dropdown-link-hover-color) !important;
}

/* ── Sidebar Navigation ── */
.app-sidebar.sidebar-dark-primary .nav-link {
    color: #cbd5e1;
}
.app-sidebar.sidebar-dark-primary .nav-link:hover {
    background-color: #334155;
    color: #fff;
}
.app-sidebar.sidebar-dark-primary .nav-link.active {
    background-color: rgba(14, 165, 233, 0.2);
    color: var(--fms-primary);
}
.app-sidebar.sidebar-dark-primary .brand-link {
    background-color: #1e293b;
    border-color: #475569;
}

/* Dark mode overrides */
.dark-mode .sidebar-dark-primary .nav-link {
    color: #cbd5e1 !important;
}

.dark-mode .sidebar-dark-primary .nav-link:hover {
    background-color: #334155 !important;
    color: #fff !important;
}

.dark-mode .sidebar-dark-primary .nav-link.active {
    background-color: rgba(14, 165, 233, 0.2) !important;
    color: var(--fms-primary) !important;
}

.dark-mode .brand-link {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

.dark-mode .control-sidebar {
    background-color: var(--bs-card-bg) !important;
}

.dark-mode .control-sidebar-bg {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .swal2-popup {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-card-border-color) !important;
}

.dark-mode .select2-container--bootstrap5 .select2-selection {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
}

.dark-mode .select2-container--open .select2-selection {
    border-color: var(--fms-primary) !important;
}

.dark-mode .select2-dropdown {
    background-color: var(--bs-dropdown-bg) !important;
    border-color: var(--bs-dropdown-border-color) !important;
}

.dark-mode .select2-results__option {
    color: var(--bs-dropdown-link-color) !important;
}

.dark-mode .select2-results__option--highlighted {
    background-color: var(--bs-dropdown-link-hover-bg) !important;
}

.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border-color) !important;
    color: var(--bs-input-color) !important;
}

.dark-mode .dt-buttons .btn {
    background-color: #475569 !important;
    border-color: #64748b !important;
    color: #e2e8f0 !important;
}

.dark-mode .dt-buttons .btn:hover {
    background-color: #334155 !important;
}

.dark-mode .paginate_button {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

.dark-mode .paginate_button.current,
.dark-mode .paginate_button.current:hover {
    background-color: var(--fms-primary) !important;
    border-color: var(--fms-primary) !important;
}

.dark-mode .fc {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
}

.dark-mode .fc-theme-standard td,
.dark-mode .fc-theme-standard th {
    border-color: #475569 !important;
}

.dark-mode .flatpickr-calendar {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-card-border-color) !important;
}

.dark-mode .flatpickr-day {
    color: var(--bs-body-color) !important;
}

.dark-mode .flatpickr-day:hover {
    background-color: #475569 !important;
}

.dark-mode .flatpickr-day.selected,
.dark-mode .flatpickr-day.selected:hover {
    background-color: var(--fms-primary) !important;
    border-color: var(--fms-primary) !important;
}