/* ══════════════════════════════════════════════════════════════════════════
   sundo-shell.css — gedeelde schil voor alle KPI-pagina's
   ══════════════════════════════════════════════════════════════════════════
   Eén bron voor header, paginanavigatie, filterknop, tabbladen, kaarten en
   tabellen. Wordt gebruikt door:
     /         kpi_dashboard_demo.html   (startscherm)
     /weekly   kpi_weekly.html           (weekrapportage)
     /detail   kpi_dashboard.html        (werkbank)

   Pagina's die het volledige scherm vullen zetten class="app" op <body>.
   Pagina's die scrollen (zoals de werkbank) laten dat weg.

   --scale schaalt de hele schil in één keer; het kantoorscherm staat verder
   weg dan een bureaumonitor. De knoppen +/- in de header zetten hem.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --yellow:#F8B831; --blue:#426F86; --beige:#EFEBE8; --green:#458B6C;
  --red:#F7155D; --amber:#F59E0B; --gray:#9CA3AF; --dark:#1E2A35;
  --card:#FFFFFF; --bg:#EDE9E5; --muted:#7A8A95; --grid:#E2DDD9; --border:#D8D2CC;
  --card-shadow:0 1px 4px rgba(0,0,0,.07);
  --scale:1;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--dark);
     font-size:calc(16px * var(--scale));}
body.app{height:100vh;overflow:hidden;display:flex;flex-direction:column;}

/* ── Header ─────────────────────────────────────────────────────────────── */
.sh-header{display:flex;align-items:center;gap:calc(14px * var(--scale));
           padding:0 calc(28px * var(--scale));min-height:calc(62px * var(--scale));
           background:#fff;border-bottom:4px solid var(--yellow);flex-shrink:0;
           box-shadow:0 2px 8px rgba(0,0,0,.06);flex-wrap:wrap;}
.sh-logo{display:flex;align-items:center;gap:calc(9px * var(--scale));flex-shrink:0;}
.sh-logo svg,.sh-logo img{height:calc(30px * var(--scale));width:auto;display:block;}
/* Het logobestand is in Sundo-geel opgemaakt. Voor een donkere achtergrond
   maken we het wit met een filter, zodat er maar één bestand nodig is. */
.sh-logo-img{filter:none;}
.sh-logo-img.light{filter:brightness(0) invert(1);}
.sh-badge{background:var(--blue);color:#fff;font-size:calc(.58rem * var(--scale));
          font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.06em;
          text-transform:uppercase;}
.sh-spacer{flex:1;}

/* Paginanavigatie — dezelfde drie links op elke pagina */
.sh-nav{display:flex;gap:calc(4px * var(--scale));}
.sh-nav a{text-decoration:none;font-size:calc(.72rem * var(--scale));font-weight:600;
          color:var(--muted);padding:calc(5px * var(--scale)) calc(12px * var(--scale));
          border-radius:6px;border:1.5px solid transparent;white-space:nowrap;
          transition:all .15s;}
