/* Modern Dark Theme - Inspired by Status Dashboard */

:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #333333;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;

    --color-primary: #4a9eff;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-danger: #f44336;
    --color-info: #00bcd4;

    --border-color: #404040;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

    --radius: 8px;
    --radius-sm: 4px;
    --spacing: 20px;
    --sticky-header-height: 90px; /* updated by JS: tabs height + filter bar height */
    --tabs-height: 46px; /* updated by JS: just the tab bar */
    --floating-thead-bottom: 90px; /* updated by JS: bottom edge of floating thead */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Container — minimal wrapper, dashboard-main handles layout */
.container {
    padding: 0;
}

/* Dashboard Main Layout */
.dashboard-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dashboard-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 0 16px;
    margin: 0 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.dashboard-content {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.card-header {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.card-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 5px;
}

.card-footer {
    font-size: 12px;
    color: var(--text-muted);
}

.card-primary .card-value { color: var(--color-primary); }
.card-success .card-value { color: var(--color-success); }
.card-warning .card-value { color: var(--color-warning); }
.card-info .card-value { color: var(--color-info); }

/* Controls Section */
.controls-section {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing);
}

.filters-panel {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.filters-panel h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--color-primary);
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* Table Panel */
.table-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.table-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-header h3 {
    font-size: 18px;
    color: var(--color-primary);
}

.table-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#job-count {
    font-size: 14px;
    color: var(--text-secondary);
}

.table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0;
    overflow-x: auto;
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead {
    background: var(--bg-tertiary);
}

/* Floating thead clone — sticks below filter bar when real thead scrolls away */
.floating-thead {
    position: sticky;
    top: calc(var(--sticky-header-height) - 2 * var(--radius));
    z-index: 15;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    margin-bottom: -1px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.floating-thead .data-table {
    margin: 0;
    width: 100%;
}

.floating-thead .data-table thead {
    background: var(--bg-tertiary);
}

.floating-thead .data-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    user-select: none;
    white-space: nowrap;
}

/* When floating thead is active, table-container loses top radius to merge visually */
.table-container.has-floating-thead {
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: none;
}
.table-container.has-floating-thead .data-table thead {
    visibility: hidden;
}

/* Persistent thead table in AR Aging — headers only, no background */
.aging-persistent-thead {
    margin-bottom: 12px;
    background: transparent;
}

.aging-persistent-thead thead {
    background: var(--bg-secondary);
}

.aging-persistent-thead thead tr th:first-child {
    border-radius: var(--radius) 0 0 0;
}

.aging-persistent-thead thead tr th:last-child {
    border-radius: 0 var(--radius) 0 0;
}

/* AR Aging table-container: transparent wrapper, no overflow so sticky works */
#aging-table-container {
    overflow-x: visible;
    overflow-y: visible;
    background: transparent;
    border: none;
    border-radius: 0;
}

.data-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    user-select: none;
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 24px;
}

.data-table th.sortable:hover {
    background: var(--bg-secondary);
}

.data-table th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    opacity: 0.3;
    font-size: 12px;
}

.data-table th.sortable.sort-asc::after {
    content: '▲';
    opacity: 1;
    color: var(--color-primary);
}

.data-table th.sortable.sort-desc::after {
    content: '▼';
    opacity: 1;
    color: var(--color-primary);
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: background 0.2s;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.data-table .loading {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

/* Tab loading spinner — replaces content during data fetch */
.tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.tab-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tab-spin 0.8s linear infinite;
}

@keyframes tab-spin {
    to { transform: rotate(360deg); }
}

/* Problem Highlighting - Cell Level (hidden by default) */
.data-table td.cell-problem-critical,
.data-table td.cell-problem-warning,
.data-table td.cell-problem-info {
    position: relative;
}

/* Keep row highlighting for warning column */
.data-table tr.has-critical-problem {
    border-left: 4px solid #f44336;
}

.data-table tr.has-warning-problem {
    border-left: 4px solid #ff9800;
}

.data-table tr.has-info-problem {
    border-left: 4px solid #4a9eff;
}

/* Enhanced cell highlighting when highlight-problems is enabled */
.data-table.highlight-problems td.cell-problem-critical {
    background: rgba(244, 67, 54, 0.35);
    border: 2px solid #f44336;
}

.data-table.highlight-problems td.cell-problem-warning {
    background: rgba(255, 152, 0, 0.35);
    border: 2px solid #ff9800;
}

.data-table.highlight-problems td.cell-problem-info {
    background: rgba(74, 158, 255, 0.30);
    border: 2px solid #4a9eff;
}

/* Problem Badges */
.problem-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-critical {
    background: rgba(244, 67, 54, 0.2);
    color: #ff8a80;
    border: 1px solid #f44336;
}

.badge-warning {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
    border: 1px solid #ff9800;
}

.badge-info {
    background: rgba(74, 158, 255, 0.2);
    color: #82b1ff;
    border: 1px solid #4a9eff;
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    cursor: pointer;
}

select.scrollable-select {
    max-height: 180px;
    overflow-y: auto;
}

select.form-control option {
    padding: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

select.form-control option:hover,
select.form-control option:checked {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 8px;
    vertical-align: middle;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: #3a8eef;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
}

.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-success:hover {
    background: #45a049;
}

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn-error {
    background: var(--color-danger, #e53935) !important;
    color: white !important;
    border-color: var(--color-danger, #e53935) !important;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.login-card h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 28px;
}

.login-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 14px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.login-footer {
    margin-top: 20px;
    text-align: center;
    color: var(--text-muted);
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-error {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid var(--color-danger);
    color: #ff8a80;
}

/* Error Page */
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

.error-card {
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    max-width: 500px;
}

.error-card h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.error-message {
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 16px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

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

/* Legacy - kept for any remaining references */
.main-content-section {
    margin-bottom: var(--spacing);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    position: relative;
    align-items: stretch;
}

.tab-button {
    padding: 8px 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.tab-button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.tab-button.active {
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Active tab: subtle bottom border accent */
.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text-primary);
}

.tab-content {
    display: none;
    flex: 1;
    min-width: 0;
}

.tab-content.active {
    display: block;
}

.tab-placeholder {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}

.tab-placeholder h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Tab Group - Job Views */
.tab-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0;
    padding: 0 4px;
}


.tab-button-add {
    font-size: 18px;
    font-weight: 300;
    padding: 8px 12px;
    color: var(--text-muted);
    opacity: 0.6;
}

.tab-button-add:hover {
    opacity: 1;
    color: var(--color-primary);
}


/* Shared Filter Bar — same card level as info cards and table, stacks over table */
.shared-filter-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: calc(var(--tabs-height) - var(--radius));
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Row 1: Jobs left, Data right — always one line */
.filter-bar-row1 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-bar-jobs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-bar-data {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Row 2: OtherFilters — only visible when tab injects controls */
.filter-bar-other {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar-other:empty {
    display: none;
}

.filter-bar-other > .filter-bar-more,
.filter-bar-other > #filter-bar-clear {
    flex-shrink: 0;
}

.filter-more-badge {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}

.filter-bar-search {
    width: 220px;
    padding: 6px 12px;
    font-size: 13px;
}

.filter-bar-btn {
    position: relative;
    white-space: nowrap;
}

.filter-bar-btn .badge {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}

.filter-bar-toggles {
    display: flex;
    gap: 4px;
    align-items: center;
}

.toggle-pill {
    padding: 5px 14px;
    border: 1px solid #555555;                /* was var(--border-color) #404040 — too dim */
    border-radius: 16px;
    background: transparent;
    color: var(--text-secondary);             /* was var(--text-muted) #808080 — 3.5:1, below AA */
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.toggle-pill:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);               /* was var(--text-secondary) — slight bump so hover is distinct from resting state */
}

.toggle-pill.active {
    background: rgba(74, 158, 255, 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 500;
}

/* Status filter buttons — off state shows color at low intensity */
#toggle-active {
    border-color: rgba(74,158,255,.18);
    color: rgba(90,174,255,.35);
}
#toggle-active:hover { border-color: rgba(74,158,255,.40); color: rgba(90,174,255,.55); }
#toggle-active.active {
    background: rgba(74,158,255,.15);
    border-color: rgba(74,158,255,.50);
    color: #5aaeff;
}
#toggle-inactive {
    border-color: rgba(255,152,0,.16);
    color: rgba(255,183,77,.30);
}
#toggle-inactive:hover { border-color: rgba(255,152,0,.35); color: rgba(255,183,77,.50); }
#toggle-inactive.active {
    background: rgba(255,152,0,.14);
    border-color: rgba(255,152,0,.45);
    color: #ffb74d;
}
#toggle-closed {
    border-color: rgba(128,128,128,.16);
    color: rgba(144,144,144,.30);
}
#toggle-closed:hover { border-color: rgba(128,128,128,.35); color: rgba(144,144,144,.50); }
#toggle-closed.active {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            rgba(128,128,128,.08) 3px,
            rgba(128,128,128,.08) 5px
        ),
        rgba(128,128,128,.10);
    border-color: rgba(128,128,128,.40);
    color: #909090;
}
#toggle-overhead {
    border-color: rgba(156,70,209,.16);
    color: rgba(181,124,247,.30);
}
#toggle-overhead:hover { border-color: rgba(156,70,209,.35); color: rgba(181,124,247,.50); }
#toggle-overhead.active {
    background: rgba(156,70,209,.13);
    border-color: rgba(156,70,209,.45);
    color: #b57cf7;
}
/* Filter bar cluster separators */
.filter-bar-sep {
    display: inline-block; width: 1px; height: 20px;
    background: var(--border-color); margin: 0 4px; vertical-align: middle;
}
/* Non-colormatched toggles: bright white */
#toggle-service, #toggle-contract, #toggle-tm, #toggle-lumpsum {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.30);
}
#toggle-service:hover, #toggle-contract:hover, #toggle-tm:hover, #toggle-lumpsum:hover {
    border-color: rgba(255,255,255,.35);
    color: rgba(255,255,255,.55);
}
#toggle-service.active, #toggle-contract.active, #toggle-tm.active, #toggle-lumpsum.active {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.30);
    color: #e0e0e0;
}

/* Dual-handle age range slider */
.age-range-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.age-range-slider {
    position: relative;
    width: 120px;
    height: 28px;
}
.age-range-slider input[type=range] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.age-range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--bg-primary);
    pointer-events: all;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.age-range-slider input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--bg-primary);
    pointer-events: all;
    cursor: pointer;
}
.age-range-track {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
}
.age-range-fill {
    position: absolute;
    top: 8px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 2px;
}
.age-range-tick {
    position: absolute;
    top: 14px;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-muted);
    pointer-events: none;
}
.age-range-tick::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: var(--text-muted);
}
.age-range-label {
    min-width: 30px;
    text-align: center;
    font-weight: 500;
    color: var(--text-primary);
}

/* Separator between filter groups */
.filter-group-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}

/* Consistent filter control label (checkbox + text) */
.filter-control-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

/* Filter view controls inner wrapper */
.filter-bar-view-controls-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar-view-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Tab overflow menu */
.tab-overflow-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 180px;
    padding: 4px;
}

.tab-overflow-menu.active {
    display: block;
}

.tab-overflow-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    border-radius: 3px;
}

.tab-overflow-menu button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tab-overflow-menu button.active {
    color: var(--color-primary);
    font-weight: 500;
}

/* Select Jobs Dialog */
.select-jobs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-jobs-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.select-jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.select-jobs-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.select-jobs-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
}

.select-jobs-close:hover {
    color: var(--text-primary);
}

.select-jobs-filters {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: visible;
}

/* Custom dropdown filter buttons */
.sjd-dropdown {
    position: relative;
}

.sjd-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.sjd-dropdown-btn:hover {
    border-color: var(--color-primary);
}

.sjd-dropdown-badge {
    display: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.sjd-dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
}

.sjd-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2100;
    min-width: 200px;
    max-height: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    flex-direction: column;
}

.sjd-dropdown-panel.open {
    display: flex;
}

.sjd-dropdown-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-color);
}

.sjd-dropdown-options {
    overflow-y: auto;
    max-height: 250px;
    padding: 4px 0;
}

.sjd-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sjd-dropdown-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sjd-dropdown-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.sjd-pill-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.sjd-pill-group .toggle-pill {
    font-size: 11px;
    padding: 3px 8px;
}

.sjd-pill-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 2px;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
}

/* Filtered-out but selected jobs section */
.sjd-filtered-selected-header {
    padding: 6px 0 4px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
}

.select-jobs-item.sjd-filtered-out-selected {
    background: rgba(74, 158, 255, 0.08);
    border-left: 3px solid var(--color-primary);
    padding-left: 7px;
    opacity: 0.75;
}


/* Dropdown search input */
.sjd-dropdown-search-wrap {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-color);
}

.sjd-dropdown-search {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
}

.sjd-dropdown-search:focus {
    border-color: var(--color-primary);
}

/* Filter-bar multi-select dropdown — clone of .sjd-dropdown* for the
   inline filter bar dropdowns added by spec 0.10a. Kept namespace-separate
   so the SJD styles can change independently. */
.fb-dropdown {
    position: relative;
    display: inline-block;
}

.fb-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    max-width: 180px;
}

.fb-dropdown-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.fb-dropdown-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fb-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-dropdown-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.fb-dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
}

.fb-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2100;
    width: 240px;
    max-height: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    flex-direction: column;
}

.fb-dropdown-panel.open {
    display: flex;
}

.fb-dropdown-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-color);
}

.fb-dropdown-search-wrap {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-color);
}

.fb-dropdown-search {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
}

.fb-dropdown-search:focus {
    border-color: var(--color-primary);
}

.fb-dropdown-options {
    overflow-y: auto;
    max-height: 230px;
    padding: 4px 0;
}

.fb-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.fb-dropdown-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.fb-dropdown-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.filter-bar-multiselects-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
}

