/* ============================================================
   5.X Organisation Management (HuoMa HQ control plane)
   ============================================================ */
#organisationManagementContent .om-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
#organisationManagementContent .om-header h2 { margin: 0; }
#organisationManagementContent .om-intro {
    font-size: var(--font-size-small);
    margin: 0 0 18px;
}
#organisationManagementContent .om-group { margin-bottom: 22px; }
#organisationManagementContent .om-group-title {
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
#organisationManagementContent .om-org-list {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
#organisationManagementContent .om-org-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
#organisationManagementContent .om-org-row:last-child { border-bottom: none; }
#organisationManagementContent .om-org-row:hover { background: var(--color-bg); }
#organisationManagementContent .om-org-name {
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#organisationManagementContent .om-org-meta {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin-top: 3px;
}
#organisationManagementContent .om-org-chevron {
    color: var(--color-text-light);
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}
#organisationManagementContent .om-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
#organisationManagementContent .om-badge-superadmin {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
#organisationManagementContent .om-badge-parent {
    background: transparent;
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
#organisationManagementContent .om-badge-regular {
    background: transparent;
    color: var(--color-text-light);
    border-color: var(--color-border);
}
/* Form */
#organisationManagementContent .om-form-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
#organisationManagementContent .om-form-head h3 { margin: 0; font-size: var(--font-size-body); }
#organisationManagementContent .om-form { max-width: 520px; }
#organisationManagementContent .om-field { margin-bottom: 16px; }
#organisationManagementContent .om-label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-small);
    margin-bottom: 6px;
    color: var(--color-text);
}
#organisationManagementContent .om-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
    color: var(--color-text);
    font: inherit;
}
#organisationManagementContent .om-field-static {
    padding: 9px 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#organisationManagementContent .om-inline-link {
    font-size: var(--font-size-small);
    color: var(--color-primary);
    text-decoration: none;
}
#organisationManagementContent .om-inline-link:hover { text-decoration: underline; }
#organisationManagementContent .om-help {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin: 6px 0 0;
}
#organisationManagementContent .om-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
}
#organisationManagementContent .om-status { font-size: var(--font-size-small); color: var(--color-text-light); }

/* Print rules - only the .payslip-pdf or .invoice-detail-print-wrapper visible */
@media print {
    body * { visibility: hidden; }
    .payslip-pdf, .payslip-pdf *,
    .invoice-detail-print-wrapper, .invoice-detail-print-wrapper * {
        visibility: visible;
    }
    .modal-overlay {
        position: static;
        background: transparent;
        display: block !important;
    }
    .modal {
        max-width: 100% !important;
        box-shadow: none;
    }
    .modal-close,
    .invoice-detail-actions,
    .payslip-detail-actions { display: none !important; }
    .payslip-pdf, .invoice-detail-print-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

/* ═══ Attendance Summary ═══ */
/* Attendance Summary — month calendar picker (inside the date modal) */
.att-cal-wrap { margin-top: 4px; }
.att-cal-wrap .cal-grid { margin-top: 2px; }
/* Numeric count chip shown under a day number in the picker grid */
.att-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-on-primary);
    background: var(--color-success);   /* checked-in (actual) — green */
    flex-shrink: 0;
}
.att-count-chip--legend { min-width: 16px; }
.att-cal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.att-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.att-summary-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.att-summary-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg);
    border-radius: 999px;
    padding: 4px;
}
.att-summary-step {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1.3rem;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.att-summary-step:hover:not(:disabled) { background: var(--color-card); }
.att-summary-step:disabled { opacity: 0.3; cursor: default; }
.att-summary-date {
    background: var(--color-card);
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    min-width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.att-summary-date-counts {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-light);
    min-height: 1em;
}
.att-summary-today {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--color-text-light);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.85rem;
}
.att-summary-today:hover {
    color: var(--color-text);
    border-color: var(--color-text-light);
}

