/* Electronic patient record: photos, face chart, comparing (030
   Functionaliteit, Electronisch Patienten Dossier). */
.cols .col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sub-h { font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 12px 0 6px; }
.sub-h:first-child { margin-top: 0; }
.epd-entry + .epd-entry { margin-top: 10px; }
.epd-entry h2 a { color: inherit; text-decoration: none; }
.epd-entry h2 a:hover { text-decoration: underline; }

.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo-grid li { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.photo-grid a { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid small { color: var(--fg-3); }
.epd-photo { display: block; max-width: 100%; height: auto; margin: 0 auto 12px; border-radius: var(--r-s); }
.epd-photo-edit { margin-top: 10px; }
.epd-photo-edit summary, .chart-add summary, .chart-withdraw summary { cursor: pointer; color: var(--accent); font-size: 13px; }

.chart-block .chart-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.chart-img { width: 180px; max-width: 100%; }
.chart-img svg, .chart-canvas svg { display: block; width: 100%; height: auto; }
.chart-sum { margin-top: 6px; }
.swatch { width: 12px; height: 12px; flex: none; }

.chart-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .chart-editor { grid-template-columns: minmax(0, 1fr); } }
.chart-main .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chart-main .tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chart-main .tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chart-canvas { max-width: 520px; margin: 0 auto; touch-action: none; user-select: none; }
.chart-canvas svg { cursor: crosshair; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.chart-canvas circle.cp { cursor: grab; }
.chart-side { display: flex; flex-direction: column; gap: 6px; }
.chart-totals li { display: flex; align-items: center; gap: 8px; }
.chart-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chart-point { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: var(--surface-2); }

.compare-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.compare-form .fr { min-width: 220px; flex: 1; }
.cmp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cmp-side figure { margin: 0; }
.cmp-side figcaption { font-size: 12px; color: var(--fg-2); margin-top: 4px; }
.cmp-pane { overflow: hidden; border-radius: var(--r-s); background: #000; touch-action: none; cursor: zoom-in; }
.cmp-pane img { display: block; width: 100%; height: auto; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.cmp-slider { position: relative; max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: var(--r-s); background: #000; }
.cmp-slider > img { display: block; width: 100%; height: auto; }
.cmp-top { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; overflow: hidden; border-right: 2px solid #fff; }
.cmp-top img { display: block; height: auto; max-width: none; }
.cmp-slider input[type=range] { position: absolute; left: 4%; right: 4%; bottom: 12px; width: 92%; }
@media (max-width: 720px) { .cmp-side { grid-template-columns: minmax(0, 1fr); } }

/* Tablet pages */
.pcard.wide { max-width: 1100px; margin: 0 auto; }
.camera .cam-frame.wide { aspect-ratio: 3 / 4; max-width: 520px; }
.photo-session video { transform: none; }
.photo-session video, .photo-session .cam-frame img { object-fit: contain; }
.cam-overlay { position: absolute; inset: 0; opacity: .45; pointer-events: none; }
.session-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.session-bar .fr { flex: 1; min-width: 180px; }
.session-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.session-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: var(--r-s); background: var(--surface-2); }
.session-list li.ok small { color: var(--ok); }
.session-list li.bad small { color: var(--bad); }

/* Paging of a timeline (030 Functionaliteit, Tijdlijn). */
.tl-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.tl-pager .btn { padding: 4px 10px; font-size: 13px; }

/* Price calculator on the treatment form. */
.ph-result { font-weight: 600; font-size: 16px; }

/* Invoicing (030 Functionaliteit, Facturatie). */
.tabs-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tabs-bar a { border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 5px 12px; font-size: 13px; text-decoration: none; }
.tabs-bar a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.inv-lines td, .inv-lines th { vertical-align: top; }
.inv-lines tfoot td, .inv-lines tfoot th { border-top: 1px solid var(--line); }
.inv-lines .inv-total th { font-size: 15px; border-top: 2px solid var(--fg); }
.hint.block { display: block; }
.line-inputs .in { width: 100%; min-width: 0; }
.line-inputs .w-qty { max-width: 90px; }
.line-inputs .w-price { max-width: 140px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.inline-form .fr { flex: 1; min-width: 160px; }
.lot-fill { background: var(--warn-soft); border-radius: var(--r-s); padding: 6px 10px; }
.appt-add { margin-top: 10px; }
.appt-add summary { cursor: pointer; color: var(--accent); font-size: 13px; }