.filter-bar-multiselects {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-bar-activity {
    font-size: 12px;
    padding: 4px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    max-width: 140px;
}

/* Invoice indicator dots in job rows */
.sjd-dots-container {
    width: 12px;
    min-width: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    flex-shrink: 0;
}

.sjd-inv-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sjd-inv-dot.remote {
    background: #00bcd4;
}

.sjd-inv-dot.local {
    background: var(--color-warning);
}

.sjd-inv-dot.empty {
    visibility: hidden;
}

/* Job item layout columns */
.select-jobs-item .sjd-job-desc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-jobs-item .sjd-job-customer {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
    white-space: nowrap;
    padding-right: 4px;
}

.select-jobs-quick {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.select-jobs-quick input {
    flex: 1;
    min-width: 200px;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.select-jobs-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.select-jobs-count {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: auto;
}

.select-jobs-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
    max-height: 400px;
}

.select-jobs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
    font-size: 13px;
    color: var(--text-secondary);
}

.select-jobs-item:hover {
    color: var(--text-primary);
}

.select-jobs-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.select-jobs-item .job-no {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 60px;
}

.select-jobs-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

/* View-specific controls in filter bar */
.view-control-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-control-group label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.view-control-group select,
.view-control-group input {
    padding: 4px 8px;
    font-size: 13px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* Filters Section - Above Table */
.filters-section {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.filters-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.filters-row:last-child {
    margin-bottom: 0;
}

.filter-group-inline {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
}

.filter-group-inline label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 1;
}

.filter-checkbox-group label {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

.filter-actions-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}

/* Table Header Info */
.table-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.table-header-info h3 {
    font-size: 18px;
    color: var(--color-primary);
    margin: 0;
}

#job-count {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .controls-section {
        grid-template-columns: 1fr;
    }

    .filters-panel {
        max-height: none;
    }

    .filter-group-inline {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .tab-user-info { display: none; }

    .table-container {
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 8px;
    }

    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group-inline {
        max-width: none;
    }

    .filter-actions-inline {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Billing Table Styles */
.billing-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.billing-filters-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.billing-actions {
    display: flex;
    gap: 10px;
}

.billing-table {
    font-size: 13px;
}

.billing-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 10;
    white-space: nowrap;
    font-size: 11px;
    padding: 10px 8px;
}

.billing-table td {
    padding: 8px;
    white-space: nowrap;
}

.billing-table .month-value {
    text-align: right;
    font-family: 'Courier New', monospace;
    background: var(--bg-tertiary);
    cursor: pointer;
    border: 1px solid var(--border-color);
    height: 47.5px;
    padding: 0 8px;
    /* Color determined by completion classes below */
}

/* Month cell layout: amount on the left, vertical stack of status + note
   icons on the right (mirrors the Year/Month-view billing-box right cluster
   but stacked vertically instead of in a row to fit the narrower column). */
.billing-table .month-value .month-cell-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.billing-table .month-value .month-cell-amount {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

.billing-table .month-value .month-cell-icons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* Ghosted month cell — the (job_no × year × month) falls entirely before
   the job's start_date and first_cost_date, so the icons are hidden and
   the cell is dimmed to signal "no activity expected". */
.billing-table .month-value.month-cell-ghosted {
    opacity: 0.35;
    background: transparent;
    cursor: default;
}

/* Same idea on the Year/Month view billing boxes. */
.billing-box.billing-box-ghosted {
    opacity: 0.35;
}
.billing-box.billing-box-ghosted .inv-pill-expanded,
.billing-box.billing-box-ghosted .billing-month-tile-invoice-empty {
    opacity: 0.9;
}

/* Incomplete cells - white text (default) */
.billing-table .month-value.month-incomplete {
    color: var(--text-primary); /* White text */
}

/* Complete cells - green text */
.billing-table .month-value.month-complete {
    color: var(--color-success); /* Green text (#4caf50) */
}

.billing-table .editable-note {
    cursor: pointer;
    min-width: 150px;
    max-width: 250px;
    white-space: normal;
}

.billing-table .editable-note:hover {
    background: rgba(74, 158, 255, 0.1);
}

.billing-table .over-billed {
    color: var(--color-warning);
    font-weight: 600;
    text-align: right;
}

.billing-table .under-billed {
    color: var(--color-danger);
    font-weight: 600;
    text-align: right;
}

.billing-table .ou-na {
    text-align: center;
    cursor: help;
}

.ou-na-text {
    color: var(--text-secondary, #888);
    font-style: italic;
    font-size: 0.85em;
}

.billing-table .filename-cell {
    min-width: 200px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.billing-table .job-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Billed progress bar column */
.billed-cell {
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 6px !important;
    position: relative;
    min-width: 60px;
    text-align: center;
}

.billed-text {
    position: relative;
    z-index: 1;
}

/* Total column styling */
.total-column {
    font-weight: 600;
    background: rgba(74, 158, 255, 0.08);
    border-left: 2px solid var(--color-primary);
}

th.total-column {
    color: var(--color-primary);
}

td.total-column {
    color: var(--color-primary);
}

#custom-range {
    display: flex;
}

/* Tooltip for problems */
.problem-indicator {
    cursor: help;
    display: inline-block;
}

.problem-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    min-width: 300px;
    max-width: 400px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    white-space: normal;
}

.problem-indicator:hover .problem-tooltip {
    display: block;
}

.problem-tooltip-item {
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}

.problem-tooltip-item:last-child {
    border-bottom: none;
}

.problem-tooltip-item.critical {
    color: var(--color-danger);
}

.problem-tooltip-item.warning {
    color: var(--color-warning);
}

.problem-tooltip-item.info {
    color: var(--color-info);
}

/* Column selector */
.column-selector {
    position: relative;
    display: inline-block;
}

.column-selector-button {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-selector-button:hover {
    background: var(--bg-tertiary);
}

.column-selector-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 250px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    padding: 10px;
}

.column-selector-dropdown.active {
    display: block;
}

.column-option {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.column-option:hover {
    background: var(--bg-tertiary);
}

.column-option input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
}

.column-option label {
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* Link Styling - External vs Internal */
/* External links - maintain existing blue, add hover underline */
a[target="_blank"] {
    color: var(--color-primary); /* #4a9eff */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

a[target="_blank"]:hover {
    text-decoration: underline;
}

/* Internal clickable elements (Job #) - lighter blue with dotted underline */
.clickable-internal {
    color: #a8d5ff;
    text-decoration: underline dotted;
    text-decoration-color: rgba(168, 213, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-internal:hover {
    color: #c8e5ff;
    background-color: rgba(168, 213, 255, 0.1);
    text-decoration: underline solid;
    text-decoration-color: rgba(168, 213, 255, 0.8);
}

/* Multi-User Notes System */
/* Note Indicator (Excel-style colored corner) */
.note-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 0;
    cursor: help;
    z-index: 5;
}

.note-indicator.has-info {
    border-color: transparent #888 transparent transparent; /* Gray for additional info available */
}

.note-indicator.has-notes {
    border-color: transparent #e6a817 transparent transparent; /* Amber for user notes */
}

.note-indicator.has-ready {
    border-color: transparent var(--color-success) transparent transparent; /* Green for ready to bill */
}

/* Note Tooltip */
.note-tooltip {
    display: none;
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    min-width: 300px;
    max-width: 500px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.note-tooltip.active {
    display: block;
}

.note-item {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
}

.note-item:last-child {
    border-bottom: none;
}

.note-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.note-text {
    color: var(--text-primary);
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(74, 158, 255, 0.4);
}

.note-text a:hover {
    color: #6db3ff;
    text-decoration-color: #6db3ff;
}

/* Insert Link Dialog */
.insert-link-dialog {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 8px;
}

.insert-link-dialog-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.insert-link-input {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.insert-link-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.insert-link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.note-item.own-note {
    background: rgba(76, 175, 80, 0.1);
    padding: 8px;
    border-radius: 4px;
    margin: 4px 0;
}

/* Note Editor (Right-Click) */
.note-editor {
    position: fixed;
    background: var(--bg-secondary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 16px;
    min-width: 400px;
    max-width: 600px;
    z-index: 2001;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.note-editor-section {
    margin-bottom: 12px;
}

.note-editor-section:last-of-type {
    margin-bottom: 0;
}

.note-editor-section-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.note-editor textarea {
    width: 100%;
    min-height: 60px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 4px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
}

.note-editor > .note-editor-section {
    flex-shrink: 0;
}

.note-editor textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.note-editor-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.note-editor-others {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.note-editor-others .note-item {
    margin-top: 8px;
    padding-top: 8px;
}

.note-editor-others .note-item:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Note Editor Close Button */
.note-editor-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    line-height: 1;
    padding: 0;
}

.note-editor-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Note Editor Header */
.note-editor-header {
    padding-right: 32px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Invoice Detail Table */
.invoice-detail-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.invoice-detail-table th {
    text-align: left;
    font-weight: 600;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
}

.invoice-detail-table td {
    padding: 4px 8px;
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.invoice-detail-table td:first-child {
    text-align: left;
}

.invoice-detail-table .totals-row {
    font-weight: 700;
    border-top: 2px solid var(--border-color);
}

/* Compact table inside aging context menu */
.inv-pill-ast {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    margin-left: 1px;
    vertical-align: super;
}
.inv-pill-ast-local    { color: #4caf50; }
.inv-pill-ast-found    { color: #4a9eff; }
.inv-pill-ast-both     { color: #ce93d8; }

/* Invoice pill status colors — applied inline from AGING_PALETTE in aging.js */

/* Inline note rows — appear as part of the invoice row above */
.aging-has-notes td {
    border-bottom: none !important;
}
.aging-inline-note-row td {
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
}
.aging-inline-note-row:last-of-type td {
    padding-bottom: 3px !important;
}
.aging-inline-note-cell {
    padding: 0 0 1px 48px !important;
    font-size: 11px;
    color: var(--text-muted);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4;
}
/* Local (app-DB) note rows get a left accent + tinted background so they
   are distinguishable from Foundation-DB notes at a glance. The accent
   color matches .inv-pill-ast-local. */
.aging-inline-note-row-local .aging-inline-note-cell {
    background: rgba(76, 175, 80, 0.08);
    box-shadow: inset 3px 0 0 #4caf50;
}

/* Commitment/waiver badge */
.inv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    vertical-align: middle;
}

.aging-filter-cb { display: flex; align-items: center; gap: 3px; cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.aging-filter-cb input[type="checkbox"],
.aging-filter-cb input[type="radio"] { width: 12px; height: 12px; margin: 0; }

.aging-note-context-menu .invoice-detail-table { margin: 4px 0; width: 100%; }
.aging-note-context-menu .invoice-detail-table td,
.aging-note-context-menu .invoice-detail-table th { padding: 3px 6px; font-size: 11px; white-space: nowrap; }
.aging-note-context-menu .invoice-detail-table td:first-child {
    white-space: normal;
    word-break: break-word;
    max-width: 280px;
    /* Cap at 2 lines of wrap so vendor names don't push the row tall. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}

/* JobCard PO/Subs table — compact layout sized so 7 numeric columns fit in
   the JobCard without horizontal scrolling. The "Prev. Paid" column shows
   an always-on input so users can see at a glance that it is entered data. */
.jc-posubs-table { width: 100%; table-layout: fixed; }
.jc-posubs-table th,
.jc-posubs-table td {
    padding: 3px 4px;
    font-size: 11px;
    white-space: nowrap;
}
.jc-posubs-table th { text-align: right; }
.jc-posubs-table th.jc-posubs-vendor-th { text-align: left; }
.jc-posubs-table .jc-posubs-num { text-align: right; }
.jc-posubs-table .jc-posubs-vendor {
    text-align: left;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}
.jc-posubs-table .jc-posubs-num[data-copy-value],
.jc-posubs-table .jc-posubs-vendor[data-copy-value] { cursor: pointer; }

.jc-posubs-prevpaid-cell { padding: 2px 4px; }
.jc-posubs-prevpaid-input {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    text-align: right;
    font-size: 11px;
    font-family: inherit;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}
.jc-posubs-prevpaid-input:focus {
    outline: none;
    border-color: var(--color-primary, #4a9eff);
    background: var(--bg-secondary);
}
/* Hide spinner arrows so the input reads as a clean text field. */
.jc-posubs-prevpaid-input::-webkit-outer-spin-button,
.jc-posubs-prevpaid-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.jc-posubs-prevpaid-input { -moz-appearance: textfield; }

.copy-ref-btn {
    font-size: 10px;
    padding: 2px 8px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    cursor: pointer;
    margin-top: -4px;
    margin-bottom: 4px;
    display: inline-block;
}

.copy-ref-btn:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
    background: rgba(255,255,255,0.05);
}

/* Scrollable detail section (invoice/contract/payment tables) */
.note-editor-detail-scroll {
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 1;
}

/* Scrollable notes + attachments area */
.note-editor-notes-scroll {
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 1;
    margin-bottom: 8px;
}

/* Notes List inside popup */
.note-editor-notes-list {
    font-size: 12px;
}

.note-editor-note-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    word-wrap: break-word;
}

.note-editor-note-item:last-child {
    border-bottom: none;
}

.note-editor-note-actions {
    display: inline;
    margin-left: 6px;
}

.note-editor-note-actions button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 2px;
}

.note-editor-note-actions button:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* Bottom row layout */
.note-editor-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-shrink: 0;
}

.note-editor-bottom-right {
    display: flex;
    gap: 8px;
}

/* Completion toggle button styling */
.completion-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.btn-block {
    width: 100%;
    display: block;
}

.btn-success {
    background-color: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.btn-success:hover {
    background-color: #45a049;
    border-color: #45a049;
}

.btn-info {
    background-color: var(--color-info);
    color: white;
    border-color: var(--color-info);
}

.btn-info:hover {
    background-color: #0097a7;
    border-color: #0097a7;
}

/* Make table cells with notes positioned for indicators */
td[data-column] {
    position: relative;
}

/* Report Modal */
.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 400px;
    max-width: 90vw;
}

.report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.report-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--color-primary);
}

.report-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.report-modal-close:hover {
    color: var(--text-primary);
}

.report-modal-body {
    padding: 20px;
}

.report-option-group {
    margin-bottom: 16px;
}

.report-option-group:last-child {
    margin-bottom: 0;
}

.report-option-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.report-radio-group {
    display: flex;
    gap: 20px;
}

.report-radio,
.report-checkbox {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.report-radio input,
.report-checkbox input {
    margin-right: 8px;
    cursor: pointer;
}

.report-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-hint {
    color: var(--text-muted);
    font-size: 12px;
}

.report-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

/* ===================== CTC Report Styles ===================== */

.ctc-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.ctc-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ctc-date-row label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 4px;
    white-space: nowrap;
}

.ctc-date-row .form-control {
    width: 150px;
}

.ctc-date-arrow {
    background: var(--bg-tertiary, #333);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}

.ctc-date-arrow:hover {
    background: var(--color-primary, #4a9eff);
    border-color: var(--color-primary, #4a9eff);
    color: #fff;
}

.ctc-controls-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ctc-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.ctc-report-container {
    min-height: 200px;
}

.ctc-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

/* CTC Report Overlay */
/* CTC table container needs positioning context for overlay */
#ctc-report-tab.ctc-overlay-active > .shared-filter-bar,
#ctc-report-tab.ctc-overlay-active .tab-info-cards,
#ctc-report-tab.ctc-overlay-active > .floating-thead {
    display: none;
}
#ctc-report-tab .table-container {
    position: relative;
}
#ctc-report-tab.ctc-overlay-active .table-container {
    overflow: hidden;
}
#ctc-report-tab.ctc-overlay-active .table-container > table {
    opacity: 0.15;
    pointer-events: none;
}

/* CTC Report Overlay — card style, grows with content */
.ctc-report-overlay {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    background: var(--bg-secondary);
    z-index: 25;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ctc-overlay-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.ctc-overlay-close {
    font-size: 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.ctc-overlay-close:hover {
    color: var(--color-danger);
    background: var(--bg-secondary);
}

.ctc-overlay-content {
    padding: 20px;
    background: var(--bg-primary);
    border-radius: 0 0 8px 8px;
}

/* CTC Summary Table Icons */
.ctc-report-icon {
    cursor: pointer;
    font-size: 16px;
    opacity: 0.5;
    filter: grayscale(100%);
}
.ctc-report-icon:hover { opacity: 1; filter: none; }
.ctc-report-icon.ctc-report-cached {
    opacity: 0.85;
    filter: none;
}

/* CTC Loading Spinner */
.ctc-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}
.ctc-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary, #4a9eff);
    border-radius: 50%;
    animation: ctc-spin 0.8s linear infinite;
}
@keyframes ctc-spin {
    to { transform: rotate(360deg); }
}

.ctc-ws-icon {
    font-size: 14px;
    cursor: pointer;
}
.ctc-ws-ok { color: var(--color-success, #4caf50); }
.ctc-ws-missing { color: var(--color-warning, #ff9800); }
.ctc-ws-na { color: var(--text-muted); font-weight: 700; }

.ctc-ws-warning-cell {
    background: rgba(255, 152, 0, 0.12);
}

/* CTC Card Rows */
.ctc-cards-row {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}
.ctc-cards-3col {
    grid-template-columns: 1fr 1fr 1fr;
}
.ctc-cards-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ctc-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-secondary);
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    overflow: hidden;
}
/* Unified CTC title style — use on all card/section/chart headers */
.ctc-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 6px 10px;
    margin: -10px -12px 8px -12px;
    border-bottom: 1px solid var(--border-color);
    grid-column: 1 / -1;
}
/* Aliases for backward compat */
.ctc-card-header { }  /* now use .ctc-title instead */
.ctc-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ctc-aging-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ctc-aging-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    grid-column: 1 / -1;
}
.ctc-aging-bar-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}
.ctc-aging-bar-label {
    width: 46px;
    flex-shrink: 0;
    color: var(--text-secondary);
    text-align: right;
}
.ctc-aging-bar-track {
    flex: 1;
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.ctc-aging-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 0;
}
.ctc-aging-bar-val {
    width: 55px;
    flex-shrink: 0;
    text-align: right;
    color: var(--text-secondary);
    font-size: 10px;
}
.ctc-aging-summary {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-column: 1 / -1;
}
.ctc-aging-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
}
.ctc-aging-summary-bold {
    font-weight: 600;
    color: var(--text-primary);
}

/* Year columns in recap */
.ctc-year-col {
    background: var(--bg-tertiary);
}

/* CTC Report Refresh Button */
.ctc-refresh-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}
.ctc-refresh-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.ctc-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

.ctc-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-danger);
    font-size: 14px;
}

/* Report container */
.ctc-report {
    font-size: 13px;
}

/* Section containers */
.ctc-section {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Section title inside ctc-section (no negative margin needed, section has no padding) */
.ctc-section > .ctc-title {
    margin: 0;
    border-radius: 0;
}

/* Job Header Section */
.ctc-header-section {
    background: var(--bg-secondary);
}

.ctc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.ctc-job-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.ctc-status-badge {
    background: var(--color-success);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.ctc-as-of {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 12px;
}

.ctc-timestamp {
    color: var(--text-secondary);
    font-size: 11px;
    opacity: 0.7;
}

.ctc-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.ctc-header-col {
    padding: 10px 16px;
    border-right: 1px solid var(--border-color);
}

.ctc-header-col:last-child {
    border-right: none;
}

.ctc-field {
    display: contents;
    font-size: 12px;
}

.ctc-label {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
    padding: 3px 8px 3px 0;
    font-size: 12px;
}

.ctc-value {
    color: var(--text-primary);
    padding: 3px 0;
    font-size: 12px;
}

.ctc-bold {
    font-weight: 700;
}

.ctc-negative {
    color: var(--color-danger);
}

/* Billing Summary */
.ctc-billing-summary {
    background: var(--bg-secondary);
}

.ctc-billing-row {
    display: flex;
    gap: 24px;
    padding: 8px 16px;
    align-items: center;
}

.ctc-billing-row .ctc-label {
    margin-left: 16px;
}

.ctc-billing-row .ctc-label:first-child {
    margin-left: 0;
}

/* Three-column layout (Job Progress / Balance / Contract) */
.ctc-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--bg-secondary);
}

.ctc-col {
    padding: 0;
    border-right: 1px solid var(--border-color);
}

.ctc-col:last-child {
    border-right: none;
}

.ctc-col-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
}

.ctc-col .ctc-field {
    padding: 4px 12px;
    justify-content: space-between;
}

.ctc-col .ctc-field:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

/* Customer Aging */
.ctc-aging {
    background: var(--bg-secondary);
}

.ctc-aging-row {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.ctc-aging-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    border-right: 1px solid var(--border-color);
    min-width: 150px;
}

.ctc-aging-item:last-child {
    border-right: none;
}

/* Cost Type Table */
.ctc-cost-table,
.ctc-monthly-table,
.ctc-analysis-table,
.ctc-labor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: auto;
}

/* Allow horizontal scroll on wide tables */
.ctc-section:has(.ctc-cost-table) {
    overflow-x: auto;
}

.ctc-cost-table thead th,
.ctc-monthly-table thead th,
.ctc-analysis-table thead th,
.ctc-labor-table thead th {
    background: #2d3748;
    color: #e2e8f0;
    padding: 8px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.ctc-cost-table tbody td,
.ctc-monthly-table tbody td,
.ctc-analysis-table tbody td,
.ctc-labor-table tbody td {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.ctc-cost-table tbody tr:nth-child(even) td,
.ctc-monthly-table tbody tr:nth-child(even) td,
.ctc-labor-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.ctc-cost-label {
    font-weight: 600;
    white-space: nowrap;
}

.ctc-num {
    text-align: right;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.ctc-totals-row td {
    font-weight: 700;
    background: var(--bg-tertiary) !important;
    border-top: 2px solid var(--color-primary);
}

/* Summary rows under cost table (Earned Revenue, GP, GP%) */
.ctc-summary-row td {
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color);
}

/* Two-column layout (Margin / Projected Cost) */
.ctc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border: none !important;
    background: transparent !important;
    align-items: start;
}

.ctc-half {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ctc-half > .ctc-title {
    margin: 0;
    border-radius: 0;
}

.ctc-half .ctc-analysis-table thead th:first-child {
    text-align: left;
}

/* Unified Monthly Recap section */
.ctc-monthly-recap-section {
    background: var(--bg-secondary);
}

/* Recap detail rows — collapsed by default */
.ctc-monthly-recap-section .ctc-recap-detail {
    display: none;
}
.ctc-monthly-recap-section.ctc-recap-expanded .ctc-recap-detail {
    display: table-row;
}
.ctc-recap-toggle {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s;
}
.ctc-recap-toggle:hover {
    color: var(--color-primary);
}

.ctc-monthly-fixed {
    table-layout: fixed;
}

.ctc-monthly-fixed th:first-child,
.ctc-monthly-fixed td:first-child {
    width: 120px;
}

.ctc-monthly-separator {
    border-top: 1px solid var(--border-color);
}

/* Notes section */
.ctc-notes {
    background: var(--bg-secondary);
    padding: 0;
}

.ctc-note {
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
}

.ctc-note:last-child {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 1000px) {
    .ctc-header-grid,
    .ctc-three-col {
        grid-template-columns: 1fr;
    }

    .ctc-header-col,
    .ctc-col {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .ctc-two-col {
        grid-template-columns: 1fr;
    }

    .ctc-aging-row {
        flex-direction: column;
    }

    .ctc-aging-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .ctc-cost-table,
    .ctc-monthly-table,
    .ctc-labor-table {
        font-size: 10px;
    }

    .ctc-chart-split {
        grid-template-columns: 1fr;
    }
}

/* ===================== CTC Charts ===================== */

.ctc-analytics-section {
    background: var(--bg-secondary);
}

.ctc-charts-container {
    padding: 16px;
}

.ctc-chart-row {
    margin-bottom: 16px;
}

.ctc-chart-row:last-child {
    margin-bottom: 0;
}

.ctc-chart-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ctc-chart-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
}

/* Chart card title — override margin for 16px card padding */
.ctc-chart-card .ctc-title {
    margin: -16px -16px 12px -16px;
}

.ctc-chart-wrapper {
    position: relative;
    height: 280px;
}

.ctc-chart-wrapper-doughnut {
    height: 280px;
}

/* CTC filter checkboxes */
.checkbox-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    height: 34px;
}

.checkbox-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-filter input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Worksheet warning highlight */
.ctc-ws-warning {
    background-color: rgba(255, 235, 59, 0.25);
    padding: 1px 3px;
    border-radius: 2px;
    cursor: help;
}

/* Worksheet popover */
.ctc-ws-popover {
    position: fixed;
    z-index: 10000;
    min-width: 280px;
    max-width: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    font-size: 13px;
}
.ctc-ws-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.ctc-ws-popover-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.ctc-ws-popover-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ctc-ws-popover-close:hover { color: var(--color-danger); }
.ctc-ws-popover-body { padding: 10px 12px; }
.ctc-ws-popover-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    color: var(--text-secondary);
}
.ctc-ws-popover-meta strong { color: var(--text-primary); }
.ctc-ws-date-mismatch {
    color: var(--color-warning, #ff9800);
}
.ctc-ws-date-mismatch strong {
    color: var(--color-warning, #ff9800);
}
.ctc-ws-btn-mismatch {
    background: var(--color-warning, #ff9800) !important;
    color: #000 !important;
    border-color: var(--color-warning, #ff9800) !important;
}
.ctc-ws-popover-table {
    width: 100%;
    border-collapse: collapse;
}
.ctc-ws-popover-table th,
.ctc-ws-popover-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
}
.ctc-ws-popover-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ctc-ws-popover-table tfoot td {
    border-top: 2px solid var(--border-color);
    border-bottom: none;
    padding-top: 6px;
}
.ctc-ws-popover-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-secondary);
}
/* CTC Info Icons (known differences from Excel) */
.ctc-info-icon {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s;
    user-select: none;
}
.ctc-info-icon:hover {
    opacity: 1;
    color: var(--color-primary, #64b5f6);
}
.ctc-info-popup {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 340px;
    min-width: 220px;
    z-index: 2100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
}
.ctc-info-popup-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--color-primary, #64b5f6);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.ctc-info-popup-body {
    color: var(--text-secondary);
}

/* ========== AR Aging Tab ========== */

.aging-summary {
    margin-bottom: 12px;
}

.aging-date-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

#aging-as-of-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}

#billing-date-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    min-width: 180px;
    text-align: center;
}

/* Shrink the Billing tab's date pickers to match the Year/Month/Table
   toggle-pill height (~26px). Affects only the Billing-tab nav widgets;
   AR Aging and CTC keep the larger default arrow size. */
#billing-start-nav .ctc-date-arrow,
#billing-end-nav .ctc-date-arrow,
#billing-year-nav .ctc-date-arrow {
    width: 22px;
    height: 22px;
    font-size: 12px;
}

#billing-start-label,
#billing-end-label,
#billing-year-label {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    min-width: 70px;
    text-align: center;
}

#billing-year-label {
    min-width: 44px;
}

/* Tighten gap on the date-nav children inside the Billing tab so the
   widgets occupy similar vertical space to the toggle pills. */
#billing-start-nav.aging-date-nav,
#billing-end-nav.aging-date-nav,
#billing-year-nav.aging-date-nav {
    gap: 4px;
}

