/* ============================================
   Axess AWS Serverless - Theme System
   Light/Dark Mode with Brand Colors
   ============================================ */

/* Root CSS Variables - Light Mode (Default) */
:root {
    /* Brand Colors */
    --axess-green: #91c03f;
    --axess-green-light: #a8d55f;
    --axess-green-dark: #7aad2f;
    --axess-purple: #592d86;
    --axess-purple-light: #7a4aa3;
    --axess-purple-dark: #3f1f5e;

    /* Light Mode Colors */
    --primary-color: var(--axess-green);
    --secondary-color: var(--axess-purple);

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #f1f3f5;
    --bg-active: #dee2e6;

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-tertiary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;

    /* Status Colors */
    --success: #28a745;
    --success-light: #d4edda;
    --info: #17a2b8;
    --info-light: #d1ecf1;
    --warning: #ffc107;
    --warning-light: #fff3cd;
    --danger: #dc3545;
    --danger-light: #f8d7da;

    /* Component Specific */
    --navbar-bg: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --navbar-hover: var(--bg-hover);
    --sidebar-bg: var(--bg-secondary);
    --sidebar-text: var(--text-secondary);
    --card-bg: var(--bg-primary);
    --card-shadow: rgba(0, 0, 0, 0.1);
    --table-stripe: var(--bg-secondary);
    --table-hover: var(--bg-hover);

    /* Buttons - Light Mode uses Purple for primary */
    --btn-primary-bg: var(--axess-purple);
    --btn-primary-text: #ffffff;
    --btn-primary-hover: var(--axess-purple-dark);
    --btn-primary-disabled: #b8a3d1; /* Lighter purple for disabled */
    --btn-secondary-bg: var(--axess-green);
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover: var(--axess-green-dark);

    /* Inputs */
    --input-bg: var(--bg-primary);
    --input-border: var(--border-color);
    --input-focus: var(--primary-color);
    --input-text: var(--text-primary);

    /* Shadows */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Bootstrap close button (X) - default is dark, no filter needed */
    --btn-close-filter: none;
}

/* Dark Mode Colors */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1a1d23;
    --bg-secondary: #22262e;
    --bg-tertiary: #2d323c;
    --bg-hover: #363b47;
    --bg-active: #404551;

    /* Text Colors */
    --text-primary: #e9ecef;
    --text-secondary: #cbd5e0;
    --text-tertiary: #a0aec0;
    --text-muted: #718096;
    --text-inverse: #1a1d23;

    /* Border Colors */
    --border-color: #404551;
    --border-light: #363b47;
    --border-dark: #4a5060;

    /* Adjusted Brand Colors for Dark Mode (slightly muted) */
    --primary-color: #a8d55f;
    --secondary-color: #7a4aa3;
    --axess-green: #a8d55f;
    --axess-purple: #7a4aa3;

    /* Status Colors (adjusted for dark mode) */
    --success: #48bb78;
    --success-light: #2d4a3e;
    --info: #4299e1;
    --info-light: #2d3e50;
    --warning: #f6ad55;
    --warning-light: #4a3f2e;
    --danger: #fc8181;
    --danger-light: #4a2e2e;

    /* Component Specific */
    --navbar-bg: var(--bg-primary);
    --navbar-text: var(--text-primary);
    --navbar-hover: var(--bg-hover);
    --sidebar-bg: var(--bg-secondary);
    --sidebar-text: var(--text-secondary);
    --card-bg: var(--bg-secondary);
    --card-shadow: rgba(0, 0, 0, 0.3);
    --table-stripe: var(--bg-tertiary);
    --table-hover: var(--bg-hover);

    /* Buttons - Dark Mode uses Green for primary */
    --btn-primary-bg: var(--axess-green);
    --btn-primary-text: #1a1d23;
    --btn-primary-hover: var(--axess-green-light);
    --btn-primary-disabled: #6a8a4a; /* Darker muted green for disabled */
    --btn-secondary-bg: var(--axess-purple);
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover: var(--axess-purple-light);

    /* Inputs */
    --input-bg: var(--bg-tertiary);
    --input-border: var(--border-color);
    --input-focus: var(--primary-color);
    --input-text: var(--text-primary);

    /* Shadows */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.7);

    /* Bootstrap close button (X) - invert for dark mode to make it visible */
    --btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   Base Element Theming
   ============================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
}

