/* ============================================================
   Condor Carpets — Suppliers Portal
   Gedeelde stijlen voor de Blazor-portaalpagina's.
   Overgenomen uit de oorspronkelijke HTML-mockups.
   ============================================================ */

* { box-sizing: border-box; }

/* ---------- App shell + topbar (gedeeld) ---------- */
.cc-app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f4f2; min-height: 100vh; color: #111; }
.cc-topbar { background: #8f1e32; height: 56px; display: flex; align-items: center; padding: 0 2rem; gap: 0; position: sticky; top: 0; z-index: 100; }
.cc-topbar-logo { display: flex; align-items: center; gap: 9px; margin-right: 8px; }
.cc-topbar-icon { width: 30px; height: 30px; background: rgba(255,255,255,0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-topbar-name { font-size: 14px; font-weight: 600; color: white; letter-spacing: -.01em; }
.cc-topbar-name b { opacity: .7; font-weight: 400; }
.cc-nav-divider { width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 16px; }
.cc-nav { display: flex; gap: 4px; }
.cc-nav-btn { height: 36px; padding: 0 14px; background: none; border: none; border-radius: 7px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); cursor: pointer; display: flex; align-items: center; gap: 7px; font-family: inherit; text-decoration: none; transition: background .12s, color .12s; }
.cc-nav-btn:hover { background: rgba(255,255,255,.1); color: white; }
.cc-nav-btn.active { background: rgba(255,255,255,.18); color: white; }
.cc-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cc-pill { font-size: 12px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); padding: 4px 12px; border-radius: 20px; border: 0.5px solid rgba(255,255,255,.2); display: flex; align-items: center; gap: 6px; }
.cc-logout-btn { font-size: 12px; color: rgba(255,255,255,.6); background: none; border: 0.5px solid rgba(255,255,255,.2); border-radius: 7px; height: 30px; padding: 0 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; text-decoration: none; }
.cc-logout-btn:hover { color: white; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.cc-content { max-width: 1280px; margin: 0 auto; padding: 2rem; }

/* ---------- Stat cards (productie + ververij) ---------- */
.cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 2rem; }
.cc-stat { background: white; border-radius: 10px; padding: 1rem 1.25rem; border: 0.5px solid #e8e6e3; }
.cc-stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.cc-stat-value { font-size: 24px; font-weight: 600; color: #111; letter-spacing: -.02em; }
.cc-stat-sub { font-size: 11px; color: #bbb; margin-top: 3px; }
.cc-stat.accent .cc-stat-value { color: #8f1e32; }
.cc-page-head { margin-bottom: 1.5rem; }
.cc-page-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cc-page-sub { font-size: 13px; color: #888; margin-top: 4px; }

/* ---------- Card + table (gedeeld) ---------- */
.cc-card { background: white; border-radius: 10px; border: 0.5px solid #e8e6e3; overflow: hidden; }
.cc-card-header { padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid #f0eeed; flex-wrap: wrap; gap: 10px; }
.cc-card-title { font-size: 15px; font-weight: 600; color: #111; display: flex; align-items: center; gap: 8px; }
.cc-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cc-search { height: 34px; padding: 0 10px 0 32px; border: 1px solid #e8e6e3; border-radius: 7px; font-size: 13px; color: #111; background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center; width: 220px; outline: none; }
.cc-search:focus { border-color: #8f1e32; }
.cc-btn-add { height: 34px; padding: 0 14px; background: #8f1e32; color: white; border: none; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.cc-btn-add:hover { background: #7a1829; }
.cc-table-wrap { overflow: auto; max-height: calc(100vh - 250px); }
.cc-app table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-app thead tr { background: #faf9f8; }
.cc-app th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 500; color: #999; text-transform: uppercase; letter-spacing: .05em; border-bottom: 0.5px solid #f0eeed; white-space: nowrap; position: sticky; top: 0; z-index: 3; background: #faf9f8; }
.cc-app td { padding: 11px 16px; border-bottom: 0.5px solid #f5f4f2; color: #333; vertical-align: middle; }
.cc-app tr:last-child td { border-bottom: none; }
.cc-app tbody tr:hover td { background: #fdf9f9; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Badges (productie) ---------- */
.cc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 20px; }
.cc-badge.a { background: #eaf3de; color: #27500a; }
.cc-badge.b { background: #faeeda; color: #633806; }
.cc-badge.concept { background: #f0eeff; color: #3c3489; }
.cc-badge.ingediend { background: #f9ecee; color: #5a1220; }
.cc-badge.verwerkt { background: #e1f5ee; color: #085041; }
.cc-rol-num { font-size: 11px; color: #aaa; display: block; }
.cc-actions-cell { display: flex; gap: 6px; }
.cc-icon-btn { width: 28px; height: 28px; border-radius: 6px; border: 0.5px solid #e8e6e3; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #888; }
.cc-icon-btn:hover { border-color: #8f1e32; color: #8f1e32; background: #fdf9f9; }
.cc-empty { padding: 3rem; text-align: center; color: #bbb; font-size: 13px; }
.cc-pagination { padding: 12px 1.5rem; border-top: 0.5px solid #f0eeed; display: flex; align-items: center; justify-content: space-between; }
.cc-pag-info { font-size: 12px; color: #aaa; }
.cc-pag-btns { display: flex; gap: 4px; }
.cc-pag-btn { height: 28px; min-width: 28px; padding: 0 8px; border: 0.5px solid #e8e6e3; border-radius: 6px; background: white; font-size: 12px; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.cc-pag-btn.active { background: #8f1e32; color: white; border-color: #8f1e32; }

/* ---------- Modal (productie invoer/bewerken) ---------- */
.backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; }
.backdrop.open { display: flex; }
.cc-modal { background: white; border-radius: 12px; width: 580px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.cc-modal-header { background: #8f1e32; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 10px; border-radius: 12px 12px 0 0; }
.cc-modal-header-icon { width: 32px; height: 32px; background: rgba(255,255,255,.15); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-modal-title { font-size: 15px; font-weight: 600; color: white; flex: 1; }
.cc-modal-close { width: 28px; height: 28px; background: rgba(255,255,255,.12); border: none; border-radius: 6px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cc-modal-close:hover { background: rgba(255,255,255,.22); }
.cc-modal-body { padding: 1.5rem; }
.cc-modal-section-label { font-size: 11px; font-weight: 500; color: #999; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.cc-form-grid { display: grid; gap: 10px; }
.cc-form-grid.two { grid-template-columns: 1fr 1fr; }
.cc-form-group label { display: block; font-size: 12px; color: #777; margin-bottom: 4px; }
.cc-form-group input, .cc-form-group textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e0e0e0; border-radius: 7px; font-size: 13px; color: #111; background: #fafafa; outline: none; font-family: inherit; }
.cc-form-group textarea { height: 64px; padding: 8px 10px; resize: vertical; }
.cc-form-group input:focus, .cc-form-group textarea:focus { border-color: #8f1e32; background: white; box-shadow: 0 0 0 3px rgba(143,30,50,.08); }
.doos-header-row { display: grid; grid-template-columns: 0.9fr 0.9fr auto auto auto; gap: 8px; margin-bottom: 5px; }
.doos-header-row span { font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: .05em; }
.doos-row-grid { display: grid; grid-template-columns: 0.9fr 0.9fr auto auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.doos-row-grid input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; background: #fafafa; }
.doos-sub { font-size: 11px; color: #aaa; min-width: 56px; text-align: right; }
.dr-kw-group { display: flex; gap: 4px; }
.dr-kw-btn { width: 30px; height: 34px; border: 1px solid #e0e0e0; border-radius: 6px; background: white; font-size: 12px; font-weight: 600; cursor: pointer; color: #aaa; font-family: inherit; padding: 0; }
.dr-kw-btn.active-a { background: #eaf3de; color: #27500a; border-color: #7ab33e; }
.dr-kw-btn.active-b { background: #faeeda; color: #633806; border-color: #ef9f27; }
.rm-btn { width: 28px; height: 28px; border: 0.5px solid #e8e6e3; border-radius: 6px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #aaa; flex-shrink: 0; }
.rm-btn:hover { background: #fcebeb; border-color: #f09595; color: #a32d2d; }
.add-row-btn { width: 100%; padding: 7px; border: 0.5px dashed #d9929e; border-radius: 7px; background: #f9ecee; color: #8f1e32; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; font-family: inherit; }
.totaal-strip { background: #8f1e32; border-radius: 7px; padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.totaal-strip span { font-size: 12px; color: rgba(255,255,255,.7); }
.totaal-strip b { font-size: 14px; font-weight: 600; color: white; }
.totaal-strip .ts-div { width:1px; height:16px; background:rgba(255,255,255,.2); }
.cc-modal-footer { padding: 1rem 1.5rem; border-top: 0.5px solid #f0eeed; display: flex; justify-content: space-between; align-items: center; }
.cc-modal-footer-left { font-size: 11px; color: #ccc; }
.cc-modal-footer-right { display: flex; gap: 8px; }
.btn-secondary { height: 36px; padding: 0 14px; border: 0.5px solid #e0e0e0; border-radius: 7px; background: white; font-size: 13px; cursor: pointer; font-family: inherit; color: #555; display: flex; align-items: center; gap: 6px; }
.btn-primary { height: 36px; padding: 0 16px; background: #8f1e32; color: white; border: none; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: #7a1829; }
.edit-notice { background: #f9ecee; border: 0.5px solid #d9929e; border-radius: 7px; padding: 8px 12px; font-size: 12px; color: #5a1220; display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.rol-picker { position: absolute; z-index: 300; background: white; border: 0.5px solid #e0e0e0; border-radius: 10px; width: 380px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); overflow: hidden; }
.rol-picker-header { padding: 10px 12px; border-bottom: 0.5px solid #f0eeed; }
.rol-picker-search { width: 100%; height: 32px; padding: 0 10px; border: 1px solid #e8e6e3; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; }
.rol-picker-list { max-height: 220px; overflow-y: auto; }
.rol-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 0.5px solid #faf9f8; }
.rol-opt:hover { background: #fdf9f9; }
.rol-opt.selected { background: #f9ecee; }
.rol-opt-icon { width: 32px; height: 32px; background: #8f1e32; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.rol-opt-m1 { margin-left: auto; font-size: 11px; background: #f9ecee; color: #8f1e32; padding: 2px 7px; border-radius: 20px; border: 0.5px solid #d9929e; white-space: nowrap; }

/* ---------- Detail panel (productie) ---------- */
.detail-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: flex-start; justify-content: flex-end; }
.detail-backdrop.open { display: flex; }
.detail-panel { background: white; width: 570px; max-width: 95vw; height: 100vh; overflow-y: auto; box-shadow: -8px 0 40px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
.detail-header { background: #8f1e32; padding: 1.25rem 1.5rem; flex-shrink: 0; }
.detail-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.detail-header-title { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.detail-close { width: 28px; height: 28px; background: rgba(255,255,255,.12); border: none; border-radius: 6px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.detail-rol-name { font-size: 20px; font-weight: 600; color: white; margin-bottom: 4px; }
.detail-rol-id { font-size: 12px; color: rgba(255,255,255,.6); }
.detail-badges { display: flex; gap: 6px; margin-top: 10px; }
.detail-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.detail-badge.a { background: rgba(255,255,255,.15); color: white; }
.detail-badge.b { background: rgba(255,200,100,.2); color: #ffd580; }
.detail-badge.concept { background: rgba(200,190,255,.2); color: #c8c0ff; }
.detail-badge.ingediend { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.detail-badge.verwerkt { background: rgba(100,220,170,.2); color: #80ffcc; }
.detail-body { padding: 1.5rem; flex: 1; }
.detail-section { margin-bottom: 1.5rem; }
.detail-section-title { font-size: 11px; font-weight: 500; color: #aaa; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 0.5px solid #f0eeed; }
.detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 0.5px solid #f9f8f7; }
.detail-row:last-child { border-bottom: none; }
.detail-row-label { font-size: 12px; color: #aaa; }
.detail-row-value { font-size: 13px; color: #111; font-weight: 500; }
.detail-m2-row { background: #8f1e32; border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.detail-m2-row span { font-size: 12px; color: rgba(255,255,255,.7); }
.detail-m2-row b { font-size: 18px; font-weight: 600; color: white; }
.detail-opmerking { background: #faf9f8; border: 0.5px solid #f0eeed; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #555; line-height: 1.5; font-style: italic; }
.detail-footer { padding: 1rem 1.5rem; border-top: 0.5px solid #f0eeed; flex-shrink: 0; display: flex; gap: 8px; }

/* ---------- Planning-specifiek ---------- */
.page-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: #888; margin-bottom: 1.5rem; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 1.5rem; }
.stat { background: white; border-radius: 10px; padding: .9rem 1.1rem; border: .5px solid #e8e6e3; }
.stat-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.stat-value { font-size: 22px; font-weight: 600; color: #111; letter-spacing: -.02em; }
.stat-sub { font-size: 11px; color: #bbb; margin-top: 2px; }
.stat.accent .stat-value { color: #8f1e32; }
.stat.warn .stat-value { color: #854f0b; }
.stat.danger .stat-value { color: #a32d2d; }
.filter-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-btn { height: 36px; padding: 0 13px; background: white; border: .5px solid #ddd9d4; border-radius: 8px; font-size: 13px; font-weight: 500; color: #666; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.filter-btn:hover { background: #f5f3f1; }
.filter-btn.active { background: #8f1e32; border-color: #8f1e32; color: white; }
.filter-btn.active-pvh { background: #2f6b2f; border-color: #2f6b2f; color: white; }
.filter-btn.active-danger { background: #a32d2d; border-color: #a32d2d; color: white; }
.filter-btn.active-warn { background: #854f0b; border-color: #854f0b; color: white; }
.filter-btn .cnt { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.cc-app thead th.sortable { cursor: pointer; user-select: none; }
.cc-app thead th.sortable:hover { color: #8f1e32; }
.arr { opacity: .4; font-size: 9px; }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.opdr { font-weight: 600; color: #333; }
.kwal { font-weight: 500; }
.muted { color: #999; }
.cc-app tbody tr.pevanha td { background: #eef7ee; }
.cc-app tbody tr.pevanha:hover td { background: #e4f1e4; }
.cc-app tbody tr.spoed td:first-child { box-shadow: inset 3px 0 0 #a32d2d; }
.badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.badge.aanwezig { background: #e1f0e1; color: #2f6b2f; }
.badge.onderweg { background: #fdf0d8; color: #855010; }
.badge.pevanha { background: #dcebfb; color: #1a5aa0; }
.badge.anders { background: #efe9e4; color: #6a5e52; }
.spoed-tag { display: inline-block; font-size: 10px; font-weight: 600; background: #fbe4e4; color: #a32d2d; padding: 2px 7px; border-radius: 5px; margin-left: 6px; }
.actions-cell { text-align: right; white-space: nowrap; }
.row-btn { background: none; border: .5px solid transparent; border-radius: 7px; width: 30px; height: 30px; cursor: pointer; color: #999; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.row-btn:hover { background: #f3f1ee; border-color: #e3e0db; }
.row-btn.edit:hover { color: #8f1e32; }
.row-btn.del:hover { color: #a32d2d; background: #fbe9e9; border-color: #f0d0d0; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,16,16,.45); display: none; align-items: flex-start; justify-content: center; padding: 3rem 1rem; z-index: 100; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
.modal { background: white; border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.modal-head { padding: 1.2rem 1.5rem; border-bottom: .5px solid #f0eeed; display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; color: #999; padding: 4px; border-radius: 6px; display: flex; }
.modal-close:hover { background: #f3f1ee; color: #555; }
.modal-body { padding: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 500; color: #555; }
.field label .req { color: #a32d2d; }
.field input, .field select { height: 38px; padding: 0 11px; border: .5px solid #ddd9d4; border-radius: 8px; font-size: 13px; font-family: inherit; background: #faf9f7; }
.field-hint { font-size: 11px; color: #2f6b2f; margin-top: 2px; }
.field input:focus, .field select:focus { outline: none; border-color: #8f1e32; background: white; }
.modal-foot { padding: 1.1rem 1.5rem; border-top: .5px solid #f0eeed; display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Ververij-specifiek ---------- */
.cc-filter { height: 34px; padding: 0 12px; border: 1px solid #e8e6e3; border-radius: 7px; background: #fafafa; font-size: 12px; font-weight: 500; color: #555; cursor: pointer; font-family: inherit; }
.cc-filter.active { background: #8f1e32; color: white; border-color: #8f1e32; }
.cc-btn-save { height: 34px; padding: 0 16px; background: #8f1e32; color: white; border: none; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.cc-btn-save:hover { background: #7a1829; }
.cc-btn-save:disabled { opacity: .4; cursor: default; }

/* Ververij-header in twee nette rijen i.p.v. één rij die rommelig afbreekt:
   rij 1 = titel + filteren/zoeken (zoekveld groeit mee), rij 2 = bulk-datum + opslaan. */
.vv-header { flex-direction: column; align-items: stretch; gap: 12px; }
.vv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vv-row-top { justify-content: space-between; }
.vv-row-bottom { justify-content: flex-end; }
.vv-row-top .cc-card-title { flex-shrink: 0; }
.vv-filters { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vv-filtergroep { display: inline-flex; gap: 6px; }
.vv-search { width: auto; flex: 1 1 200px; min-width: 160px; max-width: 340px; }
.vv-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-art { font-weight: 600; }
.cc-art-sub { font-size: 11px; color: #999; }
.b-open { background: #fff4e0; color: #9a6a00; }
.b-done { background: #e8f5ec; color: #1e7a3d; }
/* Bewerkbare status-dropdown (garen): vorm + chevron; de kleur komt van .b-V/.b-B/... hieronder */
.cc-status-sel {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1px solid transparent; border-radius: 6px;
    padding: 4px 24px 4px 10px; font-size: 11px; font-weight: 600;
    font-family: inherit; cursor: pointer; outline: none;
    background-color: #eef0f2; color: #667;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.cc-status-sel:focus { border-color: #8f1e32; }
.cc-status-sel.changed { border-color: #8f1e32; box-shadow: 0 0 0 3px rgba(143,30,50,.12); }
/* Openklap-lijst: alle opties dezelfde neutrale ("Nieuw") achtergrond, niet bont */
.cc-status-sel option { background-color: #eef0f2; color: #667; }
/* Garen-statuskleuren (INO02.StatusInkoop) — na .cc-status-sel zodat deze de kleur bepalen */
.b-V { background-color: #e8f5ec; color: #1e7a3d; } /* Verscheept */
.b-B { background-color: #dcebfb; color: #1a5aa0; } /* Bevestigd */
.b-L { background-color: #e1f5ee; color: #0a5f4c; } /* Lev. Voorraad */
.b-I { background-color: #eeeaff; color: #4634a3; } /* In Productie */
.b-P { background-color: #fdeaea; color: #b3261e; } /* Problematisch */
.b-O { background-color: #fff4e0; color: #9a6a00; } /* Onderweg */
.b-N { background-color: #eef0f2; color: #667; }    /* Niet Bevestigd */
.b-A { background-color: #f3e8fb; color: #6b21a8; } /* Avond Levering */
.b-D { background-color: #fdf0d8; color: #855010; } /* Deels Geleverd */
.b-K { background-color: #dff5e6; color: #15803d; } /* Klaar */
.cc-date-in { height: 30px; padding: 0 8px; border: 1px solid #e8e6e3; border-radius: 6px; font-size: 12px; font-family: inherit; color: #111; background: #fff; outline: none; }
.cc-date-in:focus { border-color: #8f1e32; }
.cc-date-in.changed { border-color: #8f1e32; background: #fcf3f4; }
.cc-wk { font-size: 11px; color: #8f1e32; font-weight: 600; margin-left: 6px; }
.cc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1e7a3d; color: white; padding: 12px 22px; border-radius: 9px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transition: all .3s; z-index: 200; pointer-events: none; }
.cc-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- Beheer-pagina ---------- */
.cc-beheer { max-width: 900px; margin: 32px auto; font-family: 'Segoe UI', sans-serif; }
.cc-beheer h2 { margin: 0 0 4px; }
.cc-beheer-intro { color: #666; margin: 0 0 20px; }
.cc-beheer-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.08); padding: 20px; margin-bottom: 24px; }
.cc-beheer-card:last-child { margin-bottom: 0; }
.cc-beheer-card h3 { margin: 0 0 12px; }
.cc-beheer-card h3.tight { margin: 0 0 4px; }
.cc-beheer-sub { color: #666; margin: 0 0 12px; font-size: 13px; }
.cc-beheer-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #ccc; border-radius: 8px; }
.cc-beheer-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; font-size: 14px; }
.cc-beheer-fout { color: #b3261e; font-size: 13px; margin: 8px 0 0; }
.cc-beheer-ok { color: #2e7d32; font-size: 13px; margin: 8px 0 0; }
.cc-beheer-btn-primary { margin-top: 14px; padding: 9px 16px; border: none; border-radius: 8px; background: #8d1b2c; color: #fff; cursor: pointer; }
.cc-beheer-btn-secondary { margin-top: 14px; padding: 8px 14px; border: 1px solid #8d1b2c; border-radius: 8px; background: #fff; color: #8d1b2c; cursor: pointer; }
.cc-beheer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-beheer-head h3 { margin: 0; }
.cc-beheer-search { min-width: 240px; padding: 8px 11px; border: 1px solid #ccc; border-radius: 8px; }
.cc-beheer-laden { color: #888; }
.cc-beheer-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-beheer-table.mt { margin-top: 16px; }
.cc-beheer-table thead tr { text-align: left; color: #666; }
.cc-beheer-table th, .cc-beheer-table td { padding: 6px 8px; }
.cc-beheer-table tbody tr { border-top: 1px solid #eee; }
.cc-beheer-table .rechts { text-align: right; }
.cc-beheer-rij-uit { opacity: .5; }
.cc-beheer-link { border: none; background: none; color: #b3261e; cursor: pointer; }
.cc-beheer-toggle { border: 1px solid #ccc; border-radius: 14px; padding: 4px 10px; background: #fff; cursor: pointer; }

/* ---------- RelatieKiezer (autocomplete) ---------- */
.cc-relkiezer { position: relative; flex: 1; min-width: 240px; margin-top: 12px; }
.cc-relkiezer-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #ccc; border-radius: 8px; }
.cc-relkiezer-input.gekozen { border-color: #2e7d32; }
.cc-relkiezer-input:disabled { background: #f2f2f2; color: #aaa; cursor: not-allowed; }
.cc-relkiezer-lijst { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 100; max-height: 240px; overflow: auto; }
.cc-relkiezer-leeg { padding: 9px 12px; color: #888; font-size: 13px; }
.cc-relkiezer-item { padding: 9px 12px; cursor: pointer; font-size: 14px; border-top: 1px solid #f2f2f2; }

/* ============================================================
   Login-pagina  (gescoped onder .cc-login-page)
   ============================================================ */
.cc-login-page { height: 100vh; display: flex; overflow: hidden; background: #0e1219; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.cc-login-page .image-panel { flex: 1.1; position: relative; overflow: hidden; }
.cc-login-page .image-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.cc-login-page .image-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,14,0.15) 0%, rgba(10,10,14,0.45) 100%); }
.cc-login-page .image-branding { position: absolute; bottom: 2.5rem; left: 2.5rem; right: 2.5rem; }
.cc-login-page .image-branding .tagline { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.cc-login-page .image-branding .quote { font-size: 22px; font-weight: 500; color: white; line-height: 1.4; max-width: 380px; }
.cc-login-page .image-branding .quote span { color: #c97080; }
.cc-login-page .login-panel { width: 420px; flex-shrink: 0; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 3rem 2.75rem; position: relative; }
.cc-login-page .login-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #8f1e32; }
.cc-login-page .logo-area { margin-bottom: 2.5rem; }
.cc-login-page .logo-sub { font-size: 12px; color: #999; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-login-page .login-heading { font-size: 24px; font-weight: 600; color: #111; margin-bottom: 6px; letter-spacing: -0.02em; }
.cc-login-page .login-sub { font-size: 14px; color: #888; margin-bottom: 2rem; }
.cc-login-page .form-group { margin-bottom: 1.1rem; }
.cc-login-page .form-group label { display: block; font-size: 12px; font-weight: 500; color: #555; margin-bottom: 6px; letter-spacing: 0.02em; }
.cc-login-page .form-group input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #111; background: #fafafa; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; }
.cc-login-page .form-group input:focus { border-color: #8f1e32; background: #fff; box-shadow: 0 0 0 3px rgba(143, 30, 50, 0.1); }
.cc-login-page .form-group input::placeholder { color: #bbb; }
.cc-login-page .forgot-row { display: flex; justify-content: flex-end; margin-top: -6px; margin-bottom: 1.5rem; }
.cc-login-page .forgot-row a { font-size: 12px; color: #8f1e32; text-decoration: none; opacity: 0.85; }
.cc-login-page .btn-login { width: 100%; height: 44px; background: #8f1e32; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cc-login-page .btn-login:hover { background: #7a1829; }
.cc-login-page .btn-login:disabled { opacity: .6; cursor: default; }
.cc-login-page .login-error { background: #f9ecee; border: 0.5px solid #d9929e; color: #5a1220; font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 1rem; }
.cc-login-page .divider { display: flex; align-items: center; gap: 12px; margin: 1.5rem 0; }
.cc-login-page .divider hr { flex: 1; border: none; border-top: 1px solid #eee; }
.cc-login-page .divider span { font-size: 11px; color: #bbb; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-login-page .help-text { font-size: 12px; color: #aaa; text-align: center; line-height: 1.6; }
.cc-login-page .help-text a { color: #8f1e32; text-decoration: none; }
.cc-login-page .footer-bar { position: absolute; bottom: 1.5rem; left: 2.75rem; right: 2.75rem; display: flex; align-items: center; justify-content: space-between; }
.cc-login-page .footer-bar span { font-size: 11px; color: #ccc; }
.cc-login-page .footer-dot { width: 5px; height: 5px; border-radius: 50%; background: #8f1e32; opacity: 0.4; }

/* ============================================================
   Tegel Productie — pakbon-invoer (Pages/Portal/Productie.razor)
   ============================================================ */

/* Tabel: pakbonnummer + subtekst */
.cc-pakbon-num { font-weight: 600; color: #111; }
.cc-sub { font-size: 11px; color: #aaa; display: block; }

/* Bredere modal voor de pakbon-invoer + sticky header/footer */
.cc-modal-pakbon { width: 720px; }
.cc-modal-pakbon .cc-modal-header { position: sticky; top: 0; z-index: 5; border-radius: 12px 12px 0 0; }
.cc-modal-pakbon .cc-modal-footer { position: sticky; bottom: 0; background: white; }

/* Stap-labels met genummerd bolletje */
.cc-modal-section-label.step { display: flex; align-items: center; gap: 6px; }
.cc-modal-section-label .num { width: 18px; height: 18px; border-radius: 50%; background: #8f1e32; color: white; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.cc-form-grid.three { grid-template-columns: 1.2fr 1fr 1fr; }
.cc-divider { height: 1px; background: #f0eeed; margin: 1.4rem 0; }

/* Pakbonregel-kaarten */
.pl-card { border: 1px solid #ece9e6; border-radius: 10px; padding: 12px 12px 10px; margin-bottom: 10px; background: #fcfbfa; }
.pl-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.pl-co-wrap { flex: 1; position: relative; }
.pl-co-display { min-height: 36px; border: 1px solid #e0e0e0; border-radius: 7px; background: white; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-co-display:hover { border-color: #8f1e32; }
.pl-co-display.filled { background: #fdf6f7; border-color: #d9929e; }
.pl-co-main { font-size: 13px; color: #111; }
.pl-co-meta { font-size: 11px; color: #999; }
.pl-co-placeholder { font-size: 13px; color: #aaa; }
.pl-num { font-size: 11px; font-weight: 600; color: #8f1e32; background: #f9ecee; border: .5px solid #e7bcc4; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.pl-regel-rm { width: 30px; height: 36px; border: 1px solid #e8e6e3; border-radius: 7px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #aaa; flex-shrink: 0; }
.pl-regel-rm:hover { background: #fcebeb; border-color: #f09595; color: #a32d2d; }
.pl-regel-rm:disabled { opacity: .3; cursor: default; }
.pl-row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.pl-keus { display: flex; gap: 4px; }

/* Deelregels (pallets / dozen / m²) */
.deel-head { display: grid; grid-template-columns: 0.8fr 0.9fr 0.9fr auto auto; gap: 8px; margin-bottom: 5px; padding: 0 2px; }
.deel-head span { font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: .04em; }
.deel-row { display: grid; grid-template-columns: 0.8fr 0.9fr 0.9fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.deel-row input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; background: white; }
.deel-row input:focus { border-color: #8f1e32; }
.deel-sub { font-size: 12px; color: #8f1e32; font-weight: 500; min-width: 64px; text-align: right; }
.deel-rm { width: 26px; height: 26px; border: .5px solid #e8e6e3; border-radius: 6px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #bbb; }
.deel-rm:hover { background: #fcebeb; border-color: #f09595; color: #a32d2d; }
.deel-rm:disabled { opacity: .3; cursor: default; }
.add-deel-btn { width: 100%; padding: 6px; border: .5px dashed #ccc; border-radius: 7px; background: #fff; color: #777; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; font-family: inherit; }
.add-deel-btn:hover { border-color: #d9929e; color: #8f1e32; background: #fdf6f7; }
.pl-regel-total { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: .5px dashed #e7e3df; font-size: 12px; color: #888; }
.pl-regel-total b { color: #111; font-weight: 600; }
.add-regel-btn { width: 100%; padding: 9px; border: 1px dashed #d9929e; border-radius: 8px; background: #f9ecee; color: #8f1e32; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; }
.add-regel-btn:hover { background: #f4dde1; }

/* Samenvatting + gewichten */
.summary-box { background: #8f1e32; border-radius: 10px; padding: 14px 16px; margin-top: 4px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.summary-item span { font-size: 11px; color: rgba(255,255,255,.7); display: block; }
.summary-item b { font-size: 17px; font-weight: 600; color: white; }
.summary-div { width: 1px; height: 34px; background: rgba(255,255,255,.2); }
.weight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: .5px solid rgba(255,255,255,.18); }
.weight-grid label { font-size: 11px; color: rgba(255,255,255,.85); display: block; margin-bottom: 4px; }
.weight-grid .winp { display: flex; align-items: center; gap: 6px; }
.weight-grid input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; font-size: 13px; color: white; background: rgba(255,255,255,.12); outline: none; font-family: inherit; }
.weight-grid input::placeholder { color: rgba(255,255,255,.5); }
.weight-grid input:focus { border-color: white; background: rgba(255,255,255,.18); }
.weight-grid .unit { font-size: 12px; color: rgba(255,255,255,.7); }

/* CO-kiezer (dropdown in de regelkaart) */
.co-picker { background: white; border: 0.5px solid #e0e0e0; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.14); overflow: hidden; }
.co-picker.cc-co-inline { position: absolute; left: 0; right: 0; top: 42px; z-index: 300; }
.co-picker-header { padding: 10px 12px; border-bottom: 0.5px solid #f0eeed; }
.co-picker-search { width: 100%; height: 32px; padding: 0 10px; border: 1px solid #e8e6e3; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; }
.co-picker-search:focus { border-color: #8f1e32; }
.co-picker-list { max-height: 260px; overflow-y: auto; }
.co-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 0.5px solid #faf9f8; }
.co-opt:hover { background: #fdf9f9; }
.co-opt-co { font-size: 12px; font-weight: 600; color: #8f1e32; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-opt-kw { font-size: 13px; color: #111; }
.co-opt-meta { font-size: 11px; color: #aaa; }
.co-opt-klant { margin-left: auto; font-size: 11px; background: #f3f1ee; color: #777; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

/* Detail-paneel (pakbon) */
.detail-pakbon-name { font-size: 20px; font-weight: 600; color: white; margin-bottom: 4px; }
.detail-pakbon-sub { font-size: 12px; color: rgba(255,255,255,.6); }
.detail-rg-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.detail-rg-table th { text-align: left; font-size: 10px; color: #bbb; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; background: #faf9f8; }
.detail-rg-table td { padding: 7px 8px; border-bottom: 0.5px solid #f5f4f2; color: #333; vertical-align: top; }
.detail-rg-table tr:last-child td { border-bottom: none; }
.detail-rg-table .m2 { font-weight: 500; color: #8f1e32; text-align: right; }
.detail-sum-row { background: #8f1e32; border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 10px; }
.detail-sum-row span { font-size: 11px; color: rgba(255,255,255,.7); display: block; }
.detail-sum-row b { font-size: 16px; font-weight: 600; color: white; }
.btn-detail-edit { flex: 1; height: 36px; border: 0.5px solid #e0e0e0; border-radius: 7px; background: white; font-size: 13px; cursor: pointer; font-family: inherit; color: #555; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-detail-edit:hover { border-color: #8f1e32; color: #8f1e32; background: #fdf9f9; }
.btn-detail-print { height: 36px; padding: 0 16px; background: #8f1e32; color: white; border: none; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.btn-detail-print:hover { background: #7a1829; }

@media (max-width: 720px) {
    .cc-form-grid.three { grid-template-columns: 1fr; }
}

/* ===== Pakbon afdrukken / PDF ===== */
#pakbon-print { display: none; }
.pp-letterhead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.pp-company { font-size: 20px; font-weight: 700; color: #000; letter-spacing: .01em; }
.pp-company .pp-sub { font-size: 11px; font-weight: 400; color: #444; margin-top: 2px; }
.pp-addr { font-size: 10.5px; color: #222; text-align: right; line-height: 1.5; }
.pp-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.pp-nr { font-size: 12px; font-weight: 600; text-align: center; margin: 4px 0 14px; }
.pp-clause { font-size: 9px; color: #333; text-align: center; line-height: 1.5; margin-bottom: 14px; }
.pp-clause i { color: #555; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pp-table th { text-align: left; font-size: 9.5px; font-weight: 700; color: #000; border-bottom: 1.5px solid #000; padding: 4px 6px; vertical-align: top; line-height: 1.35; }
.pp-table th span { display: block; font-weight: 400; font-style: italic; color: #444; font-size: 8.5px; }
.pp-table th.num { text-align: right; }
.pp-table td { padding: 3px 6px; vertical-align: top; font-size: 11px; color: #111; }
.pp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-table tr.pp-regel-start td { border-top: .5px solid #cfcfcf; padding-top: 7px; }
.pp-table tr.pp-regel-start:first-child td { border-top: none; }
.pp-art { font-weight: 700; }
.pp-ref { color: #555; font-weight: 400; margin-left: 4px; }
.pp-partij { font-variant-numeric: tabular-nums; }
.pp-table td.pp-linetot { font-weight: 700; }
.pp-totbar { border-top: 1.5px solid #000; margin-top: 4px; }
.pp-totals { margin-top: 14px; font-size: 12px; line-height: 1.7; }
.pp-totals .pp-grand { font-weight: 700; font-size: 13px; }
.pp-totals .pp-counts { font-weight: 600; }

@media print {
    @page { size: A4; margin: 16mm 14mm; }
    /* min-height:100vh (297mm) is groter dan het printbare gebied (~265mm) en duwt
       anders een lege 2e pagina eruit; in print de hoogte vrijgeven. */
    html, body, .cc-app { background: white !important; min-height: 0 !important; height: auto !important; }
    .cc-topbar, .cc-content, .backdrop, .detail-backdrop, .cc-toast, .co-picker { display: none !important; }
    #pakbon-print { display: block !important; color: #000; font-family: 'Segoe UI', Arial, sans-serif; }
}

/* ============================================================
   Blazor-foutbalk: standaard verborgen; framework toont 'm
   alleen bij een onafgevangen fout (zet dan display:block).
   ============================================================ */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: #8f1e32;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ============================================================
   Laadscherm: getoond tot de WASM-app is opgestart (in index.html).
   ============================================================ */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #0e1219;
    color: #cbd2dc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
}
.app-loading-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #8f1e32;
    border-radius: 50%;
    animation: app-loading-spin 0.9s linear infinite;
}
@keyframes app-loading-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Wijzigingen-paneel (knop naast Uitloggen) + de items erin.
   Het paneel hergebruikt de .detail-backdrop/.detail-panel-stijl.
   ============================================================ */
.cc-changes-btn { font-size: 12px; color: rgba(255,255,255,.6); background: none; border: 0.5px solid rgba(255,255,255,.2); border-radius: 7px; height: 30px; padding: 0 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.cc-changes-btn:hover { color: white; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.wijz-leeg { padding: 28px 8px; text-align: center; color: #999; font-size: 13px; }
.wijz-count { display: inline-block; margin-left: 6px; background: #f0e6e8; color: #8f1e32; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
/* Inklapbare paginasectie (native <details>/<summary>). */
.wijz-groep { border-bottom: 1px solid #ececec; padding: 4px 0; }
.wijz-groep:last-child { border-bottom: none; }
.wijz-groep-kop { cursor: pointer; padding: 10px 2px; font-size: 13px; font-weight: 600; color: #8f1e32; display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; }
.wijz-groep-kop::-webkit-details-marker { display: none; }
.wijz-groep-kop::before { content: "\25B8"; font-size: 11px; color: #b48; transition: transform .15s ease; display: inline-block; }
.wijz-groep[open] > .wijz-groep-kop::before { transform: rotate(90deg); }
.wijz-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f2f0ee; }
.wijz-item:last-child { border-bottom: none; }
.wijz-actie { flex-shrink: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; margin-top: 1px; }
.wijz-actie.a-toegevoegd { background: #e3f2e6; color: #1e7a3d; }
.wijz-actie.a-gewijzigd { background: #e6eefb; color: #2159a3; }
.wijz-actie.a-verwijderd { background: #fbe4e4; color: #a32d2d; }
.wijz-tekst { font-size: 13px; color: #333; line-height: 1.4; }
/* Eerste regel = kop (artikel/sleutel), daaronder de 'oud → nieuw'-regels. */
.wijz-detail { white-space: pre-line; }
.wijz-detail::first-line { font-weight: 600; color: #222; }
.wijz-tijd { font-size: 11px; color: #aaa; margin-top: 2px; }