/* Vervolg (nacht 25/26-9): tijdlijn, detailpaneel, formulebalk en Controleren. Tokens uit onshuis.css/MudTheme (stijl-02). */

/* tekens (stijl-10): vorm per soort, kleur per laag */
.oh-sign{display:inline-flex;justify-content:center;min-width:1.4em;font:500 16px/1 var(--oh-mono);flex:none}
.oh-sign-formal{color:var(--mud-palette-primary)}
.oh-sign-personal{color:var(--mud-palette-secondary)}
.oh-proposal{outline:1px dashed var(--mud-palette-text-secondary);outline-offset:-2px;font-style:italic}

/* tijdlijn-werkbalk */
.oh-tl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.oh-layer-chip.mud-chip{margin:0}
@media (max-width:599.98px){.oh-segment-text{display:none}.oh-segment .mud-button-icon-start{margin:0}}

/* agenda en regels */
.oh-agenda-group+.oh-agenda-group{margin-top:8px}
.oh-agenda-head{position:sticky;top:0;z-index:1;background:var(--oh-kaart);margin:0;padding:8px 8px 4px;
  font:500 12px/1.4 "Roboto",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mud-palette-text-secondary)}
.oh-agenda-count{font-family:var(--oh-mono);margin-left:4px}
.oh-tl-row{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:4px;
  background:none;color:inherit;font:400 15px/1.3 "Roboto",sans-serif;text-align:left;cursor:pointer}
.oh-tl-row:hover{background:var(--oh-hover)}
.oh-tl-title{flex:1;min-width:0;overflow-wrap:anywhere}
.oh-tl-done .oh-tl-title{color:var(--mud-palette-text-secondary)}
.oh-tl-owner{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font:500 12px/1 "Roboto",sans-serif;background:var(--oh-actief);color:var(--oh-toon1)}
.oh-tl-wait{flex:none;font-size:12px;color:var(--oh-info-tekst);background:color-mix(in srgb,var(--oh-info-tekst) 10%,transparent);
  border-radius:12px;padding:2px 8px;white-space:nowrap}
.oh-tl-date{flex:none;font-size:13px;color:var(--mud-palette-text-secondary)}
@media (max-width:599.98px){.oh-tl-row{flex-wrap:wrap}.oh-tl-wait{white-space:normal}}

/* snelinvoer */
.oh-quickadd-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.oh-quickadd-chips .mud-chip{margin:0}

/* gantt */
.oh-scroll-x{overflow-x:auto;max-width:100%}
.oh-gantt{position:relative;padding-bottom:8px}
.oh-gantt-head{position:relative;height:24px;border-bottom:1px solid var(--oh-blad-lijn)}
.oh-gantt-week{position:absolute;top:4px;font:400 11px/1 var(--oh-mono);color:var(--mud-palette-text-secondary);white-space:nowrap;
  border-left:1px solid var(--oh-blad-lijn);padding-left:4px;height:20px}
.oh-gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--mud-palette-error);opacity:.6;z-index:1}
.oh-gantt-row{position:relative;height:32px;border-bottom:1px solid var(--oh-blad-lijn)}
.oh-gantt-label{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:6px;width:200px;height:31px;padding:0 8px;
  border:0;background:var(--oh-kaart);color:inherit;font:400 13px/1.2 "Roboto",sans-serif;text-align:left;cursor:pointer;overflow:hidden}
.oh-gantt-label span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oh-gantt-bar{position:absolute;top:9px;height:14px;border-radius:7px}
.oh-gantt-marker{position:absolute;top:10px;width:12px;height:12px;transform:rotate(45deg)}
.oh-gantt-formal{background:var(--mud-palette-primary)}
.oh-gantt-personal{background:var(--mud-palette-secondary)}
.oh-gantt-bar.oh-proposal{background:transparent;border:2px dashed currentColor}

/* detailpaneel: rechts 420 px, onder 600 px schermvullend */
.oh-panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:1300}
.oh-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;z-index:1301;background:var(--mud-palette-surface);
  box-shadow:var(--oh-elev3);display:flex;flex-direction:column}
.oh-panel-head{display:flex;align-items:center;gap:8px;padding:12px 8px 12px 16px;border-bottom:1px solid var(--mud-palette-divider)}
.oh-panel-body{flex:1;overflow-y:auto;padding:16px}
.oh-panel-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 16px}
.oh-panel-facts dt{color:var(--mud-palette-text-secondary);font-size:14px}
.oh-panel-facts dd{margin:0}
.oh-draft-body{white-space:pre-wrap;font-size:14px;line-height:1.45;margin-top:8px;padding:8px;border-radius:4px;background:var(--oh-blad-kop)}
@media (max-width:599.98px){.oh-panel{width:100vw}}

