/* HIDAIA — standaardpakketten modulair: twee voorbeelden (CRM en tijdregistratie) met modules die aan en uit kunnen.
   CSP-veilig: geen inline stijlen; breedtes en hoogtes van balken via klassen. */

.mods { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 12px); }
.mods [hidden] { display: none !important; }      /* display:flex/grid op een klasse overschrijft anders het hidden-attribuut */

.mods-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: end; margin-bottom: 40px; }
.mods-status { display: inline-block; margin-inline-start: 10px; padding: 4px 8px; font-size: 10px; letter-spacing: .1em; color: #6F541B; background: #F6EDD6; border-radius: var(--radius); vertical-align: 1px; }
.mods-head h3 { font-size: 34px; line-height: 1.15; max-width: 560px; }
.mods-head > p { font-size: 17px; color: var(--slate); max-width: 520px; margin: 0; }

.mods-points { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mods-points li { background: var(--paper); padding: 22px 26px 24px; font-size: 15px; color: var(--slate); }
.mods-points strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 15px; color: var(--ink); }

.mods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mod-ex { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); padding: 34px 32px 30px; min-width: 0; }
.mod-ex header .offer-kind { margin-top: 0; }
.mod-ex h4, .mod-ex.is-wide header h3 { font-family: var(--font-display); font-size: 26px; margin: 0; }
.mod-ex header p:last-child { color: var(--slate); margin: 10px 0 0; min-height: 3.2em; }

/* modules als schakelaars */
.mod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 10px; }
.mod-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  font: 600 14px/1 var(--font-body); color: var(--slate); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.mod-chip::before { content: "+"; font-weight: 700; color: var(--gold-700); width: 10px; text-align: center; }
.mod-chip:hover { border-color: var(--gold-500); color: var(--ink); }
.mod-chip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.mod-chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.mod-chip[aria-pressed="true"]::before { content: "✓"; color: var(--gold-300); }
.mod-chip:disabled { cursor: default; }
.mod-chip.is-base { cursor: default; background: var(--mist); color: var(--slate); border-style: dashed; }
.mod-chip.is-base::before { content: "•"; color: var(--slate); }
.mod-count { margin: 0 0 18px; font-size: 13px; color: var(--slate); }

/* het voorbeeldscherm */
.mod-screen { display: grid; grid-template-columns: 132px 1fr; border: 1px solid var(--line); background: var(--mist); min-height: 430px; }
.mod-nav { list-style: none; margin: 0; padding: 16px 0; background: var(--navy-800); }
.mod-nav li { padding: 9px 16px; font-size: 13px; color: var(--muted-dark); border-inline-start: 2px solid transparent; }
.mod-nav li.is-base { color: var(--white); border-inline-start-color: var(--gold-500); background: rgba(255,255,255,.05); }
.mod-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mod-fictief { margin: 0 0 -2px; align-self: flex-end; font: 700 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #6F541B; background: #F6EDD6; padding: 5px 8px; border-radius: var(--radius); }
.mod-empty { margin: auto; max-width: 240px; text-align: center; color: var(--slate); font-size: 14px; }

.mod-panel { background: var(--white); border: 1px solid var(--line); padding: 14px 16px 12px; }
@media (prefers-reduced-motion: no-preference) { html.js .mod-panel.is-new { animation: mod-in .35s var(--ease); } }
@keyframes mod-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mod-panel h5 { margin: 0 0 8px; font: 700 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }

.mod-rows { list-style: none; margin: 0; padding: 0; }
.mod-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--slate); }
.mod-rows li:first-child { border-top: 0; }
.mod-rows li > span { min-width: 0; }
.mod-rows b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.mod-rows.tight li { padding: 7px 0; }
.mods .num { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-size: 13px; }

