/* ============================================
   Dark Theme — activates via [data-theme="dark"]
   ============================================ */

[data-theme="dark"] {
    /* Primary Brand Colors — kept dark enough for white text on buttons */
    --color-primary: #505050;
    --color-primary-dark: #606060;
    --color-primary-light: #404040;

    /* Accent Colors — orange stays vivid, pops on dark */
    --color-accent: #f5a623;
    --color-accent-dark: #d4801f;
    --color-accent-light: #f7b84d;

    /* Neutral Colors */
    --color-background: #121212;
    --color-surface: #1a1a1a;
    --color-text: #ffffff;
    --color-text-light: #d0d0d0;
    --color-text-muted: #a0a0a0;

    /* Hero overlay */
    --hero-overlay: rgba(0, 0, 0, 0.75);

    /* Shadows — stronger on dark backgrounds */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* Card/panel warm backgrounds */
    --color-card-warm: #1e1e1e;
    --color-card-warm-border: #2a2a2a;

    /* Borders */
    --color-border: #333333;
    --color-border-light: #2e2e2e;
    --color-border-subtle: #252525;

    /* Form inputs */
    --color-input-border: #4a4a4a;
    --color-input-bg: #2a2a2a;
    --color-input-disabled-bg: #333333;

    /* Alternate surface */
    --color-surface-alt: #1e1e1e;

    /* UI text variants */
    --color-text-dim: #888888;
    --color-text-faint: #777777;
    --color-text-ui: #a0a0a0;

    /* Container backgrounds */
    --color-navbar-bg: #161616;
    --color-card-bg: #1e1e1e;

    /* Accent gradients — same vivid orange */
    --color-accent-gradient-start: #f5a623;
    --color-accent-gradient-end: #e8912d;

    /* Action green — slightly brighter for dark bg */
    --color-action-green: #34c759;
    --color-action-green-dark: #2db84d;

    /* Links and focus */
    --color-link: #5ba3d9;
    --color-focus-ring: #5ba3d9;

    color-scheme: dark;
}

/* ============================================
   Bootstrap Component Overrides
   ============================================ */

[data-theme="dark"] body {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-body h3,
[data-theme="dark"] .card-body h5 {
    color: var(--color-text);
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-input-bg);
    border-color: var(--color-accent);
    color: var(--color-text);
    box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--color-text-dim);
}

[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control:read-only,
[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control:disabled {
    background-color: var(--color-input-disabled-bg);
    color: var(--color-text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--color-text);
}

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

[data-theme="dark"] .form-check-input {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .form-check-label {
    color: var(--color-text);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--color-surface);
    border-color: var(--color-input-border);
    color: var(--color-text-muted);
}

/* Text utility overrides */
[data-theme="dark"] .text-muted {
    color: var(--color-text-muted) !important;
}

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

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

/* Background utility overrides */
[data-theme="dark"] .bg-light {
    background-color: var(--color-surface) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--color-card-bg) !important;
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: rgba(52, 199, 89, 0.15);
    border-color: rgba(52, 199, 89, 0.3);
    color: #6ee7a0;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f5a0a8;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffe082;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.3);
    color: #80deea;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Buttons — primary/secondary/outline all need readable contrast */
[data-theme="dark"] .btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent-dark);
    color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

[data-theme="dark"] .btn-outline-primary {
    background: linear-gradient(135deg, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
    border: none;
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-primary:visited {
    background: linear-gradient(135deg, var(--color-accent-gradient-end), var(--color-accent-dark));
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-primary:active {
    background: linear-gradient(135deg, var(--color-accent-dark), #c07018) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-info {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-info:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-success:active,
[data-theme="dark"] .btn-outline-danger:active,
[data-theme="dark"] .btn-outline-warning:active,
[data-theme="dark"] .btn-outline-info:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--color-border);
}

/* Nav tabs / pills */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--color-border);
}

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

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

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-card-bg);
    border-color: var(--color-border) var(--color-border) var(--color-card-bg);
    color: var(--color-text);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-link);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* ============================================
   Profile Page Overrides
   ============================================ */

/* Profile navigation tabs */
[data-theme="dark"] .profile-nav .nav-link {
    color: var(--color-text-muted);
}

[data-theme="dark"] .profile-nav .nav-link.active,
[data-theme="dark"] .profile-nav .nav-link:hover {
    color: var(--color-text);
}

/* Read-only form fields in profile */
[data-theme="dark"] .form-control[readonly]:not([disabled]),
[data-theme="dark"] .form-control:read-only:not([disabled]) {
    background-color: var(--color-input-disabled-bg);
    color: var(--color-text-muted);
}

/* ============================================
   Tabulator Overrides
   ============================================ */

