:root{--navy:#0b315d;--navy2:#123f70;--blue:#1976d2;--green:#087f5b;--green2:#0b6b4f;--orange:#ed9b17;--red:#d64545;--purple:#7155c7;--ink:#10233f;--muted:#64748b;--bg:#f4f7fb;--card:#fff;--line:#e4eaf2;--shadow:0 10px 30px rgba(17,45,78,.07);--radius:16px}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.muted{color:var(--muted)}.small{font-size:12px}.hidden{display:none!important}
/* Login */
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);background:linear-gradient(135deg,#eaf4ff,#fff 55%,#eef9f5);overflow:hidden}.login-page.login-bg-active{--login-bg-position:center;background-image:linear-gradient(rgba(8,45,87,.22),rgba(8,45,87,.22)),var(--login-bg-image);background-position:var(--login-bg-position);background-size:cover;background-repeat:no-repeat}.login-visual.has-login-background{background-repeat:no-repeat;background-color:#082d57}.login-visual.has-login-background:before,.login-visual.has-login-background:after{opacity:.10}.login-visual{position:relative;min-height:100vh;padding:46px 7vw 42px;color:#fff;background:linear-gradient(145deg,#082d57 0%,#0b4775 56%,#0a735b 100%);overflow:hidden}.login-visual:before,.login-visual:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.15}.login-visual:before{width:520px;height:520px;right:-160px;top:-190px;background:#fff}.login-visual:after{width:420px;height:420px;left:-210px;bottom:-220px;background:#48c6a4}.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:16px}.brand-logo{width:76px;height:76px;border-radius:50%;object-fit:contain;background:#fff;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.16)}.brand-copy strong{display:block;font-size:24px;line-height:1.05;letter-spacing:-.6px}.brand-copy span{display:block;margin-top:8px;color:#9be5cc;font-weight:700;font-size:13px;letter-spacing:.4px}.login-title{position:relative;z-index:1;margin:72px 0 10px;max-width:720px;font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-2.4px}.login-subtitle{position:relative;z-index:1;max-width:690px;margin:0;color:#cfe3f7;font-size:20px;line-height:1.55}.process-list{position:relative;z-index:1;margin-top:44px;max-width:680px;display:grid;gap:12px}.process-item{display:grid;grid-template-columns:44px 52px 1fr;align-items:center;gap:12px;padding:13px 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border-radius:16px}.step{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);font-weight:800}.process-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}.process-item strong{display:block;font-size:15px}.process-item span{display:block;margin-top:3px;color:#d4e6f8;font-size:12px}.login-panel{display:grid;place-items:center;padding:34px}.login-card{width:min(100%,520px);padding:38px;background:rgba(255,255,255,.96);border:1px solid #e3e9f0;border-radius:26px;box-shadow:0 25px 70px rgba(11,49,93,.14)}.login-user-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#edf7f4;color:var(--green);overflow:hidden}.login-card-logo{width:58px;height:58px;object-fit:contain;border-radius:50%}.login-card h1{text-align:center;margin:0;font-size:31px;letter-spacing:-1px}.login-card .lead{text-align:center;margin:10px 0 28px;line-height:1.55}.login-form{display:grid;gap:16px}.field label{display:block;font-size:12px;font-weight:800;color:#17345a;margin:0 0 7px;text-transform:uppercase;letter-spacing:.45px}.input-wrap{position:relative}.input-wrap input{width:100%;padding:14px 44px 14px 45px;border:1px solid #d7e0eb;border-radius:12px;outline:none;background:#fff;transition:.2s}.input-wrap input:focus{border-color:#5c9ee0;box-shadow:0 0 0 4px rgba(25,118,210,.08)}.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#73839a}.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#64748b}.login-options{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.remember{display:flex;align-items:center;gap:8px}.login-options a{color:#146ac2;text-decoration:none;font-weight:700}.login-submit{width:100%;padding:14px 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#087f5b,#0b6b4f);color:#fff;font-weight:800;font-size:15px;box-shadow:0 10px 22px rgba(8,127,91,.18)}.security-box{margin-top:18px;padding:14px;border-radius:14px;background:#eef8f5;border:1px solid #d5eee6;color:#275c50}.security-box strong{display:block;margin-bottom:4px}.login-footer{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:#60728b;line-height:1.6}
/* App shell */
.shell{min-height:100vh}.topbar{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:30}.top-left{display:flex;align-items:center;gap:14px}.hamb{display:none;border:0;background:transparent;color:var(--navy);padding:8px}.top-brand{display:flex;align-items:center;gap:10px}.top-brand img{width:40px;height:40px;border-radius:50%;object-fit:contain}.top-brand strong{display:block;font-size:16px;letter-spacing:-.2px}.top-brand span{display:block;font-size:11px;color:var(--muted);margin-top:2px}.top-date{padding:10px 14px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:700;color:#27415f}.top-actions{display:flex;align-items:center;gap:14px}.user-menu{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8f0f9;color:var(--navy);font-weight:800}.user-menu strong{font-size:12px;display:block}.user-menu span{font-size:10px;color:var(--muted);display:block;margin-top:2px}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;transition:.2s}.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:#082746;transform:translateY(-1px)}.btn-green{background:var(--green);color:#fff}.btn-light{background:#f7f9fc;color:#27415f;border:1px solid var(--line)}.btn-danger{background:#fff0f0;color:#b72f2f;border:1px solid #ffd5d5}.btn-ghost{background:transparent;color:#36516e}.btn-sm{padding:7px 10px;font-size:12px}.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:calc(100vh - 74px)}.sidebar{background:linear-gradient(180deg,#082b52,#0a315d);color:#fff;padding:20px 14px;position:sticky;top:74px;height:calc(100vh - 74px);overflow:auto}.side-brand{padding:4px 10px 20px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px}.side-brand .logo-row{display:flex;align-items:center;gap:10px}.side-brand img{width:46px;height:46px;background:#fff;border-radius:50%;object-fit:contain;padding:3px}.side-brand strong{font-size:13px;display:block}.side-brand span{font-size:10px;color:#8fd5bd;display:block;margin-top:3px}.side-title{font-size:10px;color:#9fb8d3;font-weight:800;letter-spacing:1px;margin:18px 10px 7px;text-transform:uppercase}.navbtn{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;border:0;border-radius:11px;background:transparent;color:#dce9f7;text-align:left;font-weight:600;font-size:13px}.navbtn:hover{background:rgba(255,255,255,.08)}.navbtn.active{background:linear-gradient(90deg,#1a568d,#205f97);color:#fff;box-shadow:inset 3px 0 #62a9ee}.nav-icon{width:20px;display:grid;place-items:center;color:#bcd2e8}.sidebar-help{margin:26px 0 4px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05);font-size:11px;color:#dbe8f6}.content{padding:30px 30px 50px;max-width:1600px;width:100%;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}.eyebrow{font-size:11px;color:#1c6fb8;font-weight:800;letter-spacing:1px;text-transform:uppercase}.page-head h1{margin:4px 0 7px;font-size:30px;letter-spacing:-1.1px}.page-head p{margin:0;color:var(--muted);font-size:13px}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.hero{position:relative;overflow:hidden;padding:26px;border-radius:20px;background:linear-gradient(115deg,#0d3b68,#1d5b8f);color:#fff;box-shadow:0 14px 30px rgba(13,59,104,.14)}.hero:after{content:"";position:absolute;width:330px;height:330px;right:-130px;top:-160px;border-radius:50%;background:rgba(255,255,255,.08)}.hero h2{position:relative;z-index:1;margin:5px 0 6px;font-size:27px;letter-spacing:-.8px}.hero p{position:relative;z-index:1;margin:0;color:#d9e9f7;font-size:13px}.hero .hero-mini{position:relative;z-index:1;display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.mini-stat{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 13px;min-width:130px}.mini-stat small{display:block;color:#c8dceb;font-size:10px}.mini-stat strong{display:block;margin-top:3px;font-size:18px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,#1976d2)}.kpi-head{display:flex;justify-content:space-between;gap:10px}.kpi-label{font-size:12px;color:#60728b;font-weight:700}.kpi-value{font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:8px}.kpi-note{font-size:11px;color:#8090a4;margin-top:3px}.kpi-icon{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--accent,#1976d2) 10%,white);color:var(--accent,#1976d2);display:grid;place-items:center}.section{margin-top:20px}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}.section-title h3{margin:0;font-size:15px}.section-title p{margin:3px 0 0;font-size:11px;color:var(--muted)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.ops-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}.ops-card.green{border-top:3px solid #1f9d75}.ops-card.blue{border-top:3px solid #2777d4}.ops-card.orange{border-top:3px solid #e69a1b}.ops-card.purple{border-top:3px solid #7756c9}.ops-top{display:flex;justify-content:space-between}.ops-icon{width:38px;height:38px;border-radius:12px;background:#f2f7fc;display:grid;place-items:center}.ops-value{font-size:25px;font-weight:800;margin-top:8px}.ops-label{font-size:11px;color:var(--muted)}.ops-meta{display:flex;justify-content:space-between;margin-top:17px;padding-top:12px;border-top:1px solid var(--line);font-size:11px}.attention-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.attention{padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:11px}.attention.red{background:#fff7f7;border-color:#ffe1e1}.attention.amber{background:#fffaf1;border-color:#f8e9c9}.attention.blue{background:#f5f9ff;border-color:#dfebfb}.attention-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#fff}.attention strong{font-size:12px;display:block}.attention span{font-size:10px;color:var(--muted);display:block;margin-top:3px}.charts{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.card h3{margin:0 0 4px;font-size:15px}.card-sub{font-size:11px;color:var(--muted);margin-bottom:15px}.bar-chart{height:220px;display:flex;align-items:flex-end;gap:12px;padding:15px 4px 0;border-bottom:1px solid var(--line)}.bar-group{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:5px}.bar{width:12px;border-radius:5px 5px 0 0}.bar.target{background:#5a94d6}.bar.real{background:#4bb58b}.bar-label{font-size:9px;color:#8090a4;text-align:center;margin-top:7px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:20px;min-height:220px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#3da77d 0 63%,#357fd0 63% 100%);display:grid;place-items:center}.donut:after{content:"";width:98px;height:98px;border-radius:50%;background:#fff}.donut-center{position:absolute;text-align:center}.legend{display:grid;gap:8px;font-size:11px}.legend-row{display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:#3da77d}.activity{display:grid;gap:13px}.activity-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center}.activity-icon{width:30px;height:30px;border-radius:9px;background:#f0f6fd;color:#176bb5;display:grid;place-items:center}.activity-row strong{font-size:11px;display:block}.activity-row span{font-size:10px;color:var(--muted);display:block;margin-top:2px}.activity-time{font-size:10px;color:#8b98aa}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.quick{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;gap:9px;align-items:center;text-align:left}.quick:hover{border-color:#bfd4e8;box-shadow:0 6px 18px rgba(17,45,78,.06)}.quick-icon{width:34px;height:34px;border-radius:10px;background:#eff5fb;color:#176bb5;display:grid;place-items:center}.quick strong{font-size:11px;display:block}.quick span{font-size:9px;color:var(--muted);display:block;margin-top:2px}
/* tables/forms */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;flex-wrap:wrap}.filters{display:flex;gap:8px;flex-wrap:wrap}.search{min-width:250px}.input,.select,.textarea{width:100%;padding:11px 12px;border:1px solid #d9e2ed;border-radius:10px;outline:none;background:#fff}.input:focus,.select:focus,.textarea:focus{border-color:#7aaedf;box-shadow:0 0 0 3px rgba(25,118,210,.08)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:760px}.table th{background:#f8fafc;color:#5e7088;font-size:10px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:12px;border-bottom:1px solid var(--line)}.table td{padding:12px;border-bottom:1px solid #edf1f5;font-size:12px;vertical-align:middle}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fbfdff}.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#eef4fb;color:#32608d;font-size:10px;font-weight:800}.badge.green{background:#e9f8f1;color:#167353}.badge.red{background:#fff0f0;color:#b32e2e}.badge.amber{background:#fff6df;color:#9b6a09}.empty{padding:42px 20px;text-align:center;color:#8291a3;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.field-group label{display:block;font-size:11px;font-weight:800;margin-bottom:6px;color:#3b526d}.modal-backdrop{position:fixed;inset:0;background:rgba(6,24,44,.55);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.22)}.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;font-size:17px}.modal-body{padding:20px}.modal-close{border:0;background:#f3f6fa;border-radius:9px;width:34px;height:34px;color:#5d718b}.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);margin-bottom:15px;overflow:auto}.tab{border:0;background:transparent;padding:10px 12px;font-size:12px;font-weight:700;color:#718197;border-bottom:2px solid transparent;white-space:nowrap}.tab.active{color:var(--navy);border-color:#1d6db4}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-card{padding:13px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.mini-card small{display:block;color:var(--muted);font-size:10px}.mini-card strong{display:block;font-size:20px;margin-top:5px}.page-error{padding:24px;border:1px solid #ffd8d8;background:#fff7f7;border-radius:16px}.page-error h3{color:#b52f2f;margin:0 0 5px}.page-error p{margin:0;color:#7d5a5a;font-size:12px}.mobile-nav{display:none}
@media(max-width:1180px){.kpi-grid,.grid-4,.attention-grid{grid-template-columns:repeat(2,1fr)}.charts{grid-template-columns:1fr 1fr}.charts .card:first-child{grid-column:1/-1}.quick-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.login-page{grid-template-columns:1fr}.login-visual{min-height:auto;padding:28px 24px 32px}.login-title{margin-top:38px;font-size:42px}.process-list{margin-top:25px}.login-panel{padding:22px}.layout{grid-template-columns:1fr}.sidebar{display:none}.hamb{display:block}.content{padding:22px 16px 90px}.mobile-nav{display:flex;position:fixed;left:10px;right:10px;bottom:10px;background:rgba(8,43,82,.97);border-radius:16px;z-index:40;padding:6px;box-shadow:0 12px 35px rgba(0,0,0,.2);overflow:auto}.mobile-nav .navbtn{min-width:82px;justify-content:center;flex-direction:column;gap:3px;font-size:9px;padding:7px;color:#dce9f7}.mobile-nav .navbtn.active{box-shadow:none;background:#205f97}.mobile-nav .nav-icon{width:auto}.top-date{display:none}.user-menu .user-copy{display:none}.topbar{padding:0 14px}.charts{grid-template-columns:1fr}.charts .card:first-child{grid-column:auto}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.login-page.login-bg-active{background-image:linear-gradient(rgba(8,45,87,.30),rgba(8,45,87,.30)),var(--login-bg-image);background-position:var(--login-bg-position);background-size:cover;background-attachment:scroll}.login-page.login-bg-active .login-panel{background:rgba(255,255,255,.08);backdrop-filter:blur(2px)}.login-page.login-bg-active .login-card{box-shadow:0 22px 60px rgba(3,25,45,.25)}.kpi-grid,.grid-4,.attention-grid,.form-grid,.stat-row{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:26px}.hero{padding:21px}.hero h2{font-size:23px}.login-visual{display:none}.login-panel{min-height:100vh;padding:14px}.login-card{padding:26px 20px;border-radius:20px}.login-card h1{font-size:26px}.toolbar{align-items:stretch}.search{min-width:0}.filters{width:100%}.filters>*{flex:1}.quick-grid{grid-template-columns:1fr 1fr}.process-item{grid-template-columns:34px 42px 1fr}.brand-copy strong{font-size:18px}.top-brand span{display:none}}
.svg{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:0 0 auto}.navbtn .svg{width:17px;height:17px}.btn .svg{width:15px;height:15px}.login-submit .svg{width:16px}.security-box .svg{width:18px;margin-right:6px}.toast{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;align-items:center;gap:9px;min-width:260px;max-width:420px;padding:13px 15px;background:#10233f;color:#fff;border-radius:12px;box-shadow:0 15px 35px rgba(8,30,55,.22);font-size:12px;font-weight:600}.toast.error{background:#9d3030}.toast .svg{width:17px}.login-submit{display:flex;align-items:center;justify-content:center;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:disabled{opacity:.6;cursor:not-allowed}.field-group{min-width:0}.tabs{scrollbar-width:thin}.table a{color:#146ac2;text-decoration:none;font-weight:700}.table a:hover{text-decoration:underline}.mobile-nav .svg{width:16px;height:16px}.hero .eyebrow{margin-bottom:0}
/* Final UX refinement */
.progress-track{height:10px;background:#edf2f7;border-radius:999px;overflow:hidden;margin-top:18px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1976d2,#1f9d75);border-radius:999px;transition:width .35s ease}.status-stack{display:grid;gap:12px;margin-top:18px}.status-row{display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;font-size:12px}.status-dot{width:9px;height:9px;border-radius:50%}.status-dot.green{background:#1f9d75}.status-dot.blue{background:#357fd0}.status-dot.amber{background:#ed9b17}.detail-link{color:#176bb5;font-weight:700;cursor:pointer}.attention-count{float:right;margin-left:20px}.doc-filters{display:grid;grid-template-columns:1.8fr 1fr 1.5fr 1fr 1fr auto auto auto auto;gap:8px;align-items:center}.doc-filters .search{min-width:0}.mobile-menu-group{margin-bottom:12px}.mobile-menu-item{width:100%;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;margin:5px 0;color:var(--ink)}.mobile-menu-item .svg{color:#176bb5}.mobile-menu-item span{font-size:12px;font-weight:700}.mobile-menu-item small{font-size:10px;color:var(--muted)}
@media(max-width:900px){.doc-filters{grid-template-columns:1fr 1fr}.doc-filters .search{grid-column:1/-1}.doc-filters button{min-height:40px}.mobile-nav{gap:2px}.mobile-nav .navbtn{min-width:0;flex:1;padding:7px 4px}.mobile-nav .navbtn span:last-child{font-size:9px}.mobile-nav .nav-icon .svg{width:17px;height:17px}}
@media(max-width:620px){.content{padding:18px 13px 90px}.card{padding:15px}.section{margin-top:16px}.page-head h1{font-size:25px;letter-spacing:-.5px}.page-head p{font-size:12px;line-height:1.55}.hero h2{font-size:21px}.hero p{font-size:12px}.kpi-value{font-size:27px}.kpi-label{font-size:11px}.table th{font-size:9px}.table td{font-size:11px;padding:10px}.btn{min-height:40px}.doc-filters{grid-template-columns:1fr}.doc-filters .search{grid-column:auto}.modal{border-radius:16px}.modal-body{padding:16px}.modal-head{padding:15px 16px}}

/* v3.2 operational control */
.employee-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.employee-preview{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px;cursor:pointer;color:var(--ink);transition:.2s}.employee-preview:hover{border-color:#b7cee3;box-shadow:0 8px 20px rgba(15,45,78,.08);transform:translateY(-1px)}.employee-preview>.svg,.employee-preview-icon{width:38px;height:38px;padding:9px;border-radius:11px;background:#edf6ff;color:#176bb5}.employee-preview strong{display:block;font-size:12px}.employee-preview small{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:3px}.employee-preview>b{font-size:10px;color:#176bb5;white-space:nowrap}.icon-btn{position:relative;border:1px solid var(--line);background:#fff;color:#17395e;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer}.notification-count{display:none;position:absolute;right:-3px;top:-4px;min-width:16px;height:16px;border-radius:999px;background:#d64545;color:#fff;font-size:9px;font-weight:800;align-items:center;justify-content:center;padding:0 4px}.notification-count.show{display:flex}.notification-item{width:100%;display:grid;grid-template-columns:9px 1fr;gap:10px;border:0;border-bottom:1px solid var(--line);background:#fff;padding:12px 2px;text-align:left;cursor:pointer}.notification-item strong,.notification-item small,.notification-item em{display:block}.notification-item strong{font-size:12px}.notification-item small{font-size:11px;color:var(--muted);margin-top:3px}.notification-item em{font-size:9px;color:#9aa7b7;font-style:normal;margin-top:4px}.notification-item.read{opacity:.55}.notification-dot{width:8px;height:8px;border-radius:50%;background:#1976d2;margin-top:5px}.timeline-head{display:flex;justify-content:space-between;gap:12px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px}.timeline-head small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.timeline{display:grid;gap:0;margin-top:14px}.timeline-item{display:grid;grid-template-columns:14px 1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);position:relative}.timeline-item:last-child{border-bottom:0}.timeline-dot{width:9px;height:9px;border-radius:50%;background:#1976d2;margin-top:4px;position:relative}.timeline-item:not(:last-child) .timeline-dot:after{content:"";position:absolute;left:4px;top:10px;width:1px;height:48px;background:#cddbe8}.timeline-item b,.timeline-item small,.timeline-item span{display:block}.timeline-item b{font-size:12px}.timeline-item small{font-size:10px;color:#5f738b;margin-top:3px}.timeline-item span{font-size:10px;color:var(--muted);margin-top:3px}.timeline-item time{font-size:9px;color:#8c99aa;white-space:nowrap}.modal-note{padding:10px 12px;background:#eef6ff;border:1px solid #d6e8f8;color:#2e6088;border-radius:10px;font-size:10px;line-height:1.45;margin-bottom:12px}.route-kpm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;max-height:220px;overflow:auto;padding:2px}.check-card{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fbfcfe;cursor:pointer}.check-card input{margin-top:3px}.check-card b,.check-card small{display:block}.check-card b{font-size:10px}.check-card small{font-size:9px;color:var(--muted);margin-top:2px}.system-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.form-help{display:block;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4}.preview-note{margin-top:14px;padding:10px 12px;background:#f0f8f5;color:#286a54;border-radius:10px;font-size:10px}.preview-banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:150;background:#0b315d;color:#fff;border-radius:12px;padding:9px 11px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:10px}.preview-banner .svg{width:15px}.preview-banner span{opacity:.82}.preview-mode .topbar{padding-top:45px}.login-visual{background-size:cover;background-position:center;transition:background-image .2s}.login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgb(7 38 71 / var(--login-overlay-opacity,.25)),rgb(7 38 71 / calc(var(--login-overlay-opacity,.25) * .28)));pointer-events:none}.login-visual>*{position:relative;z-index:1}.login-brand .brand-logo{object-fit:contain}.login-kicker{font-size:10px;font-weight:800;letter-spacing:1px;color:#cce8ff;margin-top:30px}.login-visual-footer{font-size:10px;color:#dcebf7;margin-top:24px}
@media(max-width:1000px){.employee-preview-grid,.system-grid{grid-template-columns:1fr}.route-kpm-grid{grid-template-columns:1fr}.preview-banner{left:10px;right:10px;transform:none;justify-content:flex-start;flex-wrap:wrap}.preview-banner span{width:100%;padding-left:22px}.preview-mode .topbar{padding-top:62px}}
@media(max-width:620px){.employee-preview{grid-template-columns:38px 1fr}.employee-preview>b{display:none}.timeline-item{grid-template-columns:14px 1fr}.timeline-item time{grid-column:2}.route-kpm-grid{max-height:180px}.login-visual{display:block;min-height:48vh}.login-title{font-size:30px}.login-visual-inner{padding-bottom:20px}.preview-banner{font-size:9px}.preview-banner .btn{margin-left:auto}}

/* v3.3 visual system + alignment normalization */
:root{--space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--space-5:24px;--space-6:32px;--space-7:40px;--focus:0 0 0 4px rgba(25,118,210,.10)}
html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.45}.content{max-width:1680px;padding:32px 36px 60px}.page-head{align-items:flex-start;margin-bottom:26px}.page-head>div:first-child{min-width:0}.page-head h1{font-size:32px;font-weight:800;line-height:1.12;letter-spacing:-1.25px}.page-head p{max-width:760px;line-height:1.55}.head-actions{justify-content:flex-end;align-items:center}.eyebrow{font-size:10px;line-height:1.2;letter-spacing:1.25px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.card h3{font-size:16px;line-height:1.3;font-weight:750;margin:0}.card-sub,.section-title p{line-height:1.5}.field-group label,.field label{font-size:11px;line-height:1.25;font-weight:700;letter-spacing:.15px;text-transform:none}.input,.select,.textarea,.input-wrap input{min-height:42px;border-radius:10px;border-color:#d7e0eb}.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{outline:none;box-shadow:var(--focus);border-color:#6ca5d7}.form-grid{gap:16px}.form-actions{justify-content:flex-end;align-items:center}.toolbar{gap:10px;align-items:center}.toolbar .search{min-width:260px}.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:#fff}.table{width:100%;border-collapse:separate;border-spacing:0}.table th{background:#f7f9fc;color:#52667e;font-size:10px;font-weight:750;letter-spacing:.2px;text-transform:uppercase;text-align:left;padding:12px 13px;white-space:nowrap}.table td{font-size:12px;line-height:1.45;text-align:left;padding:12px 13px;border-top:1px solid #edf1f6;vertical-align:middle}.table td.num,.table th.num{text-align:right}.table td.center,.table th.center{text-align:center}.table td:first-child,.table th:first-child{padding-left:14px}.table td:last-child,.table th:last-child{padding-right:14px}.table tbody tr:hover{background:#fbfdff}.badge{font-weight:700;line-height:1}.btn{min-height:40px;font-size:12px;white-space:nowrap}.btn-sm{min-height:34px}.modal{width:min(720px,calc(100vw - 28px));max-height:min(86vh,820px);overflow:hidden}.modal-head h3{font-size:16px;font-weight:750}.modal-body{overflow:auto}.empty{padding:30px 18px;text-align:center;color:var(--muted);font-size:12px}.page-error{display:flex;align-items:flex-start;gap:16px;margin-top:10px;padding:24px}.page-error .error-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#fff0f0;color:var(--red);flex:0 0 auto}.page-error h3{font-size:18px;margin:4px 0 6px}.page-error p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.error-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.system-value{font-size:22px}.branding-preview{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);background:#f8fafc;border-radius:12px;margin:0 0 18px}.branding-preview-image{width:62px;height:62px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.branding-preview-image img{width:100%;height:100%;object-fit:contain;padding:6px}.branding-preview strong{display:block;font-size:14px;font-weight:800}.branding-preview span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.branding-preview small{display:block;font-size:10px;color:var(--green);font-weight:700;margin-top:5px}.login-page{grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr)}.login-visual{padding:54px clamp(32px,6vw,92px) 48px;display:flex;flex-direction:column;justify-content:flex-start}.login-brand{gap:14px}.brand-logo{width:72px;height:72px}.brand-copy strong{font-size:22px;font-weight:800;letter-spacing:-.5px}.login-title{margin-top:76px;font-size:clamp(40px,4.8vw,62px);font-weight:800;line-height:1.02;max-width:760px}.login-subtitle{max-width:650px;font-size:17px;line-height:1.65}.process-list{max-width:690px;margin-top:36px;gap:10px}.process-item{grid-template-columns:36px 46px minmax(0,1fr);padding:12px 14px}.process-item strong{font-size:14px;font-weight:750}.process-item span{font-size:11px;line-height:1.45}.login-panel{padding:42px}.login-card{width:min(100%,500px);padding:38px 40px;border-radius:22px}.login-card h1{font-size:30px;font-weight:800;line-height:1.15}.login-card .lead{font-size:13px;line-height:1.6}.login-submit{min-height:48px}.login-visual:after{background:rgba(7,38,71,var(--login-overlay-opacity,.18));opacity:1}.login-visual:before{opacity:.10}.top-brand strong{font-weight:800}.top-brand span{line-height:1.3}.sidebar{padding:20px 12px}.side-title{font-size:9px}.navbtn{font-size:12px;min-height:42px}.mobile-nav .navbtn{min-height:52px}.employee-preview-grid{gap:14px}.employee-preview{min-height:72px}.system-grid{align-items:start}.doc-filters{grid-template-columns:minmax(220px,1.8fr) repeat(2,minmax(150px,1fr)) repeat(2,130px) auto auto auto auto}.kpi{min-height:126px}.kpi-label{font-size:11px}.kpi-value{font-size:29px;font-weight:800}.kpi-note{line-height:1.4}
@media(max-width:1100px){.content{padding:26px 24px 50px}.login-page{grid-template-columns:1fr}.login-visual{min-height:auto;padding:40px 42px 34px}.login-title{margin-top:48px;font-size:46px}.login-panel{padding:32px}.system-grid{grid-template-columns:1fr}.doc-filters{grid-template-columns:1fr 1fr}.doc-filters .search{grid-column:1/-1}}
@media(max-width:720px){.content{padding:20px 14px 86px}.page-head{margin-bottom:20px}.page-head h1{font-size:26px}.page-head p{font-size:12px}.head-actions{width:100%;justify-content:flex-start}.head-actions .btn{flex:0 0 auto}.card{padding:16px}.kpi-grid{gap:10px}.kpi{padding:15px;min-height:112px}.kpi-value{font-size:25px}.login-visual{padding:28px 20px 24px}.login-brand .brand-logo{width:56px;height:56px}.brand-copy strong{font-size:17px}.brand-copy span{font-size:10px}.login-title{margin-top:34px;font-size:31px}.login-subtitle{font-size:13px;line-height:1.55}.process-list{margin-top:22px}.process-item{grid-template-columns:30px 40px 1fr}.login-panel{padding:14px}.login-card{padding:26px 20px}.login-card h1{font-size:25px}.table th{font-size:9px;padding:10px}.table td{font-size:11px;padding:10px}.toolbar{flex-direction:column;align-items:stretch}.toolbar .search{min-width:0;width:100%}.doc-filters{grid-template-columns:1fr}.doc-filters .search{grid-column:auto}.branding-preview{align-items:flex-start}.form-actions{justify-content:stretch}.form-actions .btn{flex:1}.page-error{padding:18px;flex-direction:column}.error-actions .btn{flex:1}.preview-banner{top:6px}}

/* v3.4 final visual normalization */
:root{--font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ink:#10233f;--muted:#66768a;--bg:#f4f7fb;--line:#e2e8f0;--navy:#0b315d;--navy2:#164a7b;--green:#087f5b;--danger:#c83b3b;--radius:16px}
html,body,#app{font-family:var(--font-ui);font-size:14px;color:var(--ink);background:var(--bg)}
body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
.topbar{height:76px;padding:0 28px}
.top-brand{gap:12px}.top-brand img{width:42px;height:42px}.top-brand strong{font-size:15px;font-weight:800;letter-spacing:-.15px}.top-brand span{font-size:10px}
.content{max-width:1700px;padding:32px 38px 64px}
.page-head{margin-bottom:24px;align-items:flex-start}.page-head h1{font-size:31px;font-weight:800;line-height:1.12;letter-spacing:-1.1px}.page-head p{font-size:13px;line-height:1.55;color:#6b7b8f}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.3px}
.head-actions{align-items:flex-start;justify-content:flex-end;gap:8px}
.card,.kpi,.ops-card,.quick,.employee-preview,.attention,.mini-card{box-shadow:0 8px 24px rgba(17,45,78,.055)}
.card{padding:20px;border-radius:16px}.section{margin-top:22px}.section-title{margin-bottom:12px}.section-title h3,.card h3{font-size:16px;font-weight:750;line-height:1.3}.section-title p,.card-sub{font-size:11px;line-height:1.55}
.kpi-grid{gap:14px;margin-top:16px}.kpi{min-height:126px;padding:18px}.kpi-label{font-size:11px;font-weight:700}.kpi-value{font-size:29px;font-weight:800;line-height:1.1}.kpi-note{font-size:11px;line-height:1.45}.kpi-icon{width:40px;height:40px}
.form-grid{gap:16px}.field-group label,.field label{font-size:11px;font-weight:700;line-height:1.3;color:#334a63;margin-bottom:6px}.input,.select,.textarea,.input-wrap input{min-height:43px;border:1px solid #d5deea;border-radius:10px;background:#fff;font-size:13px}.textarea{min-height:100px;padding:11px 12px}.input:focus,.select:focus,.textarea:focus{border-color:#6aa1d3;box-shadow:0 0 0 4px rgba(25,118,210,.08)}
.form-actions{gap:8px}.btn{min-height:40px;border-radius:10px;font-size:12px;font-weight:750;padding:9px 13px}.btn-sm{min-height:34px;font-size:11px;padding:7px 10px}
.table-wrap{border-radius:12px}.table th{font-size:10px;font-weight:750;letter-spacing:.25px;text-align:left;padding:12px 13px}.table td{font-size:12px;text-align:left;padding:12px 13px;vertical-align:middle}.table th.num,.table td.num{text-align:right}.table th.center,.table td.center{text-align:center}.table tbody tr:hover{background:#fbfdff}
.badge{font-size:10px;font-weight:750;letter-spacing:.15px;padding:6px 8px;border-radius:999px}
.toolbar{gap:10px;margin-bottom:12px}.toolbar .search{min-width:280px}.search{background:#fff}
.tabs{display:flex;gap:6px;margin:18px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}.tab{border:0;background:transparent;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700;color:#63758a}.tab.active{background:#eaf3fb;color:#124d80}
.modal-backdrop{padding:16px}.modal{border-radius:18px;box-shadow:0 24px 80px rgba(5,31,58,.22)}.modal-head{padding:16px 20px}.modal-head h3{font-size:16px;font-weight:800}.modal-body{padding:20px}.modal-close{width:34px;height:34px;border-radius:9px}
.login-page{min-height:100svh;grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);background:#edf3f8}.login-visual{padding:54px clamp(32px,6vw,92px) 48px;background-color:#0b315d;background-position:center;background-size:cover}.login-visual:after{background:rgba(7,38,71,var(--login-overlay-opacity,.18));opacity:1}.login-brand{gap:14px}.brand-logo{width:74px;height:74px;padding:5px}.brand-copy strong{font-size:22px;font-weight:800}.brand-copy span{font-size:12px;font-weight:700}.login-title{margin-top:70px;font-size:clamp(42px,4.8vw,62px);font-weight:800;letter-spacing:-2px}.login-subtitle{font-size:17px;line-height:1.6}.process-list{margin-top:34px;gap:10px}.process-item{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.11)}.process-item strong{font-size:14px;font-weight:750}.process-item span{font-size:11px;line-height:1.45}.login-panel{padding:42px}.login-card{width:min(100%,500px);padding:38px 40px;border-radius:22px;box-shadow:0 25px 70px rgba(11,49,93,.14)}.login-user-icon{width:68px;height:68px}.login-card h1{font-size:30px;font-weight:800}.login-card .lead{font-size:13px;line-height:1.6}.login-options{font-size:12px}.login-help{color:#7b8998;text-align:right}.login-submit{min-height:48px;border-radius:11px;font-size:14px}.security-box{font-size:11px;line-height:1.5}.login-footer{text-align:center;font-size:11px}
.employee-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.employee-preview{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px;text-align:left;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;color:var(--ink)}.employee-preview>.svg{width:26px;height:26px;color:#1d6fae}.employee-preview strong{display:block;font-size:13px}.employee-preview small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.employee-preview>b{font-size:11px;color:#1d6fae}
.preview-banner{font-size:11px;padding:10px 12px;border-radius:11px}.preview-mode .topbar{padding-top:0}
.page-error{border:1px solid #f0d0d0;background:#fff}.page-error h3{font-size:18px;font-weight:800}.page-error p{font-size:12px}
.system-grid{gap:18px}.branding-preview{min-height:88px}.branding-preview-image{width:68px;height:68px}
.login-visual .process-item,.login-brand,.login-title,.login-subtitle{z-index:2}
@media(max-width:1100px){.content{padding:28px 24px 56px}.login-page{grid-template-columns:1fr}.login-visual{min-height:auto;padding:40px 42px 34px}.login-title{margin-top:46px;font-size:46px}.login-panel{padding:30px}.employee-preview-grid{grid-template-columns:1fr 1fr}.doc-filters{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topbar{height:68px;padding:0 14px}.content{padding:20px 14px 88px}.page-head{margin-bottom:18px}.page-head h1{font-size:26px}.page-head p{font-size:12px}.head-actions{width:100%;justify-content:flex-start}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi{min-height:108px;padding:14px}.kpi-value{font-size:25px}.card{padding:15px}.employee-preview-grid{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}.toolbar .search{min-width:0;width:100%}.table th{font-size:9px}.table td{font-size:11px;padding:10px}.login-visual{min-height:46svh;padding:28px 20px 24px}.login-brand .brand-logo{width:56px;height:56px}.brand-copy strong{font-size:17px}.brand-copy span{font-size:9px}.login-title{margin-top:32px;font-size:31px;letter-spacing:-1px}.login-subtitle{font-size:13px}.process-list{margin-top:20px}.process-item{grid-template-columns:30px 40px 1fr}.login-panel{padding:14px}.login-card{padding:26px 20px;border-radius:18px}.login-card h1{font-size:25px}.login-help{font-size:10px}.doc-filters{grid-template-columns:1fr}.form-actions .btn{flex:1}.modal-body{padding:16px}}
@media(max-width:430px){.login-visual{min-height:42svh}.process-item{padding:10px}.process-item span{font-size:10px}.login-card{padding:22px 17px}.kpi-grid{grid-template-columns:1fr 1fr}.top-brand span{display:none}.top-brand strong{font-size:13px}}
.role-matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.role-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fbfcfe}.role-card b,.role-card span,.role-card small{display:block}.role-card b{font-size:13px}.role-card span{font-size:10px;color:#718197;margin-top:2px}.role-card small{font-size:10px;color:#087f5b;font-weight:700;margin-top:9px}@media(max-width:900px){.role-matrix{grid-template-columns:1fr 1fr}}@media(max-width:620px){.role-matrix{grid-template-columns:1fr}}
.branding-bg-preview{height:120px;margin:0 0 18px;border:1px dashed #cbd7e4;border-radius:12px;background:linear-gradient(135deg,#eef4f9,#f8fafc);display:grid;place-items:center;color:#7a8a9d;font-size:11px;overflow:hidden;background-size:cover;background-position:center}.branding-bg-preview.has-image{color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35)}

/* v3.4.3 UI consistency / accessibility */
:root{--font-ui:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--space-5:24px;--space-6:32px}
body{font-family:var(--font-ui);font-weight:400;line-height:1.5;letter-spacing:0}
h1,h2,h3,h4{margin:0;color:var(--ink);text-align:left}p{margin:0;color:var(--muted);text-align:left}.page-head h1{font-weight:800}.page-head p{max-width:760px}.section-title,.section-title>div,.field-group,.form-help,.modal-note,.preview-note{text-align:left}.btn{font-weight:650}.btn-primary{font-weight:750}.kpi-label,.eyebrow,.side-title{font-weight:750}.kpi-value{font-weight:800;letter-spacing:-.4px}.table th{font-weight:750}.table td{font-weight:400}.table td b{font-weight:700}.badge{font-weight:700}.toolbar{align-items:center}.filters{align-items:center}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}.modal-body{max-height:78vh;overflow:auto}.link-btn{border:0;background:none;color:#0b4775;font:inherit;font-weight:650;padding:0;cursor:pointer}.link-btn:hover{text-decoration:underline}.empty{padding:30px 18px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:#fbfcfe}.page-error{display:flex;gap:16px;align-items:flex-start;padding:24px}.page-error .error-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.route-kpm-grid{align-content:start}.check-card{min-height:52px}.preview-banner{font-size:13px}.mobile-nav .navbtn{font-weight:650}@media(max-width:720px){.page-head{gap:14px}.page-head h1{font-size:25px}.page-head p{max-width:none}.head-actions{gap:7px;overflow:auto;padding-bottom:2px}.head-actions .btn{min-height:42px}.form-actions{justify-content:stretch}.form-actions .btn{flex:1 1 auto}.modal{width:min(100%,720px);max-height:92svh}.modal-body{max-height:calc(92svh - 74px)}.table-wrap{-webkit-overflow-scrolling:touch}.kpi-value{font-size:24px}.login-title{text-align:left}.login-subtitle{text-align:left}}
/* Master KPM refinement */
.kpm-overview{padding:20px}.kpm-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.kpm-overview h3{font-size:17px;margin:4px 0 5px}.kpm-overview p{font-size:12px;line-height:1.55;max-width:760px}.kpm-date-control{width:250px;flex:0 0 250px}.kpm-date-control label{display:block;font-size:11px;font-weight:750;color:#52667e;margin-bottom:6px}.kpm-date-control small{display:block;font-size:10px;color:var(--muted);margin-top:6px;line-height:1.4}.kpm-kpis{margin-top:14px}.kpm-tabs{align-items:center}.kpm-tabs .tab{display:flex;align-items:center;gap:7px}.kpm-tabs .tab span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#f1f5f9;color:#63758a;font-size:10px}.kpm-tabs .tab.active span{background:#d8eaf9;color:#124d80}.kpm-toolbar{align-items:center}.kpm-toolbar .filters{flex:1}.kpm-toolbar .filters .select{min-width:190px}.kpm-toolbar-meta{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}.kpm-table{min-width:1080px}.kpm-table th.num,.kpm-table td.num{text-align:right}.kpm-table th.center,.kpm-table td.center{text-align:center}.table-actions{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.kpm-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.kpm-detail-head h3{font-size:18px;margin:10px 0 4px}.kpm-detail-head p{font-size:11px;color:var(--muted)}.kpm-detail-total{text-align:right}.kpm-detail-total small{display:block;color:var(--muted);font-size:10px}.kpm-detail-total strong{display:block;font-size:28px;margin-top:4px}.kpm-detail-stats{margin:16px 0}.import-guide .notice{padding:12px 14px;border:1px solid #dce9f5;background:#f5f9fd;border-radius:12px;margin-bottom:16px}.import-guide .notice strong{display:block;font-size:12px;margin-bottom:4px}.import-guide .notice span{display:block;font-size:11px;color:var(--muted);line-height:1.5}.kpm-rule-help{padding:11px 12px;border-radius:10px;background:#f7f9fc;border:1px solid var(--line);font-size:11px;line-height:1.55;color:var(--muted)}
@media(max-width:900px){.kpm-overview-head{align-items:stretch;flex-direction:column}.kpm-date-control{width:100%;flex-basis:auto}.kpm-toolbar-meta{width:100%;justify-content:space-between}.kpm-toolbar .filters{width:100%}.kpm-toolbar .filters .select{min-width:0;flex:1}}
@media(max-width:720px){.kpm-toolbar .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kpm-toolbar .filters .search{grid-column:1/-1}.kpm-toolbar-meta{font-size:10px}.kpm-overview{padding:16px}.kpm-detail-head{flex-direction:column}.kpm-detail-total{text-align:left}.table-actions{justify-content:flex-start}}

/* v3.6.1 Master Menu nutrition matrix */
.nutrition-section{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcfe}.nutrition-heading{font-size:13px;font-weight:800;margin-bottom:12px}.nutrition-box{border:1px solid #e3eaf2;border-radius:12px;background:#fff;padding:14px;margin-top:10px}.nutrition-title{font-size:12px;font-weight:750;margin-bottom:10px;color:#35506b}.nutrition-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.nutrition-grid>div{min-width:0}.nutrition-grid .full{grid-column:1/-1}.nutrition-grid label{display:block;font-size:10px;font-weight:700;color:#63758a;margin-bottom:5px}.nutrition-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.nutrition-preview-grid>div{padding:10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.nutrition-preview-grid b{font-size:11px}.nutrition-preview-grid .small{line-height:1.6}.section-label{font-size:14px;font-weight:800}@media(max-width:900px){.nutrition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.nutrition-grid,.nutrition-preview-grid{grid-template-columns:1fr}.nutrition-section{padding:12px}}
.route-editor{padding:16px;margin-bottom:12px}.route-editor-head,.route-card-head,.route-preview-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.route-editor-head{justify-content:space-between;margin-bottom:12px}.route-kpm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:240px;overflow:auto}.route-preview-row{padding:8px 0;border-bottom:1px solid #e8eef5}.portioning-route-stack{display:grid;gap:12px}.portioning-route-card{border:1px solid #e5ebf2;border-radius:12px;padding:14px;background:#fbfdff}.portioning-confirm{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:14px}.form-inline{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:800px){.route-kpm-grid{grid-template-columns:1fr}.portioning-confirm{align-items:flex-start;flex-direction:column}.route-preview-row{align-items:flex-start;flex-direction:column}}

/* ===== Workflow UX v4.1 ===== */
.schedule-source-card{margin-bottom:18px}.schedule-source-card .section-title{align-items:center}.menu-preview-card{border:1px solid #dfe8f1;background:#fff}.menu-preview-name{display:block;font-size:17px;line-height:1.35;margin:6px 0 12px}.menu-preview-composition{padding:11px 12px;border-radius:10px;background:#f7fafc;border:1px solid #e6edf4}.template-summary{border:1px solid #dfe8f1;border-radius:14px;background:#fbfdff;padding:14px}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.summary-strip span{padding:11px 12px;border:1px solid #e2eaf2;border-radius:10px;background:#fff;font-size:11px;color:#5d7187}.summary-strip b{display:block;font-size:18px;color:#102a47;margin-bottom:2px}.template-batch{border-top:1px solid #e8eef4;padding-top:14px;margin-top:14px}.template-batch-title{font-size:14px;font-weight:800;margin-bottom:10px}.template-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-route{border:1px solid #e2e9f0;border-radius:12px;background:#fff;padding:13px}.template-route ol{margin:8px 0 12px;padding-left:20px;max-height:160px;overflow:auto}.template-route li{font-size:11px;padding:3px 0;color:#334b63}.form-grid.compact{gap:8px}.portioning-work-grid{display:grid;grid-template-columns:1fr 1.6fr .8fr;gap:14px;margin-top:14px}.portioning-time-card,.portioning-doc-card,.portioning-summary-card{border:1px solid #e2e9f0;border-radius:14px;padding:15px;background:#fff}.input-button{display:flex;align-items:center;justify-content:flex-start;border:1px solid #d8e2ec;background:#fff;cursor:pointer;color:#1b3855;width:100%;font:inherit}.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.evidence-group{border:1px solid #e2e9f0;border-radius:12px;padding:10px;background:#fbfdff}.evidence-group-title{font-size:11px;font-weight:800;margin-bottom:8px}.evidence-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.evidence-slot{min-height:76px;border:1px dashed #cbd8e5;background:#fff;border-radius:10px;padding:9px;text-align:left;cursor:pointer;color:#173653}.evidence-slot span{display:block;font-size:16px;font-weight:800;color:#1c78b8}.evidence-slot b{display:block;font-size:10px;line-height:1.3}.evidence-slot small{display:block;font-size:9px;color:#718399;margin-top:3px}.evidence-slot.done{border-style:solid;border-color:#b9e3cc;background:#f5fcf7}.evidence-slot.done span{color:#1d9b61}.summary-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f5;font-size:11px}.summary-stat b{font-size:16px}.flow-note{margin-top:12px;padding:11px 13px;border-radius:10px;background:#f1f7fc;border:1px solid #d9e9f5;color:#49657f;font-size:11px}.notice.compact{margin:8px 0 10px;padding:9px 10px}.distribution-trip-stack,.washing-batch-stack{display:grid;gap:12px}.distribution-trip-card,.washing-batch-card{border:1px solid #e1e8ef;border-radius:15px;background:#fff;padding:16px}.trip-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.trip-head h3{font-size:15px;margin:3px 0}.trip-head p{font-size:11px}.trip-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.trip-meta-grid>div{padding:10px 11px;background:#f7fafc;border-radius:10px}.trip-meta-grid small{display:block;color:#72859a;font-size:9px;margin-bottom:3px}.trip-meta-grid b{display:block;font-size:11px}.distribution-flow{display:flex;align-items:center;gap:6px;margin:14px 0;overflow:auto}.distribution-flow span{white-space:nowrap;padding:7px 9px;border-radius:999px;background:#eef2f6;color:#718096;font-size:10px;font-weight:700}.distribution-flow span.done{background:#e8f8ef;color:#168451}.trip-actions{display:flex;gap:7px;flex-wrap:wrap}.washing-flow{display:flex;align-items:center;justify-content:center;gap:12px}.washing-flow i{color:#9aacbe}.washing-step{min-width:150px;text-align:center;padding:13px;border:1px solid #e0e8ef;border-radius:12px;background:#fbfdff}.washing-step span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin:0 auto 7px;background:#e8f2fb;color:#1c6aa4;font-weight:800}.washing-step b{display:block;font-size:12px}.washing-step small{display:block;font-size:9px;color:#74869a;margin-top:4px;line-height:1.4}.washing-stage-list{margin-top:14px;border-top:1px solid #e8edf2}.washing-stage-row{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f4}.stage-index{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#edf2f6;color:#6c7d8e;font-size:11px;font-weight:800}.washing-stage-row.current .stage-index{background:#eaf3ff;color:#1d6eb0}.washing-stage-row.done .stage-index{background:#e8f8ef;color:#188353}.stage-copy b{display:block;font-size:11px}.stage-copy small{display:block;color:#73859a;font-size:9px;margin-top:2px}.full{width:100%}@media(max-width:980px){.portioning-work-grid{grid-template-columns:1fr}.summary-strip,.trip-meta-grid{grid-template-columns:repeat(2,1fr)}.template-route-grid{grid-template-columns:1fr}.washing-flow{overflow:auto;justify-content:flex-start}.washing-step{min-width:135px}}@media(max-width:620px){.summary-strip,.trip-meta-grid,.evidence-grid{grid-template-columns:1fr}.evidence-pair{grid-template-columns:1fr 1fr}.trip-head{flex-direction:column}.distribution-flow{padding-bottom:2px}.trip-actions .btn{flex:1 1 auto}.washing-stage-row{grid-template-columns:30px 1fr}.washing-stage-row .btn{grid-column:2;justify-self:start}.template-route ol{max-height:130px}}

.branding-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.branding-preview-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfdff;text-align:center}.branding-preview-item .branding-preview-image{height:84px;display:grid;place-items:center;margin-bottom:8px}.branding-preview-item img{max-width:72px;max-height:72px;object-fit:contain}.branding-preview-item strong{display:block;font-size:12px}.branding-preview-item span{display:block;margin-top:4px;font-size:10px;color:var(--muted);line-height:1.4}.branding-bg-preview{min-height:140px;background-size:cover;background-position:center;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;color:#fff;font-weight:700;text-align:center;padding:20px;margin-bottom:16px;background-color:#123f70}.branding-bg-preview span{background:rgba(7,38,71,.55);padding:8px 12px;border-radius:10px}@media(max-width:900px){.branding-preview-grid{grid-template-columns:1fr}}

/* v4.1.6 LOGIN BRANDING & CONTRAST HARDENING */
.login-visual{isolation:isolate;background-color:#123f70}
.login-visual:before{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;background:linear-gradient(120deg,rgb(4 31 60 / var(--login-overlay-opacity,.30)) 0%,rgb(4 31 60 / .20) 48%,rgb(4 31 60 / .36) 100%);z-index:0;pointer-events:none}
.login-visual:after{width:420px;height:420px;left:auto;right:-210px;bottom:-250px;background:rgba(48,198,164,.10);filter:blur(1px);z-index:0;pointer-events:none}
.login-brand,.login-title,.login-subtitle,.process-list{z-index:2}
.brand-logo{width:auto;height:68px;max-width:min(300px,42vw);border-radius:0;object-fit:contain;background:transparent;padding:0;box-shadow:none;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
.brand-copy strong{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.42)}
.brand-copy span{color:#c9f5e4;text-shadow:0 1px 4px rgba(0,0,0,.40)}
.login-title{color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.52)}
.login-subtitle{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.45)}
.process-item{background:rgba(4,31,60,.70);border-color:rgba(255,255,255,.22);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.process-item strong{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.process-item span{color:#f1f7fd;text-shadow:0 1px 3px rgba(0,0,0,.38)}
.process-icon{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.login-user-icon{width:108px;height:108px;margin:0 auto 18px;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.login-card-logo{display:block;width:100%;height:100%;max-width:108px;max-height:108px;object-fit:contain;border-radius:0;background:transparent}
.login-card h1{color:#102a47}
@media(max-width:980px){.brand-logo{height:60px;max-width:240px}.login-title{margin-top:56px}}
@media(max-width:620px){.brand-logo{height:54px;max-width:200px}.login-brand{gap:10px}.brand-copy strong{font-size:18px}.brand-copy span{font-size:10px}.login-title{font-size:42px}.login-subtitle{font-size:16px}.process-item{background:rgba(4,31,60,.76)}}
/* Route template presentation refinement */
.route-template-table-wrap{overflow-x:auto}
.route-template-table{min-width:1080px}
.route-template-table th,.route-template-table td{vertical-align:middle}
.route-template-table td:nth-child(1){min-width:220px}
.route-template-table td:nth-child(2){min-width:110px}
.route-template-table td:nth-child(3){min-width:110px}
.route-template-table td:nth-child(4){min-width:135px}
.route-template-table td:nth-child(5){min-width:235px}
.route-template-table td:nth-child(6){min-width:90px;text-align:center}
.route-template-table .badge{white-space:nowrap}

.distribution-cluster{margin-top:14px}.distribution-cluster>.section-title{margin-bottom:12px}.distribution-cluster .distribution-trip-stack{gap:10px}.distribution-cluster .distribution-trip-card{background:#fbfdff}.distribution-trip-card .trip-head p{margin-top:6px}.distribution-trip-card .trip-meta-grid{grid-template-columns:repeat(6,1fr)}@media(max-width:1100px){.distribution-trip-card .trip-meta-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.distribution-trip-card .trip-meta-grid{grid-template-columns:repeat(2,1fr)}}

.distribution-evidence{margin-top:14px;border:1px solid #dfe8f0;border-radius:14px;background:#fbfdff;padding:13px}.evidence-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}.evidence-head b{display:block;font-size:12px}.evidence-head small{display:block;color:#718399;font-size:9px;margin-top:3px}.distribution-evidence .evidence-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.distribution-evidence .evidence-card{border:1px dashed #cbd8e5;border-radius:11px;background:#fff;padding:9px;min-height:125px}.distribution-evidence .evidence-card.has-evidence{border-style:solid;border-color:#b9e3cc}.evidence-card-head{display:flex;justify-content:space-between;gap:7px;align-items:center;margin-bottom:8px}.evidence-card-head strong{font-size:10px}.evidence-card .badge{font-size:8px}.evidence-thumb{display:flex;align-items:center;justify-content:center;height:72px;border-radius:8px;overflow:hidden;background:#f2f6f9;color:#1d638f;text-decoration:none;font-size:9px}.evidence-thumb img{width:100%;height:100%;object-fit:cover}.evidence-card>small{display:block;color:#718399;font-size:8px;line-height:1.35;margin-top:6px}.evidence-empty{height:72px;display:grid;place-items:center;text-align:center;color:#8a9aaa;font-size:9px;background:#f8fafc;border-radius:8px;padding:8px}@media(max-width:760px){.distribution-evidence .evidence-grid{grid-template-columns:1fr}}

/* v4.2.0 PROFESSIONAL DASHBOARD + WORKFLOW POLISH */
.dashboard-hero,.dashboard-grid,.dashboard-main-grid{color:#102a47}
.kpi{border:1px solid #dfe8f1;box-shadow:0 5px 18px rgba(16,42,71,.06);border-radius:16px;background:linear-gradient(180deg,#fff,#f9fbfd)}
.kpi-label{font-size:10px;letter-spacing:.04em;font-weight:800;color:#63778b;text-transform:uppercase}
.kpi-value{font-size:28px;line-height:1.05;font-weight:850;color:#102a47;letter-spacing:-.03em}
.kpi-note{font-size:9.5px;color:#75879a;margin-top:5px;line-height:1.4}
.kpi-icon{width:42px;height:42px;border-radius:13px;background:#edf5fb;color:#17679e;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #dceaf5}
.ops-card{border:1px solid #dfe8f1!important;box-shadow:0 5px 18px rgba(16,42,71,.055);border-radius:16px!important}
.ops-label{font-size:9px;letter-spacing:.06em;font-weight:800;color:#6b7d90}
.ops-value{font-size:25px;font-weight:850;color:#102a47}
.ops-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f0f5f9}
.status-row{border-bottom:1px solid #edf1f5;padding:9px 0;font-size:11px}.status-row b{font-weight:850;color:#102a47}
.activity-row{padding:10px 0;border-bottom:1px solid #edf1f5}.activity-icon{width:30px;height:30px;border-radius:9px;background:#eef5fa;color:#1b6c9f;display:grid;place-items:center}
.route-template-table th{background:#0b315d;color:#fff;font-size:10px}.route-template-table td{font-size:10px}
.pickup-kpm-box{display:grid;gap:7px;max-height:340px;overflow:auto;margin-top:10px}.pickup-kpm-row{margin:0}.evidence-upload-btn{width:100%;border:1px dashed #b8c9d8;cursor:pointer;color:#17679e;font-weight:800}.distribution-evidence{box-shadow:0 3px 12px rgba(16,42,71,.04)}
.admin-weekly-report-tools{border-left:4px solid #0b6fa4}.admin-weekly-report-tools h3{font-size:16px}.admin-weekly-report-tools .form-inline{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.user-menu{cursor:default}.user-copy strong{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:800px){.kpi-value{font-size:24px}.top-actions .top-date{display:none}.user-copy strong{max-width:130px}.admin-weekly-report-tools .form-inline .input{flex:1;min-width:130px}}

/* v4.3.0 Responsive & Mobile Hardening */
html,body{max-width:100%;overflow-x:hidden}*,*::before,*::after{box-sizing:border-box}img,video{max-width:100%;height:auto}.content{min-width:0}.layout,.shell{max-width:100vw}.table-wrap{max-width:100%;overscroll-behavior-x:contain}.btn,.input,.select,.textarea{min-height:44px}.btn-sm{min-height:40px}.icon-btn,.hamb,.eye-btn{min-width:44px;min-height:44px}.head-actions,.trip-actions,.form-actions,.filters{min-width:0}.form-grid{min-width:0}.field-group{min-width:0}.field-group label{overflow-wrap:anywhere}.page-head h1,.page-head p,.hero h2,.hero p,.card h3,.section-title h3,.ops-label,.kpi-label,.kpi-note,.trip-head h3,.trip-head p,.table td,.table th{overflow-wrap:anywhere}.mobile-menu-item{min-height:52px}.pickup-cluster-card{border:1px solid #e1e8ef;border-radius:12px;padding:12px;background:#fff;margin-top:8px}.pickup-cluster-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.pickup-cluster-stats{font-size:12px;font-weight:800;color:#27415f;margin-top:7px}.pickup-cluster-box{margin-top:10px}.distribution-evidence .evidence-card{min-width:0}.distribution-evidence .evidence-thumb{min-width:0}.modal{max-width:min(720px,calc(100vw - 24px));width:100%}.modal-body{min-width:0;overflow-x:hidden}.toast{max-width:calc(100vw - 24px)}
@media(max-width:1100px){.content{padding:24px 20px 90px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4,.attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.charts{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.trip-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.topbar{height:64px;padding:0 12px}.top-brand strong{font-size:13px}.top-brand span{display:none}.top-brand img{width:36px;height:36px}.top-actions{gap:4px}.top-actions .btn-light{display:none}.top-date{display:none}.user-copy{display:none}.avatar{width:36px;height:36px}.layout{display:block;min-height:calc(100vh - 64px)}.sidebar{position:fixed;left:-290px;top:64px;width:280px;height:calc(100vh - 64px);z-index:60;transition:left .2s ease}.sidebar.open{left:0}.hamb{display:grid;place-items:center}.content{padding:18px 12px 86px}.page-head{display:block;margin-bottom:16px}.page-head h1{font-size:23px;letter-spacing:-.5px}.page-head p{font-size:12px;line-height:1.5;margin-bottom:12px}.head-actions{display:grid;grid-template-columns:1fr;gap:7px}.hero{padding:20px 16px;border-radius:16px}.hero h2{font-size:22px}.hero p{font-size:12px;line-height:1.5}.hero .hero-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mini-stat{min-width:0;padding:9px 10px}.mini-stat strong{font-size:17px}.kpi-grid,.grid-4,.attention-grid,.charts,.quick-grid{grid-template-columns:1fr}.kpi{padding:15px;border-radius:14px}.kpi-value{font-size:25px}.ops-card{padding:15px}.section{margin-top:16px}.section-title{display:block}.section-title .head-actions{margin-top:10px}.table-wrap{overflow-x:auto}.table{min-width:720px}.toolbar{align-items:stretch}.search{min-width:0;width:100%}.filters{display:grid;grid-template-columns:1fr;gap:7px;width:100%}.form-grid{grid-template-columns:1fr!important}.form-grid .full{grid-column:auto!important}.form-inline{display:grid!important;grid-template-columns:1fr!important}.form-actions{display:grid!important;grid-template-columns:1fr!important}.form-actions .btn{width:100%}.trip-head{display:block}.trip-head>div{min-width:0}.trip-meta-grid{grid-template-columns:1fr 1fr!important}.distribution-flow{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.distribution-flow span{white-space:normal;text-align:center}.trip-actions{display:grid;grid-template-columns:1fr 1fr}.trip-actions .btn{width:100%}.distribution-evidence .evidence-grid{grid-template-columns:1fr}.washing-flow{display:grid;grid-template-columns:1fr;gap:6px}.washing-flow i{display:none}.washing-step{min-width:0}.washing-stage-row{grid-template-columns:30px minmax(0,1fr)}.washing-stage-row .btn{grid-column:2;width:100%}.evidence-grid,.evidence-pair{grid-template-columns:1fr!important}.route-template-table{min-width:860px}.template-route-grid{grid-template-columns:1fr!important}.summary-strip{grid-template-columns:1fr!important}.notification-btn{display:grid}.mobile-nav{display:grid;position:fixed;left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);z-index:55;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav .navbtn{margin:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:5px 2px;color:#62758b;font-size:9px}.mobile-nav .nav-icon{width:auto}.mobile-nav .navbtn.active{background:#eef5fc;color:#0d4c80;box-shadow:inset 0 3px #1b72b8}.login-page{min-height:100dvh}.login-visual{min-height:44dvh;padding:22px 18px}.login-panel{padding:14px}.login-card{width:100%;max-width:520px;padding:24px 18px}.login-title{font-size:34px}.login-subtitle{font-size:13px;line-height:1.5}.process-list{gap:7px}.process-item{padding:9px}.brand-logo{max-width:190px}.login-user-icon{width:78px;height:78px}.login-card-logo{max-width:64px;max-height:64px}}
@media(max-width:380px){.content{padding-left:10px;padding-right:10px}.hero .hero-mini{grid-template-columns:1fr}.kpi-value{font-size:23px}.trip-meta-grid,.trip-actions{grid-template-columns:1fr!important}.login-title{font-size:30px}.mobile-nav{height:62px}.mobile-nav .navbtn{font-size:8px}}

/* ===== v4.4.0 Professional Web UI / Responsive System ===== */
:root{--surface:#fff;--surface-soft:#f8fbff;--focus:0 0 0 4px rgba(25,118,210,.10);--radius-lg:20px}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.content{width:100%;max-width:1680px;margin:0 auto}.card,.kpi,.ops-card,.attention,.quick,.portioning-cluster,.washing-batch-card{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}.card:hover,.kpi:hover{box-shadow:0 12px 34px rgba(17,45,78,.08)}.btn:focus-visible,.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.icon-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.empty{min-height:120px;display:grid;place-items:center;align-content:center;gap:5px}.empty:before{content:'Belum ada aktivitas';font-weight:800;color:#27415f}.empty{font-size:12px}.empty:before{font-size:14px}.table-wrap{border-radius:12px;overscroll-behavior-inline:contain}.table-wrap .table{margin:0}.page-head{align-items:flex-start}.head-actions{max-width:100%;flex-wrap:wrap}.hero{overflow:hidden}.hero-mini{min-width:0}.kpi-head,.ops-top{min-width:0}.kpi-head>div,.ops-top>div{min-width:0}.user-copy{min-width:0}.user-copy strong{display:block}
/* Module dashboards stay visible with zero data: status framing, not blank screens. */
.section .empty{background:linear-gradient(180deg,#fbfdff,#f8fafc);border-color:#dce6f0}
/* Touch-first controls */
@media (pointer:coarse){.btn,.input,.select,.textarea{min-height:46px}.btn-sm{min-height:42px}.icon-btn,.hamb,.eye-btn,.modal-close{min-width:44px;min-height:44px}.evidence-slot{min-height:92px}}
@media (min-width:1440px){.content{padding-left:32px;padding-right:32px}.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.content{padding-left:20px;padding-right:20px}.layout{grid-template-columns:232px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.charts{grid-template-columns:1fr 1fr}.portioning-work-grid{grid-template-columns:1fr 1.4fr}.portioning-summary-card{grid-column:1/-1}.role-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.layout{display:block}.sidebar{position:fixed;left:-300px;top:64px;width:286px;height:calc(100dvh - 64px);box-shadow:18px 0 45px rgba(5,35,65,.18);transition:left .2s ease;z-index:80}.sidebar.open{left:0}.hamb{display:grid;place-items:center}.topbar{height:64px;padding:0 12px}.content{padding:18px 16px 88px}.top-date{display:none}.user-copy{display:none}.top-actions{gap:2px}.charts,.grid-4,.attention-grid,.quick-grid{grid-template-columns:1fr 1fr}.portioning-work-grid{grid-template-columns:1fr}.portioning-summary-card{grid-column:auto}.template-route-grid{grid-template-columns:1fr}.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.nutrition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modal{max-height:94dvh}.modal-body{max-height:calc(94dvh - 72px)}}
@media (max-width:600px){html,body{min-width:0}.content{padding:14px 12px 86px}.page-head h1{font-size:22px}.page-head p{font-size:12px}.head-actions{display:grid;grid-template-columns:1fr;gap:7px}.head-actions .btn{width:100%}.kpi-grid,.charts,.grid-4,.attention-grid,.quick-grid,.summary-strip,.nutrition-grid{grid-template-columns:1fr}.kpi{padding:14px}.kpi-value{font-size:24px}.section-title{gap:10px}.toolbar{display:block}.filters{display:grid;grid-template-columns:1fr!important}.filters>*{width:100%;min-width:0!important}.table-wrap{width:100%;overflow-x:auto}.table{min-width:680px}.table-wrap:after{content:'Geser tabel ke samping bila diperlukan';display:block;padding:6px 10px;font-size:10px;color:#7a8b9e;background:#f8fafc;border-top:1px solid #edf1f5}.form-grid{gap:12px}.form-actions{display:grid!important;grid-template-columns:1fr!important}.form-actions .btn{width:100%}.form-inline{display:grid!important;grid-template-columns:1fr!important}.modal-backdrop{padding:0;align-items:end}.modal{width:100%;max-width:none;margin:0;border-radius:20px 20px 0 0;max-height:94dvh}.modal-head{position:sticky;top:0;background:#fff;z-index:2}.modal-body{max-height:calc(94dvh - 70px);padding:16px}.mobile-nav{height:68px}.mobile-nav .navbtn{min-width:0}.distribution-flow{grid-template-columns:1fr}.trip-actions{grid-template-columns:1fr!important}.trip-meta-grid{grid-template-columns:1fr!important}.washing-stage-row{grid-template-columns:30px minmax(0,1fr);gap:8px}.washing-stage-row .btn{grid-column:2;width:100%}.evidence-grid,.evidence-pair{grid-template-columns:1fr!important}.login-page{display:flex;flex-direction:column;min-height:100dvh}.login-visual{min-height:auto;padding:18px 16px 20px}.login-brand{gap:10px}.brand-logo{width:58px;height:58px}.brand-copy strong{font-size:16px}.login-title{margin:28px 0 7px;font-size:30px;letter-spacing:-1px}.login-subtitle{font-size:12px}.process-list{display:none}.login-panel{padding:12px}.login-card{padding:22px 16px;border-radius:20px}.login-card h1{font-size:25px}.login-card .lead{font-size:12px;margin-bottom:20px}.role-matrix{grid-template-columns:1fr}.user-menu{gap:5px}.avatar{width:38px;height:38px}.notification-btn{display:grid}.top-brand img{width:34px;height:34px}.top-brand strong{font-size:12px}.top-brand span{display:none}}
@media (max-width:380px){.content{padding-left:10px;padding-right:10px}.page-head h1{font-size:21px}.hero{padding:16px}.hero h2{font-size:20px}.kpi-value{font-size:22px}.mobile-nav{height:64px}.login-title{font-size:27px}.login-card{padding:18px 14px}}

/* ===== v4.5.0 Professional Command Center UI ===== */
:root{--navy:#082d52;--navy-2:#0d4678;--ink:#102a43;--muted:#65798f;--surface:#fff;--surface-2:#f4f8fc;--line:#dce6f0;--brand:#1268a8;--brand-soft:#eaf4fc;--shadow:0 10px 30px rgba(16,42,67,.07)}
body{background:#f4f7fb;color:var(--ink)}
.app-shell .topbar{box-shadow:0 1px 0 rgba(10,45,78,.08);backdrop-filter:blur(12px);background:rgba(255,255,255,.96)}
.app-shell .top-brand img{object-fit:contain;border-radius:50%}.system-status{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #dcebdc;border-radius:999px;background:#f5fbf5;color:#3f6b49;font-size:11px;font-weight:800}.system-status .status-dot{width:7px;height:7px}
.app-shell .sidebar{background:linear-gradient(180deg,#082d52 0%,#06345e 55%,#052c50 100%);border-right:0}.app-shell .side-brand{padding:18px 16px 14px}.app-shell .side-brand .logo-row{align-items:center}.app-shell .side-brand img{width:44px;height:44px;background:#fff;border-radius:50%;padding:2px}.side-context{margin-top:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06)}.side-context span{display:block;font-size:9px;letter-spacing:.12em;color:#8dc6ec;font-weight:800}.side-context b{display:block;margin-top:3px;color:#fff;font-size:12px}.app-shell .side-title{margin-top:18px;color:#83b8dc}.app-shell .navbtn{border-radius:10px;margin:3px 8px;width:calc(100% - 16px);min-height:42px}.app-shell .navbtn:hover{background:rgba(255,255,255,.08)}.app-shell .navbtn.active{background:linear-gradient(90deg,#1a70ad,#195e95);box-shadow:inset 3px 0 #7bd1ff,0 5px 15px rgba(0,0,0,.08)}.app-shell .sidebar-help{margin:16px 12px;padding:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:12px;color:#b9d0e4}.app-shell .sidebar-help b{color:#fff}.sidebar-scrim{display:none}
.content{padding-top:28px}.page-head{margin-bottom:22px}.page-head h1{font-size:31px;font-weight:850;letter-spacing:-1.2px}.page-head p{max-width:720px}.eyebrow{letter-spacing:.13em;font-weight:850}
.command-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:18px;padding:28px;border-radius:24px;background:linear-gradient(135deg,#082d52 0%,#0d4f82 58%,#17699e 100%);color:#fff;box-shadow:0 18px 45px rgba(8,45,82,.18);position:relative;overflow:hidden}.command-hero:after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;right:-110px;top:-160px;background:rgba(255,255,255,.08)}.command-copy{position:relative;z-index:1}.command-copy .eyebrow{color:#8fd5ff}.command-copy h2{margin:9px 0 8px;font-size:30px;line-height:1.15;letter-spacing:-1px}.command-copy p{max-width:700px;color:#c8e0f3;line-height:1.65}.command-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;color:#d8ebf8;font-size:12px;font-weight:700}.command-meta span{display:flex;align-items:center;gap:7px}.command-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:stretch;position:relative;z-index:1}.summary-item{padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center}.summary-item small{font-size:10px;color:#a8cde6;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.summary-item strong{font-size:28px;line-height:1.1;margin:4px 0}.summary-item span{font-size:10px;color:#c4dcec}
.monitor-section{margin-top:28px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.section-heading h3{margin:3px 0 2px;font-size:20px;letter-spacing:-.4px}.section-heading p{margin:0;color:var(--muted);font-size:12px}.command-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.command-kpi{border:1px solid var(--line);box-shadow:var(--shadow);min-height:128px}.command-kpi:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(16,42,67,.1)}
.operations-lane{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.operation-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.operation-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}.operation-card.green{color:#23835e}.operation-card.blue{color:#2475b8}.operation-card.orange{color:#bd7a0a}.operation-card.purple{color:#7354ba}.operation-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#f1f6fb}.operation-main{min-width:0}.operation-main .ops-label{font-size:10px;letter-spacing:.1em;font-weight:850;color:#667b90}.operation-main strong{display:block;font-size:25px;line-height:1.05;color:#122b44;margin:4px 0}.operation-main span{font-size:10px;color:#72859a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.operation-state{text-align:right;min-width:52px}.operation-state b{display:block;font-size:9px;letter-spacing:.06em;color:#64778a}.operation-state span{font-size:12px;font-weight:800;color:#172f46}.operation-open{border:0;background:#eef5fa;color:#24648f;width:34px;height:34px;border-radius:10px;cursor:pointer;font-weight:900}.operation-open:hover{background:#dcecf8}.dashboard-split{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}.analytics-card{border:1px solid var(--line);box-shadow:var(--shadow);padding:20px}.card-head-modern{display:flex;justify-content:space-between;gap:12px;align-items:start}.card-head-modern h3{margin:4px 0}.card-head-modern p{margin:0;color:var(--muted);font-size:11px}.section-badge{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;padding:6px 9px;border-radius:999px;background:#edf5fb;color:#22618c}.modern-progress{height:10px;margin-top:18px;background:#edf2f6;border-radius:999px;overflow:hidden}.modern-progress span{display:block;height:100%;background:linear-gradient(90deg,#1f9d75,#3ba5d6);border-radius:inherit;transition:width .3s ease}.activity-card{padding:6px 18px}.command-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.command-quick-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;text-align:left;gap:12px;min-height:74px;padding:13px 15px}.command-quick-item>b{color:#2874a6;font-size:18px}.command-quick-item>span:nth-child(2)>span{display:block}.command-quick-item .quick-icon{width:38px;height:38px}.empty{border:1px dashed #d6e2ec;border-radius:12px;padding:20px!important;background:#f8fbfd!important;text-align:center}.empty strong{display:block;color:#2c4962}.empty span{display:block;color:#7b8fa2;font-size:11px}
@media(max-width:1100px){.command-hero{grid-template-columns:1fr}.command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-lane{grid-template-columns:repeat(2,minmax(0,1fr))}.command-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.system-status{display:none}.content{padding-top:18px}.command-hero{padding:20px;border-radius:19px}.command-copy h2{font-size:24px}.command-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.summary-item{padding:11px}.summary-item strong{font-size:21px}.operations-lane{grid-template-columns:1fr}.dashboard-split{grid-template-columns:1fr}.command-quick{grid-template-columns:1fr}.sidebar-scrim{position:fixed;inset:64px 0 0 0;background:rgba(2,25,45,.38);z-index:70}.sidebar-scrim.open{display:block}}
@media(max-width:600px){.command-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.command-kpis{grid-template-columns:1fr}.command-hero{padding:17px}.command-copy h2{font-size:22px}.command-copy p{font-size:11px}.command-meta{font-size:10px}.monitor-section{margin-top:22px}.section-heading h3{font-size:18px}.operation-card{grid-template-columns:auto minmax(0,1fr) auto;padding:14px}.operation-state{display:none}.analytics-card{padding:16px}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v4.9.18 — Jadwal Distribusi manual editor */
.manual-route-card{border:1px solid #dce6f1;background:#fbfdff;margin-top:12px;padding:16px;border-radius:14px}
.manual-route-card .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.manual-route-card .small.muted{display:block;margin-top:3px}
.manual-route-card select[multiple]{min-height:150px;line-height:1.45}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:640px){.head-actions{width:100%}.head-actions .btn{flex:1;min-width:0}.manual-route-card{padding:12px}.manual-route-card .section-title{align-items:flex-start}.manual-route-card .section-title .btn{white-space:nowrap}.manual-route-card select[multiple]{min-height:180px}}
/* v4.9.20 — clearer schedule structure/detail */
.schedule-table td{vertical-align:top}.schedule-table th:last-child,.schedule-table td:last-child{min-width:220px}.schedule-row-actions{justify-content:flex-start;align-items:center}.schedule-row-actions .btn{white-space:nowrap}.schedule-row-actions svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}.schedule-structure{display:grid;gap:3px;min-width:120px}.schedule-structure b{font-size:12px;color:#173a5e}.schedule-structure span{font-size:10px;color:#6b7f94}.table-actions{display:flex;gap:6px;flex-wrap:wrap}.schedule-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}.schedule-detail-head h3{margin:4px 0 3px;font-size:20px}.schedule-detail-head p{margin:0;color:var(--muted);font-size:12px}.schedule-detail-batch{margin-top:18px;border-top:1px solid #e4ebf2;padding-top:14px}.schedule-detail-batch-title{font-size:12px;font-weight:900;letter-spacing:.08em;color:#1b6da8;margin-bottom:10px}.schedule-detail-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.schedule-detail-route{border:1px solid #dfe8f1;border-radius:14px;padding:13px;background:#fbfdff}.schedule-detail-route-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.schedule-detail-route-head b{display:block;font-size:13px;color:#173a5e}.schedule-detail-route-head span:not(.badge){display:block;margin-top:3px;font-size:10px;color:#708398}.schedule-detail-assignment{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;padding:9px;background:#f3f7fb;border-radius:10px;font-size:10px;color:#65798d}.schedule-detail-route ol{margin:8px 0 0;padding-left:20px}.schedule-detail-route li{font-size:10px;color:#314d67;padding:3px 0}.import-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.import-check-list span{padding:9px 10px;border:1px solid #d9e9e3;background:#f5fbf8;border-radius:9px;color:#24604f;font-size:10px;font-weight:700}
@media(max-width:700px){.schedule-detail-head{display:block}.schedule-detail-head .badge{display:inline-block;margin-top:8px}.schedule-detail-route-grid{grid-template-columns:1fr}.schedule-detail-assignment{grid-template-columns:1fr}.import-check-list{grid-template-columns:1fr}.table-actions{display:grid;grid-template-columns:1fr}.table-actions .btn{width:100%}}

/* v4.9.22 — Template Jadwal actions & editor */
.route-template-actions{display:flex;gap:6px;align-items:center;justify-content:flex-start;white-space:nowrap}
.route-template-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px}
.route-template-actions .svg{width:14px;height:14px}
.route-template-table th:last-child,.route-template-table td:last-child{min-width:170px;white-space:nowrap}.route-template-table td:last-child{position:sticky;right:0;background:#fff;box-shadow:-6px 0 10px rgba(13,55,92,.05)}
.template-edit-table-wrap{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:12px}
.template-edit-table{min-width:920px;margin:0}
.template-edit-table th{position:sticky;top:0;z-index:2;background:#0b315d;color:#fff}
.template-edit-table td{vertical-align:middle}
.template-edit-table .input-sm,.template-edit-table .select.input-sm{min-height:36px;padding:7px 9px;font-size:12px}
.template-edit-table td:nth-child(1){width:85px}.template-edit-table td:nth-child(2){width:150px}.template-edit-table td:nth-child(3){width:90px}.template-edit-table td:nth-child(4){width:85px}.template-edit-table td:nth-child(5){width:180px}.template-edit-table td:nth-child(6){min-width:250px;font-weight:600}.template-edit-table td:last-child{width:50px;text-align:center}
.template-edit-add{margin-top:9px;align-items:center}
@media(max-width:760px){.route-template-actions{flex-direction:column;align-items:stretch}.route-template-actions .btn{width:100%}.template-edit-table-wrap{max-height:48vh}.template-edit-add{display:grid!important;grid-template-columns:1fr!important;gap:6px}.template-edit-add .btn{width:100%}}


/* v4.9.23 — permanent template deletion */
.template-delete-choice{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #e5edf5}
.template-delete-choice .btn{min-width:150px}
#templatePermanentDeletePanel{margin-top:16px}
#templatePermanentDeletePanel .check-card{margin-top:12px}
@media (max-width:640px){.template-delete-choice{display:grid;grid-template-columns:1fr}.template-delete-choice .btn{width:100%;min-width:0}.template-delete-choice .btn-danger{order:-1}}


/* SPPG Monitoring — Final UI/UX System v4.9.2
   Visual-only hardening layer. Business workflow/data contracts are untouched. */
:root{
  --ui-navy:#082f57;--ui-navy-2:#0d4778;--ui-blue:#1674b8;--ui-blue-soft:#edf6fd;
  --ui-green:#16845f;--ui-green-soft:#edf9f4;--ui-amber:#b87909;--ui-amber-soft:#fff7e8;
  --ui-red:#c83f45;--ui-red-soft:#fff1f2;--ui-purple:#7358b7;--ui-purple-soft:#f4f0fb;
  --ui-ink:#132d46;--ui-muted:#6b7f93;--ui-line:#dfe7ef;--ui-bg:#f5f8fb;--ui-card:#fff;
  --ui-radius:14px;--ui-shadow:0 5px 20px rgba(19,45,70,.06);--ui-shadow-lg:0 12px 32px rgba(19,45,70,.09);
}
html{background:var(--ui-bg);overflow-x:hidden}body{background:var(--ui-bg);color:var(--ui-ink);overflow-x:hidden}#app{min-width:0;overflow-x:hidden}.svg{width:19px;height:19px;flex:0 0 auto}
/* shell */
.topbar{height:68px;padding:0 24px;border-bottom:1px solid var(--ui-line);box-shadow:0 1px 8px rgba(19,45,70,.035);background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}
.top-left,.top-actions{min-width:0}.top-brand{gap:10px;min-width:0}.top-brand img{width:38px;height:38px;flex:0 0 38px}.top-brand strong{font-size:14px;font-weight:800;color:var(--ui-ink);white-space:nowrap}.top-brand span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}.system-status{height:30px;padding:0 10px;font-size:10px}.top-date{padding:8px 11px;font-size:11px;background:#fbfcfe}.avatar{width:34px;height:34px}.user-menu{gap:8px}.user-copy strong{font-size:11px}.user-copy span{font-size:9px}.top-actions{gap:8px}.top-actions .btn{padding:8px 11px;font-size:11px}.notification-btn{width:36px;height:36px}
.layout{grid-template-columns:246px minmax(0,1fr);min-height:calc(100vh - 68px)}.sidebar{top:68px;height:calc(100vh - 68px);padding:16px 12px;background:linear-gradient(180deg,#082f57 0%,#0a3965 52%,#072d52 100%)}
.side-brand{padding:8px 10px 14px;margin-bottom:10px}.side-brand img{width:42px;height:42px}.side-brand strong{font-size:12px}.side-brand span{font-size:9px}.side-context{margin-top:10px;padding:9px 10px}.side-context span{font-size:8px}.side-context b{font-size:11px}.side-title{margin:14px 8px 5px;font-size:9px}.navbtn{min-height:40px;padding:9px 10px;font-size:12px;border-radius:9px;margin:2px 6px;width:calc(100% - 12px)}.navbtn.active{box-shadow:inset 3px 0 #73c9f7}.sidebar-help{margin:14px 8px;padding:11px;font-size:10px}
.content{width:100%;max-width:1540px;padding:24px 28px 48px;margin:0 auto}.page-head{margin-bottom:18px;align-items:center}.page-head h1{font-size:28px;line-height:1.1;margin:3px 0 5px;letter-spacing:-.8px}.page-head p{font-size:12px;line-height:1.5}.eyebrow{font-size:9px;letter-spacing:.13em}.head-actions{gap:7px}.btn{min-height:38px;border-radius:9px;padding:9px 13px;font-size:12px}.btn-sm{min-height:34px;padding:7px 10px;font-size:11px}
/* shared cards */
.card,.kpi,.section,.analytics-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.role-card,.system-grid,.branding-preview-item{border-color:var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);background:var(--ui-card)}
.section{padding:18px}.section-title{margin-bottom:13px}.section-title h3,.section-heading h3{font-size:17px;color:var(--ui-ink);letter-spacing:-.25px}.section-title p,.section-heading p{font-size:11px;line-height:1.45}.toolbar{gap:8px;padding:10px 0}.input,.select,.textarea,.input-wrap input{border-color:#d5e0ea;border-radius:9px;background:#fff;color:var(--ui-ink);font-size:12px;min-height:40px}.textarea{min-height:100px;padding:11px}.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#62a6d5;box-shadow:0 0 0 3px rgba(22,116,184,.08)}.table-wrap{border:1px solid var(--ui-line);border-radius:12px;background:#fff}.table{font-size:11px}.table th{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#667b90;background:#f7fafd;border-bottom:1px solid var(--ui-line);padding:11px 10px}.table td{padding:11px 10px;border-bottom-color:#edf1f5;vertical-align:middle}.table tr:last-child td{border-bottom:0}.badge{border-radius:999px;padding:5px 8px;font-size:9px;font-weight:800;white-space:nowrap}.empty{padding:24px!important}.notice{border-radius:11px;padding:11px 13px;font-size:11px}.form{gap:12px}.field-group label,.field label{font-size:10px;margin-bottom:6px;color:#3a536c}.form-help{font-size:10px;line-height:1.5}.form-actions{gap:8px}
/* dashboard */
.command-hero{grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);gap:20px;padding:22px 24px;border-radius:18px;box-shadow:var(--ui-shadow-lg);min-height:196px}.command-copy h2{font-size:26px;line-height:1.15;margin:7px 0 7px;letter-spacing:-.8px}.command-copy p{font-size:12px;line-height:1.55;max-width:650px}.command-meta{margin-top:14px;font-size:10px;gap:8px 15px}.command-summary{gap:8px}.summary-item{padding:13px;border-radius:12px}.summary-item small{font-size:8px}.summary-item strong{font-size:24px;margin:3px 0}.summary-item span{font-size:9px}.monitor-section{margin-top:22px}.section-heading{margin-bottom:10px}.command-kpis{gap:11px}.command-kpi{min-height:112px;padding:15px}.kpi-head{gap:10px}.kpi-label{font-size:9px}.kpi-value{font-size:25px;letter-spacing:-.5px}.kpi-note{font-size:9px;line-height:1.35}.kpi-icon{width:36px;height:36px;border-radius:10px}.operations-lane{gap:10px}.operation-card{min-height:94px;padding:13px;border-radius:13px;gap:10px}.operation-icon{width:38px;height:38px;border-radius:10px}.operation-main strong{font-size:21px}.operation-main span{font-size:9px}.operation-state{min-width:45px}.operation-state b{font-size:8px}.operation-state span{font-size:11px}.operation-open{width:32px;height:32px}.dashboard-split{gap:11px}.analytics-card{padding:16px}.card-head-modern h3{font-size:16px}.card-head-modern p{font-size:10px}.section-badge{font-size:8px;padding:5px 8px}.stat-row{gap:8px}.mini-card{padding:10px;border-radius:10px}.mini-card small{font-size:8px}.mini-card strong{font-size:18px}.modern-progress{height:8px;margin-top:14px}.activity-card{padding:4px 14px}.activity-row{min-height:58px;padding:10px 0}.activity-icon{width:32px;height:32px}.activity-row strong{font-size:10px}.activity-row span,.activity-time{font-size:9px}.command-quick{gap:10px}.command-quick-item{min-height:66px;padding:11px 12px;border-radius:12px}.command-quick-item strong{font-size:11px}.command-quick-item>span:nth-child(2)>span{font-size:9px;color:var(--ui-muted)}.command-quick-item .quick-icon{width:34px;height:34px}
/* all operational modules */
.kpi-grid{gap:11px}.kpi-grid:not(.command-kpis) .kpi{min-height:104px;padding:14px}.portioning-work-grid{gap:11px}.portioning-time-card,.portioning-doc-card,.portioning-summary-card{padding:14px}.portioning-route-card,.distribution-cluster{border-radius:14px}.distribution-trip-card,.washing-batch-card{padding:14px}.trip-head h3{font-size:14px}.trip-head p{font-size:10px}.trip-meta-grid{gap:7px}.trip-meta-grid>div{padding:9px 10px}.trip-meta-grid small{font-size:8px}.trip-meta-grid b{font-size:10px}.distribution-flow{gap:5px}.distribution-flow span{font-size:9px;padding:6px 8px}.evidence-group{padding:9px}.evidence-group-title{font-size:10px}.evidence-slot{min-height:74px;padding:8px}.evidence-slot b{font-size:9px}.evidence-slot small{font-size:8px}.washing-flow{gap:8px}.washing-step{min-width:140px;padding:11px}.washing-stage-row{padding:10px 0}.stage-copy b{font-size:10px}.stage-copy small{font-size:8px}.stage-index{width:27px;height:27px}.mobile-menu-item{border-radius:10px}.role-matrix{gap:10px}.role-card{padding:14px}
/* login */
.login-page{background:#f3f7fb}.login-visual{padding:42px 6vw 38px}.login-panel{padding:30px}.login-card{max-width:470px;padding:30px;border-radius:20px}.login-card h1{font-size:27px}.login-card .lead{font-size:12px}.login-user-icon{width:88px;height:88px}.login-card-logo{max-width:88px;max-height:88px}.login-title{font-size:clamp(38px,4.4vw,58px);margin-top:62px}.login-subtitle{font-size:16px;max-width:620px}.process-list{margin-top:34px;gap:9px}.process-item{padding:11px 13px;border-radius:13px}
/* modal */
.modal-backdrop{background:rgba(6,27,49,.55);backdrop-filter:blur(3px)}.modal{border-radius:16px;box-shadow:0 24px 70px rgba(3,25,45,.22)}.modal-head{padding:15px 17px}.modal-head h3{font-size:16px}.modal-body{padding:17px}.modal-close{width:36px;height:36px;border-radius:9px}
/* mobile */
.mobile-nav{display:none}
@media(max-width:1180px){.layout{grid-template-columns:226px minmax(0,1fr)}.content{padding-left:22px;padding-right:22px}.command-hero{grid-template-columns:1fr}.command-summary{grid-template-columns:repeat(4,1fr)}.command-kpis{grid-template-columns:repeat(2,1fr)}.operations-lane{grid-template-columns:repeat(2,1fr)}.command-quick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .topbar{height:64px;padding:0 12px}.layout{display:block;min-height:calc(100vh - 64px)}
  .sidebar{position:fixed;left:-300px;top:64px;width:286px;height:calc(100dvh - 64px);z-index:90;transition:left .2s ease;box-shadow:18px 0 45px rgba(5,35,65,.18)}.sidebar.open{left:0}.sidebar-scrim{position:fixed;inset:64px 0 0;background:rgba(2,25,45,.42);z-index:80}.sidebar-scrim.open{display:block}.hamb{display:grid;place-items:center;min-width:44px;min-height:44px}.top-brand img{width:34px;height:34px}.top-brand strong{font-size:12px}.top-brand span{display:none}.system-status{display:none}.top-date{display:none}.user-copy{display:none}.content{padding:18px 16px 28px}.page-head{display:flex;align-items:flex-start;flex-direction:column;gap:10px}.page-head h1{font-size:24px}.head-actions{width:100%}.head-actions .btn{width:auto}.command-hero{padding:18px;border-radius:16px}.command-copy h2{font-size:23px}.command-copy p{font-size:11px}.command-summary{grid-template-columns:repeat(2,1fr);gap:8px}.summary-item{padding:11px}.summary-item strong{font-size:20px}.command-kpis{grid-template-columns:repeat(2,1fr)}.operations-lane{grid-template-columns:1fr}.dashboard-split{grid-template-columns:1fr}.command-quick{grid-template-columns:1fr}.mobile-nav{display:grid;position:fixed;left:0;right:0;bottom:0;height:62px;background:rgba(255,255,255,.97);border-top:1px solid var(--ui-line);grid-template-columns:repeat(5,1fr);z-index:75;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(12px)}.mobile-nav .navbtn{margin:0;width:auto;min-height:62px;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;font-size:9px;color:#64778a}.mobile-nav .navbtn.active{background:#eef6fd;color:#0d4c80;box-shadow:inset 0 3px #1b72b8}.mobile-nav .nav-icon{width:auto}.mobile-nav+#x{display:none}.kpi-grid:not(.command-kpis){grid-template-columns:repeat(2,1fr)}.table-wrap{width:100%;overflow-x:auto}.table{min-width:680px}.form-grid{grid-template-columns:1fr!important}.form-grid .full{grid-column:auto!important}.form-inline{grid-template-columns:1fr!important}.form-actions{grid-template-columns:1fr!important}.form-actions .btn{width:100%}.filters{grid-template-columns:1fr!important}.trip-meta-grid{grid-template-columns:repeat(2,1fr)}.distribution-flow{display:flex;overflow-x:auto}.trip-actions{display:grid;grid-template-columns:1fr 1fr}.trip-actions .btn{width:100%}.washing-flow{justify-content:flex-start;overflow-x:auto}.modal-backdrop{padding:0;align-items:flex-end}.modal{width:100%;max-width:none;margin:0;border-radius:18px 18px 0 0;max-height:94dvh}.modal-body{max-height:calc(94dvh - 68px);overflow:auto}.modal-head{position:sticky;top:0;z-index:2;background:#fff}.evidence-grid{grid-template-columns:1fr!important}.evidence-pair{grid-template-columns:1fr 1fr}.login-page{display:flex;flex-direction:column;min-height:100dvh}.login-visual{min-height:auto;padding:20px 16px 18px}.login-title{font-size:32px;margin-top:30px}.login-subtitle{font-size:12px}.process-list{display:none}.login-panel{padding:12px}.login-card{padding:24px 17px}.login-user-icon{width:76px;height:76px}.login-card-logo{max-width:76px;max-height:76px}
}
@media(max-width:520px){html,body,#app{width:100%;max-width:100%;overflow-x:hidden}.content{padding:14px 12px 78px}.page-head h1{font-size:22px}.page-head p{font-size:11px}.head-actions{display:grid;grid-template-columns:1fr}.head-actions .btn{width:100%}.command-hero{padding:16px}.command-copy h2{font-size:21px}.command-meta{font-size:9px}.command-summary{grid-template-columns:1fr 1fr}.command-kpis{grid-template-columns:1fr}.kpi-grid:not(.command-kpis){grid-template-columns:1fr}.kpi-grid:not(.command-kpis) .kpi{min-height:88px}.kpi-value{font-size:23px}.operation-card{min-height:82px}.operation-state{display:none}.operation-main strong{font-size:20px}.analytics-card{padding:14px}.stat-row{grid-template-columns:1fr 1fr}.section{padding:14px}.section-title h3,.section-heading h3{font-size:16px}.table{min-width:640px}.trip-meta-grid{grid-template-columns:1fr}.trip-actions{grid-template-columns:1fr}.distribution-flow span{flex:0 0 auto}.evidence-pair{grid-template-columns:1fr}.washing-stage-row{grid-template-columns:30px minmax(0,1fr);gap:8px}.washing-stage-row .btn{grid-column:2;width:100%}.summary-strip{grid-template-columns:1fr!important}.nutrition-grid{grid-template-columns:1fr 1fr!important}.role-matrix{grid-template-columns:1fr}.login-title{font-size:28px}.login-card{padding:20px 14px}.top-brand{min-width:0}.top-brand strong{max-width:180px;overflow:hidden;text-overflow:ellipsis}.top-actions{flex:0 0 auto}.notification-btn{width:40px;height:40px}.avatar{width:34px;height:34px}
}
@media(max-width:360px){.content{padding-left:10px;padding-right:10px}.command-summary{gap:6px}.summary-item{padding:9px}.summary-item strong{font-size:18px}.command-copy h2{font-size:20px}.kpi-value{font-size:22px}.mobile-nav{height:60px}.mobile-nav .navbtn{min-height:60px;font-size:8px}.mobile-nav .svg{width:17px;height:17px}}
@media(min-width:1600px){.content{max-width:1500px;padding-left:30px;padding-right:30px}.command-hero{min-height:184px}}
@media(pointer:coarse){.btn,.input,.select,.textarea{min-height:44px}.btn-sm{min-height:42px}.icon-btn,.hamb,.eye-btn,.modal-close,.operation-open{min-width:44px;min-height:44px}}

/* ===== v4.7.0 FINAL UI/UX — operational command center ===== */
:root{
  --ui-bg:#f6f8fb;--ui-surface:#fff;--ui-ink:#17324d;--ui-muted:#6c8094;--ui-line:#e1e8ef;
  --ui-brand:#0b4778;--ui-brand-2:#126aa3;--ui-soft:#eef5fa;--ui-radius:12px;
  --ui-shadow:0 6px 20px rgba(19,45,70,.055);--ui-shadow-hover:0 12px 28px rgba(19,45,70,.09)
}
html,body{background:var(--ui-bg)}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}.content{max-width:1680px;padding:24px 30px 56px}
.page-head{padding-bottom:4px}.page-head h1{font-weight:800;font-size:30px;line-height:1.12;font-weight:800;color:#12304b}.page-head p{font-size:12px;color:#718498;max-width:760px}
.btn{min-height:40px;border-radius:10px;font-weight:700}.btn-primary{box-shadow:0 4px 12px rgba(18,106,163,.14)}.btn-danger{background:#c83f45;color:#fff;border-color:#c83f45}
.card,.section,.kpi,.distribution-trip-card,.washing-batch-card,.portioning-time-card,.portioning-doc-card,.portioning-summary-card{box-shadow:var(--ui-shadow);border:1px solid var(--ui-line)}
.card:hover,.kpi:hover,.distribution-trip-card:hover,.washing-batch-card:hover{box-shadow:var(--ui-shadow-hover)}
/* dashboard: compact, information-first */
.command-hero{grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr);min-height:0;padding:22px 24px;border-radius:18px;box-shadow:0 10px 28px rgba(8,45,82,.13)}
.command-copy h2{font-size:25px;max-width:720px}.command-copy p{max-width:760px;font-size:12px}.command-meta{margin-top:13px}
.command-summary{align-self:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.summary-item{padding:12px;border-radius:11px}.summary-item strong{font-size:23px}
.monitor-section{margin-top:24px}.section-heading h3{font-size:18px}.section-heading p{font-size:11px}
.command-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.command-kpi{min-height:106px;padding:14px}.command-kpi .kpi-value{font-size:23px}.command-kpi .kpi-note{font-size:9px}
.operations-lane{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.operation-card{min-height:86px;padding:12px 13px;border-radius:13px}.operation-main strong{font-size:21px}.operation-icon{width:38px;height:38px}.operation-open{width:32px;height:32px}
.dashboard-split{gap:10px}.analytics-card{padding:16px}.stat-row{gap:7px}.mini-card{padding:9px}.mini-card strong{font-size:17px}.modern-progress{height:8px;margin-top:13px}
.command-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.command-quick-item{min-height:62px;padding:10px 12px}.command-quick-item .quick-icon{width:34px;height:34px}
/* operational pages */
.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.kpi-grid .kpi{min-height:100px;padding:13px}.kpi-grid .kpi-value{font-size:23px}
.distribution-trip-stack,.washing-batch-stack{display:grid;gap:12px}.distribution-trip-card,.washing-batch-card{border-radius:13px;padding:14px}.trip-head{gap:12px}.trip-head h3{font-size:15px}.trip-meta-grid{gap:7px}.trip-meta-grid>div{border:1px solid #e7edf3;border-radius:9px;background:#fbfcfe}.distribution-flow{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.distribution-flow span{border:1px solid #dfe8ef;border-radius:999px;background:#f8fafc;color:#6b8093;padding:6px 9px}.distribution-flow span.done{background:#edf9f4;border-color:#bde4d2;color:#167354}.trip-actions{display:flex;flex-wrap:wrap;gap:7px}.trip-actions .btn{min-height:36px}
.distribution-evidence{margin-top:12px;padding-top:12px;border-top:1px solid #e6edf3}.evidence-grid{gap:8px}.evidence-card{border:1px solid #e1e8ef;border-radius:10px;background:#fbfcfd;padding:9px}.evidence-thumb{display:block;overflow:hidden;border-radius:8px;background:#edf2f6;aspect-ratio:4/3}.evidence-thumb img{width:100%;height:100%;object-fit:cover}
.washing-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.washing-flow>i{display:none}.washing-step{min-width:0;border:1px solid #e0e8ef;border-radius:11px;background:#fbfcfe;padding:12px}.washing-step span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#eaf4fb;color:#176b9f;font-weight:800}.washing-stage-row{border-bottom:1px solid #edf1f5;padding:12px 0}.washing-stage-row:last-child{border-bottom:0}
/* documentation */
.doc-filters{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(130px,1fr)) auto auto auto;gap:7px;align-items:center}.doc-filters .btn{min-height:40px}
/* forms/modals */
.modal{width:min(680px,calc(100vw - 28px));max-height:min(88dvh,760px);overflow:auto}.readonly-summary{padding:11px 12px;border:1px solid var(--ui-line);border-radius:9px;background:#f8fafc}.readonly-summary b,.readonly-summary span{display:block}.readonly-summary span{font-size:11px;color:var(--ui-muted);margin-top:3px}.notice-danger{background:#fff5f5;border:1px solid #f0c9cc;color:#7d3035}
/* zero-data states */
.empty{min-height:110px;display:grid;place-content:center;gap:4px}.empty strong{font-size:13px}.empty span{font-size:11px}
/* mobile */
@media(max-width:1100px){.content{padding-left:22px;padding-right:22px}.command-hero{grid-template-columns:1fr}.command-kpis,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-lane{grid-template-columns:repeat(2,minmax(0,1fr))}.command-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-filters{grid-template-columns:1fr 1fr}.doc-filters .search{grid-column:1/-1}}
@media(max-width:820px){
  .content{padding:18px 16px 78px}.page-head h1{font-size:24px}.page-head p{font-size:11px}
  .command-hero{padding:18px;border-radius:15px}.command-copy h2{font-size:22px}.command-copy p{font-size:11px}.command-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-item strong{font-size:20px}
  .command-kpis,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-lane,.command-quick{grid-template-columns:1fr}.dashboard-split{grid-template-columns:1fr}
  .operations-lane .operation-card{min-height:78px}.operation-state{display:none}.operation-main span{white-space:normal}.operation-open{margin-left:auto}
  .trip-actions{display:grid;grid-template-columns:1fr 1fr}.trip-actions .btn{width:100%}.trip-meta-grid{grid-template-columns:1fr 1fr!important}.distribution-flow{display:grid;grid-template-columns:1fr 1fr}.washing-flow{grid-template-columns:1fr 1fr}.doc-filters{grid-template-columns:1fr}.doc-filters .search{grid-column:auto}.doc-filters .btn{width:100%}
}
@media(max-width:480px){
  .content{padding:14px 12px 76px}.page-head h1{font-size:22px}.page-head p{line-height:1.45}.head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.head-actions .btn{width:100%}
  .command-hero{padding:15px}.command-copy h2{font-size:20px}.command-meta{gap:7px;line-height:1.4}.command-summary{gap:6px}.summary-item{padding:9px}.summary-item strong{font-size:19px}
  .command-kpis,.kpi-grid{grid-template-columns:1fr}.command-kpi,.kpi-grid .kpi{min-height:88px}.command-kpi .kpi-value,.kpi-grid .kpi-value{font-size:22px}
  .operation-card{padding:12px}.operation-icon{width:36px;height:36px}.operation-main strong{font-size:20px}.analytics-card{padding:13px}.stat-row{grid-template-columns:1fr 1fr}.mini-card{min-width:0}
  .trip-meta-grid{grid-template-columns:1fr!important}.trip-actions{grid-template-columns:1fr}.distribution-flow{grid-template-columns:1fr}.washing-flow{grid-template-columns:1fr}.washing-stage-row{grid-template-columns:30px minmax(0,1fr);gap:8px}.washing-stage-row .btn{grid-column:2;width:100%}
  .modal{width:calc(100vw - 20px);max-height:90dvh;border-radius:16px}.modal-body{padding:14px}.form-actions{display:grid;grid-template-columns:1fr 1fr}.form-actions .btn{width:100%}.input,.select,.textarea{min-height:44px}
}
@media(max-width:360px){.content{padding-left:9px;padding-right:9px}.topbar{padding:0 8px}.top-brand strong{font-size:11px}.command-copy h2{font-size:19px}.summary-item span{font-size:8px}.summary-item strong{font-size:18px}.command-kpi{padding:12px}.head-actions{grid-template-columns:1fr}.form-actions{grid-template-columns:1fr}}
/* v4.7.1 corrective operational workspace */
.workflow-rail{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px;margin-top:14px}
.workflow-node{min-width:0;padding:13px 12px;border:1px solid var(--ui-line);border-radius:12px;background:#fbfdff;display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:3px;align-items:center}
.workflow-node b{grid-row:span 2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eaf3fa;color:var(--ui-blue);font-size:11px}.workflow-node strong{font-size:11px}.workflow-node span{font-size:8px;color:var(--ui-muted);line-height:1.35}.workflow-node.current{border-color:#b8d7ed;background:#f4faff}.workflow-rail>i{display:grid;place-items:center;color:#9bb0c2;font-style:normal;font-size:15px}.empty-evidence-grid{margin-top:14px}.evidence-disabled{opacity:.82}.evidence-empty{min-height:56px;display:grid;place-items:center;text-align:center;padding:10px;border:1px dashed #d6e1ea;border-radius:9px;background:#fafcfe;color:#7a8d9e;font-size:9px;line-height:1.45}.empty-workspace{display:grid;gap:14px}.empty-workflow-note{padding:14px;border:1px solid #dfe7ef;border-radius:12px;background:#f8fbfe;display:flex;flex-direction:column;gap:4px}.empty-workflow-note strong{font-size:12px}.empty-workflow-note span{font-size:10px;color:var(--ui-muted);line-height:1.5}.washing-evidence-preview{margin-top:2px}
@media(max-width:980px){.workflow-rail{grid-template-columns:repeat(2,minmax(0,1fr));}.workflow-rail>i{display:none}.workflow-node{min-height:68px}}
@media(max-width:560px){.workflow-rail{grid-template-columns:1fr}.workflow-node{grid-template-columns:auto 1fr}.empty-evidence-grid{grid-template-columns:1fr!important}.evidence-empty{min-height:48px}.section{padding:14px}.page-head{align-items:flex-start}.page-head h1{font-size:24px}}
/* v4.7.1 corrective operational workspace */
.workflow-rail{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px;margin-top:14px}.workflow-node{min-width:0;padding:13px 12px;border:1px solid var(--ui-line);border-radius:12px;background:#fbfdff;display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:3px;align-items:center}.workflow-node b{grid-row:span 2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eaf3fa;color:var(--ui-blue);font-size:11px}.workflow-node strong{font-size:11px}.workflow-node span{font-size:8px;color:var(--ui-muted);line-height:1.35}.workflow-node.current{border-color:#b8d7ed;background:#f4faff}.workflow-rail>i{display:grid;place-items:center;color:#9bb0c2;font-style:normal;font-size:15px}.evidence-disabled{opacity:.82}.evidence-empty{min-height:56px;display:grid;place-items:center;text-align:center;padding:10px;border:1px dashed #d6e1ea;border-radius:9px;background:#fafcfe;color:#7a8d9e;font-size:9px;line-height:1.45}.empty-workspace{display:grid;gap:14px}.empty-workflow-note{padding:14px;border:1px solid #dfe7ef;border-radius:12px;background:#f8fbfe;display:flex;flex-direction:column;gap:4px}.empty-workflow-note strong{font-size:12px}.empty-workflow-note span{font-size:10px;color:var(--ui-muted);line-height:1.5}.washing-evidence-preview{margin-top:2px}@media(max-width:980px){.workflow-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-rail>i{display:none}.workflow-node{min-height:68px}}@media(max-width:560px){.workflow-rail{grid-template-columns:1fr}.evidence-empty{min-height:48px}.section{padding:14px}.page-head h1{font-size:24px}}

/* ===== v4.8.0 PROFESSIONAL WEB UI SYSTEM ===== */
:root{
  --ui-ink:#16324b;--ui-ink-2:#294963;--ui-muted:#6d8296;--ui-subtle:#8a9bad;
  --ui-brand:#1269a8;--ui-brand-2:#0a4778;--ui-brand-soft:#eaf4fb;
  --ui-bg:#f6f8fb;--ui-card:#ffffff;--ui-line:#dce5ee;--ui-line-2:#e9eef4;
  --ui-success:#16835f;--ui-success-soft:#edf8f3;--ui-warning:#b87308;--ui-warning-soft:#fff7e8;
  --ui-danger:#c63d47;--ui-danger-soft:#fff1f2;--ui-purple:#6f57b8;--ui-purple-soft:#f3f0fb;
  --ui-radius:12px;--ui-radius-lg:16px;--ui-shadow:0 7px 24px rgba(22,50,75,.055);--ui-shadow-hover:0 14px 34px rgba(22,50,75,.10);
}
html,body,#app{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ui-ink);background:var(--ui-bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*:before,*:after{box-sizing:border-box;min-width:0}
button,input,select,textarea{font-family:inherit}
button{font-weight:600}
/* typography hierarchy */
.page-head h1,.command-copy h2,.section-heading h3,.section-title h3,.card-head-modern h3,.trip-head h3,.menu-preview-name{color:var(--ui-ink);font-weight:700}
.page-head h1{font-weight:800;font-size:30px;line-height:1.12;letter-spacing:-.7px}
.page-head p,.section-heading p,.section-title p,.card-head-modern p{color:var(--ui-muted);font-size:12px;line-height:1.55}
.eyebrow{color:#1872b5;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.small{font-size:12px;line-height:1.45}.muted{color:var(--ui-muted)!important}
/* app shell / scroll ownership */
.topbar{height:70px;padding:0 22px;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--ui-line);box-shadow:0 1px 0 rgba(22,50,75,.04);backdrop-filter:blur(14px)}
.layout{grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 70px)}
.sidebar{top:70px;height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;background:linear-gradient(180deg,#082f57 0%,#0a3a66 55%,#082d52 100%)}
.content{min-width:0;width:100%;max-width:1600px;padding:26px 30px 52px;margin:0 auto;overflow:visible}
.page-head{min-width:0;margin-bottom:20px}
.page-head>div:first-child{min-width:0}.head-actions{min-width:0}
/* buttons */
.btn{min-height:38px;border-radius:9px;padding:9px 13px;font-size:12px;line-height:1.2;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;box-shadow:none}
.btn-primary{background:#0d5f98;color:#fff;border-color:#0d5f98}.btn-primary:hover{background:#0a4f80;border-color:#0a4f80;transform:translateY(-1px)}
.btn-light{background:#fff;color:#294963;border-color:#d6e1eb}.btn-light:hover{background:#f5f8fb;border-color:#c7d5e1}
.btn-green{background:#16835f;color:#fff}.btn-danger{background:#fff3f3;color:#b5313a;border-color:#ffd6d8}.btn-ghost{color:#48647d}
/* cards and sections */
.card,.section,.kpi,.analytics-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.role-card,.system-grid,.branding-preview-item{background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow)}
.card:hover,.kpi:hover,.analytics-card:hover{box-shadow:var(--ui-shadow-hover)}
.section,.analytics-card{padding:18px}.section-title{margin-bottom:14px}.section-title h3,.section-heading h3{font-size:18px;line-height:1.25;letter-spacing:-.25px}.section-title p{margin-top:4px}
/* dashboard contrast and hierarchy */
.command-hero{grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:18px;padding:24px 26px;min-height:0;border-radius:18px;background:linear-gradient(135deg,#082f57 0%,#0c4e80 60%,#166a9e 100%);box-shadow:0 14px 34px rgba(8,47,87,.15)}
.command-copy{color:#fff}.command-copy .eyebrow{color:#a8dcfb}.command-copy h2{color:#fff!important;font-size:27px;line-height:1.16;margin:7px 0 8px;letter-spacing:-.75px}.command-copy p{color:#d5e8f7!important;font-size:12px;line-height:1.6;max-width:700px}.command-meta{color:#e2f0fa!important;font-size:11px}.command-summary{gap:9px}.summary-item{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);padding:13px}.summary-item small{color:#b8d8ec;font-size:9px}.summary-item strong{color:#fff;font-size:25px}.summary-item span{color:#d3e6f3;font-size:9px}
.monitor-section{margin-top:24px}.section-heading{margin-bottom:10px}.section-heading h3{color:var(--ui-ink)}
.command-kpis{gap:12px}.command-kpi{min-height:116px;padding:15px}.command-kpi .kpi-label{color:#60778d;font-weight:700;font-size:10px;letter-spacing:.03em}.command-kpi .kpi-value{color:#12304b;font-size:26px;font-weight:700;line-height:1.05;margin-top:7px}.command-kpi .kpi-note{color:#8293a4;font-size:10px;line-height:1.35}.kpi-icon{width:36px;height:36px;border-radius:10px}
.operations-lane{gap:12px}.operation-card{min-height:96px;padding:14px;border-radius:14px}.operation-main .ops-label{color:#6b8195;font-size:9px;font-weight:800;letter-spacing:.11em}.operation-main strong{color:#16324b;font-size:23px;font-weight:700}.operation-main span{color:#74889a;font-size:10px}.operation-state b{color:#7b8d9d;font-size:8px}.operation-state span{color:#28465e;font-size:11px}
.analytics-card{padding:17px}.card-head-modern h3{color:#18364f;font-size:17px}.card-head-modern p{color:#74879a}.section-badge{background:#eef5fa;color:#27638d}
/* workflow modules */
.portioning-work-grid,.evidence-grid,.evidence-pair,.trip-meta-grid,.washing-flow,.washing-stage-row,.nutrition-grid,.form-grid,.form-inline{min-width:0}
.evidence-slot,.evidence-group,.portioning-doc-card,.portioning-time-card,.portioning-summary-card{min-width:0}
.evidence-slot{background:#fbfdff;border:1px dashed #cbdbe8;color:#38546c;border-radius:10px}.evidence-slot b{color:#2d4b63;font-weight:700}.evidence-slot small{color:#7a8e9f}
.flow-note,.notice,.preview-note{color:#536d84;font-size:11px;line-height:1.5}
/* forms */
.field-group label,.field label{color:#38536b;font-size:11px;font-weight:700;line-height:1.3}.field-group label .required{color:var(--ui-danger)}
.input,.select,.textarea,.input-wrap input{width:100%;min-height:40px;border:1px solid #d3dfe9;border-radius:9px;background:#fff;color:#18364f;font-size:12px;line-height:1.35;outline:none}.input::placeholder,.textarea::placeholder{color:#9aa9b7}.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#4d98c9;box-shadow:0 0 0 3px rgba(18,105,168,.10)}
.form-help{color:#7b8fa1!important;font-size:10px;line-height:1.5}.form-actions{gap:8px}
/* table scroll isolation */
.table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--ui-line);border-radius:11px;background:#fff;scrollbar-width:thin}
.table-wrap:focus-within{outline:2px solid rgba(18,105,168,.15);outline-offset:1px}.table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.table th{color:#60778c;background:#f6f9fc;font-weight:700;font-size:9px;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}.table td{color:#29465e}.table td b{color:#18364f;font-weight:700}.table th,.table td{padding:11px 10px}.table tr:hover td{background:#fbfdff}.table code{color:#255878;background:#edf5fa;padding:3px 6px;border-radius:6px}
/* modal */
.modal-backdrop{z-index:200;background:rgba(6,27,49,.58);backdrop-filter:blur(4px)}.modal{width:min(720px,calc(100vw - 32px));max-width:720px;border:1px solid #dbe5ee;border-radius:16px;background:#fff;box-shadow:0 28px 80px rgba(3,25,45,.25);overflow:hidden}.modal-head{padding:15px 18px;border-bottom:1px solid #e8eef4}.modal-head h3{color:#17354e;font-size:17px;font-weight:700}.modal-close{color:#526b81;background:#f3f7fa;border:1px solid #dbe5ed}.modal-body{color:#29465e}
/* Master Menu audience selector */
.menu-form-modern{gap:15px}.audience-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.audience-option{display:flex!important;align-items:flex-start;gap:10px;padding:13px;border:1px solid #d7e2eb;border-radius:12px;background:#fbfdff;cursor:pointer;transition:.16s ease}.audience-option:hover{border-color:#8bb8d5;background:#f3f9fd}.audience-option:has(input:checked){border-color:#3d93c6;background:#eef7fc;box-shadow:0 0 0 2px rgba(18,105,168,.08)}.audience-option input{margin-top:3px;accent-color:#1269a8}.audience-option span{display:flex;flex-direction:column;gap:3px}.audience-option b{color:#21425b;font-size:12px;font-weight:700}.audience-option small{color:#74899b;font-size:10px;line-height:1.45}.nutrition-section{border:1px solid #dce6ee;border-radius:12px;background:#fbfdff;padding:14px}.nutrition-heading{font-weight:700;color:#1c4562;font-size:13px;margin-bottom:10px}.menu-nutrition-target.hidden{display:none!important}.audience-badge{background:#eef6fb;color:#2b6389}
/* mobile navigation and interaction */
.mobile-nav{z-index:120;border-top:1px solid #d9e4ed;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);box-shadow:0 -6px 22px rgba(22,50,75,.08)}.mobile-nav .navbtn{color:#61778c}.mobile-nav .navbtn.active{color:#1269a8;background:#edf6fc}.sidebar-scrim{z-index:90}
@media(max-width:1100px){.content{padding-left:22px;padding-right:22px}.command-hero{grid-template-columns:1fr}.command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-lane{grid-template-columns:repeat(2,minmax(0,1fr))}.audience-choice{grid-template-columns:1fr}}
@media(max-width:820px){
  .topbar{height:64px;padding:0 12px}.layout{display:block;min-height:calc(100dvh - 64px)}.sidebar{top:64px;height:calc(100dvh - 64px);left:-300px;position:fixed;width:286px;z-index:110}.sidebar.open{left:0}.sidebar-scrim{inset:64px 0 0;position:fixed}.content{padding:18px 16px 88px}.page-head{align-items:flex-start;flex-direction:column;gap:10px}.page-head h1{font-size:25px}.head-actions{width:100%;display:flex}.head-actions .btn{min-height:42px}.command-hero{padding:20px;border-radius:16px}.command-copy h2{font-size:24px}.command-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-lane{grid-template-columns:1fr}.dashboard-split{grid-template-columns:1fr}.command-quick{grid-template-columns:1fr}.audience-choice{grid-template-columns:1fr}.modal{width:100%;max-width:none;margin:0;border-radius:18px 18px 0 0}.table-wrap{overscroll-behavior-x:contain}.table{min-width:700px}
}
@media(max-width:600px){
  .content{padding:15px 12px 88px}.page-head h1{font-size:23px}.page-head p{font-size:12px}.head-actions{display:grid;grid-template-columns:1fr}.head-actions .btn{width:100%}.command-hero{padding:18px}.command-copy h2{font-size:22px}.command-copy p{font-size:11px}.command-summary{gap:8px}.summary-item{padding:11px}.summary-item strong{font-size:22px}.command-kpis{grid-template-columns:1fr}.command-kpi{min-height:100px}.operation-card{min-height:88px}.operation-state{display:none}.section-heading h3{font-size:17px}.section-heading p{font-size:11px}.table-wrap:after{content:'Geser hanya tabel ini untuk melihat kolom lain';display:block;padding:7px 10px;border-top:1px solid #edf1f5;background:#f8fafc;color:#7b8fa0;font-size:10px}.table{min-width:720px}.form-grid{grid-template-columns:1fr!important}.form-grid .full{grid-column:auto}.form-actions{display:grid!important;grid-template-columns:1fr!important}.form-actions .btn{width:100%}.modal-body{padding:16px;max-height:calc(94dvh - 70px);overflow:auto}.modal-head{position:sticky;top:0;background:#fff;z-index:2}.audience-option{padding:12px}.nutrition-grid{grid-template-columns:1fr!important}.evidence-grid,.evidence-pair{grid-template-columns:1fr!important}
}
@media(max-width:380px){.content{padding-left:10px;padding-right:10px}.page-head h1{font-size:21px}.command-copy h2{font-size:21px}.summary-item strong{font-size:20px}.kpi-value{font-size:23px}.mobile-nav{height:64px}}

:root{--ui-text-strong:#17354f;--ui-text:#29465e;--ui-text-muted:#6f8498;--ui-text-soft:#8a9bab}
body{color:var(--ui-text);font-size:13px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.small,.muted{font-size:11px;line-height:1.45}
.form-help{font-size:11px;line-height:1.5}
.section-title p,.section-heading p,.page-head p{font-size:12px;line-height:1.55}
.table{font-size:12px}.table th{font-size:10px}.table th,.table td{padding:12px 11px}
.sidebar{scroll-behavior:auto;overscroll-behavior-y:contain}
.schedule-invalid-row td{background:#fffaf9}.schedule-invalid-row td:first-child{border-left:3px solid #d64545}
.schedule-invalid-row .badge.red{font-weight:800}
.modal{max-height:min(92dvh,820px)}
.modal-body{overflow:auto;overscroll-behavior:contain}
.menu-form-modern .form-actions{position:sticky;bottom:-17px;z-index:5;margin:4px -17px -17px;padding:12px 17px;background:rgba(255,255,255,.97);border-top:1px solid #e8eef4;backdrop-filter:blur(8px)}
@media(max-width:820px){.modal{max-height:94dvh}.menu-form-modern .form-actions{bottom:-16px;margin:4px -16px -16px;padding:12px 16px}}



/* v4.9.0 — guided UX, typography hierarchy, normalized branding, responsive interaction */
:root{
  --ui-text-strong:#16344f;--ui-text:#294a63;--ui-text-muted:#6f8497;--ui-text-soft:#8c9cab;
  --ui-focus:rgba(22,116,184,.13);--ui-shadow-soft:0 4px 16px rgba(19,45,70,.055);
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ui-text);font-weight:400;line-height:1.45}
strong,b,h1,h2,h3,h4{font-weight:700;color:var(--ui-text-strong)}
.page-head-main{min-width:0}.page-head h1{font-weight:800;color:#12324f}.page-head p{color:#71869a;font-weight:400}
.page-guide{display:flex;align-items:flex-start;gap:8px;max-width:900px;margin-top:10px;padding:9px 11px;border:1px solid #dce8f0;border-radius:10px;background:#f7fbfe;color:#587188;font-size:10.5px;line-height:1.5}
.page-guide-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:#eaf4fb;color:#1674b8}.page-guide-icon .svg{width:14px;height:14px}
.page-head{gap:18px}.head-actions{flex:0 0 auto}
.eyebrow{font-weight:800;color:#1674b8}
.section-title h3,.section-heading h3,.card-head-modern h3{font-weight:700}.section-title p,.section-heading p,.card-head-modern p{color:#74899b}
.field-group label,.field label{font-weight:700;color:#36546c}.optional{font-weight:500;color:#8a9aaa}
.form-help{color:#71869a!important}.small,.muted{color:#71869a}.table th{font-weight:700;color:#5f768b}.table td{color:#294a63}.table td b{font-weight:700;color:#16344f}
.input,.select,.textarea,.input-wrap input{font-weight:400}.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#4d98c9;box-shadow:0 0 0 3px var(--ui-focus)}
.btn{font-weight:600}.btn-primary{font-weight:700}
.card,.section,.kpi,.analytics-card,.distribution-trip-card,.washing-batch-card{box-shadow:var(--ui-shadow-soft)}
.card:hover,.kpi:hover,.analytics-card:hover{box-shadow:0 8px 24px rgba(19,45,70,.08)}
/* normalized logo handling — never rotate or stretch the official asset */
.top-brand img,.side-brand img,.brand-logo,.login-card-logo{display:block;object-fit:contain;object-position:center;transform:none;rotate:none;aspect-ratio:1/1}
.top-brand img{width:38px;height:38px}.side-brand img{width:44px;height:44px}.brand-logo{width:58px;height:58px;flex:0 0 58px}.login-card-logo{width:78px;height:78px;max-width:none;max-height:none}
.login-brand{align-items:center}.login-user-icon{display:grid;place-items:center;width:94px;height:94px;background:#fff;border:1px solid #dbe7ef;box-shadow:0 8px 24px rgba(4,37,67,.10);border-radius:50%;overflow:hidden}
.login-card h1{font-weight:800;color:#12304b;letter-spacing:-.5px}.login-card .lead{color:#6f8497;line-height:1.55}.login-help{color:#71869a;line-height:1.45}
.security-box{border:1px solid #d5ebe3!important;background:#f2faf7!important}.security-box strong{font-weight:700;color:#15664e}.security-box span{color:#557b6d}
.process-item strong{font-weight:700}.process-item span{color:#dcebf7}
.modal-title-wrap{min-width:0;display:flex;flex-direction:column;gap:3px}.modal-title-wrap h3{margin:0}.modal-guide{margin:0;color:#74899b;font-size:10px;line-height:1.45;max-width:620px;font-weight:400}.modal-head{align-items:flex-start}.modal-close{flex:0 0 auto}
.form-intro{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1px solid #dce8f0;border-radius:11px;background:#f7fbfe}.form-intro-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:#e8f3fb;color:#1674b8}.form-intro-icon .svg{width:16px;height:16px}.form-intro strong{display:block;font-size:12px;color:#23445d;margin-bottom:2px}.form-intro span{display:block;color:#71869a;font-size:10px;line-height:1.5}
.menu-form-modern .section-label{font-weight:700;color:#244760}.menu-form-modern .nutrition-section{background:#fbfdff}
.schedule-source-card .section-title p{max-width:850px}.template-summary{box-shadow:none}
/* Avoid page-level horizontal movement; only explicit scroll containers may scroll sideways. */
body,#app,.shell,.layout,.content{max-width:100%;overflow-x:clip}
.sidebar{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.content{min-width:0}
.table-wrap,.distribution-flow,.washing-flow,.route-kpm-grid{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
/* clear keyboard focus */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(22,116,184,.20);outline-offset:2px}
@media(max-width:820px){
  .page-guide{font-size:10px}.page-head{gap:12px}.page-head-main{width:100%}.head-actions{width:100%}
  .brand-logo{width:44px;height:44px;flex-basis:44px}.login-user-icon{width:82px;height:82px}.login-card-logo{width:68px;height:68px}
  .modal-title-wrap{padding-right:8px}.modal-guide{font-size:9.5px}
}
@media(max-width:600px){
  .page-guide{padding:8px 9px}.page-head h1{font-size:23px}.page-head p{font-size:11px}.form-intro{padding:11px}.form-intro span{font-size:10px}
  .login-visual{padding:18px 14px}.login-brand .brand-logo{width:44px;height:44px}.login-card{border-radius:18px}
}


/* ================================================================
   v4.9.2 — MAX UX CORRECTIVE LAYER
   Purpose: final visual consistency, readable hierarchy, scroll isolation,
   accessible interaction states, and operator-first guidance.
   No business workflow or API contract is changed here.
   ================================================================ */
:root{
  --ux-heading:#102f4b;
  --ux-body:#29475f;
  --ux-muted:#6f8396;
  --ux-soft:#f7fafc;
  --ux-border:#dbe6ee;
  --ux-brand:#1269a8;
  --ux-brand-dark:#0b4f80;
  --ux-success:#177b59;
  --ux-warning:#a86b08;
  --ux-danger:#b83a42;
  --ux-focus:rgba(18,105,168,.16);
  --ux-radius:14px;
}

/* ---------- typography / readability ---------- */
body,#app{font-size:14px;color:var(--ux-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{color:var(--ux-heading);text-wrap:balance}
p,small,label,span,td,th,button,input,select,textarea{overflow-wrap:break-word}
.page-head h1{font-size:clamp(25px,2.1vw,32px);line-height:1.12;font-weight:800;color:var(--ux-heading);letter-spacing:-.65px}
.page-head p{max-width:780px;color:var(--ux-muted);font-size:12.5px;line-height:1.6}
.section-title h3,.section-heading h3,.card-head-modern h3{color:var(--ux-heading);font-weight:750}
.section-title p,.section-heading p,.card-head-modern p{color:var(--ux-muted);font-size:11.5px;line-height:1.55}
.eyebrow{color:var(--ux-brand);font-size:9.5px;font-weight:800;letter-spacing:.14em}
.small,.muted{color:var(--ux-muted)}

/* ---------- page guidance: explain before asking ---------- */
.page-guide{max-width:860px;min-height:38px;margin-top:11px;padding:9px 12px;background:#f6fafd;border:1px solid #d9e7f0;border-radius:11px;color:#5f778b;font-size:10.5px;line-height:1.55;box-shadow:0 2px 8px rgba(20,55,80,.025)}
.page-guide-icon{flex:0 0 23px;width:23px;height:23px;border:1px solid #d5e7f2;background:#eaf5fc;color:var(--ux-brand)}

/* ---------- topbar / shell ---------- */
.topbar{position:sticky;top:0;z-index:100;height:68px}
.layout{min-height:calc(100dvh - 68px);align-items:stretch}
.sidebar{position:sticky;top:68px;height:calc(100dvh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable both-edges}
.content{min-width:0;max-width:1600px;overflow-x:clip}

/* ---------- cards: quieter, clearer, less mechanical ---------- */
.card,.section,.kpi,.analytics-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.role-card,.system-grid,.branding-preview-item{border:1px solid var(--ux-border);border-radius:var(--ux-radius);box-shadow:0 5px 18px rgba(18,47,75,.045)}
.card:hover,.kpi:hover,.analytics-card:hover{box-shadow:0 9px 26px rgba(18,47,75,.075)}
.kpi{transition:box-shadow .16s ease,transform .16s ease}
.kpi:hover{transform:translateY(-1px)}
.kpi-label{color:#5f7589;font-weight:750}
.kpi-value{color:var(--ux-heading);font-weight:800}
.kpi-note{color:#7a8d9e}

/* ---------- controls ---------- */
.btn{min-height:40px;border-radius:10px;font-weight:650;letter-spacing:-.05px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ux-brand);border-color:var(--ux-brand);color:#fff;box-shadow:0 5px 12px rgba(18,105,168,.13)}
.btn-primary:hover{background:var(--ux-brand-dark);border-color:var(--ux-brand-dark)}
.btn-light{background:#fff;color:#2b4961;border-color:#d5e2eb}
.btn-light:hover{background:#f6f9fb;border-color:#c7d8e4}
.btn-danger{color:var(--ux-danger);background:#fff7f7;border-color:#f0cfd2}
.btn:disabled{opacity:.58;cursor:not-allowed;transform:none;box-shadow:none}
.input,.select,.textarea,.input-wrap input{min-height:42px;border-radius:10px;border-color:#d1dfe9;color:#173a55;background:#fff;font-size:12px}
.textarea{min-height:108px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#a0afbb}
.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#4b98c8;box-shadow:0 0 0 4px var(--ux-focus);outline:none}
label{color:#36536a}
.form-help{color:#71879a!important;font-size:10.5px;line-height:1.55}

/* ---------- tables: isolate horizontal movement ---------- */
.table-wrap{position:relative;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-gutter:stable}
.table{border-collapse:separate;border-spacing:0}
.table th{position:sticky;top:0;z-index:1;background:#f5f9fc;color:#5d7387;font-weight:750}
.table td{color:#2b4960}
.table tbody tr:hover td{background:#f9fcfe}
.table-wrap:after{pointer-events:none}

/* ---------- modal: focused, scroll-safe, easy to understand ---------- */
.modal-backdrop{z-index:300;padding:18px}
.modal{width:min(760px,calc(100vw - 36px));max-height:min(90dvh,860px);display:flex;flex-direction:column}
.modal-head{flex:0 0 auto;min-height:68px;padding:14px 18px;background:#fff}
.modal-title-wrap h3{font-size:17px;line-height:1.25;color:var(--ux-heading);font-weight:800}
.modal-guide{color:#71869a;font-size:10.5px;line-height:1.5}
.modal-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px}
.modal-body .form-grid{min-width:0}
.modal-close{transition:background .15s ease,border-color .15s ease,color .15s ease}
.modal-close:hover{background:#edf5fa;border-color:#cbdde9;color:#1c577d}

/* ---------- form intro / guided decisions ---------- */
.form-intro{border-color:#d9e7f0;background:#f7fbfe;box-shadow:none}
.form-intro strong{color:#21445d;font-weight:750}
.form-intro span{color:#71869a}
.section-label{font-size:11px;font-weight:750;color:#2a4a61}

/* ---------- Master Menu: decision-first selector ---------- */
.menu-form-modern{gap:16px}
.menu-form-modern>.field-group>label{font-size:11px;font-weight:750;color:#294c65}
.audience-choice{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.audience-option{position:relative;min-height:104px;padding:14px 14px 13px;border:1px solid #d6e3ec;background:#fbfdff;border-radius:13px;box-shadow:none}
.audience-option:hover{border-color:#94bfd8;background:#f4fafe;transform:translateY(-1px)}
.audience-option:has(input:checked){border-color:#3992c5;background:#edf7fd;box-shadow:0 0 0 2px rgba(18,105,168,.09)}
.audience-option input{margin-top:2px}
.audience-option b{font-size:12px;color:#20445e;font-weight:750}
.audience-option small{font-size:10px;color:#70869a;line-height:1.5}
.menu-nutrition-target{transition:opacity .15s ease}
.menu-nutrition-target.hidden{display:none!important}
.nutrition-section{padding:15px;border:1px solid #d9e5ed;background:#fbfdff;border-radius:13px}
.nutrition-heading{margin-bottom:12px;color:#1d4b68;font-size:13px;font-weight:800}
.nutrition-box{padding:12px 0 0;border-top:1px solid #e5edf2}
.nutrition-box:first-of-type{border-top:0;padding-top:0}
.nutrition-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#385a70;font-size:11px;font-weight:750}
.menu-scope-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.menu-scope-summary .scope-chip{padding:5px 8px;border-radius:999px;background:#edf6fb;color:#2c658b;font-size:9.5px;font-weight:750}

/* ---------- operational workflow ---------- */
.flow-note,.notice,.preview-note{font-size:10.5px;line-height:1.55;color:#5e768b}
.operation-card{transition:transform .16s ease,box-shadow .16s ease}
.operation-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(18,47,75,.08)}
.operation-open{transition:background .15s ease,transform .15s ease}
.operation-open:hover{transform:translateY(-1px)}

/* ---------- accessibility ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(18,105,168,.23);outline-offset:2px}
[aria-disabled="true"]{cursor:not-allowed}

/* ---------- mobile ---------- */
@media(max-width:1100px){
  .audience-choice{grid-template-columns:1fr}
}
@media(max-width:820px){
  .topbar{height:64px}
  .sidebar{top:64px;height:calc(100dvh - 64px);max-height:calc(100dvh - 64px)}
  .content{padding-bottom:92px}
  .page-guide{font-size:10px}
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:94dvh;border-radius:18px 18px 0 0}
  .modal-body{padding:16px;max-height:none}
  .audience-option{min-height:88px}
}
@media(max-width:600px){
  .page-head h1{font-size:23px}
  .page-head p{font-size:11px}
  .section-title h3,.section-heading h3{font-size:16px}
  .table-wrap:after{font-size:9.5px}
  .menu-form-modern .form-actions{position:sticky;bottom:0;z-index:6;margin:6px -16px -16px;padding:12px 16px;background:rgba(255,255,255,.98);border-top:1px solid #e6edf2;backdrop-filter:blur(8px)}
}
body.modal-open{overflow:hidden;overscroll-behavior:none}

/* v4.9.5 baseline correction: logo geometry + consistent interaction surfaces */
.app-shell .top-brand img,
.app-shell .side-brand img,
.app-shell .side-brand .logo-row img{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  flex:0 0 42px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  object-position:center;
  border-radius:50%;
  display:block;
}
.app-shell .top-brand img{width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;flex-basis:38px}
.app-shell .side-brand .logo-row{min-width:0}
.app-shell .side-brand .logo-row > div:last-child{min-width:0}
.app-shell .side-brand .logo-row strong,
.app-shell .side-brand .logo-row span{overflow-wrap:anywhere}
.table-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.import-guide-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.import-guide-actions .btn{display:inline-flex;align-items:center;justify-content:center}
.form-help strong{color:var(--ui-ink)}
@media(max-width:600px){
  .app-shell .side-brand img,.app-shell .side-brand .logo-row img{width:42px;height:42px;min-width:42px;min-height:42px;flex-basis:42px}
  .app-shell .top-brand img{width:34px;height:34px;min-width:34px;min-height:34px;flex-basis:34px}
  .import-guide-actions{display:grid;grid-template-columns:1fr}
}


/* v4.9.8 — modal interaction + sidebar brand contrast correction */
.app-shell .side-brand .logo-row{display:flex;align-items:center;gap:10px}
.app-shell .side-brand .logo-row > div:last-child{display:flex;flex-direction:column;gap:3px}
.app-shell .side-brand .logo-row strong{display:block!important;color:#ffffff!important;font-size:12px!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.01em!important;text-shadow:none!important}
.app-shell .side-brand .logo-row span{display:block!important;color:#b9d9ef!important;font-size:9px!important;font-weight:650!important;line-height:1.35!important;letter-spacing:.02em!important}
.app-shell .side-brand .logo-row img{background:#fff!important}
.modal-body{scroll-behavior:auto!important}
.modal .field-group,.modal .field-group.full{min-width:0}
.modal .audience-choice{width:100%}
.modal .audience-option{cursor:pointer}
.modal .audience-option input{flex:0 0 auto}
.modal .menu-nutrition-target.hidden{display:none!important}
.menu-form-modern .form-intro{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;padding:12px 13px;border:1px solid #d9e8f2;border-radius:12px;background:#f7fbfe}
.menu-form-modern .form-intro strong{display:block;color:#173d5b;font-size:13px;font-weight:800;line-height:1.3}
.menu-form-modern .form-intro span{display:block;margin-top:3px;color:#647c90;font-size:11px;line-height:1.5}
.menu-form-modern .form-intro-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#e8f3fb;color:#126da9}
.menu-form-modern .menu-scope-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border-radius:9px;background:#f8fafc;border:1px solid #e5edf3}
.menu-form-modern .scope-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#e8f3fb;color:#0e5f92;font-size:10px;font-weight:800}
.menu-form-modern .section-label{font-size:13px;color:#173d5b;font-weight:800}
.menu-form-modern .nutrition-section{border:1px solid #dce7ef;border-radius:12px;background:#fbfdff;padding:12px}
.menu-form-modern .nutrition-heading{color:#173d5b;font-size:13px;font-weight:800;margin-bottom:10px}
@media(max-width:600px){.menu-form-modern .form-intro{grid-template-columns:32px minmax(0,1fr)}.menu-form-modern .form-intro-icon{width:30px;height:30px}.menu-form-modern .form-intro strong{font-size:12px}.menu-form-modern .form-intro span,.menu-form-modern .form-help{font-size:10.5px}}

/* v4.9.6 — Professional UI correction layer
   Focus: stable layout, readable hierarchy, correct alignment, responsive surfaces. */
:root{
  --ui-ink:#102b46;--ui-muted:#64788c;--ui-muted-2:#7c8fa1;--ui-line:#dbe5ee;
  --ui-bg:#f3f7fb;--ui-card:#fff;--ui-radius:16px;
}
html,body{overflow-x:hidden;background:var(--ui-bg);color:var(--ui-ink)}
body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.content{min-width:0;overflow:visible}
.layout{align-items:start}
.sidebar{z-index:25;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}
.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
.side-brand .logo-row{align-items:center;min-height:52px}
.side-brand .logo-row img,.app-shell .side-brand .logo-row img{
  display:block!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;
  flex:0 0 46px!important;aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;
  border-radius:50%!important;padding:3px!important;box-sizing:border-box!important;
}
.top-brand img,.app-shell .top-brand img{display:block!important;aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;border-radius:50%!important;flex:none!important}
.side-brand strong{line-height:1.2}.side-brand span{line-height:1.35}
.navbtn{white-space:normal;line-height:1.25}.navbtn .nav-icon{flex:0 0 20px}
.page-head-main{min-width:0}.page-head h1,.section-title h3,.section-heading h3,.card h3{color:var(--ui-ink)}
.page-head p,.section-title p,.section-heading p,.card-sub,.form-help,.kpi-note,.small,.muted{color:var(--ui-muted)}
.eyebrow{color:#126da9;font-weight:800}
.page-guide{max-width:760px;margin-top:12px;padding:10px 12px;border:1px solid #d9e7f2;border-radius:11px;background:#f7fbfe;color:#526d83;line-height:1.5}
.page-guide-icon{color:#1b73ae}.page-guide span:last-child{min-width:0}
.section-title,.section-heading,.card-head-modern{align-items:flex-start}
.section-title h3,.section-heading h3{font-weight:800}.section-title p,.section-heading p{max-width:850px}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table{min-width:720px}.table th,.table td{white-space:normal}.table th{font-weight:800;color:#5c7084}.table td{color:#243f57}
.table td b,.table td strong{color:#173650}
.form-grid{align-items:start}.field-group{min-width:0}.field-group label,.field label{color:#35516a;font-weight:750}.input,.select,.textarea,.input-wrap input{color:#18364f;background:#fff}.input::placeholder,.textarea::placeholder{color:#9aabba;opacity:1}
.btn{font-weight:750;white-space:nowrap}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.empty,.evidence-empty,.empty-workspace{color:#61788d}.empty strong,.empty-workspace strong{color:#173650}
.badge{line-height:1}.card,.kpi,.section,.schedule-source-card,.distribution-trip-card,.washing-batch-card{overflow:visible}
.command-hero{overflow:hidden}.command-copy h2,.command-copy p{position:relative;z-index:2}
.summary-item strong,.kpi-value,.operation-main strong{font-variant-numeric:tabular-nums}
.operations-lane,.kpi-grid,.dashboard-split,.quick-grid,.attention-grid{min-width:0}
.modal-backdrop{overscroll-behavior:contain}.modal{max-height:min(88dvh,820px);display:flex;flex-direction:column;overflow:hidden}.modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}.modal-head{flex:0 0 auto}
.modal-guide{color:#6a7f92!important;line-height:1.45!important}
.audience-choice{align-items:stretch}.audience-option{min-width:0}.audience-option span{min-width:0}.audience-option b{color:#1b405c}.audience-option small{color:#6b8194}
.menu-nutrition-target.hidden{display:none!important}.menu-scope-summary{min-height:25px}
.import-guide,.notice{line-height:1.5}.import-guide-actions .btn{min-height:36px}
.route-template-table-wrap{overflow-x:auto}.route-template-table{min-width:900px}
.mobile-nav{z-index:70}
@media(max-width:1180px){.content{padding-left:20px;padding-right:20px}.page-head{gap:14px}}
@media(max-width:820px){
  .sidebar{overscroll-behavior:contain}.content{padding-left:14px;padding-right:14px}
  .page-head{gap:12px}.page-head h1{font-size:25px}.page-head p{font-size:12px}
  .head-actions{display:flex;flex-wrap:wrap;gap:7px}.head-actions .btn{flex:0 1 auto}
  .table{min-width:680px}.table-wrap{position:relative}.table-wrap:after{content:'Geser horizontal untuk melihat kolom lainnya';display:block;padding:7px 10px;color:#7c8fa1;background:#f8fafc;border-top:1px solid #edf1f5;font-size:9px;text-align:right}
  .modal{max-height:94dvh}.modal-body{padding:15px}
}
@media(max-width:600px){
  .page-head h1{font-size:23px;letter-spacing:-.5px}.page-head p{font-size:11px;line-height:1.55}
  .section-title h3,.section-heading h3{font-size:16px}.section-title p,.section-heading p{font-size:10.5px}
  .kpi-value{font-size:24px}.kpi-label{font-size:9.5px}.kpi-note{font-size:9.5px}
  .card{border-radius:14px}.btn{min-height:40px}.btn-sm{min-height:34px}
  .form-actions{flex-wrap:wrap}.form-actions .btn{min-width:120px}
  .audience-option{min-height:84px;padding:12px}.audience-option b{font-size:12px}.audience-option small{font-size:10px}
}
@media(max-width:380px){.content{padding-left:11px;padding-right:11px}.head-actions .btn{width:100%}.kpi-grid{grid-template-columns:1fr}.kpi{min-height:auto}}

/* ================================================================
   v4.9.7 — FINAL OPERATOR UI CORRECTION
   This layer intentionally overrides earlier duplicate CSS rules.
   Goals: one scroll model, readable hierarchy, stable branding,
   predictable mobile behavior, and operator-first tables/forms.
   ================================================================ */
:root{
  --ui-ink:#173b5b;
  --ui-body:#38566f;
  --ui-muted:#6d8296;
  --ui-soft:#8a9bad;
  --ui-line:#dce6ef;
  --ui-surface:#fff;
  --ui-bg:#f4f7fb;
  --ui-blue:#176fb3;
  --ui-blue-dark:#0c3d68;
  --ui-green:#16805f;
  --ui-danger:#c0393b;
  --ui-radius:16px;
  --ui-shadow:0 8px 24px rgba(20,52,78,.055);
}
html,body,#app{width:100%;min-width:0}
body{background:var(--ui-bg);color:var(--ui-body);font-size:14px;line-height:1.55}
body.modal-open{overflow:hidden!important}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* ONE predictable desktop scroll model */
.app-shell{min-height:100dvh}
.app-shell .topbar{position:sticky;top:0;z-index:200;height:72px}
.app-shell .layout{display:block;min-height:calc(100dvh - 72px)}
.app-shell .sidebar{position:fixed;left:0;top:72px;bottom:0;width:264px;height:auto;overflow-y:auto;overflow-x:hidden;z-index:150}
.app-shell .content{margin-left:264px;width:calc(100% - 264px);max-width:none;min-height:calc(100dvh - 72px);padding:30px clamp(22px,3vw,46px) 60px}
.sidebar-scrim{display:none!important}

/* logo must remain a true square asset everywhere */
.app-shell .side-brand .logo-row img,
.app-shell .top-brand img,
.login-brand .brand-logo,
.login-user-icon .login-card-logo{
  display:block!important;width:auto!important;height:auto!important;
  aspect-ratio:1/1!important;object-fit:contain!important;object-position:center!important;
  flex:0 0 auto!important;transform:none!important;rotate:0deg!important;
}
.app-shell .side-brand .logo-row img{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;border-radius:50%!important;padding:3px!important;background:#fff!important}
.app-shell .top-brand img{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:50%!important;background:#fff!important}

/* typography hierarchy */
.page-head h1{font-size:clamp(26px,2.3vw,34px)!important;line-height:1.12!important;font-weight:800!important;color:var(--ui-ink)!important;letter-spacing:-.7px!important}
.page-head p{font-size:13px!important;line-height:1.6!important;color:var(--ui-muted)!important;max-width:900px}
.eyebrow,.side-title{font-weight:800!important;letter-spacing:.12em!important}
.section-title h3,.section-heading h3,.card h3{font-size:17px!important;line-height:1.25!important;color:var(--ui-ink)!important;font-weight:750!important}
.section-title p,.section-heading p,.card-sub{font-size:12px!important;line-height:1.55!important;color:var(--ui-muted)!important}
.field-group label,.field label{font-size:12px!important;color:#31536d!important;font-weight:700!important;line-height:1.35!important}
.form-help,.small,.muted{font-size:11px!important;line-height:1.5!important;color:var(--ui-muted)!important}
.table{font-size:13px!important}
.table th{font-size:10px!important;font-weight:800!important;color:#587089!important;letter-spacing:.06em!important;white-space:nowrap}
.table td{font-size:12px!important;color:#31536d!important;line-height:1.45!important}
.table td b{color:var(--ui-ink)!important;font-weight:750!important}

/* buttons and controls */
.btn{min-height:38px;border-radius:10px!important;font-size:12px!important;font-weight:650!important;white-space:nowrap}
.btn-sm{min-height:34px;padding:7px 11px!important;font-size:11px!important}
.input,.select,.textarea,.input-wrap input{min-height:42px;border-color:#d4e0ea!important;color:#294c66!important;font-size:13px!important;background:#fff!important}
.input::placeholder,.textarea::placeholder{color:#9aabba!important}
.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#4c99ca!important;box-shadow:0 0 0 3px rgba(23,111,179,.11)!important}

/* cards */
.card,.kpi,.ops-card,.attention,.quick,.analytics-card,.distribution-trip-card,.washing-batch-card{border-color:var(--ui-line)!important;box-shadow:var(--ui-shadow)!important}
.card{border-radius:var(--ui-radius)!important}

/* table: never make the page itself wider */
.table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain!important}
.table{min-width:780px}
.table th,.table td{white-space:normal}
.table-primary{display:flex;flex-direction:column;gap:3px;min-width:150px}
.table-primary span{font-size:10px;color:var(--ui-muted);line-height:1.4}
.table-wrap-text{max-width:280px;line-height:1.5;overflow-wrap:anywhere}
.nutrition-summary{font-size:11px;line-height:1.55;color:#4d687d}
.table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* modal: reliable internal scrolling and fixed footer actions */
.modal-backdrop{position:fixed!important;inset:0!important;z-index:500!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(9,29,47,.55)!important;backdrop-filter:blur(4px)!important}
.modal{width:min(760px,calc(100vw - 40px))!important;max-width:760px!important;max-height:min(88dvh,860px)!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:18px!important;background:#fff!important;box-shadow:0 24px 70px rgba(5,27,46,.22)!important}
.modal-head{flex:0 0 auto!important;padding:18px 20px!important;border-bottom:1px solid #e7edf3!important;background:#fff!important}
.modal-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:18px 20px 20px!important}
.modal .form-actions{position:sticky!important;bottom:-20px!important;margin:8px -20px -20px!important;padding:14px 20px!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #e7edf3!important;z-index:10!important}
.notice,.form-intro{border-radius:12px!important}

/* menu audience cards */
.audience-choice{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.audience-option{min-height:92px!important;border:1px solid #d7e3ed!important;background:#fff!important;border-radius:13px!important;padding:13px!important;display:flex!important;align-items:flex-start!important;gap:9px!important}
.audience-option:has(input:checked){border-color:#4c9bcf!important;background:#f2f8fd!important;box-shadow:0 0 0 2px rgba(76,155,207,.09)!important}
.audience-option b{font-size:13px!important;color:var(--ui-ink)!important}
.audience-option small{font-size:10px!important;line-height:1.45!important;color:var(--ui-muted)!important}
.menu-scope-summary{display:flex;align-items:center;gap:8px;min-height:30px;margin-top:8px}
.scope-chip{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#eaf4fb;color:#1769a6;font-size:10px;font-weight:800}

/* mobile: no desktop layout leaking into phone */
@media(max-width:820px){
  .app-shell .topbar{height:64px}
  .app-shell .layout{min-height:calc(100dvh - 64px)}
  .app-shell .sidebar{top:64px;bottom:0;left:-296px;width:286px;height:calc(100dvh - 64px);position:fixed;transition:left .2s ease;box-shadow:18px 0 45px rgba(5,35,65,.18);z-index:300}
  .app-shell .sidebar.open{left:0}
  .app-shell .content{margin-left:0;width:100%;padding:18px 16px 92px}
  .sidebar-scrim.open{display:block!important;position:fixed!important;inset:64px 0 0!important;z-index:290!important;background:rgba(4,27,46,.42)!important}
  .hamb{display:grid!important}
  .top-actions .btn-light{display:none!important}
  .user-copy,.top-date{display:none!important}
  .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .head-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important}
  .head-actions .btn{width:100%!important}
  .audience-choice{grid-template-columns:1fr!important}
  .audience-option{min-height:auto!important}
  .modal-backdrop{align-items:flex-end!important;padding:0!important}
  .modal{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:18px 18px 0 0!important}
  .modal-body{padding:16px!important}
  .modal .form-actions{margin:8px -16px -16px!important;padding:12px 16px!important}
  .table-wrap{border-radius:12px!important}
  .table{min-width:760px!important}
  .menu-table{min-width:820px!important}
  .mobile-nav{z-index:250!important}
}

@media(max-width:600px){
  body{font-size:13px}
  .app-shell .content{padding:14px 12px 92px}
  .page-head h1{font-size:23px!important}
  .page-head p{font-size:12px!important}
  .command-hero{padding:18px!important}
  .command-copy h2{font-size:22px!important}
  .command-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .command-kpis,.kpi-grid,.charts,.grid-4,.attention-grid,.quick-grid{grid-template-columns:1fr!important}
  .kpi-value{font-size:25px!important}
  .table{min-width:720px!important}
  .menu-table{min-width:820px!important}
  .toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .search{width:100%!important;min-width:0!important}
  .filters{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .filters>*{width:100%!important;min-width:0!important}
  .form-grid{grid-template-columns:1fr!important}
  .form-actions{display:grid!important;grid-template-columns:1fr!important}
  .form-actions .btn{width:100%!important}
  .top-brand strong{font-size:12px!important}
  .top-brand img{width:34px!important;height:34px!important}
  .login-page{display:flex!important;flex-direction:column!important;min-height:100dvh!important}
  .login-visual{min-height:auto!important;padding:18px 16px 20px!important}
  .login-title{font-size:30px!important;line-height:1.05!important}
  .login-subtitle{font-size:12px!important}
  .process-list{display:none!important}
  .login-panel{padding:12px!important}
  .login-card{width:100%!important;padding:22px 16px!important;border-radius:20px!important}
}

/* v4.9.7 mobile data cards for the two high-use master tables */
@media(max-width:600px){
  .kpm-table,.menu-table{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0 10px!important}
  .kpm-table thead,.menu-table thead{display:none!important}
  .kpm-table tbody,.menu-table tbody{display:grid!important;gap:10px!important}
  .kpm-table tr,.menu-table tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;border:1px solid #dce6ef!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 3px 12px rgba(20,52,78,.04)!important}
  .kpm-table td,.menu-table td{display:block!important;border:0!important;border-bottom:1px solid #edf2f6!important;padding:10px 12px!important;min-width:0!important;text-align:left!important;background:#fff!important}
  .kpm-table td::before,.menu-table td::before{content:attr(data-label);display:block!important;margin-bottom:4px;font-size:9px!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;color:#7890a3!important}
  .kpm-table td:first-child,.kpm-table td:nth-child(2),.menu-table td:first-child,.menu-table td:nth-child(3){grid-column:1/-1}
  .kpm-table td:last-child,.menu-table td:last-child{grid-column:1/-1;border-bottom:0!important}
  .kpm-table .table-actions,.menu-table .table-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .kpm-table .table-actions .btn,.menu-table .table-actions .btn{width:100%!important;min-width:0!important}
  .menu-table .nutrition-summary{font-size:10px!important}
  .menu-table .table-wrap-text{max-width:none!important}
  .table-wrap:has(.kpm-table),.table-wrap:has(.menu-table){border:0!important;background:transparent!important;overflow:visible!important}
}

/* v4.9.7 mobile data cards for the two high-use master tables */
@media(max-width:600px){
  .kpm-table,.menu-table{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0 10px!important}
  .kpm-table thead,.menu-table thead{display:none!important}
  .kpm-table tbody,.menu-table tbody{display:grid!important;gap:10px!important}
  .kpm-table tr,.menu-table tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;border:1px solid #dce6ef!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 3px 12px rgba(20,52,78,.04)!important}
  .kpm-table td,.menu-table td{display:block!important;border:0!important;border-bottom:1px solid #edf2f6!important;padding:10px 12px!important;min-width:0!important;text-align:left!important;background:#fff!important}
  .kpm-table td::before,.menu-table td::before{content:attr(data-label);display:block!important;margin-bottom:4px;font-size:9px!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;color:#7890a3!important}
  .kpm-table td:first-child,.kpm-table td:nth-child(2),.menu-table td:first-child,.menu-table td:nth-child(3){grid-column:1/-1}
  .kpm-table td:last-child,.menu-table td:last-child{grid-column:1/-1;border-bottom:0!important}
  .kpm-table .table-actions,.menu-table .table-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .kpm-table .table-actions .btn,.menu-table .table-actions .btn{width:100%!important;min-width:0!important}
  .menu-table .nutrition-summary{font-size:10px!important}
  .menu-table .table-wrap-text{max-width:none!important}
  .table-wrap:has(.kpm-table),.table-wrap:has(.menu-table){border:0!important;background:transparent!important;overflow:visible!important}
}

/* ================================================================
   v4.9.9 — LOGIN LAYOUT + BRANDING CORRECTIVE
   Fixes logo sizing/cropping, brand alignment, login typography,
   spacing, and responsive behavior. No business workflow/API changes.
   ================================================================ */
.login-page{
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr)!important;
  min-height:100dvh!important;
}
.login-visual{
  padding:42px clamp(34px,5vw,78px) 44px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
.login-brand{
  width:100%!important;
  max-width:760px!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  min-height:76px!important;
}
.login-brand .brand-logo{
  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  min-height:76px!important;
  max-width:76px!important;
  max-height:76px!important;
  flex:0 0 76px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  rotate:0deg!important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.20))!important;
}
.brand-copy{min-width:0!important}
.brand-copy strong{
  display:block!important;
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:-.35px!important;
  white-space:nowrap!important;
}
.brand-copy span{
  display:block!important;
  margin-top:6px!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:700!important;
  letter-spacing:.25px!important;
  white-space:normal!important;
}
.login-title{
  max-width:760px!important;
  margin:58px 0 12px!important;
  font-size:clamp(42px,4.6vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-2px!important;
  font-weight:800!important;
}
.login-subtitle{
  max-width:680px!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:400!important;
}
.process-list{
  width:100%!important;
  max-width:700px!important;
  margin-top:34px!important;
  gap:10px!important;
}
.process-item{
  grid-template-columns:38px 46px minmax(0,1fr)!important;
  gap:11px!important;
  min-height:66px!important;
  padding:10px 13px!important;
  border-radius:14px!important;
}
.process-item strong{font-size:14px!important;line-height:1.25!important}
.process-item span{font-size:11px!important;line-height:1.4!important;margin-top:3px!important}
.process-icon{width:42px!important;height:42px!important;border-radius:12px!important}
.step{width:32px!important;height:32px!important;font-size:13px!important}
.login-panel{
  padding:34px clamp(22px,4vw,52px)!important;
  min-width:0!important;
}
.login-card{
  width:min(100%,480px)!important;
  padding:32px!important;
  border-radius:22px!important;
}
.login-user-icon{
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  margin:0 auto 16px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  overflow:visible!important;
  background:#f4f8fb!important;
  border:1px solid #dbe7ef!important;
  box-shadow:0 7px 20px rgba(4,37,67,.08)!important;
}
.login-user-icon .login-card-logo,
.login-card-logo{
  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  min-height:76px!important;
  max-width:76px!important;
  max-height:76px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  padding:0!important;
  background:transparent!important;
  transform:none!important;
  rotate:0deg!important;
}
.login-card h1{
  font-size:29px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
.login-card .lead{
  font-size:12px!important;
  line-height:1.55!important;
  margin:9px 0 24px!important;
}
.login-form{gap:14px!important}
.login-form .field label{font-size:12px!important;line-height:1.3!important;margin-bottom:6px!important}
.login-help{font-size:11px!important;line-height:1.45!important}
.login-submit{min-height:46px!important;border-radius:11px!important;font-size:13px!important}
.security-box{padding:12px 13px!important;border-radius:12px!important}
.security-box strong{font-size:11px!important;line-height:1.35!important}
.security-box span{font-size:10px!important;line-height:1.45!important}
.login-footer{font-size:10px!important;line-height:1.5!important}

@media(max-width:1100px) and (min-width:601px){
  .login-page{grid-template-columns:minmax(0,1fr) minmax(390px,.72fr)!important}
  .login-visual{padding:34px 38px!important}
  .login-brand .brand-logo{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;flex-basis:64px!important}
  .login-brand{min-height:64px!important}
  .brand-copy strong{font-size:18px!important}
  .brand-copy span{font-size:10px!important}
  .login-title{margin-top:48px!important;font-size:46px!important}
  .login-subtitle{font-size:14px!important}
  .process-item span{font-size:10px!important}
  .login-card{padding:28px!important}
}

@media(max-width:600px){
  .login-page{display:flex!important;flex-direction:column!important;min-height:100dvh!important}
  .login-visual{padding:20px 16px 18px!important;min-height:auto!important}
  .login-brand{gap:11px!important;min-height:58px!important;align-items:center!important}
  .login-brand .brand-logo{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;max-width:56px!important;max-height:56px!important;flex-basis:56px!important}
  .brand-copy strong{font-size:16px!important;line-height:1.15!important;white-space:normal!important}
  .brand-copy span{font-size:9px!important;margin-top:4px!important}
  .login-title{font-size:30px!important;line-height:1.06!important;letter-spacing:-.8px!important;margin:28px 0 9px!important}
  .login-subtitle{font-size:12px!important;line-height:1.5!important}
  .process-list{display:none!important}
  .login-panel{padding:10px 12px 24px!important}
  .login-card{width:100%!important;max-width:520px!important;padding:22px 16px!important;border-radius:18px!important}
  .login-user-icon{width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;margin-bottom:13px!important}
  .login-user-icon .login-card-logo,.login-card-logo{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important}
  .login-card h1{font-size:25px!important}
  .login-card .lead{font-size:11px!important;margin-bottom:20px!important}
}

/* v4.9.10 — Master Menu form DOM + audience selection repair */
.menu-form-modern .menu-scope-summary{min-height:30px}
.menu-form-modern .menu-nutrition-target.hidden{display:none!important}

/* v4.9.12 Master Menu: compact nutrition dropdown */
.nutrition-dropdown{position:relative;min-width:210px}
.nutrition-dropdown>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;cursor:pointer;border:1px solid #d9e5ee;border-radius:10px;background:#f8fbfd;padding:8px 10px;color:#174768}
.nutrition-dropdown>summary::-webkit-details-marker{display:none}
.nutrition-dropdown>summary:hover{border-color:#79add0;background:#f1f8fc}
.nutrition-dropdown[open]>summary{border-color:#4c9bcf;background:#eef7fc;border-bottom-left-radius:7px;border-bottom-right-radius:7px}
.nutrition-dropdown-label{font-size:11px;font-weight:800;line-height:1.2}
.nutrition-dropdown-meta{grid-column:1;font-size:9px;color:#71889a;line-height:1.25}
.nutrition-dropdown-chevron{grid-column:2;grid-row:1/3;font-size:16px;font-weight:800;color:#39779c;transform:translateY(-1px);transition:transform .15s ease}
.nutrition-dropdown[open] .nutrition-dropdown-chevron{transform:rotate(180deg)}
.nutrition-dropdown-panel{position:absolute;right:0;top:calc(100% + 5px);z-index:30;width:min(390px,calc(100vw - 40px));padding:11px;background:#fff;border:1px solid #d8e5ee;border-radius:12px;box-shadow:0 16px 38px rgba(12,45,68,.16)}
.nutrition-dropdown-group+.nutrition-dropdown-group{margin-top:10px;padding-top:10px;border-top:1px solid #e7eef3}
.nutrition-dropdown-title{font-size:10px;font-weight:800;color:#24536f;margin-bottom:7px}
.nutrition-dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nutrition-dropdown-grid>div{padding:9px;border:1px solid #e3ebf1;border-radius:9px;background:#f9fbfc;display:flex;flex-direction:column;gap:3px}
.nutrition-dropdown-grid span{font-size:9px;font-weight:700;color:#6c8292}
.nutrition-dropdown-grid b{font-size:13px;color:#173f5b}
.nutrition-dropdown-grid em{font-style:normal;font-size:9px;font-weight:600;color:#6c8292}
.nutrition-dropdown-grid small{font-size:9px;line-height:1.45;color:#637c8e}
@media(max-width:820px){.nutrition-dropdown-panel{position:static;width:auto;margin-top:6px;box-shadow:none}.nutrition-dropdown-grid{grid-template-columns:1fr}.nutrition-dropdown>summary{min-height:42px}}

/* v4.9.13 — HEADER / SIDEBAR BRANDING LOCK
   Single institutional identity in the top-left header.
   Sidebar begins directly with Monitoring Terpadu; no duplicated logo/brand block. */
.topbar{height:72px;padding:0 22px;display:flex;align-items:center}
.top-left{display:flex;align-items:center;min-width:0;flex:1}
.top-brand{display:flex;align-items:center;gap:11px;min-width:0;height:100%}
.top-brand img{width:42px!important;height:42px!important;flex:0 0 42px!important;display:block!important;object-fit:contain!important;object-position:center!important;border-radius:50%;transform:none!important;rotate:none!important}
.top-brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.15}
.top-brand-copy strong{display:block;font-size:14px!important;font-weight:800!important;letter-spacing:.1px;color:#12324f!important;white-space:nowrap}
.top-brand-copy span{display:block;margin-top:3px;font-size:10px!important;font-weight:600;color:#668099!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px}
.sidebar{padding:16px 12px 22px!important}
.sidebar .side-brand{display:none!important}
.sidebar .side-context-primary{display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;margin:0 8px 14px!important;padding:13px 14px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:13px!important;background:rgba(255,255,255,.065)!important;box-shadow:none!important}
.sidebar .side-context-primary span{font-size:9px!important;font-weight:800!important;letter-spacing:.9px;color:#8dd5fa!important;line-height:1.3}
.sidebar .side-context-primary b{font-size:13px!important;font-weight:800!important;color:#fff!important;line-height:1.3}
.sidebar .side-context-primary small{font-size:9px!important;color:#b9d3e7!important;line-height:1.4;margin-top:2px}
.sidebar .side-title{margin-top:15px}
@media(max-width:820px){
  .topbar{height:64px;padding:0 12px}
  .top-brand img{width:36px!important;height:36px!important;flex-basis:36px!important}
  .top-brand-copy strong{font-size:11px!important}
  .top-brand-copy span{font-size:8.5px!important;max-width:230px}
  .sidebar{top:64px!important;height:calc(100dvh - 64px)!important}
}
@media(max-width:520px){
  .top-brand{gap:8px}
  .top-brand-copy strong{font-size:10.5px!important}
  .top-brand-copy span{font-size:8px!important;max-width:185px}
}

/* v4.9.14 — FIXED HEADER / GLOBAL APP CHROME
   Header stays pinned to the viewport while dashboard content scrolls.
   Sidebar remains independently scrollable below the header. */
.app-shell .topbar{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:72px!important;
  z-index:1000!important;
}
.app-shell .layout{
  min-height:100dvh!important;
  padding-top:72px!important;
}
.app-shell .sidebar{
  position:fixed!important;
  top:72px!important;
  bottom:0!important;
  height:auto!important;
  z-index:900!important;
}
.app-shell .content{
  min-height:calc(100dvh - 72px)!important;
}
@media(max-width:820px){
  .app-shell .topbar{height:64px!important}
  .app-shell .layout{padding-top:64px!important}
  .app-shell .sidebar{top:64px!important;height:calc(100dvh - 64px)!important}
  .app-shell .content{min-height:calc(100dvh - 64px)!important}
}

/* v4.9.16 — dashboard heading hierarchy */
.dashboard-description{display:block;max-width:820px;text-align:left;line-height:1.6}
@media(max-width:620px){.dashboard-description{text-align:left;line-height:1.55}}

/* v4.9.17 — ACCOUNT MENU / MOBILE HEADER CLEANUP
   Avatar M is the account entry point. Profile, settings, help and logout live here.
   The hamburger is intentionally removed from the mobile header; navigation stays in bottom nav. */
.profile-wrap{position:relative;display:flex;align-items:center;z-index:1100}
.profile-trigger{border:0;cursor:pointer;display:grid;place-items:center;background:#eaf2fb;color:#0f4268;font-weight:800;font-size:16px;box-shadow:none}
.profile-trigger:focus-visible{outline:3px solid rgba(26,122,184,.22);outline-offset:2px}
.profile-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid #dce7ef;border-radius:16px;box-shadow:0 18px 48px rgba(11,42,67,.18);padding:10px;z-index:1200}
.profile-menu[hidden]{display:none!important}
.profile-head{display:flex;align-items:center;gap:11px;padding:8px 9px 10px}
.profile-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#eaf2fb;color:#0e466f;font-size:18px;font-weight:800}
.profile-head>div:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.profile-head strong{font-size:12px;color:#173d5b;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-head span{font-size:10px;color:#688095}
.profile-head small{font-size:9px;color:#15945f;display:flex;align-items:center;gap:5px}
.profile-head small i{width:7px;height:7px;border-radius:50%;background:#18ad70;display:inline-block}
.profile-divider{height:1px;background:#e6edf2;margin:4px 5px}
.profile-item{width:100%;border:0;background:transparent;border-radius:11px;display:flex;align-items:center;text-align:left;gap:11px;padding:11px 9px;cursor:pointer;color:#173d5b}
.profile-item:hover{background:#f3f8fc}
.profile-item .svg{width:22px;height:22px;flex:0 0 22px;color:#1a638e}
.profile-item>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.profile-item b{font-size:11px;line-height:1.3;color:#173d5b}
.profile-item small{font-size:9px;line-height:1.35;color:#70879a}
.profile-logout{margin-top:4px;background:#fff1f1;color:#c83943}
.profile-logout:hover{background:#ffe7e7}
.profile-logout .svg,.profile-logout b{color:#c83943}
.profile-logout small{color:#c55a61}
.profile-detail-card{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #dce8ef;background:#f7fafc;border-radius:12px}
.profile-detail-icon,.help-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eaf4fb;color:#176b9f;flex:0 0 38px}
.profile-detail-card>div:last-child{display:flex;flex-direction:column;gap:3px}
.profile-detail-card strong{font-size:12px;color:#173f5b}
.profile-detail-card span{font-size:10px;color:#70879a}
.profile-detail-list{margin-top:10px;border:1px solid #e1e9ef;border-radius:12px;overflow:hidden}
.profile-detail-list>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;padding:12px;border-bottom:1px solid #e9eef2}
.profile-detail-list>div:last-child{border-bottom:0}
.profile-detail-list b{font-size:10px;color:#5f788b}
.profile-detail-list span{font-size:11px;color:#173f5b;font-weight:700;overflow-wrap:anywhere}
.settings-list{border:1px solid #e0e8ee;border-radius:12px;overflow:hidden;background:#fff}
.settings-row,.settings-link{min-height:62px;padding:12px 13px;display:flex;align-items:center;gap:12px}
.settings-row{justify-content:space-between;border-bottom:1px solid #e8eef2}
.settings-row>div,.settings-link>span{min-width:0;display:flex;flex-direction:column;gap:3px}
.settings-row b,.settings-link b{font-size:11px;color:#173f5b}
.settings-row small,.settings-link small{font-size:9px;color:#718799;line-height:1.4}
.settings-link{width:100%;border:0;background:#fff;text-align:left;cursor:pointer}
.settings-link:hover{background:#f5f9fc}
.settings-link>.svg{width:20px;height:20px;color:#176b9f;flex:0 0 20px}
.settings-link .chevron{margin-left:auto;font-size:22px;color:#7a91a3}
.switch{position:relative;width:44px;height:24px;display:inline-block;flex:0 0 44px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#c9d6df;border-radius:999px;cursor:pointer;transition:.18s}
.switch .slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.16);transition:.18s}
.switch input:checked+.slider{background:#15976a}
.switch input:checked+.slider:before{transform:translateX(20px)}
.help-card{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid #dce8ef;background:#f7fafc;border-radius:12px}
.help-card>div:last-child{display:flex;flex-direction:column;gap:4px}
.help-card strong{font-size:11px;line-height:1.45;color:#173f5b}
.help-card span{font-size:10px;line-height:1.5;color:#718799}
.help-wa{margin-top:11px;min-height:46px;padding:11px 13px;border-radius:11px;background:#15976a;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800}
.help-wa .svg{width:19px;height:19px}
.help-wa span{margin-left:auto;font-size:17px}

@media(max-width:820px){
  .app-shell .top-left{flex:1;min-width:0}
  .app-shell .top-brand{gap:8px}
  .app-shell .top-brand img{width:38px!important;height:38px!important;flex-basis:38px!important}
  .app-shell .top-brand-copy strong{font-size:11px!important;max-width:230px!important}
  .app-shell .top-brand-copy span{display:block!important;font-size:8.5px!important;max-width:240px!important}
  .app-shell .top-actions{gap:7px}
  .app-shell .top-actions .system-status,.app-shell .top-actions .top-date{display:none!important}
  .app-shell .notification-btn{width:42px!important;height:42px!important}
  .app-shell .profile-trigger{width:42px!important;height:42px!important}
  .profile-menu{position:fixed;right:10px;top:74px;width:min(360px,calc(100vw - 20px));max-height:calc(100dvh - 90px);overflow:auto}
  .app-shell .hamb{display:none!important}
}
@media(max-width:520px){
  .app-shell .topbar{padding:0 10px!important}
  .app-shell .top-brand-copy strong{font-size:10.5px!important;max-width:205px!important}
  .app-shell .top-brand-copy span{font-size:8px!important;max-width:205px!important}
  .profile-menu{right:8px;top:72px;width:calc(100vw - 16px);border-radius:14px}
  .profile-detail-list>div{grid-template-columns:120px minmax(0,1fr)}
}


/* v4.9.23 — permanent template deletion */
.template-delete-choice{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #e5edf5}
.template-delete-choice .btn{min-width:150px}
#templatePermanentDeletePanel{margin-top:16px}
#templatePermanentDeletePanel .check-card{margin-top:12px}
@media (max-width:640px){.template-delete-choice{display:grid;grid-template-columns:1fr}.template-delete-choice .btn{width:100%;min-width:0}.template-delete-choice .btn-danger{order:-1}}

/* v4.9.28 — Pemorsian: compact kloter selector + visible uploaded evidence */
.portioning-selector-card{position:sticky;top:78px;z-index:8;box-shadow:0 8px 24px rgba(15,55,85,.08)}
.portioning-selector-row{display:grid;grid-template-columns:160px minmax(260px,420px) 1fr;gap:12px;align-items:center;padding:14px 0 2px}
.portioning-selector-row label{font-size:12px;font-weight:800;color:#173f5b}
.portioning-selector-hint{font-size:11px;color:#70879a;line-height:1.45}
.portioning-cluster{scroll-margin-top:150px}
.evidence-slot.has-preview{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:9px;min-height:82px}
.portion-evidence-thumb{width:74px;height:62px;border-radius:9px;overflow:hidden;background:#eef5fa;display:grid;place-items:center;text-decoration:none;border:1px solid #dce8ef}
.portion-evidence-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.portion-file-icon{font-size:12px;font-weight:900;color:#176b9f}
.evidence-preview-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.evidence-preview-meta b{font-size:11px;color:#173f5b;line-height:1.3}
.evidence-preview-meta small{font-size:9px;color:#70879a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evidence-replace{border:1px solid #d6e4ee;background:#fff;color:#176b9f;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}
@media(max-width:820px){.portioning-selector-card{position:sticky;top:58px}.portioning-selector-row{grid-template-columns:1fr;gap:7px}.portioning-selector-row .select{width:100%;min-height:46px}.portioning-selector-hint{font-size:10px}.evidence-slot.has-preview{grid-template-columns:64px minmax(0,1fr);}.portion-evidence-thumb{width:64px;height:56px}.evidence-replace{grid-column:2;justify-self:start}.portioning-cluster .table-wrap{overflow-x:auto}}

/* v4.9.30 — SPPG Visual System / Food-delivery inspired UX layer
   Presentation-only: keeps the existing workflow/API contracts intact. */
:root{
  --ux-primary:#0b5fa5;
  --ux-primary-2:#1679c5;
  --ux-navy:#082f57;
  --ux-teal:#079b78;
  --ux-orange:#e89a19;
  --ux-purple:#7659c9;
  --ux-red:#d7444d;
  --ux-text:#123552;
  --ux-muted:#6d8195;
  --ux-bg:#f3f7fb;
  --ux-surface:#fff;
  --ux-line:#dce6ef;
  --ux-radius:16px;
  --ux-shadow:0 8px 28px rgba(18,53,82,.07);
  --ux-shadow-hover:0 14px 34px rgba(18,53,82,.12);
}

html,body{background:var(--ux-bg);color:var(--ux-text)}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}

/* Header: one institutional identity, stable and readable. */
.app-shell .topbar{
  height:72px!important;background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #d9e4ed!important;box-shadow:0 3px 18px rgba(16,48,76,.055)!important;
}
.app-shell .top-brand{gap:12px!important}
.app-shell .top-brand img{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  border-radius:50%!important;object-fit:contain!important;object-position:center!important;
  background:#fff!important;padding:0!important;display:block!important;
}
.app-shell .top-brand-copy{gap:2px}
.app-shell .top-brand-copy strong{font-size:15px!important;font-weight:850!important;color:#113653!important;letter-spacing:.05px!important;line-height:1.15!important}
.app-shell .top-brand-copy span{font-size:9.5px!important;font-weight:700!important;color:#71869a!important;letter-spacing:.15px!important;line-height:1.25!important}
.app-shell .system-status{border:1px solid #d8ecdf!important;background:#f3fbf6!important;color:#257151!important;font-weight:800!important;border-radius:999px!important}
.app-shell .notification-btn{border:1px solid #d9e5ee!important;background:#fff!important;color:#123f63!important;border-radius:11px!important;box-shadow:none!important}
.app-shell .top-date{background:#f9fbfd!important;border-color:#dce6ef!important;color:#36546d!important;font-weight:750!important}
.app-shell .profile-trigger{border:1px solid #dce7ef!important;background:#edf4fb!important;color:#0c4a78!important}

/* Sidebar: clearer hierarchy and stronger active state. */
.app-shell .sidebar{
  background:linear-gradient(180deg,#062d53 0%,#073962 48%,#062b4f 100%)!important;
  border-right:1px solid rgba(255,255,255,.08);padding:16px 12px 24px!important;
}
.sidebar .side-context-primary{
  margin:0 7px 16px!important;padding:14px 14px!important;border-radius:15px!important;
  background:linear-gradient(135deg,rgba(42,130,192,.22),rgba(255,255,255,.05))!important;
  border:1px solid rgba(139,207,244,.2)!important;
}
.sidebar .side-context-primary span{font-size:8.5px!important;letter-spacing:1.05px!important;color:#8fd7f7!important}
.sidebar .side-context-primary b{font-size:13px!important;color:#fff!important}
.sidebar .side-context-primary small{font-size:9px!important;color:#b7d1e4!important}
.sidebar .side-title{font-size:8.5px!important;letter-spacing:1.15px!important;color:#8db2ce!important;margin:17px 9px 6px!important}
.sidebar .navbtn{
  min-height:42px!important;margin:3px 5px!important;width:calc(100% - 10px)!important;
  padding:10px 11px!important;border-radius:11px!important;color:#dceaf7!important;
  font-size:12px!important;font-weight:700!important;transition:background .16s,transform .16s,box-shadow .16s!important;
}
.sidebar .navbtn:hover{background:rgba(255,255,255,.075)!important;transform:translateX(1px)}
.sidebar .navbtn.active{
  background:linear-gradient(100deg,#126da7,#197fc0)!important;color:#fff!important;
  box-shadow:inset 3px 0 #72cdf8,0 5px 18px rgba(0,0,0,.12)!important;
}
.sidebar .navbtn.active .nav-icon{color:#fff!important}
.sidebar .nav-icon{color:#b9d3e8!important}
.sidebar-help{border-color:rgba(148,202,235,.16)!important;background:rgba(255,255,255,.045)!important;color:#c8dceb!important}

/* Content and page heading rhythm. */
.app-shell .content{max-width:1680px!important;padding:28px 34px 64px!important}
.page-head{gap:22px!important;margin-bottom:22px!important}
.page-head h1{font-size:31px!important;line-height:1.12!important;color:#103754!important;letter-spacing:-1.15px!important}
.page-head p{font-size:12.5px!important;line-height:1.6!important;color:#6a8095!important;max-width:860px!important}
.page-head .eyebrow{font-size:9px!important;letter-spacing:1.3px!important;color:#0874b7!important}
.head-actions{gap:8px!important}

/* Buttons: consistent visual language. */
.btn{min-height:40px!important;padding:9px 13px!important;border-radius:10px!important;font-size:11.5px!important;font-weight:800!important;border:1px solid transparent;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s!important}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#0b6faf,#0d5d99)!important;box-shadow:0 6px 16px rgba(11,95,165,.15)!important}
.btn-green{background:linear-gradient(135deg,#079b78,#087e62)!important;box-shadow:0 6px 16px rgba(8,126,98,.14)!important}
.btn-light{background:#fff!important;border-color:#d8e4ed!important;color:#244b69!important}
.btn-light:hover{background:#f5f9fc!important;border-color:#bcd3e3!important}
.btn-danger{background:#fff6f6!important;border-color:#f1cfd2!important;color:#c13b44!important}
.btn-ghost{border-color:transparent!important}

/* Cards / sections. */
.card,.section,.kpi,.ops-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.analytics-card,.role-card,.system-grid,.branding-preview-item{
  border:1px solid var(--ux-line)!important;border-radius:var(--ux-radius)!important;box-shadow:var(--ux-shadow)!important;background:#fff!important;
}
.card:hover,.kpi:hover,.ops-card:hover,.distribution-trip-card:hover,.washing-batch-card:hover{box-shadow:var(--ux-shadow-hover)!important}
.section-title h3,.section-heading h3,.card h3{color:#123b5a!important;font-weight:820!important}
.section-title p,.section-heading p,.card-sub{color:#71869a!important;line-height:1.55!important}

/* Dashboard visual hierarchy. */
.command-hero,.hero{
  background:linear-gradient(120deg,#073c6a 0%,#0b5787 62%,#1678aa 100%)!important;
  border-radius:19px!important;box-shadow:0 16px 34px rgba(8,60,105,.15)!important;
}
.command-copy h2,.hero h2{font-weight:850!important;letter-spacing:-.9px!important}
.command-copy p,.hero p{color:#d9ebf7!important}
.summary-item,.mini-stat{background:rgba(255,255,255,.105)!important;border-color:rgba(255,255,255,.16)!important}
.command-kpi,.kpi{position:relative;overflow:hidden}
.kpi-label{font-size:9.5px!important;letter-spacing:.35px!important;text-transform:uppercase;color:#5f7890!important;font-weight:800!important}
.kpi-value{color:#123c5c!important;font-weight:850!important}
.kpi-note{color:#7890a3!important}
.kpi-icon{background:#eff7fc!important;border:1px solid #dcebf4!important}

/* Form controls: predictable sizes, contrast and focus. */
.input,.select,.textarea,.input-wrap input{
  min-height:42px!important;border:1px solid #d3e0ea!important;border-radius:10px!important;
  background:#fff!important;color:#173c59!important;font-size:12px!important;
}
.input::placeholder,.textarea::placeholder,.input-wrap input::placeholder{color:#98aabd!important;opacity:1}
.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#5aa4d3!important;box-shadow:0 0 0 3px rgba(22,116,184,.10)!important;outline:none!important}
.field-group label,.field label{color:#2c4f6a!important;font-size:10.5px!important;font-weight:800!important}
.form-help{color:#7b8fa2!important}
.notice{background:#f3f9fd!important;border:1px solid #d7e9f4!important;color:#3f6178!important}

/* Tables: readable, compact, and stable. */
.table-wrap{border:1px solid #dce6ef!important;border-radius:12px!important;background:#fff!important}
.table{font-size:11px!important}
.table th{background:#f5f9fc!important;color:#587088!important;font-size:9px!important;font-weight:850!important;letter-spacing:.45px!important}
.table td{color:#294c67!important;font-size:11px!important;line-height:1.45!important}
.table td b,.table td strong{color:#143b59!important}
.table tbody tr:hover td{background:#f8fbfe!important}
.table-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.table-actions .btn{min-height:33px!important;padding:7px 9px!important}
.badge{border:1px solid #dce9f1!important;background:#eef6fb!important;color:#2c6488!important;font-size:9px!important;font-weight:850!important}
.badge.green{background:#edf9f4!important;border-color:#d4eee2!important;color:#137957!important}
.badge.amber{background:#fff8e9!important;border-color:#f5e4b9!important;color:#95650a!important}
.badge.red{background:#fff2f3!important;border-color:#f2d5d7!important;color:#b7353e!important}

/* Workflow / module accents. */
.portioning-cluster,.portioning-summary-card{border-left:4px solid #15946f!important}
.distribution-trip-card{border-left:4px solid #1976b9!important}
.washing-batch-card{border-left:4px solid #7357c3!important}
.evidence-card{border:1px solid #dce7ef!important;border-radius:12px!important;background:#fff!important;box-shadow:0 4px 14px rgba(18,53,82,.045)!important}
.evidence-card.has-evidence{border-color:#cfe7dc!important;background:linear-gradient(180deg,#fff,#fbfffd)!important}
.evidence-thumb,.portion-evidence-thumb{background:#edf5fa!important;border-color:#d8e6ee!important}
.evidence-replace,.evidence-upload-btn{border:1px solid #cfe0eb!important;background:#fff!important;color:#166797!important;border-radius:9px!important;font-weight:800!important}
.evidence-replace:hover,.evidence-upload-btn:hover{background:#f0f8fd!important}

/* Kloter selector: looks like a compact operational control rather than a giant form. */
.portioning-selector-card{background:linear-gradient(180deg,#fff,#fafdff)!important;border:1px solid #d8e6ef!important;box-shadow:0 9px 25px rgba(17,58,88,.08)!important}
.portioning-selector-row{padding:14px!important}
.portioning-selector-row label{font-size:10px!important;text-transform:uppercase;letter-spacing:.5px;color:#517087!important}
.portioning-selector-hint{color:#74899c!important}

/* Modal: bottom-sheet on mobile, roomy dialog on desktop. */
.modal-backdrop{background:rgba(5,27,47,.58)!important;backdrop-filter:blur(5px)!important}
.modal{border:1px solid #dce7ef!important;border-radius:18px!important;box-shadow:0 26px 80px rgba(2,25,44,.25)!important}
.modal-head{background:#fff!important;border-bottom:1px solid #e2eaf0!important;padding:16px 18px!important}
.modal-head h3{font-size:17px!important;color:#133b59!important;font-weight:850!important}
.modal-guide{color:#73899c!important;font-size:10.5px!important;line-height:1.5!important;margin-top:3px!important}
.modal-body{background:#fff!important}
.modal-close{border:1px solid #dce7ef!important;background:#f7fafc!important;color:#48647a!important}
.modal-close:hover{background:#edf5fa!important}

/* Login: institutional, but more polished and less oversized. */
.login-page{background:linear-gradient(135deg,#eef6fc 0%,#fff 54%,#effaf6 100%)!important}
.login-visual{background:linear-gradient(145deg,#062e57 0%,#0b4d7d 58%,#08755e 100%)!important}
.brand-logo{border-radius:50%!important;object-fit:contain!important;object-position:center!important;background:#fff!important;padding:4px!important}
.brand-copy strong{font-weight:850!important}
.login-title{font-weight:850!important}
.login-subtitle{color:#d6e8f6!important}
.process-item{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.16)!important}
.login-card{border-color:#dfe8ef!important;box-shadow:0 24px 70px rgba(11,49,93,.13)!important}
.login-card h1{color:#103a5a!important;font-weight:850!important}
.login-submit{background:linear-gradient(135deg,#079b78,#087d60)!important;box-shadow:0 9px 22px rgba(8,127,91,.17)!important}
.security-box{background:#eff9f5!important;border-color:#d7eee4!important}

/* Profile menu readability. */
.profile-menu{border-color:#dbe6ee!important;box-shadow:0 20px 50px rgba(10,42,65,.2)!important}
.profile-item b,.profile-head strong{color:#143b59!important;font-weight:800!important}
.profile-item small,.profile-head span{color:#71879a!important}
.profile-logout{background:#fff3f3!important}

/* Mobile: task-first, touch-friendly, no horizontal page overflow. */
@media(max-width:820px){
  .app-shell .content{padding:18px 14px 88px!important}
  .app-shell .topbar{height:64px!important;padding:0 11px!important}
  .app-shell .layout{padding-top:64px!important}
  .app-shell .top-brand img{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .app-shell .top-brand-copy strong{font-size:11px!important;line-height:1.15!important}
  .app-shell .top-brand-copy span{font-size:8px!important;max-width:225px!important}
  .app-shell .top-actions{gap:6px!important}
  .app-shell .notification-btn,.app-shell .profile-trigger{width:40px!important;height:40px!important}
  .page-head{margin-bottom:16px!important}
  .page-head h1{font-size:25px!important;letter-spacing:-.7px!important}
  .page-head p{font-size:11px!important;line-height:1.55!important}
  .head-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .head-actions .btn{width:100%!important}
  .card,.section{border-radius:14px!important;padding:15px!important}
  .command-hero,.hero{border-radius:16px!important;padding:17px!important}
  .command-copy h2,.hero h2{font-size:22px!important;line-height:1.18!important}
  .command-copy p,.hero p{font-size:11px!important;line-height:1.55!important}
  .command-summary{grid-template-columns:repeat(2,1fr)!important}
  .summary-item{min-width:0!important;padding:10px!important}
  .summary-item strong{font-size:20px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kpi{padding:13px!important;min-width:0!important}
  .kpi-value{font-size:23px!important}
  .kpi-icon{width:34px!important;height:34px!important}
  .toolbar{display:grid!important;grid-template-columns:1fr!important}
  .filters{display:grid!important;grid-template-columns:1fr!important}
  .filters>*{width:100%!important;min-width:0!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table{min-width:720px!important}
  .table-actions{justify-content:flex-start!important}
  .table-actions .btn{white-space:nowrap!important}
  .modal-backdrop{padding:0!important;align-items:flex-end!important}
  .modal{width:100%!important;max-width:none!important;border-radius:18px 18px 0 0!important;max-height:94dvh!important}
  .modal-body{max-height:calc(94dvh - 72px)!important;padding:15px!important}
  .modal-head{position:sticky!important;top:0!important;z-index:3!important}
  .form-grid{grid-template-columns:1fr!important}
  .form-grid .full{grid-column:auto!important}
  .form-actions{display:grid!important;grid-template-columns:1fr!important}
  .form-actions .btn{width:100%!important}
  .portioning-selector-card{position:sticky!important;top:68px!important;z-index:25!important}
  .portioning-selector-row{grid-template-columns:1fr!important;padding:11px!important}
  .portioning-selector-row .select{min-height:46px!important}
  .portioning-selector-hint{font-size:10px!important}
  .evidence-grid,.evidence-pair{grid-template-columns:1fr!important}
  .evidence-slot.has-preview{grid-template-columns:64px minmax(0,1fr)!important}
  .evidence-replace{grid-column:2!important;justify-self:start!important}
  .mobile-nav{height:68px!important;box-shadow:0 -7px 24px rgba(18,53,82,.09)!important}
  .mobile-nav .navbtn{min-height:68px!important;font-size:9px!important}
  .mobile-nav .navbtn.active{box-shadow:inset 0 3px #1681c5!important}
  .profile-menu{top:70px!important;right:8px!important;width:calc(100vw - 16px)!important;max-height:calc(100dvh - 86px)!important}
}
@media(max-width:520px){
  .app-shell .content{padding:14px 11px 84px!important}
  .app-shell .topbar{padding:0 9px!important}
  .app-shell .top-brand{gap:8px!important}
  .app-shell .top-brand img{width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important}
  .app-shell .top-brand-copy strong{font-size:10.5px!important;max-width:210px!important}
  .app-shell .top-brand-copy span{font-size:7.8px!important;max-width:210px!important}
  .page-head h1{font-size:23px!important}
  .page-head p{font-size:11px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:1fr 1fr!important}
  .kpi-label{font-size:8.5px!important}
  .kpi-value{font-size:21px!important}
  .command-summary{gap:7px!important}
  .summary-item strong{font-size:18px!important}
  .summary-item span{font-size:8px!important}
  .mobile-nav{height:64px!important}
  .mobile-nav .navbtn{min-height:64px!important}
}
@media(max-width:370px){
  .app-shell .top-brand-copy strong{font-size:10px!important;max-width:175px!important}
  .app-shell .top-brand-copy span{display:none!important}
  .app-shell .top-actions{gap:4px!important}
  .app-shell .notification-btn,.app-shell .profile-trigger{width:37px!important;height:37px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:1fr!important}
  .command-summary{grid-template-columns:1fr 1fr!important}
}

/* =========================================================
   SPPG MONITORING — PRODUCT UI/UX SYSTEM v4.9.32
   Design direction: Government Operations × Nutrition Service × Modern SaaS
   Visual-only layer; existing workflow/data contracts preserved.
   ========================================================= */
:root{
  --sp-primary:#0b4f8a; --sp-primary-2:#1677bd; --sp-primary-soft:#eaf5fd;
  --sp-teal:#0f8b72; --sp-teal-soft:#eaf8f4;
  --sp-amber:#c17a08; --sp-amber-soft:#fff6e5;
  --sp-red:#c73d48; --sp-red-soft:#fff0f2;
  --sp-purple:#7358b8; --sp-purple-soft:#f3effb;
  --sp-cyan:#0786a5; --sp-cyan-soft:#e9f8fb;
  --sp-ink:#142b42; --sp-ink-2:#29465f; --sp-muted:#6b7e91;
  --sp-bg:#f4f8fc; --sp-surface:#fff; --sp-line:#dce7f0;
  --sp-shadow-sm:0 2px 10px rgba(20,43,66,.045);
  --sp-shadow:0 10px 28px rgba(20,43,66,.07);
  --sp-shadow-hover:0 14px 34px rgba(20,43,66,.11);
  --sp-radius:16px; --sp-radius-sm:11px;
}
html{scroll-behavior:smooth}
body{letter-spacing:-.01em}
button,.btn,.navbtn,.quick,.operation-open{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease}
button:focus-visible,.btn:focus-visible,.navbtn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(22,119,189,.22);outline-offset:2px}
::selection{background:#bfe4fa;color:#0b315d}

/* shell / brand */
.app-shell .topbar{height:72px;padding:0 clamp(14px,2.2vw,30px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--sp-line);box-shadow:0 1px 0 rgba(20,43,66,.02),0 8px 24px rgba(20,43,66,.035);backdrop-filter:blur(18px)}
.app-shell .top-brand{gap:11px;min-width:0}
.app-shell .top-brand img{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;object-fit:contain;object-position:center;background:#fff;padding:1px;box-shadow:0 2px 8px rgba(20,43,66,.08)}
.app-shell .top-brand-copy{min-width:0}
.app-shell .top-brand-copy strong{font-size:13px;line-height:1.2;font-weight:800;color:var(--sp-ink);letter-spacing:.02em}
.app-shell .top-brand-copy span{font-size:10px;line-height:1.35;color:var(--sp-muted);font-weight:600;display:block;margin-top:2px}
.app-shell .top-actions{gap:8px}
.app-shell .notification-btn,.app-shell .profile-trigger{border:1px solid var(--sp-line)!important;background:#fff!important;box-shadow:var(--sp-shadow-sm)}
.app-shell .notification-btn:hover,.app-shell .profile-trigger:hover{background:var(--sp-primary-soft)!important;border-color:#b9d9ef!important;transform:translateY(-1px)}
.app-shell .avatar{background:linear-gradient(145deg,#e8f4fd,#e5f7f1);color:var(--sp-primary);font-weight:800}

/* sidebar */
.app-shell .sidebar{background:linear-gradient(180deg,#08375f 0%,#0a426e 55%,#073353 100%);border-right:1px solid rgba(255,255,255,.08);padding:16px 12px}
.app-shell .side-brand{padding:8px 9px 16px;margin-bottom:12px}
.app-shell .side-brand img{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;object-fit:contain;object-position:center;background:#fff;padding:2px}
.app-shell .side-context{padding:12px 11px!important;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.065);border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.app-shell .side-context span{font-size:8px!important;letter-spacing:.12em;font-weight:800;color:#8bd8c4!important}
.app-shell .side-context b{font-size:12px!important;color:#fff!important;margin-top:3px;display:block}
.app-shell .side-context small{font-size:9px!important;color:#bdd1e4!important;line-height:1.4}
.app-shell .side-title{margin:18px 9px 7px;color:#8eabc4;font-size:9px;letter-spacing:.12em}
.app-shell .navbtn{min-height:42px;padding:10px 11px;border-radius:11px;color:#d8e7f5;font-size:12px;font-weight:650}
.app-shell .navbtn:hover{background:rgba(255,255,255,.085);color:#fff;transform:translateX(1px)}
.app-shell .navbtn.active{background:linear-gradient(90deg,rgba(36,124,184,.72),rgba(37,105,157,.48));box-shadow:inset 3px 0 #7dd2f5,0 5px 14px rgba(0,0,0,.07);color:#fff}
.app-shell .navbtn.active .nav-icon{color:#fff}
.app-shell .sidebar-help{border-radius:13px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);line-height:1.5}

/* content & hierarchy */
.app-shell .content{padding:26px clamp(16px,2.4vw,34px) 54px;max-width:1640px}
.page-head{align-items:flex-end!important;margin-bottom:20px!important}
.page-head-main{min-width:0}
.eyebrow{font-size:9px!important;letter-spacing:.14em!important;font-weight:800!important;color:var(--sp-primary-2)!important}
.page-head h1{font-size:clamp(25px,2.2vw,32px)!important;line-height:1.12!important;font-weight:800!important;color:var(--sp-ink)!important;margin:4px 0 6px!important;letter-spacing:-.045em!important}
.page-head p{font-size:12px!important;line-height:1.55!important;color:var(--sp-muted)!important;max-width:760px}
.page-guide{display:flex;gap:8px;align-items:flex-start;margin-top:9px;padding:9px 11px!important;border:1px solid #dbeaf5!important;border-radius:10px!important;background:#f6fbff!important;color:#49657c!important;font-size:10px!important;line-height:1.5!important}
.page-guide-icon{color:var(--sp-primary-2)!important;flex:0 0 auto}
.head-actions{gap:7px!important}
.btn{min-height:38px;border-radius:10px!important;font-size:11px!important;font-weight:750!important;box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#0b4f8a,#1677bd)!important;box-shadow:0 6px 14px rgba(11,79,138,.14)!important}
.btn-primary:hover{background:linear-gradient(135deg,#093f70,#1269a8)!important;box-shadow:0 8px 18px rgba(11,79,138,.2)!important}
.btn-green{background:linear-gradient(135deg,#0d8066,#12a17f)!important;box-shadow:0 6px 14px rgba(15,139,114,.13)!important}
.btn-danger{background:var(--sp-red-soft)!important;color:var(--sp-red)!important;border-color:#f2c7cd!important}
.btn-light{background:#fff!important;color:var(--sp-ink-2)!important;border-color:var(--sp-line)!important;box-shadow:var(--sp-shadow-sm)!important}
.btn-light:hover{background:#f8fbfd!important;border-color:#c7d9e7!important}

/* cards */
.card,.section,.kpi,.analytics-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.role-card,.system-grid,.branding-preview-item{border:1px solid var(--sp-line)!important;border-radius:var(--sp-radius)!important;box-shadow:var(--sp-shadow)!important}
.card:hover,.kpi:hover,.schedule-source-card:hover,.distribution-trip-card:hover,.washing-batch-card:hover{box-shadow:var(--sp-shadow-hover)!important}
.section-title h3,.section-heading h3{font-size:16px!important;line-height:1.25!important;font-weight:800!important;color:var(--sp-ink)!important}
.section-title p,.section-heading p{font-size:10.5px!important;color:var(--sp-muted)!important;line-height:1.5!important}
.section-title,.section-heading{gap:12px}

/* KPI language */
.kpi{min-height:112px;padding:16px!important}
.kpi:before{width:4px!important;border-radius:0 5px 5px 0}
.kpi-label{font-size:9px!important;letter-spacing:.05em;text-transform:uppercase;color:#6d8193!important;font-weight:800!important}
.kpi-value{font-size:27px!important;line-height:1.05!important;font-weight:800!important;color:var(--sp-ink)!important;margin:5px 0 3px!important;letter-spacing:-.04em!important}
.kpi-note{font-size:9.5px!important;line-height:1.4!important;color:var(--sp-muted)!important}
.kpi-icon{border-radius:11px!important;background:#f0f7fc!important}

/* forms */
.field-group label,.field label{font-size:10px!important;font-weight:800!important;color:#35516a!important;letter-spacing:.02em}
.input,.select,.textarea,.input-wrap input{min-height:42px!important;border:1px solid #d3e0ea!important;border-radius:10px!important;background:#fff!important;color:var(--sp-ink)!important;font-size:12px!important;box-shadow:inset 0 1px 2px rgba(20,43,66,.018)}
.input:hover,.select:hover,.textarea:hover{border-color:#bfd2e1!important}
.input:focus,.select:focus,.textarea:focus,.input-wrap input:focus{border-color:#4b9bd0!important;box-shadow:0 0 0 3px rgba(22,119,189,.09)!important}
.form-help{font-size:9.5px!important;color:#72869a!important;line-height:1.45!important}
.notice{border-radius:12px!important;line-height:1.5!important}

/* badges / status */
.badge{font-size:8.5px!important;letter-spacing:.035em;padding:5px 8px!important;border-radius:999px!important;font-weight:800!important}
.status-dot{box-shadow:0 0 0 3px rgba(15,139,114,.08)}

/* workflow cards */
.operations-lane,.quick-grid,.attention-grid{gap:12px!important}
.operation-card{background:#fff!important;border:1px solid var(--sp-line)!important;border-radius:15px!important;box-shadow:var(--sp-shadow-sm)!important;min-height:104px!important}
.operation-card:hover{transform:translateY(-2px);box-shadow:var(--sp-shadow)!important}
.operation-main .ops-label{font-size:8px!important;letter-spacing:.12em!important;font-weight:800!important;color:#71869a!important}
.operation-main strong{font-size:22px!important;font-weight:800!important;color:var(--sp-ink)!important}
.operation-main span{font-size:9px!important;color:var(--sp-muted)!important}
.operation-state b{font-size:8px!important;letter-spacing:.06em!important}
.operation-state span{font-size:11px!important;font-weight:800!important;color:var(--sp-ink-2)!important}
.operation-open{border:1px solid var(--sp-line)!important;background:#f8fbfd!important;color:var(--sp-primary)!important;border-radius:10px!important}
.operation-open:hover{background:var(--sp-primary-soft)!important;border-color:#b8d9ee!important}

/* attention / activity */
.attention{border:1px solid var(--sp-line)!important;border-radius:13px!important;background:#fff!important;box-shadow:var(--sp-shadow-sm)!important;padding:13px!important}
.attention:hover{transform:translateY(-1px);box-shadow:var(--sp-shadow)!important}
.attention strong{font-size:11px!important;color:var(--sp-ink)!important}
.attention span{font-size:9.5px!important;color:var(--sp-muted)!important;line-height:1.4!important}
.activity-row{border-bottom:1px solid #edf2f6!important}
.activity-row strong{font-size:10.5px!important;color:var(--sp-ink)!important}
.activity-row span{font-size:9px!important;color:var(--sp-muted)!important}
.activity-time{font-size:8.5px!important;color:#8192a3!important;white-space:nowrap}

/* tables: dense but breathable */
.table-wrap{border:1px solid var(--sp-line)!important;border-radius:13px!important;box-shadow:var(--sp-shadow-sm)!important;overflow:auto}
.table{font-size:11px!important;border-collapse:separate!important;border-spacing:0}
.table th{position:sticky;top:0;z-index:2;background:#f6f9fc!important;color:#5c7287!important;font-size:8.5px!important;letter-spacing:.07em!important;font-weight:800!important;padding:12px 11px!important;border-bottom:1px solid var(--sp-line)!important}
.table td{padding:12px 11px!important;color:#304a62!important;border-bottom:1px solid #edf2f6!important;line-height:1.35!important}
.table tbody tr:hover td{background:#f8fbfd!important}
.table-actions{gap:6px!important}
.table-actions .btn{min-height:32px!important;padding:6px 9px!important;font-size:9.5px!important}

/* dashboard hero */
.command-hero,.hero{border-radius:20px!important;background:linear-gradient(120deg,#08375f 0%,#0b588b 62%,#0c7967 100%)!important;box-shadow:0 18px 42px rgba(8,55,95,.16)!important}
.command-copy h2,.hero h2{font-weight:800!important;letter-spacing:-.045em!important}
.command-copy p,.hero p{color:#d8e8f5!important}
.summary-item{background:rgba(255,255,255,.105)!important;border-color:rgba(255,255,255,.13)!important;backdrop-filter:blur(8px)}
.summary-item strong{font-weight:800!important}
.summary-item span,.summary-item small{color:#c9dfef!important}

/* operational modules */
.portioning-selector-card{border:1px solid #cfe3f1!important;background:linear-gradient(135deg,#f8fcff,#fff)!important;box-shadow:var(--sp-shadow-sm)!important}
.portioning-selector-card .select{font-weight:750!important;color:var(--sp-primary)!important;background:#fff!important}
.portioning-summary-card{background:linear-gradient(135deg,#fff,#f7fbfe)!important}
.portioning-doc-card{background:linear-gradient(145deg,#fff,#fbfefd)!important}
.evidence-slot{border:1px solid var(--sp-line)!important;border-radius:12px!important;background:#fbfdff!important;box-shadow:var(--sp-shadow-sm)!important}
.evidence-slot:hover{border-color:#b9d9ea!important;box-shadow:var(--sp-shadow)!important}
.evidence-slot.has-preview{background:#fff!important}
.evidence-slot img{border-radius:9px!important;object-fit:cover!important}
.evidence-slot b{font-size:9.5px!important;color:var(--sp-ink)!important}
.evidence-slot small{font-size:8.5px!important;color:var(--sp-muted)!important}
.distribution-flow span,.washing-flow span{border-radius:999px!important;font-weight:750!important}
.distribution-trip-card,.washing-batch-card{background:#fff!important}
.trip-head h3{font-weight:800!important;color:var(--sp-ink)!important}
.trip-meta-grid>div{background:#f8fbfd!important;border:1px solid #e4edf4!important;border-radius:10px!important}
.trip-meta-grid small{color:#71869a!important}
.trip-meta-grid b{color:var(--sp-ink-2)!important}
.washing-step{border:1px solid var(--sp-line)!important;border-radius:13px!important;background:#fff!important}
.washing-step.active{border-color:#b9d8ef!important;background:#f5fbff!important;box-shadow:0 7px 18px rgba(22,119,189,.08)!important}

/* menus / profile / popups */
.profile-menu,.dropdown-menu{border:1px solid var(--sp-line)!important;border-radius:14px!important;box-shadow:0 18px 48px rgba(20,43,66,.14)!important;background:#fff!important}
.profile-menu button,.dropdown-menu button{border-radius:9px!important}
.profile-menu button:hover,.dropdown-menu button:hover{background:#f3f8fc!important}
.modal-backdrop{background:rgba(7,35,59,.48)!important;backdrop-filter:blur(5px)!important}
.modal{border:1px solid rgba(255,255,255,.7)!important;border-radius:18px!important;box-shadow:0 30px 90px rgba(3,25,45,.24)!important}
.modal-head{border-bottom:1px solid #edf2f6!important;background:#fff!important}
.modal-head h3{font-weight:800!important;color:var(--sp-ink)!important}
.modal-body{background:#fff!important}
.modal-close:hover{background:#f1f6fa!important}

/* empty / error / feedback */
.empty{color:var(--sp-muted)!important;text-align:center!important}
.empty strong{display:block;color:var(--sp-ink-2)!important;font-size:12px!important;margin-bottom:4px}
.empty span{display:block;font-size:10px!important;line-height:1.5}
.page-error{border:1px solid #f0cdd1!important;background:#fff5f6!important;border-radius:14px!important;padding:16px!important;color:var(--sp-red)!important}
.toast{border-radius:12px!important;box-shadow:0 14px 36px rgba(20,43,66,.16)!important}

/* login: premium but institutional */
.login-page{background:#f4f8fc!important}
.login-visual{background:linear-gradient(145deg,#07345d 0%,#0b5586 56%,#087662 100%)!important}
.brand-logo,.login-card-logo{border-radius:50%!important;object-fit:contain!important;object-position:center!important;background:#fff!important}
.login-card{border:1px solid #dce7ef!important;box-shadow:0 28px 80px rgba(11,49,93,.15)!important}
.login-card h1{font-weight:800!important;color:var(--sp-ink)!important}
.login-submit{background:linear-gradient(135deg,#0b4f8a,#0f8b72)!important}
.security-box{background:linear-gradient(135deg,#eef8f5,#f4fbfa)!important}

/* utility visual language */
.text-success{color:var(--sp-teal)!important}.text-warning{color:var(--sp-amber)!important}.text-danger{color:var(--sp-red)!important}.text-info{color:var(--sp-primary-2)!important}.text-purple{color:var(--sp-purple)!important}

/* responsive: mobile is a task workspace, not a shrunk desktop */
@media(max-width:820px){
  .app-shell .content{padding:16px 13px 90px!important}
  .app-shell .topbar{height:64px!important}
  .app-shell .layout{padding-top:64px!important}
  .app-shell .top-brand img{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .app-shell .top-brand-copy strong{font-size:10.5px!important;max-width:230px!important}
  .app-shell .top-brand-copy span{font-size:7.8px!important;max-width:230px!important}
  .page-head{gap:9px!important;margin-bottom:15px!important}
  .page-head h1{font-size:24px!important}
  .page-head p{font-size:10.5px!important}
  .page-guide{font-size:9px!important}
  .head-actions{gap:7px!important}
  .head-actions .btn{min-height:42px!important}
  .command-hero,.hero{padding:16px!important;border-radius:16px!important}
  .command-copy h2,.hero h2{font-size:21px!important}
  .command-copy p,.hero p{font-size:10.5px!important}
  .command-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .summary-item{padding:10px!important}
  .summary-item strong{font-size:19px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .kpi{min-height:100px!important;padding:12px!important;border-radius:13px!important}
  .kpi-value{font-size:21px!important}
  .kpi-note{font-size:8.5px!important}
  .operation-card{min-height:96px!important}
  .table-wrap{max-width:100%!important}
  .table{min-width:680px!important}
  .table th,.table td{padding:10px 9px!important}
  .portioning-selector-card{top:64px!important}
  .evidence-slot{min-height:82px!important}
  .modal{max-height:96dvh!important;border-radius:18px 18px 0 0!important}
  .modal-body{max-height:calc(96dvh - 70px)!important}
}
@media(max-width:520px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .topbar{padding:0 8px!important}
  .app-shell .top-brand-copy strong{font-size:10px!important;max-width:205px!important}
  .app-shell .top-brand-copy span{display:none!important}
  .page-head h1{font-size:22px!important}
  .page-head p{font-size:10px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:1fr 1fr!important}
  .kpi-label{font-size:8px!important}
  .kpi-value{font-size:20px!important}
  .kpi-icon{width:31px!important;height:31px!important}
  .command-summary{grid-template-columns:1fr 1fr!important}
  .section-title h3,.section-heading h3{font-size:15px!important}
  .mobile-nav{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(16px)!important;border-top:1px solid var(--sp-line)!important}
  .mobile-nav .navbtn{color:#61758a!important}
  .mobile-nav .navbtn.active{color:var(--sp-primary)!important;background:var(--sp-primary-soft)!important;box-shadow:inset 0 3px var(--sp-primary-2)!important}
}
@media(max-width:370px){
  .app-shell .top-brand-copy strong{max-width:175px!important}
  .kpi-grid:not(.command-kpis){grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v4.9.33 — Mobile identity/readability hardening
   Keep official BGN + SPPG identity visible on every supported mobile width. */
@media (max-width: 520px){
  .app-shell .top-brand{flex:1 1 auto;min-width:0;gap:7px!important}
  .app-shell .top-brand img{width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important}
  .app-shell .top-brand-copy{min-width:0;max-width:190px!important;display:flex!important}
  .app-shell .top-brand-copy strong{display:block!important;font-size:10.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:190px!important}
  .app-shell .top-brand-copy span{display:block!important;font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:190px!important}
}
@media (max-width:370px){
  .app-shell .top-brand-copy{max-width:160px!important}
  .app-shell .top-brand-copy strong{font-size:10px!important;max-width:160px!important}
  .app-shell .top-brand-copy span{font-size:7.6px!important;max-width:160px!important}
}

/* =========================================================
   SPPG Monitoring v5.0 — APP-FIRST UI/UX REDESIGN
   Visual layer + admin test-data reset UI.
   Workflow/API/data contracts remain intact.
   ========================================================= */
:root{
  --app-navy:#073763;
  --app-navy-deep:#04294b;
  --app-blue:#1388d3;
  --app-cyan:#22b8d7;
  --app-teal:#13a77d;
  --app-orange:#ff9f1c;
  --app-coral:#ff6b4a;
  --app-purple:#7657e8;
  --app-ink:#122b45;
  --app-muted:#718399;
  --app-bg:#f4f8fc;
  --app-surface:#ffffff;
  --app-line:#e3ebf3;
  --app-radius:20px;
  --app-shadow:0 12px 34px rgba(11,48,82,.08);
  --app-shadow-hover:0 18px 44px rgba(11,48,82,.13);
}
body,.app-shell{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:
  radial-gradient(circle at 88% 6%,rgba(34,184,215,.08),transparent 22rem),
  radial-gradient(circle at 8% 28%,rgba(118,87,232,.055),transparent 24rem),
  var(--app-bg)}
/* topbar: app chrome */
.app-shell .topbar{
  height:76px!important;padding:0 26px!important;
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(210,224,237,.85)!important;
  box-shadow:0 8px 28px rgba(11,48,82,.055)!important;
  backdrop-filter:blur(20px)!important;
  position:sticky!important;top:0!important;z-index:90!important;
}
.app-shell .top-left{flex:1;min-width:0}
.app-shell .top-brand{gap:12px!important}
.app-shell .top-brand img{
  width:44px!important;height:44px!important;min-width:44px!important;
  border-radius:14px!important;padding:4px!important;background:#f5f9fd!important;
  box-shadow:0 5px 16px rgba(7,55,99,.10)!important
}
.app-shell .top-brand-copy strong{font-size:14px!important;letter-spacing:.01em}
.app-shell .top-brand-copy span{font-size:9px!important;letter-spacing:.055em}
.app-shell .top-actions{gap:10px!important}
.app-shell .system-status{
  height:34px!important;padding:0 12px!important;border-radius:999px!important;
  background:#ecfaf5!important;border:1px solid #ccefe1!important;color:#0d805e!important;
  font-weight:800!important
}
.app-shell .notification-btn,.app-shell .top-date,.app-shell .profile-trigger{
  border:1px solid var(--app-line)!important;background:#fff!important;
  box-shadow:0 5px 15px rgba(11,48,82,.045)!important
}
.app-shell .notification-btn{width:40px!important;height:40px!important;border-radius:13px!important}
.app-shell .top-date{border-radius:13px!important;padding:10px 13px!important}
.app-shell .profile-trigger{
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:linear-gradient(145deg,#eaf6ff,#dff4f2)!important;color:var(--app-navy)!important;
  font-weight:900!important
}
/* sidebar: floating app navigation */
.app-shell .layout{grid-template-columns:258px minmax(0,1fr)!important;min-height:calc(100vh - 76px)!important}
.app-shell .sidebar{
  top:76px!important;height:calc(100vh - 76px)!important;padding:18px 13px 24px!important;
  background:linear-gradient(180deg,#063b69 0%,#075082 46%,#06385f 100%)!important;
  box-shadow:10px 0 30px rgba(4,41,75,.10)!important;border-right:1px solid rgba(255,255,255,.08)!important
}
.app-shell .side-context{
  margin:0 7px 16px!important;padding:15px!important;border-radius:17px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.06))!important;
  border:1px solid rgba(255,255,255,.13)!important;box-shadow:inset 0 1px rgba(255,255,255,.08)!important
}
.app-shell .side-context span{font-size:9px!important;letter-spacing:.14em!important;color:#8dd7ff!important}
.app-shell .side-context b{font-size:14px!important;color:#fff!important;margin-top:5px!important}
.app-shell .side-context small{font-size:9px!important;color:rgba(255,255,255,.65)!important}
.app-shell .side-title{margin:18px 9px 7px!important;font-size:9px!important;letter-spacing:.14em!important;color:#8fc9e9!important}
.app-shell .navbtn{
  min-height:45px!important;padding:10px 12px!important;margin:3px 5px!important;
  width:calc(100% - 10px)!important;border-radius:13px!important;
  color:rgba(255,255,255,.76)!important;font-size:12px!important;font-weight:700!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important
}
.app-shell .navbtn:hover{transform:translateX(2px)!important;background:rgba(255,255,255,.09)!important;color:#fff!important}
.app-shell .navbtn.active{
  color:#fff!important;background:linear-gradient(100deg,#1389d1,#176fb3)!important;
  box-shadow:0 9px 22px rgba(0,0,0,.16),inset 3px 0 #76ddff!important
}
.app-shell .navbtn.active .svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.app-shell .sidebar-help{
  margin:20px 7px 0!important;padding:14px!important;border-radius:16px!important;
  background:rgba(3,29,52,.26)!important;border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;font-size:9px!important;line-height:1.5!important
}
/* page framing */
.app-shell .content{max-width:1680px!important;padding:30px 34px 70px!important}
.app-shell .page-head{margin-bottom:22px!important}
.app-shell .page-head-main{min-width:0}
.app-shell .eyebrow{font-size:9px!important;font-weight:900!important;letter-spacing:.17em!important;color:#0e7db7!important}
.app-shell .page-head h1{
  font-size:34px!important;line-height:1.05!important;letter-spacing:-1.2px!important;
  color:var(--app-ink)!important;margin:5px 0 7px!important
}
.app-shell .page-head p{font-size:12px!important;color:var(--app-muted)!important;max-width:900px!important;line-height:1.6!important}
.dashboard-description{display:block;text-align:left!important}
.app-shell .head-actions .btn{
  min-height:42px!important;border-radius:13px!important;font-weight:800!important;
  box-shadow:0 5px 15px rgba(11,48,82,.05)!important
}
.app-shell .btn-primary{
  background:linear-gradient(135deg,#0b78bb,#13a6a1)!important;
  border:0!important;box-shadow:0 10px 22px rgba(19,136,211,.20)!important
}
.app-shell .btn-primary:hover{transform:translateY(-1px);box-shadow:0 13px 26px rgba(19,136,211,.25)!important}
.app-shell .btn-danger{background:linear-gradient(135deg,#e94b55,#ff725f)!important;color:#fff!important;border:0!important}
/* cards */
.app-shell .card,.app-shell .kpi,.app-shell .analytics-card,.app-shell .operation-card,.app-shell .schedule-source-card,
.app-shell .route-editor,.app-shell .portioning-time-card,.app-shell .portioning-doc-card,
.app-shell .portioning-summary-card,.app-shell .role-card,.app-shell .system-grid{
  border:1px solid rgba(220,231,240,.9)!important;border-radius:20px!important;
  box-shadow:var(--app-shadow)!important;background:rgba(255,255,255,.94)!important
}
.app-shell .card:hover{box-shadow:var(--app-shadow-hover)!important}
.app-shell .section-title h3,.app-shell .section-heading h3,.app-shell .card-head-modern h3{font-size:18px!important;letter-spacing:-.35px!important}
.app-shell .section-title p,.app-shell .section-heading p,.app-shell .card-head-modern p{font-size:11px!important;color:var(--app-muted)!important}
/* dashboard hero = app landing panel */
.app-shell .command-hero{
  position:relative;overflow:hidden;min-height:230px!important;padding:28px 30px!important;
  border-radius:26px!important;border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(70,214,244,.28),transparent 13rem),
    radial-gradient(circle at 65% 110%,rgba(19,167,125,.25),transparent 17rem),
    linear-gradient(135deg,#06345e 0%,#08639a 55%,#078f82 100%)!important;
  box-shadow:0 22px 45px rgba(5,58,93,.20)!important
}
.app-shell .command-hero:after{
  content:"";position:absolute;width:270px;height:270px;border-radius:50%;
  right:-80px;top:-150px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.02)
}
.app-shell .command-copy{position:relative;z-index:2}
.app-shell .command-copy .eyebrow{color:#9de5ff!important}
.app-shell .command-copy h2{font-size:29px!important;letter-spacing:-1px!important;max-width:720px!important}
.app-shell .command-copy p{font-size:12px!important;color:rgba(255,255,255,.80)!important;max-width:700px!important}
.app-shell .command-meta{font-size:10px!important;color:#fff!important}
.app-shell .command-summary{position:relative;z-index:3;gap:10px!important}
.app-shell .summary-item{
  padding:16px!important;border-radius:17px!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;
  backdrop-filter:blur(10px)!important
}
.app-shell .summary-item small,.app-shell .summary-item span{color:rgba(255,255,255,.68)!important}
.app-shell .summary-item strong{font-size:27px!important;color:#fff!important}
/* KPI cards: colorful left rail */
.app-shell .command-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important}
.app-shell .command-kpi{
  min-height:128px!important;padding:17px!important;position:relative;overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease!important
}
.app-shell .command-kpi:hover{transform:translateY(-3px)!important;box-shadow:var(--app-shadow-hover)!important}
.app-shell .command-kpi:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#1388d3)
}
.app-shell .kpi-icon{
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:color-mix(in srgb,var(--accent,#1388d3) 10%,white)!important;
  color:var(--accent,#1388d3)!important
}
.app-shell .kpi-value{font-size:28px!important;color:var(--app-ink)!important}
.app-shell .kpi-note{font-size:9.5px!important;color:var(--app-muted)!important}
/* workflow cards become a visual process rail */
.app-shell .operations-lane{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.app-shell .operation-card{
  min-height:120px!important;padding:15px!important;border-radius:18px!important;
  position:relative!important;overflow:hidden!important
}
.app-shell .operation-card:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:currentColor;opacity:.75}
.app-shell .operation-icon{width:44px!important;height:44px!important;border-radius:14px!important}
.app-shell .operation-main strong{font-size:24px!important}
.app-shell .operation-open{border-radius:11px!important;background:#f1f7fb!important}
/* attention / analytics */
.app-shell .attention-grid{gap:12px!important}
.app-shell .attention{border-radius:16px!important;padding:14px!important;background:#fff!important;box-shadow:0 7px 20px rgba(11,48,82,.055)!important;border:1px solid var(--app-line)!important}
.app-shell .analytics-card{padding:20px!important}
.app-shell .mini-card{border-radius:15px!important;background:#f7fafd!important;border:1px solid #e8eff5!important}
.app-shell .progress-track{height:11px!important;border-radius:999px!important;background:#eaf0f5!important;overflow:hidden}
.app-shell .progress-track span{background:linear-gradient(90deg,#18a7df,#16b889)!important;border-radius:999px!important}
/* tables: more like an app list */
.app-shell .table-wrap{border:1px solid var(--app-line)!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 6px 20px rgba(11,48,82,.035)!important}
.app-shell .table{font-size:11px!important}
.app-shell .table th{padding:13px 12px!important;background:#f4f8fc!important;color:#668096!important}
.app-shell .table td{padding:13px 12px!important}
.app-shell .table tbody tr{transition:background .15s ease!important}
.app-shell .table tbody tr:hover{background:#f8fbfe!important}
.app-shell .badge{padding:6px 9px!important;border-radius:999px!important}
/* search/filter pills */
.app-shell .toolbar{padding:13px 0!important}
.app-shell .input,.app-shell .select,.app-shell .textarea,.app-shell .input-wrap input{
  min-height:43px!important;border:1px solid #d8e4ee!important;border-radius:13px!important;
  box-shadow:inset 0 1px 2px rgba(11,48,82,.025)!important
}
.app-shell .input.search{padding-left:15px!important}
.app-shell .input:focus,.app-shell .select:focus,.app-shell .textarea:focus,.app-shell .input-wrap input:focus{
  border-color:#38a8d9!important;box-shadow:0 0 0 4px rgba(19,136,211,.09)!important
}
/* modern modal / drawers */
.app-shell .modal-backdrop{backdrop-filter:blur(5px)!important;background:rgba(3,28,50,.38)!important}
.app-shell .modal{
  border:1px solid rgba(255,255,255,.7)!important;border-radius:24px!important;
  box-shadow:0 28px 80px rgba(3,28,50,.25)!important;overflow:hidden!important
}
.app-shell .modal-head{padding:18px 20px!important;background:linear-gradient(135deg,#f8fbfe,#fff)!important;border-bottom:1px solid var(--app-line)!important}
.app-shell .modal-body{padding:20px!important}
/* profile dropdown */
.app-shell .profile-menu{
  border:1px solid var(--app-line)!important;border-radius:20px!important;
  box-shadow:0 24px 55px rgba(3,28,50,.18)!important;padding:9px!important
}
.app-shell .profile-item{border-radius:14px!important;padding:11px!important}
.app-shell .profile-item:hover{background:#f3f8fc!important}
.app-shell .profile-logout{background:#fff3f4!important;color:#d9414b!important}
/* reset test data */
.reset-warning{
  display:flex;gap:12px;padding:15px;border-radius:17px;
  background:linear-gradient(135deg,#fff2f3,#fff8f7);border:1px solid #ffd5d8;color:#a92e38
}
.reset-warning-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:13px;background:#ffe2e4}
.reset-warning strong,.reset-warning span{display:block}.reset-warning span{margin-top:4px;font-size:11px;line-height:1.55;color:#7e5c60}
.reset-preserve{
  margin-top:12px;padding:13px 15px;border-radius:15px;background:#eef9f6;border:1px solid #d2eee5;
  color:#236f5c;font-size:10.5px;line-height:1.55
}
.reset-preserve b{display:block;margin-bottom:3px;color:#0d805e}
/* responsive app */
@media(max-width:1100px){
  .app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .app-shell .topbar{height:68px!important;padding:0 12px!important}
  .app-shell .layout{grid-template-columns:1fr!important;min-height:calc(100vh - 68px)!important}
  .app-shell .sidebar{top:68px!important;height:calc(100vh - 68px)!important}
  .app-shell .content{padding:18px 13px 102px!important}
  .app-shell .page-head{display:block!important}
  .app-shell .page-head h1{font-size:27px!important}
  .app-shell .page-head p{font-size:11px!important}
  .app-shell .head-actions{display:flex!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:none}
  .app-shell .head-actions::-webkit-scrollbar{display:none}
  .app-shell .head-actions .btn{flex:0 0 auto!important}
  .app-shell .top-brand img{width:39px!important;height:39px!important;min-width:39px!important}
  .app-shell .top-brand-copy strong{font-size:10.5px!important}
  .app-shell .top-brand-copy span{font-size:8px!important;max-width:230px!important}
  .app-shell .top-date,.app-shell .system-status{display:none!important}
  .app-shell .notification-btn{width:40px!important}
  .app-shell .profile-trigger{width:40px!important;height:40px!important}
  .app-shell .command-hero{grid-template-columns:1fr!important;padding:21px!important;border-radius:23px!important}
  .app-shell .command-copy h2{font-size:23px!important}
  .app-shell .command-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .summary-item strong{font-size:22px!important}
  .app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane{grid-template-columns:1fr 1fr!important}
  .app-shell .operation-card{min-height:115px!important}
  .app-shell .mobile-nav{
    height:76px!important;padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
    border-top:1px solid #dce8f1!important;border-radius:22px 22px 0 0!important;
    box-shadow:0 -12px 35px rgba(5,45,78,.10)!important
  }
  .app-shell .mobile-nav .navbtn{border-radius:15px!important}
  .app-shell .mobile-nav .navbtn.active{
    background:linear-gradient(180deg,#e9f7ff,#eefbf8)!important;color:#0c73ad!important;
    box-shadow:inset 0 3px #1596d4!important
  }
}
@media(max-width:520px){
  .app-shell .content{padding:15px 10px 100px!important}
  .app-shell .page-head h1{font-size:24px!important}
  .app-shell .page-head p{font-size:10.5px!important}
  .app-shell .topbar{padding:0 9px!important}
  .app-shell .top-brand{gap:7px!important}
  .app-shell .top-brand-copy{max-width:205px!important}
  .app-shell .top-brand-copy strong{font-size:10px!important}
  .app-shell .top-brand-copy span{font-size:7.5px!important;max-width:205px!important}
  .app-shell .command-hero{padding:17px!important}
  .app-shell .command-copy h2{font-size:21px!important}
  .app-shell .command-copy p{font-size:10.5px!important}
  .app-shell .command-summary{gap:7px!important}
  .app-shell .summary-item{padding:11px!important}
  .app-shell .summary-item strong{font-size:20px!important}
  .app-shell .command-kpis{gap:8px!important}
  .app-shell .command-kpi{min-height:110px!important;padding:12px!important}
  .app-shell .kpi-value{font-size:21px!important}
  .app-shell .operations-lane{gap:8px!important}
  .app-shell .operation-card{padding:12px!important;border-radius:16px!important}
  .app-shell .operation-main strong{font-size:20px!important}
  .app-shell .operation-main span{font-size:8px!important}
  .app-shell .operation-icon{width:37px!important;height:37px!important}
  .app-shell .table-wrap{border-radius:13px!important}
}

/* ================================================================
   SPPG MONITORING v5 — APP-FIRST UI/UX REDESIGN
   Visual system only: preserves existing routes/data contracts.
   ================================================================ */
:root{
  --v5-primary:#1678c5;
  --v5-primary-2:#0a5fa5;
  --v5-cyan:#20b8d4;
  --v5-teal:#18a77a;
  --v5-orange:#f59a23;
  --v5-red:#e55757;
  --v5-purple:#7864dc;
  --v5-ink:#102f4e;
  --v5-muted:#6c8298;
  --v5-bg:#f3f7fb;
  --v5-line:#dce7f0;
  --v5-soft:#eef6fd;
  --v5-radius:20px;
  --v5-shadow:0 12px 34px rgba(15,53,84,.08);
}
html,body,#app{background:var(--v5-bg)}
body{font-size:14px;-webkit-font-smoothing:antialiased}
button,.btn,.navbtn,.quick,.mobile-menu-item{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
button:hover,.btn:hover,.quick:hover{transform:translateY(-1px)}

/* Header: compact app chrome */
.topbar{height:74px!important;padding:0 26px!important;background:rgba(255,255,255,.92)!important;border-bottom:1px solid rgba(207,222,235,.85)!important;box-shadow:0 4px 22px rgba(18,57,88,.055)!important;backdrop-filter:blur(18px)!important;position:sticky;top:0;z-index:100}
.top-brand{gap:12px!important}
.top-brand img{width:42px!important;height:42px!important;padding:4px;background:#fff;border:1px solid #e2ebf2;border-radius:13px!important;box-shadow:0 5px 15px rgba(12,63,102,.10)}
.top-brand strong{font-size:13px!important;letter-spacing:.015em}
.top-brand span{font-size:9px!important;color:#7890a5!important;font-weight:700;letter-spacing:.02em}
.system-status{height:34px!important;border:1px solid #ccebdd!important;background:#f1fbf6!important;color:#147651!important;border-radius:999px!important;font-weight:800!important}
.notification-btn{width:40px!important;height:40px!important;border-radius:13px!important;background:#fff!important;border:1px solid #dce7ef!important;box-shadow:none!important}
.top-date{border:1px solid #dce7ef!important;border-radius:12px!important;padding:9px 12px!important;font-weight:700!important;color:#48647e!important}
.avatar{width:40px!important;height:40px!important;border-radius:13px!important;background:linear-gradient(135deg,#e8f5ff,#d8ecfb)!important;color:#0e5f96!important;border:1px solid #cfe2f0!important;font-weight:900!important}

/* Desktop sidebar becomes a product-style navigation rail */
.layout{grid-template-columns:258px minmax(0,1fr)!important;min-height:calc(100vh - 74px)!important}
.sidebar{top:74px!important;height:calc(100vh - 74px)!important;padding:18px 12px 22px!important;background:linear-gradient(180deg,#073b67 0%,#075184 52%,#06385f 100%)!important;border-right:1px solid rgba(255,255,255,.08)!important}
.side-context{margin:0 4px 16px!important;padding:16px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;box-shadow:0 12px 30px rgba(0,0,0,.08)!important}
.side-context span{font-size:8px!important;letter-spacing:.14em!important;color:#80d5f3!important}
.side-context b{font-size:14px!important;color:#fff!important;margin-top:5px!important}
.side-context small{font-size:9px!important;color:#b8d5e8!important;line-height:1.45!important}
.side-title{margin:17px 10px 7px!important;font-size:8px!important;letter-spacing:.14em!important;color:#79b5d5!important;font-weight:900!important}
.navbtn{min-height:44px!important;padding:10px 12px!important;border-radius:12px!important;margin:3px 4px!important;width:calc(100% - 8px)!important;color:#d9ebf7!important;font-size:12px!important;font-weight:700!important}
.navbtn .nav-icon{width:34px!important;height:34px!important;border-radius:10px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.055)!important}
.navbtn.active{background:linear-gradient(135deg,#1d8cd1,#1169ad)!important;color:#fff!important;box-shadow:0 9px 22px rgba(0,0,0,.17),inset 3px 0 #74d8ff!important}
.navbtn.active .nav-icon{background:rgba(255,255,255,.16)!important}
.navbtn:hover:not(.active){background:rgba(255,255,255,.075)!important}
.sidebar-help{margin:18px 5px 0!important;padding:14px!important;border-radius:15px!important;background:rgba(0,0,0,.12)!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important;font-size:9px!important;line-height:1.5!important}
.sidebar-help span{color:#b9d3e5!important}

/* Content becomes breathable app workspace */
.content{max-width:1600px!important;padding:30px 34px 90px!important}
.page-head{margin-bottom:22px!important;align-items:flex-end!important}
.page-head-main h1{font-weight:850!important;color:var(--v5-ink)!important;letter-spacing:-1.2px!important}
.page-head-main>p{color:#71869a!important}
.eyebrow{color:#1477b7!important;font-weight:900!important;letter-spacing:.14em!important}
.head-actions .btn{min-height:42px!important;border-radius:13px!important;font-weight:800!important;box-shadow:0 6px 16px rgba(18,89,133,.08)}
.btn-primary{background:linear-gradient(135deg,#167dc8,#0e66aa)!important;border:0!important;box-shadow:0 9px 20px rgba(22,120,197,.22)!important}
.btn-light{background:#fff!important;border:1px solid #d8e4ed!important;color:#244965!important}
.btn-danger{border-radius:12px!important}

/* Dashboard title hierarchy requested */
.page-head-dashboard{align-items:flex-start!important}
.page-head-dashboard .dashboard-kicker{display:inline-flex;align-items:center;gap:8px;color:#1678b7;font-size:10px;font-weight:900;letter-spacing:.15em}
.page-head-dashboard .dashboard-kicker span{color:#9ab1c3}
.page-head-dashboard h1{font-size:34px!important;margin:7px 0 3px!important;line-height:1.05!important}
.page-head-dashboard h1 span{font-weight:650;color:#2e5574}
.page-head-dashboard .dashboard-subtitle{font-size:16px!important;font-weight:800!important;color:#315b79!important;margin:0 0 4px!important}
.page-head-dashboard .dashboard-description{font-size:12px!important;color:#71869a!important;margin:0!important;text-align:left;max-width:680px;line-height:1.55}

/* Hero: app dashboard rather than admin table */
.command-hero{position:relative;overflow:hidden!important;padding:28px 30px!important;border-radius:26px!important;border:1px solid rgba(255,255,255,.15)!important;background:linear-gradient(120deg,#075083 0%,#0872b4 56%,#13a5a0 100%)!important;box-shadow:0 20px 42px rgba(8,77,117,.20)!important}
.command-hero:before{content:"";position:absolute;width:420px;height:420px;right:-150px;top:-250px;border-radius:50%;background:rgba(255,255,255,.10);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.command-hero:after{content:"";position:absolute;width:220px;height:220px;left:-130px;bottom:-170px;border-radius:50%;background:rgba(32,184,212,.18)}
.command-copy,.command-summary{position:relative;z-index:2}
.command-copy h2{font-size:28px!important;letter-spacing:-1px!important}
.command-copy p{font-size:13px!important;max-width:690px!important;color:#d9effb!important}
.command-meta{font-size:11px!important}
.command-summary{gap:10px!important}
.summary-item{border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.10)!important;backdrop-filter:blur(12px);border-radius:16px!important}
.summary-item strong{font-size:28px!important}

/* Cards: layered, not flat */
.card,.kpi,.section,.analytics-card,.distribution-trip-card,.washing-batch-card,.route-editor,.schedule-source-card,.menu-preview-card,.template-summary,.portioning-time-card,.portioning-doc-card,.portioning-summary-card,.role-card,.system-grid,.branding-preview-item{border:1px solid #dfe9f1!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(16,55,85,.055)!important}
.section-title h3,.section-heading h3{font-weight:850!important;color:#153b5b!important}
.section-heading{margin-bottom:13px!important}

/* KPI cards become visual status tiles */
.command-kpis{gap:13px!important}
.command-kpi{position:relative;overflow:hidden;min-height:126px!important;padding:17px!important;background:#fff!important}
.command-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#1678c5)}
.command-kpi:after{content:"";position:absolute;width:90px;height:90px;right:-45px;bottom:-45px;border-radius:50%;background:color-mix(in srgb,var(--accent,#1678c5) 10%,transparent)}
.kpi-icon{position:relative;z-index:1;width:42px!important;height:42px!important;border-radius:13px!important;background:color-mix(in srgb,var(--accent,#1678c5) 10%,white)!important;color:var(--accent,#1678c5)!important}
.kpi-value{font-size:29px!important}

/* Workflow cards look like a process lane */
.operations-lane{gap:12px!important}
.operation-card{position:relative;min-height:108px!important;padding:15px!important;border:1px solid #dfe9f1!important;background:#fff!important;box-shadow:0 9px 24px rgba(16,55,85,.05)!important}
.operation-icon{width:42px!important;height:42px!important;border-radius:13px!important}
.operation-open{border:1px solid #dce7ef!important;background:#f7fafc!important;color:#1778b6!important}

/* Modern filters/toolbars */
.toolbar{padding:12px 0!important}
.input,.select,.textarea,.input-wrap input{min-height:43px!important;border-radius:12px!important;border-color:#d7e4ed!important;box-shadow:inset 0 1px 1px rgba(15,45,70,.02)}
.table-wrap{border-radius:16px!important;box-shadow:0 6px 20px rgba(20,55,82,.035)!important;overflow:hidden}
.table th{padding:13px 12px!important;background:#f4f8fb!important;font-size:9px!important;color:#5d748a!important}
.table td{padding:13px 12px!important}
.badge{font-weight:850!important}

/* Schedule: make route hierarchy scannable */
.schedule-table tbody tr:hover{background:#f7fbfe!important}
.schedule-structure{display:flex;flex-direction:column;gap:3px}
.schedule-structure b{color:#155c8e}
.route-preview-row{padding:10px 12px!important;border-radius:12px!important;background:#f7fafc!important;border:1px solid #e3edf4!important}

/* Evidence/documentation is visual */
.distribution-evidence,.evidence-group{background:#f8fbfd!important;border-radius:16px!important}
.evidence-card{transition:transform .18s ease,box-shadow .18s ease!important}
.evidence-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,67,100,.08)}
.evidence-thumb,.evidence-empty{border-radius:11px!important}

/* Modal / profile menu as app surfaces */
.modal{border-radius:22px!important;border:1px solid #e0eaf1!important;box-shadow:0 28px 80px rgba(5,35,58,.24)!important}
.profile-menu{border:1px solid #dce7ef!important;border-radius:18px!important;box-shadow:0 22px 55px rgba(8,42,68,.17)!important;padding:9px!important}
.profile-item{border-radius:13px!important;padding:11px!important}
.profile-item:hover{background:#f2f7fb!important}
.profile-logout{background:#fff3f3!important;color:#c63e46!important}

/* Mobile = genuine app shell */
@media(max-width:820px){
  .topbar{height:68px!important;padding:0 12px!important}
  .layout{min-height:calc(100vh - 68px)!important}
  .sidebar{top:68px!important;height:calc(100dvh - 68px)!important;width:292px!important}
  .content{padding:20px 15px 105px!important}
  .top-brand img{width:40px!important;height:40px!important}
  .top-brand strong{font-size:11px!important}
  .page-head-dashboard h1{font-size:27px!important;line-height:1.08!important}
  .page-head-dashboard h1 span{display:block;font-size:.78em;margin-top:3px}
  .page-head-dashboard .dashboard-subtitle{font-size:14px!important}
  .page-head-dashboard .dashboard-description{font-size:11px!important}
  .command-hero{padding:21px!important;border-radius:22px!important}
  .command-copy h2{font-size:24px!important}
  .command-copy p{font-size:11px!important}
  .summary-item strong{font-size:24px!important}
  .mobile-nav{height:78px!important;bottom:0!important;padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;border:1px solid #dce7ef!important;border-bottom:0!important;border-radius:22px 22px 0 0!important;box-shadow:0 -10px 30px rgba(17,57,86,.10)!important;backdrop-filter:blur(18px)!important;z-index:120!important}
  .mobile-nav .navbtn{height:62px!important;min-height:62px!important;margin:0!important;border-radius:15px!important;color:#6c8194!important;background:transparent!important;box-shadow:none!important}
  .mobile-nav .navbtn.active{background:#eaf5fd!important;color:#116ba7!important;box-shadow:inset 0 3px #1680c9!important}
  .mobile-nav .nav-icon{font-size:19px!important;margin-bottom:2px}
  .mobile-nav .navbtn span:last-child{font-size:9px!important;font-weight:850!important}
  .kpi-grid.command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .operations-lane{grid-template-columns:1fr!important}
  .command-quick{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .content{padding-left:12px!important;padding-right:12px!important}
  .page-head-dashboard h1{font-size:25px!important}
  .command-hero{padding:18px!important}
  .command-summary{gap:7px!important}
  .summary-item{padding:10px!important}
  .summary-item small{font-size:7px!important}
  .summary-item strong{font-size:21px!important}
  .command-kpi{min-height:116px!important;padding:13px!important}
  .kpi-value{font-size:25px!important}
}

/* =========================================================
   SPPG APP EXPERIENCE v5.1 — structural visual redesign
   App-first, service-oriented, operational, mobile-first.
   ========================================================= */
:root{
  --app-ink:#10253d;--app-muted:#71849a;--app-bg:#f4f7fb;--app-surface:#fff;
  --app-primary:#0b5fa5;--app-primary-dark:#073b68;--app-cyan:#16a6c9;
  --app-green:#18a06d;--app-orange:#f39a2f;--app-purple:#8065d8;--app-red:#dc5961;
  --app-border:#e4ebf2;--app-radius:18px;--app-shadow:0 10px 30px rgba(16,37,61,.07);
}
body{font-family:Inter,system-ui,sans-serif;background:var(--app-bg);color:var(--app-ink)}
.app-shell{background:var(--app-bg)}
.app-shell .topbar{height:74px;padding:0 26px;background:rgba(255,255,255,.94);border-bottom:1px solid #e6edf4;box-shadow:0 4px 22px rgba(16,37,61,.045);backdrop-filter:blur(18px)}
.app-shell .top-brand{gap:12px}.app-shell .top-brand img{width:42px;height:42px;padding:4px;background:#fff;border:1px solid #e3ebf3;box-shadow:0 4px 12px rgba(16,37,61,.08)}
.app-shell .top-brand-copy strong{font-size:13px;letter-spacing:.01em}.app-shell .top-brand-copy span{font-size:9px;letter-spacing:.05em;font-weight:700;color:#7890a7}
.app-shell .system-status{height:32px;padding:0 11px;background:#effaf5;border-color:#d6f0e3;color:#167a57}.app-shell .top-date{border:0;background:#f4f7fa;border-radius:10px;color:#61778e}
.app-shell .avatar{width:38px;height:38px;background:linear-gradient(135deg,#0b5fa5,#16a6c9);color:#fff;box-shadow:0 5px 14px rgba(11,95,165,.2)}
.app-shell .layout{grid-template-columns:236px minmax(0,1fr)}
.app-shell .sidebar{top:74px;height:calc(100vh - 74px);padding:18px 12px;background:#082f55;border-right:1px solid rgba(255,255,255,.08)}
.app-shell .side-context-primary{margin:4px 5px 16px;padding:14px 13px;border:0;border-radius:16px;background:linear-gradient(135deg,#0d5f98,#084477);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.app-shell .side-context-primary span{font-size:8px;color:#82d7f1;letter-spacing:.15em}.app-shell .side-context-primary b{font-size:14px;margin-top:5px}.app-shell .side-context-primary small{display:block;margin-top:5px;color:#b7d2e6;font-size:9px;line-height:1.45}
.app-shell .side-title{font-size:8px;letter-spacing:.14em;color:#7ea9c9;margin:19px 9px 7px}
.app-shell .navbtn{min-height:44px;margin:2px 5px;width:calc(100% - 10px);border-radius:12px;padding:10px 12px;color:#cfe0ef;font-size:12px;font-weight:650;transition:transform .16s,background .16s,box-shadow .16s}
.app-shell .navbtn:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}
.app-shell .navbtn.active{background:linear-gradient(90deg,#1478b6,#0f659d);box-shadow:0 7px 18px rgba(0,0,0,.12),inset 3px 0 #7de4f4;color:#fff}
.app-shell .navbtn.active .nav-icon{color:#fff}.app-shell .sidebar-help{margin:18px 5px 4px;border-radius:16px;background:rgba(255,255,255,.055);padding:13px;color:#bcd1e3}
.app-shell .content{max-width:1680px;padding:30px 34px 72px}
.app-shell .page-head{margin-bottom:24px;align-items:flex-end}.app-shell .page-head h1{font-size:32px;letter-spacing:-1.35px;color:#102a44}.app-shell .page-head p{font-size:12px;line-height:1.65;color:#74879a}
.app-shell .page-head-dashboard .dashboard-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#e8f5fb;color:#0a70a8;font-size:9px;font-weight:850;letter-spacing:.12em}.app-shell .page-head-dashboard h1{margin-top:10px;font-size:34px}.app-shell .page-head-dashboard h1 span{font-weight:500;color:#6d8297}.app-shell .dashboard-subtitle{font-size:15px!important;font-weight:750!important;color:#173754!important;margin-top:3px!important}.app-shell .dashboard-description{font-size:12px!important;color:#73879b!important;max-width:700px;text-align:left}
/* Hero becomes an app command panel, not a generic banner */
.app-shell .command-hero{min-height:238px;padding:28px;border-radius:26px;background:linear-gradient(135deg,#082f55 0%,#0b5f97 64%,#11a4c5 125%);box-shadow:0 22px 50px rgba(7,49,84,.18)}
.app-shell .command-hero:before{content:'';position:absolute;inset:auto -90px -180px auto;width:360px;height:360px;border-radius:50%;border:70px solid rgba(255,255,255,.055)}
.app-shell .command-copy h2{font-size:31px;max-width:620px}.app-shell .command-copy p{font-size:12px;max-width:640px}.app-shell .command-summary{grid-template-columns:repeat(2,1fr);gap:9px}.app-shell .summary-item{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.09);border-radius:17px;padding:16px}.app-shell .summary-item strong{font-size:30px}
/* visual KPI tiles */
.app-shell .command-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.app-shell .command-kpi{min-height:126px;padding:17px;border-radius:18px;position:relative;overflow:hidden}.app-shell .command-kpi:after{content:'';position:absolute;right:-25px;bottom:-35px;width:100px;height:100px;border-radius:50%;background:color-mix(in srgb,var(--accent,#1976d2) 8%,white)}
.app-shell .kpi-icon{position:relative;z-index:1;width:40px;height:40px;border-radius:13px}.app-shell .kpi-value{font-size:28px}.app-shell .kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:.07em}.app-shell .kpi-note{font-size:9px}
/* workflow cards */
.app-shell .operations-lane{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.app-shell .operation-card{min-height:128px;border:1px solid #e1e9f1;border-radius:18px;background:#fff;padding:15px;box-shadow:var(--app-shadow);position:relative;overflow:hidden}.app-shell .operation-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#1976d2)}.app-shell .operation-icon{width:42px;height:42px;border-radius:13px;background:#f2f7fb}.app-shell .operation-main strong{font-size:22px}.app-shell .operation-state{min-width:54px}.app-shell .operation-open{border-radius:10px;background:#f1f6fa;color:#0b5fa5}
/* modern action cards */
.app-shell .command-quick{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.app-shell .command-quick-item{min-height:82px;padding:14px;border-radius:16px;border:1px solid #e2eaf1;background:#fff;box-shadow:0 5px 18px rgba(16,37,61,.045);transition:.16s}.app-shell .command-quick-item:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(16,37,61,.09);border-color:#cbddea}.app-shell .command-quick-item .quick-icon{width:40px;height:40px;border-radius:13px;background:#edf7fb;color:#0a72aa}.app-shell .command-quick-item strong{font-size:11px}.app-shell .command-quick-item>span:nth-child(2)>span{font-size:9px;margin-top:4px}
/* section headings */
.app-shell .section-heading{margin-bottom:12px}.app-shell .section-heading h3{font-size:17px;letter-spacing:-.25px}.app-shell .section-heading p{font-size:10px}.app-shell .eyebrow{font-size:8px}
/* operational cards throughout */
.app-shell .card,.app-shell .section,.app-shell .distribution-trip-card,.app-shell .washing-batch-card,.app-shell .portioning-time-card,.app-shell .portioning-doc-card,.app-shell .portioning-summary-card{border-radius:18px;box-shadow:var(--app-shadow);border-color:#e2eaf1}
/* inputs behave like app controls */
.app-shell .input,.app-shell .select,.app-shell .textarea{min-height:43px;border-radius:12px;border-color:#d9e4ed;font-size:12px}.app-shell .input:focus,.app-shell .select:focus,.app-shell .textarea:focus{border-color:#16a6c9;box-shadow:0 0 0 4px rgba(22,166,201,.10)}
.app-shell .btn{min-height:42px;border-radius:12px;font-size:11px;font-weight:800}.app-shell .btn-primary{background:linear-gradient(135deg,#0b5fa5,#087caa);box-shadow:0 7px 16px rgba(11,95,165,.16)}.app-shell .btn-primary:hover{transform:translateY(-1px);background:linear-gradient(135deg,#0a568f,#08749e)}
/* mobile app */
@media(max-width:820px){
 .app-shell .topbar{height:62px;padding:0 12px}.app-shell .top-brand img{width:38px;height:38px}.app-shell .top-brand strong{font-size:11px}.app-shell .top-brand span{font-size:7px;max-width:185px}.app-shell .system-status,.app-shell .top-date,.app-shell .user-copy{display:none}.app-shell .top-actions{gap:5px}.app-shell .notification-btn{width:36px;height:36px}.app-shell .avatar{width:36px;height:36px}
 .app-shell .sidebar{top:62px;height:calc(100dvh - 62px);width:292px}.app-shell .content{padding:20px 14px 94px}.app-shell .page-head{display:block;margin-bottom:18px}.app-shell .page-head h1{font-size:25px}.app-shell .page-head-dashboard h1{font-size:27px}.app-shell .page-head-dashboard h1 span{display:block;font-size:22px;margin-top:3px}.app-shell .dashboard-subtitle{font-size:13px!important}.app-shell .dashboard-description{font-size:11px!important;line-height:1.55!important}
 .app-shell .command-hero{grid-template-columns:1fr;padding:19px;border-radius:21px;min-height:auto}.app-shell .command-copy h2{font-size:22px}.app-shell .command-copy p{font-size:10px}.app-shell .command-summary{grid-template-columns:repeat(2,1fr)}.app-shell .summary-item{padding:12px}.app-shell .summary-item strong{font-size:23px}
 .app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.app-shell .command-kpi{min-height:105px;padding:13px}.app-shell .kpi-value{font-size:22px}.app-shell .kpi-icon{width:34px;height:34px;border-radius:10px}.app-shell .operations-lane{grid-template-columns:1fr;gap:9px}.app-shell .operation-card{min-height:92px}.app-shell .command-quick{grid-template-columns:1fr 1fr;gap:9px}.app-shell .command-quick-item{min-height:70px;padding:11px}.app-shell .command-quick-item .quick-icon{width:34px;height:34px}
 .app-shell .dashboard-split{grid-template-columns:1fr}.app-shell .charts{grid-template-columns:1fr}.app-shell .attention-grid{grid-template-columns:1fr}.app-shell .mobile-nav{display:grid!important;position:fixed;left:10px;right:10px;bottom:10px;z-index:100;grid-template-columns:repeat(5,1fr);gap:3px;padding:7px;background:rgba(255,255,255,.96);border:1px solid #e1e9f0;border-radius:20px;box-shadow:0 16px 38px rgba(7,38,67,.18);backdrop-filter:blur(18px)}
 .app-shell .mobile-nav .navbtn{margin:0;width:auto;min-height:54px;padding:6px 2px;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:transparent;color:#72869a;font-size:8px;font-weight:750}.app-shell .mobile-nav .navbtn.active{background:#eaf6fb;color:#0b6fa7;box-shadow:none}.app-shell .mobile-nav .nav-icon{width:auto;color:inherit}.app-shell .mobile-nav .nav-icon .svg{width:18px;height:18px}
}
@media(max-width:430px){.app-shell .command-quick{grid-template-columns:1fr}.app-shell .top-brand span{max-width:145px}.app-shell .page-head-dashboard h1{font-size:25px}}

/* =========================================================
   SPPG v5.3.1 — FINAL SHELL / RESPONSIVE LAYOUT CONTRACT
   One layout model only. Prevents header drift, double-offset
   content, and narrow/collapsed page-head text.
   ========================================================= */
html,body,#app{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
.app-shell{width:100%!important;min-height:100dvh!important;overflow:visible!important}
.app-shell .topbar{
  position:sticky!important;top:0!important;left:auto!important;right:auto!important;
  width:100%!important;height:74px!important;min-height:74px!important;
  box-sizing:border-box!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:16px!important;overflow:visible!important;
  z-index:1000!important;
}
.app-shell .top-left{display:flex!important;align-items:center!important;flex:1 1 auto!important;min-width:0!important}
.app-shell .top-brand{display:flex!important;align-items:center!important;flex:0 1 auto!important;min-width:0!important}
.app-shell .top-brand-copy{display:flex!important;flex-direction:column!important;min-width:0!important;flex:0 1 auto!important}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.app-shell .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;min-width:0!important}
.app-shell .layout{
  display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;
  width:100%!important;min-width:0!important;min-height:calc(100dvh - 74px)!important;
  align-items:stretch!important;
}
.app-shell .sidebar{
  position:sticky!important;top:74px!important;left:auto!important;bottom:auto!important;
  width:258px!important;height:calc(100dvh - 74px)!important;min-width:258px!important;
  max-height:calc(100dvh - 74px)!important;overflow-x:hidden!important;overflow-y:auto!important;
  align-self:start!important;box-sizing:border-box!important;z-index:150!important;
}
.app-shell .content{
  grid-column:2!important;margin:0!important;width:100%!important;max-width:none!important;
  min-width:0!important;box-sizing:border-box!important;overflow-x:clip!important;
  padding:30px clamp(22px,3vw,46px) 90px!important;
}
.app-shell .page-head{width:100%!important;min-width:0!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important}
.app-shell .page-head-main{display:block!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:100%!important}
.app-shell .page-head-main h1,.app-shell .page-head-main p{max-width:100%!important}
.app-shell .page-head h1{white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
.app-shell .page-head p{white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
.app-shell .head-actions{flex:0 1 auto!important;min-width:0!important;max-width:48%!important}
.app-shell .command-hero,.app-shell .card,.app-shell .section,.app-shell .monitor-section{width:100%!important;min-width:0!important;box-sizing:border-box!important}

@media(max-width:1100px){
  .app-shell .layout{grid-template-columns:224px minmax(0,1fr)!important}
  .app-shell .sidebar{width:224px!important;min-width:224px!important}
  .app-shell .content{grid-column:2!important;padding-left:22px!important;padding-right:22px!important}
  .app-shell .page-head{gap:16px!important}
  .app-shell .head-actions{max-width:44%!important}
}
@media(max-width:820px){
  .app-shell .topbar{height:64px!important;min-height:64px!important;padding:0 12px!important}
  .app-shell .layout{display:block!important;width:100%!important;min-height:calc(100dvh - 64px)!important}
  .app-shell .sidebar{
    position:fixed!important;top:64px!important;left:0!important;bottom:0!important;
    width:min(292px,88vw)!important;min-width:0!important;height:calc(100dvh - 64px)!important;
    max-height:none!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;
    z-index:900!important;
  }
  .app-shell .sidebar.open{transform:translateX(0)!important}
  .app-shell .content{display:block!important;grid-column:auto!important;margin:0!important;width:100%!important;max-width:none!important;min-width:0!important;padding:18px 14px 94px!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .app-shell .page-head-main{width:100%!important;max-width:none!important;flex:0 0 auto!important}
  .app-shell .page-head h1{font-size:25px!important;line-height:1.12!important}
  .app-shell .page-head p{font-size:12px!important;line-height:1.55!important}
  .app-shell .head-actions{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .head-actions .btn{width:100%!important;min-width:0!important}
  .app-shell .mobile-nav{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:950!important}
}
@media(max-width:560px){
  .app-shell .content{padding:15px 12px 92px!important}
  .app-shell .page-head h1{font-size:23px!important}
  .app-shell .head-actions{grid-template-columns:1fr!important}
  .app-shell .command-hero{border-radius:18px!important}
}
@media(max-width:380px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .page-head h1{font-size:21px!important}
}


:root{--bg:#f5f8fc;--surface:#fff;--ink:#102a43;--muted:#6b7f93;--line:#e5edf4;--blue:#1269a8;--blue2:#0b4775;--teal:#12a88a;--green:#16a36f;--orange:#f29a38;--purple:#7666d8;--red:#df5a61;--shadow:0 10px 32px rgba(20,55,90,.08);--r:20px}
*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}.topbar{height:72px;padding:0 24px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(20,55,90,.04)}.top-brand img{width:42px;height:42px;padding:3px;border:1px solid #e2ebf2}.top-brand strong{font-size:14px;letter-spacing:.2px}.top-brand span{font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:#7890a5}.system-status{padding:8px 11px;border-radius:999px;background:#ecf9f4;color:#14795d;font-size:11px;font-weight:800}.top-date{background:#f7fafc;border-radius:999px}.avatar{background:linear-gradient(135deg,#0e679f,#16a38a);color:white}.layout{grid-template-columns:248px minmax(0,1fr)}.sidebar{top:72px;height:calc(100vh - 72px);padding:18px 12px;background:#092f55}.side-context{margin:0 6px 18px;padding:15px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12)}.side-context span{font-size:9px;letter-spacing:1.2px;color:#8fdcc7;font-weight:800}.side-context b{display:block;margin-top:5px;font-size:14px}.side-context small{display:block;margin-top:5px;color:#b5cbe0;font-size:10px;line-height:1.45}.side-title{margin:20px 10px 7px;font-size:9px;color:#7ea5c8}.navbtn{border-radius:13px;padding:11px 12px;color:#cfe0ee}.navbtn.active{background:linear-gradient(100deg,#176ca7,#125b8e);box-shadow:0 7px 18px rgba(0,0,0,.13);inset:0}.navbtn.active:before{content:'';position:absolute}.content{padding:28px 30px 52px}.page-head{margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:1.3px}.page-head h1{font-size:29px;letter-spacing:-1.1px}.page-head p{max-width:780px}.hero,.command-hero{border-radius:24px;background:linear-gradient(120deg,#083a67 0%,#0d648d 58%,#0a876d 100%);box-shadow:0 18px 40px rgba(8,57,91,.16)}.hero h2{font-size:30px}.kpi-grid{gap:16px}.kpi{border-radius:19px;padding:19px;border:1px solid #e6edf3;box-shadow:var(--shadow)}.kpi-value{font-size:29px;letter-spacing:-1px}.card,.section,.analytics-card,.distribution-trip-card,.washing-batch-card{border-radius:20px;border:1px solid #e6edf3;background:#fff;box-shadow:var(--shadow)}.section-title h3,.section-heading h3{font-size:16px}.badge{border-radius:999px;font-weight:800}.btn{border-radius:12px;min-height:40px}.btn-primary{background:linear-gradient(135deg,#1269a8,#0d578c);box-shadow:0 8px 18px rgba(18,105,168,.16)}.btn-green{background:linear-gradient(135deg,#16a36f,#0d8a60)}.input,.select,.textarea,.input-wrap input{border-radius:12px;background:#fbfdff;border-color:#dce7ef;min-height:42px}.modal{border-radius:22px}.mobile-nav{height:72px;border-top:1px solid #e1eaf1}.mobile-nav .navbtn{border-radius:14px}.mobile-nav .navbtn.active{background:#edf7fc}.quick-action,.command-quick .quick-item{border-radius:18px}.operation-card{border-radius:18px}.evidence-card{border-radius:18px;overflow:hidden}.evidence-card img{aspect-ratio:4/3;object-fit:cover}.table-wrap{border-radius:16px;border:1px solid #e5edf4}.table th{background:#f7fafc}.form-actions .btn{min-height:42px}
@media(max-width:820px){.topbar{height:64px;padding:0 12px}.layout{display:block}.sidebar{top:64px;height:calc(100dvh - 64px)}.content{padding:16px 14px 92px}.page-head h1{font-size:24px}.hero,.command-hero{border-radius:20px}.kpi{padding:16px}.mobile-nav{height:70px;padding:7px 6px}.mobile-nav .navbtn{min-height:54px;padding:7px 4px}.top-date{display:none}.user-menu strong,.user-menu span{display:none}}


/* SPPG Monitoring v5.4 — AUTHORITATIVE UI/UX CONTRACT
   One final shell layer loaded last. Visual + responsive only; no business rules changed.
*/
:root{
  --sp-bg:#f4f7fb;--sp-surface:#fff;--sp-ink:#102a44;--sp-muted:#6f8193;--sp-line:#dfe8ef;
  --sp-navy:#0b3a63;--sp-blue:#1678b8;--sp-teal:#0d9b86;--sp-green:#16966a;
  --sp-amber:#e39a22;--sp-red:#d9555d;--sp-purple:#7461cf;
  --sp-radius:20px;--sp-shadow:0 10px 28px rgba(15,46,75,.07)
}
*,*::before,*::after{box-sizing:border-box}
html,body,#app{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden}
body{background:var(--sp-bg);color:var(--sp-ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{width:100%;min-height:100dvh;overflow:visible}
/* HEADER: normal document flow; it scrolls away with page content. */
.app-shell .topbar{position:relative!important;inset:auto!important;width:100%!important;height:74px!important;min-height:74px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 clamp(14px,2.4vw,32px)!important;gap:18px!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--sp-line)!important;box-shadow:0 2px 14px rgba(15,46,75,.045)!important;backdrop-filter:blur(14px);z-index:100!important;overflow:visible!important}
.app-shell .top-left{display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important}
.app-shell .top-brand{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;max-width:100%!important}
.app-shell .top-brand img{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;object-fit:contain!important;flex:0 0 42px!important;border-radius:50%!important;background:#fff!important;padding:3px!important}
.app-shell .top-brand-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;max-width:min(620px,70vw)!important}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;writing-mode:horizontal-tb!important}
.app-shell .top-brand-copy strong{font-size:14px!important;line-height:1.25!important;font-weight:800!important}
.app-shell .top-brand-copy span{font-size:10px!important;line-height:1.35!important;color:var(--sp-muted)!important;letter-spacing:.04em!important}
.app-shell .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 0 auto!important;min-width:0!important}
/* LAYOUT: exactly one grid; content owns remaining width. */
.app-shell .layout{display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;width:100%!important;min-width:0!important;align-items:stretch!important}
.app-shell .sidebar{position:sticky!important;top:0!important;align-self:start!important;width:258px!important;min-width:258px!important;height:calc(100dvh - 0px)!important;max-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important}
.app-shell .content{display:block!important;grid-column:2!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:30px clamp(18px,2.8vw,44px) 90px!important;box-sizing:border-box!important;overflow-x:clip!important}
/* HEADINGS: never collapse to a one-character column. */
.app-shell .page-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;width:100%!important;min-width:0!important;margin:0 0 22px!important}
.app-shell .page-head-main{display:block!important;flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important}
.app-shell .page-head-main>*{max-width:100%!important}
.app-shell .page-head h1,.app-shell .page-head h2,.app-shell .page-head h3,.app-shell .page-head p{writing-mode:horizontal-tb!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important}
.app-shell .page-head h1{display:block!important;width:100%!important;font-size:clamp(25px,2.35vw,34px)!important;line-height:1.12!important;letter-spacing:-.04em!important;margin:5px 0 7px!important}
.app-shell .page-head p{display:block!important;width:100%!important;max-width:820px!important;font-size:12.5px!important;line-height:1.6!important;color:var(--sp-muted)!important;text-align:left!important;margin:0!important}
.app-shell .page-head-dashboard h1 span{font-weight:500!important;color:#6f8498!important}
.app-shell .head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 1 auto!important;max-width:48%!important;min-width:0!important;flex-wrap:wrap!important;gap:8px!important}
.app-shell .head-actions .btn{min-width:0!important}
/* Shared text/layout hygiene */
.app-shell .section,.app-shell .card,.app-shell .kpi,.app-shell .command-hero,.app-shell .monitor-section,.app-shell .analytics-card,.app-shell .distribution-trip-card,.app-shell .washing-batch-card{min-width:0!important;max-width:100%!important}
.app-shell .section-title,.app-shell .section-heading,.app-shell .card-head-modern{min-width:0!important}
.app-shell .section-title>div:first-child,.app-shell .section-heading>div:first-child,.app-shell .card-head-modern>div:first-child{min-width:0!important;flex:1 1 auto!important}
.app-shell .section-title h3,.app-shell .section-heading h3,.app-shell .card h3,.app-shell .section p,.app-shell .card p,.app-shell .muted,.app-shell .form-help{overflow-wrap:break-word!important;word-break:normal!important;line-height:1.5!important}
.app-shell .btn,.app-shell .navbtn,.app-shell .mobile-nav button{font-family:inherit!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important}
.app-shell .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.app-shell .input,.app-shell .select,.app-shell .textarea,.app-shell .input-wrap input{width:100%!important;max-width:100%!important;min-width:0!important}
.app-shell .form-grid{min-width:0!important}
.app-shell .form-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important}
/* Tables: swipe only the table, never the whole page. */
.app-shell .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
.app-shell .table{width:100%;min-width:720px}
.app-shell .table th,.app-shell .table td{vertical-align:middle!important;line-height:1.4!important;overflow-wrap:anywhere!important;word-break:normal!important}
.app-shell .table th{white-space:normal!important}
/* Operational cards */
.app-shell .command-hero{overflow:hidden!important}
.app-shell .command-copy,.app-shell .command-summary,.app-shell .command-kpis,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .command-quick{min-width:0!important}
.app-shell .command-copy h2,.app-shell .command-copy p{writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:break-word!important}
.app-shell .operation-card,.app-shell .quick,.app-shell .attention,.app-shell .summary-item,.app-shell .command-kpi{min-width:0!important}
.app-shell .operation-main,.app-shell .operation-state{min-width:0!important}
.app-shell .operation-main strong,.app-shell .operation-main span,.app-shell .operation-state b,.app-shell .operation-state span,.app-shell .quick strong,.app-shell .quick span{overflow-wrap:anywhere!important}
/* Portioning: selector-first + progressive disclosure. */
.app-shell .portioning-selector-card{min-width:0!important}
.app-shell .portioning-selector-row{min-width:0!important}
.app-shell .portioning-cluster{min-width:0!important}
.app-shell .portioning-route-stack{min-width:0!important}
.app-shell .portioning-route-card{min-width:0!important}
.app-shell .evidence-grid,.app-shell .evidence-pair,.app-shell .evidence-group{min-width:0!important}
.app-shell .evidence-slot{min-width:0!important;overflow:hidden!important}
.app-shell .evidence-slot img{display:block;max-width:100%;height:auto;object-fit:cover}
/* Evidence preview is a check surface, not a camera UI. */
.app-shell .evidence-slot.has-preview{grid-template-columns:74px minmax(0,1fr) auto!important}
/* Role cards */
.app-shell .role-matrix{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.app-shell .role-card{min-width:0!important}
.app-shell .role-card-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
/* Modal / dropdown safety */
.app-shell .modal{width:min(760px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:90dvh!important;overflow:hidden!important}
.app-shell .modal-body{min-width:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
/* Mobile app mode */
@media(max-width:1100px){
  .app-shell .layout{grid-template-columns:224px minmax(0,1fr)!important}
  .app-shell .sidebar{width:224px!important;min-width:224px!important}
  .app-shell .content{padding-left:22px!important;padding-right:22px!important}
  .app-shell .head-actions{max-width:44%!important}
  .app-shell .role-matrix{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .app-shell .topbar{height:64px!important;min-height:64px!important;padding:0 12px!important}
  .app-shell .top-brand img{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;flex-basis:38px!important}
  .app-shell .top-brand-copy{max-width:58vw!important}
  .app-shell .top-brand-copy strong{font-size:11px!important}
  .app-shell .top-brand-copy span{font-size:8px!important}
  .app-shell .system-status,.app-shell .top-date,.app-shell .user-copy{display:none!important}
  .app-shell .layout{display:block!important;width:100%!important;min-height:calc(100dvh - 64px)!important}
  .app-shell .sidebar{position:fixed!important;top:64px!important;left:0!important;bottom:0!important;width:min(292px,88vw)!important;min-width:0!important;height:calc(100dvh - 64px)!important;max-height:none!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;z-index:900!important}
  .app-shell .sidebar.open{transform:translateX(0)!important}
  .app-shell .content{display:block!important;grid-column:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:18px 14px 94px!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:11px!important;margin-bottom:17px!important}
  .app-shell .page-head-main{width:100%!important;flex:0 0 auto!important}
  .app-shell .page-head h1{font-size:25px!important;line-height:1.12!important}
  .app-shell .page-head p{font-size:11.5px!important;line-height:1.55!important;max-width:none!important}
  .app-shell .head-actions{display:grid!important;width:100%!important;max-width:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .app-shell .head-actions .btn{width:100%!important;min-width:0!important}
  .app-shell .command-hero{border-radius:20px!important}
  .app-shell .command-summary,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane{grid-template-columns:1fr!important}
  .app-shell .command-quick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .role-matrix{grid-template-columns:1fr!important}
  .app-shell .role-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .app-shell .form-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .app-shell .form-actions .btn{width:100%!important}
  .app-shell .mobile-nav{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;height:auto!important;z-index:950!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:7px!important;border-radius:20px!important}
  .app-shell .mobile-nav .navbtn{min-width:0!important;min-height:54px!important;padding:6px 3px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;font-size:9px!important;overflow:hidden!important}
  .app-shell .mobile-nav .navbtn span:last-child{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app-shell .table{min-width:680px!important}
  .app-shell .modal{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:92dvh!important}
  .app-shell .modal-body{padding:14px!important}
  .app-shell .portioning-selector-card{position:sticky!important;top:8px!important;z-index:30!important}
  .app-shell .portioning-selector-row{grid-template-columns:1fr!important;gap:7px!important}
  .app-shell .portioning-selector-row .select{min-height:46px!important}
  .app-shell .evidence-slot.has-preview{grid-template-columns:64px minmax(0,1fr)!important}
  .app-shell .evidence-replace{grid-column:2!important;justify-self:start!important}
}
@media(max-width:560px){
  .app-shell .content{padding:15px 12px 92px!important}
  .app-shell .page-head h1{font-size:23px!important}
  .app-shell .head-actions{grid-template-columns:1fr!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr 1fr!important}
  .app-shell .command-copy h2{font-size:21px!important}
  .app-shell .command-copy p{font-size:10.5px!important}
  .app-shell .section,.app-shell .card{border-radius:17px!important}
  .app-shell .form-actions{grid-template-columns:1fr!important}
  .app-shell .mobile-nav{left:8px!important;right:8px!important;bottom:8px!important}
  .app-shell .mobile-nav .navbtn{font-size:8px!important}
}
@media(max-width:380px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .top-brand-copy span{display:none!important}
  .app-shell .page-head h1{font-size:21px!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr!important}
  .app-shell .command-quick{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* SPPG Monitoring v5.4 — AUTHORITATIVE UI/UX CONTRACT
   One final shell layer loaded last. Visual + responsive only; no business rules changed.
*/
:root{
  --sp-bg:#f4f7fb;--sp-surface:#fff;--sp-ink:#102a44;--sp-muted:#6f8193;--sp-line:#dfe8ef;
  --sp-navy:#0b3a63;--sp-blue:#1678b8;--sp-teal:#0d9b86;--sp-green:#16966a;
  --sp-amber:#e39a22;--sp-red:#d9555d;--sp-purple:#7461cf;
  --sp-radius:20px;--sp-shadow:0 10px 28px rgba(15,46,75,.07)
}
*,*::before,*::after{box-sizing:border-box}
html,body,#app{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden}
body{background:var(--sp-bg);color:var(--sp-ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{width:100%;min-height:100dvh;overflow:visible}
/* HEADER: normal document flow; it scrolls away with page content. */
.app-shell .topbar{position:relative!important;inset:auto!important;width:100%!important;height:74px!important;min-height:74px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 clamp(14px,2.4vw,32px)!important;gap:18px!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--sp-line)!important;box-shadow:0 2px 14px rgba(15,46,75,.045)!important;backdrop-filter:blur(14px);z-index:100!important;overflow:visible!important}
.app-shell .top-left{display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important}
.app-shell .top-brand{display:flex!important;align-items:center!important;gap:11px!important;min-width:0!important;max-width:100%!important}
.app-shell .top-brand img{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;object-fit:contain!important;flex:0 0 42px!important;border-radius:50%!important;background:#fff!important;padding:3px!important}
.app-shell .top-brand-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;max-width:min(620px,70vw)!important}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;writing-mode:horizontal-tb!important}
.app-shell .top-brand-copy strong{font-size:14px!important;line-height:1.25!important;font-weight:800!important}
.app-shell .top-brand-copy span{font-size:10px!important;line-height:1.35!important;color:var(--sp-muted)!important;letter-spacing:.04em!important}
.app-shell .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 0 auto!important;min-width:0!important}
/* LAYOUT: exactly one grid; content owns remaining width. */
.app-shell .layout{display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;width:100%!important;min-width:0!important;align-items:stretch!important}
.app-shell .sidebar{position:sticky!important;top:0!important;align-self:start!important;width:258px!important;min-width:258px!important;height:calc(100dvh - 0px)!important;max-height:100dvh!important;overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important}
.app-shell .content{display:block!important;grid-column:2!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:30px clamp(18px,2.8vw,44px) 90px!important;box-sizing:border-box!important;overflow-x:clip!important}
/* HEADINGS: never collapse to a one-character column. */
.app-shell .page-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;width:100%!important;min-width:0!important;margin:0 0 22px!important}
.app-shell .page-head-main{display:block!important;flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important}
.app-shell .page-head-main>*{max-width:100%!important}
.app-shell .page-head h1,.app-shell .page-head h2,.app-shell .page-head h3,.app-shell .page-head p{writing-mode:horizontal-tb!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important}
.app-shell .page-head h1{display:block!important;width:100%!important;font-size:clamp(25px,2.35vw,34px)!important;line-height:1.12!important;letter-spacing:-.04em!important;margin:5px 0 7px!important}
.app-shell .page-head p{display:block!important;width:100%!important;max-width:820px!important;font-size:12.5px!important;line-height:1.6!important;color:var(--sp-muted)!important;text-align:left!important;margin:0!important}
.app-shell .page-head-dashboard h1 span{font-weight:500!important;color:#6f8498!important}
.app-shell .head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 1 auto!important;max-width:48%!important;min-width:0!important;flex-wrap:wrap!important;gap:8px!important}
.app-shell .head-actions .btn{min-width:0!important}
/* Shared text/layout hygiene */
.app-shell .section,.app-shell .card,.app-shell .kpi,.app-shell .command-hero,.app-shell .monitor-section,.app-shell .analytics-card,.app-shell .distribution-trip-card,.app-shell .washing-batch-card{min-width:0!important;max-width:100%!important}
.app-shell .section-title,.app-shell .section-heading,.app-shell .card-head-modern{min-width:0!important}
.app-shell .section-title>div:first-child,.app-shell .section-heading>div:first-child,.app-shell .card-head-modern>div:first-child{min-width:0!important;flex:1 1 auto!important}
.app-shell .section-title h3,.app-shell .section-heading h3,.app-shell .card h3,.app-shell .section p,.app-shell .card p,.app-shell .muted,.app-shell .form-help{overflow-wrap:break-word!important;word-break:normal!important;line-height:1.5!important}
.app-shell .btn,.app-shell .navbtn,.app-shell .mobile-nav button{font-family:inherit!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important}
.app-shell .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.app-shell .input,.app-shell .select,.app-shell .textarea,.app-shell .input-wrap input{width:100%!important;max-width:100%!important;min-width:0!important}
.app-shell .form-grid{min-width:0!important}
.app-shell .form-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important}
/* Tables: swipe only the table, never the whole page. */
.app-shell .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
.app-shell .table{width:100%;min-width:720px}
.app-shell .table th,.app-shell .table td{vertical-align:middle!important;line-height:1.4!important;overflow-wrap:anywhere!important;word-break:normal!important}
.app-shell .table th{white-space:normal!important}
/* Operational cards */
.app-shell .command-hero{overflow:hidden!important}
.app-shell .command-copy,.app-shell .command-summary,.app-shell .command-kpis,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .command-quick{min-width:0!important}
.app-shell .command-copy h2,.app-shell .command-copy p{writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:break-word!important}
.app-shell .operation-card,.app-shell .quick,.app-shell .attention,.app-shell .summary-item,.app-shell .command-kpi{min-width:0!important}
.app-shell .operation-main,.app-shell .operation-state{min-width:0!important}
.app-shell .operation-main strong,.app-shell .operation-main span,.app-shell .operation-state b,.app-shell .operation-state span,.app-shell .quick strong,.app-shell .quick span{overflow-wrap:anywhere!important}
/* Portioning: selector-first + progressive disclosure. */
.app-shell .portioning-selector-card{min-width:0!important}
.app-shell .portioning-selector-row{min-width:0!important}
.app-shell .portioning-cluster{min-width:0!important}
.app-shell .portioning-route-stack{min-width:0!important}
.app-shell .portioning-route-card{min-width:0!important}
.app-shell .evidence-grid,.app-shell .evidence-pair,.app-shell .evidence-group{min-width:0!important}
.app-shell .evidence-slot{min-width:0!important;overflow:hidden!important}
.app-shell .evidence-slot img{display:block;max-width:100%;height:auto;object-fit:cover}
/* Evidence preview is a check surface, not a camera UI. */
.app-shell .evidence-slot.has-preview{grid-template-columns:74px minmax(0,1fr) auto!important}
/* Role cards */
.app-shell .role-matrix{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.app-shell .role-card{min-width:0!important}
.app-shell .role-card-actions{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
/* Modal / dropdown safety */
.app-shell .modal{width:min(760px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:90dvh!important;overflow:hidden!important}
.app-shell .modal-body{min-width:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
/* Mobile app mode */
@media(max-width:1100px){
  .app-shell .layout{grid-template-columns:224px minmax(0,1fr)!important}
  .app-shell .sidebar{width:224px!important;min-width:224px!important}
  .app-shell .content{padding-left:22px!important;padding-right:22px!important}
  .app-shell .head-actions{max-width:44%!important}
  .app-shell .role-matrix{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .app-shell .topbar{height:64px!important;min-height:64px!important;padding:0 12px!important}
  .app-shell .top-brand img{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;flex-basis:38px!important}
  .app-shell .top-brand-copy{max-width:58vw!important}
  .app-shell .top-brand-copy strong{font-size:11px!important}
  .app-shell .top-brand-copy span{font-size:8px!important}
  .app-shell .system-status,.app-shell .top-date,.app-shell .user-copy{display:none!important}
  .app-shell .layout{display:block!important;width:100%!important;min-height:calc(100dvh - 64px)!important}
  .app-shell .sidebar{position:fixed!important;top:64px!important;left:0!important;bottom:0!important;width:min(292px,88vw)!important;min-width:0!important;height:calc(100dvh - 64px)!important;max-height:none!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;z-index:900!important}
  .app-shell .sidebar.open{transform:translateX(0)!important}
  .app-shell .content{display:block!important;grid-column:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:18px 14px 94px!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:11px!important;margin-bottom:17px!important}
  .app-shell .page-head-main{width:100%!important;flex:0 0 auto!important}
  .app-shell .page-head h1{font-size:25px!important;line-height:1.12!important}
  .app-shell .page-head p{font-size:11.5px!important;line-height:1.55!important;max-width:none!important}
  .app-shell .head-actions{display:grid!important;width:100%!important;max-width:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .app-shell .head-actions .btn{width:100%!important;min-width:0!important}
  .app-shell .command-hero{border-radius:20px!important}
  .app-shell .command-summary,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane{grid-template-columns:1fr!important}
  .app-shell .command-quick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .role-matrix{grid-template-columns:1fr!important}
  .app-shell .role-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .app-shell .form-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .app-shell .form-actions .btn{width:100%!important}
  .app-shell .mobile-nav{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;height:auto!important;z-index:950!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:7px!important;border-radius:20px!important}
  .app-shell .mobile-nav .navbtn{min-width:0!important;min-height:54px!important;padding:6px 3px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;font-size:9px!important;overflow:hidden!important}
  .app-shell .mobile-nav .navbtn span:last-child{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .app-shell .table{min-width:680px!important}
  .app-shell .modal{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:92dvh!important}
  .app-shell .modal-body{padding:14px!important}
  .app-shell .portioning-selector-card{position:sticky!important;top:8px!important;z-index:30!important}
  .app-shell .portioning-selector-row{grid-template-columns:1fr!important;gap:7px!important}
  .app-shell .portioning-selector-row .select{min-height:46px!important}
  .app-shell .evidence-slot.has-preview{grid-template-columns:64px minmax(0,1fr)!important}
  .app-shell .evidence-replace{grid-column:2!important;justify-self:start!important}
}
@media(max-width:560px){
  .app-shell .content{padding:15px 12px 92px!important}
  .app-shell .page-head h1{font-size:23px!important}
  .app-shell .head-actions{grid-template-columns:1fr!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr 1fr!important}
  .app-shell .command-copy h2{font-size:21px!important}
  .app-shell .command-copy p{font-size:10.5px!important}
  .app-shell .section,.app-shell .card{border-radius:17px!important}
  .app-shell .form-actions{grid-template-columns:1fr!important}
  .app-shell .mobile-nav{left:8px!important;right:8px!important;bottom:8px!important}
  .app-shell .mobile-nav .navbtn{font-size:8px!important}
}
@media(max-width:380px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .top-brand-copy span{display:none!important}
  .app-shell .page-head h1{font-size:21px!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr!important}
  .app-shell .command-quick{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* SPPG Monitoring v5.5 — operational intelligence + resilient responsive UI */
:root{--sppg-navy:#0b315d;--sppg-blue:#1976d2;--sppg-teal:#1f9d75;--sppg-orange:#ed9b17;--sppg-purple:#7155c7;--sppg-red:#d64545;--surface:#fff;--soft:#f5f8fc;--line:#dbe5ef;--text:#10233f;--muted:#6b7c90}
.global-search-wrap{position:relative;min-width:260px;max-width:420px;flex:1}.global-search{height:42px!important;border-radius:14px!important;padding-left:42px!important;background:#f6f9fc!important}.global-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6b7c90;pointer-events:none}.global-search-hint{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#8da0b4;background:#fff;border:1px solid var(--line);border-radius:7px;padding:2px 6px}
.global-results{display:grid;gap:8px}.global-result{display:flex;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;width:100%;cursor:pointer}.global-result:hover{border-color:#9bc9ee;background:#f7fbff}.global-result-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef6fd;color:var(--sppg-blue);flex:0 0 auto}.global-result-main{min-width:0;display:grid;gap:2px}.global-result-main strong,.global-result-main small{overflow-wrap:anywhere}.global-result-main small{color:var(--muted)}
.dashboard-intel-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px}.intel-card{min-width:0}.pulse-list{display:grid;gap:10px}.pulse-row{display:grid;grid-template-columns:78px 1fr 72px;gap:12px;align-items:center}.pulse-date{font-size:12px;color:var(--muted);font-weight:700}.pulse-bar{height:10px;background:#edf2f7;border-radius:99px;overflow:hidden}.pulse-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1976d2,#1f9d75);min-width:3px}.pulse-value{text-align:right;font-weight:800;color:var(--text)}
.dashboard-timeline{display:grid;gap:0}.dashboard-timeline-item{display:grid;grid-template-columns:18px 1fr auto;gap:12px;position:relative;padding:0 0 16px}.dashboard-timeline-item:not(:last-child) .timeline-line{position:absolute;left:8px;top:16px;bottom:0;width:2px;background:#e5edf5}.timeline-dot-live{width:16px;height:16px;border-radius:50%;background:#1976d2;border:4px solid #e9f4ff;z-index:1}.dashboard-timeline-item.done .timeline-dot-live{background:#1f9d75}.dashboard-timeline-copy{display:grid;gap:2px;min-width:0}.dashboard-timeline-copy strong{overflow-wrap:anywhere}.dashboard-timeline-copy small{color:var(--muted);overflow-wrap:anywhere}.dashboard-timeline-time{font-size:12px;color:#71849a;white-space:nowrap}
.status-legend{display:flex;gap:8px;flex-wrap:wrap}.status-legend .badge{display:inline-flex;align-items:center;gap:6px}.status-dot.sm{width:7px;height:7px}
.attention.clickable{cursor:pointer}.attention.clickable:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,45,75,.08)}
.audit-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.audit-row{display:grid;grid-template-columns:145px minmax(130px,.7fr) minmax(170px,1fr) minmax(190px,1.3fr) 110px;gap:12px;align-items:center}.audit-actor{display:grid;gap:2px}.audit-actor small,.audit-object small{color:var(--muted);overflow-wrap:anywhere}.audit-payload{font-size:12px;color:#53677d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audit-actions{display:flex;gap:8px;justify-content:flex-end}
.evidence-center-toolbar{display:grid;grid-template-columns:1.4fr repeat(4,minmax(130px,1fr));gap:10px}.evidence-center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.evidence-center-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}.evidence-center-thumb{aspect-ratio:16/9;background:#eef3f8;display:grid;place-items:center;overflow:hidden}.evidence-center-thumb img{width:100%;height:100%;object-fit:cover}.evidence-center-body{padding:13px;display:grid;gap:5px}.evidence-center-body strong{overflow-wrap:anywhere}.evidence-center-meta{font-size:12px;color:var(--muted);display:grid;gap:2px}
@media (max-width:1100px){.dashboard-intel-grid{grid-template-columns:1fr}.global-search-wrap{min-width:200px}.audit-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.evidence-center-toolbar{grid-template-columns:1fr 1fr}.evidence-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.global-search-wrap{min-width:0;width:100%;order:3;flex-basis:100%}.global-search-hint{display:none}.top-actions{flex-wrap:wrap}.dashboard-intel-grid{gap:12px}.pulse-row{grid-template-columns:65px 1fr 58px}.audit-filter-grid,.evidence-center-toolbar{grid-template-columns:1fr}.evidence-center-grid{grid-template-columns:1fr}.audit-row{grid-template-columns:1fr;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}.audit-actions{justify-content:flex-start}.dashboard-timeline-item{grid-template-columns:18px 1fr}.dashboard-timeline-time{grid-column:2}.global-result{padding:12px}.global-result-icon{width:34px;height:34px}}
@media (max-width:390px){.global-search{height:40px!important}.pulse-row{grid-template-columns:1fr}.pulse-value{text-align:left}.pulse-bar{order:3;grid-column:1/-1}}
.audit-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.audit-detail-grid>div{display:grid;gap:4px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.audit-detail-grid span{color:var(--muted);overflow-wrap:anywhere}.audit-json{margin:12px 0 0;padding:14px;border-radius:14px;background:#0b1f35;color:#e8f1f8;white-space:pre-wrap;overflow:auto;max-height:360px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}@media(max-width:760px){.audit-detail-grid{grid-template-columns:1fr}}
.schedule-calendar-panel{margin-top:14px}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendar-weekdays{margin-bottom:8px}.calendar-weekdays b{text-align:center;color:#71849a;font-size:12px}.calendar-day{min-height:108px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:9px;text-align:left;display:grid;align-content:start;gap:5px;cursor:pointer;color:var(--text)}.calendar-day:hover{border-color:#9bc9ee;background:#f7fbff}.calendar-day.is-empty{background:#f7f9fb;cursor:default}.calendar-day.has-events{box-shadow:inset 0 3px 0 #1976d2}.calendar-date{font-weight:800}.calendar-event{font-size:11px;line-height:1.3;background:#eef6fd;color:#175c91;border-radius:7px;padding:4px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-more{font-size:10px;color:#6b7c90}@media(max-width:760px){.calendar-weekdays,.calendar-grid{gap:5px}.calendar-day{min-height:80px;padding:6px;border-radius:10px}.calendar-event{font-size:9px;padding:3px}.calendar-more{font-size:9px}}

/* v5.5.1 — GLOBAL CHROME + TYPOGRAPHY CORRECTIVE
   One header coordinate system, one content coordinate system, no cumulative offsets. */
html,body,#app{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
.app-shell{position:relative;min-height:100dvh;width:100%;overflow-x:clip}
.app-shell .topbar{
  position:fixed!important;inset:0 0 auto 0!important;width:100%!important;height:72px!important;min-height:72px!important;
  z-index:1000!important;padding:0 clamp(14px,2vw,28px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:rgba(255,255,255,.97)!important;backdrop-filter:blur(18px)!important;
}
.app-shell .layout{
  display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;align-items:stretch!important;
  width:100%!important;max-width:100%!important;min-width:0!important;min-height:100dvh!important;
  padding-top:72px!important;margin:0!important;
}
.app-shell .sidebar{
  position:fixed!important;left:0!important;top:72px!important;bottom:0!important;width:258px!important;min-width:258px!important;
  height:calc(100dvh - 72px)!important;max-height:calc(100dvh - 72px)!important;
  z-index:900!important;overflow-x:hidden!important;overflow-y:auto!important;
}
.app-shell .content{
  grid-column:2!important;min-width:0!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:30px clamp(16px,2.4vw,38px) 92px!important;overflow-x:clip!important;
}
.app-shell .page-head{min-width:0!important;width:100%!important}
.app-shell .page-head>div,.app-shell .section-heading>div{min-width:0!important}
.app-shell .page-head h1,.app-shell .page-head p,.app-shell .section-heading h3,.app-shell .section-heading p{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important}
.app-shell .page-head h1{line-height:1.12!important}
.app-shell .page-head p,.app-shell .section-heading p{line-height:1.55!important;text-align:left!important}
.app-shell .kpi-grid,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .dashboard-split,.app-shell .quick-grid{min-width:0!important;width:100%!important}
.app-shell .kpi,.app-shell .card,.app-shell .quick,.app-shell .operation-card,.app-shell .attention{min-width:0!important}
.app-shell .kpi-label,.app-shell .kpi-note,.app-shell .quick strong,.app-shell .quick span,.app-shell .operation-card *{overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.4!important}
.app-shell .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important}
.app-shell .table{width:100%!important}

/* Dashboard sections become compact, controllable dropdown panels. */
.dashboard-collapsible{margin-top:20px!important}
.collapse-head{width:100%;border:0;background:transparent;padding:0 2px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;text-align:left;cursor:pointer;color:var(--ux-text,#123552)}
.collapse-head>span:first-child{min-width:0;display:grid;gap:3px}
.collapse-head .eyebrow{display:block}
.collapse-head strong{font-size:18px;line-height:1.2;font-weight:850;overflow-wrap:anywhere}
.collapse-head small{font-size:11px;color:var(--ux-muted,#6d8195);line-height:1.45;overflow-wrap:anywhere}
.collapse-chevron{width:34px;height:34px;flex:0 0 34px;border:1px solid #dce7ef;border-radius:11px;background:#fff;display:grid;place-items:center;font-size:17px;color:#176b9f;box-shadow:0 3px 12px rgba(18,53,82,.05)}
.collapse-body[hidden]{display:none!important}

/* Audit list: readable actor + object + time, without horizontal breakage. */
.activity-card{padding:14px!important}
.audit-row{min-width:0!important}
.audit-actor,.audit-object{min-width:0!important}
.audit-actor b,.audit-object b{overflow-wrap:anywhere!important;line-height:1.35!important}
.audit-payload{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Login alignment contract: explanatory text centered, fields and labels left aligned. */
.login-card{text-align:center!important}
.login-card .lead,.login-help,.security-box,.login-footer{display:block;text-align:center!important;line-height:1.55!important}
.login-form{text-align:left!important}
.login-form .field label,.login-form .field-group label{display:block;text-align:left!important;line-height:1.35!important}
.login-options{align-items:flex-start!important}
.login-submit{justify-content:center!important;text-align:center!important}
.security-box strong{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}

@media(max-width:1100px){
  .app-shell .layout{grid-template-columns:232px minmax(0,1fr)!important}
  .app-shell .sidebar{width:232px!important;min-width:232px!important}
  .app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .app-shell .topbar{height:64px!important;min-height:64px!important}
  .app-shell .layout{display:block!important;padding-top:64px!important;min-height:100dvh!important}
  .app-shell .sidebar{top:64px!important;bottom:0!important;width:min(286px,88vw)!important;min-width:0!important;height:calc(100dvh - 64px)!important;max-height:none!important}
  .app-shell .content{display:block!important;width:100%!important;max-width:none!important;padding:18px 14px 92px!important;margin:0!important}
  .app-shell .page-head{display:block!important}
  .app-shell .page-head h1{font-size:25px!important;max-width:100%!important}
  .app-shell .page-head p{max-width:100%!important}
  .app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .collapse-head strong{font-size:16px!important}
}
@media(max-width:600px){
  .app-shell .top-brand-copy strong{font-size:12px!important}
  .app-shell .top-brand-copy span{display:none!important}
  .app-shell .content{padding:16px 12px 90px!important}
  .app-shell .kpi-grid{grid-template-columns:1fr!important}
  .collapse-head{align-items:center!important}
  .collapse-head small{font-size:10px!important}
  .audit-row{padding:12px 0!important}
}

/* v5.5.2 — RESPONSIVE HARDENING: desktop / tablet / phone */
*{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%;font:inherit}
.app-shell .topbar>*{min-width:0}
.app-shell .top-left,.app-shell .top-actions,.app-shell .top-brand{min-width:0}
.app-shell .top-brand-copy{min-width:0}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .content>*{min-width:0;max-width:100%}
.app-shell .page-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important}
.app-shell .page-head-main{min-width:0;flex:1 1 auto}
.app-shell .head-actions{flex:0 0 auto;max-width:100%}
.app-shell .command-hero,.app-shell .dashboard-split,.app-shell .charts{max-width:100%;min-width:0}
.app-shell .command-copy,.app-shell .command-kpis,.app-shell .command-summary{min-width:0}
.app-shell .command-copy h2,.app-shell .command-copy p,.app-shell .card h3,.app-shell .card p{overflow-wrap:break-word;word-break:normal}
.app-shell .form-grid>*{min-width:0}
.app-shell .form-grid input,.app-shell .form-grid select,.app-shell .form-grid textarea{width:100%}
.app-shell .table-wrap{display:block;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.app-shell .table{table-layout:auto}
.app-shell .table th,.app-shell .table td{vertical-align:middle;line-height:1.4}

/* wide desktop: centered readable canvas, sidebar remains independent */
@media(min-width:1440px){
  .app-shell .content{padding-left:clamp(28px,3vw,52px)!important;padding-right:clamp(28px,3vw,52px)!important}
  .app-shell .content-inner{max-width:1540px;margin-inline:auto}
}
/* laptop / small desktop */
@media(min-width:821px) and (max-width:1199px){
  .app-shell .layout{grid-template-columns:224px minmax(0,1fr)!important}
  .app-shell .sidebar{width:224px!important;min-width:224px!important}
  .app-shell .content{grid-column:2!important;padding:24px 20px 72px!important}
  .app-shell .page-head h1{font-size:clamp(25px,3vw,30px)!important}
  .app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* tablet and phone: drawer sidebar + single content coordinate system */
@media(max-width:820px){
  html,body{overflow-x:hidden!important}
  .app-shell .topbar{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important;gap:8px!important}
  .app-shell .layout{display:block!important;width:100%!important;padding-top:64px!important}
  .app-shell .sidebar{position:fixed!important;left:-310px!important;top:64px!important;bottom:0!important;width:min(286px,86vw)!important;min-width:0!important;transition:left .22s ease!important;z-index:1100!important;box-shadow:18px 0 45px rgba(5,35,65,.22)!important}
  .app-shell .sidebar.open{left:0!important}
  .sidebar-scrim.open{display:block!important;position:fixed!important;inset:64px 0 0!important;z-index:1090!important;background:rgba(4,27,46,.42)!important}
  .app-shell .content{grid-column:auto!important;margin:0!important;width:100%!important;min-width:0!important;padding:18px 16px calc(96px + env(safe-area-inset-bottom))!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:10px!important}
  .app-shell .head-actions{width:100%!important;display:flex!important;flex-wrap:wrap!important}
  .app-shell .head-actions .btn{flex:1 1 180px;min-height:44px}
  .app-shell .command-hero{grid-template-columns:1fr!important}
  .app-shell .dashboard-split,.app-shell .charts{grid-template-columns:1fr!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mobile-nav{left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)!important}
}
/* phone */
@media(max-width:600px){
  .app-shell .topbar{height:60px!important;min-height:60px!important}
  .app-shell .layout{padding-top:60px!important}
  .app-shell .sidebar{top:60px!important;height:calc(100dvh - 60px)!important}
  .sidebar-scrim.open{inset:60px 0 0!important}
  .app-shell .content{padding:16px 12px calc(92px + env(safe-area-inset-bottom))!important}
  .app-shell .page-head h1{font-size:clamp(23px,7vw,28px)!important;line-height:1.12!important;letter-spacing:-.5px!important}
  .app-shell .page-head p{font-size:12px!important;line-height:1.55!important}
  .app-shell .head-actions{display:grid!important;grid-template-columns:1fr!important}
  .app-shell .head-actions .btn{width:100%!important}
  .app-shell .command-hero{padding:18px!important;border-radius:18px!important}
  .app-shell .command-copy h2{font-size:clamp(21px,6vw,26px)!important;line-height:1.15!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .app-shell .kpi,.app-shell .command-kpi,.app-shell .operation-card,.app-shell .attention,.app-shell .quick{padding:13px!important;min-width:0!important}
  .app-shell .kpi-value{font-size:26px!important}
  .app-shell .table{min-width:680px!important}
  .app-shell .table th,.app-shell .table td{padding:11px 12px!important;white-space:normal!important;overflow-wrap:break-word!important}
  .login-card{width:min(100%,560px)!important;margin-inline:auto!important;padding:clamp(20px,5vw,34px)!important}
  .login-card .lead,.login-help,.security-box,.login-footer{text-align:center!important;max-width:100%!important}
  .login-form{text-align:left!important}
}
/* narrow phone: avoid cramped two-column cards */
@media(max-width:420px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .quick-grid{grid-template-columns:1fr!important}
  .app-shell .top-brand-copy strong{max-width:190px}
  .mobile-nav .navbtn{min-width:68px!important;padding-inline:6px!important}
}


/*
 * SPPG Monitoring v5.5.3 — Responsive Experience Layer
 * Final override: one coordinate system, predictable typography, app-like controls.
 * Loaded last so legacy CSS cannot reintroduce cumulative offsets.
 */
:root{
  --ux-header:72px;
  --ux-sidebar:258px;
  --ux-page-max:1680px;
  --ux-gutter:clamp(18px,2.4vw,42px);
  --ux-bottom-nav:92px;
  --ux-radius:18px;
  --ux-line:#dfe8f0;
  --ux-bg:#f4f7fb;
  --ux-ink:#102a44;
  --ux-muted:#708399;
}
html{scroll-behavior:smooth}
html,body,#app{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden!important}
body{background:var(--ux-bg)}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{max-width:100%;min-width:0}
img,svg{max-width:100%}

/* ---------- GLOBAL APP CHROME ---------- */
.app-shell{position:relative;width:100%;min-height:100dvh;overflow-x:clip}
.app-shell .topbar{
  position:fixed!important;top:0;left:0;right:0;width:100%!important;height:var(--ux-header)!important;min-height:var(--ux-header)!important;
  z-index:2000!important;padding:0 clamp(14px,2vw,30px)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
  background:rgba(255,255,255,.96)!important;border-bottom:1px solid rgba(207,220,232,.92)!important;
  box-shadow:0 4px 20px rgba(16,42,68,.055)!important;backdrop-filter:blur(18px)!important;
}
.app-shell .top-left{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;flex:1 1 auto!important}
.app-shell .hamb{display:none;border:0;background:#eef6fc;color:#1269a0;width:40px;height:40px;border-radius:12px;place-items:center;flex:0 0 auto}
.app-shell .top-brand{min-width:0;display:flex!important;align-items:center!important;gap:10px!important}
.app-shell .top-brand img{width:42px!important;height:42px!important;flex:0 0 42px!important;object-fit:contain}
.app-shell .top-brand-copy{min-width:0;display:grid;gap:2px}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell .top-brand-copy strong{font-size:15px!important;line-height:1.15!important}
.app-shell .top-brand-copy span{font-size:10px!important;line-height:1.25!important}
.app-shell .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;min-width:0!important;flex:0 1 auto!important}
.app-shell .global-search-wrap{flex:1 1 360px!important;width:min(380px,34vw)!important;min-width:220px!important;max-width:420px!important}
.app-shell .system-status,.app-shell .top-date{white-space:nowrap!important;flex:0 0 auto!important}
.app-shell .notification-btn,.app-shell .profile-trigger{flex:0 0 auto!important}

/* One and only one desktop offset. */
.app-shell .layout{
  display:grid!important;grid-template-columns:var(--ux-sidebar) minmax(0,1fr)!important;align-items:stretch!important;
  width:100%!important;min-width:0!important;min-height:100dvh!important;margin:0!important;padding-top:var(--ux-header)!important;
}
.app-shell .sidebar{
  position:fixed!important;left:0!important;top:var(--ux-header)!important;bottom:0!important;width:var(--ux-sidebar)!important;min-width:var(--ux-sidebar)!important;
  height:calc(100dvh - var(--ux-header))!important;max-height:calc(100dvh - var(--ux-header))!important;
  z-index:1500!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}
.app-shell .content{
  grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;
  padding:clamp(24px,3vw,42px) var(--ux-gutter) var(--ux-bottom-nav)!important;overflow-x:clip!important;
}
.app-shell .content>*{min-width:0;max-width:100%}
.app-shell .sidebar-scrim{display:none}

/* ---------- TYPOGRAPHY / ALIGNMENT CONTRACT ---------- */
.app-shell .page-head{width:100%!important;min-width:0!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important}
.app-shell .page-head>*,.app-shell .page-head-main,.app-shell .section-heading>div{min-width:0!important}
.app-shell .page-head h1,.app-shell .page-head p,.app-shell .section-heading h3,.app-shell .section-heading p{max-width:100%!important;word-break:normal!important;overflow-wrap:anywhere!important}
.app-shell .page-head h1{line-height:1.12!important;letter-spacing:-.7px!important;margin:0 0 7px!important}
.app-shell .page-head p,.app-shell .section-heading p{line-height:1.55!important;text-align:left!important}
.app-shell .head-actions{display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;max-width:52%!important}
.app-shell .head-actions .btn{white-space:normal!important;overflow-wrap:anywhere!important}
.app-shell .card,.app-shell .section,.app-shell .kpi,.app-shell .operation-card,.app-shell .quick,.app-shell .attention,.app-shell .command-kpi{min-width:0!important;max-width:100%!important}
.app-shell .card h1,.app-shell .card h2,.app-shell .card h3,.app-shell .card h4,.app-shell .card p,
.app-shell .section h1,.app-shell .section h2,.app-shell .section h3,.app-shell .section h4,.app-shell .section p{max-width:100%;word-break:normal;overflow-wrap:anywhere}

/* ---------- GRID BEHAVIOUR ---------- */
.app-shell .kpi-grid,.app-shell .command-kpis,.app-shell .operations-lane,.app-shell .attention-grid,.app-shell .command-quick,.app-shell .quick-grid,
.app-shell .dashboard-split,.app-shell .charts,.app-shell .system-grid,.app-shell .evidence-center-grid{min-width:0!important;width:100%!important}
.app-shell .kpi-grid,.app-shell .command-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.app-shell .dashboard-split{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important}
.app-shell .charts{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* Never let controls create a layout wider than their parent. */
.app-shell .form-grid>*{min-width:0!important}
.app-shell .form-grid input,.app-shell .form-grid select,.app-shell .form-grid textarea{width:100%!important}
.app-shell .input,.app-shell .select,.app-shell .textarea{max-width:100%!important}
.app-shell .btn{min-height:42px;line-height:1.25}

/* Tables scroll as a component, not the entire page. */
.app-shell .table-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
.app-shell .table-wrap .table{width:100%!important;max-width:none!important}
.app-shell .table th,.app-shell .table td{vertical-align:middle!important;line-height:1.4!important}

/* ---------- LOGIN: CENTER COPY / LEFT FORM ---------- */
.login-page{width:100%;min-height:100dvh;overflow-x:hidden}
.login-card{text-align:center!important;max-width:560px!important;width:100%!important}
.login-card .lead,.login-help,.security-box,.login-footer{text-align:center!important;line-height:1.55!important}
.login-form{text-align:left!important;width:100%!important}
.login-form .field label,.login-form .field-group label{text-align:left!important;line-height:1.35!important}
.login-options{align-items:flex-start!important}
.login-submit{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:7px}
.security-box strong{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}

/* ---------- DESKTOP: breathing room without oversized empty columns ---------- */
@media(min-width:1440px){
  .app-shell .content{padding-left:clamp(28px,2.7vw,52px)!important;padding-right:clamp(28px,2.7vw,52px)!important}
  .app-shell .page-head h1{font-size:clamp(28px,2.3vw,36px)!important}
}
@media(min-width:821px) and (max-width:1199px){
  :root{--ux-sidebar:232px;--ux-header:68px}
  .app-shell .topbar{padding-inline:18px!important}
  .app-shell .global-search-wrap{width:260px!important;min-width:180px!important}
  .app-shell .content{padding:24px 20px 86px!important}
  .app-shell .page-head{gap:16px!important}
  .app-shell .head-actions{max-width:45%!important}
  .app-shell .kpi-grid,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .app-shell .dashboard-split,.app-shell .charts{grid-template-columns:1fr!important}
}

/* ---------- TABLET / PHONE: app shell becomes one coordinate system ---------- */
@media(max-width:820px){
  :root{--ux-header:64px}
  .app-shell .topbar{height:64px!important;min-height:64px!important;padding:0 12px!important;gap:8px!important}
  .app-shell .hamb{display:grid!important}
  .app-shell .top-brand img{width:38px!important;height:38px!important;flex-basis:38px!important}
  .app-shell .top-brand-copy strong{font-size:12px!important}
  .app-shell .top-brand-copy span{font-size:8px!important}
  .app-shell .global-search-wrap,.app-shell .system-status,.app-shell .top-date{display:none!important}
  .app-shell .top-actions{gap:5px!important}
  .app-shell .notification-btn{width:38px!important;height:38px!important}
  .app-shell .profile-trigger{width:38px!important;height:38px!important}

  .app-shell .layout{display:block!important;width:100%!important;min-height:100dvh!important;padding-top:64px!important}
  .app-shell .sidebar{
    top:64px!important;left:0!important;bottom:0!important;width:min(292px,88vw)!important;min-width:0!important;height:calc(100dvh - 64px)!important;
    max-height:none!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;box-shadow:18px 0 45px rgba(5,35,65,.24)!important;
  }
  .app-shell .sidebar.open{transform:translateX(0)!important}
  .app-shell .sidebar-scrim{display:none!important;position:fixed!important;inset:64px 0 0!important;z-index:1400!important;background:rgba(4,27,46,.44)!important}
  .app-shell .sidebar-scrim.open{display:block!important}
  .app-shell .content{display:block!important;grid-column:auto!important;width:100%!important;min-width:0!important;padding:18px 16px calc(var(--ux-bottom-nav) + env(safe-area-inset-bottom))!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:11px!important}
  .app-shell .page-head h1{font-size:clamp(24px,6vw,29px)!important;line-height:1.12!important}
  .app-shell .page-head p{font-size:12px!important;line-height:1.55!important}
  .app-shell .head-actions{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .head-actions .btn{width:100%!important;min-width:0!important}
  .app-shell .dashboard-split,.app-shell .charts{grid-template-columns:1fr!important}
  .app-shell .kpi-grid,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .app-shell .mobile-nav{
    display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;
    z-index:1300!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:7px!important;
    width:auto!important;max-width:none!important;min-width:0!important;border:1px solid #dfe8f0!important;border-radius:20px!important;
    background:rgba(255,255,255,.96)!important;box-shadow:0 16px 38px rgba(7,38,67,.18)!important;backdrop-filter:blur(18px)!important;
  }
  .app-shell .mobile-nav .navbtn{width:100%!important;min-width:0!important;min-height:54px!important;margin:0!important;padding:6px 3px!important;border-radius:14px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;text-align:center!important}
  .app-shell .mobile-nav .navbtn .nav-icon{width:24px!important;height:24px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}

  /* Modals become true bottom sheets but keep comfortable reading width. */
  .modal{max-width:min(680px,100vw)!important;width:100%!important}
  .modal-body{max-height:calc(100dvh - 110px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
}

@media(max-width:600px){
  .app-shell .content{padding:15px 12px calc(92px + env(safe-area-inset-bottom))!important}
  .app-shell .top-brand-copy{max-width:52vw}
  .app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{max-width:100%}
  .app-shell .page-head h1{font-size:clamp(23px,7vw,28px)!important}
  .app-shell .head-actions{grid-template-columns:1fr!important}
  .app-shell .command-hero{padding:18px!important;border-radius:18px!important}
  .app-shell .command-copy h2{font-size:clamp(21px,6vw,26px)!important;line-height:1.15!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .app-shell .operations-lane,.app-shell .attention-grid,.app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:1fr!important;gap:9px!important}
  .app-shell .kpi,.app-shell .command-kpi,.app-shell .operation-card,.app-shell .attention,.app-shell .quick{padding:13px!important}
  .app-shell .kpi-value{font-size:25px!important}
  .app-shell .section,.app-shell .card{border-radius:18px!important}
  .app-shell .table{min-width:680px!important}
  .app-shell .table th,.app-shell .table td{padding:10px 11px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .app-shell .form-grid{grid-template-columns:1fr!important}
  .app-shell .form-actions{display:grid!important;grid-template-columns:1fr!important}
  .app-shell .form-actions .btn{width:100%!important}

  .login-page{display:flex!important;flex-direction:column!important;min-height:100dvh!important}
  .login-visual{min-height:auto!important;padding:20px 16px 18px!important}
  .login-title{font-size:clamp(29px,9vw,36px)!important;line-height:1.05!important;margin-top:28px!important}
  .login-subtitle{font-size:12px!important;line-height:1.55!important}
  .login-panel{padding:12px!important}
  .login-card{padding:24px 17px!important;border-radius:22px!important}
  .login-card h1{font-size:28px!important}
  .login-options{display:block!important}
  .login-help{margin-bottom:8px!important}
  .security-box strong{font-size:12px!important}
  .security-box span{font-size:11px!important}
}

@media(max-width:420px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .topbar{padding-left:9px!important;padding-right:9px!important}
  .app-shell .top-brand-copy{max-width:46vw}
  .app-shell .top-brand-copy strong{font-size:11px!important}
  .app-shell .top-brand-copy span{font-size:7px!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .app-shell .kpi,.app-shell .command-kpi{padding:11px!important}
  .app-shell .kpi-value{font-size:22px!important}
  .app-shell .mobile-nav{left:7px!important;right:7px!important;padding:6px!important}
  .app-shell .mobile-nav .navbtn{min-height:52px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:8px!important}
}
@media(max-width:360px){
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr!important}
  .app-shell .mobile-nav .navbtn{min-height:50px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:7.5px!important}
  .login-card{padding:20px 14px!important}
}

/* Accessibility / touch targets */
@media(pointer:coarse){
  .app-shell .navbtn,.app-shell .btn,.app-shell .icon-btn,.app-shell .avatar{min-height:42px}
  .app-shell input,.app-shell select,.app-shell textarea{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


/*
 * SPPG Monitoring v5.5.4 — Responsive UX System
 * Purpose: final layout normalization for desktop / tablet / phone.
 * Loaded LAST so this file is the single responsive authority.
 */
:root{
  --ux-header:72px;
  --ux-sidebar:258px;
  --ux-gutter:clamp(16px,2.3vw,40px);
  --ux-bottom:88px;
  --ux-bg:#f4f7fb;
  --ux-line:#dfe8f0;
  --ux-ink:#102a44;
  --ux-muted:#708399;
  --ux-radius:18px;
}

/* ===== GLOBAL RESET / NO HORIZONTAL PAGE SCROLL ===== */
html,body,#app{width:100%;min-width:0;max-width:100%;margin:0;padding:0;overflow-x:hidden!important}
body{background:var(--ux-bg);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%;min-width:0}
button{touch-action:manipulation}

/* ===== APP CHROME: ONE COORDINATE SYSTEM ===== */
.app-shell{position:relative;width:100%;min-height:100dvh;overflow-x:clip}
.app-shell .topbar{
  position:fixed!important;inset:0 0 auto 0!important;
  width:100%!important;height:var(--ux-header)!important;min-height:var(--ux-header)!important;
  z-index:2000!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:14px!important;padding:0 clamp(12px,2vw,30px)!important;
  background:rgba(255,255,255,.97)!important;border-bottom:1px solid #dce6ef!important;
  box-shadow:0 4px 22px rgba(16,42,68,.07)!important;backdrop-filter:blur(16px)!important;
}
.app-shell .top-left,.app-shell .top-actions,.app-shell .top-brand{display:flex!important;align-items:center!important;min-width:0!important}
.app-shell .top-left{gap:10px!important;flex:1 1 auto!important}
.app-shell .top-actions{gap:8px!important;justify-content:flex-end!important;flex:0 1 auto!important}
.app-shell .top-brand{gap:10px!important;min-width:0!important}
.app-shell .top-brand img{width:42px!important;height:42px!important;flex:0 0 42px!important;object-fit:contain}
.app-shell .top-brand-copy{min-width:0!important;display:grid!important;gap:2px!important}
.app-shell .top-brand-copy strong,.app-shell .top-brand-copy span{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.app-shell .top-brand-copy strong{font-size:15px!important;line-height:1.15!important}
.app-shell .top-brand-copy span{font-size:10px!important;line-height:1.2!important}
.app-shell .hamb{display:none!important;flex:0 0 auto!important;width:40px!important;height:40px!important;padding:0!important;border:1px solid #dbe7ef!important;border-radius:12px!important;background:#f1f7fb!important;color:#1269a0!important;place-items:center!important}
.app-shell .global-search-wrap{width:min(390px,32vw)!important;min-width:220px!important;max-width:420px!important;flex:1 1 340px!important}
.app-shell .global-search-wrap .input{width:100%!important}
.app-shell .system-status,.app-shell .top-date{white-space:nowrap!important;flex:0 0 auto!important}
.app-shell .notification-btn,.app-shell .profile-trigger{flex:0 0 auto!important}

/* layout padding is the ONLY header offset; sidebar is fixed and content is grid column 2 */
.app-shell .layout{
  display:grid!important;grid-template-columns:var(--ux-sidebar) minmax(0,1fr)!important;
  width:100%!important;min-width:0!important;min-height:100dvh!important;
  margin:0!important;padding-top:var(--ux-header)!important;
}
.app-shell .sidebar{
  position:fixed!important;left:0!important;top:var(--ux-header)!important;bottom:0!important;
  width:var(--ux-sidebar)!important;min-width:0!important;height:calc(100dvh - var(--ux-header))!important;
  max-height:calc(100dvh - var(--ux-header))!important;z-index:1500!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}
.app-shell .content{
  grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:clamp(22px,3vw,40px) var(--ux-gutter) var(--ux-bottom)!important;
  overflow-x:clip!important;
}
.app-shell .content>*{min-width:0!important;max-width:100%!important}
.app-shell .sidebar-scrim{display:none!important}
.app-shell .mobile-nav{display:none!important}

/* ===== ALIGNMENT + TYPOGRAPHY CONTRACT ===== */
.app-shell .page-head{width:100%!important;min-width:0!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important}
.app-shell .page-head-main{min-width:0!important;max-width:100%!important}
.app-shell .page-head h1,.app-shell .page-head p,.app-shell .section-heading h3,.app-shell .section-heading p{max-width:100%!important;word-break:normal!important;overflow-wrap:anywhere!important}
.app-shell .page-head h1{line-height:1.12!important;margin-top:4px!important}
.app-shell .page-head p,.app-shell .section-heading p{line-height:1.55!important;text-align:left!important}
.app-shell .head-actions{display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;max-width:52%!important}
.app-shell .head-actions .btn{white-space:normal!important;overflow-wrap:anywhere!important}
.app-shell .card,.app-shell .section,.app-shell .kpi,.app-shell .operation-card,.app-shell .attention,.app-shell .quick,.app-shell .command-kpi{min-width:0!important;max-width:100%!important}
.app-shell h1,.app-shell h2,.app-shell h3,.app-shell h4,.app-shell p,.app-shell label,.app-shell small,.app-shell span,.app-shell strong,.app-shell b{overflow-wrap:anywhere}

/* Prevent accidental one-letter vertical headings from flex/grid shrink */
.app-shell .page-head h1,.app-shell .command-copy h2,.app-shell .section-title h3,.app-shell .section-heading h3{min-width:0!important;width:auto!important;max-width:100%!important;white-space:normal!important}

/* ===== GRIDS ===== */
.app-shell .kpi-grid,.app-shell .command-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;min-width:0!important}
.app-shell .operations-lane,.app-shell .attention-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;min-width:0!important}
.app-shell .command-quick,.app-shell .quick-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;min-width:0!important}
.app-shell .dashboard-split{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;min-width:0!important}
.app-shell .charts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0!important}
.app-shell .kpi-grid>*,.app-shell .command-kpis>*,.app-shell .operations-lane>*,.app-shell .attention-grid>*,.app-shell .command-quick>*,.app-shell .quick-grid>*,.app-shell .dashboard-split>*,.app-shell .charts>*{min-width:0!important}

/* ===== FORMS / CONTROLS ===== */
.app-shell .form-grid{min-width:0!important}
.app-shell .form-grid>*{min-width:0!important}
.app-shell .form-grid input,.app-shell .form-grid select,.app-shell .form-grid textarea,.app-shell .input,.app-shell .select,.app-shell .textarea{width:100%!important;max-width:100%!important;min-width:0!important}
.app-shell .btn{min-height:42px;max-width:100%;line-height:1.25}
.app-shell .form-actions{min-width:0!important}

/* ===== TABLE ISOLATION ===== */
.app-shell .table-wrap{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
.app-shell .table-wrap .table{width:max-content!important;min-width:100%!important;max-width:none!important}
.app-shell .table th,.app-shell .table td{vertical-align:middle!important;line-height:1.4!important}

/* ===== MODALS ===== */
.app-shell .modal{max-width:min(760px,calc(100vw - 32px))!important;width:100%!important}
.app-shell .modal-body{max-height:calc(100dvh - 120px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}

/* ===== LOGIN ===== */
.login-page{width:100%;min-height:100dvh;overflow-x:hidden}
.login-card{width:100%!important;max-width:560px!important;text-align:center!important}
.login-card .lead,.login-help,.security-box,.login-footer{text-align:center!important;line-height:1.55!important}
.login-form{width:100%!important;text-align:left!important}
.login-form .field label,.login-form .field-group label{text-align:left!important;line-height:1.35!important}
.login-submit{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.security-box strong{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}

/* ===== LAPTOP / TABLET ===== */
@media (max-width:1399px){
  :root{--ux-sidebar:248px}
  .app-shell .global-search-wrap{width:300px!important;min-width:190px!important}
  .app-shell .content{padding-left:24px!important;padding-right:24px!important}
}
@media (max-width:1199px){
  :root{--ux-sidebar:232px;--ux-header:68px}
  .app-shell .topbar{height:68px!important;min-height:68px!important}
  .app-shell .sidebar{top:68px!important;height:calc(100dvh - 68px)!important;max-height:calc(100dvh - 68px)!important}
  .app-shell .layout{padding-top:68px!important}
  .app-shell .global-search-wrap{width:250px!important;min-width:180px!important}
  .app-shell .page-head{gap:16px!important}
  .app-shell .head-actions{max-width:48%!important}
  .app-shell .kpi-grid,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .dashboard-split,.app-shell .charts{grid-template-columns:1fr!important}
}

/* ===== MOBILE APP SHELL ===== */
@media (max-width:820px){
  :root{--ux-header:64px;--ux-bottom:88px}
  .app-shell .topbar{height:64px!important;min-height:64px!important;padding:0 12px!important;gap:7px!important}
  .app-shell .hamb{display:grid!important}
  .app-shell .top-brand img{width:38px!important;height:38px!important;flex-basis:38px!important}
  .app-shell .top-brand-copy strong{font-size:12px!important}
  .app-shell .top-brand-copy span{font-size:8px!important}
  .app-shell .global-search-wrap,.app-shell .system-status,.app-shell .top-date{display:none!important}
  .app-shell .top-actions{gap:5px!important}
  .app-shell .notification-btn,.app-shell .profile-trigger{width:38px!important;height:38px!important}

  .app-shell .layout{display:block!important;width:100%!important;min-height:100dvh!important;padding-top:64px!important}
  .app-shell .sidebar{
    top:64px!important;left:0!important;bottom:0!important;width:min(300px,88vw)!important;min-width:0!important;
    height:calc(100dvh - 64px)!important;max-height:none!important;transform:translate3d(-105%,0,0)!important;
    transition:transform .22s ease!important;box-shadow:18px 0 45px rgba(5,35,65,.25)!important;
  }
  .app-shell .sidebar.open{transform:translate3d(0,0,0)!important}
  .app-shell .sidebar-scrim{display:none!important;position:fixed!important;inset:64px 0 0!important;z-index:1400!important;background:rgba(4,27,46,.44)!important}
  .app-shell .sidebar-scrim.open{display:block!important}
  .app-shell .content{display:block!important;width:100%!important;min-width:0!important;padding:18px 16px calc(var(--ux-bottom) + env(safe-area-inset-bottom))!important}
  .app-shell .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:10px!important}
  .app-shell .page-head h1{font-size:clamp(24px,6vw,30px)!important;line-height:1.1!important}
  .app-shell .page-head p{font-size:12px!important;line-height:1.55!important}
  .app-shell .head-actions{width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .head-actions .btn{width:100%!important;min-width:0!important}
  .app-shell .dashboard-split,.app-shell .charts{grid-template-columns:1fr!important}
  .app-shell .kpi-grid,.app-shell .command-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .operations-lane,.app-shell .attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .app-shell .mobile-nav{
    display:grid!important;position:fixed!important;left:9px!important;right:9px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:1300!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:7px!important;
    width:auto!important;min-width:0!important;border:1px solid #dfe8f0!important;border-radius:20px!important;
    background:rgba(255,255,255,.97)!important;box-shadow:0 16px 38px rgba(7,38,67,.18)!important;backdrop-filter:blur(18px)!important;
  }
  .app-shell .mobile-nav .navbtn{
    width:100%!important;min-width:0!important;min-height:54px!important;margin:0!important;padding:6px 3px!important;
    border-radius:14px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:4px!important;text-align:center!important;overflow:hidden!important;
  }
  .app-shell .mobile-nav .navbtn .nav-icon{width:23px!important;height:23px!important;flex:0 0 23px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}

  .app-shell .table-wrap{border-radius:12px!important}
  .app-shell .modal{max-width:none!important;width:100%!important}
}

@media (max-width:600px){
  .app-shell .content{padding:15px 12px calc(94px + env(safe-area-inset-bottom))!important}
  .app-shell .top-brand-copy{max-width:54vw!important}
  .app-shell .page-head h1{font-size:clamp(23px,7vw,29px)!important}
  .app-shell .head-actions{grid-template-columns:1fr!important}
  .app-shell .command-hero{padding:18px!important;border-radius:19px!important}
  .app-shell .command-copy h2{font-size:clamp(21px,6vw,26px)!important;line-height:1.14!important}
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .app-shell .operations-lane,.app-shell .attention-grid,.app-shell .command-quick,.app-shell .quick-grid{grid-template-columns:1fr!important;gap:9px!important}
  .app-shell .kpi,.app-shell .command-kpi,.app-shell .operation-card,.app-shell .attention,.app-shell .quick{padding:13px!important}
  .app-shell .kpi-value{font-size:25px!important}
  .app-shell .section,.app-shell .card{border-radius:18px!important}
  .app-shell .table{min-width:700px!important}
  .app-shell .table th,.app-shell .table td{padding:10px 11px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .app-shell .form-grid{grid-template-columns:1fr!important}
  .app-shell .form-actions{display:grid!important;grid-template-columns:1fr!important}
  .app-shell .form-actions .btn{width:100%!important}
  .app-shell .modal-body{max-height:calc(94dvh - 70px)!important}

  .login-page{display:flex!important;flex-direction:column!important;min-height:100dvh!important}
  .login-panel{padding:12px!important}
  .login-card{padding:24px 17px!important;border-radius:22px!important}
  .login-card h1{font-size:28px!important}
  .login-card .lead{font-size:12px!important;line-height:1.55!important}
  .login-form{width:100%!important;text-align:left!important}
  .login-form .field label,.login-form .field-group label{display:block!important;text-align:left!important}
  .login-help,.security-box,.login-footer{text-align:center!important}
}

@media (max-width:420px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important}
  .app-shell .topbar{padding-left:9px!important;padding-right:9px!important}
  .app-shell .top-brand-copy{max-width:47vw!important}
  .app-shell .top-brand-copy strong{font-size:11px!important}
  .app-shell .top-brand-copy span{font-size:7px!important}
  .app-shell .kpi,.app-shell .command-kpi{padding:11px!important}
  .app-shell .kpi-value{font-size:22px!important}
  .app-shell .mobile-nav{left:7px!important;right:7px!important;padding:6px!important}
  .app-shell .mobile-nav .navbtn{min-height:52px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:8px!important}
}

@media (max-width:360px){
  .app-shell .command-summary,.app-shell .command-kpis,.app-shell .kpi-grid{grid-template-columns:1fr!important}
  .app-shell .page-head h1{font-size:22px!important}
  .app-shell .mobile-nav .navbtn{min-height:50px!important}
  .app-shell .mobile-nav .navbtn>span:last-child{font-size:7.5px!important}
  .login-card{padding:20px 14px!important}
}

/* ===== TOUCH / ACCESSIBILITY ===== */
@media(pointer:coarse){
  .app-shell .navbtn,.app-shell .btn,.app-shell .icon-btn,.app-shell .avatar{min-height:42px}
  .app-shell input,.app-shell select,.app-shell textarea{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ===== v5.5.6 — MOBILE CHROME CLEANUP + OVERFLOW/CLIPPING FIX =====
   Final authority: no top hamburger; mobile navigation uses "Lainnya".
   Keep header/content/bottom-nav on independent, non-overlapping layers. */
.app-shell .hamb,
.app-shell #mobileSidebarToggle{display:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important;visibility:hidden!important;pointer-events:none!important}
.app-shell .top-left{gap:0!important}
.app-shell .top-brand{margin-left:0!important}

/* Bottom navigation must never cover the last content block. */
@media (max-width:820px){
  :root{--ux-bottom:116px!important}
  .app-shell .content{padding-bottom:calc(116px + env(safe-area-inset-bottom))!important}
  .app-shell .mobile-nav{z-index:1300!important}

  /* Modal is a true bottom-sheet, but always starts below the fixed header. */
  .app-shell .modal-backdrop{z-index:3000!important;padding:0!important;align-items:flex-end!important}
  .app-shell .modal{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 76px)!important;
    margin:0!important;
    border-radius:22px 22px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .app-shell .modal-head{position:sticky!important;top:0!important;z-index:4!important;flex:0 0 auto!important}
  .app-shell .modal-body{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;max-height:none!important;flex:1 1 auto!important;padding-bottom:24px!important}
}

@media (max-width:600px){
  .app-shell .content{padding-left:12px!important;padding-right:12px!important;padding-bottom:calc(120px + env(safe-area-inset-bottom))!important}
  .app-shell .top-left{flex:1 1 auto!important;min-width:0!important}
  .app-shell .top-brand{max-width:100%!important}
  .app-shell .top-brand-copy{max-width:58vw!important}
  .app-shell .top-brand-copy strong{font-size:12px!important;line-height:1.15!important}
  .app-shell .top-brand-copy span{font-size:7.5px!important;line-height:1.25!important}
  .app-shell .modal{max-height:calc(100dvh - 72px)!important}
}

@media (max-width:420px){
  .app-shell .topbar{padding-left:10px!important;padding-right:10px!important}
  .app-shell .top-brand-copy{max-width:55vw!important}
  .app-shell .content{padding-left:10px!important;padding-right:10px!important;padding-bottom:calc(122px + env(safe-area-inset-bottom))!important}
}

/* Hard guard against accidental viewport-width expansion from long text/components. */
.app-shell .content,
.app-shell .content-inner,
.app-shell .card,
.app-shell .section,
.app-shell .page-head,
.app-shell .page-head-main,
.app-shell .section-title,
.app-shell .section-heading,
.app-shell .table-wrap,
.app-shell .form-grid,
.app-shell .modal,
.app-shell .modal-body{max-width:100%;min-width:0}
.app-shell h1,.app-shell h2,.app-shell h3,.app-shell h4,.app-shell p,.app-shell label,.app-shell small,.app-shell strong,.app-shell span{overflow-wrap:anywhere}


/* ===== SPPG UI/UX RECONSTRUCTION v8 — single authoritative layer ===== */
:root{--ui-navy:#0b315d;--ui-blue:#1976d2;--ui-teal:#159a8a;--ui-bg:#f4f7fb;--ui-text:#13253d;--ui-muted:#64748b;--ui-line:#dfe7ef;--ui-surface:#fff}
html,body{width:100%;min-width:0;max-width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--ui-bg);color:var(--ui-text)}
img{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}
/* APP SHELL */
.app-shell{width:100%;min-height:100svh;display:flex;flex-direction:column}
.app-shell>.topbar{flex:0 0 auto;width:100%;min-width:0;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--ui-line)}
.app-shell>.layout{display:grid!important;grid-template-columns:256px minmax(0,1fr)!important;align-items:stretch!important;width:100%!important;min-width:0!important;flex:1!important}
.app-shell>.layout>.sidebar{grid-column:1;grid-row:1;width:256px!important;min-width:256px!important;max-width:256px!important;position:sticky!important;top:0!important;height:calc(100svh - 72px)!important;overflow-y:auto!important;overflow-x:hidden!important}
.app-shell>.layout>.content{grid-column:2;grid-row:1;min-width:0!important;width:auto!important;max-width:none!important;overflow:visible!important;padding:28px 32px 48px!important}
.app-shell>.layout>.sidebar-scrim{display:none}
.app-shell>.mobile-nav{display:none!important}
.topbar,.topbar *{min-width:0}
.top-brand-copy strong,.top-brand-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-context{min-width:0!important;overflow:hidden!important}
.side-context *{max-width:100%;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
.sidebar nav a,.sidebar .nav-item,.sidebar button{min-width:0!important}
.sidebar nav a span,.sidebar .nav-label,.sidebar .menu-label{white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important}
/* content primitives */
.content>*{min-width:0}
.page-head,.section-title{min-width:0}
.page-head h1,.page-head h2,.page-head h3,.section-title h2,.section-title h3{overflow-wrap:normal!important;word-break:normal!important}
.kpi-grid,.grid4,.grid2,.dashboard-grid,.system-grid,.petugas-grid{min-width:0}
.card{min-width:0;overflow:visible}
.table-wrap{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}
.table-wrap>.table{min-width:max-content}
/* LOGIN */
.login-page{width:100%;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:#eef3f8;overflow:hidden}
.login-visual{min-width:0;min-height:100svh;padding:clamp(40px,6vw,76px) clamp(32px,6vw,80px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden!important;color:#fff!important;background:linear-gradient(135deg,#092d59 0%,#0e5f91 58%,#159a8a 100%)!important}
.login-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 0 100%,rgba(95,210,255,.16),transparent 32%),linear-gradient(120deg,transparent 0 58%,rgba(255,255,255,.035) 58% 100%);pointer-events:none}
.login-visual::after{content:"";position:absolute;width:560px;height:560px;right:-300px;bottom:-320px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 40px rgba(255,255,255,.025),0 0 0 80px rgba(255,255,255,.018);pointer-events:none}
.login-visual>*{position:relative;z-index:2}
.login-brand{display:flex!important;align-items:center!important;gap:14px!important}
.login-brand .brand-logo{width:58px!important;height:58px!important;object-fit:contain!important;background:#fff!important;border-radius:15px!important;padding:6px!important;box-shadow:0 8px 24px rgba(0,0,0,.14)!important;flex:none}
.login-brand .brand-copy strong{display:block;color:#fff!important;font-size:18px!important;line-height:1.15!important;white-space:normal!important}
.login-brand .brand-copy span{display:block;color:rgba(255,255,255,.72)!important;font-size:10px!important;line-height:1.4!important;margin-top:4px!important;white-space:normal!important}
.login-title{margin:54px 0 10px!important;max-width:680px!important;color:#fff!important;font-size:clamp(34px,4vw,58px)!important;line-height:1.02!important;letter-spacing:-1.8px!important;font-weight:800!important;overflow-wrap:normal!important;word-break:normal!important}
.login-subtitle{max-width:590px!important;margin:0!important;color:rgba(255,255,255,.78)!important;font-size:14px!important;line-height:1.65!important}
.process-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;max-width:620px!important;margin-top:30px!important}
.process-item{min-width:0!important;display:grid!important;grid-template-columns:28px 34px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;padding:12px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;background:rgba(255,255,255,.075)!important;backdrop-filter:blur(8px)!important}
.process-item .step{width:28px!important;height:28px!important;border-radius:50%!important;background:rgba(255,255,255,.14)!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:10px!important;font-weight:800!important}
.process-item strong{display:block;color:#fff!important;font-size:11px!important;line-height:1.25!important}.process-item span{display:block;color:rgba(255,255,255,.66)!important;font-size:9px!important;line-height:1.4!important;margin-top:3px!important}
.login-panel{min-width:0;display:flex!important;align-items:center!important;justify-content:center!important;padding:40px!important;background:#f7f9fc!important}
.login-card{width:min(470px,100%)!important;padding:38px!important;border:1px solid #dfe7ef!important;border-radius:24px!important;background:#fff!important;box-shadow:0 22px 65px rgba(11,49,93,.13)!important;overflow:hidden!important}
.login-card>*{max-width:100%}
.login-user-icon{width:58px!important;height:58px!important;border-radius:15px!important;background:#edf5fb!important;display:grid!important;place-items:center!important;margin-bottom:22px!important;overflow:hidden!important}.login-card-logo{width:100%!important;height:100%!important;object-fit:contain!important;padding:7px!important}
.login-card h1{margin:0 0 8px!important;color:var(--ui-navy)!important;font-size:32px!important;line-height:1.08!important;letter-spacing:-1px!important;word-break:normal!important;overflow-wrap:normal!important}.login-card .lead{margin:0 0 24px!important;font-size:12px!important;line-height:1.6!important;text-align:left!important;color:var(--ui-muted)!important}
.login-form{display:block!important}.login-form .field{margin-top:16px!important}.login-form .field:first-child{margin-top:0!important}.login-form label{display:block!important;text-align:left!important;color:var(--ui-navy)!important;font-size:11px!important;font-weight:700!important;line-height:1.3!important;margin:0 0 7px!important}
.login-form .input-wrap{position:relative!important;width:100%!important}.login-form .input-wrap>input{width:100%!important;height:52px!important;padding:0 46px 0 42px!important;border:1px solid #d4dee8!important;border-radius:12px!important;background:#f9fbfd!important;color:var(--ui-text)!important;font-size:13px!important;outline:none!important}.login-form .input-wrap>input:focus{background:#fff!important;border-color:#5aa9bf!important;box-shadow:0 0 0 4px rgba(25,118,210,.08)!important}
.login-form .input-icon{position:absolute!important;left:14px!important;top:50%!important;transform:translateY(-50%)!important;color:#7890a7!important;z-index:2!important}.eye-btn{position:absolute!important;right:5px!important;top:5px!important;width:42px!important;height:42px!important;border:0!important;background:transparent!important;color:#7890a7!important;border-radius:9px!important;display:grid!important;place-items:center!important;cursor:pointer!important}
.login-options{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;margin-top:12px!important}.login-help{display:block!important;max-width:100%!important;text-align:left!important;color:#7b8794!important;font-size:9.5px!important;line-height:1.45!important}.link-btn{font-size:9px!important;white-space:nowrap!important}
.login-submit{width:100%!important;height:52px!important;margin-top:20px!important;border:0!important;border-radius:12px!important;background:linear-gradient(100deg,#1976d2,#159a8a)!important;color:#fff!important;font-size:13px!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;cursor:pointer!important;box-shadow:0 10px 22px rgba(25,118,210,.18)!important}.login-submit:disabled{opacity:.6!important;cursor:wait!important}
.security-box{margin-top:14px!important;padding:12px 13px!important;border:1px solid #cfe9e2!important;border-radius:12px!important;background:#f1faf8!important;color:#27685e!important;text-align:left!important}.security-box strong{display:flex!important;align-items:center!important;gap:6px!important;font-size:10px!important}.security-box span{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.5!important;color:#58756f!important}
.login-footer{margin-top:22px!important;padding-top:14px!important;border-top:1px solid #e6ecf1!important;text-align:center!important;color:#7b8794!important;font-size:9px!important;line-height:1.45!important}
/* mobile */
@media(max-width:1100px){.app-shell>.layout{grid-template-columns:228px minmax(0,1fr)!important}.app-shell>.layout>.sidebar{width:228px!important;min-width:228px!important;max-width:228px!important}.app-shell>.layout>.content{padding:24px 24px 42px!important}.login-page{grid-template-columns:minmax(0,1fr) minmax(380px,.82fr)}.login-card{padding:32px}}
@media(max-width:900px){.app-shell>.topbar{position:sticky!important}.app-shell>.layout{display:block!important}.app-shell>.layout>.sidebar{display:none!important}.app-shell>.layout>.content{width:100%!important;padding:22px 18px 100px!important}.app-shell>.mobile-nav{display:flex!important;position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;z-index:300!important}.login-page{grid-template-columns:1fr;min-height:100svh}.login-visual{min-height:auto;padding:42px 40px 34px}.login-title{margin-top:38px!important;font-size:40px!important}.login-panel{padding:28px 40px 42px}.login-card{width:min(560px,100%)!important}}
@media(max-width:560px){.app-shell>.layout>.content{padding:18px 14px 92px!important}.topbar{padding-left:14px!important;padding-right:14px!important}.top-brand-copy span{font-size:8px!important}.top-actions .global-search-wrap,.top-actions .system-status,.top-actions .top-date{display:none!important}.login-page{display:flex!important;flex-direction:column!important;min-height:100svh}.login-visual{padding:24px 18px 20px!important;min-height:auto!important;justify-content:flex-start!important}.login-brand .brand-logo{width:48px!important;height:48px!important;border-radius:13px!important}.login-brand .brand-copy strong{font-size:15px!important}.login-brand .brand-copy span{font-size:8px!important}.login-title{font-size:29px!important;margin:28px 0 8px!important;letter-spacing:-1px!important}.login-subtitle{font-size:10.5px!important;line-height:1.55!important}.process-list{grid-template-columns:1fr!important;gap:7px!important;margin-top:18px!important}.process-item{grid-template-columns:26px 30px minmax(0,1fr)!important;padding:9px!important}.process-item .step{width:26px!important;height:26px!important}.process-item strong{font-size:10px!important}.process-item span{font-size:8.5px!important}.login-panel{padding:20px 14px 24px!important;align-items:flex-start!important;background:#f7f9fc!important}.login-card{width:100%!important;padding:22px 18px!important;border-radius:18px!important;box-shadow:0 12px 34px rgba(11,49,93,.09)!important}.login-user-icon{width:48px!important;height:48px!important;border-radius:13px!important;margin-bottom:16px!important}.login-card h1{font-size:26px!important}.login-card .lead{font-size:10px!important;line-height:1.55!important;margin-bottom:20px!important}.login-form .field{margin-top:13px!important}.login-form label{font-size:10px!important}.login-form .input-wrap>input{height:49px!important;font-size:12px!important}.login-options{display:block!important}.login-help{font-size:9px!important}.login-submit{height:49px!important;font-size:12px!important;margin-top:17px!important}.security-box{font-size:9px!important}.login-footer{font-size:8.5px!important;margin-top:18px!important}}

/* v8.1 — Sidebar & Washing workflow correction */
.app-shell .sidebar{padding:0 10px 24px!important;overflow-y:auto!important}
.app-shell .sidebar .side-brand{display:block!important;padding:16px 10px 14px!important;margin:0 0 10px!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
.app-shell .sidebar .side-brand .logo-row{display:flex;align-items:center;gap:10px}
.app-shell .sidebar .side-brand img{width:42px!important;height:42px!important;background:#fff!important;border-radius:50%!important;object-fit:contain!important;padding:2px!important;flex:0 0 auto}
.app-shell .sidebar .side-brand strong{display:block!important;color:#fff!important;font-size:12px!important;line-height:1.25!important;font-weight:850!important}
.app-shell .sidebar .side-brand span{display:block!important;color:#9fc9e5!important;font-size:8.5px!important;line-height:1.35!important;margin-top:3px!important}
.app-shell .sidebar .side-context-primary{margin:0 5px 13px!important}
.app-shell .sidebar .side-title{margin:14px 9px 5px!important}
.app-shell .sidebar .navbtn{min-height:40px!important;padding:9px 11px!important;margin:2px 5px!important;width:calc(100% - 10px)!important}
.app-shell .sidebar .navbtn.active{background:linear-gradient(100deg,#126da7,#197fc0)!important;box-shadow:inset 3px 0 #72cdf8,0 5px 18px rgba(0,0,0,.12)!important}
.app-shell .sidebar-help{margin:16px 5px 0!important}
.washing-overview{padding:18px 20px!important}
.washing-flow-pro .washing-step{min-width:180px!important;background:#fbfdff!important}
.washing-flow-pro .washing-step.active{border-color:#8fc9ef!important;background:#f4faff!important}
.washing-flow-pro .washing-step span{background:#eaf4fc!important;color:#126da7!important}
.washing-batch-card-pro{padding:18px!important;border-color:#dbe7f0!important}
.washing-batch-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.washing-batch-top h3{margin:7px 0 3px!important;font-size:16px!important}
.washing-batch-top p{margin:0!important;color:#72869a!important;font-size:11px!important}
.washing-progress{min-width:150px;text-align:right}
.washing-progress strong{font-size:20px;color:#126da7}
.washing-progress div{height:7px;background:#e9eff4;border-radius:99px;overflow:hidden;margin:6px 0}
.washing-progress div span{display:block;height:100%;background:#1976d2;border-radius:99px}
.washing-progress small{font-size:9px;color:#7b8da0}
.washing-batch-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.washing-batch-metrics>div{padding:10px 11px;border:1px solid #e5ecf2;border-radius:10px;background:#fbfdff}
.washing-batch-metrics small{display:block;color:#77899b;font-size:9px}.washing-batch-metrics b{display:block;margin-top:3px;font-size:14px;color:#173653}
.washing-bottom-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.washing-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.washing-quality-grid>div{padding:14px 12px;border:1px solid #e2eaf1;border-radius:12px;background:#fbfdff}
.washing-quality-grid span{display:block;font-size:10px;color:#71859a}.washing-quality-grid b{display:block;font-size:22px;margin:5px 0 1px;color:#153753}.washing-quality-grid small{font-size:9px;color:#8292a3}
.washing-summary-table td,.washing-summary-table th{font-size:11px}
.badge.blue{background:#edf6ff;color:#176eaa;border-color:#cfe7fa}
@media(max-width:980px){.washing-flow-pro{overflow:auto;justify-content:flex-start}.washing-bottom-grid{grid-template-columns:1fr}.washing-batch-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.app-shell .sidebar .side-brand{padding-top:14px!important}.washing-overview{padding:13px!important}.washing-batch-top{display:block}.washing-progress{min-width:0;text-align:left;margin-top:12px}.washing-batch-metrics{grid-template-columns:1fr 1fr}.washing-quality-grid{grid-template-columns:1fr}.washing-stage-row{grid-template-columns:30px minmax(0,1fr)}.washing-stage-row .btn{grid-column:2;width:100%}}


/* ================================================================
   v8.2.0 — LOGIN BRANDING FIX
   Remove the extra circular login-logo container. The official BGN
   emblem remains undistorted and is presented as a horizontal brand lockup.
   ================================================================ */
.login-card-brand{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  margin:0 0 18px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid #e3ebf2!important;
}
.login-card-brand .login-card-logo{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  flex:0 0 54px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:1/1!important;
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  rotate:0deg!important;
}
.login-card-brand-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
.login-card-brand-copy strong{
  display:block!important;
  color:#12304b!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.15px!important;
}
.login-card-brand-copy span{
  display:block!important;
  color:#6f8497!important;
  font-size:9px!important;
  line-height:1.35!important;
  font-weight:650!important;
  letter-spacing:.1px!important;
}
.login-user-icon{display:none!important}
@media(max-width:600px){
  .login-card-brand{gap:10px!important;margin-bottom:15px!important;padding-bottom:12px!important}
  .login-card-brand .login-card-logo{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;flex-basis:46px!important}
  .login-card-brand-copy strong{font-size:11px!important}
  .login-card-brand-copy span{font-size:8px!important}
}



/* v8.3 — HEADER / SIDEBAR SPACING FIX
   Keep the desktop sidebar visually separated from the top header.
   Mobile drawer returns to the header edge when opened.
*/
.app-shell > .layout > .sidebar{
  top:82px!important;
  height:calc(100vh - 82px)!important;
}
@media(max-width:900px){
  .app-shell > .layout > .sidebar{
    top:64px!important;
    height:calc(100dvh - 64px)!important;
  }
}

/* ================================================================
   v8.6 FINAL — GLOBAL UI CONSISTENCY + REAL FIXED APP SHELL
   This is the authoritative presentation layer. It intentionally
   overrides older incremental UI patches without changing business logic.
   ================================================================ */
:root{
  --ui-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ui-text:#16324b;--ui-muted:#6b7f92;--ui-line:#dfe7ef;--ui-bg:#f5f8fb;
  --ui-surface:#fff;--ui-radius:14px;--ui-shadow:0 6px 22px rgba(17,48,76,.055);
}
html,body{margin:0!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;font-family:var(--ui-font)!important;color:var(--ui-text)!important;background:var(--ui-bg)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:13px!important;line-height:1.45!important}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
img{max-width:100%}

/* ---------- APP SHELL: header fixed, sidebar independently scrollable,
   content independently scrollable. No page-level scroll. ---------- */
.app-shell{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:0!important;display:grid!important;grid-template-rows:68px minmax(0,1fr)!important;overflow:hidden!important}
.app-shell>.topbar{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:68px!important;min-height:68px!important;z-index:1200!important;overflow:visible!important}
.app-shell>.layout{position:relative!important;display:grid!important;grid-template-columns:256px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
.app-shell>.layout>.sidebar{position:relative!important;top:auto!important;left:auto!important;grid-column:1!important;grid-row:1!important;width:256px!important;height:100%!important;min-height:0!important;min-width:256px!important;max-width:256px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important;z-index:1100!important}
.app-shell>.layout>.content{position:relative!important;grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;scroll-behavior:auto!important;padding:28px 32px 48px!important}
.app-shell>.layout>.content::-webkit-scrollbar,.app-shell>.layout>.sidebar::-webkit-scrollbar{width:8px;height:8px}
.app-shell>.layout>.content::-webkit-scrollbar-thumb,.app-shell>.layout>.sidebar::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(100,125,150,.28)}
.app-shell>.layout>.content::-webkit-scrollbar-track,.app-shell>.layout>.sidebar::-webkit-scrollbar-track{background:transparent}
.app-shell>.mobile-nav{position:fixed!important;display:none!important}

/* ---------- SIDEBAR ---------- */
.app-shell>.layout>.sidebar .navbtn{display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:10px!important;white-space:normal!important;line-height:1.25!important}
.app-shell>.layout>.sidebar .navbtn .nav-icon{display:grid!important;place-items:center!important;flex:0 0 auto!important}
.app-shell>.layout>.sidebar .side-title{text-align:left!important;line-height:1.2!important}
.app-shell>.layout>.sidebar .sidebar-help{text-align:left!important;line-height:1.45!important}

/* ---------- GLOBAL PAGE TYPOGRAPHY ---------- */
.app-shell .content h1,.app-shell .content h2,.app-shell .content h3,.app-shell .content h4,.app-shell .content p{margin-block-start:0}
.app-shell .page-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;width:100%!important;text-align:left!important}
.app-shell .page-head-main{min-width:0!important;flex:1 1 auto!important;text-align:left!important}
.app-shell .page-head h1{font-size:clamp(22px,2.1vw,30px)!important;line-height:1.15!important;font-weight:800!important;letter-spacing:-.5px!important;text-align:left!important;margin:3px 0 6px!important;color:var(--ui-text)!important}
.app-shell .page-head p{font-size:12px!important;line-height:1.55!important;text-align:left!important;color:var(--ui-muted)!important;margin:0!important;max-width:780px!important}
.app-shell .eyebrow,.app-shell .dashboard-kicker{display:block!important;text-align:left!important;line-height:1.25!important}
.app-shell .head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;flex:0 0 auto!important;max-width:50%!important}
.app-shell .page-guide{display:flex!important;align-items:flex-start!important;gap:8px!important;text-align:left!important;line-height:1.45!important}
.app-shell .section,.app-shell .card,.app-shell .kpi,.app-shell .analytics-card{overflow:visible!important}
.app-shell .section-title,.app-shell .section-heading,.app-shell .card-head-modern,.app-shell .section-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;text-align:left!important}
.app-shell .section-title>div,.app-shell .section-heading>div,.app-shell .card-head-modern>div{min-width:0!important;text-align:left!important}
.app-shell .section-title h2,.app-shell .section-title h3,.app-shell .section-heading h2,.app-shell .section-heading h3,.app-shell .card-head-modern h3{margin:0 0 4px!important;text-align:left!important;line-height:1.25!important}
.app-shell .section-title p,.app-shell .section-heading p,.app-shell .card-head-modern p{margin:0!important;text-align:left!important;line-height:1.5!important;color:var(--ui-muted)!important}

/* ---------- FORMS ---------- */
.app-shell .form,.app-shell .form-grid,.app-shell .field,.app-shell .field-group{min-width:0!important}
.app-shell .field label,.app-shell .field-group label{display:block!important;text-align:left!important;line-height:1.35!important;font-weight:700!important}
.app-shell .field-help,.app-shell .form-help,.app-shell .muted{line-height:1.5!important;text-align:left!important}
.app-shell .form-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important}
.app-shell .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;vertical-align:middle!important;line-height:1.2!important;white-space:nowrap!important}
.app-shell .input,.app-shell .select,.app-shell .textarea,.app-shell input,.app-shell select,.app-shell textarea{min-width:0!important;max-width:100%!important;text-align:left!important;line-height:1.35!important}
.app-shell input[type=number]{text-align:right!important}

/* ---------- TABLES: readable alignment, no squashed columns ---------- */
.app-shell .table-wrap{width:100%!important;max-width:100%!important;overflow:auto!important}
.app-shell .table{width:100%;border-collapse:separate!important;border-spacing:0!important}
.app-shell .table th{font-weight:800!important;text-align:left!important;vertical-align:middle!important;white-space:nowrap!important;line-height:1.25!important}
.app-shell .table td{text-align:left!important;vertical-align:middle!important;line-height:1.35!important}
.app-shell .table th:last-child,.app-shell .table td:last-child{text-align:right!important;white-space:nowrap!important}
.app-shell .table td.num,.app-shell .table th.num,.app-shell .table .text-right{text-align:right!important}
.app-shell .table td.center,.app-shell .table th.center,.app-shell .table .text-center{text-align:center!important}
.app-shell .table .actions,.app-shell .table td.actions{display:table-cell!important;text-align:right!important;white-space:nowrap!important}

/* ---------- CARDS / KPI ---------- */
.app-shell .kpi-grid,.app-shell .grid2,.app-shell .grid4,.app-shell .dashboard-grid,.app-shell .system-grid{min-width:0!important}
.app-shell .kpi,.app-shell .mini-card,.app-shell .summary-item{min-width:0!important}
.app-shell .kpi-label,.app-shell .kpi-note,.app-shell .mini-card small,.app-shell .summary-item small{text-align:left!important;line-height:1.4!important}
.app-shell .kpi-value,.app-shell .summary-item strong,.app-shell .mini-card strong{display:block!important;text-align:left!important;line-height:1.1!important}

/* ---------- DASHBOARD ---------- */
.app-shell .command-copy,.app-shell .command-copy>*{text-align:left!important}
.app-shell .command-summary{min-width:0!important}
.app-shell .summary-item{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important}
.app-shell .operation-card{min-width:0!important}
.app-shell .operation-main{text-align:left!important;min-width:0!important}
.app-shell .operation-main strong,.app-shell .operation-main span{display:block!important;text-align:left!important}
.app-shell .operation-state{text-align:right!important}
.app-shell .activity-row{text-align:left!important}
.app-shell .activity-row>div{min-width:0!important}

/* ---------- LOGIN: circular logo + disciplined alignment ---------- */
.login-page{width:100%!important;height:100dvh!important;min-height:0!important;overflow:auto!important}
.login-visual,.login-panel{min-width:0!important}
.login-brand,.login-brand .brand-copy,.login-card-brand,.login-card-brand-copy{min-width:0!important}
.login-brand .brand-logo{width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;max-width:62px!important;max-height:62px!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:contain!important;object-position:center!important;padding:6px!important;background:#fff!important;overflow:hidden!important;flex:0 0 62px!important}
.login-card-brand .login-card-logo{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important;aspect-ratio:1/1!important;flex:0 0 58px!important;border-radius:50%!important;object-fit:contain!important;object-position:center!important;padding:5px!important;background:#fff!important;box-shadow:0 5px 15px rgba(11,49,93,.10)!important;overflow:hidden!important}
.login-card-brand{align-items:center!important;justify-content:flex-start!important;text-align:left!important}
.login-card-brand-copy{text-align:left!important}
.login-card-brand-copy strong,.login-card-brand-copy span{text-align:left!important}
.login-card h1{text-align:left!important}
.login-card .lead{text-align:left!important}
.login-form{text-align:left!important}
.login-form label{text-align:left!important}
.login-options{align-items:flex-start!important;justify-content:space-between!important;text-align:left!important}
.login-help{text-align:left!important}
.security-box{text-align:left!important}
.security-box strong{justify-content:flex-start!important;text-align:left!important}
.login-footer{text-align:center!important}

/* ---------- BADGES / STATUS ---------- */
.app-shell .badge,.app-shell .status-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;vertical-align:middle!important;line-height:1.1!important}

/* ---------- MODALS ---------- */
.app-shell .modal-backdrop{overflow:auto!important}
.app-shell .modal{width:min(720px,calc(100vw - 32px))!important;max-width:100%!important;max-height:calc(100dvh - 32px)!important;display:flex!important;flex-direction:column!important}
.app-shell .modal-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;text-align:left!important}
.app-shell .modal-body{min-height:0!important;overflow:auto!important;text-align:left!important}
.app-shell .modal-footer,.app-shell .modal-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important}

/* ---------- RESPONSIVE: TABLET ---------- */
@media(max-width:1100px){
  .app-shell>.layout{grid-template-columns:228px minmax(0,1fr)!important}
  .app-shell>.layout>.sidebar{width:228px!important;min-width:228px!important;max-width:228px!important}
  .app-shell>.layout>.content{padding:24px 22px 42px!important}
  .app-shell .page-head{gap:14px!important}
  .app-shell .head-actions{max-width:45%!important}
  .login-page{grid-template-columns:minmax(0,1fr) minmax(380px,.82fr)!important}
}

/* ---------- RESPONSIVE: PHONE ---------- */
@media(max-width:900px){
  html,body{overflow:hidden!important}
  .app-shell{grid-template-rows:64px minmax(0,1fr)!important}
  .app-shell>.topbar{height:64px!important;min-height:64px!important;position:relative!important}
  .app-shell>.layout{display:block!important;height:100%!important;overflow:hidden!important}
  .app-shell>.layout>.sidebar{position:fixed!important;top:64px!important;left:0!important;width:min(320px,88vw)!important;min-width:0!important;max-width:none!important;height:calc(100dvh - 64px)!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;z-index:1600!important;box-shadow:14px 0 35px rgba(4,28,53,.22)!important}
  .app-shell>.layout>.sidebar.open{transform:translateX(0)!important}
  .app-shell>.layout>.content{display:block!important;width:100%!important;height:100%!important;padding:20px 16px calc(100px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important}
  .app-shell>.layout>.sidebar-scrim{display:block!important;position:fixed!important;inset:64px 0 0!important;background:rgba(5,24,42,.38)!important;opacity:0!important;pointer-events:none!important;z-index:1500!important;transition:opacity .2s ease!important}
  .app-shell>.layout>.sidebar-scrim.open{opacity:1!important;pointer-events:auto!important}
  .app-shell>.mobile-nav{display:flex!important;left:10px!important;right:10px!important;bottom:10px!important;height:64px!important;padding:5px!important;padding-bottom:calc(5px + env(safe-area-inset-bottom))!important;gap:4px!important;z-index:1700!important;background:rgba(255,255,255,.97)!important;border:1px solid #dce6ee!important;border-radius:17px!important;box-shadow:0 12px 30px rgba(12,47,78,.14)!important}
  .app-shell>.mobile-nav .navbtn{flex:1 1 0!important;min-width:0!important;min-height:52px!important;margin:0!important;padding:5px 3px!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;text-align:center!important;line-height:1.1!important}
  .app-shell .page-head{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:10px!important}
  .app-shell .head-actions{max-width:none!important;width:100%!important;justify-content:flex-start!important}
  .app-shell .head-actions .btn{flex:0 0 auto!important}
  .app-shell .section-title,.app-shell .section-heading,.app-shell .card-head-modern{flex-direction:column!important;align-items:stretch!important}
  .app-shell .section-title>*,.app-shell .section-heading>*,.app-shell .card-head-modern>*{max-width:100%!important}
  .app-shell .command-hero{grid-template-columns:1fr!important}
  .app-shell .dashboard-split{grid-template-columns:1fr!important}
  .app-shell .grid4,.app-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-shell .form-grid{grid-template-columns:1fr 1fr!important}
  .login-page{display:flex!important;flex-direction:column!important;height:auto!important;min-height:100dvh!important;overflow:auto!important}
  .login-visual{min-height:auto!important;padding:30px 24px 24px!important}
  .login-panel{padding:24px 18px 32px!important;align-items:flex-start!important}
  .login-card{width:min(560px,100%)!important}
}

@media(max-width:600px){
  .app-shell>.layout>.content{padding:16px 12px calc(98px + env(safe-area-inset-bottom))!important}
  .app-shell>.topbar{padding-left:12px!important;padding-right:12px!important}
  .app-shell .top-brand-copy{max-width:58vw!important}
  .app-shell .top-brand-copy strong{font-size:11px!important}
  .app-shell .top-brand-copy span{font-size:7.5px!important}
  .app-shell .grid4,.app-shell .kpi-grid{grid-template-columns:1fr!important}
  .app-shell .form-grid{grid-template-columns:1fr!important}
  .app-shell .table-wrap{margin-inline:0!important}
  .app-shell .table{min-width:max-content!important}
  .app-shell .form-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .app-shell .form-actions .btn{width:100%!important}
  .app-shell .head-actions{display:grid!important;grid-template-columns:1fr!important}
  .app-shell .head-actions .btn{width:100%!important}
  .app-shell .page-head h1{font-size:23px!important}
  .app-shell .page-head p{font-size:11px!important}
  .app-shell .section{padding:14px!important}
  .login-visual{padding:24px 18px 20px!important}
  .login-brand .brand-logo{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;max-width:50px!important;max-height:50px!important;flex-basis:50px!important;padding:5px!important}
  .login-title{font-size:30px!important;margin:30px 0 8px!important}
  .login-subtitle{font-size:11px!important}
  .process-list{grid-template-columns:1fr!important;margin-top:18px!important}
  .login-panel{padding:18px 12px 28px!important}
  .login-card{padding:22px 17px!important;border-radius:18px!important}
  .login-card-brand .login-card-logo{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;max-width:48px!important;max-height:48px!important;flex-basis:48px!important;padding:4px!important}
  .login-card h1{font-size:25px!important}
  .login-options{display:block!important}
  .login-help{margin-bottom:5px!important}
}

@media(max-width:380px){
  .app-shell>.layout>.content{padding-left:10px!important;padding-right:10px!important}
  .app-shell>.mobile-nav{left:7px!important;right:7px!important;bottom:7px!important}
  .app-shell>.mobile-nav .navbtn{font-size:8px!important}
  .app-shell .top-brand-copy{max-width:53vw!important}
  .login-card{padding:19px 14px!important}
  .login-title{font-size:27px!important}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ============================================================
   SPPG UI 8.6.2 — DEFINITIVE SHELL + LOGIN ALIGNMENT PASS
   This block intentionally overrides legacy/page-specific rules.
   ============================================================ */

/* ----- App viewport: only inner panels scroll ----- */
html, body { width:100%; min-height:100%; margin:0; }
body { overflow:hidden !important; }
body:has(.app-shell) { overflow:hidden !important; height:100dvh !important; }
.app-shell {
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  display:grid !important;
  grid-template-rows:74px minmax(0,1fr) !important;
  overflow:hidden !important;
}
.app-shell > .topbar {
  position:relative !important;
  top:auto !important;
  height:74px !important;
  min-height:74px !important;
  z-index:1700 !important;
}
.app-shell > .layout {
  display:grid !important;
  grid-template-columns:264px minmax(0,1fr) !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.app-shell > .layout > .sidebar {
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  z-index:1200 !important;
}
.app-shell > .layout > .content {
  width:auto !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
}

/* ----- Consistent icon/text spacing ----- */
.app-shell .navbtn,
.app-shell .top-brand,
.app-shell .top-left,
.app-shell .top-actions,
.app-shell .user-menu,
.app-shell .profile-item,
.app-shell .section-title,
.app-shell .section-heading,
.app-shell .card-head-modern,
.app-shell .employee-preview,
.app-shell .operation-card,
.app-shell .summary-item,
.app-shell .kpi-head,
.app-shell .ops-top {
  gap:14px !important;
}
.app-shell .navbtn { align-items:center !important; }
.app-shell .nav-icon { width:22px !important; min-width:22px !important; flex:0 0 22px !important; }
.app-shell .navbtn > span:last-child { min-width:0 !important; overflow-wrap:anywhere !important; }
.app-shell .process-item { grid-template-columns:38px 48px minmax(0,1fr) !important; gap:15px !important; }
.app-shell .process-icon { flex:0 0 48px !important; }
.app-shell .process-item > div:last-child { min-width:0 !important; }
.app-shell .process-item strong,
.app-shell .process-item span { overflow-wrap:anywhere !important; }

/* ----- Login: centered identity in the card ----- */
.login-brand { align-items:center !important; gap:18px !important; }
.login-brand .brand-logo {
  width:72px !important; height:72px !important;
  min-width:72px !important; min-height:72px !important;
  max-width:72px !important; max-height:72px !important;
  flex:0 0 72px !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%) !important;
  object-fit:contain !important; object-position:center !important;
  background:#fff !important; padding:5px !important; overflow:hidden !important;
}
.login-card-brand {
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:0 0 22px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid var(--line) !important;
  text-align:center !important;
}
.login-card-brand .login-card-logo {
  width:76px !important; height:76px !important;
  min-width:76px !important; min-height:76px !important;
  max-width:76px !important; max-height:76px !important;
  flex:0 0 76px !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%) !important;
  object-fit:contain !important; object-position:center !important;
  background:#fff !important; padding:6px !important; overflow:hidden !important;
  box-shadow:0 5px 16px rgba(11,49,93,.10) !important;
}
.login-card-brand-copy { min-width:0 !important; text-align:center !important; }
.login-card-brand-copy strong,
.login-card-brand-copy span { display:block !important; text-align:center !important; }
.login-card-brand-copy strong { font-size:18px !important; line-height:1.2 !important; }
.login-card-brand-copy span { margin-top:4px !important; font-size:10px !important; line-height:1.4 !important; }
.login-card h1,
.login-card .lead { text-align:center !important; }
.login-form,
.login-form label,
.login-help { text-align:left !important; }
.login-submit { display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; }
.security-box strong { display:flex !important; align-items:center !important; gap:8px !important; }

/* ----- Login visual identity: circle + centered copy on small screens ----- */
@media (max-width:900px){
  .app-shell { grid-template-rows:64px minmax(0,1fr) !important; }
  .app-shell > .topbar { height:64px !important; min-height:64px !important; }
  .app-shell > .layout { display:block !important; height:100% !important; overflow:hidden !important; }
  .app-shell > .layout > .sidebar {
    position:fixed !important;
    top:64px !important; left:0 !important;
    width:min(320px,88vw) !important;
    height:calc(100dvh - 64px) !important;
    min-height:0 !important;
    max-height:none !important;
    transform:translateX(-105%) !important;
    overflow-y:auto !important;
    z-index:1800 !important;
  }
  .app-shell > .layout > .sidebar.open { transform:translateX(0) !important; }
  .app-shell > .layout > .content {
    width:100% !important; height:100% !important; min-height:0 !important;
    overflow-x:hidden !important; overflow-y:auto !important;
  }
  .app-shell > .layout > .sidebar-scrim { z-index:1700 !important; }
  .app-shell > .mobile-nav { z-index:1900 !important; }
  .login-brand { justify-content:flex-start !important; }
}
@media (max-width:600px){
  .login-brand .brand-logo {
    width:56px !important; height:56px !important;
    min-width:56px !important; min-height:56px !important;
    max-width:56px !important; max-height:56px !important;
    flex-basis:56px !important;
  }
  .login-card-brand .login-card-logo {
    width:64px !important; height:64px !important;
    min-width:64px !important; min-height:64px !important;
    max-width:64px !important; max-height:64px !important;
    flex-basis:64px !important;
  }
  .login-card-brand-copy strong { font-size:15px !important; }
  .login-card-brand-copy span { font-size:9px !important; }
  .app-shell .navbtn { gap:10px !important; }
}
@media (max-width:380px){
  .login-card-brand .login-card-logo {
    width:58px !important; height:58px !important;
    min-width:58px !important; min-height:58px !important;
    max-width:58px !important; max-height:58px !important;
    flex-basis:58px !important;
  }
}

/* v8.6.5 — FINAL VISUAL SPACING OVERRIDE
   Authoritative rules placed last to prevent legacy cascade collisions. */
.process-item{
  display:grid !important;
  grid-template-columns:40px 52px minmax(0,1fr) !important;
  column-gap:20px !important;
  row-gap:4px !important;
  align-items:center !important;
  min-width:0 !important;
}
.process-item > .step{width:34px !important;height:34px !important;flex:0 0 34px !important;}
.process-item > .process-icon{width:48px !important;height:48px !important;min-width:48px !important;flex:0 0 48px !important;display:grid !important;place-items:center !important;}
.process-item > div:last-child{min-width:0 !important;padding-left:2px !important;}
.process-item > div:last-child strong,
.process-item > div:last-child span{display:block !important;min-width:0 !important;}
/* Login brand logos must be true circles at every breakpoint. */
.login-brand .brand-logo,
.login-card-brand .login-card-logo,
.login-user-icon .login-card-logo{
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%) !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
}
/* Desktop application shell: sidebar is viewport-fixed and content owns scrolling. */
.app-shell .layout{min-height:0 !important;}
.app-shell .sidebar{position:fixed !important;left:0 !important;top:72px !important;bottom:0 !important;height:auto !important;max-height:none !important;overflow-y:auto !important;overflow-x:hidden !important;}
.app-shell .content{min-width:0 !important;overflow-x:hidden !important;}
@media (max-width:900px){
  .app-shell .sidebar{position:fixed !important;top:64px !important;bottom:0 !important;height:calc(100dvh - 64px) !important;max-height:none !important;}
  .app-shell .content{height:100% !important;overflow-y:auto !important;overflow-x:hidden !important;}
  .process-item{grid-template-columns:30px 44px minmax(0,1fr) !important;column-gap:14px !important;}
  .process-item > .step{width:28px !important;height:28px !important;}
  .process-item > .process-icon{width:44px !important;height:44px !important;min-width:44px !important;}
}
@media (max-width:560px){
  .process-item{grid-template-columns:28px 42px minmax(0,1fr) !important;column-gap:12px !important;padding:10px 12px !important;}
  .process-item > .step{width:26px !important;height:26px !important;}
  .process-item > .process-icon{width:42px !important;height:42px !important;min-width:42px !important;}
  .login-brand .brand-logo{border-radius:50% !important;clip-path:circle(50% at 50% 50%) !important;}
  .login-card-brand .login-card-logo{border-radius:50% !important;clip-path:circle(50% at 50% 50%) !important;}
}

/* v8.6.6 — CHROME ALIGNMENT / NO VOID BETWEEN HEADER, SIDEBAR AND CONTENT
   Final shell geometry: one header, one sidebar origin, one content origin. */
.app-shell{position:relative !important;min-height:100dvh !important;height:100dvh !important;overflow:hidden !important;}
.app-shell>.topbar{position:fixed !important;left:0 !important;right:0 !important;top:0 !important;height:72px !important;min-height:72px !important;z-index:2000 !important;}
.app-shell>.layout{position:relative !important;display:grid !important;grid-template-columns:258px minmax(0,1fr) !important;width:100% !important;height:100dvh !important;min-height:0 !important;margin:0 !important;padding-top:72px !important;overflow:hidden !important;}
.app-shell>.layout>.sidebar{position:fixed !important;left:0 !important;top:72px !important;bottom:0 !important;width:258px !important;height:calc(100dvh - 72px) !important;max-height:none !important;z-index:1900 !important;overflow-x:hidden !important;overflow-y:auto !important;}
.app-shell>.layout>.content{grid-column:2 !important;min-width:0 !important;width:auto !important;height:calc(100dvh - 72px) !important;min-height:0 !important;margin:0 !important;padding:18px clamp(16px,2.4vw,38px) 92px !important;overflow-x:hidden !important;overflow-y:auto !important;scroll-behavior:smooth !important;}
.app-shell>.layout>.content>.page-head:first-child{margin-top:0 !important;}
@media(min-width:1440px){.app-shell>.layout>.content{padding-left:clamp(28px,3vw,52px) !important;padding-right:clamp(28px,3vw,52px) !important;}}
@media(max-width:1199px) and (min-width:901px){.app-shell>.layout{grid-template-columns:224px minmax(0,1fr) !important}.app-shell>.layout>.sidebar{width:224px !important}.app-shell>.layout>.content{padding-top:18px !important}}
@media(max-width:900px){
  .app-shell{height:100dvh !important;overflow:hidden !important}
  .app-shell>.topbar{height:64px !important;min-height:64px !important}
  .app-shell>.layout{display:block !important;height:100dvh !important;min-height:0 !important;padding-top:64px !important;overflow:hidden !important}
  .app-shell>.layout>.sidebar{top:64px !important;width:min(320px,88vw) !important;height:calc(100dvh - 64px) !important;}
  .app-shell>.layout>.content{height:calc(100dvh - 64px) !important;padding:16px 14px 92px !important;overflow-y:auto !important;}
}
@media(max-width:560px){.app-shell>.layout>.content{padding:14px 12px 92px !important}}


/* v8.6.11 — final sidebar behavior: desktop sidebar is fixed and does not scroll. */
.app-shell>.layout>.sidebar{overflow-y:hidden !important;overflow-x:hidden !important;overscroll-behavior:none !important;}
@media(max-width:900px){.app-shell>.layout>.sidebar{overflow-y:hidden !important;overflow-x:hidden !important;}}
/* v8.6.11 — dashboard intelligence panel intentionally removed from dashboard. */
.dashboard-intelligence{display:none !important;}

.crew-auto-summary{display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border,#dbe5ef);border-radius:12px;background:#f7fbff}.crew-auto-summary span{display:flex;gap:5px;align-items:center}.crew-auto-summary b{color:#123b61}@media(max-width:560px){.crew-auto-summary{display:grid;gap:8px}}
/* v8.6.11 — vehicle → route → cluster → KPM/PM task hierarchy */
.vehicle-task-tree{display:grid;gap:14px;margin-top:16px}
.distribution-route-group{border:1px solid var(--line,#dce7f1);border-radius:14px;padding:14px;background:rgba(247,250,253,.72)}
.distribution-route-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.distribution-route-head h4{margin:2px 0 0;font-size:15px}
.distribution-kpm-list{margin-top:14px;border-top:1px solid var(--line,#dce7f1);padding-top:12px}
.kpm-list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font-size:12px}
.kpm-list-head span{color:var(--muted,#6b7d90);font-weight:600}
.kpm-list-items{display:grid;gap:6px}
.kpm-task-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;background:#fff;border:1px solid var(--line,#dce7f1);border-radius:9px;font-size:12px}
.kpm-task-row strong{white-space:nowrap}
@media(max-width:700px){.distribution-route-head{align-items:flex-start}.kpm-task-row{align-items:flex-start}.distribution-route-group{padding:11px}}

/* v8.6.12 — FIXED SIDEBAR FIT: all navigation remains visible without sidebar scrolling.
   The sidebar is a fixed navigation rail; on shorter desktop viewports its internal
   spacing is compacted and the non-essential helper card is removed. Content remains
   the only scrollable area. */
@media (min-width:901px) and (max-height:920px){
  .app-shell>.layout>.sidebar{
    overflow-y:hidden !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
    padding:10px 10px 12px !important;
  }
  .app-shell>.layout>.sidebar::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
  .app-shell>.layout>.sidebar .side-brand{padding:5px 6px 9px !important;margin-bottom:4px !important;}
  .app-shell>.layout>.sidebar .logo-row{gap:9px !important;}
  .app-shell>.layout>.sidebar .logo-row img{width:42px !important;height:42px !important;min-width:42px !important;}
  .app-shell>.layout>.sidebar .logo-row strong{font-size:11px !important;line-height:1.15 !important;}
  .app-shell>.layout>.sidebar .logo-row span{font-size:7.5px !important;line-height:1.2 !important;}
  .app-shell>.layout>.sidebar .side-context-primary{
    margin:0 3px 7px !important;
    padding:8px 10px !important;
    border-radius:11px !important;
    gap:2px !important;
  }
  .app-shell>.layout>.sidebar .side-context-primary span{font-size:7px !important;letter-spacing:.85px !important;}
  .app-shell>.layout>.sidebar .side-context-primary b{font-size:11px !important;line-height:1.2 !important;}
  .app-shell>.layout>.sidebar .side-context-primary small{font-size:7.5px !important;line-height:1.25 !important;margin-top:0 !important;}
  .app-shell>.layout>.sidebar .side-title{
    font-size:7px !important;
    letter-spacing:.9px !important;
    margin:7px 7px 3px !important;
    line-height:1.1 !important;
  }
  .app-shell>.layout>.sidebar .navbtn{
    min-height:33px !important;
    height:33px !important;
    margin:1px 3px !important;
    width:calc(100% - 6px) !important;
    padding:5px 8px !important;
    border-radius:9px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    gap:8px !important;
  }
  .app-shell>.layout>.sidebar .nav-icon{
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
  }
  .app-shell>.layout>.sidebar .nav-icon .svg{width:14px !important;height:14px !important;}
  .app-shell>.layout>.sidebar .sidebar-help{display:none !important;}
}

/* Very short desktop/laptop viewports: prioritize access to every menu item. */
@media (min-width:901px) and (max-height:760px){
  .app-shell>.layout>.sidebar{padding:6px 8px 8px !important;}
  .app-shell>.layout>.sidebar .side-brand{display:none !important;}
  .app-shell>.layout>.sidebar .side-context-primary{margin-bottom:5px !important;padding:7px 9px !important;}
  .app-shell>.layout>.sidebar .side-title{margin:5px 6px 2px !important;}
  .app-shell>.layout>.sidebar .navbtn{min-height:29px !important;height:29px !important;padding:3px 7px !important;font-size:10px !important;}
  .app-shell>.layout>.sidebar .nav-icon{width:24px !important;height:24px !important;min-width:24px !important;}
}

/* Keep the mobile drawer usable without making the main page scroll with it. */
@media (max-width:900px){
  .app-shell>.layout>.sidebar{overflow-y:hidden !important;overflow-x:hidden !important;scrollbar-width:none !important;}
  .app-shell>.layout>.sidebar::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
}


/* v8.6.13 — compact fixed sidebar identity/navigation */
.app-shell .sidebar{
  overflow:hidden!important;
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.app-shell .sidebar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.app-shell .side-brand{display:none!important}
.app-shell .sidebar-help{display:none!important}
.app-shell .side-context-primary{margin:0 6px 12px!important;padding:12px 13px!important;border-radius:15px!important}
.app-shell .side-context-primary span{display:block!important;font-size:8px!important;letter-spacing:1px!important}
.app-shell .side-context-primary b{display:block!important;margin-top:5px!important;font-size:12px!important;line-height:1.25!important;letter-spacing:.05px!important}
.app-shell .side-context-primary small{display:block!important;margin-top:4px!important;font-size:9px!important;line-height:1.3!important}
.app-shell .side-title{margin:12px 8px 5px!important;font-size:8px!important;line-height:1.2!important;letter-spacing:1px!important}
.app-shell .navbtn{min-height:39px!important;padding:8px 10px!important;margin:1px 0!important}
.app-shell .navbtn .nav-icon{width:30px!important;height:30px!important;min-width:30px!important;margin-right:9px!important}
@media (max-height:760px) and (min-width:821px){
  .app-shell .sidebar{padding:12px 10px!important}
  .app-shell .side-context-primary{margin-bottom:8px!important;padding:9px 11px!important}
  .app-shell .side-context-primary b{font-size:11px!important}
  .app-shell .side-context-primary small{font-size:8px!important}
  .app-shell .side-title{margin:8px 7px 3px!important}
  .app-shell .navbtn{min-height:34px!important;padding:6px 9px!important}
  .app-shell .navbtn .nav-icon{width:27px!important;height:27px!important;min-width:27px!important;margin-right:8px!important}
}
@media (max-width:820px){
  .app-shell .side-context-primary{margin:0 4px 12px!important}
}

/* v8.6.14 — COMPLETE DESKTOP SIDEBAR FIT
   All currently implemented navigation pages remain visible without sidebar scrolling.
   Desktop: fixed/no-scroll. Mobile: burger drawer. */
@media (min-width:821px){
  .app-shell>.layout>.sidebar{
    overflow:hidden!important;
    overflow-y:hidden!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    padding:8px 8px 10px!important;
  }
  .app-shell>.layout>.sidebar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .app-shell .side-context-primary{
    margin:0 4px 7px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    gap:1px!important;
  }
  .app-shell .side-context-primary span{font-size:7px!important;line-height:1.1!important;letter-spacing:.9px!important}
  .app-shell .side-context-primary b{margin-top:3px!important;font-size:10.5px!important;line-height:1.15!important}
  .app-shell .side-context-primary small{margin-top:3px!important;font-size:7.5px!important;line-height:1.2!important}
  .app-shell .side-title{
    margin:6px 6px 2px!important;
    font-size:7px!important;
    line-height:1.05!important;
    letter-spacing:.85px!important;
  }
  .app-shell .navbtn{
    min-height:31px!important;
    height:31px!important;
    padding:4px 7px!important;
    margin:1px 0!important;
    border-radius:8px!important;
    gap:7px!important;
    font-size:10.5px!important;
    line-height:1.05!important;
  }
  .app-shell .navbtn .nav-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    margin-right:1px!important;
  }
  .app-shell .navbtn .nav-icon .svg{width:13px!important;height:13px!important}
}

/* Short/compact laptop displays: keep every navigation item accessible without scrolling. */
@media (min-width:821px) and (max-height:850px){
  .app-shell>.layout>.sidebar{padding:6px 7px 8px!important}
  .app-shell .side-context-primary{margin-bottom:5px!important;padding:7px 9px!important}
  .app-shell .side-context-primary b{font-size:10px!important}
  .app-shell .side-context-primary small{font-size:7px!important}
  .app-shell .side-title{margin:5px 5px 2px!important;font-size:6.8px!important}
  .app-shell .navbtn{min-height:29px!important;height:29px!important;padding:3px 6px!important;font-size:10px!important;gap:6px!important}
  .app-shell .navbtn .nav-icon{width:23px!important;height:23px!important;min-width:23px!important}
}

/* ---------- FINAL MOBILE LOGIN SCROLL FIX 8.6.16 ---------- */
html.login-view, body.login-view {
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
  min-height:100%!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
}
body.login-view #app {
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}
.login-page {
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}
@media(max-width:900px){
  html.login-view, body.login-view { overflow-y:auto!important; overflow-x:hidden!important; }
  .login-page {
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-y:visible!important;
    overflow-x:hidden!important;
  }
  .login-visual, .login-panel { flex:0 0 auto!important; }
  .login-visual { min-height:auto!important; }
  .login-panel { min-height:auto!important; padding-bottom:40px!important; }
  .login-card { margin-bottom:8px!important; }
}
@media(max-width:600px){
  .login-visual { padding-bottom:22px!important; }
  .login-panel { padding-bottom:48px!important; }
}


/* v8.6.18 — FINAL MOBILE LOGIN SCROLL OVERRIDE
   Login is a normal document-flow page. Dashboard shell locking must never
   prevent the login page from becoming vertically scrollable on phones.
*/
html.login-view,
body.login-view{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  position:static!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body.login-view #app{
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  position:static!important;
}
body.login-view .login-page{
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}
body.login-view .login-visual,
body.login-view .login-panel{
  flex:0 0 auto!important;
  height:auto!important;
  max-height:none!important;
}
body.login-view .login-visual{
  overflow:hidden!important;
}
body.login-view .login-panel{
  overflow:visible!important;
  min-height:0!important;
  padding-bottom:max(48px,env(safe-area-inset-bottom))!important;
}
@media(max-width:900px){
  html.login-view,body.login-view{
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
  }
  body.login-view .login-page{
    min-height:100dvh!important;
    height:auto!important;
  }
}


/* v8.6.19 — MOBILE LOGIN SCROLL ROOT FIX
   The application shell intentionally locks the viewport, but that rule must
   never apply to the unauthenticated login document. The root <html> element
   is explicitly marked by app.js while login is rendered.
*/
html.login-view,
html.login-view body,
body.login-view {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  position: static !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}
html.login-view {
  width: 100% !important;
}
html.login-view body {
  width: 100% !important;
}
html.login-view #app {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}
html.login-view .login-page {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  overflow: visible !important;
  justify-content: flex-start !important;
}
@media (max-width: 900px) {
  html.login-view,
  html.login-view body {
    overflow-y: scroll !important;
    overscroll-behavior-y: auto !important;
  }
  html.login-view .login-visual,
  html.login-view .login-panel {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html.login-view .login-panel {
    padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
  }
}


/* v8.6.20 — FINAL SYSTEM-WIDE RESPONSIVE / NAVIGATION / LOGIN LAYER
   This is the single authoritative layer placed last to neutralize legacy cascade conflicts. */
@media (min-width:821px){
  .app-shell>.layout>.sidebar{overflow-y:hidden!important;overflow-x:hidden!important;scrollbar-width:none!important;overscroll-behavior:none!important;}
  .app-shell>.layout>.sidebar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .app-shell>.layout>.content{overflow-y:auto!important;overflow-x:hidden!important;}
  .app-shell .hamb{display:none!important}
  .app-shell>.mobile-nav{display:none!important}
}
@media (max-width:820px){
  .app-shell>.topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;height:64px!important;min-height:64px!important;z-index:2000!important}
  .app-shell>.layout{height:100dvh!important;padding-top:64px!important;overflow:hidden!important}
  .app-shell>.layout>.content{height:calc(100dvh - 64px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:110px!important;-webkit-overflow-scrolling:touch!important}
  .app-shell>.layout>.sidebar{position:fixed!important;top:64px!important;bottom:0!important;left:0!important;width:min(320px,88vw)!important;height:calc(100dvh - 64px)!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;z-index:2100!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important}
  .app-shell>.layout>.sidebar.open{transform:translateX(0)!important}
  .app-shell>.layout>.sidebar-scrim{display:block!important;position:fixed!important;inset:64px 0 0!important;z-index:2050!important;background:rgba(4,27,46,.42)!important;opacity:0!important;pointer-events:none!important;transition:opacity .2s ease!important}
  .app-shell>.layout>.sidebar-scrim.open{opacity:1!important;pointer-events:auto!important}
  .app-shell .hamb{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border:1px solid #dbe7ef!important;border-radius:12px!important;background:#f1f7fb!important;color:#1269a0!important;flex:0 0 42px!important}
  .app-shell .hamb .svg{width:20px!important;height:20px!important}
  .app-shell>.mobile-nav{display:none!important}
  .app-shell .top-left{gap:8px!important;min-width:0!important}
  .app-shell .top-brand{min-width:0!important;gap:8px!important}
  .app-shell .top-brand-copy{min-width:0!important;max-width:calc(100vw - 160px)!important}
}

/* Login owns its own scroll container; body stays inert while login is shown. */
html.login-view, body.login-view{width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;overflow:hidden!important;position:static!important;}
html.login-view #app, body.login-view #app{width:100%!important;height:100%!important;min-height:100%!important;max-height:none!important;overflow:hidden!important;position:static!important;}
html.login-view .login-page{width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;}
@media(max-width:900px){
  html.login-view .login-page{height:100dvh!important;min-height:100dvh!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;overflow-y:scroll!important;}
  html.login-view .login-visual,html.login-view .login-panel{height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;}
  html.login-view .login-panel{padding-bottom:max(56px,env(safe-area-inset-bottom))!important;}
}

/* Vehicle crew is read-only in schedule forms: vehicle is the single source of crew assignment. */
.crew-auto-summary{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 18px!important;min-height:42px!important;padding:9px 12px!important;background:#f7fbff!important;border:1px solid #dce8ef!important;border-radius:10px!important;}
.crew-auto-summary span{font-size:11px!important;color:#557086!important;}
.crew-auto-summary b{color:#173f5b!important;}
@media(max-width:600px){.crew-auto-summary{display:grid!important;gap:5px!important;min-height:40px!important}.crew-auto-summary span{font-size:10px!important}}


/* v8.6.21 — MOBILE-FIRST RESPONSIVE REPAIR
   Authoritative final layer. Mobile header, drawer navigation, content flow,
   typography/alignment and login scrolling are handled here. */

*{box-sizing:border-box}
html,body{max-width:100%;}
img,svg{max-width:100%;}
button,input,select,textarea{font:inherit;}

/* Desktop: fixed chrome, sidebar never scrolls. */
@media (min-width:821px){
  .app-shell .topbar{position:fixed!important;top:0;left:0;right:0;height:72px!important;z-index:2000!important;}
  .app-shell .layout{padding-top:72px!important;min-height:100dvh!important;display:grid!important;grid-template-columns:264px minmax(0,1fr)!important;overflow:visible!important;}
  .app-shell .sidebar{position:fixed!important;top:72px!important;left:0!important;bottom:0!important;width:264px!important;height:calc(100dvh - 72px)!important;overflow:hidden!important;}
  .app-shell .content{grid-column:2!important;min-width:0!important;width:100%!important;max-width:none!important;overflow-x:hidden!important;}
}

/* Mobile: viewport itself scrolls; content is the only page flow. */
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;}
  body{overflow-x:hidden!important;}
  .app-shell{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;}

  .app-shell .topbar{
    position:sticky!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;height:64px!important;min-height:64px!important;
    padding:0 10px!important;z-index:2000!important;overflow:visible!important;
  }
  .app-shell .top-left{display:flex!important;align-items:center!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:8px!important;}
  .app-shell .hamb{
    display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;
    width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;
    padding:0!important;margin:0!important;border:1px solid #d8e5ee!important;border-radius:12px!important;
    background:#f4f8fb!important;color:#145a86!important;position:relative!important;z-index:2200!important;
  }
  .app-shell .hamb .svg{width:20px!important;height:20px!important;display:block!important;}
  .app-shell .top-brand{flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:8px!important;overflow:hidden!important;}
  .app-shell .top-brand img{width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px!important;}
  .app-shell .top-brand-copy{min-width:0!important;max-width:none!important;overflow:hidden!important;}
  .app-shell .top-brand-copy strong{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .app-shell .top-brand-copy span{font-size:8px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  /* Only compact header actions remain on phones. */
  .app-shell .top-actions{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;min-width:0!important;}
  .app-shell .global-search-wrap,.app-shell .system-status,.app-shell .top-date{display:none!important;}
  .app-shell .notification-btn{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;}
  .app-shell .profile-trigger{width:40px!important;height:40px!important;min-width:40px!important;}
  .app-shell .profile-wrap{flex:0 0 40px!important;}

  .app-shell .layout{display:block!important;width:100%!important;min-height:0!important;height:auto!important;padding-top:0!important;overflow:visible!important;}
  .app-shell .content{
    display:block!important;width:100%!important;max-width:none!important;min-width:0!important;
    min-height:calc(100dvh - 64px)!important;height:auto!important;overflow:visible!important;
    padding:16px 14px 40px!important;margin:0!important;
  }

  /* Drawer: hamburger controls it. Drawer may scroll internally only when its own height is insufficient. */
  .app-shell .sidebar{
    position:fixed!important;top:64px!important;left:0!important;bottom:0!important;
    width:min(310px,86vw)!important;height:calc(100dvh - 64px)!important;max-height:none!important;
    padding:14px 12px 22px!important;overflow-y:auto!important;overflow-x:hidden!important;
    transform:translateX(-110%)!important;transition:transform .22s ease!important;
    z-index:2100!important;box-shadow:18px 0 42px rgba(5,35,65,.2)!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;
  }
  .app-shell .sidebar.open{transform:translateX(0)!important;}
  .app-shell .sidebar-scrim{display:block!important;position:fixed!important;inset:64px 0 0!important;z-index:2050!important;background:rgba(4,27,46,.42)!important;opacity:0!important;pointer-events:none!important;}
  .app-shell .sidebar-scrim.open{opacity:1!important;pointer-events:auto!important;}
  .app-shell .mobile-nav{display:none!important;}

  /* Remove leftover helper box on compact drawer; navigation is the priority. */
  .app-shell .sidebar-help{display:none!important;}
  .sidebar .side-context-primary{margin:0 2px 10px!important;padding:10px 12px!important;}
  .sidebar .side-title{margin:11px 7px 4px!important;}
  .sidebar .navbtn{min-height:39px!important;padding:8px 10px!important;margin:2px 0!important;gap:10px!important;font-size:13px!important;}
  .sidebar .nav-icon{width:20px!important;min-width:20px!important;}

  /* Mobile page hierarchy: left aligned by default; no awkward full justification. */
  .page-head{width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:left!important;gap:9px!important;margin-bottom:16px!important;}
  .page-head h1,.page-head p,.eyebrow,.section-title,.section-title>div{text-align:left!important;}
  .page-head h1{font-size:24px!important;line-height:1.12!important;margin:2px 0 5px!important;}
  .page-head p{font-size:12px!important;line-height:1.55!important;max-width:none!important;}
  .head-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .head-actions .btn{width:100%!important;min-height:42px!important;}
  .card,.hero,.command-hero,.kpi{width:100%!important;max-width:100%!important;}
  .hero,.command-hero{padding:18px!important;border-radius:18px!important;}
  .hero h2,.command-copy h2{font-size:22px!important;line-height:1.18!important;text-align:left!important;}
  .hero p,.command-copy p{font-size:12px!important;line-height:1.55!important;text-align:left!important;}
  .kpi-grid,.command-kpis,.command-summary,.charts,.grid-4,.attention-grid,.quick-grid{width:100%!important;grid-template-columns:1fr!important;gap:12px!important;}
  .kpi{padding:15px!important;min-height:120px!important;}
  .kpi-value{font-size:27px!important;line-height:1.05!important;}
  .toolbar{width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;}
  .toolbar>*{width:100%!important;min-width:0!important;}
  .form-grid{grid-template-columns:1fr!important;width:100%!important;}
  .form-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .form-actions .btn{width:100%!important;min-height:42px!important;}

  /* Tables remain horizontally scrollable rather than breaking the page width. */
  .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;}
  .table{min-width:720px!important;}
  .menu-table{min-width:820px!important;}

  /* Numeric / metadata alignment. */
  .kpi-value,.metric-value,.stat-value{text-align:left!important;}
  .table th,.table td{text-align:left;vertical-align:middle;}
  .table th.num,.table td.num,.text-right{text-align:right!important;}
  .text-center{text-align:center!important;}
}

/* Login: independent normal document flow on every phone size. */
html.login-view,body.login-view{width:100%!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;position:static!important;}
html.login-view #app{width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important;position:static!important;}
html.login-view .login-page{width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:visible!important;touch-action:auto!important;}
@media(max-width:900px){
  html.login-view,body.login-view{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;}
  html.login-view .login-visual,html.login-view .login-panel{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;overflow:visible!important;}
  html.login-view .login-visual{padding:26px 20px 30px!important;}
  html.login-view .login-panel{padding:22px 14px max(48px,env(safe-area-inset-bottom))!important;}
  html.login-view .login-brand{gap:10px!important;}
  html.login-view .brand-logo{width:58px!important;height:58px!important;flex:0 0 58px!important;}
  html.login-view .brand-copy strong{font-size:18px!important;}
  html.login-view .brand-copy span{font-size:9px!important;margin-top:5px!important;}
  html.login-view .login-title{margin:42px 0 9px!important;font-size:clamp(38px,12vw,54px)!important;line-height:1.02!important;letter-spacing:-1.7px!important;}
  html.login-view .login-subtitle{font-size:15px!important;line-height:1.5!important;}
  html.login-view .process-list{margin-top:26px!important;gap:9px!important;}
  html.login-view .process-item{grid-template-columns:34px 44px minmax(0,1fr)!important;gap:9px!important;padding:10px!important;}
  html.login-view .process-icon{width:40px!important;height:40px!important;}
  html.login-view .process-item strong{font-size:13px!important;}
  html.login-view .process-item span{font-size:10px!important;line-height:1.35!important;}
  html.login-view .login-card{width:100%!important;max-width:520px!important;padding:24px 18px!important;border-radius:20px!important;}
  html.login-view .login-card h1{font-size:27px!important;}
  html.login-view .login-card .lead{text-align:left!important;font-size:12px!important;line-height:1.5!important;}
  html.login-view .login-options{align-items:flex-start!important;}
  html.login-view .login-help{text-align:left!important;line-height:1.45!important;}
}

/* v8.6.22 — MOBILE QUICK ACCESS + BOTTOM SHEET
   Mobile navigation is a fixed bottom bar. Full navigation opens as a bottom sheet.
   Desktop keeps the fixed sidebar. */
@media (min-width:821px){
  .app-shell>.mobile-nav{display:none!important;}
}
@media (max-width:820px){
  .app-shell .hamb{display:none!important;}
  .app-shell>.mobile-nav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    z-index:2400!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;width:100%!important;min-height:64px!important;
    padding:7px 8px max(7px,env(safe-area-inset-bottom))!important;
    gap:4px!important;background:rgba(255,255,255,.97)!important;
    border-top:1px solid #dbe5ee!important;box-shadow:0 -10px 30px rgba(11,49,93,.10)!important;
    backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
  }
  .app-shell>.mobile-nav .mobile-quick-item{
    min-width:0!important;min-height:50px!important;border:0!important;background:transparent!important;
    border-radius:12px!important;color:#5d7187!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:3px!important;padding:4px 2px!important;
    font-size:9px!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important;
    overflow:hidden!important;cursor:pointer!important;
  }
  .app-shell>.mobile-nav .mobile-quick-item:hover,
  .app-shell>.mobile-nav .mobile-quick-item:focus-visible{background:#eef6fc!important;color:#145f93!important;outline:none!important;}
  .app-shell>.mobile-nav .mobile-quick-icon{width:24px!important;height:24px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:#edf5fb!important;color:#145f93!important;}
  .app-shell>.mobile-nav .mobile-quick-icon .svg{width:16px!important;height:16px!important;}
  .app-shell>.mobile-nav .mobile-menu-trigger .mobile-quick-icon{background:#e4f1f8!important;}
  .app-shell>.layout>.content{padding-bottom:92px!important;}
  .app-shell>.layout>.sidebar{display:none!important;}
  .app-shell>.layout>.sidebar-scrim{display:none!important;}

  /* Full menu opens from the bottom; only the sheet itself scrolls. */
  .mobile-menu-modal{align-items:end!important;padding:0!important;background:rgba(6,27,49,.48)!important;}
  .mobile-menu-modal .modal{
    width:100%!important;max-width:none!important;max-height:min(82dvh,760px)!important;
    margin:0!important;border-radius:20px 20px 0 0!important;display:flex!important;flex-direction:column!important;
    overflow:hidden!important;box-shadow:0 -20px 60px rgba(3,25,45,.25)!important;
  }
  .mobile-menu-modal .modal-head{padding:14px 16px 12px!important;flex:0 0 auto!important;position:sticky!important;top:0!important;background:#fff!important;z-index:2!important;}
  .mobile-menu-modal .modal-head:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:999px;background:#c9d6e2;}
  .mobile-menu-modal .modal-head h3{padding-top:7px!important;font-size:16px!important;}
  .mobile-menu-modal .modal-body{padding:10px 14px max(18px,env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;}
  .mobile-menu-sheet-body{display:grid!important;gap:13px!important;}
  .mobile-menu-group{display:grid!important;gap:6px!important;}
  .mobile-sheet-title{font-size:9px!important;font-weight:800!important;letter-spacing:1.1px!important;color:#6c9bbd!important;padding:0 4px!important;text-transform:uppercase!important;}
  .mobile-sheet-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .mobile-menu-item{min-width:0!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;text-align:left!important;border:1px solid #e0e8ef!important;background:#fff!important;border-radius:12px!important;padding:9px!important;color:#173b5e!important;cursor:pointer!important;}
  .mobile-menu-item>.svg{width:32px!important;height:32px!important;padding:7px!important;border-radius:9px!important;background:#edf5fb!important;color:#1769a4!important;}
  .mobile-menu-item span{min-width:0!important;display:block!important;}
  .mobile-menu-item b{display:block!important;font-size:11px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .mobile-menu-item small{display:block!important;font-size:8.5px!important;line-height:1.25!important;color:#7890a5!important;margin-top:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
}
@media(max-width:380px){
  .app-shell>.mobile-nav{min-height:60px!important;padding-left:5px!important;padding-right:5px!important;}
  .app-shell>.mobile-nav .mobile-quick-item{min-height:46px!important;font-size:8px!important;}
  .app-shell>.mobile-nav .mobile-quick-icon{width:22px!important;height:22px!important;}
  .mobile-sheet-grid{grid-template-columns:1fr!important;}
}


/* v8.6.23 — FINAL MOBILE NAV CASCADE LOCK */
@media(max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  .app-shell>.mobile-nav{display:grid!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:64px!important;height:auto!important;z-index:5000!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:6px 7px max(6px,env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #dbe5ee!important;box-shadow:0 -10px 30px rgba(11,49,93,.12)!important;backdrop-filter:blur(14px)!important;}
  .app-shell>.mobile-nav .mobile-quick-item{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;width:100%!important;min-width:0!important;min-height:50px!important;margin:0!important;padding:4px 2px!important;border:0!important;background:transparent!important;border-radius:12px!important;color:#5d7187!important;font-size:9px!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important;}
  .app-shell>.mobile-nav .mobile-quick-icon{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;flex:0 0 24px!important;border-radius:8px!important;background:#edf5fb!important;color:#145f93!important;}
  .app-shell>.mobile-nav .mobile-quick-icon .svg{width:16px!important;height:16px!important;}
  .app-shell>.mobile-nav .mobile-menu-trigger .mobile-quick-icon{background:#e4f1f8!important;}
  .app-shell>.layout>.content{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;}
  .app-shell>.layout>.sidebar{display:none!important;}
  .app-shell>.layout>.sidebar-scrim{display:none!important;}
  .mobile-menu-modal{display:flex!important;position:fixed!important;inset:0!important;align-items:flex-end!important;padding:0!important;z-index:6000!important;}
  .mobile-menu-modal .modal{width:100%!important;max-width:none!important;max-height:82dvh!important;margin:0!important;border-radius:20px 20px 0 0!important;overflow:hidden!important;}
  .mobile-menu-modal .modal-body{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;min-height:0!important;}
}
@media(max-width:380px){.app-shell>.mobile-nav{min-height:60px!important}.app-shell>.mobile-nav .mobile-quick-item{font-size:8px!important;min-height:46px!important}.app-shell>.mobile-nav .mobile-quick-icon{width:22px!important;height:22px!important}}


/* =====================================================================
   v8.6.24 — MOBILE LOGIN FINAL LAYOUT
   One clean mobile composition. The desktop split remains untouched.
   Mobile uses the card as the sole visual surface; all alignment rules
   are explicit so legacy CSS layers cannot distort the layout.
   ===================================================================== */
@media (max-width: 820px){
  html.login-view,
  html.login-view body,
  html.login-view #app{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    position:static !important;
    margin:0 !important;
    padding:0 !important;
  }

  html.login-view .login-page{
    width:100% !important;
    min-height:100dvh !important;
    height:auto !important;
    max-height:none !important;
    display:block !important;
    overflow:visible !important;
    background:#f4f7fb !important;
  }

  /* The promotional desktop panel is intentionally removed on phones.
     The login card already contains the official identity. */
  html.login-view .login-visual{
    display:none !important;
  }

  html.login-view .login-panel{
    width:100% !important;
    min-height:100dvh !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:20px 16px max(28px, env(safe-area-inset-bottom)) !important;
    background:#f4f7fb !important;
  }

  html.login-view .login-card{
    width:100% !important;
    max-width:440px !important;
    box-sizing:border-box !important;
    margin:0 auto !important;
    padding:28px 22px 22px !important;
    border:1px solid #dce5ed !important;
    border-radius:22px !important;
    background:#fff !important;
    box-shadow:0 12px 35px rgba(15,49,82,.09) !important;
    text-align:center !important;
  }

  /* Brand: centered, predictable, no flex collision. */
  html.login-view .login-card-brand{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    margin:0 0 22px !important;
    padding:0 0 18px !important;
    border-bottom:1px solid #e5ebf0 !important;
    box-sizing:border-box !important;
  }

  html.login-view .login-card-brand .login-card-logo{
    display:block !important;
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
    max-width:68px !important;
    max-height:68px !important;
    flex:0 0 68px !important;
    margin:0 !important;
    padding:5px !important;
    box-sizing:border-box !important;
    border-radius:50% !important;
    clip-path:circle(50% at 50% 50%) !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#fff !important;
    border:1px solid #e1e9ef !important;
    box-shadow:0 4px 12px rgba(11,49,93,.08) !important;
  }

  html.login-view .login-card-brand-copy{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
    text-align:center !important;
  }

  html.login-view .login-card-brand-copy strong{
    display:block !important;
    margin:0 !important;
    color:#123b5e !important;
    font-size:17px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:-.25px !important;
    text-align:center !important;
    white-space:normal !important;
  }

  html.login-view .login-card-brand-copy span{
    display:block !important;
    margin:5px 0 0 !important;
    color:#738597 !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    letter-spacing:.1px !important;
    text-align:center !important;
    white-space:normal !important;
  }

  html.login-view .login-card h1{
    margin:0 !important;
    color:#103a5a !important;
    font-size:28px !important;
    line-height:1.08 !important;
    letter-spacing:-1px !important;
    font-weight:850 !important;
    text-align:center !important;
  }

  html.login-view .login-card .lead{
    width:100% !important;
    max-width:360px !important;
    margin:11px auto 24px !important;
    color:#728397 !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    text-align:center !important;
  }

  html.login-view .login-form{
    width:100% !important;
    display:grid !important;
    gap:16px !important;
    margin:0 !important;
    text-align:left !important;
  }

  html.login-view .login-form .field{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  html.login-view .login-form .field label{
    display:block !important;
    margin:0 0 7px !important;
    color:#173b5e !important;
    font-size:12px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    text-align:left !important;
  }

  html.login-view .login-form .input-wrap{
    width:100% !important;
    min-width:0 !important;
    position:relative !important;
  }

  html.login-view .login-form .input-wrap input{
    width:100% !important;
    height:54px !important;
    min-height:54px !important;
    box-sizing:border-box !important;
    padding:0 46px 0 48px !important;
    border:1px solid #d7e1e9 !important;
    border-radius:13px !important;
    background:#f9fbfd !important;
    color:#173b5e !important;
    font-size:13px !important;
    line-height:54px !important;
    outline:none !important;
  }

  html.login-view .login-form .input-wrap input::placeholder{
    color:#a0adba !important;
    opacity:1 !important;
  }

  html.login-view .login-form .input-wrap input:focus{
    background:#fff !important;
    border-color:#6ba4d2 !important;
    box-shadow:0 0 0 3px rgba(31,119,181,.09) !important;
  }

  html.login-view .login-form .input-icon{
    left:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#8092a4 !important;
  }

  html.login-view .login-form .eye-btn{
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    color:#8092a4 !important;
  }

  html.login-view .login-options{
    width:100% !important;
    display:block !important;
    margin:0 !important;
    text-align:left !important;
  }

  html.login-view .login-help{
    display:block !important;
    margin:0 !important;
    color:#7b8996 !important;
    font-size:10.5px !important;
    line-height:1.5 !important;
    text-align:left !important;
  }

  html.login-view .login-submit{
    width:100% !important;
    min-height:52px !important;
    height:52px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    border:0 !important;
    border-radius:13px !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:800 !important;
    text-align:center !important;
  }

  html.login-view .security-box{
    width:100% !important;
    box-sizing:border-box !important;
    margin:18px 0 0 !important;
    padding:13px 14px !important;
    border-radius:13px !important;
    text-align:left !important;
  }

  html.login-view .security-box strong{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 0 5px !important;
    font-size:11px !important;
    line-height:1.35 !important;
    text-align:left !important;
  }

  html.login-view .security-box span{
    display:block !important;
    font-size:10px !important;
    line-height:1.5 !important;
    text-align:left !important;
  }

  html.login-view .login-footer{
    width:100% !important;
    box-sizing:border-box !important;
    margin:20px 0 0 !important;
    padding:15px 0 0 !important;
    border-top:1px solid #e5ebf0 !important;
    color:#84919e !important;
    font-size:10px !important;
    line-height:1.55 !important;
    text-align:center !important;
  }
}

@media (max-width:380px){
  html.login-view .login-panel{padding-left:12px !important;padding-right:12px !important;}
  html.login-view .login-card{padding:24px 16px 20px !important;border-radius:20px !important;}
  html.login-view .login-card-brand .login-card-logo{width:62px !important;height:62px !important;min-width:62px !important;min-height:62px !important;max-width:62px !important;max-height:62px !important;flex-basis:62px !important;}
  html.login-view .login-card h1{font-size:26px !important;}
  html.login-view .login-card .lead{font-size:12px !important;margin-bottom:21px !important;}
  html.login-view .login-form .input-wrap input{height:52px !important;min-height:52px !important;font-size:12px !important;}
  html.login-view .login-submit{height:50px !important;min-height:50px !important;font-size:13px !important;}
}

/* v8.6.25 — SIDEBAR BREATHING ROOM
   Keep the fixed/no-scroll navigation, but add a small visual gap between
   the Monitoring Terpadu context card and the first navigation section. */
@media (min-width:821px){
  .app-shell .sidebar .side-context-primary{margin-bottom:16px!important;}
  .app-shell .sidebar .side-title:first-of-type{margin-top:4px!important;}
}
@media (max-width:820px){
  .app-shell .sidebar .side-context-primary{margin-bottom:14px!important;}
  .app-shell .sidebar .side-title:first-of-type{margin-top:4px!important;}
}


/* v8.6.27 — MOBILE LOGIN CLEAN COMPOSITION
   Reference-aligned mobile login. Uses the existing Inter/system font stack;
   no new typography family or visual language is introduced. Desktop login
   and dashboard navigation are intentionally untouched. */
@media (max-width:820px){
  html.login-view,
  html.login-view body,
  html.login-view #app{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    font-size:14px!important;
  }

  html.login-view .login-page{
    background:#f4f7fb!important;
    min-height:100dvh!important;
  }

  html.login-view .login-panel{
    padding:12px 20px max(24px,env(safe-area-inset-bottom))!important;
    align-items:flex-start!important;
    justify-content:center!important;
    background:#f4f7fb!important;
  }

  html.login-view .login-card{
    width:100%!important;
    max-width:570px!important;
    margin:0 auto!important;
    padding:34px 26px 28px!important;
    border-radius:24px!important;
    border:1px solid #dbe5ed!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(15,46,75,.07)!important;
    text-align:center!important;
  }

  html.login-view .login-card-brand{
    gap:9px!important;
    margin:0 0 32px!important;
    padding:0 0 18px!important;
    border-bottom:1px solid #e5ebf0!important;
  }

  html.login-view .login-card-brand .login-card-logo{
    width:70px!important;
    height:70px!important;
    min-width:70px!important;
    min-height:70px!important;
    max-width:70px!important;
    max-height:70px!important;
    flex:0 0 70px!important;
    padding:5px!important;
    border-radius:50%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#fff!important;
    border:1px solid #dfe8ef!important;
    box-shadow:0 3px 10px rgba(11,49,93,.06)!important;
  }

  html.login-view .login-card-brand-copy strong{
    font-family:inherit!important;
    font-size:20px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:-.35px!important;
    color:#123b5e!important;
    text-align:center!important;
  }

  html.login-view .login-card-brand-copy span{
    font-family:inherit!important;
    margin-top:6px!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:600!important;
    letter-spacing:.05px!important;
    color:#758697!important;
    text-align:center!important;
  }

  html.login-view .login-card h1{
    font-family:inherit!important;
    margin:0!important;
    font-size:34px!important;
    line-height:1.08!important;
    font-weight:800!important;
    letter-spacing:-1.35px!important;
    color:#103a5a!important;
    text-align:center!important;
  }

  html.login-view .login-card .lead{
    font-family:inherit!important;
    width:100%!important;
    max-width:480px!important;
    margin:14px auto 34px!important;
    font-size:15px!important;
    line-height:1.55!important;
    font-weight:400!important;
    letter-spacing:0!important;
    color:#718294!important;
    text-align:center!important;
  }

  html.login-view .login-form{
    width:100%!important;
    display:grid!important;
    gap:20px!important;
    margin:0!important;
    text-align:left!important;
  }

  html.login-view .login-form .field label{
    font-family:inherit!important;
    margin:0 0 9px!important;
    font-size:15px!important;
    line-height:1.3!important;
    font-weight:750!important;
    color:#173b5e!important;
    text-align:left!important;
  }

  html.login-view .login-form .input-wrap input{
    height:58px!important;
    min-height:58px!important;
    padding:0 50px 0 54px!important;
    border-radius:14px!important;
    border:1px solid #d6e0e8!important;
    background:#fafcfe!important;
    font-family:inherit!important;
    font-size:15px!important;
    line-height:58px!important;
    color:#173b5e!important;
  }

  html.login-view .login-form .input-wrap input::placeholder{
    font-family:inherit!important;
    font-size:15px!important;
    color:#a2aeb9!important;
    opacity:1!important;
  }

  html.login-view .login-form .input-icon{
    left:17px!important;
    color:#8092a4!important;
  }

  html.login-view .login-form .eye-btn{
    right:10px!important;
    width:38px!important;
    height:38px!important;
    color:#8092a4!important;
  }

  html.login-view .login-options{
    margin:-2px 0 0!important;
    text-align:center!important;
  }

  html.login-view .login-help{
    font-family:inherit!important;
    display:block!important;
    font-size:11px!important;
    line-height:1.5!important;
    color:#7d8994!important;
    text-align:center!important;
  }

  html.login-view .login-submit{
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    border-radius:14px!important;
    gap:9px!important;
    font-family:inherit!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:center!important;
  }

  html.login-view .security-box{
    margin:22px 0 0!important;
    padding:15px 16px!important;
    border-radius:14px!important;
    text-align:left!important;
  }

  html.login-view .security-box strong{
    gap:9px!important;
    margin:0 0 6px!important;
    font-family:inherit!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:750!important;
  }

  html.login-view .security-box span{
    font-family:inherit!important;
    font-size:11px!important;
    line-height:1.5!important;
  }

  html.login-view .login-footer{
    margin:26px 0 0!important;
    padding:18px 0 0!important;
    font-family:inherit!important;
    font-size:11px!important;
    line-height:1.55!important;
    text-align:center!important;
    color:#84919e!important;
  }
}

@media (max-width:380px){
  html.login-view .login-panel{padding-left:14px!important;padding-right:14px!important;}
  html.login-view .login-card{padding:28px 18px 24px!important;border-radius:21px!important;}
  html.login-view .login-card-brand{margin-bottom:27px!important;}
  html.login-view .login-card-brand .login-card-logo{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;flex-basis:64px!important;}
  html.login-view .login-card-brand-copy strong{font-size:18px!important;}
  html.login-view .login-card-brand-copy span{font-size:10px!important;}
  html.login-view .login-card h1{font-size:30px!important;}
  html.login-view .login-card .lead{font-size:14px!important;margin-bottom:28px!important;}
  html.login-view .login-form{gap:18px!important;}
  html.login-view .login-form .field label{font-size:14px!important;}
  html.login-view .login-form .input-wrap input{height:54px!important;min-height:54px!important;font-size:14px!important;line-height:54px!important;}
  html.login-view .login-form .input-wrap input::placeholder{font-size:14px!important;}
  html.login-view .login-submit{height:54px!important;min-height:54px!important;font-size:15px!important;}
}


/* v8.6.28 — AUTHORITATIVE RESPONSIVE LOGIN BASELINE
   One login composition for desktop + mobile. This block intentionally
   overrides legacy login layers without changing dashboard/navigation. */
html.login-view, body.login-view{
  margin:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  position:static!important;
}
html.login-view #app, body.login-view #app{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow:visible!important;
}
html.login-view .login-page{
  width:100%!important;
  min-width:0!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  align-items:stretch!important;
  overflow:visible!important;
  background:#eef3f8!important;
}
html.login-view .login-visual{
  width:auto!important;
  min-width:0!important;
  min-height:100dvh!important;
  height:auto!important;
  flex:none!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:hidden!important;
}
html.login-view .login-panel{
  width:auto!important;
  min-width:0!important;
  min-height:100dvh!important;
  height:auto!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  overflow:visible!important;
  padding:34px clamp(22px,4vw,52px)!important;
  background:#f7f9fc!important;
}
html.login-view .login-card{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:min(100%,480px)!important;
  min-width:0!important;
  margin:0 auto!important;
}
html.login-view .login-card h1,
html.login-view .login-card .lead{
  text-align:center!important;
}
html.login-view .login-form,
html.login-view .login-form .field,
html.login-view .login-form .field label{
  text-align:left!important;
}

@media(max-width:1100px) and (min-width:901px){
  html.login-view .login-page{grid-template-columns:minmax(0,1fr) minmax(390px,.78fr)!important}
  html.login-view .login-visual{padding:34px 38px!important}
  html.login-view .login-panel{padding:28px 28px!important}
  html.login-view .login-card{padding:28px!important}
}

@media(max-width:900px){
  html.login-view .login-page{
    display:flex!important;
    flex-direction:column!important;
    min-height:100dvh!important;
    height:auto!important;
    overflow:visible!important;
  }
  html.login-view .login-visual{
    display:flex!important;
    min-height:auto!important;
    height:auto!important;
    padding:24px 18px 20px!important;
  }
  html.login-view .login-panel{
    min-height:auto!important;
    height:auto!important;
    padding:18px 16px max(48px,env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:600px){
  html.login-view .login-page{display:block!important;min-height:100dvh!important}
  html.login-view .login-visual{display:none!important}
  html.login-view .login-panel{
    display:flex!important;
    min-height:100dvh!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:18px 14px max(48px,env(safe-area-inset-bottom))!important;
    background:#f4f8fc!important;
  }
  html.login-view .login-page.login-bg-active .login-panel{background:transparent!important;}
  html.login-view .login-card{
    width:100%!important;
    max-width:570px!important;
    padding:24px 18px!important;
    margin:0 auto!important;
    border-radius:20px!important;
  }
  html.login-view .login-card h1{font-size:clamp(25px,7vw,31px)!important}
  html.login-view .login-card .lead{font-size:12px!important;line-height:1.55!important}
  html.login-view .login-form .field label{font-size:12px!important}
  html.login-view .login-form .input-wrap>input{height:52px!important;font-size:13px!important}
  html.login-view .login-help{font-size:10px!important;text-align:center!important}
  html.login-view .login-submit{height:52px!important;font-size:13px!important}
  html.login-view .security-box{text-align:left!important}
  html.login-view .security-box strong{justify-content:flex-start!important}
  html.login-view .login-footer{text-align:center!important}
}

/* v8.6.34 — AUTHORITATIVE RESPONSIVE LOCK
   Final cascade: desktop fixed sidebar; mobile bottom quick access; no horizontal page overflow. */
@media (min-width:821px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  .app-shell{width:100%;min-width:0;}
  .app-shell>.topbar{min-width:0;}
  .app-shell>.layout{min-width:0;}
  .app-shell .sidebar{position:fixed!important;top:72px!important;left:0!important;bottom:0!important;width:264px!important;height:calc(100dvh - 72px)!important;overflow:hidden!important;}
  .app-shell .content{margin-left:264px!important;width:calc(100% - 264px)!important;min-width:0!important;max-width:none!important;overflow-x:hidden!important;}
  .app-shell>.mobile-nav{display:none!important;}
  .app-shell .hamb{display:none!important;}
}
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  body:not(.login-view){padding-bottom:0!important;}
  .app-shell{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important;}
  .app-shell>.topbar{width:100%!important;min-width:0!important;height:64px!important;padding:8px 10px!important;}
  .app-shell .top-left{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;}
  .app-shell .hamb{display:none!important;}
  .app-shell .top-brand{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
  .app-shell .top-brand-copy{min-width:0!important;overflow:hidden!important;}
  .app-shell .top-actions{flex:0 0 auto!important;}
  .app-shell>.layout{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;}
  .app-shell .sidebar,.app-shell .sidebar-scrim{display:none!important;}
  .app-shell .content{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:14px 12px calc(96px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important;}
  .page-head,.page-head>*{min-width:0!important;max-width:100%!important;}
  .page-head h1,.page-head p,.section-title h3,.section-title p{overflow-wrap:anywhere!important;word-break:normal!important;}
  .head-actions{min-width:0!important;}
  .head-actions .btn,.btn{max-width:100%!important;white-space:normal!important;}
  .card,.hero,.command-hero,.kpi,.section,.system-grid,.kpi-grid,.form-grid,.toolbar{min-width:0!important;max-width:100%!important;}
  .table-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain!important;}
  .table{min-width:720px!important;width:max-content!important;max-width:none!important;}
  .table-wrap .table{margin:0!important;}
  .modal-backdrop{padding:10px!important;align-items:center!important;overflow-y:auto!important;}
  .modal{width:min(100%,680px)!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;overflow:hidden!important;}
  .modal-body{min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;}
  .form-grid{grid-template-columns:1fr!important;}
  .form-actions{grid-template-columns:1fr!important;}
  .role-card-actions{flex-wrap:wrap!important;min-width:0!important;}
  .role-card-actions .btn{flex:1 1 auto!important;min-width:120px!important;}
  .app-shell>.mobile-nav{display:grid!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:64px!important;height:auto!important;z-index:5000!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding:5px 6px max(5px,env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #dbe5ee!important;box-shadow:0 -10px 30px rgba(11,49,93,.12)!important;backdrop-filter:blur(14px)!important;}
  .app-shell>.mobile-nav .mobile-quick-item{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;width:100%!important;min-width:0!important;min-height:50px!important;margin:0!important;padding:3px 1px!important;border:0!important;background:transparent!important;border-radius:12px!important;color:#5d7187!important;font-size:9px!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;}
  .app-shell>.mobile-nav .mobile-quick-icon{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;flex:0 0 24px!important;border-radius:8px!important;background:#edf5fb!important;color:#145f93!important;}
  .app-shell>.mobile-nav .mobile-quick-icon .svg{width:16px!important;height:16px!important;}
  .mobile-menu-modal{display:flex!important;position:fixed!important;inset:0!important;align-items:flex-end!important;padding:0!important;z-index:6000!important;}
  .mobile-menu-modal .modal{width:100%!important;max-width:none!important;max-height:84dvh!important;margin:0!important;border-radius:20px 20px 0 0!important;}
  .mobile-menu-modal .modal-body{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;max-height:calc(84dvh - 72px)!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important;}
  .mobile-sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:430px){
  .app-shell .content{padding-left:10px!important;padding-right:10px!important;}
  .app-shell .topbar{padding-left:8px!important;padding-right:8px!important;}
  .app-shell .top-brand img{width:34px!important;height:34px!important;min-width:34px!important;}
  .app-shell .top-brand-copy strong{font-size:10px!important;}
  .app-shell .top-brand-copy span{font-size:7px!important;}
  .app-shell .notification-btn,.app-shell .profile-trigger{width:36px!important;height:36px!important;min-width:36px!important;}
  .app-shell .profile-wrap{flex-basis:36px!important;}
  .mobile-sheet-grid{grid-template-columns:1fr!important;}
  .mobile-menu-item{grid-template-columns:30px minmax(0,1fr)!important;}
}
@media (max-width:820px){
  html.login-view,body.login-view{width:100%!important;max-width:100%!important;min-height:100%!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;}
  html.login-view #app{width:100%!important;min-width:0!important;max-width:100%!important;min-height:100dvh!important;height:auto!important;overflow:visible!important;}
  html.login-view .login-page{width:100%!important;min-width:0!important;max-width:100%!important;min-height:100dvh!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:visible!important;}
  html.login-view .login-panel{width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:18px 12px max(42px,env(safe-area-inset-bottom))!important;}
  html.login-view .login-card{width:100%!important;max-width:520px!important;min-width:0!important;margin:0 auto!important;box-sizing:border-box!important;}
  html.login-view .login-card *{max-width:100%;box-sizing:border-box;}
  html.login-view .login-form .field,.login-form .input-wrap{min-width:0!important;max-width:100%!important;}
  html.login-view .login-form .input-wrap>input{min-width:0!important;width:100%!important;}
  html.login-view .login-card h1,html.login-view .login-card .lead,html.login-view .login-help{text-align:left!important;overflow-wrap:anywhere!important;}
}


/* v8.6.38 — RESPONSIVE REFACTOR / AUTHORITATIVE MOBILE UX
   Final cascade for dashboard pages. Desktop layout remains unchanged.
   Dense tables become accessible cards on phones; actions wrap safely;
   modals, filters, cards and navigation respect viewport/safe areas. */
@media (min-width:821px){
  html,body{overflow-x:hidden!important;}
  .app-shell .content{min-width:0!important;}
  .app-shell .sidebar{overflow:hidden!important;}
  .app-shell .mobile-nav{display:none!important;}
}
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  body:not(.login-view){overflow-y:auto!important;}
  .app-shell,.app-shell>.layout,.app-shell .content{min-width:0!important;max-width:100%!important;}
  .app-shell .content{padding:14px 12px calc(92px + env(safe-area-inset-bottom))!important;}
  .page-head{display:flex!important;align-items:flex-start!important;gap:12px!important;min-width:0!important;}
  .page-head>div:first-child{min-width:0!important;flex:1 1 auto!important;}
  .page-head h1{font-size:24px!important;line-height:1.18!important;overflow-wrap:anywhere!important;}
  .page-head p{font-size:12px!important;line-height:1.5!important;overflow-wrap:anywhere!important;}
  .head-actions{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:7px!important;min-width:0!important;overflow:visible!important;}
  .head-actions .btn{flex:1 1 auto!important;min-width:0!important;max-width:100%!important;white-space:normal!important;}
  .card,.section,.hero,.kpi,.toolbar,.filters,.form-grid,.system-grid,.employee-preview-grid{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  .toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;}
  .toolbar .search,.toolbar .input,.toolbar .select{width:100%!important;min-width:0!important;}
  .filters{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  .filters>*{min-width:0!important;width:100%!important;}
  .form-grid{grid-template-columns:1fr!important;}
  .form-grid .full{grid-column:1!important;}
  .form-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;}
  .form-actions .btn{width:100%!important;min-width:0!important;}
  .modal-backdrop{padding:8px!important;align-items:flex-end!important;}
  .modal{width:100%!important;max-width:100%!important;max-height:94dvh!important;margin:0!important;border-radius:18px 18px 12px 12px!important;overflow:hidden!important;}
  .modal-body{max-height:calc(94dvh - 70px)!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;}
  .mobile-nav{padding-bottom:max(5px,env(safe-area-inset-bottom))!important;}

  /* Tables with 4+ columns are rendered as readable records/cards. */
  table.table.responsive-data-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;border:0!important;border-spacing:0!important;}
  table.table.responsive-data-table thead{display:none!important;}
  table.table.responsive-data-table tbody{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  table.table.responsive-data-table tbody tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 12px!important;padding:12px!important;border:1px solid var(--line,#dbe5ee)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 14px rgba(11,49,93,.05)!important;}
  table.table.responsive-data-table tbody td{display:grid!important;grid-template-columns:minmax(88px,.72fr) minmax(0,1.28fr)!important;gap:8px!important;align-items:start!important;width:auto!important;min-width:0!important;padding:7px 0!important;border:0!important;border-bottom:1px solid #edf2f6!important;font-size:12px!important;line-height:1.4!important;overflow-wrap:anywhere!important;}
  table.table.responsive-data-table tbody td::before{content:attr(data-label);font-size:10px!important;font-weight:750!important;color:#708196!important;text-transform:none!important;}
  table.table.responsive-data-table tbody td:last-child{grid-column:1/-1!important;border-bottom:0!important;padding-top:10px!important;}
  table.table.responsive-data-table tbody td:last-child::before{display:none!important;}
  table.table.responsive-data-table tbody td:last-child .role-card-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important;}
  table.table.responsive-data-table tbody td:last-child .btn{width:100%!important;min-width:0!important;}
  table.table.responsive-data-table code{font-size:10px!important;overflow-wrap:anywhere!important;}
  table.table.responsive-data-table .badge{justify-self:start!important;}

  /* 2-column operational tables remain compact, but never overflow. */
  table.table:not(.responsive-data-table){max-width:100%!important;}
  .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;}

  /* Dense operational cards */
  .distribution-trip-card,.washing-batch-card,.portion-card,.evidence-card,.role-card{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
  .trip-head,.washing-batch-top,.section-title{min-width:0!important;}
  .trip-head,.washing-batch-top{display:flex!important;flex-wrap:wrap!important;gap:10px!important;}
  .trip-head>div:first-child,.washing-batch-top>div:first-child{min-width:0!important;flex:1 1 220px!important;}
  .trip-meta-grid,.washing-batch-metrics,.trip-actions,.evidence-grid,.role-matrix{min-width:0!important;}
  .trip-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .trip-actions .btn{min-width:0!important;width:100%!important;white-space:normal!important;}
  .kpm-task-row{min-width:0!important;}
  .kpm-task-row>*{min-width:0!important;overflow-wrap:anywhere!important;}
  .employee-preview,.timeline-item,.activity-row{min-width:0!important;}
  .activity-row{grid-template-columns:34px minmax(0,1fr)!important;}
  .activity-time{grid-column:2!important;text-align:left!important;}
}
@media (max-width:480px){
  .app-shell .content{padding-left:9px!important;padding-right:9px!important;}
  .page-head h1{font-size:22px!important;}
  .card{padding:13px!important;}
  .kpi-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .kpi{padding:12px!important;min-height:100px!important;}
  .kpi-value{font-size:22px!important;}
  .kpi-label{font-size:10px!important;}
  table.table.responsive-data-table tbody tr{grid-template-columns:1fr!important;}
  table.table.responsive-data-table tbody td{grid-template-columns:92px minmax(0,1fr)!important;}
  .trip-actions{grid-template-columns:1fr!important;}
  .mobile-sheet-grid{grid-template-columns:1fr!important;}
  .mobile-menu-item{min-width:0!important;}
  .mobile-menu-item>*{min-width:0!important;overflow-wrap:anywhere!important;}
}
@media (max-width:360px){
  .app-shell .content{padding-left:7px!important;padding-right:7px!important;}
  .kpi-grid{grid-template-columns:1fr!important;}
  .app-shell>.mobile-nav .mobile-quick-item{font-size:8px!important;}
  .app-shell>.mobile-nav .mobile-quick-icon{width:22px!important;height:22px!important;}
  table.table.responsive-data-table tbody td{grid-template-columns:82px minmax(0,1fr)!important;font-size:11px!important;}
}


/* v8.6.39 — MOBILE MODAL ARCHITECTURE FIX
   One authoritative rule for dashboard dialogs on phones.
   Modal must sit above the topbar and bottom navigation, while only the
   modal body scrolls. Bottom navigation is hidden while a dialog is open. */
@media (max-width:820px){
  body.modal-open .app-shell>.mobile-nav{display:none!important;}
  body.modal-open .app-shell>.topbar{z-index:100!important;}

  .app-shell .modal-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .app-shell .modal-backdrop>.modal{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    flex:0 1 auto!important;
    width:min(100%,720px)!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:calc(100dvh - 12px)!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    border-radius:20px 20px 0 0!important;
    transform:none!important;
  }

  .app-shell .modal-backdrop>.modal>.modal-head{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    min-width:0!important;
    max-width:100%!important;
    padding:14px 14px 12px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    z-index:5!important;
  }

  .app-shell .modal-backdrop>.modal>.modal-head .modal-title-wrap{
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  .app-shell .modal-backdrop>.modal>.modal-head h3{
    margin:0!important;
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important;
  }
  .app-shell .modal-backdrop>.modal>.modal-head .modal-guide{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
  .app-shell .modal-backdrop>.modal>.modal-head .modal-close{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }

  .app-shell .modal-backdrop>.modal>.modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:14px!important;
  }

  /* Keep primary actions reachable without requiring a long scroll back. */
  .app-shell .modal-backdrop>.modal>.modal-body>.form-actions:last-child,
  .app-shell .modal-backdrop>.modal>.modal-body>form>.form-actions:last-child{
    position:sticky!important;
    bottom:0!important;
    z-index:4!important;
    margin:12px -14px -14px!important;
    padding:12px 14px max(12px,env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #e7edf3!important;
    box-shadow:0 -6px 16px rgba(11,49,93,.06)!important;
  }

  .app-shell .modal-backdrop>.modal input,
  .app-shell .modal-backdrop>.modal select,
  .app-shell .modal-backdrop>.modal textarea,
  .app-shell .modal-backdrop>.modal button{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .app-shell .modal-backdrop>.modal .form-grid,
  .app-shell .modal-backdrop>.modal .field-group,
  .app-shell .modal-backdrop>.modal .field,
  .app-shell .modal-backdrop>.modal .stack{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media (max-width:380px){
  .app-shell .modal-backdrop>.modal{max-height:calc(100dvh - 6px)!important;border-radius:18px 18px 0 0!important;}
  .app-shell .modal-backdrop>.modal>.modal-head{padding:12px 12px 10px!important;}
  .app-shell .modal-backdrop>.modal>.modal-body{padding:12px!important;}
  .app-shell .modal-backdrop>.modal>.modal-body>.form-actions:last-child,
  .app-shell .modal-backdrop>.modal>.modal-body>form>.form-actions:last-child{margin:12px -12px -12px!important;padding-left:12px!important;padding-right:12px!important;}
}



/* v8.6.40 CORE FIX — modal is appended directly to BODY, never .app-shell. */
body.modal-open{overflow:hidden!important;overscroll-behavior:none!important;}
body>.modal-backdrop{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;
  margin:0!important;padding:12px!important;box-sizing:border-box!important;z-index:60000!important;
  display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;
  background:rgba(5,22,38,.56)!important;
}
body>.modal-backdrop>.modal{
  position:relative!important;width:min(720px,100%)!important;max-width:720px!important;min-width:0!important;
  max-height:calc(100dvh - 24px)!important;height:auto!important;min-height:0!important;margin:0!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;box-sizing:border-box!important;
  border-radius:18px!important;transform:none!important;background:#fff!important;
}
body>.modal-backdrop>.modal>.modal-head{position:relative!important;top:auto!important;flex:0 0 auto!important;min-width:0!important;box-sizing:border-box!important;}
body>.modal-backdrop>.modal>.modal-body{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;box-sizing:border-box!important;}
body>.modal-backdrop>.modal input,body>.modal-backdrop>.modal select,body>.modal-backdrop>.modal textarea,body>.modal-backdrop>.modal button{max-width:100%!important;box-sizing:border-box!important;}
body>.modal-backdrop>.modal .form-grid{min-width:0!important;}
@media(max-width:900px){
  body>.modal-backdrop{align-items:flex-end!important;padding:0!important;background:rgba(5,22,38,.54)!important;}
  body>.modal-backdrop>.modal{width:100%!important;max-width:none!important;max-height:calc(100dvh - 4px)!important;border-radius:18px 18px 0 0!important;}
  body>.modal-backdrop>.modal>.modal-head{padding:12px!important;}
  body>.modal-backdrop>.modal>.modal-body{padding:12px!important;}
  body>.modal-backdrop>.modal>.modal-body>.form-actions:last-child,body>.modal-backdrop>.modal>.modal-body>form>.form-actions:last-child{position:sticky!important;bottom:0!important;z-index:5!important;margin:12px -12px -12px!important;padding:12px 12px max(12px,env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #e5ebf1!important;box-shadow:0 -6px 16px rgba(11,49,93,.08)!important;}
  body.modal-open .app-shell>.mobile-nav{visibility:hidden!important;pointer-events:none!important;}
}
@media(max-width:430px){body>.modal-backdrop>.modal{max-height:calc(100dvh - 2px)!important;border-radius:16px 16px 0 0!important;}body>.modal-backdrop>.modal>.modal-head{padding:10px!important;}body>.modal-backdrop>.modal>.modal-body{padding:10px!important;}body>.modal-backdrop>.modal>.modal-body>.form-actions:last-child,body>.modal-backdrop>.modal>.modal-body>form>.form-actions:last-child{margin:10px -10px -10px!important;padding:10px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom))!important;}}