/* DSO values layout - 3 values per card */
.aging-dso-values {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-top: 4px;
}

.aging-dso-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.aging-dso-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
}

.aging-dso-num {
    font-size: 18px;
    font-weight: 700;
}

.aging-dso-total .aging-dso-label { color: #64b5f6; }
.aging-dso-total .aging-dso-num { color: #64b5f6; }
.aging-dso-service .aging-dso-label { color: #81c784; }
.aging-dso-service .aging-dso-num { color: #81c784; }
.aging-dso-contract .aging-dso-label { color: #ffb74d; }
.aging-dso-contract .aging-dso-num { color: #ffb74d; }

/* DSO trial balance inline table */
.dso-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}
.dso-info-table th,
.dso-info-table td {
    padding: 2px 6px;
    text-align: right;
    white-space: nowrap;
}
.dso-info-table th { color: var(--text-secondary); font-weight: 600; font-size: 10px; }
.dso-info-table td:first-child,
.dso-info-table th:first-child { text-align: left; }
.dso-copy-cell {
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 3px;
}
.dso-copy-cell:hover { background: var(--bg-tertiary, rgba(255,255,255,0.1)); }
.dso-info-sep td { border-top: 1px solid var(--border-color); }

/* Tie-out column (legacy, kept for overview tab) */
.tie-col { text-align: left; font-size: 10px; padding-left: 8px; }
.tie-ok { color: var(--color-success, #4caf50); font-weight: 700; margin-right: 3px; }
.tie-miss { color: var(--color-danger, #ef5350); font-weight: 700; margin-right: 3px; }
.tie-label { color: var(--text-secondary); }

/* GL tie-out card */
.aging-tieout-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.aging-tieout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.aging-tieout-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.aging-tieout-check.ok { background: rgba(76,175,80,0.18); color: var(--color-success); }
.aging-tieout-check.miss { background: rgba(239,83,80,0.18); color: var(--color-danger); }

.aging-tieout-label { color: var(--text-secondary); flex: 1; min-width: 0; }

.aging-tieout-vals {
    text-align: right;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.aging-tieout-vals.miss { color: var(--color-danger); }
.aging-tieout-val-line { white-space: nowrap; }

/* DSO inputs grid below DSO numbers */
.aging-dso-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.aging-dso-input-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    padding: 2px 0;
}

.aging-dso-input-label { color: var(--text-muted); }
.aging-dso-input-val { color: var(--text-secondary); }

/* DSO breakdown table */
.dso-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
}

.dso-breakdown-table th {
    font-weight: 500;
    font-size: 10px;
    padding: 4px 4px 2px;
    text-align: right;
    white-space: nowrap;
    color: var(--text-muted);
}

.dso-breakdown-table th:first-child { text-align: left; }
.dso-breakdown-table th.col-ctr { color: #9a6e30; }
.dso-breakdown-table th.col-svc { color: #4a7a4c; }

.dso-breakdown-table td {
    padding: 2px 4px;
    text-align: right;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dso-breakdown-table td:first-child {
    text-align: left;
    color: var(--text-muted);
    font-size: 10px;
}

.dso-breakdown-table td.col-total {
    color: var(--text-primary);
    font-weight: 500;
}

.dso-breakdown-table .dso-tbl-sep td {
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}

.dso-breakdown-table .dso-tbl-section-head th {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-top: 4px;
}

/* GL tie-out table */
.tieout-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 4px;
}
.tieout-table th {
    font-weight: 500;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    padding: 2px 4px;
}
.tieout-table td {
    padding: 6px 4px;
    vertical-align: middle;
}
.tieout-table .tieout-icon {
    width: 18px;
    padding-right: 4px;
}
.tieout-table .tieout-label {
    color: var(--text-secondary);
}
.tieout-table .tieout-val {
    text-align: right;
    white-space: nowrap;
    color: var(--text-secondary);
}
.tieout-table .tieout-val.miss {
    color: var(--color-danger, #ef5350);
}

.aging-summary-row-dso {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 10px;
}

.aging-dso-chart-card {
    display: flex;
    flex-direction: column;
}

.dso-chart-wrap {
    position: relative;
    flex: 1;
    min-height: 80px;
}

.dso-chart-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.aging-summary-row-buckets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .aging-summary-row-dso {
        grid-template-columns: 1fr;
    }
    .aging-dso-inputs {
        grid-template-columns: 1fr 1fr;
    }
    .aging-summary-row-buckets {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Stacked bar row — total AR exposure */
.aging-summary-row-bar {
    margin-bottom: 10px;
}

.aging-bar-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
}

.aging-bar-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.aging-bar-total-label {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aging-bar-total-value {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}

.aging-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
}

.aging-bar-recv,
.aging-bar-ret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.aging-bar-recv { background: rgba(74, 158, 255, 0.5); }
.aging-bar-ret  { background: rgba(96, 125, 139, 0.45); }

.aging-bar-seg-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    line-height: 1.1;
}

.aging-bar-seg-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.2;
}

.aging-bar-outside {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.aging-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
}

.aging-bucket-card {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.aging-bucket-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 0.6s ease-out;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.aging-card-inner {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
}

.aging-card-header {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.aging-card-value {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
}

/* Age highlight — applied inline from AGING_PALETTE in aging.js */

/* Group headers and subtotals */
.aging-group-header {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 16px 10px;
    border-bottom: 2px solid var(--color-primary);
    margin-top: 28px;
    margin-bottom: 0;
    background: var(--bg-secondary);
    border-radius: var(--radius) var(--radius) 0 0;
}

.aging-group-header:first-child {
    margin-top: 0;
}

/* Aging filter pills */
.aging-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
}
.aging-filter-pills:not(:empty) {
    padding: 8px 12px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
}
.filter-pill-label {
    font-weight: 600;
    cursor: pointer;
}
.filter-pill-label:hover { color: var(--color-primary); }
.filter-pill-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.filter-pill-dismiss:hover { color: var(--color-danger); }

/* Aging filters modal grid */
.aging-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) {
    .aging-modal-grid { grid-template-columns: 1fr; }
}

.aging-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--color-primary);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: 15px;
}
.aging-section-title { font-size: 15px; font-weight: 700; }

.aging-group-content { margin-left: 20px; }
.aging-subgroup-content { margin-left: 20px; }

.aging-subgroup-header {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px 6px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.aging-group-subtotal td {
    font-weight: 700 !important;
    background: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color);
}

/* In-table group header rows */
.aging-group-row td {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 16px 8px;
    border-bottom: 2px solid var(--color-primary);
    background: var(--bg-secondary);
}
.aging-group-row:first-child td {
    padding-top: 8px;
}

.aging-subgroup-row td {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px 6px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

/* Hierarchy indentation for grouped rows */
.aging-indent-1 td:first-child { padding-left: 28px; }
.aging-indent-2 td:first-child { padding-left: 48px; }

/* Group header percentage tags */
.aging-group-pcts { margin-left: 12px; }
.aging-pct-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: context-menu;
}
.aging-subgroup-row .aging-pct-tag {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
}

/* Note indicator in aging table */
.aging-note-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffc107;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}

/* Combined view title (shown when only Service or only Contract is selected) */
.aging-view-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
}

/* Group card — default is the innermost data card (gray bg, borders) */
.aging-group-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.aging-group-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
    gap: 6px;
    position: sticky;
    top: var(--floating-thead-bottom, 80px);
    z-index: 12;
    background: var(--bg-secondary);
}

/* Outer group card (Customer level in Group by Job) — transparent wrapper, title only */
.aging-group-card-outer {
    background: transparent;
    border: none;
    border-radius: 0;
}

.aging-group-card-outer > .aging-group-card-header {
    background: var(--bg-primary);
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Inner cards (job-level in Group by Job) — real card styling */
.aging-group-card-inner {
    background: var(--bg-secondary);
    margin: 0 0 12px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.aging-group-card-inner .aging-group-card-header {
    z-index: 11;
    top: calc(var(--floating-thead-bottom, 80px) + 40px);
}

/* Fixed column layout for aligned aging tables */
.aging-fixed-cols {
    table-layout: fixed;
}

.aging-fixed-cols td,
.aging-fixed-cols th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Indent first column to offset from group titles / card edges */
#aging-table-container .aging-fixed-cols td:first-child,
#aging-table-container .aging-fixed-cols th:first-child {
    padding-left: 24px;
}

/* No indent on card body — columns align with persistent thead */
.aging-group-card-body {
    padding-left: 0;
}

.aging-group-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.aging-group-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================================
   Shared hierarchical group cards (dash-group-card-*)
   Used by both AR Aging (Group by Job) and Billing (Calendar view).
   Mirror the .aging-group-card-* rules above; if you change one set,
   keep the other in sync.
   ============================================================================ */
.dash-group-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.dash-group-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
    gap: 6px;
    position: sticky;
    top: var(--floating-thead-bottom, 80px);
    z-index: 12;
    background: var(--bg-secondary);
}

.dash-group-card-outer {
    background: transparent;
    border: none;
    border-radius: 0;
}

.dash-group-card-outer > .dash-group-card-header {
    background: var(--bg-primary);
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.dash-group-card-inner {
    background: var(--bg-secondary);
    margin: 0 0 12px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.dash-group-card-inner .dash-group-card-header {
    z-index: 11;
    top: calc(var(--floating-thead-bottom, 80px) + 40px);
}

.dash-group-card-body {
    padding-left: 0;
}

.dash-group-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.dash-group-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Right-side cluster used when a card header carries multiple right-aligned
   items (meta + sort control). Keeps them grouped at the right edge instead
   of being spread across the header by space-between. */
.dash-group-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================================
   Billing Calendar view — PM → Job → Year (calendar) → Month tile
   ============================================================================ */
.billing-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}

.billing-cards-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.billing-pm-card .dash-group-card-header {
    font-size: 14px;
}

.billing-job-card-body {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Year calendar card */
.billing-year-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary, var(--bg-secondary));
    overflow: hidden;
}

.billing-year-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.billing-year-card.collapsed .billing-year-card-header {
    border-bottom: none;
}

/* Year-card caret matches .billing-icon-btn (note + status icons). SVG
   chevron rotates 180° when the card is collapsed so the same icon doubles
   as expand/collapse indicator without DOM swaps. */
.billing-year-card-caret {
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
    transition: transform 0.15s ease;
}
.billing-year-card.collapsed .billing-year-card-caret {
    transform: rotate(-90deg);
}
.billing-year-card-caret:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
    border-color: var(--border-color);
    color: var(--text-primary);
}

.billing-year-card-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: auto;
}

.billing-year-card-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.billing-year-card-body {
    display: grid;
    /* Auto-tile to fit the viewport. 460px minimum lets a standard ~1440px
       viewport fit three columns even inside a PM-grouped grid (which lives
       inside the month card body's 12px padding). The expanded job pill
       handles narrower widths by truncating customer → name with ellipsis. */
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 8px;
    padding: 12px;
}

.billing-year-card-loading {
    padding: 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

/* Month tile / Billing box (shared between Year and Month views) */
.billing-month-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    min-height: 110px;
    font-size: 12px;
    color: #e8e8e8;
}

/* Past months: dark border (default), text brightened a shade */
.billing-box-past {
    border-color: var(--border-color);
    color: #f0f0f0;
}

/* Current month: bright white/gray border, bright text */
.billing-box-current {
    border-color: #d8d8d8;
    color: #ffffff;
}

/* Future months: dark border, gray text for content */
.billing-box-future {
    border-color: var(--border-color);
    color: var(--text-muted, #707070);
}
.billing-box-future .billing-month-tile-month,
.billing-box-future .billing-month-tile-total {
    color: var(--text-muted, #707070);
}
.billing-box-future .inv-pill-expanded {
    opacity: 0.75;
}

.billing-month-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}

.billing-month-tile-month {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.billing-month-tile-total {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* When the box is marked complete, the total reads in the same green as the
   complete status check icon — gives the row a single visual cue rather than
   two unrelated state indicators. */
.billing-box-complete .billing-month-tile-total {
    color: var(--color-success, #4caf50);
}

/* Month-view box body: two-column layout with the existing inv-ref / invoice
   list / notes on the left and a job-stats info column on the right. The
   right column shows what used to be the table view's % Billed, Over/Under,
   Last Cost, and Billing Method cells. Year-view boxes skip the split (no
   pill, no info column — they sit under a Job-card header that surfaces
   this info already). */
.billing-box-body-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}
.billing-box-body-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.billing-box-info-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    max-width: 140px;
    padding: 4px 6px 4px 8px;
    font-size: 11px;
    line-height: 1.3;
}
.billing-box-info-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}
.billing-box-info-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.billing-box-info-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.billing-box-info-value a {
    color: var(--color-primary);
    text-decoration: none;
}
.billing-box-info-value a:hover {
    text-decoration: underline;
}
.billing-box-info-na {
    color: var(--text-muted);
}

.billing-month-tile-invref {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-all;
}

.billing-month-tile-inv-no,
.billing-month-tile-filename {
    cursor: pointer;
}

.billing-month-tile-inv-no:hover,
.billing-month-tile-filename:hover {
    color: var(--color-primary);
}

.billing-month-tile-section-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.billing-month-tile-invoices,
.billing-month-tile-notes-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

/* Stack invoice pills vertically inside the tile so each is one row tall.
   Use the expanded pill (no hover behavior) and force it to the tile's
   full width — overrides the default .inv-pill-expanded { width: 720px }. */
.billing-month-tile-invoices .inv-pill,
.billing-month-tile-invoices .inv-pill-expanded {
    display: flex;
    align-self: stretch;
    width: 100% !important;
    max-width: 100%;
    box-shadow: none;
    font-size: 11px;
    margin-bottom: 3px;
}

.billing-month-tile-invoices .inv-pill-expanded:last-child {
    margin-bottom: 0;
}

.billing-month-tile-invoice-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-family: var(--font-mono, 'Menlo', monospace);
    color: var(--text-secondary);
}

.billing-month-tile-invoice-amt {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.billing-month-tile-invoice-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 11px;
}

.billing-month-tile-note {
    color: var(--text-secondary);
    line-height: 1.3;
}

.billing-month-tile-note-text {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

/* View toggle */
.billing-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.billing-view-toggle .toggle-pill {
    border-radius: 0;
    border: none;
}

.billing-view-toggle .toggle-pill.active {
    background: var(--color-primary);
    color: #fff;
}

/* Top-level sort bar (shown once when Group by PM is off) */
.billing-top-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 4px);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.billing-top-sort-bar-meta {
    font-weight: 500;
}

/* Inline sort control (also embedded in each PM card header) */
.billing-top-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

.billing-top-sort-label {
    color: var(--text-muted);
}

.billing-top-sort-select {
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
}

.billing-top-sort-dir {
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.billing-top-sort-dir:hover {
    background: var(--bg-primary);
}

/* ============================================================================
   Billing Month view — PM → Month-card → Billing-box (job tile)

   The Month card mirrors Year view's Job card (dash-group-card-inner with a
   title row), and its body is a grid of Billing boxes — one per filtered
   job. Each Billing box is the same shared component as the Year-view month
   tile, with a job-pill row added beneath the title.
   ============================================================================ */
.billing-month-card {
    margin-bottom: 12px;
}

/* Tile grid inside each Month card — same adaptive auto-fill layout as the
   Year view's calendar grid so tiles are visually identical between views. */
.billing-month-card-body {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 8px;
}

/* When Group by PM is on in Month view, the body becomes a vertical stack of
   (PM header → PM grid) pairs instead of a single tile grid. */
.billing-month-card-body:has(> .billing-month-card-pm-header) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.billing-month-card-pm-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 4px 2px 2px;
    border-bottom: 1px solid var(--border-color);
}
.billing-month-card-pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 8px;
}

/* Job-pill row beneath the title in a Month-view billing box. Pill extends
   border-to-border by negating the tile's 10px horizontal padding so the
   pill segments sit flush with the box edges. */
.billing-box-pill-row {
    display: flex;
    align-items: center;
    margin-left: -10px;
    margin-right: -10px;
}
.billing-box-pill-row .job-pill-expanded {
    width: 100%;
    min-width: 0;
    box-shadow: none;
}

/* Job pill in the Year-view Job-card header matches the Table view exactly:
   width: 100% fills the available header width, min-width: 400px keeps the
   expanded content (job#, name, status, badges, mini graph) from squeezing.
   The Month-view tile uses the compact pill instead so the tile grid can
   stay identical in shape to the Year view's. */
.billing-job-card-header .dash-group-card-title {
    flex: 1 1 auto;
    min-width: 400px;
    display: flex;
}
.billing-job-card-header .job-pill-expanded {
    width: 100%;
    min-width: 400px;
}

/* Shared icon-button base used by note + status icons. Same width/height
   so the title row's right side has a stable layout. Matches the visual
   style of the top-bar search / refresh / settings icons. */
.billing-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.billing-icon-btn svg {
    width: 14px;
    height: 14px;
}

.billing-note-btn:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
    border-color: var(--border-color);
    color: #ffffff;
}