.att-summary-banner {
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid rgba(255, 165, 0, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.att-summary-banner-text {
    color: var(--color-warning);
    font-weight: 500;
}
.att-summary-banner-text i { margin-right: 6px; }
.att-summary-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.att-summary-banner-action {
    background: transparent;
    border: none;
    color: var(--color-warning);
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    text-decoration: underline;
    font-size: 0.9rem;
}

.att-summary-counters {
    display: flex;
    gap: 36px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.att-summary-counter-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1;
}
.att-summary-counter-label {
    font-size: 0.72rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
}

.att-summary-filterbar {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 12px;
}
.att-summary-clear-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    text-decoration: underline;
}

.att-summary-list {
    display: flex;
    flex-direction: column;
}
.att-summary-row {
    display: grid;
    grid-template-columns: 52px 1fr 44px;
    grid-template-areas:
        "time main thumb"
        ".    status status";
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}
.att-summary-row:last-child { border-bottom: none; }
.att-summary-row-time {
    grid-area: time;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    font-weight: 500;
}
.att-summary-row-main {
    grid-area: main;
    min-width: 0;
}
.att-summary-row-name {
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-summary-row-meta {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: 2px;
}
.att-summary-row-status {
    grid-area: status;
    font-size: 0.82rem;
    color: var(--color-warning);
}
.att-summary-row-status i { margin-right: 4px; }
.att-summary-thumb {
    grid-area: thumb;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg);
}
.att-summary-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.att-summary-thumb-empty {
    color: var(--color-text-light);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Expected-attendance view (future dates) — gold accent so it reads clearly
   as "scheduled to attend", not actual check-ins. */
.att-summary-expected-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 12%, var(--color-card));
    border: 1px solid color-mix(in srgb, var(--cd-color-programme, #d4930a) 40%, var(--color-card));
}
.att-summary-expected-banner i { color: var(--cd-color-programme, #d4930a); }
.att-summary-row--expected {
    grid-template-columns: 1fr 44px;
    grid-template-areas: "main thumb";
    border-left: 3px solid var(--cd-color-programme, #d4930a);
    padding-left: 12px;
}
.att-expected-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-on-primary);
    background: var(--cd-color-programme, #d4930a);
}
.att-summary-thumb--avatar {
    border-radius: 50%;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.att-summary-photo-modal {
    max-width: 520px;
    padding: 0;
    background: var(--color-card);
    overflow: hidden;
}
.att-summary-photo-modal img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-bg);
}
.att-summary-photo-modal #attendancePhotoCaption {
    padding: 12px 16px;
    text-align: center;
    color: var(--color-text);
    font-weight: 500;
}

@media (max-width: 640px) {
    .att-summary-header {
        gap: 8px;
    }
    .att-summary-stepper {
        flex: 1;
        min-width: 0;
    }
    .att-summary-date {
        flex: 1;
        min-width: 0;
        padding: 8px 12px;
    }
}

/* ── Expense Claims upload options ── */
.ec-upload-options {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.ec-upload-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    gap: 6px;
}
.ec-upload-option:hover { border-color: var(--color-primary-light); }
.ec-upload-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.ec-upload-option__icon { font-size: 22px; color: var(--color-primary); line-height: 1; }
.ec-upload-option__label { font-size: var(--font-size-label); font-weight: 600; color: var(--color-text); line-height: 1.3; }
.ec-upload-dropzone {
    margin-bottom: 16px;
    border: 1.5px dashed var(--color-border);
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.ec-upload-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.ec-upload-dropzone.has-file {
    border-style: solid;
    padding: 12px;
}
.ec-upload-dropzone-hint {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.ec-upload-dropzone.has-file .ec-upload-dropzone-hint { display: none; }
/* Touch devices: no drag-and-drop - collapse the empty zone entirely */
@media (hover: none), (pointer: coarse) {
    .ec-upload-dropzone:not(.has-file) { display: none; }
}
.ec-upload-preview { margin-bottom: 0; display: none; text-align: center; }
.ec-upload-thumb { max-height: 120px; max-width: 100%; border-radius: 8px; object-fit: contain; }
.ec-upload-filename-pill {
    display: inline-block;
    padding: 6px 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: var(--font-size-small);
    color: var(--color-text);
    word-break: break-all;
    max-width: 100%;
}
@media (max-width: 380px) {
    .ec-upload-options { flex-direction: column; }
}
.ec-meta-pill {
    display: inline-block;
    padding: 1px 7px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 11px;
    color: var(--color-muted);
    margin-right: 4px;
    white-space: nowrap;
}
.ec-section-heading {
    font-size: var(--font-size-body);
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}
.ec-inline-input {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--font-size-body);
    background: var(--color-card);
    color: var(--color-text);
    transition: border-color 0.2s;
    max-width: 240px;
    width: 100%;
    box-sizing: border-box;
}
.ec-inline-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
/* Manage Expense Claims — Log action badges, AI-learning pills, vendor chips, summary chevron */
.ec-log-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-text-light);
}
.ec-log-badge--upload  { background: var(--color-primary); }
.ec-log-badge--edit    { background: var(--color-warning); }
.ec-log-badge--delete  { background: var(--color-danger); }
.ec-log-badge--restore { background: var(--color-success); }
.ec-learn-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: var(--font-size-small);
    font-weight: 600;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ec-vendor-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--font-size-small);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.ec-summary-chevron {
    display: inline-block;
    min-width: 9px;
    margin-right: 8px;
    font-size: 9px;
    opacity: 0.45;
}
/* Quiet row-delete icon — matches the inline edit pencil's muted weight,
   reddens only on hover (no wall of red on routine config rows). */
