:root {
    --accent:   #c8b47e;
    --accent-lt:#dfc4b0;
    --bg:       #ffffff;
    --bg2:      #faf8f5;
    --bg3:      #f4f1ec;
    --border:   #e8e2d9;
    --text:     #2e2a25;
    --muted:    #9e9187;
    --sage:     #8fa896;
    --casa-green:#6b8a4e;
    --casa-green-dk:#587340;
    --danger:   #d9534f;
    --r:        12px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; overflow-x:clip; }
  body { font-family:'DM Sans',sans-serif; background:var(--bg2); color:var(--text); min-height:100vh; font-size:1.05rem; overflow-x:hidden; }
  p { font-size:1.15rem; line-height:1.6; }
  .info-msg { display:none; }
  .info-msg.show { display:inline !important; }
  .info-hover { position:relative; display:inline-flex; align-items:center; vertical-align:middle; margin-left:.35rem; }
  /* Labels die het info-icoon via flex naast de tekst zetten: laat het icoon inline meelopen,
     anders duwt lange (ombrekende) labeltekst het icoon buiten beeld op mobiel. */
  .admin-page label[style*="display:flex"] { display:block !important; }
  .info-hover-icon {
    width:24px; height:24px; border-radius:50%; background:var(--accent);
    color:#fff; font-size:.85rem; font-weight:700; font-style:italic;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0; font-family:Georgia,serif;
    -webkit-tap-highlight-color:transparent; user-select:none;
  }
  .info-hover-msg {
    display:none; position:fixed;
    background:var(--text); color:#fff; font-size:.85rem; line-height:1.5; font-weight:300;
    padding:.6rem .9rem; border-radius:8px; white-space:normal;
    width:280px; max-width:calc(100vw - 2rem); z-index:99999; box-shadow:0 4px 20px rgba(0,0,0,.2); pointer-events:none;
  }
  .info-hover-msg.show { display:block; }
  label { font-size:.95rem; }
  .card p, .card div { font-size:inherit; }
  .admin-page p { font-size:1.15rem !important; line-height:1.6 !important; }
  .admin-page label { font-size:.95rem !important; }
  .admin-page .fg label { font-size:.9rem !important; }

  /* ── LOGIN ── */
  .login-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--bg2); position:relative; z-index:100;
  }
  .login-box {
    background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
    padding:3rem 3.5rem; width:100%; max-width:400px;
    box-shadow:0 8px 40px rgba(0,0,0,.07);
    text-align:center;
  }
  .login-logo {
    font-family:'DM Sans',sans-serif;
    font-size:2rem; font-weight:300; letter-spacing:.15em; color:var(--text);
    margin-bottom:.3rem;
  }
  .login-sub { font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:2.5rem; }
  .login-box label { display:block; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; text-align:left; }
  .login-box input {
    width:100%; padding:.85rem 1.1rem; border:1px solid var(--border);
    border-radius:var(--r); font-family:'DM Sans',sans-serif; font-size:.95rem;
    color:var(--text); background:var(--bg2); margin-bottom:1.2rem; outline:none;
    transition:border-color .2s;
  }
  .login-box input:focus { border-color:var(--accent); }
  .login-btn {
    width:100%; padding:1rem; background:var(--accent); color:#fff; border:none;
    border-radius:50px; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
    cursor:pointer; transition:background .2s; font-family:'DM Sans',sans-serif;
  }
  .login-btn:hover { background:var(--text); }
  .login-error { color:var(--danger); font-size:.85rem; margin-top:1rem; display:none; padding:.6rem; background:#ecf3f0; border-radius:8px; }

  /* ── ADMIN SHELL ── */
  .admin-shell { display:none; min-height:100vh; flex-direction:column; }
  .admin-shell.visible { display:flex; }

  .admin-header {
    background:var(--bg); border-bottom:1px solid var(--border);
    padding:1rem 2.5rem; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:10;
    gap:1rem;
  }
  .admin-logo { font-family:'DM Sans',sans-serif; font-size:1.6rem; font-weight:300; letter-spacing:.14em; color:var(--text); margin-right:auto; display:flex; align-items:center; gap:1rem; }
  .admin-logo img { height:100px; width:auto; display:block; }
  .admin-logo span { font-size:1.1rem; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); font-weight:300; }
  .back-btn {
    display:flex; align-items:center; gap:.5rem;
    background:var(--bg); border:1.5px solid var(--border); border-radius:50px;
    padding:.6rem 1.3rem .6rem 1rem; font-size:1rem; color:var(--text);
    cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:500;
    transition:all .2s; flex-shrink:0; margin-bottom:1rem;
  }
  .back-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg2); }
  .back-btn svg { stroke:currentColor; flex-shrink:0; width:18px; height:18px; }
  .logout-btn {
    background:none; border:1px solid var(--border); border-radius:50px;
    padding:.5rem 1.2rem; font-size:.75rem; color:var(--muted); cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .logout-btn:hover { border-color:var(--accent); color:var(--accent); }
  .admin-header-logo { height:140px; width:auto; margin-left:.6rem; }

  /* Admin taal-switcher */
  .admin-lang { position:relative; }
  .admin-lang-trigger {
    display:flex; align-items:center; gap:.4rem; background:var(--bg2);
    border:1px solid var(--border); border-radius:50px;
    padding:.4rem .75rem .4rem .65rem; font-size:.78rem; color:var(--text);
    font-family:'DM Sans',sans-serif; font-weight:500; cursor:pointer; transition:all .15s;
  }
  .admin-lang-trigger:hover { border-color:var(--accent); }
  .admin-lang-trigger svg { opacity:.6; transition:transform .2s; }
  .admin-lang.open .admin-lang-trigger svg { transform:rotate(180deg); }
  .admin-lang-menu {
    position:absolute; top:calc(100% + 6px); right:0;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.1); padding:.35rem; min-width:170px;
    opacity:0; visibility:hidden; transform:translateY(-4px); transition:all .15s; z-index:200;
  }
  .admin-lang.open .admin-lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
  .admin-lang-item {
    display:flex; align-items:center; gap:.55rem; width:100%; text-align:left;
    background:none; border:none; padding:.5rem .75rem; cursor:pointer;
    font-size:.85rem; color:var(--text); border-radius:8px;
    font-family:'DM Sans',sans-serif; transition:background .12s;
  }
  .admin-lang-item:hover { background:var(--bg2); }
  .admin-lang-item.active { background:var(--bg2); color:var(--accent); font-weight:500; }

  @media(max-width:700px){
    .admin-lang-trigger { padding:.35rem .55rem; }
    #adminLangCode { display:none; }
  }

  .admin-body { display:grid; grid-template-columns:290px 1fr; flex:1; }
  /* Bij een open modal/menu: pagina-scroll uit — maar ALLEEN op desktop.
     Op touch-apparaten moet het window scrollbaar blijven: iOS gebruikt bij
     veldfocus alleen dan zijn snelle native pad; met een geblokkeerd window
     (position:fixed óf overflow:hidden) stalt het toetsenbord ±1s. De
     achtergrond wordt op mobiel al stilgehouden door het touchmove-vangnet. */
  html.ch-scroll-locked { scroll-behavior:auto !important; }
  @media(min-width:769px){
    html.ch-scroll-locked, html.ch-scroll-locked body { overflow:hidden !important; }
    html.ch-scroll-locked .admin-main { overflow:hidden !important; }
  }

  /* Sidebar */
  .admin-sidebar {
    background:var(--bg); border-right:1px solid var(--border);
    padding:2rem 0;
  }
  .sidebar-section { padding:0 1.6rem; margin-bottom:2rem; }
  .sidebar-brand { padding:1.5rem 1.6rem 2rem; }
  .sidebar-brand-logo { height:150px; width:auto; display:block; }
  .sidebar-label { font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:.8rem; display:block; }
  .sidebar-lang-section { display:none; }
  .sidebar-lang-flag.admin-lang-item {
    flex:0 0 auto; width:auto; background:none; border:1px solid transparent; border-radius:8px; cursor:pointer;
    font-size:1.5rem; line-height:1; padding:.3rem .5rem; opacity:.45; transition:opacity .15s, border-color .15s;
    display:inline-flex; align-items:center; justify-content:center; gap:0;
  }
  .sidebar-lang-flag.admin-lang-item:hover { opacity:.8; background:none; }
  .sidebar-lang-flag.admin-lang-item.active { opacity:1; border-color:var(--accent); background:none; }
  .sidebar-btn {
    display:flex; align-items:center; gap:.8rem; width:100%;
    padding:.8rem 1.1rem; border:none; background:none; border-radius:var(--r);
    font-family:'DM Sans',sans-serif; font-size:1rem; color:var(--text);
    cursor:pointer; transition:background .2s, color .2s, transform .15s, box-shadow .2s; text-align:left; margin-bottom:.2rem;
  }
  .sidebar-btn:hover { background:var(--bg2); transform:translateX(3px); }
  .sidebar-btn.active { background:var(--bg3); color:var(--accent); font-weight:500; box-shadow:inset 3px 0 0 var(--accent); }
  .sidebar-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

  /* Mobiel uitklapmenu — verborgen op desktop */
  .menu-toggle { display:none; align-items:center; justify-content:center; width:46px; height:46px; padding:0; margin-right:.4rem; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); color:var(--text); cursor:pointer; flex-shrink:0; transition:background .2s, border-color .2s; }
  .menu-toggle:hover { background:var(--bg2); border-color:var(--accent); }
  .menu-toggle svg { width:26px; height:26px; }
  .sidebar-close { display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:none; background:none; color:var(--muted); cursor:pointer; position:absolute; top:1rem; right:1rem; border-radius:var(--r); transition:background .2s, color .2s; }
  .sidebar-close:hover { background:var(--bg2); color:var(--text); }
  .sidebar-close svg { width:28px; height:28px; }
  .admin-menu-backdrop { display:none; position:fixed; inset:0; background:rgba(20,28,22,.45); z-index:999; opacity:0; transition:opacity .3s ease; }
  .admin-menu-backdrop.open { opacity:1; }

  /* Main content */
  .admin-main { padding:2.5rem; overflow-y:auto; padding-bottom:6rem; }
  .admin-page { display:none; }
  .admin-page.active { display:block; }

  .page-title { font-family:'DM Sans',sans-serif; font-size:2.6rem; font-weight:400; color:var(--text); margin-bottom:.5rem; letter-spacing:-.01em; line-height:1.15; }
  .page-sub { font-size:1.15rem; color:var(--muted); margin-bottom:2rem; font-weight:300; line-height:1.6; }

  /* Card */
  .card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:2rem; margin-bottom:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:box-shadow .25s, transform .25s; }
  .card:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); }
  .card-title { font-family:'DM Sans',sans-serif; font-size:1.8rem !important; font-weight:600; color:var(--text); margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; letter-spacing:-.01em; }
  .card-title svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  /* Uitklap-pijltje 'Ik heb al een eigen domeinnaam' — extra groot zodat het opvalt */
  #eigenDomeinChevron { width:32px; height:32px; stroke-width:2.5; }

  /* Inklapbare kaarten op website-algemeen pagina */
  .card.collapsible { padding:0; overflow:hidden; }
  .card.collapsible .card-toggle {
    display:flex; align-items:center; gap:.6rem;
    padding:1.6rem 2rem; cursor:pointer; user-select:none;
    border-radius:var(--r); transition:background .2s;
  }
  .card.collapsible .card-toggle:hover { background:var(--bg2); }
  .card.collapsible .card-toggle-title { font-family:'DM Sans',sans-serif; font-size:1.3rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:.6rem; transition:color .2s; }
  .card.collapsible .card-toggle:hover .card-toggle-title { color:var(--accent); }
  .card.collapsible .card-toggle-chevron {
    width:22px; height:22px; stroke:var(--muted); fill:none; stroke-width:2.5;
    stroke-linecap:round; flex-shrink:0; transition:transform .2s;
  }
  .card.collapsible.open .card-toggle-chevron { transform:rotate(180deg); }
  .card.collapsible .card-body { display:none; padding:1.5rem 2rem 2rem; border-top:1px solid var(--border); }
  .card.collapsible.open .card-body { display:block; }
  .card.collapsible.open .card-toggle { border-radius:var(--r) var(--r) 0 0; }

  /* Voorzieningen icon picker */
  .vz-picker-wrap { position:relative; margin-bottom:1rem; }
  .vz-picker-search {
    width:100%; padding:.6rem 1rem .6rem 2.4rem; border:1px solid var(--border);
    border-radius:9px; font-size:.9rem; font-family:'DM Sans',sans-serif;
    color:var(--text); background:var(--bg2); outline:none;
  }
  .vz-picker-search:focus { border-color:var(--accent); }
  .vz-picker-search-icon { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); pointer-events:none; }
  .vz-picker-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:.4rem; max-height:none; overflow:visible;
    border:1px solid var(--border); border-radius:9px; padding:.5rem;
    background:var(--bg2);
  }
  .vz-picker-item {
    display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem;
    border-radius:8px; cursor:pointer; border:1px solid transparent;
    font-size:.82rem; color:var(--text); transition:all .12s;
    min-height:0; min-width:0; overflow:hidden;
  }
  .vz-picker-item:hover { background:var(--bg3); border-color:var(--border); }
  .vz-picker-item.selected { background:#f0f7f2; border-color:#c5e0cc; color:var(--sage); }
  .vz-picker-item svg { flex-shrink:0; }
  .vz-picker-item span { line-height:1.3; min-width:0; overflow-wrap:anywhere; }

  /* ── Slaapindeling (kamerbeheer) ── */
  .kamer-adm { border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; margin-bottom:.7rem; background:var(--bg2); }
  .kamer-adm-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.55rem; }
  .kamer-adm-head strong { font-size:.85rem; }
  .kbc-del { background:none; border:none; color:var(--muted); cursor:pointer; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px; margin:-.6rem -.5rem -.4rem 0; }
  .kbc-del:hover { color:#c0392b; background:var(--bg3); }
  .kamer-adm-beds { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:.45rem; }
  .kamer-bed-chip { display:flex; align-items:center; gap:.45rem; border:1px solid var(--border); border-radius:8px; padding:0 .15rem 0 .6rem; background:var(--bg); font-size:.78rem; color:var(--muted); min-height:44px; }
  .kamer-bed-chip.active { border-color:var(--accent); color:var(--text); }
  .kamer-bed-chip > svg { flex-shrink:0; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .kbc-label { flex:1; min-width:0; overflow-wrap:anywhere; line-height:1.2; }
  .kbc-step { display:flex; align-items:center; flex-shrink:0; }
  .kbc-btn { width:2.2rem; height:2.75rem; border:none; background:none; color:var(--muted); font-size:1.05rem; cursor:pointer; border-radius:8px; line-height:1; }
  .kbc-btn:hover { background:var(--bg3); color:var(--text); }
  .kbc-num { min-width:1.2rem; text-align:center; font-size:.85rem; }
  .kamer-bed-chip.active .kbc-num { color:var(--accent); font-weight:600; }
  .vz-picker-item.hidden { display:none; }
  @media(max-width:768px){
    .vz-picker-item { min-height:44px; padding:.6rem .7rem; }
    .vz-picker-search { min-height:44px; }
  }

  /* Form elements */
  .form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap:1rem; align-items:end; margin-bottom:1rem; }
  .form-row > .fg { min-width:0; }
  .form-row .fg input, .form-row .fg select { width:100%; min-width:0; box-sizing:border-box; }
  .form-row-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; margin-bottom:1rem; }
  .form-row-2 > .fg { min-width:0; }
  .acc-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-bottom:1rem; }
  .acc-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
  #page-account { max-width:600px; }
  #page-account input[type="text"],
  #page-account input[type="password"] { padding:.5rem .8rem; font-size:.9rem; }
  #page-account h3 { font-size:1rem; margin-bottom:.7rem; }
  #page-account > div[style*="padding"] { padding:1.2rem !important; margin-bottom:1rem !important; }

  /* Twee-koloms kaart layout voor desktop */
  .card-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
  .card-cols-3 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .logo-grid { display:grid; grid-template-columns:200px 1fr; gap:1rem; align-items:start; }
  .hero-upload-grid { display:grid; grid-template-columns:280px 1fr; gap:1rem; align-items:start; }

  /* Compacte afbeelding upload zone */
  .img-upload-zone {
    border:2px dashed var(--border); border-radius:var(--r);
    padding:0; text-align:center; cursor:pointer; overflow:hidden;
    position:relative; min-height:280px; background:var(--bg3);
    transition:border-color .2s;
  }
  .img-upload-zone:hover { border-color:var(--accent); }
  .img-upload-zone-inner { position:relative; z-index:2; padding:1rem; }
  .img-upload-zone-label { font-size:.82rem; color:var(--muted); }
  .img-upload-zone-hint  { font-size:.72rem; color:var(--muted); margin-top:.2rem; }

  /* Tekst-opmaak werkbalk */
  .txt-toolbar {
    display:flex; gap:.3rem; align-items:center; margin-bottom:.35rem;
  }
  .txt-toolbar button {
    padding:.28rem .6rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif;
    font-size:.8rem; cursor:pointer; line-height:1; transition:background .15s, border-color .15s;
  }
  .txt-toolbar button:hover { background:var(--bg3); border-color:var(--accent); color:var(--accent); }
  .txt-toolbar button b { font-weight:700; }
  .txt-toolbar button i { font-style:italic; }
  .txt-toolbar-info {
    position:relative; margin-left:.2rem; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; padding:.3rem;
    -webkit-tap-highlight-color:transparent;
  }
  .txt-toolbar-info svg { display:block; width:20px; height:20px; }
  .txt-tooltip {
    display:none; position:fixed;
    background:var(--text); color:#fff; font-size:.75rem; line-height:1.6;
    padding:.55rem .8rem; border-radius:8px; white-space:normal;
    width:210px; max-width:calc(100vw - 2rem); z-index:9999;
    box-shadow:0 4px 20px rgba(0,0,0,.22); pointer-events:none;
  }
  .txt-tooltip.visible { display:block; }
  .fg { display:flex; flex-direction:column; gap:.4rem; position:relative; }
  .fg input[type="date"] { cursor:pointer; min-width:0; max-width:100%; padding:.75rem 1rem; box-sizing:border-box; }
  /* iOS/Safari geeft date-inputs een intrinsieke minimumbreedte die het grid
     laat overlopen; expliciet resetten zodat het veld binnen de modal blijft. */
  .fg input[type="date"]::-webkit-date-and-time-value { text-align:left; min-width:0; }
  .fg input[type="date"]::-webkit-calendar-picker-indicator { width:100%; position:absolute; left:0; top:0; height:100%; opacity:0; cursor:pointer; }
  .fg label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#7a6f65; font-weight:500; }
  .fg input, .fg select {
    padding:.75rem 1rem; border:1px solid var(--border); border-radius:var(--r);
    font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--text);
    background:var(--bg2); outline:none; transition:border-color .2s;
    width:100%; box-sizing:border-box;
  }
  .fg input:focus, .fg select:focus { border-color:var(--accent); }
  .fg input::placeholder, .fg textarea::placeholder { color:#a89d92; opacity:1; }
  .fg textarea {
    padding:.75rem 1rem; border:1px solid var(--border); border-radius:var(--r);
    font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--text); line-height:1.6;
    background:var(--bg2); outline:none; transition:border-color .2s; resize:vertical;
    width:100%; box-sizing:border-box;
  }
  .fg textarea:focus { border-color:var(--accent); }
  .fg textarea.autogrow { resize:none; overflow-y:auto; min-height:4.6em; }
  /* Mobiel: iOS zoomt automatisch in op velden met een font-size onder 16px —
     die zoom-animatie voelt als een seconde vertraging voordat je kunt typen.
     Daarom op touch-formaten alle invoervelden op exact 16px. */
  @media(max-width:768px){
    .fg input, .fg select, .fg textarea,
    .aanvr-fg input, .aanvr-fg select,
    .aanvr-kosten-edit input[type="number"],
    .modal input, .modal select, .modal textarea { font-size:16px !important; }
  }

  .btn {
    padding:.75rem 1.4rem; border:none; border-radius:50px; cursor:pointer;
    font-family:'DM Sans',sans-serif; font-size:.8rem; letter-spacing:.15em;
    text-transform:uppercase; font-weight:400; transition:all .2s ease;
    white-space:nowrap; display:inline-flex; align-items:center;
  }
  .btn-primary { background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(77,127,116,.25); }
  .btn-primary:hover { background:var(--text); transform:translateY(-1px); box-shadow:0 4px 14px rgba(46,42,37,.3); }
  .btn-danger  { background:var(--bg2); color:var(--danger); border:1px solid var(--border); }
  .btn-danger:hover  { background:var(--danger); color:#fff; border-color:var(--danger); }
  .btn-sm { padding:.5rem 1rem; font-size:.72rem; }
  .btn-outline { background:none; border:1px solid var(--border); color:var(--text); }
  .btn-outline:hover { border-color:var(--accent); color:var(--accent); background:var(--bg2); transform:translateY(-1px); }
  /* Hover op kale actieknoppen (o.a. huisregels & routebeschrijving in een boeking) */
  .btn:not(.btn-primary):not(.btn-outline):not(.btn-danger):hover {
    border-color:var(--accent) !important; color:var(--accent);
    background:var(--bg2) !important; transform:translateY(-1px);
    box-shadow:0 3px 10px rgba(0,0,0,.06);
  }

  /* Boeking icoon-knoppen */
  .bk-icon-btn {
    width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border);
    background:var(--bg2); cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--text); transition:all .15s; flex-shrink:0;
  }
  .bk-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:#fff8f5; }
  .bk-icon-danger { border-color:#e0b0b0; color:var(--danger); }
  .bk-icon-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
  @media(max-width:768px){
    #btnVulHuisregelsIn { display:none !important; }
  }

  /* Calendar admin view */
  .admin-cal-nav { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
  .admin-cal-nav button { background:none; border:1px solid var(--border); border-radius:50%; width:42px; height:42px; cursor:pointer; font-size:1.5rem; color:var(--accent); display:flex; align-items:center; justify-content:center; transition:background .2s; }
  .admin-cal-nav button:hover { background:var(--bg3); }
  .admin-cal-month-label { font-family:'DM Sans',sans-serif; font-size:1.9rem; font-weight:400; color:var(--text); }

  .admin-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .acw { text-align:center; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:.4rem 0; }
  .acd {
    min-height:80px; aspect-ratio:unset; padding:.6rem .4rem;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:10px; border:1px solid var(--border); cursor:pointer;
    transition:background .1s, border-color .1s; position:relative; background:var(--bg2); gap:3px;
  }
  .acd:hover { border-color:var(--accent); background:#fff; }
  .acd.empty { border-color:transparent; background:transparent; cursor:default; }
  .acd.past { opacity:.35; cursor:default; }
  .acd.status-beschikbaar { background:#e2f0e5; border-color:#a8d4b4; }
  .acd.status-bezet { background:#c75050; border-color:#b34545; }
  .acd .acd-num { font-size:1.1rem; font-weight:500; color:var(--text); line-height:1; pointer-events:none; }
  .acd.past .acd-num { color:var(--border); }
  .acd .acd-price { font-size:.8rem; color:var(--accent); font-weight:500; line-height:1; pointer-events:none; }
  .acd .acd-status { font-size:.8rem; font-weight:400; line-height:1.2; text-align:center; word-break:break-word; max-width:100%; padding:0 3px; pointer-events:none; }
  .acd.status-beschikbaar .acd-status { color:#4a7a56; }
  .acd.status-bezet .acd-status { color:#fff; }
  .acd.status-bezet .acd-num { color:#fff; }
  .acd.status-bezet .acd-price { color:rgba(255,255,255,.9); }

  /* Day edit modal */
  .modal-backdrop {
    display:none; position:fixed; inset:0; background:rgba(20,16,12,.58);
    /* Geen backdrop-filter: die moet bij het openen van het iOS-toetsenbord
       elke frame opnieuw over de hele pagina gerekend worden en vertraagt de
       toetsenbordanimatie met ~1s. Iets donkerdere dim compenseert. */
    z-index:500; align-items:center; justify-content:center;
    padding:1rem;
    /* Achtergrond mag niet meescrollen: geen scroll-chaining vanuit de modal.
       Slepen op de donkere zone wordt in JS afgevangen (touchmove) — een
       touch-action:none hier vertraagde taps op velden in de modal. */
    overscroll-behavior:contain;
  }
  .modal-backdrop.open { display:flex; }
  .modal {
    --modal-pad:2.5rem;
    background:var(--bg); border-radius:var(--r); padding:var(--modal-pad);
    width:100%; max-width:460px; box-shadow:0 24px 60px rgba(0,0,0,.15);
    animation:modalIn .2s ease; max-height:90vh; overflow-y:auto; overflow-x:hidden; position:relative;
    /* manipulation = scrollen/pinchen blijft, maar dubbeltik-zoom uit; dat
       haalt de ~300ms vertraging weg voordat een veld focus krijgt. */
    overscroll-behavior:contain; touch-action:manipulation;
  }

  /* Scroll-hint: vervaagt de onderrand en toont een pijltje zolang er nog
     inhoud onder de vouw zit. Sticky laatste element, dus het schuift vanzelf
     mee en verdwijnt zodra je onderaan bent (.at-end). */
  .modal-scroll-hint {
    position:sticky; z-index:9; pointer-events:none;
    bottom:calc(var(--modal-pad) * -1);
    height:calc(var(--modal-pad) + 2.6rem);
    margin:-2.6rem calc(var(--modal-pad) * -1) calc(var(--modal-pad) * -1);
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:.35rem;
    background:linear-gradient(to top, var(--bg) 55%, rgba(255,255,255,0) 100%);
    opacity:1; transition:opacity .2s;
  }
  .modal-scroll-hint.at-end { opacity:0; }
  .modal-scroll-hint span {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:var(--bg); border:1px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    animation:scrollHintBob 1.6s ease-in-out infinite;
  }
  .modal-scroll-hint svg { width:15px; height:15px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  @keyframes scrollHintBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
  @media(prefers-reduced-motion:reduce){ .modal-scroll-hint span { animation:none; } }
  /* Duidelijke sluitknop rechtsboven, blijft zichtbaar bij scrollen */
  .modal-x {
    position:sticky; top:0; margin-left:auto; margin-top:-.8rem; margin-bottom:.2rem;
    width:34px; height:34px; padding:0; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:50%;
    background:var(--bg); color:var(--muted); cursor:pointer;
    font-size:1.5rem; line-height:1; z-index:10;
    transition:background .15s,color .15s,border-color .15s;
  }
  .modal-x:hover { background:var(--bg2); color:var(--text); border-color:var(--text); }
  @keyframes modalIn { from{opacity:0} to{opacity:1} }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── DASHBOARD STAGGERED LOAD ANIMATIONS ── */
  @keyframes dashFadeUp {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
  }
  .dash-greeting { animation:dashFadeUp .5s ease both; }

  /* Dashboard footer met groot Casa Hero logo — alleen mobiel */
  .dash-footer { display:none; }
  @media(max-width:768px){
    .dash-footer { display:flex; justify-content:center; align-items:center; padding:2.5rem 1rem 1rem; margin-top:1rem; }
    .dash-footer-logo { height:150px; width:auto; display:block; opacity:.9; }
  }

  .dash-kpis .kpi-card { opacity:0; animation:dashFadeUp .45s ease both; }
  .dash-kpis .kpi-card:nth-child(1) { animation-delay:.1s; }
  .dash-kpis .kpi-card:nth-child(2) { animation-delay:.18s; }
  .dash-kpis .kpi-card:nth-child(3) { animation-delay:.26s; }
  .dash-kpis .kpi-card:nth-child(4) { animation-delay:.34s; }
  .huidig-card { animation:dashFadeUp .45s .3s ease both; }
  .upcoming-card { opacity:0; animation:dashFadeUp .4s ease both; }
  .upcoming-card:nth-child(1) { animation-delay:.25s; }
  .upcoming-card:nth-child(2) { animation-delay:.35s; }
  .upcoming-card:nth-child(3) { animation-delay:.45s; }
  .upcoming-card:nth-child(4) { animation-delay:.55s; }
  .modal-title { font-family:'DM Sans',sans-serif; font-size:1.7rem; font-weight:300; margin-bottom:.3rem; }
  .modal-sub { font-size:.85rem; color:var(--muted); margin-bottom:1.8rem; }

  /* Modal met gekleurde kop (boekingsdetail) — kop blijft staan bij scrollen */
  .modal.modal-accent { --modal-pad:0px; padding:0; }
  .modal-accent .modal-hdr {
    /* Bewust NIET sticky: position:sticky in een scrollende modal breekt op
       iOS Safari de hit-testing van invoervelden (taps landen ernaast). */
    position:relative;
    background:var(--accent); color:#fff;
    padding:1.5rem 3.6rem 1.35rem 1.7rem;
    border-radius:var(--r) var(--r) 0 0;
  }
  .modal-accent .modal-hdr-label {
    font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
    font-weight:600; color:rgba(255,255,255,.9); margin-bottom:.45rem;
  }
  .modal-accent .modal-hdr .modal-title { color:#fff; font-weight:400; line-height:1.15; margin-bottom:.35rem; }
  .modal-accent .modal-hdr .modal-sub { color:rgba(255,255,255,.9); font-size:.92rem; margin-bottom:0; }
  .modal-accent .modal-hdr .modal-x {
    position:absolute; top:1.1rem; right:1.1rem; margin:0;
    background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.35); color:#fff;
  }
  .modal-accent .modal-hdr .modal-x:hover { background:rgba(255,255,255,.28); border-color:#fff; color:#fff; }
  .modal-accent .modal-body { padding:1.5rem 1.7rem 1.7rem; }
  .modal-actions { display:flex; gap:.6rem; margin-top:1.5rem; align-items:center; flex-wrap:wrap; }
  .modal-actions .btn-primary { margin-right:auto; }
  .status-toggle { display:flex; gap:.6rem; margin-bottom:1.4rem; }
  .status-opt {
    flex:1; padding:.7rem; text-align:center; border:1px solid var(--border);
    border-radius:var(--r); cursor:pointer; font-size:.85rem; transition:all .15s;
    font-weight:300;
  }
  .status-opt.sel-beschikbaar { background:#f0f7f2; border-color:var(--sage); color:var(--sage); font-weight:500; }
  .status-opt.sel-bezet { background:#ecf3f0; border-color:var(--accent); color:var(--accent); font-weight:500; }
  @media(max-width:700px){
    .modal { padding:1.5rem; --modal-pad:1.5rem; }
    .modal.modal-accent { padding:0; --modal-pad:0px; }
    .modal-accent .modal-hdr { padding:1.2rem 3.2rem 1.1rem 1.25rem; }
    .modal-accent .modal-body { padding:1.15rem 1.25rem 1.4rem; }
    .modal-actions { flex-direction:column; align-items:stretch; gap:.55rem; }
    .modal-actions .btn { width:100%; flex:none; min-width:0; margin:0; text-align:center; }
    .modal-actions .btn-primary { order:-1; margin:0; }
  }

  /* Range tool */
  .range-result { margin-top:.8rem; padding:.8rem 1rem; background:var(--bg3); border-radius:var(--r); font-size:.85rem; color:var(--muted); display:none; }
  .range-result.show { display:block; }

  /* px kalender selectie & hover */
  .acd.px-drag-sel { background:#fff0e6 !important; border-color:var(--accent) !important; box-shadow:inset 0 0 0 2px var(--accent) !important; transition:none !important; }
  .acd.px-hover    { background:#fff8f5 !important; border-color:var(--accent-lt) !important; transition:none !important; }
  .acd { user-select:none; }
  #pxGrid.is-dragging .acd { transition:none !important; cursor:grabbing !important; }

  /* Prijzen-kalender — grotere cellen en tekst */
  .admin-page#page-prijzen .acd {
    min-height:95px; padding:.7rem .5rem; gap:4px;
  }
  .admin-page#page-prijzen .acd .acd-num {
    font-size:1.25rem; font-weight:500;
  }
  .admin-page#page-prijzen .acd .acd-price {
    font-size:1rem; font-weight:600;
  }
  .admin-page#page-prijzen .acd .acd-status {
    font-size:.82rem; font-weight:400;
  }
  .admin-page#page-prijzen .acw {
    font-size:.72rem; padding:.55rem 0; font-weight:500;
  }

  /* Aanvraag kaarten */
  .aanvr-card { border:1px solid var(--border); border-radius:var(--r); background:var(--bg); margin-bottom:.8rem; overflow:hidden; max-width:920px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  /* Compacte rij: naam + datums/totaal links, icoon-acties rechts */
  .aanvr-row { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.85rem 1.2rem; cursor:pointer; }
  .aanvr-row-left { flex:1; min-width:0; }
  .aanvr-row .aanvr-naam { margin-bottom:.15rem; font-size:1.05rem; }
  .aanvr-row-meta { font-size:.9rem; color:var(--muted); font-weight:300; }
  .aanvr-row-contact { font-size:.9rem; color:var(--muted); font-weight:300; margin-bottom:.1rem; }
  .aanvr-row-totaal { color:var(--accent); font-weight:500; }
  .aanvr-icon-btn {
    width:40px; height:40px; padding:0; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--bg2); border-radius:8px;
    color:var(--text); cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
  }
  .aanvr-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg); }
  .aanvr-icon-btn.approve { background:#2e7d32; border-color:#2e7d32; color:#fff; }
  .aanvr-icon-btn.approve:hover { background:#1b5e20; border-color:#1b5e20; color:#fff; }
  .aanvr-icon-btn.danger { color:var(--danger); }
  .aanvr-icon-btn.danger:hover { border-color:var(--danger); background:#fdf0f0; color:var(--danger); }
  /* Detailblokken standaard ingeklapt; open bij bewerken */
  .aanvr-body { display:none; }
  .aanvr-card.open .aanvr-body { display:block; }
  .aanvr-meta { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--bg2); padding:.5rem 1.2rem; border-bottom:1px solid var(--border); }
  .aanvr-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.2rem .8rem; flex-wrap:wrap; }
  .aanvr-naam { font-size:1.15rem; font-weight:500; color:var(--text); margin-bottom:.25rem; }
  .aanvr-contact { font-size:.92rem; color:var(--muted); font-weight:300; }
  .aanvr-contact-a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
  .aanvr-contact-a:hover { border-bottom-color:var(--accent); }

  /* Contactknoppen in de aanvraag-detailmodal — direct mailen of bellen */
  .aanvr-detail-contact { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
  .aanvr-contact-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    min-height:44px; padding:.5rem .95rem;
    border:1px solid var(--border); border-radius:50px;
    background:var(--bg2); color:var(--text); text-decoration:none;
    font-size:.92rem; line-height:1.2; max-width:100%;
    transition:background .15s, border-color .15s;
  }
  .aanvr-contact-btn:hover { background:var(--bg3); border-color:var(--accent); }
  .aanvr-contact-btn svg { width:17px; height:17px; flex:0 0 auto; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .aanvr-contact-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* WhatsApp — icoon-only knop naast het telefoonnummer */
  .aanvr-wa-btn { padding:.5rem; width:44px; justify-content:center; }
  .aanvr-wa-btn svg { width:20px; height:20px; fill:#25d366; stroke:none; }
  .aanvr-wa-btn:hover { border-color:#25d366; background:#eafaf0; }

  /* Meta-regel in de aanvraag-detailmodal (aantal personen e.d.) */
  .aanvr-detail-meta { display:flex; align-items:center; gap:.55rem; font-size:.95rem; color:var(--muted); margin-bottom:.8rem; }
  .aanvr-detail-meta svg { width:17px; height:17px; flex:0 0 auto; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .aanvr-acties { display:flex; gap:.5rem; flex-shrink:0; flex-wrap:wrap; }
  .aanvr-periode { display:flex; align-items:center; gap:1.8rem; padding:.7rem 1.2rem; background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .aanvr-periode-item { display:flex; flex-direction:column; gap:.1rem; }
  /* Extra ruimte tussen het datum-blok (Vertrek) en de tel-items (Nachten) */
  .aanvr-periode-extra:first-of-type { margin-left:1.4rem; }
  .aanvr-periode-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
  .aanvr-periode-val { font-size:.95rem; font-weight:500; color:var(--text); }
  .aanvr-periode-sep { color:var(--muted); font-size:1rem; }
  .aanvr-bericht { font-size:.92rem; color:var(--text); font-style:italic; padding:1.1rem 1.2rem; border-bottom:1px solid var(--border); line-height:1.65; background:var(--bg2); }
  .aanvr-prijs { padding:.8rem 1.2rem; }
  .aanvr-prijs-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .aanvr-prijs-row { display:flex; justify-content:space-between; font-size:.95rem; color:var(--text); padding:.2rem 0; align-items:center; gap:.5rem; }
  .aanvr-prijs-row > span:first-child { min-width:0; word-break:break-word; }
  .aanvr-prijs-row > span:last-child { flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .aanvr-prijs-row.borg { color:var(--muted); font-size:.88rem; font-style:italic; }
  .aanvr-prijs-totaal { display:flex; justify-content:space-between; font-size:1.05rem; font-weight:600; border-top:1px solid var(--border); padding-top:.5rem; margin-top:.4rem; }
  /* Lopend totaal in het bewerkpaneel — het prijsoverzicht zelf blijft op de kaart */
  .aanvr-edit-totaal:not(:empty) { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem; margin:.7rem 0 .2rem; padding-top:.6rem; border-top:1px solid var(--border); font-size:1.05rem; font-weight:600; }
  .aanvr-edit-totaal span:nth-child(2) { color:var(--accent); }
  .aanvr-edit-totaal .borg { flex-basis:100%; font-size:.78rem; font-weight:400; color:var(--muted); }
  .aanvr-prijs-totaal span:last-child { color:var(--accent); }
  /* In de detail-popup: totaal donker i.p.v. licht champagne (te weinig
     contrast op wit), en iets groter zodat het duidelijk het eindbedrag is */
  .aanvr-detail-prijs .aanvr-prijs-totaal { font-size:1.2rem; }
  .aanvr-detail-prijs .aanvr-prijs-totaal span:last-child { color:var(--text); font-weight:700; }
  .aanvr-geen-prijs { font-size:.82rem; color:var(--muted); font-style:italic; margin:0; }

  /* Aanvraag edit sectie */
  .aanvr-edit { border-top:1px solid var(--border); background:var(--bg2); padding:1rem 1.2rem; display:none; }
  .aanvr-edit.open { display:block; }
  /* In de bewerk-modal: geen kaderlijn, achtergrond of extra padding — de
     modal levert die zelf al. De titel binnenin is dan dubbelop. */
  .aanvr-edit.in-modal { border-top:none; background:transparent; padding:0; }
  .aanvr-edit.in-modal > .aanvr-edit-title { display:none; }
  .aanvr-edit.in-modal .aanvr-edit-actions { margin-top:1.2rem; }
  .aanvr-edit-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--accent); font-weight:600; margin-bottom:.9rem; }
  .aanvr-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; margin-bottom:.8rem; }
  .aanvr-edit-grid.cols3 { grid-template-columns:1fr 1fr 1fr; }
  .aanvr-edit-grid.tel-personen { grid-template-columns:3fr 1fr; }
  .aanvr-edit-grid.one-col { grid-template-columns:1fr; }
  .aanvr-fg label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); display:block; margin-bottom:.3rem; }
  .aanvr-fg input, .aanvr-fg select { width:100%; padding:.5rem .7rem; border:1px solid var(--border); border-radius:8px; font-size:.9rem; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; }
  .aanvr-fg input:focus, .aanvr-fg select:focus { border-color:var(--accent); outline:none; }
  .aanvr-kosten-edit { margin:.6rem 0; }
  .aanvr-kosten-row { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--border); font-size:.88rem; flex-wrap:nowrap; }
  .aanvr-kosten-row:last-child { border-bottom:none; }
  .aanvr-kosten-row .omschr { flex:1; color:var(--muted); min-width:0; overflow-wrap:break-word; word-break:break-word; }
  .aanvr-kosten-row .bedrag-wrap { display:flex; align-items:center; gap:.25rem; flex-shrink:0; white-space:nowrap; min-width:100px; }
  .aanvr-kosten-row input[type=number] { width:92px; padding:.3rem .5rem; border:1px solid var(--border); border-radius:6px; font-size:.88rem; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; }
  .aanvr-kosten-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
  .aanvr-edit-actions { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
  .aanvr-toggle-btn { background:none; border:none; font-size:.75rem; color:var(--accent); cursor:pointer; text-decoration:underline; padding:0; font-family:'DM Sans',sans-serif; }

  /* px hover highlight */

  /* Floating prijs popup */
  #pxPopup {
    position:fixed; z-index:600; background:var(--bg); border:1px solid var(--accent-lt);
    border-radius:14px; box-shadow:0 8px 36px rgba(0,0,0,.16);
    padding:1.1rem 1.2rem 1rem; min-width:230px; display:none; pointer-events:auto;
    animation:modalIn .15s ease;
  }
  #pxPopup.open { display:block; }
  @media(max-width:768px){
    #pxPopup.open {
      left:50% !important; top:50% !important;
      transform:translate(-50%,-50%) !important;
      width:calc(100vw - 2.4rem); max-width:360px;
    }
  }
  #pxPopup .pp-close { position:absolute; top:.55rem; right:.75rem; background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:.15rem .3rem; }
  #pxPopup .pp-close:hover { color:var(--text); }
  #pxPopup .pp-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); font-weight:600; margin-bottom:.3rem; }
  #pxPopup .pp-period { font-size:.95rem; font-weight:500; color:var(--text); margin-bottom:.7rem; }
  #pxPopup .pp-nights { font-size:.8rem; color:var(--muted); margin-top:-.5rem; margin-bottom:.7rem; }
  #pxPopup input[type=number] {
    width:100%; padding:.6rem .8rem; border:1px solid var(--border); border-radius:9px;
    font-size:1.05rem; font-family:'DM Sans',sans-serif; color:var(--text); background:var(--bg2);
    outline:none; margin-bottom:.6rem;
  }
  #pxPopup input[type=number]:focus { border-color:var(--accent); background:#fff; }
  #pxPopup .pp-actions { display:flex; gap:.5rem; }
  #pxPopup .pp-actions .btn { flex:1; padding:.55rem; font-size:.82rem; justify-content:center; }

  @media(max-width:700px){
    .aanvr-card { max-width:100%; }
    /* Compacte rij: acties wrappen naar volle breedte onder de tekst,
       vier gelijke 44px-knoppen naast elkaar */
    .aanvr-row { flex-wrap:wrap; }
    .aanvr-acties { width:100%; }
    .aanvr-icon-btn { flex:1; width:auto; height:44px; }
    .aanvr-kosten-row input[type=checkbox] { width:22px; height:22px; }
    .aanvr-kosten-row { padding:.45rem 0; }
    .aanvr-periode-extra { display:none; }
    .aanvr-edit-grid { grid-template-columns:1fr; }
    /* Telefoon dominant, personen compact ernaast (past prima op mobiel) */
    .aanvr-edit-grid.tel-personen { grid-template-columns:2fr 1fr; }
    .aanvr-edit-grid .aanvr-fg { grid-column:auto !important; }
    .aanvr-edit-grid.cols3 { grid-template-columns:1fr 1fr; }
  }

  /* Bookings list */
  .booking-list { display:flex; flex-direction:column; gap:.6rem; max-width:820px; }
  .booking-item {
    display:flex; flex-direction:column; align-items:stretch;
    background:var(--bg); border:1px solid var(--border);
    border-radius:10px; border-left:4px solid var(--accent-lt);
    box-shadow:0 1px 3px rgba(0,0,0,.03);
    transition:border-left-color .15s, box-shadow .15s;
  }
  .booking-item:hover { border-left-color:var(--accent); box-shadow:0 3px 10px rgba(0,0,0,.06); }
  .kosten-item {
    flex-direction:row; flex-wrap:wrap; justify-content:space-between;
    align-items:center; padding:.9rem 1.2rem; gap:.8rem;
  }

  /* Boekingsinstellingen: subgroepen minimale verblijfsduur */
  .bi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.2rem; }
  .bi-subgroup {
    border:1px solid var(--border); border-radius:var(--r);
    background:var(--bg2); padding:1.1rem 1.2rem;
    display:flex; flex-direction:column; gap:.9rem;
  }
  .bi-subgroup-title { font-weight:500; font-size:1rem; color:var(--text); display:flex; align-items:center; }
  @media(max-width:900px){
    .bi-grid { grid-template-columns:1fr; }
  }
  .bk-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:.9rem 1.2rem; gap:.8rem; cursor:pointer;
  }
  .bk-row-left { flex:1; min-width:0; }
  .bk-row-right { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
  .bk-chevron { transition:transform .2s; flex-shrink:0; }
  .booking-item-dates { font-size:1rem; font-weight:600; color:var(--text); white-space:nowrap; }
  .booking-item-meta { font-size:.95rem; color:var(--muted); margin-top:.2rem; line-height:1.5; }
  .booking-item-meta strong { font-weight:700; color:var(--text); font-size:1.05rem; }
  .bk-status {
    display:inline-block; font-size:.62rem; font-weight:600; padding:.15rem .5rem;
    border-radius:50px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  }
  .bk-status-upcoming { background:#ecf6f0; color:#2e7d32; }
  .bk-status-active { background:#fff3e0; color:#e65100; }
  .bk-status-past { background:var(--bg3); color:var(--muted); }
  .bk-detail {
    display:none; border-top:1px solid var(--border); background:var(--bg2);
    padding:1.2rem 1.4rem;
  }
  .bk-detail.open { display:block; }
  /* Binnen de detail-modal: acties als nette, aantikbare knoppenlijst */
  #bkDetailBody .bk-actions { margin-top:1.2rem; }
  #bkDetailBody .bk-action-btn { flex:1 1 auto; justify-content:center; min-height:44px; }
  @media(max-width:700px){
    #bkDetailBody .bk-actions { flex-direction:column; }
    #bkDetailBody .bk-action-btn { width:100%; }
    #bkDetailBody > div[style*="gap:2rem"] { gap:1.2rem !important; }
  }
  .bk-detail-label {
    font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--muted); margin-bottom:.5rem; font-weight:600;
  }
  .bk-actions {
    border-top:1px solid var(--border); margin-top:1rem; padding-top:.8rem;
    display:flex; gap:.4rem; flex-wrap:wrap;
  }
  .bk-action-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.88rem; padding:.55rem 1.1rem; border-radius:8px;
    background:var(--bg); border:1px solid var(--border); color:var(--text);
    cursor:pointer; font-family:inherit; transition:background .15s, border-color .15s;
  }
  .bk-action-btn:hover { background:var(--bg3); border-color:var(--accent-lt); }
  .bk-action-btn svg { flex-shrink:0; width:16px; height:16px; }
  .bk-action-danger { color:var(--danger); border-color:#e0c0c0; }
  .bk-action-danger:hover { background:#fdf0f0; border-color:var(--danger); }
  .badge { display:inline-block; padding:.2rem .6rem; border-radius:50px; font-size:.7rem; font-weight:500; }
  .badge-bezet { background:#ecf3f0; color:var(--accent); }
  .badge-beschikbaar { background:#f0f7f2; color:var(--sage); }

  /* ── STATS ── */
  .stats-export-row { display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem; flex-wrap:wrap; }
  .stats-export-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .stats-export-btn { display:inline-flex; align-items:center; gap:.45rem; }
  .stats-export-btn svg { flex-shrink:0; }
  .stats-filter-row { display:flex; gap:1.5rem; margin-bottom:1.5rem; flex-wrap:wrap; align-items:flex-start; }
  .stats-filter-group { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
  .stats-filter-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .stats-tabs { display:flex; gap:.35rem; flex-wrap:wrap; }
  .stats-tab {
    background:var(--bg2); border:1px solid var(--border); border-radius:50px;
    padding:.4rem .85rem; font-size:.88rem; color:var(--muted); cursor:pointer;
    font-family:'DM Sans',sans-serif; transition:all .15s;
  }
  .stats-tab:hover { border-color:var(--accent); color:var(--accent); }
  .stats-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:500; }
  .stats-toggle-label {
    display:flex; align-items:center; gap:.6rem; cursor:pointer;
    font-size:.88rem; color:var(--muted); font-weight:400; user-select:none;
    margin-top:.3rem;
  }
  .stats-toggle-label input { display:none; }
  .stats-toggle-slider {
    width:38px; height:22px; background:var(--border); border-radius:11px;
    position:relative; transition:background .2s; flex-shrink:0;
  }
  .stats-toggle-slider::after {
    content:''; position:absolute; top:3px; left:3px;
    width:16px; height:16px; background:#fff; border-radius:50%;
    transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  .stats-toggle-label input:checked + .stats-toggle-slider { background:var(--accent); }
  .stats-toggle-label input:checked + .stats-toggle-slider::after { transform:translateX(16px); }
  .stats-section-title {
    font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text); font-weight:600; margin-bottom:1.2rem; margin-top:2.5rem;
    padding-top:2rem; border-top:2px solid var(--border);
  }
  .stats-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
  .stat-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; text-align:center; transition:transform .2s, box-shadow .2s; }
  .stat-box:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.06); }
  .stat-box-num { font-family:'DM Sans',sans-serif; font-size:3rem; font-weight:300; color:var(--text); line-height:1; white-space:nowrap; }
  .stat-box-num.stat-box-omzet { font-size:2.4rem; }
  /* Lange getallen (10.000+) kleiner zodat ze in het vak blijven passen */
  .stat-box-num.num-lg { font-size:2.2rem; }
  .stat-box-num.num-xl { font-size:1.65rem; }
  .stat-box-label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; font-weight:500; }
  /* Airbnb rood + Website groen */
  .stat-box.stat-box-airbnb { background:#fff0f0; border-color:#ffb8b8; }
  .stat-box.stat-box-airbnb .stat-box-num { color:#ff5a5f; }
  .stat-box.stat-box-airbnb .stat-box-label { color:#d44a4f; }
  .stat-box.stat-box-website { background:#eff7f1; border-color:#b5d4be; }
  .stat-box.stat-box-website .stat-box-num { color:var(--sage); }
  .stat-box.stat-box-website .stat-box-label { color:#5d7b65; }
  /* Card titel binnen statistieken — groter */
  .stat-card-title { font-size:1.3rem; font-weight:400; margin-bottom:1.4rem; color:var(--text); gap:.7rem; }
  .stat-card-title svg { width:22px; height:22px; }
  .stat-chart { display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:1rem; overflow-x:auto; overflow-y:hidden; }
  .stat-omzet-card .stat-chart { height:auto; gap:0; overflow-x:visible; display:block; }
  .stat-chart-vertical { display:flex; align-items:flex-end; gap:8px; height:200px; overflow-x:auto; overflow-y:hidden; }
  .stat-bar-wrap { flex:0 0 auto; min-width:20px; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
  .stat-omzet-card .stat-bar-wrap { min-width:50px; gap:6px; }
  .stat-bar { width:100%; background:var(--accent-lt); border-radius:4px 4px 0 0; min-height:2px; transition:height .3s; position:relative; }
  .stat-bar:hover { background:var(--accent); }
  /* Omzet per maand staaf: groen (eigen website) zodat het matcht met de legenda */
  .stat-omzet-card .stat-bar { background:var(--sage); }
  .stat-omzet-card .stat-bar:hover { background:#7a8f80; }
  .stat-bar-label { font-size:.6rem; color:var(--muted); text-align:center; white-space:nowrap; }
  .stat-omzet-card .stat-bar-label { font-size:.92rem; font-weight:500; color:var(--text); text-transform:capitalize; }
  .stat-bar-val { font-size:.65rem; color:var(--accent); font-weight:500; }
  .stat-omzet-card .stat-bar-val { font-size:.95rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
  /* Horizontale bars (mobiele omzetgrafiek) — standaard verborgen op desktop */
  .stat-chart-hbars { display:none; flex-direction:column; gap:.55rem; margin-top:1rem; }
  .stat-hbar-row { display:flex; align-items:center; gap:.7rem; cursor:pointer; }
  .stat-hbar-lbl { flex:0 0 2.6rem; font-size:1rem; font-weight:500; color:var(--muted); }
  .stat-hbar-row.active .stat-hbar-lbl { color:var(--accent); font-weight:600; }
  .stat-hbar-track { flex:1 1 auto; height:1.5rem; background:var(--bg3); border-radius:8px; overflow:hidden; min-width:0; }
  .stat-hbar-fill { height:100%; background:var(--sage); border-radius:8px; min-width:2px; position:relative; transition:width .3s; }
  .stat-hbar-row.active .stat-hbar-fill { background:#7a8f80; }
  .stat-hbar-extern { position:absolute; top:0; left:0; height:100%; background:#ff5a5f; opacity:.7; border-radius:8px 0 0 8px; }
  .stat-hbar-val { flex:0 0 auto; min-width:3.8rem; text-align:right; font-size:1rem; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
  .stat-table { width:100%; border-collapse:collapse; font-size:1rem; }
  .stat-table th { text-align:left; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.6rem .8rem; border-bottom:1px solid var(--border); font-weight:500; }
  .stat-table td { padding:.75rem .8rem; border-bottom:1px solid var(--border); color:var(--text); font-weight:400; }
  .stat-table tr:last-child td { border-bottom:none; }
  .stat-table tr:hover td { background:var(--bg2); }
  .device-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; margin-top:.5rem; }
  .device-desktop { background:var(--accent); }
  .device-mobiel  { background:var(--accent-lt); }
  .device-tablet  { background:var(--sage); }
  .device-legend  { display:flex; gap:1.2rem; margin-top:.6rem; flex-wrap:wrap; }
  .device-leg     { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted); font-weight:300; }
  .device-dot     { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .flag           { font-size:1.2rem; }

  /* Jaarvergelijking: dubbele bars + delta badges */
  .stat-bar-group {
    display:flex; gap:3px; align-items:flex-end; width:100%; height:100%;
  }
  .stat-bar-group .stat-bar { flex:1; }
  .stat-bar-prev {
    background:var(--border) !important; opacity:.6;
  }
  .stat-bar-prev:hover { opacity:.8 !important; }
  .stat-delta {
    font-size:.82rem; font-weight:600; margin-top:.35rem;
    padding:.15rem .5rem; border-radius:50px; display:inline-block;
  }
  .stat-delta-up { color:#2d6a3e; background:#e0f0e4; }
  .stat-delta-down { color:#8b2e2e; background:#f5e0e0; }
  .stat-delta-neutral { color:var(--muted); background:var(--bg2); }

  @media(max-width:700px){
    .stats-overview{grid-template-columns:repeat(2,1fr);}
    /* Meer binnenruimte vrijmaken zodat ook 5-cijferige getallen passen */
    .stat-box { padding:1.3rem .8rem; }
    .stat-box-num.num-lg { font-size:1.95rem; }
    .stat-box-num.num-xl { font-size:1.45rem; }
    .stat-card-title { font-size:1.1rem; }
    /* Op mobiel: verticale grafiek verbergen, horizontale bars tonen */
    .stat-omzet-card .stat-chart-vertical { display:none; }
    .stat-omzet-card .stat-chart-hbars { display:flex; }
  }

  /* ── DASHBOARD ── */
  .dash-greeting {
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:1rem; margin-bottom:2rem; flex-wrap:wrap;
  }
  .dash-greeting-title {
    font-family:'DM Sans',sans-serif; font-size:2.65rem;
    font-weight:300; color:var(--text); line-height:1; letter-spacing:-.01em;
  }
  .dash-greeting-title em {
    font-style:italic; color:var(--accent); font-weight:400;
  }
  .dash-greeting-sub {
    font-family:'DM Sans',sans-serif; font-size:1.75rem;
    letter-spacing:.06em; color:var(--accent); margin-top:.3rem; font-weight:400;
  }
  .dash-greeting-date {
    font-size:.92rem; color:var(--muted); font-weight:400; font-variant-numeric:tabular-nums;
    padding:.55rem 1.1rem; background:var(--bg); border:1px solid var(--border);
    border-radius:50px;
  }

  /* KPI cards — kleurrijke gradient kaarten met witte tekst, lichte tinten */
  .dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.8rem; }
  .kpi-card {
    /* Kleuren per kaart via custom properties — lichte kaarten (zand/salie)
       krijgen donkere tekst, donkere kaarten (diepgroen/leisteenblauw) wit. */
    --kpi-bg:linear-gradient(140deg, #20493c 0%, #2d6150 100%);
    --kpi-fg:#fff;
    --kpi-fg-soft:rgba(255,255,255,.85);
    --kpi-deco:rgba(255,255,255,.07);
    --kpi-shadow:32,73,60;
    border-radius:var(--r); padding:1.8rem 1.7rem; position:relative; overflow:hidden;
    color:var(--kpi-fg); transition:transform .2s, box-shadow .2s;
    background:var(--kpi-bg);
    box-shadow:0 6px 22px rgba(var(--kpi-shadow),.22);
  }
  .kpi-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(var(--kpi-shadow),.32); }
  .kpi-card.kpi-sage {
    --kpi-bg:linear-gradient(140deg, #d3d9c9 0%, #c4ccb6 100%);
    --kpi-fg:#3d5140;
    --kpi-fg-soft:#5c6f5c;
    --kpi-deco:rgba(61,81,64,.06);
    --kpi-shadow:150,163,141;
  }
  .kpi-card.kpi-blue {
    --kpi-bg:linear-gradient(140deg, #3c6382 0%, #4d7899 100%);
    --kpi-fg:#fff;
    --kpi-fg-soft:rgba(255,255,255,.85);
    --kpi-deco:rgba(255,255,255,.08);
    --kpi-shadow:60,99,130;
  }
  .kpi-card.kpi-rose {
    --kpi-bg:linear-gradient(140deg, #f4ebd9 0%, #eaddc2 100%);
    --kpi-fg:#6b5738;
    --kpi-fg-soft:#8b7554;
    --kpi-deco:rgba(107,87,56,.05);
    --kpi-shadow:196,176,140;
  }

  /* Decoratieve golf onderin (zachte ellips) */
  .kpi-card::after {
    content:''; position:absolute; left:-15%; bottom:-55%;
    width:130%; height:100%; border-radius:50%;
    background:var(--kpi-deco); pointer-events:none;
  }
  .kpi-icon {
    position:absolute; top:1.6rem; right:1.6rem; width:32px; height:32px;
    stroke:var(--kpi-fg); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
    opacity:.5; z-index:1;
  }
  .kpi-label {
    font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--kpi-fg-soft); font-weight:600; margin-bottom:.95rem; position:relative; z-index:1;
  }
  .kpi-value {
    font-family:'DM Sans',sans-serif; font-size:3.4rem; font-weight:300;
    color:var(--kpi-fg); line-height:1; font-variant-numeric:tabular-nums; position:relative; z-index:1;
    letter-spacing:-.02em;
  }
  .kpi-value .kpi-currency {
    font-size:2.4rem; color:var(--kpi-fg-soft); margin-right:.22rem; vertical-align:.12rem;
    font-weight:400;
  }
  .kpi-sub {
    font-size:1.05rem; color:var(--kpi-fg-soft); margin-top:.7rem;
    font-weight:400; position:relative; z-index:1; line-height:1.5;
  }
  .kpi-sub strong { color:var(--kpi-fg); font-weight:600; }

  /* Dashboard 2-koloms layout */
  .dash-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:1.5rem; align-items:start; }
  .dash-grid > * { min-width:0; }
  @media(max-width:1100px){ .dash-grid { grid-template-columns:1fr; } }

  /* Card-titels op dashboard groter */
  .admin-page#page-kalender .card-title {
    font-size:1.15rem; font-weight:500; margin-bottom:1.4rem; color:var(--text);
  }
  .admin-page#page-kalender .card-title svg { width:22px; height:22px; }

  /* Kalender maand-label groter */
  .admin-page#page-kalender .admin-cal-month-label {
    font-size:1.85rem; color:var(--text); font-weight:400;
  }
  .admin-page#page-kalender .admin-cal-nav button {
    width:40px; height:40px; font-size:1.4rem;
  }

  /* Kalender cellen — groter en met meer ruimte */
  .admin-page#page-kalender .acd {
    min-height:95px; padding:.7rem .5rem; gap:4px;
  }
  .admin-page#page-kalender .acd .acd-num {
    font-size:1.25rem; font-weight:500;
  }
  .admin-page#page-kalender .acd .acd-price {
    font-size:.85rem; font-weight:500;
  }
  .admin-page#page-kalender .acd .acd-status {
    font-size:.82rem; font-weight:400;
  }
  .admin-page#page-kalender .acw {
    font-size:.72rem; padding:.55rem 0; font-weight:500;
  }

  /* Sterkere kalender-kleuren + today/weekend — dashboard specifiek */
  /* Op dashboard zijn alleen bezet-cellen klikbaar; vrije/lege dagen zijn niet-interactief */
  .admin-page#page-kalender .acd { cursor:default; }
  .admin-page#page-kalender .acd:hover { border-color:var(--border); background:var(--bg2); }
  .admin-page#page-kalender .acd.status-beschikbaar:hover { background:#d4eadb; }
  .admin-page#page-kalender .acd.status-bezet { cursor:pointer; }
  .admin-page#page-kalender .acd.status-bezet:hover { border-color:rgba(255,255,255,.5); filter:brightness(1.08); }
  .admin-page#page-kalender .acd.status-beschikbaar { background:#dceee2; border-color:#a8d4b4; }
  /* Bezet achtergrond+border worden per-cel via inline style ingesteld (één tint per boeking) */
  .admin-page#page-kalender .acd.status-bezet .acd-status { color:#fff; font-weight:500; }
  .admin-page#page-kalender .acd.status-bezet .acd-price { color:rgba(255,255,255,.9); }
  .admin-page#page-kalender .acd.status-bezet .acd-num { color:#fff; }
  .acd.is-today {
    box-shadow:inset 0 0 0 2.5px var(--accent);
  }
  .acd.is-today:not(.status-bezet) { background:var(--bg) !important; }
  .acd.is-today .acd-num {
    color:#fff; font-weight:600;
    background:var(--accent); width:30px; height:30px; line-height:30px;
    border-radius:50%; display:inline-block; text-align:center;
    box-shadow:0 2px 6px rgba(127,168,155,.4);
  }
  .acd.is-weekend { background:#faf6ef; }
  .admin-page#page-kalender .acd.status-beschikbaar.is-weekend { background:#d0e8d6; }

  /* ── Rustige dashboard-kalender: zachte vlakken, geen kaders, geen
        weekendtint. Namen staan in het boekingsoverzicht en de detailmodal;
        in de cel volstaat een kruisje. ── */
  .admin-page#page-kalender .admin-cal-grid { gap:6px; }
  .admin-page#page-kalender .acd,
  .admin-page#page-kalender .acd.is-weekend,
  .admin-page#page-kalender .acd:hover {
    background:#f6f4ee; border-color:transparent; border-radius:12px;
  }
  .admin-page#page-kalender .acd { min-height:80px; gap:5px; }
  .admin-page#page-kalender .acd.empty { background:transparent; }
  .admin-page#page-kalender .acd .acd-num { font-weight:400; }

  .admin-page#page-kalender .acd.status-beschikbaar,
  .admin-page#page-kalender .acd.status-beschikbaar.is-weekend,
  .admin-page#page-kalender .acd.status-beschikbaar:hover {
    background:#d9e9de; border-color:transparent;
  }
  .admin-page#page-kalender .acd.status-beschikbaar .acd-num { color:#2c4735; }
  .admin-page#page-kalender .acd.status-beschikbaar .acd-price { color:#48765a; font-weight:500; }

  /* Bezet — pasteltint per boeking komt uit de inline style, tekstkleur uit --acd-fg */
  .admin-page#page-kalender .acd.status-bezet .acd-num,
  .admin-page#page-kalender .acd.status-bezet .acd-status,
  .admin-page#page-kalender .acd.status-bezet .acd-price {
    color:var(--acd-fg, #8f2f2f); font-weight:500;
  }
  .admin-page#page-kalender .acd.status-bezet:hover { border-color:transparent; filter:brightness(.98); }
  .admin-page#page-kalender .acd .acd-x { font-size:1.1rem; line-height:1; opacity:.9; }

  /* Vandaag — zacht goudvlak; op een bezette dag alleen een gouden rand */
  .admin-page#page-kalender .acd.is-today { box-shadow:none; }
  .admin-page#page-kalender .acd.is-today:not(.status-bezet) {
    background:var(--accent) !important; box-shadow:0 4px 14px rgba(200,180,126,.35);
  }
  .admin-page#page-kalender .acd.is-today:not(.status-bezet) .acd-num,
  .admin-page#page-kalender .acd.is-today:not(.status-bezet) .acd-price { color:#fff; }
  .admin-page#page-kalender .acd.is-today .acd-num {
    background:none; box-shadow:none; border-radius:0;
    width:auto; height:auto; line-height:1; display:block;
  }
  .admin-page#page-kalender .acd.is-today.status-bezet { box-shadow:inset 0 0 0 2px var(--accent); }

  /* Aankomende boekingen — kaarten met initialen-avatars */
  .huidig-card {
    background:linear-gradient(135deg, #4d6b52 0%, #6d8b72 100%);
    color:#fff; border:none;
    padding:1.5rem 1.6rem; position:relative; overflow:hidden;
    box-shadow:0 8px 24px rgba(77,107,82,.35);
  }
  .huidig-card::after {
    content:''; position:absolute; top:-30px; right:-30px;
    width:140px; height:140px; border-radius:50%;
    background:rgba(255,255,255,.1); pointer-events:none;
  }
  .huidig-label {
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(255,255,255,.9); font-weight:600; margin-bottom:.8rem; position:relative; z-index:1;
  }
  .huidig-naam {
    font-family:'DM Sans',sans-serif; font-size:1.9rem; font-weight:400;
    color:#fff; line-height:1.15; margin-bottom:.4rem; position:relative; z-index:1;
  }
  .huidig-periode {
    font-size:.92rem; color:rgba(255,255,255,.85); font-weight:400;
    margin-bottom:.7rem; position:relative; z-index:1;
  }
  .huidig-resterend {
    display:inline-block; padding:.4rem .9rem;
    background:rgba(255,255,255,.2); border-radius:50px;
    font-size:.85rem; font-weight:500; color:#fff; position:relative; z-index:1;
    backdrop-filter:blur(4px);
  }
  .upcoming-list { display:flex; flex-direction:column; gap:.8rem; }
  .upcoming-card {
    display:flex; gap:1rem; align-items:center;
    background:#ffffff; border:1px solid var(--border); border-radius:var(--r);
    padding:1rem 1.1rem; cursor:pointer; transition:all .25s ease;
  }
  .upcoming-chevron {
    flex-shrink:0; stroke:var(--border); stroke-width:2; fill:none;
    stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease;
    margin-left:auto;
  }
  .upcoming-card:hover .upcoming-chevron { stroke:var(--accent); }
  .upcoming-card:hover {
    border-color:#c8b47e; background:var(--bg); transform:translateX(-3px) translateY(-1px);
    box-shadow:0 6px 20px rgba(200,180,126,.15);
  }
  .upcoming-avatar {
    flex-shrink:0; width:50px; height:50px; border-radius:50%;
    background:linear-gradient(135deg, #c8b47e 0%, #e0d4b0 100%);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:600; font-size:1.1rem; font-family:'DM Sans',sans-serif;
    box-shadow:0 3px 10px rgba(200,180,126,.25);
  }
  .upcoming-avatar.av-current {
    background:linear-gradient(135deg, #c8b47e 0%, #d4c898 100%);
    box-shadow:0 3px 10px rgba(200,180,126,.3);
  }
  .upcoming-avatar.av-1 { background:linear-gradient(135deg, #c8b47e 0%, #e0d4b0 100%); }
  .upcoming-avatar.av-2 { background:linear-gradient(135deg, #b8a872 0%, #d4c898 100%); }
  .upcoming-avatar.av-3 { background:linear-gradient(135deg, #d0be8a 0%, #e8dcc0 100%); }
  .upcoming-body { flex:1; min-width:0; }
  .upcoming-name {
    font-size:1.05rem; font-weight:500; color:var(--text); margin-bottom:.2rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .upcoming-dates { font-size:.85rem; color:var(--muted); font-weight:400; }
  .upcoming-meta { display:flex; gap:.55rem; margin-top:.55rem; flex-wrap:wrap; align-items:center; }
  .upcoming-badge {
    font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    padding:.25rem .65rem; border-radius:5px; font-weight:600;
  }
  .badge-today { background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(127,168,155,.3); }
  .badge-tomorrow { background:#ffe599; color:#7a5d00; }
  .badge-week { background:#dceee2; color:#4a7257; }
  .badge-current { background:var(--sage); color:#fff; box-shadow:0 2px 6px rgba(143,168,150,.3); }
  .upcoming-price {
    font-size:.92rem; color:var(--accent); font-weight:600;
    font-variant-numeric:tabular-nums; margin-left:auto;
  }
  .upcoming-empty { padding:2.5rem 1rem; text-align:center; color:var(--muted); font-size:.92rem; font-weight:300; }

  /* Omzettabel per maand */
  .revenue-tbl { width:100%; border-collapse:collapse; font-size:1rem; }
  .revenue-tbl th {
    text-align:left; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); padding:.85rem 1rem; border-bottom:2px solid var(--border);
    font-weight:600; background:var(--bg2);
  }
  .revenue-tbl th:first-child { border-radius:var(--r) 0 0 0; }
  .revenue-tbl th:last-child { border-radius:0 var(--r) 0 0; }
  .revenue-tbl th.num { text-align:right; }
  .revenue-tbl td {
    padding:.95rem 1rem; border-bottom:1px solid var(--border);
    font-weight:400; color:var(--text); font-variant-numeric:tabular-nums;
  }
  .revenue-tbl td.num { text-align:right; }
  .revenue-tbl tr:hover td { background:var(--bg2); }
  .revenue-tbl .rev-month {
    color:var(--text); font-weight:500; text-transform:capitalize;
    font-family:'DM Sans',sans-serif; font-size:1.15rem;
  }
  .revenue-tbl .rev-current { background:linear-gradient(90deg, #ecf3f0 0%, transparent 60%); }
  .revenue-tbl .rev-current:hover td { background:#ecf3f0 !important; }
  .revenue-tbl .rev-current .rev-month {
    color:var(--accent); position:relative;
  }
  .revenue-tbl .rev-current .rev-month::after {
    content:'NU'; color:#fff; background:var(--accent);
    font-size:.6rem; letter-spacing:.1em; padding:.15rem .4rem;
    border-radius:4px; margin-left:.55rem; vertical-align:.18em;
    font-family:'DM Sans',sans-serif; font-weight:700;
  }
  .revenue-tbl .rev-bar-cell { position:relative; min-width:160px; padding-bottom:1.3rem; }
  .revenue-tbl .rev-bar {
    position:absolute; left:1rem; right:1rem; bottom:.4rem; height:5px;
    background:var(--bg3); border-radius:3px; overflow:hidden;
  }
  .revenue-tbl .rev-bar-fill {
    position:absolute; left:0; top:0; bottom:0;
    background:linear-gradient(90deg, var(--accent-lt) 0%, var(--accent) 100%);
    border-radius:3px; box-shadow:0 0 8px rgba(127,168,155,.3);
  }
  .revenue-tbl .rev-omzet { font-size:1.05rem; font-weight:500; color:var(--text); }
  .revenue-tbl tfoot td {
    border-top:2px solid var(--accent); border-bottom:none; padding:1.2rem 1rem;
    font-weight:600; color:var(--text); font-size:1.1rem;
    background:var(--bg2);
  }
  .revenue-tbl tfoot td:first-child {
    font-family:'DM Sans',sans-serif; font-size:1.3rem; font-weight:400;
    color:var(--accent);
  }
  .revenue-empty-msg { padding:1.5rem; text-align:center; color:var(--muted); font-size:.95rem; font-weight:300; }

  @media(max-width:900px){
    .dash-kpis { grid-template-columns:repeat(2,1fr); gap:.75rem; }
    .kpi-value { font-size:2.6rem; }
    .dash-greeting-title { font-size:2.05rem; }
  }
  @media(max-width:500px){
    .huis-specs-grid { grid-template-columns:1fr 1fr !important; }
    .h1-star-badge { display:block; margin-top:.3rem; width:fit-content; }
    .dash-kpis { gap:.55rem; }
    .kpi-card { padding:1.1rem .95rem; }
    .kpi-value { font-size:2.3rem; }
    .kpi-icon { width:21px; height:21px; top:1rem; right:.9rem; }
    .kpi-label { font-size:.68rem; margin-bottom:.6rem; letter-spacing:.12em; }
    .kpi-sub { font-size:.78rem; margin-top:.55rem; }
    .kpi-pct { font-size:1.5rem; }
    .dash-greeting { margin-bottom:1.2rem; }
    .dash-greeting-title { font-size:1.55rem; }
    .dash-greeting-sub { font-size:1.35rem; }
    .dash-greeting-date { font-size:.72rem; padding:.35rem .7rem; max-width:100%; white-space:nowrap; }
    .admin-cal-nav { gap:.5rem; margin-bottom:1rem; }
    .admin-cal-nav button { width:34px; height:34px; font-size:1.2rem; }
    .btn-vandaag { padding:.3rem .7rem !important; font-size:.7rem !important; }
    .admin-page#page-kalender .admin-cal-month-label { font-size:1.2rem; }
    .admin-page#page-kalender .admin-cal-grid { gap:2px; }
    .admin-page#page-kalender .acd { min-height:65px; padding:.3rem .15rem; border-radius:5px; }
    .admin-page#page-kalender .acd .acd-num { font-size:.95rem; }
    .admin-page#page-kalender .acd .acd-price { font-size:.55rem; }
    .admin-page#page-kalender .acd .acd-status { font-size:.5rem; }
    .admin-page#page-kalender .acd .acd-status.acd-x { font-size:.9rem; }
    .revenue-tbl { font-size:.92rem; }
    .revenue-tbl .rev-month { font-size:1rem; }
    .revenue-tbl td, .revenue-tbl th { padding:.65rem .55rem; }
    .revenue-tbl .rev-bar-cell { min-width:0; padding-bottom:1rem; }
    .revenue-tbl .rev-bar { left:.55rem; right:.55rem; }
  }

  /* ── DASHBOARD WIDGETS (v2) ── */

  /* Trial notice */
  .dash-trial-notice {
    background:var(--bg); border:2px solid var(--casa-green); border-radius:var(--r);
    padding:1.4rem 1.8rem; margin-bottom:1.5rem;
    display:flex; align-items:center; justify-content:flex-start; gap:1.5rem; flex-wrap:wrap;
  }
  .dash-trial-notice.expired { border-color:#dc2626; }
  .dash-trial-title { font-weight:600; font-size:1.25rem; color:var(--text); margin-bottom:.3rem; }
  .dash-trial-sub { font-size:1.05rem; color:var(--muted); }
  .dash-trial-btn {
    white-space:nowrap; padding:.75rem 1.6rem; font-size:1rem;
    background:var(--casa-green); border:1px solid var(--casa-green); color:#fff; font-weight:500;
    border-radius:8px; cursor:pointer; transition:background .15s;
    font-family:'DM Sans',sans-serif;
  }
  .dash-trial-btn:hover { background:var(--casa-green-dk); }

  /* Huidige gast bar */
  .dash-guest-bar {
    background:linear-gradient(135deg, #f7f3ec 0%, #f0ebe3 100%);
    border:1px solid var(--accent); border-radius:var(--r);
    padding:1.2rem 1.6rem; margin-bottom:1.8rem;
    display:flex; align-items:center; gap:1rem; cursor:pointer;
    transition:box-shadow .2s, transform .2s;
  }
  .dash-guest-bar:hover { box-shadow:0 4px 16px rgba(200,180,126,.2); transform:translateY(-1px); }
  .dash-guest-pulse {
    width:12px; height:12px; border-radius:50%; background:#56b066; flex-shrink:0;
    animation:dashPulse 2s ease infinite;
  }
  @keyframes dashPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
  .dash-guest-info { flex:1; min-width:0; }
  .dash-guest-label {
    font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
    color:var(--accent); font-weight:600; margin-bottom:.2rem;
  }
  .dash-guest-name { font-size:1.25rem; font-weight:500; color:var(--text); }
  .dash-guest-dates { font-size:1rem; color:var(--muted); margin-top:.15rem; }
  .dash-guest-remaining {
    padding:.45rem 1rem; background:var(--accent); color:#fff;
    border-radius:50px; font-size:.85rem; font-weight:500; flex-shrink:0;
    text-align:center; line-height:1.3;
  }
  .dash-guest-chevron {
    width:20px; height:20px; stroke:var(--accent); fill:none;
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.5; flex-shrink:0;
  }

  /* Widget grid */
  .dash-widgets {
    display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start;
  }
  .dash-widget {
    background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
    padding:1.6rem 1.8rem; transition:box-shadow .25s;
  }
  .dash-widget:hover { box-shadow:0 4px 20px rgba(0,0,0,.06); }
  .dash-widget-wide { grid-column:1 / -1; }

  /* Widget header */
  .dash-widget-hdr {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.2rem; gap:.8rem; flex-wrap:wrap;
  }
  .dash-widget-title {
    font-family:'DM Sans',sans-serif; font-size:1.35rem; font-weight:600;
    color:var(--text); display:flex; align-items:center; gap:.55rem;
    letter-spacing:-.01em;
  }
  .dash-widget-title svg {
    width:22px; height:22px; stroke:var(--accent); fill:none;
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
  }
  .dash-widget-year { color:var(--muted); font-weight:300; margin-left:.3rem; }
  .dash-widget-badge {
    font-size:.85rem; background:var(--accent); color:#fff;
    border-radius:50px; padding:.2rem .75rem; font-weight:600; min-width:28px; text-align:center;
  }
  .dash-widget-count {
    font-family:'DM Sans',sans-serif; font-size:1.6rem; font-weight:400; color:var(--accent);
  }
  .dash-widget-sub { font-size:.95rem; color:var(--muted); font-weight:400; }
  .dash-widget-body { min-height:0; }
  .dash-widget-loading { color:var(--muted); font-size:1rem; font-weight:300; }

  /* Widget footer */
  .dash-widget-footer { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border); text-align:right; }
  .dash-widget-link {
    font-size:1rem; color:var(--accent); cursor:pointer; font-weight:500;
    text-decoration:none; transition:color .2s;
  }
  .dash-widget-link:hover { color:var(--text); text-decoration:underline; }

  /* Aanvragen items in dashboard */
  .dash-req-item {
    display:flex; align-items:center; gap:1rem;
    padding:.9rem 0; border-bottom:1px solid var(--border);
  }
  .dash-req-item:last-child { border-bottom:none; padding-bottom:0; }
  .dash-req-item:first-child { padding-top:0; }
  .dash-req-avatar {
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem; font-weight:600; flex-shrink:0;
  }
  .dash-req-info { flex:1; min-width:0; }
  .dash-req-name { font-size:1.05rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dash-req-detail { font-size:.95rem; color:var(--muted); margin-top:.2rem; }
  .dash-req-status {
    font-size:.8rem; padding:.25rem .75rem; border-radius:50px; font-weight:500;
    white-space:nowrap; flex-shrink:0;
  }
  .dash-req-status.st-nieuw { background:#fef3cd; color:#856404; }
  .dash-req-status.st-behandeling { background:#d4edda; color:#155724; }
  .dash-req-empty { padding:2rem 0; text-align:center; color:var(--muted); font-size:1rem; font-weight:300; }
  .dash-req-clickable {
    cursor:pointer; transition:background .15s, transform .15s; border-radius:8px;
    margin:0 -.6rem; padding-left:.6rem; padding-right:.6rem;
  }
  .dash-req-clickable:hover { background:var(--bg2); transform:translateX(2px); }

  /* Taken items */
  .dash-todo-item {
    display:flex; align-items:center; gap:.8rem; padding:.65rem 0;
  }
  .dash-todo-check {
    width:24px; height:24px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .15s;
  }
  .dash-todo-check.done {
    background:var(--sage); border:2px solid var(--sage);
  }
  .dash-todo-check.done:hover { background:#6d8b72; border-color:#6d8b72; }
  .dash-todo-check.done svg { stroke:#fff; width:14px; height:14px; }
  .dash-todo-check.open {
    border:2px solid var(--border); background:none;
  }
  .dash-todo-check.open:hover { border-color:var(--accent); background:var(--bg2); }
  .dash-todo-text { flex:1; font-size:1.05rem; font-weight:400; color:var(--text); }
  .dash-todo-text.done { text-decoration:line-through; color:var(--muted); }

  /* Dismiss/verberg knop */
  .dash-todo-dismiss {
    width:22px; height:22px; border-radius:50%; border:none;
    background:none; color:var(--border); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .15s; padding:0; margin-left:.3rem;
  }
  .dash-todo-dismiss:hover { color:var(--danger); background:rgba(217,83,79,.08); }
  .dash-todo-restore {
    text-align:center; padding:.8rem 0 .2rem; font-size:.9rem;
    color:var(--accent); cursor:pointer; font-weight:500;
    transition:color .15s;
  }
  .dash-todo-restore:hover { color:var(--text); text-decoration:underline; }

  /* Revenue bars (v2 — staafgrafiek) */
  .dash-rev-bars {
    display:flex; align-items:flex-end; gap:8px; padding-top:10px;
  }
  .dash-rev-hbars { display:none; }
  .dash-rev-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
  .dash-rev-bar {
    border-radius:5px 5px 0 0; width:100%; min-height:6px;
    transition:background .3s;
  }
  .dash-rev-bar.active { background:var(--accent); }
  .dash-rev-bar.past { background:var(--sage); }
  .dash-rev-bar.future { background:var(--border); }
  .dash-rev-bar:hover { filter:brightness(1.1); }
  .dash-rev-lbl { font-size:1.05rem; color:var(--muted); font-weight:400; }
  .dash-rev-val { font-size:1.1rem; font-weight:600; color:var(--text); white-space:nowrap; }
  .dash-rev-summary {
    display:flex; gap:1.5rem; margin-top:1.5rem; padding-top:1.2rem;
    border-top:1px solid var(--border); flex-wrap:wrap;
  }
  .dash-rev-stat { flex:1; text-align:center; min-width:100px; }
  .dash-rev-stat-val {
    font-family:'DM Sans',sans-serif; font-size:2rem; font-weight:600; color:var(--text);
  }
  .dash-rev-stat-lbl { font-size:1.05rem; color:var(--muted); margin-top:.2rem; }

  /* Kalender legend */
  .btn-vandaag {
    margin-left:auto; background:none; border:1px solid var(--border);
    border-radius:50px; padding:.4rem 1rem; font-size:.82rem; color:var(--muted);
    cursor:pointer; font-family:'DM Sans',sans-serif; transition:border-color .2s, color .2s;
  }
  .btn-vandaag:hover { border-color:var(--accent); color:var(--accent); }
  .dash-cal-legend {
    display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.2rem;
    padding-top:1rem; border-top:1px solid var(--border);
  }
  .dash-cal-legend-item { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--muted); font-weight:300; }
  .dash-legend-dot { width:12px; height:12px; border-radius:3px; }
  .dot-available { background:#d9e9de; border:1px solid #8ab39a; }
  .dot-booked { background:#f0cfcf; border:1px solid #c98d8d; }

  /* Snelkoppelingen */
  .dash-quicklinks { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
  .dash-qlink {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    padding:1.1rem .6rem; border-radius:var(--r);
    background:var(--bg2); border:1px solid var(--border);
    cursor:pointer; transition:all .2s; text-decoration:none;
  }
  .dash-qlink:hover { border-color:var(--accent); background:#f5f0e7; }
  .dash-qlink svg {
    width:24px; height:24px; stroke:var(--accent); fill:none;
    stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  }
  .dash-qlink span { font-size:.9rem; color:var(--text); font-weight:500; text-align:center; line-height:1.3; }

  /* KPI pct suffix */
  .kpi-pct { font-size:1.7rem; color:var(--kpi-fg-soft); margin-left:.15rem; opacity:.85; }

  /* Dashboard widget responsive */
  @media(max-width:1100px){
    .dash-widgets { grid-template-columns:1fr; max-width:100%; overflow:hidden; }
    /* Taken-widget op mobiel onderaan, net boven de Snelkoppelingen.
       Snelkoppelingen is de laatste .dash-widget-wide en krijgt een hogere
       order zodat Taken er net vóór blijft. Overige widgets houden order:0. */
    .dash-widgets .dash-widget-taken { order:99; }
    .dash-widgets .dash-widget-wide:last-child { order:100; }
  }
  @media(max-width:900px){
    .dash-guest-remaining { font-size:.8rem; padding:.35rem .75rem; }
  }
  @media(max-width:500px){
    .dash-widget { padding:1rem .9rem; max-width:100%; box-sizing:border-box; overflow:hidden; }
    .dash-widget-title { font-size:1.25rem; }
    .dash-widget-body { max-width:100%; overflow-x:auto; }
    .dash-widget-footer { text-align:center; }
    .dash-widget-link { font-size:.9rem; display:block; }
    .dash-guest-bar { flex-wrap:wrap; gap:.4rem .7rem; padding:1rem; }
    .dash-guest-chevron { display:none; }
    .dash-guest-info { min-width:60%; }
    .dash-guest-name { font-size:1.1rem; }
    .dash-guest-remaining { margin-left:1.7rem; }
    .dash-rev-bars { gap:4px; }
    .dash-rev-val { font-size:.78rem; }
    .dash-rev-lbl { font-size:.78rem; }
    .dash-rev-summary { gap:.8rem; }
    .dash-rev-stat-val { font-size:1.4rem; }
    .admin-cal-grid { gap:2px; }
    .acd { min-height:52px; padding:.3rem .2rem; gap:1px; }
    .acd .acd-num { font-size:.85rem; }
    .acd .acd-price { font-size:.65rem; }
    .acd .acd-status { font-size:.6rem; }
    .admin-cal-month-label { font-size:1.4rem; }
    .admin-cal-nav button { width:36px; height:36px; }
    .upcoming-card { gap:.7rem; padding:.8rem; }
    .upcoming-avatar { width:40px; height:40px; font-size:.9rem; }
    .upcoming-chevron { width:16px; height:16px; }
    .dash-rev-bars { display:none; }
    .dash-rev-hbars { display:flex; flex-direction:column; gap:6px; }
    .dash-rev-row { display:flex; align-items:center; gap:8px; }
    .dash-rev-row-lbl { width:32px; font-size:.82rem; color:var(--muted); font-weight:500; flex-shrink:0; }
    .dash-rev-row-track { flex:1 1 auto; height:18px; background:var(--bg3); border-radius:9px; overflow:hidden; }
    .dash-rev-row-bar { height:100%; border-radius:9px; min-width:4px; transition:width .3s ease; }
    .dash-rev-row-bar.active { background:var(--accent); }
    .dash-rev-row-bar.past { background:var(--sage); }
    .dash-rev-row-bar.future { background:var(--border); }
    .dash-rev-row-val { font-size:1rem; font-weight:600; color:var(--text); min-width:70px; flex-shrink:0; text-align:right; font-variant-numeric:tabular-nums; }
    .dash-rev-col { min-width:0; }
    /* Takenlijst: afvinken, taaknaam en verbergknop op één regel */
    .dash-todo-item { gap:.4rem .6rem; align-items:center; }
    .dash-todo-check { flex:0 0 auto; }
    .dash-todo-text { flex:1 1 0; min-width:0; font-size:1rem; }
    .dash-todo-dismiss { flex:0 0 auto; margin-left:0; }
  }

  /* ── E-MAIL TEMPLATES ── */
  /* Voettekst-textarea wat ruimer */
  #page-email-templates #mail-footer { min-height:80px; line-height:1.5; }
  /* Code-stijl in placeholder-uitleg en blokjes */
  #page-email-templates code {
    background:var(--bg2); padding:.1rem .35rem; border-radius:4px;
    font-size:.85em; color:var(--accent); font-family:'SF Mono','Menlo',monospace;
  }
  /* Grotere teksten in e-mail templates pagina */
  #page-email-templates .page-sub { font-size:1.15rem !important; }
  #page-email-templates .card-body p { font-size:1.05rem !important; line-height:1.6 !important; }
  #page-email-templates .card-body small { font-size:.9rem !important; }
  #page-email-templates .card-toggle-title { font-size:1.35rem !important; }
  #page-email-templates .card-toggle-title span { font-size:.88rem !important; }
  #page-email-templates .card-body label { font-size:1.05rem !important; }
  #page-email-templates .card-body input,
  #page-email-templates .card-body textarea { font-size:1.05rem !important; }
  #page-email-templates > p { font-size:1.25rem !important; font-weight:600 !important; }

  /* ── VERTAAL-VLAGGETJES ── */
  .ws-tr-wrap { position:relative; width:100%; display:block; }
  .ws-tr-flags { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); display:flex; gap:.18rem; z-index:5; pointer-events:auto; }
  /* Voor textareas: vlaggen rechtsboven, niet centraal */
  .ws-tr-wrap textarea ~ .ws-tr-flags { top:.5rem; transform:none; }
  .ws-tr-flag {
    background:rgba(255,255,255,.85); border:1px solid var(--border); border-radius:7px;
    width:28px; height:28px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:.95rem; line-height:1; transition:all .15s; position:relative;
    backdrop-filter:blur(4px);
  }
  .ws-tr-flag:hover { background:#fff; border-color:var(--accent); transform:scale(1.08); }
  .ws-tr-flag.has-translation { border-color:var(--sage); background:#eef5f0; }
  .ws-tr-flag.has-translation::after {
    content:''; position:absolute; bottom:-2px; right:-2px;
    width:8px; height:8px; background:var(--sage); border-radius:50%;
    border:1.5px solid var(--bg);
  }
  /* Geef plek voor de vlaggetjes binnen het input */
  .ws-tr-wrap input[type="text"],
  .ws-tr-wrap input[type="search"],
  .ws-tr-wrap input[type="url"],
  .ws-tr-wrap input[type="tel"] { padding-right:44px; }
  .ws-tr-wrap textarea { padding-right:44px; }

  /* Wereldbol-knop (opent de vertaal-modal met alle talen) */
  .ws-tr-globe {
    background:rgba(255,255,255,.85); border:1px solid var(--border); border-radius:8px;
    width:30px; height:30px; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--muted); transition:all .15s; position:relative; backdrop-filter:blur(4px);
  }
  .ws-tr-globe:hover { background:#fff; border-color:var(--accent); color:var(--accent); transform:scale(1.08); }
  .ws-tr-globe.has-translation { border-color:var(--sage); background:#eef5f0; color:var(--sage); }
  .ws-tr-globe.has-translation::after {
    content:''; position:absolute; bottom:-2px; right:-2px;
    width:8px; height:8px; background:var(--sage); border-radius:50%;
    border:1.5px solid var(--bg);
  }

  /* Vertaal-modal */
  .ws-tr-modal-box { max-width:520px; }
  .ws-tr-orig-label { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:.2rem 0 .35rem; }
  .ws-tr-orig { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.7rem .85rem; font-size:.95rem; color:var(--text); margin-bottom:1.1rem; white-space:pre-wrap; word-break:break-word; }
  .ws-tr-lang-block { margin-bottom:.9rem; }
  .ws-tr-lang-label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.35rem; }
  .ws-tr-lang-input { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; font-size:16px; font-family:inherit; resize:vertical; min-height:44px; }
  .ws-tr-lang-input:focus { outline:none; border-color:var(--accent); }
  .ws-tr-status { text-align:right; font-size:.85rem; margin-top:.5rem; min-height:1.1em; }

  .ws-tr-popover {
    z-index:9999; background:#fff; border:1px solid var(--border); border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.18); width:380px; max-width:calc(100vw - 16px);
    overflow:hidden; animation:modalIn .15s ease;
  }
  .ws-tr-popover-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1rem; background:var(--bg2); border-bottom:1px solid var(--border);
  }
  .ws-tr-popover-title { display:flex; align-items:center; gap:.55rem; font-weight:500; font-size:.95rem; color:var(--text); }
  .ws-tr-close { background:none; border:none; font-size:1.05rem; cursor:pointer; color:var(--muted); padding:.2rem .4rem; line-height:1; }
  .ws-tr-close:hover { color:var(--text); }
  .ws-tr-popover-body { padding:1rem 1.1rem 1.1rem; }
  .ws-tr-orig-label, .ws-tr-input-label {
    font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted); font-weight:600; margin-bottom:.35rem;
  }
  .ws-tr-orig {
    background:var(--bg2); border:1px solid var(--border); border-radius:8px;
    padding:.55rem .75rem; font-size:.88rem; color:var(--text); margin-bottom:.85rem;
    max-height:120px; overflow:auto; line-height:1.4; white-space:pre-wrap;
  }
  .ws-tr-input {
    width:100%; padding:.65rem .8rem; border:1px solid var(--border); border-radius:9px;
    font-size:.92rem; font-family:'DM Sans',sans-serif; color:var(--text);
    background:#fff; outline:none; resize:vertical; min-height:80px; line-height:1.45;
  }
  .ws-tr-input:focus { border-color:var(--accent); }
  .ws-tr-popover-actions { display:flex; gap:.5rem; margin-top:.8rem; }
  .ws-tr-btn {
    padding:.55rem 1rem; border-radius:8px; font-size:.85rem; cursor:pointer;
    border:none; font-family:'DM Sans',sans-serif; font-weight:500; transition:all .15s;
  }
  .ws-tr-btn-primary { background:var(--accent); color:#fff; flex:1; }
  .ws-tr-btn-primary:hover { background:#6d9485; }
  .ws-tr-btn-secondary { background:var(--bg2); color:var(--text); border:1px solid var(--border); }
  .ws-tr-btn-secondary:hover { background:#fff; border-color:var(--accent); color:var(--accent); }
  .ws-tr-status { margin-top:.7rem; font-size:.82rem; color:var(--muted); min-height:1em; }

  @media(max-width:500px){
    .ws-tr-popover { width:calc(100vw - 16px); }
  }

  /* ── SECTIES (Website inhoud) ── */
  .sectie-wrap { display:flex; flex-direction:column; gap:0; }
  .sectie-wrap:has(> [id^="inline-panel-"][style*="display: block"]) .sectie-rij,
  .sectie-wrap:has(> [id^="inline-panel-"][style*="display:block"]) .sectie-rij {
    border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent;
  }
  .sectie-rij {
    display:flex; align-items:center; gap:.85rem;
    padding:1.1rem 1.2rem;
    background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
    transition:border-color .15s, opacity .15s, background .15s;
  }
  .sectie-rij.is-verborgen { opacity:.55; }
  .sectie-rij[onclick] { cursor:pointer; }
  .sectie-rij[onclick]:hover { border-color:var(--accent); background:var(--bg); }
  .sectie-rij.dragging { opacity:.4; }
  .sectie-rij.drag-over { border-color:var(--accent); border-style:dashed; }
  .sectie-rij-main { display:flex; align-items:center; gap:.85rem; flex:1; min-width:0; }
  .sectie-handle {
    color:var(--muted); cursor:grab; font-size:1.2rem;
    flex-shrink:0; user-select:none; padding:.3rem .15rem;
    -webkit-user-select:none; touch-action:none;
  }
  .sectie-handle:active { cursor:grabbing; }
  .sectie-handle-spacer { width:22px; flex-shrink:0; }
  .sectie-icon { font-size:1.5rem; flex-shrink:0; }
  .sectie-info { flex:1; min-width:0; }
  .sectie-label { font-size:1.2rem; font-weight:500; color:var(--text); line-height:1.3; }
  .sectie-sub { font-size:1rem; color:var(--muted); margin-top:3px; }
  .sectie-acties { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
  .sectie-vast-label {
    font-size:.85rem; color:var(--muted);
    padding:.35rem .9rem; border:1px solid var(--border); border-radius:20px;
    white-space:nowrap;
  }
  .sectie-oog-btn {
    width:40px; height:40px; border:1px solid var(--border); background:var(--bg2);
    border-radius:8px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0;
  }
  .sectie-bewerk-btn {
    height:40px; padding:0 1.2rem; border:1px solid var(--border); background:var(--bg2);
    border-radius:8px; cursor:pointer;
    font-size:.9rem; font-weight:500; color:var(--text);
    font-family:'DM Sans',sans-serif;
    display:flex; align-items:center; gap:.4rem;
    transition:background .15s; white-space:nowrap; flex-shrink:0;
  }
  .sectie-bewerk-btn:hover { background:var(--bg3); }

  /* Omhoog/omlaag pijltjes naast slepen */
  .sectie-pijlen { display:inline-flex; flex-direction:column; gap:2px; flex-shrink:0; }
  .sectie-pijl-btn {
    width:30px; height:19px; border:1px solid var(--border); background:var(--bg2);
    border-radius:6px; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--text); transition:background .15s,border-color .15s,opacity .15s;
  }
  .sectie-pijl-btn:hover:not(:disabled){ background:var(--bg3); border-color:var(--accent); color:var(--accent); }
  .sectie-pijl-btn:disabled { opacity:.3; cursor:default; }

  @media(max-width:600px){
    /* Sectie-rij stacked op mobiel */
    .sectie-rij {
      flex-direction:column; align-items:stretch;
      gap:.85rem; padding:1rem 1rem;
    }
    .sectie-rij-main { width:100%; }
    .sectie-acties {
      width:100%; justify-content:flex-end;
      padding-left:calc(22px + .85rem); /* lijn uit met de tekst, niet de drag-handle */
    }
    .sectie-label { font-size:1.1rem; }
    .sectie-sub { font-size:.95rem; }
    /* Drag-handle iets prominenter op touch */
    .sectie-handle { font-size:1.4rem; padding:.4rem .25rem; }
    .sectie-bewerk-btn { flex:1; justify-content:center; }
  }

  /* ── TOAST ── */
  .toast {
    position:fixed; bottom:2rem; right:2rem; background:var(--text); color:#fff;
    padding:.9rem 1.6rem; border-radius:var(--r); font-size:.85rem;
    transform:translateY(100px); opacity:0; transition:all .3s; z-index:999;
  }
  .toast.show { transform:translateY(0); opacity:1; }
  /* Foutmelding: opvallender, blijft langer staan en is wegtikbaar */
  .toast.error { background:var(--danger, #c0392b); cursor:pointer; }

  /* ── MOBILE NAV BAR (bottom tabs) — swipe-bar met alle knoppen ── */
  .mobile-nav {
    display:none; width:100%;
    background:var(--bg);
    flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:0 32px 0 4px;
    touch-action:pan-x;
    scroll-padding-left:8px;
  }
  .mobile-nav::-webkit-scrollbar { display:none; }
  #mobileNavWrapper {
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--bg);border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -2px 14px rgba(0,0,0,.06);
  }
  @media(max-width:768px){
    /* Oude footer-balk vervangen door uitklapmenu (zie .admin-sidebar drawer) */
    #mobileNavWrapper { display:none !important; }
  }
  .mobile-nav-btn {
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.3rem; padding:.7rem .65rem; background:none; border:none; cursor:pointer;
    font-family:'DM Sans',sans-serif; font-size:.76rem; letter-spacing:.03em;
    text-transform:uppercase; color:var(--muted); transition:color .2s;
    scroll-snap-align:start; white-space:nowrap; min-width:62px; position:relative;
  }
  .nav-badge-dot {
    position:absolute; top:2px; right:8px;
    background:#e74c3c; color:#fff; font-size:.5rem; font-weight:700;
    min-width:14px; height:14px; line-height:14px; text-align:center;
    border-radius:50px; padding:0 3px; box-sizing:border-box;
  }
  .mobile-nav-btn.active { color:var(--accent); }
  .mobile-nav-btn svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

  /* Vakantie knoppen */
  .vakantie-btn {
    padding:.6rem 1.1rem; border:1px solid var(--border); border-radius:50px;
    background:var(--bg2); cursor:pointer; font-family:'DM Sans',sans-serif;
    font-size:1.01rem; color:var(--text); font-weight:300;
    transition:all .15s; white-space:nowrap;
  }
  .vakantie-btn:hover { border-color:var(--accent); color:var(--accent); background:#fff; }
  .vakantie-btn.highlight { background:#fff8f0; border-color:var(--accent-lt); color:var(--accent); font-weight:400; }
  .vakantie-btn.highlight:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

  /* Foto management */
  .foto-item {
    display:flex; align-items:center; gap:1rem;
    background:var(--bg2); border:1px solid var(--border);
    border-radius:var(--r); padding:1rem; cursor:grab;
    transition:box-shadow .2s;
  }
  .foto-item.dragging { opacity:.5; box-shadow:0 8px 24px rgba(0,0,0,.12); cursor:grabbing; }
  .foto-item.drag-over { border-color:var(--accent); background:#fff8f0; }
  .foto-thumb { width:100px; height:70px; object-fit:cover; border-radius:8px; flex-shrink:0; }
  .foto-drag-handle { color:var(--border); cursor:grab; padding:0 .2rem; flex-shrink:0; font-size:1.2rem; }
  .foto-info { flex:1; min-width:0; }
  .foto-naam { font-size:.85rem; color:var(--text); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .foto-alt-input { width:100%; background:#fff; border:1px solid var(--border); border-radius:8px; padding:.55rem .9rem; font-family:'DM Sans',sans-serif; font-size:.88rem; color:var(--text); outline:none; margin-top:.4rem; }
  .foto-alt-input:focus { border-color:var(--accent); }
  .foto-actions { display:flex; gap:.4rem; flex-shrink:0; }
  .foto-badge { font-size:.65rem; background:var(--bg3); color:var(--muted); padding:.15rem .5rem; border-radius:4px; letter-spacing:.08em; }
  .foto-badge.visible { background:#f0f7f2; color:var(--sage); }
  @media(max-width:700px){
    #fotoLijst { overflow-x:hidden; }
    .foto-item { flex-wrap:wrap; gap:.6rem; padding:.75rem; }
    .foto-drag-handle { display:none; }
  }
  .upload-item { display:flex; align-items:center; gap:.8rem; padding:.6rem; background:var(--bg2); border-radius:var(--r); font-size:.85rem; }
  .upload-bar { height:6px; background:var(--accent-lt); border-radius:3px; overflow:hidden; flex:1; }
  .upload-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }

  /* Voorzieningen */
  .vz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .vz-item {
    display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem;
    border:1px solid var(--border); border-radius:var(--r); cursor:pointer;
    transition:all .15s; font-size:.88rem; font-weight:300; color:var(--text);
  }
  .vz-item:hover { border-color:var(--accent); background:#fff8f0; }
  .vz-item input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
  .vz-item input:checked ~ .vz-label { color:var(--accent); font-weight:400; }
  .vz-item:has(input:checked) { border-color:var(--accent); background:#fff8f0; }
  .vz-emoji { font-size:1.1rem; flex-shrink:0; }
  .vz-icon { flex-shrink:0; display:flex; align-items:center; }
  .vz-label { line-height:1.3; }

  @media(max-width:700px){
    .vz-grid { grid-template-columns:repeat(2,1fr); gap:.4rem; }
    .vz-item {
      gap:.4rem; padding:.5rem .6rem; min-height:44px;
      position:relative;
    }
    .vz-item input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; }
    .vz-item:has(input:checked)::after {
      content:'✓'; position:absolute; top:3px; right:4px;
      font-size:.6rem; color:var(--accent); font-weight:600;
    }
    .vz-icon svg { width:18px; height:18px; }
    .vz-label { font-size:.75rem; line-height:1.3; }
  }

  /* Icon picker - collapsible on mobile */
  .fac-icon-picker { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
  .fac-icon-picker-wrap { position:relative; }
  .fac-icon-selected-preview {
    display:none; align-items:center; gap:.6rem; padding:.5rem .8rem;
    border:1.5px solid var(--border); border-radius:8px; background:var(--bg2);
    cursor:pointer; font-size:.82rem; color:var(--text); font-weight:300;
  }
  .fac-icon-selected-preview svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  @media(max-width:700px){
    .fac-icon-selected-preview { display:flex; }
    .fac-icon-picker { display:none; }
    .fac-icon-picker.open { display:flex; margin-top:.4rem; }
  }
  .fac-icon-btn {
    width:36px; height:36px; border:1.5px solid var(--border); border-radius:8px;
    background:var(--bg2); cursor:pointer; display:flex; align-items:center;
    justify-content:center; transition:all .15s; color:var(--muted);
  }
  .fac-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:#fff; }
  .fac-icon-btn.selected { border-color:var(--accent); background:var(--accent); color:#fff; }

  .fac-row { display:grid; grid-template-columns:280px 1fr; gap:1rem; }
  @media(max-width:700px){ .fac-row { grid-template-columns:1fr; } }

  /* Shortcuts */
  .ws-shortcuts { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
  .ws-shortcut {
    padding:.4rem .9rem; background:var(--bg2); border:1px solid var(--border);
    border-radius:50px; font-size:.78rem; color:var(--text); text-decoration:none;
    font-weight:300; transition:all .15s; white-space:nowrap;
    cursor:pointer; font-family:'DM Sans',sans-serif;
  }
  .ws-shortcut:hover { border-color:var(--accent); color:var(--accent); background:#fff; }

  /* Emoji picker */
  .emoji-btn {
    width:32px; height:32px; border:1px solid var(--border); border-radius:8px;
    background:var(--bg2); cursor:pointer; font-size:1rem; transition:all .15s;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .emoji-btn:hover { background:var(--accent-lt); border-color:var(--accent); transform:scale(1.15); }

  /* Sticky save bar */
  /* Vaste opslaan-balk onderaan */
  .fixed-save-bar {
    position:fixed; bottom:0; left:260px; right:0; z-index:200;
    background:rgba(255,255,255,.985);
    border-top:1px solid var(--border);
    padding:.9rem 2.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    box-shadow:0 -4px 24px rgba(0,0,0,.07);
    transition:opacity .2s, transform .2s;
  }
  .fixed-save-bar.hidden { opacity:0; pointer-events:none; transform:translateY(8px); }
  .fixed-save-bar-label { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .ws-save-msg { font-size:.9rem; color:var(--sage); font-weight:400; }
  /* Niet-opgeslagen wijzigingen: label in accentkleur + stip op de opslaan-knop */
  .ws-save-msg.unsaved { color:var(--accent); }
  .fixed-save-bar.dirty #fixedSaveBtn { position:relative; }
  .fixed-save-bar.dirty #fixedSaveBtn::after {
    content:''; position:absolute; top:-4px; right:-4px;
    width:12px; height:12px; border-radius:50%;
    background:var(--accent); border:2px solid #fff;
  }
  @media(max-width:768px){
    .fixed-save-bar { left:0; padding:.9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom,0px)); bottom:0; }
    /* iOS: bij open toetsenbord zweeft een fixed balk door de content bij het
       scrollen — daarom verbergen zolang een invoerveld focus heeft */
    .fixed-save-bar.kb-open { opacity:0; pointer-events:none; transform:translateY(8px); }
  }

  /* Year tabs */
  .year-tab {
    padding:.45rem 1.1rem; border:1px solid var(--border); border-radius:50px;
    background:none; cursor:pointer; font-family:'DM Sans',sans-serif;
    font-size:.95rem; color:var(--muted); transition:all .15s;
  }
  .year-tab:hover { border-color:var(--accent); color:var(--accent); }
  .year-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

  /* Meer menu */
  .meer-overlay { display:none; position:fixed; inset:0; z-index:149; background:rgba(0,0,0,.3); }
  .meer-overlay.open { display:block; }
  .meer-menu {
    display:none; position:fixed;
    bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    left:0; right:0; z-index:150;
    max-height:calc(80vh - 72px - env(safe-area-inset-bottom, 0px));
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    touch-action:pan-y;
    background:var(--bg); border-top:2px solid var(--border);
    border-radius:20px 20px 0 0;
    padding:0 0 1.5rem;
    box-shadow:0 -8px 40px rgba(0,0,0,.18);
    animation:slideUp .22s ease;
  }
  .meer-menu.open { display:block; }
  /* Scroll-indicator bovenaan het menu */
  .meer-menu-handle {
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    padding:.75rem 1rem .5rem; position:sticky; top:0; background:var(--bg);
    z-index:1; border-bottom:1px solid var(--border); margin-bottom:.4rem;
  }
  .meer-menu-handle-bar {
    width:36px; height:4px; background:var(--border); border-radius:2px;
  }
  .meer-menu-handle-hint {
    font-size:.65rem; color:var(--muted); letter-spacing:.08em;
    display:flex; align-items:center; gap:.3rem;
  }
  .meer-menu-handle-hint svg { animation: bounceDown 1.5s ease infinite; }
  @keyframes bounceDown {
    0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}
  }
  .meer-menu-inner { padding:0 1rem; }
  @keyframes slideUp { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
  .meer-menu-title { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:.6rem 0 .4rem; font-weight:600; }
  .meer-menu-btn {
    display:flex; align-items:center; gap:.9rem; width:100%;
    background:none; border:none; cursor:pointer; padding:.75rem .4rem;
    font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:300;
    color:var(--text); border-bottom:1px solid var(--border); text-align:left;
    transition:color .15s;
  }
  .meer-menu-btn:last-child { border-bottom:none; }
  .meer-menu-btn:hover, .meer-menu-btn:active { color:var(--accent); }
  .meer-menu-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .meer-menu-divider { border:none; border-top:1px solid var(--border); margin:.3rem 0; }

  /* Booking item mobile */
  @media(max-width:600px){
    .bk-row { padding:.8rem 1rem; }
    .booking-item-dates { font-size:.92rem !important; }
    .bk-actions { gap:.35rem; }
    .bk-action-btn { font-size:.82rem; padding:.5rem .9rem; }
  }

  @media(max-width:700px){
    /* Layout */
    .admin-body { grid-template-columns:1fr; }

    /* Sidebar wordt een stijlvol uitklapmenu (drawer) van links */
    .menu-toggle { display:flex; }
    .sidebar-close { display:flex; }
    .admin-menu-backdrop.show { display:block; }
    .admin-sidebar {
      display:flex; flex-direction:column;
      position:fixed; top:0; left:0; bottom:0;
      height:100vh; height:100dvh;
      width:min(86vw, 380px);
      z-index:1000;
      overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
      padding:4.5rem 0 calc(2rem + env(safe-area-inset-bottom,0px));
      border-right:none;
      box-shadow:6px 0 40px rgba(20,28,22,.18);
      transform:translateX(-100%);
      transition:transform .32s cubic-bezier(.4,0,.2,1);
      visibility:hidden;
    }
    .admin-sidebar.open { transform:translateX(0); visibility:visible; }
    .admin-sidebar .sidebar-section { padding:0 1.6rem; margin-bottom:1.8rem; }
    .admin-sidebar .sidebar-label { font-size:.92rem; margin-bottom:1rem; }
    /* Taalkiezer verhuist naar de drawer op mobiel (header-dropdown viel buiten beeld) */
    .admin-lang { display:none; }
    .sidebar-lang-section { display:flex; gap:.5rem; padding:0 1.6rem; margin-bottom:1.4rem; align-items:center; justify-content:flex-start; }
    .admin-sidebar .sidebar-btn { font-size:1.2rem; padding:.95rem 1.1rem; gap:1rem; }
    .admin-sidebar .sidebar-btn svg { width:24px; height:24px; }
    .admin-sidebar .sidebar-brand { margin-top:auto; padding:1.5rem 1.6rem 2.5rem; text-align:center; }
    .admin-sidebar .sidebar-brand-logo { height:110px; margin:0 auto; }

    .admin-main { padding-top:calc(1rem + 120px + env(safe-area-inset-top,0px)); padding-left:.8rem; padding-right:.8rem; padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px)); max-width:100vw; overflow-x:hidden; overflow-y:visible; }
    .admin-page { max-width:100%; overflow-x:hidden; }
    .admin-header { padding:1rem 1.2rem; padding-top:calc(1rem + env(safe-area-inset-top,0px)); gap:.6rem; position:fixed; top:0; left:0; right:0; z-index:200; flex-wrap:wrap; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border); }
    .admin-logo { font-size:1.3rem; }
    .admin-logo img { height:65px; }
    .admin-logo span { font-size:.85rem; }
    .back-btn { padding:.5rem 1.1rem .5rem .85rem; font-size:.9rem; margin-bottom:.8rem; }
    .logout-btn { padding:.4rem .9rem; font-size:.7rem; }
    .admin-header-logo { display:none; }

    /* Oude footer-nav uitgeschakeld */
    .mobile-nav { display:none !important; }

    /* Page titles */
    .page-title { font-size:2rem; }

    /* Cards — ALLES plat op mobiel, geen kaders */
    .card:not(.kpi-card):not(.huidig-card), .card.collapsible, .sectie-edit-panel > .card,
    .sectie-edit-panel, .admin-main .card:not(.kpi-card):not(.huidig-card) {
      padding:.3rem 0 !important; border:none !important; 
      box-shadow:none !important; border-radius:0 !important;
      background:transparent !important;
    }
    .card.collapsible { border-bottom:1px solid var(--border) !important; }
    .card-body, .collapsible .card-body, .card.collapsible .card-body {
      padding:.4rem 0 !important;
    }
    .card-title { font-size:1.5rem !important; }
    .sectie-edit-panel { margin:0 !important; }

    /* Forms — invoervelden volle breedte */
    .form-row { grid-template-columns:1fr; gap:.8rem; }
    .acc-grid-3, .acc-grid-2 { grid-template-columns:1fr; }
    .form-row > *:last-child { grid-column:auto; }
    .card-cols { grid-template-columns:1fr; }
    .card-cols-3 { grid-template-columns:1fr; }
    .logo-grid { grid-template-columns:1fr; }
    .hero-upload-grid { grid-template-columns:1fr; }
    .hero-upload-info { order:2; margin-top:.5rem; }
    .fg { width:100% !important; padding:0 !important; margin-left:0 !important; margin-right:0 !important; }
    .fg input:not([type="checkbox"]):not([type="radio"]), .fg textarea, .fg select { width:100% !important; box-sizing:border-box !important; min-width:0 !important; }
    /* Grid-kolommen mogen krimpen (anders duwen date-inputs de modal breder → horizontaal scrollen) */
    .form-row-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .form-row-2 > .fg { min-width:0; }
    .form-row-2 input[type="date"] { min-width:0 !important; width:100% !important; box-sizing:border-box !important; }
    /* iOS respecteert width:100% op date-inputs pas als de native appearance
       is uitgezet; anders behoudt het veld zijn intrinsieke breedte en loopt
       het buiten de modal. */
    .fg input[type="date"] { -webkit-appearance:none; appearance:none; }
    .modal { overflow-x:hidden; }
    /* Vertaal-vlaggetjes op mobiel ONDER het veld i.p.v. eroverheen, zodat er
       volle breedte overblijft om de tekst in te vullen. */
    .ws-tr-flags { position:static; right:auto; top:auto; transform:none; margin-top:.35rem; gap:.35rem; justify-content:flex-start; }
    .ws-tr-wrap textarea ~ .ws-tr-flags { top:auto; transform:none; }
    .ws-tr-flag { min-width:46px; width:auto; height:36px; padding:0 .6rem; font-size:.82rem; border-radius:7px; }
    .ws-tr-wrap { padding:0 !important; margin:0 !important; }
    .ws-tr-wrap input[type="text"],
    .ws-tr-wrap input[type="search"],
    .ws-tr-wrap input[type="url"],
    .ws-tr-wrap input[type="tel"],
    .ws-tr-wrap textarea { padding-right:.85rem !important; }

    /* Geneste containers (FAQ, tips, locatie etc.) — geen border, maximale breedte */
    .card-body > div > div[style], .card-cols-3 > div[style],
    .card-body div[style*="border"] {
      margin:0 !important;
      padding:.4rem 0 !important;
      border:none !important;
      border-bottom:1px solid var(--border) !important;
      border-radius:0 !important;
    }
    .card-toggle { padding:.8rem .3rem; }
    .card-toggle-title { font-size:1.15rem; }

    /* Kleuren komen uit de basisregels (custom properties) — hier alleen ruimte */
    .kpi-card {
      box-shadow:0 4px 16px rgba(var(--kpi-shadow),.2) !important;
      border-radius:var(--r) !important; padding:1.1rem .95rem !important;
    }

    /* Input velden in scrollbare wrapper op mobiel */
    .fg input[type="text"], .fg input[type="email"], .fg input[type="url"], .fg input[type="tel"],
    .fg textarea {
      -webkit-user-select:text; user-select:text;
    }
    .mobile-scroll-wrap {
      overflow-x:scroll; -webkit-overflow-scrolling:touch;
      width:100%; position:relative;
    }
    .mobile-scroll-wrap > input,
    .mobile-scroll-wrap > textarea {
      min-width:max(100%, 600px); width:max(100%, 600px);
    }
    .admin-main .btn-primary { width:100% !important; text-align:center !important; box-sizing:border-box; }

    /* Admin calendar */
    .acd { border-radius:6px; }
    .acd .acd-num { font-size:.75rem; }
    .acd .acd-price { font-size:.5rem; }
    .acd .acd-status { font-size:.45rem; }

    /* Modal */
    .modal { padding:1.5rem; --modal-pad:1.5rem; margin:1rem; max-width:none; }
    .modal.modal-accent { padding:0; --modal-pad:0px; }
    .modal-actions { flex-direction:column; align-items:stretch; gap:.55rem; }
    .modal-actions .btn { width:100%; flex:none; min-width:0; margin:0; text-align:center; }
    .modal-actions .btn-primary { order:-1; margin:0; }

    /* Login */
    .login-box { padding:2rem 1.5rem; margin:1rem; }
  }
  /* Smalle telefoons: twee-koloms modalrijen onder elkaar (datumvelden passen anders niet) */
  @media(max-width:440px){
    .modal .form-row-2 { grid-template-columns:1fr; gap:.8rem; }
  }
  /* ═══════════════════════════════════════
     ADMIN NUMBERS & EURO STYLING
     Inter font voor heldere, leesbare bedragen
     ═══════════════════════════════════════ */

  /* ── EURO / GELDWAARDEN — Inter font, tabular nums ── */
  .kpi-value,
  .kpi-currency,
  .stat-box-num,
  .upcoming-price,
  .aanvr-prijs-row > span:last-child,
  .aanvr-prijs-totaal span:last-child,
  .revenue-tbl .rev-omzet,
  .revenue-tbl tfoot td.num,
  .revenue-tbl td.num,
  .acd .acd-price,
  #pxPopup input[type=number],
  .aanvr-periode-val,
  .excl-row strong,
  .booking-item-dates {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-variant-numeric: tabular-nums;
  }

  .kpi-value {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .kpi-currency {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 300;
  }

  .revenue-tbl .rev-omzet { font-weight: 600; font-size: 1.1rem; }
  .revenue-tbl tfoot td { font-family: 'Inter', 'DM Sans', sans-serif; }

  .aanvr-prijs-row > span:last-child { font-weight: 500; font-size: 1rem; }
  .aanvr-prijs-totaal span:last-child { font-weight: 700; font-size: 1.1rem; }

  /* ── GROTERE BESCHRIJVENDE TEKSTEN ── */
  .upcoming-name { font-size: 1.15rem; font-weight: 500; }
  .upcoming-dates { font-size: 1rem; font-weight: 400; line-height: 1.5; }
  .upcoming-price { font-size: 1.05rem; font-weight: 600; }

  .booking-item-dates { font-size: 1rem; font-weight: 600; }
  .booking-item-meta { font-size: .85rem; line-height: 1.5; }

  .aanvr-periode-val { font-size: 1.05rem; font-weight: 600; }
  .aanvr-prijs-row { font-size: 1.05rem; padding: .35rem 0; }
  .aanvr-prijs-totaal { font-size: 1.15rem; font-weight: 700; }

  .huidig-periode { font-size: 1.05rem; }
  .huidig-resterend { font-size: .95rem; font-weight: 600; }

  .acd .acd-price { font-weight: 600; }
  .admin-page#page-kalender .acd .acd-price { font-size: .9rem; font-weight: 600; }

  .stat-box-num {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .stat-box-num.stat-box-omzet { font-weight: 600; }

  .stat-table td { font-size: .95rem; }

  /* ═══════════════════════════════════════
     ADMIN NUMBERS & EURO STYLING
     Inter font voor heldere, leesbare bedragen
     ═══════════════════════════════════════ */

  /* ── EURO / GELDWAARDEN — Inter font, tabular nums ── */
  .kpi-value,
  .kpi-currency,
  .stat-box-num,
  .upcoming-price,
  .aanvr-prijs-row > span:last-child,
  .aanvr-prijs-totaal span:last-child,
  .revenue-tbl .rev-omzet,
  .revenue-tbl tfoot td.num,
  .revenue-tbl td.num,
  .acd .acd-price,
  #pxPopup input[type=number],
  .aanvr-periode-val,
  .excl-row strong,
  .booking-item-dates {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-variant-numeric: tabular-nums;
  }

  .kpi-value {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .kpi-currency {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 300;
  }

  .revenue-tbl .rev-omzet { font-weight: 600; font-size: 1.1rem; }
  .revenue-tbl tfoot td { font-family: 'Inter', 'DM Sans', sans-serif; }

  .aanvr-prijs-row > span:last-child { font-weight: 500; font-size: 1rem; }
  .aanvr-prijs-totaal span:last-child { font-weight: 700; font-size: 1.1rem; }

  /* ── GROTERE BESCHRIJVENDE TEKSTEN ── */
  .upcoming-name { font-size: 1.15rem; font-weight: 500; }
  .upcoming-dates { font-size: 1rem; font-weight: 400; line-height: 1.5; }
  .upcoming-price { font-size: 1.05rem; font-weight: 600; }

  .booking-item-dates { font-size: 1rem; font-weight: 600; }
  .booking-item-meta { font-size: .85rem; line-height: 1.5; }

  .aanvr-periode-val { font-size: 1.05rem; font-weight: 600; }
  .aanvr-prijs-row { font-size: 1.05rem; padding: .35rem 0; }
  .aanvr-prijs-totaal { font-size: 1.15rem; font-weight: 700; }

  .huidig-periode { font-size: 1.05rem; }
  .huidig-resterend { font-size: .95rem; font-weight: 600; }

  .acd .acd-price { font-weight: 600; }
  .admin-page#page-kalender .acd .acd-price { font-size: .9rem; font-weight: 600; }

  .stat-box-num {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .stat-box-num.stat-box-omzet { font-weight: 600; }

  .stat-table td { font-size: .95rem; }

  /* ═══════════════════════════════════════
     SUBTIELE KLEURACCENTEN — visuele structuur
     Past zich automatisch aan het actieve thema aan
     via --accent / --accent-lt / --bg2 / --bg3
     ═══════════════════════════════════════ */

  /* ── Paginatitel ── */
  .page-title {
    margin-bottom:.4rem;
  }

  /* ── Kosten voorbeeldweergave-rij ── */
  .kosten-preview-row { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; padding:.3rem 0; border-bottom:1px solid var(--border); }
  .kosten-preview-row .kpr-label { flex:1; min-width:0; overflow-wrap:break-word; word-break:break-word; }
  .kosten-preview-row .kpr-label em { font-size:.8rem; color:var(--muted); }
  .kosten-preview-row .kpr-bedrag { color:var(--accent); font-weight:700; white-space:nowrap; flex-shrink:0; }

  /* ── Cards: zachte linkerrand als kleuraccent ── */
  .card {
    border-left:3px solid var(--accent-lt);
  }
  .card:hover {
    border-left-color:var(--accent);
  }
  .card.collapsible {
    border-left:3px solid var(--accent-lt);
  }
  .card.collapsible:hover,
  .card.collapsible.open {
    border-left-color:var(--accent);
  }

  /* ── Sidebar: subtiel gekleurde achtergrond ── */
  .admin-sidebar {
    background:linear-gradient(180deg, var(--bg) 0%, var(--bg3) 100%);
  }
  .sidebar-btn.active {
    background:color-mix(in srgb, var(--accent-lt) 15%, var(--bg2));
    border-left:3px solid var(--accent);
    box-shadow:none;
  }

  /* ── Sidebar sectie-labels: lichte onderstreping ── */
  .sidebar-label {
    padding-bottom:.5rem;
    border-bottom:1px solid var(--accent-lt);
  }

  /* ── Admin header: heel lichte thema-gloed ── */
  .admin-header {
    background:linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--accent-lt) 8%, var(--bg)) 50%, var(--bg) 100%);
  }

  /* ── Card-titles: subtiele onderstreping ── */
  .card-title {
    padding-bottom:.6rem;
    border-bottom:1px solid var(--bg3);
  }

  /* ── Stat-boxes: lichte gekleurde bovenrand ── */
  .stat-box {
    border-top:3px solid var(--accent-lt);
  }
  .stat-box:hover {
    border-top-color:var(--accent);
  }

  /* ── Booking items: hover effect ── */
  .booking-item:hover {
    border-left-color:var(--accent);
    box-shadow:0 4px 14px rgba(0,0,0,.08);
  }

  /* ── Aanvraag kaarten: gekleurde bovenrand ── */
  .aanvr-card {
    border-top:3px solid var(--accent-lt);
  }

  /* ── Sectie-rijen: hover-linkerrand (box-shadow zodat basis-border intact blijft) ── */
  .sectie-rij {
    transition:box-shadow .15s, border-color .15s, opacity .15s, background .15s;
  }
  .sectie-rij:hover,
  .sectie-rij[onclick]:hover {
    box-shadow:inset 3px 0 0 var(--accent);
  }

  /* ── Empty states: licht tinted ── */
  .upcoming-empty,
  .revenue-empty-msg {
    background:var(--bg3);
    border-radius:var(--r);
    border:1px dashed var(--border);
  }

  /* ── Kalender weekdagen: zachte achtergrond ── */
  .acw {
    background:var(--bg3);
    border-radius:6px;
    margin-bottom:2px;
  }

  /* ── Admin main: iets warmere gradient ── */
  .admin-main {
    background:linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  }

  /* ── Prijs instellen voor een periode: smallere velden, links uitgelijnd ── */
  /* Vaste smallere kolombreedtes i.p.v. 1fr, zodat de velden niet de volle
     breedte vullen en alles meer naar links komt. */
  #prijsPeriodeRow {
    grid-template-columns:200px 200px 180px auto;
    justify-content:start;
  }
  /* Grotere font-size op de datumvelden → de native kalender-popup schaalt mee */
  #prijsFrom, #prijsTo {
    font-size:1.1rem !important;
    padding:.85rem 1rem !important;
  }
  #prijsBedrag {
    font-size:1.05rem !important;
  }
  @media(max-width:768px){
    /* Op mobiel weer volle breedte gestapeld (valt terug op bestaande regel) */
    #prijsPeriodeRow { grid-template-columns:1fr; }
  }

  /* ── Klikbare dashboard-blokken (linken naar andere pagina's) ── */
  .kpi-clickable, .card-clickable { cursor:pointer; }
  .kpi-clickable:focus-visible,
  .card-clickable:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
  }
  /* Card (Aankomende boekingen) krijgt iets duidelijker hover-feedback */
  .card-clickable:hover {
    border-left-color:var(--accent);
    box-shadow:0 4px 16px rgba(0,0,0,.08);
  }
  /* De individuele boekingen binnen het klikbare blok houden hun eigen
     pointer; de omringende ruimte/kop linkt naar het overzicht. */

  /* ── Boekingen overzicht & ingevoerde boekingen: grotere teksten ── */
  .booking-item-dates { font-size:1.1rem !important; font-weight:600 !important; }
  .booking-item-meta  { font-size:.9rem !important; line-height:1.5 !important; }
  /* Namen (gast) in de meta-regel iets nadrukkelijker */
  .booking-item-meta strong { font-weight:600; color:var(--text); }

  /* ── Pro Tips pagina: duidelijker onderscheid tussen tips ── */
  #page-pro-tips .page-title { text-align:left !important; padding-left:0 !important; }
  #page-pro-tips .page-sub { text-align:left !important; }
  #page-pro-tips .card.collapsible {
    margin-bottom:.8rem !important;
    padding:.2rem 0 !important;
    border:none !important;
    border-bottom:2px solid var(--border) !important;
    border-left:4px solid var(--accent) !important;
    border-radius:0 !important;
    background:var(--bg) !important;
    box-shadow:none !important;
    padding-left:.8rem !important;
  }
  #page-pro-tips .card.collapsible.open {
    background:var(--bg2) !important;
    border-bottom-color:var(--accent) !important;
  }
  #page-pro-tips .card.collapsible .card-toggle {
    padding:.8rem .4rem !important;
  }
  #page-pro-tips .card.collapsible .card-toggle-title {
    font-size:1.5rem !important;
    font-weight:600 !important;
  }
  @media(max-width:700px){
    #page-pro-tips .card.collapsible .card-toggle-title { font-size:1.2rem !important; }
  }

  /* ── Sectie afbeelding upload ── */
  .section-img-upload {
    position:relative; width:100%; height:200px; border-radius:var(--r);
    border:2px dashed var(--border); background:var(--bg2) center/cover no-repeat;
    cursor:pointer; overflow:hidden; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.3rem; transition:border-color .2s;
  }
  .section-img-upload:hover { border-color:var(--accent); }
  .section-img-overlay {
    display:none; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.45));
  }
  .section-img-label { font-size:.88rem; color:var(--muted); z-index:1; }
  .section-img-hint  { font-size:.75rem; color:var(--muted); opacity:.7; z-index:1; }
  .card-sub { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }

  /* ── Ligging afstanden rij ── */
  .ligging-row {
    display:grid; grid-template-columns:120px 1fr 32px; gap:.8rem;
    align-items:end; margin-bottom:.8rem;
  }
  .btn-icon-clear {
    padding:0; background:none; border:none; font-size:1.1rem;
    cursor:pointer; opacity:.35; color:var(--text); height:44px;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .2s;
  }
  .btn-icon-clear:hover { opacity:.7; }

  /* ── Thema grid: gelijke hoogte knoppen ── */
  #themeGrid { align-items:stretch; }
  #themeGrid > div { display:flex; flex-direction:column; }
  #themeGrid > div > div:last-child { flex:1; display:flex; flex-direction:column; justify-content:space-between; }

  /* ── Design-template kaarten (mini website-preview per thema) ── */
  #designGrid { align-items:stretch; }
  .design-card {
    cursor:pointer; display:flex; flex-direction:column;
    border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
    background:var(--bg); -webkit-tap-highlight-color:transparent;
    transition:transform .2s, box-shadow .2s, border-color .2s;
  }
  .design-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.11); }
  .design-card.is-active { border-color:var(--p-accent); box-shadow:0 0 0 2px var(--p-accent), 0 10px 28px rgba(0,0,0,.13); }

  .design-card__preview { display:flex; flex-direction:column; height:152px; background:var(--p-bg); overflow:hidden; pointer-events:none; }

  /* hero = nagebootste headerfoto: accent→tekst-kleur met donkere overlay, lichte tekst erop */
  .dcp-hero { position:relative; flex:0 0 auto; height:90px; padding:7px 12px; display:flex; flex-direction:column;
    background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%), var(--p-accent); }
  .design-card.h-lg .dcp-hero { height:108px; }
  .design-card.h-xl .dcp-hero { height:130px; }

  .dcp-nav { display:flex; align-items:center; gap:6px; }
  .dcp-brand { width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,.92); }
  .dcp-links { margin-left:auto; display:flex; gap:7px; }
  .dcp-links span { width:13px; height:3px; border-radius:2px; background:rgba(255,255,255,.6); }

  .dcp-ov { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .design-card.al-bottom .dcp-ov { justify-content:flex-end; padding-bottom:3px; }
  .dcp-ov span { display:block; }

  .dcp-logo { border-radius:50%; background:rgba(255,255,255,.9); margin-bottom:6px; }
  .dcp-logo.sm { width:18px; height:18px; }
  .dcp-logo.lg { width:30px; height:30px; }
  .dcp-eb { width:32px; height:3px; border-radius:2px; background:rgba(255,255,255,.55); margin-bottom:6px; }
  .dcp-h { width:62px; height:8px; border-radius:3px; background:rgba(255,255,255,.92); margin-bottom:4px; }
  .dcp-h.sh { width:44px; }
  .dcp-h.bold { height:10px; width:70px; }
  .dcp-h.xl { width:100px; height:12px; margin-bottom:6px; }
  .dcp-sub { width:72px; height:4px; border-radius:2px; background:rgba(255,255,255,.5); margin-bottom:7px; }
  .dcp-cta { width:50px; height:14px; margin-top:5px; }
  .dcp-cta.pill-outline { border-radius:50px; border:1px solid rgba(255,255,255,.7); }
  .dcp-cta.pill-solid { border-radius:50px; background:#fff; }
  .dcp-cta.rect-solid { border-radius:3px; background:#fff; }
  .dcp-cta.round-outline { border-radius:4px; border:1px solid rgba(255,255,255,.7); }
  .dcp-cta.round-solid { border-radius:5px; background:#fff; }

  /* content onder de hero */
  .dcp-body { flex:1; min-height:0; display:flex; align-items:flex-end; gap:6px; padding:0 12px; }
  .dcp-body i { flex:1; height:90%; max-height:30px; border-radius:6px 6px 0 0;
    background:var(--p-bg3); border:1px solid var(--p-border); border-bottom:none; }

  .design-card__foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.85rem 1rem; background:var(--bg2); border-top:1px solid var(--border); }
  .design-card__name { font-size:1.05rem; font-weight:600; color:var(--text); }
  .design-card__swatch { flex-shrink:0; width:16px; height:16px; border-radius:50%; background:transparent;
    border:2px solid var(--p-accent); box-sizing:border-box; }
  .design-card__active { flex-shrink:0; display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:var(--p-accent); white-space:nowrap; }
  .design-card__active::before { content:''; flex-shrink:0; width:16px; height:16px; border-radius:50%;
    background:var(--p-accent); border:2px solid var(--p-accent); box-sizing:border-box; }

  @media(max-width:600px){
    .ligging-row { grid-template-columns:1fr; gap:.4rem; }
    .ligging-row .btn-icon-clear { justify-self:end; }
  }

  /* ════════════════════════════════════════════════════════════
     Custom date picker (vervangt native popup)
     ════════════════════════════════════════════════════════════ */
  .ch-dp {
    position:absolute; z-index:10000; display:none;
    background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
    box-shadow:0 12px 40px rgba(0,0,0,.18); padding:1rem;
    width:340px; max-width:calc(100vw - 24px);
    font-family:inherit; color:var(--text);
    user-select:none;
  }
  .ch-dp.is-open { display:block; }
  .ch-dp-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.85rem; }
  .ch-dp-nav {
    flex-shrink:0; width:36px; height:36px; border-radius:50%;
    border:1px solid var(--border); background:var(--bg2); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
  }
  .ch-dp-nav:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
  .ch-dp-title { flex:1; min-width:0; display:flex; gap:.4rem; align-items:center; justify-content:center; }
  .ch-dp-title select { max-width:100%; }
  .ch-dp-title select {
    font-family:inherit; font-size:1rem; font-weight:500; color:var(--text);
    background:transparent; border:1px solid transparent; border-radius:6px;
    padding:.35rem .5rem; cursor:pointer;
    appearance:none; -webkit-appearance:none;
    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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .35rem center; padding-right:1.5rem;
  }
  .ch-dp-title select:hover { border-color:var(--border); background-color:var(--bg2); }
  .ch-dp-weekdays {
    display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
    margin-bottom:.35rem;
  }
  .ch-dp-weekdays span {
    text-align:center; font-size:.78rem; font-weight:600;
    color:var(--muted); padding:.4rem 0; letter-spacing:.04em; text-transform:uppercase;
  }
  .ch-dp-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  }
  .ch-dp-cell {
    aspect-ratio:1/1; min-height:38px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid transparent; border-radius:6px;
    font-family:inherit; font-size:.95rem; color:var(--text); cursor:pointer;
    transition:background .12s, border-color .12s, color .12s;
  }
  .ch-dp-cell:hover:not(:disabled):not(.ch-dp-other) { background:var(--bg2); border-color:var(--accent-lt); }
  .ch-dp-cell.ch-dp-other { color:var(--muted); opacity:.45; }
  .ch-dp-cell.is-today { font-weight:700; color:var(--accent); border-color:var(--accent-lt); }
  .ch-dp-cell.is-selected,
  .ch-dp-cell.is-selected:hover { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
  .ch-dp-cell.is-disabled,
  .ch-dp-cell:disabled { cursor:not-allowed; opacity:.3; }
  .ch-dp-foot {
    display:flex; justify-content:space-between; gap:.6rem;
    margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--border);
  }
  .ch-dp-btn {
    flex:1; padding:.6rem .9rem; font-family:inherit; font-size:.9rem; font-weight:500;
    background:var(--bg2); border:1px solid var(--border); border-radius:8px;
    color:var(--text); cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
  }
  .ch-dp-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
  .ch-dp-clear:hover { background:#c44; border-color:#c44; color:#fff; }

  @media(max-width:480px){
    .ch-dp { width:300px; padding:.85rem; }
    .ch-dp-cell { min-height:36px; font-size:.9rem; }
  }

  /* Mobiele variant: gecentreerde modal met backdrop, valt nooit buiten beeld */
  .ch-dp-backdrop {
    position:fixed; inset:0; z-index:9999; background:rgba(20,16,12,.5);
    display:none;
  }
  .ch-dp-backdrop.is-open { display:block; }
  .ch-dp.ch-dp-modal {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(340px, calc(100vw - 32px)); max-width:calc(100vw - 32px);
    max-height:calc(100vh - 32px); overflow-y:auto;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
    padding-top:3.2rem; /* ruimte voor de sluitknop rechtsboven */
  }
  /* Sluitknop: alleen in de mobiele modal-variant (desktop sluit via klik-buiten) */
  .ch-dp-close { display:none; }
  .ch-dp.ch-dp-modal .ch-dp-close {
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:.6rem; right:.6rem; z-index:2;
    width:40px; height:40px; padding:0; border-radius:50%;
    background:var(--bg2); border:1px solid var(--border); color:var(--text);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .ch-dp-close:active { background:var(--border); }

  /* Lege datumvelden: "Kies datum"-hint als overlay over het veld.
     Dekkende achtergrond zodat de native "dd-mm-jjjj"-placeholder van het
     lege date-veld er niet doorheen schijnt (gaf dubbele tekst op desktop). */
  .ch-dp-field { position:relative; display:block; width:100%; }
  .ch-dp-hint {
    position:absolute; inset:0; display:flex; align-items:center; gap:.55rem;
    padding:.75rem 1rem; pointer-events:auto; cursor:pointer;
    color:#7a6f65; font-family:'DM Sans',sans-serif; font-size:.95rem;
    background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
    box-sizing:border-box; transition:border-color .2s;
  }
  .ch-dp-field:hover .ch-dp-hint,
  .ch-dp-field.is-empty input[type="date"]:focus + .ch-dp-hint { border-color:var(--accent); }
  .ch-dp-hint svg { flex-shrink:0; color:var(--accent); opacity:1; }
  /* Veld dat de hint toont: verberg de eigen (native) datumtekst eronder */
  .ch-dp-field.is-empty input[type="date"] { color:transparent; }
  .ch-dp-field.is-empty input[type="date"]::-webkit-datetime-edit { color:transparent; }
/* ── Exploitatie modal-grid (bedrag + frequentie naast elkaar) ── */
  .ex-modal-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.8rem;
  }

/* ── Exploitatie suggesties ── */
  .ex-suggesties {
    display:flex; flex-wrap:wrap; gap:.5rem;
  }
  .ex-suggestie-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.6rem .95rem; border-radius:20px; min-height:44px;
    background:var(--bg2); border:1px solid var(--border);
    font-family:inherit; font-size:.85rem; color:var(--text);
    cursor:pointer; transition:background .15s, border-color .15s;
  }
  .ex-suggestie-chip:hover {
    background:var(--accent); border-color:var(--accent); color:#fff;
  }
  .ex-suggestie-chip:hover svg { stroke:#fff; }
  .ex-suggestie-freq {
    font-size:.75rem; color:var(--muted); font-weight:300;
  }
  .ex-suggestie-chip:hover .ex-suggestie-freq { color:rgba(255,255,255,.8); }

/* Exploitatie: bedrag + frequentie onder elkaar op smalle schermen, en
   voldoende grote aanraakvlakken voor de bewerk/verwijder-knoppen (≥44px). */
  /* Kostenlijst: rij niet over de volle paginabreedte uitrekken — de
     bewerk/verwijder-knoppen stonden op desktop anders ver van de tekst. */
  .kosten-item { max-width:560px; }
  /* Facturen-kaart (abonnement): niet paginabreed uitrekken; de tabel binnen
     de kaart blijft horizontaal scrollbaar op smalle schermen. */
  #facturenCard { max-width:720px; }
  @media(max-width:700px){
    .ex-modal-grid { grid-template-columns:1fr; }
    #exploitatieLijst .btn-small,
    #kostenLijst .btn-small,
    #kostenLijst .btn-sm { min-width:44px; min-height:44px; }
    /* Kosten-lijst rendert de knoppen als .btn-sm (niet .btn-small); tekst
       iets groter voor comfortabel tikken op de telefoon. */
    #kostenLijst .btn-sm { font-size:.82rem; }
  }

/* deploy test 20260527144851 */

/* ====== HELP / HANDLEIDING ====== */
#page-help .help-intro-card { background:var(--bg2); }
#page-help .help-intro-card p { font-size:1.18rem; line-height:1.75; margin:0 0 .9rem; color:var(--text); font-weight:300; }
#page-help .help-intro-card p:last-child { margin-bottom:0; }
#page-help .help-intro-card b { color:var(--accent); font-weight:600; }

#page-help .help-toc { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:1.4rem 1.6rem; margin-bottom:2.4rem; box-shadow:0 1px 3px rgba(0,0,0,.04); }
#page-help .help-toc h3 { font-family:'DM Sans',sans-serif; font-size:1.6rem; font-weight:600; margin:0 0 .8rem; color:var(--text); }
#page-help .help-toc a { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; font-size:1.15rem; color:var(--text); text-decoration:none; background:var(--bg2); border:1px solid var(--border); border-radius:10px; transition:background .2s, color .2s; }
#page-help .help-toc a + a { margin-top:.55rem; }
#page-help .help-toc a::after { content:"\203A"; color:var(--accent); font-size:1.5rem; line-height:1; transition:color .2s, transform .2s; }
#page-help .help-toc a:hover { background:var(--accent); color:#fff; }
#page-help .help-toc a:hover::after { color:#fff; transform:translateX(3px); }

#page-help .help-group { margin:2.8rem 0 1rem; }
#page-help .help-group-title { font-family:'DM Sans',sans-serif; font-size:2.3rem; font-weight:600; color:var(--text); margin:0 0 .3rem; display:flex; align-items:center; gap:.75rem; line-height:1.15; }
#page-help .help-group-num { background:var(--accent); color:#fff; width:2.5rem; height:2.5rem; border-radius:.7rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; font-family:'DM Sans',sans-serif; font-weight:600; flex:0 0 auto; }
#page-help .help-group-intro { font-size:1.15rem; color:var(--muted); margin:.3rem 0 1.4rem 3.25rem; line-height:1.6; font-weight:300; }

#page-help .help-item { background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--r); padding:1.7rem 1.9rem; margin-bottom:1.3rem; box-shadow:0 1px 3px rgba(0,0,0,.04); }
#page-help .help-item h4 { font-family:'DM Sans',sans-serif; font-size:1.8rem; font-weight:600; color:var(--text); margin:0 0 .25rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; line-height:1.2; }
#page-help .help-where { font-size:1.02rem; color:var(--muted); margin:0 0 1.1rem; font-weight:300; }
#page-help .help-where b { color:var(--text); font-weight:500; }
#page-help .help-item p { font-size:1.18rem; line-height:1.75; margin:0 0 .9rem; color:var(--text); font-weight:300; }
#page-help .help-item p:last-child { margin-bottom:0; }
#page-help .help-item b { font-weight:600; }
#page-help .help-do { display:block; font-weight:600; font-size:1.15rem; margin:1.1rem 0 .55rem; color:var(--text); }
#page-help .help-item ul { margin:0 0 .4rem; padding-left:1.5rem; }
#page-help .help-item li { font-size:1.15rem; line-height:1.7; margin:.5rem 0; color:var(--text); font-weight:300; }
#page-help .help-tip { background:var(--bg2); border:1px dashed var(--accent); border-radius:10px; padding:.95rem 1.25rem; margin-top:1.1rem; font-size:1.12rem; line-height:1.6; font-weight:300; }
#page-help .help-tip b { color:var(--accent); font-weight:600; }

#page-help .help-badge { font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--accent); background:var(--bg2); border:1px solid var(--border); padding:.22rem .65rem; border-radius:999px; vertical-align:middle; line-height:1.3; }

#page-help .help-pkgs { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:1.3rem 0; }
#page-help .help-pkg { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; }
#page-help .help-pkg.featured { border-color:var(--accent); box-shadow:0 6px 22px rgba(200,180,126,.18); }
#page-help .help-pkg h5 { font-family:'DM Sans',sans-serif; font-size:1.6rem; font-weight:600; margin:0 0 .25rem; color:var(--text); }
#page-help .help-pkg-for { color:var(--muted); font-size:1rem; margin:0 0 .9rem; min-height:2.8rem; font-weight:300; line-height:1.5; }
#page-help .help-pkg ul { margin:0; padding-left:1.3rem; }
#page-help .help-pkg li { font-size:1.05rem; margin:.4rem 0; color:var(--text); font-weight:300; line-height:1.5; }

@media (max-width:760px) {
  #page-help .help-pkgs { grid-template-columns:1fr; }
  #page-help .help-group-intro { margin-left:0; }
  #page-help .help-group-title { font-size:1.9rem; }
  #page-help .help-item h4 { font-size:1.55rem; }
}

/* ====== STATISTIEKEN — opmaak (grafischer, geen afgebroken koppen) ====== */
#page-statistieken .card-title.stat-card-title { font-size:2rem !important; flex-wrap:wrap; align-items:center; line-height:1.25; margin-bottom:1.2rem; }
#page-statistieken .stat-card-period { flex-basis:100%; margin-top:.2rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* Netto-opbrengst kaart */
#page-statistieken .netto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; margin-bottom:1.1rem; }
#page-statistieken .netto-kpi { display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; padding:1.1rem .8rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); }
#page-statistieken .netto-kpi--hl { border-color:color-mix(in srgb, var(--hl) 55%, var(--border)); background:color-mix(in srgb, var(--hl) 13%, var(--bg2)); }
#page-statistieken .netto-kpi-label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#page-statistieken .netto-kpi-val { font-family:'DM Sans',sans-serif; font-size:2.5rem; font-weight:600; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
#page-statistieken .netto-note { font-size:.92rem; color:var(--muted); margin-bottom:.4rem; }
#page-statistieken .netto-note strong { color:var(--text); font-weight:600; }
#page-statistieken .netto-hint { font-size:.85rem; color:var(--muted); font-weight:300; line-height:1.5; }

/* Tabellen: nette uitlijning + tabulaire cijfers */
#page-statistieken .stat-table th { vertical-align:bottom; line-height:1.25; }
#page-statistieken .stat-table th:not(:first-child),
#page-statistieken .stat-table td:not(:first-child) { text-align:right; }
#page-statistieken .stat-table td { font-variant-numeric:tabular-nums; }

@media (max-width:760px) {
  #page-statistieken .card-title { font-size:1.7rem !important; line-height:1.25; }
  #page-statistieken .card-title.stat-card-title { font-size:1.65rem !important; }
  #page-statistieken .netto-kpi-val { font-size:2rem; }
  #page-statistieken .stat-table th { font-size:.66rem !important; letter-spacing:.03em; padding:.5rem .45rem; }
  #page-statistieken .stat-table td { padding:.6rem .45rem; }
}

/* ── SES.HOSPEDAJES — GASTENREGISTRATIE ── */
.ses-linkbox { background:var(--bg2,#faf8f5); border:1px solid var(--border,#e8e2d9); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; }
.ses-link-label { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:.5rem; }
.ses-link-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.ses-link-row input { flex:1; min-width:200px; padding:.55rem .7rem; border:1px solid var(--border,#ddd4c7); border-radius:8px; font-size:.85rem; background:#fff; color:var(--text); font-family:monospace; }
.ses-ghost { background:transparent !important; color:var(--muted) !important; border:1px solid var(--border) !important; }
.ses-hint { font-size:.78rem; color:var(--muted); margin-top:.6rem; font-weight:300; line-height:1.5; }
.ses-note { background:#fdf6ec; border:1px solid #efe0c8; border-radius:10px; padding:.7rem 1rem; font-size:.8rem; color:#8a7a5c; line-height:1.55; margin-bottom:1.4rem; }
.ses-list-title { font-size:.95rem; font-weight:600; color:var(--text); margin:.4rem 0 .8rem; }
.ses-empty { font-size:.85rem; color:var(--muted); font-weight:300; }
.ses-card { border:1px solid var(--border,#e8e2d9); border-radius:12px; margin-bottom:.7rem; overflow:hidden; background:#fff; }
.ses-card.ses-done { opacity:.72; }
.ses-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.9rem 1.1rem; cursor:pointer; }
.ses-head:hover { background:var(--bg2,#faf8f5); }
.ses-badge { display:inline-block; font-size:.68rem; font-weight:600; padding:.15rem .5rem; border-radius:50px; margin-right:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.ses-badge.new { background:#ecf3f0; color:var(--accent); }
.ses-badge.done { background:#eef4ee; color:#4f8a5b; }
.ses-meta { font-size:.8rem; color:var(--muted); margin-left:.5rem; font-weight:300; }
.ses-chev { color:var(--muted); transition:transform .2s; flex-shrink:0; }
.ses-card.open .ses-chev { transform:rotate(180deg); }
.ses-body { display:none; padding:0 1.1rem 1.1rem; }
.ses-card.open .ses-body { display:block; }
.ses-sub { font-size:.8rem; color:var(--muted); margin-bottom:.7rem; line-height:1.6; }
.ses-created { display:block; color:#b3a89b; }
.ses-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.ses-table td { padding:.45rem .5rem; border-bottom:1px solid var(--bg3,#eee6da); vertical-align:top; }
.ses-table td:first-child { color:var(--muted); width:1.5rem; }
.ses-extra { color:var(--muted); font-size:.76rem; }
.ses-actions { display:flex; gap:.5rem; margin-top:.9rem; flex-wrap:wrap; }
.ses-del { color:#c0392b !important; border-color:#e8c9c4 !important; background:transparent !important; }
.ses-del:hover { background:#fbeeec !important; }

/* ── Themed bevestigingsdialoog (chConfirm) — neemt het thema-accent van de eigenaar over via CSS-variabelen ── */
.ch-confirm-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(46,42,37,.5); opacity:0; transition:opacity .18s ease; }
.ch-confirm-overlay.open { opacity:1; }
.ch-confirm-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--r,12px); max-width:460px; width:100%; padding:1.8rem 1.9rem; box-shadow:0 24px 70px rgba(0,0,0,.28); transform:translateY(12px) scale(.98); transition:transform .18s ease; }
.ch-confirm-overlay.open .ch-confirm-box { transform:translateY(0) scale(1); }
.ch-confirm-title { font-family:'DM Sans',sans-serif; font-size:1.7rem; font-weight:600; color:var(--text); margin:0 0 .6rem; letter-spacing:.01em; }
.ch-confirm-msg { font-family:'DM Sans',sans-serif; font-size:.98rem; line-height:1.55; color:var(--text); white-space:pre-line; margin-bottom:1.5rem; }
.ch-confirm-actions { display:flex; justify-content:flex-end; gap:.7rem; }
.ch-confirm-actions .btn { min-width:120px; justify-content:center; }
@media (max-width:480px) {
  .ch-confirm-actions { flex-direction:column-reverse; }
  .ch-confirm-actions .btn { width:100%; }
}

/* ── AI-vertaal voortgang: prominente, thema-gestylede voortgangskaart ── */
.ch-ai-progress { margin-top:1.1rem; padding:1.1rem 1.3rem; border:1px solid var(--accent); border-radius:var(--r,12px); background:var(--bg2); animation:chAiProgressIn .25s ease; }
@keyframes chAiProgressIn { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.ch-ai-progress-head { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; }
.ch-ai-progress-spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--accent); flex-shrink:0; animation:chAiSpin .8s linear infinite; }
@keyframes chAiSpin { to{ transform:rotate(360deg); } }
.ch-ai-progress-label { font-size:.95rem; font-weight:500; color:var(--text); line-height:1.4; }
.ch-ai-progress-track { height:8px; border-radius:6px; background:var(--border); overflow:hidden; }
.ch-ai-progress-fill { height:100%; background:var(--accent); border-radius:6px; transition:width .35s ease; }
.ch-ai-progress-warn { margin-top:.8rem; font-size:.82rem; color:var(--muted,#9e9187); display:flex; align-items:center; gap:.4rem; }
.ch-ai-progress-warn svg { width:15px; height:15px; stroke:var(--muted,#9e9187); fill:none; stroke-width:1.8; flex-shrink:0; }

/* ============================================================
   MOBIELE FIXES (bugronde) — staat bewust als laatste in het
   bestand zodat deze regels bij gelijke specificiteit winnen.
   Casa Hero wordt veel op de telefoon beheerd.
   ============================================================ */
@media (max-width:700px){
  /* iOS zoomt in bij focus op inputs <16px. Forceer ≥16px op alle
     admin-invoervelden om dat ongewenste inzoomen te voorkomen. */
  .admin-page input:not([type="checkbox"]):not([type="radio"]),
  .admin-page select,
  .admin-page textarea,
  .fg input, .fg select, .fg textarea,
  #loginWrap input,
  .aanvr-fg input, .ws-tr-input, .vz-picker-search {
    font-size:16px !important;
  }

  /* Taalmenu klapte onder de header uit maar werd door overflow:hidden
     afgekapt → onklikbaar. Header niet meer clippen. */
  .admin-header { overflow:visible !important; }

  /* Grotere touch-targets (≥ ~40px) voor primaire mobiele acties. */
  .modal-x { width:42px !important; height:42px !important; }
  /* Sectie-herschik: pijltjes naast elkaar i.p.v. gestapeld-klein, elk 44x44;
     oog- en bewerk-knop mee op 44px zodat de hele actie-rij gelijk uitlijnt. */
  .sectie-pijlen { flex-direction:row !important; gap:.4rem !important; }
  .sectie-pijl-btn { width:44px !important; height:44px !important; }
  .sectie-oog-btn { width:44px !important; height:44px !important; }
  .sectie-bewerk-btn { min-height:44px !important; }
  .ws-tr-flag { min-width:46px !important; width:auto !important; height:36px !important; padding:0 .6rem !important; font-size:.82rem !important; }
  .stats-tab { padding:.6rem 1rem !important; font-size:.9rem !important; }
  #pxPopup .pp-close { width:40px !important; height:40px !important; font-size:1.4rem !important; display:flex !important; align-items:center; justify-content:center; }
  .ws-tr-close { width:36px !important; height:36px !important; }

  /* Rich-text-toolbar (huisregels/route/privacy) + SES deel-link-knoppen:
     op de telefoon comfortabele tikdoelen i.p.v. 24px-icoontjes. */
  .txt-toolbar button { min-width:44px; min-height:44px; font-size:1rem; }
  .ses-link-row .btn { min-height:44px; }
  .ses-actions .btn { min-height:44px; }
}

@media (max-width:600px){
  /* Kaarten "Apparaat" en "Top landen" (inline 2-koloms grid) onder
     elkaar op smalle schermen i.p.v. verdrukt naast elkaar. */
  .stat-two-col { grid-template-columns:1fr !important; }
}

@media (max-width:500px){
  /* Kalendercellen: status/prijs leesbaar houden zonder onleesbare ~7px.
     Staat ná de basisregels zodat de mobiele maat wint. */
  .admin-page#page-kalender .acd .acd-status { font-size:.6rem !important; line-height:1.15; }
  .admin-page#page-kalender .acd .acd-status.acd-x { font-size:.95rem !important; }
  .admin-page#page-kalender .acd .acd-price  { font-size:.62rem !important; }
}

/* AI-naleescheck nudge op de inhoud-pagina — subtiel, sluitbaar */
.ai-check-nudge { display:flex; align-items:flex-start; gap:.7rem; background:#fbf9f4; border:1px solid #e8e0cf; border-left:3px solid #c8b47e; border-radius:10px; padding:.9rem 1.1rem; margin:0 0 1.4rem; font-size:.9rem; line-height:1.5; color:#5c5647; }
.ai-check-nudge svg { flex:0 0 auto; width:20px; height:20px; margin-top:.1rem; color:#c8b47e; }
.ai-check-nudge .ai-check-close { margin-left:auto; flex:0 0 auto; background:none; border:none; cursor:pointer; color:#a89f8a; font-size:1.2rem; line-height:1; padding:.1rem .3rem; border-radius:6px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.ai-check-nudge .ai-check-close:hover { background:#f0ead9; color:#5c5647; }