/* ============================================================
   VILLA SUN OS — Dashboard, Mockup-faithful theme.
   Warm sunset photo background + frosted glass cards + white text.
   Sans-serif (SF Pro/Inter). KPI 2x2, half-gauge, horizontal
   module carousel, floating tab bar. Mobile 390px.
   ============================================================ */
:root{
  --amber:#E0A85C;
  --orange:#E08A4A;
  --red:#C0563E;
  --ocean:#6D9DB2;
  --sage:#92AC96;
  --ok:#7FB58A;
  --due:#E89A5C;
  --txt:#FFFFFF;
  --txt-soft:rgba(255,255,255,0.66);
  --txt-faint:rgba(255,255,255,0.42);
  --glass:rgba(255,255,255,0.12);
  --glass-strong:rgba(255,255,255,0.17);
  --glass-border:rgba(255,255,255,0.22);
  --r:20px;--r-sm:16px;--r-pill:999px;
  --inset:inset 0 1px 0 0 rgba(255,255,255,0.25);
  --shadow:0 8px 30px rgba(40,20,10,0.28);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;}
body{font-family:'Inter','SF Pro Display',-apple-system,sans-serif;color:var(--txt);
  background:#3a2418;min-height:100vh;display:flex;justify-content:center;-webkit-font-smoothing:antialiased;text-align:left;}
.km,.km *{font-family:'Noto Sans Khmer','Inter',sans-serif;}
.disp{font-family:'Inter','SF Pro Display',sans-serif;font-weight:700;letter-spacing:-0.02em;}

#app{width:390px;max-width:100vw;min-height:100vh;position:relative;
  background-image:linear-gradient(180deg,rgba(40,24,16,0.18) 0%,rgba(40,22,14,0.42) 60%,rgba(35,18,10,0.72) 100%),url('/assets/bg-dash.jpg?v=1');
  background-size:cover;background-position:center;background-attachment:local;
  padding:0 18px calc(env(safe-area-inset-bottom,0) + 100px);overflow:hidden;}
/* mood layer kept for compatibility but subtle */
#sky,#sun,#glow,#sunAnim,#glowAnim,#sheen{display:none!important;}

/* ===== HEADER ===== */
header{padding:calc(env(safe-area-inset-top,0) + 18px) 0 4px;}
.approw{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.approw .appname{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--txt-soft);}
.approw .appname svg,.approw .appname i{width:15px;height:15px;color:var(--amber);}
.approw .avatar{margin-left:auto;width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--amber),var(--orange));display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,0.45);box-shadow:var(--shadow);}
.approw .avatar svg,.approw .avatar i{width:17px;height:17px;color:#fff;}
.brand h1{font-size:30px;font-weight:700;line-height:1.05;color:var(--txt);letter-spacing:-0.02em;}
.brand .subt{font-size:13px;color:var(--txt-soft);margin-top:5px;font-weight:400;}
.chiprow{display:flex;align-items:center;gap:8px;margin-top:13px;flex-wrap:wrap;}
.datechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--txt);
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:6px 13px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--inset);}
.datechip svg,.datechip i{width:13px;height:13px;color:var(--amber);}
.langs{display:flex;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:3px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--inset);}
.lang-btn{border:0;background:none;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--txt-soft);padding:5px 11px;border-radius:var(--r-pill);font-family:inherit;transition:.2s;}
.lang-btn.on{background:linear-gradient(135deg,var(--amber),var(--orange));color:#fff;}

/* ===== glass base ===== */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:var(--r);box-shadow:var(--inset),var(--shadow);}

/* section label */
.sec{display:flex;align-items:center;gap:9px;margin:24px 0 12px;}
.sec h2{font-size:17px;font-weight:700;color:var(--txt);letter-spacing:-0.01em;}
.sec .arrows{margin-left:auto;display:flex;gap:7px;}
.sec .arrows button{width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass);
  color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.sec .arrows svg,.sec .arrows i{width:15px;height:15px;}