.ec-row-delete {
    border: none;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    font-size: var(--font-size-body);
    border-radius: 6px;
    transition: color 0.15s;
}
.ec-row-delete:hover { color: var(--color-danger); }

/* ============================================================
   Version Gate — bank-style force-update / minimum-version UI
   (js/version-gate.js). Theme-safe via var() tokens; sits above
   everything (modals included). Full-screen overlay = hard wall;
   bottom banner = dismissible soft nudge.
   ============================================================ */

/* Hard wall: non-dismissible full-screen block. Centred card, so safe-area
   insets are floored with max() — the card stays centred and never touches the
   notch / home indicator regardless of whether env() is 0 or ~34px. */
.version-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483600;            /* above modals, splash, everything */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    padding: max(24px, env(safe-area-inset-top, 0px), var(--sat-floor, 0px)) 24px
             max(24px, env(safe-area-inset-bottom, 0px), var(--sab-floor, 0px));
    -webkit-user-select: none;
    user-select: none;
}
.version-gate-card {
    width: 100%;
    max-width: 360px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--dt-card-radius);
    box-shadow: var(--color-shadow);
    padding: 32px 24px;
    text-align: center;
}
.version-gate-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 700;
    line-height: 56px;
}
.version-gate-title {
    margin: 0 0 8px;
    font-size: var(--font-size-heading);
    color: var(--color-title-color);
}
.version-gate-message {
    margin: 0 0 24px;
    font-size: var(--font-size-body);
    color: var(--color-text-light);
    line-height: 1.5;
}
.version-gate-btn { width: 100%; }
/* Freeze the page behind the wall. */
body.version-gate-locked { overflow: hidden; }

/* Soft nudge: dismissible bottom banner that slides up. */
.version-gate-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(16px, calc(max(env(safe-area-inset-bottom, 0px), var(--sab-floor, 0px)) + 12px));
    z-index: 2147483601;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--dt-card-radius);
    box-shadow: var(--color-shadow);
    padding: 14px 16px;
    transform: translateY(140%);
    opacity: 0;
    transition: transform var(--dur-enter, 220ms) var(--ease-out),
                opacity var(--dur-enter, 220ms) var(--ease-out);
}
.version-gate-banner.show { transform: translateY(0); opacity: 1; }
.version-gate-banner-body { flex: 1 1 200px; min-width: 0; }
.version-gate-banner-title {
    font-size: var(--font-size-label);
    font-weight: 600;
    color: var(--color-text);
}
.version-gate-banner-message {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    margin-top: 2px;
}
.version-gate-banner-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* ============================================================
   CRM board (build-out phase 1, docs/crm-design.md)
   ============================================================
   Kanban columns, one per huoma stage (enquiry through after_sales), plus
   a small collapsed Lost bucket at the end ("Lost is not a full column, to
   save width"). 8 full columns means the board is WIDER than canopy's
   5-column board, so this container MUST scroll horizontally with sticky
   column headers (huoma adaptation; canopy's board did not need a sticky
   header at 5 columns). Native HTML5 drag-and-drop on desktop; mobile/
   accessibility uses the detail view's stage select instead (no drag
   target on touch). Only CSS variables are used here so dark mode is
   inherited automatically. */