[data-theme="dark"] .tabulator {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-header {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col {
    background-color: var(--color-surface);
    border-right-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col:hover {
    background-color: #2a2a2a;
}

[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-header-filter input,
[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    background-color: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    background-color: var(--color-card-bg);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background-color: #2a2a2a;
}

[data-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border-right-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-footer {
    background-color: var(--color-card-bg);
    border-top-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page,
[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size,
[data-theme="dark"] .tabulator .tabulator-footer select {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ============================================
   Appbar Dark Overrides (Phase 8A.5)
   ============================================ */

[data-theme="dark"] .appbar {
    background-color: #1E1E1E !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Items */
[data-theme="dark"] .appbar-item {
    color: #E5E5E5 !important;
}

[data-theme="dark"] .appbar-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .appbar-item.active {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .appbar-item .appbar-item-icon {
    color: #A0A0A0 !important;
}

/* Active icons still use group accents in dark mode */
[data-theme="dark"] .appbar-section[data-group="work"] .appbar-item.active .appbar-item-icon,
[data-theme="dark"] .appbar-item.dashboard.active .appbar-item-icon {
    color: var(--appbar-group-work-accent) !important;
}

[data-theme="dark"] .appbar-section[data-group="money"] .appbar-item.active .appbar-item-icon {
    color: var(--appbar-group-money-accent) !important;
}

[data-theme="dark"] .appbar-section[data-group="my-juju"] .appbar-item.active .appbar-item-icon {
    color: var(--appbar-group-myjuju-accent) !important;
}

[data-theme="dark"] .appbar-section[data-group="account"] .appbar-item.active .appbar-item-icon {
    color: var(--appbar-group-account-accent) !important;
}

/* Group tints — subtle in dark mode */
[data-theme="dark"] .appbar-section[data-group] {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Tool lines */
[data-theme="dark"] .appbar-section + .appbar-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Group labels */
[data-theme="dark"] .appbar-section-title {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .appbar-subgroup-label {
    color: rgba(255, 255, 255, 0.4);
}

/* Dashboard */
[data-theme="dark"] .appbar-item.dashboard {
    background-color: #2A2A2A;
}

[data-theme="dark"] .appbar-item.dashboard:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Top zone */
[data-theme="dark"] .appbar-top {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .appbar-logo {
    color: #E5E5E5;
}

/* Bottom zone */
[data-theme="dark"] .appbar-bottom {
    background: #1E1E1E;
    border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .appbar-user-email {
    color: #A0A0A0;
}

[data-theme="dark"] .appbar-user-role-badge {
    background-color: rgba(255, 255, 255, 0.08);
    color: #A0A0A0;
}

[data-theme="dark"] .appbar-logout {
    color: #FF6B81;
}

[data-theme="dark"] .appbar-logout:hover {
    color: #FF8C9D;
}

/* ============================================
   Mobile Top Bar — logo needs invert for dark
   ============================================ */

[data-theme="dark"] .sb-topbar-brand img {
    filter: brightness(0) invert(1);
}

/* Public navbar logo also needs invert */
[data-theme="dark"] .navbar-brand img {
    filter: brightness(0) invert(1);
}

/* Navbar toggler icon */
[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* ============================================
   Headings and general text
   ============================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text);
}

[data-theme="dark"] p {
    color: var(--color-text);
}

[data-theme="dark"] label {
    color: var(--color-text);
}

[data-theme="dark"] a {
    color: var(--color-link);
}

[data-theme="dark"] a:hover {
    color: #7bb8e3;
}

/* ============================================
   Scrollbar Styling
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Offcanvas (mobile sidebar)
   ============================================ */

[data-theme="dark"] .offcanvas,
[data-theme="dark"] .offcanvas-lg {
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

/* ============================================
   Accordion
   ============================================ */

[data-theme="dark"] .accordion-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* ============================================
   Badges
   ============================================ */

[data-theme="dark"] .badge.bg-light {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

/* ============================================
   Spinner
   ============================================ */

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

/* ============================================
   Borders - Bootstrap utility class overrides
   ============================================ */

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

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

/* ============================================
   Appearance Toggle Card Styling
   ============================================ */

.theme-toggle-card .form-check-input {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
}

.theme-toggle-card .form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.theme-toggle-icon {
    font-size: 2rem;
    transition: color 0.3s ease;
}

/* ============================================
   Tree Inventory Dark Overrides
   ============================================ */

/* Map button — needs visible icon on dark card bg */
[data-theme="dark"] .ti-map-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .ti-map-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* View toggle buttons (List/Map/etc.) */
[data-theme="dark"] .ti-view-btn {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .ti-view-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .ti-view-btn.active {
    color: #fff;
}

/* Detail card */
[data-theme="dark"] .ti-detail-card {
    background: var(--color-card-bg);
    color: var(--color-text);
}

/* Field labels */
[data-theme="dark"] .ti-field-label {
    color: var(--color-text-muted);
}

/* ============================================
   Navbar Brand Text Override
   ============================================ */

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



/* ============================================
   Tables — hover row fix
   ============================================ */

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: #2a2a2a;
    color: var(--color-text);
}

[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .table > tbody > tr > td {
    border-bottom-color: var(--color-border);
}

/* ============================================
   Date/time inputs — browser-rendered controls
   ============================================ */

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

/* Select option elements */
[data-theme="dark"] .form-select option {
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

/* ============================================
   Tabulator — page size selector and counter
   ============================================ */

[data-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator label,
[data-theme="dark"] .tabulator .tabulator-footer .tabulator-page-counter {
    color: var(--color-text-muted) !important;
}

/* Fix table backgrounds in dark mode */
[data-theme="dark"] .table {
    background-color: transparent;
}

[data-theme="dark"] .table thead th {
    background-color: var(--color-surface);
    color: var(--color-text);
}

[data-theme="dark"] .table tbody tr {
    background-color: var(--color-card-bg);
}

[data-theme="dark"] .table tbody td {
    background-color: transparent;
    color: var(--color-text);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(245, 166, 35, 0.1) !important;
}

[data-theme="dark"] #workItemsTable,
[data-theme="dark"] #crewTable,
[data-theme="dark"] #equipmentTable {
    background-color: transparent;
}