/* ===== KPI GRID 2x2 ===== */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kpi{position:relative;border-radius:var(--r);padding:15px 15px 16px;min-height:112px;display:flex;flex-direction:column;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-border);box-shadow:var(--inset),var(--shadow);cursor:pointer;font-family:inherit;text-align:left;
  transition:transform .18s ease;}
.kpi:active{transform:scale(.97);}
.kpi .kpi-top{display:flex;align-items:flex-start;gap:8px;}
.kpi .kpi-label{font-size:11px;font-weight:500;color:var(--txt-soft);line-height:1.3;flex:1;}
.kpi .kpi-ico{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--inset);}
.kpi .kpi-ico svg,.kpi .kpi-ico i{width:15px;height:15px;color:#fff;stroke-width:2.3;}
.kpi .kpi-num{margin-top:auto;font-size:32px;font-weight:700;line-height:1;color:var(--txt);letter-spacing:-0.02em;}
.kpi .kpi-num small{font-size:15px;color:var(--txt-soft);font-weight:600;}
.kpi .kpi-tag{position:absolute;right:14px;bottom:16px;font-size:10px;font-weight:600;color:var(--txt-soft);
  background:rgba(255,255,255,0.14);border-radius:var(--r-pill);padding:3px 8px;}

/* ===== HALF GAUGE CARD (Freie Zimmer) ===== */
.gaugecard{border-radius:var(--r);padding:16px 18px;margin-top:12px;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-border);box-shadow:var(--inset),var(--shadow);
  display:flex;align-items:center;gap:16px;}
.halfgauge{position:relative;width:130px;height:80px;flex:none;}
.halfgauge svg{width:130px;height:80px;overflow:visible;}
.halfgauge .hg-bg{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:11;stroke-linecap:round;}
.halfgauge .hg-fg{fill:none;stroke:url(#hgGrad);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);}
.halfgauge .hg-center{position:absolute;left:0;right:0;bottom:0;text-align:center;}
.halfgauge .hg-num{font-size:26px;font-weight:700;color:var(--txt);line-height:1;}
.halfgauge .hg-sub{font-size:9.5px;color:var(--txt-soft);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.gauge-side{flex:1;min-width:0;}
.gauge-side h3{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:10px;}
.gauge-rings{display:flex;flex-wrap:wrap;gap:8px;}
.gring{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;position:relative;
  border:2px solid rgba(255,255,255,0.30);font-size:10px;font-weight:700;color:var(--txt);cursor:pointer;
  background:rgba(255,255,255,0.06);text-transform:capitalize;}
.gring.full{border-color:rgba(224,138,74,0.7);}
.gring.free{border-color:rgba(127,181,138,0.85);background:rgba(127,181,138,0.16);}
.gring .gr-n{font-size:8.5px;line-height:1;}
.gauge-side .empty{font-size:12px;color:var(--txt-faint);}

/* ===== LIST CARDS (Check-in/out detail, cleaning) ===== */
.card{border-radius:var(--r);padding:15px;margin-bottom:12px;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-border);box-shadow:var(--inset),var(--shadow);}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.card-ico{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--inset);}
.card-ico svg,.card-ico i{width:15px;height:15px;color:#fff;stroke-width:2.3;}
.card-head h3{font-size:14.5px;font-weight:700;color:var(--txt);}
.count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;}
.rows{display:flex;flex-direction:column;gap:7px;}
.row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:13px;padding:9px 11px;transition:transform .12s;}
.row:active{transform:scale(.985);}
.badge{flex:none;width:58px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;text-transform:capitalize;
  background:linear-gradient(135deg,var(--orange),var(--amber));box-shadow:var(--inset);}
