/* Ensure [hidden] always wins over display:flex/grid rules */
[hidden] { display: none !important; }

/* ============================================================
   Cabin Fever Digital · CPM Tool · cpm-jobs.css
   ============================================================
   Additive stylesheet for the new jobs pages (list, new, detail).
   Loaded AFTER cpm.css.

   Scope: ONLY net-new selectors. The jobs pages reuse the
   dashboard's existing classes for top-bar, nav, main, page-header,
   greeting-block, eyebrow, eyebrow__label, btn, btn-ghost,
   btn-brass, widget shell, status-badge, and the various item
   classes (.appt-item, .job-card, .followup-item, .deadline-item,
   .bill-item). This file does NOT redefine any of those — if your
   dashboard renders correctly, the jobs pages will inherit the
   same visual language.

   Color tokens used here are typed inline (mirroring cpm.css).
   When cpm.css adopts CSS custom properties, this file should
   be migrated to var(--x) in lockstep.
   ============================================================ */


/* ============================================================
   Page title block (extends the dashboard's .greeting-block)
   ============================================================ */
.page-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #F5F0E8;
    margin: 6px 0 0;
    line-height: 1.15;
}
.page-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.64);
}
.page-meta-sep {
    color: rgba(245, 240, 232, 0.28);
}
.eyebrow__crumb {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(184, 150, 62, 0.35);
}
.eyebrow__crumb:hover {
    color: #D4B055;
}


/* ============================================================
   Filter bar (jobs list)
   ============================================================ */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.filter-segment {
    display: inline-flex;
    border: 1px solid rgba(245, 240, 232, 0.14);
    border-radius: 6px;
    overflow: hidden;
    background: #232325;
}
.filter-segment .seg-btn {
    background: transparent;
    border: 0;
    color: rgba(245, 240, 232, 0.64);
    padding: 7px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.filter-segment .seg-btn + .seg-btn {
    border-left: 1px solid rgba(245, 240, 232, 0.14);
}
.filter-segment .seg-btn:hover {
    color: #F5F0E8;
    background: rgba(245, 240, 232, 0.04);
}
.filter-segment .seg-btn.active {
    background: rgba(184, 150, 62, 0.18);
    color: #D4B055;
}

.filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-chips .chip {
    background: transparent;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: rgba(245, 240, 232, 0.64);
    padding: 5px 11px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background 120ms;
}
.filter-chips .chip:hover {
    color: #F5F0E8;
    border-color: rgba(245, 240, 232, 0.28);
}
.filter-chips .chip.active {
    color: #1C1C1E;
    background: #B8963E;
    border-color: #B8963E;
}

.filter-search {
    margin-left: 0;
    min-width: 0;
    flex-shrink: 0;
}

/* Push only the text search input to the far right of the bar */
.filter-search:last-child {
    margin-left: auto;
    min-width: 200px;
}

.filter-search input[type="search"] {
    width: 100%;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}
.filter-search input[type="search"]:focus {
    outline: none;
    border-color: rgba(184, 150, 62, 0.5);
    background: #2A2A2C;
}
.filter-search input[type="search"]::placeholder {
    color: rgba(245, 240, 232, 0.36);
}

@media (max-width: 720px) {
    .filter-search,
    .filter-search:last-child {
        margin-left: 0;
        width: 100%;
        min-width: 0;
        order: 99;
    }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .filter-search { width: 100%; }
}
   Results container + loading / empty / error states
   ============================================================ */
.results {
    min-height: 240px;
}
.results-loading,
.results-empty,
.results-error {
    padding: 56px 24px;
    text-align: center;
    color: rgba(245, 240, 232, 0.48);
    font-size: 14px;
    line-height: 1.55;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
}
.results-empty p,
.results-error p {
    margin: 0 0 16px;
    color: rgba(245, 240, 232, 0.64);
}
.results-error {
    border-color: rgba(194, 84, 80, 0.32);
    color: #C25450;
}
.results-error p {
    color: #C25450;
}


/* ============================================================
   Jobs table
   ============================================================ */
.jobs-table {
    width: 100%;
    border-collapse: collapse;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}
.jobs-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: rgba(245, 240, 232, 0.03);
    color: rgba(245, 240, 232, 0.42);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(245, 240, 232, 0.07);
}
.jobs-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(245, 240, 232, 0.04);
    color: #F5F0E8;
    vertical-align: middle;
}
.jobs-table tbody tr:last-child td {
    border-bottom: 0;
}
.jobs-table tbody tr {
    cursor: pointer;
    transition: background 120ms;
}
.jobs-table tbody tr:hover {
    background: rgba(245, 240, 232, 0.025);
}
.jobs-table .cell-name {
    font-weight: 500;
    color: #F5F0E8;
}
.jobs-table .cell-client {
    color: rgba(245, 240, 232, 0.64);
}
.jobs-table .col-type {
    color: rgba(245, 240, 232, 0.48);
    font-size: 13px;
}
.jobs-table .col-updated {
    color: rgba(245, 240, 232, 0.48);
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .jobs-table .col-type,
    .jobs-table .col-updated {
        display: none;
    }
    .jobs-table thead th,
    .jobs-table tbody td {
        padding: 12px 12px;
    }
}


/* ============================================================
   Form card (new job page)
   ============================================================ */
.form-card {
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
    padding: 28px 28px 20px;
    max-width: 720px;
}
@media (max-width: 720px) {
    .form-card {
        padding: 20px 16px 12px;
    }
}

.form-group {
    border: 0;
    padding: 0;
    margin: 0 0 28px;
}
.form-group legend {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #B8963E;
    padding: 0;
    margin-bottom: 14px;
}
.form-group + .form-group {
    padding-top: 22px;
    border-top: 1px solid rgba(245, 240, 232, 0.07);
}

