/* ==========================================================
   MafutaOne - interface styles
   Built for cheap Android phones on the forecourt and a
   desktop browser in the office. Big targets, high contrast.
   ========================================================== */

:root{
  --ink:#10201a;
  --ink-2:#4a5c55;
  --muted:#7a8a84;
  --line:#dde5e1;
  --bg:#f4f7f5;
  --card:#ffffff;
  --brand:#0f7a52;
  --brand-dark:#0a5c3d;
  --brand-soft:#e6f4ee;
  --amber:#b45309;
  --amber-soft:#fef3c7;
  --red:#b91c1c;
  --red-soft:#fee2e2;
  --blue:#1d4ed8;
  --blue-soft:#dbeafe;
  --green:#15803d;
  --green-soft:#dcfce7;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,32,26,.06), 0 2px 8px rgba(16,32,26,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand-dark); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25}
h1{font-size:20px;margin:0}
h2{font-size:17px}
h3{font-size:15px}
.muted{color:var(--muted)}
.small{font-size:13px}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt16{margin-top:16px}.mb16{margin-bottom:16px}
.hide{display:none}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:220px;flex:0 0 220px;background:#0c1a15;color:#cfe0d8;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh
}
.brand{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{
  width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:.5px
}
.brand-text{font-weight:600;font-size:15px;color:#fff;display:flex;flex-direction:column;line-height:1.2}
.brand-text small{font-weight:400;font-size:11px;color:#8fae9f}
.side nav{padding:10px 8px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:#b9cec4;font-size:14px;margin-bottom:2px
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-item.active{background:var(--brand);color:#fff;font-weight:500}
.ico{width:16px;height:16px;flex:0 0 16px;opacity:.9;background:currentColor;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ico-grid{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/></svg>")}
.ico-clock{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/></svg>")}
.ico-bank{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 8v2h20V8zM4 12v6H2v2h20v-2h-2v-6h-2v6h-3v-6h-2v6H8v-6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L2 8v2h20V8zM4 12v6H2v2h20v-2h-2v-6h-2v6h-3v-6h-2v6H8v-6z'/></svg>")}
.ico-truck{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h11v10H3zM15 8h3l3 3v4h-6zM6 17a2 2 0 104 0 2 2 0 00-4 0zM15 17a2 2 0 104 0 2 2 0 00-4 0z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h11v10H3zM15 8h3l3 3v4h-6zM6 17a2 2 0 104 0 2 2 0 00-4 0zM15 17a2 2 0 104 0 2 2 0 00-4 0z'/></svg>")}
.ico-tank{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h14v18H5zm2 9h10v7H7z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h14v18H5zm2 9h10v7H7z'/></svg>")}
.ico-box{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l9 4v12l-9 4-9-4V6zm0 2.2L5.5 7 12 9.8 18.5 7z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l9 4v12l-9 4-9-4V6zm0 2.2L5.5 7 12 9.8 18.5 7z'/></svg>")}
.ico-users{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 11a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 4v3h16v-3c0-2-4-4-8-4zm8-2a3 3 0 100-6 3 3 0 000 6zm1 2c2.8 0 5 1.6 5 3.5V20h-4v-3c0-1.5-.8-2.8-2-3.7z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 11a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 4v3h16v-3c0-2-4-4-8-4zm8-2a3 3 0 100-6 3 3 0 000 6zm1 2c2.8 0 5 1.6 5 3.5V20h-4v-3c0-1.5-.8-2.8-2-3.7z'/></svg>")}
.ico-chart{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h16v2H2V2h2zM7 17V9h3v8zm5 0V4h3v13zm5 0v-6h3v6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 20h16v2H2V2h2zM7 17V9h3v8zm5 0V4h3v13zm5 0v-6h3v6z'/></svg>")}
.ico-tag{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2H2v10l10 10 10-10zM6.5 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2H2v10l10 10 10-10zM6.5 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z'/></svg>")}
.ico-cog{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 2-2 3-2.5-.7a7 7 0 01-1.8 1l-.5 2.6h-3.4l-.5-2.6a7 7 0 01-1.8-1L8 17l-2-3 2-2-2-2 2-3 2.5.7a7 7 0 011.8-1l.5-2.6h3.4l.5 2.6c.6.3 1.2.6 1.8 1L21 7l2 3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 2-2 3-2.5-.7a7 7 0 01-1.8 1l-.5 2.6h-3.4l-.5-2.6a7 7 0 01-1.8-1L8 17l-2-3 2-2-2-2 2-3 2.5.7a7 7 0 011.8-1l.5-2.6h3.4l.5 2.6c.6.3 1.2.6 1.8 1L21 7l2 3z'/></svg>")}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:8px}
.who{display:flex;flex-direction:column;font-size:12px;line-height:1.3;min-width:0}
.who strong{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{color:#8fae9f}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.today{font-size:13px;color:var(--muted)}
.bell{position:relative;font-size:18px;color:var(--ink-2);text-decoration:none}
.bell .dot{
  position:absolute;top:-4px;right:-8px;background:var(--red);color:#fff;
  font-size:10px;padding:1px 5px;border-radius:9px;font-weight:600
}
.hamburger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}
.content{padding:20px;flex:1;max-width:1400px;width:100%}
.foot{padding:14px 20px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.card h2{margin:0 0 12px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{margin:0}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Stat tiles ---------- */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.tile .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.tile .value{font-size:24px;font-weight:650;margin-top:4px;letter-spacing:-.3px}
.tile .sub{font-size:12px;color:var(--muted);margin-top:2px}
.tile.tile-warn{border-left:3px solid var(--amber)}
.tile.tile-bad{border-left:3px solid var(--red)}
.tile.tile-good{border-left:3px solid var(--green)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.tbl th{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:650;background:#fafcfb;white-space:nowrap
}
table.tbl tbody tr:hover{background:#fafcfb}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl tfoot td{font-weight:650;border-top:2px solid var(--line);background:#fafcfb}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-grey{background:#eef2f0;color:#4a5c55}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-blue{background:var(--blue-soft);color:var(--blue)}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-red{background:var(--red-soft);color:var(--red)}

.var-ok{color:var(--green);font-weight:600}
.var-small{color:var(--amber);font-weight:600}
.var-big{color:var(--red);font-weight:700}

/* ---------- Forms ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--ink-2)}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=datetime-local],input[type=time],input[type=tel],input[type=email],
select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
input[readonly],input:disabled,select:disabled{background:#f3f6f4;color:var(--ink-2)}
.field{margin-bottom:14px}
.form-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.num-input{text-align:right;font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:8px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;text-decoration:none
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none;color:#fff}
.btn-sm{padding:6px 11px;font-size:13px}
.btn-lg{padding:14px 22px;font-size:16px;width:100%}
.btn-ghost{background:transparent;color:var(--brand-dark);border-color:var(--line)}
.btn-ghost:hover{background:var(--brand-soft);color:var(--brand-dark)}
.btn-danger{background:var(--red);border-color:var(--red)}
.btn-danger:hover{background:#991b1b;border-color:#991b1b}
.btn-amber{background:var(--amber);border-color:var(--amber)}
.btn-amber:hover{background:#92400e;border-color:#92400e}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Flash ---------- */
.flash{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash-success{background:var(--green-soft);border-color:#a7f3c4;color:#14532d}
.flash-error{background:var(--red-soft);border-color:#fecaca;color:#7f1d1d}
.flash-warning{background:var(--amber-soft);border-color:#fde68a;color:#78350f}
.flash-info{background:var(--blue-soft);border-color:#bfdbfe;color:#1e3a8a}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{
  padding:9px 14px;font-size:14px;color:var(--ink-2);border-bottom:2px solid transparent;
  white-space:nowrap;font-weight:500
}
.tabs a.active{color:var(--brand-dark);border-bottom-color:var(--brand);font-weight:650}
.tabs a:hover{text-decoration:none;color:var(--brand-dark)}

/* ---------- Login ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,#0c1a15,#12362a)}
.auth-card{background:#fff;border-radius:14px;padding:30px;width:100%;max-width:380px;
  box-shadow:0 10px 40px rgba(0,0,0,.3)}
.auth-card .brand-mark{width:46px;height:46px;font-size:17px;margin:0 auto 12px}
.auth-card h1{text-align:center;font-size:21px;margin:0 0 4px}
.auth-card .tag{text-align:center;color:var(--muted);font-size:13px;margin:0 0 22px}

/* ---------- Reconciliation panel ---------- */
.recon{background:#0c1a15;color:#e6f4ee;border-radius:var(--radius);padding:16px 18px}
.recon .line{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.recon .line:last-child{border-bottom:0}
.recon .line span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.recon .total{font-size:17px;font-weight:700;padding-top:10px}
.recon .vpos{color:#6ee7a8}
.recon .vneg{color:#fca5a5}

/* ---------- Progress bars (tank levels) ---------- */
.meter{height:8px;background:#e8eeeb;border-radius:20px;overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--brand);border-radius:20px}
.meter i.warn{background:var(--amber)}
.meter i.bad{background:var(--red)}

/* ---------- Print ---------- */
@media print{
  .side,.topbar,.foot,.btn,.tabs,.no-print{display:none !important}
  .content{padding:0}
  .card{border:0;box-shadow:none;padding:0}
  body{background:#fff}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .side{position:fixed;left:-240px;z-index:60;transition:left .2s ease}
  .side.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .hamburger{display:block}
  .content{padding:14px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  h1{font-size:17px}
  table.tbl{font-size:13px}
  table.tbl th,table.tbl td{padding:8px 7px}
  .today{display:none}
}