/* TLC Job Management - Shared Components */

/* Cards */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.card-body { padding: 20px; }
.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.kpi-card.blue::before { background: var(--primary); }
.kpi-card.green::before { background: var(--success); }
.kpi-card.orange::before { background: var(--warning); }
.kpi-card.red::before { background: var(--danger); }
.kpi-card.cyan::before { background: var(--info); }
.kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.kpi-change {
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); color: white; }
.btn-secondary { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--border-light); }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #047857; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; }
[data-theme="dark"] .btn-success:hover { background: #059669; }
[data-theme="dark"] .btn-danger:hover { background: #dc2626; }
.btn-warning { background: var(--warning); color: white; }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-primary); color: var(--text-primary); }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-icon {
    padding: 6px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-active { background: var(--success-light); color: var(--success); }
.badge-complete { background: #e2e8f0; color: #475569; }
.badge-pending { background: var(--warning-light); color: var(--warning); }
.badge-cancelled { background: var(--danger-light); color: var(--danger); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-secondary { background: #e2e8f0; color: #475569; }
.badge-sm { font-size: 0.7rem; padding: 1px 8px; }

/* Tables */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.data-table th {
    background: var(--bg-primary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 1;
}
.data-table th:hover { color: var(--text-primary); }
.data-table th .sort-icon { margin-left: 4px; opacity: 0.3; font-size: 0.7rem; }
.data-table th.sorted .sort-icon { opacity: 1; color: var(--primary); }
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}
.data-table tr:hover td { background: rgba(37, 99, 235, 0.06); }
.data-table .job-link {
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.data-table .job-link:hover { text-decoration: underline; }
.data-table .cell-actions { white-space: nowrap; }
.data-table .currency { font-family: var(--font-mono); text-align: right; }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 12px;
    flex-wrap: wrap;
}
.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 180px;
}
.pagination-buttons {
    display: flex;
    gap: 4px;
}
.pagination-buttons button {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pagination-buttons button:hover { background: var(--bg-primary); border-color: var(--primary); }
.pagination-buttons button.active { background: var(--primary); color: white; border-color: var(--primary); }
.pagination-buttons button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Forms */
.form-group {
    margin-bottom: 16px;
}
.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s;
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Inline Edit */
.inline-edit {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    min-height: 24px;
    display: inline-block;
}
.inline-edit:hover { background: var(--primary-light); }
.inline-edit.editing {
    background: transparent;
    cursor: default;
}
.inline-edit input,
.inline-edit select {
    padding: 4px 8px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: inherit;
    font-family: inherit;
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Modals / Overlays */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}
.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    animation: scaleIn 0.2s ease;
}
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1400px; width: 95vw; height: 90vh; display: flex; flex-direction: column; }
.modal-xl .modal-body { flex: 1; overflow: hidden; padding: 0; }
.modal-sm { max-width: 400px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 20px; }
.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Confirmation Overlay */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}
.confirm-box {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    animation: scaleIn 0.2s ease;
}
.confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
}
.confirm-icon.warning { background: var(--warning-light); color: var(--warning); }
.confirm-icon.danger { background: var(--danger-light); color: var(--danger); }
.confirm-icon.info { background: var(--primary-light); color: var(--primary); }
.confirm-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.confirm-message {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 24px;
    line-height: 1.5;
}
.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Filters bar */
.filters-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}
.filter-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
}
.filter-input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font-size: 0.8rem;
    color: var(--text-primary);
    width: 200px;
}
/* Filter toggle buttons */
.filter-toggles {
    display: inline-flex;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.filter-toggle {
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-toggle:last-child { border-right: none; }
.filter-toggle:hover { background: var(--bg-primary); color: var(--text-primary); }
.filter-toggle.active {
    background: var(--primary);
    color: white;
}


.active-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.filter-tag-remove {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
}
.filter-tag-remove:hover { opacity: 1; }

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.chart-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
}
.chart-card h2,
.chart-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.chart-container {
    position: relative;
    height: 250px;
    width: 100%;
    overflow: hidden;
}
.chart-container-tall {
    height: 350px;
}

/* Contact cards */
.contact-card {
    background: var(--bg-primary);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-card-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.contact-card-name {
    font-weight: 600;
    color: var(--text-primary);
}
.contact-card-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.contact-card-detail a { color: var(--primary); }
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .contacts-grid {
        grid-template-columns: 1fr;
    }
}

/* Checkbox/Boolean toggle */
.bool-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}
.bool-check .check-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-size: 0.75rem;
    color: white;
}
.bool-check.checked .check-icon {
    background: var(--success);
    border-color: var(--success);
}