.crm-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.crm-board-col {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 280px;
    background: var(--color-bg, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--dt-card-radius);
    display: flex;
    flex-direction: column;
    transition: background-color 0.15s var(--ease-out, ease);
}
.crm-board-col-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--dt-card-radius) var(--dt-card-radius) 0 0;
    font-weight: 600;
    font-size: var(--font-size-label);
    color: var(--color-title-color, var(--color-text));
}
.crm-board-col-count {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-primary-soft);
    border-radius: 10px;
    padding: 1px 8px;
}
.crm-board-col-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    min-height: 80px;
}
.crm-col-empty {
    text-align: center;
    padding: 16px 4px;
}
.crm-board-col.crm-drop-hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* Every terminal-stage column (After Sales, Lost, 2026-08-01) is a normal
   column (same markup, width, borders, header height as every other stage);
   the only "this is a last stage" signal is one consistent muted flag icon
   plus a slightly quieted header, never a different shape or per-stage color
   (reduction over noise). Ported from canopy commit 52f311fa, itself
   generalizing huoma's original Lost-only marker (cc68fb3). */
.crm-board-col-terminal .crm-board-col-head {
    opacity: 0.72;
}
.crm-board-col-terminal-icon {
    color: var(--color-text-light);
    font-size: 12px;
}

.crm-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--dt-card-radius) - 4px);
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: var(--color-shadow, none);
    transition: transform 0.1s var(--ease-out, ease), opacity 0.1s ease;
}
.crm-card:active { transform: scale(0.99); }
.crm-card.crm-card-dragging { opacity: 0.4; }
.crm-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.crm-card-name {
    font-weight: 600;
    font-size: var(--font-size-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-card-owner {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
}
.crm-card-owner-empty {
    background: var(--color-border);
    color: var(--color-text-light);
}
.crm-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.crm-card-days { white-space: nowrap; }

/* Upcoming-nudge chip. Quiet by default (it sits on every assigned card), and
   only takes colour once the nudge is actually overdue, so a board of healthy
   prospects reads as calm rather than alarmed. */
.crm-card-nudge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: var(--color-text-muted);
}
.crm-card-nudge.is-overdue {
    color: var(--color-pulse-dot);
    font-weight: 600;
}
/* The messenger's no-counter attention dot, reused here. It never animates on
   a board card: a grid of pulsing dots is noise, and the colour already
   carries the urgency. */
.crm-card-nudge-dot {
    display: inline-block;
    position: static;
    width: 7px;
    height: 7px;
    margin: 0;
    border: 0;
    animation: none;
}

/* Detail modal: quiz profile, notes, timeline */
.crm-quiz-profile {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}
.crm-quiz-profile-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}
.crm-quiz-profile-field { font-size: var(--font-size-small); }
.crm-quiz-profile-field strong { color: var(--color-text); }
.crm-quiz-profile-story-label {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    margin-bottom: 4px;
}
.crm-quiz-profile-story {
    font-size: var(--font-size-body);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px 12px;
    border-left: 2px solid var(--color-primary);
    background: var(--color-bg, rgba(127,127,127,0.04));
    border-radius: 0 6px 6px 0;
    margin-bottom: 10px;
}
.crm-quiz-profile-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.crm-quiz-profile-raw {
    max-height: 160px;
    overflow: auto;
    font-size: var(--font-size-small);
    background: var(--color-bg, rgba(127,127,127,0.06));
    border-radius: 6px;
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}
.crm-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}
.crm-note-item {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
}
/* The caller's own note (one per person, sql/crm-notes-one-per-person-2026-07.sql):
   a subtle primary-colour accent border marks it apart from the read-only
   notes listed below it. */
