/* Derks portaal, gedeelde huisstijl (derks-stijl.css)
 *
 * DE canonieke Derks-skin voor ALLE modules, zodat alles er hetzelfde uitziet
 * ("ons smaakje") en het als 1 product voelt.
 *
 * Bron van waarheid: de Derks PWA Hub (0. Derks PWA Hub/style.css) + masterplan:
 *   antraciet #1F2123, Derks geel #FFC30E, warm wit (#F5F4EF paper / #FFFFFF wit),
 *   rustige lijnen, compacte kaarten. Geel is het accent; op geel altijd donkere tekst.
 *
 * Gebruik: laad dit als eerste stylesheet; module-eigen CSS mag alleen aanvullen,
 * niet de kleuren/stijl per app opnieuw verzinnen.
 * Canonieke bron: 2. In aanbouw (Claude)/_shared/derks-stijl.css
 * HARDE REGEL: geen em-dashes.
 */
:root {
  /* Canonieke Derks-tokens (namen uit de Hub) */
  --derks-ink: #1F2123;        /* antraciet, donker */
  --derks-ink-2: #2B2E31;
  --derks-paper: #F5F4EF;      /* warm wit, achtergrond */
  --derks-surface: #FFFFFF;    /* wit, kaarten */
  --derks-line: #D9D8D2;
  --derks-yellow: #FFC30E;     /* Derks geel, accent */
  --derks-green: #2F7D55;
  --derks-red: #B84535;
  --derks-blue: #276A8F;       /* secundair blauw (links/info) */
  --derks-text: #1B1D1E;
  --derks-muted: #686C69;
  --derks-shadow: 0 16px 34px rgba(31, 33, 35, .12);
  --derks-radius: 14px;
  --derks-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Aliassen (Hub-namen), zodat de Hub dit bestand 1-op-1 kan gebruiken */
  --ink: var(--derks-ink); --ink-2: var(--derks-ink-2);
  --paper: var(--derks-paper); --surface: var(--derks-surface);
  --line: var(--derks-line); --yellow: var(--derks-yellow);
  --green: var(--derks-green); --red: var(--derks-red);
  --text: var(--derks-text); --muted: var(--derks-muted); --shadow: var(--derks-shadow);
}

.derks, body.derks {
  font-family: var(--derks-font);
  background: var(--derks-paper);
  color: var(--derks-text);
  -webkit-tap-highlight-color: transparent;
}

/* Topbar: antraciet met Derks geel accentlijn */
.derks-topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--derks-ink); color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom: 3px solid var(--derks-yellow);
}
.derks-topbar h1 { font-size: 18px; margin: 0; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.derks-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--derks-yellow); color: var(--derks-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.derks-badge { font-size: 10px; background: var(--derks-yellow); color: var(--derks-ink); padding: 3px 7px; border-radius: 20px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* Knoppen. Op geel altijd donkere tekst (contrast). */
.derks-btn { border: none; border-radius: 10px; padding: 13px 16px; font-size: 15px; font-weight: 650; cursor: pointer; font-family: inherit; }
.derks-btn.primary { background: var(--derks-ink); color: #fff; }
.derks-btn.accent { background: var(--derks-yellow); color: var(--derks-ink); }
.derks-btn.ghost { background: var(--derks-surface); color: var(--derks-text); border: 1px solid var(--derks-line); }
.derks-btn.small { padding: 8px 12px; font-size: 13px; }

/* Kaarten */
.derks-card {
  background: var(--derks-surface); border: 1px solid var(--derks-line); border-radius: var(--derks-radius);
  padding: 16px; box-shadow: var(--derks-shadow); margin-bottom: 12px;
}
.derks-card h3 { margin: 0 0 4px; font-size: 16px; }
.derks-card .meta { font-size: 13px; color: var(--derks-muted); }

/* Tegels (startscherm en hubs) */
.derks-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .derks-tiles { grid-template-columns: repeat(3, 1fr); } }
.derks-tile {
  background: var(--derks-surface); border: 1px solid var(--derks-line); border-radius: var(--derks-radius);
  padding: 15px; cursor: pointer; box-shadow: var(--derks-shadow);
}
.derks-tile .ic { font-size: 25px; line-height: 1; }
.derks-tile .tn { font-weight: 650; margin-top: 7px; font-size: 15px; }
.derks-tile .ts { font-size: 12.5px; color: var(--derks-muted); margin-top: 2px; }

/* Chips / filters. Actief = Derks geel met donkere tekst. */
.derks-chip { background: var(--derks-surface); border: 1px solid var(--derks-line); border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--derks-muted); cursor: pointer; font-family: inherit; }
.derks-chip.on { background: var(--derks-yellow); color: var(--derks-ink); border-color: var(--derks-yellow); }

/* Statuspil */
.derks-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
.derks-status.open { background: #FFF2C2; color: #7D5A00; }
.derks-status.bezig { background: #E7EFF4; color: var(--derks-blue); }
.derks-status.done { background: #E9F2EC; color: var(--derks-green); }

/* Sectiekop */
.derks-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--derks-muted); margin: 4px 2px 10px; font-weight: 700; }

/* Dialogen */
.derks-dialog { border: none; border-radius: 18px; padding: 20px; width: min(92vw, 460px); max-height: 92vh; overflow: auto; background: var(--derks-surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.derks-dialog::backdrop { background: rgba(31, 33, 35, .5); }

/* Zwevende actieknop: Derks geel met donkere tekst */
.derks-fab {
  position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 78px);
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--derks-yellow); color: var(--derks-ink); font-size: 34px; line-height: 1;
  box-shadow: 0 6px 18px rgba(255, 195, 14, .5); cursor: pointer; z-index: 20;
}