.rmain{flex:1;min-width:0;}
.rname{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rinfo{display:flex;flex-direction:column;gap:4px;margin-top:5px;}
.rinfo .pay{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:7px;white-space:nowrap;display:inline-block;width:fit-content;}
.rinfo .pay.due{background:rgba(224,138,74,.22);color:#FFD3A8;}
.rinfo .pay.zero{background:rgba(127,181,138,.22);color:#C2E8CB;}
.chev{flex:none;width:15px;height:15px;color:var(--txt-faint);align-self:center;}
.slot{display:flex;align-items:center;gap:7px;margin:11px 0 7px;font-size:12px;font-weight:700;color:var(--txt-soft);}
.slot:first-child{margin-top:0;}
.slot svg,.slot i{width:13px;height:13px;flex:none;}
.slot.amber svg,.slot.amber i{color:var(--amber);}
.slot.due{color:#FFD3A8;}.slot.due svg,.slot.due i{color:#FFD3A8;}
.empty{font-size:12px;color:var(--txt-faint);}

/* ===== MODULE CAROUSEL (horizontal) ===== */
.modscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;}
.modscroll::-webkit-scrollbar{display:none;}
/* Module untereinander (Eric 07.06): vertikaler Stack, volle Breite */
.modstack{display:flex;flex-direction:column;gap:12px;width:100%;}
.modstack .mod{flex:1 1 auto!important;width:100%!important;box-sizing:border-box;min-height:auto;}
.mod{scroll-snap-align:start;flex:0 0 200px;border-radius:var(--r-sm);padding:14px;cursor:pointer;font-family:inherit;text-align:left;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-border);box-shadow:var(--inset),var(--shadow);min-height:118px;display:flex;flex-direction:column;transition:transform .14s;}
.mod:active{transform:scale(.98);}
.mod-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.mod-ico{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--inset);}
.mod-ico svg,.mod-ico i{width:17px;height:17px;color:#fff;stroke-width:2;}
.mod-head h3{font-size:13.5px;font-weight:700;color:var(--txt);line-height:1.15;}
.mod-num{margin-left:auto;min-width:21px;height:21px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--red);}
.mod-lock{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--txt-faint);}
.mod-lock svg,.mod-lock i{width:12px;height:12px;}
.mod-desc{font-size:11px;color:var(--txt-soft);line-height:1.4;margin-top:auto;}

/* ===== STATUS ===== */
.statlist{display:flex;flex-direction:column;gap:7px;border-radius:var(--r-sm);padding:12px 14px;margin-top:6px;
  background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--inset);}
.statlist .srow{display:flex;align-items:center;gap:9px;font-size:12px;}
.statlist .sdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--txt-soft);}
.statlist .sdot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(127,181,138,.22);}
.statlist .sdot.warn{background:var(--amber);box-shadow:0 0 0 3px rgba(224,168,92,.22);}
.statlist .sdot.err{background:var(--red);box-shadow:0 0 0 3px rgba(192,86,62,.22);}
.statlist .slabel{font-weight:500;color:var(--txt-soft);}
.statlist .sval{margin-left:auto;font-weight:700;color:var(--txt);}
.foot{margin-top:11px;font-size:11px;color:var(--txt-faint);font-weight:500;}
.foot b{color:var(--txt-soft);}

/* ===== FLOATING TAB BAR ===== */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0) + 16px);
  width:330px;max-width:calc(100vw - 40px);height:62px;z-index:50;display:flex;align-items:center;justify-content:space-around;padding:0 10px;
  border-radius:var(--r-pill);background:rgba(40,26,18,0.55);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.20);box-shadow:var(--inset),0 12px 36px rgba(20,10,5,0.4);}
.tab{position:relative;display:flex;align-items:center;justify-content:center;flex:1;height:100%;border:0;background:none;cursor:pointer;font-family:inherit;color:var(--txt-soft);transition:.2s;text-decoration:none;}
.tab svg,.tab i{width:23px;height:23px;stroke-width:2;z-index:1;}
.tab.on{color:#fff;}
.tab.on::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,138,74,0.85),rgba(224,138,74,0.25) 70%);z-index:0;box-shadow:0 4px 14px rgba(224,138,74,.5);}
.tab.on svg,.tab.on i{color:#fff;}

.loading{font-size:13px;color:var(--txt-faint);padding:8px 2px;}
.hidden{display:none!important;}