/* ============================================================
   5.X Organisation Management (Canopy 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); }

/* ============================================================
   5.X Holiday Programme Module
   ============================================================ */
.hp-toolbar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 16px;
}
.hp-toolbar .form-group { min-width: 200px; }
.hp-child-select {
    font-size: var(--font-size-small);
    padding: 4px 10px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    max-width: 150px;
}

.hp-locked-banner {
    background: color-mix(in srgb, var(--color-warning, #d4930a) 12%, var(--color-bg));
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-warning, #d4930a) 35%, transparent);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: var(--font-size-body);
}

.hp-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}


.hp-cal-wrap { min-width: 0; }
.hp-cost-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.hp-panel-title { margin: 0 0 4px; font-size: var(--font-size-subheading); }
.hp-panel-dates { color: var(--color-text-light); font-size: var(--font-size-small); margin-bottom: 12px; }
.hp-submit-by { font-size: var(--font-size-small); color: var(--color-text-light); margin-bottom: 12px; }
.hp-day-counter { font-size: var(--font-size-body); margin-bottom: 12px; }
.hp-day-counter strong { font-size: var(--font-size-heading); }

.hp-progress-wrap { margin: 8px 0 16px; }
.hp-progress-bar {
    height: 8px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.hp-progress-fill {
    height: 100%;
    background: var(--cd-color-programme, #d4930a);
    border-radius: 999px;
    transition: width 280ms var(--ease-out);
}
.hp-progress-caption {
    margin-top: 6px;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.hp-sparkle {
    color: var(--cd-color-programme, #d4930a);
    font-weight: 600;
}

.hp-lines { margin: 12px 0; }
.hp-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--font-size-body);
    border-bottom: 1px dashed var(--color-border);
}
.hp-line--waived { color: var(--color-text-light); }
.hp-mini-note {
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 8%, var(--color-bg));
    border-left: 3px solid var(--cd-color-programme, #d4930a);
    padding: 8px 10px;
    margin: 6px 0;
    border-radius: 4px;
}
.hp-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0 16px;
    font-size: var(--font-size-heading);
    font-weight: 600;
    border-top: 1px solid var(--color-border);
}
.hp-cost-panel .btn { width: 100%; }
.hp-fineprint {
    margin: 12px 0 0;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
    text-align: center;
}

/* Calendar cell states layered on top of .cd-cal-cell--programme */
.hp-cell--out-of-range {
    opacity: 0.35;
    pointer-events: none;
}
.hp-cell--closed {
    opacity: 0.35;
    pointer-events: none;
}
.hp-cell--picked {
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 36%, var(--color-bg)) !important;
    box-shadow: inset 0 0 0 2px var(--cd-color-programme, #d4930a);
}
.hp-excursion-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-on-primary);
    background: var(--cd-color-programme, #d4930a);
    line-height: 1;
    flex-shrink: 0;
}
.hp-cell--locked {
    cursor: not-allowed !important;
}

/* Legend */
.hp-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}
.hp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hp-legend-swatch {
    width: 16px; height: 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 12%, var(--color-bg));
    border: 1px solid var(--cd-color-programme, #d4930a);
}
.hp-legend-swatch--exc { background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 12%, var(--color-bg)); }
.hp-legend-swatch--picked { background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 36%, var(--color-bg)); }

/* Admin: Manage Holiday Programme */
.hp-manage-toolbar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 20px;
}
/* Launch status banner — not-launched (primary tint) vs live (success tint) */
.hp-launch-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.hp-launch-banner--live {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg));
    border-color: color-mix(in srgb, var(--color-success) 32%, transparent);
}
.hp-launch-banner-text {
    flex: 1;
    min-width: 220px;
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: 1.45;
}
.hp-launch-banner .btn { flex-shrink: 0; }
.hp-manage-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .hp-manage-grid { grid-template-columns: 1fr; }
}
.hp-manage-settings,
.hp-manage-excursions {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}
.hp-manage-excursions { display: flex; flex-direction: column; }
.hp-manage-settings h3,
.hp-manage-excursions h3 { margin: 0 0 12px; font-size: var(--font-size-subheading); }

.hp-exc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.hp-exc-toggle {
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background 120ms ease;
}
.hp-exc-toggle:hover {
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 8%, var(--color-card));
}
.hp-exc-toggle--on {
    background: color-mix(in srgb, var(--cd-color-programme, #d4930a) 22%, var(--color-card));
    border-color: var(--cd-color-programme, #d4930a);
    color: var(--color-text);
}

.hp-exc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.hp-exc-row .form-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.hp-exc-row .form-group input { padding: 8px 8px; }
.hp-exc-row .hp-exc-title-group { flex: 2; }

.hp-manage-enrollments {
    margin-top: 24px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}
.hp-manage-enrollments h3 { margin: 0 0 12px; font-size: var(--font-size-subheading); }
.hp-manage-enrollments--empty { background: transparent; border-color: transparent; }

.hp-override-student { margin: 0 0 12px; }
.hp-override-summary {
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* --- Holiday Programme - Motion --- */

/* Pricing reveal: expand/collapse with CSS grid height trick */
.hp-pricing-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms var(--ease-out);
}
.hp-pricing-reveal.visible { grid-template-rows: 1fr; }
.hp-pricing-reveal.instant { transition: none; }
.hp-pricing-reveal > div { min-height: 0; overflow: hidden; }

/* Calendar cell: smooth pick / release */
.hp-cal-wrap .cal-cell {
    transition: background 140ms var(--ease-out), box-shadow 140ms var(--ease-out),
                transform 100ms var(--ease-out), opacity 150ms var(--ease-out);
}
.hp-cal-wrap .cal-cell.hp-pressing:not(.hp-cell--locked):not(.hp-cell--out-of-range):not(.hp-cell--closed) {
    transform: scale(0.88);
}

/* Excursions-unlocked celebration pop */
@keyframes hpSparkleIn {
    0%  { transform: scale(0.7) translateY(4px); opacity: 0; }
    65% { transform: scale(1.1) translateY(-1px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.hp-sparkle { display: inline-block; animation: hpSparkleIn 360ms var(--ease-spring) both; }

/* Day counter number bump */
@keyframes hpCounterBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.hp-day-counter strong.hp-bump {
    display: inline-block;
    animation: hpCounterBump 220ms var(--ease-spring);
}

/* Button press squash */
.hp-cost-panel .btn { transition: transform 100ms var(--ease-out); }
.hp-cost-panel .btn.hp-pressing { transform: scale(0.93); }
#hpLegend .btn { transition: transform 100ms var(--ease-out); }
#hpLegend .btn.hp-pressing { transform: scale(0.90); }
#hpLegend .btn.hp-legend-toggle { min-width: 96px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .hp-pricing-reveal { transition: none; }
    .hp-pricing-reveal.visible { grid-template-rows: 1fr; }
    .hp-cal-wrap .cal-cell { transition: none; }
    .hp-sparkle, .hp-day-counter strong.hp-bump { animation: none; }
}

/* 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;
}
/* Future days: expected count — gold, echoing the holiday-programme chip */
.att-count-chip--expected { background: var(--cd-color-programme, #d4930a); }
.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)) 24px
             max(24px, env(safe-area-inset-bottom, 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(env(safe-area-inset-bottom, 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;
}