/* ============================================================
   Clinical Capacity Management System — Components
   All geometry uses CSS logical properties so RTL/LTR mirrors
   without a second stylesheet.
   ============================================================ */

/* ---------- C-09 Accent rule (gold always leads the start edge) ---------- */
.accent-rule{height:var(--border-rule);background:linear-gradient(var(--rule-direction),var(--gold-500) 0 18%,var(--navy-700) 18% 100%)}
.accent-rule--card{height:var(--border-accent)}
.card--accent{position:relative;overflow:hidden}
.card--accent::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:var(--border-accent);
  background:linear-gradient(var(--rule-direction),var(--gold-500) 0 18%,var(--navy-700) 18% 100%)}

/* ---------- Card ---------- */
.card{background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-md);padding:18px 20px;box-shadow:var(--shadow-sm)}
.card__title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-heading)}
.card__hint{font-size:var(--text-2xs);color:var(--text-muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:var(--control-height-md);padding-inline:16px;border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);
  border:var(--border-hairline) solid transparent;cursor:pointer;transition:var(--transition-control)}
.btn--sm{height:var(--control-height-sm);font-size:var(--text-xs);padding-inline:12px}
.btn--lg{height:var(--control-height-lg);font-size:var(--text-base);padding-inline:20px}
.btn--block{width:100%}
.btn--primary{background:var(--control-primary-bg);color:var(--text-on-brand)}
.btn--primary:hover{background:var(--control-primary-bg-hover)}
.btn--primary:active{background:var(--control-primary-bg-active);transform:translateY(1px)}
.btn--secondary{background:var(--control-secondary-bg);color:var(--text-on-brand)}
.btn--secondary:hover{background:var(--control-secondary-bg-hover)}
.btn--outline{background:transparent;border-color:var(--border-subtle);color:var(--text-heading)}
.btn--outline:hover{background:var(--surface-sunken)}
.btn--ghost{background:transparent;color:var(--text-heading)}
.btn--ghost:hover{background:var(--pale-blue-50)}
.btn--danger{background:var(--status-danger);color:var(--text-on-brand)}
.btn--danger:hover{filter:brightness(.92)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn .icon{width:18px;height:18px}

/* ---------- C-14 Fields ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-heading)}
.field__control{height:var(--control-height-md);padding-inline:12px;border-radius:var(--radius-sm);
  border:var(--border-hairline) solid var(--border-subtle);background:var(--surface-card);
  font-family:inherit;font-size:var(--text-sm);color:var(--text-body);transition:var(--transition-control)}
.field__control--lg{height:var(--control-height-lg)}
.field__help{font-size:var(--text-2xs);color:var(--text-muted)}
.field__error{font-size:var(--text-2xs);color:var(--status-danger)}
.field.is-invalid .field__control{border-color:var(--status-danger)}

/* ---------- C-06 Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:var(--text-2xs);font-weight:var(--weight-medium);line-height:1.6}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--success{background:var(--status-success-bg);color:var(--status-success)}
.badge--warning{background:var(--status-warning-bg);color:var(--gold-700)}
.badge--danger{background:var(--status-danger-bg);color:var(--status-danger)}
.badge--info{background:var(--status-info-bg);color:var(--blue-700)}
.badge--navy{background:var(--navy-100);color:var(--navy-700)}
.badge--neutral{background:var(--neutral-100);color:var(--neutral-600)}

/* ---------- C-02 Room tile + C-01 Bed cell ---------- */
.room-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.room{border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card)}
.room__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:6px 10px;background:var(--pale-blue-50);border-block-end:var(--border-hairline) solid var(--border-subtle)}
.room__no{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-heading)}
.room__count{font-size:10px;color:var(--text-muted)}
.room__beds{display:grid;gap:var(--border-hairline);background:var(--border-subtle)}
.room__beds--1{grid-template-columns:1fr}
.room__beds--2{grid-template-columns:1fr 1fr}
.room__beds--3{grid-template-columns:1fr 1fr 1fr}
.room__beds--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