.crm-note-mine {
    border-color: var(--color-primary);
    margin-bottom: 8px;
}
.crm-note-body {
    font-size: var(--font-size-body);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Detail modal subtabs (Summary / Quiz Profile / Timeline, build-out phase).
   Same visual pattern as .reg-detail-tabs/.reg-detail-tab (css/style-10.css,
   the Registration detail modal's Details/History bar), reused here under
   this file's own crm- prefix rather than sharing the class name across
   unrelated modules. */
.crm-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 16px;
}
.crm-detail-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 16px;
    font-size: var(--font-size-label);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.crm-detail-tab:hover {
    color: var(--color-text);
}
.crm-detail-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
/* Stable modal height across subtabs.
   Without this the modal resized on every tab switch (Summary is tall, Timeline
   short), so the window jumped under the pointer and the tab bar moved away from
   where it had just been clicked. Fixing the PANEL height rather than the modal
   keeps the header and tab bar pinned while only the content area scrolls, which
   is what makes the tabs feel like tabs instead of like three different dialogs.
   The height is viewport-relative and floored, so a short screen still gets a
   usable panel and a tall one does not leave a large empty gap. */
.crm-detail-panel {
    height: clamp(280px, 52vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* a panel scrolled to its end must not chain to the page behind */
    padding-right: 4px;             /* keeps content clear of the scrollbar gutter */
}
.crm-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 220px;
    overflow-y: auto;
}
.crm-timeline li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.crm-timeline-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Section headings across the CRM tabs (detail modal Quiz profile/Invoices/
   Notes/Timeline, Insights charts), matching the per-module
   <mod>-section-heading convention (.ta-section-heading, .reg-section-heading,
   .ec-section-heading, etc.) instead of a raw <h3> with an inline margin.
   Ported from canopy (css/style-11.css). */
.crm-section-heading {
    font-size: var(--font-size-heading);
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}

/* Insights view (build-out phase 4, docs/crm-design.md "Analytics"). Ported
   from canopy (css/style-11.css, canopy commit 3ae9241c): vanilla tables
   with percentage-width bar indicators, no chart library. Track/fill shape
   mirrors .reg-funnel-bar-track/.reg-funnel-bar-fill (style-10.css) so both
   analytics surfaces read as one visual system; only CSS variables are used
   so dark mode is inherited automatically. */
.crm-insights-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.crm-insights-window-seg { max-width: 260px; }
.crm-insights-section { margin-bottom: 16px; }
.crm-insights-guidance {
    margin: 0 0 14px;
}
.crm-insights-bar-track {
    background: var(--color-border);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}
.crm-insights-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.crm-insights-conv-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}
.crm-insights-conv-cell .crm-insights-bar-track { flex: 1; }

@media (max-width: 640px) {
    .crm-board-col { flex-basis: 78vw; }
}

/* Contacts segment (P3, docs/plans/2026-07-24-bug-reports-module-rollout.md,
   port of canopy). Ported class-for-class from chatbox's .contacts-* rules
   (css/style.css) under the crm- prefix so it reads as one visual system with
   the rest of this module; same tokens, so light/dark are inherited
   automatically with zero new variables. */