.sh-nav a:hover{color:var(--blue);border-color:var(--border);}
.sh-nav a.active{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Bedieningselementen rechts */
.sh-controls{display:flex;align-items:center;gap:calc(10px * var(--scale));flex-wrap:wrap;}
.sh-lbl{font-size:calc(.6rem * var(--scale));color:var(--muted);text-transform:uppercase;
        letter-spacing:.09em;font-weight:600;}
.sh-sel{appearance:none;-webkit-appearance:none;background:var(--beige);
        border:1.5px solid var(--border);border-radius:6px;
        padding:calc(5px * var(--scale)) calc(30px * var(--scale)) calc(5px * var(--scale)) calc(11px * var(--scale));
        font-family:'Poppins',sans-serif;font-size:calc(.76rem * var(--scale));font-weight:600;
        color:var(--dark);cursor:pointer;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A8A95'/%3E%3C/svg%3E");
        background-repeat:no-repeat;background-position:right 9px center;transition:border-color .15s;}
.sh-sel:hover,.sh-sel:focus{border-color:var(--blue);outline:none;}
.sh-btn{background:var(--beige);border:1.5px solid var(--border);border-radius:6px;
        padding:calc(5px * var(--scale)) calc(10px * var(--scale));cursor:pointer;
        font-family:'Poppins',sans-serif;font-size:calc(.74rem * var(--scale));
        font-weight:600;color:var(--dark);transition:all .15s;white-space:nowrap;}
.sh-btn:hover{border-color:var(--blue);color:var(--blue);}
/* Toepassen-knop: grijs en uitgeschakeld zolang er niets openstaat, geel en
   pulserend zodra een filter om een herberekening vraagt. */
.sh-apply{min-width:calc(88px * var(--scale));}
.sh-apply:disabled{opacity:.45;cursor:default;color:var(--muted);}
.sh-apply:disabled:hover{border-color:var(--border);color:var(--muted);}
.sh-apply.dirty{background:var(--yellow);border-color:var(--yellow);color:var(--dark);
                font-weight:700;animation:sh-pulse 1.6s ease-in-out infinite;}
.sh-apply.dirty:hover{background:#e5a821;border-color:#e5a821;color:var(--dark);}
@keyframes sh-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(248,184,49,.55);}
  50%    {box-shadow:0 0 0 calc(5px * var(--scale)) rgba(248,184,49,0);}
}
.sh-clock{font-size:calc(.76rem * var(--scale));color:var(--muted);
          font-variant-numeric:tabular-nums;white-space:nowrap;}
.sh-meta{font-size:calc(.6rem * var(--scale));color:var(--muted);text-align:right;line-height:1.35;}
.sh-meta b{color:var(--dark);font-weight:600;}

/* ── Filterknop met uitklappaneel ───────────────────────────────────────── */
/* Vervangt de vroegere chipbalk over de volle breedte: die nam een hele regel
   in beslag terwijl je hem maar zelden aanraakt. */
.sh-filter{position:relative;}
.sh-filter-btn{display:inline-flex;align-items:center;gap:calc(7px * var(--scale));
               background:var(--beige);border:1.5px solid var(--border);border-radius:6px;
               padding:calc(5px * var(--scale)) calc(12px * var(--scale));cursor:pointer;
               font-family:'Poppins',sans-serif;font-size:calc(.76rem * var(--scale));
               font-weight:600;color:var(--dark);transition:all .15s;white-space:nowrap;}
.sh-filter-btn:hover{border-color:var(--blue);color:var(--blue);}
.sh-filter-btn.filtered{background:var(--blue);color:#fff;border-color:var(--blue);}
.sh-filter-btn .caret{font-size:calc(.6rem * var(--scale));opacity:.7;}
.sh-filter-btn .count{background:rgba(0,0,0,.09);border-radius:999px;
                      padding:1px calc(7px * var(--scale));font-size:calc(.66rem * var(--scale));
                      font-variant-numeric:tabular-nums;}
.sh-filter-btn.filtered .count{background:rgba(255,255,255,.22);}

.sh-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:200;
        background:#fff;border:1px solid var(--border);border-radius:10px;
        box-shadow:0 12px 34px rgba(30,42,53,.22);
        min-width:calc(250px * var(--scale));max-height:calc(70vh);overflow:auto;
        padding:calc(8px * var(--scale));display:none;}
.sh-pop.open{display:block;}
.sh-pop-head{display:flex;align-items:center;gap:8px;
             padding:calc(4px * var(--scale)) calc(8px * var(--scale)) calc(8px * var(--scale));
             border-bottom:1px solid var(--grid);margin-bottom:calc(5px * var(--scale));}
.sh-pop-head .t{font-size:calc(.6rem * var(--scale));color:var(--muted);font-weight:600;
                text-transform:uppercase;letter-spacing:.09em;flex:1;}
.sh-pop-head button{background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;
                    font-size:calc(.68rem * var(--scale));font-weight:600;color:var(--blue);
                    padding:2px 6px;border-radius:4px;}
