/* =============================================
   ShukraPump – Clean Stylesheet
   ============================================= */
:root {
  --primary: #e65c00;
  --dark:    #1a2a3a;
  --light:   #f4f6f8;
  --border:  #dee2e6;
  --green:   #198754;
  --red:     #dc3545;
  --radius:  8px;
  --shadow:  0 2px 12px rgba(0,0,0,.10);
}

*,*::before,*::after { box-sizing:border-box; }
body { font-family:'Segoe UI',sans-serif; background:var(--light); margin:0; }

/* ── Login ───────────────────────────────── */
.login-wrap {
  min-height:100vh;
  background:linear-gradient(135deg,#1a2a3a,#2d5986 60%,#e65c00);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.login-box {
  background:#fff; border-radius:12px; padding:36px 28px;
  width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.login-icon {
  width:64px; height:64px; background:var(--primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.login-icon i { font-size:28px; color:#fff; }
.login-box h2 { text-align:center; color:var(--dark); font-size:1.4rem; margin:0 0 4px; }
.login-box p  { text-align:center; color:#888; font-size:.83rem; margin:0 0 22px; }

.role-row { display:flex; gap:10px; margin-bottom:20px; }
.role-btn {
  flex:1; padding:10px 6px; border:2px solid var(--border); border-radius:var(--radius);
  background:#fafafa; cursor:pointer; text-align:center; font-weight:600;
  font-size:.85rem; color:#666; transition:.2s;
}
.role-btn i { display:block; font-size:1.3rem; margin-bottom:4px; }
.role-btn:hover { border-color:var(--primary); color:var(--primary); }
.role-btn.on  { background:var(--primary); border-color:var(--primary); color:#fff; }

.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(230,92,0,.15); }
.btn-login {
  width:100%; padding:11px; background:var(--primary); color:#fff; border:none;
  border-radius:var(--radius); font-weight:700; font-size:1rem; cursor:pointer; transition:.2s;
}
.btn-login:hover { background:#c44f00; }

/* ── Navbar ──────────────────────────────── */
.navbar {
  background:var(--dark); padding:11px 18px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.navbar .brand { color:#fff; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:8px; text-decoration:none; }
.brand .dot { width:8px; height:8px; background:var(--primary); border-radius:50%; }
.btn-out {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:5px 12px; border-radius:6px; font-size:.82rem; cursor:pointer; transition:.2s;
}
.btn-out:hover { background:rgba(255,255,255,.2); }

/* ── Tab bar ─────────────────────────────── */
.tabbar {
  background:#fff; border-bottom:2px solid var(--border);
  display:flex; overflow-x:auto; scrollbar-width:none;
  position:sticky; top:50px; z-index:90;
}
.tabbar::-webkit-scrollbar { display:none; }
.tab {
  padding:12px 18px; cursor:pointer; white-space:nowrap; font-size:.85rem;
  font-weight:600; color:#666; border-bottom:3px solid transparent;
  display:flex; align-items:center; gap:5px; text-decoration:none; transition:.2s;
}
.tab:hover { color:var(--primary); }
.tab.on   { color:var(--primary); border-bottom-color:var(--primary); }

/* ── Page / Section ──────────────────────── */
.page { padding:16px; max-width:960px; margin:0 auto; padding-bottom:70px; }
.section { display:none; }
.section.on { display:block; }

/* ── Cards ───────────────────────────────── */
.card {
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  margin-bottom:16px; overflow:hidden;
}
.card-head {
  background:var(--dark); color:#fff; padding:11px 16px;
  font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:8px;
}
.card-head.green  { background:var(--green); }
.card-head.orange { background:var(--primary); }
.card-body { padding:16px; }

/* ── Stat strip ──────────────────────────── */
.stat-strip { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat-box {
  flex:1; min-width:130px; background:#fff; border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); border-left:4px solid var(--primary);
}
.stat-box.b { border-left-color:#3b82f6; }
.stat-box.g { border-left-color:var(--green); }
.stat-val { font-size:1.4rem; font-weight:700; color:var(--dark); }
.stat-lbl { font-size:.75rem; color:#888; margin-top:2px; }

/* ── Table ───────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.84rem; }
table.tbl th { background:var(--dark); color:#fff; padding:9px 12px; text-align:left; white-space:nowrap; }
table.tbl td { padding:9px 12px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tr:hover td { background:#fef9f7; }

/* ── Grid helpers ────────────────────────── */
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.row4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mb12 { margin-bottom:12px; }

/* ── Form ────────────────────────────────── */
.lbl  { font-size:.8rem; font-weight:600; color:var(--dark); margin-bottom:3px; display:block; }
.inp  { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:.88rem; }
.inp:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(230,92,0,.12); }
.inp[readonly] { background:#f8f9fa; color:#555; }
select.inp { cursor:pointer; }

/* ── Nozzle block ────────────────────────── */
.nozzle-block { border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:10px; }
.nozzle-title { font-weight:700; font-size:.82rem; color:var(--dark); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.nozzle-row   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }

/* ── Payment grid ────────────────────────── */
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── Summary table ───────────────────────── */
.sum-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.sum-table td { padding:5px 8px; }
.sum-table .sum-label  { color:#555; }
.sum-table .sum-value  { font-weight:600; text-align:right; }
.sum-table .sum-total  { font-weight:700; font-size:.95rem; color:var(--dark); border-top:2px solid var(--border); }
.sum-table .sum-diff-ok  { color:var(--green); font-weight:700; }
.sum-table .sum-diff-bad { color:var(--red);   font-weight:700; }

/* ── Buttons ─────────────────────────────── */
.btn-primary { background:var(--primary); color:#fff; border:none; border-radius:var(--radius); padding:9px 18px; font-weight:600; cursor:pointer; font-size:.88rem; transition:.2s; }
.btn-primary:hover { background:#c44f00; }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); border-radius:var(--radius); padding:7px 16px; font-weight:600; cursor:pointer; font-size:.85rem; transition:.2s; }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:4px 10px; border-radius:5px; border:none; cursor:pointer; font-size:.78rem; font-weight:600; }
.btn-edit { background:#3b82f6; color:#fff; }
.btn-del  { background:var(--red); color:#fff; }
.btn-view { background:#6366f1; color:#fff; }

/* ── Badge ───────────────────────────────── */
.badge { padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-p  { background:#fff3e0; color:#e65c00; }
.badge-d  { background:#e8f5e9; color:#1b5e20; }
.badge-ok { background:#dcfce7; color:#16a34a; }
.badge-no { background:#fee2e2; color:#dc2626; }

/* ── Toast ───────────────────────────────── */
.toast {
  position:fixed; top:62px; right:14px; background:#1e293b; color:#fff;
  padding:12px 18px; border-radius:8px; font-size:.85rem; z-index:9999;
  display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  transform:translateX(130%); transition:transform .3s ease;
}
.toast.show { transform:translateX(0); }
.toast.ok  i { color:#4ade80; }
.toast.err i { color:#f87171; }

/* ── Modal ───────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200;
  align-items:center; justify-content:center; padding:16px; overflow-y:auto;
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:#fff; border-radius:10px; width:100%; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; margin:auto;
}
.modal-head {
  background:var(--dark); color:#fff; padding:13px 16px;
  font-weight:600; font-size:.92rem; display:flex; justify-content:space-between; align-items:center;
}
.modal-body { padding:20px; max-height:80vh; overflow-y:auto; }
.modal-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; background:#fafafa; }
.btn-x { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; opacity:.8; line-height:1; }
.btn-x:hover { opacity:1; }

/* ── Report detail ───────────────────────── */
.rd-head { font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:#888; margin:12px 0 6px; }
.rd-row  { display:flex; justify-content:space-between; padding:4px 0; font-size:.84rem; border-bottom:1px solid #f5f5f5; }
.rd-row:last-child { border:none; }
.rd-row .k { color:#555; }
.rd-row .v { font-weight:600; }

/* ── Mobile bottom nav ───────────────────── */
.mob-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; background:#fff;
  border-top:1px solid var(--border); z-index:150;
}
.mob-nav-inner { display:flex; }
.mob-tab { flex:1; padding:9px 4px 7px; text-align:center; cursor:pointer; color:#888; font-size:.68rem; font-weight:600; border:none; background:none; transition:.2s; }
.mob-tab i  { display:block; font-size:1.1rem; margin-bottom:2px; }
.mob-tab.on { color:var(--primary); }

@media(max-width:768px) {
  .mob-nav { display:block; }
  .page    { padding:12px; padding-bottom:68px; }
  .row3,.row4 { grid-template-columns:1fr 1fr; }
  .pay-grid   { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {
  .row2 { grid-template-columns:1fr; }
  .nozzle-row { grid-template-columns:1fr 1fr; }
}