.bed{position:relative;min-height:var(--bed-cell-min-h);padding:10px 8px;border:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:inherit;cursor:pointer;transition:var(--transition-control)}
.bed__no{font-size:var(--text-2xs);font-weight:var(--weight-semibold)}
.bed__state{font-size:10px;opacity:.9}
.bed__dot{width:var(--bed-dot-size);height:var(--bed-dot-size);border-radius:50%}
.bed--vacant{background:var(--bed-vacant-bg);color:var(--bed-vacant-fg)}
.bed--occupied{background:var(--bed-occupied-bg);color:var(--bed-occupied-fg)}
.bed--cleaning{background:var(--bed-cleaning-bg);color:var(--bed-cleaning-fg)}
.bed--oos{background:var(--bed-oos-bg);color:var(--bed-oos-fg)}
.bed.is-selected{box-shadow:var(--bed-selected-ring)}
.bed--readonly{cursor:default}
/* patient status dot — only meaningful on an occupied bed */
.dot--stable{background:var(--patient-stable)}
.dot--critical{background:var(--patient-critical)}
.dot--monitoring{background:var(--patient-monitoring)}
.dot--discharge{background:var(--patient-discharge)}
/* administrative override marker — leading top corner, flips with direction */
.bed__override{position:absolute;inset-block-start:0;inset-inline-start:0;width:0;height:0;
  border-block-start:var(--marker-override-size) solid var(--marker-override);
  border-inline-end:var(--marker-override-size) solid transparent}

/* ---------- C-12 Legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-2xs);color:var(--text-muted)}
.legend__item{display:inline-flex;align-items:center;gap:6px}
.legend__swatch{width:10px;height:10px;border-radius:var(--radius-xs)}
.legend__dot{width:9px;height:9px;border-radius:50%}

/* ---------- C-03 Stat card ---------- */
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);
  border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat__label{font-size:var(--text-xs);color:var(--text-muted)}
.stat__value{font-size:28px;font-weight:var(--weight-semibold);line-height:1;color:var(--text-heading)}
.stat__eyebrow{font-size:10px;letter-spacing:var(--tracking-caps);color:var(--neutral-400);text-transform:uppercase}

/* ---------- C-04 KPI card (threshold driven) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{position:relative;border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-md);
  padding:14px 16px 12px;background:var(--kpi-ok-bg);overflow:hidden}
.kpi::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--kpi-ok-bar)}
.kpi__label{font-size:var(--text-2xs);color:var(--text-muted)}
.kpi__value{font-size:26px;font-weight:var(--weight-semibold);line-height:1.1;color:var(--kpi-ok-num)}
.kpi__trend{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-2xs);color:var(--text-muted)}
.kpi__note{font-size:10px;color:var(--neutral-400)}
.kpi--warn{background:var(--kpi-warn-bg)}
.kpi--warn::before{background:var(--kpi-warn-bar)} .kpi--warn .kpi__value{color:var(--kpi-warn-num)}
.kpi--crit{background:var(--kpi-crit-bg)}
.kpi--crit::before{background:var(--kpi-crit-bar)} .kpi--crit .kpi__value{color:var(--kpi-crit-num)}

/* ---------- C-13 Occupancy bar with target marker ---------- */
.target-bar{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--neutral-100);overflow:visible}
.target-bar__fill{height:100%;border-radius:var(--radius-pill);background:var(--occ-bar-ok)}
.target-bar__fill--warn{background:var(--occ-bar-warn)}
.target-bar__fill--crit{background:var(--occ-bar-crit)}
.target-bar__marker{position:absolute;inset-block:-3px;width:2px;background:var(--occ-target-marker)}