/* Activity feed */
.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.875rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.activity-dot.created { background: var(--success); }
.activity-dot.updated { background: var(--primary); }
.activity-dot.deleted { background: var(--danger); }
.activity-dot.import { background: var(--warning); }
.activity-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}
.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.empty-state-text {
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Compact table density for wide tables (14+ columns) */
.data-table.compact th { padding: 8px 8px; font-size: 0.7rem; }
.data-table.compact td { padding: 8px 8px; font-size: 0.8rem; }

/* Fixed table layout for jobs table — eliminates O(rows×cols) relayout on row expand */
#jobsTable { table-layout: fixed; min-width: 2480px; }
#jobsTable td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jobsTable td:has(.inline-edit-trigger) { overflow: visible; }
/* Xero group header and column shading */
.thead-group-row th { padding: 0; border-bottom: none; }
.xero-group-header {
    background: var(--xero-teal, #13B5EA); color: var(--text-on-primary, #fff); text-align: center;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
    padding: 4px 8px; border-radius: 4px 4px 0 0;
}
.data-table .xero-group-header {
    padding: 4px 8px;
}
.xero-col-header { background: rgba(19, 181, 234, 0.18); }
#jobsTable td.xero-col { background: rgba(19, 181, 234, 0.10); }
#jobsTable tr.row-clickable:hover td.xero-col { background: rgba(19, 181, 234, 0.18); }
[data-theme="dark"] .xero-group-header { background: var(--xero-teal, #0e8ab3); color: var(--text-on-primary, #fff); }
[data-theme="dark"] .xero-col-header { background: rgba(19, 181, 234, 0.25); }
[data-theme="dark"] #jobsTable td.xero-col { background: rgba(19, 181, 234, 0.14); }
[data-theme="dark"] #jobsTable tr.row-clickable:hover td.xero-col { background: rgba(19, 181, 234, 0.22); }

/* Truncation helpers — generous limits so content is readable */
.truncate-sm { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.truncate-cam { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* Sticky first column (Job #) */
.data-table.sticky-first th:first-child,
.data-table.sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
}
.data-table.sticky-first th:first-child {
    z-index: 3;
    background: var(--bg-primary);
}
.data-table.sticky-first tr:hover td:first-child { background: var(--bg-card); }

/* Responsive priority hiding - Priority 3: hidden below 992px (not applied to jobs table — always scrollable) */
@media (max-width: 991px) {
    .data-table:not(#jobsTable) th[data-priority="3"],
    .data-table:not(#jobsTable) td[data-priority="3"] { display: none; }
}

/* Responsive priority hiding - Priority 2: hidden below 1200px (not applied to jobs table) */
@media (max-width: 1199px) {
    .data-table:not(#jobsTable) th[data-priority="2"],
    .data-table:not(#jobsTable) td[data-priority="2"] { display: none; }
}

/* Responsive tables -> cards on mobile */
@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contacts-grid { grid-template-columns: 1fr; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filter-input { width: 100%; }
    .pagination { flex-direction: column; text-align: center; }

    .responsive-table thead { display: none; }
    .responsive-table tr {
        display: block;
        margin-bottom: 12px;
        background: var(--bg-card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 12px;
    }
    .responsive-table td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border: none;
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 12px;
    }
    .responsive-table td[data-priority="2"],
    .responsive-table td[data-priority="3"] { display: none; }
    /* Sticky column not needed on mobile card layout */
    .data-table.sticky-first th:first-child,
    .data-table.sticky-first td:first-child { position: static; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .modal { margin: 8px; max-height: calc(100vh - 16px); }
    .tabs { gap: 0; }
    .tab { padding: 10px 12px; font-size: 0.8rem; }
}

/* Expandable detail rows */
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: rgba(37, 99, 235, 0.04); }
/* Inline Dropdown Menu (for status/action editing) */
.inline-edit-trigger {
    cursor: pointer;
    position: relative;
}
.inline-edit-trigger:hover .badge {
    filter: brightness(1.1);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.inline-menu {
    position: absolute;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: 4px 0;
    animation: scaleIn 0.12s ease;
}
.inline-menu-item {
    display: block;
    width: 100%;
    padding: 6px 14px;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
.inline-menu-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.inline-menu-item.active {
    font-weight: 600;
    color: var(--primary);
}
.inline-menu-item.active::before {
    content: '\2713 ';
    margin-right: 2px;
}
.inline-menu-item.clear-item {
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-light);
    margin-top: 2px;
    padding-top: 8px;
}

/* Camera status dot */
.cam-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin: 0 4px;
    vertical-align: middle;
}
.cam-status-dot.online { background: var(--success); }
.cam-status-dot.offline { background: var(--danger); }
.cam-status-age {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-left: 1px;
    vertical-align: middle;
}

/* Camera type badges (table column) */
.cam-type-dslr { background: var(--cam-dslr); color: var(--text-on-primary, #fff); font-size: 0.7rem; padding: 2px 10px; }
.cam-type-micro { background: var(--cam-micro); color: var(--text-on-primary, #fff); font-size: 0.7rem; padding: 2px 10px; }
/* Camera age inline (camera column) */
.cam-age-inline { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); margin-left: 3px; white-space: nowrap; }
.cam-wall-link {
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.cam-wall-link:hover { text-decoration-style: solid; }

/* Camera Wall countdown tooltip */
.cw-countdown-tip {
    position: absolute;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0;
    min-width: 260px;
    overflow: hidden;
    cursor: pointer;
    animation: cwFadeIn 0.15s ease;
}
@keyframes cwFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.cw-countdown-bar {
    height: 3px;
    background: var(--primary);
    animation: cwShrink 3s linear forwards;
}
@keyframes cwShrink { from { width: 100%; } to { width: 0; } }
.cw-countdown-text {
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.cw-countdown-cancel {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}
[data-theme="dark"] .cw-countdown-tip { background: var(--bg-card); border-color: #334155; }

/* Dark Mode Overrides */
[data-theme="dark"] .badge-complete { background: #334155; color: #94a3b8; }
[data-theme="dark"] .badge-secondary { background: #334155; color: #94a3b8; }
[data-theme="dark"] .data-table tr:hover td { background: rgba(96, 165, 250, 0.08); }
[data-theme="dark"] .data-table.sticky-first th:first-child { background: var(--bg-primary); }
[data-theme="dark"] .data-table.sticky-first td:first-child { background: var(--bg-card); }
[data-theme="dark"] .data-table.sticky-first tr:hover td:first-child { background: #1a2744; }
[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .confirm-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .filter-toggle { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .filter-toggle:hover { background: #334155; }
[data-theme="dark"] .filter-toggles { border-color: #334155; }
[data-theme="dark"] .row-clickable:hover td { background: rgba(96, 165, 250, 0.06); }
[data-theme="dark"] .inline-menu { background: #1e293b; border-color: #475569; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
[data-theme="dark"] .inline-menu-item:hover { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
[data-theme="dark"] .inline-menu-item.active { color: #93c5fd; }
[data-theme="dark"] .inline-menu-item.clear-item { border-top-color: #334155; }
[data-theme="dark"] .inline-edit-trigger:hover .badge { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3); }
/* Dark mode: Flatpickr calendar */
[data-theme="dark"] .flatpickr-calendar { background: #1e293b; border-color: #475569; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
[data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-weekdays { background: #1e293b; }
[data-theme="dark"] .flatpickr-month, [data-theme="dark"] span.flatpickr-weekday { color: #e2e8f0; }
[data-theme="dark"] .flatpickr-day { color: #cbd5e1; }
[data-theme="dark"] .flatpickr-day:hover { background: #334155; border-color: #475569; }
[data-theme="dark"] .flatpickr-day.selected { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .flatpickr-day.today { border-color: #60a5fa; }
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: #e2e8f0; }
[data-theme="dark"] .flatpickr-prev-month, [data-theme="dark"] .flatpickr-next-month { color: #94a3b8; fill: #94a3b8; }
[data-theme="dark"] .flatpickr-prev-month:hover, [data-theme="dark"] .flatpickr-next-month:hover { color: #e2e8f0; fill: #e2e8f0; }
/* cam-type-dslr/micro: dark mode handled by CSS variables */

/* Aging Buckets */
.aging-buckets .kpi-card { min-width: 160px; }
.aging-buckets .kpi-change { font-size: 0.75rem; margin-top: 4px; }

/* Operations KPI sublabel */
.kpi-card .kpi-change.text-muted { font-size: 0.7rem; }

/* Stale camera action buttons */
.stale-action { vertical-align: middle; }
.stale-action + .stale-action { margin-left: 4px; }
.btn-stale-ended { background: var(--success); color: #fff; border-color: var(--success); }
.btn-stale-ended:hover { background: #047857; border-color: #047857; color: #fff; }
.btn-stale-video { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-stale-video:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-stale-known { background: var(--bg-primary); color: var(--text-secondary); border-color: var(--border); }
.btn-stale-known:hover { background: var(--border-light); color: var(--text-primary); }

/* Lease countdown colors */
.lease-urgent { color: var(--danger); font-weight: 600; }
.lease-warning { color: var(--warning); font-weight: 600; }

/* Dark mode: operations */
[data-theme="dark"] .aging-buckets .kpi-card { background: var(--bg-card); }

/* Xero Financial Summary - Core Colors */
.xero-due-outstanding { color: var(--xero-due); font-weight: 600; }
.xero-overdue { color: var(--xero-overdue); font-weight: 600; }
.xero-due-clear { color: var(--xero-paid); }
.xero-paid { color: var(--xero-paid); }

/* Xero Detail Card (job detail rows) */
.xero-detail-card {
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    margin-top: 8px; background: var(--bg-card);
}
.xero-card-header {
    background: linear-gradient(135deg, #13B5EA 0%, #0e8fb8 100%);
    padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
    color: #fff; font-size: 0.85rem; font-weight: 600;
}
.xero-card-header a { color: #fff; text-decoration: none; font-size: 0.75rem; opacity: 0.9; }
.xero-card-header a:hover { opacity: 1; text-decoration: underline; }

.xero-detail-kpis {
    display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border);
}
.xero-detail-kpi {
    flex: 1; min-width: 90px; padding: 12px 16px; text-align: center;
    border-right: 1px solid var(--border);
}
.xero-detail-kpi:last-child { border-right: none; }
.xero-detail-kpi-label {
    font-size: 0.65rem; text-transform: uppercase; color: var(--text-secondary);
    letter-spacing: 0.05em; margin-bottom: 4px;
}
.xero-detail-kpi-value { font-size: 1rem; font-weight: 700; }
.xero-kpi-teal { color: var(--xero-teal); }
.xero-kpi-green { color: var(--xero-paid); }
.xero-kpi-orange { color: var(--xero-due); }
.xero-kpi-red { color: var(--xero-overdue); }

.xero-date-bar {
    padding: 8px 16px; font-size: 0.75rem; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.xero-status-bar {
    padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border-bottom: 1px solid var(--border);
}

.xero-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem;
    font-weight: 600; letter-spacing: 0.03em;
}
.xero-badge-paid { background: #dcfce7; color: #166534; }
.xero-badge-authorised { background: #dbeafe; color: #1e40af; }
.xero-badge-draft { background: #f1f5f9; color: #64748b; }
.xero-badge-overdue { background: #fef2f2; color: #991b1b; }

.xero-view-btn {
    display: block; text-align: center; padding: 10px 16px; color: #13B5EA;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; border: none;
    background: none; width: 100%;
}
.xero-view-btn:hover { background: rgba(19, 181, 234, 0.05); }

/* Xero invoice table (inside detail card) */
.xero-invoice-table {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.xero-invoice-table th {
    text-align: left; font-weight: 600; padding: 6px 10px; border-bottom: 2px solid #13B5EA;
    font-size: 0.7rem; text-transform: uppercase; color: #13B5EA; letter-spacing: 0.03em;
    background: rgba(19, 181, 234, 0.04);
}
.xero-invoice-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.xero-invoice-table th.currency,
.xero-invoice-table td.currency { text-align: right; }
.xero-invoice-table tr:last-child td { border-bottom: none; }
.xero-invoice-table tr:hover td { background: rgba(19, 181, 234, 0.03); }

/* Legacy classes kept for table column cells */
.xero-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }

/* Dashboard/Financials KPI teal accent */
.kpi-card.teal::before { background: var(--xero-teal); }

/* Financials page data age indicator */
.fin-data-age { font-size: 0.75rem; color: var(--text-secondary); text-align: right; margin-bottom: 8px; }

/* Xero Dark Mode */
/* xero-due-outstanding, xero-overdue, xero-due-clear, xero-paid: dark mode handled by CSS variables */
[data-theme="dark"] .xero-section { border-top-color: #334155; }

[data-theme="dark"] .xero-detail-card { border-color: #334155; background: #1e293b; }
[data-theme="dark"] .xero-card-header { background: linear-gradient(135deg, #0e8fb8 0%, #0a6e8f 100%); }
[data-theme="dark"] .xero-detail-kpis { border-bottom-color: #334155; }
[data-theme="dark"] .xero-detail-kpi { border-right-color: #334155; }
/* xero-kpi-teal/green/orange/red: dark mode handled by CSS variables */
[data-theme="dark"] .xero-date-bar { border-bottom-color: #334155; }
[data-theme="dark"] .xero-status-bar { border-bottom-color: #334155; }
[data-theme="dark"] .xero-badge-paid { background: #166534; color: #dcfce7; }
[data-theme="dark"] .xero-badge-authorised { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .xero-badge-draft { background: #334155; color: #94a3b8; }
[data-theme="dark"] .xero-badge-overdue { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .xero-view-btn { color: #38bdf8; }
[data-theme="dark"] .xero-view-btn:hover { background: rgba(56, 189, 248, 0.08); }
[data-theme="dark"] .xero-invoice-table th { color: #38bdf8; border-bottom-color: #0e8fb8; background: rgba(56, 189, 248, 0.06); }
[data-theme="dark"] .xero-invoice-table td { border-bottom-color: #1e293b; }
[data-theme="dark"] .xero-invoice-table tr:hover td { background: rgba(56, 189, 248, 0.06); }
/* kpi-card.teal: dark mode handled by CSS variables */

/* Invoicing Health */
.inv-row-warning td { background: rgba(220, 38, 38, 0.04); }
.inv-row-caution td { background: rgba(249, 115, 22, 0.04); }
.inv-mismatch { color: var(--warning); cursor: help; font-size: 0.85rem; margin-left: 2px; }
.inv-month-grid {
    display: inline-flex;
    gap: 1px;
    flex-wrap: wrap;
    max-width: 400px;
    vertical-align: middle;
}
.inv-month-cell {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    background: var(--border-light);
}
.inv-month-ok { background: var(--xero-paid); }
.inv-month-gap { background: var(--inv-gap); }
.inv-month-future { background: var(--border); }
.inv-legend {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.inv-legend .inv-month-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 8px;
}

/* Invoicing Detail Page */
.inv-detail-back {
    margin-bottom: 16px;
}
.inv-detail-back a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.inv-detail-back a:hover {
    text-decoration: underline;
}
.inv-detail-kpi-grid {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1200px) {
    .inv-detail-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .inv-detail-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.inv-detail-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .inv-detail-charts-row { grid-template-columns: 1fr; }
}
.inv-repeating-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}
.inv-repeating-header {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.inv-repeating-header .badge { background: rgba(255,255,255,0.2); color: #fff; }
.inv-repeating-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
}
.inv-repeating-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.inv-repeating-field-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.inv-repeating-field-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}
.inv-mismatch-banner {
    background: rgba(249, 115, 22, 0.08);
    color: #c2410c;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-top: 1px solid rgba(249, 115, 22, 0.2);
}
.inv-missing-banner {
    background: rgba(220, 38, 38, 0.06);
    color: #b91c1c;
    padding: 14px 20px;
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}
.inv-coverage-grid {
    padding: 16px;
}
.inv-coverage-legend {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.inv-month-grid-large {
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
}
.inv-month-cell-lg {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: var(--border-light);
    cursor: default;
}
.inv-year-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.inv-year-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}
.inv-gap-summary {
    padding: 16px 20px;
}
.inv-gap-summary p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.inv-gap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.inv-gap-tag {
    display: inline-block;
    background: var(--inv-gap-bg);
    color: var(--inv-gap);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 500;
}

/* Invoicing Dark Mode */
[data-theme="dark"] .inv-row-warning td { background: rgba(248, 113, 113, 0.08); }
[data-theme="dark"] .inv-row-caution td { background: rgba(251, 146, 60, 0.06); }
[data-theme="dark"] .inv-mismatch { color: #fbbf24; }
/* inv-month-ok/gap: dark mode handled by CSS variables */
[data-theme="dark"] .inv-month-future { background: #475569; }
[data-theme="dark"] .inv-detail-back a { color: #38bdf8; }
[data-theme="dark"] .inv-repeating-card { border-color: #334155; }
[data-theme="dark"] .inv-repeating-body { background: #1e293b; }
[data-theme="dark"] .inv-repeating-field-value { color: #e2e8f0; }
[data-theme="dark"] .inv-mismatch-banner { background: rgba(251, 146, 60, 0.1); color: #fb923c; border-top-color: rgba(251, 146, 60, 0.2); }
[data-theme="dark"] .inv-missing-banner { background: rgba(248, 113, 113, 0.08); color: #f87171; border-color: rgba(248, 113, 113, 0.15); }
[data-theme="dark"] .inv-month-cell-lg { background: #334155; }
[data-theme="dark"] .inv-year-label { color: #94a3b8; }
/* inv-gap-tag: dark mode handled by CSS variables */
[data-theme="dark"] .inv-gap-summary p { color: #e2e8f0; }

/* POF Upload — Split Modal Layout */
.pof-split { display: flex; height: 100%; }
.pof-left {
    width: 45%; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; background: var(--bg-primary);
}
.pof-right { width: 55%; overflow-y: auto; padding: 20px; }

/* PDF Tab Switcher */
.pdf-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.pdf-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pdf-tab:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
}
.pdf-tab.active {
    color: var(--primary);
}
.pdf-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}
.pdf-tab .pdf-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    margin-left: 6px;
    vertical-align: middle;
}
.pdf-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pdf-tab-content:not(.active) {
    display: none !important;
}

/* Upload Zone */
.pof-upload-zone {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--border); margin: 20px; border-radius: var(--radius-lg);
    cursor: pointer; transition: border-color 0.2s, background 0.2s;
    min-height: 200px;
}
.pof-upload-zone:hover { border-color: var(--primary); background: rgba(37, 99, 235, 0.03); }
.pof-upload-zone.drag-over { border-color: var(--primary); background: rgba(37, 99, 235, 0.06); }
.pof-upload-icon { font-size: 4.5rem; margin-bottom: 16px; opacity: 0.4; }
.pof-upload-text { font-size: 0.9rem; color: var(--text-muted); text-align: center; line-height: 1.6; }
.pof-upload-heading { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.pof-upload-subtext { font-size: 1rem; color: var(--text-muted); }

/* PDF Viewer */
.pof-pdf-viewer { flex: 1; overflow-y: auto; background: #e2e8f0; padding: 0; display: flex; flex-direction: column; }
.pof-pdf-viewer iframe { flex: 1; min-height: 0; }
.pof-pdf-pages { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.pof-pdf-page {
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 2px;
    line-height: 0; /* remove baseline gap below canvas */
}
.pof-pdf-page canvas { display: block; border-radius: 2px; }
.pof-pdf-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 0.9rem;
}

/* Transfer Button */
.pof-transfer-btn {
    display: block; width: calc(100% - 40px); margin: 0 20px 20px; padding: 12px 16px;
    background: var(--success-dark, #059669); color: var(--text-on-primary, #fff); border: none; border-radius: var(--radius);
    font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s;
    text-align: center;
}
.pof-transfer-btn:hover { background: #047857; }

/* Form Sections */
.pof-form-section { margin-bottom: 6px; }
.pof-form-section-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 4px;
}
.pof-form-row { display: flex; gap: 8px; margin-bottom: 4px; }
.pof-form-group { flex: 1; min-width: 0; }
.pof-form-group.full { flex-basis: 100%; }
.pof-form-group .form-label { font-size: 0.72rem; margin-bottom: 2px; display: block; }
.pof-form-group .form-control { font-size: 0.8rem; padding: 4px 8px; }

/* Readonly computed financial fields */
.pof-form-group input[readonly] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-primary);
    cursor: default;
    font-weight: 600;
}

/* Quote transfer button */
.quote-transfer-btn {
    padding: 10px 16px;
    background: #6366f1;
    color: white;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}
.quote-transfer-btn:hover {
    background: #4f46e5;
}

/* Contact Rows */
.pof-contact-row {
    display: flex; gap: 8px; margin-bottom: 8px; align-items: center;
}
.pof-contact-label {
    min-width: 90px; font-size: 0.75rem; font-weight: 600;
    color: var(--text-secondary); text-align: right; white-space: nowrap;
}
.pof-contact-row .form-control { font-size: 0.85rem; padding: 6px 10px; flex: 1; }

/* Required Field Indicators */
.form-label.required::after,
.cam-line-hdr.required::after {
    content: ' *';
    color: var(--danger, #dc3545);
    font-weight: 600;
}

/* Contact Field Validation */
.pof-contact-field { position: relative; flex: 1; }
.field-error-msg {
    position: absolute;
    bottom: -16px;
    left: 0;
    font-size: 0.68rem;
    color: var(--danger, #dc3545);
    white-space: nowrap;
}
.form-control.field-invalid {
    border-color: var(--danger, #dc3545);
}
[data-theme="dark"] .form-control.field-invalid {
    border-color: #f87171;
}
[data-theme="dark"] .field-error-msg {
    color: #f87171;
}

/* Required Field Empty State */
.field-required-empty {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
}
.field-required-empty:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25) !important;
}
[data-theme="dark"] .field-required-empty {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}
[data-theme="dark"] .field-required-empty:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

/* Postal Same-as Checkbox */
.postal-same-check {
    font-size: 0.8rem;
    font-weight: 400;
    margin-left: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.postal-same-check input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
}
[data-theme="dark"] .postal-same-check {
    color: var(--text-muted);
}

/* Preview Summary */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-bottom: 16px; }
.preview-field-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.preview-field-value { font-size: 0.88rem; color: var(--text-primary); margin-bottom: 6px; }
.preview-section { font-size: 0.78rem; font-weight: 600; color: var(--primary); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.preview-cameras-table { width: 100%; font-size: 0.82rem; border-collapse: collapse; margin: 8px 0; }
.preview-cameras-table th { text-align: left; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.preview-cameras-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-light, #eee); }
[data-theme="dark"] .preview-cameras-table td { border-bottom-color: #334155; }

/* Transfer Highlight Animation */
@keyframes pofHighlight { 0% { background-color: #d1fae5; } 100% { background-color: transparent; } }
.pof-highlight { animation: pofHighlight 1.5s ease-out; }

/* Responsive: stack panels vertically on narrow screens */
@media (max-width: 900px) {
    .pof-split { flex-direction: column; }
    .pof-left, .pof-right { width: 100%; }
    .pof-left { height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
    .pof-contact-row { flex-wrap: wrap; }
    .pof-contact-label { min-width: 100%; text-align: left; }
}

/* POF Dark Mode */
[data-theme="dark"] .pdf-tabs { background: #1a2332; border-bottom-color: #334155; }
[data-theme="dark"] .pdf-tab:hover { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .pdf-tab.active { color: #60a5fa; }
[data-theme="dark"] .pdf-tab.active::after { background: #60a5fa; }
[data-theme="dark"] .pof-left { background: #0f172a; }
[data-theme="dark"] .pof-upload-zone { border-color: #475569; }
[data-theme="dark"] .pof-upload-zone:hover { border-color: #60a5fa; background: rgba(96, 165, 250, 0.05); }
[data-theme="dark"] .pof-upload-zone.drag-over { border-color: #60a5fa; background: rgba(96, 165, 250, 0.08); }
[data-theme="dark"] .pof-upload-text { color: #94a3b8; }
[data-theme="dark"] .pof-upload-heading { color: #e2e8f0; }
[data-theme="dark"] .pof-pdf-viewer { background: #1e293b; }
[data-theme="dark"] .pof-pdf-page { background: var(--bg-card); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
[data-theme="dark"] .pof-transfer-btn { background: #059669; }
[data-theme="dark"] .pof-transfer-btn:hover { background: #047857; }
[data-theme="dark"] .pof-form-section-title { color: #94a3b8; border-bottom-color: #334155; }
[data-theme="dark"] .pof-contact-label { color: #94a3b8; }
[data-theme="dark"] .pof-left { border-right-color: #334155; }
@media (max-width: 900px) {
    [data-theme="dark"] .pof-left { border-bottom-color: #334155; }
}
@keyframes pofHighlightDark { 0% { background-color: #166534; } 100% { background-color: transparent; } }
[data-theme="dark"] .pof-highlight { animation: pofHighlightDark 1.5s ease-out; }
[data-theme="dark"] .pof-form-group input[readonly] {
    background: #1e293b;
    color: #e2e8f0;
}
[data-theme="dark"] .quote-transfer-btn {
    background: #818cf8;
}
[data-theme="dark"] .quote-transfer-btn:hover {
    background: #6366f1;
}

/* ===== New Job Loading Progress ===== */
.new-job-loading {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px;
    flex-shrink: 0;
    transition: opacity 0.3s;
    overflow: hidden;
}
.new-job-loading.done {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}
.new-job-loading-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-primary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.new-job-loading-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    width: 5%;
    transition: width 0.4s ease;
}
.new-job-loading-steps {
    display: flex;
    gap: 16px;
    font-size: 0.72rem;
}
.loading-step {
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
}
.loading-step.active {
    opacity: 1;
    color: var(--primary);
    font-weight: 600;
}
.loading-step.done {
    opacity: 0.7;
    color: var(--success);
}
.loading-step.done::before {
    content: '\2713 ';
}
[data-theme="dark"] .new-job-loading { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .new-job-loading-bar { background: #0f172a; }
[data-theme="dark"] .new-job-loading-fill { background: #60a5fa; }

/* ===== New Job Standalone Page ===== */
.new-job-page { height: calc(100vh - 108px); overflow: hidden; display: flex; flex-direction: column; }
.new-job-split { display: flex; flex: 1; min-height: 0; }
.new-job-left { width: 45%; border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg-primary); }
.new-job-right { width: 55%; overflow-y: auto; padding: 24px; height: 100%; }
.new-job-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; }

/* Job Assignment Bar */
.new-job-assign { background: var(--bg-card); border-bottom: 2px solid var(--border); padding: 16px 24px; flex-shrink: 0; }
.new-job-assign-inner { display: flex; align-items: center; gap: 32px; width: 100%; }
.new-job-jn-display { display: flex; flex-direction: column; gap: 2px; }
.new-job-jn-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.new-job-jn-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.new-job-jn-input {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 2px 6px;
    width: 140px;
    font-family: inherit;
    text-transform: uppercase;
    transition: border-color 0.15s;
}
.new-job-jn-input:focus { outline: none; background: var(--bg-primary); }
.jn-input-status { font-size: 0.7rem; font-weight: 500; min-height: 16px; }
.jn-gap-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #d97706;
    flex-wrap: wrap;
}
.jn-gap-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.jn-gap-btn {
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d97706;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}
.jn-gap-btn:hover { background: rgba(245, 158, 11, 0.2); border-color: #d97706; }
.btn-outline-danger {
    color: var(--danger);
    background: transparent;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-outline-danger:hover { background: rgba(239, 68, 68, 0.1); }
.new-job-cam-count { display: flex; flex-direction: column; gap: 2px; }
.new-job-jn-preview { flex: 1; text-align: right; font-size: 1.6rem; font-weight: 700; color: var(--text-secondary); line-height: 1.3; }
.new-job-jn-preview strong { color: var(--text-primary); font-weight: 800; }
.new-job-assign-spacer { flex: 1; }
.new-job-assign-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.new-job-assign-actions .btn { font-size: 0.85rem; padding: 8px 20px; font-weight: 600; white-space: nowrap; }

/* Draft status indicator */
.draft-status { font-size: 0.75rem; padding: 4px 10px; border-radius: var(--radius); white-space: nowrap; }
.draft-saved { color: var(--success); background: rgba(34,197,94,0.1); }
.draft-saving { color: var(--text-muted); background: var(--bg-primary); }
.draft-error { color: var(--danger); background: rgba(239,68,68,0.1); }

/* Client Directory & Camera Setup */
.new-job-directory { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 12px 24px; flex-shrink: 0; }
.dir-picker-loading, .dir-picker-error { padding: 10px 0; font-size: 0.85rem; color: var(--text-muted); }
.dir-picker-error { color: var(--danger); }

/* Multi-Camera Lines */
.cam-lines { width: 100%; }
.cam-line-header {
    display: grid;
    grid-template-columns: 72px 1fr 1fr 1fr 72px 64px 120px 32px;
    gap: 6px;
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.cam-line-hdr {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cam-entry {
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    padding: 4px;
    border-radius: var(--radius);
    transition: background 0.1s;
}
.cam-entry:hover { background: var(--bg-primary); }
.cam-entry:last-of-type { margin-bottom: 0; }
.cam-single-row {
    display: grid;
    grid-template-columns: 72px 1fr 1fr 1fr 72px 64px 120px 32px;
    gap: 6px;
    align-items: start;
    padding: 4px 0;
}
/* Legacy two-row support */
.cam-validation-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr 1fr;
    gap: 6px;
    align-items: start;
    padding: 4px 0;
}
.cam-settings-row {
    display: grid;
    grid-template-columns: 72px 64px 120px 80px 1fr 32px;
    gap: 6px;
    align-items: center;
    padding: 2px 0 4px 40px;
}
.cam-val-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
}
.cam-line-cell { min-width: 0; position: relative; }
.cam-cell-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 4px;
    align-self: start;
    margin-top: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}
.cam-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    box-sizing: border-box;
}
.cam-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.cam-input:disabled { opacity: 0.5; cursor: not-allowed; }
.cam-select {
    width: 100%;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    cursor: pointer;
    box-sizing: border-box;
}
.cam-select:focus { outline: none; border-color: var(--primary); }

/* Camera line dropdown (reuses dir-dropdown styles) */
.cam-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
}
.dir-dropdown-item { padding: 8px 12px; font-size: 0.82rem; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.1s; }
.dir-dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
.dir-dropdown-item.selected { font-weight: 600; color: var(--primary); background: rgba(37, 99, 235, 0.06); }
.dir-dropdown-count { font-size: 0.7rem; color: var(--text-muted); background: var(--bg-primary); padding: 1px 6px; border-radius: 10px; }
.dir-dropdown-empty { padding: 12px; font-size: 0.8rem; color: var(--text-muted); text-align: center; }

/* Add / Remove camera buttons */
.cam-line-add { padding: 6px 4px; }
.cam-add-btn {
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--primary);
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}
.cam-add-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.cam-remove-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.cam-remove-btn:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
@media (max-width: 768px) {
    .cam-remove-btn { width: 44px; height: 44px; }
    .cam-add-btn { min-height: 44px; padding: 10px 18px; }
}

/* Validation indicator row */
.cam-val-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    min-height: 18px;
    line-height: 1;
}
.cam-val-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.cam-val-icon.matched,
.cam-val-icon.available { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.cam-val-icon.new-dir { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.cam-val-icon.required,
.cam-val-icon.exists { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.cam-val-icon.empty { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.cam-val-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-val-text.matched,
.cam-val-text.available { color: #16a34a; }
.cam-val-text.new-dir { color: #d97706; }
.cam-val-text.required,
.cam-val-text.exists { color: #dc2626; }
.cam-val-text.empty { color: #94a3b8; }
.cam-val-slug {
    font-size: 0.65rem;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 14px;
}

/* Clickable Directory Display Box (replaces text inputs for client/location) */
.cam-dir-display {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.cam-dir-display:hover {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.cam-dir-display .dir-display-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cam-dir-display .dir-display-placeholder {
    color: var(--text-muted);
    font-style: italic;
}
.cam-dir-display .dir-display-icon {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}
/* Validation border colors on the display box */
.cam-dir-display.val-matched { border-color: var(--success, #22c55e); }
.cam-dir-display.val-new { border-color: var(--warning, #f59e0b); }
.cam-dir-display.val-error { border-color: var(--danger, #ef4444); }
.cam-dir-display.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary, #f8fafc);
}

/* Directory Picker Lightbox */
.dir-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.dir-picker-modal {
    background: var(--bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 520px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.2s ease;
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* fadeIn keyframes defined earlier in the Modals section — not duplicated here */
.dir-picker-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dir-picker-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.dir-picker-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}
.dir-picker-close:hover { color: var(--text-primary); }

.dir-picker-search-wrap {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}
.dir-picker-search {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--bg-secondary, #f8fafc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat;
    outline: none;
    transition: border-color 0.15s;
}
.dir-picker-search:focus {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.dir-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    min-height: 120px;
    max-height: 400px;
}

.dir-picker-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 8px 20px 4px;
}
.dir-picker-section-label.best-match {
    color: var(--success, #22c55e);
}

.dir-picker-item {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.85rem;
}
.dir-picker-item:hover {
    background: var(--bg-secondary, #f0f4f8);
}
.dir-picker-item.highlighted {
    background: rgba(59, 130, 246, 0.08);
}
.dir-picker-item.selected {
    background: rgba(34, 197, 94, 0.08);
}
.dir-picker-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-secondary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    color: var(--text-muted);
}
.dir-picker-item.highlighted .dir-picker-item-icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary, #3b82f6);
}
.dir-picker-item-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}
.dir-picker-item-name .dir-picker-match-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--success, #22c55e);
    margin-left: 6px;
    text-transform: uppercase;
}
.dir-picker-item-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dir-picker-empty {
    text-align: center;
    padding: 24px 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Divider before create section */
.dir-picker-create-divider {
    margin: 4px 20px;
    border: 0;
    border-top: 1px dashed var(--border);
}

/* Create new section */
.dir-picker-create {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary, #f8fafc);
}
.dir-picker-create-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary, #3b82f6);
    cursor: pointer;
    padding: 4px 0;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.dir-picker-create-toggle:hover { text-decoration: underline; }

.dir-picker-create-form {
    margin-top: 10px;
    display: none;
}
.dir-picker-create-form.open { display: block; }
.dir-picker-create-form .form-group {
    margin-bottom: 8px;
}
.dir-picker-create-form .form-label {
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 3px;
    display: block;
}
.dir-picker-create-form .form-control {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}
.dir-picker-create-slug {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: monospace;
    margin-top: 4px;
}
.dir-picker-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.dir-picker-create-actions .btn {
    font-size: 0.8rem;
    padding: 5px 14px;
}

.cam-input.val-matched { border-color: #16a34a; }
.cam-input.val-matched:focus { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15); }
.cam-input.val-new { border-color: #d97706; }
.cam-input.val-new:focus { border-color: #d97706; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); }
.cam-input.val-error { border-color: #dc2626; }
.cam-input.val-error:focus { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }

/* New Job Dark Mode */
[data-theme="dark"] .new-job-left { border-right-color: #334155; background: #0f172a; }
[data-theme="dark"] .new-job-assign { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .new-job-directory { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .cam-cell-num { background: #1e293b; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .cam-input { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .cam-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); }
[data-theme="dark"] .cam-select { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .cam-select:focus { border-color: #60a5fa; }
[data-theme="dark"] .cam-dropdown { background: #1e293b; border-color: #475569; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
[data-theme="dark"] .dir-dropdown-item:hover { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
[data-theme="dark"] .dir-dropdown-item.selected { color: #93c5fd; background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .dir-dropdown-count { background: #334155; color: #94a3b8; }
[data-theme="dark"] .cam-add-btn { color: #60a5fa; border-color: #475569; }
[data-theme="dark"] .cam-add-btn:hover { border-color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .cam-remove-btn { color: #94a3b8; }
[data-theme="dark"] .cam-remove-btn:hover { color: #f87171; background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .new-job-jn-input { color: #60a5fa; }
[data-theme="dark"] .new-job-jn-input:focus { background: #0f172a; }
[data-theme="dark"] .jn-gap-warning { color: #fbbf24; }
[data-theme="dark"] .jn-gap-icon { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .jn-gap-btn { color: #fbbf24; background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.4); }
[data-theme="dark"] .jn-gap-btn:hover { background: rgba(245, 158, 11, 0.25); border-color: #fbbf24; }
[data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #f87171; }
[data-theme="dark"] .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .cam-line-header { border-bottom-color: #334155; }
[data-theme="dark"] .cam-entry { border-bottom-color: #334155; }
[data-theme="dark"] .cam-entry:hover { background: #0f172a; }
[data-theme="dark"] .cam-val-icon.matched,
[data-theme="dark"] .cam-val-icon.available { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
[data-theme="dark"] .cam-val-icon.new-dir { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .cam-val-icon.required,
[data-theme="dark"] .cam-val-icon.exists { background: rgba(239, 68, 68, 0.2); color: #f87171; }
[data-theme="dark"] .cam-val-icon.empty { background: rgba(148, 163, 184, 0.2); color: #64748b; }
[data-theme="dark"] .cam-val-text.matched,
[data-theme="dark"] .cam-val-text.available { color: #4ade80; }
[data-theme="dark"] .cam-val-text.new-dir { color: #fbbf24; }
[data-theme="dark"] .cam-val-text.required,
[data-theme="dark"] .cam-val-text.exists { color: #f87171; }
[data-theme="dark"] .cam-val-text.empty { color: #64748b; }
[data-theme="dark"] .cam-val-slug { color: #64748b; }
[data-theme="dark"] .cam-input.val-matched { border-color: #22c55e; }
[data-theme="dark"] .cam-input.val-matched:focus { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
[data-theme="dark"] .cam-input.val-new { border-color: #f59e0b; }
[data-theme="dark"] .cam-input.val-new:focus { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .cam-input.val-error { border-color: #ef4444; }
[data-theme="dark"] .cam-input.val-error:focus { border-color: #f87171; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .cam-dir-display { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .cam-dir-display:hover { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); }
[data-theme="dark"] .cam-dir-display .dir-display-placeholder { color: #64748b; }
[data-theme="dark"] .cam-dir-display.disabled { background: #1e293b; }
[data-theme="dark"] .dir-picker-modal { background: #1e293b; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .dir-picker-header { border-bottom-color: #334155; }
[data-theme="dark"] .dir-picker-close { color: #94a3b8; }
[data-theme="dark"] .dir-picker-close:hover { color: #e2e8f0; }
[data-theme="dark"] .dir-picker-search { background-color: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .dir-picker-search:focus { border-color: #60a5fa; }
[data-theme="dark"] .dir-picker-search-wrap { border-bottom-color: #334155; }
[data-theme="dark"] .dir-picker-item:hover { background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .dir-picker-item.highlighted { background: rgba(96, 165, 250, 0.15); }
[data-theme="dark"] .dir-picker-item.selected { background: rgba(34, 197, 94, 0.1); }
[data-theme="dark"] .dir-picker-item-icon { background: #334155; color: #94a3b8; }
[data-theme="dark"] .dir-picker-item.highlighted .dir-picker-item-icon { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
[data-theme="dark"] .dir-picker-create { background: #0f172a; border-top-color: #334155; }
[data-theme="dark"] .dir-picker-create-toggle { color: #60a5fa; }
[data-theme="dark"] .dir-picker-create-form .form-control { background: #1e293b; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .dir-picker-create-divider { border-top-color: #334155; }
[data-theme="dark"] .dir-picker-section-label { color: #64748b; }

/* Camera Setup (job detail — create camera for unassigned jobs) */
.cam-setup-section {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary);
    padding: 20px;
}
.cam-setup-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}
.cam-setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.cam-setup-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cam-setup-field .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.cam-setup-input-wrap {
    position: relative;
}
.cam-setup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
}
.cam-setup-new-btn {
    align-self: flex-start;
    font-size: 0.75rem;
    padding: 2px 8px;
    margin-top: 2px;
    color: var(--primary);
}
.cam-setup-actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}
.cam-setup-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cam-setup-url-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    margin-top: 4px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.8rem;
}
.cam-setup-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cam-setup-url-label {
    font-weight: 600;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}
.cam-setup-url-text {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    color: var(--text-secondary, #475569);
    word-break: break-all;
}
.dir-dropdown-item-name {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
}
.dir-dropdown-item-display {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    margin-left: 6px;
}

/* Camera Setup Responsive */
@media (max-width: 640px) {
    .cam-setup-grid {
        grid-template-columns: 1fr;
    }
}

/* Camera Setup Dark Mode */
[data-theme="dark"] .cam-setup-section {
    border-color: #475569;
    background: #1e293b;
}
[data-theme="dark"] .cam-setup-hint {
    color: #94a3b8;
}
[data-theme="dark"] .cam-setup-dropdown {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .cam-setup-new-btn {
    color: #60a5fa;
}
[data-theme="dark"] .cam-setup-url-preview {
    background: #0f172a;
    border-color: #334155;
}
[data-theme="dark"] .cam-setup-url-text {
    color: #94a3b8;
}
[data-theme="dark"] .dir-dropdown-item-display {
    color: #64748b;
}

/* Camera link prompt — camera exists in camera-wall but not linked to job */
.cam-link-prompt {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cam-link-prompt p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.cam-link-prompt .btn {
    margin-right: 8px;
}

/* Stale camera warning — camera_name_system set but not found in camera-wall */
.cam-stale-warning {
    background: #fff8e1;
    border: 1px solid #ffcc02;
    border-left: 4px solid #ffcc02;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.cam-stale-warning p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
[data-theme="dark"] .cam-link-prompt {
    border-color: #60a5fa;
    background: #1e293b;
}
[data-theme="dark"] .cam-stale-warning {
    background: #332b00;
    border-color: #665500;
    color: #ffd700;
}

/* Camera sibling info — shown on multi-camera jobs */
.cam-siblings-section {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.cam-sibling-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
}
.cam-sibling-row + .cam-sibling-row {
    border-top: 1px solid var(--border);
}
.cam-sibling-name {
    flex: 1;
    color: var(--text-primary);
}
.cam-sibling-guidance {
    background: #e8f4fd;
    border: 1px solid #90caf9;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.cam-sibling-guidance p {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.cam-sibling-ref {
    padding: 4px 0;
    font-size: 0.85rem;
}
.cam-sibling-ref code {
    background: rgba(0,0,0,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
[data-theme="dark"] .cam-siblings-section {
    background: var(--bg-secondary, #1e293b);
}
[data-theme="dark"] .cam-sibling-guidance {
    background: #1a2940;
    border-color: #2563eb;
}
[data-theme="dark"] .cam-sibling-ref code {
    background: rgba(255,255,255,0.08);
}

/* New Job Responsive */
@media (max-width: 1200px) {
    .cam-line-header { display: none; }
    .cam-single-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 4px;
    }
    .cam-single-row .cam-cell-num { flex: 0 0 24px; font-size: 0.75rem; padding-top: 8px; }
    .cam-single-row .cam-val-field.client-field,
    .cam-single-row .cam-val-field.location-field { flex: 1 1 calc(33% - 18px); min-width: 140px; }
    .cam-single-row .cam-val-field.sysname-field { flex: 1 1 100%; }
    .cam-single-row .cam-line-cell.type-cell,
    .cam-single-row .cam-line-cell.fin-cell { flex: 0 0 72px; }
    .cam-single-row .cam-line-cell.mount-cell { flex: 0 0 120px; }
    .cam-single-row .cam-line-cell.actions-cell { flex: 0 0 32px; }
    /* Legacy two-row fallback */
    .cam-validation-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 4px;
    }
    .cam-validation-row .cam-cell-num { flex: 0 0 24px; font-size: 0.75rem; padding-top: 8px; }
    .cam-validation-row .cam-val-field.client-field,
    .cam-validation-row .cam-val-field.location-field { flex: 1 1 calc(50% - 18px); min-width: 140px; }
    .cam-validation-row .cam-val-field.sysname-field { flex: 1 1 100%; }
    .cam-settings-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 4px 4px 8px 36px;
    }
}
@media (max-width: 900px) {
    .new-job-page { height: auto; overflow: visible; }
    .new-job-split { flex-direction: column; }
    .new-job-left, .new-job-right { width: 100%; height: auto; }
    .new-job-left { min-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
    [data-theme="dark"] .new-job-left { border-bottom-color: #334155; }
    .new-job-assign-inner { flex-wrap: wrap; gap: 16px; }
    .new-job-jn-preview { flex-basis: 100%; text-align: left; }
}
@media (max-width: 600px) {
    .cam-validation-row { gap: 4px; padding: 6px 2px; }
    .cam-validation-row .cam-val-field.client-field,
    .cam-validation-row .cam-val-field.location-field { flex: 1 1 100%; }
    .cam-settings-row { gap: 4px; padding: 4px 2px 8px 28px; }
    .cam-settings-row .cam-line-cell.type-cell,
    .cam-settings-row .cam-line-cell.fin-cell,
    .cam-settings-row .cam-line-cell.mount-cell,
    .cam-settings-row .cam-line-cell.size-cell { flex: 1 1 calc(50% - 14px); }
    .new-job-directory { padding: 8px 12px; }
    .dir-picker-modal { width: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* ===== Backups & History ===== */

/* Filter Bar */
.backup-filter-bar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    flex-wrap: wrap; justify-content: space-between;
}
.backup-filter-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.backup-filter-btn {
    padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
    font-size: 0.8rem; font-weight: 500; transition: all 0.15s;
}
.backup-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.backup-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.backup-filter-count { font-size: 0.7rem; opacity: 0.7; margin-left: 2px; }
.backup-search { min-width: 200px; max-width: 300px; }
.backup-search .form-control { font-size: 0.85rem; padding: 6px 12px; }

/* Action Badges */
.backup-action-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
    background: var(--bg-primary); color: var(--text-secondary);
}
.backup-action-badge.created { background: #dcfce7; color: #166534; }
.backup-action-badge.updated { background: #dbeafe; color: #1e40af; }
.backup-action-badge.deleted { background: #fef2f2; color: #991b1b; }
.backup-action-badge.restored { background: #fef3c7; color: #92400e; }
.backup-action-badge.import { background: #ede9fe; color: #5b21b6; }

/* History Values */
.history-old-value { color: #dc2626; text-decoration: line-through; font-size: 0.85rem; }
.history-new-value { color: #16a34a; font-size: 0.85rem; }
.history-field-label { font-family: SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--text-secondary); }

/* Compare Card */
.backup-compare-card {
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px; margin: 8px 0;
}
.backup-diff-kpis { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.backup-diff-kpi {
    flex: 1; min-width: 100px; text-align: center; padding: 12px;
    border-radius: var(--radius); background: var(--bg-card);
}
.backup-diff-kpi-value { font-size: 1.5rem; font-weight: 700; }
.backup-diff-kpi-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.backup-diff-kpi.added .backup-diff-kpi-value { color: #16a34a; }
.backup-diff-kpi.deleted .backup-diff-kpi-value { color: #dc2626; }
.backup-diff-kpi.modified .backup-diff-kpi-value { color: #2563eb; }
.backup-diff-section { margin-bottom: 12px; font-size: 0.85rem; }
.backup-diff-section ul { margin: 4px 0 0 20px; padding: 0; }
.backup-diff-section li { margin-bottom: 2px; color: var(--text-secondary); }

/* Rollback Card */
.backup-rollback-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 24px; box-shadow: var(--shadow);
}
.backup-rollback-card h3 { margin: 0 0 16px; font-size: 1.1rem; }
.backup-rollback-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; font-size: 0.875rem; color: var(--text-secondary); }
.backup-rollback-btn {
    display: block; width: 100%; padding: 14px; margin-top: 20px;
    background: #dc2626; color: #fff; border: none; border-radius: var(--radius);
    font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; transition: background 0.15s;
}
.backup-rollback-btn:hover { background: #b91c1c; }

/* Backup Actions */
.backup-actions { white-space: nowrap; }
.data-table .backup-compare-row td { padding: 0; }

/* Backups Pagination (scoped to avoid overriding global .pagination) */
.backups-pagination {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 0; margin-top: 8px;
}
.backups-pagination .pagination-info { font-size: 0.85rem; color: var(--text-muted); }

/* Backups Dark Mode */
[data-theme="dark"] .backup-filter-btn { background: #1e293b; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .backup-filter-btn:hover { border-color: #60a5fa; color: #60a5fa; }
[data-theme="dark"] .backup-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .backup-action-badge { background: #334155; color: #94a3b8; }
[data-theme="dark"] .backup-action-badge.created { background: rgba(22, 163, 74, 0.15); color: #4ade80; }
[data-theme="dark"] .backup-action-badge.updated { background: rgba(37, 99, 235, 0.15); color: #60a5fa; }
[data-theme="dark"] .backup-action-badge.deleted { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .backup-action-badge.restored { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .backup-action-badge.import { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
[data-theme="dark"] .history-old-value { color: #f87171; }
[data-theme="dark"] .history-new-value { color: #4ade80; }
[data-theme="dark"] .history-field-label { color: #94a3b8; }
[data-theme="dark"] .backup-compare-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .backup-diff-kpi { background: #0f172a; }
[data-theme="dark"] .backup-diff-section li { color: #cbd5e1; }
[data-theme="dark"] .backup-rollback-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .backup-rollback-btn { background: #dc2626; }
[data-theme="dark"] .backup-rollback-btn:hover { background: #b91c1c; }

/* Filter badge */
.filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    margin-left: 8px;
}
.filter-badge:hover { opacity: 0.85; }
[data-theme="dark"] .filter-badge { background: #3b82f6; }

/* Keyboard focus ring for job table rows */
#jobsTable tbody tr:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
#jobsTable tbody tr:focus:not(:focus-visible) { outline: none; }

/* Mobile card view for jobs table */
@media (max-width: 767px) {
    #jobsTable { table-layout: auto; min-width: 0; }
    #jobsTable colgroup { display: none; }
    #jobsTable thead { display: none; }
    #jobsTable tbody tr.row-clickable {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px;
        background: var(--bg-card);
    }
    #jobsTable tbody tr.row-clickable td {
        display: block;
        padding: 4px 0;
        border: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    #jobsTable tbody tr.row-clickable td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--text-muted);
        display: block;
        margin-bottom: 2px;
    }
    /* Hide low-priority cells on mobile cards (25-col layout) */
    #jobsTable tbody tr.row-clickable td:nth-child(2),
    #jobsTable tbody tr.row-clickable td:nth-child(3),
    #jobsTable tbody tr.row-clickable td:nth-child(10),
    #jobsTable tbody tr.row-clickable td:nth-child(12),
    #jobsTable tbody tr.row-clickable td:nth-child(13),
    #jobsTable tbody tr.row-clickable td:nth-child(14),
    #jobsTable tbody tr.row-clickable td:nth-child(15),
    #jobsTable tbody tr.row-clickable td:nth-child(18),
    #jobsTable tbody tr.row-clickable td:nth-child(19),
    #jobsTable tbody tr.row-clickable td:nth-child(20),
    #jobsTable tbody tr.row-clickable td:nth-child(21),
    #jobsTable tbody tr.row-clickable td:nth-child(22),
    #jobsTable tbody tr.row-clickable td:nth-child(23),
    #jobsTable tbody tr.row-clickable td:nth-child(24),
    #jobsTable tbody tr.row-clickable td:nth-child(25) { display: none; }
    /* Table container no horizontal scroll on mobile */
    .card .table-container { overflow-x: visible; }
    [data-theme="dark"] #jobsTable tbody tr.row-clickable {
        border-color: var(--border);
        background: var(--bg-card);
    }
}

/* ===== Column Visibility Toggle ===== */
.column-toggle-wrap { position: relative; display: inline-block; }
.column-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 100;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 8px 0; min-width: 220px; max-height: 400px; overflow-y: auto;
}
.column-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 16px; cursor: pointer; font-size: 0.8rem;
}
.column-dropdown-item:hover { background: var(--bg-primary); }
.column-dropdown-item.locked { opacity: 0.5; cursor: default; }
.column-dropdown-item input[type="checkbox"] { margin: 0; }
.column-dropdown-presets {
    padding: 6px 12px; border-bottom: 1px solid var(--border);
    display: flex; gap: 4px; flex-wrap: wrap;
}
.column-hidden-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: #d97706; color: #fff; font-size: 0.65rem; font-weight: 700;
    margin-left: 4px;
}
.columns-hidden-banner {
    display: flex; align-items: center; gap: 8px;
    background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--radius);
    padding: 8px 16px; margin-bottom: 12px; font-size: 0.8rem; color: #92400e;
}
.columns-hidden-icon { font-size: 1.1rem; }
[data-theme="dark"] .column-dropdown {
    background: #1e293b; border-color: #475569;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .column-dropdown-item:hover { background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .column-dropdown-presets { border-bottom-color: #475569; }
[data-theme="dark"] .columns-hidden-banner {
    background: #78350f33; border-color: #d97706; color: #fbbf24;
}

/* ===== Saved Filter Views ===== */
.views-group { display: flex; align-items: center; gap: 4px; }
.views-group #filterViews { max-width: 160px; }
#saveViewBtn { font-size: 0.75rem; padding: 4px 8px; }

/* ===== Data Quality ===== */
.quality-kpi-row {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.quality-kpi-item {
    display: flex; align-items: center; gap: 6px;
}
.quality-kpi-count { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.quality-pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 500; margin: 1px 2px;
}
.quality-pill-core { background: #fee2e2; color: #991b1b; }
.quality-pill-dates { background: #fef3c7; color: #92400e; }
.quality-pill-financial { background: #dbeafe; color: #1e40af; }
.quality-pill-contact { background: #f3e8ff; color: #6b21a8; }
.quality-pill-camera { background: #d1fae5; color: #065f46; }
.quality-pill-invoicing { background: #e0e7ff; color: #3730a3; }
[data-theme="dark"] .quality-pill-core { background: #7f1d1d44; color: #fca5a5; }
[data-theme="dark"] .quality-pill-dates { background: #78350f44; color: #fcd34d; }
[data-theme="dark"] .quality-pill-financial { background: #1e3a5f44; color: #93c5fd; }
[data-theme="dark"] .quality-pill-contact { background: #4c1d9544; color: #d8b4fe; }
[data-theme="dark"] .quality-pill-camera { background: #064e3b44; color: #6ee7b7; }
[data-theme="dark"] .quality-pill-invoicing { background: #312e8144; color: #a5b4fc; }
.quality-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.quality-filter-btn {
    padding: 4px 12px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--bg-card); cursor: pointer; font-size: 0.75rem;
    color: var(--text-secondary); transition: all 0.15s;
}
.quality-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.quality-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Purple KPI card variant */
.kpi-card.purple::before { background: #7c3aed; }
.kpi-card.purple .kpi-value { color: #7c3aed; }
[data-theme="dark"] .kpi-card.purple::before { background: #a78bfa; }
[data-theme="dark"] .kpi-card.purple .kpi-value { color: #a78bfa; }

/* ===== Gantt Timeline ===== */
/* ======================================================================== */
/* vis-timeline Theme Overrides                                              */
/* ======================================================================== */
#timelineContainer {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
}
.vis-timeline { border: none; font-family: inherit; font-size: 0.8rem; }

/* Time axis */
.vis-time-axis .vis-text { color: var(--text-muted); font-size: 0.75rem; }
.vis-time-axis .vis-grid.vis-minor { border-color: var(--border-light); }
.vis-time-axis .vis-grid.vis-major { border-color: var(--border); }
.vis-panel.vis-top,
.vis-panel.vis-bottom { border-color: var(--border); }

/* Group labels (left sidebar) */
.vis-labelset .vis-label { border-bottom: 1px solid var(--border); }
.vis-panel.vis-left { background: var(--bg-card); }

/* Group label content */
.tl-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}
.tl-group-thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.tl-group-thumb-ph {
    width: 48px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 3px; flex-shrink: 0;
    font-size: 1rem; color: var(--text-muted);
    border: 1px solid var(--border);
}
.tl-group-text { min-width: 0; overflow: hidden; }
.tl-group-text a {
    font-weight: 600; font-size: 0.8rem; color: var(--primary);
    text-decoration: none; display: block;
}
.tl-group-text a:hover { text-decoration: underline; }
.tl-group-text small {
    display: block; font-size: 0.7rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
}

/* Content panels */
#timelineContainer .vis-panel.vis-center { background: transparent; }

/* Content rows */
.vis-foreground .vis-group { border-bottom: 1px solid var(--border); }

/* Alternating row backgrounds */
#timelineContainer .vis-odd { background: transparent; }
#timelineContainer .vis-even { background: transparent; }

/* Default range item (fallback for status-less bars) */
#timelineContainer .vis-item.vis-range { background: #94a3b8; border-color: #64748b; color: #fff; }

/* Items (bars) — scoped under #timelineContainer for specificity over CDN CSS */
#timelineContainer .vis-item { cursor: pointer; border-radius: 3px; font-size: 0.7rem; }
#timelineContainer .vis-item .vis-item-content { padding: 2px 6px; }
#timelineContainer .vis-item.tl-status-active { background: #3b82f6; border-color: #2563eb; color: #fff; }
#timelineContainer .vis-item.tl-status-complete { background: #10b981; border-color: #059669; color: #fff; }
#timelineContainer .vis-item.tl-status-pending { background: #d97706; border-color: #b45309; color: #fff; }
#timelineContainer .vis-item.tl-status-cancelled { background: #ef4444; border-color: #dc2626; color: #fff; }
#timelineContainer .vis-item.vis-selected { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5); border-color: #2563eb; }

/* Today line */
.vis-current-time { background-color: #dc2626; width: 2px; }

/* Dark mode */
[data-theme="dark"] #timelineContainer { border-color: #475569; background: #1e293b; }
[data-theme="dark"] .vis-timeline { background: #1e293b; }
[data-theme="dark"] .vis-panel.vis-top,
[data-theme="dark"] .vis-panel.vis-bottom { border-color: #475569; }
[data-theme="dark"] .vis-panel.vis-left { background: #1e293b; }
[data-theme="dark"] .vis-labelset .vis-label { border-bottom-color: #334155; background: #1e293b; }
[data-theme="dark"] .vis-foreground .vis-group { border-bottom-color: #334155; }
[data-theme="dark"] .vis-time-axis .vis-text { color: #94a3b8; }
[data-theme="dark"] .vis-time-axis .vis-grid.vis-minor { border-color: #1e293b; }
[data-theme="dark"] .vis-time-axis .vis-grid.vis-major { border-color: #475569; }
[data-theme="dark"] .tl-group-thumb { border-color: #475569; }
[data-theme="dark"] .tl-group-thumb-ph { background: #0f172a; border-color: #475569; }
[data-theme="dark"] #timelineContainer .vis-item.vis-selected { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5); border-color: #60a5fa; }
[data-theme="dark"] #timelineContainer .vis-odd,
[data-theme="dark"] #timelineContainer .vis-even { background: transparent; }
[data-theme="dark"] #timelineContainer .vis-item.vis-range { background: #64748b; border-color: #475569; }

/* ========================================================================
   Job Detail Page — section cards, field grids, contacts, checks, history
   ======================================================================== */

/* Section card */
.job-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
}
.job-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}
.job-section-header svg { color: var(--primary); flex-shrink: 0; }
.job-section-links { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Field grid (2-column default) */
.job-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}
.job-field-grid-3 { grid-template-columns: repeat(3, 1fr); }
.job-field-grid-4 { grid-template-columns: repeat(4, 1fr); }
.job-field-grid .inline-edit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Overview 2-column grid */
.job-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Links bar */
.job-links-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

/* Contact cards grid */
.job-contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.job-contact-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.job-contact-role {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.job-contact-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}
.job-contact-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.job-contact-detail a { color: var(--primary); text-decoration: none; }
.job-contact-detail a:hover { text-decoration: underline; }
.job-contact-icon {
    display: inline-flex;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Check item toggles */
.job-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}
.job-check-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--bg-primary);
    transition: background 0.15s;
}
.job-check-item:hover { background: var(--border-light); }
.job-check-item .check-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    color: white;
}
.job-check-item.checked .check-icon {
    background: var(--success);
    border-color: var(--success);
    color: white;
}
.job-check-item.checked .check-icon svg { color: white; }

/* Job total highlight */
.job-total-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 12px;
    background: var(--success-light);
    border-radius: var(--radius);
}
.job-total-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.job-total-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

/* Camera preview */
.job-camera-preview {
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ── CDN Toggle Bar ── */
.cdn-toggle-bar {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.cdn-toggle-bar.cdn-active {
    border-color: var(--success);
    background: linear-gradient(135deg, var(--success-light) 0%, var(--bg-card) 100%);
}
.cdn-toggle-bar.cdn-disabled { opacity: 0.5; }
.cdn-toggle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.cdn-toggle-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}
.cdn-toggle-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.cdn-toggle-desc strong { color: var(--text-primary); font-weight: 600; }

/* The toggle switch */
.cdn-toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 88px;
    height: 42px;
    border-radius: 21px;
    border: none;
    background: var(--toggle-track, #cbd5e1);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.cdn-toggle-switch:hover { background: var(--toggle-thumb, #94a3b8); }
.cdn-toggle-switch.active { background: var(--success); }
.cdn-toggle-switch.active:hover { background: #047857; }
.cdn-toggle-switch:disabled { cursor: not-allowed; }
.cdn-toggle-knob {
    position: absolute;
    left: 3px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cdn-toggle-switch.active .cdn-toggle-knob {
    transform: translateX(46px);
}
.cdn-toggle-label-text {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    right: 12px;
    transition: all 0.2s;
    opacity: 0;
}
.cdn-toggle-switch:not(.active) .cdn-toggle-label-text {
    left: 12px;
    right: auto;
    color: #475569;
    opacity: 1;
}
.cdn-toggle-switch.active .cdn-toggle-label-text {
    left: 12px;
    right: auto;
    opacity: 1;
}

/* ── Camera Detail Layout ── */
.cam-detail-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}
.cam-detail-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.cam-detail-img {
    width: 100%;
    height: auto;
    display: block;
}
.cam-detail-fields {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 16px;
}
.cam-detail-fields .job-section-header {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.cam-detail-fields .job-field-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

/* ── Camera Header Card ── */
.cam-header-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.cam-header-card .cam-header-id {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.cam-header-card .cam-header-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.cam-header-card .cam-header-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Camera Info Grid ── */
.cam-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.cam-info-cell {
    background: var(--bg-card);
    padding: 10px 14px;
}
.cam-info-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.cam-info-value {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* ── CDN Toggle Inline ── */
.cdn-toggle-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.cdn-toggle-inline.cdn-active {
    border-color: var(--success);
    background: linear-gradient(135deg, var(--success-light) 0%, var(--bg-card) 100%);
}
.cdn-toggle-inline .cdn-toggle-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0;
}
.cdn-toggle-inline .cdn-toggle-desc {
    font-size: 0.75rem;
}
.cdn-toggle-inline .cdn-toggle-switch {
    width: 52px;
    height: 26px;
    border-radius: 13px;
    flex-shrink: 0;
}
.cdn-toggle-inline .cdn-toggle-knob {
    width: 22px;
    height: 22px;
    left: 2px;
}
.cdn-toggle-inline .cdn-toggle-switch.active .cdn-toggle-knob {
    transform: translateX(26px);
}
.cdn-toggle-inline .cdn-toggle-label-text {
    display: none;
}

/* ── Camera Detail Responsive ── */
@media (max-width: 900px) {
    .cam-detail-layout {
        grid-template-columns: 1fr;
    }
    .cam-detail-preview {
        max-width: 400px;
    }
    .cam-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cam-header-card {
        flex-wrap: wrap;
    }
    .cam-header-card .cam-header-actions {
        margin-left: 0;
        width: 100%;
    }
    .cdn-toggle-bar { padding: 16px; }
    .cdn-toggle-content { flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
    .cam-info-grid {
        grid-template-columns: 1fr;
    }
    .cam-header-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Dark mode: CDN toggle */
[data-theme="dark"] .cdn-toggle-bar { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cdn-toggle-bar.cdn-active {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.15) 0%, var(--bg-card) 100%);
}
[data-theme="dark"] .cdn-toggle-desc strong { color: #e2e8f0; }
[data-theme="dark"] .cdn-toggle-switch { background: var(--toggle-track, #475569); }
[data-theme="dark"] .cdn-toggle-switch:hover { background: var(--toggle-thumb, #64748b); }
[data-theme="dark"] .cdn-toggle-switch.active { background: #059669; }
[data-theme="dark"] .cdn-toggle-knob { background: #e2e8f0; }
[data-theme="dark"] .cdn-toggle-switch:not(.active) .cdn-toggle-label-text { color: #94a3b8; }
/* CDN toggle saving state */
.cdn-toggle-switch.cdn-saving { opacity: 0.5; pointer-events: none; }
.cdn-toggle-switch.cdn-saving .cdn-toggle-knob {
    animation: cdn-knob-pulse 0.8s ease-in-out infinite;
}
@keyframes cdn-knob-pulse {
    0%, 100% { transform: translateX(var(--knob-pos, 0)); opacity: 1; }
    50% { transform: translateX(var(--knob-pos, 0)); opacity: 0.4; }
}
.cdn-toggle-switch.active.cdn-saving .cdn-toggle-knob { --knob-pos: 46px; }

/* Success flash animation */
.cdn-flash-success {
    animation: cdn-success-flash 1.5s ease-out;
}
@keyframes cdn-success-flash {
    0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
    30% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* Dark mode: Camera detail & new components */
[data-theme="dark"] .cam-header-card { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cam-info-grid { background: #334155; border-color: #334155; }
[data-theme="dark"] .cam-info-cell { background: var(--bg-card); }
[data-theme="dark"] .cam-detail-preview { border-color: #334155; }
[data-theme="dark"] .cam-detail-fields { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cdn-toggle-inline { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cdn-toggle-inline.cdn-active {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(4, 120, 87, 0.15) 0%, var(--bg-card) 100%);
}

/* ── Consolidated Camera Card ── */
.cam-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cam-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary, #f8fafc);
    flex-wrap: wrap;
}
.cam-card-title {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.cam-card-badges {
    display: flex;
    gap: 5px;
    align-items: center;
}
.cam-card-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cam-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}
.cam-card-thumb {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.cam-card-img {
    width: 100%;
    height: auto;
    display: block;
}
.cam-card-cdn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary, #f8fafc);
    font-size: 0.72rem;
}
.cam-card-cdn.cdn-active {
    background: var(--success-light, #ecfdf5);
}
.cam-card-cdn.cdn-disabled { opacity: 0.4; }
.cam-card-cdn-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-size: 0.68rem;
}
.cdn-toggle-switch--compact {
    width: 40px;
    height: 22px;
    border-radius: 11px;
}
.cdn-toggle-switch--compact .cdn-toggle-knob {
    width: 18px;
    height: 18px;
    left: 2px;
}
.cdn-toggle-switch--compact.active .cdn-toggle-knob {
    transform: translateX(18px);
}
.cdn-toggle-switch--compact.active.cdn-saving .cdn-toggle-knob {
    --knob-pos: 18px;
}
.cam-card-fields {
    padding: 14px 20px;
}
/* Image Delivery Panel */
.cam-delivery-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.cam-delivery-panel.cam-delivery-cdn { border-color: var(--success); }
.cam-delivery-panel.cam-delivery-disabled { opacity: 0.5; }
.cam-delivery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border);
}
.cam-delivery-panel.cam-delivery-cdn .cam-delivery-header {
    background: var(--success-light, #ecfdf5);
    border-bottom-color: var(--success);
}
.cam-delivery-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.cam-delivery-body {
    padding: 10px 12px;
}
.cam-delivery-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}
.cam-delivery-mode {
    padding: 6px 0;
}
.cam-delivery-mode + .cam-delivery-mode {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}
.cam-delivery-mode-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.cam-delivery-mode-label svg { color: var(--success); }
.cam-delivery-mode-inactive .cam-delivery-mode-label {
    color: var(--text-secondary);
    font-weight: 400;
}
.cam-delivery-mode-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}
.cam-delivery-mode-desc strong { color: var(--text-primary); }
.cam-delivery-url {
    margin-top: 4px;
}
.cam-delivery-url code {
    font-size: 0.65rem;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f1f5f9);
    padding: 2px 6px;
    border-radius: 3px;
    word-break: break-all;
    display: block;
}
.cam-delivery-mode-inactive .cam-delivery-url code { opacity: 0.5; }
[data-theme="dark"] .cam-delivery-panel { border-color: #334155; }
[data-theme="dark"] .cam-delivery-panel.cam-delivery-cdn { border-color: var(--success); }
[data-theme="dark"] .cam-delivery-header { background: rgba(30,41,59,0.5); border-color: #334155; }
[data-theme="dark"] .cam-delivery-panel.cam-delivery-cdn .cam-delivery-header { background: rgba(4,120,87,0.15); border-color: var(--success); }
[data-theme="dark"] .cam-delivery-url code { background: rgba(30,41,59,0.5); }
.cam-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    flex: 1;
}
.cam-card-grid .form-group {
    margin-bottom: 0 !important;
    padding: 6px 0;
}
.cam-card-grid .form-label {
    font-size: 0.6rem;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.7;
}
.cam-card-grid .inline-edit {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
    word-break: break-all;
    border-bottom: 1px dashed var(--border);
    border-radius: 0;
    padding: 1px 2px;
}
.cam-card-grid .inline-edit::after {
    content: ' \270E';
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.15s;
    color: var(--text-secondary);
}
.cam-card-grid .inline-edit:hover::after {
    opacity: 1;
}
.cam-card-grid span:not(.badge):not(.inline-edit) {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
    word-break: break-all;
}
@media (max-width: 768px) {
    .cam-card-body { grid-template-columns: 1fr; }
    .cam-card-thumb { border-right: none; border-bottom: 1px solid var(--border); max-width: 300px; }
    .cam-card-header { flex-direction: column; align-items: flex-start; }
    .cam-card-actions { margin-left: 0; }
}
[data-theme="dark"] .cam-card { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cam-card-header { background: rgba(30,41,59,0.5); border-color: #334155; }
[data-theme="dark"] .cam-card-thumb { border-color: #334155; }
[data-theme="dark"] .cam-card-cdn { background: rgba(30,41,59,0.5); border-color: #334155; }
[data-theme="dark"] .cam-card-cdn.cdn-active { background: rgba(4, 120, 87, 0.15); }

/* Rename warning banner */
.rename-warning-banner {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 10px 14px;
    color: #854d0e;
    font-size: 0.82rem;
    margin-bottom: 16px;
    line-height: 1.5;
}
[data-theme="dark"] .rename-warning-banner {
    background: rgba(133, 77, 14, 0.15);
    border-color: #92400e;
    color: #fbbf24;
}

/* Xero invoices table */
.xero-invoices-wrap { overflow-x: auto; }
.xero-invoices-table { margin: 0; font-size: 0.82rem; }
.xero-invoices-table th { white-space: nowrap; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.xero-invoices-table td { white-space: nowrap; }
.xero-invoices-table .text-right { text-align: right; }
.xero-inv-link { color: var(--primary); text-decoration: none; font-weight: 500; }
.xero-inv-link:hover { text-decoration: underline; }

/* KPI card red variant (overdue) */
.kpi-card.red .kpi-value { color: var(--danger); }

/* History timeline */
.job-history-timeline {
    padding: 0;
}
.job-history-entry {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.job-history-entry:last-child { border-bottom: none; }
.job-history-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background: var(--primary);
}
.job-history-dot.created { background: var(--success); }
.job-history-dot.updated { background: var(--primary); }
.job-history-dot.deleted { background: var(--danger); }
.job-history-dot.import { background: var(--warning); }
.job-history-content { flex: 1; min-width: 0; }
.job-history-text {
    font-size: 0.875rem;
    color: var(--text-primary);
}
.job-history-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Tab icon styling */
.tab .tab-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 2px;
}
.tab .tab-icon svg { width: 14px; height: 14px; }

/* Responsive: Job Detail */
@media (max-width: 991px) {
    .job-overview-grid { grid-template-columns: 1fr; }
    .job-field-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .job-field-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .job-field-grid { grid-template-columns: 1fr; }
    .job-field-grid-3 { grid-template-columns: 1fr; }
    .job-field-grid-4 { grid-template-columns: 1fr; }
    .job-contacts-grid { grid-template-columns: 1fr; }
    .job-check-grid { grid-template-columns: 1fr; }
}

/* Dark mode: Job Detail */
[data-theme="dark"] .job-section { background: var(--bg-card); }
[data-theme="dark"] .job-section-header { border-bottom-color: #334155; }
[data-theme="dark"] .job-section-header svg { color: #60a5fa; }
[data-theme="dark"] .job-contact-card { background: var(--bg-card); }
[data-theme="dark"] .job-check-item { background: #0f172a; }
[data-theme="dark"] .job-check-item:hover { background: #1e293b; }
[data-theme="dark"] .job-check-item .check-icon { border-color: #475569; }
[data-theme="dark"] .job-check-item.checked .check-icon { background: #4ade80; border-color: #4ade80; color: #052e16; }
[data-theme="dark"] .job-check-item.checked .check-icon svg { color: #052e16; }
[data-theme="dark"] .job-total-highlight { background: rgba(74, 222, 128, 0.12); }
[data-theme="dark"] .job-total-value { color: #4ade80; }
[data-theme="dark"] .job-links-bar { background: var(--bg-card); }
[data-theme="dark"] .job-history-entry { border-bottom-color: #334155; }
[data-theme="dark"] .xero-inv-link { color: #60a5fa; }
[data-theme="dark"] .kpi-card.red .kpi-value { color: #ef4444; }

/* ======================================================================== */
/* Job Detail — Compact Header Bar                                          */
/* ======================================================================== */
.job-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.job-header-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: all 0.15s;
}
.job-header-back:hover { color: var(--primary); border-color: var(--primary); }
.job-header-jn {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}
.job-header-client {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.job-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.job-header-spacer { flex: 1; }
.job-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.job-nav-btn {
    padding: 4px 6px;
    min-width: 28px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.job-nav-btn:hover:not(:disabled) { opacity: 1; }
.job-nav-btn:disabled { opacity: 0.2; cursor: default;
}
@media (max-width: 768px) {
    .job-header-bar { gap: 8px; }
    .job-header-client { display: none; }
}
[data-theme="dark"] .job-header-back { background: var(--bg-card); border-color: #334155; }

/* ======================================================================== */
/* Job Detail — Compact Spacing Overrides                                   */
/* ======================================================================== */
/* Tighter KPI cards on job detail */
.job-header-bar ~ #jobStats .kpi-grid {
    gap: 10px;
    margin-bottom: 14px;
}
.job-header-bar ~ #jobStats .kpi-card {
    padding: 12px 16px;
}
.job-header-bar ~ #jobStats .kpi-label {
    margin-bottom: 4px;
}
.job-header-bar ~ #jobStats .kpi-value {
    font-size: 1.35rem;
}
/* Tighter tabs */
.job-header-bar ~ .tabs {
    margin-bottom: 14px;
}
/* Tighter sections */
.job-header-bar ~ .tab-content .job-section {
    padding: 14px 16px;
    margin-bottom: 10px;
}
.job-header-bar ~ .tab-content .job-section-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    font-size: 0.9rem;
}
.job-header-bar ~ .tab-content .job-overview-grid {
    gap: 10px;
    margin-bottom: 10px;
}
.job-header-bar ~ .tab-content .job-field-grid {
    gap: 8px 16px;
}
.job-header-bar ~ .tab-content .job-contacts-grid {
    gap: 10px;
}
.job-header-bar ~ .tab-content .job-contact-card {
    padding: 12px;
}
.job-header-bar ~ .tab-content .job-links-bar {
    padding: 8px 12px;
    margin-bottom: 10px;
}

/* ======================================================================== */
/* Job Detail — Subtle Tab Section Colors                                   */
/* ======================================================================== */
/* Light accent tints on section headers */
.job-section-header svg { color: var(--primary); }

#tabOverview .job-section-header {
    border-bottom-color: #dbeafe;
}
#tabContacts .job-contact-role {
    color: var(--primary);
}
#tabFinancial .job-section-header {
    border-bottom-color: #d1fae5;
}
#tabFinancial .job-section-header svg { color: var(--success); }
#tabCamera .job-section-header {
    border-bottom-color: #fef3c7;
}
#tabCamera .job-section-header svg { color: var(--warning); }
#tabNotes .job-section-header {
    border-bottom-color: #ede9fe;
}
#tabNotes .job-section-header svg { color: #7c3aed; }
#tabAdmin .job-section-header {
    border-bottom-color: #e0e7ff;
}
#tabAdmin .job-section-header svg { color: #4f46e5; }
#tabHistory .job-section-header {
    border-bottom-color: #f3e8ff;
}
/* Colored left accent on section cards */
#tabOverview .job-section {
    border-left: 3px solid #93c5fd;
}
#tabContacts .job-contact-card {
    border-left: 3px solid #93c5fd;
}
#tabFinancial .job-section {
    border-left: 3px solid #86efac;
}
#tabCamera .job-section {
    border-left: 3px solid #fcd34d;
}
#tabWorkOrders .job-section {
    border-left: 3px solid #fdba74;
}
#tabNotes .job-section {
    border-left: 3px solid #c4b5fd;
}
#tabAdmin .job-section {
    border-left: 3px solid #a5b4fc;
}
#tabHistory .job-section {
    border-left: 3px solid #d8b4fe;
}
[data-theme="dark"] #tabOverview .job-section { border-left-color: #2563eb; }
[data-theme="dark"] #tabContacts .job-contact-card { border-left-color: #2563eb; }
[data-theme="dark"] #tabFinancial .job-section { border-left-color: #16a34a; }
[data-theme="dark"] #tabCamera .job-section { border-left-color: #d97706; }
[data-theme="dark"] #tabWorkOrders .job-section { border-left-color: #ea580c; }
[data-theme="dark"] #tabNotes .job-section { border-left-color: #7c3aed; }
[data-theme="dark"] #tabAdmin .job-section { border-left-color: #4f46e5; }
[data-theme="dark"] #tabHistory .job-section { border-left-color: #9333ea; }

/* Dark mode overrides for section colors */
[data-theme="dark"] #tabOverview .job-section-header { border-bottom-color: #1e3a5f; }
[data-theme="dark"] #tabFinancial .job-section-header { border-bottom-color: #14532d; }
[data-theme="dark"] #tabFinancial .job-section-header svg { color: #4ade80; }
[data-theme="dark"] #tabCamera .job-section-header { border-bottom-color: #422006; }
[data-theme="dark"] #tabCamera .job-section-header svg { color: #fbbf24; }
[data-theme="dark"] #tabNotes .job-section-header { border-bottom-color: #2e1065; }
[data-theme="dark"] #tabNotes .job-section-header svg { color: #a78bfa; }
[data-theme="dark"] #tabAdmin .job-section-header { border-bottom-color: #1e1b4b; }
[data-theme="dark"] #tabAdmin .job-section-header svg { color: #818cf8; }
[data-theme="dark"] #tabContacts .job-contact-role { color: #60a5fa; }

/* ======================================================================== */
/* Job Detail — Embedded Map                                                */
/* ======================================================================== */
.job-map-embed {
    margin-top: 10px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.job-map-embed iframe {
    display: block;
}
[data-theme="dark"] .job-map-embed { border-color: #334155; }

/* ======================================================================== */
/* Draft Picker Modal                                                       */
/* ======================================================================== */
.draft-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.draft-picker-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.draft-picker-header {
    padding: 20px 24px 12px;
}
.draft-picker-header h2,
.draft-picker-header h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}
.draft-picker-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.draft-picker-list {
    padding: 0 16px;
    max-height: 320px;
    overflow-y: auto;
}
.draft-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.15s;
}
.draft-picker-item:hover {
    border-color: var(--primary);
    background: #eff6ff;
}
.draft-picker-item-info {
    flex: 1;
    min-width: 0;
}
.draft-picker-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.draft-picker-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.draft-picker-item-actions {
    flex-shrink: 0;
}
.draft-picker-item .btn-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}
.draft-picker-item .btn-delete:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.draft-picker-footer {
    padding: 12px 24px 20px;
    display: flex;
    justify-content: center;
}
[data-theme="dark"] .draft-picker-modal { background: var(--bg-card); }
[data-theme="dark"] .draft-picker-item { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .draft-picker-item:hover { background: #1e293b; border-color: #3b82f6; }

/* ======================================================================== */
/* Draft Editing Warning Banner                                             */
/* ======================================================================== */
.draft-editing-banner {
    background: #fef2f2;
    border: 2px solid #ef4444;
    border-radius: var(--radius);
    padding: 12px 20px;
    margin-bottom: 12px;
    color: #991b1b;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.draft-editing-banner .banner-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
[data-theme="dark"] .draft-editing-banner {
    background: #450a0a;
    border-color: #dc2626;
    color: #fca5a5;
}

/* ======================================================================== */
/* REFINED INDUSTRIAL — Visual Enhancement System                            */
/* ======================================================================== */
/* Adds visual personality to job detail tabs: background patterns,          */
/* gradient accents, card effects, and tab animations.                       */
/* All styles are additive — no existing rules are modified or removed.      */
/* ======================================================================== */

/* ======================================================================== */
/* Step 1: Foundation — Tab Content Container + Animation                    */
/* ======================================================================== */
.tab-content.active {
    position: relative;
    /* No overflow:hidden — would clip dropdowns in Camera tab */
    animation: tabFadeIn 0.25s ease-out;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Elevate content above ::before background patterns (targeted to avoid breaking dropdowns) */
.tab-content > .job-section,
.tab-content > .job-links-bar,
.tab-content > .kpi-grid,
.tab-content > .job-overview-grid,
.tab-content > .job-contacts-grid,
.tab-content > .page-loading,
.tab-content > #timelineContainer {
    position: relative;
    z-index: 1;
}

/* ======================================================================== */
/* Step 2A: Section Header Enhancement                                       */
/* ======================================================================== */
.job-header-bar ~ .tab-content .job-section-header {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ======================================================================== */
/* Step 2B: Tab Bar Enhancement                                              */
/* ======================================================================== */
.job-header-bar ~ .tabs {
    background: var(--bg-card);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .job-header-bar ~ .tabs {
    background: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ======================================================================== */
/* Step 2C: Tab Button Hover Effects (pointer devices only)                  */
/* ======================================================================== */
@media (hover: hover) {
    .job-header-bar ~ .tabs .tab:hover {
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    [data-theme="dark"] .job-header-bar ~ .tabs .tab:hover {
        background: rgba(96, 165, 250, 0.08);
    }
}

/* ======================================================================== */
/* Step 2D: Card Hover Lift Effects (pointer devices only — avoids sticky   */
/* hover on touch screens)                                                   */
/* ======================================================================== */
.job-section {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.job-contact-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
    .job-section:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    .job-contact-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
    [data-theme="dark"] .job-section:hover,
    [data-theme="dark"] .job-contact-card:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
}

/* ======================================================================== */
/* Step 2E: Gradient Underlines on Section Headers                           */
/* ======================================================================== */
/* Replace solid border-bottom with gradient ::after pseudo-element */
.job-header-bar ~ .tab-content .job-section-header {
    position: relative;
}
/* Override per-tab border-bottom-color rules (which use ID specificity) */
#tabOverview .job-section-header,
#tabContacts .job-section-header,
#tabFinancial .job-section-header,
#tabCamera .job-section-header,
#tabWorkOrders .job-section-header,
#tabNotes .job-section-header,
#tabAdmin .job-section-header,
#tabHistory .job-section-header {
    border-bottom-color: transparent;
}
.job-section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 30%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
}

/* ======================================================================== */
/* Step 2F: Header Bar Separator                                             */
/* ======================================================================== */
.job-header-bar {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.85);
    margin: 0 -24px;
    padding: 8px 24px 10px;
    border-radius: var(--radius-lg);
}
[data-theme="dark"] .job-header-bar {
    border-bottom-color: #334155;
    background: rgba(15, 23, 42, 0.9);
}

/* ======================================================================== */
/* Step 3: Per-Tab Background Patterns — Base Rule                           */
/* ======================================================================== */
.tab-content.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Hide patterns on empty tabs */
.tab-content:empty::before {
    display: none;
}
/* Hide patterns on mobile — keeps interface clean on small screens */
@media (max-width: 768px) {
    .tab-content.active::before {
        display: none;
    }
}

/* ======================================================================== */
/* Full-Page Background Image                                                */
/* ======================================================================== */
.main-content {
    position: relative;
}
.main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/backgrounds/page-bg.jpg') center/cover no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}
[data-theme="dark"] .main-content::before {
    opacity: 0.3;
    filter: brightness(0.4);
}

/* ======================================================================== */
/* Step 4: Per-Tab Gradient Underlines                                       */
/* ======================================================================== */
#tabOverview .job-section-header::after {
    background: linear-gradient(90deg, #3b82f6 0%, #93c5fd 50%, transparent 100%);
}
#tabContacts .job-section-header::after {
    background: linear-gradient(90deg, #0891b2 0%, #67e8f9 50%, transparent 100%);
}
#tabFinancial .job-section-header::after {
    background: linear-gradient(90deg, #059669 0%, #6ee7b7 50%, transparent 100%);
}
#tabCamera .job-section-header::after {
    background: linear-gradient(90deg, #d97706 0%, #fcd34d 50%, transparent 100%);
}
#tabWorkOrders .job-section-header::after {
    background: linear-gradient(90deg, #ea580c 0%, #fdba74 50%, transparent 100%);
}
#tabNotes .job-section-header::after {
    background: linear-gradient(90deg, #7c3aed 0%, #c4b5fd 50%, transparent 100%);
}
#tabAdmin .job-section-header::after {
    background: linear-gradient(90deg, #4f46e5 0%, #a5b4fc 50%, transparent 100%);
}
#tabHistory .job-section-header::after {
    background: linear-gradient(90deg, #9333ea 0%, #d8b4fe 50%, transparent 100%);
}

/* Dark mode: also make border-bottom transparent (overrides lines 3197-3205) */
[data-theme="dark"] #tabOverview .job-section-header,
[data-theme="dark"] #tabContacts .job-section-header,
[data-theme="dark"] #tabFinancial .job-section-header,
[data-theme="dark"] #tabCamera .job-section-header,
[data-theme="dark"] #tabWorkOrders .job-section-header,
[data-theme="dark"] #tabNotes .job-section-header,
[data-theme="dark"] #tabAdmin .job-section-header,
[data-theme="dark"] #tabHistory .job-section-header {
    border-bottom-color: transparent;
}

/* Dark mode gradient underlines */
[data-theme="dark"] #tabOverview .job-section-header::after {
    background: linear-gradient(90deg, #60a5fa 0%, rgba(96, 165, 250, 0.3) 60%, transparent 100%);
}
[data-theme="dark"] #tabContacts .job-section-header::after {
    background: linear-gradient(90deg, #22d3ee 0%, rgba(34, 211, 238, 0.3) 60%, transparent 100%);
}
[data-theme="dark"] #tabFinancial .job-section-header::after {
    background: linear-gradient(90deg, #4ade80 0%, rgba(74, 222, 128, 0.3) 60%, transparent 100%);
}
[data-theme="dark"] #tabCamera .job-section-header::after {
    background: linear-gradient(90deg, #fbbf24 0%, rgba(251, 191, 36, 0.2) 60%, transparent 100%);
}
[data-theme="dark"] #tabWorkOrders .job-section-header::after {
    background: linear-gradient(90deg, #fb923c 0%, rgba(251, 146, 60, 0.2) 60%, transparent 100%);
}
[data-theme="dark"] #tabNotes .job-section-header::after {
    background: linear-gradient(90deg, #a78bfa 0%, rgba(167, 139, 250, 0.2) 60%, transparent 100%);
}
[data-theme="dark"] #tabAdmin .job-section-header::after {
    background: linear-gradient(90deg, #818cf8 0%, rgba(129, 140, 248, 0.2) 60%, transparent 100%);
}
[data-theme="dark"] #tabHistory .job-section-header::after {
    background: linear-gradient(90deg, #c084fc 0%, rgba(192, 132, 252, 0.2) 60%, transparent 100%);
}

/* ======================================================================== */
/* Step 4B: Thicker Border-Left on Section Cards                             */
/* ======================================================================== */
#tabOverview .job-section { border-left-width: 4px; }
#tabContacts .job-contact-card { border-left-width: 4px; }
#tabFinancial .job-section { border-left-width: 4px; }
#tabCamera .job-section { border-left-width: 4px; }
#tabWorkOrders .job-section { border-left-width: 4px; }
#tabNotes .job-section { border-left-width: 4px; }
#tabAdmin .job-section { border-left-width: 4px; }
#tabHistory .job-section { border-left-width: 4px; }

/* ======================================================================== */
/* Step 4C: Fill Missing Tab Header Colors                                   */
/* ======================================================================== */
#tabContacts .job-section-header svg { color: #0891b2; }
#tabContacts .job-contact-role { color: #0891b2; }
#tabWorkOrders .job-section-header svg { color: #ea580c; }
#tabHistory .job-section-header svg { color: #9333ea; }

[data-theme="dark"] #tabContacts .job-section-header svg { color: #22d3ee; }
[data-theme="dark"] #tabContacts .job-contact-role { color: #22d3ee; }
[data-theme="dark"] #tabWorkOrders .job-section-header svg { color: #fb923c; }
[data-theme="dark"] #tabHistory .job-section-header svg { color: #c084fc; }

/* ======================================================================== */
/* Step 5: KPI Card Gradient Backgrounds                                     */
/* ======================================================================== */
.kpi-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
    .kpi-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
}
.kpi-card.blue {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}
.kpi-card.green {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}
.kpi-card.orange {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
.kpi-card.red {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
.kpi-card.cyan {
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
}
/* Increase top accent bar from 3px to 4px */
.kpi-card::before {
    height: 4px;
}

/* Dark mode KPI gradients */
[data-theme="dark"] .kpi-card.blue {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(37, 99, 235, 0.08) 100%);
}
[data-theme="dark"] .kpi-card.green {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(5, 150, 105, 0.08) 100%);
}
[data-theme="dark"] .kpi-card.orange {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(217, 119, 6, 0.08) 100%);
}
[data-theme="dark"] .kpi-card.red {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(220, 38, 38, 0.08) 100%);
}
[data-theme="dark"] .kpi-card.cyan {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(8, 145, 178, 0.08) 100%);
}
[data-theme="dark"] .kpi-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ======================================================================== */
/* Reduced Motion: disable animations for users who prefer reduced motion   */
/* ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus styles (D5) */
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.tab-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Google Chat Tab ── */
.chat-stats-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.chat-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 24px;
    flex: 1;
}
.chat-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.chat-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-top: 4px;
}
.chat-space-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--space-color, var(--primary));
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.chat-space-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.chat-space-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.chat-space-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-space-open {
    flex-shrink: 0;
}
.chat-space-header-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
}
.chat-stat-action {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-space-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 16px;
    background: var(--space-bg, var(--bg-secondary, #f8fafc));
}
.chat-space-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.chat-space-meta svg {
    width: 12px;
    height: 12px;
}
.chat-messages-list {
    border-top: 1px solid var(--border);
    padding: 8px 16px;
    max-height: 300px;
    overflow-y: auto;
}
.chat-msg {
    padding: 6px 0;
}
.chat-msg + .chat-msg {
    border-top: 1px solid var(--border);
}
.chat-msg-sender {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-msg-time {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-secondary);
}
.chat-msg-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-members-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
}
.chat-member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--space-color, var(--primary));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Dark mode: Chat tab */
[data-theme="dark"] .chat-stat { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .chat-space-card { background: var(--bg-card); border-color: #334155; border-left-color: var(--space-color, var(--primary)); }
[data-theme="dark"] .chat-space-header { border-color: #334155; }
[data-theme="dark"] .chat-space-details { background: rgba(30,41,59,0.5); }
[data-theme="dark"] .chat-messages-list { border-color: #334155; }
[data-theme="dark"] .chat-msg + .chat-msg { border-color: #334155; }
[data-theme="dark"] .chat-members-row { border-color: #334155; }

/* Responsive: Chat tab */
@media (max-width: 768px) {
    .chat-stats-bar { flex-direction: column; gap: 8px; }
    .chat-space-header { flex-wrap: wrap; }
    .chat-space-name { order: -1; width: 100%; white-space: normal; }
    .chat-space-details { flex-direction: column; gap: 6px; }
}

/* ── Google Tasks Section (Overview tab) ── */
.tasks-section .job-section-header svg { color: #2563eb; }

.tasks-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.tasks-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.tasks-error { color: var(--danger); }
.tasks-empty-list {
    padding: 16px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* Stats bar */
.tasks-stats-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 0.8rem;
}
.tasks-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-weight: 500;
}
.tasks-stat-overdue {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    font-weight: 600;
}
.tasks-stat-done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}
.tasks-stat-list {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

/* Task list */
.tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Task row */
.task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    transition: background 0.15s ease;
}
.task-row + .task-row {
    border-top: 1px solid var(--border-light);
}
.task-row:hover {
    background: var(--bg-primary);
}

/* Custom checkbox */
.task-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.task-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.task-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: var(--bg-card);
}
.task-checkbox:checked + .task-checkbox-custom {
    background: #2563eb;
    border-color: #2563eb;
}
.task-checkbox:checked + .task-checkbox-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.task-checkbox:focus-visible + .task-checkbox-custom {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Task title */
.task-title {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.task-completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Due date badge */
.task-due {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: var(--bg-primary);
    border-radius: var(--radius);
}
.task-due-overdue {
    background: #fef2f2;
    color: #dc2626;
    font-weight: 600;
}
.task-completed .task-due {
    opacity: 0.5;
}

/* Overdue row highlight */
.task-overdue {
    background: #fffbeb;
}
.task-overdue:hover {
    background: #fef3c7;
}

/* Add task input */
.tasks-add-row {
    margin-top: 10px;
}
.tasks-add-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, background 0.15s ease;
    outline: none;
    box-sizing: border-box;
}
.tasks-add-input::placeholder {
    color: var(--text-muted);
}
.tasks-add-input:focus {
    border-color: #2563eb;
    border-style: solid;
    background: var(--bg-card);
}
.tasks-add-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode: Tasks */
[data-theme="dark"] .tasks-section .job-section-header svg { color: #60a5fa; }
[data-theme="dark"] .tasks-stat { background: rgba(30,41,59,0.5); border-color: #334155; }
[data-theme="dark"] .tasks-stat-overdue { background: rgba(220,38,38,0.12); border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .tasks-stat-done { background: rgba(22,163,74,0.12); border-color: #14532d; color: #86efac; }
[data-theme="dark"] .tasks-list { border-color: #334155; }
[data-theme="dark"] .task-row { background: var(--bg-card); }
[data-theme="dark"] .task-row + .task-row { border-color: #334155; }
[data-theme="dark"] .task-row:hover { background: rgba(30,41,59,0.5); }
[data-theme="dark"] .task-checkbox-custom { border-color: #4b5563; background: var(--bg-card); }
[data-theme="dark"] .task-checkbox:checked + .task-checkbox-custom { background: #3b82f6; border-color: #3b82f6; }
[data-theme="dark"] .task-due { background: rgba(30,41,59,0.5); }
[data-theme="dark"] .task-due-overdue { background: rgba(220,38,38,0.12); color: #fca5a5; }
[data-theme="dark"] .task-overdue { background: rgba(217,119,6,0.08); }
[data-theme="dark"] .task-overdue:hover { background: rgba(217,119,6,0.15); }
[data-theme="dark"] .tasks-add-input { background: var(--bg-card); border-color: #334155; color: var(--text-primary); }
[data-theme="dark"] .tasks-add-input:focus { border-color: #3b82f6; background: rgba(30,41,59,0.8); }

/* Responsive: Tasks */
@media (max-width: 480px) {
    .tasks-stats-bar { gap: 6px; }
    .tasks-stat { font-size: 0.72rem; padding: 2px 6px; }
    .tasks-stat-list { display: none; }
    .task-row { padding: 6px 8px; gap: 8px; }
    .task-title { font-size: 0.8rem; }
}

/* ========================================================================
   Camera Health Dashboard
   ======================================================================== */
.cam-health-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 16px;
}
.cam-health-loading {
    padding: 24px;
    text-align: center;
}
.cam-health-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.cam-health-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cam-health-spin 0.8s linear infinite;
}
@keyframes cam-health-spin {
    to { transform: rotate(360deg); }
}
.cam-health-unavailable {
    padding: 16px 20px;
    color: var(--text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cam-health-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-primary);
}
.cam-health-body {
    padding: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: start;
}
.cam-health-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}
.cam-health-score-wrap {
    position: relative;
    width: 96px;
    height: 96px;
}
.cam-health-ring {
    width: 96px;
    height: 96px;
}
.cam-health-ring-arc {
    transition: stroke-dasharray 0.6s ease;
}
.cam-health-score-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}
.cam-health-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cam-health-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cam-health-badge-good { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.cam-health-badge-fair { background: rgba(234, 179, 8, 0.12); color: #a16207; }
.cam-health-badge-poor { background: rgba(249, 115, 22, 0.12); color: #c2410c; }
.cam-health-badge-critical { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.cam-health-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--font-mono, monospace);
}
.cam-health-trend-up { color: #16a34a; }
.cam-health-trend-down { color: #dc2626; }
.cam-health-trend-stable { color: var(--text-secondary); }

.cam-health-issue {
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 140px;
    line-height: 1.3;
}

/* Component bars */
.cam-health-components {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.cam-health-comp {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cam-health-comp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
}
.cam-health-comp-detail {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.cam-health-comp-weight {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.cam-health-bar-bg {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}
.cam-health-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 2px;
}

/* Sparkline */
.cam-health-sparkline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.cam-health-sparkline-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
#camHealthSparkline {
    max-width: 300px;
    height: 60px;
}

/* Footer */
.cam-health-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* Responsive: Camera Health */
@media (max-width: 900px) {
    .cam-health-body {
        grid-template-columns: auto 1fr;
    }
    .cam-health-sparkline {
        grid-column: 1 / -1;
    }
    #camHealthSparkline { max-width: 100%; width: 100%; }
}
@media (max-width: 600px) {
    .cam-health-body {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cam-health-overview {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
    .cam-health-meta { align-items: flex-start; }
    .cam-health-issue { max-width: none; text-align: left; }
    #camHealthSparkline { max-width: 100%; width: 100%; }
}

/* Dark mode: Camera Health */
[data-theme="dark"] .cam-health-section { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .cam-health-header { background: rgba(30,41,59,0.5); border-color: #334155; }
[data-theme="dark"] .cam-health-unavailable { color: #64748b; }
[data-theme="dark"] .cam-health-score-num { color: #e2e8f0; }
[data-theme="dark"] .cam-health-ring { --cam-health-ring-bg: #334155; }
[data-theme="dark"] .cam-health-badge-good { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
[data-theme="dark"] .cam-health-badge-fair { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
[data-theme="dark"] .cam-health-badge-poor { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
[data-theme="dark"] .cam-health-badge-critical { background: rgba(239, 68, 68, 0.2); color: #f87171; }
[data-theme="dark"] .cam-health-trend-up { color: #4ade80; }
[data-theme="dark"] .cam-health-trend-down { color: #f87171; }
[data-theme="dark"] .cam-health-trend-stable { color: #94a3b8; }
[data-theme="dark"] .cam-health-issue { color: #94a3b8; }
[data-theme="dark"] .cam-health-comp-label { color: #e2e8f0; }
[data-theme="dark"] .cam-health-comp-detail { color: #94a3b8; }
[data-theme="dark"] .cam-health-comp-weight { color: #64748b; }
[data-theme="dark"] .cam-health-bar-bg { background: #1e293b; }
[data-theme="dark"] .cam-health-sparkline-label { color: #94a3b8; }
[data-theme="dark"] .cam-health-footer { border-color: #334155; }
[data-theme="dark"] .cam-health-spinner { border-color: #475569; border-top-color: #60a5fa; }

/* ========================================================================
   Map Camera Status Overlay
   ======================================================================== */

/* Marker dots */
.map-marker {
    background: transparent !important;
    border: none !important;
}
.map-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.map-dot-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.15);
}
.map-dot-ring .map-dot {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
}
.map-marker-online .map-dot-ring {
    animation: map-pulse-green 2s ease-in-out infinite;
}
@keyframes map-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(16,185,129,0.1); }
}

/* Camera legend (Leaflet control, bottom-left) */
.map-camera-legend {
    background: var(--bg-card, #fff);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 0.78rem;
    line-height: 1.4;
    min-width: 130px;
}
.map-legend-title {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: 6px;
    font-size: 0.8rem;
}
.map-legend-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary, #64748b);
}
.map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid white;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.map-legend-online {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.3), 0 0 0 1px rgba(0,0,0,0.1);
}
.map-legend-offline {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.3), 0 0 0 1px rgba(0,0,0,0.1);
}
.map-legend-nocam {
    background: #94a3b8;
}

/* Map popup enhancements */
.map-popup {
    min-width: 220px;
    max-width: 300px;
    line-height: 1.5;
}
.map-popup a {
    color: var(--primary, #2563eb);
    text-decoration: none;
    font-weight: 600;
}
.map-popup a:hover {
    text-decoration: underline;
}
.map-popup-client {
    font-size: 0.85em;
    color: var(--text-primary, #1e293b);
}
.map-popup-project {
    font-size: 0.85em;
    color: var(--text-secondary, #64748b);
}
.map-popup-addr {
    font-size: 0.8em;
    color: var(--text-secondary, #64748b);
}

/* Camera info in popup */
.map-popup-cam {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #e2e8f0);
}
.map-popup-cam-name {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--text-primary, #334155);
    font-family: var(--font-mono, monospace);
    word-break: break-all;
    margin-bottom: 3px;
}
.map-popup-cam-status {
    font-size: 0.78em;
    font-weight: 500;
    margin-bottom: 3px;
}
.map-popup-cam-online {
    color: #059669;
}
.map-popup-cam-offline {
    color: #dc2626;
    font-weight: 600;
}
.map-popup-cam-health {
    font-size: 0.76em;
    color: var(--text-secondary, #64748b);
}
.map-popup-cam-issue {
    font-size: 0.92em;
    color: var(--text-muted, #94a3b8);
    font-style: italic;
}

/* Health grade badges in popup */
.map-health-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
}
.map-health-excellent {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.map-health-good {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.map-health-fair {
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
}
.map-health-poor {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
}
.map-health-critical {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
.map-health-unknown {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

/* Dark mode: Map camera overlay */
[data-theme="dark"] .map-camera-legend {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .map-legend-title { color: #e2e8f0; }
[data-theme="dark"] .map-legend-item { color: #94a3b8; }
[data-theme="dark"] .map-legend-dot { border-color: #334155; }
[data-theme="dark"] .map-popup-cam { border-top-color: #334155; }
[data-theme="dark"] .map-popup-cam-name { color: #e2e8f0; }
[data-theme="dark"] .map-popup-cam-online { color: #34d399; }
[data-theme="dark"] .map-popup-cam-offline { color: #f87171; }
[data-theme="dark"] .map-popup-cam-health { color: #94a3b8; }
[data-theme="dark"] .map-popup-cam-issue { color: #64748b; }
[data-theme="dark"] .map-health-excellent { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
[data-theme="dark"] .map-health-good { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
[data-theme="dark"] .map-health-fair { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
[data-theme="dark"] .map-health-poor { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
[data-theme="dark"] .map-health-critical { background: rgba(239, 68, 68, 0.2); color: #f87171; }
[data-theme="dark"] .map-health-unknown { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
[data-theme="dark"] .map-dot { border-color: #334155; }
[data-theme="dark"] .map-dot-ring { background: rgba(30,41,59,0.3); }

/* Responsive: Map legend */
@media (max-width: 640px) {
    .map-camera-legend {
        font-size: 0.72rem;
        padding: 8px 10px;
        min-width: 110px;
    }
}

/* ========================================================================
   Google Drive Section (Job Detail Overview tab)
   ======================================================================== */

.drive-section {
    margin-top: 0;
}

.drive-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.drive-loading .loading-spinner {
    width: 18px;
    height: 18px;
}

.drive-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.drive-empty svg {
    color: var(--text-muted);
    opacity: 0.6;
}
.drive-empty.drive-error {
    color: var(--danger, #dc2626);
}
.drive-empty.drive-error svg {
    color: var(--danger, #dc2626);
}

/* Folder header */
.drive-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}
.drive-folder-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.drive-folder-icon svg {
    color: #facc15;
    width: 20px;
    height: 20px;
}
.drive-folder-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drive-open-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* File list */
.drive-file-list {
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.drive-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.84rem;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-light);
}
.drive-file-row:last-child {
    border-bottom: none;
}
.drive-file-row:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--primary);
}
.drive-file-folder {
    font-weight: 500;
}
.drive-file-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}
.drive-file-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.drive-file-folder .drive-file-icon svg {
    color: #facc15;
}
.drive-file-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drive-file-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.drive-file-size {
    white-space: nowrap;
}
.drive-file-date {
    white-space: nowrap;
}

/* Icon colors for file types */
.drive-icon-doc { color: #4285f4; }
.drive-icon-sheet { color: #0f9d58; }
.drive-icon-slide { color: #f4b400; }
.drive-icon-image { color: #ea4335; }
.drive-icon-pdf { color: #ea4335; }
.drive-icon-video { color: #ea4335; }
.drive-icon-audio { color: #ab47bc; }
.drive-icon-zip { color: #78909c; }

/* Alt folders */
.drive-alt-folders {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}
.drive-alt-label {
    color: var(--text-muted);
}
.drive-alt-link {
    color: var(--primary);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--radius);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    transition: background 0.15s;
}
.drive-alt-link:hover {
    background: var(--bg-hover);
    text-decoration: none;
}

/* Dark mode: Drive section */
[data-theme="dark"] .drive-folder-header { border-bottom-color: #334155; }
[data-theme="dark"] .drive-folder-icon svg { color: #fde047; }
[data-theme="dark"] .drive-file-list { border-color: #334155; }
[data-theme="dark"] .drive-file-row { border-bottom-color: #334155; }
[data-theme="dark"] .drive-file-row:hover { background: rgba(59, 130, 246, 0.08); }
[data-theme="dark"] .drive-file-folder .drive-file-icon svg { color: #fde047; }
[data-theme="dark"] .drive-alt-folders { border-top-color: #334155; }
[data-theme="dark"] .drive-alt-link { background: rgba(30, 41, 59, 0.5); border-color: #334155; }
[data-theme="dark"] .drive-alt-link:hover { background: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .drive-empty.drive-error { color: #f87171; }
[data-theme="dark"] .drive-empty.drive-error svg { color: #f87171; }

/* Responsive: Drive section */
@media (max-width: 640px) {
    .drive-folder-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .drive-file-meta {
        display: none;
    }
}

/* ========================================================================
   Work Orders Tab — Card-based lifecycle
   ======================================================================== */

/* Stats bar */
.wo-stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.wo-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 20px;
    flex: 1;
}
.wo-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}
.wo-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* WO Cards container */
.wo-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Individual WO card */
.wo-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--wo-color, var(--primary));
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.wo-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.wo-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.wo-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

/* Status select */
.wo-status-wrap {
    flex-shrink: 0;
}
.wo-status-select {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
}
.wo-status-open {
    background-color: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.wo-status-progress {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}
.wo-status-completed {
    background-color: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* Linked spaces in WO card body */
.wo-card-spaces {
    padding: 8px 16px;
}
.wo-space-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.wo-space-link + .wo-space-link {
    border-top: 1px solid var(--border-light);
}
.wo-space-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.wo-space-name {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wo-space-open {
    flex-shrink: 0;
    font-size: 0.72rem;
}
.wo-card-no-space {
    padding: 10px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wo-card-no-space svg {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

/* Create Work Order form */
.wo-create-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 4px;
}
.wo-create-header {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wo-create-header svg { width: 14px; height: 14px; }
.wo-create-body {
    padding: 12px 16px;
}
.wo-create-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.wo-create-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wo-create-field:first-child {
    flex: 1;
    min-width: 160px;
}
.wo-create-field:nth-child(2) {
    min-width: 150px;
}
.wo-create-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wo-create-actions {
    justify-content: flex-end;
}
.wo-remove-btn {
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.wo-remove-btn:hover {
    opacity: 1;
    color: var(--danger);
}

/* Dark mode: Work Orders */
[data-theme="dark"] .wo-stat { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .wo-card { background: var(--bg-card); border-color: #334155; border-left-color: var(--wo-color, var(--primary)); }
[data-theme="dark"] .wo-card-header { border-color: #334155; }
[data-theme="dark"] .wo-status-open { background-color: rgba(37,99,235,0.15); color: #60a5fa; border-color: #1e40af; }
[data-theme="dark"] .wo-status-progress { background-color: rgba(217,119,6,0.15); color: #fbbf24; border-color: #92400e; }
[data-theme="dark"] .wo-status-completed { background-color: rgba(22,163,74,0.15); color: #4ade80; border-color: #14532d; }
[data-theme="dark"] .wo-space-link + .wo-space-link { border-color: #334155; }
[data-theme="dark"] .wo-create-form { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .wo-create-header { background: rgba(30,41,59,0.5); border-color: #334155; }

/* Responsive: Work Orders */
@media (max-width: 768px) {
    .wo-stats-bar { flex-direction: column; gap: 8px; }
    .wo-card-header { flex-wrap: wrap; }
    .wo-number { order: -1; width: 100%; }
    .wo-create-row { flex-direction: column; }
    .wo-create-field { width: 100%; }
    .wo-create-field:first-child,
    .wo-create-field:nth-child(2) { min-width: 0; }
}

/* ========================================================================
   Provisioning Section (Admin tab)
   ======================================================================== */

.provision-section {
    margin-top: 16px;
}

/* Status checklist */
.provision-status {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
}
.provision-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    transition: background 0.15s;
}
.provision-step + .provision-step {
    border-top: 1px solid var(--border-light);
}
.provision-step-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.provision-step-done .provision-step-check {
    background: #dcfce7;
    color: #16a34a;
}
.provision-step-done .provision-step-check svg {
    width: 14px;
    height: 14px;
}
.provision-step-pending .provision-step-check {
    background: var(--bg-primary);
    border: 2px solid var(--border);
}
.provision-step-empty {
    display: block;
    width: 8px;
    height: 8px;
}
.provision-step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}
.provision-step-icon svg {
    width: 16px;
    height: 16px;
}
.provision-step-done .provision-step-icon {
    color: var(--text-primary);
}
.provision-step-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}
.provision-step-pending .provision-step-label {
    color: var(--text-secondary);
}

/* Meta line */
.provision-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Actions */
.provision-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.provision-actions .btn-success {
    background: #16a34a;
    color: #fff;
    font-weight: 600;
}
.provision-actions .btn-success:hover {
    background: #15803d;
}
.provision-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Dark mode: Provisioning */
[data-theme="dark"] .provision-status { border-color: #334155; }
[data-theme="dark"] .provision-step { background: var(--bg-card); }
[data-theme="dark"] .provision-step + .provision-step { border-color: #334155; }
[data-theme="dark"] .provision-step-done .provision-step-check { background: rgba(22,163,74,0.18); color: #4ade80; }
[data-theme="dark"] .provision-step-pending .provision-step-check { background: rgba(30,41,59,0.5); border-color: #4b5563; }
[data-theme="dark"] .provision-actions .btn-success { background: #15803d; }
[data-theme="dark"] .provision-actions .btn-success:hover { background: #166534; }

/* Responsive: Provisioning */
@media (max-width: 480px) {
    .provision-step { padding: 8px 10px; gap: 8px; }
    .provision-step-label { font-size: 0.8rem; }
}

/* ========================================================================
   AI Insights Section
   ======================================================================== */

.ai-insights-section {
    border-left: 3px solid var(--primary);
}

.ai-insights-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Empty state */
.ai-insights-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.ai-insights-empty svg { color: var(--text-muted); }
.ai-insights-empty.ai-insights-error { color: var(--danger); }
.ai-insights-empty.ai-insights-error svg { color: var(--danger); }

.ai-insights-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    text-align: center;
}
.ai-insights-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ai-insights-empty-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}
.ai-insights-empty-text {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.ai-insights-empty-sub {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Header row */
.ai-insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-insights-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-insights-health-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ai-insights-health-green { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.ai-insights-health-yellow { background: #eab308; box-shadow: 0 0 6px rgba(234, 179, 8, 0.4); }
.ai-insights-health-red { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

.ai-insights-health-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ai-insights-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-insights-age {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ai-insights-refresh-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ai-insights-refresh-btn svg {
    width: 12px;
    height: 12px;
}

/* Summary */
.ai-insights-summary {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary);
    padding: 10px 14px;
    background: var(--bg-primary);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary);
    margin-bottom: 12px;
}

/* Flags */
.ai-insights-flags {
    margin-bottom: 12px;
}
.ai-insights-flags-label,
.ai-insights-actions-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ai-insights-flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-insights-flag-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--warning-light);
    color: var(--warning);
    border-radius: 20px;
    line-height: 1.3;
}

/* Actions */
.ai-insights-actions {
    margin-bottom: 4px;
}
.ai-insights-actions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ai-insights-actions-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 0.84rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.ai-insights-actions-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 2px solid var(--border);
    background: var(--bg-card);
}
.ai-insights-actions-list li + li {
    border-top: 1px solid var(--border-light);
}

/* Dark mode: AI Insights */
[data-theme="dark"] .ai-insights-section { border-left-color: #60a5fa; }
[data-theme="dark"] .ai-insights-summary { background: rgba(30, 41, 59, 0.5); border-left-color: #60a5fa; }
[data-theme="dark"] .ai-insights-flag-badge { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
[data-theme="dark"] .ai-insights-actions-list li::before { border-color: #475569; background: #1e293b; }
[data-theme="dark"] .ai-insights-actions-list li + li { border-top-color: #334155; }
[data-theme="dark"] .ai-insights-empty-icon { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .ai-insights-empty.ai-insights-error { color: #f87171; }
[data-theme="dark"] .ai-insights-empty.ai-insights-error svg { color: #f87171; }
[data-theme="dark"] .ai-insights-health-green { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
[data-theme="dark"] .ai-insights-health-yellow { box-shadow: 0 0 8px rgba(234, 179, 8, 0.3); }
[data-theme="dark"] .ai-insights-health-red { box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }

/* Responsive: AI Insights */
@media (max-width: 480px) {
    .ai-insights-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ai-insights-flags-list {
        flex-direction: column;
    }
    .ai-insights-flag-badge {
        width: fit-content;
    }
}

/* ========================================
   Equipment & Inventory Tracker
   ======================================== */

/* Equipment Table */
.equip-table {
    table-layout: auto;
}
.equip-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
.equip-table tbody tr:hover td {
    background: rgba(37, 99, 235, 0.06);
}
.equip-table .text-mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.equip-table .text-muted {
    color: var(--text-muted);
}

/* Equipment Status Badges */
.equip-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.equip-status-deployed {
    background: var(--primary-light);
    color: var(--primary);
}
.equip-status-available {
    background: var(--success-light);
    color: var(--success);
}
.equip-status-maintenance {
    background: var(--warning-light);
    color: var(--warning);
}
.equip-status-retired {
    background: #e2e8f0;
    color: #64748b;
}

/* Equipment Condition Badges */
.equip-condition-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}
.equip-condition-new {
    background: var(--success-light);
    color: var(--success);
}
.equip-condition-good {
    background: var(--info-light);
    color: var(--info);
}
.equip-condition-fair {
    background: var(--warning-light);
    color: var(--warning);
}
.equip-condition-poor {
    background: var(--danger-light);
    color: var(--danger);
}
.equip-condition-retired {
    background: #e2e8f0;
    color: #64748b;
}

/* Equipment Type Labels */
.equip-type-label {
    font-size: 0.8rem;
    font-weight: 500;
}
.equip-type-dslr { color: var(--cam-dslr); }
.equip-type-microcontroller { color: var(--cam-micro); }
.equip-type-pole { color: #92400e; }
.equip-type-solar-panel { color: #d97706; }
.equip-type-battery { color: #059669; }
.equip-type-sd-card { color: #7c3aed; }
.equip-type-cable { color: #64748b; }
.equip-type-other { color: var(--text-secondary); }

/* Filter Toggles */
.equip-filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.equip-toggle {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.equip-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.equip-toggle.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Edit Panel Overlay */
.equip-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: none;
    justify-content: flex-end;
    animation: fadeIn 0.15s ease;
}
.equip-panel-overlay.active {
    display: flex;
}
.equip-panel {
    width: 480px;
    max-width: 100%;
    height: 100%;
    background: var(--bg-card);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.2s ease;
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.equip-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.equip-panel-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.equip-panel-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.equip-panel-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.equip-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.equip-panel-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.equip-panel-meta {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.equip-panel-meta a {
    color: var(--primary);
}

/* Page header actions */
.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Dark Mode: Equipment */
[data-theme="dark"] .equip-status-retired { background: #334155; color: #94a3b8; }
[data-theme="dark"] .equip-condition-retired { background: #334155; color: #94a3b8; }
[data-theme="dark"] .equip-toggle { background: var(--bg-tertiary); border-color: var(--border); }
[data-theme="dark"] .equip-toggle.active { background: var(--primary); border-color: var(--primary); color: white; }
[data-theme="dark"] .equip-toggle:hover { border-color: var(--primary); }
[data-theme="dark"] .equip-panel { background: var(--bg-card); }
[data-theme="dark"] .equip-type-pole { color: #fbbf24; }
[data-theme="dark"] .equip-type-solar-panel { color: #fbbf24; }
[data-theme="dark"] .equip-type-battery { color: #4ade80; }
[data-theme="dark"] .equip-type-sd-card { color: #a78bfa; }
[data-theme="dark"] .equip-type-cable { color: #94a3b8; }

/* Responsive: Equipment */
@media (max-width: 768px) {
    .equip-filter-toggles {
        flex-wrap: wrap;
    }
    .equip-panel {
        width: 100%;
    }
    .page-header-actions {
        flex-wrap: wrap;
    }
    .equip-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
}
@media (max-width: 640px) {
    .equip-table thead {
        display: none;
    }
    .equip-table tbody tr {
        display: block;
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .equip-table tbody td {
        display: block;
        padding: 4px 0;
        border-bottom: none;
        text-align: left;
    }
    .equip-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filters-bar .filter-input {
        max-width: none !important;
    }
}

/* ========================================
   Field Team Scheduler
   ======================================== */

/* Week Navigation */
.sched-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.sched-nav-btn {
    min-width: 80px;
}
.sched-nav-today {
    font-weight: 600;
}
.sched-nav-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 12px;
}

/* Grid Wrapper — horizontal scroll on overflow */
.sched-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
}

/* Grid Layout */
.sched-grid {
    min-width: 800px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Header Row */
.sched-header-row {
    display: grid;
    grid-template-columns: 160px repeat(5, 1fr);
    border-bottom: 2px solid var(--border);
    background: var(--bg-primary);
}
.sched-corner {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.sched-day-header {
    padding: 12px 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 1px solid var(--border);
}
.sched-day-header.sched-today {
    background: var(--primary-light);
    color: var(--primary);
}
.sched-day-num {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Team Member Rows */
.sched-member-row {
    display: grid;
    grid-template-columns: 160px repeat(5, 1fr);
    min-height: 100px;
    border-bottom: 1px solid var(--border);
}
.sched-member-row:last-child {
    border-bottom: none;
}
.sched-member-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    position: sticky;
    left: 0;
    z-index: 1;
}
.sched-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sched-member-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day Columns (cells) */
.sched-day-col {
    padding: 8px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 80px;
    position: relative;
    transition: background 0.15s;
}
.sched-day-col:hover {
    background: rgba(37, 99, 235, 0.03);
}
.sched-day-col.sched-today {
    background: rgba(37, 99, 235, 0.04);
}

/* Add Button in Cell */
.sched-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px;
    margin-top: auto;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s;
}
.sched-day-col:hover .sched-add-btn {
    opacity: 1;
}
.sched-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* Entry Cards */
.sched-entry {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8rem;
}
.sched-entry:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.sched-entry-top {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.sched-entry-jn {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
}
.sched-entry-title {
    color: var(--text-secondary);
    font-size: 0.72rem;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Type Colors */
.sched-entry-ins { border-left-color: #0d9488; background: rgba(13, 148, 136, 0.08); }
.sched-entry-rem { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.08); }
.sched-entry-rep { border-left-color: #7c3aed; background: rgba(124, 58, 237, 0.08); }
.sched-entry-sv  { border-left-color: #0891b2; background: rgba(8, 145, 178, 0.08); }
.sched-entry-adj { border-left-color: #059669; background: rgba(5, 150, 105, 0.08); }
.sched-entry-default { border-left-color: var(--border); }

/* Type Badges */
.sched-type-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
.sched-type-ins { background: rgba(13, 148, 136, 0.15); color: #0d9488; }
.sched-type-rem { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.sched-type-rep { background: rgba(124, 58, 237, 0.15); color: #7c3aed; }
.sched-type-sv  { background: rgba(8, 145, 178, 0.15); color: #0891b2; }
.sched-type-adj { background: rgba(5, 150, 105, 0.15); color: #059669; }
.sched-type-default { background: var(--bg-tertiary); color: var(--text-muted); }

/* Status Dots */
.sched-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.sched-dot-scheduled  { background: #3b82f6; }
.sched-dot-progress   { background: #f59e0b; }
.sched-dot-completed  { background: #10b981; }
.sched-dot-cancelled  { background: #94a3b8; }

/* Loading State */
.sched-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Form Styles (inside modal) */
.sched-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sched-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sched-form-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.sched-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.sched-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.sched-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

/* Job Search Dropdown */
.sched-job-search-wrap {
    position: relative;
}
.sched-job-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.sched-job-dropdown.active {
    display: block;
}
.sched-job-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}
.sched-job-option:last-child {
    border-bottom: none;
}
.sched-job-option:hover {
    background: var(--primary-light);
}
.sched-job-option strong {
    color: var(--text-primary);
    margin-right: 6px;
}
.sched-job-option span {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Dark Mode: Scheduler */
[data-theme="dark"] .sched-grid {
    border-color: #334155;
}
[data-theme="dark"] .sched-header-row {
    border-bottom-color: #475569;
}
[data-theme="dark"] .sched-day-header {
    border-left-color: #334155;
}
[data-theme="dark"] .sched-day-header.sched-today {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}
[data-theme="dark"] .sched-member-row {
    border-bottom-color: #334155;
}
[data-theme="dark"] .sched-member-label {
    border-right-color: #334155;
}
[data-theme="dark"] .sched-day-col {
    border-left-color: #334155;
}
[data-theme="dark"] .sched-day-col:hover {
    background: rgba(96, 165, 250, 0.05);
}
[data-theme="dark"] .sched-day-col.sched-today {
    background: rgba(96, 165, 250, 0.06);
}
[data-theme="dark"] .sched-add-btn {
    border-color: #475569;
    color: #64748b;
}
[data-theme="dark"] .sched-add-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}
[data-theme="dark"] .sched-entry {
    background: #1e293b;
    border-left-color: #475569;
}
[data-theme="dark"] .sched-entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .sched-entry-ins { border-left-color: #2dd4bf; background: rgba(45, 212, 191, 0.1); }
[data-theme="dark"] .sched-entry-rem { border-left-color: #f87171; background: rgba(248, 113, 113, 0.1); }
[data-theme="dark"] .sched-entry-rep { border-left-color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
[data-theme="dark"] .sched-entry-sv  { border-left-color: #22d3ee; background: rgba(34, 211, 238, 0.1); }
[data-theme="dark"] .sched-entry-adj { border-left-color: #4ade80; background: rgba(74, 222, 128, 0.1); }
[data-theme="dark"] .sched-type-ins { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
[data-theme="dark"] .sched-type-rem { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-theme="dark"] .sched-type-rep { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
[data-theme="dark"] .sched-type-sv  { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
[data-theme="dark"] .sched-type-adj { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
[data-theme="dark"] .sched-dot-scheduled  { background: #60a5fa; }
[data-theme="dark"] .sched-dot-progress   { background: #fbbf24; }
[data-theme="dark"] .sched-dot-completed  { background: #4ade80; }
[data-theme="dark"] .sched-dot-cancelled  { background: #64748b; }
[data-theme="dark"] .sched-input {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}
[data-theme="dark"] .sched-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
[data-theme="dark"] .sched-job-dropdown {
    background: #1e293b;
    border-color: #475569;
}
[data-theme="dark"] .sched-job-option:hover {
    background: rgba(96, 165, 250, 0.1);
}
[data-theme="dark"] .sched-job-option strong {
    color: #e2e8f0;
}
[data-theme="dark"] .sched-job-option span {
    color: #94a3b8;
}

/* Responsive: Scheduler */
@media (max-width: 768px) {
    .sched-nav {
        flex-wrap: wrap;
        gap: 6px;
    }
    .sched-nav-label {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
    .sched-grid {
        min-width: 600px;
    }
    .sched-header-row,
    .sched-member-row {
        grid-template-columns: 120px repeat(5, 1fr);
    }
    .sched-member-avatar {
        display: none;
    }
}

/* Mobile: Stack to single day view */
@media (max-width: 480px) {
    .sched-grid {
        min-width: unset;
    }
    .sched-header-row {
        display: flex;
        overflow-x: auto;
        gap: 0;
    }
    .sched-header-row .sched-corner {
        display: none;
    }
    .sched-day-header {
        flex: 0 0 auto;
        min-width: 70px;
        border-left: none;
        border-bottom: 1px solid var(--border);
    }
    .sched-member-row {
        display: block;
    }
    .sched-member-label {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 8px 12px;
    }
    .sched-member-avatar {
        display: flex;
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .sched-day-col {
        border-left: none;
        border-bottom: 1px solid var(--border-light);
        min-height: 40px;
    }
    .sched-add-btn {
        opacity: 1;
    }
}

/* ========================================
   Client CRM
   ======================================== */

/* KPI grid override for CRM */
.crm-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* CRM Table */
.crm-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.crm-table th.sortable:hover {
    background: var(--bg-secondary);
}
.crm-table th.sorted {
    color: var(--primary);
}
.crm-table .sort-icon {
    font-size: 0.65rem;
    margin-left: 4px;
    opacity: 0.7;
}

/* Client row */
.crm-row {
    cursor: pointer;
    transition: background 0.15s;
}
.crm-row:hover td {
    background: rgba(59, 130, 246, 0.04);
}
.crm-row-expanded td {
    background: rgba(59, 130, 246, 0.06);
    border-bottom-color: transparent;
}
.crm-areas {
    margin-top: 4px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.crm-job-count {
    font-weight: 600;
    color: var(--text-primary);
}
.crm-job-total {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Health score badge */
.health-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}
.health-excellent {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
.health-good {
    background: rgba(234, 179, 8, 0.12);
    color: #ca8a04;
}
.health-fair {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}
.health-poor {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Detail row */
.crm-detail-row td {
    padding: 0 !important;
    background: var(--bg-primary);
}

/* Detail panel */
.crm-detail-panel {
    padding: 20px 24px;
    border-top: 2px solid var(--primary);
    background: var(--bg-primary);
}
.crm-detail-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.crm-detail-error {
    padding: 16px;
    color: var(--danger);
    font-size: 0.875rem;
}
.crm-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.crm-detail-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.crm-detail-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.crm-detail-stat {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.crm-detail-stat strong {
    color: var(--text-primary);
}

/* Detail sections */
.crm-detail-section {
    margin-top: 16px;
}
.crm-detail-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

/* Contact grid in detail */
.crm-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.crm-contact-card {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.crm-contact-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.crm-contact-roles {
    margin-bottom: 6px;
}
.crm-contact-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.crm-contact-info a {
    color: var(--primary);
    text-decoration: none;
}
.crm-contact-info a:hover {
    text-decoration: underline;
}

/* Detail jobs table */
.crm-detail-jobs-table {
    font-size: 0.85rem;
}
.crm-detail-jobs-table td {
    padding: 8px 12px;
}
.crm-detail-jobs-table tr[data-jn] {
    cursor: pointer;
}
.crm-detail-jobs-table tr[data-jn]:hover td {
    background: rgba(59, 130, 246, 0.05);
}

/* Text alignment helpers (if not already defined) */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: var(--danger); }

/* Dark mode: CRM */
[data-theme="dark"] .crm-row:hover td { background: rgba(96, 165, 250, 0.08); }
[data-theme="dark"] .crm-row-expanded td { background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .crm-detail-panel { background: #0f172a; border-top-color: #60a5fa; }
[data-theme="dark"] .crm-detail-row td { background: #0f172a; }
[data-theme="dark"] .crm-contact-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .crm-detail-section-title { border-bottom-color: #334155; }
[data-theme="dark"] .crm-detail-jobs-table tr[data-jn]:hover td { background: rgba(96, 165, 250, 0.1); }
[data-theme="dark"] .health-excellent { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
[data-theme="dark"] .health-good { background: rgba(234, 179, 8, 0.18); color: #facc15; }
[data-theme="dark"] .health-fair { background: rgba(249, 115, 22, 0.18); color: #fb923c; }
[data-theme="dark"] .health-poor { background: rgba(239, 68, 68, 0.18); color: #f87171; }
[data-theme="dark"] .crm-table th.sortable:hover { background: #1e293b; }
[data-theme="dark"] .crm-table th.sorted { color: #60a5fa; }

/* Responsive: CRM */
@media (max-width: 768px) {
    .crm-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .crm-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .crm-detail-stats {
        gap: 12px;
    }
    .crm-contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .crm-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Bulk Operations Console
   ======================================== */

.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--primary-light, #eff6ff);
    border: 1px solid var(--primary, #3b82f6);
    border-radius: var(--radius, 6px);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.bulk-count {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary, #3b82f6);
    white-space: nowrap;
}
.bulk-action-select {
    padding: 4px 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.85rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #1e293b);
}
.bulk-check-cell {
    text-align: center;
    width: 36px;
    padding: 4px 6px !important;
}
.bulk-check {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #3b82f6);
}
.bulk-check-cell input[type="checkbox"] {
    margin: 0;
}
tr.bulk-selected {
    background: rgba(59, 130, 246, 0.06) !important;
}
tr.bulk-selected:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}
.bulk-value-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 6px);
    font-size: 0.9rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #1e293b);
}

/* Dark mode: Bulk Operations */
[data-theme="dark"] .bulk-toolbar {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
}
[data-theme="dark"] .bulk-count {
    color: #60a5fa;
}
[data-theme="dark"] .bulk-action-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: #334155;
}
[data-theme="dark"] tr.bulk-selected {
    background: rgba(59, 130, 246, 0.08) !important;
}
[data-theme="dark"] tr.bulk-selected:hover {
    background: rgba(59, 130, 246, 0.14) !important;
}
[data-theme="dark"] .bulk-value-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: #334155;
}

/* Responsive: Bulk Operations */
@media (max-width: 640px) {
    .bulk-toolbar {
        gap: 8px;
        padding: 8px 12px;
    }
    .bulk-action-select {
        flex: 1;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Smart Alerts
   ═══════════════════════════════════════════════════════════════════════ */

/* Alert KPI Grid */
.alert-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.alert-kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
    border: 1px solid var(--border-light);
}
.alert-kpi-card:hover {
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.12));
    transform: translateY(-1px);
}
.alert-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.alert-kpi-critical .alert-kpi-icon { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.alert-kpi-high .alert-kpi-icon { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.alert-kpi-medium .alert-kpi-icon { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }
.alert-kpi-low .alert-kpi-icon { background: rgba(148, 163, 184, 0.1); color: #64748b; }

.alert-kpi-info { flex: 1; min-width: 0; }
.alert-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.alert-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Alert Filters */
.alert-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    align-items: center;
}
.alert-filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.alert-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.04);
}
.alert-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.alert-filter-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

/* Alert Cards Container */
.alert-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Alert Card */
.alert-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    border-left: 4px solid #94a3b8;
    transition: box-shadow 0.15s, opacity 0.3s, transform 0.3s;
    overflow: hidden;
}
.alert-card:hover {
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.1));
}
.alert-card.alert-severity-critical { border-left-color: #dc2626; }
.alert-card.alert-severity-high { border-left-color: #ea580c; }
.alert-card.alert-severity-medium { border-left-color: #eab308; }
.alert-card.alert-severity-low { border-left-color: #94a3b8; }

.alert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}
.alert-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.alert-card-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Severity Badge */
.alert-severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.alert-severity-badge.alert-severity-critical { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.alert-severity-badge.alert-severity-high { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.alert-severity-badge.alert-severity-medium { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }
.alert-severity-badge.alert-severity-low { background: rgba(148, 163, 184, 0.1); color: #64748b; }

/* Type Badge */
.alert-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-primary);
    white-space: nowrap;
}
.alert-type-badge svg { flex-shrink: 0; }

/* Job Link in Alert Card */
.alert-card-jn .alert-job-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace);
}
.alert-card-jn .alert-job-link:hover {
    text-decoration: underline;
}

/* Dismiss Button */
.alert-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.alert-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #dc2626;
    color: #dc2626;
}

/* Alert Card Body */
.alert-card-body {
    padding: 12px 16px;
}
.alert-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.alert-card-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.alert-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.alert-meta-item {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
}

/* Page Header Actions */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Dark Mode: Smart Alerts */
[data-theme="dark"] .alert-kpi-card {
    border-color: #334155;
}
[data-theme="dark"] .alert-kpi-critical .alert-kpi-icon { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="dark"] .alert-kpi-high .alert-kpi-icon { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
[data-theme="dark"] .alert-kpi-medium .alert-kpi-icon { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
[data-theme="dark"] .alert-kpi-low .alert-kpi-icon { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

[data-theme="dark"] .alert-filter-btn {
    border-color: #334155;
    background: #1e293b;
    color: #94a3b8;
}
[data-theme="dark"] .alert-filter-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.08);
}
[data-theme="dark"] .alert-filter-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
[data-theme="dark"] .alert-filter-divider { background: #334155; }

[data-theme="dark"] .alert-card {
    border-color: #334155;
}
[data-theme="dark"] .alert-card-header { border-bottom-color: #334155; }

[data-theme="dark"] .alert-severity-badge.alert-severity-critical { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="dark"] .alert-severity-badge.alert-severity-high { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
[data-theme="dark"] .alert-severity-badge.alert-severity-medium { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
[data-theme="dark"] .alert-severity-badge.alert-severity-low { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

[data-theme="dark"] .alert-type-badge {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .alert-dismiss-btn {
    border-color: #334155;
    background: #1e293b;
    color: #94a3b8;
}
[data-theme="dark"] .alert-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
    color: #f87171;
}

[data-theme="dark"] .alert-meta-item {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .alert-card-jn .alert-job-link {
    color: #60a5fa;
}

/* Responsive: Smart Alerts */
@media (max-width: 768px) {
    .alert-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .alert-filters {
        gap: 6px;
    }
    .alert-filter-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    .alert-filter-divider {
        display: none;
    }
    .alert-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .alert-card-right {
        width: 100%;
        justify-content: space-between;
    }
    .page-header-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
}
@media (max-width: 480px) {
    .alert-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .alert-kpi-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .alert-kpi-icon {
        width: 34px;
        height: 34px;
    }
    .alert-kpi-value {
        font-size: 1.25rem;
    }
    .alert-card-body {
        padding: 10px 14px;
    }
    .alert-card-meta {
        gap: 6px;
    }
}

/* ── Add Camera modal ── */
.add-cam-info {
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 12px;
}
.add-cam-info code {
    font-size: 0.85rem;
    background: var(--bg-code, #f1f5f9);
    padding: 1px 6px;
    border-radius: 3px;
}
.add-cam-success {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-success, #e8f5e9);
    border-left: 3px solid var(--success, #4caf50);
    border-radius: 4px;
}
[data-theme="dark"] .add-cam-info code {
    background: var(--bg-code, #1e293b);
}
[data-theme="dark"] .add-cam-success {
    background: var(--bg-success, #1b3a1b);
    border-left-color: var(--success, #4caf50);
}