/* Notes present — brighter white tint so the icon visibly registers */
.billing-note-btn.billing-note-btn-has {
    color: #ffffff;
}

/* Status icon variants. All three states are clickable (cycle on click) and
   share the .billing-icon-btn footprint so the title bar's right side
   doesn't shift width as status changes. */
.billing-status-btn {
    color: var(--text-muted);
}
.billing-status-btn:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
    border-color: var(--border-color);
}
.billing-status-complete {
    color: var(--color-success, #4caf50);
}
.billing-status-complete:hover {
    color: var(--color-success, #4caf50);
}
.billing-status-ready {
    color: #f7c948;
}
.billing-status-ready:hover {
    color: #f7c948;
}
.billing-status-empty {
    color: var(--text-muted);
    opacity: 0.6;
}
.billing-status-empty:hover {
    opacity: 1;
    color: var(--text-primary);
}

/* Header right-cluster on Year-view month tiles — total + note icon */
.billing-month-tile-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Note: tile grids use auto-fill (not auto-fit) so all rows share the same
   column count — auto-fit would collapse trailing empty tracks per row and
   produce inconsistent box widths between rows with different fill counts. */

/* PO/Sub Status Tab */
.po-expand-toggle {
    cursor: pointer;
    text-align: center;
    user-select: none;
    width: 30px;
    padding: 4px !important;
}

.po-toggle-icon {
    display: inline-block;
    color: var(--color-primary);
    font-size: 10px;
    transition: transform 0.15s ease;
}

.po-toggle-icon.expanded {
    transform: rotate(90deg);
}

.po-detail-row {
    background: var(--bg-tertiary) !important;
}

.po-detail-row td {
    font-size: 12px;
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--border-color);
}

.po-detail-header {
    background: var(--bg-secondary) !important;
}

.po-detail-header td {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.po-grand-total {
    border-top: 2px solid var(--color-primary);
    background: var(--bg-secondary) !important;
}

.po-grand-total td {
    padding: 8px !important;
}

.po-job-row {
    cursor: default;
}

.po-job-row:hover {
    background: var(--bg-tertiary);
}

.currency.negative {
    color: var(--color-danger);
}

/* PO Hierarchy Levels */
.po-vendor-row {
    background: rgba(74, 158, 255, 0.06) !important;
    cursor: pointer;
}

.po-vendor-row:hover {
    background: rgba(74, 158, 255, 0.12) !important;
}

.po-vendor-row td {
    padding-left: 8px !important;
}

.po-po-header-row td {
    font-size: 10px !important;
}

.po-po-row {
    background: rgba(255, 255, 255, 0.02) !important;
}

.po-po-row td {
    padding-left: 12px !important;
}

.po-po-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.po-co-row {
    background: rgba(255, 255, 255, 0.01) !important;
}

.po-co-row td {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-style: italic;
}

/* Job detail PO hierarchy */
.jd-po-vendor-row {
    background: rgba(74, 158, 255, 0.06);
}

.jd-po-vendor-row:hover {
    background: rgba(74, 158, 255, 0.12) !important;
}

.jd-po-po-row {
    background: rgba(255, 255, 255, 0.02);
}

.jd-po-po-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.jd-po-co-row {
    background: rgba(255, 255, 255, 0.01);
}

.jd-po-co-row td {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* ========== Note Attachments ========== */

.note-attachments {
    margin-top: 4px;
    padding: 4px 0;
}

.note-attachment-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 11px;
}

.note-attachment-item .attachment-icon {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.note-attachment-item .attachment-link {
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.note-attachment-item .attachment-link:hover {
    text-decoration: underline;
}

.note-attachment-item .attachment-size {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.note-attachment-item .attachment-delete {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
    opacity: 0.7;
}

.note-attachment-item .attachment-delete:hover {
    opacity: 1;
}

.note-attach-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.note-attach-btn:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
    background: rgba(74, 158, 255, 0.1);
}

.note-attachment-item .attachment-user {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.popup-attachments-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.popup-attachments-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* ===================== Invoice Generator Styles ===================== */

.invoice-controls {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.invoice-controls-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-control-group label {
    font-size: 12px;
    color: var(--text-secondary);
}

.invoice-control-group select,
.invoice-control-group input[type="text"],
.invoice-control-group input[type="date"] {
    min-width: 140px;
}

.invoice-control-group select {
    min-width: 240px;
}

.invoice-buttons {
    flex-direction: row;
    gap: 6px;
    margin-left: auto;
}

.invoice-preview-container {
    min-height: 300px;
}

.invoice-header-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.invoice-status-pill-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    min-height: 24px;
}
.invoice-status-pill-row:empty {
    display: none;
}

.invoice-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.invoice-header-left .invoice-company {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.invoice-header-left div,
.invoice-header-right div {
    font-size: 13px;
    line-height: 1.5;
}

.invoice-address-row {
    display: flex;
    gap: 40px;
    margin-bottom: 16px;
}

.invoice-bill-to,
.invoice-ship-to {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
}

.invoice-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.invoice-ref-row {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    flex-wrap: wrap;
}

.invoice-ref-row > div {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.invoice-ref-row > div:last-child {
    flex: 1;
    min-width: 200px;
}

.invoice-view-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.invoice-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.invoice-cost-basis-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-warning);
    color: #000;
    font-weight: 600;
}

.invoice-cost-basis-badge.tm {
    background: var(--color-info);
}

.invoice-section-title {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

/* Collapsible sections */
.invoice-section {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.invoice-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    cursor: pointer;
    user-select: none;
}

.invoice-section-header:hover {
    background: var(--border-color);
}

.invoice-section-chevron {
    font-size: 10px;
    transition: transform 0.2s;
}

.invoice-section.collapsed .invoice-section-chevron {
    transform: rotate(-90deg);
}

.invoice-section.collapsed .invoice-section-body {
    display: none;
}

.invoice-section-count {
    color: var(--text-muted);
    font-size: 12px;
}

.invoice-section-subtotal {
    margin-left: auto;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-primary);
}

.invoice-section-body {
    padding: 8px;
}

.invoice-section-actions {
    padding: 6px 0;
    display: flex;
    gap: 6px;
}

/* Line item table */
.invoice-line-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.invoice-line-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    text-transform: uppercase;
}

.invoice-line-table td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.invoice-line-table tr:hover {
    background: rgba(255,255,255,0.03);
}

.invoice-line-table.compact {
    max-width: 500px;
}

.invoice-line-table .text-right {
    text-align: right;
}

.invoice-line-table .invoice-img-col {
    width: 52px;
    text-align: center;
    padding: 4px 2px;
    white-space: nowrap;
}

.invoice-line-table .invoice-img-col a {
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    margin-right: 4px;
}

.invoice-line-table .invoice-img-col .invoice-attach-state {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 3px;
}

.invoice-line-table .invoice-img-col .invoice-attach-state.add:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.invoice-line-table .invoice-img-col .invoice-attach-state.attached {
    cursor: default;
    color: #4caf50;
    font-weight: bold;
}

.invoice-line-table .invoice-img-col .invoice-attach-state.busy {
    cursor: default;
    opacity: 0.6;
}

.invoice-line-table tfoot.invoice-section-totals td {
    padding: 6px 8px;
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 11px;
}

.invoice-line-table tfoot.invoice-section-totals tr:hover {
    background: transparent;
}

/* Editable amount input */
.invoice-amount-input {
    width: 100px;
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: right;
    font-size: 12px;
}

.invoice-amount-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.btn-remove-row {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    vertical-align: middle;
}

.btn-remove-row:hover {
    opacity: 0.7;
}

.invoice-row-removed td {
    opacity: 0.4;
    text-decoration: line-through;
    position: relative;
}

.invoice-row-removed td:last-child {
    text-decoration: none;
}

.invoice-rate-input {
    width: 80px;
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: right;
    font-size: 12px;
}
.invoice-rate-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.invoice-row-removed .invoice-amount-input,
.invoice-row-removed .invoice-rate-input,
.invoice-row-removed .invoice-markup-amt-input,
.invoice-row-removed .invoice-markup-pct-input {
    pointer-events: none;
    text-decoration: line-through;
}

.btn-restore-row {
    background: none;
    border: none;
    color: var(--color-success);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    vertical-align: middle;
}

.btn-restore-row:hover {
    opacity: 0.7;
}

.invoice-markup-pct-input,
.invoice-markup-amt-input {
    width: 70px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    font-size: 12px;
    text-align: right;
}

/* Invoice number check indicator */
.inv-check {
    font-size: 16px;
    font-weight: bold;
}

.inv-check.green {
    color: var(--color-success);
}

.inv-check.red {
    color: var(--color-danger);
}

/* Lump sum view */
.invoice-lump-sum {
    margin-bottom: 16px;
}

.invoice-lump-sum-info {
    display: flex;
    gap: 24px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

/* Lump sum unified billing schedule */
.ls-contract {
    padding: 8px 16px 8px 20px;
    border-left: 3px solid var(--color-primary);
    margin-bottom: 2px;
}
.ls-contract-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.ls-contract-row .ls-val {
    font-variant-numeric: tabular-nums;
    min-width: 110px;
    text-align: right;
}
.ls-contract-total {
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 5px;
    margin-top: 2px;
}
.ls-contract-total .ls-val {
    color: var(--text-primary);
}
.ls-summary,
.ls-retention,
.ls-previous-detail,
.ls-current-payment {
    padding: 6px 16px 6px 20px;
    margin-bottom: 2px;
}
.ls-summary {
    border-left: 3px solid var(--color-success, #22c55e);
}
.ls-retention {
    border-left: 3px solid var(--color-warning, #eab308);
}
.ls-previous-detail {
    border-left: 3px solid var(--text-muted);
}
.ls-current-payment {
    border-left: 3px solid var(--color-primary);
}
.ls-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.ls-summary-row .ls-val {
    font-variant-numeric: tabular-nums;
    min-width: 110px;
    text-align: right;
}
.ls-summary-total {
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    padding-top: 5px;
    margin-top: 2px;
}
.ls-summary-total .ls-val {
    color: var(--text-primary);
}
.ls-summary-row .invoice-amount-input {
    width: 120px;
    font-size: 13px;
    padding: 2px 6px;
    text-align: right;
}
.ls-summary-row .invoice-pct-input {
    width: 60px;
    font-size: 13px;
    padding: 2px 6px;
    text-align: right;
}
.ls-billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 0;
}
.ls-billing-table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 5px 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}
.ls-billing-table td {
    padding: 4px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.ls-billing-table .text-right {
    text-align: right;
}
.ls-billing-table .invoice-row-void td {
    color: var(--text-muted);
    text-decoration: line-through;
}
.ls-current-sep td {
    border-top: 1px dashed var(--text-muted);
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}
.ls-current-row {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.06);
}
.ls-current-row td {
    padding-top: 5px;
    padding-bottom: 5px;
}
.ls-current-row .invoice-amount-input,
.ls-current-row .invoice-pct-input {
    width: 90px;
    font-size: 12px;
    padding: 2px 6px;
}
.ls-billing-totals td {
    font-weight: 600;
    border-top: 2px solid var(--border-color);
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--bg-secondary);
}
.ls-footer {
    padding: 8px 16px;
    font-size: 13px;
}
.ls-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    color: var(--text-secondary);
}
.ls-footer-row .ls-val {
    font-variant-numeric: tabular-nums;
    min-width: 110px;
    text-align: right;
}
.ls-payment-requested {
    margin-top: 8px;
    padding: 8px 16px;
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.ls-payment-requested .ls-val {
    font-variant-numeric: tabular-nums;
    font-size: 16px;
}
.ls-no-prev {
    padding: 6px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Recipient picker dropdown */
.invoice-recipient-picker {
    z-index: 10000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    padding: 8px 0;
    min-width: 300px;
    max-width: 450px;
}
.recipient-picker-title {
    padding: 4px 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
.recipient-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.recipient-option:hover {
    background: var(--bg-secondary);
}
.recipient-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.recipient-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.recipient-source {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.recipient-picker-actions {
    display: flex;
    gap: 6px;
    padding: 8px 12px 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

/* Invoice totals block */
.invoice-totals-block {
    margin-top: 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
}
.invoice-totals-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}
.invoice-totals-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.invoice-totals-amount {
    font-size: 16px;
    font-weight: 600;
    min-width: 120px;
    text-align: right;
}
.invoice-retainage-row {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.invoice-retainage-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.invoice-retainage-input-group .invoice-pct-input {
    width: 70px;
}
.invoice-net-due-row {
    padding-top: 6px;
    font-size: 16px;
    font-weight: 600;
}
.invoice-net-due-row #invoice-grand-total-value {
    font-size: 20px;
    color: var(--color-primary);
    min-width: 120px;
    text-align: right;
}

/* Foundation comparison */
.invoice-foundation-comparison {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.invoice-foundation-comparison.match {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.invoice-foundation-comparison.mismatch {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.3);
}
.invoice-comparison-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.invoice-foundation-comparison.match .invoice-comparison-title {
    color: var(--color-success);
}
.invoice-foundation-comparison.mismatch .invoice-comparison-title {
    color: var(--color-warning);
}
.invoice-comparison-table {
    width: 100%;
    font-size: 12px;
}
.invoice-comparison-table th {
    font-weight: 600;
    padding: 2px 8px;
    text-align: right;
    color: var(--text-muted);
}
.invoice-comparison-table th:first-child {
    text-align: left;
}
.invoice-comparison-table td {
    padding: 2px 8px;
}
tr.comp-match td:last-child {
    color: var(--color-success);
}
tr.comp-mismatch td:last-child {
    color: var(--color-warning);
    font-weight: 600;
}

/* Existing invoices section */
.invoice-existing {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.invoice-existing .invoice-label {
    margin-bottom: 8px;
}

/* Invoice link icons in other tabs */
.invoice-link-icon {
    display: inline-block;
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.5;
    font-size: 13px;
    vertical-align: middle;
    transition: opacity 0.15s;
}

.invoice-link-icon:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* Settings modal grid */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: center;
}

.settings-grid label {
    font-size: 13px;
    color: var(--text-secondary);
}

.settings-grid input {
    width: 100%;
}

/* Empty state */
.invoice-preview-container .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.error-message {
    text-align: center;
    padding: 20px;
    color: var(--color-danger);
}

/* ===================== Invoice Two-Panel Layout ===================== */

/* Default: flex layout. Sidebar grows with its content; detail panel stretches
   to match (so the empty state still spans the sidebar's height). */
.invoice-main-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.invoice-sidebar {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    position: sticky;
    top: calc(var(--sticky-header-height) + 12px);
    height: calc(100vh - var(--sticky-header-height) - 24px);
}

.invoice-sidebar-header {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-refresh-sidebar {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.btn-refresh-sidebar:hover {
    color: var(--color-primary);
    background: rgba(74, 158, 255, 0.1);
}

.invoice-sidebar-count-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.invoice-sidebar-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 6px 8px;
}

/* ── Per-job block: header + tree of invoices ─────────────────────── */
.invoice-sidebar-job-block {
    margin-bottom: 10px;
}

.invoice-sidebar-job-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.invoice-sidebar-job-pill-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.btn-remove-job {
    background: transparent;
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: var(--color-danger);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.btn-remove-job:hover {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

/* Children container: tree line on the left, items on the right */
.invoice-sidebar-job-children {
    position: relative;
    padding-left: 18px;
    min-height: 8px;
    margin-top: 2px;
}

/* Vertical tree line — clickable to collapse */
.invoice-sidebar-tree-line {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 6px;
    width: 12px;
    cursor: pointer;
}
.invoice-sidebar-tree-line::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    border-radius: 1px;
    transition: background 0.15s;
}
.invoice-sidebar-tree-line:hover::before {
    background: var(--color-primary);
}
.invoice-sidebar-job-block.collapsed .invoice-sidebar-tree-line {
    bottom: auto;
    height: 14px;
}

.invoice-sidebar-job-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.invoice-sidebar-job-block.collapsed .invoice-sidebar-job-items,
.invoice-sidebar-job-block.collapsed .invoice-sidebar-add-btn {
    display: none;
}
.invoice-sidebar-collapsed-hint {
    display: none;
    padding: 2px 0 2px 4px;
    gap: 4px;
    align-items: center;
    cursor: pointer;
}
.invoice-sidebar-job-block.collapsed .invoice-sidebar-collapsed-hint {
    display: flex;
}
.invoice-sidebar-collapsed-hint .invoice-status-badge {
    cursor: pointer;
}

.invoice-sidebar-empty-job {
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Invoice pill — round-rect with status-shaded bg/border */
.invoice-sidebar-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    padding-right: 60px; /* room for top-right status badge */
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13px;
    transition: background 0.1s, border-color 0.1s;
}

/* Horizontal tick connecting tree line to pill */
.invoice-sidebar-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
}

.invoice-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--text-muted);
}

.invoice-sidebar-item.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.invoice-sidebar-item.void {
    opacity: 0.5;
}
.invoice-sidebar-item.void:hover {
    opacity: 0.75;
}

/* Status-tinted pill backgrounds */
.invoice-sidebar-item.status-posted {
    background: rgba(76, 175, 80, 0.07);
    border-color: rgba(76, 175, 80, 0.35);
}
.invoice-sidebar-item.status-posted::before { background: rgba(76, 175, 80, 0.5); }
.invoice-sidebar-item.status-created,
.invoice-sidebar-item.status-remote {
    background: rgba(0, 188, 212, 0.07);
    border-color: rgba(0, 188, 212, 0.35);
}
.invoice-sidebar-item.status-created::before,
.invoice-sidebar-item.status-remote::before { background: rgba(0, 188, 212, 0.5); }
.invoice-sidebar-item.status-local-only {
    background: rgba(255, 152, 0, 0.07);
    border-color: rgba(255, 152, 0, 0.35);
}
.invoice-sidebar-item.status-local-only::before { background: rgba(255, 152, 0, 0.5); }
.invoice-sidebar-item.status-void {
    background: rgba(128, 128, 128, 0.06);
    border-color: rgba(128, 128, 128, 0.3);
}
.invoice-sidebar-item.status-reversed {
    background: rgba(244, 67, 54, 0.06);
    border-color: rgba(244, 67, 54, 0.35);
}
.invoice-sidebar-item.status-reversed::before { background: rgba(244, 67, 54, 0.5); }

.invoice-sidebar-item-info {
    flex: 1;
    min-width: 0;
}

.invoice-sidebar-item-no {
    font-weight: 600;
    font-size: 13px;
}

.invoice-sidebar-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Status badge: text-only in upper-right of the pill */
.invoice-sidebar-item .invoice-status-badge {
    background: transparent !important;
    padding: 0 !important;
    font-size: 9px;
    letter-spacing: 0.4px;
}

/* Stack the status badge with an optional "+SENT" sub-line below "POSTED". */
.invoice-sidebar-item .invoice-status-badge-stack {
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.1;
}

.invoice-sidebar-item .invoice-status-badge.sent-sub {
    color: var(--color-success);
    font-weight: 700;
}

/* Add-invoice button at the bottom of each job's children */
.invoice-sidebar-add-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, border-style 0.15s;
    position: relative;
}
.invoice-sidebar-add-btn::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
}
.invoice-sidebar-add-btn:hover {
    background: rgba(74, 158, 255, 0.08);
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-style: solid;
}

.invoice-detail-panel {
    flex: 1;
    min-width: 0;
}

/* Status badges */
.invoice-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.invoice-status-badge.local-only {
    background: rgba(255, 152, 0, 0.2);
    color: var(--color-warning);
}

.invoice-status-badge.created {
    background: rgba(0, 188, 212, 0.2);
    color: var(--color-info);
}

.invoice-status-badge.posted {
    background: rgba(76, 175, 80, 0.2);
    color: var(--color-success);
}

.invoice-status-badge.void {
    background: rgba(128, 128, 128, 0.2);
    color: var(--text-muted);
}

.invoice-status-badge.remote {
    background: rgba(0, 188, 212, 0.2);
    color: #00bcd4;
}

.invoice-status-badge.reversed {
    background: rgba(244, 67, 54, 0.2);
    color: var(--color-danger);
}

/* Job count badge on filter button */
.invoice-job-count-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    margin-left: 4px;
}


/* Invoice check indicator — three-state */
.inv-check.blue {
    color: var(--color-info);
}

.inv-check.void {
    color: var(--text-muted);
}

.invoice-row-void td {
    opacity: 0.4;
    font-style: italic;
}

/* Invoice summary bar */
.invoice-summary-bar {
    display: flex;
    gap: 2px;
    margin: 10px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.invoice-summary-item {
    flex: 1;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--border-color);
    transition: background 0.15s;
    position: relative;
}
.invoice-summary-item:last-child { border-right: none; }
.invoice-summary-item:hover { background: rgba(74, 158, 255, 0.08); }
.invoice-summary-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.invoice-summary-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.invoice-summary-filename {
    font-size: 12px;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invoice-summary-status, .invoice-summary-match {
    font-size: 11px;
    margin-top: 1px;
}
.inv-summary-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.inv-summary-badge.posted { background: rgba(76, 175, 80, 0.15); color: var(--color-success); }
.inv-summary-badge.created { background: rgba(33, 150, 243, 0.15); color: var(--color-info); }
.inv-summary-badge.void { background: rgba(158, 158, 158, 0.15); color: var(--text-muted); }
.inv-summary-badge.not-found { background: rgba(255, 152, 0, 0.1); color: var(--text-secondary); }
.inv-summary-check.match { color: var(--color-success); }
.inv-summary-check.mismatch { color: var(--color-warning); font-weight: 600; }
.invoice-date-default { font-style: italic; color: var(--text-secondary); }
.invoice-date-edit {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 12px;
    font-style: normal;
    margin-left: 4px;
    color-scheme: dark;
}
.invoice-date-edit:hover { border-color: var(--color-primary); }
.invoice-date-edit:focus { outline: none; border-color: var(--color-primary); }
.invoice-date-edit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Claimed items section */
.invoice-claimed-section { opacity: 0.7; }
.invoice-claimed-row td { color: var(--text-muted); font-style: italic; }
.invoice-claimed-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* Invoice number display button (replaces text input) */
.inv-number-display {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    min-width: 120px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s;
}
.inv-number-display:hover {
    border-color: var(--color-primary);
}

/* Inline invoice # button inside preview header */
.inv-number-inline-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.15s;
}
.inv-number-inline-btn:hover {
    border-color: var(--color-primary);
}
.inv-number-inline-btn-readonly,
.inv-number-inline-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.85;
    background: var(--bg-tertiary);
}
.inv-number-inline-btn-readonly:hover,
.inv-number-inline-btn[disabled]:hover {
    border-color: var(--border-color);
}

/* Description of Work input inside preview */
.invoice-desc-of-work-input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    box-sizing: border-box;
}
.invoice-desc-of-work-input:focus {
    outline: none;
    border-color: var(--color-primary);
}


/* Invoice action bar (inside preview, above header) */
.invoice-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 10px;
    flex-wrap: wrap;
}

.invoice-sent-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    background: var(--bg-secondary, #f8f8f8);
}
.invoice-sent-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.invoice-sent-checkbox.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.invoice-sent-checkbox.disabled input[type="checkbox"] {
    cursor: not-allowed;
}
.invoice-sent-checkbox.checked {
    background: var(--color-success, #22a06b);
    color: #fff;
    border-color: var(--color-success, #22a06b);
}

/* Settings gear button in tab bar */
.tab-settings-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    line-height: 1;
    transition: color 0.15s;
    align-self: center;
}
.tab-settings-btn:hover {
    color: var(--text-primary);
}

/* User info in tab bar — matches tab row style */
.tab-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    align-self: center;
}

.tab-user-name {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.tab-logout-btn {
    color: var(--text-secondary);
    font-size: 12px;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    background: transparent;
}

.tab-logout-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Settings modal - left-tabbed layout */
.settings-modal-wide {
    width: 560px;
    max-width: 90vw;
}

.settings-modal-layout {
    display: flex;
    min-height: 300px;
}

.settings-modal-sidebar {
    width: 140px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}

.settings-nav-item:hover {
    color: var(--text-primary);
    background: rgba(74, 158, 255, 0.05);
}

.settings-nav-item.active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    background: rgba(74, 158, 255, 0.08);
}

.settings-modal-content {
    flex: 1;
    min-width: 0;
}

.settings-panel {
    display: none;
    padding: 20px;
}

.settings-panel.active {
    display: block;
}

/* Sidebar subheader (Invoices count) */
.invoice-sidebar-subheader {
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Editable ref-row inputs */
.invoice-ref-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-primary);
    font-size: inherit;
    font-family: inherit;
    padding: 1px 4px;
    transition: border-color 0.15s, background 0.15s;
}
.invoice-ref-input:hover {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}
.invoice-ref-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}
.invoice-ref-input-wide {
    width: 100%;
    min-width: 200px;
}

