/* HIDAIA — klikbaar voorbeeld van een standaardpakket: menu links, één scherm per module, lijsten met detail, tabbladen.
   Bouwt op modules.css (schakelaars, .mod-screen, .tag, .num) en styles.css. CSP-veilig: geen inline stijlen. */

.app [hidden] { display: none !important; }
.app .mod-screen { grid-template-columns: 168px 1fr; min-height: 560px; }
.app .mod-nav { padding: 12px 0; }
.app .mod-nav li { padding: 0; border: 0; }
.app .mod-nav button {
  display: block; width: 100%; text-align: start; padding: 10px 16px; font: 500 13px/1.3 var(--font-body); color: var(--muted-dark);
  background: none; border: 0; border-inline-start: 2px solid transparent; cursor: pointer;
}
.app .mod-nav button:hover { color: var(--white); background: rgba(255,255,255,.04); }
.app .mod-nav button:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }
.app .mod-nav button[aria-current="true"] { color: var(--white); border-inline-start-color: var(--gold-500); background: rgba(255,255,255,.06); font-weight: 600; }
.app .mod-nav li.is-base button { color: var(--white); }
.app .mod-nav .nav-foot { margin-top: auto; padding: 14px 16px 6px; font-size: 11px; color: var(--label-dark); border-top: 1px solid rgba(255,255,255,.1); }
.app .mod-nav { display: flex; flex-direction: column; }
.app .mod-body { position: relative; padding: 40px 16px 16px; gap: 0; }
.app .mod-body > .mod-fictief { position: absolute; top: 12px; inset-inline-end: 16px; margin: 0; z-index: 1; }