/* geld: formulebalk (geld-02) */
.oh-formulabar.mud-paper{display:flex;align-items:center;gap:12px;padding:4px 12px;flex-wrap:wrap}
.oh-formulabar-ref{min-width:120px;font-size:13px;color:var(--oh-toon1)}
.oh-formulabar-fx{font-style:italic;color:var(--mud-palette-text-secondary)}
.oh-formulabar-input{flex:1;min-width:160px}
.oh-money-cell-selected{outline:2px solid var(--mud-palette-primary);outline-offset:-2px;background:var(--oh-actief)}
.oh-money-source{color:var(--mud-palette-text-secondary)}
.oh-caption-proposed{font-size:11px;font-style:italic;color:var(--mud-palette-text-secondary)}

/* Controleren */
.oh-review-chips{display:flex;flex-wrap:wrap;gap:4px}
.oh-review-chips .mud-chip{margin:0}
.oh-review-list{display:flex;flex-direction:column;gap:12px}
.oh-review-card{background:var(--oh-kaart);box-shadow:var(--oh-elev1);border-radius:4px;padding:16px;border-left:4px solid transparent;
  transition:transform 150ms,opacity 150ms;touch-action:pan-y;outline:none}
.oh-review-card.oh-review-focus{border-left-color:var(--mud-palette-primary)}
.oh-review-card.oh-swipe-right{background:color-mix(in srgb,var(--mud-palette-success) 12%,var(--oh-kaart))}
.oh-review-card.oh-swipe-left{background:color-mix(in srgb,var(--mud-palette-warning) 12%,var(--oh-kaart))}
.oh-review-entity{font:500 14px/1.4 "Roboto",sans-serif}
.oh-review-field{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mud-palette-text-secondary);margin-top:2px}
.oh-review-value{font-size:20px;line-height:1.35;margin:4px 0;overflow-wrap:anywhere}
.oh-review-source{border:0;background:none;padding:0;margin:0;font:italic 12px/1.4 "Roboto",sans-serif;color:var(--mud-palette-text-secondary);
  cursor:pointer;text-decoration:underline dotted;text-align:left}
.oh-review-sourcebox{margin-top:8px;padding:8px 12px;border-radius:4px;background:var(--oh-blad-kop);font-size:13px}
.oh-review-sourcebox blockquote{margin:6px 0;padding-left:8px;border-left:3px solid var(--oh-blad-lijn);white-space:pre-wrap}
.oh-review-caption{color:var(--mud-palette-text-secondary);font-size:12px;margin-bottom:6px}
.oh-review-answers{margin-top:6px;font-size:13px;color:var(--oh-info-tekst)}
.oh-review-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:599.98px){.oh-review-actions .mud-button-root{min-height:48px;flex:1 1 auto}}
.oh-review-badge .mud-badge.mud-badge-top.right{inset:auto auto calc(100% - 14px) calc(100% - 14px)}

/* kosten per onderwerp */
.oh-cost-post{padding:8px 0;border-top:1px solid var(--mud-palette-divider)}
.oh-cost-post:first-of-type{border-top:0}
table.oh-cost-lines{width:100%;border-collapse:collapse;margin-top:4px;font-size:14px}
.oh-cost-lines td{padding:4px 0;vertical-align:top;border-top:1px dashed var(--oh-blad-lijn)}
.oh-cost-lines td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.oh-cost-source{font-size:12px;color:var(--mud-palette-text-secondary);overflow-wrap:anywhere}

/* foto's */
.oh-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.oh-photo-tile{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left}
.oh-photo-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--oh-blad-kop)}
.oh-photo-title{font-size:13px;color:var(--mud-palette-text-secondary)}
.oh-lightbox{position:fixed;inset:24px;z-index:1301;background:var(--mud-palette-surface);border-radius:4px;box-shadow:var(--oh-elev3);
  padding:16px;display:flex;flex-direction:column;overflow:auto}
.oh-lightbox img{max-width:100%;max-height:calc(100vh - 180px);object-fit:contain;align-self:center}
@media (max-width:599.98px){.oh-lightbox{inset:0;border-radius:0}}
.oh-segment .mud-button-root.oh-segment-on{background:var(--oh-actief);color:var(--mud-palette-primary);font-weight:600}