.sh-pop-head button:hover{background:var(--beige);}
.sh-opt{display:flex;align-items:center;gap:calc(9px * var(--scale));
        padding:calc(6px * var(--scale)) calc(9px * var(--scale));border-radius:6px;
        cursor:pointer;user-select:none;font-size:calc(.8rem * var(--scale));
        transition:background .12s;}
.sh-opt:hover{background:var(--beige);}
.sh-opt .box{width:calc(15px * var(--scale));height:calc(15px * var(--scale));
             border-radius:4px;border:1.8px solid var(--border);flex-shrink:0;
             display:flex;align-items:center;justify-content:center;
             font-size:calc(.62rem * var(--scale));color:#fff;line-height:1;}
.sh-opt.on .box{background:var(--blue);border-color:var(--blue);}
.sh-opt .swatch{width:calc(9px * var(--scale));height:calc(9px * var(--scale));
                border-radius:2px;flex-shrink:0;}
.sh-opt.off .swatch{opacity:.28;}
.sh-opt .nm{flex:1;font-weight:500;}
.sh-opt.off .nm{color:var(--gray);}
.sh-opt .sub{font-size:calc(.66rem * var(--scale));color:var(--muted);
             font-variant-numeric:tabular-nums;}

/* Periodekiezer */
.sh-dates{display:flex;gap:calc(8px * var(--scale));padding:calc(4px * var(--scale)) calc(8px * var(--scale));}
.sh-dates label{flex:1;display:flex;flex-direction:column;gap:3px;
                font-size:calc(.6rem * var(--scale));color:var(--muted);
                text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.sh-date{border:1.5px solid var(--border);border-radius:6px;
         padding:calc(5px * var(--scale)) calc(8px * var(--scale));
         font-family:'Poppins',sans-serif;font-size:calc(.76rem * var(--scale));
         color:var(--dark);outline:none;background:#fff;}
.sh-date:focus{border-color:var(--blue);}
.sh-quick{display:flex;gap:calc(5px * var(--scale));
          padding:calc(7px * var(--scale)) calc(8px * var(--scale)) calc(3px * var(--scale));}
.sh-quick button{flex:1;background:var(--beige);border:1.5px solid var(--border);border-radius:6px;
                 padding:calc(4px * var(--scale)) 0;cursor:pointer;
                 font-family:'Poppins',sans-serif;font-size:calc(.7rem * var(--scale));
                 font-weight:600;color:var(--dark);transition:all .15s;}
.sh-quick button:hover{border-color:var(--blue);color:var(--blue);}
.sh-hint{font-size:calc(.63rem * var(--scale));color:var(--muted);
         padding:calc(6px * var(--scale)) calc(9px * var(--scale)) calc(3px * var(--scale));}

/* Toestelkiezer */
.sh-search{width:calc(100% - calc(16px * var(--scale)));
           margin:calc(2px * var(--scale)) calc(8px * var(--scale)) calc(6px * var(--scale));
           border:1.5px solid var(--border);border-radius:6px;
           padding:calc(6px * var(--scale)) calc(9px * var(--scale));
           font-family:'Poppins',sans-serif;font-size:calc(.76rem * var(--scale));outline:none;}
.sh-search:focus{border-color:var(--blue);}
.sh-pop-list{max-height:calc(320px * var(--scale));overflow:auto;}

/* ── Titelbalk ──────────────────────────────────────────────────────────── */
.sh-title{background:var(--blue);color:#fff;flex-shrink:0;
          padding:calc(9px * var(--scale)) calc(28px * var(--scale));
          display:flex;align-items:baseline;gap:calc(14px * var(--scale));flex-wrap:wrap;}
.sh-title h1{font-size:calc(1rem * var(--scale));font-weight:600;letter-spacing:.02em;}
.sh-title .sub{font-size:calc(.74rem * var(--scale));color:rgba(255,255,255,.72);}
.sh-title .pill{margin-left:auto;background:var(--yellow);color:var(--dark);font-weight:700;
                font-size:calc(.8rem * var(--scale));
                padding:calc(3px * var(--scale)) calc(14px * var(--scale));border-radius:999px;}

/* ── Tabbladen ──────────────────────────────────────────────────────────── */
.tab-nav{display:flex;align-items:center;gap:calc(6px * var(--scale));background:var(--blue);
         padding:calc(8px * var(--scale)) calc(28px * var(--scale));flex-shrink:0;flex-wrap:wrap;
         border-top:1px solid rgba(255,255,255,.12);}
.tab-btn{padding:calc(5px * var(--scale)) calc(20px * var(--scale));border-radius:6px;
         border:1.5px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.72);
         font-family:'Poppins',sans-serif;font-size:calc(.8rem * var(--scale));font-weight:500;
         cursor:pointer;transition:all .15s;}
.tab-btn.active{background:var(--yellow);color:var(--dark);border-color:var(--yellow);
                font-weight:700;box-shadow:0 2px 8px rgba(248,184,49,.4);}
.tab-btn:hover:not(.active){border-color:rgba(255,255,255,.55);color:#fff;}
.tab-nav .spacer{flex:1;}
.tab-arrow{background:transparent;border:none;color:rgba(255,255,255,.55);
           font-size:calc(1.1rem * var(--scale));cursor:pointer;padding:2px 8px;transition:color .15s;}
.tab-arrow:hover{color:var(--yellow);}
.metric-chips{display:flex;align-items:center;gap:calc(6px * var(--scale));}
.metric-chips.hidden{visibility:hidden;}
.metric-chips > span{font-size:calc(.6rem * var(--scale));color:rgba(255,255,255,.6);
                     text-transform:uppercase;letter-spacing:.09em;font-weight:600;margin-right:2px;}
.chip{padding:calc(3px * var(--scale)) calc(12px * var(--scale));border-radius:999px;
      font-size:calc(.7rem * var(--scale));font-weight:600;cursor:pointer;
      border:1.5px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.75);
      font-family:'Poppins',sans-serif;transition:all .15s;}
.chip:hover:not(.on){border-color:rgba(255,255,255,.6);color:#fff;}
.chip.on{background:var(--yellow);color:var(--dark);border-color:var(--yellow);}
.progress-bar{height:3px;background:rgba(66,111,134,.25);flex-shrink:0;}
.progress-fill{height:100%;background:var(--yellow);transition:width .1s linear;}

/* ── Hoofdgebied ────────────────────────────────────────────────────────── */
.wrap{flex:1;min-height:0;overflow:hidden;
      padding:calc(14px * var(--scale)) calc(28px * var(--scale)) calc(18px * var(--scale));
      display:flex;flex-direction:column;}
.view{display:none;flex:1;min-height:0;flex-direction:column;gap:calc(12px * var(--scale));}
.view.active{display:flex;}
.view.scroll{overflow-y:auto;}

.section-lbl{font-size:calc(.64rem * var(--scale));font-weight:700;color:var(--blue);
             text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;
             gap:8px;margin-bottom:calc(8px * var(--scale));}
.section-lbl::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Kaarten ────────────────────────────────────────────────────────────── */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(160px * var(--scale)),1fr));
           gap:calc(12px * var(--scale));flex-shrink:0;}
