/* =========================
   DARK THEME (DEFAULT)
========================= */

:root {
  --fo-bg: #0f172a;
  --fo-card: #1e293b;
  --fo-border: #334155;

  --fo-text-primary: #f1f5f9;
  --fo-text-secondary: #94a3b8;

  --fo-green: #22c55e;
  --fo-green-soft: #14532d;

  --fo-red: #ef4444;
  --fo-yellow: #f59e0b;

  --fo-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--fo-bg) !important;
    color: var(--fo-text-primary) !important;
    overflow-x: hidden;
}

body {
    background: var(--fo-bg) !important;
    color: var(--fo-text-primary) !important;
}

div, main, section, .content, .page {
    background: none !important;
    background-color: transparent !important;
    color: inherit;
}

/* Remove/override any white backgrounds globally */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
.bg-white,
.background-white,
.bg-light,
.background-light {
    background: var(--fo-card) !important;
    background-color: var(--fo-card) !important;
    color: var(--fo-text-primary) !important;
}

body {
    background: var(--fo-bg) !important;
    color: var(--fo-text-primary) !important;
}


/* Theme variables (set by .dark/.light on body) */
/* DARK THEME DEFAULTS */
:root {
    --fo-bg: #0f172a;
    --fo-bg-alt: #172033;
    --fo-card: #1e293b;
    --fo-card-hover: #273449;
    --fo-border: #334155;
    --fo-border-hover: #475569;
    --fo-shadow: 0 4px 20px rgba(0,0,0,0.4);
    --fo-shadow-rgb: 0,0,0;

    /* Text */
    --fo-text-primary: #f1f5f9;
    --fo-text-secondary: #94a3b8;
    --fo-text-tertiary: #64748b;
    --fo-text-on-green: #fff;
    --fo-text-on-yellow: #1a0a00;
    --fo-text-on-red: #fff;

    /* Blue (info/primary) */
    --fo-blue: #0ea5e9;
    --fo-blue-dark: #1e3a8a;
    --fo-blue-xlight: #dbeafe;
    --fo-blue-light: #93c5fd;
    --fo-blue-soft: #e0f2fe;
    --fo-blue-rgb: 14,165,233;

    /* Green (success) */
    --fo-green: #22c55e;
    --fo-green-soft: #14532d;
    --fo-green-rgb: 34,197,94;

    /* Yellow (warning) */
    --fo-yellow: #f59e0b;
    --fo-yellow-dark: #92400e;
    --fo-yellow-light: #fef3c7;
    --fo-yellow-darker: #b45309;
    --fo-yellow-bg: #fffbeb;
    --fo-yellow-soft: #fef9c3;
    --fo-yellow-rgb: 245,158,11;

    /* Red (danger) */
    --fo-red: #ef4444;
    --fo-red-dark: #7f1d1d;
    --fo-red-light: #fee2e2;
    --fo-red-bg: #3b0f0f;
    --fo-red-soft: #fee2e2;
    --fo-red-rgb: 239,68,68;

    /* Badge/plan colors */
    --fo-badge-starter-bg: rgba(148,163,184,0.2);
    --fo-badge-starter: #94a3b8;
    --fo-badge-starter-border: rgba(148,163,184,0.3);
    --fo-badge-growth-bg: rgba(59,130,246,0.15);
    --fo-badge-growth: #60a5fa;
    --fo-badge-growth-border: rgba(59,130,246,0.3);
    --fo-badge-pro-bg: rgba(139,92,246,0.15);
    --fo-badge-pro: #a78bfa;
    --fo-badge-pro-border: rgba(139,92,246,0.3);

    /* Overlay/utility */
    --fo-overlay-rgb: 10,12,18;
    --fo-warning-bg: #fef3c7;

    /* ?? Explicit dark-theme aliases ?? */
    --fo-bg-main: var(--fo-bg);        /* #0f172a */
    --fo-bg-secondary: var(--fo-card); /* #1e293b */
    --fo-bg-hover: var(--fo-border);   /* #334155 */

    color-scheme: dark;
}

/* ?? Stale item highlights (used via StaleItemDto.SeverityCssClass) ???????? */
/* Apply to any list row, card, or table row that wraps a StaleItemDto.       */
.fo-stale-warning {
    border-left: 3px solid var(--fo-yellow, #f59e0b) !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
}

.fo-stale-danger {
    border-left: 3px solid var(--fo-red, #ef4444) !important;
    background-color: rgba(239, 68, 68, 0.10) !important;
}

/* Inside fo-dashboard light theme � use opaque tints */
.fo-dashboard .fo-stale-warning {
    border-left-color: var(--fo-yellow) !important;
    background-color: var(--fo-yellow-soft) !important;
}

.fo-dashboard .fo-stale-danger {
    border-left-color: var(--fo-red) !important;
    background-color: var(--fo-red-soft) !important;
}
/* ?? End stale item highlights ????????????????????????????????????????????? */

/* ============================================
   Global White Text Enforcement
   ============================================ */

/* Override default text colors to white */
body, p, span, div, label, a,
h1, h2, h3, h4, h5, h6,
.form-label, .form-text,
.list-group-item, .card, .card-body, .card-header, .card-footer,
.table, .table td, .table th, .table-responsive,
.alert, .modal, .modal-body, .modal-header, .modal-footer,
.dropdown-menu, .dropdown-item,
.nav-link, .navbar-text,
.breadcrumb-item {
    color: var(--fo-text-primary) !important;
}

/* Bootstrap Table Override - White Text */
.table,
.table thead th,
.table tbody td,
.table tbody tr,
.table-hover tbody tr,
.table-striped tbody tr,
.table-responsive {
    color: var(--fo-text-primary) !important;
}


/* Table hover/selected/active states - Dark Theme */
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: var(--fo-card-hover) !important;
    color: var(--fo-text-primary) !important;
    transition: all 0.15s ease;
}

.table-hover tbody tr.selected,
.table-hover tbody tr.active,
.table-hover tbody tr.selected td,
.table-hover tbody tr.active td {
    background-color: var(--fo-border) !important;
    color: var(--fo-text-primary) !important;
    transition: all 0.15s ease;
}

/* Bootstrap Card Override - White Text */
.card,
.card-body,
.card-header,
.card-footer,
.card-title,
.card-text {
    color: var(--fo-text-primary) !important;
}

/* Progress bar text */
.progress,
.progress-bar {
    color: var(--fo-text-primary) !important;
}

/* Form controls - white text */
input, textarea, select,
.form-control, .form-select, .dark-input {
    color: var(--fo-text-primary) !important;
}

/* Placeholder text - slightly muted but still visible */
::placeholder {
    color: var(--fo-text-secondary) !important;
    opacity: 1;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.dark-input::placeholder {
    color: var(--fo-text-secondary) !important;
    opacity: 1;
}

/* Preserve success/validation colors (green) */
.text-success,
.valid, .valid-feedback,
.badge.bg-success,
.alert-success {
    color: var(--fo-green) !important;
}

/* Preserve warning colors (yellow/orange) */
.text-warning,
.badge.bg-warning,
.alert-warning {
    color: var(--fo-yellow) !important;
}

/* Preserve danger/error colors (red) */
.text-danger,
.invalid, .invalid-feedback,
.badge.bg-danger,
.alert-danger {
    color: var(--fo-red) !important;
}

.validation-message {
    background-color: var(--fo-red-soft);
    color: var(--fo-bg) !important;
    padding: 8px;
    border-radius: 4px;
}

/* Preserve info colors (blue) */
.text-info,
.badge.bg-info,
.alert-info {
    color: var(--fo-blue) !important;
}

/* Override muted text to be light gray instead of black */
.text-muted,
small.text-muted,
.form-text {
    color: var(--fo-text-secondary) !important;
}

/* Ensure buttons have proper text color */
.btn {
    color: var(--fo-text-primary);
}

.btn-primary {
    color: var(--fo-text-primary) !important;
}


.btn-secondary,
.btn-outline-secondary {
    color: var(--fo-text-primary) !important;
    background: var(--fo-card) !important;
    border-color: var(--fo-border) !important;
    transition: all 0.15s ease;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--fo-card-hover) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border-hover) !important;
    transition: all 0.15s ease;
}

