/* =========================================================
   Casuslijst, casusformulier en mondschema
   ========================================================= */

/* ---------- lijst ---------- */
.cases__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cases__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cases__search { flex: 1 1 260px; max-width: 360px; }
.cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ccard { display: grid; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--uz-blue); border-radius: var(--r-md); }
.ccard:hover { box-shadow: var(--sh-2); }
.ccard__link { color: inherit; text-decoration: none; }
.ccard__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.ccard__room { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.ccard__foot .btn { margin-left: auto; }
.seg[role="tablist"] { flex-wrap: wrap; }

/* ---------- formulier ---------- */
.cform__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cform__head .planned { margin-left: auto; }
.planned { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--uz-blue-50); color: var(--uz-blue-600); font-size: 14px; }
.cform__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.card { display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); }
.card__title { font-size: 16px; color: var(--navy); }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field > .seg { justify-self: start; max-width: 100%; }
.chip--lg { min-height: 44px; padding: 0 16px; font-size: 15px; }
.chips--center { justify-content: center; align-items: center; }
.summary { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--bg); }
.tags--big .tag { font-size: 13.5px; padding: 3px 10px; }
.conflict { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #fff4de; border: 1px solid #f0d49a; color: #7a4a00; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cform__actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 12px 0; background: linear-gradient(180deg, transparent, var(--bg) 24%); }
.spacer { flex: 1; }
.cform .auth__msg { margin-top: 10px; }

/* ---------- mondschema ---------- */
.oral__scroll { overflow-x: auto; }
.oral__pair { display: flex; justify-content: center; gap: 6px; }
.oral__svg { width: 50%; max-width: 360px; height: auto; flex: 1 1 0; min-width: 0; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.oral__svg .z { fill: var(--uz-blue-50); stroke: var(--uz-blue); stroke-width: 1.2; cursor: pointer; transition: fill .12s; }
.oral__svg .z:hover { fill: var(--uz-blue-100); }
.oral__svg .z.sel { fill: #e5484d; stroke: #a51d22; }
.oral__svg .z.sel:hover { fill: #d93a3f; }
.oral__svg .tooth { cursor: pointer; }
.oral__svg .tooth circle { fill: #fff; stroke: #64748b; stroke-width: 1; }
.oral__svg .tooth:hover circle { fill: #fff4e5; stroke: #b25e00; }
.oral__svg .tooth.x circle { fill: #1f2937; stroke: #000; }
.oral__svg .tooth text { font-size: 8px; fill: #334155; text-anchor: middle; pointer-events: none; font-weight: 700; }
.oral__svg .tooth.x text { fill: #fff; }
.oral__svg .t { font-size: 9px; fill: #334155; pointer-events: none; text-anchor: middle; }
.oral__svg .lbl { font-size: 11px; fill: var(--uz-blue-600); font-weight: 750; text-anchor: middle; }
.oral__svg .side { font-size: 14px; fill: var(--uz-blue-600); font-weight: 800; text-anchor: middle; }
.oral__svg [data-zone]:focus-visible, .oral__svg [data-tooth]:focus-visible { outline: none; }
.oral__svg [data-zone]:focus-visible { stroke: #0f172a; stroke-width: 3; }
.oral__svg [data-tooth]:focus-visible circle { stroke: #0f172a; stroke-width: 3; }
.oral--zoom .oral__pair { flex-direction: column; align-items: flex-start; }
.oral--zoom .oral__svg { width: 640px; max-width: none; flex: none; }

/* ---------- smalle schermen ---------- */
@media (max-width: 1099px) {
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .oral__pair { flex-direction: column; align-items: center; }
  .oral__svg { width: 100%; max-width: 380px; flex: none; }
  .oral--zoom .oral__svg { width: 620px; }
  .cform__head .planned { margin-left: 0; width: 100%; }
  .cform__actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 10px 0; }
  .cform__actions .btn { flex: 1 1 auto; }
  .cases__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- beheer ---------- */
.admin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.invite { display: flex; gap: 8px; align-items: flex-start; }
.invite .field { flex: 1; }
.alist { display: grid; gap: 8px; }
.arow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.arow__main { flex: 1 1 220px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.arow__main .hint { flex-basis: 100%; overflow-wrap: anywhere; }
.arow__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.agroup { display: grid; gap: 8px; }
.agroup__head { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mform { display: grid; gap: 14px; }
@media (max-width: 1099px) { .admin__grid { grid-template-columns: minmax(0, 1fr); } }