/* ════════════════════════════════════════════════════════════
   RICEMILL TRACK — Duolingo-inspired theme
   Mobile-first, responsive, accessible touch targets
   ════════════════════════════════════════════════════════════ */

.hidden{display:none !important;}

:root{
  /* Duolingo palette */
  --pri:#58CC02;       --pri-dk:#46A302;     --pri-lt:#E8F8DD;     --pri-bd:#58A700;
  --blue:#1CB0F6;      --blue-dk:#0B8DCC;    --blue-lt:#DDF4FF;    --blue-bd:#1899D6;
  --ora:#FF9600;       --ora-dk:#E07F00;     --ora-lt:#FFF4E0;     --ora-bd:#E08600;
  --red:#FF4B4B;       --red-dk:#D63E3E;     --red-lt:#FFE4E4;     --red-bd:#E04141;
  --ylw:#FFC800;       --ylw-lt:#FFF8DC;     --pur:#CE82FF;        --pin:#FF86D0;

  /* Aliased to old variable names (JS/inline-style compat) */
  --pri-2:#1CB0F6;
  --ok:#58CC02;        --ok-lt:#E8F8DD;
  --warn:#FF9600;      --warn-lt:#FFF4E0;
  --err:#FF4B4B;       --err-lt:#FFE4E4;

  /* Greys (warm, slightly off-white like Duolingo) */
  --g50:#F7F7F7;       --g100:#EFEFEF;       --g200:#E5E5E5;       --g300:#D1D1D1;
  --g400:#AFAFAF;      --g500:#777777;       --g600:#4B4B4B;       --g700:#3C3C3C;       --g800:#2B2B2B;

  /* Dimensions */
  --sw:240px;          --th:60px;            --bnh:64px;           /* bottom nav h */
  --r:14px;            --r-lg:20px;          --r-sm:10px;
  --sh:0 2px 0 var(--g200);
  --sh-card:0 0 0 1px var(--g200);
  --sh-hover:0 6px 16px rgba(0,0,0,.08);
  --sh-pop:0 12px 32px rgba(0,0,0,.18);
}

/* ── Base ────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{overflow-x:hidden;}
body{
  font-family:'Nunito','Mali','Sarabun','Segoe UI',sans-serif;
  background:#FFFFFF;color:var(--g800);font-size:15px;line-height:1.5;
  font-weight:500;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;}
a{text-decoration:none;color:inherit;}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;width:var(--sw);height:100vh;background:#fff;
  border-right:2px solid var(--g100);display:flex;flex-direction:column;
  z-index:200;overflow-y:auto;transition:transform .25s ease;
  -webkit-overflow-scrolling:touch;
}
.sb-header{
  display:flex;align-items:center;gap:12px;padding:18px 16px;
  border-bottom:2px solid var(--g100);position:sticky;top:0;background:#fff;z-index:1;
}
.logo{font-size:32px;}
.logo-name{font-size:15px;font-weight:800;color:var(--g800);letter-spacing:-.02em;}
.logo-sub{font-size:11px;color:var(--g500);font-weight:600;}
.sb-close{
  display:none;margin-left:auto;background:none;border:none;font-size:22px;cursor:pointer;
  color:var(--g400);width:36px;height:36px;border-radius:10px;
}
.sb-close:hover{background:var(--g100);color:var(--g700);}

.nav-sep{
  font-size:10px;font-weight:800;color:var(--g400);text-transform:uppercase;
  letter-spacing:.1em;padding:14px 16px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:14px;font-weight:700;
  color:var(--g600);cursor:pointer;transition:all .15s;user-select:none;
  border-left:4px solid transparent;
}
.nav-item span{font-size:18px;width:22px;text-align:center;flex-shrink:0;}
.nav-item:hover{background:var(--g50);color:var(--g800);}
.nav-item.active{
  background:var(--pri-lt);color:var(--pri-bd);border-left-color:var(--pri);
}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;}

/* ── Main + topbar ────────────────────────────────────────── */
.main{margin-left:var(--sw);min-height:100vh;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:12px;padding:0 20px;height:var(--th);
  background:#fff;border-bottom:2px solid var(--g100);position:sticky;top:0;z-index:100;
}
.hamburger{
  display:none;background:var(--g100);border:none;font-size:20px;cursor:pointer;
  color:var(--g700);width:42px;height:42px;border-radius:12px;
}
.hamburger:active{background:var(--g200);}
.page-title{font-size:17px;font-weight:800;flex:1;color:var(--g800);letter-spacing:-.02em;}
.date-disp{font-size:12px;color:var(--g500);font-weight:700;}
.content{padding:20px;flex:1;max-width:960px;width:100%;}