/* scherm */
.app-view { display: block; }
.app-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.app-head h5 { margin: 0; font: 700 15px/1.2 var(--font-display); color: var(--ink); letter-spacing: 0; text-transform: none; }
.app-head span { font-size: 12px; color: var(--slate); }
.app-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.app-search { flex: 1 1 180px; min-width: 0; padding: 8px 12px; font: 400 13px/1.2 var(--font-body); color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.app-filter { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; font: 600 12px/1 var(--font-body); color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.app-filter[aria-selected="true"], .app-filter[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.app-filter:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; font: 600 12px/1 var(--font-body); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer; }
.app-btn.primary { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.app-btn.primary::before { content: "+"; color: var(--gold-300); font-weight: 700; }
.app-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.app-btn.ghost { border-color: var(--line); color: var(--slate); }

.app-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.app-split.is-even { grid-template-columns: 1fr 1fr; }
.app-panel { background: var(--white); border: 1px solid var(--line); padding: 14px 16px 12px; min-width: 0; }
.app-panel h6 { margin: 0 0 8px; font: 700 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.app-panel + .app-panel { margin-top: 12px; }
.app-stack > * + * { margin-top: 12px; }

/* kengetallen */
.app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.app-kpis > div { background: var(--white); border: 1px solid var(--line); padding: 12px 14px; min-width: 0; }
.app-kpis b { display: block; font: 700 22px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.app-kpis span { display: block; margin-top: 4px; font-size: 12px; color: var(--slate); }
.app-kpis small { display: block; margin-top: 4px; font-size: 11px; color: var(--gold-700); font-weight: 600; }
.app-kpis > div.is-alert { border-inline-start: 3px solid var(--gold-500); }
.app-kpis > div.is-bad { border-inline-start: 3px solid var(--error); }

/* lijsten met een detail */
.app-list { list-style: none; margin: 0; padding: 0; }
.app-list li + li { border-top: 1px solid var(--line); }
.app-list button[data-pick] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 8px; text-align: start;
  font: 400 13px/1.35 var(--font-body); color: var(--slate); background: none; border: 0; border-inline-start: 2px solid transparent; cursor: pointer;
}
.app-list button[data-pick] > span { min-width: 0; }
.app-list button[data-pick] b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.app-list button[data-pick]:hover { background: var(--mist); }
.app-list button[data-pick]:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.app-list button[data-pick][aria-pressed="true"] { background: var(--mist); border-inline-start-color: var(--gold-500); }
.app-list .tag { flex: none; }

.app-detail { background: var(--white); border: 1px solid var(--line); padding: 16px 18px 14px; min-width: 0; }
.app-detail header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.app-detail header b { display: block; font: 700 17px/1.2 var(--font-display); color: var(--ink); }
.app-detail header small { display: block; margin-top: 3px; font-size: 12px; color: var(--slate); }
.app-detail dl { margin: 0; display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 5px 14px; font-size: 13px; }
.app-detail dt { color: var(--slate); }
.app-detail dd { margin: 0; color: var(--ink); }
.app-detail h6 { margin: 14px 0 6px; font: 700 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.app-detail .app-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.app-note { margin: 0; padding: 10px 12px; background: var(--mist); border-inline-start: 2px solid var(--gold-500); font-size: 12.5px; color: var(--slate); }
.app-note b { color: var(--ink); }
.app-quote { margin: 0; font-size: 13px; color: var(--ink); }
.app-quote + .app-quote { margin-top: 6px; }

/* tabellen */
.app-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.app-table th { text-align: start; font: 700 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.app-table td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.app-table td.num, .app-table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-table tr:last-child td { border-bottom: 0; }
.app-table tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.app-table tbody tr.is-total td { font-weight: 600; background: var(--mist); }
.app-table button[data-pick] { all: unset; display: block; width: 100%; cursor: pointer; }
.app-table tr.is-pick td { padding: 0; }
.app-table tr.is-pick button { padding: 8px; }
.app-table tr.is-pick button:hover { background: var(--mist); }
.app-table tr.is-pick button[aria-pressed="true"] { background: var(--mist); box-shadow: inset 2px 0 0 var(--gold-500); }
.app-table tr.is-pick button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.app-tablewrap { overflow-x: auto; }
.app-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--slate); }
.app-row b { color: var(--ink); }
.app-row .num { color: var(--ink); }

/* tabbladen */
.app-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.app-tabs button { padding: 8px 12px; font: 600 13px/1 var(--font-body); color: var(--slate); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.app-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold-500); }
.app-tabs button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }

/* kanban */
.app-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.app-kanban > div { background: var(--mist); padding: 8px; min-width: 0; }
.app-kanban > div > b { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--ink); margin-bottom: 6px; }
.app-kanban > div > b i { font-style: normal; color: var(--slate); font-weight: 600; }
.app-kanban button[data-pick] { display: block; width: 100%; text-align: start; background: var(--white); border: 1px solid var(--line); border-inline-start: 2px solid var(--gold-500); padding: 7px 9px; font: 400 12px/1.35 var(--font-body); color: var(--slate); margin-top: 6px; cursor: pointer; }
.app-kanban button[data-pick] b { display: block; font-weight: 600; font-size: 13px; color: var(--ink); }
.app-kanban button[data-pick][aria-pressed="true"] { border-color: var(--navy-800); border-inline-start-color: var(--gold-500); background: #F3F6F9; }
.app-kanban button[data-pick]:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.app-kanban > div.is-lost { opacity: .75; }

/* agenda: week */
.app-week { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.app-week > * { background: var(--white); min-width: 0; }
.app-week .wk-h { padding: 8px 6px; font-size: 12px; color: var(--slate); text-align: center; }
.app-week .wk-h b { display: block; font-size: 13px; color: var(--ink); }
.app-week .wk-h.is-today b { color: var(--gold-700); }
.app-week .wk-t { padding: 6px 4px 0; font-size: 11px; color: var(--slate); text-align: end; font-variant-numeric: tabular-nums; min-height: 44px; }
.app-week .wk-c { min-height: 44px; padding: 3px; }
.app-week .wk-c.is-today { background: #FBF8F0; }
.app-week button[data-pick] { display: block; width: 100%; text-align: start; padding: 5px 7px; font: 600 11.5px/1.3 var(--font-body); color: var(--white); background: var(--navy-800); border: 0; border-inline-start: 3px solid var(--gold-500); border-radius: 2px; cursor: pointer; }
.app-week button[data-pick] small { display: block; font-weight: 400; color: var(--muted-dark); }
.app-week button[data-pick].is-soft { background: #E9EEF3; color: var(--ink); border-inline-start-color: var(--slate); }
.app-week button[data-pick].is-soft small { color: var(--slate); }
.app-week button[data-pick][aria-pressed="true"] { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.app-week button[data-pick]:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 1px; }

/* balken en tegels (uit modules.css: .mod-bars, .mod-tiles, .mod-kpis, .mod-week, .mod-timer) blijven bruikbaar */
.app .mod-tiles button { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; }
.app .mod-tiles li { padding: 0; }
.app .mod-tiles button { padding: 10px 12px; }
.app .mod-tiles button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--navy-800); }
.app .mod-tiles button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.app .mod-tiles li > button b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.app .mod-tiles li > button span { display: block; font-size: 12px; color: var(--slate); }
.app .mod-tiles li.stop > button span { color: var(--error); font-weight: 600; }

/* weekstaat-tabel */
.app-sheet td.num input { display: none; }
.app-sheet td.is-empty { color: var(--label-dark); }
.app-states-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--slate); }

/* formulier-achtige regels en definities */
.app-form, .app-defs { margin: 0; display: grid; gap: 8px; }
.app-form > div, .app-defs > div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.app-form dt, .app-defs dt { color: var(--slate); }
.app-form dd, .app-defs dd { margin: 0; color: var(--ink); }
.app-form .app-search { display: block; }
.w-05 { width: 5%; }

/* logboek */
.app-log { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--slate); }
.app-log li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.app-log li:first-child { border-top: 0; }
.app-log time { font-variant-numeric: tabular-nums; color: var(--ink); }
.app-log b { color: var(--ink); font-weight: 600; }