.kpi-card{background:var(--card);border-radius:10px;
          padding:calc(13px * var(--scale)) calc(18px * var(--scale));
          box-shadow:var(--card-shadow);border:1px solid var(--border);
          border-left-width:4px;border-left-style:solid;border-left-color:var(--blue);}
.kpi-card .kpi-label{font-size:calc(.62rem * var(--scale));color:var(--muted);
                     text-transform:uppercase;letter-spacing:.08em;font-weight:600;
                     margin-bottom:calc(5px * var(--scale));}
.kpi-row{display:flex;align-items:baseline;gap:calc(10px * var(--scale));flex-wrap:wrap;}
.kpi-value{font-size:calc(1.9rem * var(--scale));font-weight:700;line-height:1;
           font-variant-numeric:tabular-nums;}
.kpi-sub{font-size:calc(.66rem * var(--scale));color:var(--muted);margin-top:calc(5px * var(--scale));}
.acc-green{border-left-color:var(--green);} .acc-red{border-left-color:var(--red);}
.acc-amber{border-left-color:var(--amber);} .acc-yellow{border-left-color:var(--yellow);}
.acc-blue{border-left-color:var(--blue);}

.panel{background:var(--card);border-radius:10px;border:1px solid var(--border);
       box-shadow:var(--card-shadow);
       padding:calc(14px * var(--scale)) calc(18px * var(--scale));}