/* Picker modal components layout */
.inv-picker-components {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}
.inv-picker-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.inv-picker-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Spinner (up/down arrows + value) */
.inv-picker-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.inv-picker-arrow {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-picker-arrow:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.inv-picker-value {
    font-size: 20px;
    font-weight: 700;
    font-family: monospace;
    padding: 4px 8px;
    min-width: 40px;
    text-align: center;
    color: var(--text-primary);
}

/* Preview */
.inv-picker-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-top: 8px;
}
.inv-picker-preview-value {
    font-size: 18px;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-primary);
}
.inv-picker-check {
    font-size: 14px;
}
.inv-picker-custom-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-family: monospace;
}
.inv-picker-custom-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Job list in picker */
.inv-picker-job-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    margin-bottom: 6px;
}
.inv-picker-job-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.inv-picker-job-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}
.inv-picker-job-item:last-child { border-bottom: none; }
.inv-picker-job-item:hover { background: var(--bg-tertiary); }
.inv-picker-job-item.selected {
    background: var(--color-primary);
    color: #fff;
}
.inv-picker-job-display {
    font-size: 14px;
    color: var(--text-primary);
    padding: 6px 0;
}

/* Quick-move popover */
.quick-move-popover {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}
.quick-move-title {
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 12px 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.quick-move-option {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.quick-move-option:hover {
    background: rgba(74, 158, 255, 0.15);
}
.quick-move-job {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* Per-row move button */
.btn-quick-move {
    background: none;
    border: none;
    color: var(--color-primary, #4a9eff);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.btn-quick-move:hover {
    opacity: 1;
}
.invoice-row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

/* Lock state */
.invoice-locked input,
.invoice-locked select,
.invoice-locked textarea {
    pointer-events: none;
    opacity: 0.6;
}
.invoice-locked .btn-remove-row,
.invoice-locked .btn-restore-row,
.invoice-locked .btn-quick-move,
.invoice-locked .invoice-section-actions button {
    pointer-events: none;
    opacity: 0.3;
}

/* Lock/reversed banners */
.invoice-locked-banner,
.invoice-reversed-banner {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    margin: 8px 12px;
}
.invoice-locked-banner {
    background: rgba(255, 152, 0, 0.12);
    color: var(--color-warning);
    border: 1px solid rgba(255, 152, 0, 0.25);
}
.invoice-reversed-banner {
    background: rgba(244, 67, 54, 0.12);
    color: var(--color-danger);
    border: 1px solid rgba(244, 67, 54, 0.25);
}

/* Sidebar badges for locked/reversed */
.invoice-lock-icon {
    font-size: 11px;
    margin-left: 4px;
    opacity: 0.8;
}
.invoice-sidebar-item.reversed-item {
    opacity: 0.55;
}
.invoice-sidebar-item.reversed-item:hover {
    opacity: 0.75;
}
.invoice-sidebar-item.foundation-reversed .invoice-sidebar-item-no {
    text-decoration: line-through;
}

/* ── Invoice Attachments ───────────────────────────────────────────── */
.invoice-attachments-section {
    border-top: 1px solid var(--border-color);
    padding: 10px 12px;
    margin-top: 4px;
    position: relative;
}
.invoice-attach-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 6px;
}
.invoice-attach-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(33, 150, 243, 0.08);
    border: 2px dashed var(--color-primary, #2196F3);
    border-radius: 6px;
    color: var(--color-primary, #2196F3);
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
.invoice-attachments-section.drag-over .invoice-attach-drop-overlay {
    display: flex;
}
.invoice-attachments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.invoice-attach-upload-btn {
    cursor: pointer;
    font-size: 12px !important;
    padding: 2px 8px !important;
}
.invoice-attach-upload-btn.uploading {
    opacity: 0.5;
    pointer-events: none;
}
.invoice-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.invoice-attach-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
}
.invoice-attach-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    font-size: 12px;
    transition: background 0.15s;
}
.invoice-attach-item:hover {
    background: var(--bg-tertiary);
}
.invoice-attach-item.dragging {
    opacity: 0.4;
}
.invoice-attach-grip {
    cursor: grab;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.invoice-attach-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.invoice-attach-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-primary);
    text-decoration: none;
}
.invoice-attach-name:hover {
    text-decoration: underline;
}
.invoice-attach-size {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}
.invoice-attach-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.invoice-attach-delete:hover {
    color: var(--color-danger);
}

/* ============================================================================
   Tab Info Cards — reusable across all tabs
   ============================================================================ */
.tab-info-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.tab-info-row {
    display: grid;
    gap: 12px;
}

.tab-info-row-2 { grid-template-columns: repeat(2, 1fr); }
.tab-info-row-3 { grid-template-columns: repeat(3, 1fr); }
.tab-info-row-4 { grid-template-columns: repeat(4, 1fr); }

/* CTC info row: WS card is capped — dots wrap inside, never push the chart over.
   minmax(0, 480px) lets the column shrink on narrow screens but never exceed 480px. */
.ctc-info-row { grid-template-columns: minmax(0, 480px) 1fr; }

@media (max-width: 768px) {
    .tab-info-row-2, .tab-info-row-3, .tab-info-row-4,
    .ctc-info-row {
        grid-template-columns: 1fr;
    }
}

/* WS completion pills — vertical stack */
.ctc-ws-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.ctc-ws-pill {
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.ctc-ws-pm-label {
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 28px;
}

/* Job pips — wrap horizontally within each pill */
.ctc-ws-pips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
}

.ctc-ws-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(5ch + 8px);
    height: 18px;
    padding: 0 4px;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    font-family: monospace;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-primary);
    flex: 0 0 auto;
}
.ctc-ws-dot:hover { filter: brightness(1.18); }
.ctc-ws-dot-overridden {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
}

