:root{--navy:#17354b;--navy-2:#214e65;--ink:#19374a;--muted:#728995;--line:rgba(255,255,255,.58);--bg:#dce9e8;--green:#2e8e7f;--mint:rgba(207,239,230,.74);--blue:#527f92;--amber:#c7924a;--shadow:0 20px 55px rgba(44,76,84,.11);--glass:rgba(247,252,251,.48);--glass-strong:rgba(255,255,255,.67)}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif}
.app-shell{min-height:100vh}
.sidebar{position:fixed;display:flex;flex-direction:column;z-index:30}
.brand,.auth-brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:0 10px}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;font:800 20px Manrope}
.brand strong,.auth-brand strong{display:block;font:800 17px Manrope;letter-spacing:.18em}.brand small,.auth-brand small{display:block;font-size:8px;letter-spacing:.38em;margin-top:2px}
.side-nav{display:flex;flex-direction:column}.nav-item{border:0;background:transparent;border-radius:13px;display:flex;align-items:center;gap:13px;font:500 14px inherit;text-align:left;cursor:pointer;transition:.2s}.nav-item span{font-size:18px;width:21px;text-align:center}.nav-item b{margin-left:auto;color:#fff;padding:2px 7px;border-radius:10px;font-size:10px}
.sidebar-card{margin-top:auto;padding:14px;border-radius:15px}.sidebar-card strong,.sidebar-card small{display:block;margin-left:18px}.sidebar-card strong{font-size:12px}.sidebar-card small{font-size:10px;margin-top:3px}.live-dot{width:8px;height:8px;background:#56d7a1;border-radius:50%;float:left;margin-top:4px;box-shadow:0 0 0 4px rgba(86,215,161,.12)}.back-link{text-decoration:none;font-size:11px;padding:18px 4px 0}
.main-content{min-height:100vh}.topbar{display:flex;align-items:center;position:sticky;top:18px;z-index:20}.station-picker{display:flex;align-items:center;gap:11px}.station-picker small,.user-chip small{font-size:9px;color:#71858f;letter-spacing:.08em;display:block}.station-picker strong{font-size:13px}.station-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:11px}.chevron{color:#71858f;margin-left:4px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.date-chip{border-radius:20px;padding:10px 14px;color:#526b76;font:500 12px inherit}.icon-btn,.signout-btn{width:40px;height:40px;border-radius:50%;position:relative;color:#526b76;cursor:pointer}.notification-dot{position:absolute;right:9px;top:8px;width:6px;height:6px;background:#d39447;border:2px solid #fff;border-radius:50%}.user-chip{border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;padding:0 4px;cursor:pointer}.user-chip strong{font-size:12px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font:700 11px Manrope}.menu-toggle{display:none}
.view{display:none;margin:auto}.view.active{display:block}.page-heading{display:flex;justify-content:space-between;align-items:flex-end}.page-heading.compact{align-items:center}.eyebrow{font-size:9px;letter-spacing:.17em;color:#718995;font-weight:700;margin:0 0 8px}.page-heading h1{font:700 28px Manrope;margin:0 0 6px}.page-heading h1 span{color:#56727d}.page-heading p:not(.eyebrow){color:var(--muted);margin:0;font-size:13px}
.primary-btn,.secondary-btn{border-radius:13px;padding:13px 18px;font:600 12px inherit;cursor:pointer}.alert-strip{border-radius:19px;padding:13px 18px;display:flex;align-items:center;gap:12px;margin-bottom:14px}.alert-icon{width:28px;height:28px;color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:800}.alert-strip div strong,.alert-strip div small{display:block}.alert-strip div strong{font-size:12px}.alert-strip div small{font-size:10px;color:#8c794e;margin-top:2px}.alert-strip button{margin-left:auto;background:none;border:0;color:#7f632f;font:600 11px inherit;cursor:pointer}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr)}.kpi-card{position:relative}.kpi-card.navy{color:#fff}.kpi-icon{width:31px;height:31px;display:grid;place-items:center;position:absolute;right:16px;top:16px}.kpi-card>span{font-size:9px;font-weight:700;letter-spacing:.12em;color:#71858f}.kpi-card.navy>span{color:#bfd0d5}.kpi-card>strong{display:block;font:700 24px Manrope;margin:16px 0 8px}.kpi-card>strong small{font-size:11px;color:#77909a}.kpi-card.navy>strong small{color:#bdd0d5}.kpi-card p{font-size:10px;color:#71858f;margin:0}.kpi-card p b{color:#4aab91}
.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr}.panel{padding:20px;min-height:250px}.sales-panel{grid-column:span 2}.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.panel h2{font:700 16px Manrope;margin:0}.legend,.updated{font-size:9px;color:#71858f}.legend span{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:6px}.updated{color:var(--green)}.chart-total{margin-top:18px;display:flex;align-items:center;gap:10px}.chart-total strong{font:700 21px Manrope}.chart-total span{color:var(--green);font-size:10px;border-radius:10px;padding:4px 7px}.chart{height:150px;margin-top:8px}.chart svg{width:100%;height:100%;overflow:visible}.chart text{font:9px "DM Sans";fill:#78909a}
.tank-list{display:flex;flex-direction:column;gap:20px;margin-top:25px}.tank-top{display:flex;justify-content:space-between;align-items:center;font-size:11px}.tank-top strong{font:600 12px Manrope}.tank-top span{color:#71858f}.tank-bar{height:7px;border-radius:9px;margin-top:8px;overflow:hidden}.tank-bar i{display:block;height:100%;border-radius:9px;background:var(--green)}.tank-row.warning .tank-bar i{background:var(--amber)}.tank-row.warning .tank-top strong{color:#a87535}
.payment-body{display:flex;align-items:center;justify-content:space-around;margin-top:24px}.donut{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--navy) 0 68%,rgba(255,255,255,.48) 68% 100%);position:relative;display:grid;place-items:center}.donut:after{content:"";position:absolute;inset:18px;border-radius:50%}.donut span{z-index:1;text-align:center}.donut strong,.donut small{display:block}.donut strong{font:700 19px Manrope}.donut small{font-size:9px;color:#71858f}.payment-legend>div{display:flex;gap:8px;margin:15px 0}.payment-legend i{width:8px;height:8px;border-radius:50%;margin-top:4px}.card-color{background:var(--navy)}.cash-color{background:rgba(255,255,255,.65)}.payment-legend span{font-size:10px;color:#71858f}.payment-legend small{display:block;color:var(--ink);font-weight:700;margin-top:3px}
.shifts-panel{grid-column:span 2}.text-btn{border:0;background:none;color:var(--navy);font:600 10px inherit;cursor:pointer}.shift-timeline{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px}.timeline-item{padding:0 18px;border-left:2px solid;position:relative}.timeline-item:before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:#b4c7ca;border:2px solid}.timeline-item.done:before{background:var(--green)}.timeline-item.current:before{background:var(--amber);box-shadow:0 0 0 4px rgba(246,233,207,.65)}.timeline-item small,.timeline-item strong,.timeline-item span{display:block}.timeline-item small{color:#71858f;font-size:9px}.timeline-item strong{font-size:12px;margin:7px 0}.timeline-item span{font-size:9px;color:#71858f}
.shift-form{display:flex;flex-direction:column;gap:12px}.form-section,.calculation-box,.notes-label{padding:22px}.form-section-title{display:flex;gap:12px;align-items:center;margin-bottom:20px}.form-section-title>span{width:32px;height:32px;display:grid;place-items:center;font:700 10px Manrope}.form-section-title h2{font:700 15px Manrope;margin:0}.form-section-title p{font-size:10px;color:#71858f;margin:3px 0 0}.form-grid{display:grid;gap:14px}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.four{grid-template-columns:repeat(4,1fr)}.form-grid.two{grid-template-columns:repeat(2,1fr)}label{font-size:10px;color:#5c747e;font-weight:600}input,select,textarea{width:100%;margin-top:7px;border-radius:13px;padding:12px;color:var(--ink);font:500 12px "DM Sans";outline:none}.calculation-box{display:grid;grid-template-columns:repeat(4,1fr);color:#fff}.calculation-box>div{padding:4px 18px;border-left:1px solid rgba(255,255,255,.12)}.calculation-box>div:first-child{border-left:0}.calculation-box span,.calculation-box strong{display:block}.calculation-box span{font-size:9px;color:#b9cbd0}.calculation-box strong{font:700 17px Manrope;margin-top:8px}.notes-label{display:block}.form-actions{display:flex;justify-content:flex-end;gap:10px}.validation-message{display:none;padding:12px 14px;border-radius:11px;background:rgba(255,230,230,.75);color:#a64a50;font-size:11px}.validation-message.show{display:block}
.filters{display:flex;gap:8px;margin-bottom:14px}.filter{border-radius:18px;padding:9px 14px;color:#5f7781;font:600 10px inherit;cursor:pointer}.filter.active{color:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:15px 18px;border-bottom:1px solid;font-size:11px}th{font-size:9px;letter-spacing:.08em;color:#71858f}td strong,td small{display:block}td small{color:#71858f;margin-top:3px}.status{display:inline-flex;padding:5px 9px;border-radius:9px;font-size:9px;font-weight:700}.status.submitted{color:#946b2d;background:rgba(255,237,205,.62)}.status.approved{color:#197858}.status.draft{color:#5f7480;background:rgba(230,237,237,.62)}.approve-btn{border:0;background:var(--navy);color:#fff;border-radius:14px;padding:8px 10px;font:600 9px inherit;cursor:pointer}
.empty-panel,.audit-list{padding:20px}.delivery-row,.audit-row{display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid rgba(255,255,255,.55)}.delivery-row:last-child,.audit-row:last-child{border-bottom:0}.row-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.delivery-row div:nth-child(2),.audit-row div:nth-child(2){flex:1}.delivery-row strong,.audit-row strong,.delivery-row small,.audit-row small{display:block}.delivery-row strong,.audit-row strong{font-size:11px}.delivery-row small,.audit-row small{font-size:9px;color:#71858f;margin-top:3px}.delivery-row>strong{font:700 13px Manrope}
.auth-screen{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.05fr .95fr}.auth-screen.hidden{display:none}.auth-visual{display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-visual:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-180px;bottom:-260px;box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 140px rgba(255,255,255,.02)}.auth-brand{color:#fff}.auth-brand small{color:#c7d8dc}.auth-copy{margin:auto 5vw;color:#fff;position:relative;z-index:1}.auth-copy p{color:#bed0d5;font-size:10px;letter-spacing:.22em}.auth-copy h1{font:700 clamp(38px,5vw,70px) Manrope;line-height:1.05;margin:18px 0}.auth-copy span{display:block;max-width:430px;color:#c3d2d5;font-size:14px;line-height:1.7}.auth-form{display:grid;place-items:center;padding:30px}.login-card{width:min(390px,100%)}.login-card h2{font:700 30px Manrope;margin:5px 0}.login-card>p:not(.eyebrow){color:#6e858f;font-size:13px}.google-btn{width:100%;margin-top:28px;border-radius:20px;padding:13px;color:#284654;font:600 12px inherit;cursor:pointer}.google-btn span{color:#4285f4;font-size:15px;margin-right:10px}.demo-separator{display:flex;align-items:center;gap:10px;margin:24px 0;color:#71858f;font-size:9px}.demo-separator:before,.demo-separator:after{content:"";height:1px;background:rgba(255,255,255,.7);flex:1}.demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.demo-actions button{border-radius:18px;padding:11px;color:var(--navy);font:600 10px inherit;cursor:pointer}.security-note{display:block;text-align:center;color:#71858f;font-size:9px;margin-top:28px}.toast{position:fixed;right:24px;bottom:24px;background:var(--navy);color:#fff;border-radius:20px;padding:13px 18px;font-size:11px;z-index:150;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.admin .manager-only{display:none!important}
body{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.9),transparent 31%),radial-gradient(circle at 88% 5%,rgba(130,179,194,.28),transparent 28%),linear-gradient(145deg,#d2e2e2 0%,#eef4f1 48%,#d5e5e7 100%);background-attachment:fixed;min-height:100vh}
.app-shell:before,.app-shell:after{content:"";position:fixed;pointer-events:none;border-radius:50%;filter:blur(2px);z-index:0}.app-shell:before{width:38vw;height:38vw;background:rgba(170,207,205,.28);left:23%;top:17%}.app-shell:after{width:30vw;height:30vw;background:rgba(255,255,255,.48);right:3%;bottom:-10%}
.sidebar{inset:18px auto 18px 18px;width:224px;border-radius:28px;padding:22px 16px;color:var(--ink);background:rgba(234,244,242,.46);border:1px solid rgba(255,255,255,.66);box-shadow:0 24px 60px rgba(42,75,83,.1),inset 0 1px 0 rgba(255,255,255,.65);backdrop-filter:blur(28px) saturate(125%);-webkit-backdrop-filter:blur(28px) saturate(125%)}
.brand{color:var(--ink)}.brand-mark{border-color:rgba(25,55,74,.25);background:rgba(255,255,255,.36);box-shadow:inset 0 1px rgba(255,255,255,.6)}.brand small{color:#6c8791}.side-nav{margin-top:45px;gap:5px}.nav-item{color:#68808b;padding:12px 13px;border:1px solid transparent}.nav-item:hover{color:var(--ink);background:rgba(255,255,255,.28)}.nav-item.active{color:var(--ink);background:rgba(255,255,255,.56);border-color:rgba(255,255,255,.75);box-shadow:0 10px 28px rgba(53,81,89,.07),inset 0 1px rgba(255,255,255,.78)}.nav-item b{background:var(--navy);box-shadow:0 4px 10px rgba(23,53,75,.18)}.sidebar-card{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.62)}.sidebar-card small,.back-link{color:#6e8791}.back-link:hover{color:var(--ink)}
.main-content{margin-left:250px;position:relative;z-index:1;padding:18px 20px 32px 0}.topbar{height:68px;margin:0;border-radius:22px;padding:0 24px;background:rgba(243,250,249,.43);border:1px solid rgba(255,255,255,.68);box-shadow:0 18px 45px rgba(53,82,90,.07),inset 0 1px rgba(255,255,255,.75);backdrop-filter:blur(24px) saturate(120%);-webkit-backdrop-filter:blur(24px) saturate(120%)}
.station-icon,.avatar{background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px rgba(255,255,255,.8)}.date-chip,.icon-btn,.signout-btn{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.68);box-shadow:inset 0 1px rgba(255,255,255,.72)}.view{padding:30px 18px 28px;max-width:1540px}.page-heading{margin-bottom:21px}.page-heading h1{font-weight:600;letter-spacing:-.025em}.primary-btn{border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:12px 19px;background:var(--navy);box-shadow:0 12px 30px rgba(23,53,75,.18)}.secondary-btn{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.42);backdrop-filter:blur(14px)}
.alert-strip{background:rgba(251,243,218,.44);border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.6);backdrop-filter:blur(18px)}.alert-icon{background:rgba(199,146,74,.75);box-shadow:inset 0 1px rgba(255,255,255,.38)}
.kpi-grid{gap:12px}.kpi-card,.panel,.form-section,.notes-label,.table-wrap,.empty-panel,.audit-list{background:var(--glass);border-color:rgba(255,255,255,.68);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.75);backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%)}.kpi-card{border-radius:23px;padding:19px;overflow:hidden}.kpi-card:after{content:"";position:absolute;width:100px;height:100px;right:-45px;bottom:-55px;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(1px)}.kpi-card.navy{background:rgba(28,68,87,.72);border-color:rgba(255,255,255,.32);box-shadow:0 22px 45px rgba(23,53,75,.17),inset 0 1px rgba(255,255,255,.24);backdrop-filter:blur(26px)}.kpi-card>strong{font-weight:600}.kpi-icon{background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.42);border-radius:50%}.kpi-icon.mint,.kpi-icon.blue,.kpi-icon.amber{background:rgba(255,255,255,.45);color:var(--navy)}
.dashboard-grid{gap:12px;margin-top:12px}.panel{border-radius:26px}.sales-panel{background:linear-gradient(145deg,rgba(249,253,251,.58),rgba(235,246,244,.34))}.tank-bar{background:rgba(255,255,255,.47);box-shadow:inset 0 1px 3px rgba(46,75,82,.08)}.donut:after{background:rgba(241,249,247,.8);box-shadow:inset 0 0 22px rgba(66,105,110,.06)}.chart-total span,.status.approved{background:rgba(207,239,230,.56)}.timeline-item{border-color:rgba(255,255,255,.7)}.timeline-item:before{border-color:rgba(249,253,252,.9)}
.form-section,.notes-label{border-radius:24px}.form-section-title>span{border-radius:50%;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.6)}input,select,textarea{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.72);box-shadow:inset 0 1px rgba(255,255,255,.72)}input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.58);border-color:rgba(91,132,145,.48)}.calculation-box{background:rgba(25,61,79,.76);border:1px solid rgba(255,255,255,.28);border-radius:24px;box-shadow:0 20px 45px rgba(23,53,75,.14),inset 0 1px rgba(255,255,255,.2);backdrop-filter:blur(24px)}.filter{background:rgba(255,255,255,.36);border-color:rgba(255,255,255,.65);backdrop-filter:blur(12px)}.filter.active{background:var(--navy)}th{background:rgba(255,255,255,.24)}th,td{border-color:rgba(255,255,255,.52)}.row-icon{background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.58);color:var(--navy)}
.auth-screen{background:radial-gradient(circle at 12% 20%,rgba(255,255,255,.85),transparent 30%),linear-gradient(140deg,#cbdedd,#edf4f1);gap:18px;padding:18px}.auth-visual,.auth-form{border:1px solid rgba(255,255,255,.64);box-shadow:var(--shadow);backdrop-filter:blur(26px)}.auth-visual{border-radius:30px;background:linear-gradient(145deg,rgba(33,75,94,.76),rgba(50,91,102,.52));padding:34px}.auth-form{border-radius:30px;background:rgba(255,255,255,.4)}.login-card{padding:30px;border-radius:26px;background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.58);box-shadow:inset 0 1px rgba(255,255,255,.65)}.google-btn{background:rgba(255,255,255,.54);border-color:rgba(255,255,255,.74)}.demo-actions button{background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6)}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.sales-panel,.shifts-panel{grid-column:span 2}.form-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){body{background:linear-gradient(160deg,#d7e5e4,#eef4f1)}.sidebar{inset:10px auto 10px 10px;width:230px;transform:translateX(-110%);transition:.25s}.sidebar.open{transform:none}.main-content{margin-left:0;padding:10px}.menu-toggle{display:block}.topbar{top:10px;border-radius:19px;padding:0 12px}.station-picker{margin-left:8px}.station-picker div,.date-chip,.user-chip span:not(.avatar){display:none}.top-actions{gap:6px}.view{padding:22px 6px}.page-heading{align-items:flex-start;gap:20px}.page-heading h1{font-size:23px}.kpi-grid,.dashboard-grid{grid-template-columns:1fr}.sales-panel,.shifts-panel{grid-column:auto}.kpi-card,.panel,.form-section,.notes-label{background:rgba(250,253,252,.58)}.form-grid.three,.form-grid.four,.form-grid.two,.calculation-box{grid-template-columns:1fr}.calculation-box>div{border-left:0;border-bottom:1px solid rgba(255,255,255,.1);padding:10px}.payment-panel{min-height:auto}.shift-timeline{grid-template-columns:1fr;gap:20px}.auth-screen{grid-template-columns:1fr;padding:10px}.auth-visual{display:none}.auth-form{border-radius:24px;background:rgba(255,255,255,.42)}.form-actions{position:static}}