.form-row {
    margin-bottom: 16px;
}
.form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(245, 240, 232, 0.78);
    margin-bottom: 6px;
}
.form-row .req {
    color: #B8963E;
    font-weight: 700;
    margin-left: 2px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row input[type="datetime-local"],
.form-row select,
.form-row textarea {
    width: 100%;
    background: #1C1C1E;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 9px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}
.form-row textarea {
    resize: vertical;
    min-height: 84px;
    font-family: 'DM Sans', sans-serif;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: rgba(184, 150, 62, 0.55);
    background: #232325;
}
.form-row .field-help {
    margin-top: 6px;
    color: rgba(245, 240, 232, 0.42);
    font-size: 12px;
    line-height: 1.45;
}

.form-row.two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 540px) {
    .form-row.two-up {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .form-row.two-up > div {
        margin-bottom: 16px;
    }
    .form-row.two-up > div:last-child {
        margin-bottom: 0;
    }
}

.subform {
    background: rgba(245, 240, 232, 0.025);
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 6px;
    padding: 16px 16px 4px;
    margin-top: 8px;
}
.subform .form-row:last-child {
    margin-bottom: 12px;
}

.btn-inline {
    background: transparent;
    border: 0;
    color: #B8963E;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 6px 0;
    margin-top: 8px;
    cursor: pointer;
}
.btn-inline:hover {
    color: #D4B055;
    text-decoration: underline;
}

.form-error {
    background: rgba(194, 84, 80, 0.12);
    border: 1px solid rgba(194, 84, 80, 0.4);
    color: #E58884;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid rgba(245, 240, 232, 0.07);
}


/* ============================================================
   Detail page stub panel
   ============================================================ */
.stub-panel {
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
    padding: 36px 32px;
    max-width: 640px;
}
.stub-panel .stub-marker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #B8963E;
    margin-bottom: 12px;
}
.stub-panel h2 {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #F5F0E8;
    margin: 0 0 14px;
}
.stub-panel p {
    color: rgba(245, 240, 232, 0.64);
    line-height: 1.6;
    font-size: 14px;
    margin: 0 0 14px;
}
.stub-panel .stub-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245, 240, 232, 0.36);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(245, 240, 232, 0.07);
}
.stub-panel .stub-id span {
    color: rgba(245, 240, 232, 0.6);
}


/* ============================================================
   Batch 3b additions — job detail page
   ============================================================ */


/* Type chip + archived chip (in .page-meta) */
.type-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245, 240, 232, 0.48);
}
.archived-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245, 240, 232, 0.36);
    border: 1px solid rgba(245, 240, 232, 0.18);
    border-radius: 4px;
    padding: 2px 8px;
}


/* Status picker popover */
.status-picker-wrap {
    position: relative;
    display: inline-block;
}
.status-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: #2A2A2C;
    border: 1px solid rgba(245, 240, 232, 0.14);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sp-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(245, 240, 232, 0.36);
    padding: 6px 14px 4px;
}
.sp-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(245, 240, 232, 0.78);
    cursor: pointer;
    transition: background 80ms, color 80ms;
}
.sp-opt:hover {
    background: rgba(245, 240, 232, 0.06);
    color: #F5F0E8;
}
.sp-opt--current {
    color: #D4B055;
}
.sp-opt--current::after {
    content: ' ✓';
    color: #B8963E;
    font-size: 11px;
}


/* Message banner (success / error / info) */
.msg-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.msg-banner--success {
    background: rgba(60, 140, 80, 0.14);
    border-color: rgba(60, 140, 80, 0.35);
    color: #7ecf93;
}
.msg-banner--error {
    background: rgba(194, 84, 80, 0.12);
    border-color: rgba(194, 84, 80, 0.4);
    color: #E58884;
}
.msg-banner--info {
    background: rgba(184, 150, 62, 0.10);
    border-color: rgba(184, 150, 62, 0.3);
    color: #D4B055;
}
.msg-dismiss {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    flex-shrink: 0;
}
.msg-dismiss:hover { opacity: 1; }


/* Detail panel — read-only field display */
.detail-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .detail-panel {
        grid-template-columns: 1fr;
    }
}

.detail-section {
    padding: 22px 24px;
    border-bottom: 1px solid rgba(245, 240, 232, 0.05);
    border-right: 1px solid rgba(245, 240, 232, 0.05);
}
.detail-section:nth-child(even) {
    border-right: 0;
}
.detail-section:nth-last-child(-n+2) {
    border-bottom: 0;
}
@media (max-width: 720px) {
    .detail-section {
        border-right: 0;
    }
    .detail-section:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(245, 240, 232, 0.05);
    }
    .detail-section:last-child {
        border-bottom: 0;
    }
}
.detail-section--meta {
    grid-column: 1 / -1;
    border-bottom: 0;
    border-right: 0;
    background: rgba(245, 240, 232, 0.015);
}

.detail-section-head {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(245, 240, 232, 0.36);
    margin-bottom: 12px;
}

.detail-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
}
.detail-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(245, 240, 232, 0.42);
    min-width: 80px;
    flex-shrink: 0;
}
.detail-value {
    font-size: 14px;
    color: #F5F0E8;
    word-break: break-word;
}
.detail-value--multi {
    white-space: pre-wrap;
    line-height: 1.55;
}
.detail-value--mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245, 240, 232, 0.48);
}


/* Danger button */
.btn-danger {
    background: rgba(194, 84, 80, 0.15);
    border: 1px solid rgba(194, 84, 80, 0.4);
    color: #E58884;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.btn-danger:hover {
    background: rgba(194, 84, 80, 0.25);
    border-color: rgba(194, 84, 80, 0.6);
}
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================
   Batch 3c additions — tasks and communications sections
   ============================================================ */

/* Shared section shell */
.job-section {
    margin-top: 28px;
}
.job-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.job-section-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.job-section-marker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B8963E;
}
.job-section-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245, 240, 232, 0.36);
}
.section-empty {
    padding: 32px 20px;
    text-align: center;
    color: rgba(245, 240, 232, 0.36);
    font-size: 13px;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
}


