:root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-input: #1f2937;
    --border-color: #4b5563;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;
}

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

body.dark {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
}

#app {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.header-logo {
    height: 3.25rem;
    width: auto;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Header user area */
.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Refresh button — by default anchors the right edge via margin-left:auto.
   When .header-user is rendered, main.js inserts it BEFORE the refresh button
   and shifts the auto-margin onto it (so user-area + refresh sit together). */
.btn-refresh {
    margin-left: auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, opacity 0.2s;
    white-space: nowrap;
}

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

.btn-refresh.is-refreshing {
    opacity: 0.6;
    pointer-events: none;
}

.user-name {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.btn-logout {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

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

/* Week strip navigation */
.week-strip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.strip-arrow {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    width: 2rem;
    height: 2.25rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.strip-arrow:hover {
    background: var(--border-color);
}

.strip-blocks {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.strip-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.strip-block:hover {
    background: var(--border-color);
}

.strip-block.selected {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    font-weight: 600;
}

.strip-block.current-week {
    border-color: var(--accent-blue);
}

.strip-today {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.strip-today:hover {
    background: var(--border-color);
}

/* Table controls (expand/collapse) */
.table-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn-expand-all {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
}

.btn-expand-all:hover {
    background: var(--border-color);
}

/* Table */
.labour-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.labour-table th,
.labour-table td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.labour-table th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
}

.labour-table th:first-child,
.labour-table td:first-child {
    text-align: left;
}

.labour-table td.name {
    font-weight: 500;
    color: var(--text-primary);
}

.labour-table td.zero {
    color: var(--text-muted);
}

.labour-table td.total-col {
    font-weight: 600;
    color: var(--accent-blue);
}

.labour-table tr.totals-row {
    border-top: 2px solid var(--border-color);
}

.labour-table tr.totals-row td {
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.labour-table tr.totals-row td.total-col {
    color: var(--accent-green);
}

.labour-table tbody tr.user-row {
    cursor: pointer;
}

.labour-table tbody tr.user-row:hover {
    background: var(--bg-secondary);
}

.labour-table .chevron {
    display: inline-block;
    width: 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.labour-table tr.task-row td {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.4);
}

.labour-table tr.task-row td.task-name {
    padding-left: 2rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.labour-table tr.task-row td.total-col {
    color: var(--text-muted);
    font-weight: 500;
}

.labour-table tr.task-row:hover {
    background: rgba(31, 41, 55, 0.5);
}

.labour-table .task-id {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-right: 0.35rem;
}

.labour-table .task-context {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.labour-table tr.overhead-row td {
    background: rgba(245, 158, 11, 0.12);
}

.labour-table tr.overhead-row:hover td {
    background: rgba(245, 158, 11, 0.2);
}

.labour-table tbody tr.totals-row:hover {
    background: var(--bg-secondary);
}

/* Status bar */
.status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-bar .cached-badge {
    background: var(--bg-tertiary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Loading */
.loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    padding: 2rem 0;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* View toggle */
.view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.view-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.4rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s, border-color 0.15s;
}

.view-btn:hover {
    background: var(--border-color);
}

.view-btn.selected {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    font-weight: 600;
}

/* Comparison table */
.comparison-table-wrapper {
    overflow: auto hidden;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}

.comparison-table th.comp-day-group {
    text-align: center;
    border-left: 2px solid var(--border-color);
    font-size: 0.7rem;
}

.comparison-table th.comp-name-col {
    text-align: left;
}

.comparison-table th.comp-status-col {
    min-width: 5.5rem;
    text-align: left;
}

.comparison-table th.comp-sub {
    font-size: 0.65rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
    color: var(--text-muted);
}

.comparison-table td.comp-l,
.comparison-table td.comp-x,
.comparison-table td.comp-d {
    font-size: 0.78rem;
    padding: 0.4rem 0.35rem;
    text-align: right;
}

.comparison-table td.comp-l,
.comparison-table th.comp-l {
    border-left: 2px solid var(--border-color);
}

.comparison-table td.comp-efx,
.comparison-table th.comp-efx-hdr {
    color: #a78bfa;
}

.comparison-table td.comp-separator,
.comparison-table th.comp-separator {
    border-left: 3px solid var(--border-color);
}

.comparison-table .diff-match {
    color: var(--accent-green);
}

.comparison-table .diff-limble-more {
    color: #d4a44a;
    font-weight: 600;
}

.comparison-table .diff-xero-more {
    color: #c0897e;
    font-weight: 600;
}

.comparison-table td.comp-d.diff-match {
    color: var(--accent-green);
}

.comparison-table td.comp-d.diff-limble-more {
    color: #d4a44a;
    font-weight: 600;
}

.comparison-table td.comp-d.diff-xero-more {
    color: #c0897e;
    font-weight: 600;
}

.comparison-table tr.source-single td {
    font-style: italic;
    color: var(--text-muted);
}

.source-tag {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
}

.source-tag.limble-only {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
}

.source-tag.xero-only {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-yellow);
}

.source-tag.no-data {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.source-tag.leave-tag {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.source-tag.conflict-tag {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    cursor: help;
}

/* Shown when the Xero hours for a row came from a persisted snapshot (the
   live Xero timesheet dropped to DRAFT or fell out of the query window). */
.source-tag.snapshot-tag {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
    border: 1px dashed rgba(96, 165, 250, 0.55);
    cursor: help;
}

/* Leave day cells: greyed-out treatment */
.comparison-table td.leave-day {
    opacity: 0.35;
    font-style: italic;
}

/* Full-week leave: grey the entire row */
.comparison-table tr.leave-week td {
    opacity: 0.35;
    font-style: italic;
}

.comparison-table tr.leave-week:hover td {
    opacity: 0.6;
}

/* Strip ratio labels */
.strip-date {
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
}

.strip-ratio {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.strip-ratio.ratio-ok { color: var(--accent-green); }
.strip-ratio.ratio-warn { color: var(--accent-yellow); }
.strip-ratio.ratio-low { color: var(--accent-red); }
.strip-ratio.ratio-none { color: var(--text-muted); }

.strip-block.selected .strip-ratio.ratio-ok,
.strip-block.selected .strip-ratio.ratio-warn,
.strip-block.selected .strip-ratio.ratio-low { color: rgba(255,255,255,0.85); }

.strip-ratio.ratio-loading {
    color: var(--text-muted);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Comparison: clickable user rows */
.comparison-table tbody tr.comp-user-row {
    cursor: pointer;
}

.comparison-table tbody tr.comp-user-row:hover {
    background: var(--bg-secondary);
}

/* Management separator */
.comparison-table tr.management-separator td {
    border-bottom: 3px solid var(--accent-blue);
    padding: 0;
    height: 0;
    line-height: 0;
}

/* Ratio column */
.comparison-table td.comp-r {
    font-size: 0.78rem;
    padding: 0.4rem 0.35rem;
    text-align: right;
}

.comparison-table .ratio-ok {
    color: var(--accent-green);
}

.comparison-table .ratio-under {
    color: #c0897e;
    font-weight: 600;
}

/* Status badges */
.status-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
}

.status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.status-submitted {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-yellow);
}

/* Login screen */
.login-screen {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem 2rem;
}

.login-card {
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    max-width: 360px;
    width: 100%;
}

.login-logo {
    height: 3rem;
    margin-bottom: 1.25rem;
}

.login-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.login-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.login-btn {
    width: 100%;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: var(--accent-blue);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.login-btn:hover {
    background: #2563eb;
}

/* Task description tooltip */
.has-desc {
    cursor: pointer;
}
td.has-desc {
    min-width: 3.5rem;
}
.desc-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 320px;
    padding: 8px 10px;
    background: #1f2937;
    color: #f3f4f6;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: pre-wrap;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s;
}
.desc-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* Error */
.error-msg {
    color: var(--accent-red);
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
}

/* -------------------- Tabs (title-style) -------------------- */
.tabs-bar {
    display: flex;
    gap: 0.25rem;
    margin: 0.5rem 0 2rem 0;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    overflow: auto hidden;
    align-items: flex-end;
}

.tab-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 1.25rem 0.85rem;
    font: inherit;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    border-radius: 8px 8px 0 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

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

.tab-btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 8px;
}

.tab-btn.active {
    color: #ffffff;
    background: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.tab-btn.active:hover {
    background: var(--accent-blue);
    color: #ffffff;
}

/* Hide the static "Edge Platform" h1 once tabs are shown — the active tab
   IS the page title. JS sets this class on <body> when the tab bar renders. */
body.tabs-active #app-title {
    display: none;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

/* ================================================================
 * Mincon (Budget Tracker + Jobsheet) styles
 *
 * Imported verbatim from code_edge_platform/GOjobsheet so the
 * ported components render identically to the standalone app.
 * Scoped to GOjobsheet-specific class names (.budget-*, .form-section,
 * .jobsheet-*, .console-*, etc.) — will not affect reconciliation UI.
 * ================================================================ */

/* Forms */
.form-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--bg-input);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

/* Remove autofill/autocomplete styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
}

/* Date input styling */
.form-group input[type="date"] {
    color-scheme: dark;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Required asterisk */
.required {
    color: var(--accent-red);
}

/* Buttons */
button {
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

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

.btn-primary:hover {
    background: #2563eb;
}

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

.btn-secondary:hover {
    background: #4b5563;
}

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

.btn-success:hover {
    background: #059669;
}

.btn-success:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-block {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    margin-top: 1rem;
}

/* Fancy Submit Button */
.btn-submit {
    display: block;
    width: 80%;
    max-width: 300px;
    margin: 2rem auto 1rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--accent-green) 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.btn-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.btn-submit:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Grid */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Input Group */
.input-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-input);
}

.input-group input {
    flex: 1;
    border: none;
    background: transparent;
}

.btn-add, .btn-clear {
    padding: 0.5rem 1rem;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: bold;
}

.btn-add:hover, .btn-clear:hover {
    background: #4b5563;
}

/* Location Search */
.location-search-container {
    position: relative;
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-top: 2px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
}

.dropdown-message {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Select Wrapper (custom dropdowns) */
.select-wrapper {
    position: relative;
}

.select-button {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.select-button .arrow {
    color: var(--text-muted);
}

/* Multi-select */
select[multiple] {
    width: 100%;
    height: 150px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--bg-input);
    color: var(--text-primary);
}

select[multiple] option {
    padding: 0.25rem 0.5rem;
}

select[multiple] option:checked {
    background: var(--accent-blue);
    color: white;
}

/* Inspections List */
.inspections-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.inspection-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: none;
    cursor: pointer;
    color: var(--text-primary);
}

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

.inspection-item:hover:not(.disabled) {
    background: var(--bg-tertiary);
}

.inspection-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inspection-item.completed {
    background: rgba(16, 185, 129, 0.05);
    border-left: 3px solid var(--accent-green);
}

.inspection-item.completed:hover:not(.disabled) {
    background: rgba(16, 185, 129, 0.1);
}

.completed-date {
    font-size: 0.7rem;
    color: var(--accent-green);
}

.inspection-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inspection-name {
    flex: 1;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inspection-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-badge {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-weight: 500;
}

.status-complete {
    background: var(--accent-green);
    color: white;
}

.status-progress {
    background: var(--accent-yellow);
    color: black;
}

/* Task List */
.task-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    min-height: 80px;
    max-height: 150px;
    overflow-y: auto;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

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

.task-info {
    flex: 1;
    min-width: 0;
}

.task-id {
    font-family: monospace;
    color: var(--accent-blue);
    font-size: 0.875rem;
    text-decoration: none;
}

.task-id:hover {
    text-decoration: underline;
}

.task-name {
    margin-left: 0.5rem;
    font-size: 0.875rem;
}

.task-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.task-location {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-asset {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.inspection-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}

.btn-remove {
    padding: 0.25rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
}

.btn-remove:hover {
    color: var(--accent-red);
}

/* Console */
.console-output {
    background: #000;
    border-radius: 4px;
    padding: 0.75rem;
    height: 120px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
}

.console-ready {
    color: var(--text-muted);
}

.console-line {
    display: flex;
    gap: 0.5rem;
}

.console-time {
    color: var(--text-muted);
    flex-shrink: 0;
}

.console-info { color: var(--text-secondary); }
.console-error { color: var(--accent-red); }
.console-warning { color: var(--accent-yellow); }
.console-success { color: var(--accent-green); }

/* PDF Preview */
.pdf-frame-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.pdf-frame-container iframe {
    width: 100%;
    height: 300px;
    border: none;
}

/* History */
.history-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.history-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: none;
    cursor: pointer;
    color: var(--text-primary);
}

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

.history-item:hover {
    background: var(--bg-tertiary);
}

.history-header {
    display: flex;
    justify-content: space-between;
}

.history-tasks {
    font-family: monospace;
    color: var(--accent-green);
    font-size: 0.75rem;
}

.history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-location {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty State */
.empty-state {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Links */
.link-danger {
    color: var(--accent-red);
    font-size: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
}

.link-danger:hover {
    text-decoration: underline;
}

.link-success {
    color: var(--accent-green);
    font-size: 0.75rem;
    text-decoration: none;
}

.link-success:hover {
    text-decoration: underline;
}

.link-muted {
    color: var(--text-muted);
    font-size: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
}

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

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    min-width: 300px;
}

.loading-spinner p {
    margin: 0.5rem 0 0;
}

.loading-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Loading state */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Status Dialog */
.status-dialog {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    max-width: 300px;
    border: 1px solid var(--border-color);
}

.status-message {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* File Upload */
.file-upload {
    margin-bottom: 0.5rem;
}

.file-upload input[type="file"] {
    display: none;
}

.file-upload label {
    cursor: pointer;
}

.file-name {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.preview-container {
    margin-top: 1rem;
    text-align: center;
}

.preview-container p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.preview-image {
    max-height: 200px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Asset image */
.asset-image-container {
    text-align: center;
    margin-bottom: 1rem;
}

.asset-image-container img {
    max-width: 100%;
    height: 200px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-tertiary);
}

/* Input with button (proofreading) */
.input-with-button {
    position: relative;
}

.input-with-button input,
.input-with-button textarea {
    width: 100%;
    padding-right: 3rem;
}

.proofread-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-primary);
}

.proofread-btn:hover {
    background: #4b5563;
}

/* Number input with buttons */
.number-input {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-input);
}

.number-input input {
    flex: 1;
    border: none;
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: var(--text-primary);
    -moz-appearance: textfield;
}

.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-input input:focus {
    outline: none;
}

.number-buttons {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
}

.number-buttons button {
    flex: 1;
    padding: 0 0.75rem;
    border: none;
    background: var(--bg-tertiary);
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.number-buttons button:hover {
    background: #4b5563;
}

.number-buttons button:first-child {
    border-bottom: 1px solid var(--border-color);
}

/* Form specific styles */
.inspection-form,
.create-asset-form,
.work-order-form {
    max-width: 600px;
    margin: 0 auto;
}

.inspection-form h2,
.create-asset-form h2,
.work-order-form h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* Messages */
.message {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.message-success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.message-error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

.message-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
}

/* Saved Contacts List */
.saved-contacts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.saved-contact-item {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.2s;
    overflow: hidden;
}

.saved-contact-item:hover {
    border-color: var(--accent-blue);
}

.contact-select-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
}

.contact-select-btn:hover {
    background: var(--accent-blue);
}

.contact-delete-btn {
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: bold;
}

.contact-delete-btn:hover {
    background: var(--accent-red);
    color: white;
}

.contact-source {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.contact-select-btn:hover .contact-source {
    background: rgba(255,255,255,0.2);
    color: white;
}

.contact-name {
    font-weight: 500;
}

.contact-detail {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.contact-select-btn:hover .contact-detail {
    color: rgba(255,255,255,0.8);
}

/* Generated Reports List */
.generated-reports-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.generated-report-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.report-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.report-name {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.3;
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.report-tasks {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.report-path {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: monospace;
    word-break: break-all;
}

.report-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* Form hint */
.form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.label-optional {
    font-weight: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Input with browse button */
.input-with-browse {
    display: flex;
    gap: 0.5rem;
}

.input-with-browse input {
    flex: 1;
}

.input-with-browse .btn {
    flex-shrink: 0;
}

/* Folder Presets */
.folder-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.folder-preset-btn {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

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

.folder-preset-btn.active {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Report Type Selector */
.report-type-selector {
    display: flex;
    gap: 0.5rem;
}

.report-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.report-type-btn:hover {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
}

.report-type-btn.active {
    border-color: var(--accent-green);
    background: rgba(16, 185, 129, 0.1);
}

.report-type-icon {
    font-size: 1.5rem;
}

.report-type-label {
    font-weight: 600;
    font-size: 0.875rem;
}

.report-type-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

.report-type-btn.active .report-type-label {
    color: var(--accent-green);
}

@media (max-width: 600px) {
    .report-type-selector {
        flex-direction: column;
    }
}

/* Date Range Section */
.date-range-section {
    padding: 0.75rem;
    border-left: 3px solid var(--accent-blue);
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
    margin-top: 0.5rem;
}

/* Jobsheet form */
.jobsheet-form {
    max-width: 600px;
    margin: 0 auto;
}

.jobsheet-form h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* ============================================================
   Schedule / Gantt Chart (Frappe Gantt)
   ============================================================ */

/* Full-width override when schedule tab is active */
main#content[data-active-tab="schedule"] {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Wider layout for budget tracker tab */
main#content[data-active-tab="budget-tracker"] {
    max-width: 1100px;
}


/* Toolbar */
.schedule-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.schedule-toolbar .schedule-status {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Schedule body: sidebar + gantt side by side */
.schedule-body {
    display: flex;
    height: calc(100vh - 108px);
    overflow: hidden;
}

/* Person sidebar */
.person-sidebar {
    width: 150px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.sidebar-header {
    /* height set dynamically to match gantt header */
    border-bottom: 1px solid var(--border-color);
}

.sidebar-content {
    /* labels placed here; translated via JS to sync with gantt scroll */
}

.person-label {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Gantt wrapper fills remaining width */
.gantt-wrapper {
    flex: 1;
    overflow: hidden;
}

/* ── Frappe Gantt dark mode overrides ─────────────────────────── */

.gantt-container {
    --g-bar-color: var(--accent-blue);
    --g-bar-border: var(--accent-blue);
    --g-header-background: var(--bg-secondary);
    --g-row-color: var(--bg-primary);
    --g-row-border-color: rgba(75, 85, 99, 0.3);
    --g-tick-color: rgba(75, 85, 99, 0.15);
    --g-tick-color-thick: rgba(75, 85, 99, 0.4);
    --g-text-dark: var(--text-primary);
    --g-text-muted: var(--text-muted);
    --g-text-light: #fff;
    --g-weekend-highlight-color: rgba(75, 85, 99, 0.15);
    --g-weekend-label-color: var(--bg-tertiary);
    --g-today-highlight: var(--accent-red);
    --g-popup-actions: var(--bg-tertiary);
    --g-actions-background: var(--bg-tertiary);
    --g-arrow-color: var(--text-muted);
    --g-progress-color: rgba(255, 255, 255, 0.1);
    --g-border-color: var(--border-color);
    --g-expected-progress: rgba(59, 130, 246, 0.3);
    --g-handle-color: var(--text-secondary);
}

/* Grid header & side header backgrounds */
.gantt-container .grid-header,
.gantt-container .side-header {
    background: var(--bg-secondary) !important;
}

/* Popup dark mode */
.gantt-container .popup-wrapper .popup {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.gantt-container .popup-wrapper .title {
    color: var(--text-primary);
}

.gantt-container .popup-wrapper .subtitle {
    color: var(--text-muted);
}

/* Side panel label text color */
.gantt-container .side-header .label,
.gantt-container .grid-row .label {
    color: var(--text-primary);
}

/* ── Per-person bar colors ────────────────────────────────────── */

.gantt .bar-wrapper.person-0 .bar { fill: #3b82f6; }
.gantt .bar-wrapper.person-0 .bar-progress { fill: #2563eb; }
.gantt .bar-wrapper.person-1 .bar { fill: #10b981; }
.gantt .bar-wrapper.person-1 .bar-progress { fill: #059669; }
.gantt .bar-wrapper.person-2 .bar { fill: #f59e0b; }
.gantt .bar-wrapper.person-2 .bar-progress { fill: #d97706; }
.gantt .bar-wrapper.person-3 .bar { fill: #8b5cf6; }
.gantt .bar-wrapper.person-3 .bar-progress { fill: #7c3aed; }
.gantt .bar-wrapper.person-4 .bar { fill: #ef4444; }
.gantt .bar-wrapper.person-4 .bar-progress { fill: #dc2626; }
.gantt .bar-wrapper.person-5 .bar { fill: #06b6d4; }
.gantt .bar-wrapper.person-5 .bar-progress { fill: #0891b2; }
.gantt .bar-wrapper.person-6 .bar { fill: #ec4899; }
.gantt .bar-wrapper.person-6 .bar-progress { fill: #db2777; }
.gantt .bar-wrapper.person-7 .bar { fill: #f97316; }
.gantt .bar-wrapper.person-7 .bar-progress { fill: #ea580c; }

/* ============================================================
   Budget Tracker
   ============================================================ */

.budget-tracker {
    max-width: 100%;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}

#budget-table-container {
    overflow-x: auto;
}


.budget-tracker h2 {
    color: var(--text-primary);
}

.budget-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Summary cards */
.budget-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.budget-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
}

.budget-stat[data-indicator="ok"] {
    border-left: 3px solid var(--accent-green);
}

.budget-stat[data-indicator="warn"] {
    border-left: 3px solid var(--accent-yellow);
}

.budget-stat[data-indicator="over"] {
    border-left: 3px solid var(--accent-red);
}

.budget-stat[data-indicator="positive"] {
    border-left: 3px solid var(--accent-green);
}

.budget-stat[data-indicator="negative"] {
    border-left: 3px solid var(--accent-red);
}

.budget-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.budget-stat-trend {
    font-size: 0.7rem;
    margin-top: 0.125rem;
}

/* Colour coding */
.budget-ok { color: var(--accent-green); }
.budget-warn { color: var(--accent-yellow); }
.budget-over { color: var(--accent-red); }

/* Overall progress bar */
.budget-progress-container {
    position: relative;
    height: 36px;
    background: var(--bg-tertiary);
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.budget-progress-container:hover {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.budget-progress-bar {
    height: 100%;
    border-radius: 18px;
    transition: width 0.5s ease;
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0.15) 75%,
        transparent 75%
    );
    background-size: 20px 20px;
}

.budget-progress-ok { background-color: var(--accent-green); }
.budget-progress-warn { background-color: var(--accent-yellow); }
.budget-progress-over { background-color: var(--accent-red); }

.budget-progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Threshold markers on overall bar */
.budget-progress-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.budget-progress-marker-80 { left: 80%; }
.budget-progress-marker-100 { left: 100%; background: rgba(239, 68, 68, 0.5); }

/* Budget table */
.budget-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
}

.budget-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.budget-table .col-hours,
.budget-table .col-charged,
.budget-table .col-budget,
.budget-table .col-remaining {
    text-align: right;
}

.budget-table .col-charged,
.budget-table .col-budget,
.budget-table .col-remaining {
    border-left: 1px solid rgba(75, 85, 99, 0.3);
}

.budget-table .col-line {
    width: 40px;
    text-align: center;
}

.budget-table .col-task {
    width: 50px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.budget-table .col-machine {
    font-weight: 500;
}

/* Legacy col-bar kept for backwards compat */
.budget-table .col-bar {
    width: 160px;
}

/* Budget rows */
.budget-row {
    cursor: pointer;
    transition: background 0.15s;
}

.budget-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.budget-row td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

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

.budget-row-over {
    background: rgba(239, 68, 68, 0.05);
}

.budget-row-over:nth-child(even) {
    background: rgba(239, 68, 68, 0.07);
}

.budget-row-warn {
    background: rgba(245, 158, 11, 0.05);
}

.budget-row-warn:nth-child(even) {
    background: rgba(245, 158, 11, 0.07);
}

/* Dual stacked progress bars (Tracking column) */
.budget-dual-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.budget-dual-bar {
    position: relative;
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.budget-dual-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.budget-dual-bar-fill-progress {
    background: var(--accent-green);
}

.budget-dual-bar-fill-charged {
    background: var(--accent-blue);
}

.budget-dual-bar-label {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.budget-table .col-tracking {
    width: 130px;
}

/* Week bar — right-aligned row above the table, over the Jobsheet column */
.budget-week-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.budget-week-controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
}

.budget-week-controls label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.budget-week-select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.75rem;
    color-scheme: dark;
    cursor: pointer;
    min-width: 200px;
}

/* Jobsheet column */
.budget-table .col-jobsheet {
    width: 130px;
    text-align: right;
}

.budget-table td.col-jobsheet {
    white-space: normal;
    font-size: 0.75rem;
}

.budget-week-info {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-right: 0.375rem;
}

.budget-week-info-empty {
    color: var(--text-muted);
}

.budget-jobsheet-btn {
    padding: 0.125rem 0.5rem !important;
    font-size: 0.65rem !important;
    min-width: auto !important;
}

.btn-tiny {
    padding: 0.125rem 0.5rem;
    font-size: 0.65rem;
    min-width: auto;
}

.spinner-tiny {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}


/* Weekly bar empty state */
.budget-weekly-bar-empty {
    background: rgba(75, 85, 99, 0.3);
    min-height: 0;
}

/* Detail row (expanded) */
.budget-detail-row td {
    padding: 0.75rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.budget-detail-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
}

/* Phase progress grid */
.budget-phase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.budget-phase-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.625rem;
}

.budget-phase-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.budget-phase-badge-clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}

.budget-phase-badge-clickable:hover {
    opacity: 0.7;
}

.budget-phase-weight {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.0625rem 0.25rem;
    border-radius: 3px;
    margin-left: auto;
}

.budget-phase-card-done {
    border-color: var(--accent-green);
}

.budget-phase-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.budget-phase-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.budget-phase-badge-complete {
    background: var(--accent-green);
    color: white;
}

.budget-phase-badge-incomplete {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.budget-phase-hours {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

.budget-phase-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.budget-phase-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.budget-unallocated {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(75, 85, 99, 0.3);
}

.budget-unallocated-header {
    font-weight: 600;
    color: var(--accent-yellow);
    margin-bottom: 0.375rem;
}

.budget-unallocated-table {
    margin-top: 0.25rem;
}

.budget-unallocated-table td {
    font-size: 0.7rem;
}

.budget-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.budget-detail-table th {
    text-align: left;
    padding: 0.375rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.budget-detail-table td {
    padding: 0.375rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(75, 85, 99, 0.3);
}

/* Forecast section */
.budget-forecast {
    margin-top: 1.5rem;
}

.budget-forecast h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.budget-forecast-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.budget-forecast-controls label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.budget-forecast-controls input[type="date"] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.8rem;
    color-scheme: dark;
}

/* Key metrics row */
.budget-forecast-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.budget-forecast-metric {
    text-align: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.budget-forecast-metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.budget-forecast-metric-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

/* Burn-down bar */
.budget-burndown-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
}

.budget-burndown-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    min-width: 2px;
}

.budget-burndown-charged { background: var(--accent-green); }
.budget-burndown-planned { background: var(--accent-blue); }
.budget-burndown-over { background: var(--accent-red); }

/* Weekly spend trend */
.budget-weekly-trend {
    margin-top: 1rem;
}

.budget-weekly-trend h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.budget-weekly-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100px;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1px;
}

.budget-weekly-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.budget-weekly-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    min-height: 0;
    transition: height 0.3s ease;
}

.budget-weekly-bar-ok { background: var(--accent-green); }
.budget-weekly-bar-warn { background: var(--accent-yellow); }
.budget-weekly-bar-over { background: var(--accent-red); }
.budget-weekly-bar-current { background: #ef4444 !important; }

.budget-weekly-avg-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--accent-blue);
    z-index: 1;
}

.budget-weekly-avg-label {
    position: absolute;
    right: 0;
    transform: translateY(-100%);
    font-size: 0.6rem;
    color: var(--accent-blue);
    background: var(--bg-secondary);
    padding: 0 0.25rem;
}

.budget-weekly-labels {
    display: flex;
    gap: 3px;
    margin-top: 0.25rem;
}

.budget-weekly-label {
    flex: 1;
    text-align: center;
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* Daily Labor Heatmap */
.budget-heatmap h3 {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.heatmap-scroll {
    overflow-x: auto;
}

.heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
}

.heatmap-table th,
.heatmap-table td {
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    text-align: center;
    white-space: nowrap;
}

.heatmap-table th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.heatmap-worker-col {
    text-align: left !important;
    font-weight: 500;
    min-width: 120px;
}

.heatmap-total-col {
    font-weight: 600;
    min-width: 60px;
}

.heatmap-cell {
    min-width: 50px;
    color: var(--text-primary);
    font-size: 0.7rem;
}

.heatmap-week-section {
    margin-bottom: 1rem;
}

.heatmap-week-current {
    border: 2px solid #ef4444;
    border-radius: 6px;
    padding: 0.5rem;
}

.heatmap-week-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.heatmap-total-row td {
    border-top: 2px solid var(--border-color);
    background: rgba(31, 41, 55, 0.5);
}

@media (max-width: 768px) {
    .budget-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .budget-table .col-bar,
    .budget-table .col-tracking {
        display: none;
    }
    .budget-table .col-jobsheet {
        display: none;
    }
    .budget-phase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .budget-forecast-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .budget-week-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Loading state for schedule */
.schedule-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 108px);
    gap: 1rem;
    color: var(--text-muted);
}

/* ── Business Metrics tab ──────────────────────────────────────────────── */

.metrics-tab .metrics-subtitle {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: -0.5rem 0 1.25rem;
}

.metrics-stat-sub {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 0.125rem;
}

.metrics-ok   { color: var(--accent-green); }
.metrics-warn { color: var(--accent-yellow); }
.metrics-low  { color: var(--accent-red); }
.metrics-none { color: var(--text-muted); }

/* Slim header variant for cards-within-cards — smaller title, inline legend */
.section-header-slim {
    margin-bottom: 0.75rem;
    align-items: center;
}
.section-header-slim h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.metrics-legend {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.metrics-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Chart frame: [y-axis | bars area]. No horizontal scroll — bars flex down
   to fit the container width. Very narrow viewports will squeeze them below
   the ideal, but that's preferable to a scrollbar. */
.metrics-chart-wrapper {
    position: relative;
    padding-top: 0.5rem;
    overflow: visible;
}

.metrics-chart-frame {
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 100%;
}

.metrics-yaxis {
    flex: 0 0 40px;
    position: relative;
    border-right: 1px solid var(--border-color);
}
.metrics-y-label {
    position: absolute;
    right: 6px;
    transform: translateY(50%);
    font-size: 0.65rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.metrics-bars {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    position: relative;
    min-width: 0;
    padding: 0 4px;
    border-bottom: 1px solid var(--border-color);
}

/* Horizontal gridlines span the bars area and sit behind the bars.
   z-index:0 on the line, bars get implicit stacking via DOM order. */
.metrics-y-gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--border-color);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
.metrics-y-gridline-target {
    border-top-style: solid;
    border-top-color: var(--accent-blue);
    opacity: 0.35;
}

.metrics-bar-wrapper {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    cursor: default;
    position: relative;
}
/* Raise the hovered bar so its tooltip paints above siblings later in
   the DOM. Without this, each wrapper sat at an implicit stacking level
   and the tooltip got covered by the next bar's wrapper. */
.metrics-bar-wrapper:hover {
    z-index: 20;
}

.metrics-bar {
    width: 100%;
    max-width: 18px;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: opacity 0.15s ease;
}
.metrics-bar-wrapper:hover .metrics-bar { opacity: 0.75; }

.metrics-bar-ok   { background: var(--accent-green); }
.metrics-bar-warn { background: var(--accent-yellow); }
.metrics-bar-low  { background: var(--accent-red); }
.metrics-bar-none { background: var(--bg-tertiary); opacity: 0.55; }

/* Marker lines — the 80% target and the 100% ceiling get prominent
   coloured dashed lines with labels. 100% is the implicit ceiling of the
   clamped dataset, so its line doubles as the "every bar touches here is
   at full utilisation" marker. */
.metrics-target-line,
.metrics-hundred-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}
.metrics-target-line {
    border-top: 2px dashed var(--accent-blue);
}
.metrics-hundred-line {
    border-top: 2px dashed var(--accent-green);
    opacity: 0.7;
}
.metrics-target-label,
.metrics-hundred-label {
    position: absolute;
    right: 6px;
    transform: translateY(-100%);
    font-size: 0.65rem;
    background: var(--bg-secondary);
    padding: 0 0.35rem;
    border-radius: 2px;
    font-weight: 500;
}
.metrics-target-label { color: var(--accent-blue); }
.metrics-hundred-label { color: var(--accent-green); }

/* Hover tip for each bar — a richer, snappier alternative to the browser's
   native title tooltip (which has a 500ms delay). Absolutely positioned
   above the bar, shows the headline % in the bar's own colour. Clamped
   bars get a subtle diagonal stripe so the 100% value reads as "capped". */
.metrics-bar-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s ease-out;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    text-align: center;
    line-height: 1.25;
}
.metrics-bar-wrapper:hover .metrics-bar-tip {
    opacity: 1;
}
.metrics-bar-tip-headline {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.125rem;
}
.metrics-bar-tip-sub {
    color: var(--text-secondary);
    font-weight: 500;
}
.metrics-bar-tip-ctx {
    color: var(--text-muted);
    font-size: 0.65rem;
    margin-top: 0.1rem;
}

.metrics-bar-clamped {
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 3px,
        rgba(255, 255, 255, 0.18) 3px,
        rgba(255, 255, 255, 0.18) 5px
    );
}

/* X-axis labels: mirror the [yaxis | bars] split so month ticks line up
   with their bars. Each label cell can optionally hold a tiny year badge
   under the month shortcode. */
.metrics-labels-wrap {
    display: flex;
    width: 100%;
    padding-top: 0.3rem;
}
.metrics-labels-spacer {
    flex: 0 0 40px;
}
.metrics-labels {
    flex: 1 1 auto;
    display: flex;
    gap: 2px;
    padding: 0 4px;
    min-width: 0;
}
.metrics-label {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.6rem;
    color: transparent;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.metrics-label-tick {
    color: var(--text-muted);
}
.metrics-label-month {
    font-weight: 500;
}
.metrics-label-year {
    font-size: 0.55rem;
    color: var(--text-muted);
    opacity: 0.75;
    margin-top: 0.05rem;
}