/* ---------- C-05 Stepper (removed, never disabled, in read-only views) ---------- */
.stepper{display:inline-flex;align-items:center;gap:var(--space-4)}
.stepper__btn{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:var(--border-hairline) solid var(--border-subtle);background:var(--surface-card);cursor:pointer;
  transition:var(--transition-control)}
.stepper__btn:hover{background:var(--pale-blue-50)}
.stepper__btn[disabled]{opacity:.45;cursor:not-allowed}
.stepper__value{min-width:28px;text-align:center;font-size:var(--text-md);font-weight:var(--weight-semibold);
  font-variant-numeric:tabular-nums}

/* ---------- C-10 Table ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.table th{text-align:start;font-size:var(--text-2xs);font-weight:var(--weight-semibold);color:var(--text-muted);
  padding:11px 16px;border-block-end:var(--border-hairline) solid var(--border-subtle);white-space:nowrap}
.table td{padding:13px 16px;border-block-end:var(--border-hairline) solid var(--neutral-100);color:var(--text-body)}
.table tbody tr:hover{background:var(--pale-blue-50)}
.table th.is-sortable{cursor:pointer}

/* ---------- C-07 Modal / bottom sheet ---------- */
.overlay{position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(var(--overlay-blur));
  display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:var(--modal-width-lg);max-width:calc(100vw - 32px);max-height:84vh;overflow:auto;
  background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative}
.modal--sm{width:var(--modal-width-sm)} .modal--md{width:var(--modal-width-md)}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);padding:20px 20px 12px}
.modal__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-heading)}
.modal__sub{font-size:var(--text-xs);color:var(--text-muted)}
.modal__body{padding:0 20px 20px}
.modal__foot{display:flex;gap:var(--space-4);padding:16px 20px;border-block-start:var(--border-hairline) solid var(--border-subtle)}

@media (max-width:640px){
  .overlay{align-items:flex-end}
  .modal{width:100%;max-width:100%;max-height:var(--sheet-max-h);
    border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl);
    border-end-start-radius:0;border-end-end-radius:0;
    animation:sheet-up var(--duration-slow) var(--ease-standard)}
  .modal::after{content:"";position:absolute;inset-block-start:8px;inset-inline-start:50%;
    transform:translateX(-50%);width:var(--sheet-handle-w);height:var(--sheet-handle-h);
    border-radius:var(--radius-pill);background:var(--neutral-200)}
  .modal__head{padding-block-start:24px}
}
@keyframes sheet-up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Alerts (override strip, warnings) ---------- */
.alert{display:flex;gap:var(--space-4);padding:12px 14px;border-radius:var(--radius-sm);font-size:var(--text-xs)}
.alert--warning{background:var(--status-warning-bg);color:var(--gold-700)}
.alert--info{background:var(--status-info-bg);color:var(--blue-700)}
.alert--success{background:var(--status-success-bg);color:var(--status-success)}
.alert--danger{background:var(--status-danger-bg);color:var(--status-danger)}

/* ---------- C-08 Toast ---------- */
.toast{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:60;
  background:var(--navy-700);color:var(--text-on-brand);font-size:var(--text-xs);
  padding:10px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  animation:toast-in var(--duration-base) var(--ease-standard)}
@keyframes toast-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Ward dashboard layout ---------- */
.ward-layout{display:grid;grid-template-columns:1fr var(--ward-sidebar-w);gap:20px;padding:20px var(--gutter-page)}
@media (max-width:1100px){
  .ward-layout{grid-template-columns:1fr;padding:16px var(--gutter-page-mobile)}
  .room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .bed{min-height:var(--bed-cell-min-h-mobile)}
  .stepper__btn{width:44px;height:44px}
  .btn{min-height:44px}
}

/* ---------- Read-only enforcement (BR-15) ---------- */
/* Read-only views must NOT render edit controls at all. This rule is a
   safety net for anything that slips through server-side gating. */
.is-readonly .stepper,
.is-readonly .btn--primary,
.is-readonly .btn--danger{display:none!important}