.crm-contacts-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 9px 12px; margin-bottom: 10px;
}
.crm-contacts-search i { color: var(--color-text-light); font-size: 14px; }
.crm-contacts-search input {
    border: none; background: none; outline: none; flex: 1; min-width: 0;
    font-size: var(--font-size-body); color: var(--color-text); font-family: inherit;
}
.crm-contacts-search input::placeholder { color: var(--color-text-light); }
.crm-contacts-list { display: flex; flex-direction: column; gap: 8px; }
.crm-contacts-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px;
    padding: 10px 12px;
}
.crm-contacts-row.is-editing { background: var(--color-bg-subtle); border-color: var(--color-primary); }
.crm-contacts-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff; overflow: hidden;
}
.crm-contacts-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crm-contacts-avatar i { font-size: 16px; }
.crm-contacts-body { flex: 1; min-width: 0; }
.crm-contacts-clickable { cursor: pointer; }
.crm-contacts-name { font-size: var(--font-size-body); font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 7px; }
.crm-contacts-tag-edited {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
    background: rgba(20, 92, 80, 0.14); color: var(--color-primary);
    border-radius: 4px; padding: 2px 6px;
}
.crm-contacts-sub { font-size: var(--font-size-small); color: var(--color-text-light); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-contacts-sub .crm-contacts-was { font-style: italic; }
.crm-contacts-pencil {
    flex: none; color: var(--color-text-light); background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 8px; display: flex; align-items: center;
}
.crm-contacts-pencil:hover { color: var(--color-primary); background: var(--color-bg-subtle); }
.crm-contacts-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.crm-contacts-edit-row input {
    flex: 1; min-width: 0; border: 1px solid var(--color-border); border-radius: 8px;
    padding: 7px 10px; font-size: var(--font-size-body); font-family: inherit;
    background: var(--color-bg); color: var(--color-text);
}
.crm-contacts-empty { text-align: center; color: var(--color-text-light); padding: 48px 20px; }
.crm-contacts-empty i { font-size: 34px; color: var(--color-primary); margin-bottom: 10px; display: block; }
.crm-contacts-count { font-size: var(--font-size-small); color: var(--color-text-light); text-align: center; padding: 10px 0 4px; }

/* Manage CRM > Stages (2026-08-11, ported from canopy). A small color
   swatch used in the manage list, so a stage's color reads as one
   consistent dot everywhere it appears. */
.crm-stage-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 7px; flex: none; vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.crm-stage-manage-list { display: flex; flex-direction: column; gap: 6px; }
.crm-stage-manage-row {
    display: flex; align-items: center; gap: 4px;
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--dt-card-radius);
    padding: 8px 10px;
}
.crm-stage-manage-row.is-clickable { cursor: pointer; }
.crm-stage-manage-row.is-clickable:hover { border-color: var(--color-primary); background: var(--color-bg-subtle); }
.crm-stage-manage-row.is-archived { opacity: 0.65; }
.crm-stage-manage-label { flex: 1; min-width: 0; font-size: var(--font-size-body); color: var(--color-text); display: flex; align-items: center; gap: 6px; }
.crm-stage-move-group { display: flex; flex-direction: column; margin-right: 4px; }
.crm-stage-move-btn {
    flex: none; color: var(--color-text-light); background: none; border: none; cursor: pointer;
    padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1;
}
.crm-stage-move-btn:disabled { opacity: 0.3; cursor: default; }
.crm-stage-move-btn:not(:disabled):hover { color: var(--color-primary); background: var(--color-bg-subtle); }
.crm-stage-color-input {
    width: 40px; height: 32px; padding: 2px; border-radius: 6px; cursor: pointer; flex: none;
}
.crm-stage-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.crm-stage-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.crm-stage-new-form {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--color-border);
}
.crm-stage-new-form .form-group { margin-bottom: 0; }
.crm-stage-new-form .form-group:first-child { flex: 1 1 220px; min-width: 180px; }

/* Stage settings modal (2026-08-11), reusing the generic .toggle-label/
   .toggle-track/.toggle-thumb component (css/style-04.css). */
.crm-stage-edit-name-row { display: flex; gap: 10px; align-items: flex-end; }
.crm-stage-toggle-row { margin-bottom: 14px; }
.crm-stage-toggle-row .toggle-text { display: block; }
.crm-stage-toggle-row .toggle-label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.crm-stage-toggle-hint { margin: 4px 0 0 50px; color: var(--color-text-light); }
.crm-stage-toggle-hint:empty { display: none; }