/* ── Connection bar ───────────────────────────────────────── */
#conn-bar{padding:8px 20px;font-size:13px;display:flex;align-items:center;gap:8px;font-weight:700;}
#conn-bar.ok{background:var(--pri-lt);color:var(--pri-bd);}
#conn-bar.warn{background:var(--warn-lt);color:#9a3412;}
#conn-bar.err{background:var(--err-lt);color:#991b1b;}

/* ── Card ─────────────────────────────────────────────────── */
.card{
  background:#fff;border-radius:var(--r-lg);border:2px solid var(--g100);
  margin-bottom:18px;overflow:hidden;transition:border-color .15s;
}
.card:hover{border-color:var(--g200);}
.card-hdr{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:2px solid var(--g100);
}
.card-hdr h2{font-size:16px;font-weight:800;flex:1;color:var(--g800);letter-spacing:-.01em;}
.card-ico{font-size:22px;}
.card-body{padding:18px;}

/* ── Form ─────────────────────────────────────────────────── */
.fg{margin-bottom:16px;}
.fg label,.fg-lbl{
  display:block;font-size:13px;font-weight:800;color:var(--g700);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.04em;
}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],
input[type=password],input[type=email],input[type=tel],input[type=time],select,textarea{
  width:100%;padding:13px 14px;border:2px solid var(--g200);border-radius:12px;
  font-size:15px;font-family:inherit;font-weight:600;color:var(--g800);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,176,246,.18);
}
input:disabled,select:disabled{background:var(--g50);color:var(--g500);}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── Buttons (Duolingo 3D) ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;border-radius:14px;font-size:14px;font-weight:800;
  font-family:inherit;cursor:pointer;border:2px solid transparent;
  transition:transform .08s ease,box-shadow .08s ease,filter .15s;
  text-transform:uppercase;letter-spacing:.04em;line-height:1;
  min-height:48px;user-select:none;
}
.btn:active{transform:translateY(2px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.btn-pri{
  background:var(--pri);color:#fff;border-color:var(--pri-bd);
  box-shadow:0 4px 0 var(--pri-bd);
}
.btn-pri:hover:not(:disabled){filter:brightness(1.05);}
.btn-pri:active{box-shadow:0 0 0 var(--pri-bd);}

.btn-ok{
  background:var(--pri);color:#fff;border-color:var(--pri-bd);
  box-shadow:0 4px 0 var(--pri-bd);
}
.btn-ok:active{box-shadow:0 0 0 var(--pri-bd);}

.btn-err{
  background:var(--red);color:#fff;border-color:var(--red-bd);
  box-shadow:0 4px 0 var(--red-bd);
}
.btn-err:active{box-shadow:0 0 0 var(--red-bd);}

.btn-out{
  background:#fff;color:var(--g700);border-color:var(--g200);
  box-shadow:0 2px 0 var(--g200);
}
.btn-out:hover:not(:disabled){background:var(--g50);border-color:var(--g300);box-shadow:0 2px 0 var(--g300);}
.btn-out:active{box-shadow:0 0 0 var(--g200);}

.btn-sm{padding:7px 14px;font-size:12px;min-height:36px;border-radius:10px;}
.btn-sm.btn-pri,.btn-sm.btn-err,.btn-sm.btn-ok{box-shadow:0 3px 0 var(--pri-bd);}
.btn-sm.btn-err{box-shadow:0 3px 0 var(--red-bd);}
.btn-sm.btn-out{box-shadow:0 2px 0 var(--g200);}

.form-act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

/* ── Tabs ─────────────────────────────────────────────────── */
.step-tabs{
  display:flex;background:var(--g100);border-radius:14px;padding:5px;margin-bottom:18px;gap:3px;
}
.step-tab{
  flex:1;padding:11px;border:none;background:transparent;border-radius:10px;
  font-size:13px;font-weight:800;cursor:pointer;color:var(--g500);transition:all .2s;
  text-transform:uppercase;letter-spacing:.03em;min-height:42px;
}
.step-tab.active{background:#fff;color:var(--blue-dk);box-shadow:0 2px 6px rgba(0,0,0,.08);}
.step-tab:hover:not(.active){color:var(--g700);}

/* ── Info boxes ───────────────────────────────────────────── */
.ib{
  border-radius:14px;padding:13px 16px;margin-bottom:14px;font-size:13px;font-weight:600;
  border:2px solid;
}
.ib-blue{background:var(--blue-lt);border-color:#A5DCFA;color:#075985;}
.ib-green{background:var(--pri-lt);border-color:#A8E26C;color:var(--pri-bd);}
.ib-yellow{background:var(--ylw-lt);border-color:#FBD86E;color:#854D0E;}
.ib-red{background:var(--red-lt);border-color:#FFB1B1;color:#991B1B;}
.proc-info{
  background:var(--g50);border:2px solid var(--g100);border-radius:12px;
  padding:11px 14px;font-size:12px;color:var(--g600);margin-bottom:12px;margin-top:8px;font-weight:600;
}

/* ── Moisture ─────────────────────────────────────────────── */
.m-wrap{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.m-half{flex:1;min-width:140px;}
.m-lbl{font-size:12px;color:var(--g500);margin-bottom:4px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.m-big{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.02em;}
.m-big.wet{color:var(--red);}.m-big.mid{color:var(--ora);}.m-big.ok{color:var(--pri-bd);}
.m-big span{font-size:15px;font-weight:700;}
.m-sep{font-size:22px;color:var(--g300);margin-top:16px;}
input[type=range]{width:100%;margin:6px 0;accent-color:var(--blue);height:24px;}
.m-num{width:80px;text-align:center;font-size:15px;font-weight:800;padding:8px 8px;margin-top:4px;}

/* ── Table ────────────────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;border-radius:14px;border:2px solid var(--g100);
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead{background:var(--g50);}
th{
  padding:12px 14px;text-align:left;font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--g600);
  border-bottom:2px solid var(--g100);white-space:nowrap;
}
td{padding:12px 14px;border-bottom:1px solid var(--g100);vertical-align:top;font-weight:600;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--g50);}
.pid{
  font-family:'JetBrains Mono','Consolas',monospace;font-size:11px;background:var(--g100);
  padding:3px 8px;border-radius:6px;cursor:pointer;font-weight:700;color:var(--g700);
  transition:all .15s;display:inline-block;
}
.pid:hover{background:var(--blue-lt);color:var(--blue-dk);}

/* ── Badges ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}
.b-green{background:var(--pri-lt);color:var(--pri-bd);}
.b-red{background:var(--red-lt);color:#991B1B;}
.b-orange{background:var(--ora-lt);color:#9A3412;}
.b-blue{background:var(--blue-lt);color:var(--blue-dk);}
.b-gray{background:var(--g100);color:var(--g600);}

/* ── Module home ──────────────────────────────────────────── */
.module-card{transition:transform .15s,box-shadow .15s,border-color .15s;}
.module-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)!important;}
.module-card:active{transform:translateY(0);}

/* Module-picker home page */
.mh-wrap{max-width:640px;margin:32px auto 24px;padding:0 8px;}
.mh-hdr{text-align:center;margin-bottom:28px;}
.mh-logo{width:140px;height:140px;object-fit:contain;display:block;margin:0 auto 8px;}
.mh-title{font-size:24px;font-weight:900;color:var(--g800);letter-spacing:-.02em;}
.mh-sub{font-size:14px;color:var(--g500);margin-top:4px;font-weight:600;}
.mh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.mh-card{
  background:#fff;border:2.5px solid var(--g200);border-radius:18px;
  padding:18px 14px 16px;text-align:center;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  box-shadow:0 3px 0 var(--g200);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.mh-card:hover{transform:translateY(-2px);}
.mh-card:active{transform:translateY(1px);box-shadow:0 1px 0 var(--g200);}
.mh-blue{border-color:#BFDBFE;box-shadow:0 3px 0 #BFDBFE;}
.mh-green{border-color:#A8E26C;box-shadow:0 3px 0 #A8E26C;}
.mh-yellow{border-color:#FDE68A;box-shadow:0 3px 0 #FDE68A;}
.mh-purple{border-color:#D8B4FE;box-shadow:0 3px 0 #D8B4FE;}
.mh-img{height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.mh-img img{max-width:100px;max-height:110px;object-fit:contain;}
.mh-name{font-size:17px;font-weight:900;margin-bottom:6px;letter-spacing:-.01em;}
.mh-desc{font-size:12px;color:var(--g500);line-height:1.5;font-weight:600;}
.mh-admin{
  margin-top:16px;background:#fff;border:2.5px solid #FECACA;border-radius:16px;
  padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:14px;
  box-shadow:0 3px 0 #FECACA;transition:transform .15s;
}
.mh-admin:active{transform:translateY(1px);box-shadow:0 1px 0 #FECACA;}
.mh-admin-ico{font-size:30px;flex-shrink:0;}
.mh-admin-text{flex:1;min-width:0;}
.mh-admin-title{font-size:15px;font-weight:900;color:#991B1B;}
.mh-admin-sub{font-size:11px;color:var(--g500);margin-top:2px;font-weight:600;line-height:1.4;}
.mh-admin-badge{font-size:10px;background:var(--red);color:#fff;padding:4px 10px;border-radius:999px;font-weight:900;letter-spacing:.04em;flex-shrink:0;}

@media(max-width:480px){
  .mh-wrap{margin:16px auto;padding:0 4px;}
  .mh-logo{width:100px;height:100px;}
  .mh-title{font-size:20px;}
  .mh-sub{font-size:13px;}
  .mh-grid{gap:10px;}
  .mh-card{padding:14px 10px 12px;border-radius:16px;}
  .mh-img{height:84px;}
  .mh-img img{max-width:74px;max-height:84px;}
  .mh-name{font-size:15px;}
  .mh-desc{font-size:11px;}
  .mh-admin{padding:12px 14px;gap:10px;}
  .mh-admin-ico{font-size:24px;}
  .mh-admin-title{font-size:13px;}
  .mh-admin-sub{font-size:10px;}
}

/* ── Home grid ────────────────────────────────────────────── */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.home-card{
  background:#fff;border-radius:var(--r-lg);border:2px solid var(--g100);
  padding:18px;cursor:pointer;transition:all .15s;
  box-shadow:0 2px 0 var(--g100);
}
.home-card:hover{transform:translateY(-2px);border-color:var(--g200);box-shadow:0 6px 14px rgba(0,0,0,.08);}
.home-card:active{transform:translateY(0);}
.hc-ico{font-size:34px;margin-bottom:10px;}
.hc-title{font-size:15px;font-weight:800;margin-bottom:4px;color:var(--g800);}
.hc-sub{font-size:12px;color:var(--g500);font-weight:600;}

/* ── Dashboard ────────────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.dash-card{
  background:var(--g50);border-radius:14px;padding:14px;text-align:center;
  border:2px solid var(--g100);
}
.dash-val{font-size:24px;font-weight:900;color:var(--blue-dk);margin-bottom:2px;letter-spacing:-.02em;}
.dash-lbl{font-size:11px;color:var(--g500);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.skel{background:var(--g100);border-radius:14px;height:80px;animation:pulse 1.5s infinite;}

/* ── Patterns ─────────────────────────────────────────────── */
.pat-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}

/* ── Loading / empty ──────────────────────────────────────── */
.loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--g500);font-weight:700;}
.spinner{
  width:28px;height:28px;border:4px solid var(--g100);border-top-color:var(--pri);
  border-radius:50%;animation:spin .7s linear infinite;
}
.empty-state{text-align:center;padding:60px 20px;color:var(--g400);font-weight:600;}
.empty-ico{font-size:48px;margin-bottom:10px;}

/* ── Map ──────────────────────────────────────────────────── */
@keyframes mapPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.85;transform:scale(1.03);}}
@keyframes flowDash{to{stroke-dashoffset:-32;}}
@keyframes procPulse{0%,100%{box-shadow:0 0 0 3px var(--pclr,#58CC02),0 0 14px 2px var(--pglow,rgba(88,204,2,.45));}50%{box-shadow:0 0 0 4px var(--pclr,#58CC02),0 0 20px 4px var(--pglow,rgba(88,204,2,.7));}}
.map-legend{
  display:flex;gap:14px;flex-wrap:wrap;padding:10px 16px;background:var(--g50);
  border-bottom:2px solid var(--g100);font-weight:700;
}
.map-leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--g600);text-transform:uppercase;letter-spacing:.04em;}
.map-leg::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--dc,#9ca3af);}
.map-flow-line{animation:flowDash 1.1s linear infinite;}
.map-proc-ring{animation:procPulse 1.8s ease-in-out infinite;}
.map-proc-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--pclr,#58CC02);color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25);border:2px solid #fff;z-index:2;}

/* ── Toast ────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:16px;
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.01em;
  box-shadow:var(--sh-pop);opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;z-index:9998;min-width:280px;max-width:calc(100vw - 32px);
  border:2px solid rgba(255,255,255,.15);
}
.toast.show{opacity:1;pointer-events:all;}
.toast.success{background:var(--pri);border-color:var(--pri-bd);}
.toast.error{background:var(--red);border-color:var(--red-bd);}
.toast.warning{background:var(--ora);border-color:var(--ora-bd);}
.toast.info{background:var(--blue);border-color:var(--blue-bd);}

/* ── Misc ─────────────────────────────────────────────────── */
.sec-title{font-size:13px;font-weight:800;color:var(--g700);margin:16px 0 10px;text-transform:uppercase;letter-spacing:.06em;}
.master-table input,.master-table select{font-size:13px;padding:7px 10px;border-radius:10px;}
.setup-ok{background:var(--pri-lt);color:var(--pri-bd);border:2px solid #A8E26C;border-radius:14px;padding:12px 16px;font-size:13px;margin-top:10px;font-weight:700;}
.setup-err{background:var(--red-lt);color:#991B1B;border:2px solid #FFB1B1;border-radius:14px;padding:12px 16px;font-size:13px;margin-top:10px;font-weight:700;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Notification bar ─────────────────────────────────────── */
#noti-bar{position:sticky;top:var(--th);z-index:99;max-width:100%;overflow:hidden;}
.noti-bar-inner{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 18px;
  background:var(--ylw-lt);border-bottom:3px solid var(--ylw);font-size:12px;font-weight:700;
  max-width:100%;box-sizing:border-box;
}
.noti-lbl{font-weight:900;color:#854D0E;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;}
.noti-item{
  display:inline-flex;align-items:center;padding:5px 12px;border:2px solid var(--g200);
  border-radius:999px;background:#fff;font-size:11px;font-weight:700;gap:5px;white-space:nowrap;
  max-width:100%;
}

/* ── Mobile bottom nav (visible <= 768px) ─────────────────── */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bnh);
  background:#fff;border-top:2px solid var(--g100);z-index:150;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 10px rgba(0,0,0,.04);
}
.bn-inner{display:flex;height:var(--bnh);max-width:560px;margin:0 auto;}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:none;border:none;cursor:pointer;color:var(--g500);font-family:inherit;
  transition:color .15s;padding:6px 4px;
}
.bn-ico{font-size:22px;line-height:1;}
.bn-lbl{font-size:10px;font-weight:800;letter-spacing:.02em;}
.bn-item.active{color:var(--pri-bd);}
.bn-item.active .bn-ico{transform:scale(1.1);}
.bn-item:active{background:var(--g50);}

/* ── Responsive (mobile) ──────────────────────────────────── */
@media(max-width:900px){
  .content{max-width:100%;}
}
@media(max-width:768px){
  :root{--sw:280px;}
  .sidebar{transform:translateX(-100%);box-shadow:8px 0 24px rgba(0,0,0,.15);}
  .sidebar.open{transform:translateX(0);}
  .overlay.open{display:block;}
  .sb-close{display:flex;align-items:center;justify-content:center;}
  .main{margin-left:0;padding-bottom:var(--bnh);}
  .hamburger{display:flex;align-items:center;justify-content:center;}
  .content{padding:14px 12px;}
  .topbar{padding:0 14px;gap:10px;}
  .page-title{font-size:15px;}
  .date-disp{display:none;}
  .g2{grid-template-columns:1fr;}
  .home-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .home-card{padding:14px;}
  .hc-ico{font-size:30px;}
  .hc-title{font-size:14px;}
  .dash-grid{grid-template-columns:repeat(2,1fr);}
  .card{border-radius:16px;margin-bottom:14px;}
  .card-hdr{padding:14px;}
  .card-body{padding:14px;}
  .btn{padding:11px 18px;font-size:13px;}
  .form-act{flex-direction:column;}
  .form-act .btn{width:100%;}
  .table-wrap{font-size:12px;}
  th,td{padding:9px 10px;}
  .step-tabs{padding:4px;}
  .step-tab{padding:9px 6px;font-size:12px;}
  .toast{min-width:auto;width:calc(100vw - 32px);bottom:calc(var(--bnh) + 12px + env(safe-area-inset-bottom));}
  .bottom-nav.show{display:block;}
  /* Notification bar: stack items vertically with wrapped text on mobile */
  .noti-bar-inner{padding:8px 12px;font-size:11px;flex-direction:column;align-items:stretch;gap:6px;}
  .noti-lbl{font-size:11px;}
  .noti-item{
    display:flex;width:100%;border-radius:10px;padding:6px 10px;font-size:11px;
    white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;
    align-items:flex-start;
  }
}
@media(max-width:480px){
  body{font-size:14px;}
  .home-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr 1fr;}
  .card-hdr h2{font-size:14px;}
  .m-big{font-size:26px;}
  .noti-bar-inner{padding:6px 10px;gap:5px;}
  .noti-item{font-size:10.5px;padding:5px 9px;}
  .btn{padding:11px 16px;font-size:12px;}
  .btn-sm{padding:6px 10px;font-size:11px;}
  th,td{padding:8px;}
  .topbar{padding:0 10px;}
  .hamburger{width:38px;height:38px;font-size:18px;}
}

/* Smooth-scroll inside scrollables on iOS */
.table-wrap,.sidebar,.bn-inner{-webkit-overflow-scrolling:touch;}

/* Disable text-zoom on form-focus (iOS) */
@media(max-width:480px){
  input[type=text],input[type=number],input[type=date],input[type=datetime-local],
  input[type=password],input[type=tel],input[type=email],input[type=time],select,textarea{
    font-size:16px;  /* prevent iOS zoom on focus */
  }
}

/* Print (for QR labels) */
@media print{
  .sidebar,.topbar,.overlay,.bottom-nav,#conn-bar,#noti-bar,.toast{display:none!important;}
  .main{margin-left:0;}
  .content{padding:0;max-width:100%;}
}