.mods .tag { flex: none; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: var(--radius); background: var(--mist); color: var(--slate); white-space: nowrap; }
.mods .tag.ok { background: #E6F2EB; color: #1B6B43; }
.mods .tag.gold { background: #F6EDD6; color: #6F541B; }

.mod-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mod-kanban > div { background: var(--mist); padding: 8px; min-width: 0; }
.mod-kanban b { display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--ink); margin-bottom: 6px; }
.mod-kanban i { font-style: normal; color: var(--slate); font-weight: 600; }
.mod-kanban span { display: block; background: var(--white); border: 1px solid var(--line); border-inline-start: 2px solid var(--gold-500); padding: 6px 8px; font-size: 12px; color: var(--ink); margin-top: 5px; overflow-wrap: break-word; }

.mod-timer { display: flex; align-items: center; gap: 12px; background: var(--navy-800); color: var(--muted-dark); padding: 12px 14px; font-size: 13px; margin-bottom: 4px; }
.mod-timer > span:nth-child(2) { flex: 1; min-width: 0; }
.mod-timer b { display: block; color: var(--white); font-size: 14px; font-weight: 600; }
.mod-timer strong { font: 700 20px/1 var(--font-display); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.mod-dot { width: 9px; height: 9px; border-radius: 50%; background: #4FBF86; flex: none; }
@media (prefers-reduced-motion: no-preference) { .mod-dot { animation: mod-pulse 1.6s ease-in-out infinite; } }
@keyframes mod-pulse { 50% { opacity: .35; } }

.mod-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 108px; padding-top: 4px; }
.mod-week > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 12px; color: var(--slate); }
.mod-week i { order: 2; display: block; width: 100%; max-width: 44px; background: var(--navy-800); border-top: 2px solid var(--gold-500); }
.mod-week b { order: 1; font-size: 12px; color: var(--ink); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.mod-week span { order: 3; margin-top: 4px; }
.mod-week .h-80 { height: 64px; } .mod-week .h-75 { height: 60px; } .mod-week .h-65 { height: 52px; }
.mod-note { margin: 10px 0 0; font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mod-bars { list-style: none; margin: 0; padding: 0; }
.mod-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; color: var(--ink); }
.mod-bars li > span { overflow-wrap: anywhere; }
.mod-bars i { display: block; height: 8px; background: var(--mist); }
.mod-bars u { display: block; height: 100%; background: var(--navy-800); text-decoration: none; }
.mod-bars u.warn { background: var(--gold-500); }
.mod-bars u.soft { background: var(--label-dark); }
.w-08 { width: 8%; } .w-18 { width: 18%; } .w-30 { width: 30%; } .w-62 { width: 62%; } .w-74 { width: 74%; } .w-88 { width: 88%; }

.mod-privacy b { color: var(--ink); }
.mod-privacy { margin: 16px 0 0; font-size: 13px; color: var(--slate); padding-inline-start: 14px; border-inline-start: 2px solid var(--gold-500); }

/* derde voorbeeld: breed, panelen naast elkaar */
.mod-ex.is-wide { grid-column: 1 / -1; }
.mod-ex.is-wide header p:last-child { min-height: 0; max-width: 720px; }
.mod-ex.is-wide .mod-screen { min-height: 0; }
.mod-body.is-grid { display: block; position: relative; columns: 2; column-gap: 12px; padding-top: 44px; }   /* gebalanceerde kolommen: geen lege rechterkolom bij een oneven aantal modules */
.mod-body.is-grid > .mod-panel { break-inside: avoid; margin: 0 0 12px; }
.mod-body.is-grid > .mod-fictief { position: absolute; top: 14px; inset-inline-end: 16px; margin: 0; }   /* buiten de kolommen: een float geeft in multicol een spookvak */
.mod-body.is-grid > .mod-empty { column-span: all; margin: 0 auto; padding: 40px 0; }

.mod-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mod-tiles li { background: var(--mist); border-inline-start: 3px solid var(--slate); padding: 10px 12px; font-size: 12px; color: var(--slate); min-width: 0; }
.mod-tiles b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.mod-tiles .run { border-inline-start-color: #2E9B66; }
.mod-tiles .stop { border-inline-start-color: var(--error); background: #FBEFEC; }
.mod-tiles .stop span { color: var(--error); font-weight: 600; }
.mod-tiles .warm { border-inline-start-color: var(--gold-500); }

.mod-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mod-kpis > div { background: var(--mist); padding: 12px 10px; text-align: center; min-width: 0; }
.mod-kpis b { display: block; font: 700 22px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.mod-kpis span { display: block; margin-top: 4px; font-size: 11px; color: var(--slate); overflow-wrap: anywhere; }
.mod-kpis .is-total { background: var(--navy-800); }
.mod-kpis .is-total b { color: var(--gold-300); }
.mod-kpis .is-total span { color: var(--muted-dark); }
.mods .num b { font-weight: 600; }
.w-39 { width: 39%; } .w-58 { width: 58%; } .w-65 { width: 65%; } .w-71 { width: 71%; } .w-76 { width: 76%; } .w-84 { width: 84%; } .w-85 { width: 85%; } .w-94 { width: 94%; } .w-100 { width: 100%; }

/* samenwerking tussen de pakketten */
.mods-bridge { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 20px 26px; border: 1px dashed var(--line); background: var(--white); transition: background var(--normal), border-color var(--normal); }
.mods-bridge p { margin: 0; color: var(--slate); font-size: 15px; }
.mods-bridge b { color: var(--ink); }
.mods-bridge-mark { font-size: 22px; color: var(--gold-700); flex: none; }
.mods-bridge.is-on { background: var(--navy-800); border: 1px solid var(--navy-800); }
.mods-bridge.is-on p { color: #D5DEE7; }
.mods-bridge.is-on b { color: var(--white); }
.mods-bridge.is-on .mods-bridge-mark { color: var(--gold-300); }

.mods-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.mods-foot p { margin: 0; font-size: 13px; color: var(--slate); }

@media (max-width: 1020px) {
  .mods-grid { grid-template-columns: 1fr; }
  .mods-head { grid-template-columns: 1fr; gap: 20px; }
  .mod-ex header p:last-child { min-height: 0; }
  .mod-screen { min-height: 0; }
}
@media (max-width: 760px) {
  .mod-body.is-grid { columns: 1; }
  .mods { margin-top: 64px; padding-top: 52px; }
  .mods-head h3 { font-size: 27px; }
  .mods-points { grid-template-columns: 1fr; margin-bottom: 40px; }
}
@media (max-width: 560px) {
  .mod-ex { padding: 26px 18px 22px; }
  .mod-screen { grid-template-columns: 1fr; }
  .mod-nav { display: flex; flex-wrap: wrap; padding: 6px 8px; }
  .mod-nav li { padding: 7px 9px; border-inline-start: 0; border-bottom: 2px solid transparent; font-size: 12px; }
  .mod-nav li.is-base { border-bottom-color: var(--gold-500); }
  .mod-chip { min-height: 44px; }
  .mod-body { padding: 10px; }
  .mod-kanban { grid-template-columns: 1fr; }
  .mod-kpis { grid-template-columns: 1fr 1fr; }
  .mods-bridge { padding: 16px 18px; align-items: flex-start; }
  .mod-timer strong { font-size: 17px; }
}