/* Sticky popover spawned by clicking a widget dot. Visually matches the
   hover tooltip (.ctc-ws-tooltip) but interactive. */
.ctc-ws-popover {
    position: absolute;
    z-index: 1000;
    background: rgba(30,30,30,0.97);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ctc-ws-popover-title {
    margin-bottom: 4px;
}
.ctc-ws-popover-rule {
    margin-bottom: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
}
.ctc-ws-popover-check {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}
.ctc-ws-popover-check input[type="checkbox"] {
    margin: 0; cursor: pointer;
}

.tab-info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
}

.tab-info-card-header {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tab-info-card-value {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
}

.tab-info-card-sub {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

/* Bucket-style card with animated fill bar */
.tab-info-card-bucket {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.tab-info-card-bucket .tab-info-card-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: height 0.4s ease;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.tab-info-card-bucket .tab-info-card-inner {
    position: relative;
    z-index: 1;
    padding: 12px 16px;
}

/* Chart container inside info cards */
.tab-info-chart {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    overflow: hidden;
}

.tab-info-chart .tab-info-card-header {
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* Wrapper removes canvas from flow so it can't drive grid row height */
.chart-canvas-wrap {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
}

.chart-canvas-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.chart-footnote {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Split metric (Service / Contract / Total) for billing info cards */
.split-metric {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
}
.split-metric > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    flex: 1 1 0;
}
.split-metric-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.split-metric-value {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

/* Side-by-side charts for Total Billed per Job */
.billing-chart-split {
    flex: 1 1 0;
    display: flex;
    gap: 12px;
    min-height: 0;
}
.billing-chart-half {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.billing-chart-subtitle {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* CTC % Complete chart — content-driven height with scroll */
.ctc-pct-chart {
    min-height: 0;
}

.ctc-pct-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ctc-pct-zero {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 6px;
    margin-top: 6px;
}

.ctc-pct-zero:empty {
    display: none;
}

/* ============================================================================
   Dashboard Overview Tab
   ============================================================================ */
.overview-section {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.overview-section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.overview-section-content {
    min-height: 60px;
}

/* Skeleton loader for lazy-loading sections */
.skeleton-loader {
    display: flex;
    gap: 12px;
}

.skeleton-card {
    flex: 1;
    height: 80px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ===== Financials Tab (Phase 0.9) ===== */

.fin-date-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fin-date-controls label {
    margin: 0 6px 0 8px;
}

.fin-date-controls label {
    font-size: 12px;
    color: var(--text-muted);
}

.fin-date-controls input[type="month"] {
    font-size: 12px;
    padding: 3px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    color-scheme: dark;
}

.fin-chev {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 1px 12px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    height: 22px;
}

.fin-chev:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.fin-date-sep {
    width: 12px;
}

/* Inner sub-tabs */
.fin-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 12px;
}

.fin-sub-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.fin-sub-tab:hover {
    color: var(--text-primary);
}

.fin-sub-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* GL History summary bar */
.fin-gl-summary {
    display: flex;
    gap: 20px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.financials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.financials-table th,
.financials-table td {
    padding: 4px 10px;
    white-space: nowrap;
}

.financials-table thead th {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 12px;
    text-align: right;
}

/* Floating-thead clone overrides: the financials tables carry the .data-table class
   so Dashboard.FloatingHeaders pins their column headers below the filter section as
   the page scrolls. Re-assert the financials thead alignment/padding, which the
   generic `.floating-thead .data-table th` rule (left-aligned, 12px pad) would clobber. */
.floating-thead .financials-table th {
    padding: 4px 10px;
    text-align: right;
    font-size: 12px;
}
.floating-thead .financials-table th:first-child,
.floating-thead .financials-table .fin-row-label {
    text-align: left;
}

.financials-table thead th:first-child {
    text-align: left;
    width: 220px;
    min-width: 180px;
}

.fin-row-label {
    text-align: left;
    color: var(--text-secondary);
    font-size: 13px;
}

.fin-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    /* Floor width per month column: a period longer than ~12 months (or a viewport
       too narrow to fit them) overflows the table-container and scrolls horizontally
       instead of compressing the columns. Fewer columns still fill the width. */
    min-width: 90px;
}

/* Projected columns — muted styling */
.fin-projected {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
}

.fin-est-badge {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 2px;
}

/* Section headers */
.fin-section-header td {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    padding-top: 8px;
    border-bottom: 1px solid var(--border-color);
}

.fin-clickable {
    cursor: pointer;
}

.fin-clickable:hover td {
    background: var(--bg-tertiary);
}

.fin-expand-icon {
    font-size: 10px;
    margin-right: 4px;
    color: var(--text-muted);
}

/* Indented sub-rows */
.fin-indent .fin-row-label {
    padding-left: 24px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Subtotal rows */
.fin-subtotal td {
    font-weight: 600;
    border-top: 1px solid var(--border-color);
}

/* Grand total rows */
.fin-total td {
    font-weight: 700;
    font-size: 14px;
    border-top: 2px solid var(--border-color);
}

.fin-oi td {
    color: var(--color-primary);
}

/* Percentage rows */
.fin-pct .fin-row-label {
    padding-left: 24px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}

.fin-pct .fin-value {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}

/* Spacer row */
.fin-spacer td {
    padding: 4px 0;
    border: none;
}

/* Total column (annual sum) */
.fin-total-col {
    font-weight: 600;
    border-left: 2px solid var(--border-color);
}

/* Balance Sheet — balance check row + explainer card */
.fin-balance-check-row td {
    font-weight: 600;
    border-top: 1px dashed var(--border-color);
}
.fin-balance-check-row .fin-row-label {
    font-style: italic;
    color: var(--text-muted);
}
.fin-bs-check-ok {
    color: var(--color-success, #4caf50);
}
.fin-bs-check-bad {
    color: var(--color-danger, #e53935);
    font-weight: 700;
}
.fin-balance-check-card {
    margin: 12px 0 4px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary, var(--text-muted));
}
.fin-balance-check-card.fin-balance-check-ok {
    border-left: 3px solid var(--color-success, #4caf50);
}
.fin-balance-check-card.fin-balance-check-error {
    border-left: 3px solid var(--color-danger, #e53935);
}

/* Balance Sheet account drill-down */
.fin-bs-caret {
    cursor: pointer;
    display: inline-block;
    width: 22px;
    text-align: center;
    margin-right: 4px;
    padding: 2px 2px;
    border-radius: 4px;
    color: var(--text-secondary, var(--text-muted));
    font-size: 15px;
    line-height: 1;
    user-select: none;
}
.fin-bs-caret:hover {
    color: var(--text-primary);
    background: var(--bg-hover, rgba(255, 255, 255, 0.08));
}
.fin-bs-acct-row td {
    font-size: 12px;
    color: var(--text-muted);
    border: none;
    padding-top: 1px;
    padding-bottom: 1px;
}
.fin-bs-acct-row .fin-row-label {
    padding-left: 40px;
    font-style: italic;
}

/* Assumptions sub-tab */
.fin-asm-wrap {
    padding: 8px 16px 24px;
    max-width: 980px;
}

.fin-asm-intro {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

.fin-asm-section {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.fin-asm-section h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fin-asm-subhead {
    margin-top: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.fin-asm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.fin-asm-row label {
    flex: 0 0 320px;
    font-size: 12px;
    color: var(--text-secondary);
}

.fin-asm-row input {
    flex: 0 0 180px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fin-asm-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px 10px;
    margin: 6px 0;
}

.fin-asm-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fin-asm-cell label {
    font-size: 11px;
    color: var(--text-muted);
}

.fin-asm-cell input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 100%;
    box-sizing: border-box;
}

.fin-asm-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 12px;
}

.fin-asm-table th {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
}

.fin-asm-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.fin-asm-table input,
.fin-asm-table select {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fin-asm-table select {
    text-align: left;
}

/* Method toggle in toolbar */
.fin-method-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 22px;
}

.fin-method-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
    border-right: 1px solid var(--border-color);
}

.fin-method-btn:last-child {
    border-right: none;
}

.fin-method-btn.active {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

.fin-help-btn {
    font-weight: 700;
    width: 22px;
    padding: 0;
    text-align: center;
}

/* IS legend bar */
.fin-is-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.fin-method-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

/* Per-tab "?" help button on the legend line */
.fin-legend-help {
    margin-left: auto;
    cursor: pointer;
    width: 22px;
    height: 22px;
    line-height: 20px;
    padding: 0;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex: 0 0 auto;
}
.fin-legend-help:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--bg-hover, rgba(255, 255, 255, 0.08));
}

/* Clickable / overridden cells */
.fin-cell-clickable {
    cursor: pointer;
}

.fin-cell-clickable:hover {
    background: rgba(255, 200, 0, 0.06);
    outline: 1px dashed var(--color-primary);
}

.fin-cell-overridden {
    background: rgba(255, 193, 7, 0.13) !important;
    color: rgb(255, 213, 79) !important;
    font-style: italic;
    position: relative;
}

.fin-cell-overridden::before {
    content: "•";
    position: absolute;
    top: 2px;
    right: 4px;
    color: rgb(255, 193, 7);
    font-size: 10px;
}

/* Modal (override editor + help panel) */
.fin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.fin-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.fin-help-modal {
    width: 720px;
}

.fin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.fin-modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.fin-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.fin-modal-close:hover {
    color: var(--text-primary);
}

.fin-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
}

.fin-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.fin-modal-row label {
    flex: 0 0 130px;
    font-size: 12px;
    color: var(--text-secondary);
}

.fin-modal-row input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.fin-modal-readonly {
    flex: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.fin-modal-help {
    margin-top: 12px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--color-primary);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    border-radius: 2px;
}

.fin-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Help panel content */
.fin-help-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.fin-help-body h4 {
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
}

.fin-help-body h4:first-child {
    margin-top: 0;
}

.fin-help-body p {
    margin: 6px 0;
}

.fin-help-body ul {
    margin: 6px 0;
    padding-left: 20px;
}

.fin-help-body li {
    margin: 3px 0;
}

.fin-help-body code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 11px;
}

/* Pipeline table */
.fin-pipeline-table {
    table-layout: auto;
}

.fin-pipeline-table input,
.fin-pipeline-table select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.fin-pipeline-table td {
    padding: 4px;
}

/* ============================================================================
   Job Pills
   ============================================================================ */
/* Refresh icon animation */
.refresh-icon { display: inline-block; }
#filter-bar-refresh.refreshing .refresh-icon {
    animation: spin .8s linear infinite;
}
#filter-bar-refresh.refreshing { pointer-events: none; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Sort button group — mirrors expanded pill layout */
.th-sort-group {
    display: inline-flex; align-items: center;
    width: 100%; height: 30px;
}
.th-sort-btn {
    cursor: pointer; color: var(--text-primary);
    font-weight: 600; font-size: 12px;
    transition: color .15s; white-space: nowrap;
    padding: 0; line-height: 30px; position: relative;
}
.th-sort-btn::after {
    content: '⇅'; font-size: 8px; opacity: .4; margin-left: 2px;
    vertical-align: middle;
}
.th-sort-btn:hover { color: var(--text-primary); }
.th-sort-btn:hover::after { opacity: .7; }
.th-sort-num { width: 5ch; text-align: right; flex-shrink: 0; font-family: monospace; padding-left: 6px; }
.th-sort-markers { width: 10px; flex-shrink: 0; }
.th-sort-name { flex: 1; min-width: 0; text-align: left; }
.th-sort-mid { flex-shrink: 0; padding: 0 2px; }
.th-sort-cust { flex-shrink: 0; text-align: right; margin-left: auto; }
.th-sort-pm { width: 32px; flex-shrink: 0; text-align: center; padding: 0 8px; }

/* PM color settings */
.pm-color-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 4px;
}
.pm-color-row:hover { background: rgba(255,255,255,.04); }
.pm-color-label { width: 36px; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pm-color-swatch {
    width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
}
.pm-color-select {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 11px; padding: 2px 4px;
    border-radius: 3px; cursor: pointer;
}

/* Reusable hatch pattern */
.hatch-bg-gray { background-image: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(128,128,128,.10) 2.5px, rgba(128,128,128,.10) 4px); }
.hatch-bg-warn { background-image: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(255,152,0,.22) 2.5px, rgba(255,152,0,.22) 4px); }
.hatch-bg-danger { background-image: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(244,67,54,.22) 2.5px, rgba(244,67,54,.22) 4px); }

/* ---- Compact pill (Level 1) ---- */
.job-pill {
    display: inline-flex; align-items: stretch;
    width: 240px; height: 30px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap; user-select: none;
    border: none; overflow: hidden;
    transition: filter .12s; flex-shrink: 0;
    vertical-align: middle; position: relative;
    background: none;
}
.job-pill:hover { filter: brightness(1.18); }
.pill-main {
    display: flex; align-items: center;
    padding: 3px 0 3px 6px; flex: 1; gap: 4px;
    overflow: hidden; min-width: 0;
    border-radius: 2px 0 0 2px;
    border: 0.5px solid transparent;
    border-right: none;
}
.pill-jobno {
    font-variant-numeric: tabular-nums;
    width: 5ch; text-align: right; flex-shrink: 0; font-size: 13px;
    font-family: monospace;
    color: var(--text-primary);
}
.pill-markers {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    width: 10px; flex-shrink: 0; font-weight: 700; line-height: 1; opacity: .75;
    font-size: 8px; gap: 0; justify-content: center;
}
.pill-marker-s { }
.pill-marker-t { font-size: 7px; }
.pill-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    font-size: 12px; color: var(--text-secondary);
    text-transform: none;
}
.pill-alarm-dots {
    display: flex; gap: 2px; align-items: center; flex-shrink: 0;
    width: 10px; justify-content: center;
}
.pill-alarm-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.pill-graph {
    display: flex; flex-direction: column; width: 32px; height: 18px;
    flex-shrink: 0; border-radius: 2px; overflow: hidden;
    background: #111; gap: 1px;
    padding: 1px;
}
.pill-graph-row {
    display: flex; height: 50%; position: relative; border-radius: 1px;
    background: rgba(255,255,255,.06);
}
.pill-graph-seg { height: 100%; flex-shrink: 0; border-radius: 1px; }
.pill-graph-dot {
    width: 3px; height: 3px; border-radius: 50%;
    position: absolute; top: 50%; transform: translateY(-50%);
}
.pill-pm {
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    flex-shrink: 0; min-width: 32px;
    border-radius: 0 99px 99px 0; align-self: stretch;
}
.job-pill-fallback {
    font-size: 13px; color: var(--text-secondary);
}
/* Consistent pill column width across all tables */
td[data-column="job_no"] {
    min-width: 400px;
    padding-right: 4px !important;
}

/* Problem pills */
.prob-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; height: 30px; box-sizing: border-box;
    border-radius: 2px; border: 0.5px solid transparent;
    font-size: 11px; font-weight: 600;
    cursor: default; white-space: nowrap; user-select: none;
    vertical-align: middle; position: relative;
}
.prob-pill-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.prob-pill-count { font-variant-numeric: tabular-nums; }
.prob-pill-tooltip {
    display: none; position: fixed; z-index: 1000;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 8px 10px;
    min-width: 280px; max-width: 400px; max-height: 400px;
    overflow-y: auto; box-shadow: var(--shadow-lg);
    white-space: normal;
}
.prob-pill:hover .prob-pill-tooltip { display: block; }
.prob-tip-item {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 4px 0; border-bottom: 1px solid var(--border-color);
    font-size: 12px; color: var(--text-primary);
}
.prob-tip-item:last-child { border-bottom: none; }
.prob-tip-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.prob-tip-sev { font-size: 9px; font-weight: 700; flex-shrink: 0; }
.prob-tip-msg { flex: 1; }

/* Problem list (card/job page) */
.prob-list { }
.prob-list-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0; font-size: 11px;
}
.prob-list-msg { color: var(--text-secondary); }

/* Status colors — same opaque dark tones in compact + expanded + card title */
.jp-A .pill-main { background: #1f2e3f; color: #5aaeff; border-color: rgba(74,158,255,.40); }
.jp-I .pill-main { background: #2b2418; color: #ffb74d; border-color: rgba(255,152,0,.38); }
.jp-C .pill-main { background: #222; color: #909090; border-color: rgba(128,128,128,.30);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(128,128,128,.08) 3px, rgba(128,128,128,.08) 5px); }
.jp-O .pill-main { background: #251f2e; color: #b57cf7; border-color: rgba(156,70,209,.36); }

/* Standalone PM pill */
.pm-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; border-radius: 99px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    white-space: nowrap; user-select: none; vertical-align: middle;
}

/* ---- Hover-expanded pill (Level 2) ---- */
.pill-hover-wrap {
    position: fixed; z-index: 10000;
    pointer-events: auto;
    margin: 0; padding: 0; line-height: 0;
    /* Flex aligns the inline-flex child to the wrap's top edge. Without this,
       block layout + the child's vertical-align: middle pushes the visible
       pill several px below `top: rect.top`, partially exposing the
       compact pill underneath. */
    display: flex;
}
.job-pill-expanded {
    display: inline-flex; align-items: stretch;
    width: 100%; min-width: 400px; height: 30px;
    font-size: 13px; font-weight: 500;
    white-space: nowrap; user-select: none;
    overflow: visible; border: none; background: none;
    cursor: pointer; flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.job-pill-expanded .pill-main {
    padding: 3px 0 3px 6px; flex: 1; gap: 4px;
    overflow: visible;
    border-radius: 2px 0 0 2px;
    border: 0.5px solid transparent; border-right: none;
}
.job-pill-expanded .pill-name { display: none; }
/* Name + Customer truncation order: when the pill is forced narrower than
   its natural content width, the customer name shrinks first (flex-shrink
   9999 ≫ name's 1, so the algorithm pulls almost all the overflow off the
   customer). Once the customer's width reaches 0 (ellipsis disappears),
   the job name starts truncating. The 4px gap on .pill-main keeps at least
   one char of breathing room between the two when both are visible. */
.pill-exp-name {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px; color: var(--text-secondary);
}
.pill-exp-cust {
    flex-shrink: 9999;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 12px; opacity: .6;
    margin-left: auto;
}
.pill-exp-phase {
    padding: 1px 5px; border-radius: 8px; font-size: 9px; font-weight: 600;
    background: rgba(255,255,255,.08); flex-shrink: 0;
}
.pill-exp-drift {
    padding: 1px 5px; border-radius: 8px; font-size: 9px; font-weight: 600;
    background: rgba(244,67,54,.15); color: #ef5350; flex-shrink: 0;
}

/* ============================================================================
   Invoice pill (Level 1 + 2) and Invoice Card (Level 3)
   ============================================================================ */
.inv-pill, .inv-pill-expanded {
    display: inline-flex; align-items: center;
    height: 24px; font-size: 11px;
    /* Fully rounded pill shape (half the height). */
    border-radius: 12px;
    border: 0.5px solid transparent;
    overflow: hidden; cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap; user-select: none;
    vertical-align: middle;
    color: var(--text-primary);
    flex-shrink: 0;
    /* Opaque fallback so translucent rgba inline overrides never blend with
       the underlying row/compact pill. Subsequent inline style="background:..."
       wins per normal CSS specificity. */
    background-color: var(--bg-secondary);
}

/* Keep the full 220px invoice pill intact when the viewport narrows. The
   default `overflow: hidden` on .aging-fixed-cols td is what was clipping
   the pill; override ONLY on cells that contain the pill so ellipsis still
   works for customer / job_name / etc. Requires :has() — Chrome 105+,
   Safari 15.4+, Firefox 121+. */
.aging-fixed-cols td:has(> .inv-pill),
.aging-fixed-cols td:has(> .inv-pill-expanded) {
    overflow: visible;
    min-width: 230px;
}
.inv-pill { width: 220px; }
.inv-pill-expanded {
    /* Matches .invoice-card min-width so the expanded pill appears to stay
       put when the card opens — same DOM-continuity trick job-pill uses. */
    width: 720px;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* When the expanded pill is the card's sticky title strip, drop the floating
   shadow and fill the card's full width. Top corners stay rounded (matching
   the pill's 12px) so the card looks like the pill opened downward; bottom
   corners go flat to seam into the card body. */
.invoice-card-title > .inv-pill-expanded {
    width: 100% !important;
    box-shadow: none;
    border-radius: 12px 12px 0 0;
}
.invoice-card-title > .inv-pill-expanded .pill-month {
    border-radius: 12px 0 0 0;
}
/* No hover brightness filter — keeps pill color identical across compact,
   floating expanded, and card-title-bar renderings. */
.inv-pill > *, .inv-pill-expanded > * {
    height: 100%;
    display: inline-flex; align-items: center;
    padding: 0 6px;
}
.inv-pill .pill-invno, .inv-pill-expanded .pill-invno {
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 500;
    text-align: right; justify-content: flex-end;
    flex: 0 0 auto; min-width: 5ch;
    padding: 0 4px 0 8px;
}
.inv-pill .pill-amount, .inv-pill-expanded .pill-amount {
    font-variant-numeric: tabular-nums;
    text-align: right; justify-content: flex-end;
    flex: 1 1 auto; min-width: 0;
    color: var(--text-secondary);
}
/* In the expanded pill the description takes the flex space — amount shrinks
   to natural width so the description can occupy the rest of the row. */
.inv-pill-expanded .pill-amount {
    flex: 0 0 auto;
}
.inv-pill .pill-amount.neg, .inv-pill-expanded .pill-amount.neg { color: #e57373; }
.inv-pill .pill-amount.muted, .inv-pill-expanded .pill-amount.muted { color: var(--text-muted); opacity: .6; }
.inv-pill .pill-waiver-seg, .inv-pill-expanded .pill-waiver-seg {
    flex: 0 0 22px; justify-content: center;
    padding: 0 2px;
}
.inv-pill-expanded .pill-desc {
    flex: 1 1 auto; min-width: 0;
    font-size: 11px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis;
    padding: 0 8px;
    justify-content: flex-start;
    opacity: .82;
}
.inv-pill-expanded .pill-days {
    font-variant-numeric: tabular-nums;
    font-size: 10px; color: var(--text-muted);
    text-align: right; justify-content: flex-end;
    flex: 0 0 auto; min-width: 4ch;
    padding: 0 2px;
}
.inv-pill .pill-month, .inv-pill-expanded .pill-month {
    flex: 0 0 auto; min-width: 56px;
    justify-content: center;
    font-size: 10px; font-weight: 600;
    letter-spacing: .02em;
    color: rgba(0,0,0,0.72);
    /* Month is the LEFT cap — divider on the right side separates it from
       the pill body. Inline style="border-right-color:..." sets the divider tint. */
    border-right: 1px solid transparent;
    padding: 0 10px;
    align-self: stretch;
}
.inv-pill .pill-waiver-badge, .inv-pill-expanded .pill-waiver-badge {
    display: inline-flex; align-items: center; justify-content: center;
}
.inv-pill-fallback {
    font-size: 11px; color: var(--text-muted);
    font-family: monospace;
}

/* Invoice card shell (matches job-card pattern) */
.invoice-card-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 11;
    /* Transparent click-catcher — matches .job-card-overlay. The underlying
       page stays fully visible through the overlay. */
}
.invoice-card {
    position: absolute; z-index: 12;
    min-width: 720px; max-width: 95vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    /* Top corners match the pill's 12px radius so the title bar seams into the
       card; bottom corners slightly smaller for a grounded card shape. */
    border-radius: 12px 12px 6px 6px;
    box-shadow: 0 10px 20px -4px rgba(0,0,0,.5);
    color: var(--text-primary);
    font-size: 12px;
    max-height: 80vh; overflow: hidden auto;
}
.invoice-card-title {
    position: sticky; top: 0; z-index: 1;
    margin: 0 -1px;
    /* Same reason as .pill-hover-wrap: flex avoids the baseline offset that
       would otherwise leave a sliver of the compact pill exposed at the top. */
    display: flex; line-height: 0;
}
.invoice-card-body {
    padding: 10px 14px 12px;
}

/* Key Facts — two-column grid of label/value pairs. */
.invcard-keyfacts {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    column-gap: 24px;
    row-gap: 3px;
    font-size: 11px;
    margin-bottom: 10px;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--border-color);
}
.invcard-keyfacts .kf-label {
    color: var(--text-secondary);
}
.invcard-keyfacts .kf-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-align: right;
}

/* Invoice card footer — compact job pill on the left, Key button on the right. */
.invcard-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--border-color);
    gap: 10px;
}
.invcard-footer-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.invcard-footer-right { display: flex; align-items: center; gap: 8px; }

/* Inert pills — rendered inside a reciprocally-opened card to prevent going
   more than 2 layers deep (invoice → job → invoice, or vice versa). They
   keep the original card stacking intact; hover and click do nothing. */
.job-pill-inert, .inv-pill-inert {
    cursor: default;
    opacity: .58;
    pointer-events: none;   /* belt-and-suspenders: also blocks hover events */
}
.job-pill-inert:hover, .inv-pill-inert:hover { filter: none; }

/* ============================================================================
   Job Card (Level 3)
   ============================================================================ */
.job-card-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 11;
}
.job-card {
    position: absolute; z-index: 12;
    min-width: 400px; max-width: 90vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 20px -4px rgba(0,0,0,.5);
    color: var(--text-primary);
    font-size: 12px;
    max-height: 80vh; overflow-y: auto;
}
.job-card-title-strip {
    position: sticky; top: 0; z-index: 1;
    margin: 0 -1px;
}
.job-card-body {
    padding: 6px 14px 12px;
}

/* Lifecycle graph (card scale) */
.lc-graph { margin-bottom: 10px; }
.lc-row {
    display: flex; align-items: center; height: 22px; margin-bottom: 1px;
}
.lc-label {
    width: 42px; font-size: 9px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
    text-align: right; padding-right: 6px;
}
.lc-track {
    flex: 1; height: 18px; background: rgba(255,255,255,.04);
    border-radius: 2px; overflow: hidden; display: flex; position: relative;
}
.lc-seg {
    height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 500; color: rgba(255,255,255,.7);
    overflow: hidden; white-space: nowrap; position: relative;
    min-width: 0;
}
.lc-seg-label { padding: 0 3px; }
.lc-track-label {
    position: absolute; left: 4px; top: 0; bottom: 0;
    display: flex; align-items: center;
    font-size: 9px; font-weight: 500; color: rgba(255,255,255,.8);
    pointer-events: none; z-index: 1;
}
.lc-earned-bar { background: rgba(74,158,255,.50); }
.lc-billed-bar { background: rgba(74,158,255,.50); }
.lc-ret-bar { background: rgba(96,125,139,.45); }
.lc-paid-bar {
    background: rgba(128,128,128,.25);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(128,128,128,.12) 2px, rgba(128,128,128,.12) 3.5px);
}
.lc-graph-header {
    display: flex; justify-content: flex-end; align-items: baseline;
    font-size: 11px; color: var(--text-muted); margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}
.lc-delta-under {
    background: rgba(255,152,0,.12);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(255,152,0,.22) 2.5px, rgba(255,152,0,.22) 4px);
    border: 1px solid rgba(255,152,0,.35);
}
.lc-delta-over {
    background: rgba(244,67,54,.12);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 2.5px, rgba(244,67,54,.22) 2.5px, rgba(244,67,54,.22) 4px);
    border: 1px solid rgba(244,67,54,.35);
}