/* ---- Tasks ---- */
.task-add-form {
    background: #232325;
    border: 1px solid rgba(184, 150, 62, 0.3);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.task-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.task-add-error {
    margin-top: 8px;
    font-size: 12px;
    color: #E58884;
}
.task-title-input {
    flex: 1;
    min-width: 180px;
    background: #1C1C1E;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}
.task-title-input:focus {
    outline: none;
    border-color: rgba(184, 150, 62, 0.5);
}
.task-select {
    background: #1C1C1E;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 7px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
}
.task-date-input {
    background: #1C1C1E;
    border: 1px solid rgba(245, 240, 232, 0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 7px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
}
.task-add-submit { font-size: 13px; padding: 7px 14px; }

.task-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.task-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 6px;
    transition: background 100ms;
}
.task-row:hover { background: #2A2A2C; }
.task-row--done { opacity: 0.55; }
.task-row--overdue .task-row { border-left-color: rgba(194, 84, 80, 0.5); }
.task-row--editing { border-color: rgba(184, 150, 62, 0.35); }

.task-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(245, 240, 232, 0.28);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ecf93;
    margin-top: 1px;
    transition: border-color 100ms, background 100ms;
}
.task-row--done .task-check {
    background: rgba(60, 140, 80, 0.2);
    border-color: rgba(60, 140, 80, 0.5);
}
.task-check:hover { border-color: #B8963E; }

.task-body { flex: 1; min-width: 0; }
.task-title {
    font-size: 14px;
    font-weight: 500;
    color: #F5F0E8;
    word-break: break-word;
}
.task-row--done .task-title {
    text-decoration: line-through;
    color: rgba(245, 240, 232, 0.48);
}
.task-details {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.55);
    margin-top: 3px;
    white-space: pre-wrap;
}
.task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    font-size: 11px;
}
.phase-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(245, 240, 232, 0.4);
    border: 1px solid rgba(245, 240, 232, 0.14);
    border-radius: 3px;
    padding: 1px 5px;
}
.priority-urgent { color: #E58884; font-weight: 600; }
.priority-high   { color: #D4975E; }
.priority-medium { color: rgba(245, 240, 232, 0.48); }
.priority-low    { color: rgba(245, 240, 232, 0.3); }
.task-area {
    color: rgba(245, 240, 232, 0.42);
    font-style: italic;
}
.task-due { color: rgba(245, 240, 232, 0.48); }
.task-due--overdue { color: #E58884; font-weight: 500; }

.task-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 120ms;
}
.task-row:hover .task-actions { opacity: 1; }
.task-edit-btn,
.task-delete-btn {
    background: transparent;
    border: 0;
    color: rgba(245, 240, 232, 0.4);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}
.task-edit-btn:hover  { color: #D4B055; background: rgba(184,150,62,0.1); }
.task-delete-btn:hover { color: #E58884; background: rgba(194,84,80,0.1); }

/* Inline task edit form */
.task-edit-form {
    background: rgba(184, 150, 62, 0.04);
    border: 1px solid rgba(184, 150, 62, 0.2);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 2px;
}
.task-edit-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.task-edit-row--details {
    gap: 8px;
}
.task-area-input {
    flex: 1;
    min-width: 120px;
    background: #1C1C1E;
    border: 1px solid rgba(245,240,232,0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
}
.task-details-input {
    flex: 2;
    min-width: 200px;
    background: #1C1C1E;
    border: 1px solid rgba(245,240,232,0.14);
    color: #F5F0E8;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    resize: vertical;
}
.task-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}


/* ---- Communications ---- */
.comm-add-form {
    background: #232325;
    border: 1px solid rgba(184, 150, 62, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 12px;
}
.comm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-bottom: 4px;
}
@media (max-width: 680px) {
    .comm-form-grid { grid-template-columns: 1fr; }
}

.comm-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.comm-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 6px;
    transition: background 100ms;
}
.comm-row:hover { background: #2A2A2C; }
.comm-row--followup {
    border-left: 3px solid rgba(213, 150, 50, 0.5);
}
.comm-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    width: 24px;
    text-align: center;
}
.comm-body { flex: 1; min-width: 0; }
.comm-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.comm-dir {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(245,240,232,0.4);
}
.comm-participant {
    font-size: 13px;
    font-weight: 600;
    color: #F5F0E8;
}
.comm-subject {
    font-size: 13px;
    color: rgba(245,240,232,0.64);
}
.comm-date {
    font-size: 11px;
    color: rgba(245,240,232,0.36);
    margin-left: auto;
}
.comm-summary,
.comm-decisions {
    font-size: 13px;
    color: rgba(245,240,232,0.64);
    line-height: 1.5;
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}
.comm-decisions strong { color: rgba(245,240,232,0.78); }
.comm-followup-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(184,150,62,0.08);
    border: 1px solid rgba(184,150,62,0.2);
    border-radius: 5px;
    font-size: 12px;
    color: #D4B055;
}
.comm-resolve-btn {
    background: transparent;
    border: 1px solid rgba(184,150,62,0.4);
    color: #B8963E;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 100ms;
}
.comm-resolve-btn:hover {
    background: rgba(184,150,62,0.15);
}
.comm-followup-resolved {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(60,140,80,0.7);
}
.comm-actions {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 120ms;
}
.comm-row:hover .comm-actions { opacity: 1; }
.comm-delete-btn {
    background: transparent;
    border: 0;
    color: rgba(245,240,232,0.36);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}
.comm-delete-btn:hover { color: #E58884; background: rgba(194,84,80,0.1); }

/* Checkbox label (comm form follow-up toggle) */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(245, 240, 232, 0.78);
    cursor: pointer;
    user-select: none;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #B8963E;
    cursor: pointer;
}

/* Inline comm edit form */
.comm-edit-form {
    background: rgba(184, 150, 62, 0.04);
    border: 1px solid rgba(184, 150, 62, 0.2);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 4px;
}
.comm-edit-error {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(194, 84, 80, 0.12);
    border: 1px solid rgba(194, 84, 80, 0.4);
    color: #E58884;
    font-size: 13px;
    border-radius: 5px;
}
.comm-row--editing {
    border-color: rgba(184, 150, 62, 0.35);
}
.comm-edit-btn {
    background: transparent;
    border: 0;
    color: rgba(245, 240, 232, 0.4);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
}
.comm-edit-btn:hover { color: #D4B055; background: rgba(184,150,62,0.1); }

/* Inline detail links (e.g. client name on job detail) */
.detail-link {
    color: #D4B055;
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 176, 85, 0.4);
}
.detail-link:hover {
    color: #F5D78E;
    border-bottom-color: rgba(212, 176, 85, 0.8);
}

/* Table cell links (e.g. client name in jobs list) */
.table-link {
    color: rgba(245, 240, 232, 0.78);
    text-decoration: none;
}
.table-link:hover {
    color: #D4B055;
    text-decoration: underline;
}


/* ============================================================
   Batch 3f — bills section
   ============================================================ */

/* Summary line above the bills list */
.bills-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 12px;
    font-size: 13px;
    color: rgba(245, 240, 232, 0.6);
}
.bills-summary-sep {
    color: rgba(245, 240, 232, 0.24);
}

/* Add bill form grid */
.bill-add-form {
    background: #232325;
    border: 1px solid rgba(184, 150, 62, 0.3);
    border-radius: 8px;
    padding: 18px 20px 12px;
    margin-bottom: 12px;
}
.bill-edit-form {
    background: rgba(184, 150, 62, 0.04);
    border: 1px solid rgba(184, 150, 62, 0.2);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 2px;
}
.bill-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-bottom: 4px;
}
@media (max-width: 640px) {
    .bill-form-grid { grid-template-columns: 1fr; }
}
.bill-edit-error {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(194, 84, 80, 0.12);
    border: 1px solid rgba(194, 84, 80, 0.4);
    color: #E58884;
    font-size: 13px;
    border-radius: 5px;
}