.panel.grow{flex:1;min-height:0;display:flex;flex-direction:column;}
.panel h3{font-size:calc(.66rem * var(--scale));color:var(--muted);text-transform:uppercase;
          letter-spacing:.08em;font-weight:600;margin-bottom:calc(10px * var(--scale));
          padding-bottom:calc(8px * var(--scale));border-bottom:1px solid var(--grid);
          display:flex;align-items:center;gap:10px;}
.panel h3 .spacer{flex:1;}
.chart-panel{flex:1;min-height:0;display:flex;flex-direction:column;}
.chart-panel canvas{flex:1;min-height:0;width:100% !important;}
.chart-row{display:grid;gap:calc(12px * var(--scale));}
.chart-row.cols-2{grid-template-columns:1fr 1fr;}
.chart-row.cols-1{grid-template-columns:1fr;}

/* ── Verschil t.o.v. vorige periode ─────────────────────────────────────── */
.delta{display:inline-flex;align-items:center;gap:4px;font-weight:700;
       font-size:calc(.8rem * var(--scale));
       padding:calc(2px * var(--scale)) calc(9px * var(--scale));
       border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.delta.up{background:rgba(69,139,108,.14);color:var(--green);}
.delta.down{background:rgba(247,21,93,.12);color:var(--red);}
.delta.flat{background:rgba(122,138,149,.14);color:var(--muted);}
.delta .arw{font-size:calc(.9rem * var(--scale));line-height:1;}
.delta.sm{font-size:calc(.7rem * var(--scale));padding:calc(1px * var(--scale)) calc(7px * var(--scale));}

/* ── Overlays ───────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(30,42,53,.92);display:flex;
         align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
.overlay.hidden{display:none;}
.login-box,.loading-box{background:#fff;border-radius:16px;padding:40px 44px;width:360px;
                        box-shadow:0 20px 60px rgba(0,0,0,.35);}
.loading-box{text-align:center;padding:48px 44px;}
.login-box .lb-logo{margin-bottom:24px;}
.login-box .lb-logo img{display:block;height:34px;width:auto;}
.login-box h2{font-size:1rem;font-weight:600;margin-bottom:6px;}
.login-box .lb-note{font-size:.76rem;color:var(--muted);margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.72rem;font-weight:600;color:var(--muted);
             text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;}
.field input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;
             font-family:'Poppins',sans-serif;font-size:.88rem;outline:none;transition:border-color .15s;}
.field input:focus{border-color:var(--blue);}
.login-btn{width:100%;padding:11px;background:var(--blue);color:#fff;border:none;border-radius:8px;
           font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;
           margin-top:6px;transition:background .15s;}
.login-btn:hover{background:#355a6e;} .login-btn:disabled{background:#aaa;cursor:default;}
.login-err{font-size:.78rem;color:var(--red);margin-top:10px;text-align:center;min-height:20px;}
.spinner{width:44px;height:44px;border:4px solid var(--beige);border-top-color:var(--blue);
         border-radius:50%;animation:sh-spin .8s linear infinite;margin:0 auto 18px;}
@keyframes sh-spin{to{transform:rotate(360deg);}}
.loading-box h3{font-size:.95rem;font-weight:600;margin-bottom:6px;}
.loading-box p{font-size:.78rem;color:var(--muted);}
.empty-state{padding:60px 20px;text-align:center;color:var(--muted);font-size:.9rem;}

::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}