/* Graph segment popover */
.lc-seg { position: relative; }
.lc-popover {
    position: absolute; z-index: 10;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 6px 8px;
    font-size: 11px; color: var(--text-primary);
    white-space: pre-line; pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    bottom: calc(100% + 4px); left: 0;
}


/* Lifecycle phase bar */
.jc-phase-bar {
    display: flex; align-items: center; gap: 0;
    padding: 4px 0; border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px; flex-wrap: nowrap;
    justify-content: center;
}
.jc-phase {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted);
    white-space: nowrap; padding: 0 2px;
}
.jc-phase.past { color: var(--text-secondary); }
.jc-phase.active { color: var(--color-primary); }
.jc-phase-dot {
    font-size: 10px; color: var(--text-muted); padding: 0 3px;
}
.jc-phase-dot.past { color: var(--text-secondary); }

/* Key facts — two-column grid */
.jc-keyfacts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 20px; margin-bottom: 10px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border-color);
}
.jc-kf-col { }
.jc-kf-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11px; padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.jc-kf-label { color: var(--text-muted); }
.jc-kf-val { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }

/* Links column — vertical stack of action links, occupying the left cell
   of the bottom keyfacts row (where cost dates used to live). */
.jc-links {
    display: flex; flex-direction: column;
    gap: 2px; padding: 2px 0;
}
.jc-links .jc-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-primary);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.jc-links .jc-link:hover { text-decoration: underline; }
.jc-link-favicon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    object-fit: contain;
    display: inline-block;
}