/* Lead text */
.lead {
    color: var(--text-secondary);
}

/* Text utilities - override Bootstrap defaults */
.text-muted {
    color: var(--text-muted) !important;
}

/* Make text-muted more visible in dark mode */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Global Scrollbar Styling */
/* Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--border-dark);
    border-radius: 7px;
    border: 3px solid var(--bg-secondary);
}

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

::-webkit-scrollbar-corner {
    background-color: var(--bg-secondary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) var(--bg-secondary);
}

/* Links */
a {
    color: var(--primary-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--axess-green-dark);
}

[data-theme="dark"] a:hover {
    color: var(--axess-green-light);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

.card-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

.card-title {
    color: var(--text-primary);
}

.card-body {
    color: var(--text-primary);
}

/* List Groups */
.list-group-item {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item-action {
    color: var(--text-primary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Tables */
.table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover);
}

/* DataTables Specific */
.dataTables_wrapper {
    color: var(--text-primary);
}

/* DataTables search input */
.dataTables_filter input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.dataTables_filter input::placeholder {
    color: var(--text-muted);
}

/* DataTables length select */
.dataTables_length select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* DataTables info text */
div.dataTables_wrapper div.dataTables_info {
    color: var(--text-secondary);
}

/* DataTables processing overlay */
.dataTables_processing {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* DataTables header sorting */
table.dataTable thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--text-tertiary) !important;
}

/* DataTables table body - force background colors on all variants */
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable.stripe tbody tr.even {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* DataTables striped rows - override all stripe variants */
table.dataTable tbody tr:nth-of-type(odd),
table.dataTable.display tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable tbody tr.odd {
    background-color: var(--table-stripe) !important;
}

table.dataTable tbody tr:nth-of-type(even),
table.dataTable.display tbody tr:nth-of-type(even),
table.dataTable.stripe tbody tr.even,
table.dataTable tbody tr.even {
    background-color: var(--bg-primary) !important;
}

/* DataTables hover - override all hover variants */
table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
    background-color: var(--table-hover) !important;
}

/* DataTables cells */
table.dataTable tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background-color: transparent !important;
}

/* DataTables footer */
table.dataTable tfoot th,
table.dataTable tfoot td {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* DataTables table borders */
table.dataTable,
table.dataTable.display {
    border-color: var(--border-color) !important;
}

table.dataTable.no-footer {
    border-bottom-color: var(--border-color) !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom-color: var(--border-color) !important;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
    border-top-color: var(--border-color) !important;
}

/* DataTables empty table message */
.dataTables_empty {
    color: var(--text-secondary) !important;
    background-color: var(--bg-primary) !important;
}

/* DataTables scrolling wrapper */
div.dataTables_scrollBody {
    background-color: var(--bg-primary);
}

div.dataTables_scrollHead table.dataTable {
    background-color: var(--bg-primary);
}

/* DataTables wrapper sections */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    color: var(--text-primary);
}

/* DataTables scrollbar styling */
div.dataTables_scrollBody::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

div.dataTables_scrollBody::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
    border-radius: 6px;
}

div.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: var(--border-dark);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
}

div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-tertiary);
}

/* Firefox scrollbar */
div.dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) var(--bg-secondary);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.pagination .page-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-dark);
    color: var(--primary-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--btn-primary-text);
}

/* Buttons */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: var(--btn-primary-text);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--btn-primary-disabled);
    border-color: var(--btn-primary-disabled);
    color: var(--btn-primary-text);
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus);
    color: var(--input-text);
    box-shadow: 0 0 0 0.2rem rgba(145, 192, 63, 0.25);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(168, 213, 95, 0.25);
}

.form-label,
.form-check-label {
    color: var(--text-secondary);
}

