@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--green:#003f34;--green2:#08715a;--gold:#e5a900;--gold2:#ffc31a;--bg:#f7f8f7;--card:#fff;--text:#15221e;--muted:#707975;--line:#e9eeeb;--danger:#ef3333;--shadow:0 8px 28px rgba(8,55,45,.08)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--text);padding-bottom:82px}a{text-decoration:none;color:inherit}img{max-width:100%}.app-shell{min-height:100vh}.desktop-side{display:none}.container{max-width:1500px;margin:auto;padding:16px}.mobile-head{height:82px;background:linear-gradient(110deg,#003f34,#005d4d);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;position:sticky;top:0;z-index:30;box-shadow:0 5px 20px rgba(0,50,40,.15)}.menu-button{background:none;border:0;color:#fff;font-size:31px}.brand-lockup{display:flex;align-items:center;gap:14px}.brand-mark{width:57px;height:57px;object-fit:cover;border-radius:10px}.brand-title{font-family:Georgia,serif;font-size:24px;letter-spacing:2px}.brand-title span{color:#f8bc27}.bell{position:relative;font-size:30px}.bell b{position:absolute;right:-9px;top:-8px;background:#ff2d2d;border-radius:20px;font:700 12px Arial;padding:4px 6px}.welcome-card,.card,.panel,.metric-card,.low-alert{background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:20px;box-shadow:var(--shadow)}.welcome-card{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:16px}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#05664f,#003f34);color:white;font-size:27px}.welcome-card strong{display:block;font-size:17px}.welcome-card span{display:block;font-size:12px;color:var(--muted)}.date-box{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center;font-size:14px}.date-box span{grid-column:2}.tank-grid{display:grid;grid-template-columns:1fr;gap:16px}.tank-card{padding:0 14px 14px;overflow:hidden;position:relative}.tank-ribbon{display:inline-block;margin:14px 0 3px;padding:7px 16px;border-radius:8px;color:#fff;font-weight:800;font-size:20px}.green .tank-ribbon{background:linear-gradient(135deg,#00775a,#00513f)}.yellow .tank-ribbon{background:linear-gradient(135deg,#f8bd00,#e7a400)}.pump-layout{display:grid;grid-template-columns:42% 58%;align-items:center;min-height:225px}.pump-img{height:190px;margin:auto;display:block}.fuel-level{position:relative;padding-right:12px}.fuel-level>span{display:block;font-weight:600;font-size:16px}.fuel-level strong{font-size:62px;line-height:1;color:#003f34}.fuel-level small{font-size:17px;margin-left:5px}.progress{height:17px;border-radius:999px;background:#e7e9e8;margin-top:14px;overflow:hidden;width:75%;display:inline-block}.progress i{display:block;height:100%;border-radius:inherit}.green .progress i{background:linear-gradient(90deg,#05805f,#00684f)}.yellow .progress i{background:linear-gradient(90deg,#f2b400,#ffc21c)}.fuel-level em{font-style:normal;font-size:14px;margin-left:5px}.inventory-strip{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:14px}.green .inventory-strip{background:linear-gradient(100deg,#edf8f4,#f8fcfa)}.yellow .inventory-strip{background:linear-gradient(100deg,#fff7df,#fffaf0)}.drop{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff}.green .drop{background:#08715a}.yellow .drop{background:#f1ae00}.inventory-strip span{display:block;font-size:13px}.inventory-strip strong{font-size:24px}.inventory-strip strong small{font-size:13px;font-weight:500}.inventory-strip>b{font-size:34px;color:#52605b}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}.metric-card{text-align:center;padding:14px 8px;min-height:150px}.metric-card i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:auto auto 8px;background:#07664f;color:#fff;font-style:normal;font-size:23px}.metric-card.gold i{background:#d89e00}.metric-card span{display:block;font-size:14px}.metric-card>small{display:block;color:var(--muted);font-size:10px}.metric-card strong{display:block;font-size:25px;color:#00513f;margin-top:5px}.metric-card.gold strong{color:#b68100}.dashboard-columns{display:grid;grid-template-columns:1fr;gap:16px}.panel{overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:17px}.panel-head a{font-size:12px;color:var(--muted)}.activity{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.activity:last-child{border-bottom:0}.activity-icon{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#08715a;color:#fff}.activity-icon.expense,.activity-icon.cash{background:#dca100}.activity time{font-size:12px;min-width:54px}.activity-main{flex:1;min-width:0}.activity-title{font-weight:700;font-size:13px}.activity-sub{font-size:11px;color:var(--muted)}.activity-amount{font-weight:700;color:#056149;font-size:13px}.activity-amount small{font-weight:400}.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px}.mini-stats>div{text-align:center;border:1px solid var(--line);border-radius:12px;padding:8px}.mini-stats span,.mini-stats small{display:block;font-size:10px}.mini-stats b{display:block;font-size:17px;color:#075b47}.sales-chart{width:100%;height:auto;padding:8px 16px}.low-alert{margin-top:16px;border-color:#ffd0d0;background:#fffafa;padding:10px}.alert-head{display:flex;justify-content:space-between;color:#ef3333;font-size:15px;padding:3px 6px 10px}.alert-head a{border:1px solid #ff5050;border-radius:8px;padding:4px 12px;font-size:11px}.low-grid{display:grid;grid-template-columns:1fr;gap:10px}.low-card{background:#fff;border:1px solid #ffd4d4;border-radius:14px;display:grid;grid-template-columns:68px 1fr auto;align-items:center;padding:8px}.low-card img{height:72px}.low-card span,.low-card small{display:block}.low-card span b{color:red;font-size:20px}.low-card small{color:red;font-size:10px}.low-card>b{font-size:30px}.flash{margin:12px 0;padding:12px;border-radius:12px;background:#dff7ed;color:#075f48}.flash.error{background:#ffe8e5;color:#a12a22}.grid{display:grid;grid-template-columns:1fr;gap:12px}.card{padding:16px}.card h1,.form-card h1{font-size:22px;margin-top:0}.stat-label{font-size:12px;color:var(--muted)}.stat-value{font-size:28px;font-weight:800}.row{display:grid;grid-template-columns:1fr;gap:11px}.field{margin:0}label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid #dce4e0;background:#fff;border-radius:13px;padding:12px 13px;font-family:inherit;font-size:15px;color:var(--text)}textarea{min-height:90px}.btn{border:0;border-radius:13px;padding:12px 16px;font-family:inherit;font-weight:800;background:var(--green2);color:#fff;cursor:pointer}.btn.gold{background:linear-gradient(135deg,#d89e00,#f1bd25);color:#2b2304}.tank-select{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tank-option input{display:none}.tank-option span{display:block;border:2px solid var(--line);border-radius:16px;padding:15px;text-align:center;font-weight:800}.tank-option input:checked+span{border-color:var(--green2);background:#eef8f5}.tank-option.yellow input:checked+span{border-color:var(--gold);background:#fff8df}.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 9px}.section-title h2{font-size:18px;margin:0}.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;min-width:680px;background:#fff}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}th{background:#f6f8f7}.muted{color:var(--muted)}.bottom-nav{position:fixed;left:8px;right:8px;bottom:8px;height:68px;border-radius:18px;background:linear-gradient(100deg,#003f34,#005747);color:#fff;display:grid;grid-template-columns:repeat(5,1fr);z-index:40;box-shadow:0 -5px 25px rgba(0,45,37,.18)}.bottom-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:10px;gap:3px}.bottom-nav a.active{color:#ffc31a;background:rgba(255,255,255,.08);border-radius:16px}.nav-ico{font-size:23px}.login-page{min-height:100vh;background:linear-gradient(155deg,#003f34,#08715a);display:grid;place-items:center;padding:20px}.login-card{width:min(100%,420px);background:#fff;border-radius:26px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.login-logo{text-align:center}.login-logo img{height:120px;border-radius:20px}.login-logo h1{font-family:Georgia,serif;color:#003f34;letter-spacing:2px}.login-logo h1 span{color:#dca100}.qr-pool{background:#fff9e8}.empty{padding:30px;text-align:center;color:var(--muted)}
@media(min-width:760px){body{padding-bottom:0}.mobile-head,.bottom-nav{display:none}.app-shell{display:grid;grid-template-columns:220px 1fr}.desktop-side{display:flex;position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#003f34,#005747);color:#fff;flex-direction:column;padding:18px 12px}.side-logo{text-align:center;margin-bottom:20px}.side-logo img{height:90px;border-radius:16px}.side-logo strong{display:block;font-family:Georgia,serif;letter-spacing:1px}.side-logo span{color:#ffc31a}.side-nav{display:grid;gap:6px}.side-nav a{padding:11px 13px;border-radius:10px;font-size:14px}.side-nav a.active,.side-nav a:hover{background:linear-gradient(135deg,#d89e00,#f1bd25);color:#2b2304}.side-foot{margin-top:auto;text-align:center;font-size:11px;opacity:.75}.container{padding:22px}.tank-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:repeat(4,1fr)}.dashboard-columns{grid-template-columns:1fr 1fr}.low-grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:repeat(2,1fr)}.mini-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.brand-title{font-size:18px}.brand-mark{width:46px;height:46px}.mobile-head{height:70px}.pump-layout{min-height:190px}.pump-img{height:160px}.fuel-level strong{font-size:52px}.inventory-strip strong{font-size:20px}.metric-card strong{font-size:21px}.welcome-card{padding:11px}.date-box{font-size:11px}.tank-ribbon{font-size:18px}}
/* v3.1 interaction and mobile fixes */
.drawer-overlay,.drawer-close{display:none}.bell{color:#fff}.bell b:empty{display:none}.clickable{cursor:pointer;transition:transform .18s,box-shadow .18s}.clickable:active{transform:scale(.99)}.form-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.form-summary>div{background:#f6f9f8;border:1px solid var(--line);border-radius:14px;padding:11px}.form-summary span,.form-summary small{display:block;color:var(--muted);font-size:11px}.form-summary strong{display:block;color:var(--green2);font-size:20px}.form-summary .negative{color:#d92e2e}.action-cell{display:flex;gap:6px}.btn.small{padding:7px 10px;border-radius:9px;font-size:12px}.btn.danger{background:#fff0f0;color:#bf2424;border:1px solid #ffc5c5}.page-title{margin:4px 0 0;font-size:24px}.page-sub{margin:4px 0 16px;color:var(--muted)}.help-text{font-size:11px;color:var(--muted);margin-top:5px}.field-error{color:#c62828;font-size:12px;margin-top:5px}.low-alert{scroll-margin-top:90px}.inventory-strip{cursor:pointer}.tank-card{cursor:pointer}.table-actions{min-width:120px}.flash{position:relative}.flash:after{content:'×';position:absolute;right:12px;top:7px;font-size:20px;cursor:pointer}
@media(max-width:759px){.desktop-side{display:flex;position:fixed;left:-280px;top:0;bottom:0;width:260px;height:100vh;z-index:100;transition:left .22s ease}.drawer-open .desktop-side{left:0}.drawer-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;z-index:90;transition:opacity .22s}.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}.drawer-close{display:block;position:absolute;right:10px;top:5px;border:0;background:none;color:#fff;font-size:34px}.side-logo{margin-top:20px}.tank-card{padding-left:12px;padding-right:12px}.pump-layout{grid-template-columns:43% 57%}.form-summary{grid-template-columns:1fr 1fr}.table-wrap{margin-left:-2px;margin-right:-2px}.brand-title{white-space:nowrap}.container{padding-bottom:95px}}
@media(max-width:370px){.brand-title{font-size:16px;letter-spacing:1px}.brand-mark{width:42px;height:42px}.mobile-head{padding-left:12px;padding-right:12px}.menu-button{font-size:27px}.bell{font-size:25px}.fuel-level strong{font-size:46px}.pump-img{height:145px}.tank-ribbon{font-size:17px}.metric-grid{gap:8px}.metric-card{min-height:138px}.metric-card strong{font-size:19px}}