/* Alarms & problems section */
.jc-alarms-section {
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.jc-alarms {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-bottom: 8px;
}
.jc-alarm {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 8px;
    font-size: 10px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.08);
}

/* Invoices list */
.jc-invoices { margin-bottom: 8px; }
.jc-invoices-title {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 4px;
}
.jc-inv-list {
    display: flex; flex-wrap: wrap; gap: 4px;
}

/* Problems list */
.jc-problems { margin-bottom: 8px; }
.jc-problem-row {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 11px; padding: 2px 0;
}
.jc-problem-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0; margin-top: 4px;
}
.jc-problem-msg { color: var(--text-secondary); }

/* Footer */
.job-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border-color);
    padding: 8px 14px;
}
.job-card-footer a {
    color: var(--color-primary); text-decoration: none;
    font-size: 12px;
}
.job-card-footer a:hover { text-decoration: underline; }
.job-card-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 18px; line-height: 1;
    padding: 0 4px;
}
.job-card-close:hover { color: var(--text-primary); }

/* ============================================================================
 * Data Query Tab — natural-language query against Foundation data
 * ============================================================================ */

.data-query-layout {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px; max-width: 1200px;
}
.dq-prompt-row {
    display: flex; gap: 10px; align-items: flex-start;
}
.dq-prompt {
    flex: 1; min-height: 70px; resize: vertical;
    font-family: inherit; font-size: 14px; line-height: 1.5;
    padding: 10px 12px;
}
.dq-prompt-actions {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 92px;
}
.dq-status {
    font-size: 13px; color: var(--text-secondary);
    padding: 6px 10px; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.dq-error {
    font-size: 13px; color: var(--color-danger);
    padding: 8px 12px; background: rgba(244, 67, 54, 0.08);
    border: 1px solid var(--color-danger); border-radius: var(--radius-sm);
    white-space: pre-wrap;
}
.dq-result {
    display: flex; flex-direction: column; gap: 14px;
}
.dq-summary-block {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 12px 14px;
}
.dq-summary-header {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.dq-summary-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 600;
}
.dq-source-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; text-transform: lowercase;
}
.dq-source-badge-app { background: rgba(76, 175, 80, 0.18); color: #6fcf73; border: 1px solid rgba(76, 175, 80, 0.4); }
.dq-source-badge-sql { background: rgba(255, 152, 0, 0.18); color: #ffb74d; border: 1px solid rgba(255, 152, 0, 0.4); }
.dq-source-badge-mixed { background: rgba(74, 158, 255, 0.18); color: #7fb8ff; border: 1px solid rgba(74, 158, 255, 0.4); }
.dq-stale-pill {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: rgba(255, 152, 0, 0.12); color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.3);
}
/* Subtle hint that the answer came from the 10-minute result cache.
   Lower-key than the source badge — same row, half the visual weight. */
.dq-cached-pill {
    font-size: 10px; padding: 1px 7px; border-radius: 9px;
    background: transparent; color: var(--text-muted);
    border: 1px dashed var(--border-color);
    text-transform: lowercase; letter-spacing: 0.3px;
}
.dq-rerun-btn { margin-left: auto; }
.dq-summary {
    font-size: 14px; color: var(--text-primary);
    white-space: pre-wrap; line-height: 1.55;
}
.dq-notes {
    margin-top: 8px; font-size: 12px; color: var(--text-secondary);
    border-left: 3px solid var(--border-color); padding-left: 10px;
    white-space: pre-wrap;
}
.dq-results-block {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 10px 12px;
}
.dq-results-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.dq-results-count {
    font-size: 12px; color: var(--text-muted);
}
.dq-results-table { width: 100%; }
.dq-trace-block { font-size: 12px; }
.dq-trace-toggle {
    background: none; border: none; color: var(--color-primary);
    cursor: pointer; padding: 4px 0; font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
}
.dq-trace-toggle:hover { text-decoration: underline; }
.dq-trace-caret { font-size: 10px; }
.dq-trace-body {
    margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
}
.dq-trace-entry {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 8px 10px;
}
.dq-trace-head {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 12px;
}
.dq-trace-num { color: var(--text-muted); }
.dq-trace-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-primary); font-weight: 600; }
.dq-trace-meta { color: var(--text-muted); }
.dq-trace-err { color: var(--color-danger); font-style: italic; }
.dq-trace-args {
    margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: var(--text-secondary); word-break: break-all;
}
.dq-trace-sql {
    margin-top: 6px; padding: 8px 10px;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--text-primary);
    white-space: pre-wrap; overflow-x: auto;
}
.dq-trace-empty { color: var(--text-muted); font-style: italic; }

/* ============================================================================
   Quick Lookup modal
   ============================================================================ */
/* Quick Lookup icon: same size and color as the gear; sits flush against it.
   Only the search button absorbs the auto-margin push so the gear sits
   immediately to its right with no gap between them. */
.tab-quicklookup-btn { margin-left: auto; padding-right: 4px; }
#settings-tab-btn { margin-left: 0; padding-left: 4px; }
/* Normalize all three header / filter-bar action icons to the same visual
   size (16px). Without explicit line-height the unicode glyphs render at
   different heights than the SVG. */
.tab-settings-btn { font-size: 16px; line-height: 1; }
.refresh-icon { font-size: 16px; line-height: 1; }
.tab-icon-svg {
    width: 16px;
    height: 16px;
    display: block;
}
.quick-lookup-overlay {
    /* Plain backdrop — modal is positioned via JS (top-right under the icon
       when there's room, clamped otherwise). */
    display: block;
    background: rgba(0, 0, 0, 0.35);
}
.quick-lookup-modal {
    position: fixed;
    /* Pill min-width is 400px and grows with content; reserve room for the
       two copy buttons + gaps + body padding so a typical row fits without
       horizontal scroll. The results container scrolls horizontally on
       unusually long names as a fallback. */
    width: 880px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}
.quick-lookup-modal .report-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.quick-lookup-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.quick-lookup-search-row input { flex: 1; }
.quick-lookup-clear-link {
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}
.quick-lookup-clear-link:hover {
    color: var(--text-primary);
    text-decoration: underline;
}
.quick-lookup-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Allow horizontal scroll when a pill + buttons exceed the row width
       (rare, only for unusually long names). */
    overflow-x: auto;
}
.quick-lookup-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quick-lookup-row .job-pill-expanded {
    /* Match Job List: every pill is the same width (the row's available
       space), regardless of content length. Buttons sit immediately to
       the right. */
    flex: 1 1 0;
    min-width: 400px;
}
.quick-lookup-copy-btn {
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    /* Min-widths large enough to hold "Copied" so the button doesn't
       resize when the label swaps. */
    min-width: 56px;
}
.quick-lookup-copy-btn--num-name { min-width: 84px; }
.quick-lookup-copy-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.quick-lookup-copy-btn.copied {
    background: var(--color-success, #4caf50);
    color: #fff;
    border-color: transparent;
}
.quick-lookup-empty {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 8px 4px;
}

/* Job/Invoice cards opened on top of the Quick Lookup modal must render
   above the modal backdrop (z-index 3000) without breaking the rest of the
   stacking. Bump only when the body is in quick-lookup-open state. */
body.quick-lookup-open .job-card-overlay { z-index: 3100; }
body.quick-lookup-open .job-card { z-index: 3101; }
body.quick-lookup-open .invoice-card-overlay { z-index: 3100; }
body.quick-lookup-open .invoice-card { z-index: 3101; }

/* ============================================================================
   Purchase Order Generator
   ============================================================================ */
.po-sidebar-header { flex-direction: column; align-items: stretch; gap: 8px; position: relative; }
.po-filter-block { display: flex; flex-direction: column; gap: 4px; }
.po-filter-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.po-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.po-filter-empty { color: var(--text-muted); font-size: 12px; }
.po-pill {
    padding: 2px 9px; font-size: 11px; border-radius: 11px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-color); color: var(--text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.po-pill.active { background: rgba(74, 158, 255, 0.14); color: var(--color-primary); border-color: var(--color-primary); }
.po-sidebar-header .btn-refresh-sidebar { position: absolute; top: 0; right: 0; }

.po-job-item {
    display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; cursor: pointer;
    border-radius: 6px; font-size: 13px; border: 1px solid transparent;
}
.po-job-item:hover { background: rgba(255,255,255,0.04); }
.po-job-item.active { background: rgba(74,158,255,0.10); border-color: var(--color-primary); }
.po-job-no { font-weight: 700; color: var(--text-primary); }
.po-job-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.po-job-pm { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 8px; padding: 0 5px; }

/* Detail panel */
.po-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 12px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
.po-detail-title { font-size: 15px; font-weight: 700; }
.po-card-list { display: flex; flex-direction: column; gap: 16px; }
.po-vendor-group { display: flex; flex-direction: column; gap: 8px; }
.po-vendor-group-head { display: flex; align-items: baseline; gap: 10px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.po-vendor-group-name { font-weight: 700; color: var(--text-primary); }
.po-vendor-group-count { color: var(--text-muted); font-size: 11px; }
.po-vendor-group-total { margin-left: auto; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.po-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-color); border-radius: 8px; background: rgba(255,255,255,0.02);
}
.po-card:hover { border-color: var(--color-primary); background: rgba(74,158,255,0.05); }
/* Single-row head: caret stuck left, Export stuck right (margin-left:auto). */
.po-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 12px; }
.po-card-no { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.po-card-vendor { flex-shrink: 0; }
.po-card-total { font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.po-card-co, .po-card-type, .po-card-date { color: var(--text-muted); flex-shrink: 0; }
.po-card-actions { margin-left: auto; flex-shrink: 0; }

/* Status badges (mirror invoice palette) */
.po-status-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 1px 7px; border-radius: 9px; }
.po-status-badge.remote   { background: rgba(76,175,80,0.18); color: #4caf50; }
.po-status-badge.local    { background: rgba(0,188,212,0.18); color: #00bcd4; }
.po-status-badge.conflict { background: rgba(244,67,54,0.18); color: #f44336; }
.po-status-badge.locked   { background: rgba(158,158,158,0.20); color: #bdbdbd; }
.po-diff-flag { font-size: 10px; color: var(--color-warning, #ff9800); font-weight: 700; }
.po-banner-conflict { background: rgba(244,67,54,0.10); border: 1px solid rgba(244,67,54,0.45); }

/* Wider sidebar to fit per-job state counts; the job name truncates first. */
#po-sidebar { width: 340px; flex: 0 0 340px; }
.po-job-item { gap: 5px; }
.po-job-name { flex: 1 1 auto; flex-shrink: 1; }
.po-job-no, .po-job-pm, .po-job-counts { flex-shrink: 0; }
.po-job-counts { display: inline-flex; gap: 3px; margin-left: auto; }
.po-count-chip {
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 0 5px; border-radius: 8px; line-height: 16px;
}
.po-count-chip.remote   { background: rgba(76,175,80,0.20); color: #4caf50; }
.po-count-chip.local    { background: rgba(0,188,212,0.20); color: #00bcd4; }
.po-count-chip.conflict { background: rgba(244,67,54,0.22); color: #f44336; }

/* Editor */
.po-editor { padding: 4px; }
.po-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.po-editor-no { font-size: 16px; font-weight: 700; }
.po-link { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; padding: 0; }
.po-banner { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.po-banner-view { background: rgba(0,188,212,0.10); border: 1px solid rgba(0,188,212,0.4); }
.po-banner-lock { background: rgba(158,158,158,0.10); border: 1px solid var(--border-color); }
.po-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-bottom: 16px; }
.po-field { display: flex; flex-direction: column; gap: 3px; }
.po-field-wide { grid-column: 1 / -1; }
.po-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.po-req { color: var(--color-danger, #f44336); }
.po-static { font-size: 13px; padding: 4px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po-radio-row { display: flex; gap: 14px; font-size: 13px; }
.po-derived { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.po-chip { font-size: 11px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-color); border-radius: 10px; padding: 1px 8px; }
.po-num-row { display: flex; align-items: center; gap: 8px; }
.po-num-display { font-weight: 700; font-size: 14px; }
.po-num-hint { font-size: 10px; color: var(--text-muted); }
.po-letter-input { width: 48px; text-transform: uppercase; }

/* Diff highlight */
.po-diff input, .po-diff.po-static, .po-field.po-diff input { border-color: var(--color-warning, #ff9800) !important; background: rgba(255,152,0,0.08); }
.po-diff-note { font-size: 11px; color: var(--color-warning, #ff9800); margin-top: 2px; }
/* Posted-PO revision: fields that don't reconcile with Foundation (red danger). */
.po-field-danger input, .po-field-danger select, .po-field-danger.po-static {
    border-color: var(--color-danger, #f44336) !important; background: rgba(244,67,54,0.08);
}
.po-totals-block.po-field-danger {
    border: 1px solid var(--color-danger, #f44336); background: rgba(244,67,54,0.08);
    border-radius: 6px; padding: 6px 10px;
}
/* Editor header: Export pinned to the upper-right. */
.po-head-export { margin-left: auto; }

/* Line item + CO tables */
.po-section-title { font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.po-line-table, .po-co-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.po-line-table th, .po-line-table td, .po-co-table td { border: 1px solid var(--border-color); padding: 3px 6px; text-align: left; }
.po-line-table th { background: rgba(255,255,255,0.04); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.po-li-qty { width: 64px; } .po-li-price { width: 110px; } .po-li-total { width: 110px; text-align: right; white-space: nowrap; }
.po-li-cc { white-space: nowrap; font-family: monospace; }
.po-line-table input { width: 100%; box-sizing: border-box; }
.po-li-del { background: none; border: none; color: var(--color-danger, #f44336); cursor: pointer; font-size: 16px; line-height: 1; }
.po-co-amt { text-align: right; white-space: nowrap; }
.po-muted { color: var(--text-muted); font-size: 12px; }

.po-totals { display: flex; gap: 18px; align-items: center; justify-content: flex-end; margin: 10px 0; font-size: 13px; }
.po-totals .po-total-final b { font-size: 15px; }
.po-totals.po-diff { background: rgba(255,152,0,0.08); padding: 6px 10px; border-radius: 6px; }

/* Attachments */
.po-attach { border: 1px dashed var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 14px; }
.po-attach.drag { border-color: var(--color-primary); background: rgba(74,158,255,0.06); }
.po-attach-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.po-attach-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.po-attach-size { color: var(--text-muted); }
.po-attach-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.po-action-bar { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.btn-xs { padding: 1px 7px; font-size: 11px; }

/* PO line/CO tax columns + totals footers */
.po-line-table td.po-num, .po-co-table td.po-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-line-table th, .po-co-table th { background: rgba(255,255,255,0.04); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.po-li-amt { width: 100px; } .po-li-tax { text-align: center; width: 36px; }
.po-line-foot td, .po-co-subtotal td { font-weight: 600; background: rgba(255,255,255,0.03); }
.po-grand-total td { font-weight: 700; background: rgba(74,158,255,0.10); border-top: 2px solid var(--color-primary); }
.po-co-table tfoot td:first-child, .po-line-table tfoot td:first-child { text-align: right; }

/* PO cards — description/date + expandable Original→COs→Total sub-table */
.po-card-caret { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; width: 14px; flex-shrink: 0; padding: 0; }
.po-card-caret-spacer { width: 14px; flex-shrink: 0; }
.po-card-desc { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 40px; }
.po-card-expand { padding: 4px 12px 10px 36px; border-top: 1px dashed var(--border-color); }
.po-exp-table { border-collapse: collapse; font-size: 12px; min-width: 240px; }
.po-exp-table td { padding: 2px 18px 2px 0; }
.po-exp-table td.po-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.po-exp-table td.po-exp-date { color: var(--text-muted); white-space: nowrap; }
.po-exp-total td { font-weight: 700; border-top: 1px solid var(--border-color); padding-top: 4px; }
.po-exp-note { margin-top: 6px; color: var(--text-muted); font-style: italic; font-size: 12px; }

/* Editor: ship-to grid, inclusions, single-rate totals block, qty/price/desc */
.po-banner-edit { background: rgba(0,188,212,0.10); border: 1px solid rgba(0,188,212,0.4); }
.po-banner-info { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); color: var(--text-secondary); }
.po-shipto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.po-li-qty { width: 56px; } .po-li-price { width: 110px; }
.po-line-table td textarea.po-li-desc { width: 100%; min-height: 34px; resize: vertical; box-sizing: border-box; }
.po-totals-block { display: flex; gap: 18px; align-items: center; justify-content: flex-end; margin: 12px 0; font-size: 14px; flex-wrap: wrap; }
.po-totals-block .po-total-final b { font-size: 16px; }
#po-inclusions { width: 100%; box-sizing: border-box; }