/* Links should be visible */
a {
    color: var(--fo-blue) !important;
}

a:hover {
    color: var(--fo-blue-soft) !important;
}

/* Special case: dark text on light/warning backgrounds */
.crew-near-capacity,
.crew-near-capacity a,
.badge.bg-warning,
.alert-warning {
    color: var(--fo-bg) !important;
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.slide-up {
    animation: slideUp 0.35s ease-out forwards;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes slideUp {
    from { 
        opacity: 0; 
        transform: translateY(8px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

a, .btn-link {
    color: #0ea5e9;
}

.btn {
    transition: all 0.15s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn:hover {
    filter: brightness(1.05);
}

/* Crew Capacity Header Styles */
.crew-overcapacity {
    background-color: var(--fo-red) !important;
    color: var(--fo-text-primary) !important;
}

.crew-overcapacity a {
    color: var(--fo-text-primary) !important;
    font-weight: 600 !important;
}

.crew-near-capacity {
    background-color: var(--fo-yellow) !important;
    color: var(--fo-bg) !important;
}

.crew-near-capacity a {
    color: var(--fo-bg) !important;
    font-weight: 600 !important;
}

.crew-optimal {
    background-color: var(--fo-green) !important;
    color: var(--fo-text-primary) !important;
}

.crew-optimal a {
    color: var(--fo-text-primary) !important;
}

.crew-under-capacity {
    background-color: var(--fo-border) !important;
    color: var(--fo-text-primary) !important;
}

.crew-under-capacity a {
    color: var(--fo-text-primary) !important;
}

.btn-primary {
    color: var(--fo-text-primary);
    background-color: var(--fo-blue);
    border-color: var(--fo-blue);
}

.btn-outline-secondary {
    border-color: var(--fo-border);
    color: var(--fo-text-secondary);
}

/* ============================================
   Dark Theme Form Styles
   ============================================ */

/* Global Form Controls - Dark Theme */
.form-control,
.form-select,
.dark-input {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Input focus states */
.form-control:focus,
.form-select:focus,
.dark-input:focus {
    background-color: #1e293b !important;
    border-color: #0ea5e9 !important;
    color: #f8fafc !important;
    box-shadow: 0 0 0 0.25rem rgba(14, 165, 233, 0.25) !important;
}

/* Placeholder text */
.form-control::placeholder,
.dark-input::placeholder {
    color: #64748b !important;
    opacity: 1;
}

/* Input disabled state */
.form-control:disabled,
.form-select:disabled,
.dark-input:disabled {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #64748b !important;
    opacity: 0.6;
}

/* Select dropdown options */
.form-select option {
    background-color: #1e293b;
    color: #f8fafc;
}

/* Textarea specific */
textarea.form-control,
textarea.dark-input {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Form labels */
.form-label {
    color: #cbd5e1 !important;
    font-weight: 500;
}

/* Form text (helper text) */
.form-text {
    color: #94a3b8 !important;
}

/* Validation styles */
.text-danger {
    color: #ef4444 !important;
}

.validation-message {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--fo-text-primary) !important;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.valid {
    color: #10b981 !important;
}

.invalid {
    border-color: #ef4444 !important;
}

.valid-feedback {
    color: #10b981 !important;
}

.invalid-feedback {
    color: #ef4444 !important;
}

/* Input groups */
.input-group-text {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

/* Checkboxes and radios */
.form-check-input {
    background-color: #1e293b;
    border-color: #334155;
}

.form-check-input:checked {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
}

.form-check-label {
    color: #cbd5e1;
}

/* DateTimeLocal inputs */
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
    color-scheme: dark;
}

/* Number input spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    filter: invert(1);
}

/* Date input calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.btn-outline-secondary:hover {
    background-color: var(--fo-border);
    color: var(--fo-text-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0ea5e9;
}

.content {
    padding-top: 1.1rem;
}

h1 {
    font-size: 1.85rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f8fafc;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--fo-text-primary) !important;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg  NjY2LjAwMTgzIDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


.card,
.kpi-card {
    background-color: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
    transition: all 0.15s ease;
    animation: slideUp 0.35s ease-out forwards;
}

.kpi-card:hover,
.card:hover {
    background-color: var(--fo-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Selectable card highlight */
.card.selected,
.card.active {
    background-color: var(--fo-border);
    border-color: var(--fo-border-hover);
    color: var(--fo-text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

/* Optional: primary highlight for important selections */
.card.primary-highlight {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: #22c55e;
}

.kpi-card:has(.table-dark-custom):hover {
    background-color: #1e293b;
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: #f8fafc;
}

.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    font-weight: 500;
}

.financial-kpi {
    padding: 16px 12px;
    border-radius: 10px;
    background-color: #0f172a;
    border: 1px solid #334155;
}

.ar-balance-emphasis {
    background-color: rgba(14, 165, 233, 0.15);
    border: 1px solid #0ea5e9;
}

.ar-balance-emphasis .kpi-value {
    color: #0ea5e9;
}

.ar-good {
    background-color: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
}

.ar-good .kpi-value {
    color: #10b981;
}

.ar-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
}

.ar-warning .kpi-value {
    color: #f59e0b;
}

.ar-critical {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    animation: pulseGlow 2s infinite;
}

.ar-critical .kpi-value {
    color: #ef4444;
    font-weight: 600;
}

/* Dark Form Styles - Reusable for all forms on dark theme */
.fo-dark-form .form-label,
.fo-dark-form label {
    color: #f8fafc;
    font-weight: 500;
}

.fo-dark-form .form-text,
.fo-dark-form small.text-muted,
.fo-dark-form .text-muted {
    color: #94a3b8 !important;
}

.fo-dark-form .form-control,
.fo-dark-form .form-select,
.fo-dark-form input[type="text"],
.fo-dark-form input[type="number"],
.fo-dark-form input[type="datetime-local"],
.fo-dark-form input[type="date"],
.fo-dark-form textarea,
.fo-dark-form select {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.fo-dark-form .form-control::placeholder,
.fo-dark-form input::placeholder,
.fo-dark-form textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.fo-dark-form .form-select option {
    background-color: #1e293b;
    color: #f8fafc;
}

.fo-dark-form .form-control:focus,
.fo-dark-form .form-select:focus,
.fo-dark-form input:focus,
.fo-dark-form textarea:focus,
.fo-dark-form select:focus {
    background-color: #1e293b;
    border-color: #0ea5e9;
    color: #f8fafc;
    box-shadow: 0 0 0 0.1rem rgba(14, 165, 233, 0.25);
}

.fo-dark-form .form-control:disabled,
.fo-dark-form .form-select:disabled {
    background-color: #0f172a;
    color: #64748b;
    border-color: #334155;
}

.fo-dark-form .dark-input {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

.fo-dark-form .dark-input:focus {
    background-color: #1e293b;
    border-color: #0ea5e9;
    color: #f8fafc;
}

@keyframes pulseGlow {
    0% { 
        box-shadow: 0 0 0 rgba(239, 68, 68, 0.4); 
    }
    50% { 
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); 
    }
    100% { 
        box-shadow: 0 0 0 rgba(239, 68, 68, 0.4); 
    }
}

.badge.bg-success {
    background-color: #10b981 !important;
}

.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #0f172a !important;
}

.badge.bg-danger {
    background-color: #ef4444 !important;
}

.text-muted {
    color: #94a3b8 !important;
}

.customer-sidebar {
    width: 240px;
    min-height: calc(100vh - 200px);
    background: var(--fo-card);
    border-right: 1px solid var(--fo-border);
    border-radius: 0;
    padding: 20px 0;
    margin-right: 20px;
    box-shadow: none;
    color: var(--fo-text-primary);
}

.customer-sidebar .nav-link {
    color: var(--fo-text-secondary);
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.customer-sidebar .nav-link:hover {
    background: var(--fo-bg);
    color: var(--fo-text-primary);
    border-left-color: var(--fo-green);
}

.customer-sidebar .nav-link.active {
    background: var(--fo-bg);
    color: var(--fo-text-primary);
    border-left-color: var(--fo-green);
}

.customer-sidebar .nav-link i {
    font-size: 1.1rem;
}
.customer-sidebar .nav-link i {
    font-size: 1.1rem;
}

.customer-content {
    padding: 20px;
}

.customer-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.customer-header-sticky::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.customer-header-sticky.scrolled::before {
    opacity: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(15, 23, 42, 0.92);
}

.customer-header-sticky.scrolled .customer-header-card {
    padding: 14px 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid #0ea5e9;
}

.customer-header-sticky.scrolled .customer-header-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.customer-header-sticky.scrolled .customer-header-contact,
.customer-header-sticky.scrolled .customer-header-address {
    font-size: 0.8rem;
}

.customer-header-sticky.scrolled .customer-header-actions {
    display: none;
}

.customer-header-sticky.scrolled .customer-header-badges .badge {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
}

.customer-header-sticky.scrolled .customer-header-kpis {
    margin-bottom: 0 !important;
}

.customer-header-sticky.scrolled .financial-kpi {
    padding: 10px 8px;
}

.customer-header-sticky.scrolled .kpi-label {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
}

.customer-header-sticky.scrolled .kpi-value {
    font-size: 1.25rem;
}

.activity-timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background-color: #334155;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    z-index: 1;
}

.timeline-icon-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 2px solid #10b981;
}

.timeline-icon-primary {
    background-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
    border: 2px solid #0ea5e9;
}

.timeline-icon-info {
    background-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 2px solid #8b5cf6;
}

.timeline-icon-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 2px solid #f59e0b;
}

.timeline-content {
    flex-grow: 1;
    padding-top: 4px;
}

.timeline-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 4px;
}

.timeline-timestamp {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.timeline-subtext {
    font-size: 0.85rem;
    color: #cbd5e1;
}

/* ============================================================
   FIELDOPS SHELL — Full-height layout with topbar
   ============================================================ */

/* ?? Body scroll lock (sidebar drawer open on mobile/tablet) ??????? */
body.sidebar-scroll-lock {
    overflow: hidden !important;
}

.fieldops-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .fieldops-shell {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .fieldops-body,
    .main-content {
        overflow: visible !important;
        height: auto !important;
    }
}

/* ============================================================
   DEVELOPMENT ENVIRONMENT BANNER � Jobsite / Construction Theme
   ============================================================ */

.dev-env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background:
        repeating-linear-gradient(
            -45deg,
            #1a1a1a,
            #1a1a1a 10px,
            #d4a017 10px,
            #d4a017 20px
        );
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    user-select: none;
    flex-shrink: 0;
}

.dev-env-banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: rgba(15, 23, 42, 0.92);
    margin: 3px 12px;
    padding: 4px 0;
    border-radius: 4px;
}

.dev-env-banner-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #facc15 !important;
    text-transform: uppercase;
}

.dev-env-banner-sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #94a3b8 !important;
    text-transform: uppercase;
}

/* Push content below the fixed banner when in dev mode */
.fieldops-shell--dev {
    padding-top: 42px;
}

/* ============================================================
   GLOBAL TOPBAR
   ============================================================ */

.fieldops-topbar {
    height: 60px;
    min-height: 60px;
    background: var(--fo-card);
    border-bottom: 1px solid var(--fo-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    position: relative;
    z-index: 200;
    box-shadow: none;
    flex-shrink: 0;
    color: var(--fo-text-primary);
}

/* LEFT — Logo */
.topbar-left {
    flex-shrink: 0;
    width: 200px;
}

.topbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 4px;
}

.topbar-logo i {
    font-size: 1.4rem;
    color: #0ea5e9;
}

.topbar-logo .logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.5px;
}

/* CENTER — Search + Quick Nav */
.topbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    min-width: 220px;
    max-width: 320px;
    flex-shrink: 0;
}

