:root {
      --bg: #f5f7fa;
      --card: #ffffff;
      --header-bg: #1e3a5f;
      --header-text: #ffffff;
      --accent: #0c8a8a;
      --accent-light: #d9efef;
      --text: #2d3748;
      --text-muted: #718096;
      --border: #e2e8f0;
      --hover: #edf2f7;
      --warning: #d97706;
      --danger: #c53030;
      --success: #2f855a;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      font-size: 14px;
    }

    header {
      background: var(--header-bg);
      color: var(--header-text);
      padding: 1rem 2rem;
      box-shadow: var(--shadow);
    }

    header h1 {
      font-size: 1.4rem;
      font-weight: 600;
    }

    header .subtitle {
      font-size: 0.85rem;
      opacity: 0.85;
      margin-top: 0.2rem;
    }

    header .scenario-bar {
      margin-top: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.85rem;
    }

    header .scenario-bar select,
    header .scenario-bar input {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: var(--header-text);
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
      font-size: 0.85rem;
    }

    header .scenario-bar select option {
      color: var(--text);
    }

    /* Opslagbalk in de kop — moet altijd zichtbaar tonen of je werk veilig staat */
    .opslag-balk {
      margin-top: 0.6rem;
      padding-top: 0.6rem;
      border-top: 1px solid rgba(255,255,255,0.15);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.8rem;
      font-size: 0.8rem;
    }
    #opslag-status, #cloud-status { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
    .opslag-bol {
      width: 9px; height: 9px; border-radius: 50%;
      display: inline-block; flex-shrink: 0;
    }
    .opslag-bol.goed { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.2); }
    .opslag-bol.waarschuwing { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.2); }
    .opslag-bol.fout { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.25); }
    .opslag-detail { opacity: 0.65; font-size: 0.75rem; }
    .opslag-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .opslag-knoppen button {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.28);
      color: var(--header-text);
      padding: 0.28rem 0.6rem;
      border-radius: 4px;
      font-size: 0.78rem;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s;
    }
    .opslag-knoppen button:hover { background: rgba(255,255,255,0.24); }

    nav.tabs {
      background: var(--card);
      border-bottom: 1px solid var(--border);
      display: flex;
      padding: 0 2rem;
      overflow-x: auto;
    }

    nav.tabs button {
      background: none;
      border: none;
      padding: 0.85rem 1.2rem;
      font-size: 0.9rem;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: all 0.15s;
      white-space: nowrap;
      font-family: inherit;
    }

    nav.tabs button:hover {
      color: var(--text);
      background: var(--hover);
    }

    nav.tabs button.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }

    main {
      padding: 1.5rem 2rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    section { display: none; }
    section.active { display: block; }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.2rem 1.5rem;
      margin-bottom: 1.2rem;
      box-shadow: var(--shadow);
    }

    .card h2 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0.8rem;
      color: var(--header-bg);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .card h2 .count-badge {
      background: var(--accent-light);
      color: var(--accent);
      font-size: 0.7rem;
      padding: 0.15rem 0.5rem;
      border-radius: 10px;
      font-weight: 600;
    }

    .card h3 {
      font-size: 0.95rem;
      font-weight: 600;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: var(--text);
    }

    .card p {
      margin-bottom: 0.5rem;
      color: var(--text-muted);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }

    table th {
      background: var(--bg);
      padding: 0.6rem 0.8rem;
      text-align: left;
      font-weight: 600;
      color: var(--text);
      border-bottom: 2px solid var(--border);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    table td {
      padding: 0.55rem 0.8rem;
      border-bottom: 1px solid var(--border);
    }

    table tbody tr:hover {
      background: var(--hover);
    }

    table tbody tr:last-child td {
      border-bottom: none;
    }

    .badge {
      display: inline-block;
      padding: 0.15rem 0.55rem;
      font-size: 0.72rem;
      border-radius: 10px;
      font-weight: 600;
    }
    .badge-cluster-1 { background: #e0f2fe; color: #0369a1; }
    .badge-cluster-2 { background: #fef3c7; color: #92400e; }
    .badge-cluster-3 { background: #dcfce7; color: #166534; }
    .badge-none      { background: #f3f4f6; color: #6b7280; }
    .badge-active    { background: var(--accent-light); color: var(--accent); }
    .badge-inactive  { background: #fee2e2; color: var(--danger); }
    .badge-warning   { background: #fef3c7; color: var(--warning); }

    .ft-pill {
      display: inline-block;
      padding: 0.1rem 0.45rem;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 0.78rem;
      font-family: 'SF Mono', Menlo, monospace;
      font-weight: 600;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .stat-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1rem 1.2rem;
      box-shadow: var(--shadow);
    }

    .stat-card .label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin-bottom: 0.3rem;
    }

    .stat-card .value {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--header-bg);
    }

    .stat-card .sub {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.2rem;
    }

    .placeholder {
      background: repeating-linear-gradient(
        45deg,
        var(--hover),
        var(--hover) 10px,
        var(--card) 10px,
        var(--card) 20px
      );
      border: 1px dashed var(--border);
      border-radius: 6px;
      padding: 3rem 2rem;
      text-align: center;
      color: var(--text-muted);
    }

    .placeholder .step-label {
      display: inline-block;
      background: var(--accent);
      color: white;
      padding: 0.25rem 0.7rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-bottom: 0.8rem;
    }

    .placeholder p {
      margin-bottom: 0.4rem;
    }

    .row-detail {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.15rem;
    }

    .note-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: var(--warning);
      color: white;
      border-radius: 50%;
      text-align: center;
      font-size: 0.7rem;
      line-height: 16px;
      cursor: help;
      margin-left: 0.3rem;
    }

    footer {
      padding: 1rem 2rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.78rem;
      border-top: 1px solid var(--border);
      margin-top: 2rem;
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    @media (max-width: 900px) {
      .two-col { grid-template-columns: 1fr; }
    }

    /* =========== Wacht-toewijzer (4b) =========== */
    .wacht-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 1.5rem;
    }
    @media (max-width: 900px) {
      .wacht-layout { grid-template-columns: 1fr; }
    }
    .wacht-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 1rem;
    }
    .btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      font-size: 0.85rem;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s;
    }
    .btn:hover { background: #086565; }
    .btn.btn-secondary {
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn.btn-secondary:hover { background: var(--hover); }
    .btn.btn-danger {
      background: var(--card);
      color: var(--danger);
      border: 1px solid var(--danger);
    }
    .btn.btn-danger:hover { background: #fee2e2; }

    .quota-row {
      padding: 0.55rem 0;
      border-bottom: 1px solid var(--border);
    }
    .quota-row:last-child { border-bottom: none; }
    .quota-name {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.85rem;
      margin-bottom: 0.3rem;
    }
    .quota-ft {
      font-size: 0.7rem;
      color: var(--text-muted);
      font-family: 'SF Mono', Menlo, monospace;
    }
    .quota-bar {
      height: 6px;
      background: var(--bg);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 0.2rem;
    }
    .quota-fill {
      height: 100%;
      background: var(--accent);
      transition: width 0.2s;
    }
    .quota-text {
      font-size: 0.7rem;
      color: var(--text-muted);
      font-family: 'SF Mono', Menlo, monospace;
      text-align: right;
    }
    .quota-over .quota-fill { background: var(--warning); }
    .quota-over .quota-text { color: var(--warning); font-weight: 600; }
    .quota-ok .quota-fill { background: var(--success); }

    .maand-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 1rem;
    }
    .maand-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    .maand-header {
      padding: 0.75rem 1rem;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
    }
    .maand-header h3 {
      font-size: 0.95rem;
      margin-bottom: 0.4rem;
      color: var(--header-bg);
    }
    .maand-subtitel {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: -0.15rem;
      margin-bottom: 0.3rem;
    }
    .maand-cresp {
      font-size: 0.72rem;
      color: var(--text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      align-items: center;
    }
    .maand-cresp .badge small { opacity: 0.7; font-size: 0.65rem; margin-left: 0.15rem; }
    .maand-weken {
      padding: 0.4rem 1rem;
    }
    .wacht-week-row {
      display: grid;
      grid-template-columns: 1fr 140px auto;
      gap: 0.6rem;
      align-items: center;
      padding: 0.45rem 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.82rem;
    }
    .wacht-week-row:last-child { border-bottom: none; }
    .wacht-week-row.assigned {
      background: linear-gradient(to right, transparent 30%, var(--accent-light) 100%);
      margin: 0 -1rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .wacht-week-row.assigned .week-label strong { color: var(--accent); }
    .wacht-week-row select {
      font-family: inherit;
      font-size: 0.8rem;
      padding: 0.3rem 0.4rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      width: 100%;
    }
    .week-label strong { color: var(--text); }
    .conflict-flag {
      color: var(--danger);
      font-size: 1rem;
      cursor: help;
    }

    /* =========== Cluster-editor (4c) =========== */
    .cluster-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
    .cluster-modus-keuze {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
      margin: 0.8rem 0 1.1rem;
    }
    .cluster-modus {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex: 1 1 260px;
      padding: 0.7rem 0.9rem;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      background: var(--card);
      cursor: pointer;
      transition: all 0.15s;
    }
    .cluster-modus:hover { background: var(--hover); }
    .cluster-modus.active { border-color: var(--accent); background: var(--accent-light); }
    .cluster-modus strong { display: block; font-size: 0.88rem; color: var(--header-bg); }
    .cluster-modus.active strong { color: var(--accent); }
    .cluster-modus small { display: block; font-size: 0.73rem; color: var(--text-muted); margin-top: 0.15rem; }
    .cluster-modus-radio {
      width: 15px; height: 15px;
      border: 2px solid var(--border);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .cluster-modus.active .cluster-modus-radio {
      border-color: var(--accent);
      background: radial-gradient(circle, var(--accent) 45%, transparent 48%);
    }
    .cluster-modus-vlag {
      margin-left: auto;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent);
    }
    .cluster-grid {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 1.5rem;
    }
    @media (max-width: 900px) {
      .cluster-grid { grid-template-columns: 1fr; }
    }
    .cluster-matrix-wrap h3,
    .cluster-grid h3 {
      font-size: 0.95rem;
      margin-bottom: 0.6rem;
      color: var(--header-bg);
    }
    .cluster-matrix {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    .cluster-matrix th, .cluster-matrix td {
      padding: 0.45rem 0.5rem;
      border: 1px solid var(--border);
      text-align: center;
      vertical-align: middle;
    }
    .cluster-matrix th {
      background: var(--bg);
      font-weight: 600;
      font-size: 0.78rem;
    }
    .cluster-matrix th small { display: block; font-weight: 400; opacity: 0.7; margin-top: 0.15rem; }
    .cluster-matrix td.maand-col {
      background: var(--bg);
      font-weight: 600;
      text-align: left;
      width: 110px;
    }
    .cluster-matrix select {
      font-family: inherit;
      font-size: 0.78rem;
      padding: 0.25rem 0.3rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      width: 100%;
      min-width: 110px;
    }
    .cell-wacht-info {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 0.3rem;
      line-height: 1.35;
      text-align: left;
      padding: 0.25rem 0.35rem;
      background: #faf5ff;
      border-radius: 3px;
      border-left: 2px solid #7c3aed;
    }
    .cell-wacht-info .wacht-arts {
      color: #6b21a8;
      font-weight: 600;
    }
    .cell-wacht-info .wacht-arts.is-resp {
      color: var(--danger);
      text-decoration: line-through;
    }
    .cell-wacht-empty {
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-top: 0.3rem;
      font-style: italic;
      opacity: 0.6;
      text-align: left;
      padding: 0.25rem 0.35rem;
    }
    .cluster-load-row {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
    }
    .cluster-load-row:last-child { border-bottom: none; }
    .cluster-load-count {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.78rem;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
    }
    .cluster-load-count.target { color: var(--success); background: #d1fae5; font-weight: 600; }
    .cluster-load-count.under  { color: var(--text-muted); background: var(--bg); }
    .cluster-load-count.over   { color: var(--warning); background: #fef3c7; font-weight: 600; }

    .mdo-row {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .mdo-row:last-child { border-bottom: none; }
    .mdo-row select {
      font-family: inherit;
      font-size: 0.85rem;
      padding: 0.3rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
    }
    .mdo-row .leden-list {
      font-size: 0.78rem;
      color: var(--text-muted);
      flex: 1;
    }

    .permanentie-model {
      padding: 0.8rem 1rem;
      border: 1.5px solid var(--border);
      border-radius: 6px;
      margin-bottom: 0.6rem;
      cursor: pointer;
      transition: all 0.15s;
      background: var(--card);
    }
    .permanentie-model:hover { background: var(--hover); }
    .permanentie-model.active {
      border-color: var(--accent);
      background: var(--accent-light);
    }
    .permanentie-model-header {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
      color: var(--header-bg);
    }
    .permanentie-model.active .permanentie-model-header { color: var(--accent); }
    .permanentie-model-radio {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--text-muted);
      display: inline-block;
      position: relative;
    }
    .permanentie-model.active .permanentie-model-radio {
      border-color: var(--accent);
    }
    .permanentie-model.active .permanentie-model-radio::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }
    .permanentie-model-uitleg {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .mdo-validation-error {
      margin-top: 0.6rem;
      padding: 0.55rem 0.8rem;
      background: #fee2e2;
      border: 1px solid var(--danger);
      border-radius: 4px;
      color: var(--danger);
      font-size: 0.82rem;
    }

    /* =========== Externe poli editor (4d) =========== */
    .extern-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
    .extern-grid {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 1.5rem;
    }
    @media (max-width: 900px) {
      .extern-grid { grid-template-columns: 1fr; }
    }
    .extern-locatie-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 1rem;
      overflow: hidden;
    }
    .extern-locatie-header {
      background: var(--bg);
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .extern-locatie-header h3 {
      font-size: 0.95rem;
      margin: 0;
      color: var(--header-bg);
    }
    .extern-locatie-meta {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .extern-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.83rem;
    }
    .extern-table th, .extern-table td {
      padding: 0.4rem 0.5rem;
      border: 1px solid var(--border);
      text-align: center;
    }
    .extern-table th {
      background: var(--bg);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .extern-table td.dag-col {
      background: var(--bg);
      font-weight: 600;
      text-align: left;
      width: 100px;
    }
    .extern-table select {
      font-family: inherit;
      font-size: 0.78rem;
      padding: 0.22rem 0.3rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      width: 100%;
      min-width: 105px;
    }
    .vrijedag-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    .vrijedag-table th, .vrijedag-table td {
      border: 1px solid var(--border);
      padding: 0.3rem 0.35rem;
      text-align: center;
    }
    .vrijedag-table th {
      background: var(--bg);
      font-weight: 600;
      font-size: 0.74rem;
    }
    .vrijedag-arts {
      text-align: left !important;
      background: var(--bg);
      white-space: nowrap;
      min-width: 150px;
    }
    .vrijedag-cel select {
      font-family: inherit;
      font-size: 0.75rem;
      padding: 0.2rem 0.25rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      width: 100%;
      min-width: 96px;
    }
    .vrijedag-halve-cel { width: 62px; }
    .vrijedag-halve {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      font-size: 0.8rem;
      cursor: pointer;
      color: var(--text-muted);
    }
    .vrijedag-halve input { cursor: pointer; }
    .vrijedag-cel.vrij-heel { background: #f1f5f9; }
    .vrijedag-cel.vrij-VM, .vrijedag-cel.vrij-NM { background: #f8fafc; }
    .vrijedag-cel.vrij-heel select,
    .vrijedag-cel.vrij-VM select,
    .vrijedag-cel.vrij-NM select { color: #64748b; font-weight: 600; }

    .vrijedag-samenvatting {
      margin-top: 0.9rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }
    .vrijedag-samenvatting-rij {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.4rem 0.7rem;
      border-bottom: 1px solid var(--border);
      font-size: 0.8rem;
    }
    .vrijedag-samenvatting-rij:last-child { border-bottom: none; }
    .vrijedag-samenvatting-rij:nth-child(odd) { background: var(--bg); }
    .vrijedag-dag { min-width: 88px; font-weight: 600; color: var(--header-bg); }
    .vrijedag-namen { flex: 1; color: var(--text-muted); }
    .vrijedag-aantal {
      min-width: 22px;
      text-align: center;
      font-weight: 600;
      color: var(--accent);
    }

    .rooster-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.9rem;
    }
    .rooster-toolbar select {
      font-family: inherit;
      font-size: 0.85rem;
      padding: 0.35rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: white;
      min-width: 240px;
    }
    .rooster-periode { font-size: 0.8rem; color: var(--text-muted); }
    .rooster-legende {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-bottom: 0.8rem;
      font-size: 0.76rem;
      color: var(--text-muted);
    }
    .rooster-legende-item { display: flex; align-items: center; gap: 0.35rem; }
    .rooster-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    .rooster-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }
    .rooster-table th, .rooster-table td {
      border: 1px solid var(--border);
      padding: 0.35rem 0.4rem;
      vertical-align: top;
      text-align: center;
    }
    .rooster-table th {
      background: var(--bg);
      font-weight: 600;
      font-size: 0.75rem;
    }
    .rooster-table th small { font-weight: 400; color: var(--text-muted); font-size: 0.68rem; }
    .rooster-arts-cel {
      text-align: left !important;
      background: var(--bg);
      white-space: nowrap;
      min-width: 130px;
    }
    .rooster-cel { min-width: 108px; }
    .rooster-cel.botsing { background: #fff7ed; }
    .rooster-pill {
      display: block;
      padding: 0.16rem 0.35rem;
      border-radius: 4px;
      font-size: 0.72rem;
      font-weight: 500;
      margin-bottom: 0.15rem;
      line-height: 1.3;
    }
    .rooster-pill:last-child { margin-bottom: 0; }
    .rooster-waarschuwing { font-size: 0.72rem; color: #ea580c; }

    .wacht-week-row.voor-fusie {
      opacity: 0.55;
      background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 5px, var(--card) 5px, var(--card) 10px);
    }
    .voor-fusie-label {
      font-size: 0.72rem;
      font-style: italic;
      color: var(--text-muted);
    }
    .wacht-week-row.overgangsweek {
      display: block;
      background: #fff7ed;
      border-left: 3px solid #ea580c;
      padding: 0.5rem 0.7rem;
    }
    .overgang-vlag {
      display: inline-block;
      margin-left: 0.4rem;
      font-size: 0.66rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #ea580c;
    }
    .overgang-keuzes {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: 0.4rem;
    }
    .overgang-keuzes label {
      flex: 1 1 170px;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .overgang-keuzes label span {
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-muted);
      font-weight: 600;
    }
    .overgang-keuzes select {
      font-family: inherit;
      font-size: 0.8rem;
      padding: 0.25rem 0.4rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
    }

    /* ===== Bewaarbalk bovenaan elke tab ===== */
    .bewaarbalk {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem 1rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 4px solid #a7d3d3;
      border-radius: 6px;
      padding: 0.55rem 0.9rem;
      margin-bottom: 1rem;
      font-size: 0.83rem;
      box-shadow: var(--shadow);
    }
    .bewaarbalk:empty { display: none; }
    .bewaar-status { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; line-height: 1.35; }
    .bewaar-status .opslag-detail { color: var(--text-muted); opacity: 1; }
    .bewaar-acties { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .bewaar-acties input.bewaar-opmerking {
      font-family: inherit; font-size: 0.8rem; padding: 0.35rem 0.55rem;
      border: 1px solid var(--border); border-radius: 4px; min-width: 220px; background: white;
    }
    .bewaar-acties .btn { padding: 0.4rem 0.9rem; }
    .bewaar-acties .btn[disabled] { opacity: 0.45; cursor: default; }
    .bewaar-acties .btn[disabled]:hover { background: var(--accent); }

    /* ===== Meldingen onder de kop (wie wijzigde wat) ===== */
    .cloud-meldingen {
      position: relative;
      margin-top: 0.5rem;
      display: flex; flex-direction: column; gap: 0.25rem;
      font-size: 0.78rem;
      padding-right: 1.6rem;
    }
    .cloud-melding {
      background: rgba(255,255,255,0.10);
      border-left: 3px solid #9ad3d3;
      border-radius: 3px;
      padding: 0.3rem 0.6rem;
    }
    .cloud-melding.let-op { border-left-color: #f6c46b; background: rgba(246,196,107,0.14); }
    .cloud-melding-tijd { opacity: 0.6; margin-right: 0.3rem; }
    .cloud-melding-wis {
      position: absolute; right: 0; top: 0;
      background: none; border: none; color: var(--header-text); opacity: 0.6;
      font-size: 1.1rem; cursor: pointer;
    }
    .cloud-melding-wis:hover { opacity: 1; }

    /* ===== Inline bevestiging (vervangt confirm()) ===== */
    .inline-bevestiging {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: #fff8e6; border: 1px solid #f3dca0; border-radius: 4px;
      padding: 0.25rem 0.6rem; font-size: 0.8rem; color: var(--text);
    }
    .leeg-hint {
      padding: 0.8rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;
      border: 1px dashed var(--border); border-radius: 6px;
    }

    /* ===== Geschiedenis-paneel ===== */
    .geschiedenis-paneel {
      background: var(--card); border-radius: 10px; max-width: 760px; width: 100%; max-height: 85vh;
      display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    }
    .geschiedenis-kop {
      padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    }
    .geschiedenis-kop strong { color: var(--header-bg); flex: 1; }
    .geschiedenis-filters select {
      font-family: inherit; font-size: 0.8rem; padding: 0.25rem 0.4rem;
      border: 1px solid var(--border); border-radius: 4px; background: white; margin-left: 0.3rem;
    }
    .geschiedenis-body { overflow-y: auto; padding: 0.6rem 1.1rem 1rem; }
    .gesch-rij { border-bottom: 1px solid var(--border); padding: 0.6rem 0; font-size: 0.83rem; }
    .gesch-rij:last-child { border-bottom: none; }
    .gesch-kop { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .gesch-tijd { color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .gesch-bron { color: var(--text-muted); font-size: 0.76rem; margin-left: auto; }
    .gesch-opmerking { margin-top: 0.25rem; color: var(--accent); font-style: italic; }
    .gesch-samenvatting { margin-top: 0.25rem; color: var(--text-muted); }
    .gesch-acties { margin-top: 0.4rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
    .gesch-acties .btn { padding: 0.2rem 0.55rem; font-size: 0.76rem; }
    .gesch-verschil { margin-top: 0.5rem; background: var(--bg); border-radius: 6px; padding: 0.4rem 0.6rem; }
    .gesch-verschil table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .gesch-verschil th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 0.15rem 0.3rem; }
    .gesch-verschil td { padding: 0.15rem 0.3rem; vertical-align: top; }
    .gesch-oud { color: var(--danger); opacity: 0.8; text-decoration: line-through; }
    .gesch-nieuw { color: var(--success); font-weight: 600; }

    .weekuitz {
      margin-top: 0.35rem;
      font-size: 0.72rem;
      text-align: left;
    }
    .weekuitz summary {
      cursor: pointer;
      color: var(--text-muted);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      list-style: none;
    }
    .weekuitz summary::-webkit-details-marker { display: none; }
    .weekuitz summary:hover { color: var(--accent); }
    .weekuitz[open] summary { color: var(--accent); margin-bottom: 0.2rem; }
    .weekuitz-rij {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      margin-bottom: 0.15rem;
    }
    .weekuitz-rij span { min-width: 26px; color: var(--text-muted); font-weight: 600; }
    .weekuitz-rij select {
      flex: 1;
      font-family: inherit;
      font-size: 0.7rem;
      padding: 0.1rem 0.2rem;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: white;
    }
    .weekuitz-rij.actief select {
      border-color: var(--accent);
      background: var(--accent-light);
      font-weight: 600;
    }
    .weekuitz-overzicht {
      margin-top: 1.2rem;
      padding: 0.8rem 1rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
    }
    .weekuitz-overzicht h4 {
      font-size: 0.85rem;
      color: var(--header-bg);
      margin-bottom: 0.5rem;
    }

    .vrij-samenvatting {
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      padding: 0.6rem 0.9rem;
      margin-bottom: 1rem;
      font-size: 0.82rem;
      line-height: 1.6;
    }
    .vrij-maand { margin-bottom: 0.9rem; }
    .vrij-maand h4 {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }
    .vrij-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    .vrij-table td {
      padding: 0.3rem 0.5rem;
      border-bottom: 1px solid var(--border);
    }
    .vrij-table tr:last-child td { border-bottom: none; }
    .vrij-datum { width: 70px; font-weight: 600; white-space: nowrap; }
    .vrij-dag { width: 110px; color: var(--text-muted); }
    .vrij-loc { width: 110px; }
    .vrij-arts { width: 120px; }
    .vrij-reden { color: var(--text-muted); font-size: 0.78rem; }

    .vkweek-maand {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.35rem 0;
      border-bottom: 1px solid var(--border);
    }
    .vkweek-maand:last-child { border-bottom: none; }
    .vkweek-maand-label {
      min-width: 82px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
      padding-top: 0.3rem;
      text-transform: capitalize;
    }
    .vkweek-pills { display: flex; flex-wrap: wrap; gap: 0.28rem; flex: 1; }
    .vkweek-pill {
      min-width: 34px;
      padding: 0.28rem 0.35rem;
      font-family: inherit;
      font-size: 0.76rem;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--card);
      color: var(--text);
      cursor: pointer;
      transition: all 0.12s;
      line-height: 1.2;
    }
    .vkweek-pill:hover { background: var(--hover); }
    .vkweek-pill small { display: block; font-size: 0.62rem; opacity: 0.75; }
    .vkweek-pill.bestaand { border-style: dashed; border-color: var(--accent); }
    .vkweek-pill.gekozen {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
      font-weight: 600;
    }
    .extern-table td.perm-mdo-cell {
      background: var(--accent-light);
      color: var(--accent);
      font-weight: 600;
      font-size: 0.75rem;
      line-height: 1.25;
    }
    .extern-table td.perm-mdo-cell small { font-weight: 400; opacity: 0.8; }
    /* Weekdagen die niet tot de gebruikelijke dagen van een locatie horen:
       wel bruikbaar, maar visueel rustiger zodat de gewoonte herkenbaar blijft. */
    .extern-table tr.extra-dag td { background: #fbfcfd; }
    .extern-table tr.extra-dag td.dag-col { color: var(--text-muted); font-weight: 500; }
    .extern-table tr.extra-dag select { border-style: dashed; }
    .extern-table td.empty-slot {
      background: repeating-linear-gradient(
        45deg, var(--bg), var(--bg) 4px, var(--card) 4px, var(--card) 8px
      );
    }
    .extern-load-row {
      padding: 0.45rem 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.83rem;
    }
    .extern-load-row:last-child { border-bottom: none; }
    .extern-load-count {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.76rem;
      padding: 0.1rem 0.45rem;
      border-radius: 4px;
      background: var(--accent-light);
      color: var(--accent);
      font-weight: 600;
    }
    .extern-load-count.zero {
      background: var(--bg);
      color: var(--text-muted);
      font-weight: 400;
    }

    /* =========== Desiderata-invoer (4e) =========== */
    .desid-layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 1.5rem;
    }
    @media (max-width: 900px) {
      .desid-layout { grid-template-columns: 1fr; }
    }
    .desid-form {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1rem 1.2rem;
      margin-bottom: 1.5rem;
    }
    .desid-form h3 {
      font-size: 0.95rem;
      margin-bottom: 0.7rem;
      color: var(--header-bg);
    }
    .desid-form-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.65rem;
      flex-wrap: wrap;
    }
    .desid-form-row label {
      font-size: 0.85rem;
      min-width: 70px;
      color: var(--text);
    }
    .desid-form-row select,
    .desid-form-row input {
      font-family: inherit;
      font-size: 0.85rem;
      padding: 0.35rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      flex: 1;
      min-width: 0;
    }
    .desid-form-row input[type=date] {
      flex: none;
      width: 150px;
    }
    .desid-lijst-wrap h3 {
      font-size: 0.95rem;
      margin-bottom: 0.7rem;
      color: var(--header-bg);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }
    .desid-lijst-wrap h3 select {
      font-family: inherit;
      font-size: 0.85rem;
      padding: 0.25rem 0.4rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-weight: 400;
      background: white;
    }
    .desid-type-pill {
      display: inline-block;
      padding: 0.15rem 0.55rem;
      font-size: 0.72rem;
      border-radius: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .btn-mini {
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--danger);
      padding: 0.2rem 0.55rem;
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
      font-size: 0.95rem;
      line-height: 1;
    }
    .btn-mini:hover { background: #fee2e2; }
    .desid-empty {
      color: var(--text-muted);
      padding: 1.5rem;
      text-align: center;
      background: var(--bg);
      border: 1px dashed var(--border);
      border-radius: 6px;
    }
    .verlof-counter-list h3 {
      font-size: 0.95rem;
      margin-bottom: 0.7rem;
      color: var(--header-bg);
    }

    /* =========== KPI Dashboard (4f) =========== */
    .kpi-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      margin-bottom: 0.8rem;
      font-size: 0.82rem;
      color: var(--text);
    }
    .kpi-legend-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      margin-right: 0.35rem;
      vertical-align: middle;
    }
    .kpi-bar-row {
      display: grid;
      grid-template-columns: 130px 1fr 90px;
      align-items: center;
      gap: 0.6rem;
      padding: 0.42rem 0;
      border-bottom: 1px solid var(--border);
    }
    .kpi-bar-row:last-child { border-bottom: none; }
    .kpi-bar-name {
      font-size: 0.85rem;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-right: 0.5rem;
    }
    .kpi-bar-name small {
      color: var(--text-muted);
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.7rem;
    }
    .kpi-bar {
      height: 22px;
      background: var(--bg);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
    }
    .kpi-bar-seg {
      height: 100%;
      transition: width 0.2s;
    }
    .kpi-bar-seg.wacht   { background: #7c3aed; }
    .kpi-bar-seg.cluster { background: #d97706; }
    .kpi-bar-seg.extern  { background: #2f855a; }
    .kpi-bar-seg.verlof  { background: #94a3b8; }
    .kpi-bar-score {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.85rem;
      font-weight: 600;
      text-align: right;
      color: var(--header-bg);
    }
    .kpi-section {
      margin-top: 1.5rem;
    }
    .kpi-section h3 {
      font-size: 0.95rem;
      margin-bottom: 0.6rem;
      color: var(--header-bg);
    }
    .kpi-warning {
      padding: 0.6rem 0.9rem;
      background: #fef3c7;
      border-left: 3px solid var(--warning);
      border-radius: 4px;
      font-size: 0.83rem;
      color: var(--text);
      margin-top: 0.7rem;
    }
    .kpi-success {
      padding: 0.6rem 0.9rem;
      background: #d1fae5;
      border-left: 3px solid var(--success);
      border-radius: 4px;
      font-size: 0.83rem;
      color: var(--text);
      margin-top: 0.7rem;
    }
    .kpi-table-numbers td {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.82rem;
      text-align: right;
    }
    .kpi-table-numbers td:first-child {
      font-family: inherit;
      text-align: left;
    }
    .kpi-table-numbers .row-deviation {
      color: var(--warning);
      font-weight: 600;
    }

    /* =========== Hybride scheduler (4g) =========== */
    .scheduler-hero {
      text-align: center;
      padding: 2rem 1rem;
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg) 100%);
      border-radius: 8px;
      margin-bottom: 1.5rem;
      border: 1px solid var(--border);
    }
    .scheduler-hero .eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      color: var(--accent);
      font-weight: 600;
      text-transform: uppercase;
    }
    .scheduler-hero h2 {
      margin: 0.5rem 0 0.7rem;
      color: var(--header-bg);
      font-size: 1.4rem;
    }
    .scheduler-hero p {
      color: var(--text);
      max-width: 600px;
      margin: 0.5rem auto 0;
      font-size: 0.88rem;
    }
    .btn-large {
      font-size: 1.05rem;
      padding: 0.85rem 2.2rem;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      margin-top: 1.2rem;
      box-shadow: 0 2px 6px rgba(12, 138, 138, 0.25);
      transition: all 0.15s;
    }
    .btn-large:hover {
      background: #086565;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(12, 138, 138, 0.3);
    }

    .conflict-row {
      padding: 0.7rem 1rem;
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 95px 130px 1fr 130px;
      gap: 0.8rem;
      align-items: center;
      font-size: 0.83rem;
    }
    .conflict-row:last-child { border-bottom: none; }
    .conflict-row.hard {
      background: #fef2f2;
      border-left: 3px solid var(--danger);
    }
    .conflict-row.soft {
      background: #fffbeb;
      border-left: 3px solid var(--warning);
    }
    .conflict-type {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .conflict-type.hard { color: var(--danger); }
    .conflict-type.soft { color: var(--warning); }
    .conflict-suggestie {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 0.2rem;
    }
    .conflict-empty {
      padding: 2rem;
      text-align: center;
      color: var(--success);
      background: #d1fae5;
      border-radius: 6px;
      font-weight: 600;
    }
    @media (max-width: 900px) {
      .conflict-row { grid-template-columns: 1fr; gap: 0.3rem; }
    }

    /* =========== Export (4h) =========== */
    .export-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
      margin-top: 1rem;
    }
    @media (max-width: 700px) {
      .export-grid { grid-template-columns: 1fr; }
    }
    .export-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.5rem;
      text-align: center;
    }
    .export-card h3 {
      font-size: 1.05rem;
      margin-bottom: 0.5rem;
      color: var(--header-bg);
    }
    .export-card p {
      font-size: 0.83rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      min-height: 3.5em;
    }
    .export-card .btn-large {
      margin-top: 0;
      width: 100%;
      font-size: 0.95rem;
      padding: 0.7rem 1rem;
    }
    .export-summary {
      margin-top: 1.5rem;
      padding: 0.9rem 1.2rem;
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      font-size: 0.83rem;
    }
    .export-summary strong { color: var(--accent); }

    /* =========== Editable inputs (overview) =========== */
    .editable {
      font-family: inherit;
      font-size: inherit;
      background: transparent;
      border: 1px solid transparent;
      padding: 0.15rem 0.35rem;
      border-radius: 3px;
      transition: all 0.12s;
      color: inherit;
      box-sizing: border-box;
    }
    .editable:hover {
      border-color: var(--border);
      background: var(--card);
    }
    .editable:focus {
      outline: none;
      border-color: var(--accent);
      background: white;
      box-shadow: 0 0 0 2px var(--accent-light);
    }
    .editable.num {
      width: 70px;
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.82rem;
      text-align: right;
    }
    .editable.small {
      font-size: 0.78rem;
    }
    .editable.full {
      width: 100%;
    }
    .editable.bold {
      font-weight: 600;
    }
    .edit-checkbox {
      transform: scale(1.1);
      cursor: pointer;
    }
    .params-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.9rem;
      margin-top: 0.6rem;
    }
    .param-edit {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.7rem 0.9rem;
    }
    .param-edit label {
      display: block;
      font-size: 0.72rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.35rem;
    }
    .param-edit input,
    .param-edit select {
      font-family: inherit;
      font-size: 0.9rem;
      padding: 0.35rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: white;
      width: 100%;
    }
    .edit-help {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 0.4rem;
      font-style: italic;
    }

    /* =========== Dagblokken (vrije dagen toggle) =========== */
    .dagblok-row {
      display: inline-flex;
      gap: 2px;
    }
    .dagblok {
      width: 24px;
      height: 24px;
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 3px;
      font-size: 0.7rem;
      cursor: pointer;
      font-family: inherit;
      color: var(--text-muted);
      padding: 0;
      transition: all 0.1s;
      font-weight: 500;
    }
    .dagblok:hover {
      background: var(--hover);
      border-color: var(--accent);
    }
    .dagblok.active {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
      font-weight: 700;
    }

    /* =========== Team-structuur scenario-cards =========== */
    .scenario-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 0.8rem;
      margin-top: 0.5rem;
    }
    .scenario-card {
      padding: 1rem 1.2rem;
      border: 2px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
      background: var(--card);
    }
    .scenario-card:hover { background: var(--hover); border-color: var(--accent); }
    .scenario-card.active {
      border-color: var(--accent);
      background: var(--accent-light);
      box-shadow: 0 2px 8px rgba(12, 138, 138, 0.15);
    }
    .scenario-card h3 {
      font-size: 0.95rem;
      margin-bottom: 0.4rem;
      color: var(--header-bg);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .scenario-card.active h3 { color: var(--accent); }
    .scenario-card .scenario-radio {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 2px solid var(--text-muted);
      position: relative;
      display: inline-block;
    }
    .scenario-card.active .scenario-radio { border-color: var(--accent); }
    .scenario-card.active .scenario-radio::after {
      content: '';
      position: absolute; top: 2px; left: 2px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    .scenario-card .scenario-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .scenario-card .scenario-meta {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--border);
    }
    .scenario-card.active .scenario-meta { border-color: rgba(12, 138, 138, 0.25); }

    /* =========== ASO-zaterdag overzicht (4j) =========== */
    .aso-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.5rem;
      margin-top: 0.8rem;
    }
    .aso-week-card {
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 0.55rem 0.7rem;
      background: var(--card);
      font-size: 0.8rem;
    }
    .aso-week-card.has-aso {
      border-color: var(--accent);
      background: var(--accent-light);
    }
    .aso-week-card .week-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .aso-week-card .toer-arts {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 0.3rem;
    }
    .aso-toggle {
      display: flex;
      gap: 0.4rem;
      align-items: center;
      font-size: 0.75rem;
    }
    .aso-toggle input { cursor: pointer; }
    .aso-bezetting {
      font-size: 0.7rem;
      color: var(--warning);
      margin-top: 0.2rem;
      font-style: italic;
    }
    .aso-bezetting.ok { color: var(--success); font-style: normal; }
    .aso-summary {
      margin-top: 1rem;
      padding: 0.7rem 1rem;
      background: var(--bg);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      font-size: 0.85rem;
    }
    .aso-summary strong { color: var(--accent); }

    .permanentie-uitleg {
      margin-top: 0.6rem;
      padding: 0.8rem 1rem;
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      font-size: 0.83rem;
      line-height: 1.5;
    }
    .permanentie-uitleg strong { color: var(--accent); }
    .permanentie-uitleg ul { margin: 0.4rem 0 0 1.2rem; padding: 0; }

    /* FT-dropdown styling — compact */
    .ft-select {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: 0.82rem;
      padding: 0.2rem 0.4rem;
      border: 1px solid transparent;
      border-radius: 3px;
      background: transparent;
      cursor: pointer;
      transition: all 0.12s;
      width: 60px;
      text-align: center;
    }
    .ft-select:hover {
      border-color: var(--border);
      background: var(--card);
    }
    .ft-select:focus {
      outline: none;
      border-color: var(--accent);
      background: white;
    }