:root{
 --green:#0A6046;--green2:#0E7354;--green-soft:#EAF4EF;--orange:#F07828;--orange-soft:#FFF1E6;
 --purple:#754BB3;--purple-soft:#F2EBFA;--blue:#3275A8;--blue-soft:#EAF3FA;
 --ink:#18241E;--muted:#7A8780;--line:#E2E8E4;--bg:#F7F9F8;--white:#fff;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input{font:inherit}button{cursor:pointer}img{display:block}
.app-shell{display:grid;grid-template-columns:218px 1fr;min-height:100vh}
.sidebar{height:100vh;position:sticky;top:0;background:#fff;border-right:1px solid var(--line);padding:20px 14px 14px;display:flex;flex-direction:column}
.logo-block{padding:3px 8px 17px;border-bottom:1px solid #EFF2F0}.brand-logo{width:155px;max-height:52px;object-fit:contain;object-position:left}.logo-block>span{display:block;margin-top:5px;font-size:6px;letter-spacing:.18em;color:#7F8A84;font-weight:800}
.main-nav{display:grid;gap:4px;margin-top:14px}.nav-item{height:42px;border:0;background:transparent;border-radius:9px;padding:0 9px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;text-align:left;color:#3F4C45;font-size:9px;font-weight:600}.nav-item:hover{background:#F5F8F6}.nav-item.active{background:linear-gradient(90deg,#0C674B,#075B43);color:#fff;box-shadow:0 7px 17px rgba(9,96,70,.13)}.nav-ico{width:27px;height:27px;border-radius:7px;display:grid;place-items:center}.nav-ico img{width:17px;height:17px}.nav-item.active .nav-ico img{filter:brightness(0) invert(1)}.nav-item em{font-size:5.5px;background:#14945E;color:#fff;border-radius:999px;padding:3px 5px;font-style:normal}.chev{width:12px;height:12px;color:#859089}.drop-chev{transition:.18s}.nav-drop.open .drop-chev{transform:rotate(90deg)}.subnav{margin:-1px 0 4px 33px;padding-left:9px;border-left:1px solid #E6EBE8;display:grid;gap:1px}.subnav[hidden]{display:none}.subnav button{border:0;background:transparent;text-align:left;color:#77837D;font-size:7.5px;padding:7px 6px;border-radius:6px}.subnav button:hover{background:#F4F7F5;color:#345347}
.sidebar-spacer{flex:1}.support-card{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center}.support-icon{width:30px;height:30px;border-radius:9px;background:var(--green-soft);display:grid;place-items:center}.support-icon img{width:18px}.support-card b{display:block;font-size:8px}.support-card small{display:block;font-size:6.5px;line-height:1.4;color:#7D8882;margin-top:2px}.support-arrow{color:var(--green);font-size:14px}.profile-card{margin-top:12px;border:1px solid var(--line);border-radius:11px;padding:9px;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center}.avatar{width:32px;height:32px;border-radius:50%;background:#075B43;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}.profile-card b,.top-profile b{display:block;font-size:8px}.profile-card small,.top-profile small{display:block;font-size:6.5px;color:#7B8780;margin-top:2px}.copyright{font-size:6px;color:#9BA39F;padding:12px 4px 0}.copyright span{color:#B0B6B3}
.main-area{min-width:0}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:34px 1fr minmax(280px,440px) auto 42px auto;gap:12px;align-items:center;padding:0 26px;position:sticky;top:0;z-index:20}.menu-btn{width:32px;height:32px;border:0;background:transparent;font-size:18px}.hello h1{font-size:15px;margin:0;letter-spacing:-.02em}.hello p{font-size:7.5px;color:#77837D;margin:3px 0 0}.searchbox{height:40px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#77837D}.searchbox input{border:0;outline:0;min-width:0;flex:1;font-size:8px}.searchbox kbd{font:inherit;font-size:6.5px;padding:5px 7px;border:1px solid #E2E7E4;border-radius:6px;background:#F8FAF9}.datebox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:150px}.datebox>span{font-size:17px}.datebox b{display:block;font-size:7.5px}.datebox small{display:block;font-size:6.5px;color:#79857F;margin-top:2px}.bell{position:relative;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px}.bell i{position:absolute;right:-2px;top:-5px;width:16px;height:16px;border-radius:50%;background:#F21F24;color:#fff;font-style:normal;font-size:7px;display:grid;place-items:center}.top-profile{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;min-width:140px}
.content{padding:18px 24px 35px}.page-section{display:none}.page-section.active{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;min-height:126px;display:grid;grid-template-columns:50px 1fr;gap:11px;align-items:start;box-shadow:0 5px 14px rgba(26,55,43,.03)}.kpi-icon,.round-icon{border-radius:50%;display:grid;place-items:center}.kpi-icon{width:50px;height:50px}.kpi-icon img{width:25px;height:25px}.green{background:var(--green-soft);color:var(--green)}.orange{background:var(--orange-soft);color:var(--orange)}.purple{background:var(--purple-soft);color:var(--purple)}.blue{background:var(--blue-soft);color:var(--blue)}.green img,.orange img,.purple img,.blue img{filter:none}.kpi-card span{font-size:7px;font-weight:700}.kpi-card strong{display:block;font-size:20px;letter-spacing:-.03em;margin-top:5px}.kpi-card small{display:block;font-size:7px;color:#7B8780;margin-top:2px}.kpi-card button{border:0;background:transparent;color:var(--green);font-size:7px;padding:0;margin-top:11px;font-weight:700}.orange-text{color:var(--orange)!important}.purple-text{color:var(--purple)!important}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;margin-top:10px}.hero-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(26,55,43,.03)}.hero-title{display:flex;align-items:center;gap:8px}.hero-title b{font-size:9px}.hero-title button{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-size:6.8px}.dot-live{width:9px;height:9px;border-radius:50%;background:#168B58;box-shadow:0 0 0 6px #E6F4EC}.soft-dot{width:9px;height:9px;border-radius:50%}.dw-finance{display:grid;grid-template-columns:1fr 1fr;margin-top:18px}.finance-box{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:4px 12px 4px 0}.finance-box+ .finance-box{border-left:1px solid var(--line);padding-left:18px}.round-icon{width:48px;height:48px}.round-icon img{width:23px;height:23px}.finance-box span,.meal-bottom span,.cutoff span{display:block;font-size:6.3px;color:#6F7C75;font-weight:700}.finance-box strong{display:block;font-size:16px;margin-top:4px}.finance-box small{font-size:7px;color:#79857F}.dw-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px;border-top:1px solid #EEF1EF;padding-top:13px}.dw-breakdown>div{display:grid;grid-template-columns:30px 1fr;column-gap:7px;padding:0 10px;border-right:1px solid #EDF1EE}.dw-breakdown>div:last-child{border:0}.mini-ico{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}.mini-ico img{width:16px}.dw-breakdown b{font-size:13px}.dw-breakdown small{font-size:6.2px;color:#7C8781}.cutoff{margin-top:13px}.cutoff>div:first-child{display:flex;justify-content:space-between}.cutoff b{font-size:7px}.bar{height:5px;background:#E9EDEA;border-radius:999px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#168C58 75%,#F47A24);border-radius:999px}.meal-stats{display:grid;grid-template-columns:1.1fr 1fr 1fr;margin-top:18px}.meal-stats>div{display:grid;grid-template-columns:48px 1fr;column-gap:9px;align-items:center;padding-right:12px}.meal-stats>div+div{border-left:1px solid var(--line);padding-left:15px}.meal-stats b{font-size:16px}.meal-stats small{font-size:6.3px;color:#7D8982}.meal-bottom{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #EEF1EF;margin-top:18px;padding-top:13px}.meal-bottom>div+div{border-left:1px solid var(--line);padding-left:18px}.meal-bottom strong{display:block;font-size:13px;margin-top:4px}.purple-bar i{background:var(--purple)}
.dashboard-row{display:grid;grid-template-columns:1.05fr 1.05fr .9fr;gap:10px;margin-top:10px}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 5px 15px rgba(27,58,45,.025);overflow:hidden}.panel-head{min-height:43px;padding:0 13px;border-bottom:1px solid #EDF1EE;display:flex;align-items:center;justify-content:space-between}.panel-head>div{display:flex;align-items:center;gap:7px}.panel-head img{width:17px;height:17px}.panel-head b{font-size:8px}.panel-head button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 8px;font-size:6.5px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:520px}th{text-align:left;font-size:6px;color:#6E7B74;padding:9px 10px;border-bottom:1px solid #EDF1EE}td{font-size:6.8px;padding:9px 10px;border-bottom:1px solid #F0F2F1;color:#49564F}td b{color:#1E2D25}.table-link{width:100%;border:0;background:#fff;color:var(--green);font-size:6.8px;font-weight:700;padding:10px}.qr-mini{padding-bottom:12px}.qr-mini>p{font-size:7px;line-height:1.5;color:#748078;padding:0 13px}.qr-mini-body{display:grid;grid-template-columns:100px 1fr;gap:10px;padding:0 13px}.qr-mini-body>img{width:100px;height:100px;border:1px solid var(--line);border-radius:9px;padding:6px}.qr-mini-body b{display:block;font-size:7px}.qr-mini-body small{display:block;font-size:6.3px;color:#7A8680;margin-top:3px}.qr-mini-body a{margin-top:10px;display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;text-decoration:none;padding:7px 9px;border-radius:7px;font-size:6.5px;font-weight:700}.qr-mini-body a img{width:13px;filter:brightness(0) invert(1)}.qr-mini label{display:block;font-size:5.8px;color:#6E7A74;padding:10px 13px 4px}.copy-row{display:grid;grid-template-columns:1fr auto;gap:7px;padding:0 13px}.copy-row input{height:32px;border:1px solid var(--line);border-radius:7px;padding:0 8px;font-size:6.3px;color:#758078}.copy-row button{border:1px solid var(--line);background:#fff;border-radius:7px;color:var(--green);font-size:6.5px;font-weight:700;padding:0 9px}
.upload-panel{margin-top:10px;padding:13px}.upload-title{display:flex;justify-content:space-between;align-items:center}.upload-title b{display:block;font-size:8px}.upload-title small{display:block;font-size:6.5px;color:#7A8680;margin-top:3px}.upload-title button{border:1px solid var(--line);background:#F7FAF8;border-radius:7px;padding:7px 9px;color:var(--green);font-size:6.5px}.upload-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:11px}.upload-card{border:1px solid var(--line);border-radius:9px;padding:9px;display:grid;grid-template-columns:30px 1fr;gap:8px;position:relative}.upload-card>span{width:30px;height:30px;border-radius:8px;background:#F4F7F5;display:grid;place-items:center}.upload-card>span img{width:16px}.upload-card b{display:block;font-size:6.8px}.upload-card small{display:block;font-size:5.8px;color:#7D8982;line-height:1.35;margin-top:2px}.upload-card button{grid-column:1/3;border:0;background:#EFF6F2;color:var(--green);border-radius:6px;padding:6px;font-size:6px;font-weight:700;display:flex;justify-content:center;gap:5px}.upload-card button img{width:12px}.upload-card em{position:absolute;right:7px;bottom:8px;font-size:5.2px;color:#96A09A;font-style:normal}
.section-heading{margin-bottom:12px}.section-heading span{font-size:6px;letter-spacing:.13em;font-weight:800;color:#8A958F}.section-heading h2{font-size:18px;margin:3px 0 2px}.section-heading p{font-size:7px;color:#7C8881;margin:0}.section-heading.row{display:flex;justify-content:space-between;align-items:end}.section-heading.row>button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-size:6.8px}
.live-location-grid,.meal-page-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.location-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}.location-card small{display:block;font-size:6px;color:#7E8983}.location-card strong{display:block;font-size:20px;margin-top:3px}.location-card span:last-child{font-size:6.5px;color:#7A8680}.filters{display:grid;grid-template-columns:180px 1fr auto;gap:8px;align-items:end;padding:13px}.filters label{font-size:6.5px;font-weight:700;color:#68756E}.filters input{margin-top:5px;width:100%;height:34px;border:1px solid var(--line);border-radius:7px;padding:0 8px;font-size:7px}.filters button{height:34px;border:0;background:var(--green);color:#fff;border-radius:7px;padding:0 13px;font-size:6.7px;font-weight:700}.qr-full{display:grid;grid-template-columns:1fr 260px;gap:22px;padding:20px}.qr-full h3{font-size:16px;margin:8px 0 4px}.qr-full p{font-size:7px;color:#7A8680}.download-btn{display:inline-flex;margin:12px 13px 0 0;align-items:center;gap:6px;background:var(--green);color:#fff;text-decoration:none;border-radius:8px;padding:8px 10px;font-size:6.8px}.download-btn img{width:14px;filter:brightness(0) invert(1)}.qr-large{display:grid;place-items:center}.qr-large img{width:220px;border:1px solid var(--line);border-radius:12px;padding:10px}.dropzone{margin:13px;border:1px dashed #BFD4C9;border-radius:12px;background:#FAFCFB;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.dropzone img{width:28px}.dropzone b{font-size:8px;margin-top:7px}.dropzone small{font-size:6.5px;color:#7E8983;margin-top:3px}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.cutoff.large{padding:16px}.doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.doc-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center}.doc-card>span{width:42px;height:42px;border-radius:11px;background:var(--green-soft);display:grid;place-items:center}.doc-card img{width:21px}.doc-card b{display:block;font-size:9px}.doc-card small{display:block;font-size:6.5px;color:#7D8982;margin-top:3px}.doc-card button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 9px;font-size:6.5px;color:var(--green)}
.loading{position:fixed;inset:0;background:rgba(248,250,249,.88);backdrop-filter:blur(6px);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading[hidden]{display:none!important}.spinner{width:38px;height:38px;border-radius:50%;border:3px solid #DDE7E2;border-top-color:var(--green);animation:spin .75s linear infinite}.loading b{margin-top:11px;font-size:9px}.loading span{font-size:6.8px;color:#839088;margin-top:3px}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;right:22px;bottom:22px;background:#163D30;color:#fff;padding:10px 13px;border-radius:9px;font-size:7px;z-index:1000}.toast[hidden]{display:none}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.dashboard-row{grid-template-columns:1fr 1fr}.qr-mini{grid-column:1/3}.upload-grid{grid-template-columns:repeat(3,1fr)}.topbar{grid-template-columns:34px 1fr minmax(230px,1fr) auto 42px}.top-profile{display:none}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{grid-template-columns:34px 1fr auto 42px;padding:0 14px}.searchbox{display:none}.content{padding:14px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.hero-grid,.dashboard-row{grid-template-columns:1fr}.qr-mini{grid-column:auto}.upload-grid{grid-template-columns:repeat(2,1fr)}.live-location-grid,.meal-page-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.datebox{display:none}.kpi-grid,.upload-grid,.live-location-grid,.meal-page-grid,.doc-grid{grid-template-columns:1fr}.dw-finance,.meal-stats{grid-template-columns:1fr}.finance-box+ .finance-box,.meal-stats>div+div{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:8px}.dw-breakdown{grid-template-columns:1fr 1fr;row-gap:10px}.qr-full{grid-template-columns:1fr}.topbar{height:70px}}


/* =========================================================
   V7 — MODERN MOTION REFINEMENT
   Modern typography, premium spacing, subtle animation
   ========================================================= */

:root{
  --green:#0B6B4F;
  --green-2:#0F7A5A;
  --green-deep:#064A38;
  --green-soft:#EAF5F0;
  --orange:#F47B2A;
  --orange-soft:#FFF1E8;
  --purple:#7450B7;
  --purple-soft:#F3EEFB;
  --blue:#3C7DB2;
  --blue-soft:#ECF4FA;
  --ink:#18231E;
  --muted:#7A8780;
  --line:#E5EAE7;
  --surface:#FFFFFF;
  --surface-2:#F8FAF9;
  --shadow-sm:0 6px 18px rgba(18,52,40,.045);
  --shadow-md:0 14px 34px rgba(18,52,40,.075);
}

html,body{
  font-family:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  background:
    radial-gradient(circle at 84% -10%, rgba(11,107,79,.045), transparent 30%),
    #F6F8F7!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* layout density */
.sidebar{
  width:auto;
  padding:20px 14px 16px!important;
  box-shadow:inset -1px 0 0 rgba(17,50,38,.02);
}
.logo-block{
  padding:2px 8px 18px!important;
}
.brand-logo{
  width:156px!important;
}
.logo-block>span{
  margin-top:6px!important;
  letter-spacing:.16em!important;
  font-size:5.8px!important;
}
.main-nav{
  gap:5px!important;
  margin-top:16px!important;
}
.nav-item{
  height:44px!important;
  border-radius:11px!important;
  padding:0 10px!important;
  font-size:8.4px!important;
  font-weight:650!important;
  letter-spacing:-.01em;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.nav-item:hover{
  transform:translateX(2px);
}
.nav-item.active{
  background:linear-gradient(135deg,#0E6F52,#0A5D46)!important;
  box-shadow:0 10px 22px rgba(9,96,70,.14)!important;
}
.nav-ico{
  width:29px!important;height:29px!important;border-radius:9px!important;
}
.nav-ico img{
  width:17px!important;height:17px!important;
}

.topbar{
  height:84px!important;
  grid-template-columns:36px minmax(180px,1fr) minmax(300px,440px) auto 42px auto!important;
  padding:0 28px!important;
  box-shadow:0 2px 10px rgba(25,50,40,.025);
}
.menu-btn{
  width:34px!important;height:34px!important;
  border-radius:9px!important;
  display:flex!important;flex-direction:column;justify-content:center;gap:4px;padding:0 9px!important;
}
.menu-btn span{
  height:1.7px;width:16px;border-radius:99px;background:#2A3931;display:block;
}
.hello h1{
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.hello p{font-size:7.2px!important;font-weight:600}
.searchbox{
  height:42px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(24,53,41,.025);
}
.searchbox svg{
  width:16px;height:16px;fill:none;stroke:#66756D;stroke-width:1.8;
}
.searchbox input{
  font-size:7.8px!important;
  font-weight:500;
}
.searchbox kbd{
  font-size:6px!important;
  color:#7E8983;
}
.datebox{
  border-radius:12px!important;
  padding:8px 11px!important;
  min-width:178px!important;
  background:#fff;
}
.date-icon{
  width:30px;height:30px;border-radius:9px;background:#F3F7F5;display:grid;place-items:center;
}
.date-icon svg{
  width:16px;height:16px;fill:none;stroke:#1F3027;stroke-width:1.7;
}
.datebox b{font-size:7.4px!important;font-weight:800}
.datebox small{font-size:6.2px!important}
.bell{
  border-radius:11px!important;background:#fff!important;
}
.bell svg{
  width:18px;height:18px;fill:none;stroke:#24342B;stroke-width:1.7;
}
.top-profile{
  min-width:155px!important;
}

.content{
  padding:20px 28px 40px!important;
}
.dashboard-intro{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin:2px 0 13px;
  animation:fadeUp .42s ease both;
}
.dashboard-intro>div:first-child>span{
  display:block;font-size:5.8px;letter-spacing:.15em;font-weight:800;color:#95A09A;
}
.dashboard-intro h2{
  margin:4px 0 2px;font-size:15px;letter-spacing:-.035em;font-weight:800;
}
.dashboard-intro p{
  margin:0;font-size:6.8px;color:#87928C;
}
.live-sync{
  display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #DDE7E2;border-radius:999px;background:#fff;font-size:6.3px;font-weight:700;color:#597166;
}
.live-sync i{
  width:6px;height:6px;border-radius:50%;background:#2CAF70;box-shadow:0 0 0 4px rgba(44,175,112,.09);
  animation:pulse 2s ease-in-out infinite;
}

.kpi-grid{
  gap:12px!important;
}
.kpi-card{
  border-radius:16px!important;
  min-height:136px!important;
  padding:15px!important;
  box-shadow:var(--shadow-sm)!important;
  border-color:#E5EAE7!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
  animation:fadeUp .46s ease both;
}
.kpi-card:nth-child(2){animation-delay:.035s}
.kpi-card:nth-child(3){animation-delay:.07s}
.kpi-card:nth-child(4){animation-delay:.105s}
.kpi-card:nth-child(5){animation-delay:.14s}
.kpi-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md)!important;
  border-color:#DCE5E0!important;
}
.kpi-icon{
  width:52px!important;height:52px!important;
  border-radius:15px!important;
  transition:transform .22s ease;
}
.kpi-card:hover .kpi-icon{
  transform:scale(1.06) rotate(-2deg);
}
.kpi-icon img{width:25px!important;height:25px!important}
.kpi-card span{
  font-size:6.7px!important;
  font-weight:800!important;
  letter-spacing:.015em;
  color:#2C3932;
}
.kpi-card strong{
  font-size:22px!important;
  font-weight:800!important;
  margin-top:6px!important;
  letter-spacing:-.045em!important;
}
.kpi-card small{
  font-size:6.4px!important;
  color:#8A958F!important;
}
.kpi-card button{
  margin-top:13px!important;
  font-size:6.4px!important;
  font-weight:750!important;
  transition:transform .18s ease,opacity .18s ease;
}
.kpi-card button:hover{transform:translateX(2px)}

.hero-grid{
  gap:12px!important;
  margin-top:12px!important;
}
.hero-card{
  border-radius:17px!important;
  padding:16px!important;
  box-shadow:var(--shadow-sm)!important;
  transition:transform .22s ease,box-shadow .22s ease;
  animation:fadeUp .5s ease both;
}
.hero-card:nth-child(2){animation-delay:.05s}
.hero-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md)!important;
}
.hero-title{
  min-height:34px;
}
.hero-title b{
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:-.015em;
}
.hero-title button{
  border-radius:9px!important;
  font-size:6.3px!important;
  font-weight:700;
  transition:background .18s ease,transform .18s ease;
}
.hero-title button:hover{
  background:#F6F9F7;transform:translateY(-1px)
}
.dw-finance{margin-top:16px!important}
.finance-box strong{
  font-size:18px!important;
  font-weight:800;
  letter-spacing:-.04em;
}
.finance-box span,.meal-bottom span,.cutoff span{
  font-size:5.9px!important;
  letter-spacing:.02em;
}
.finance-box small{
  font-size:6.3px!important;
}
.round-icon{
  width:50px!important;height:50px!important;border-radius:15px!important;
}
.round-icon img{width:23px!important;height:23px!important}
.dw-breakdown{
  margin-top:18px!important;
  padding-top:14px!important;
}
.dw-breakdown b{
  font-size:13.5px!important;
  font-weight:800;
}
.dw-breakdown small{
  font-size:5.9px!important;
}
.mini-ico{
  width:32px!important;height:32px!important;border-radius:10px!important;
}
.bar{
  height:6px!important;
  margin-top:7px!important;
}
.bar i{
  transition:width 1s cubic-bezier(.22,1,.36,1);
}
.meal-stats{
  margin-top:16px!important;
}
.meal-stats b{
  font-size:17px!important;
  font-weight:800;
}
.meal-bottom strong{
  font-size:14px!important;
  font-weight:800;
}

.dashboard-row{
  gap:12px!important;
  margin-top:12px!important;
}
.panel{
  border-radius:15px!important;
  box-shadow:var(--shadow-sm)!important;
  transition:box-shadow .2s ease,transform .2s ease;
  animation:fadeUp .52s ease both;
}
.panel:hover{
  box-shadow:var(--shadow-md)!important;
}
.panel-head{
  min-height:46px!important;
  padding:0 14px!important;
}
.panel-head b{
  font-size:7.6px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}
.panel-head button{
  border-radius:8px!important;
  font-size:6.2px!important;
}
.table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#C8D0CB transparent;
}
table{
  min-width:560px!important;
}
th{
  font-size:5.8px!important;
  font-weight:800!important;
  letter-spacing:.055em;
  color:#7B8780!important;
  background:#FCFDFC;
}
td{
  font-size:6.5px!important;
  padding:10px 10px!important;
}
tbody tr{
  transition:background .15s ease;
}
tbody tr:hover{
  background:#FAFCFB;
}
.table-link{
  font-size:6.3px!important;
  font-weight:700!important;
}
.qr-mini-body a{
  border-radius:8px!important;
  box-shadow:0 5px 12px rgba(11,107,79,.13);
}
.upload-panel{
  border-radius:15px!important;
}
.upload-grid{gap:10px!important}
.upload-card{
  border-radius:11px!important;
  padding:10px!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.upload-card:hover{
  transform:translateY(-2px);
  border-color:#D8E3DD;
  box-shadow:0 8px 18px rgba(20,54,41,.05);
}
.upload-card>span{
  border-radius:9px!important;
}
.upload-card button{
  border-radius:7px!important;
  transition:background .18s ease,transform .18s ease;
}
.upload-card button:hover{
  background:#E6F3EC;transform:translateY(-1px)
}

/* section pages */
.section-heading h2{
  font-size:19px!important;
  font-weight:800!important;
  letter-spacing:-.04em;
}
.section-heading p{
  font-size:6.8px!important;
}
.location-card{
  border-radius:14px!important;
  padding:14px!important;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.location-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-md)
}
.location-card strong{
  font-size:22px!important;
  font-weight:800;
}
.doc-card{
  border-radius:14px!important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.doc-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-md)
}
.qr-full,.dropzone{
  border-radius:15px!important;
}

/* transitions between pages */
.page-section.active{
  animation:pageIn .32s cubic-bezier(.22,1,.36,1) both;
}

/* loading refinement */
.loading{
  background:rgba(247,249,248,.84)!important;
}
.spinner{
  width:42px!important;height:42px!important;
  border-width:3px!important;
}

/* responsive */
@media(max-width:1200px){
  .topbar{grid-template-columns:36px 1fr minmax(240px,1fr) auto 42px!important}
}
@media(max-width:900px){
  .topbar{grid-template-columns:36px 1fr auto 42px!important;padding:0 16px!important}
  .content{padding:15px!important}
  .dashboard-intro{align-items:flex-start}
}

/* animations */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.85);opacity:.65}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}


/* ==========================================================
   V8 FULL OPERATIONS UI
   ========================================================== */
.module-toolbar,.recap-toolbar,.meal-filter-line,.add-name-line{
 display:flex;gap:9px;align-items:end;flex-wrap:wrap;padding:14px;
}
.toolbar-title{display:flex;gap:9px;align-items:center;margin-right:auto}
.toolbar-title b{display:block;font-size:8px}.toolbar-title small{display:block;font-size:6.3px;color:#829088;margin-top:2px}
.toolbar-icon{width:34px;height:34px;border-radius:10px;background:var(--green-soft);display:grid;place-items:center}.toolbar-icon img{width:18px}
.period-fields,.run-inputs{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.module-toolbar label,.recap-toolbar label,.meal-filter-line label,.run-inputs label,.order-form-grid label,.form-stack label{
 font-size:6.5px;font-weight:750;color:#68766F
}
.module-toolbar input,.recap-toolbar input,.meal-filter-line input,.run-inputs input,.order-form-grid input,.order-form-grid select,.form-stack input,.add-name-line input,.add-name-line select{
 display:block;margin-top:5px;height:36px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 9px;font-size:7px;outline:0
}
.primary-btn,.danger-primary,.module-toolbar button,.recap-toolbar button,.meal-filter-line button,.add-name-line button,.order-actions button{
 height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#405149;padding:0 11px;font-size:6.8px;font-weight:800
}
.primary-btn{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important;box-shadow:0 6px 14px rgba(11,107,79,.13)}
.danger-primary{background:#153F32!important;color:#fff!important;border:0!important;height:40px!important}
.payroll-preview-summary{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px;padding:0 14px 12px}
.payroll-preview-summary>div{background:#F8FAF9;border:1px solid var(--line);border-radius:9px;padding:9px}.payroll-preview-summary span{display:block;font-size:5.7px;color:#849089;font-weight:800}.payroll-preview-summary b{display:block;font-size:13px;margin-top:3px}
.payroll-preview-summary button{border:1px solid var(--line);background:#fff;border-radius:8px;font-size:6.3px;font-weight:750;padding:0 10px}
.run-footer{border-top:1px solid #EDF1EF;padding:13px 14px;display:flex;justify-content:space-between;align-items:end;gap:10px}
.payroll-preview-table input[type=number]{width:82px;height:30px;border:1px solid var(--line);border-radius:7px;padding:0 7px;font-size:6.7px}
.status-ready{display:inline-flex;padding:4px 6px;border-radius:999px;background:#EAF6EF;color:#198354;font-size:5.8px;font-weight:800}.status-check{display:inline-flex;padding:4px 6px;border-radius:999px;background:#FFF2E8;color:#C96522;font-size:5.8px;font-weight:800}
.action-small{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 8px;font-size:6px;color:var(--green);font-weight:750}
.bank-notice{display:flex;gap:8px;align-items:flex-start;margin:13px;padding:9px 10px;border:1px solid #DDE8E2;background:#F7FBF9;border-radius:9px}.bank-notice span{width:20px;height:20px;border-radius:50%;background:#E6F3EC;color:var(--green);display:grid;place-items:center;font-size:7px;font-weight:800}.bank-notice p{margin:2px 0 0;font-size:6.5px;color:#68766F}
.modal-shell{position:fixed;inset:0;background:rgba(14,34,26,.38);backdrop-filter:blur(6px);z-index:500;display:grid;place-items:center;padding:20px}.modal-shell[hidden]{display:none}.modal-card{width:min(650px,95vw);max-height:88vh;overflow:auto;border-radius:17px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.18);border:1px solid #E1E8E4}.compact-modal{width:min(460px,95vw)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 17px;border-bottom:1px solid #EEF1EF}.modal-head span{font-size:5.8px;letter-spacing:.13em;font-weight:800;color:#8B9690}.modal-head h3{font-size:15px;margin:3px 0 0}.modal-head>button{border:0;background:#F2F5F3;width:30px;height:30px;border-radius:9px;font-size:17px}.modal-body{padding:15px 17px}.modal-foot{display:flex;justify-content:flex-end;gap:7px;padding:12px 17px;border-top:1px solid #EEF1EF}.modal-foot>button{height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 11px;font-size:6.7px;font-weight:750}.form-stack{display:grid;gap:10px}.form-stack input{width:100%}
.module-tabs{display:flex;gap:5px;margin:13px 0 9px;padding:4px;background:#EEF3F0;border-radius:10px;width:max-content;max-width:100%;overflow:auto}.module-tabs button{border:0;background:transparent;border-radius:8px;padding:8px 11px;font-size:6.6px;font-weight:750;color:#69776F;white-space:nowrap}.module-tabs button.active{background:#fff;color:var(--green);box-shadow:0 4px 12px rgba(23,55,43,.07)}
.meal-tab{display:none}.meal-tab.active{display:block;animation:pageIn .25s ease both}
.order-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px}.order-form-grid .wide{grid-column:span 2}.order-form-grid input,.order-form-grid select{width:100%}
.meal-name-picker,.draft-panel{border-top:1px solid #EEF1EF;padding:14px}.picker-head,.draft-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.picker-head b,.draft-head b{display:block;font-size:8px}.picker-head small,.draft-head small{font-size:6px;color:#829088}.picker-head input{width:220px;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 9px;font-size:6.8px}
.name-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;max-height:245px;overflow:auto}.name-option{border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px;text-align:left;display:flex;gap:7px;align-items:center;font-size:6.5px;transition:.15s}.name-option:hover,.name-option.selected{border-color:#A9C9BA;background:#F2F8F5}.name-option i{width:24px;height:24px;border-radius:7px;background:#EDF5F1;display:grid;place-items:center;font-style:normal;font-size:7px;font-weight:800;color:var(--green)}
.draft-head>button{border:0;background:#F3F6F4;color:#65736B;border-radius:7px;padding:6px 8px;font-size:6px}.draft-rows{display:grid;gap:5px;margin-top:9px}.draft-row{display:grid;grid-template-columns:1fr 80px 65px 28px;gap:7px;align-items:center;border:1px solid #E7ECE9;border-radius:9px;padding:7px 8px}.draft-row b{font-size:6.8px}.draft-row small{display:block;font-size:5.8px;color:#87928C}.draft-row select,.draft-row input{height:28px;border:1px solid var(--line);border-radius:6px;font-size:6px;padding:0 6px;width:100%}.draft-row button{width:26px;height:26px;border:0;border-radius:7px;background:#FFF0F0;color:#B44D4D}.draft-total{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:9px}.draft-total span{font-size:6.5px;color:#7B8780}.draft-total b{font-size:14px}.order-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid #EEF1EF}
.price-chip{margin-left:auto;font-size:6.2px;font-weight:800;color:#5C6D64;background:#F4F7F5;border-radius:999px;padding:6px 8px}.empty-state{grid-column:1/-1;padding:20px;text-align:center;color:#8A958F;font-size:6.8px}
.recap-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 13px}.recap-summary>div{border:1px solid var(--line);border-radius:9px;padding:10px}.recap-summary span{display:block;font-size:5.8px;color:#86918B;font-weight:800}.recap-summary b{display:block;font-size:14px;margin-top:3px}.master-grid{padding:0 14px 14px;max-height:none}.master-grid .name-option{pointer-events:none}
.result-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.result-links a{display:inline-flex;padding:8px 10px;border-radius:8px;background:#EDF6F1;color:var(--green);text-decoration:none;font-size:6.5px;font-weight:800}.result-message{padding:10px;border-radius:9px;background:#F6F9F7;font-size:7px;line-height:1.55;color:#526159}
@media(max-width:900px){.payroll-preview-summary{grid-template-columns:repeat(2,1fr)}.order-form-grid{grid-template-columns:repeat(2,1fr)}.name-grid{grid-template-columns:repeat(2,1fr)}.run-footer{align-items:stretch;flex-direction:column}}
@media(max-width:560px){.order-form-grid{grid-template-columns:1fr}.order-form-grid .wide{grid-column:auto}.name-grid{grid-template-columns:1fr}.draft-row{grid-template-columns:1fr 75px 55px 28px}.payroll-preview-summary{grid-template-columns:1fr 1fr}}


/* V8.2 Staff Meals PO refinement */
.order-form-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:12px!important;
  row-gap:12px!important;
}
.order-form-grid label{
  min-width:0;
}
.order-form-grid input,
.order-form-grid select{
  min-width:0;
  width:100%;
}
#mealCustomLocationWrap[hidden]{display:none!important}

.draft-row{
  grid-template-columns:minmax(240px,1.5fr) minmax(145px,.85fr) minmax(190px,1.1fr) 70px 34px!important;
  gap:10px!important;
  padding:10px 11px!important;
  align-items:center!important;
}
.draft-row .draft-person{
  min-width:0;
}
.draft-row .draft-person b{
  display:block;
  font-size:7.2px;
  line-height:1.3;
}
.draft-row .draft-person small{
  display:block;
  margin-top:3px;
  color:#8A958F;
  font-size:6px;
  line-height:1.25;
}
.draft-row select,
.draft-row input{
  height:32px!important;
  font-size:6.5px!important;
}
.draft-row .draft-pillar{
  width:100%;
}
.draft-row .draft-qty{
  width:70px;
}
.po-process-box{
  margin:12px 14px 0;
  padding:12px;
  border:1px solid #CFE4D9;
  background:linear-gradient(180deg,#F7FCF9,#F0F8F4);
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  animation:pageIn .25s ease both;
}
.po-process-box[hidden]{display:none!important}
.po-process-status{
  display:flex;
  gap:9px;
  align-items:center;
}
.po-check{
  width:32px;height:32px;border-radius:50%;
  background:#0B6B4F;color:#fff;
  display:grid;place-items:center;
  font-weight:900;font-size:13px;
}
.po-process-status b{
  display:block;font-size:8px;
}
.po-process-status small{
  display:block;font-size:6.2px;color:#76847C;margin-top:2px;
}
.po-download-actions{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;
}
.po-download-actions a,
.po-download-actions button{
  min-height:32px;
  border-radius:8px;
  border:1px solid #DCE6E1;
  background:#fff;
  color:#0B6B4F;
  text-decoration:none;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  font-size:6.4px;
  font-weight:800;
}
.po-download-actions a:first-child{
  background:#0B6B4F;color:#fff;border-color:#0B6B4F;
}
.po-error-box{
  margin:12px 14px 0;
  padding:10px 11px;
  border-radius:9px;
  border:1px solid #F2C9C9;
  background:#FFF5F5;
  color:#9E3434;
  font-size:6.8px;
  line-height:1.5;
}
.po-error-box[hidden]{display:none!important}
#confirmQuickPoBtn.processing{
  opacity:.72;
  pointer-events:none;
}
#confirmQuickPoBtn.processing:after{
  content:"  •••";
}
@media(max-width:1100px){
  .draft-row{
    grid-template-columns:1fr 130px 180px 65px 32px!important;
  }
}
@media(max-width:760px){
  .draft-row{
    grid-template-columns:1fr 1fr!important;
  }
  .draft-row .draft-person{grid-column:1/3}
  .po-process-box{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   V8.3 — READABLE MODERN UI + LIVE STAFF MEALS HISTORY
   ========================================================= */

/* Global readability */
body{
  font-size:14px!important;
  letter-spacing:-.005em;
}
.sidebar{
  grid-auto-rows:max-content;
}
.nav-item{
  font-size:13px!important;
  height:48px!important;
  font-weight:700!important;
}
.logo-block>span{font-size:9px!important}
.support-card b,.profile-card b,.top-profile b{font-size:12px!important}
.support-card small,.profile-card small,.top-profile small{font-size:10px!important}
.hello h1{font-size:22px!important}
.hello p{font-size:12px!important}
.searchbox input{font-size:13px!important}
.searchbox kbd{font-size:10px!important}
.datebox b{font-size:12px!important}
.datebox small{font-size:10px!important}
.content{padding:26px 30px 44px!important}
.section-heading span,.dashboard-intro>div:first-child>span,.eyebrow{
  font-size:10px!important;
  letter-spacing:.12em;
  font-weight:800;
}
.section-heading h2{font-size:28px!important}
.section-heading p,.dashboard-intro p{font-size:12px!important}
.kpi-card span{font-size:11px!important}
.kpi-card strong{font-size:28px!important}
.kpi-card small{font-size:11px!important}
.kpi-card button{font-size:11px!important}
.hero-title b{font-size:13px!important}
.hero-title button{font-size:11px!important}
.finance-box span,.meal-bottom span,.cutoff span{font-size:10px!important}
.finance-box strong{font-size:24px!important}
.finance-box small{font-size:11px!important}
.dw-breakdown b{font-size:18px!important}
.dw-breakdown small{font-size:10px!important}
.panel-head b{font-size:12px!important}
.panel-head button{font-size:10px!important}
th{font-size:10px!important;padding:12px 12px!important}
td{font-size:11px!important;padding:12px 12px!important}
.table-link{font-size:11px!important}
.module-toolbar label,.recap-toolbar label,.meal-filter-line label,.run-inputs label,.order-form-grid label,.form-stack label{
  font-size:11px!important;
}
.module-toolbar input,.recap-toolbar input,.meal-filter-line input,.run-inputs input,.order-form-grid input,.order-form-grid select,.form-stack input,.add-name-line input,.add-name-line select{
  height:44px!important;
  font-size:13px!important;
  border-radius:11px!important;
}
.primary-btn,.danger-primary,.module-toolbar button,.recap-toolbar button,.meal-filter-line button,.add-name-line button,.order-actions button{
  height:44px!important;
  font-size:12px!important;
  border-radius:11px!important;
}
.module-tabs button{
  font-size:11px!important;
  padding:10px 14px!important;
}
.price-chip{font-size:11px!important;padding:8px 10px!important}
.picker-head b,.draft-head b{font-size:13px!important}
.picker-head small,.draft-head small{font-size:10px!important}
.picker-head input{
  width:300px!important;
  height:42px!important;
  font-size:12px!important;
  border-radius:10px!important;
}
.name-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  max-height:330px!important;
}
.name-option{
  min-height:64px;
  padding:11px!important;
  font-size:11px!important;
  border-radius:12px!important;
}
.name-option i{
  width:34px!important;height:34px!important;
  font-size:11px!important;
}
.name-option b{font-size:12px!important}
.name-option small{font-size:10px!important;margin-top:3px;display:block}
.name-option.ordered{
  background:#F7F8F7!important;
  border-color:#E5E9E6!important;
  color:#9AA39E!important;
  cursor:not-allowed!important;
}
.name-option.ordered i{
  background:#ECEFED!important;
  color:#8A958F!important;
}
.name-option .ordered-badge{
  margin-left:auto;
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:999px;
  background:#E9F4EF;
  color:#0B6B4F;
  font-size:9px!important;
  font-weight:800;
}
.draft-row{
  min-height:68px;
}
.draft-row .draft-person b{font-size:12px!important}
.draft-row .draft-person small{font-size:10px!important}
.draft-row select,.draft-row input{
  height:38px!important;
  font-size:11px!important;
  border-radius:9px!important;
}
.draft-total span{font-size:11px!important}
.draft-total b{font-size:20px!important}
.po-process-status b{font-size:13px!important}
.po-process-status small{font-size:10px!important}
.po-download-actions a,.po-download-actions button{font-size:11px!important;min-height:40px!important}
.po-error-box{font-size:11px!important}

/* Live Staff Meals order history */
.today-order-overview{
  margin:14px 0 12px;
  padding:18px;
  border-radius:18px!important;
  overflow:visible!important;
}
.overview-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.overview-head h3{
  margin:4px 0 3px;
  font-size:20px;
  letter-spacing:-.035em;
}
.overview-head p{
  margin:0;
  color:#7D8982;
  font-size:11px;
}
.overview-actions{
  display:flex;align-items:end;gap:8px;
}
.overview-actions label{
  font-size:10px;font-weight:800;color:#65736B;
}
.overview-actions input{
  display:block;
  margin-top:5px;
  height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 10px;
  font-size:12px;
}
.overview-actions button{
  height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 13px;
  font-size:11px;font-weight:800;color:var(--green);
}
.meal-live-grid{
  display:grid;
  grid-template-columns:1fr 1fr .78fr;
  gap:12px;
}
.meal-live-card{
  min-height:180px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#FBFCFB);
}
.meal-live-card.morning{border-top:3px solid #F39A4E}
.meal-live-card.night{border-top:3px solid #5F84B6}
.meal-live-card.total-card{border-top:3px solid var(--green)}
.meal-live-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:11px;
  border-bottom:1px solid #EEF1EF;
}
.meal-live-icon{
  width:38px;height:38px;border-radius:11px;background:#F4F7F5;display:grid;place-items:center;
}
.morning .meal-live-icon{background:#FFF2E7}
.night .meal-live-icon{background:#ECF3FA}
.meal-live-icon img{width:19px;height:19px}
.meal-live-title span{font-size:10px;font-weight:800;color:#6D7973}
.meal-live-title strong{display:block;font-size:23px;line-height:1;margin-top:3px}
.ordered-name-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
  max-height:170px;
  overflow:auto;
}
.order-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  border:1px solid #E1E8E4;
  background:#fff;
  font-size:10px;
  font-weight:700;
  color:#435249;
}
.order-chip b{
  font-size:9px;
  color:#819087;
  font-weight:700;
}
.empty-order{
  color:#96A09A;
  font-size:11px;
  padding:8px 0;
}
.total-order-meta{
  display:grid;
  gap:9px;
  margin-top:14px;
}
.total-order-meta>div{
  display:flex;justify-content:space-between;align-items:center;
  background:#F6F9F7;
  border-radius:10px;
  padding:11px;
}
.total-order-meta span{font-size:10px;color:#75827A}
.total-order-meta b{font-size:14px}

/* Staff Meals page cards */
.meal-page-grid .location-card{
  min-height:112px;
}
.location-card small{font-size:10px!important}
.location-card strong{font-size:26px!important}
.location-card span:last-child{font-size:10px!important}

/* Responsiveness */
@media(max-width:1150px){
  .meal-live-grid{grid-template-columns:1fr 1fr}
  .meal-live-card.total-card{grid-column:1/3}
  .name-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .overview-head{align-items:flex-start;flex-direction:column}
  .meal-live-grid{grid-template-columns:1fr}
  .meal-live-card.total-card{grid-column:auto}
  .name-grid{grid-template-columns:1fr!important}
  .picker-head{align-items:flex-start;flex-direction:column}
  .picker-head input{width:100%!important}
}


/* V8.4 Compact Order Monitor + Deduction */
.order-monitor{padding:18px!important}
.monitor-summary-grid{
 display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px;
}
.monitor-stat{
 min-height:100px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:13px;text-align:left;
 transition:.18s ease;display:flex;flex-direction:column;justify-content:center;
}
button.monitor-stat{cursor:pointer}
.monitor-stat:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(25,55,42,.05)}
.monitor-stat.active{border-color:#A9CBBB;background:#F5FAF7}
.monitor-stat.morning{border-top:3px solid #F39A4E}
.monitor-stat.night{border-top:3px solid #5F84B6}
.monitor-stat.finance{border-top:3px solid #7A8B82}
.monitor-stat.deduction{border-top:3px solid #D96767;background:#FFF9F9}
.monitor-stat.net{border-top:3px solid var(--green);background:#F7FBF9}
.monitor-stat span{font-size:10px;font-weight:800;color:#7C8881}
.monitor-stat strong{font-size:22px;margin-top:5px;letter-spacing:-.04em}
.monitor-stat small{font-size:10px;color:#8B958F;margin-top:3px}
.monitor-toolbar{
 display:flex;gap:9px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #EEF1EF;flex-wrap:wrap;
}
.session-tabs{display:flex;gap:4px;background:#F0F4F2;border-radius:10px;padding:4px}
.session-tabs button{border:0;background:transparent;border-radius:7px;padding:8px 11px;font-size:11px;font-weight:750;color:#6E7B74}
.session-tabs button.active{background:#fff;color:var(--green);box-shadow:0 3px 10px rgba(20,50,38,.06)}
.monitor-search{flex:1;min-width:220px}
.monitor-search input{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 11px;font-size:11px}
.outline-btn{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;font-size:11px;font-weight:800;color:#506159}
.danger-soft{color:#A94949;background:#FFF8F8;border-color:#F0DADA}
.order-detail-wrap{margin-top:13px;border:1px solid #E9EEEB;border-radius:12px;overflow:hidden}
.order-detail-wrap[hidden]{display:none!important}
.monitor-footer{padding:9px 12px;background:#FAFCFB;border-top:1px solid #EEF1EF;color:#7F8A84;font-size:10px}

.deduction-panel{margin-top:12px}
.deduction-panel[hidden]{display:none!important}
.deduction-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.deduction-form-grid label{font-size:11px;font-weight:750;color:#65736B}
.deduction-form-grid input,.deduction-form-grid select{
 width:100%;display:block;margin-top:5px;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font-size:11px;background:#fff
}
.deduction-form-grid .wide{grid-column:span 2}
.deduction-preview{
 margin:0 14px;padding:12px;border:1px solid #F0D9D9;background:#FFF9F9;border-radius:11px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px
}
.deduction-preview span{font-size:10px;font-weight:800;color:#8B6363}
.deduction-preview b{font-size:19px;color:#A94444}
.deduction-preview small{grid-column:1/3;font-size:10px;color:#8C8C8C;margin-top:3px}
.adjustment-history{border-top:1px solid #EEF1EF;padding:14px}
.adjustment-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.adjustment-title b{font-size:12px}
.adjustment-title button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;font-size:10px}

@media(max-width:1250px){
 .monitor-summary-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
 .deduction-form-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
 .monitor-summary-grid{grid-template-columns:1fr 1fr}
 .deduction-form-grid{grid-template-columns:1fr}
 .deduction-form-grid .wide{grid-column:auto}
}


/* V8.5 PO Preview / Void / Finance Settlement */
.po-preview-modal{width:min(900px,96vw)!important}
.po-preview-statusbar{
 display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.po-preview-statusbar>div{
 border:1px solid var(--line);border-radius:11px;padding:10px;background:#F9FBFA;
}
.po-preview-statusbar span,.po-finance-grid span{
 display:block;font-size:10px;font-weight:800;color:#7F8B84;
}
.po-preview-statusbar b{display:block;font-size:13px;margin-top:3px}
.po-finance-grid{
 display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px;
}
.po-finance-grid>div{
 border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;
}
.po-finance-grid strong{display:block;font-size:23px;margin-top:5px;letter-spacing:-.04em}
.po-finance-grid .deduct{background:#FFF9F9;border-color:#F1DDDD}
.po-finance-grid .deduct strong{color:#A94949}
.po-finance-grid .net{background:#F5FAF7;border-color:#D8E8DF}
.po-finance-grid .net strong{color:var(--green)}
.preview-section{
 margin-top:14px;border:1px solid #E8EDEB;border-radius:12px;overflow:hidden;
}
.preview-section-head{
 display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 13px;background:#FAFCFB;border-bottom:1px solid #E8EDEB;
}
.preview-section-head b{display:block;font-size:12px}
.preview-section-head small{display:block;font-size:10px;color:#7D8982;margin-top:2px}
.preview-section-head button{
 border:1px solid var(--line);background:#fff;color:var(--green);border-radius:8px;padding:8px 10px;font-size:10px;font-weight:800;
}
.po-file-actions{
 display:flex;gap:8px;flex-wrap:wrap;padding:13px;
}
.po-file-actions a,.po-file-actions button{
 min-height:40px;border-radius:9px;border:1px solid var(--line);padding:0 12px;
 display:inline-flex;align-items:center;text-decoration:none;background:#fff;color:#4E5D55;font-size:11px;font-weight:800;
}
.po-file-actions .finance-btn{
 background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 7px 16px rgba(11,107,79,.13);
}
.void-zone{
 margin-top:14px;padding:13px;border:1px solid #F0D7D7;background:#FFF9F9;border-radius:11px;
 display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.void-zone[hidden]{display:none!important}
.void-zone b{display:block;font-size:12px;color:#8E3C3C}
.void-zone small{display:block;font-size:10px;color:#8D7777;margin-top:3px}
.void-zone button{
 height:38px;border:1px solid #E2BDBD;border-radius:9px;background:#fff;color:#A13D3D;padding:0 12px;font-size:10px;font-weight:900;
}
.po-status-active,.po-status-void{
 display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;
}
.po-status-active{background:#EAF6EF;color:#198354}
.po-status-void{background:#FFF0F0;color:#A74444}
.po-action-group{display:flex;gap:5px;flex-wrap:wrap}
.po-action-group button,.po-action-group a{
 border:1px solid var(--line);background:#fff;color:var(--green);border-radius:7px;padding:6px 8px;text-decoration:none;font-size:9px;font-weight:800;
}
@media(max-width:700px){
 .po-preview-statusbar,.po-finance-grid{grid-template-columns:1fr 1fr}
 .void-zone{align-items:flex-start;flex-direction:column}
}


/* V8.6 Receive workflow */
.po-workflow-stepper{
 display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;
}
.po-workflow-stepper .step{
 position:relative;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#FAFCFB;color:#8A958F;
}
.po-workflow-stepper .step i{
 width:25px;height:25px;border-radius:50%;background:#EEF2F0;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;
}
.po-workflow-stepper .step span{font-size:10px;font-weight:800}
.po-workflow-stepper .step.done{border-color:#D3E5DC;background:#F4FAF7;color:var(--green)}
.po-workflow-stepper .step.done i{background:var(--green);color:#fff}
.po-finance-grid.four{grid-template-columns:repeat(4,1fr)!important}
.po-finance-grid .received{background:#F6F9FC;border-color:#DCE7F0}
.po-finance-grid .received strong{color:#356E9C;font-size:18px}
.receive-head-actions{display:flex;gap:6px}
.receive-head-actions button{
 min-height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--green);padding:0 9px;font-size:10px;font-weight:800
}
.receive-head-actions .primary-mini{background:var(--green);color:#fff;border-color:var(--green)}
.receive-summary{
 display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 13px;background:#F8FAF9;border-bottom:1px solid #EDF1EF;
}
.receive-summary span{font-size:10px;color:#728078}
.receive-summary b{color:#25372E}
.receive-table input[type=number]{
 width:80px;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 7px;font-size:11px
}
.receive-table input[type=text]{
 min-width:210px;width:100%;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:10px
}
.receive-status-pill{
 display:inline-flex;padding:5px 7px;border-radius:999px;font-size:9px;font-weight:900
}
.receive-status-pill.received{background:#EAF6EF;color:#198354}
.receive-status-pill.partial{background:#FFF4E8;color:#BD681F}
.receive-status-pill.missing{background:#FFF0F0;color:#A74444}
.receive-status-pill.pending{background:#F0F3F2;color:#718078}
.receive-note-line{padding:11px 13px;border-top:1px solid #EDF1EF}
.receive-note-line label{font-size:10px;font-weight:800;color:#69776F}
.receive-note-line input{
 display:block;margin-top:5px;width:100%;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 9px;font-size:10px
}
@media(max-width:760px){
 .po-workflow-stepper{grid-template-columns:1fr 1fr}
 .po-finance-grid.four{grid-template-columns:1fr 1fr!important}
 .receive-head-actions{flex-direction:column}
}


/* V8.7 Selective Settlement Recap */
.settlement-builder{padding:0!important}
.settlement-head{
 display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px;
 border-bottom:1px solid #EDF1EF;
}
.settlement-head h3{margin:4px 0 3px;font-size:18px;letter-spacing:-.03em}
.settlement-head p{margin:0;color:#7B8780;font-size:10px}
.settlement-date-range{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.settlement-date-range label{font-size:10px;font-weight:800;color:#68756E}
.settlement-date-range input[type=date]{
 display:block;margin-top:4px;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font-size:10px
}
.settlement-date-range .check-label{
 display:flex;align-items:center;gap:6px;height:38px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:#FAFCFB;
}
.settlement-date-range .check-label input{margin:0}
.settlement-summary{
 display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:13px 16px;border-bottom:1px solid #EDF1EF;background:#FBFCFB;
}
.settlement-summary[hidden]{display:none!important}
.settlement-summary>div{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.settlement-summary span{display:block;font-size:9px;color:#7D8982;font-weight:800}
.settlement-summary b{display:block;font-size:15px;margin-top:4px}
.settlement-summary .net{background:#F4FAF7;border-color:#D5E7DE}
.settlement-summary .net b{color:var(--green)}
.settlement-actions{
 display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid #EDF1EF;flex-wrap:wrap
}
.settlement-actions[hidden]{display:none!important}
.left-actions,.right-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.settlement-actions button{
 min-height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px;font-size:10px;font-weight:800;color:#4F5F56
}
.settlement-actions .primary-btn{background:var(--green);color:#fff;border-color:var(--green)}
.settlement-actions input{
 height:36px;min-width:260px;border:1px solid var(--line);border-radius:9px;padding:0 9px;font-size:10px
}
#settlementTableWrap[hidden]{display:none!important}
.settlement-payment-paid{display:inline-flex;padding:5px 7px;border-radius:999px;background:#EAF1F8;color:#456D92;font-size:9px;font-weight:900}
.settlement-payment-unpaid{display:inline-flex;padding:5px 7px;border-radius:999px;background:#EAF6EF;color:#198354;font-size:9px;font-weight:900}
.settlement-receive-pending{display:inline-flex;padding:5px 7px;border-radius:999px;background:#FFF3E8;color:#B96B25;font-size:9px;font-weight:900}
.settlement-receive-done{display:inline-flex;padding:5px 7px;border-radius:999px;background:#EAF6EF;color:#198354;font-size:9px;font-weight:900}
.settlement-row-excluded{opacity:.55;background:#FAFAFA}
.settlement-row-paid{background:#F9FBFD}
@media(max-width:1200px){
 .settlement-summary{grid-template-columns:repeat(3,1fr)}
 .settlement-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:650px){
 .settlement-summary{grid-template-columns:1fr 1fr}
 .right-actions{width:100%}
 .settlement-actions input{min-width:0;width:100%}
}

/* V8.8 Staff Meals 3-stage */
.po-workflow-stepper.three{grid-template-columns:repeat(3,1fr)!important}
.history-help{padding:12px 14px;background:#FAFCFB;border-bottom:1px solid #EDF1EF}.history-help b{display:block;font-size:12px}.history-help small{font-size:10px;color:#7B8780}
.ap-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:16px;border-bottom:1px solid #EDF1EF}.ap-head h3{font-size:19px;margin:4px 0 3px}.ap-head p{font-size:10px;color:#7B8780;margin:0}
.ap-date-range{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.ap-date-range label{font-size:10px;font-weight:800}.ap-date-range input[type=date]{display:block;margin-top:4px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 9px}.check-label{display:flex!important;align-items:center;gap:6px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#FAFCFB}
.ap-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:13px 16px;background:#FBFCFB;border-bottom:1px solid #EDF1EF}.ap-summary[hidden],.ap-toolbar[hidden]{display:none!important}.ap-summary>div{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}.ap-summary span{font-size:9px;font-weight:800;color:#7B8780}.ap-summary b{display:block;font-size:15px;margin-top:4px}.ap-summary .net{background:#F4FAF7}.ap-summary .net b{color:var(--green)}
.ap-toolbar{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid #EDF1EF;flex-wrap:wrap}.ap-toolbar input{height:38px;min-width:280px;border:1px solid var(--line);border-radius:9px;padding:0 9px}
.po-edit-meta{display:grid;grid-template-columns:1fr 1fr 160px;gap:8px;padding:12px;background:#FAFCFB}.po-edit-meta label{font-size:10px;font-weight:800}.po-edit-meta input,.po-edit-meta select{display:block;width:100%;height:36px;margin-top:4px;border:1px solid var(--line);border-radius:8px;padding:0 8px}
#poEditRows input{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 7px}.po-paid-watermark{position:relative;background:#F8FBF9!important}.po-paid-watermark:after{content:"PAID";position:absolute;right:26px;top:50%;transform:translateY(-50%) rotate(-10deg);font-size:40px;font-weight:900;color:rgba(24,125,79,.08);pointer-events:none}.status-cancelled{display:inline-flex;padding:5px 8px;border-radius:999px;background:#FFF0F0;color:#A74747;font-size:9px;font-weight:900}
.system-tools{margin-top:14px}.reset-warning{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px}.reset-warning span{font-size:9px;font-weight:900;color:#A84444}.reset-warning b{display:block;font-size:13px;margin-top:3px}.reset-warning p{font-size:10px;color:#7D8982}.reset-warning button,.danger-reset{height:38px;border-radius:9px;font-size:10px;font-weight:900}.reset-warning button{border:1px solid #E8CCCC;background:#FFF8F8;color:#A84444}.danger-reset{border:0;background:#9E4141;color:#fff}
.reset-preview{border-top:1px solid #F0E5E5;padding:14px;display:grid;gap:9px}.reset-preview[hidden]{display:none!important}#resetPreviewStats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.reset-stat{border:1px solid var(--line);border-radius:9px;padding:9px}.reset-stat span{font-size:9px;color:#7D8982}.reset-stat b{display:block;font-size:15px}
.reset-preview label{font-size:10px;font-weight:800}.reset-preview input{display:block;width:100%;height:38px;margin-top:4px;border:1px solid var(--line);border-radius:8px;padding:0 9px}


/* =========================================================
   V8.9 — ADMIN CONTROL + SEARCH-FIRST + BUTTON FIX
   ========================================================= */
.search-first-head{
  align-items:flex-end!important;
}
.po-name-search{
  width:min(380px,100%);
}
.po-name-search input{
  width:100%!important;
}
.po-name-search span{
  display:block;
  margin-top:5px;
  font-size:9px;
  color:#8A958F;
}
.search-results-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  max-height:280px!important;
  min-height:70px;
}
.search-empty{
  grid-column:1/-1;
  min-height:70px;
  border:1px dashed #DCE5E0;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8B9690;
  font-size:11px;
  background:#FAFCFB;
}
.name-option{
  min-height:58px!important;
}
.admin-payment-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.admin-payment-actions button{
  min-height:29px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:0 8px;
  background:#fff;
  font-size:9px;
  font-weight:800;
}
.admin-payment-actions .mark-paid{
  color:#17764C;
  border-color:#CFE5D9;
  background:#F5FBF8;
}
.admin-payment-actions .mark-unpaid{
  color:#A66822;
  border-color:#EEDCC6;
  background:#FFF9F2;
}
.po-paid-watermark{
  overflow:hidden;
}
.po-paid-watermark:after{
  z-index:0;
}
.po-paid-watermark td{
  position:relative;
  z-index:1;
}
@media(max-width:760px){
  .search-results-grid{grid-template-columns:1fr!important}
  .po-name-search{width:100%}
}


/* =========================================================
   V8.10 PAYMENT RUN + INLINE NAME GUARD
   ========================================================= */
.quick-name-add{
  padding:10px 12px 12px;
  border-top:1px solid #EDF1EF;
}
.quick-name-add>button{
  border:0;background:transparent;color:var(--green);font-size:10px;font-weight:850;padding:0;cursor:pointer;
}
.quick-name-add>small{display:block;margin-top:7px;font-size:9px;color:#87928C}
.quick-name-form{
  display:grid;grid-template-columns:1.3fr 1fr auto;gap:7px;margin-top:9px;
}
.quick-name-form[hidden]{display:none!important}
.quick-name-form input,.quick-name-form select{
  height:38px;border:1px solid var(--line);border-radius:9px;padding:0 9px;font-size:10px;background:#fff;
}
.quick-name-form button{height:38px!important;font-size:10px!important}

.run-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px;border-bottom:1px solid #EDF1EF;
}
.run-head h3{font-size:19px;margin:4px 0 3px}
.run-head p{font-size:10px;color:#7C8881;margin:0;max-width:680px}
.run-date-range{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.run-date-range label{font-size:10px;font-weight:800;color:#67736D}
.run-date-range input{display:block;margin-top:4px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 9px;font-size:11px}
.run-summary{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:13px 16px;background:#FBFCFB;border-bottom:1px solid #EDF1EF;
}
.run-summary[hidden],.run-toolbar[hidden],#runTableWrap[hidden]{display:none!important}
.run-summary>div{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.run-summary span{font-size:9px;font-weight:850;color:#78847E}
.run-summary b{display:block;font-size:15px;margin-top:4px}
.run-summary .net{background:#F4FAF7;border-color:#D7E7DF}.run-summary .net b{color:var(--green)}
.run-toolbar{
  display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid #EDF1EF;flex-wrap:wrap;
}
.run-toolbar>div,.run-create-side{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.run-toolbar button{min-height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px;font-size:10px;font-weight:800}
.run-toolbar .primary-btn{background:var(--green);color:#fff;border-color:var(--green)}
.run-toolbar input{height:38px;min-width:300px;border:1px solid var(--line);border-radius:9px;padding:0 9px;font-size:10px}
.in-run-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#F2EDF9;color:#684A9B;font-size:9px;font-weight:900}
.available-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#EAF6EF;color:#18764D;font-size:9px;font-weight:900}
.run-history-help{padding:11px 14px;background:#FAFCFB;border-bottom:1px solid #EDF1EF}
.run-history-help b{display:block;font-size:11px}.run-history-help small{display:block;font-size:9px;color:#7D8982;margin-top:2px}
.run-status-awaiting,.run-status-paid,.run-status-cancelled{
  display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900
}
.run-status-awaiting{background:#FFF4E8;color:#AE681F}
.run-status-paid{background:#EAF6EF;color:#17784E}
.run-status-cancelled{background:#FFF0F0;color:#A74646}

.run-detail-modal{width:min(960px,96vw)!important}
.run-detail-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.run-detail-summary>div{border:1px solid var(--line);border-radius:10px;padding:10px;background:#FAFCFB}
.run-detail-summary span{font-size:9px;color:#78847E;font-weight:850}.run-detail-summary b{display:block;font-size:14px;margin-top:3px}
.run-detail-summary .net{background:#F4FAF7}.run-detail-summary .net b{color:var(--green)}
.run-files{display:flex;gap:8px;margin-top:13px}
.run-files a{min-height:40px;border:1px solid var(--line);border-radius:9px;padding:0 12px;display:inline-flex;align-items:center;text-decoration:none;color:var(--green);font-size:10px;font-weight:850;background:#fff}
.payment-proof-panel{
  margin-top:13px;border:1px solid #D9E7DF;border-radius:12px;padding:13px;background:#F7FBF9;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:8px;align-items:center
}
.payment-proof-panel b{display:block;font-size:11px}.payment-proof-panel small{display:block;font-size:9px;color:#76837B;margin-top:2px}
.payment-proof-panel input{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 8px;background:#fff;font-size:9px}
.payment-proof-panel button{height:38px!important;font-size:9px!important}
.proof-complete{
  margin-top:13px;padding:12px;border:1px solid #CFE5D9;border-radius:11px;background:#F3FAF6;display:flex;gap:10px;align-items:center
}
.proof-complete[hidden]{display:none!important}
.proof-complete>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}
.proof-complete b{display:block;font-size:11px}.proof-complete small{display:block;font-size:9px;color:#718078}
.proof-complete a{margin-left:auto;color:var(--green);font-size:10px;font-weight:850}
@media(max-width:900px){
  .run-head{align-items:flex-start;flex-direction:column}
  .run-summary,.run-detail-summary{grid-template-columns:repeat(2,1fr)}
  .payment-proof-panel{grid-template-columns:1fr}
  .quick-name-form{grid-template-columns:1fr}
}


/* V8.10.2 Pillar allocation inside Payment Run */
.pillar-run-grid{
 display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;
}
.pillar-run-card{
 border:1px solid var(--line);border-radius:10px;padding:10px;background:#FAFCFB;
}
.pillar-run-card span{display:block;font-size:9px;color:#748078;font-weight:800;min-height:24px}
.pillar-run-card b{display:block;font-size:15px;margin-top:4px}
.pillar-run-card small{display:block;font-size:9px;color:#8A958F;margin-top:2px}
.pillar-run-empty{grid-column:1/-1;color:#87928C;font-size:10px;padding:4px}
.legacy-run-note{
 margin:0 12px 12px;padding:9px 10px;border:1px solid #F0DCC7;border-radius:9px;background:#FFF9F2;color:#91642E;font-size:9px;line-height:1.5
}
.legacy-run-note[hidden]{display:none!important}
@media(max-width:900px){.pillar-run-grid{grid-template-columns:repeat(2,1fr)}}


/* V8.10.3 UNRUN status */
.run-status-unrun{
  display:inline-flex;padding:5px 8px;border-radius:999px;
  background:#EEF1F4;color:#5F6B73;font-size:9px;font-weight:900
}
.unrun-zone{
  margin-top:12px;padding:13px;border:1px solid #DDE3E6;background:#F8FAFB;border-radius:11px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.unrun-zone[hidden]{display:none!important}
.unrun-zone b{display:block;font-size:12px;color:#4B5A62}
.unrun-zone small{display:block;font-size:10px;color:#77848B;margin-top:3px}
.unrun-zone button{
  height:38px;border:1px solid #CBD4D9;border-radius:9px;background:#fff;
  color:#536169;padding:0 12px;font-size:10px;font-weight:900
}

.export-on-demand{align-items:center;flex-wrap:wrap}
.export-on-demand button{
 min-height:40px;border:1px solid var(--line);border-radius:9px;padding:0 12px;
 background:var(--green);color:#fff;font-size:10px;font-weight:850;cursor:pointer
}
.export-on-demand button:disabled{opacity:.55;cursor:wait}
.export-on-demand a[hidden]{display:none!important}
.export-on-demand small{font-size:9px;color:#7C8881}
\n/* V8.10.5 proof upload usability */\n.proof-file-wrap{display:grid;gap:4px}.proof-file-wrap small{font-size:9px;color:#75827b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-proof-panel button:disabled{opacity:.6;cursor:wait}\n

/* V8.10.6 fast payment */
.proof-action-stack{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.proof-action-stack .finalize-paid-btn{
  background:#163f34!important;
}
.proof-action-stack button:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
}
.proof-uploaded-state{
  display:inline-flex;padding:5px 8px;border-radius:999px;
  background:#EEF5FF;color:#3F6592;font-size:9px;font-weight:900
}

.name-option.just-selected{animation:nameSelectedPulse .52s ease;border-color:#9CCFBA!important;background:#F0FAF5!important}
.name-option.just-selected:after{content:"✓ DITAMBAHKAN";margin-left:auto;font-size:8px;font-weight:900;color:#17774D}
@keyframes nameSelectedPulse{0%{transform:scale(1)}45%{transform:scale(1.018);box-shadow:0 0 0 8px rgba(21,116,75,.08)}100%{transform:scale(1)}}
.meal-selection-feedback{margin-top:7px;min-height:42px;border:1px solid #CFE6DA;border-radius:10px;background:#F4FBF7;padding:7px 9px;display:flex;align-items:center;gap:8px;animation:feedbackIn .25s ease}
.meal-selection-feedback[hidden]{display:none!important}
.meal-selection-feedback .select-check{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#0F6C4C;color:#fff;font-weight:900}
.meal-selection-feedback b{display:block;font-size:10px;color:#174D3D}.meal-selection-feedback small{display:block;font-size:9px;color:#728079}
@keyframes feedbackIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.draft-sticky-indicator{position:sticky;top:8px;z-index:8;display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 10px;border:1px solid #DCE8E2;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 6px 18px rgba(20,62,48,.06);backdrop-filter:blur(8px)}
.draft-sticky-indicator span{font-size:9px;font-weight:850;color:#748179}.draft-sticky-indicator b{font-size:11px;color:#183F33}.draft-sticky-indicator small{font-size:10px;color:#EF641E;font-weight:850}
.draft-sticky-indicator button{margin-left:auto;border:0;background:#EEF7F2;color:#0F6C4C;border-radius:8px;padding:6px 8px;font-size:9px;font-weight:850}
.draft-sticky-indicator.bump{animation:draftBump .42s ease}
@keyframes draftBump{0%{transform:scale(1)}45%{transform:scale(1.025);border-color:#8EC8AD;background:#F1FAF5}100%{transform:scale(1)}}
.draft-row.new-draft-row{animation:newDraftRow .55s ease}
@keyframes newDraftRow{0%{background:#EAF8F0;transform:translateX(8px)}100%{background:transparent;transform:translateX(0)}}

/* =========================================================
   V8.12 — TOMAFOOD UX REFRESH
   Visual-only redesign. Brand logo asset is intentionally untouched.
   ========================================================= */
:root{
  --ui-radius:16px;
  --ui-radius-sm:12px;
  --ui-shadow:0 10px 30px rgba(18,52,40,.055);
  --ui-shadow-lg:0 28px 80px rgba(8,38,28,.18);
}
body{font-size:14px!important;line-height:1.45}
.app-shell{grid-template-columns:236px 1fr}
.sidebar{padding:22px 16px 16px!important}
.brand-logo{width:156px!important;max-height:52px!important} /* keep TOMAFOOD logo unchanged */
.logo-block>span{font-size:10px!important;color:#829089!important}
.nav-item{height:50px!important;font-size:13px!important;border-radius:13px!important;padding:0 11px!important}
.nav-ico{width:30px!important;height:30px!important}.nav-ico img{width:18px!important;height:18px!important}
.subnav button{font-size:11px!important;padding:9px 8px!important}
.support-card{padding:12px!important}.copyright{font-size:9px!important}

.topbar{height:88px!important;padding:0 30px!important;gap:14px!important}
.hello h1{font-size:21px!important}.hello p{font-size:12px!important}
.searchbox{height:44px!important;border-radius:12px!important}.searchbox input{font-size:13px!important}.searchbox kbd{font-size:10px!important}
.datebox{padding:9px 12px!important;border-radius:12px!important}.datebox b{font-size:12px!important}.datebox small{font-size:10px!important}
.top-profile b{font-size:12px!important}.top-profile small{font-size:10px!important}
.content{padding:30px 34px 54px!important;max-width:1720px;width:100%;margin:0 auto}

.dashboard-intro{margin-bottom:18px!important}.dashboard-intro h2{font-size:30px!important;letter-spacing:-.035em;margin:4px 0!important}.dashboard-intro p{font-size:13px!important}
.section-heading h2{font-size:28px!important;letter-spacing:-.035em}.section-heading p{font-size:13px!important}
.kpi-grid{gap:14px!important}.kpi-card{border-radius:16px!important;padding:17px!important;min-height:142px!important;box-shadow:var(--ui-shadow)!important}
.kpi-card span{font-size:11px!important}.kpi-card strong{font-size:30px!important}.kpi-card small,.kpi-card button{font-size:11px!important}
.hero-grid,.dashboard-row{gap:14px!important;margin-top:14px!important}.hero-card,.panel{border-radius:16px!important;box-shadow:var(--ui-shadow)!important}
.hero-card{padding:18px!important}.hero-title b{font-size:13px!important}.hero-title button{font-size:11px!important;padding:9px 12px!important}
.panel-head{min-height:54px!important;padding:0 16px!important}.panel-head b{font-size:12px!important}.panel-head button{font-size:10px!important;padding:7px 10px!important}
th{font-size:10px!important;padding:13px 14px!important}td{font-size:12px!important;padding:13px 14px!important}.table-link{font-size:11px!important;padding:12px!important}

/* Buttons: clearer hierarchy and larger tap targets */
button,.action-small,.po-action-group a,.po-file-actions a{transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease}
button:not(:disabled):active,.action-small:active,.po-action-group a:active,.po-file-actions a:active{transform:translateY(1px)}
.primary-btn,.danger-primary,.module-toolbar button,.recap-toolbar button,.meal-filter-line button,.add-name-line button,.order-actions button{min-height:44px!important;font-size:12px!important;font-weight:800!important}
.action-small,.po-action-group button,.po-action-group a{font-size:11px!important;padding:8px 11px!important;border-radius:9px!important;min-height:36px;display:inline-flex;align-items:center;gap:6px}
.action-small::before,[data-preview-po]::before,[data-run-preview-po]::before{content:"◉";font-size:11px;line-height:1}

/* Modal UX: click outside to close; sticky, readable header; full working area */
.modal-shell{padding:24px!important;background:rgba(8,31,23,.42)!important;backdrop-filter:blur(9px)!important}
.modal-card{width:min(760px,96vw)!important;max-height:92vh!important;border-radius:20px!important;box-shadow:var(--ui-shadow-lg)!important;overflow:auto!important}
.modal-head{position:sticky;top:0;z-index:8;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);padding:18px 20px!important;align-items:center!important}
.modal-head span{font-size:10px!important;letter-spacing:.12em!important}.modal-head h3{font-size:21px!important;margin-top:4px!important;letter-spacing:-.025em}
.modal-head>button{width:38px!important;height:38px!important;border-radius:11px!important;font-size:22px!important;color:#46544D!important}
.modal-body{padding:18px 20px 22px!important}.modal-foot{padding:14px 20px!important;position:sticky;bottom:0;background:#fff}
.modal-foot>button{height:40px!important;font-size:11px!important}
.po-preview-modal,.run-detail-modal{width:min(1180px,96vw)!important}
.po-preview-modal .modal-body,.run-detail-modal .modal-body{padding:20px 22px 26px!important}
.po-preview-statusbar{gap:10px!important}.po-preview-statusbar>div{padding:14px!important;border-radius:13px!important}
.po-preview-statusbar span,.po-finance-grid span{font-size:10px!important}.po-preview-statusbar b{font-size:14px!important}
.po-finance-grid{gap:10px!important}.po-finance-grid>div{padding:16px!important}.po-finance-grid strong{font-size:24px!important}
.preview-section{margin-top:16px!important;border-radius:14px!important}.preview-section-head{padding:14px 16px!important;gap:14px!important}
.preview-section-head b{font-size:14px!important}.preview-section-head small{font-size:11px!important;line-height:1.5!important}.preview-section-head button{font-size:11px!important;padding:9px 12px!important}
.po-file-actions{padding:15px!important}.po-file-actions a,.po-file-actions button{font-size:11px!important;min-height:42px!important}
.run-files button,.run-files a{font-size:11px!important;min-height:42px!important}

/* Staff Meals name picker */
.picker-head b,.draft-head b{font-size:14px!important}.picker-head small,.draft-head small{font-size:11px!important}
.picker-head input{font-size:13px!important;height:44px!important}
.name-grid{gap:11px!important}.name-option{min-height:70px!important;padding:12px!important}.name-option b{font-size:13px!important}.name-option small{font-size:10px!important}

/* Toast/loading readable */
.toast{font-size:12px!important;padding:12px 15px!important;border-radius:12px!important;box-shadow:0 12px 30px rgba(0,0,0,.16)!important;max-width:min(440px,calc(100vw - 32px))}
.loading b{font-size:13px!important}.loading span{font-size:11px!important}

@media(max-width:1200px){.app-shell{grid-template-columns:220px 1fr}.content{padding:24px!important}.po-preview-modal,.run-detail-modal{width:min(1040px,97vw)!important}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.content{padding:18px!important}.modal-shell{padding:10px!important}.modal-card,.po-preview-modal,.run-detail-modal{width:100%!important;max-height:95vh!important;border-radius:16px!important}.modal-head h3{font-size:18px!important}}
@media(max-width:640px){.po-preview-statusbar,.po-finance-grid{grid-template-columns:1fr 1fr!important}.preview-section-head{align-items:flex-start!important;flex-direction:column}.name-grid{grid-template-columns:1fr!important}}


/* =========================================================
   V8.13 — TOMAFOOD ERP UI SYSTEM
   Clean, larger typography, compact action dropdowns.
   Brand logo asset remains untouched.
   ========================================================= */
:root{
  --tf-green:#0f6b50;
  --tf-green-dark:#0a513d;
  --tf-green-soft:#eef7f3;
  --tf-orange:#ef641e;
  --tf-bg:#f6f8f7;
  --tf-surface:#ffffff;
  --tf-line:#dde6e1;
  --tf-text:#17251f;
  --tf-muted:#6f7d76;
  --tf-danger:#b84742;
  --tf-shadow:0 8px 26px rgba(17,55,41,.055);
  --tf-shadow-lg:0 20px 50px rgba(13,43,32,.13);
}
html{font-size:16px}
body{background:var(--tf-bg)!important;color:var(--tf-text)!important;font-size:14px!important;line-height:1.5!important}
*{box-sizing:border-box}

/* Navigation & header */
.app-shell{grid-template-columns:248px minmax(0,1fr)!important}
.sidebar{background:#fff!important;border-right:1px solid var(--tf-line)!important;padding:22px 16px!important}
.logo-block{padding:4px 6px 20px!important;border-bottom:1px solid #eef2ef!important;margin-bottom:16px!important}
.brand-logo{width:166px!important;max-height:56px!important;object-fit:contain!important;object-position:left center!important}
.nav-item{min-height:50px!important;height:auto!important;border-radius:12px!important;padding:9px 12px!important;font-size:13px!important;font-weight:700!important;gap:10px!important;color:#425049!important}
.nav-item:hover{background:#f4f8f6!important;color:var(--tf-green)!important}.nav-item.active{background:var(--tf-green)!important;color:#fff!important;box-shadow:0 8px 18px rgba(15,107,80,.16)!important}
.nav-item.active .nav-ico img{filter:brightness(0) invert(1)!important}.nav-ico{width:30px!important;height:30px!important}.nav-ico img{width:18px!important;height:18px!important}
.topbar{height:86px!important;padding:0 30px!important;border-bottom:1px solid var(--tf-line)!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important}
.hello h1{font-size:22px!important;letter-spacing:-.02em!important}.hello p{font-size:12px!important;color:var(--tf-muted)!important}
.searchbox{height:46px!important;border-radius:13px!important;background:#fafcfa!important}.searchbox input{font-size:13px!important}
.content{padding:28px 32px 54px!important;max-width:1740px!important;margin:0 auto!important}

/* Global typography */
h1,h2,h3,b,strong{color:var(--tf-text)}
.dashboard-intro h2,.section-heading h2{font-size:30px!important;line-height:1.15!important;letter-spacing:-.035em!important}
.dashboard-intro p,.section-heading p{font-size:13px!important;color:var(--tf-muted)!important;max-width:800px}
.eyebrow,.section-heading span,.dashboard-intro>div:first-child>span{font-size:10px!important;letter-spacing:.11em!important;font-weight:900!important;color:var(--tf-green)!important}

/* Dashboard */
.kpi-grid{gap:16px!important}.kpi-card{min-height:150px!important;padding:20px!important;border-radius:18px!important;border:1px solid var(--tf-line)!important;box-shadow:var(--tf-shadow)!important;background:#fff!important}
.kpi-card span{font-size:11px!important;font-weight:800!important;color:var(--tf-muted)!important}.kpi-card strong{font-size:32px!important;letter-spacing:-.035em!important}.kpi-card small{font-size:11px!important;color:var(--tf-muted)!important}
.hero-grid,.dashboard-row{gap:16px!important;margin-top:16px!important}.hero-card,.panel,.meal-card,.recap-card{border:1px solid var(--tf-line)!important;border-radius:18px!important;box-shadow:var(--tf-shadow)!important;background:#fff!important}
.panel-head{min-height:58px!important;padding:0 18px!important}.panel-head b{font-size:13px!important}.panel-head button{font-size:11px!important;min-height:36px!important;border-radius:9px!important}

/* Forms */
input,select,textarea{font:inherit!important;font-size:13px!important;color:var(--tf-text)!important;border-color:var(--tf-line)!important;border-radius:11px!important;background:#fff!important}
input,select{min-height:44px!important}textarea{min-height:90px!important;padding:12px!important}
label{font-size:11px!important;font-weight:800!important;color:#526059!important}
button{font-family:inherit!important}
.primary-btn,.module-toolbar button,.order-actions button,.recap-toolbar button{min-height:44px!important;border-radius:11px!important;font-size:12px!important;font-weight:850!important}

/* Tabs */
.meal-tabs,.segment-tabs,.tabs{padding:5px!important;border-radius:13px!important;background:#edf2ef!important;gap:4px!important}
.meal-tabs button,.segment-tabs button,.tabs button{min-height:40px!important;padding:0 15px!important;border-radius:9px!important;font-size:12px!important;font-weight:800!important;color:#65736c!important}
.meal-tabs button.active,.segment-tabs button.active,.tabs button.active{background:#fff!important;color:var(--tf-green)!important;box-shadow:0 3px 10px rgba(20,54,42,.08)!important}

/* Tables */
.table-wrap{border-radius:14px!important;border:1px solid #edf1ef!important;background:#fff!important}
table{border-collapse:separate!important;border-spacing:0!important}th{font-size:10px!important;letter-spacing:.035em!important;text-transform:uppercase!important;color:#77837d!important;background:#fafcfb!important;padding:13px 14px!important;white-space:nowrap!important}td{font-size:12px!important;padding:13px 14px!important;color:#45534c!important;vertical-align:middle!important}td b{font-size:12px!important;color:var(--tf-text)!important}tbody tr:hover td{background:#fbfdfc!important}
.status-cancelled,.po-status-active,.settlement-payment-paid,.settlement-payment-unpaid,.proof-ready,.file-ready,.file-pending{display:inline-flex!important;align-items:center!important;min-height:27px!important;border-radius:999px!important;padding:4px 9px!important;font-size:9px!important;font-weight:900!important;white-space:nowrap!important}
.proof-ready,.file-ready{background:#edf8f2;color:#19704e}.file-pending{background:#f2f4f3;color:#7d8983}

/* Compact dropdown action menus */
.action-cell{width:112px!important;min-width:112px!important;overflow:visible!important}
details
.action-menu{position:relative;display:inline-block;z-index:2}
details.action-menu[open]{z-index:100}
details.action-menu summary{
  list-style:none;
  min-width:118px;
  height:38px;
  padding:0 14px;
  border:1px solid #d5dfda;
  border-radius:9px;
  background:#ffffff;
  color:#24453b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:750;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
details.action-menu summary::-webkit-details-marker{display:none}
details.action-menu summary:hover{background:#f7faf8;border-color:#b9cec4;box-shadow:0 4px 12px rgba(16,73,53,.06)}
details.action-menu[open] summary{background:#f2f8f5;border-color:#9ebfb0;color:var(--tf-green)}
.action-menu-popover{
  position:absolute;
  right:0;
  top:44px;
  width:190px;
  padding:6px;
  background:#fff;
  border:1px solid #dce5e0;
  border-radius:10px;
  box-shadow:0 14px 34px rgba(21,54,43,.14);
  z-index:1000;
  text-align:left;
}
.menu-item{
  width:100%;
  min-height:40px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#243b33!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.25!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.menu-item:hover{background:#f3f7f5!important;color:var(--tf-green)!important}
.menu-item.menu-paid{color:#176b4b!important}
.menu-item.menu-paid:hover{background:#eef8f3!important}
.menu-item.menu-danger{color:#b13f38!important}
.menu-item.menu-danger:hover{background:#fff4f2!important;color:#a93630!important}
.menu-separator{height:1px;background:#edf1ef;margin:5px 4px}
.po-action-group,.admin-payment-actions{display:contents!important}

/* Staff Meals */
.picker-card,.draft-card,.meal-panel{border-radius:18px!important;border:1px solid var(--tf-line)!important;box-shadow:var(--tf-shadow)!important}
.picker-head,.draft-head{padding:16px 18px!important}.picker-head b,.draft-head b{font-size:14px!important}.picker-head small,.draft-head small{font-size:11px!important}
.name-grid{gap:10px!important}.name-option{min-height:72px!important;border-radius:13px!important;padding:12px 14px!important}.name-option b{font-size:13px!important}.name-option small{font-size:10px!important}.name-option i{width:34px!important;height:34px!important;font-size:10px!important}
.draft-row{padding:12px 14px!important;min-height:62px!important}.draft-person b{font-size:12px!important}.draft-person small{font-size:10px!important}
.draft-sticky-indicator{top:10px!important;padding:10px 12px!important;border-radius:12px!important;box-shadow:0 8px 20px rgba(19,62,46,.09)!important}.draft-sticky-indicator b{font-size:12px!important}.draft-sticky-indicator small{font-size:11px!important}

/* Preview + modals */
.modal-shell{background:rgba(7,29,21,.46)!important;backdrop-filter:blur(9px)!important;padding:22px!important}
.modal-card{border-radius:20px!important;box-shadow:0 30px 90px rgba(6,32,23,.24)!important;border:1px solid rgba(255,255,255,.7)!important}.po-preview-modal,.run-detail-modal{width:min(1220px,96vw)!important}
.modal-head{padding:18px 22px!important;min-height:78px!important;border-bottom:1px solid #edf1ef!important}.modal-head span{font-size:10px!important}.modal-head h3{font-size:22px!important;line-height:1.2!important}.modal-head>button{width:40px!important;height:40px!important;border-radius:11px!important;font-size:22px!important}
.modal-body{padding:20px 22px 26px!important}.modal-foot{padding:14px 22px!important;border-top:1px solid #edf1ef!important}
.preview-section{border-radius:15px!important;overflow:hidden!important}.preview-section-head{padding:15px 17px!important}.preview-section-head b{font-size:14px!important}.preview-section-head small{font-size:11px!important}.po-preview-statusbar>div,.po-finance-grid>div{border-radius:13px!important;padding:15px!important}.po-finance-grid strong{font-size:25px!important}

/* Cleaner toast */
.toast{font-size:12px!important;padding:13px 16px!important;border-radius:12px!important;max-width:460px!important;box-shadow:0 14px 34px rgba(0,0,0,.16)!important}

@media(max-width:1100px){.app-shell{grid-template-columns:220px minmax(0,1fr)!important}.content{padding:24px!important}.action-menu-popover{right:0}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr!important}.sidebar{display:none!important}.content{padding:18px!important}.topbar{padding:0 18px!important}.modal-shell{padding:8px!important}.modal-card,.po-preview-modal,.run-detail-modal{width:100%!important;max-height:96vh!important}.action-menu-popover{position:fixed;right:14px;left:14px;top:auto;bottom:14px;width:auto;border-radius:16px}}


/* ============================================================
   V8.16 — TABLE ACTION MENU
   Proper in-flow dropdown: it expands the row instead of
   floating over / covering the next row.
   ============================================================ */
td.action-cell{
  vertical-align:top!important;
  overflow:visible!important;
  min-width:150px;
}

details.action-menu{
  display:block!important;
  position:relative!important;
  width:100%;
  max-width:190px;
  z-index:auto!important;
}

details.action-menu[open]{
  z-index:auto!important;
}

details.action-menu > summary{
  list-style:none!important;
  width:100%!important;
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 13px!important;
  border:1px solid #D6E0DB!important;
  border-radius:9px!important;
  background:#FFFFFF!important;
  color:#174D3D!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
  user-select:none!important;
}

details.action-menu > summary::-webkit-details-marker{
  display:none!important;
}

details.action-menu > summary::marker{
  display:none!important;
  content:""!important;
}

details.action-menu > summary:hover{
  background:#F7FAF8!important;
  border-color:#BFCFC7!important;
  box-shadow:none!important;
}

details.action-menu[open] > summary{
  background:#F4F8F6!important;
  border-color:#AAC5B9!important;
  border-bottom-left-radius:7px!important;
  border-bottom-right-radius:7px!important;
}

details.action-menu .action-menu-popover{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin-top:6px!important;
  padding:6px!important;
  display:none;
  border:1px solid #DCE5E1!important;
  border-radius:9px!important;
  background:#FFFFFF!important;
  box-shadow:0 8px 18px rgba(18,66,49,.07)!important;
  transform:none!important;
}

details.action-menu[open] .action-menu-popover{
  display:block!important;
}

details.action-menu .menu-item{
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 10px!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#263B32!important;
  font-size:11px!important;
  font-weight:650!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

details.action-menu .menu-item:hover{
  background:#F3F7F5!important;
  color:#0B6B4F!important;
}

details.action-menu .menu-paid{
  color:#126A48!important;
}

details.action-menu .menu-danger{
  color:#A13C3C!important;
}

details.action-menu .menu-danger:hover{
  background:#FFF4F4!important;
  color:#963333!important;
}

details.action-menu .menu-separator{
  height:1px!important;
  margin:5px 2px!important;
  background:#E9EFEC!important;
}

@media(max-width:900px){
  details.action-menu{
    max-width:none!important;
  }
  details.action-menu .action-menu-popover{
    position:static!important;
    width:100%!important;
    margin-top:6px!important;
    border-radius:9px!important;
  }
}


/* ==========================================================
   V8.17 SMART ACTION MENU
   Compact floating menu + subtle motion. No icons.
   ========================================================== */

td.action-cell{
  vertical-align:middle!important;
  overflow:visible!important;
  min-width:132px!important;
}

details.action-menu{
  display:inline-block!important;
  position:relative!important;
  width:auto!important;
  max-width:none!important;
  z-index:auto!important;
}

details.action-menu > summary{
  list-style:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:112px!important;
  height:36px!important;
  padding:0 14px!important;
  border:1px solid #D7E2DC!important;
  border-radius:8px!important;
  background:#FFFFFF!important;
  color:#1A4E3D!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
  box-shadow:0 1px 2px rgba(18,53,42,.03)!important;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease!important;
  user-select:none!important;
}

details.action-menu > summary::-webkit-details-marker{display:none!important}
details.action-menu > summary::marker{content:""!important}

details.action-menu > summary:hover{
  background:#F7FAF8!important;
  border-color:#B9CEC4!important;
  color:#0F6B4F!important;
  box-shadow:0 3px 9px rgba(15,79,58,.07)!important;
  transform:translateY(-1px)!important;
}

details.action-menu.menu-open > summary{
  background:#F2F8F5!important;
  border-color:#9FC2B2!important;
  color:#0F6B4F!important;
  box-shadow:0 3px 10px rgba(15,79,58,.08)!important;
}

details.action-menu .action-menu-popover{
  position:fixed!important;
  left:var(--menu-x,0)!important;
  top:var(--menu-y,0)!important;
  z-index:99999!important;
  width:178px!important;
  min-width:178px!important;
  max-width:178px!important;
  margin:0!important;
  padding:6px!important;
  border:1px solid #DCE6E1!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:
    0 18px 42px rgba(18,49,39,.12),
    0 4px 12px rgba(18,49,39,.06)!important;
  backdrop-filter:blur(12px)!important;

  opacity:0!important;
  transform:translateY(-5px) scale(.985)!important;
  transform-origin:var(--menu-origin,top right)!important;
  pointer-events:none!important;
  visibility:hidden!important;

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s!important;
}

details.action-menu .action-menu-popover[data-direction="up"]{
  transform:translateY(5px) scale(.985)!important;
}

details.action-menu .action-menu-popover.menu-visible{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  pointer-events:auto!important;
  visibility:visible!important;
  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s!important;
}

details.action-menu .action-menu-popover.menu-hiding{
  opacity:0!important;
  transform:translateY(-4px) scale(.985)!important;
  pointer-events:none!important;
}

details.action-menu .menu-item{
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 10px!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#2C4138!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.2!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:background .12s ease,color .12s ease,padding-left .12s ease!important;
}

details.action-menu .menu-item:hover{
  background:#F3F7F5!important;
  color:#0E694D!important;
  padding-left:13px!important;
}

details.action-menu .menu-paid{
  color:#176947!important;
}

details.action-menu .menu-danger{
  color:#A34343!important;
}

details.action-menu .menu-danger:hover{
  background:#FFF4F4!important;
  color:#8F3030!important;
}

details.action-menu .menu-separator{
  height:1px!important;
  margin:5px 4px!important;
  background:#E9EFEC!important;
}

/* smoother table row hover */
table tbody tr{
  transition:background .14s ease, box-shadow .14s ease!important;
}
table tbody tr:hover{
  background:#FBFDFC!important;
}

/* keep dropdown usable on narrow screens */
@media(max-width:900px){
  details.action-menu > summary{
    min-width:104px!important;
    height:35px!important;
  }
  details.action-menu .action-menu-popover{
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
  }
}


/* ==========================================================
   V8.18 — RELIABLE ACTION DROPDOWN
   Native <details>, one-open only, subtle animation.
   ========================================================== */
td.action-cell{
  position:relative!important;
  overflow:visible!important;
  vertical-align:middle!important;
  min-width:132px!important;
}

details.action-menu{
  position:relative!important;
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  z-index:20!important;
}

details.action-menu[open]{
  z-index:2000!important;
}

details.action-menu > summary{
  list-style:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:112px!important;
  height:36px!important;
  padding:0 14px!important;
  border:1px solid #D6E0DB!important;
  border-radius:8px!important;
  background:#FFFFFF!important;
  color:#184B3B!important;
  font-size:11px!important;
  font-weight:700!important;
  cursor:pointer!important;
  user-select:none!important;
  box-shadow:0 1px 2px rgba(18,53,42,.03)!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}

details.action-menu > summary::-webkit-details-marker{display:none!important}
details.action-menu > summary::marker{content:""!important}

details.action-menu > summary:hover{
  background:#F7FAF8!important;
  border-color:#B9CBC3!important;
  color:#0F6B4F!important;
  box-shadow:0 3px 9px rgba(15,79,58,.06)!important;
  transform:translateY(-1px)!important;
}

details.action-menu[open] > summary{
  background:#F2F8F5!important;
  border-color:#9FC0B1!important;
  color:#0F6B4F!important;
}

details.action-menu .action-menu-popover{
  position:absolute!important;
  top:calc(100% + 7px)!important;
  right:0!important;
  left:auto!important;
  width:180px!important;
  min-width:180px!important;
  max-width:180px!important;
  margin:0!important;
  padding:6px!important;
  border:1px solid #DCE5E1!important;
  border-radius:10px!important;
  background:#FFFFFF!important;
  box-shadow:0 16px 38px rgba(18,49,39,.13),0 4px 12px rgba(18,49,39,.06)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  z-index:99999!important;
}

details.action-menu[open] .action-menu-popover.menu-enter{
  animation:actionMenuIn .16s ease both!important;
}

@keyframes actionMenuIn{
  from{opacity:0;transform:translateY(-5px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

details.action-menu .menu-item{
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 10px!important;
  margin:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#2C4138!important;
  font-size:11px!important;
  font-weight:650!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:background .12s ease,color .12s ease,padding-left .12s ease!important;
}

details.action-menu .menu-item:hover{
  background:#F3F7F5!important;
  color:#0E694D!important;
  padding-left:13px!important;
}

details.action-menu .menu-danger{color:#A34343!important}
details.action-menu .menu-danger:hover{background:#FFF4F4!important;color:#8F3030!important}
details.action-menu .menu-separator{height:1px!important;margin:5px 4px!important;background:#E9EFEC!important}

/* If the table sits inside a scroll wrapper, allow menu to remain visible */
.table-wrap,
.table-shell,
.data-table-wrap{
  overflow:visible!important;
}


/* ==========================================================
   V8.19 — RESTRAINED STATUS VISUALS
   Brand-first: neutral UI, color only for meaningful states.
   ========================================================== */

/* Remove decorative status dots/bullets from preview/history. */
.status-dot,
.preview-dot,
.state-dot,
.badge-dot,
.po-preview-dot,
.run-preview-dot{
  display:none!important;
}

/* Base badge stays neutral. */
.badge,
.status-badge,
.pill,
.status-pill{
  border:1px solid #DCE4E0!important;
  background:#F7F9F8!important;
  color:#43544C!important;
  box-shadow:none!important;
}

/* Only operational states receive semantic color. */
.badge.paid,
.status-badge.paid,
.pill.paid,
.status-pill.paid,
.badge.success,
.status-badge.success{
  background:#EDF6F1!important;
  border-color:#C7DDD2!important;
  color:#176047!important;
}

.badge.unpaid,
.status-badge.unpaid,
.pill.unpaid,
.status-pill.unpaid,
.badge.awaiting,
.status-badge.awaiting,
.badge.awaiting-payment,
.status-badge.awaiting-payment{
  background:#FAF7EE!important;
  border-color:#E4D9B9!important;
  color:#725D26!important;
}

.badge.cancelled,
.status-badge.cancelled,
.pill.cancelled,
.status-pill.cancelled,
.badge.danger,
.status-badge.danger{
  background:#FBF1F1!important;
  border-color:#E6CCCC!important;
  color:#8A3D3D!important;
}

/* Preview is an action, not a status: use one TOMAFOOD brand treatment only. */
.preview-action,
.menu-item.preview,
[data-action="preview"],
button[data-preview],
a[data-preview]{
  background:#F1F7F4!important;
  border-color:#C9DDD4!important;
  color:#155B45!important;
}

/* Keep document/file actions neutral to avoid a rainbow UI. */
.pdf-action,
.excel-action,
.document-action,
.file-action{
  background:transparent!important;
  color:#34473E!important;
  border-color:#DCE4E0!important;
}

/* No decorative colored dots in table cells. */
td .status-dot,
td .preview-dot,
.action-menu .status-dot,
.action-menu .preview-dot{
  display:none!important;
}


/* V8.20 — actual Preview PO menu class */
details.action-menu .menu-item.menu-preview{
  position:relative!important;
  background:#F2F7F4!important;
  color:#155B45!important;
  border:1px solid #D5E4DD!important;
  padding-left:10px!important;
  margin-bottom:3px!important;
}

details.action-menu .menu-item.menu-preview:hover{
  background:#EAF3EE!important;
  color:#0F654B!important;
  border-color:#BDD5CA!important;
  padding-left:10px!important;
}

/* Remove any decorative dot/bullet generated by old styles. */
details.action-menu .menu-item.menu-preview::before,
details.action-menu .menu-item.menu-preview::after,
details.action-menu .menu-preview::before,
details.action-menu .menu-preview::after{
  content:none!important;
  display:none!important;
}

/* Keep all ordinary menu items plain. */
details.action-menu .menu-item:not(.menu-preview):not(.menu-paid):not(.menu-danger){
  background:transparent!important;
  border-color:transparent!important;
}

/* V8.21 hard reset for Preview PO marker */
details.action-menu .menu-preview{
  list-style:none!important;
}
details.action-menu .menu-preview::before,
details.action-menu .menu-preview::after{
  content:""!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
}


/* ==========================================================
   V8.22 — PREVIEW PO PLAIN ACTION
   Preview PO should look like Tandai PAID: no special block.
   ========================================================== */
details.action-menu .menu-item.menu-preview{
  background:transparent!important;
  border-color:transparent!important;
  color:#2C4138!important;
  margin-bottom:0!important;
  padding-left:10px!important;
}

details.action-menu .menu-item.menu-preview:hover{
  background:#F3F7F5!important;
  color:#0E694D!important;
  border-color:transparent!important;
  padding-left:13px!important;
}

details.action-menu .menu-item.menu-preview::before,
details.action-menu .menu-item.menu-preview::after{
  content:none!important;
  display:none!important;
}


/* ==========================================================
   V8.23 — PLAIN PREVIEW + TRUE SINGLE ACTION MENU
   ========================================================== */

/* Preview PO must look exactly like a regular action item. */
details.action-menu .action-menu-popover .menu-item.menu-preview,
details.action-menu .action-menu-popover button.menu-preview,
details.action-menu .action-menu-popover a.menu-preview{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:#2C4138!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:7px!important;
}

details.action-menu .action-menu-popover .menu-item.menu-preview:hover,
details.action-menu .action-menu-popover button.menu-preview:hover,
details.action-menu .action-menu-popover a.menu-preview:hover{
  background:#F3F7F5!important;
  background-color:#F3F7F5!important;
  border:0!important;
  color:#0E694D!important;
  padding-left:13px!important;
  box-shadow:none!important;
}

details.action-menu .menu-preview::before,
details.action-menu .menu-preview::after,
details.action-menu .menu-item.menu-preview::before,
details.action-menu .menu-item.menu-preview::after{
  content:none!important;
  display:none!important;
}

/* Hide popover unless its own details is open. */
details.action-menu:not([open]) > .action-menu-popover{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

details.action-menu[open] > .action-menu-popover{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Prevent stale open menus from visually stacking. */
details.action-menu:not(.is-open) > .action-menu-popover{
  display:none!important;
}

details.action-menu.is-open[open] > .action-menu-popover{
  display:block!important;
}


/* V8.25 — Payment Due Date / Paid Date */
.po-due-date,
.po-paid-date,
.po-due-empty{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 8px;
  border-radius:7px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.po-due-date{
  background:#F7F9F8;
  color:#42544B;
  border:1px solid #E0E7E3;
}
.po-due-date.h1,
.po-due-date.today{
  background:#FAF7EE;
  color:#725D26;
  border-color:#E4D9B9;
}
.po-due-date.overdue{
  background:#FBF2F2;
  color:#8A3D3D;
  border-color:#E7D1D1;
}
.po-paid-date{
  background:#EDF6F1;
  color:#176047;
  border:1px solid #C7DDD2;
}
.po-due-empty{
  background:transparent;
  color:#8B9690;
  border:1px dashed #D7E0DB;
  font-weight:600;
}
.po-preview-statusbar{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
@media(max-width:1000px){
  .po-preview-statusbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* V8.26 Payment Notification Center */
.notification-wrap{position:relative;display:flex;align-items:center}
.notification-wrap .bell{position:relative}
.notification-wrap .bell i{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:#E32636;color:#fff;font-size:10px;font-style:normal;font-weight:800;
  line-height:1;border:2px solid #fff
}
.notification-wrap .bell.has-new-alert{animation:notificationBellPulse .55s ease 2}
@keyframes notificationBellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.notification-panel{
  position:absolute;top:calc(100% + 12px);right:0;z-index:99998;width:390px;
  max-height:min(640px,75vh);overflow:hidden;background:#fff;border:1px solid #DCE5E1;
  border-radius:16px;box-shadow:0 24px 60px rgba(18,49,39,.16),0 6px 18px rgba(18,49,39,.07)
}
.notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px 13px;border-bottom:1px solid #EDF1EF}
.notification-head span{display:block;color:#85918B;font-size:9px;font-weight:800;letter-spacing:.08em}
.notification-head b{display:block;margin-top:3px;color:#203C32;font-size:14px}
.notification-head button{border:1px solid #DCE5E1;background:#fff;color:#145B44;border-radius:8px;height:32px;padding:0 10px;font-size:10px;font-weight:700}
.notification-summary{padding:13px 17px;background:#F8FAF9;border-bottom:1px solid #EDF1EF}
.notification-summary b{display:block;color:#294238;font-size:12px}
.notification-summary small{display:block;margin-top:3px;color:#7C8983;font-size:10px}
.notification-list{max-height:470px;overflow:auto;padding:8px}
.notification-group-title{padding:10px 8px 6px;color:#89958F;font-size:8px;font-weight:800;letter-spacing:.08em}
.notification-item{width:100%;display:block;padding:11px 12px;margin:0 0 5px;border:1px solid transparent;border-radius:10px;background:#fff;text-align:left;cursor:pointer;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.notification-item:hover{background:#F7FAF8;border-color:#DBE6E1;transform:translateY(-1px)}
.notification-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notification-item-top b{color:#244137;font-size:10px}
.notification-item-top span{color:#745E28;font-size:9px;font-weight:800}
.notification-item.overdue .notification-item-top span{color:#A33D3D}
.notification-item-main{margin-top:7px}
.notification-item-main strong{display:block;color:#173E31;font-size:16px}
.notification-item-main small{display:block;margin-top:2px;color:#7A8781;font-size:10px;line-height:1.35}
.notification-item-date{margin-top:7px;color:#52645B;font-size:9px;font-weight:700}
.notification-empty{padding:26px 16px;text-align:center;color:#83908A;font-size:11px}
.notification-foot{padding:9px 15px;border-top:1px solid #EDF1EF;background:#FBFCFB}
.notification-foot small{color:#8D9792;font-size:9px}
@media(max-width:700px){
  .notification-panel{position:fixed;left:12px;right:12px;top:74px;width:auto;max-height:75vh}
}


/* ==========================================================
   V8.27 — HARD VISUAL SINGLE-MENU GUARD
   ========================================================== */
details.action-menu > .action-menu-popover{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

details.action-menu.is-open[open] > .action-menu-popover{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Preview remains plain like Tandai PAID. */
details.action-menu .menu-item.menu-preview{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#2C4138!important;
}
details.action-menu .menu-item.menu-preview:hover{
  background:#F3F7F5!important;
  border:0!important;
  color:#0E694D!important;
}


/* ==========================================================
   V8.28 — CUSTOM ACTION DROPDOWN
   Reliable, no native details/toggle behavior.
   ========================================================== */
.action-cell{
  position:relative!important;
  overflow:visible!important;
  vertical-align:middle!important;
}

[data-action-menu]{
  position:relative!important;
  display:inline-block!important;
  z-index:20!important;
}

[data-action-menu].open{
  z-index:5000!important;
}

.action-menu-trigger{
  min-width:112px!important;
  height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 14px!important;
  border:1px solid #D6E0DB!important;
  border-radius:8px!important;
  background:#FFFFFF!important;
  color:#184B3B!important;
  font-size:11px!important;
  font-weight:700!important;
  cursor:pointer!important;
  box-shadow:0 1px 2px rgba(18,53,42,.03)!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;
}

.action-menu-trigger:hover,
[data-action-menu].open .action-menu-trigger{
  background:#F5F9F7!important;
  border-color:#AFC9BD!important;
  color:#0F674D!important;
}

[data-action-menu] > .action-menu-popover{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 7px)!important;
  right:0!important;
  width:190px!important;
  min-width:190px!important;
  padding:6px!important;
  border:1px solid #DCE5E1!important;
  border-radius:10px!important;
  background:#FFFFFF!important;
  box-shadow:0 16px 38px rgba(18,49,39,.13),0 4px 12px rgba(18,49,39,.06)!important;
  z-index:99999!important;
}

[data-action-menu].open > .action-menu-popover{
  display:block!important;
}

[data-action-menu].open > .action-menu-popover.menu-enter{
  animation:tomafoodActionMenuIn .14s ease both!important;
}

@keyframes tomafoodActionMenuIn{
  from{opacity:0;transform:translateY(-4px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Preview stays plain, same family as other normal actions. */
[data-action-menu] .menu-item.menu-preview{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#2C4138!important;
}
[data-action-menu] .menu-item.menu-preview:hover{
  background:#F3F7F5!important;
  color:#0E694D!important;
}

/* Neutral default items, only important action/status keeps semantic color. */
[data-action-menu] .menu-item{
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#2C4138!important;
  font-size:11px!important;
  font-weight:650!important;
  text-align:left!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
[data-action-menu] .menu-item:hover{
  background:#F3F7F5!important;
  color:#0E694D!important;
}
[data-action-menu] .menu-danger{color:#A34343!important}
[data-action-menu] .menu-danger:hover{background:#FFF4F4!important;color:#8F3030!important}


/* ==========================================================
   V8.29 — RELIABLE NATIVE ACTION SELECT
   ========================================================== */
.po-action-select{
  width:132px!important;
  height:38px!important;
  padding:0 34px 0 12px!important;
  border:1px solid #C7D8D0!important;
  border-radius:9px!important;
  background:#FFFFFF!important;
  color:#176047!important;
  font-size:11px!important;
  font-weight:700!important;
  cursor:pointer!important;
  box-shadow:none!important;
  outline:none!important;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease!important;
}
.po-action-select:hover,
.po-action-select:focus{
  border-color:#9FC3B3!important;
  background:#F8FBF9!important;
  box-shadow:0 0 0 3px rgba(15,107,79,.06)!important;
}
.po-action-select option{
  color:#263D34;
  background:#FFFFFF;
  font-size:12px;
}

/* Due date can be edited directly from its column. */
.due-clickable{
  cursor:pointer!important;
  font-family:inherit!important;
  transition:background .14s ease,border-color .14s ease,color .14s ease!important;
}
.due-clickable:hover{
  border-color:#B5CCC1!important;
  background:#F4F8F6!important;
}
.due-empty-action{
  color:#176047!important;
  border:1px dashed #BFD3C9!important;
  background:#FFFFFF!important;
}
.due-empty-action:hover{
  background:#F2F7F4!important;
  border-style:solid!important;
}


/* ==========================================================
   V8.30 — ACTION SELECT WIDTH + DATE PICKER
   ========================================================== */

/* Prevent action select from being clipped by the table edge. */
th:last-child,
td.action-cell{
  min-width:170px!important;
  width:170px!important;
  overflow:visible!important;
}

.po-action-select{
  width:148px!important;
  min-width:148px!important;
  max-width:148px!important;
  box-sizing:border-box!important;
  padding-left:12px!important;
  padding-right:30px!important;
}

/* Direct due-date edit buttons */
.due-clickable{
  max-width:150px;
  min-height:30px;
  padding:0 9px!important;
  white-space:nowrap;
}

/* Date picker modal */
.date-picker-modal{
  position:fixed;
  inset:0;
  z-index:120000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(19,39,31,.32);
  backdrop-filter:blur(3px);
}
.date-picker-modal[hidden]{display:none!important}

.date-picker-card{
  width:min(430px,100%);
  border-radius:16px;
  background:#fff;
  border:1px solid #DCE5E1;
  box-shadow:0 28px 80px rgba(19,49,38,.20);
  overflow:hidden;
  animation:datePickerIn .16s ease both;
}
@keyframes datePickerIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.date-picker-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 20px 15px;
  border-bottom:1px solid #EDF1EF;
}
.date-picker-head span{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  color:#86928C;
}
.date-picker-head h3{
  margin:4px 0 2px;
  font-size:18px;
  color:#173F32;
}
.date-picker-head small{
  color:#78867F;
  font-size:10px;
}
.date-picker-close{
  width:34px;
  height:34px;
  border:1px solid #DCE5E1;
  border-radius:9px;
  background:#fff;
  color:#52645B;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.date-picker-close:hover{
  background:#F6F9F7;
  color:#145B44;
}

.date-picker-body{
  padding:18px 20px;
}
.date-picker-body label{
  display:block;
  font-size:11px;
  font-weight:750;
  color:#30463C;
}
.date-picker-body input[type=date]{
  width:100%;
  height:46px;
  margin-top:7px;
  padding:0 12px;
  border:1px solid #C7D8D0;
  border-radius:10px;
  background:#fff;
  color:#203D32;
  font-size:13px;
  font-weight:650;
  box-sizing:border-box;
}
.date-picker-body input[type=date]:focus{
  outline:none;
  border-color:#8EB7A5;
  box-shadow:0 0 0 3px rgba(15,107,79,.07);
}
.date-picker-body p{
  margin:8px 0 0;
  font-size:9px;
  color:#85918B;
  line-height:1.45;
}

.date-picker-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 20px 18px;
  border-top:1px solid #EDF1EF;
}
.date-picker-actions>div{
  display:flex;
  gap:8px;
}
.date-picker-actions button{
  min-height:38px;
  padding:0 14px;
  border-radius:9px;
  font-size:10px;
  font-weight:750;
}


/* ==========================================================
   V8.32 — ACTION SELECT FIT FIX
   Prevent "Pilih Aksi" from looking clipped at the table edge.
   ========================================================== */

/* Reserve enough width for the last column. */
#poHistoryRows td.action-cell,
table th:last-child,
table td.action-cell{
  min-width:190px!important;
  width:190px!important;
  max-width:none!important;
  padding-left:12px!important;
  padding-right:18px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Native select fits fully inside the action column. */
.po-action-select{
  display:block!important;
  width:156px!important;
  min-width:156px!important;
  max-width:156px!important;
  height:40px!important;
  margin:0!important;
  padding:0 34px 0 14px!important;
  box-sizing:border-box!important;
  border-radius:10px!important;
  white-space:nowrap!important;
}

/* Give the History table a slightly larger minimum width so
   the last column is not squeezed by the scroll container. */
#meal-history .table-wrap table,

/* The scroll container should scroll horizontally instead of
   cutting the action control. */
#meal-history .table-wrap,
.table-wrap:has(#poHistoryRows){
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-right:8px!important;
}

/* Smaller screens: still keep the action usable. */
@media(max-width:1100px){
  #poHistoryRows td.action-cell,
  table th:last-child,
  table td.action-cell{
    min-width:178px!important;
    width:178px!important;
  }
  .po-action-select{
    width:148px!important;
    min-width:148px!important;
    max-width:148px!important;
  }
}


/* ==========================================================
   V8.33 — HISTORY PO ACTION BOX
   Proper boxed action cell, no clipping at the right edge.
   ========================================================== */

/* History PO table owns its own scroll area. */
.table-wrap:has(#poHistoryRows){
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-right:18px!important;
  scrollbar-gutter:stable!important;
}

/* Give the table enough width instead of squeezing the last column. */
.table-wrap:has(#poHistoryRows) table{
  min-width:1320px!important;
  width:100%!important;
  table-layout:auto!important;
}

/* Last Action column gets a real box area. */
.table-wrap:has(#poHistoryRows) th:last-child{
  min-width:190px!important;
  width:190px!important;
  text-align:center!important;
}

#poHistoryRows td.action-cell{
  min-width:190px!important;
  width:190px!important;
  max-width:190px!important;
  padding:10px 14px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Box wrapper feel around the select. */
#poHistoryRows td.action-cell::before{
  content:""!important;
  display:none!important;
}

#poHistoryRows .po-action-select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:42px!important;
  margin:0!important;
  padding:0 36px 0 14px!important;
  border:1px solid #BFD4CA!important;
  border-radius:11px!important;
  background:#FFFFFF!important;
  color:#155C45!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1!important;
  box-sizing:border-box!important;
  box-shadow:0 1px 2px rgba(18,53,42,.03)!important;
  cursor:pointer!important;
}

#poHistoryRows .po-action-select:hover,
#poHistoryRows .po-action-select:focus{
  background:#F7FAF8!important;
  border-color:#95BAA9!important;
  box-shadow:0 0 0 3px rgba(15,107,79,.06)!important;
  outline:none!important;
}

/* Make status/due columns less likely to steal width from Action. */
.table-wrap:has(#poHistoryRows) th:nth-last-child(2),
#poHistoryRows td:nth-last-child(2){
  min-width:180px!important;
}

.table-wrap:has(#poHistoryRows) th:nth-last-child(3),
#poHistoryRows td:nth-last-child(3){
  min-width:115px!important;
}

/* Slightly cleaner cell wrapping in History PO. */
#poHistoryRows td{
  vertical-align:middle!important;
}

#poHistoryRows td:nth-child(1){
  min-width:130px!important;
}

#poHistoryRows td:nth-child(5){
  min-width:130px!important;
}

/* Small screen: keep the full action box and let table scroll horizontally. */
@media(max-width:1100px){
  .table-wrap:has(#poHistoryRows) table{
    min-width:1260px!important;
  }

  #poHistoryRows td.action-cell,
  .table-wrap:has(#poHistoryRows) th:last-child{
    min-width:180px!important;
    width:180px!important;
    max-width:180px!important;
  }
}


/* Fallback selectors without :has() */
.po-history-table-wrap{
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  padding-right:18px!important;
  scrollbar-gutter:stable!important;
}
.po-history-table{
  min-width:1320px!important;
  width:100%!important;
  table-layout:auto!important;
}
.po-history-table th:last-child{
  min-width:190px!important;
  width:190px!important;
  text-align:center!important;
}


/* ==========================================================
   V8.34 — ACTIVE STAFF MEALS KPI CARDS
   ========================================================== */
.meal-page-grid .location-card strong{
  transition:transform .18s ease,opacity .18s ease;
}

.meal-page-grid .location-card strong.kpi-refresh-pop{
  animation:mealKpiRefresh .30s ease both;
}

@keyframes mealKpiRefresh{
  0%{opacity:.45;transform:translateY(2px)}
  55%{opacity:1;transform:translateY(-1px)}
  100%{opacity:1;transform:translateY(0)}
}

.meal-page-grid .location-card{
  position:relative;
}

.meal-page-grid .location-card::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(15,107,79,.10),transparent);
  pointer-events:none;
}


/* V8.35 — Daily KPI + Monthly Cutoff Finance */
#liveMealGrossLabel,
#liveMealNetLabel,
#liveAdjCount{
  line-height:1.35!important;
}

.meal-page-grid .location-card strong:not(:empty){
  color:#173E31;
}

/* V8.36 — Monthly Order Monitor */
#liveMealMonth{
  min-width:150px;
}


/* V8.37 — Daily top cards + Monthly monitor separation */
.meal-page-grid .location-card small{
  letter-spacing:.01em;
}
.monitor-summary-grid .monitor-stat > span{
  line-height:1.25!important;
}
#liveMealMonth{
  min-width:150px;
}


/* ==========================================================
   V8.38 — ATTENDANCE WORKSPACE REDESIGN
   TOMAFOOD logo asset is intentionally untouched.
   ========================================================== */

.attendance-subnav{
  margin:3px 0 8px 42px!important;
  padding:5px 0 5px 10px!important;
  border-left:1px solid #DCE7E2!important;
}
.attendance-subnav button{
  width:calc(100% - 8px)!important;
  min-height:34px!important;
  padding:0 11px!important;
  margin:2px 0!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#67766F!important;
  font-size:11px!important;
  font-weight:650!important;
  text-align:left!important;
  cursor:pointer!important;
}
.attendance-subnav button:hover{
  background:#F3F7F5!important;
  color:#155D46!important;
}
.attendance-subnav button.active{
  background:#EAF4EF!important;
  color:#0F684E!important;
  font-weight:800!important;
}
.attendance-nav-toggle.open .drop-chev{
  transform:rotate(90deg)!important;
}

.attendance-workspace-page{
  padding-bottom:20px;
}
.attendance-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.attendance-page-head>div>span{
  display:block;
  margin-bottom:5px;
  color:#0E6A4F;
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
}
.attendance-page-head h2{
  margin:0;
  color:#172D25;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.035em;
}
.attendance-page-head p{
  margin:7px 0 0;
  color:#78867F;
  font-size:13px;
}
.compact-action{
  min-height:40px!important;
  padding:0 16px!important;
}

.attendance-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.attendance-kpi{
  min-height:112px;
  padding:18px;
  border:1px solid #DFE7E3;
  border-radius:15px;
  background:#FFFFFF;
  box-shadow:0 8px 25px rgba(23,57,45,.035);
}
.attendance-kpi span{
  display:block;
  color:#7F8C86;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}
.attendance-kpi strong{
  display:block;
  margin-top:9px;
  color:#183229;
  font-size:27px;
  line-height:1;
}
.attendance-kpi small{
  display:block;
  margin-top:8px;
  color:#929C97;
  font-size:9px;
}
.attendance-kpi.good{
  background:#F6FAF8;
  border-color:#D5E6DE;
}
.attendance-kpi.alert{
  background:#FFF8F6;
  border-color:#F0D8D2;
}
.attendance-kpi.alert strong{color:#A1463A}

.attendance-report-panel,
.payroll-history-clean,
.bank-workspace-clean{
  overflow:hidden;
}
.attendance-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 20px;
  border-bottom:1px solid #EDF1EF;
}
.attendance-panel-head b{
  display:block;
  color:#263E34;
  font-size:12px;
}
.attendance-panel-head small{
  display:block;
  margin-top:3px;
  color:#87928D;
  font-size:9px;
}
.attendance-filterbar{
  display:grid;
  grid-template-columns:210px minmax(260px,1fr) 130px;
  gap:10px;
  align-items:end;
  padding:15px 20px;
  background:#FAFCFB;
  border-bottom:1px solid #EDF1EF;
}
.attendance-filterbar label{
  color:#56665F;
  font-size:10px;
  font-weight:700;
}
.attendance-filterbar input{
  width:100%;
  height:42px;
  margin-top:6px;
  box-sizing:border-box;
}
.attendance-table-wrap table{
  min-width:950px;
}

.attendance-subsection-label{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin:26px 2px 12px;
}
.attendance-subsection-label span{
  display:block;
  color:#0E6A4F;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}
.attendance-subsection-label h3{
  margin:4px 0 0;
  color:#20382F;
  font-size:20px;
}
.attendance-subsection-label p{
  margin:0;
  color:#86918C;
  font-size:10px;
}

.payroll-history-filterbar{
  display:flex;
  justify-content:flex-end;
  padding:13px 18px;
  border-bottom:1px solid #EDF1EF;
  background:#FBFCFB;
}
.payroll-history-filterbar input{
  width:min(360px,100%);
  height:40px;
  border:1px solid #DCE5E1;
  border-radius:9px;
  padding:0 12px;
  box-sizing:border-box;
}

.bank-clean-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  border-bottom:1px solid #EDF1EF;
}
.bank-search-wrap{
  flex:1;
  max-width:430px;
}
.bank-search-wrap input{
  width:100%;
  height:42px;
  box-sizing:border-box;
  border:1px solid #DCE5E1;
  border-radius:10px;
  padding:0 13px;
}
.bank-record-counter{
  color:#849089;
  font-size:10px;
}
.bank-record-counter span{
  color:#145D46;
  font-weight:800;
}

.qr-workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr);
  gap:16px;
  margin-bottom:16px;
}
.qr-main-card{
  padding:24px!important;
  text-align:center;
}
.qr-card-label span{
  display:block;
  color:#0D694F;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}
.qr-card-label b{
  display:block;
  margin-top:4px;
  color:#253D34;
  font-size:16px;
}
.qr-main-image{
  width:230px;
  height:230px;
  margin:20px auto 14px;
  padding:13px;
  box-sizing:border-box;
  border:1px solid #DCE5E1;
  border-radius:16px;
  background:#FFFFFF;
}
.qr-main-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.qr-main-card>p{
  max-width:600px;
  margin:0 auto 14px;
  color:#7D8983;
  font-size:10px;
  line-height:1.55;
}
.qr-main-card .copy-row{
  max-width:610px;
  margin:0 auto 12px;
}
.qr-info-stack{
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:12px;
}
.qr-info-card{
  padding:20px!important;
}
.qr-info-card span{
  display:block;
  color:#84908A;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}
.qr-info-card strong{
  display:block;
  margin:8px 0 4px;
  color:#183229;
  font-size:23px;
}
.qr-info-card small{
  color:#89948F;
  font-size:9px;
  line-height:1.45;
}
.qr-active-status{
  color:#0C7A58!important;
}
.qr-download-top{
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
}
.qr-upload-clean{
  margin-top:0!important;
}

@media(max-width:1150px){
  .attendance-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qr-workspace-grid{grid-template-columns:1fr}
  .qr-info-stack{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
}
@media(max-width:760px){
  .attendance-page-head{align-items:flex-start;flex-direction:column}
  .attendance-page-head h2{font-size:28px}
  .attendance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-filterbar{grid-template-columns:1fr}
  .attendance-subsection-label{align-items:flex-start;flex-direction:column}
  .qr-info-stack{grid-template-columns:1fr}
}


/* ==========================================================
   V8.39 — ATTENDANCE FILTER + ICON UX REFRESH
   Attendance-only. Staff Meals is intentionally untouched.
   ========================================================== */

.attendance-top-refresh{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
.attendance-top-refresh img{
  width:15px!important;
  height:15px!important;
  opacity:.78;
}

/* KPI cards with compact modern TOMAFOOD-themed icons */
.attendance-kpi{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:116px!important;
}
.attendance-kpi>div:last-child{
  min-width:0;
}
.attendance-kpi-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#F1F5F3;
  color:#486158;
}
.attendance-kpi-icon img{
  width:23px;
  height:23px;
  display:block;
}
.attendance-kpi-icon.green{
  background:#E9F5EF;
  color:#0C6B50;
}
.attendance-kpi-icon.blue{
  background:#EDF4F9;
  color:#436B8A;
}
.attendance-kpi-icon.soft{
  background:#F4F3EE;
  color:#5F695F;
}
.attendance-kpi-icon.red{
  background:#FFF0ED;
  color:#A9473D;
}
.attendance-kpi-icon.neutral{
  background:#F1F5F3;
  color:#40594F;
}

/* Search/filter toolbar */
.attendance-filterbar-v2{
  display:grid!important;
  grid-template-columns:minmax(230px,.72fr) minmax(360px,1.55fr) auto!important;
  gap:12px!important;
  align-items:stretch!important;
  padding:16px 20px!important;
  background:#F9FBFA!important;
}

.attendance-filter-control{
  position:relative;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 13px;
  border:1px solid #D8E3DE;
  border-radius:13px;
  background:#FFFFFF;
  box-sizing:border-box;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.attendance-filter-control:focus-within{
  border-color:#9EBEAF;
  box-shadow:0 0 0 3px rgba(14,106,79,.06);
  background:#FCFEFD;
}

.attendance-filter-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#EDF6F1;
  color:#12664D;
}
.attendance-filter-icon img{
  width:18px;
  height:18px;
}

.attendance-filter-body{
  flex:1;
  min-width:0;
}
.attendance-filter-body label{
  display:block!important;
  margin:0 0 2px!important;
  color:#7D8A84!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}
.attendance-filter-body input{
  width:100%!important;
  height:27px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#20382F!important;
  font-size:13px!important;
  font-weight:700!important;
  outline:none!important;
  box-shadow:none!important;
}
.attendance-filter-body input::placeholder{
  color:#A0ABA6!important;
  font-weight:500!important;
}

.attendance-filter-search{
  padding-right:42px!important;
}
.attendance-clear-search{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#87948E;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.attendance-clear-search:hover{
  background:#F0F5F2;
  color:#155E47;
}

.attendance-filter-actions{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.attendance-reset-btn,
.attendance-search-btn{
  min-height:62px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:12px!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap;
}
.attendance-reset-btn{
  padding:0 14px;
  border:1px solid #D8E3DE;
  background:#FFFFFF;
  color:#54665E;
  cursor:pointer;
}
.attendance-reset-btn:hover{
  background:#F4F8F6;
  color:#155E47;
}
.attendance-search-btn{
  min-width:128px!important;
  padding:0 18px!important;
}
.attendance-reset-btn img,
.attendance-search-btn img{
  width:15px;
  height:15px;
}

/* Cleaner attendance table rhythm */
.attendance-table-wrap th{
  padding-top:14px!important;
  padding-bottom:14px!important;
}
.attendance-table-wrap td{
  padding-top:15px!important;
  padding-bottom:15px!important;
}
.attendance-status-text{
  font-weight:700;
  color:#40564C;
}

@media(max-width:1150px){
  .attendance-filterbar-v2{
    grid-template-columns:1fr 1.4fr!important;
  }
  .attendance-filter-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
  .attendance-reset-btn,
  .attendance-search-btn{
    min-height:44px!important;
  }
}
@media(max-width:760px){
  .attendance-filterbar-v2{
    grid-template-columns:1fr!important;
  }
  .attendance-filter-actions{
    grid-column:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .attendance-kpi{
    align-items:flex-start!important;
  }
}


/* ==========================================================
   V8.40 — COMPACT ATTENDANCE FILTER REDESIGN
   Smaller, calmer, and more efficient.
   ========================================================== */

.attendance-filterbar-v2{
  grid-template-columns:190px minmax(280px,1fr) auto!important;
  gap:10px!important;
  padding:12px 16px!important;
  align-items:center!important;
}

.attendance-filter-control{
  min-height:48px!important;
  padding:6px 10px!important;
  gap:9px!important;
  border-radius:10px!important;
}

.attendance-filter-icon{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border-radius:8px!important;
}
.attendance-filter-icon img{
  width:16px!important;
  height:16px!important;
}

.attendance-filter-body label{
  margin-bottom:1px!important;
  font-size:7px!important;
  letter-spacing:.045em!important;
}

.attendance-filter-body input{
  height:22px!important;
  font-size:12px!important;
  font-weight:650!important;
}

.attendance-filter-search{
  padding-right:36px!important;
}

.attendance-clear-search{
  right:8px!important;
  width:24px!important;
  height:24px!important;
  font-size:16px!important;
}

.attendance-filter-actions{
  gap:8px!important;
}

.attendance-reset-btn,
.attendance-search-btn{
  min-height:48px!important;
  height:48px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:750!important;
}

.attendance-reset-btn{
  min-width:82px!important;
  padding:0 14px!important;
}

.attendance-search-btn{
  min-width:110px!important;
  padding:0 16px!important;
  box-shadow:0 8px 20px rgba(12,107,80,.10)!important;
}

/* Reduce excessive vertical whitespace in the report panel */
.attendance-panel-head{
  padding:14px 18px!important;
}

.attendance-panel-head b{
  font-size:11px!important;
}
.attendance-panel-head small{
  font-size:8px!important;
}

.attendance-table-wrap th{
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.attendance-table-wrap td{
  padding-top:12px!important;
  padding-bottom:12px!important;
}

/* Slightly reduce KPI scale so the page feels more balanced */
.attendance-kpi{
  min-height:100px!important;
  padding:15px!important;
  gap:12px!important;
}
.attendance-kpi-icon{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  border-radius:11px!important;
}
.attendance-kpi-icon img{
  width:20px!important;
  height:20px!important;
}
.attendance-kpi strong{
  font-size:24px!important;
  margin-top:7px!important;
}
.attendance-kpi small{
  margin-top:6px!important;
}

/* Responsive compacting */
@media(max-width:1050px){
  .attendance-filterbar-v2{
    grid-template-columns:170px minmax(240px,1fr)!important;
  }
  .attendance-filter-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}
@media(max-width:720px){
  .attendance-filterbar-v2{
    grid-template-columns:1fr!important;
  }
  .attendance-filter-actions{
    grid-column:auto;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
}

/* V8.41 Attendance Range + Manual Edit */
.attendance-filterbar-v3{display:grid!important;grid-template-columns:175px 175px minmax(280px,1fr) auto!important;gap:9px!important;padding:12px 16px!important;align-items:center!important;background:#F9FBFA!important}.attendance-edit-notice{margin:0 16px 12px;padding:10px 12px;border:1px solid #CFE3D9;border-radius:9px;background:#F0F8F4;color:#176047;font-size:10px;font-weight:700}.att-missing{color:#A4493F;font-weight:750}.att-proof-links{display:flex;gap:5px;align-items:center}.att-proof-links a{display:inline-flex;padding:4px 7px;border:1px solid #D7E3DD;border-radius:6px;color:#14634B;font-size:9px;font-weight:800;text-decoration:none}.att-locked{color:#929D98;font-size:9px;font-weight:700}.att-edit-btn{min-width:54px}.attendance-edit-card{width:min(650px,94vw)!important}.attendance-edit-body{padding:18px 20px!important}.attendance-edit-grid,.attendance-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-edit-body label{display:block;color:#53645C;font-size:10px;font-weight:750}.attendance-edit-body input[type=datetime-local],.attendance-note-field input{width:100%;height:42px;margin-top:6px;padding:0 11px;box-sizing:border-box;border:1px solid #D7E2DD;border-radius:9px;background:#fff;color:#233C32;font-family:inherit}.attendance-photo-grid{margin-top:15px}.attendance-photo-field{padding:12px;border:1px solid #E0E7E3;border-radius:10px;background:#FAFCFB}.attendance-photo-field span{display:block;margin-bottom:7px}.attendance-photo-field em{font-style:normal;color:#8D9893;font-weight:500}.attendance-photo-field input{width:100%;font-size:10px}.attendance-photo-field small{display:block;margin-top:8px;color:#85918B;font-size:9px}.attendance-photo-field small a{color:#12654C;font-weight:800}.attendance-note-field{margin-top:15px}.attendance-note-field span{color:#8D9893;font-weight:500}.attendance-edit-info{margin-top:14px;padding:10px 12px;border-radius:9px;background:#F3F7F5;color:#6D7C75;font-size:9px;line-height:1.5}@media(max-width:1100px){.attendance-filterbar-v3{grid-template-columns:1fr 1fr!important}.attendance-filter-search{grid-column:1/-1}.attendance-filter-actions{grid-column:1/-1;justify-content:flex-end}}@media(max-width:700px){.attendance-filterbar-v3{grid-template-columns:1fr!important}.attendance-filter-search,.attendance-filter-actions{grid-column:auto}.attendance-edit-grid,.attendance-photo-grid{grid-template-columns:1fr}}

/* V8.44 Attendance corrections only — Staff Meals untouched */
.attendance-time-editor{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
.attendance-time-card{border:1px solid #dce6e1;border-radius:14px;padding:14px;background:#fbfdfc}
.attendance-time-title{display:block;font-size:10px;font-weight:850;letter-spacing:.08em;color:#0d6d52;margin-bottom:11px}
.attendance-time-card>label,.attendance-time-row label{font-size:10px;font-weight:750;color:#64746c}
.attendance-time-card input,.attendance-time-card select{width:100%;height:42px;margin-top:5px;border:1px solid #d8e2dd;border-radius:10px;background:#fff;padding:0 10px;color:#20372e;font:inherit;box-sizing:border-box}
.attendance-time-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.attendance-time-preview{display:block;margin-top:11px;padding:8px 10px;border-radius:8px;background:#eef6f2;color:#155f49;font-weight:800;font-size:11px}
.attendance-clear-clockout{margin-top:8px;border:0;background:transparent;color:#8a5a50;font-size:10px;font-weight:750;padding:3px 0;cursor:pointer}
.bank-head-actions{display:flex;gap:8px;align-items:center}
#bankName[readonly]{background:#f4f7f5;color:#607069}
#qr.attendance-workspace-page{overflow:visible!important;padding-bottom:28px}
#qr .qr-workspace-grid{align-items:stretch;margin-bottom:0!important}
#qr .qr-main-card,#qr .qr-info-stack{min-width:0}
#qr .qr-main-image img{max-width:100%;height:auto}
@media(max-width:760px){.attendance-time-editor{grid-template-columns:1fr!important}.bank-head-actions{width:100%;flex-wrap:wrap}}


/* ==========================================================
   V8.49 — ATTENDANCE COORDINATES + OUTSIDE AREA ALERTS
   Attendance/admin only. Staff Meals styling untouched.
   ========================================================== */
.coordinate-layout{
  display:grid;
  grid-template-columns:minmax(300px,.85fr) minmax(420px,1.35fr);
  gap:14px;
  margin-bottom:14px;
}
.coordinate-form-card,.coordinate-list-card{overflow:hidden}
.coordinate-card-head{
  padding:16px 18px;
  border-bottom:1px solid #EDF1EF;
}
.coordinate-card-head b{display:block;color:#263E34;font-size:12px}
.coordinate-card-head small{display:block;margin-top:3px;color:#88948E;font-size:9px}
.coordinate-form{padding:16px 18px}
.coordinate-form label{
  display:block;
  margin-bottom:12px;
  color:#627169;
  font-size:9px;
  font-weight:750;
}
.coordinate-form input{
  width:100%;
  height:42px;
  margin-top:5px;
  padding:0 11px;
  border:1px solid #DCE5E1;
  border-radius:9px;
  background:#fff;
  color:#243C32;
  box-sizing:border-box;
}
.coordinate-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.coordinate-radius{position:relative}
.coordinate-radius input{padding-right:62px}
.coordinate-radius span{
  position:absolute;right:11px;bottom:13px;color:#86928C;font-size:9px
}
.coordinate-current-btn{
  width:100%;
  min-height:40px;
  margin:1px 0 12px;
  border:1px dashed #AFC8BD;
  border-radius:9px;
  background:#F7FAF8;
  color:#176149;
  font-size:9px;
  font-weight:800;
}
.coordinate-form-actions{display:flex;justify-content:flex-end;gap:8px}
.coordinate-form-actions button{min-height:38px;padding:0 14px;border-radius:8px;font-size:9px;font-weight:800}
.coordinate-list{padding:8px 14px 14px}
.coordinate-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 4px;
  border-bottom:1px solid #EDF1EF;
}
.coordinate-item:last-child{border-bottom:0}
.coordinate-item.inactive{opacity:.55}
.coordinate-main{display:flex;gap:10px;min-width:0}
.coordinate-dot{
  width:9px;height:9px;flex:0 0 9px;margin-top:5px;border-radius:50%;background:#179064;
  box-shadow:0 0 0 4px #E9F5EF;
}
.coordinate-item.inactive .coordinate-dot{background:#9AA49F;box-shadow:0 0 0 4px #F0F2F1}
.coordinate-main b{display:block;color:#263D34;font-size:10px}
.coordinate-main span{display:block;margin-top:3px;color:#66766E;font-size:9px}
.coordinate-main small{display:block;margin-top:3px;color:#939D98;font-size:8px}
.coordinate-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.coordinate-actions a,.coordinate-actions button{
  min-height:30px;padding:0 8px;border:1px solid #DCE5E1;border-radius:7px;background:#fff;
  color:#53685F;font-size:8px;font-weight:750;text-decoration:none;
}
.coordinate-actions a:hover,.coordinate-actions button:hover{background:#F4F8F6;color:#155E47}
.coordinate-empty{padding:24px;text-align:center;color:#8C9791;font-size:9px}
.coordinate-note{
  padding:11px 14px;
  border:1px solid #E3E9E6;
  border-radius:10px;
  background:#FAFBFA;
  color:#68766F;
  font-size:9px;
  line-height:1.5;
}
.attendance-alert-item{
  display:block;
  text-decoration:none!important;
  color:inherit!important;
}
.attendance-alert-item .notification-item-top span{
  color:#A54A40!important;
  background:#FFF1EF!important;
}
.attendance-group-title{color:#9A443B!important}
@media(max-width:1000px){
  .coordinate-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
  .coordinate-two{grid-template-columns:1fr}
  .coordinate-item{flex-direction:column}
  .coordinate-actions{justify-content:flex-start}
}


/* V8.50 — Attendance Employee Directory */
.employee-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.employee-kpi{
  padding:16px 18px;
  border:1px solid #DFE7E3;
  border-radius:13px;
  background:#fff;
}
.employee-kpi span{
  display:block;
  color:#87928D;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
}
.employee-kpi strong{
  display:block;
  margin-top:7px;
  color:#19342A;
  font-size:24px;
}
.employee-directory-panel{overflow:hidden}
.employee-directory-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  border-bottom:1px solid #EDF1EF;
}
.employee-directory-toolbar b{display:block;color:#263E34;font-size:11px}
.employee-directory-toolbar small{display:block;margin-top:3px;color:#89958F;font-size:8px}
.employee-directory-toolbar input{
  width:min(360px,100%);
  height:40px;
  padding:0 12px;
  border:1px solid #DCE5E1;
  border-radius:9px;
  background:#fff;
}
.employee-table-wrap table{min-width:980px}
.employee-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
}
.employee-status.active{background:#EAF6F0;color:#146348}
.employee-status.inactive{background:#F2F3F2;color:#7C8782}
@media(max-width:760px){
  .employee-kpi-grid{grid-template-columns:1fr 1fr 1fr}
  .employee-directory-toolbar{align-items:flex-start;flex-direction:column}
  .employee-directory-toolbar input{width:100%}
}


/* ==========================================================
   V8.51 — ATTENDANCE ADMIN UI ALIGNMENT REDESIGN
   Focus: straight alignment, professional iconography, no skew.
   ========================================================== */

.attendance-page-head-v2{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  min-height:76px!important;
  margin-bottom:16px!important;
}

.attendance-title-wrap{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}

.attendance-page-icon{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #DDE7E2!important;
  border-radius:12px!important;
  background:#F6FAF8!important;
  color:#0F6B50!important;
}

.attendance-page-icon svg{
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.attendance-title-wrap>div>span{
  display:block!important;
  margin:0 0 4px!important;
  color:#0E6A4F!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.09em!important;
}

.attendance-title-wrap h2{
  margin:0!important;
  font-size:28px!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}

.attendance-title-wrap p{
  margin:5px 0 0!important;
  color:#7E8B85!important;
  font-size:11px!important;
  line-height:1.45!important;
}

.attendance-head-btn{
  min-height:38px!important;
  height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 13px!important;
  flex:0 0 auto!important;
}

.attendance-head-btn svg{
  width:14px!important;
  height:14px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Employee KPI — fixed equal height, no diagonal visual weight */
.employee-kpi-grid-v2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:14px!important;
  align-items:stretch!important;
}

.employee-kpi-v2{
  min-height:104px!important;
  height:104px!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:15px!important;
  border:1px solid #DFE7E3!important;
  border-radius:13px!important;
  background:#FFFFFF!important;
  box-sizing:border-box!important;
}

.employee-kpi-icon{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
  background:#F0F5F3!important;
  color:#496158!important;
}

.employee-kpi-icon.active{
  background:#EAF6F0!important;
  color:#0F6B50!important;
}

.employee-kpi-icon.inactive{
  background:#F3F4F3!important;
  color:#7E8984!important;
}

.employee-kpi-icon svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.employee-kpi-v2>div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}

.employee-kpi-v2 small{
  display:block!important;
  color:#7F8C86!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.04em!important;
}

.employee-kpi-v2 strong{
  display:block!important;
  margin:5px 0 3px!important;
  color:#183129!important;
  font-size:24px!important;
  line-height:1!important;
}

.employee-kpi-v2 div>span{
  display:block!important;
  color:#96A09B!important;
  font-size:8px!important;
}

/* Employee table toolbar */
.employee-directory-toolbar-v2{
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:13px 16px!important;
  border-bottom:1px solid #EDF1EF!important;
}

.employee-directory-heading{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.employee-table-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px!important;
  background:#F4F8F6!important;
  color:#536E62!important;
}

.employee-table-icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
}

.employee-directory-heading b{
  display:block!important;
  margin:0!important;
  color:#263E34!important;
  font-size:10px!important;
}

.employee-directory-heading small{
  display:block!important;
  margin-top:3px!important;
  color:#89958F!important;
  font-size:8px!important;
}

.employee-search-wrap{
  width:min(350px,100%)!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 10px!important;
  border:1px solid #DCE5E1!important;
  border-radius:9px!important;
  background:#FFFFFF!important;
}

.employee-search-wrap svg{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  color:#7F8E87!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}

.employee-search-wrap input{
  flex:1!important;
  width:auto!important;
  height:36px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  font-size:9px!important;
}

/* Table alignment */
.employee-table-wrap table{
  width:100%!important;
  min-width:980px!important;
  border-collapse:collapse!important;
}

.employee-table-wrap th,
.employee-table-wrap td{
  vertical-align:middle!important;
  text-align:left!important;
}

.employee-table-wrap th{
  height:42px!important;
  padding:0 14px!important;
  white-space:nowrap!important;
}

.employee-table-wrap td{
  min-height:48px!important;
  padding:12px 14px!important;
}

/* Coordinates — symmetrical cards */
.coordinate-layout{
  display:grid!important;
  grid-template-columns:minmax(320px,.9fr) minmax(440px,1.3fr)!important;
  gap:14px!important;
  align-items:start!important;
}

.coordinate-form-card,
.coordinate-list-card{
  border:1px solid #DFE7E3!important;
  border-radius:13px!important;
  overflow:hidden!important;
  background:#fff!important;
}

.coordinate-card-head-v2{
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:13px 16px!important;
  border-bottom:1px solid #EDF1EF!important;
}

.coordinate-section-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:9px!important;
  background:#F3F8F5!important;
  color:#0F6B50!important;
}

.coordinate-section-icon svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.coordinate-card-head-v2 b{
  display:block!important;
  margin:0!important;
  font-size:10px!important;
}

.coordinate-card-head-v2 small{
  display:block!important;
  margin-top:3px!important;
  font-size:8px!important;
  color:#89958F!important;
}

/* form strict alignment */
.coordinate-form{
  display:flex!important;
  flex-direction:column!important;
  gap:11px!important;
  padding:14px 16px!important;
}

.coordinate-form label{
  margin:0!important;
  font-size:8px!important;
  line-height:1.2!important;
}

.coordinate-form input{
  height:40px!important;
  margin-top:5px!important;
  border-radius:8px!important;
}

.coordinate-two{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  align-items:start!important;
}

.coordinate-current-btn{
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
}

.coordinate-form-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin-top:1px!important;
}

/* location list */
.coordinate-list{
  padding:5px 14px 10px!important;
}

.coordinate-item{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
  min-height:72px!important;
  padding:11px 2px!important;
}

.coordinate-main{
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:start!important;
}

.coordinate-dot{
  margin-top:4px!important;
}

.coordinate-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
}

.coordinate-actions a,
.coordinate-actions button{
  min-height:28px!important;
  height:28px!important;
  padding:0 8px!important;
  white-space:nowrap!important;
}

/* responsive */
@media(max-width:1050px){
  .coordinate-layout{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:780px){
  .attendance-page-head-v2{
    align-items:flex-start!important;
  }
  .employee-kpi-grid-v2{
    grid-template-columns:1fr!important;
  }
  .employee-kpi-v2{
    height:auto!important;
    min-height:88px!important;
  }
  .employee-directory-toolbar-v2{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .employee-search-wrap{
    width:100%!important;
  }
}
@media(max-width:620px){
  .coordinate-two{
    grid-template-columns:1fr!important;
  }
  .coordinate-item{
    grid-template-columns:1fr!important;
  }
  .coordinate-actions{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
}


/* V8.52 — Employee Directory bank account details */
.employee-table-wrap table{
  min-width:1180px!important;
}
.employee-account-no{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  letter-spacing:.01em;
}


/* ==========================================================
   V8.53 — ATTENDANCE MASTER REDESIGN
   Clean, straight, consistent with TOMAFOOD brand.
   ========================================================== */

.attendance-master-page{
  --att-green:#0F6B50;
  --att-green-dark:#0B543F;
  --att-green-soft:#EAF5EF;
  --att-blue:#4D73E8;
  --att-blue-soft:#EEF2FF;
  --att-orange:#F27C38;
  --att-orange-soft:#FFF1E8;
  --att-ink:#20342B;
  --att-muted:#7F8C86;
  --att-line:#E1E8E4;
}

.attendance-master-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:78px;
  margin-bottom:4px;
}

.attendance-master-title{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.attendance-master-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--att-green-soft);
  color:var(--att-green);
}

.attendance-master-icon svg,
.attendance-refresh-btn svg,
.employee-kpi-symbol svg,
.employee-search-v3 svg,
.employee-filter-btn svg,
.coordinate-title-icon svg,
.coordinate-add-btn svg,
.coordinate-table-actions svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.attendance-master-icon svg{width:23px;height:23px}

.attendance-master-title h2{
  margin:0;
  color:var(--att-ink);
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.attendance-master-title p{
  margin:6px 0 0;
  color:var(--att-muted);
  font-size:11px;
}

.attendance-refresh-btn{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--att-line);
  border-radius:9px;
  background:#fff;
  color:#53685F;
  font-size:9px;
  font-weight:800;
}

.attendance-refresh-btn svg{width:14px;height:14px}

.attendance-master-tabs{
  display:flex;
  align-items:flex-end;
  gap:24px;
  height:48px;
  margin-bottom:18px;
  border-bottom:1px solid var(--att-line);
}

.attendance-master-tabs button{
  position:relative;
  height:48px;
  padding:0 4px;
  border:0;
  background:transparent;
  color:#75827C;
  font-size:10px;
  font-weight:750;
}

.attendance-master-tabs button.active{
  color:var(--att-green);
  font-weight:850;
}

.attendance-master-tabs button.active:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--att-green);
}

.employee-kpi-grid-v3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}

.employee-kpi-card{
  min-height:112px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid var(--att-line);
  border-radius:13px;
  background:#fff;
}

.employee-kpi-symbol{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.employee-kpi-symbol svg{width:23px;height:23px}
.employee-kpi-symbol.total{background:#DDF2E8;color:#159369}
.employee-kpi-symbol.active{background:var(--att-blue-soft);color:var(--att-blue)}
.employee-kpi-symbol.inactive{background:var(--att-orange-soft);color:var(--att-orange)}

.employee-kpi-card small{
  display:block;
  color:#42554D;
  font-size:9px;
  font-weight:800;
}

.employee-kpi-card strong{
  display:block;
  margin:5px 0 4px;
  color:#1E332A;
  font-size:24px;
  line-height:1;
}

.employee-kpi-card div>span{
  display:block;
  color:#87938D;
  font-size:8px;
}

.attendance-master-panel{
  overflow:hidden;
  border:1px solid var(--att-line)!important;
  border-radius:13px!important;
  background:#fff!important;
}

.attendance-master-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:68px;
  padding:15px 18px;
}

.attendance-master-panel-head h3{
  margin:0;
  color:#21372E;
  font-size:15px;
}

.attendance-master-panel-head p{
  margin:4px 0 0;
  color:#88948E;
  font-size:9px;
}

.employee-toolbar-v3{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px 14px;
}

.employee-search-v3{
  flex:1;
  height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 11px;
  border:1px solid #DDE5E1;
  border-radius:9px;
  background:#fff;
}

.employee-search-v3 svg{
  width:16px;
  height:16px;
  color:#788780;
}

.employee-search-v3 input{
  width:100%;
  height:38px;
  border:0;
  outline:0;
  background:transparent;
  font-size:9px;
}

.employee-toolbar-actions{
  display:flex;
  gap:8px;
}

.employee-filter-btn{
  height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border:1px solid #DDE5E1;
  border-radius:9px;
  background:#fff;
  color:#718078;
  font-size:9px;
  font-weight:750;
  opacity:.65;
}

.employee-filter-btn svg{width:15px;height:15px}

.employee-table-wrap-v3 table{
  min-width:1220px!important;
  width:100%;
  border-collapse:collapse;
}

.employee-table-wrap-v3 th{
  height:42px;
  padding:0 12px!important;
  background:#FAFBFA;
  color:#5F7068;
  font-size:7px!important;
  font-weight:850!important;
  letter-spacing:.02em;
  text-align:left!important;
  vertical-align:middle!important;
  white-space:nowrap;
  border-top:1px solid #EEF2F0;
  border-bottom:1px solid #E9EEEB;
}

.employee-table-wrap-v3 td{
  height:48px;
  padding:0 12px!important;
  color:#31463D;
  font-size:8px!important;
  text-align:left!important;
  vertical-align:middle!important;
  border-bottom:1px solid #EEF2F0;
}

.employee-table-wrap-v3 tbody tr:last-child td{
  border-bottom:0;
}

.employee-row-no{
  color:#7D8983!important;
  width:38px;
}

.employee-status{
  min-height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:7px!important;
  font-weight:800!important;
}

.employee-status.active{
  background:#EAF7F1!important;
  color:#14835D!important;
}

.employee-status.inactive{
  background:#FFF0EE!important;
  color:#C64B42!important;
}

.employee-table-foot{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-top:1px solid #EEF2F0;
  color:#7F8C86;
  font-size:8px;
}

/* Coordinates */
.coordinate-panel-title{
  border-bottom:1px solid #EEF2F0;
}

.coordinate-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.coordinate-title-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--att-green-soft);
  color:var(--att-green);
}

.coordinate-title-icon svg{width:18px;height:18px}

.coordinate-add-btn{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid #2A8A67;
  border-radius:9px;
  background:#fff;
  color:var(--att-green);
  font-size:9px;
  font-weight:800;
}

.coordinate-add-btn svg{width:14px;height:14px}

.coordinate-table-wrap{
  overflow:auto;
}

.coordinate-table{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
}

.coordinate-table th{
  height:42px;
  padding:0 12px;
  background:#FAFBFA;
  color:#5F7068;
  font-size:7px;
  font-weight:850;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  border-bottom:1px solid #E8EEEB;
}

.coordinate-table td{
  height:50px;
  padding:0 12px;
  color:#31463D;
  font-size:8px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #EEF2F0;
}

.coordinate-row-inactive{
  opacity:.55;
}

.coordinate-status{
  min-height:22px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  font-size:7px;
  font-weight:800;
}

.coordinate-status.active{background:#EAF7F1;color:#14835D}
.coordinate-status.inactive{background:#F1F3F2;color:#7D8983}

.coordinate-table-actions{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:32px;
}

.coordinate-table-actions a,
.coordinate-table-actions button{
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 10px;
  border:1px solid #DDE5E1;
  border-radius:8px;
  background:#fff;
  color:#52675E;
  font-size:8px;
  font-weight:750;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
}

.coordinate-table-actions a svg,
.coordinate-table-actions button svg{
  width:13px;
  height:13px;
  flex:0 0 13px;
}

.coordinate-table-actions .coordinate-more-btn{
  width:30px;
  padding:0;
  font-size:16px;
  line-height:1;
}

.coordinate-note-v3{
  padding:11px 16px;
  border-top:1px solid #EEF2F0;
  color:#7D8983;
  font-size:8px;
}

.coordinate-modal-card{
  width:min(520px,calc(100vw - 28px))!important;
}

.coordinate-modal-card .modal-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.coordinate-modal-card .modal-body>label{
  margin:0!important;
  color:#617169;
  font-size:9px;
  font-weight:750;
}

.coordinate-modal-card input{
  width:100%;
  height:42px;
  margin-top:5px;
  box-sizing:border-box;
  border:1px solid #DCE5E1;
  border-radius:9px;
  padding:0 11px;
}

.coordinate-modal-card .coordinate-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.coordinate-modal-card .coordinate-current-btn{
  width:100%;
  min-height:40px;
  margin:0;
}

@media(max-width:900px){
  .employee-kpi-grid-v3{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .attendance-master-header{
    align-items:flex-start;
  }
  .attendance-master-title h2{
    font-size:24px;
  }
  .attendance-master-tabs{
    gap:16px;
  }
  .employee-toolbar-v3{
    align-items:stretch;
    flex-direction:column;
  }
  .employee-filter-btn{
    width:100%;
    justify-content:center;
  }
  .coordinate-modal-card .coordinate-two{
    grid-template-columns:1fr;
  }
}


/* V8.54 — Staff Meals Dummy Reset UI */
.dummy-reset-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.dummy-reset-open-btn{
  min-height:36px!important;
  padding:0 12px!important;
  font-size:9px!important;
}
.dummy-reset-modal-card{
  width:min(560px,calc(100vw - 28px))!important;
}
.dummy-reset-warning{
  padding:12px 13px;
  border:1px solid #F0D6D1;
  border-radius:10px;
  background:#FFF6F4;
}
.dummy-reset-warning b{
  display:block;
  color:#8F433B;
  font-size:10px;
}
.dummy-reset-warning span{
  display:block;
  margin-top:4px;
  color:#8A6C67;
  font-size:8px;
  line-height:1.45;
}
.dummy-reset-preview{
  margin-top:12px;
  border:1px solid #E3E9E6;
  border-radius:10px;
  overflow:hidden;
}
.dummy-reset-preview>div{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 12px;
  border-bottom:1px solid #EEF2F0;
}
.dummy-reset-preview>div:last-child{
  border-bottom:0;
}
.dummy-reset-preview span{
  color:#6E7B75;
  font-size:8px;
}
.dummy-reset-preview b{
  color:#263C33;
  font-size:9px;
}
.dummy-reset-confirm-label{
  display:block;
  margin-top:12px;
  color:#65736C;
  font-size:8px;
  font-weight:700;
}
.dummy-reset-confirm-label input{
  width:100%;
  height:40px;
  margin-top:6px;
  padding:0 10px;
  border:1px solid #DCE5E1;
  border-radius:9px;
  box-sizing:border-box;
}
.danger-btn{
  min-height:38px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:#C84F45;
  color:#fff;
  font-size:9px;
  font-weight:800;
}


/* ==========================================================
   V8.55 — STAFF MEALS SAVED DRAFT + PO AMENDMENT
   ========================================================== */

.saved-draft-bar{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(420px,1.4fr) auto;
  gap:12px;
  align-items:center;
  margin:14px 0 10px;
  padding:12px 14px;
  border:1px solid #DFE8E3;
  border-radius:11px;
  background:#F9FBFA;
}
.saved-draft-copy b{
  display:block;
  color:#284238;
  font-size:10px;
}
.saved-draft-copy small{
  display:block;
  margin-top:3px;
  color:#84918B;
  font-size:8px;
  line-height:1.4;
}
.saved-draft-controls{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:7px;
  align-items:center;
}
.saved-draft-controls select{
  width:100%;
  height:38px;
  padding:0 9px;
  border:1px solid #DCE6E1;
  border-radius:8px;
  background:#fff;
  color:#324A40;
  font-size:8px;
}
.saved-draft-controls button{
  height:38px;
  padding:0 10px;
  border:1px solid #DCE6E1;
  border-radius:8px;
  background:#fff;
  color:#476158;
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}
.saved-draft-current{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border-radius:999px;
  background:#EAF5EF;
  color:#17674D;
  font-size:7px;
  font-weight:800;
  white-space:nowrap;
}

/* Existing PO: add people */
.po-add-people{
  margin-top:12px;
  padding:12px;
  border:1px solid #E1E8E4;
  border-radius:10px;
  background:#FAFBFA;
}
.po-add-people-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.po-add-people-head b{
  display:block;
  color:#294238;
  font-size:10px;
}
.po-add-people-head small{
  display:block;
  margin-top:3px;
  color:#87938D;
  font-size:8px;
}
.po-add-people-head>span{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:#EDF6F2;
  color:#236A53;
  font-size:7px;
  font-weight:800;
}
.po-add-search{
  position:relative;
}
.po-add-search>input{
  width:100%;
  height:38px;
  padding:0 10px;
  box-sizing:border-box;
  border:1px solid #DCE5E1;
  border-radius:8px;
  background:#fff;
  font-size:9px;
}
.po-add-search-results{
  margin-top:6px;
  border-radius:8px;
  overflow:hidden;
}
.po-add-search-results>button{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border:1px solid #E5EBE8;
  border-bottom:0;
  background:#fff;
  text-align:left;
}
.po-add-search-results>button:first-child{border-radius:8px 8px 0 0}
.po-add-search-results>button:last-child{
  border-bottom:1px solid #E5EBE8;
  border-radius:0 0 8px 8px;
}
.po-add-search-results b{
  display:block;
  font-size:9px;
  color:#30473E;
}
.po-add-search-results small{
  display:block;
  margin-top:2px;
  font-size:7px;
  color:#8D9893;
}
.po-add-search-results i{
  color:#0F6B50;
  font-style:normal;
  font-size:7px;
  font-weight:800;
}
.po-add-empty{
  padding:10px;
  color:#8C9792;
  font-size:8px;
}
.po-add-draft-rows{
  margin-top:8px;
}
.po-add-draft-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) 110px 70px 30px;
  gap:7px;
  align-items:center;
  min-height:44px;
  padding:6px 0;
  border-bottom:1px solid #E9EEEB;
}
.po-add-draft-row:last-child{border-bottom:0}
.po-add-draft-row b{
  display:block;
  font-size:9px;
}
.po-add-draft-row small{
  display:block;
  margin-top:2px;
  color:#8B9691;
  font-size:7px;
}
.po-add-draft-row select,
.po-add-draft-row input{
  height:34px;
  border:1px solid #DDE5E1;
  border-radius:7px;
  background:#fff;
  padding:0 7px;
  font-size:8px;
}
.po-add-draft-row button{
  width:30px;
  height:30px;
  border:1px solid #E0E6E3;
  border-radius:7px;
  background:#fff;
  color:#A24C44;
}

@media(max-width:1050px){
  .saved-draft-bar{
    grid-template-columns:1fr;
  }
  .saved-draft-controls{
    grid-template-columns:1fr auto auto;
  }
  .saved-draft-current{
    justify-self:start;
  }
}
@media(max-width:700px){
  .saved-draft-controls{
    grid-template-columns:1fr;
  }
  .po-add-draft-row{
    grid-template-columns:1fr 90px 64px 30px;
  }
}


/* ==========================================================
   V8.57 — SIMPLE STAFF MEALS FLOW
   PO Staff Meals -> Download PDF -> Run Order
   ========================================================== */
.simple-po-list-panel{
  margin-top:14px;
  overflow:hidden;
  border:1px solid #E0E8E4!important;
  border-radius:12px!important;
}
.simple-po-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px;
  border-bottom:1px solid #EDF1EF;
}
.simple-po-list-head h3{
  margin:4px 0 3px;
  color:#263D34;
  font-size:15px;
}
.simple-po-list-head p{
  margin:0;
  color:#86928C;
  font-size:8px;
}
.simple-po-list-head button{
  min-height:34px;
  padding:0 11px;
  border:1px solid #DCE5E1;
  border-radius:8px;
  background:#fff;
  color:#52675E;
  font-size:8px;
  font-weight:800;
}
.simple-po-help{
  display:flex;
  gap:18px;
  padding:9px 17px;
  background:#FAFBFA;
  border-bottom:1px solid #EDF1EF;
  color:#79867F;
  font-size:7px;
}
.simple-po-help b{color:#315248}
.simple-po-table{min-width:1100px;width:100%;border-collapse:collapse}
.simple-po-table th{
  height:40px;padding:0 11px;background:#FAFBFA;color:#607168;
  font-size:7px;font-weight:850;text-align:left;vertical-align:middle;white-space:nowrap;
  border-bottom:1px solid #E7ECE9;
}
.simple-po-table td{
  height:48px;padding:0 11px;color:#344A40;font-size:8px;text-align:left;vertical-align:middle;
  border-bottom:1px solid #EEF2F0;
}
.simple-po-status,.simple-pdf-status{
  display:inline-flex;min-height:22px;align-items:center;padding:0 8px;border-radius:999px;
  font-size:7px;font-weight:850;white-space:nowrap;
}
.simple-po-status.editable{background:#FFF4DF;color:#A56417}
.simple-po-status.ordered{background:#EAF7F1;color:#14815B}
.simple-po-status.cancelled{background:#FFF0EE;color:#BD4B43}
.simple-pdf-status.waiting{background:#F2F4F3;color:#79867F}
.simple-pdf-status.ready{background:#EEF2FF;color:#526FC2}
.simple-pdf-status.downloaded{background:#EAF7F1;color:#14815B}
.simple-po-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}
.simple-po-actions button{
  min-height:30px;padding:0 9px;border:1px solid #DDE5E1;border-radius:7px;background:#fff;
  color:#51665D;font-size:7px;font-weight:800;
}
.simple-po-actions .primary-mini{background:#0F6B50;border-color:#0F6B50;color:#fff}
.simple-po-cancelled{opacity:.55}

/* Run Order */
.simple-runorder-panel,.simple-run-history-panel{
  overflow:hidden;border:1px solid #E0E8E4!important;border-radius:12px!important;
}
.simple-run-history-panel{margin-top:14px}
.simple-runorder-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:17px;
  border-bottom:1px solid #EDF1EF;
}
.simple-runorder-head h3{margin:4px 0 3px;font-size:16px;color:#263D34}
.simple-runorder-head p{margin:0;color:#85918B;font-size:8px}
.simple-runorder-range{display:flex;align-items:flex-end;gap:7px}
.simple-runorder-range label{color:#68776F;font-size:7px;font-weight:800}
.simple-runorder-range input{
  display:block;width:130px;height:36px;margin-top:4px;padding:0 8px;border:1px solid #DDE5E1;border-radius:8px;
}
.simple-runorder-range button{height:36px!important}
.simple-run-summary{
  display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #EDF1EF;
}
.simple-run-summary>div{
  min-height:70px;display:flex;flex-direction:column;justify-content:center;padding:11px 16px;border-right:1px solid #EDF1EF;
}
.simple-run-summary>div:last-child{border-right:0}
.simple-run-summary span{font-size:7px;color:#87938D;font-weight:800}
.simple-run-summary b{margin-top:5px;font-size:16px;color:#263C33}
.simple-run-table-wrap table{min-width:900px}
.simple-run-table-wrap th,.simple-run-table-wrap td{vertical-align:middle!important}
.simple-run-available,.simple-run-used{
  display:inline-flex;min-height:22px;align-items:center;padding:0 8px;border-radius:999px;font-size:7px;font-weight:800;
}
.simple-run-available{background:#EAF7F1;color:#14815B}
.simple-run-used{background:#F2F4F3;color:#7A8780}
.run-row-locked{opacity:.55}
.simple-run-create{
  display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #EDF1EF;
}
.simple-run-create input{
  width:min(360px,100%);height:36px;padding:0 9px;border:1px solid #DDE5E1;border-radius:8px;
}
@media(max-width:850px){
  .simple-runorder-head{align-items:stretch;flex-direction:column}
  .simple-runorder-range{flex-wrap:wrap}
  .simple-run-summary{grid-template-columns:1fr 1fr}
}

/* V8.58 — Add new Staff Meals name fix */
.quick-name-note{
  margin-bottom:8px;
  padding:8px 10px;
  border-radius:8px;
  background:#F2F8F5;
  color:#557168;
  font-size:8px;
  line-height:1.4;
}


/* ==========================================================
   V8.59 — Save PO placement + visible Dummy Reset
   ========================================================== */
.po-save-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 10px;
  padding:11px 13px;
  border:1px solid #D8E6DF;
  border-radius:10px;
  background:#F5FAF7;
}
.po-save-inline b{
  display:block;
  color:#284339;
  font-size:10px;
}
.po-save-inline small{
  display:block;
  margin-top:3px;
  color:#819089;
  font-size:8px;
  line-height:1.4;
}
.po-save-inline #saveMealsOnlyBtn{
  min-width:112px;
  height:38px;
  flex:0 0 auto;
  border:0;
  border-radius:8px;
  background:#0F6B50;
  color:#fff;
  font-size:9px;
  font-weight:850;
}
.order-actions-hidden-finalize{
  display:none!important;
}

/* Reset dummy now lives inside visible PO Staff Meals tab */
.simple-po-list-panel + .system-tools{
  margin-top:14px;
}
.system-tools .reset-warning{
  align-items:center;
}
.reset-total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid #E3E9E6;
  border-radius:8px;
  background:#FAFBFA;
}
.reset-total-line span{
  color:#68766F;
  font-size:8px;
  font-weight:800;
}
.reset-total-line b{
  color:#B6463F;
  font-size:15px;
}
.reset-sheet-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:8px;
}
.reset-sheet-grid>div{
  min-height:48px;
  padding:8px 9px;
  border:1px solid #E6EBE8;
  border-radius:8px;
  background:#fff;
}
.reset-sheet-grid span{
  display:block;
  color:#84918B;
  font-size:7px;
}
.reset-sheet-grid b{
  display:block;
  margin-top:4px;
  color:#2B4037;
  font-size:11px;
}
.reset-preserved{
  margin-top:8px;
  padding:9px 10px;
  border-radius:8px;
  background:#EEF7F2;
}
.reset-preserved span,
.reset-preserved small{
  display:block;
  color:#708078;
  font-size:7px;
}
.reset-preserved b{
  display:block;
  margin:3px 0;
  color:#156248;
  font-size:10px;
}

@media(max-width:700px){
  .po-save-inline{
    align-items:stretch;
    flex-direction:column;
  }
  .po-save-inline #saveMealsOnlyBtn{
    width:100%;
  }
  .reset-sheet-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* V8.60 — Separate New PO vs Edit PO state */
.po-save-inline-copy{
  min-width:0;
}
.po-edit-mode-line{
  display:flex;
  align-items:center;
  gap:8px;
}
.po-edit-mode-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:7px;
  font-weight:850;
  letter-spacing:.03em;
}
.po-edit-mode-badge.new{
  background:#EAF7F1;
  color:#147957;
}
.po-edit-mode-badge.edit{
  background:#FFF3DF;
  color:#A4661D;
}
.po-save-inline-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.po-new-btn{
  height:38px;
  padding:0 11px;
  border:1px solid #CFE0D8;
  border-radius:8px;
  background:#fff;
  color:#0F6B50;
  font-size:8px;
  font-weight:850;
}
.po-new-btn[hidden]{
  display:none!important;
}
@media(max-width:700px){
  .po-save-inline-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .po-save-inline-actions button{
    width:100%!important;
  }
}


/* V8.62 — inline delete untuk draft Staff Meals */
.simple-po-actions .danger-mini{
  border:1px solid #F1C8C4!important;
  background:#FFF5F4!important;
  color:#B64036!important;
}
.simple-po-actions .danger-mini:hover{
  background:#FCE7E5!important;
  border-color:#E6A8A2!important;
}


/* ==========================================================
   V8.63 — ATTENDANCE EMPLOYEE DIRECTORY SCROLL + SEARCH FIX
   ========================================================== */

/* Re-enable horizontal scrolling for the wide Employee Directory table.
   Earlier generic .table-wrap overrides forced overflow:visible. */
.employee-table-wrap-v3{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#BFCBC5 #F4F7F5;
}
.employee-table-wrap-v3::-webkit-scrollbar{height:9px}
.employee-table-wrap-v3::-webkit-scrollbar-track{background:#F4F7F5;border-radius:999px}
.employee-table-wrap-v3::-webkit-scrollbar-thumb{background:#BFCBC5;border-radius:999px;border:2px solid #F4F7F5}
.employee-table-wrap-v3 table{
  min-width:1220px!important;
  width:max(100%,1220px)!important;
}

/* Keep the search field as one continuous rounded outline. */
.employee-search-v3{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid #DDE5E1!important;
  border-radius:10px!important;
  background:#FFFFFF!important;
  box-shadow:none!important;
}
.employee-search-v3 svg{
  position:relative!important;
  z-index:2!important;
  flex:0 0 16px!important;
  background:#FFFFFF!important;
}
.employee-search-v3 input{
  box-sizing:border-box!important;
  min-width:0!important;
  flex:1 1 auto!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.employee-search-v3 input:focus{outline:0!important;box-shadow:none!important}

/* Attendance dummy reset button in Employee Directory header */
.attendance-reset-open-btn{
  min-height:34px!important;
  padding:0 12px!important;
  border:1px solid #E6CFCF!important;
  border-radius:9px!important;
  background:#FFF8F8!important;
  color:#9A4141!important;
  font-size:8px!important;
  font-weight:800!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.attendance-master-panel-head .attendance-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.attendance-dummy-reset-modal-card{width:min(620px,calc(100vw - 28px))!important}
.attendance-dummy-reset-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.attendance-dummy-reset-preview>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #E7ECE9;
  border-radius:9px;
  background:#FAFCFB;
}
.attendance-dummy-reset-preview span{font-size:8px;color:#7A8881}
.attendance-dummy-reset-preview b{font-size:10px;color:#233A30}
@media(max-width:680px){
  .attendance-dummy-reset-preview{grid-template-columns:1fr}
  .attendance-master-panel-head{align-items:flex-start!important}
  .attendance-master-panel-head .attendance-head-actions{width:100%;justify-content:flex-end}
}

/* V8.64 - rekening manual dari Daftar Karyawan */
.employee-bank-action{white-space:nowrap}
.employee-bank-help{font-size:12px;line-height:1.55;color:#6f7f79;background:#f5f8f7;border:1px solid #e2ebe7;border-radius:10px;padding:10px 12px}
.employee-bank-modal-card{max-width:520px}
.attendance-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.employee-table-wrap-v3 table{min-width:1480px}

/* V8.66 — Rekening UI refinement */
#bank .attendance-page-head{
  padding-bottom:18px;
  border-bottom:1px solid #e7eeea;
  margin-bottom:18px;
}
#bank .attendance-page-head h2{
  font-size:28px;
  letter-spacing:-.03em;
  margin:4px 0 5px;
}
#bank .attendance-page-head p{
  max-width:680px;
  font-size:12px;
  color:#72817b;
}
.bank-head-actions{
  gap:10px;
}
.bank-head-actions .compact-action{
  min-height:42px;
  border-radius:11px;
  padding:0 16px;
  font-weight:750;
}
.bank-workspace-clean{
  overflow:hidden;
  border:1px solid #dfe9e4!important;
  border-radius:16px!important;
  box-shadow:0 8px 30px rgba(29,68,54,.045)!important;
  background:#fff;
}
.bank-clean-toolbar{
  padding:16px 18px;
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%);
  gap:16px;
}
.bank-search-wrap{
  position:relative;
  flex:1;
  max-width:560px;
}
.bank-search-wrap:before{
  content:"";
  position:absolute;
  left:15px;
  top:50%;
  width:13px;
  height:13px;
  border:1.8px solid #82938c;
  border-radius:50%;
  transform:translateY(-58%);
  pointer-events:none;
}
.bank-search-wrap:after{
  content:"";
  position:absolute;
  left:26px;
  top:25px;
  width:6px;
  height:1.8px;
  background:#82938c;
  transform:rotate(45deg);
  border-radius:2px;
  pointer-events:none;
}
.bank-search-wrap input{
  height:46px;
  border:1px solid #d8e4de;
  border-radius:12px;
  padding:0 16px 0 42px;
  font-size:12px;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.bank-search-wrap input:focus{
  outline:none;
  border-color:#77a895;
  box-shadow:0 0 0 4px rgba(20,93,70,.08);
  background:#fff;
}
.bank-record-counter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  padding:8px 11px;
  border:1px solid #e3ebe7;
  border-radius:999px;
  background:#f8fbf9;
  font-size:10px;
  color:#72817a;
}
.bank-record-counter span{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#e8f4ee;
  color:#0f674d;
}
#bank .bank-notice{
  margin:0;
  padding:13px 18px;
  border:0;
  border-top:1px solid #edf2ef;
  border-bottom:1px solid #edf2ef;
  border-radius:0;
  background:#f8fbf9;
  align-items:center;
}
#bank .bank-notice > span{
  flex:0 0 28px;
  width:28px;
  height:28px;
  font-size:11px;
  background:#e4f2eb;
}
#bank .bank-notice b{
  display:block;
  margin-bottom:2px;
  font-size:10px;
  color:#2c493d;
}
#bank .bank-notice p{
  margin:0;
  font-size:9px;
  color:#74827c;
}
#bank .table-wrap{
  overflow:auto;
}
#bank table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
#bank thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#fafcfb;
  color:#76857f;
  font-size:9px;
  letter-spacing:.035em;
  border-bottom:1px solid #e8efeb;
  padding:13px 16px;
}
#bank tbody td{
  padding:15px 16px;
  border-bottom:1px solid #eef3f0;
  vertical-align:middle;
}
#bank tbody tr:last-child td{border-bottom:0}
#bank tbody tr:hover td{background:#fbfdfc}
#bank tbody td:first-child{font-weight:700;color:#253a31}
#bank .action-small{
  border:1px solid #d6e4dd;
  border-radius:9px;
  background:#fff;
  color:#195e49;
  min-height:34px;
  padding:0 12px;
  font-weight:700;
}
#bank .action-small:hover{background:#f1f8f4;border-color:#bcd5ca}
.bank-modal-card-v2{
  max-width:540px!important;
  border-radius:18px!important;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(20,55,43,.18)!important;
}
.bank-modal-head-v2{
  align-items:flex-start!important;
  padding:20px 22px 15px!important;
  background:linear-gradient(180deg,#fbfdfc,#fff);
  border-bottom:1px solid #e9f0ec;
}
.bank-modal-head-v2 span{
  color:#167052;
  font-weight:800;
  letter-spacing:.08em;
}
.bank-modal-head-v2 h3{
  margin:4px 0 4px!important;
  font-size:20px!important;
}
.bank-modal-head-v2 p{
  margin:0;
  font-size:10px;
  color:#7a8882;
  max-width:360px;
}
#bankModal .modal-body{
  padding:20px 22px!important;
  gap:14px!important;
}
#bankModal .modal-body label{
  font-size:10px;
  font-weight:700;
  color:#50635b;
  letter-spacing:.01em;
}
#bankModal .modal-body input{
  width:100%;
  margin-top:6px;
  min-height:44px;
  padding:0 13px;
  border:1px solid #dce6e1;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
  font-size:12px;
}
#bankModal .modal-body input:focus{
  outline:none;
  border-color:#78a995;
  box-shadow:0 0 0 4px rgba(20,93,70,.07);
}
#bankModal .modal-foot{
  padding:14px 22px 20px!important;
  border-top:1px solid #edf2ef;
  background:#fbfdfc;
}
@media(max-width:720px){
  #bank .attendance-page-head{align-items:flex-start}
  .bank-head-actions{width:100%;flex-wrap:wrap}
  .bank-head-actions .compact-action{flex:1}
  .bank-clean-toolbar{align-items:stretch;flex-direction:column}
  .bank-search-wrap{max-width:none}
  .bank-record-counter{align-self:flex-start}
}

/* V8.67 - Dynamic QR + live guide */
.qr-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qr-auto-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin:2px 0 12px;padding:7px 10px;border-radius:999px;background:#eaf7f1;color:#0b6b4e;font-size:10px;font-weight:800;letter-spacing:.06em}
.qr-auto-badge i{width:7px;height:7px;border-radius:50%;background:#17a673;box-shadow:0 0 0 4px rgba(23,166,115,.12)}
.qr-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.qr-action-row .download-btn{flex:1;min-width:180px;justify-content:center}
.qr-action-row .guide-btn{background:#fff;color:#0b5c43;border:1px solid #cfe0da}
.qr-sync-note{display:block;margin-top:12px;padding:10px 12px;border-radius:10px;background:#f7faf8;color:#71817b;line-height:1.55;border:1px solid #e5eeea}
@media(max-width:760px){.qr-head-actions{width:100%}.qr-head-actions .outline-btn{flex:1;justify-content:center}.qr-action-row{flex-direction:column}.qr-action-row .download-btn{width:100%}}

/* V8.68 - formal requester placeholders */
#requesterName::placeholder,#requesterTitle::placeholder{color:#9aa5a1;opacity:1;font-weight:500;}
#requesterName,#requesterTitle{color:#1f2d29;font-weight:600;}


/* V8.69 - external TOMAFOOD Workspace jump */
.workspace-jump{ text-decoration:none; width:100%; box-sizing:border-box; }
.workspace-jump-arrow{ margin-left:auto; font-size:15px; opacity:.7; }
.workspace-jump:hover .workspace-jump-arrow{ transform:translate(2px,-2px); }

/* V8.70 - Staff Meals PDF notification detail */
.toast{white-space:pre-line!important;line-height:1.5!important;max-width:min(560px,calc(100vw - 32px))!important;}


/* V8.71 Staff Meals - Report per Pillar */
.pillar-report-panel{overflow:hidden}
.pillar-report-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin-bottom:18px}
.pillar-report-head h3{margin:3px 0 5px;font-size:20px;color:#1f312b}
.pillar-report-head p{margin:0;color:#74827d;font-size:11px;max-width:560px;line-height:1.55}
.pillar-report-filters{display:grid;grid-template-columns:130px 130px 220px 140px auto auto;gap:9px;align-items:end}
.pillar-report-filters label{font-size:9px;font-weight:800;color:#6f7d77;display:grid;gap:5px}
.pillar-report-filters input,.pillar-report-filters select{min-height:39px;border:1px solid #dbe4e0;border-radius:10px;background:#fff;padding:0 10px;color:#26352f}
.pillar-report-filters button{min-height:39px;white-space:nowrap}
.pillar-report-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.pillar-report-summary>div{border:1px solid #e1e8e5;border-radius:12px;background:#fbfcfc;padding:13px 14px}
.pillar-report-summary span{display:block;font-size:8px;font-weight:900;letter-spacing:.05em;color:#82908a}
.pillar-report-summary b{display:block;font-size:18px;margin-top:4px;color:#183d32}
.pillar-report-summary .cost{background:#f3f8f6;border-color:#cfe0da}
.pillar-report-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.pillar-report-meta>*{background:#f2f6f4;border:1px solid #e0e8e4;border-radius:999px;padding:6px 10px;font-size:9px;color:#596a63}
.pillar-report-meta b{background:#e7f4ee;color:#0f6b4f;border-color:#cce8dc}
.pillar-report-table-wrap{max-height:520px;overflow:auto}
.pillar-report-table-wrap table{min-width:1050px}
@media(max-width:1250px){.pillar-report-head{display:block}.pillar-report-filters{margin-top:15px;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.pillar-report-filters{grid-template-columns:1fr 1fr}.pillar-report-summary{grid-template-columns:1fr 1fr}.pillar-report-summary .cost{grid-column:1/-1}}

/* V8.72 - Staff Meals Pillar Report layout refinement */
#meal-pillarreport{width:100%;min-width:0}
#meal-pillarreport .pillar-report-panel{overflow:hidden;padding:0;background:#fff}
#meal-pillarreport .pillar-report-head{display:block;margin:0;padding:22px 24px 12px;border-bottom:0}
#meal-pillarreport .pillar-report-title{width:100%;min-width:0}
#meal-pillarreport .pillar-report-title h3{margin:4px 0 6px;font-size:24px;line-height:1.2;color:#1f312b}
#meal-pillarreport .pillar-report-title p{margin:0;max-width:760px;color:#74827d;font-size:12px;line-height:1.6}
#meal-pillarreport .pillar-report-filter-card{margin:0 24px 18px;padding:16px;border:1px solid #e1e8e5;border-radius:14px;background:#f8faf9;display:flex;align-items:flex-end;gap:14px;justify-content:space-between}
#meal-pillarreport .pillar-report-filters{display:grid;grid-template-columns:150px 150px minmax(220px,1.25fr) minmax(150px,.75fr);gap:12px;align-items:end;flex:1;min-width:0}
#meal-pillarreport .pillar-report-filters label{display:grid;gap:6px;min-width:0;font-size:10px;font-weight:800;color:#64736d}
#meal-pillarreport .pillar-report-filters label>span{display:block}
#meal-pillarreport .pillar-report-filters input,#meal-pillarreport .pillar-report-filters select{width:100%;min-width:0;height:44px;border:1px solid #d7e1dd;border-radius:11px;background:#fff;padding:0 12px;font-size:12px;font-weight:600;color:#24352f;box-sizing:border-box;outline:none}
#meal-pillarreport .pillar-report-filters input:focus,#meal-pillarreport .pillar-report-filters select:focus{border-color:#78a896;box-shadow:0 0 0 3px rgba(15,107,79,.08)}
#meal-pillarreport .pillar-report-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
#meal-pillarreport .pillar-report-actions button{height:44px;border-radius:11px;padding:0 15px;font-size:11px;font-weight:800;white-space:nowrap}
#meal-pillarreport .report-export-btn{border:1px solid #cfdad6;background:#fff;color:#28453b}
#meal-pillarreport .report-export-btn:hover{background:#f0f6f3}
#meal-pillarreport .report-export-btn.pdf{border-color:#efcbbb;color:#c34f22;background:#fff8f4}
#meal-pillarreport .report-export-btn.pdf:hover{background:#fff0e8}
#meal-pillarreport .pillar-report-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 24px 14px}
#meal-pillarreport .pillar-report-summary>div{border:1px solid #e1e8e5;border-radius:14px;background:#fbfcfc;padding:15px 16px;min-width:0}
#meal-pillarreport .pillar-report-summary span{font-size:9px;font-weight:900;letter-spacing:.05em;color:#82908a}
#meal-pillarreport .pillar-report-summary b{font-size:21px;margin-top:5px;color:#183d32;overflow-wrap:anywhere}
#meal-pillarreport .pillar-report-summary .cost{background:#f3f8f6;border-color:#cfe0da}
#meal-pillarreport .pillar-report-meta{margin:0 24px 12px}
#meal-pillarreport .pillar-report-table-wrap{margin:0 24px 24px;max-height:520px;overflow:auto;border:1px solid #e5ebe8;border-radius:13px}
#meal-pillarreport .pillar-report-table-wrap table{min-width:980px}
#meal-pillarreport .pillar-report-table-wrap thead{position:sticky;top:0;z-index:2;background:#f7f9f8}
#meal-pillarreport .pillar-report-table-wrap th{font-size:9px;padding:11px 12px}
#meal-pillarreport .pillar-report-table-wrap td{font-size:10px;padding:11px 12px}
@media(max-width:1280px){#meal-pillarreport .pillar-report-filter-card{display:block}#meal-pillarreport .pillar-report-actions{margin-top:12px;justify-content:flex-start}#meal-pillarreport .pillar-report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#meal-pillarreport .pillar-report-head{padding:18px 16px 10px}#meal-pillarreport .pillar-report-filter-card,#meal-pillarreport .pillar-report-summary,#meal-pillarreport .pillar-report-meta,#meal-pillarreport .pillar-report-table-wrap{margin-left:16px;margin-right:16px}#meal-pillarreport .pillar-report-filters{grid-template-columns:1fr}#meal-pillarreport .pillar-report-actions{display:grid;grid-template-columns:1fr 1fr}#meal-pillarreport .pillar-report-actions .primary-btn{grid-column:1/-1}#meal-pillarreport .pillar-report-summary{grid-template-columns:1fr 1fr}#meal-pillarreport .pillar-report-summary .cost{grid-column:1/-1}}

/* =========================================================
   V8.73 STAFF MEALS - PILLAR REPORT REDESIGN
   Isolated UI to avoid collisions with legacy report styles.
========================================================= */
#meal-pillarreport{width:100%;min-width:0;}
#meal-pillarreport.active{display:block;}
#meal-pillarreport .prx-page{width:100%;min-width:0;display:grid;gap:16px;padding:0;box-sizing:border-box;}
#meal-pillarreport .prx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:2px 2px 4px;min-width:0;}
#meal-pillarreport .prx-head>div:first-child{min-width:0;max-width:760px;}
#meal-pillarreport .prx-eyebrow{display:block;color:#0b6b50;font-size:10px;font-weight:900;letter-spacing:.13em;margin-bottom:7px;}
#meal-pillarreport .prx-head h3{margin:0;color:#172a24;font-size:27px;line-height:1.18;letter-spacing:-.025em;font-weight:800;}
#meal-pillarreport .prx-head p{margin:8px 0 0;color:#74827d;font-size:12px;line-height:1.55;}
#meal-pillarreport .prx-head-actions{display:flex;gap:9px;flex:0 0 auto;align-items:center;padding-top:3px;}
#meal-pillarreport .prx-btn{appearance:none;border:1px solid #d9e3df;background:#fff;color:#29473f;height:42px;padding:0 16px;border-radius:11px;font:800 11px/1 Manrope,Arial,sans-serif;cursor:pointer;white-space:nowrap;transition:.16s ease;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
#meal-pillarreport .prx-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(25,62,51,.08);}
#meal-pillarreport .prx-btn-primary{background:#0b6b50;border-color:#0b6b50;color:#fff;box-shadow:0 8px 18px rgba(11,107,80,.14);}
#meal-pillarreport .prx-btn-primary:hover{background:#075941;}
#meal-pillarreport .prx-btn-ghost{background:#fff;}
#meal-pillarreport .prx-btn-export{height:38px;background:#fff;padding:0 13px;}
#meal-pillarreport .prx-card{display:block;width:100%;min-width:0;background:#fff;border:1px solid #e2e9e6;border-radius:16px;padding:17px 18px;box-sizing:border-box;box-shadow:0 7px 24px rgba(27,59,49,.035);overflow:hidden;}
#meal-pillarreport .prx-card-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;min-width:0;}
#meal-pillarreport .prx-card-title>div{min-width:0;}
#meal-pillarreport .prx-card-title b{display:block;color:#21342e;font-size:14px;font-weight:800;}
#meal-pillarreport .prx-card-title small{display:block;margin-top:4px;color:#82908b;font-size:10px;line-height:1.45;}
#meal-pillarreport .prx-filter-grid{display:grid;grid-template-columns:180px 180px minmax(250px,1fr) minmax(170px,.55fr);gap:12px;align-items:end;width:100%;min-width:0;}
#meal-pillarreport .prx-filter-grid label{display:grid;gap:7px;min-width:0;}
#meal-pillarreport .prx-filter-grid label>span{font-size:10px;font-weight:800;color:#4f615a;}
#meal-pillarreport .prx-control{position:relative;min-width:0;}
#meal-pillarreport .prx-control input,#meal-pillarreport .prx-control select{display:block;width:100%;height:45px;min-width:0;box-sizing:border-box;border:1px solid #d9e3df;border-radius:11px;background:#fff;color:#21342e;padding:0 13px;font:700 12px/1 Manrope,Arial,sans-serif;outline:0;}
#meal-pillarreport .prx-control input:focus,#meal-pillarreport .prx-control select:focus{border-color:#6ca690;box-shadow:0 0 0 3px rgba(11,107,80,.08);}
#meal-pillarreport .prx-summary-head{margin-bottom:13px;}
#meal-pillarreport .prx-export-group{display:flex;gap:8px;align-items:center;flex:0 0 auto;}
#meal-pillarreport .prx-kpi-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin:0!important;}
#meal-pillarreport .prx-kpi{display:block!important;min-width:0;border:1px solid #dfe8e4;border-radius:13px;padding:14px 15px!important;background:#fbfcfc;box-sizing:border-box;}
#meal-pillarreport .prx-kpi span{display:block!important;font-size:9px!important;font-weight:900!important;letter-spacing:.065em!important;color:#74847e!important;}
#meal-pillarreport .prx-kpi b{display:block!important;font-size:22px!important;line-height:1.15!important;margin:7px 0 3px!important;color:#173f34!important;font-weight:800!important;overflow-wrap:anywhere;}
#meal-pillarreport .prx-kpi small{display:block;color:#91a09a;font-size:9px;}
#meal-pillarreport .prx-kpi-total{background:#f7fbf9;border-color:#cfe5dc;}
#meal-pillarreport .prx-kpi-pagi{background:#fffaf3;border-color:#f3dfbe;}
#meal-pillarreport .prx-kpi-pagi span,#meal-pillarreport .prx-kpi-pagi b{color:#b86c0d!important;}
#meal-pillarreport .prx-kpi-malam{background:#fbf9ff;border-color:#e3daf8;}
#meal-pillarreport .prx-kpi-malam span,#meal-pillarreport .prx-kpi-malam b{color:#7054a8!important;}
#meal-pillarreport .prx-kpi-nama{background:#f8fbff;border-color:#d8e5f6;}
#meal-pillarreport .prx-kpi-nama span,#meal-pillarreport .prx-kpi-nama b{color:#316ca6!important;}
#meal-pillarreport .prx-kpi-cost{background:#f5faf8;border-color:#cbe1d8;}
#meal-pillarreport .prx-meta{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;margin:13px 0 0!important;}
#meal-pillarreport .prx-meta span,#meal-pillarreport .prx-meta b{display:inline-flex!important;align-items:center;min-height:28px;padding:0 11px;border:1px solid #e0e8e4;border-radius:999px;background:#f5f8f7;color:#60716a;font-size:9px;font-weight:700;box-sizing:border-box;}
#meal-pillarreport .prx-meta .active,#meal-pillarreport .prx-meta b{background:#e9f5f0;color:#0b6b50;border-color:#cde7dc;}
#meal-pillarreport .prx-table-head{margin-bottom:12px;}
#meal-pillarreport .prx-count{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:0 11px;border-radius:999px;background:#f1f5f3;color:#667770;font-size:9px;font-weight:800;white-space:nowrap;}
#meal-pillarreport .prx-table-wrap{width:100%;min-width:0;overflow:auto;border:1px solid #e4ebe8;border-radius:12px;background:#fff;max-height:510px;}
#meal-pillarreport .prx-table-wrap-small{max-height:390px;}
#meal-pillarreport .prx-table{width:100%;min-width:1050px;border-collapse:separate;border-spacing:0;table-layout:auto;}
#meal-pillarreport .prx-table thead th{position:sticky;top:0;z-index:2;background:#f7f9f8;color:#667870;font-size:9px;font-weight:900;letter-spacing:.035em;padding:11px 13px;border-bottom:1px solid #e4ebe8;text-align:left;white-space:nowrap;}
#meal-pillarreport .prx-table tbody td{padding:12px 13px;border-top:0;border-bottom:1px solid #eef2f0;color:#43534d;font-size:10px;white-space:nowrap;vertical-align:middle;}
#meal-pillarreport .prx-table tbody tr:last-child td{border-bottom:0;}
#meal-pillarreport .prx-table tbody tr:not(.prx-empty-row):hover{background:#fafcfb;}
#meal-pillarreport .prx-table td b{color:#233831;font-size:10px;}
#meal-pillarreport .prx-empty-row td{padding:0!important;border:0!important;}
#meal-pillarreport .prx-empty{height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#899791;gap:5px;}
#meal-pillarreport .prx-empty.compact{height:120px;}
#meal-pillarreport .prx-empty-icon{width:42px;height:42px;border-radius:12px;background:#f2f5f4;display:flex;align-items:center;justify-content:center;color:#9eaaa5;font-size:22px;margin-bottom:3px;}
#meal-pillarreport .prx-empty b{color:#4f615a;font-size:12px;}
#meal-pillarreport .prx-empty span{font-size:10px;}
#meal-pillarreport .prx-name-card{margin-bottom:4px;}
@media(max-width:1250px){
  #meal-pillarreport .prx-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #meal-pillarreport .prx-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  #meal-pillarreport .prx-kpi-cost{grid-column:auto;}
}
@media(max-width:800px){
  #meal-pillarreport .prx-head{display:block;}
  #meal-pillarreport .prx-head-actions{margin-top:14px;}
  #meal-pillarreport .prx-filter-grid{grid-template-columns:1fr;}
  #meal-pillarreport .prx-card-title.prx-summary-head{display:block;}
  #meal-pillarreport .prx-export-group{margin-top:12px;}
  #meal-pillarreport .prx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #meal-pillarreport .prx-kpi-cost{grid-column:1/-1;}
}
@media(max-width:520px){
  #meal-pillarreport .prx-head h3{font-size:23px;}
  #meal-pillarreport .prx-card{padding:14px;}
  #meal-pillarreport .prx-head-actions,#meal-pillarreport .prx-export-group{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  #meal-pillarreport .prx-btn{width:100%;}
}
#meal-pillarreport .prx-meal-pill{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:24px;padding:0 8px;border-radius:999px;background:#f1f5f3;color:#53665e;font-size:9px;font-weight:800;}
#meal-pillarreport .prx-meal-pill.pagi{background:#fff4df;color:#a96108;}
#meal-pillarreport .prx-meal-pill.malam{background:#f2edff;color:#684da2;}


/* V8.74 — Staff Meals duplicate / extra-meal confirmation */
.name-option.ordered{cursor:pointer!important;opacity:1!important;background:#FFF9F0!important;border-color:#F2D5A7!important;color:#3C4A44!important}
.name-option.ordered:hover{border-color:#EF9D45!important;box-shadow:0 8px 22px rgba(239,100,30,.09)!important;transform:translateY(-1px)}
.name-option.ordered i{background:#FFF0DB!important;color:#B76515!important}
.name-option .ordered-badge{background:#FFF0DB!important;color:#A85B12!important;white-space:nowrap}
.draft-row.extra-meal-row{border-color:#F0C98E!important;background:linear-gradient(90deg,#FFF9F0 0%,#FFFFFF 68%)!important;box-shadow:inset 3px 0 0 #EF8A2F}
.extra-meal-badge{display:inline-flex;align-items:center;margin-top:5px;padding:4px 7px;border-radius:999px;background:#FFF0DB;color:#A85B12;border:1px solid #F3D0A0;font-size:8.5px!important;font-weight:850;letter-spacing:.02em}