.topbar-search:hover {
    background-color: #273449;
    border-color: #0ea5e9;
}

.topbar-search-icon {
    color: #64748b;
    font-size: 0.9rem;
}

.topbar-search-placeholder {
    color: #64748b;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.topbar-search-kbd {
    font-size: 0.7rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 1px 5px;
    color: #64748b;
    flex-shrink: 0;
}

/* Quick nav links */
.topbar-quicknav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.topbar-nav-link {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.topbar-nav-link:hover {
    background-color: #1e293b;
    color: #e2e8f0;
}

.topbar-nav-link.active {
    background-color: #1e40af20;
    color: #60a5fa;
}

/* RIGHT — Alerts + Company + User */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-icon-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1;
}

.topbar-icon-btn:hover {
    background-color: #1e293b;
    color: #e2e8f0;
}

.topbar-icon-btn--alert {
    animation: bell-shake 2s ease-in-out infinite;
}

@keyframes bell-shake {
    0%, 90%, 100% { transform: rotate(0deg); }
    92%           { transform: rotate(-10deg); }
    96%           { transform: rotate(10deg); }
}

.topbar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
}

.topbar-divider {
    width: 1px;
    height: 24px;
    background-color: #334155;
}

/* ?? Supervisor alert bell dropdown ??????????????????????????????????? */
.topbar-alert-dropdown {
    position: relative;
}