/* Bill list */
.bill-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bill-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 6px;
    transition: background 100ms;
}
.bill-row:hover { background: #2A2A2C; }
.bill-row--overdue { border-left: 3px solid rgba(194, 84, 80, 0.5); }
.bill-row--paid { opacity: 0.65; }
.bill-row--editing { border-color: rgba(184, 150, 62, 0.35); }

.bill-body { flex: 1; min-width: 0; }
.bill-vendor-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.bill-vendor {
    font-size: 14px;
    font-weight: 500;
    color: #F5F0E8;
}
.bill-invoice {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245, 240, 232, 0.42);
}
.bill-category {
    font-size: 11px;
    color: rgba(245, 240, 232, 0.42);
    border: 1px solid rgba(245, 240, 232, 0.12);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bill-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: rgba(245, 240, 232, 0.55);
}
.bill-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: rgba(245, 240, 232, 0.78);
}
.bill-due { color: rgba(245, 240, 232, 0.48); }
.bill-due--overdue { color: #E58884; font-weight: 500; }
.bill-outstanding {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #D4B055;
}
.bill-desc { font-style: italic; }

.bill-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Bill status badges */
.bill-status-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.bill-status-unpaid {
    background: rgba(194, 84, 80, 0.15);
    border: 1px solid rgba(194, 84, 80, 0.4);
    color: #E58884;
}
.bill-status-partial {
    background: rgba(184, 150, 62, 0.14);
    border: 1px solid rgba(184, 150, 62, 0.4);
    color: #D4B055;
}
.bill-status-paid {
    background: rgba(60, 140, 80, 0.14);
    border: 1px solid rgba(60, 140, 80, 0.35);
    color: #7ecf93;
}
.bill-status-disputed {
    background: rgba(160, 80, 180, 0.14);
    border: 1px solid rgba(160, 80, 180, 0.4);
    color: #c49ee0;
}

/* Bill row action buttons */
.bill-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 120ms;
}
.bill-row:hover .bill-actions { opacity: 1; }
.bill-pay-btn,
.bill-edit-btn,
.bill-delete-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
}
.bill-pay-btn {
    color: #7ecf93;
    border: 1px solid rgba(60, 140, 80, 0.35);
}
.bill-pay-btn:hover {
    background: rgba(60, 140, 80, 0.12);
}
.bill-edit-btn {
    color: rgba(245, 240, 232, 0.4);
}
.bill-edit-btn:hover { color: #D4B055; background: rgba(184,150,62,0.1); }
.bill-delete-btn {
    color: rgba(245, 240, 232, 0.36);
}
.bill-delete-btn:hover { color: #E58884; background: rgba(194,84,80,0.1); }


/* ============================================================
   Batch 3g — selections section
   ============================================================ */

/* Add selection form */
.sel-add-form {
    background: #232325;
    border: 1px solid rgba(184, 150, 62, 0.3);
    border-radius: 8px;
    padding: 18px 20px 12px;
    margin-bottom: 12px;
}

/* Selection list */
.sel-list { display: flex; flex-direction: column; gap: 4px; }

/* Selection card */
.sel-card {
    background: #232325;
    border: 1px solid rgba(245, 240, 232, 0.07);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 120ms;
}
.sel-card--overdue  { border-left: 3px solid rgba(194, 84, 80, 0.5); }
.sel-card--decided  { opacity: 0.8; }
.sel-card--cancelled { opacity: 0.55; }
.sel-card--editing  { border-color: rgba(184, 150, 62, 0.35); }

.sel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
}
.sel-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    flex: 1;
    min-width: 0;
    padding: 0;
    color: #F5F0E8;
}
.sel-toggle:hover .sel-title { color: #D4B055; }
.sel-arrow {
    font-size: 10px;
    color: rgba(245, 240, 232, 0.4);
    flex-shrink: 0;
    transition: transform 120ms;
}
.sel-title {
    font-size: 14px;
    font-weight: 500;
    word-break: break-word;
    transition: color 120ms;
}
.sel-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}
.sel-cat-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(245, 240, 232, 0.4);
    border: 1px solid rgba(245, 240, 232, 0.12);
    border-radius: 3px;
    padding: 1px 6px;
}
.sel-area {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.48);
    font-style: italic;
}
.sel-deadline {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.48);
}
.sel-deadline--overdue { color: #E58884; font-weight: 500; }
.sel-chosen {
    font-size: 12px;
    color: #7ecf93;
    font-weight: 500;
}

/* Selection status badges */
.sel-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.sel-status-pending  { background: rgba(184,150,62,0.14); border: 1px solid rgba(184,150,62,0.4); color: #D4B055; }
.sel-status-review   { background: rgba(80,120,200,0.14); border: 1px solid rgba(80,120,200,0.4); color: #8aaee8; }
.sel-status-decided  { background: rgba(60,140,80,0.14);  border: 1px solid rgba(60,140,80,0.35); color: #7ecf93; }
.sel-status-cancelled{ background: rgba(245,240,232,0.05);border: 1px solid rgba(245,240,232,0.14);color: rgba(245,240,232,0.4); }

/* Card action buttons */
.sel-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 120ms;
}
.sel-card:hover .sel-card-actions { opacity: 1; }
.sel-edit-btn, .sel-delete-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
}
.sel-edit-btn   { color: rgba(245,240,232,0.4); }
.sel-edit-btn:hover   { color: #D4B055; background: rgba(184,150,62,0.1); }
.sel-delete-btn { color: rgba(245,240,232,0.36); }
.sel-delete-btn:hover { color: #E58884; background: rgba(194,84,80,0.1); }

/* Selection body (expanded) */
.sel-body { padding: 0 14px 14px; border-top: 1px solid rgba(245,240,232,0.05); }
.sel-description {
    font-size: 13px;
    color: rgba(245,240,232,0.6);
    line-height: 1.55;
    margin: 10px 0 12px;
    white-space: pre-wrap;
}

/* Selection edit form */
.sel-edit-form {
    background: rgba(184,150,62,0.04);
    border-top: 1px solid rgba(184,150,62,0.2);
    padding: 14px 16px;
}
.sel-edit-error {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(194,84,80,0.12);
    border: 1px solid rgba(194,84,80,0.4);
    color: #E58884;
    font-size: 13px;
    border-radius: 5px;
}

/* Options list */
.sel-options { margin: 8px 0 6px; }
.sel-opts-empty {
    font-size: 12px;
    color: rgba(245,240,232,0.36);
    padding: 6px 0 10px;
}
.sel-opt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    background: rgba(245,240,232,0.03);
    border: 1px solid rgba(245,240,232,0.05);
    margin-bottom: 3px;
    transition: background 100ms;
}
.sel-opt-row:hover { background: rgba(245,240,232,0.06); }
.sel-opt-row--chosen {
    background: rgba(60,140,80,0.08);
    border-color: rgba(60,140,80,0.25);
}
.sel-opt-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.sel-opt-name { font-size: 13px; font-weight: 500; color: #F5F0E8; }
.sel-opt-vendor { font-size: 12px; color: rgba(245,240,232,0.48); }
.sel-opt-cost {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(245,240,232,0.6);
}
.sel-chosen-badge {
    font-size: 11px;
    color: #7ecf93;
    font-weight: 600;
}
.sel-opt-actions { display: flex; gap: 4px; flex-shrink: 0; }
.sel-choose-btn {
    background: transparent;
    border: 1px solid rgba(60,140,80,0.35);
    color: #7ecf93;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 100ms;
}
.sel-choose-btn:hover { background: rgba(60,140,80,0.12); }
.sel-opt-delete-btn {
    background: transparent;
    border: 0;
    color: rgba(245,240,232,0.3);
    cursor: pointer;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 4px;
}
.sel-opt-delete-btn:hover { color: #E58884; background: rgba(194,84,80,0.1); }

/* Add option form */
.sel-opt-add-form {
    background: rgba(245,240,232,0.02);
    border: 1px solid rgba(245,240,232,0.07);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 6px;
}
.sel-opt-error {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(194,84,80,0.12);
    border: 1px solid rgba(194,84,80,0.4);
    color: #E58884;
    font-size: 12px;
    border-radius: 4px;
}
.sel-opt-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sel-opt-add-row input {
    background: #1C1C1E;
    border: 1px solid rgba(245,240,232,0.14);
    color: #F5F0E8;
    border-radius: 5px;
    padding: 6px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
}
.sel-opt-add-row input:focus {
    outline: none;
    border-color: rgba(184,150,62,0.5);
}
.sel-opt-add-row .so-name   { flex: 2; min-width: 140px; }
.sel-opt-add-row .so-vendor { flex: 1; min-width: 100px; }
.sel-opt-add-row .so-cost,
.sel-opt-add-row .so-qty    { width: 80px; }
.sel-opt-add-trigger { margin-top: 4px; }


/* ============================================================
   Batch 3i — appointments on job detail
   ============================================================ */

/* Inline add/edit form on job detail */
.appt-add-form {
    background: #232325;
    border: 1px solid rgba(184, 150, 62, 0.3);
    border-radius: 8px;
    padding: 18px 20px 12px;
    margin-bottom: 12px;
}

/* Appointment list on job detail — reuses calendar row styles
   from cpm-calendar.css; these are already on the server.
   Only the list container needs a local style. */
.appt-job-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


/* ============================================================
   Batch 3l — site visits
   ============================================================ */

/* Compact site visits list on job detail */
.sv-job-list { display: flex; flex-direction: column; gap: 3px; }

.sv-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #232325;
    border: 1px solid rgba(245,240,232,0.07);
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms;
}
.sv-row:hover { background: #2A2A2C; }

.sv-date {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(245,240,232,0.55);
    width: 90px;
}
.sv-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.sv-weather {
    font-size: 12px;
    color: rgba(245,240,232,0.48);
    font-style: italic;
    flex-shrink: 0;
}
.sv-summary {
    font-size: 13px;
    color: rgba(245,240,232,0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-link {
    flex-shrink: 0;
    font-size: 12px;
    color: #D4B055;
    text-decoration: none;
    opacity: 0;
    transition: opacity 120ms;
}
.sv-row:hover .sv-link { opacity: 1; }
.sv-more {
    padding: 8px 14px;
    font-size: 12px;
}
.sv-more a {
    color: #D4B055;
    text-decoration: none;
}
.sv-more a:hover { text-decoration: underline; }

/* Full-page field report sections */
.sv-field-value {
    padding: 10px 0;
    white-space: pre-wrap;
    line-height: 1.6;
}


/* ============================================================
   Batch 3m — photos
   ============================================================ */

/* Photo count + budget in section header */
.photo-budget-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245,240,232,0.42);
    margin-left: 4px;
}
.photo-budget-over { color: #E58884; }

/* Upload panel */
.photo-upload-panel {
    background: #232325;
    border: 1px solid rgba(184,150,62,0.3);
    border-radius: 8px;
    padding: 18px 20px 12px;
    margin-bottom: 14px;
}
.photo-upload-drop {
    border: 2px dashed rgba(245,240,232,0.15);
    border-radius: 6px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.photo-upload-drop.drag-over {
    border-color: rgba(184,150,62,0.6);
    background: rgba(184,150,62,0.05);
}
.photo-drop-inner svg { opacity: 0.4; margin-bottom: 8px; }
.photo-drop-inner p   { margin: 4px 0; font-size: 13px; color: rgba(245,240,232,0.6); }
.photo-drop-hint      { font-size: 11px !important; color: rgba(245,240,232,0.36) !important; }
.photo-browse-link {
    color: #D4B055;
    cursor: pointer;
    text-decoration: underline;
}

/* Upload queue */
.photo-upload-queue { margin: 10px 0 0; }
.photo-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(245,240,232,0.06);
}
.photo-queue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(245,240,232,0.72); }
.photo-queue-size { color: rgba(245,240,232,0.38); flex-shrink: 0; }
.photo-queue-status { flex-shrink: 0; font-size: 11px; color: rgba(245,240,232,0.45); }

/* Photo tile grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    margin-top: 4px;
}
.photo-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    background: #1A1A1C;
}
.photo-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 200ms;
}
.photo-tile:hover .photo-tile-img { transform: scale(1.04); }
.photo-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 6px;
    gap: 4px;
    flex-wrap: wrap;
}
.photo-stage-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(0,0,0,0.6);
    color: #D4B055;
    padding: 2px 5px;
    border-radius: 3px;
}
.photo-job-label {
    font-size: 10px;
    background: rgba(0,0,0,0.6);
    color: rgba(245,240,232,0.8);
    padding: 2px 5px;
    border-radius: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lightbox */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
}
.lb-shell {
    position: relative;
    display: flex;
    gap: 0;
    width: min(1100px, 96vw);
    height: min(700px, 90vh);
    background: #1C1C1E;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.lb-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(0,0,0,0.5);
    border: 0;
    color: rgba(245,240,232,0.7);
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lb-close:hover { color: #F5F0E8; background: rgba(0,0,0,0.7); }
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: 0;
    color: rgba(245,240,232,0.7);
    font-size: 28px;
    width: 42px;
    height: 60px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 100ms;
}
.lb-nav:hover { background: rgba(0,0,0,0.7); color: #F5F0E8; }
.lb-prev { left: 8px; }
.lb-next { right: 260px; }
.lb-image-wrap {
    flex: 1;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}
.lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.lb-info {
    width: 248px;
    flex-shrink: 0;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    border-left: 1px solid rgba(245,240,232,0.07);
}
.lb-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lb-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(245,240,232,0.36);
    margin-left: auto;
}
.lb-desc {
    font-size: 13px;
    color: rgba(245,240,232,0.72);
    line-height: 1.5;
    margin: 0;
}
.lb-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lb-meta-item {
    font-size: 11px;
    color: rgba(245,240,232,0.42);
}
.lb-job-link {
    font-size: 12px;
    color: #D4B055;
    text-decoration: none;
}
.lb-job-link:hover { text-decoration: underline; }
.lb-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}
.lb-download { text-align: center; text-decoration: none; }

@media (max-width: 640px) {
    .lb-shell {
        flex-direction: column;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
    .lb-image-wrap { flex: 1; }
    .lb-info { width: 100%; border-left: 0; border-top: 1px solid rgba(245,240,232,0.07); }
    .lb-next { right: 8px; }
}


/* ============================================================
   Fix — selections mobile layout
   ============================================================
   .sel-toggle needs min-width:0 so it can shrink properly
   as a flex child. Without it, the title container collapses
   to near-zero on narrow viewports and text breaks vertically.
   ============================================================ */
.sel-toggle {
    min-width: 0;
}
.sel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On mobile, stack the header so the title gets the full width
   and the meta badges wrap below it */
@media (max-width: 600px) {
    .sel-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .sel-toggle {
        width: 100%;
        order: 1;
    }
    .sel-header-meta {
        order: 2;
        flex-shrink: 1;
    }
    .sel-card-actions {
        order: 3;
        opacity: 1;   /* always visible on touch — no hover state */
    }
}


/* ============================================================
   Fix — lightbox close button blocked on mobile
   ============================================================
   z-index:2 was losing to the stacking context created by the
   flex image wrap. Raised to 100 and added minimum touch target.
   ============================================================ */
.lb-close {
    z-index: 100;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}


/* Fix — lb-close on mobile Safari
   overflow:hidden on .lb-shell blocks touch on position:absolute
   children. Switch to position:fixed on mobile so the button
   lives outside the shell's stacking/clipping context. */
@media (max-width: 640px) {
    .lb-close {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1001;
    }
}


/* ============================================================
   Fix — close button moved outside lb-shell in HTML.
   Now a direct child of .photo-lightbox (position:fixed).
   Use position:fixed so it always sits at top-right of viewport,
   unaffected by lb-shell overflow:hidden or stacking context.
   ============================================================ */
.photo-lightbox > .lb-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1001;
}
.lb-counter-line {
    margin-top: 2px;
}


/* ============================================================
   Batch 3n — documents
   ============================================================ */

.doc-job-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #232325;
    border: 1px solid rgba(245,240,232,0.07);
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms;
}
.doc-row:hover { background: #2A2A2C; }
.doc-row--expired {
    border-color: rgba(229,136,132,0.35);
    background: rgba(229,136,132,0.06);
}

.doc-cat-chip {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(212,176,85,0.12);
    color: #D4B055;
    min-width: 70px;
    text-align: center;
}
.doc-cat-contract     { background: rgba(126,207,147,0.12); color: #7ECF93; }
.doc-cat-plan         { background: rgba(146,178,226,0.12); color: #92B2E2; }
.doc-cat-coi          { background: rgba(229,136,132,0.12); color: #E58884; }
.doc-cat-w9           { background: rgba(212,176,85,0.12); color: #D4B055; }
.doc-cat-license      { background: rgba(212,176,85,0.12); color: #D4B055; }
.doc-cat-warranty     { background: rgba(146,178,226,0.12); color: #92B2E2; }
.doc-cat-permit_doc   { background: rgba(229,136,132,0.12); color: #E58884; }
.doc-cat-spec_sheet   { background: rgba(146,178,226,0.12); color: #92B2E2; }
.doc-cat-other        { background: rgba(245,240,232,0.08); color: rgba(245,240,232,0.6); }

.doc-body {
    flex: 1;
    min-width: 0;
}
.doc-title {
    font-size: 14px;
    color: #F5F0E8;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-meta-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 3px;
    font-size: 11px;
    color: rgba(245,240,232,0.48);
}
.doc-filename {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(245,240,232,0.42);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.doc-size { color: rgba(245,240,232,0.38); }
.doc-job-link {
    color: #D4B055;
    text-decoration: none;
    font-weight: 500;
}
.doc-job-link:hover { text-decoration: underline; }
.doc-job-general {
    color: rgba(245,240,232,0.45);
    font-style: italic;
}
.doc-expires {
    color: rgba(245,240,232,0.55);
    font-weight: 500;
}
.doc-expires--expired {
    color: #E58884;
    font-weight: 600;
}
.doc-link {
    flex-shrink: 0;
    font-size: 12px;
    color: #D4B055;
    text-decoration: none;
    opacity: 0;
    transition: opacity 120ms;
}
.doc-row:hover .doc-link { opacity: 1; }

/* On mobile, always show the View → link */
@media (max-width: 600px) {
    .doc-link { opacity: 1; }
    .doc-row { flex-wrap: wrap; }
    .doc-filename { max-width: 100%; }
}

/* Document preview (PDFs, images) on detail page */
.doc-preview-container {
    background: #1A1A1C;
    border-radius: 6px;
    overflow: hidden;
}
.doc-preview-pdf {
    width: 100%;
    height: 720px;
    border: 0;
    background: #fff;
}
.doc-preview-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 640px) {
    .doc-preview-pdf { height: 480px; }
}


/* ============================================================
   Batch 3o — receipt photos on bills
   ============================================================ */

/* Receipt section inside bill add/edit forms */
.bill-receipt-section {
    background: #1A1A1C;
    border: 1px solid rgba(245,240,232,0.07);
    border-radius: 6px;
    padding: 10px 12px;
}

.bill-receipt-empty {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bill-receipt-attached {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bill-receipt-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    background: #111;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid rgba(245,240,232,0.1);
}
.bill-receipt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bill-receipt-label {
    font-size: 13px;
    color: rgba(245,240,232,0.72);
}
.bill-receipt-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bill-receipt-error {
    margin-top: 6px;
    color: #E58884;
    font-size: 12px;
}

/* Receipt thumbnail pill on bill rows */
.bill-receipt-pill {
    background: none;
    border: 1px solid rgba(245,240,232,0.1);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: border-color 100ms;
}
.bill-receipt-pill:hover { border-color: rgba(184,150,62,0.5); }
.bill-receipt-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Receipt picker modal */
.receipt-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.receipt-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    cursor: pointer;
}
.receipt-picker-shell {
    position: relative;
    background: #1C1C1E;
    border-radius: 10px;
    width: min(800px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    overflow: hidden;
}
.receipt-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(245,240,232,0.07);
}
.receipt-picker-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.receipt-picker-close {
    background: rgba(0,0,0,0.45);
    border: 0;
    color: rgba(245,240,232,0.7);
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.receipt-picker-close:hover { color: #F5F0E8; background: rgba(0,0,0,0.7); }
.receipt-picker-body {
    padding: 16px 20px;
    overflow-y: auto;
}
.receipt-picker-empty {
    padding: 28px 20px;
    text-align: center;
    color: rgba(245,240,232,0.5);
    font-size: 13px;
}
.receipt-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.receipt-picker-tile {
    background: #1A1A1C;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    aspect-ratio: 1;
    position: relative;
    transition: border-color 120ms;
}
.receipt-picker-tile:hover { border-color: rgba(184,150,62,0.5); }
.receipt-picker-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.receipt-picker-tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    font-size: 11px;
    color: #F5F0E8;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .bill-receipt-empty { flex-direction: column; align-items: stretch; }
    .receipt-picker-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}


/* ============================================================
   Batch 3p — aggregated list pages (bills, tasks, selections)
   Shared .bills-table layout used by all three.
   ============================================================ */

/* Stats line at top of list pages */
.page-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}
.page-meta-stat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: rgba(245,240,232,0.6);
    letter-spacing: 0.04em;
}
.page-meta-stat--alert {
    color: #E58884;
    font-weight: 600;
}

/* Table layout used by bills/tasks/selections list pages */
.bills-table {
    background: #1A1A1C;
    border-radius: 6px;
    border: 1px solid rgba(245,240,232,0.05);
    overflow: hidden;
}
.bills-table-head {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1.1fr 1fr 1.5fr 1.2fr;
    background: rgba(245,240,232,0.03);
    border-bottom: 1px solid rgba(245,240,232,0.08);
}
.bills-table-body {
    display: flex;
    flex-direction: column;
}
.bills-table-row {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1.1fr 1fr 1.5fr 1.2fr;
    border-bottom: 1px solid rgba(245,240,232,0.04);
    cursor: pointer;
    transition: background 100ms;
}
.bills-table-row:hover { background: rgba(245,240,232,0.025); }
.bills-table-row:last-child { border-bottom: 0; }
.bills-table-row--overdue {
    background: rgba(229,136,132,0.04);
    border-left: 2px solid #E58884;
}
.bills-table-row--overdue:hover {
    background: rgba(229,136,132,0.07);
}
.bills-table-cell {
    padding: 12px 14px;
    font-size: 13px;
    color: #F5F0E8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.bills-table-head .bills-table-cell {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245,240,232,0.45);
    padding: 10px 14px;
}
.bills-table-sortable {
    cursor: pointer;
    user-select: none;
}
.bills-table-sortable:hover {
    color: rgba(245,240,232,0.7);
}
.bills-table-vendor {
    font-weight: 500;
    color: #F5F0E8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bills-table-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(245,240,232,0.45);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bills-table-muted {
    color: rgba(245,240,232,0.35);
}
.bills-table-job-link {
    color: #D4B055;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-actions {
    align-items: flex-end;
    justify-content: center;
}
.col-actions .bill-pay-btn {
    font-size: 11px;
    padding: 5px 10px;
}

/* Priority badges (used on tasks list) */
.priority-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.priority-urgent { background: rgba(229,136,132,0.15); color: #E58884; }
.priority-high   { background: rgba(212,176,85,0.15); color: #D4B055; }
.priority-medium { background: rgba(245,240,232,0.07); color: rgba(245,240,232,0.65); }
.priority-low    { background: rgba(245,240,232,0.04); color: rgba(245,240,232,0.45); }

/* Task status badges */
.task-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.task-status-open         { background: rgba(146,178,226,0.12); color: #92B2E2; }
.task-status-in-progress  { background: rgba(212,176,85,0.15);  color: #D4B055; }
.task-status-complete     { background: rgba(126,207,147,0.15); color: #7ECF93; }
.task-status-cancelled    { background: rgba(245,240,232,0.07); color: rgba(245,240,232,0.45); }

/* Selection status badges */
.sel-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.sel-status-pending     { background: rgba(146,178,226,0.12); color: #92B2E2; }
.sel-status-in-review   { background: rgba(212,176,85,0.15);  color: #D4B055; }
.sel-status-decided     { background: rgba(126,207,147,0.15); color: #7ECF93; }
.sel-status-cancelled   { background: rgba(245,240,232,0.07); color: rgba(245,240,232,0.45); }

/* Selection category chips */
.sel-category-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.sel-cat-fixture   { background: rgba(146,178,226,0.12); color: #92B2E2; }
.sel-cat-finish    { background: rgba(212,176,85,0.12);  color: #D4B055; }
.sel-cat-appliance { background: rgba(229,136,132,0.10); color: #E58884; }
.sel-cat-material  { background: rgba(126,207,147,0.10); color: #7ECF93; }
.sel-cat-color     { background: rgba(245,240,232,0.08); color: rgba(245,240,232,0.7); }
.sel-cat-hardware  { background: rgba(212,176,85,0.10);  color: #D4B055; }
.sel-cat-other     { background: rgba(245,240,232,0.05); color: rgba(245,240,232,0.5); }

.bill-due-overdue {
    color: #E58884;
    font-weight: 600;
}

/* Bill status badges if not already defined in earlier batches */
.bill-status-badge.status-unpaid   { background: rgba(229,136,132,0.12); color: #E58884; }
.bill-status-badge.status-partial  { background: rgba(212,176,85,0.15);  color: #D4B055; }
.bill-status-badge.status-paid     { background: rgba(126,207,147,0.15); color: #7ECF93; }
.bill-status-badge.status-disputed { background: rgba(146,178,226,0.12); color: #92B2E2; }

/* Mobile: collapse table to stacked cards */
@media (max-width: 800px) {
    .bills-table-head { display: none; }
    .bills-table-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title    amount"
            "status   due"
            "job      actions";
        gap: 4px;
        padding: 10px 12px;
    }
    .bills-table-cell {
        padding: 2px 0;
    }
    .col-title,    .col-priority { grid-area: title;   }
    .col-amount,   .col-due      { grid-area: amount;  }
    .col-status                  { grid-area: status;  }
    .col-job                     { grid-area: job;     }
    .col-actions                 { grid-area: actions; align-items: flex-end; }

    /* For tasks: title and priority share row, due and status share row */
    [data-page="tasks-list"] .bills-table-row,
    [data-page="selections-list"] .bills-table-row {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "title  priority"
            "due    status"
            "job    actions";
    }
    [data-page="tasks-list"] .col-priority,
    [data-page="selections-list"] .col-priority { grid-area: priority; align-items: flex-end; }
    [data-page="tasks-list"] .col-due,
    [data-page="selections-list"] .col-due { grid-area: due; }
}

@media (max-width: 500px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .filter-search { width: 100%; }
}


/* ============================================================
   Batch 3p2 — clickable resolved badge + reusable confirm modal
   ============================================================ */

/* Make the resolved badge look interactive */
.comm-followup-resolved {
    background: rgba(126,207,147,0.08);
    color: #7ECF93;
    border: 1px solid rgba(126,207,147,0.18);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 100ms, border-color 100ms;
    display: inline-block;
    margin-top: 6px;
}
.comm-followup-resolved:hover {
    background: rgba(126,207,147,0.14);
    border-color: rgba(126,207,147,0.32);
}
.comm-followup-resolved:focus {
    outline: 2px solid rgba(184,150,62,0.55);
    outline-offset: 2px;
}

/* Reusable confirm modal */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
}
.confirm-modal-shell {
    position: relative;
    background: #1C1C1E;
    border: 1px solid rgba(245,240,232,0.1);
    border-radius: 10px;
    width: min(480px, 100%);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.confirm-modal-body {
    padding: 22px 24px 16px;
}
.confirm-modal-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
    color: #F5F0E8;
}
.confirm-modal-msg {
    margin: 0;
    font-size: 14px;
    color: rgba(245,240,232,0.72);
    line-height: 1.5;
}
.confirm-modal-msg:empty {
    display: none;
}
.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(245,240,232,0.06);
}

/* ──────────────────────────────────────────────────────────────
   USER ATTRIBUTION CHIP — Phase A
   Small initials avatar shown on records to indicate who last
   touched them. Hovering shows full display name via title attr.
   Used inline within meta lines on tasks, comms, bills, etc.
   ────────────────────────────────────────────────────────────── */
.user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(184, 150, 62, 0.18);
  border: 1px solid rgba(184, 150, 62, 0.32);
  color: #D4B055;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: default;
  flex-shrink: 0;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

.user-chip:hover {
  background: rgba(184, 150, 62, 0.28);
}

/* Specific spacing tweaks where the chip lands next to other meta */
.comm-head .user-chip,
.task-meta .user-chip,
.bill-meta-line .user-chip,
.appt-meta-line .user-chip,
.sv-body .user-chip,
.doc-meta-line .user-chip,
.sel-header-meta .user-chip {
  margin-left: 4px;
}

/* ──────────────────────────────────────────────────────────────
   SITE ACCESS — Job detail
   ────────────────────────────────────────────────────────────── */
.detail-value--access {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(184, 150, 62, 0.06);
  border: 1px solid rgba(184, 150, 62, 0.18);
  border-radius: 6px;
  padding: 10px 12px;
  color: #F5F0E8;
}

/* ──────────────────────────────────────────────────────────────
   TASK ADD FORM — notes row
   ────────────────────────────────────────────────────────────── */
.task-add-row--notes {
  margin-top: 6px;
}

.task-notes-input {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  resize: vertical;
  min-height: 54px;
}

/* ──────────────────────────────────────────────────────────────
   FILTER BAR — select element dark theme
   color-scheme: dark tells the OS (macOS, Windows) to apply dark
   system colors to native form elements. Without it, the OS
   overrides background-color on <select> regardless of appearance.
   !important is required because browser UA stylesheets for form
   elements have high specificity.
   ────────────────────────────────────────────────────────────── */
.filter-bar select,
.filter-search select {
  color-scheme: dark;
  background-color: #232325 !important;
  border: 1px solid rgba(245, 240, 232, 0.14) !important;
  color: #F5F0E8 !important;
  border-radius: 6px;
  padding: 8px 28px 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(245,240,232,0.45)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer;
  min-width: 130px;
}

.filter-bar select:focus,
.filter-search select:focus {
  outline: none;
  border-color: rgba(184, 150, 62, 0.5) !important;
  background-color: #2A2A2C !important;
}

.filter-bar select option,
.filter-search select option {
  background-color: #232325;
  color: #F5F0E8;
}

/* ──────────────────────────────────────────────────────────────
   COMMUNICATIONS LIST PAGE
   ────────────────────────────────────────────────────────────── */
.comm-list-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245,240,232,0.06);
  cursor: pointer;
  transition: background 100ms;
  border-radius: 4px;
}
.comm-list-row:last-child { border-bottom: 0; }
.comm-list-row:hover { background: rgba(245,240,232,0.03); }

.comm-list-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding-top: 2px;
}
.comm-list-type-icon { font-size: 18px; line-height: 1; }
.comm-list-dir {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(245,240,232,0.35);
}

.comm-list-body { flex: 1; min-width: 0; }

.comm-list-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.comm-list-participant {
  font-size: 14px;
  font-weight: 600;
  color: #F5F0E8;
}
.comm-list-job {
  font-size: 12px;
  color: #D4B055;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
}
.comm-list-job:hover { text-decoration: underline; }
.comm-list-date {
  font-size: 12px;
  color: rgba(245,240,232,0.4);
  margin-left: auto;
  white-space: nowrap;
}
.comm-list-summary {
  font-size: 13px;
  color: rgba(245,240,232,0.65);
  line-height: 1.5;
}
.comm-list-followup-text {
  font-size: 12px;
  color: #D4B055;
  font-style: italic;
  margin-top: 4px;
}

.follow-up-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.follow-up-badge--open {
  background: rgba(229,136,132,0.14);
  border: 1px solid rgba(229,136,132,0.3);
  color: #E58884;
}
.follow-up-badge--resolved {
  background: rgba(126,207,147,0.1);
  border: 1px solid rgba(126,207,147,0.25);
  color: #7ECF93;
}

.filter-search-input {
  background: #232325;
  border: 1px solid rgba(245,240,232,0.14);
  color: #F5F0E8;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  min-width: 220px;
}
.filter-search-input:focus {
  outline: none;
  border-color: rgba(184,150,62,0.5);
  background: #2A2A2C;
}
.filter-search-input::placeholder { color: rgba(245,240,232,0.36); }

/* ──────────────────────────────────────────────────────────────
   USER ASSIGNMENT — task assigned-to chip + select
   Blue tint distinguishes "assigned to" from the gold "edited by"
   user-chip. Both can appear on the same task row.
   ────────────────────────────────────────────────────────────── */
.user-assign-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(146, 178, 226, 0.18);
  border: 1px solid rgba(146, 178, 226, 0.35);
  color: #92B2E2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: default;
  flex-shrink: 0;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
  margin-left: 4px;
}
.user-assign-chip:hover {
  background: rgba(146, 178, 226, 0.28);
}

/* The assign dropdown in task add/edit forms */
.task-assign-select {
  min-width: 130px;
  max-width: 180px;
  color-scheme: dark;
  background-color: #232325 !important;
  border: 1px solid rgba(146, 178, 226, 0.25) !important;
  color: #92B2E2 !important;
}
.task-assign-select:focus {
  border-color: rgba(146, 178, 226, 0.5) !important;
}

/* Notes row in task add form — select + textarea side by side */
.task-add-row--notes {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
}
.task-notes-input {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  resize: vertical;
  min-height: 54px;
}

/* ──────────────────────────────────────────────────────────────
   TASK ASSIGNMENT LABEL
   "Assigned to: [chip]" — replaces the bare blue circle so the
   meaning is immediately clear at a glance.
   ────────────────────────────────────────────────────────────── */
.task-assigned-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(245, 240, 232, 0.45);
  margin-left: 4px;
  white-space: nowrap;
}

/* Blue-tinted chip variant used for assignment (vs gold for "edited by") */
.user-chip--assign {
  background: rgba(146, 178, 226, 0.18);
  border-color: rgba(146, 178, 226, 0.35);
  color: #92B2E2;
  margin-left: 0;
}
.user-chip--assign:hover {
  background: rgba(146, 178, 226, 0.28);
}

/* Green-tinted chip for "Created by" — third distinct color in the trio */
.user-chip--created {
  background: rgba(126, 207, 147, 0.14);
  border-color: rgba(126, 207, 147, 0.32);
  color: #7ECF93;
  margin-left: 0;
}
.user-chip--created:hover {
  background: rgba(126, 207, 147, 0.24);
}