/* Operio webapp — hoofd-stylesheet (uit index.html gesplitst, stijl A). */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root {
    color-scheme: dark;
    /* Rustig slate-dark palet (zie ook css/design-system.css) */
    --bg: #141419;
    --bg2: #191A21;
    --bg3: #232430;
    --card: #1C1D24;
    --border: #2B2C37;
    --red: #7C5CFC;
    --red2: #e74c3c;
    --gold: #A78BFA;
    --green: #2ecc71;
    --orange: #e67e22;
    --blue: #3498db;
    --purple: #8e44ad;
    --text: #EDEDF2;
    --text2: #A6A8B4;
    --text3: #8A8C99;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  body { background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; overflow-x:hidden; }
  
  /* SCREENS */
  .screen { display:none; min-height:100vh; flex-direction:column; }
  .screen.active { display:flex; }

  /* LOGIN */
  #screen-login { align-items:center; justify-content:center; padding:30px 24px; background: radial-gradient(ellipse at top, #0c1a3a 0%, #0b0e14 70%); }
  .login-logo { width:240px; height:auto; object-fit:contain; margin-bottom:24px; filter:drop-shadow(0 8px 30px rgba(31,116,255,0.45)); }
  .login-logo-placeholder { width:160px; height:160px; background:var(--red); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:60px; margin-bottom:24px; }
  .login-title { font-size:28px; font-weight:800; margin-bottom:6px; color:var(--text1); }
  .login-sub { color:var(--text2); font-size:14px; margin-bottom:36px; }
  .login-form { width:100%; max-width:380px; }
  .input-wrap { position:relative; margin-bottom:14px; }
  .input-wrap svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text3); }
  .input-wrap input { width:100%; background:var(--bg3); border:1.5px solid var(--border); border-radius:12px; padding:15px 16px 15px 46px; font-size:16px; color:var(--text); outline:none; transition:border 0.2s; }
  .input-wrap input:focus { border-color:var(--red); }
  .eye-btn { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text3); cursor:pointer; padding:10px; }
  .btn-login { width:100%; background:var(--red); color:white; border:none; border-radius:12px; padding:17px; font-size:16px; font-weight:700; letter-spacing:1px; cursor:pointer; margin-top:6px; transition:background 0.2s; }
  .btn-login:active { background:var(--red2); }
  .login-forgot { text-align:center; margin-top:18px; color:var(--gold); font-size:13px; cursor:pointer; }
  .login-footer { position:absolute; bottom:24px; color:var(--text3); font-size:12px; text-align:center; }
  .error-msg { background:#3d1515; border:1px solid #e74c3c; border-radius:10px; padding:12px; color:#ff6b6b; font-size:13px; margin-bottom:14px; text-align:center; display:none; }

  /* HEADER */
  .app-header { background:var(--bg2); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
  .header-logo { height:36px; object-fit:contain; }
  .header-logo-text { font-size:16px; font-weight:800; color:var(--gold); }
  .header-menu { background:none; border:none; color:var(--text); cursor:pointer; padding:4px; }
  .header-user { background:var(--bg3); border:1px solid var(--border); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; font-weight:700; color:var(--gold); }

  /* MAIN CONTENT */
  .app-content { flex:1; overflow-y:auto; padding:20px 16px; padding-bottom:80px; }

  /* HOME */
  .welkom-title { font-size:26px; font-weight:800; margin-bottom:4px; }
  .welkom-sub { color:var(--text2); font-size:14px; margin-bottom:24px; }
  .menu-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; display:flex; align-items:center; gap:16px; margin-bottom:12px; cursor:pointer; transition:all 0.2s; text-decoration:none; color:var(--text); }
  .menu-item:active { transform:scale(0.98); background:var(--bg3); }
  .menu-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
  .menu-icon.red { background:rgba(31,116,255,0.18); }
  .menu-icon.orange { background:rgba(230,126,34,0.2); }
  .menu-icon.dark-red { background:rgba(31,116,255,0.13); }
  .menu-icon.purple { background:rgba(142,68,173,0.2); }
  .menu-icon.blue { background:rgba(41,128,185,0.2); }
  .menu-text { flex:1; }
  .menu-text h3 { font-size:16px; font-weight:600; }
  .menu-text p { font-size:12px; color:var(--text2); margin-top:2px; }
  .menu-arrow { color:var(--text3); font-size:18px; }

  /* STATS BALK */
  .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; }
  .stat-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 8px; text-align:center; }
  .stat-icon { font-size:20px; margin-bottom:4px; }
  .stat-label { font-size:12px; color:var(--text2); line-height:1.2; margin-bottom:4px; }
  .stat-value { font-size:22px; font-weight:800; }
  .stat-value.red { color:var(--red2); }
  .stat-value.orange { color:var(--orange); }
  .stat-value.purple { color:var(--purple); }
  .stat-value.blue { color:var(--blue); }
  .sync-bar { text-align:center; color:var(--text3); font-size:12px; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:6px; }

  /* SUBPAGINA HEADER */
  .sub-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
  .back-btn { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text); cursor:pointer; font-size:14px; display:flex; align-items:center; gap:6px; min-height:44px; min-width:44px; }
  .sub-title { font-size:20px; font-weight:800; flex:1; }

  /* KLANT KAART */
  .klant-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:10px; cursor:pointer; transition:all 0.2s; }
  .klant-card:active { transform:scale(0.98); }
  .klant-naam { font-size:15px; font-weight:600; }
  .klant-info { font-size:12px; color:var(--text2); margin-top:4px; }
  .klant-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; margin-top:8px; }
  .badge-green { background:rgba(39,174,96,0.2); color:#2ecc71; }
  .badge-orange { background:rgba(230,126,34,0.2); color:var(--orange); }
  .badge-red { background:rgba(192,57,43,0.2); color:var(--red2); }

  /* FORMULIER */
  .form-group { margin-bottom:16px; }
  .form-label { font-size:12px; color:var(--text2); margin-bottom:6px; display:block; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
  .form-input { width:100%; background:var(--bg3); border:1.5px solid var(--border); border-radius:10px; padding:13px 14px; font-size:16px; color:var(--text); outline:none; transition:border 0.2s; box-sizing:border-box; }
  input[type="date"].form-input { max-width:100%; }
  .form-input:focus { border-color:var(--red); }
  .form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
  .form-textarea { resize:none; height:90px; }
  .form-section { font-size:13px; font-weight:700; color:var(--gold); margin:20px 0 12px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); padding-bottom:8px; }
  .meter-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .omzet-preview { background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.3); border-radius:10px; padding:14px; text-align:center; margin:12px 0; }
  .omzet-preview .label { font-size:12px; color:var(--text2); }
  .omzet-preview .bedrag { font-size:24px; font-weight:800; color:var(--green); }

  /* KNOPPEN */
  .btn { width:100%; padding:16px; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; margin-bottom:10px; }
  .btn:active { transform:scale(0.98); }
  .btn-primary { background:var(--red); color:white; }
  .btn-primary:active { background:var(--red2); }
  .btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
  .btn-green { background:var(--green); color:white; }
  .btn-orange { background:var(--orange); color:white; }

  /* AUTOMAAT ITEM */
  .automaat-item { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px; }
  .automaat-naam { font-size:14px; font-weight:600; margin-bottom:8px; }
  .automaat-nr { font-size:11px; color:var(--text3); }

  /* STORING CARD */
  .storing-item { background:var(--card); border-left:3px solid var(--red2); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; }
  .storing-item.opgelost { border-left-color:var(--green); opacity:0.7; }
  .storing-datum { font-size:11px; color:var(--text3); margin-bottom:4px; }
  .storing-omschrijving { font-size:14px; font-weight:500; }
  .storing-klant { font-size:12px; color:var(--text2); margin-top:4px; }

  /* VERGUNNING CARD */
  .verg-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; }
  .verg-naam { font-size:15px; font-weight:600; }
  .verg-datum { font-size:12px; color:var(--text2); margin-top:4px; }
  .verg-status { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
  .verg-ok { background:rgba(39,174,96,0.15); color:#2ecc71; }
  .verg-warn { background:rgba(230,126,34,0.15); color:var(--orange); }
  .verg-expired { background:rgba(192,57,43,0.15); color:var(--red2); }
  .acc-red{border-left:4px solid var(--red2)!important;} .acc-orange{border-left:4px solid var(--orange)!important;} .acc-green{border-left:4px solid var(--green)!important;} .acc-blue{border-left:4px solid var(--red)!important;} .acc-purple{border-left:4px solid var(--purple)!important;}

  /* NOTITIE */
  .notitie-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; }
  .notitie-datum { font-size:11px; color:var(--text3); margin-bottom:6px; }
  .notitie-tekst { font-size:14px; line-height:1.5; }
  .notitie-koppeling { font-size:12px; color:var(--blue); margin-top:6px; }

  /* ZOEKBALK */
  .search-wrap { position:relative; margin-bottom:16px; }
  .search-wrap input { width:100%; background:var(--bg3); border:1.5px solid var(--border); border-radius:12px; padding:13px 14px 13px 44px; font-size:14px; color:var(--text); outline:none; }
  .search-wrap input:focus { border-color:var(--red); }
  .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; }

  /* SUCCES SCHERM */
  .succes-screen { text-align:center; padding:40px 20px; }
  .succes-icon { font-size:70px; margin-bottom:20px; }
  .succes-title { font-size:22px; font-weight:800; margin-bottom:10px; }
  .succes-sub { color:var(--text2); font-size:14px; margin-bottom:30px; line-height:1.6; }

  /* QR SCAN */
  .qr-area { background:var(--bg3); border:2px dashed var(--border); border-radius:var(--radius); padding:40px 20px; text-align:center; margin:20px 0; cursor:pointer; transition:border 0.2s; }
  .qr-area:active { border-color:var(--red); }
  .qr-icon { font-size:60px; margin-bottom:16px; }
  .qr-text { color:var(--text2); font-size:14px; }

  /* BOTTOM NAV */
  .bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--bg2); border-top:1px solid var(--border); display:flex; z-index:200; padding-bottom:env(safe-area-inset-bottom); }
  .nav-item { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 4px; cursor:pointer; color:var(--text3); transition:color 0.2s; font-size:10px; gap:4px; }
  .nav-item.active { color:var(--red); }
  .nav-item svg { width:22px; height:22px; }
  .offline-banner { background:#b9770e; color:#fff; text-align:center; padding:7px 10px; font-size:12px; font-weight:600; display:none; }
  .offline-banner.zichtbaar { display:block; }

  /* TOAST */
  .toast { position:fixed; bottom:calc(70px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:12px 20px; font-size:13px; z-index:999; opacity:0; transition:opacity 0.3s; white-space:nowrap; max-width:90vw; text-align:center; }
  .toast.show { opacity:1; }
  .toast.success { border-color:var(--green); color:#2ecc71; }
  .toast.error { border-color:var(--red); color:var(--red2); }

  /* DIVIDER */
  .divider { border:none; border-top:1px solid var(--border); margin:16px 0; }

  /* TABS */
  .tabs { display:flex; background:var(--bg3); border-radius:12px; padding:4px; margin-bottom:16px; gap:4px; }
  .tab { flex:1; padding:10px; text-align:center; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text2); transition:all 0.2s; }
  .tab.active { background:var(--red); color:white; }

  /* LOADING */
  .loading { text-align:center; padding:40px; color:var(--text3); }
  .empty-state { text-align:center; padding:40px 20px; color:var(--text2); }
  .empty-state .empty-icon { font-size:48px; margin-bottom:16px; }
  .empty-state p { font-size:14px; line-height:1.6; }
  .spinner { display:inline-block; width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--red); border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:10px; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* KLANT DETAIL */
  .detail-header { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
  .detail-naam { font-size:20px; font-weight:800; }
  .detail-info { font-size:13px; color:var(--text2); margin-top:6px; line-height:1.8; }
  .actie-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .actie-btn { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 12px; text-align:center; cursor:pointer; transition:all 0.2s; }
  .actie-btn:active { transform:scale(0.96); background:var(--bg3); }
  .actie-btn .icon { font-size:28px; margin-bottom:8px; }
  .actie-btn .label { font-size:13px; font-weight:600; }
  .actie-btn .sub { font-size:11px; color:var(--text2); margin-top:2px; }

  @media (prefers-color-scheme: light) {
    body { background:#f5f5f5; color:#1a1a1a; }
  }
  /* HOME — statuschips + grote actie-tegels (fase 7) */
  .chip-row { display:flex; gap:8px; margin:16px 0 18px; }
  .chip { flex:1; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 8px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
  .chip:active { background:var(--bg3); }
  .chip-val { font-size:22px; font-weight:700; line-height:1; }
  .chip-val.red{color:var(--red2);} .chip-val.orange{color:var(--orange);} .chip-val.purple{color:var(--purple);} .chip-val.blue{color:var(--blue);}
  .chip-lbl { font-size:11px; color:var(--text2); }
  .chip.c-red{border-top:3px solid var(--red2);} .chip.c-orange{border-top:3px solid var(--orange);} .chip.c-purple{border-top:3px solid var(--purple);} .chip.c-blue{border-top:3px solid var(--blue);}
  .tegel-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .tegel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 14px; display:flex; flex-direction:column; gap:12px; cursor:pointer; min-height:100px; transition:border-color 0.15s, background 0.15s; }
  .tegel:active { background:var(--bg3); border-color:var(--red); }
  .tegel-label { font-size:15px; font-weight:600; color:var(--text); }
  .menu-icon.teal { background:rgba(22,160,133,0.2); }
  .menu-icon.green { background:rgba(46,204,113,0.2); }

  .bic { display:inline-block; margin-right:6px; }
  .menu-icon svg { vertical-align:middle; }