/* Owned by the org-config package (see ORG-CONFIG-UI-TRACKER.md).
   Organisation Configuration page + Recalculate open cases. Layout follows the prototype, colours the dashboard. */

.oc-page {
    --oc-text: #0F1C35;
    --oc-muted: #64748b;
    --oc-line: #e2e8f0;
    --oc-blue: #2563EB;
    --oc-blue-soft: #EFF6FF;
    --oc-green: #15803D;
    --oc-green-soft: #ECFDF3;
    --oc-amber: #B45309;
    --oc-amber-soft: #FFFBEB;
    --oc-red: #B91C1C;
    --oc-red-soft: #FEF2F2;
    --oc-grey-soft: #F1F5F9;
    --oc-shadow: 0 4px 16px rgba(15, 28, 53, 0.04);
    color: var(--oc-text);
    font-size: 0.875rem;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.oc-page button { font-family: inherit; }
.oc-page input, .oc-page select, .oc-page textarea { font: inherit; color: var(--oc-text); }

/* ── Header ── */
.oc-eyebrow { color: var(--oc-blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; }
.oc-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; margin: 0.5rem 0 1.25rem; flex-wrap: wrap; }
.oc-heading h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.oc-heading p { margin: 0.5rem 0 0; color: var(--oc-muted); max-width: 720px; line-height: 1.6; }
.oc-heading-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.oc-unsaved { color: var(--oc-amber); font-size: 0.75rem; font-weight: 600; }
.oc-last-saved { color: var(--oc-muted); font-size: 0.75rem; margin: -0.25rem 0 1rem; }

/* ── Buttons ── */
.oc-btn {
    border: 1px solid #d7e0eb; background: white; color: #33475f; padding: 0.55rem 0.9rem; border-radius: 0.55rem;
    font-weight: 600; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
}
.oc-btn:hover:not(:disabled) { background: #f8fafc; }
.oc-btn.primary { background: var(--oc-blue); border-color: var(--oc-blue); color: white; }
.oc-btn.primary:hover:not(:disabled) { background: #1d4ed8; }
.oc-btn.danger { background: var(--oc-red); border-color: var(--oc-red); color: white; }
.oc-btn.danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.oc-btn.small { padding: 0.3rem 0.6rem; font-size: 0.7rem; }
.oc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.oc-link { background: none; border: 0; padding: 0; color: var(--oc-blue); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.oc-link:hover { text-decoration: underline; }
.oc-link:disabled { color: var(--oc-muted); cursor: not-allowed; text-decoration: none; }

/* ── Notices, alerts, errors ── */
.oc-notice {
    display: flex; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid #dbe5ff;
    background: #f7f9ff; margin-bottom: 1rem; color: #40516a; line-height: 1.5;
}
.oc-notice strong { color: #233b66; }
.oc-notice-icon { font-size: 1rem; }
.oc-notice-readonly { background: var(--oc-amber-soft); border-color: #FDE68A; color: #78350F; }
.oc-alert {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 1rem;
    border-radius: 0.75rem; margin-bottom: 1rem; line-height: 1.5;
}
.oc-alert.warning { background: var(--oc-amber-soft); border: 1px solid #FDE68A; color: #78350F; }
.oc-alert.error { background: var(--oc-red-soft); border: 1px solid #FECACA; color: var(--oc-red); }
.oc-alert-close { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 0.2rem; }
.oc-box-error {
    background: var(--oc-red-soft); border: 1px solid #FECACA; color: var(--oc-red); border-radius: 0.6rem;
    padding: 0.6rem 0.8rem; font-size: 0.75rem; margin-bottom: 0.75rem; line-height: 1.5;
}
.oc-field-error { color: var(--oc-red); font-size: 0.72rem; margin-top: 0.3rem; line-height: 1.4; }
.oc-hint { color: var(--oc-blue); font-size: 0.72rem; margin-top: 0.4rem; }
.oc-help { color: var(--oc-muted); font-size: 0.72rem; line-height: 1.5; }
.oc-info-line { background: var(--oc-blue-soft); color: #1e40af; border-radius: 0.6rem; padding: 0.6rem 0.85rem; font-size: 0.75rem; margin-bottom: 1rem; }
.oc-empty { color: var(--oc-muted); font-size: 0.8rem; padding: 1rem; text-align: center; }
.oc-load-error { background: white; border: 1px solid var(--oc-line); border-radius: 0.9rem; padding: 2rem; text-align: center; }
.oc-load-error p { color: var(--oc-red); margin: 0 0 1rem; }

/* ── Skeleton ── */
.oc-skel { background: linear-gradient(90deg, #eef2f7 25%, #f6f8fb 50%, #eef2f7 75%); background-size: 200% 100%; animation: oc-shimmer 1.2s infinite; border-radius: 0.75rem; }
.oc-skel-line { height: 3rem; margin-bottom: 1rem; }
.oc-skel-tile { height: 6rem; border: 0; }
.oc-skel-tabs { height: 2.5rem; margin: 1rem 0; }
.oc-skel-body { height: 20rem; }
@keyframes oc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Metrics ── */
.oc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.1rem; }
.oc-metric { background: white; border: 1px solid var(--oc-line); border-radius: 0.9rem; box-shadow: var(--oc-shadow); padding: 1rem; }
.oc-metric-top { display: flex; justify-content: space-between; align-items: center; color: var(--oc-muted); font-size: 0.7rem; }
.oc-metric strong { display: block; font-size: 1.45rem; letter-spacing: -0.02em; margin: 0.6rem 0 0.25rem; }
.oc-metric small { color: var(--oc-muted); font-size: 0.7rem; }
.oc-metric-icon { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: var(--oc-blue-soft); display: grid; place-items: center; color: var(--oc-blue); font-size: 0.8rem; }
.oc-green { color: var(--oc-green); }
.oc-amber { color: var(--oc-amber); }

/* ── Tabs ── */
.oc-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--oc-line); margin-bottom: 1.25rem; overflow-x: auto; }
.oc-tabs button {
    white-space: nowrap; background: transparent; border: 0; padding: 0.8rem 0.95rem; color: var(--oc-muted);
    border-bottom: 2px solid transparent; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
}
.oc-tabs button.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); }
.oc-dirty-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #F59E0B; display: inline-block; }
.oc-tab-body { display: none; }
.oc-tab-body.active { display: block; }

/* ── Panels, layout ── */
.oc-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.8fr); gap: 1rem; align-items: start; }
.oc-panel { background: white; border: 1px solid var(--oc-line); border-radius: 0.9rem; box-shadow: var(--oc-shadow); padding: 1.25rem; margin-bottom: 1rem; }
.oc-panel.oc-muted { opacity: 0.65; }
.oc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.9rem; margin-bottom: 1rem; }
.oc-panel h2 { margin: 0; font-size: 0.95rem; }
.oc-sub { color: var(--oc-muted); font-size: 0.72rem; margin-top: 0.35rem; line-height: 1.5; }
.oc-subhead { margin: 1.25rem 0 0.75rem; }
.oc-subhead h3, .oc-subtitle { margin: 0; font-size: 0.82rem; }
.oc-subtitle { margin: 1.25rem 0 0.5rem; }
.oc-label { font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.oc-mt { margin-top: 1rem; }
.oc-mt-sm { margin-top: 0.6rem; }
.oc-mt-xs { margin-top: 0.35rem; }
.oc-right { text-align: right; }
.oc-inline { display: flex; gap: 0.5rem; align-items: center; }

/* ── Status pills ── */
.oc-status { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 99px; padding: 0.25rem 0.55rem; font-size: 0.65rem; font-weight: 700; white-space: nowrap; }
.oc-status.green { background: var(--oc-green-soft); color: var(--oc-green); }
.oc-status.amber { background: var(--oc-amber-soft); color: var(--oc-amber); }
.oc-status.red { background: var(--oc-red-soft); color: var(--oc-red); }
.oc-status.blue { background: var(--oc-blue-soft); color: var(--oc-blue); }
.oc-status.grey { background: var(--oc-grey-soft); color: #475569; }
.oc-locked { color: #687a90; font-size: 0.72rem; white-space: nowrap; }

/* ── Form controls ── */
.oc-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.oc-field { display: grid; gap: 0.4rem; align-content: start; }
.oc-field label { font-size: 0.75rem; font-weight: 700; color: #3d4f65; }
.oc-field small { font-size: 0.7rem; color: var(--oc-muted); line-height: 1.45; }
.oc-field input, .oc-field select, .oc-field textarea {
    width: 100%; border: 1px solid #d8e1ec; border-radius: 0.5rem; padding: 0.6rem 0.7rem; background: white; outline: none;
}
.oc-field input:focus, .oc-field select:focus, .oc-field textarea:focus { border-color: #8098ff; box-shadow: 0 0 0 3px #edf1ff; }
.oc-field select:disabled, .oc-field input:disabled { background: #f8fafc; color: #475569; }
.oc-inline input { width: 5.5rem; }
.oc-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78rem; cursor: pointer; }
.oc-check input { margin-top: 0.15rem; accent-color: var(--oc-blue); }

.oc-radio-list { display: grid; gap: 0.6rem; }
.oc-radio-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--oc-line); border-radius: 0.6rem; cursor: pointer; }
.oc-radio-row.checked { border-color: #9fb1ff; background: #f8f9ff; }
.oc-radio-row.disabled { cursor: default; }
.oc-radio-row input { margin-top: 0.2rem; accent-color: var(--oc-blue); }
.oc-radio-row strong { font-size: 0.78rem; display: block; }
.oc-radio-row small { display: block; color: var(--oc-muted); font-size: 0.7rem; margin-top: 0.2rem; line-height: 1.4; }

.oc-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--oc-line); }
.oc-toggle-row:last-child { border-bottom: 0; }
.oc-toggle-row strong { display: block; font-size: 0.78rem; }
.oc-toggle-row small { display: block; color: var(--oc-muted); font-size: 0.7rem; margin-top: 0.25rem; line-height: 1.4; }
.oc-switch { position: relative; width: 2.3rem; height: 1.3rem; flex-shrink: 0; display: inline-block; }
.oc-switch input { opacity: 0; width: 0; height: 0; }
.oc-slider { position: absolute; inset: 0; background: #c6d0dd; border-radius: 99px; transition: 0.2s; cursor: pointer; }
.oc-slider::before { content: ""; position: absolute; width: 0.95rem; height: 0.95rem; left: 0.18rem; top: 0.18rem; background: white; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px #0002; }
.oc-switch input:checked + .oc-slider { background: var(--oc-blue); }
.oc-switch input:checked + .oc-slider::before { transform: translateX(1rem); }
.oc-switch input:disabled + .oc-slider { opacity: 0.5; cursor: not-allowed; }

.oc-savebar { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding-top: 1rem; margin-top: 1.1rem; border-top: 1px solid var(--oc-line); flex-wrap: wrap; }
.oc-savebar small { color: var(--oc-muted); font-size: 0.7rem; }
.oc-savebar-actions { display: flex; align-items: center; gap: 0.6rem; }
.oc-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }

.oc-callout { border-radius: 0.6rem; padding: 0.8rem 0.9rem; background: #fff8e9; border: 1px solid #f4dfb3; color: #75511b; font-size: 0.72rem; line-height: 1.55; }
.oc-callout strong { display: block; margin-bottom: 0.25rem; }
.oc-explain { background: #f8fafc; border: 1px dashed #cdd8e5; border-radius: 0.6rem; padding: 0.8rem; font-size: 0.72rem; line-height: 1.6; color: #52647a; }

/* ── Calendar ── */
.oc-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-bottom: 0.5rem; }
.oc-day { padding: 0.6rem 0.1rem; text-align: center; border: 1px solid var(--oc-line); border-radius: 0.5rem; font-size: 0.7rem; color: var(--oc-muted); }
.oc-day.on { background: var(--oc-blue-soft); border-color: #d3ddff; color: #3157ce; font-weight: 800; }
.oc-day.off { background: #f7f8fa; color: #a3adba; text-decoration: line-through; }

.oc-holiday { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--oc-line); font-size: 0.78rem; }
.oc-holiday-date { display: flex; align-items: center; gap: 0.4rem; }
.oc-weekday { color: var(--oc-muted); font-size: 0.7rem; }
.oc-holiday-name { color: #475569; font-size: 0.72rem; margin-top: 0.15rem; }
.oc-holiday-actions { display: flex; gap: 0.35rem; }
.oc-holiday-form { border: 1px solid #d3ddff; background: #f8f9ff; border-radius: 0.7rem; padding: 0.9rem; margin: 0.5rem 0; }

/* ── Calculator ── */
.oc-calc { border-top: 1px solid var(--oc-line); margin-top: 0.75rem; padding-top: 0.9rem; }
.oc-calc-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.oc-calc-source-label { color: var(--oc-muted); font-size: 0.7rem; margin-top: 0.6rem; }
.oc-calc-headline { font-size: 0.95rem; margin: 0.75rem 0 0.5rem; }
.oc-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.oc-chip {
    min-width: 2.6rem; padding: 0.25rem 0.2rem; border-radius: 0.4rem; text-align: center; font-size: 0.68rem; font-weight: 700;
    background: #f8fafc; border: 1px solid var(--oc-line); color: #94a3b8; display: inline-flex; flex-direction: column; line-height: 1.2;
}
.oc-chip small { font-size: 0.58rem; font-weight: 500; }
.oc-chip.counted { background: var(--oc-blue-soft); border-color: #c7d6fe; color: #1d4ed8; }
.oc-chip.skipped { background: #eef2f6; color: #94a3b8; }
.oc-chip.holiday { background: var(--oc-amber-soft); border-color: #FDE68A; color: var(--oc-amber); }
.oc-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; color: var(--oc-muted); font-size: 0.65rem; margin-top: 0.5rem; }
.oc-legend span { display: flex; align-items: center; gap: 0.3rem; }
.oc-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }
.oc-dot.blue { background: #93b4fd; }
.oc-dot.grey { background: #cbd5e1; }
.oc-dot.amber { background: #F59E0B; }

/* ── Tables ── */
.oc-table-wrap { overflow-x: auto; }
.oc-table { width: 100%; border-collapse: collapse; }
.oc-table th { text-align: left; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--oc-muted); font-weight: 700; padding: 0.65rem 0.55rem; border-bottom: 1px solid var(--oc-line); }
.oc-table td { padding: 0.75rem 0.55rem; border-bottom: 1px solid #edf1f5; font-size: 0.75rem; vertical-align: top; }
.oc-table tr:last-child td { border-bottom: 0; }
.oc-table.oc-clickable tbody tr { cursor: pointer; }
.oc-table.oc-clickable tbody tr:hover, .oc-table tr.selected { background: #f8faff; }
.oc-col-check { width: 2rem; }
.oc-rule-name { font-weight: 700; }
.oc-rule-desc { color: var(--oc-muted); font-size: 0.65rem; margin-top: 0.25rem; }
.oc-rule-inputs { display: flex; gap: 0.35rem; align-items: center; }
.oc-inline-input { width: 4.4rem; padding: 0.4rem; border: 1px solid #d8e1ec; border-radius: 0.45rem; }
.oc-unit-select { padding: 0.4rem; border: 1px solid #d8e1ec; border-radius: 0.45rem; background: white; }
.oc-unit-select:disabled { background: #f8fafc; color: #64748b; }
.oc-reason-cell { max-width: 18rem; }
.oc-changes .oc-old { color: var(--oc-muted); text-decoration: line-through; }
.oc-changes .oc-new { font-weight: 600; }
.oc-pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; font-size: 0.75rem; }

/* ── Governance ── */
.oc-review-status { font-size: 0.78rem; line-height: 1.5; }
.oc-history-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--oc-line); font-size: 0.78rem; }
.oc-history-row:last-of-type { border-bottom: 0; }

.oc-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 28, 53, 0.25); z-index: 40; }
.oc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: white; z-index: 41; overflow-y: auto;
    padding: 1.25rem 1.4rem 2rem; box-shadow: -12px 0 30px rgba(15, 28, 53, 0.12);
}
.oc-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.oc-drawer-head h2 { margin: 0; font-size: 1.05rem; }
.oc-drawer-meta { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.75rem; color: #475569; align-items: flex-start; }
.oc-dl { display: grid; grid-template-columns: minmax(8rem, 0.8fr) 1.2fr; gap: 0.45rem 0.9rem; font-size: 0.75rem; margin: 0; }
.oc-dl dt { color: var(--oc-muted); }
.oc-dl dd { margin: 0; }

/* ── Recalculation ── */
.oc-recalc-summary { font-weight: 700; font-size: 0.8rem; margin: 0.9rem 0 0.5rem; }
.oc-recalc-case { border: 1px solid var(--oc-line); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; }
.oc-recalc-case-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.78rem; margin-bottom: 0.3rem; }
.oc-recalc-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid #f1f5f9; font-size: 0.74rem; }
.oc-recalc-row.overdue { background: var(--oc-red-soft); border-radius: 0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; }
.oc-recalc-name { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.oc-struck { text-decoration: line-through; color: var(--oc-muted); }
.oc-recalc-result { border: 1px solid #bbf7d0; background: var(--oc-green-soft); border-radius: 0.7rem; padding: 0.8rem 0.9rem; margin-top: 1rem; }
.oc-recalc-result-head { display: flex; justify-content: space-between; align-items: center; color: var(--oc-green); margin-bottom: 0.4rem; }

/* ── Dialog, toast ── */
.oc-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 28, 53, 0.35); z-index: 60; display: grid; place-items: center; padding: 1rem; }
.oc-modal { background: white; border-radius: 0.9rem; max-width: 520px; width: 100%; padding: 1.3rem 1.4rem; box-shadow: 0 20px 50px rgba(15, 28, 53, 0.25); }
.oc-modal h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.oc-modal p { margin: 0 0 0.55rem; font-size: 0.82rem; line-height: 1.55; color: #334155; }
.oc-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.oc-toast {
    position: fixed; right: 1.5rem; bottom: 1.5rem; background: #172b43; color: white; padding: 0.8rem 1.05rem; border-radius: 0.6rem;
    box-shadow: 0 12px 30px #13243a33; z-index: 70; font-size: 0.78rem; max-width: 26rem;
}

@media (max-width: 1100px) {
    .oc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oc-cols { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .oc-field-grid, .oc-calc-inputs { grid-template-columns: 1fr; }
    .oc-panel { padding: 0.95rem; }
    .oc-table-wrap table { min-width: 640px; }
    .oc-recalc-row { grid-template-columns: 1fr; }
    .oc-dl { grid-template-columns: 1fr; }
}