/* Disabled form controls */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* Readonly form controls */
.form-control[readonly] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-tertiary);
}

/* Placeholder text */
.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* File inputs - custom styling for dark mode compatibility */
input[type="file"] {
    color: var(--text-primary);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="file"]:hover {
    border-color: var(--input-focus);
}

input[type="file"]:focus {
    border-color: var(--input-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(145, 192, 63, 0.25);
}

[data-theme="dark"] input[type="file"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(168, 213, 95, 0.25);
}

/* File input button (Choose File) */
input[type="file"]::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--btn-primary-hover);
}

/* Date and Time Inputs - Dark Mode Support */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    color-scheme: light;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

/* Date/Time picker calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: none;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Webkit browsers (Chrome, Safari, Edge) */
input[type="file"]::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--btn-primary-hover);
}

/* Navigation - Light Mode (Axess Purple) */
.navbar {
    background-color: var(--axess-purple) !important;
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand {
    color: #ffffff !important;
    background-color: var(--axess-purple);
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.nav-link {
    color: #ffffff !important;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
}

.navbar [data-theme-toggle] {
    color: #ffffff !important;
}

.navbar [data-theme-toggle]:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Navigation - Dark Mode (adaptive dark background) */
[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .navbar-brand {
    background-color: transparent;
}

[data-theme="dark"] .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link:hover {
    background-color: var(--bg-hover);
}

[data-theme="dark"] .navbar [data-theme-toggle] {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar [data-theme-toggle]:hover {
    background-color: var(--bg-hover);
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.dropdown-divider {
    border-top-color: var(--border-color);
}

/* Sidebar (if you have one) */
.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--border-color);
}

/* Modals */
.modal-content {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.modal-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

.modal-header .modal-title {
    color: var(--text-primary);
}

/* Modal close button */
.modal-header .btn-close {
    filter: var(--btn-close-filter);
}

.modal-body {
    color: var(--text-primary);
}

.modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Alerts */
.alert-success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--success);
}

.alert-info {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info);
}

.alert-warning {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-danger {
    background-color: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
}

/* Validation Messages */
.text-danger {
    color: var(--danger) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--danger) !important;
}

/* Form validation feedback */
.invalid-feedback {
    color: var(--danger);
}

.valid-feedback {
    color: var(--success);
}

/* Theme Toggle Button Styles */
.theme-toggle {
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-active);
}

.theme-toggle-slider {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--primary-color);
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: 0.75rem;
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(1.5rem);
}

/* Utility Classes */
.text-primary-color {
    color: var(--primary-color);
}

.text-secondary-color {
    color: var(--secondary-color);
}

.bg-primary-color {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.bg-secondary-color {
    background-color: var(--secondary-color);
    color: var(--text-inverse);
}

.border-primary-color {
    border-color: var(--primary-color);
}

.border-secondary-color {
    border-color: var(--secondary-color);
}

/* ==========================================================================
   DataTables child-row expander (td.dt-control)
   DataTables 2.x draws the expand/collapse arrow with rgba(0,0,0,0.5)
   borders, which is invisible on the dark theme (and nearly so on light).
   Recolor it with the theme text color so the control is discoverable.
   Used on Technician/ServiceReports and Technician/Inspections.
   ========================================================================== */
table.dataTable td.dt-control {
    cursor: pointer;
}

table.dataTable td.dt-control::before {
    border-left-color: var(--text-primary) !important;
}

table.dataTable tr.dt-hasChild td.dt-control::before {
    border-top-color: var(--text-primary) !important;
    border-left-color: transparent !important;
}

/* ==========================================================================
   Bootstrap 5.3 table theming
   Bootstrap paints tables through its own CSS variables at the CELL level
   (striping is an inset box-shadow with --bs-table-striped-bg), which
   overrides the row-level .table rules above and left tables white in dark
   mode (e.g. the condition table in the location-inspection modal).
   Point Bootstrap's variables at the theme palette instead; the palette
   variables flip under [data-theme="dark"], so one block covers both themes.
   ========================================================================== */
.table {
    --bs-table-bg: var(--bg-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}