/* meetwaarden */
.app-meas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-meas > div { background: var(--mist); padding: 10px 12px; min-width: 0; }
.app-meas b { display: block; font: 700 18px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.app-meas span { display: block; margin-top: 3px; font-size: 11px; color: var(--slate); }
.app-meas > div.is-warn b { color: #8A5A00; }

/* trend: staafjes per dag/week */
.app-trend { display: flex; align-items: flex-end; gap: 6px; height: 88px; padding-top: 4px; }
.app-trend > i { flex: 1; display: block; background: var(--navy-800); border-top: 2px solid var(--gold-500); min-width: 0; position: relative; }
.app-trend > i.is-soft { background: var(--label-dark); }
.app-trend > i.is-warn { background: var(--gold-500); border-top-color: var(--gold-700); }
.app-trend-x { display: flex; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--slate); }
.app-trend-x > span { flex: 1; text-align: center; }
.app-trend .t-10 { height: 10%; } .app-trend .t-11 { height: 11%; } .app-trend .t-12 { height: 12%; } .app-trend .t-13 { height: 13%; } .app-trend .t-14 { height: 14%; } .app-trend .t-15 { height: 15%; } .app-trend .t-16 { height: 16%; } .app-trend .t-17 { height: 17%; } .app-trend .t-18 { height: 18%; } .app-trend .t-19 { height: 19%; } .app-trend .t-20 { height: 20%; } .app-trend .t-21 { height: 21%; } .app-trend .t-22 { height: 22%; } .app-trend .t-23 { height: 23%; } .app-trend .t-24 { height: 24%; } .app-trend .t-25 { height: 25%; } .app-trend .t-26 { height: 26%; } .app-trend .t-27 { height: 27%; } .app-trend .t-28 { height: 28%; } .app-trend .t-29 { height: 29%; } .app-trend .t-30 { height: 30%; } .app-trend .t-31 { height: 31%; } .app-trend .t-32 { height: 32%; } .app-trend .t-33 { height: 33%; } .app-trend .t-34 { height: 34%; } .app-trend .t-35 { height: 35%; } .app-trend .t-36 { height: 36%; } .app-trend .t-37 { height: 37%; } .app-trend .t-38 { height: 38%; } .app-trend .t-39 { height: 39%; } .app-trend .t-40 { height: 40%; } .app-trend .t-41 { height: 41%; } .app-trend .t-42 { height: 42%; } .app-trend .t-43 { height: 43%; } .app-trend .t-44 { height: 44%; } .app-trend .t-45 { height: 45%; } .app-trend .t-46 { height: 46%; } .app-trend .t-47 { height: 47%; } .app-trend .t-48 { height: 48%; } .app-trend .t-49 { height: 49%; } .app-trend .t-50 { height: 50%; } .app-trend .t-51 { height: 51%; } .app-trend .t-52 { height: 52%; } .app-trend .t-53 { height: 53%; } .app-trend .t-54 { height: 54%; } .app-trend .t-55 { height: 55%; } .app-trend .t-56 { height: 56%; } .app-trend .t-57 { height: 57%; } .app-trend .t-58 { height: 58%; } .app-trend .t-59 { height: 59%; } .app-trend .t-60 { height: 60%; } .app-trend .t-61 { height: 61%; } .app-trend .t-62 { height: 62%; } .app-trend .t-63 { height: 63%; } .app-trend .t-64 { height: 64%; } .app-trend .t-65 { height: 65%; } .app-trend .t-66 { height: 66%; } .app-trend .t-67 { height: 67%; } .app-trend .t-68 { height: 68%; } .app-trend .t-69 { height: 69%; } .app-trend .t-70 { height: 70%; } .app-trend .t-71 { height: 71%; } .app-trend .t-72 { height: 72%; } .app-trend .t-73 { height: 73%; } .app-trend .t-74 { height: 74%; } .app-trend .t-75 { height: 75%; } .app-trend .t-76 { height: 76%; } .app-trend .t-77 { height: 77%; } .app-trend .t-78 { height: 78%; } .app-trend .t-79 { height: 79%; } .app-trend .t-80 { height: 80%; } .app-trend .t-81 { height: 81%; } .app-trend .t-82 { height: 82%; } .app-trend .t-83 { height: 83%; } .app-trend .t-84 { height: 84%; } .app-trend .t-85 { height: 85%; } .app-trend .t-86 { height: 86%; } .app-trend .t-87 { height: 87%; } .app-trend .t-88 { height: 88%; } .app-trend .t-89 { height: 89%; } .app-trend .t-90 { height: 90%; } .app-trend .t-91 { height: 91%; } .app-trend .t-92 { height: 92%; } .app-trend .t-93 { height: 93%; } .app-trend .t-94 { height: 94%; } .app-trend .t-95 { height: 95%; } .app-trend .t-96 { height: 96%; } .app-trend .t-97 { height: 97%; } .app-trend .t-98 { height: 98%; } .app-trend .t-99 { height: 99%; } .app-trend .t-100 { height: 100%; }

/* breedtes voor balken die modules.css niet kent */
.w-10 { width: 10%; } .w-12 { width: 12%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-22 { width: 22%; } .w-25 { width: 25%; } .w-28 { width: 28%; } .w-33 { width: 33%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-42 { width: 42%; } .w-45 { width: 45%; } .w-48 { width: 48%; } .w-50 { width: 50%; } .w-52 { width: 52%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-64 { width: 64%; } .w-66 { width: 66%; } .w-68 { width: 68%; } .w-70 { width: 70%; } .w-72 { width: 72%; } .w-78 { width: 78%; } .w-80 { width: 80%; } .w-82 { width: 82%; } .w-86 { width: 86%; } .w-90 { width: 90%; } .w-92 { width: 92%; } .w-96 { width: 96%; } .w-98 { width: 98%; }

.app-tip { margin: 12px 0 0; font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-tip b { color: var(--ink); }

@media (max-width: 1020px) {
  .app-split, .app-split.is-even { grid-template-columns: 1fr; }
  .app-kpis { grid-template-columns: 1fr 1fr; }
  .app-kanban { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .app .mod-screen { grid-template-columns: 1fr; min-height: 0; }
  .app .mod-nav { flex-direction: row; flex-wrap: wrap; padding: 6px 8px; gap: 2px; }
  .app .mod-nav li { flex: none; }
  .app .mod-nav button { padding: 8px 10px; border-inline-start: 0; border-bottom: 2px solid transparent; font-size: 12px; }
  .app .mod-nav button[aria-current="true"] { border-bottom-color: var(--gold-500); background: none; }
  .app .mod-nav .nav-foot { display: none; }
  .app .mod-body { padding: 12px; }
  .app .mod-body { padding-top: 40px; }
  .app-kpis { grid-template-columns: 1fr 1fr; }
  .app-kanban { grid-template-columns: 1fr; }
  .app-week { grid-template-columns: 36px repeat(5, minmax(0, 1fr)); }
  .app-week button[data-pick] { font-size: 10px; padding: 4px 4px; }
  .app-week button[data-pick] small { display: none; }
  .app-meas { grid-template-columns: 1fr 1fr 1fr; }
  .app-detail dl { grid-template-columns: 1fr; gap: 2px; }
  .app-sheet { font-size: 11.5px; }
  .app-sheet th, .app-sheet td { padding: 6px 4px; }
  .app-sheet td:first-child { max-width: 120px; overflow-wrap: anywhere; }
  .app-detail dt { margin-top: 6px; }
}
@media (max-width: 480px) {
  .app-kpis { grid-template-columns: 1fr; }
  .app-meas { grid-template-columns: 1fr 1fr; }
}

/* rechts-naar-links: de kanban en agenda spiegelen vanzelf via logische eigenschappen */
[dir="rtl"] .app-table tr.is-pick button[aria-pressed="true"] { box-shadow: inset -2px 0 0 var(--gold-500); }