.topbar-alert-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    overflow: hidden;
    animation: dropdown-fade-in 0.15s ease-out;
}

.topbar-alert-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #334155;
}

.topbar-alert-panel__title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.topbar-alert-panel__mark-read {
    background: none;
    border: none;
    font-size: 0.72rem;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.topbar-alert-panel__mark-read:hover {
    color: #94a3b8;
}

.topbar-alert-item {
    padding: 10px 14px;
    border-bottom: 1px solid #1e3a5f20;
    border-left: 3px solid transparent;
    transition: background-color 0.12s;
}

.topbar-alert-item:hover {
    background-color: #253447;
}

.topbar-alert-item--warning {
    border-left-color: #f59e0b;
}

.topbar-alert-item--critical {
    border-left-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.06);
}

.topbar-alert-item__title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-alert-item__body {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topbar-alert-item__age {
    font-size: 0.65rem;
    color: #475569;
    margin-top: 3px;
}

.topbar-alert-panel__overflow {
    text-align: center;
    font-size: 0.72rem;
    color: #64748b;
    padding: 6px 0;
    border-bottom: 1px solid #334155;
}

.topbar-alert-panel__empty {
    text-align: center;
    padding: 20px 14px;
    font-size: 0.8rem;
    color: #64748b;
}

.topbar-alert-panel__footer {
    border-top: 1px solid #334155;
}

.topbar-company {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.topbar-user:hover {
    border-color: #0ea5e9;
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-username {
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 500;
    white-space: nowrap;
}

/* ?? User Dropdown ???????????????????????????????????????????? */

.topbar-user-dropdown {
    position: relative;
}

.topbar-user-caret {
    font-size: 0.65rem;
    color: #64748b;
    transition: transform 0.2s;
    margin-left: 2px;
}

.topbar-user-caret--open {
    transform: rotate(180deg);
}

.topbar-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: #f1f5f9 !important;
    z-index: 1000;
    padding: 6px 0;
    animation: dropdown-fade-in 0.15s ease-out;
}

@keyframes dropdown-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topbar-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.topbar-dropdown-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

.topbar-dropdown-company {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 1px;
}

.topbar-dropdown-divider {
    height: 1px;
    background-color: #334155;
    margin: 4px 0;
}

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
}

.topbar-dropdown-item:hover {
    background-color: #60a5fa !important;
    color: #000 !important;
}

.topbar-dropdown-item--danger {
    color: #f87171;
}

.topbar-dropdown-item--danger:hover {
    background-color: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* ============================================================
   BODY BELOW TOPBAR
   ============================================================ */

.fieldops-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.main-sidebar {
    width: 220px;
    min-width: 220px;
    background-color: #172033;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease, min-width 0.3s ease;
    flex-shrink: 0;
}

/* Desktop collapsed state: narrow rail */
.sidebar-collapsed .main-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.app-logo {
    display: none;
}

.app-logo h3 {
    display: none;
}

.main-nav {
    padding: 20px 0;
    flex-grow: 1;
}

.main-nav .nav-link {
    color: #cbd5e1;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.main-nav .nav-link:hover {
    background-color: #273449;
    color: #f8fafc;
    border-left-color: #334155;
}

.main-nav .nav-link.active {
    background-color: #273449;
    color: #0ea5e9;
    border-left-color: #0ea5e9;
}

.main-nav .nav-link i {
    font-size: 1.2rem;
}

.nav-section-header {
    padding: 18px 20px 5px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #475569;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-bar {
    display: none;
}

.top-bar h4 {
    color: #f8fafc;
    font-weight: 600;
}

.user-menu-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-placeholder:hover {
    background-color: #273449;
    border-color: #0ea5e9;
}

.user-menu-placeholder i {
    font-size: 1.5rem;
}

.content-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
}

.chart-placeholder {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0f172a;
    border: 2px dashed #334155;
    border-radius: 10px;
    padding: 40px;
}

.chart-icon {
    font-size: 4rem;
    color: #334155;
    margin-bottom: 16px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #273449;
}

.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.activity-icon-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.activity-icon-primary {
    background-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.activity-icon-info {
    background-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.activity-icon-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.activity-details {
    flex-grow: 1;
}

.activity-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #f8fafc;
    margin-bottom: 2px;
}

.activity-time {
    font-size: 0.75rem;
    color: #94a3b8;
}

.global-search-bar {
    max-width: 500px;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.global-search-bar:hover {
    border-color: #0ea5e9;
    background-color: #273449;
    color: #cbd5e1;
}

.global-search-bar i {
    font-size: 1rem;
}

.global-search-bar span {
    flex-grow: 1;
}

.search-shortcut {
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.search-modal-container {
    width: 100%;
    max-width: 650px;
    background-color: #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-modal-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #273449;
}

.search-modal-input-wrapper i {
    font-size: 1.2rem;
    color: #94a3b8;
}

.search-modal-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 1.1rem;
    outline: none;
}

.search-modal-input::placeholder {
    color: #64748b;
}

.search-results {
    max-height: 500px;
    overflow-y: auto;
    padding: 12px;
}

.search-result-section {
    margin-bottom: 16px;
}

.search-result-section:last-child {
    margin-bottom: 0;
}

.search-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    font-weight: 600;
    padding: 8px 12px;
    margin-bottom: 4px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-result-item:hover {
    background-color: #273449;
}

.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.search-icon-customer {
    background-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
}

.search-icon-workorder {
    background-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.search-icon-invoice {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.search-result-content {
    flex-grow: 1;
}

.search-result-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 2px;
}

.search-result-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
}

.search-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.search-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.search-empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

.customer-health-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
}

.health-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.health-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.health-good .health-circle {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 2px solid #10b981;
}

.health-good .health-label {
    color: #10b981;
}

.health-warning .health-circle {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 2px solid #f59e0b;
}

.health-warning .health-label {
    color: #f59e0b;
}

.health-critical .health-circle {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 2px solid #ef4444;
    animation: pulse-health-critical 2s ease-in-out infinite;
}

.health-critical .health-label {
    color: #ef4444;
}

@keyframes pulse-health-critical {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.ar-aging-summary {
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
}

.aging-bucket {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.aging-bucket:last-child {
    margin-bottom: 0;
}

.aging-label {
    font-size: 0.75rem;
    color: #94a3b8;
    width: 80px;
    flex-shrink: 0;
}

.aging-bar-container {
    flex-grow: 1;
    height: 8px;
    background-color: #1e293b;
    border-radius: 4px;
    overflow: hidden;
}

.aging-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.aging-current {
    background: linear-gradient(90deg, #10b981, #059669);
}

.aging-30 {
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.aging-60 {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.aging-90 {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.aging-amount {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f8fafc;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

.placeholder-content {
    padding: 40px 20px;
    text-align: center;
    background-color: #0f172a;
    border: 2px dashed #334155;
    border-radius: 10px;
}

.placeholder-content p {
    margin-bottom: 8px;
}

.placeholder-content p:last-child {
    margin-bottom: 0;
}

.table-dark-custom {
    width: 100%;
    color: #f8fafc;
    border-collapse: separate;
    border-spacing: 0;
    position: relative;
    z-index: 1;
}

.table-dark-custom thead th {
    background-color: #0f172a;
    color: #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    padding: 16px;
    border-bottom: 2px solid #334155;
}

.table-dark-custom tbody td {
    padding: 0;
    border-bottom: 1px solid #273449;
    color: #cbd5e1;
}

.clickable-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.clickable-row:hover {
    background-color: #273449;
}

.table-link {
    display: block;
    padding: 16px;
    color: inherit;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.table-link:hover {
    color: inherit;
}

.customer-name {
    font-weight: 600;
    color: #f8fafc;
}

.ar-balance-zero {
    color: #10b981;
    font-weight: 600;
}

.ar-balance-low {
    color: #f59e0b;
    font-weight: 600;
}

.ar-balance-high {
    color: #ef4444;
    font-weight: 700;
}

.search-input {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    background-color: #273449;
    border-color: #0ea5e9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.search-input::placeholder {
    color: #64748b;
}

.loading-state {
    text-align: center;
    padding: 80px 20px;
}

.loading-state .spinner-border {
    width: 3rem;
    height: 3rem;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.empty-state-headline {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.empty-state-subtext {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.dark-input {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 10px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dark-input:focus {
    background-color: #273449;
    border-color: #0ea5e9;
}

/* Authentication Pages */
.fieldops-dark {
    background-color: #0f172a;
    color: #e5e7eb;
    min-height: 100vh;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.auth-card {
    background: #1e293b;
    padding: 40px;
    border-radius: 12px;
    width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.auth-card h1 {
    color: #ffffff;
}

.auth-card input {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: #fff;
}

.auth-card button {
    background-color: #2563eb;
    border: none;
}

/* AUTH PREMIUM DESIGN */

.auth-body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
    height: auto;
}

.auth-left {
    flex: 1;
    background: linear-gradient(-45deg, #0f172a, #1e293b, #1d4ed8, #2563eb);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: white;
}

@@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.brand-content {
    max-width: 400px;
}

.brand-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.brand-tagline {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
}

.brand-sub {
    font-size: 16px;
    opacity: 0.85;
}

.auth-right {
    flex: 1;
    background-color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 420px;
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    color: white;
}

.auth-card .form-group {
    margin-bottom: 20px;
}

.auth-card label {
    margin-bottom: 6px;
    font-weight: 500;
}

.auth-card input {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: white;
    height: 52px;
}

/* FullCalendar Customizations */
#calendar {
    padding: 20px;
    background-color: #1e293b;
    border-radius: 8px;
    min-height: 600px;
}

.fc {
    color: #f8fafc;
}

.fc .fc-button {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: white;
    text-transform: capitalize;
    padding: 6px 12px;
    font-size: 14px;
}

.fc .fc-button:hover {
    background-color: #0284c7;
    border-color: #0284c7;
}

.fc .fc-button:disabled {
    opacity: 0.5;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #0369a1;
    border-color: #0369a1;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: #334155;
}

.fc-theme-standard .fc-scrollgrid {
    border-color: #334155;
}

.fc .fc-col-header-cell {
    background-color: #0f172a;
    color: #94a3b8;
    font-weight: 600;
    padding: 12px 4px;
    text-transform: uppercase;
    font-size: 12px;
}

.fc .fc-daygrid-day {
    background-color: #1e293b;
}

.fc .fc-daygrid-day:hover {
    background-color: #283548;
}

.fc .fc-daygrid-day-number {
    color: #cbd5e1;
    padding: 8px;
}

.fc .fc-day-today {
    background-color: rgba(14, 165, 233, 0.1) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: #0ea5e9;
    font-weight: 700;
}

.fc .fc-timegrid-slot {
    height: 3em;
}

.fc .fc-timegrid-slot-label {
    color: #94a3b8;
}

/* Overcapacity Day Styling */
.over-capacity-day {
    background-color: rgba(253, 126, 20, 0.08) !important;
}

.over-capacity-day .fc-daygrid-day-frame,
.over-capacity-day .fc-timegrid-col-frame {
    background-color: rgba(253, 126, 20, 0.06);
}

.over-capacity-day .fc-col-header-cell-cushion {
    color: #fb923c;
    font-weight: 600;
}

/* Backlog Draggable Items */
.backlog-item {
    cursor: move !important;
    user-select: none;
    transition: all 0.2s ease;
}

.backlog-item:hover {
    transform: translateX(4px);
    border-color: #0ea5e9 !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

/* ========================================
   Calendar Background & Contrast Fix
   ======================================== */

/* Calendar Background Fix */
.fc {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* Time grid text */
.fc-timegrid-slot-label,
.fc-col-header-cell-cushion,
.fc-timegrid-axis-cushion {
    color: #d4d4d4 !important;
}

/* ===== PROFESSIONAL CALENDAR EVENT STYLING ===== */
.fc-event {
    /* background-color and border-color are set per-event via FullCalendar's
       inline styles (from GetEventsForRange ? crew.Color).
       Do NOT set background-color or border here with !important � it will
       override the per-event crew color returned by the server. */
    color: #ffffff !important;
    font-weight: 500;
    border-radius: 6px !important;
    padding: 4px 8px 4px 4px !important;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Hover effect with lift and shadow */
.fc .fc-event:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    z-index: 100;
}

/* Event title styling */
.fc-event-main {
    padding: 2px !important;
}

.fc-event-title {
    font-weight: 500 !important;
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
}

.fc-event-time {
    font-size: 11px !important;
    opacity: 0.9;
    font-weight: 400 !important;
}

.fc-daygrid-event {
    font-size: 0.85rem;
}

.fc-timegrid-event {
    font-size: 0.85rem;
}
/* ===== END CALENDAR EVENT STYLING ===== */

/* ===== JOB QUEUE PANEL ===== */

.job-queue-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.job-queue-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #273449;
}

.job-queue-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    max-height: 340px;
    overflow-y: auto;
}

.job-queue-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: grab;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.job-queue-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.job-queue-card:active {
    cursor: grabbing;
    opacity: 0.8;
}

.jq-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.jq-icon {
    font-size: 1rem;
    line-height: 1;
}

.jq-number {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.04em;
}

.jq-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jq-customer {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.jq-customer i {
    font-size: 0.7rem;
    margin-right: 3px;
}

.jq-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 4px;
    border-top: 1px solid #273449;
    padding-top: 4px;
}

.jq-hours {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
}

.jq-empty-state {
    text-align: center;
    padding: 20px 12px;
    color: #64748b;
    font-size: 0.8rem;
}

.jq-empty-state i {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 6px;
}

/* ===== END JOB QUEUE PANEL ===== */

/* Today highlight */
.fc-day-today {
    background-color: rgba(37, 99, 235, 0.15) !important;
}

.backlog-item:active {
    cursor: grabbing !important;
    opacity: 0.7;
}

.fc .fc-toolbar-title {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 600;
}

.fc .fc-daygrid-event {
    margin-top: 2px;
}

.auth-card input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}

.auth-card button {
    background-color: #2563eb;
    border: none;
    font-weight: 600;
    height: 52px;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}

.auth-card button:hover {
    background-color: #1d4ed8;
}

.dark-input:focus {
    color: #f8fafc;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.dark-input::placeholder {
    color: #64748b;
}

.form-label {
    color: #cbd5e1;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-check-label {
    color: #cbd5e1;
    margin-left: 8px;
}

.form-check-input {
    background-color: #1e293b;
    border-color: #334155;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
}

.form-check-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.activity-timeline-enhanced {
    position: relative;
}

.timeline-date-group {
    margin-bottom: 24px;
}

.timeline-date-group:last-child {
    margin-bottom: 0;
}

.timeline-date-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 16px;
    padding-left: 56px;
}

.timeline-event-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    animation: slideUp 0.35s ease-out forwards;
}

.timeline-event-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -20px;
    width: 2px;
    background: linear-gradient(180deg, #334155 0%, transparent 100%);
}

.timeline-event-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    z-index: 1;
    transition: transform 0.2s ease;
}

.timeline-event-item:hover .timeline-event-icon {
    transform: scale(1.1);
}

.event-payment {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 2px solid #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.event-estimate {
    background-color: rgba(14, 165, 233, 0.2);
    color: #0ea5e9;
    border: 2px solid #0ea5e9;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}

.event-workorder {
    background-color: rgba(6, 182, 212, 0.2);
    color: #06b6d4;
    border: 2px solid #06b6d4;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.event-note {
    background-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    border: 2px solid #94a3b8;
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.3);
}

.event-task {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.event-opportunity {
    background-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.timeline-event-card {
    flex-grow: 1;
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    animation: fadeIn 0.4s ease-out forwards;
}

.timeline-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: #475569;
}

.timeline-event-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
    gap: 12px;
}

.timeline-event-title {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    flex-grow: 1;
}

.timeline-event-time {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
}

.timeline-event-description {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    line-height: 1.5;
}

.timeline-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #334155;
}

.timeline-event-user {
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-event-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
    padding: 4px 12px;
    border-radius: 6px;
}

/* ============================================
   DRAG & DROP SCHEDULING LAYOUT
   ============================================ */

.schedule-shell {
    display: flex;
    gap: 20px;
    min-height: 700px;
}

.schedule-main-content {
    flex: 1;
    min-width: 0;
}

/* ============================================
   UNSCHEDULED JOBS SIDEBAR
   ============================================ */

.unscheduled-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #1e293b;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 700px;
}

.sidebar-header {
    padding: 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
}

.sidebar-header i {
    font-size: 16px;
}

.sidebar-header .badge {
    margin-left: auto;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: #0f172a;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   EXTERNAL JOB CARD (DRAGGABLE)
   ============================================ */

.external-job-card {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.external-job-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.external-job-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.job-number {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-customer {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-customer i {
    color: #3b82f6;
    font-size: 12px;
}

.job-type {
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-type i {
    color: #94a3b8;
    font-size: 11px;
}

.job-crew {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-crew i {
    font-size: 11px;
}

.job-progress-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #334155;
}

.progress-mini-bar {
    flex: 1;
    height: 4px;
    background: #1e293b;
    border-radius: 2px;
    overflow: hidden;
}

.progress-mini-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.progress-mini-text {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

.job-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #64748b;
}

.job-footer i {
    font-size: 14px;
}

/* ============================================
   CALENDAR EVENT CARD WITH PROGRESS
   ============================================ */

.fo-event-card {
    padding: 4px 6px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fo-event-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.fo-event-sub {
    font-size: 10px;
    line-height: 1.2;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.fo-event-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fo-event-customer {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-event-service {
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-event-crew {
    font-size: 10px;
    line-height: 1.2;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-progress-wrap {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fo-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}

.fo-progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transition: width 0.3s ease;
    border-radius: 3px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1400px) {
    .schedule-shell {
        flex-direction: column;
    }

    .unscheduled-sidebar {
        width: 100%;
        max-height: 300px;
    }

    .schedule-main-content {
        width: 100%;
    }
}

/* ============================================================
   FIELDOPS STATUS COLORS
   Centralised, readable status pills used everywhere in the app.
   All colours are !important so they win over the global white-
   text enforcement that is applied to every <span> element.
   ============================================================ */

/* Shared structural base — every status pill shares these */
[class^="status-"],
[class*=" status-"] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Active ── soft green ───────────────────────────────────────── */
.status-active {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
}

/* Inactive ── cool grey ──────────────────────────────────────── */
.status-inactive {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

/* Pending / Draft / Unscheduled / New ── amber ──────────────── */
.status-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

/* Scheduled ── teal/cyan ────────────────────────────────────── */
.status-scheduled {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #06b6d4 !important;
}

/* In Progress ── blue ───────────────────────────────────────── */
.status-in-progress {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* Completed ── green ────────────────────────────────────────── */
.status-completed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

/* Cancelled ── soft red ─────────────────────────────────────── */
.status-cancelled {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* Warning / On Hold / VIP ── warm yellow ────────────────────── */
.status-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

/* ?? StatusBadge base ????????????????????????????????????????????????????? */
.fo-status-badge {
    display: inline-block;
    padding: .2em .65em;
    font-size: .75em;
    font-weight: 600;
    line-height: 1;
    border-radius: .375rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Draft ?? neutral grey */
.status-draft    { background: rgba(100, 116, 139, 0.2) !important; color: #94a3b8 !important; }
/* Approved ?? vivid green */
.status-approved { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }
/* Rejected ?? vivid red */
.status-rejected { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
/* Sent ?? blue */
.status-sent     { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; }
/* Viewed / Quoted ?? teal */
.status-viewed   { background: rgba(6, 182, 212, 0.15) !important; color: #06b6d4 !important; }
/* Stale ?? amber pulse */
@keyframes fo-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.status-stale {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    animation: fo-status-pulse 1.4s ease-in-out infinite;
}

/* ── End FieldOps Status Colors ─────────────────────────────── */


/* ── Employee Sidebar ───────────────────────────────────────────────────────── */
.employee-sidebar-panel {
    background: #1f2937;
    border-right: 1px solid #374151;
    border-radius: 0;
}

.employee-item {
    padding: 10px 12px;
    border-radius: 6px;
    color: #e5e7eb;
    cursor: pointer;
    transition: background-color 0.15s;
    font-weight: 500;
    margin-bottom: 2px;
}

.employee-item:hover { background: #374151; }

.employee-item.active {
    background: #2563eb;
    color: white;
}

.employee-item.active .text-muted,
.employee-item.active small {
    color: rgba(255,255,255,.75) !important;
}

/* ── End Employee Sidebar ──────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════════
   Employee Profile Badges
   Base class: emp-badge  (all badges share padding / radius / font weight)
   Role variants:  role-owner  role-supervisor  role-leader  role-tech
   Status variants: status-active  status-leave  status-inactive  status-terminated
   Crew:            crew-badge  (colour set via inline style from Crew.Color)
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.employee-sidebar-panel {
    background: #1f2937;
    border-right: 1px solid #374151;
    border-radius: 0;
}

.employee-item {
    padding: 10px 12px;
    border-radius: 6px;
    color: #e5e7eb;
    cursor: pointer;
    transition: background-color 0.15s;
    font-weight: 500;
    margin-bottom: 2px;
}

.employee-item:hover { background: #374151; }

.employee-item.active {
    background: #2563eb;
    color: white;
}

.employee-item.active .text-muted,
.employee-item.active small {
    color: rgba(255,255,255,.75) !important;
}

/* ?? Dark Theme NavLink Active/Hover States ?????????????????????????? */
/* Overrides Bootstrap defaults; baby-blue accent on hover/active.     */
.nav-link.active,
.main-sidebar .nav-link.active {
    background-color: #60a5fa !important;
    color: #000 !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover,
.main-sidebar .nav-link:hover {
    background-color: #60a5fa !important;
    color: #000 !important;
    transition: background 0.15s ease, color 0.15s ease;
}

/* ?? Sidebar anchor + nav-link explicit targeting ?????????????????????? */
.main-sidebar a,
.main-sidebar .nav-link {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

.main-sidebar a:hover,
.main-sidebar a.active {
    background-color: #60a5fa !important;
    color: #000 !important;
}

/* ???????????????????????????????????????????????????????????????????
   DARK THEME � BOOTSTRAP COMPONENT OVERRIDES
   Ensures Bootstrap's light-defaulted components match the FieldOps
   dark theme. All !important to beat Bootstrap's specificity.
   ??????????????????????????????????????????????????????????????????? */

/* ?? Dropdowns ??????????????????????????????????????????????????????? */
.dropdown-menu,
.dropdown-menu.show {
    background-color: #1e293b !important;
    border: 1px solid var(--fo-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #f1f5f9;
}

.dropdown-item {
    color: #f1f5f9 !important;
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #60a5fa !important;
    color: #000 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #60a5fa !important;
    color: #000 !important;
}

.dropdown-divider {
    border-color: var(--fo-border) !important;
}

/* ?? Nav Tabs ????????????????????????????????????????????????????????? */
.nav-tabs {
    border-bottom-color: var(--fo-border) !important;
}

.nav-tabs .nav-link {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border: none !important;
}

.nav-tabs .nav-link:hover {
    background-color: #60a5fa !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #60a5fa !important;
    color: #000 !important;
    border: none !important;
    border-radius: 6px;
}

/* ?? Modals ??????????????????????????????????????????????????????????? */
.modal-content {
    background-color: var(--fo-card) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-primary);
}

.modal-header {
    border-bottom-color: var(--fo-border) !important;
    background-color: var(--fo-card) !important;
}

.modal-footer {
    border-top-color: var(--fo-border) !important;
    background-color: var(--fo-card) !important;
}

/* ?? Alerts ??????????????????????????????????????????????????????????? */
.alert-success {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #22c55e !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #f59e0b !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.alert-info {
    background-color: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #38bdf8 !important;
}

/* ?? List Groups ??????????????????????????????????????????????????????? */
.list-group-item {
    background-color: var(--fo-card) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-primary) !important;
}

.list-group-item:hover {
    background-color: var(--fo-card-hover) !important;
    color: var(--fo-text-primary) !important;
}

.list-group-item.active {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}

/* ?? Quick Tabs (button-based tab UI) ?????????????????????????????????? */
.quick-tab {
    background-color: var(--fo-card);
    color: var(--fo-text-primary);
    border: 1px solid var(--fo-border);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.quick-tab:hover {
    background-color: #60a5fa !important;
    color: #000 !important;
}

.quick-tab.active {
    background-color: #60a5fa !important;
    color: #000 !important;
    border-color: #60a5fa !important;
}

/* ?? Outline-primary tab buttons (nav tabs in pages) ???????????????????? */
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #60a5fa !important;
    color: #000 !important;
    border-color: #60a5fa !important;
}

.btn-outline-primary.active {
    background-color: #60a5fa !important;
    color: #000 !important;
    border-color: #60a5fa !important;
}

/* ?? Bootstrap navbar / dropdown-menu-end overrides ????????????????????? */
/* Targets any Bootstrap dropdown that may be used alongside custom ones. */
.navbar .dropdown-menu,
.dropdown-menu-end,
.dropdown-menu.show {
    --bs-dropdown-bg: #1e293b;
    --bs-dropdown-color: #f1f5f9;
    --bs-dropdown-link-color: #f1f5f9;
    --bs-dropdown-link-hover-bg: #60a5fa;
    --bs-dropdown-link-hover-color: #000;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-toggle {
    background-color: transparent !important;
    color: #f1f5f9 !important;
}

/* ?? Employee Profile Badge System ???????????????????????????????????? */
/* Base badge � used on role, crew, and status chips in the employee    */
/* profile header. Colour set per-variant or via inline style.          */
.emp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    gap: 4px;
    color: #fff;
}

.role-owner      { background: #7c3aed; }
.role-supervisor { background: #0891b2; }
.role-leader     { background: #059669; }
.role-tech       { background: #334155; }

.crew-badge { color: #fff; }

/* ?? Missing employee status variants ????????????????????????????????? */
.status-leave {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.status-terminated {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* ?? Global color-scheme enforcement ??????????????????????????????????? */
* {
    color-scheme: dark;
}

/* ??????????????????????????????????????????????????????????????????????
   MOBILE MODE
   Applied via .mobile-mode on .fieldops-shell when DeviceService
   detects viewport ? 768 px.  All rules are scoped so they do NOT
   affect desktop or Field Mode (FieldModeLayout) pages.
?????????????????????????????????????????????????????????????????????? */

/* ?? Base font size ??????????????????????????????????????????????????? */
.mobile-mode {
    font-size: 14px;
}

/* ?? Topbar: compact 48px, hide heavy centre section ????????????????? */
.mobile-mode .fieldops-topbar {
    height: 48px !important;
    padding: 0 0.5rem !important;
}

.mobile-mode .topbar-center,
.mobile-mode .topbar-search,
.mobile-mode .topbar-quicknav,
.mobile-mode .topbar-company {
    display: none !important;
}

.mobile-mode .topbar-username {
    display: none !important;
}

/* ?? Headings ????????????????????????????????????????????????????????? */
.mobile-mode h1,
.mobile-mode h2 {
    font-size: 1rem !important;
}

.mobile-mode h3 {
    font-size: 0.95rem !important;
}

/* ?? Content area: full width + pad bottom for MobileNavBar ??????????? */
.mobile-mode .fieldops-body {
    margin-left: 0 !important;
}

.mobile-mode .main-content {
    width: 100% !important;
}

.mobile-mode .content-area {
    padding: 0.75rem 0.65rem calc(72px + env(safe-area-inset-bottom)) !important;
}

/* ?? Stack multi-column layouts vertically ???????????????????????????? */
.mobile-mode .estimate-layout,
.mobile-mode .dispatch-container,
.mobile-mode .fo-two-col,
.mobile-mode .fo-split-layout {
    flex-direction: column !important;
}

/* ?? Hide non-essential side panels ??????????????????????????????????? */
.mobile-mode .estimate-side-panel,
.mobile-mode .secondary-panel,
.mobile-mode .fo-side-panel {
    display: none !important;
}

/* ?? Full-width form controls (prevents iOS Safari auto-zoom) ?????????? */
.mobile-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="range"]),
.mobile-mode select,
.mobile-mode textarea {
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

/* ?? Touch targets: minimum 44�44 px ????????????????????????????????? */
.mobile-mode button,
.mobile-mode .btn,
.mobile-mode a.nav-link {
    min-height: 44px !important;
}

/* ?? Tables: horizontal scroll instead of overflow ???????????????????? */
.mobile-mode table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.mobile-mode .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ?? Cards: full width ????????????????????????????????????????????????? */
.mobile-mode .fo-card,
.mobile-mode .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ??????????????????????????????????????????????????????????????????????
   MOBILE ACTION BAR
   Optional .mobile-actions bar for any page that needs Start/Arrive/
   Complete shortcuts pinned to the bottom of the screen.
?????????????????????????????????????????????????????????????????????? */
.mobile-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 6px;
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, .08);
    z-index: 200;
}

.mobile-actions button {
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 10px;
    background: #1e293b;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.mobile-actions button:active {
    background: #334155;
}

/* ??????????????????????????????????????????????????????????????????????
   QUICK ACTION CARDS
   Shared style used on the dashboard Quick Actions grid and anywhere
   else a uniform action-card button is needed.
?????????????????????????????????????????????????????????????????????? */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 90px;
    width: 100%;
    border-radius: 12px;
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease,
                transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    padding: 0;
}

    .quick-action-card i {
        font-size: 1.4rem;
        line-height: 1;
    }

    .quick-action-card:hover {
        background: #60a5fa;
        color: #000;
        border-color: #60a5fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(96, 165, 250, .35);
    }

    .quick-action-card:active {
        transform: translateY(0) scale(0.97);
        box-shadow: none;
    }

    .quick-action-card:focus-visible {
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
    }

/* Mobile: fixed 2-column grid, slightly shorter cards */
@media (max-width: 480px) {
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-action-card {
        height: 80px;
        font-size: 0.82rem;
    }

        .quick-action-card i {
            font-size: 1.2rem;
        }
}