/* ═══════════════════════════════════════════════
   STYLE.CSS — Sri Lakshmi Bharatgas Agency App
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --flame:   #e85d04;  --flame-d: #c44d00;  --flame-l: #ff7b26;
  --gold:    #f9c74f;  --deep:    #111318;  --panel:   #1c1f27;
  --card:    #222630;  --card-h:  #2a2f3c;  --text:    #eef0f5;
  --muted:   #8892a4;  --green:   #3ec98a;  --red:     #e05252;
  --blue:    #4a8fe8;  --purple:  #9b72e8;
  --border:  rgba(255,255,255,0.07);  --bg2: #1e293b;
  --sh:      0 8px 32px rgba(0,0,0,0.45);
}

/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--deep); color:var(--text); min-height:100vh; overflow-x:hidden; }

/* ── Login ────────────────────────────────────── */
#login-screen {
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background: radial-gradient(ellipse at 30% 50%, rgba(232,93,4,.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(249,199,79,.07) 0%, transparent 50%), var(--deep);
}
.login-box { background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:40px 44px; width:420px; box-shadow:0 24px 80px rgba(0,0,0,.6); }
.login-logo { text-align:center; margin-bottom:28px; }
.login-flame { font-size:52px; filter:drop-shadow(0 0 20px rgba(232,93,4,.6)); }
.login-brand { font-family:'Baloo 2',cursive; font-size:20px; font-weight:800; color:var(--flame-l); margin-top:8px; line-height:1.25; }
.login-sub   { font-size:11px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }
.login-box h2 { font-family:'Baloo 2',cursive; font-size:22px; font-weight:700; margin-bottom:20px; text-align:center; }
.login-err { color:var(--red); font-size:13px; margin-bottom:10px; text-align:center; min-height:18px; }
.fg { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.fg label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }
.fg input { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color .2s; }
.fg input:focus { outline:none; border-color:var(--flame); background:rgba(232,93,4,.06); }

/* ── Onboarding ───────────────────────────────── */
.onboarding { position:fixed; inset:0; background:var(--deep); z-index:300; display:flex; align-items:center; justify-content:center; overflow-y:auto; padding:20px; }
.onb-box { background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:32px; max-width:760px; width:100%; }
.onb-step { display:none; } .onb-step.active { display:block; }
.onb-title { font-family:'Baloo 2',cursive; font-size:22px; font-weight:800; color:var(--flame-l); margin-bottom:4px; }
.onb-sub   { color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.progress-bar  { height:4px; background:rgba(255,255,255,.08); border-radius:4px; margin-bottom:22px; }
.progress-fill { height:100%; background:var(--flame); border-radius:4px; transition:width .4s; }
.inv-entry-card  { background:rgba(255,255,255,.04); border-radius:12px; padding:12px; margin-bottom:10px; }
.inv-entry-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.inv-entry-label { font-size:11px; color:var(--muted); margin-bottom:5px; }
.inv-entry-row   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }

/* ── Buttons ──────────────────────────────────── */
.btn { padding:9px 18px; border-radius:10px; border:none; cursor:pointer; font-size:13px; font-weight:600; font-family:inherit; transition:all .2s; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.btn-primary { background:var(--flame); color:#fff; } .btn-primary:hover { background:var(--flame-d); transform:translateY(-1px); }
.btn-success { background:var(--green); color:#fff; } .btn-success:hover { filter:brightness(1.1); }
.btn-danger  { background:var(--red);   color:#fff; } .btn-danger:hover  { filter:brightness(1.1); }
.btn-blue    { background:var(--blue);  color:#fff; }
.btn-wa      { background:#25D366;      color:#fff; }
.btn-ghost   { background:rgba(255,255,255,.07); color:var(--text); } .btn-ghost:hover { background:rgba(255,255,255,.13); }
.btn-sm      { padding:6px 13px; font-size:12px; }
.btn-xs      { padding:4px 9px;  font-size:11px; }
.btn-full    { width:100%; justify-content:center; }

/* ── App Layout ──────────────────────────────── */
#app-screen { display:none; }
.sidebar { position:fixed; left:0; top:0; bottom:0; width:232px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; overflow-y:auto; }
.logo { padding:16px; border-bottom:1px solid var(--border); text-align:center; }
.logo-flame { font-size:28px; filter:drop-shadow(0 0 12px rgba(232,93,4,.5)); }
.logo-t { font-family:'Baloo 2',cursive; font-size:12px; font-weight:800; color:var(--flame-l); line-height:1.3; margin-top:4px; }
.logo-s { font-size:9px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.user-pill { margin:9px; background:rgba(255,255,255,.05); border-radius:10px; padding:9px 11px; display:flex; align-items:center; gap:9px; border:1px solid var(--border); }
.user-avatar { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.av-owner    { background:linear-gradient(135deg,var(--flame),var(--gold)); }
.av-showroom { background:linear-gradient(135deg,#4a8fe8,#7b5ea7); }
.av-delivery { background:linear-gradient(135deg,var(--green),#2eb87a); }
.av-godown   { background:linear-gradient(135deg,#e8a04a,var(--flame)); }
.user-name { font-size:12.5px; font-weight:600; line-height:1.2; }
.user-role { font-size:10px; color:var(--muted); text-transform:capitalize; }
nav { flex:1; padding:6px 0; overflow-y:auto; }
.ns  { padding:7px 13px 2px; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.ni  { display:flex; align-items:center; gap:8px; padding:8px 13px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--muted); transition:all .2s; border-left:3px solid transparent; border-radius:0 8px 8px 0; margin-right:7px; }
.ni:hover { background:rgba(255,255,255,.05); color:var(--text); }
.ni.active { background:rgba(232,93,4,.12); color:var(--flame-l); border-left-color:var(--flame); }
.ni .ic { width:17px; text-align:center; font-size:14px; }
.duty-btn  { margin:7px; padding:9px; border-radius:10px; text-align:center; cursor:pointer; font-size:12.5px; font-weight:600; transition:all .2s; border:none; }
.duty-on   { background:rgba(62,201,138,.15);  color:var(--green);   border:1px solid rgba(62,201,138,.3);  }
.duty-off  { background:rgba(232,93,4,.15);   color:var(--flame-l); border:1px solid rgba(232,93,4,.3);   }
.logout-btn { margin:8px; padding:9px; background:rgba(224,82,82,.1); border:1px solid rgba(224,82,82,.2); border-radius:10px; text-align:center; cursor:pointer; font-size:12.5px; color:var(--red); font-weight:500; transition:all .2s; }
.logout-btn:hover { background:rgba(224,82,82,.2); }
.main    { margin-left:232px; min-height:100vh; }
.topbar  { background:var(--panel); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar-title { font-family:'Baloo 2',cursive; font-size:18px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }
.content { padding:20px 24px; }

/* ── Cards ────────────────────────────────────── */
.sg { display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:11px; margin-bottom:20px; }
.sc { background:var(--card); border-radius:13px; padding:14px; border:1px solid var(--border); transition:transform .2s; }
.sc:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.sc-ic   { float:right; font-size:18px; opacity:.55; }
.sc-lbl  { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.sc-val  { font-family:'Baloo 2',cursive; font-size:24px; font-weight:800; line-height:1; }
.sc-unit { font-size:10.5px; color:var(--muted); margin-top:2px; }

/* ── Panel ────────────────────────────────────── */
.panel { background:var(--card); border-radius:15px; border:1px solid var(--border); margin-bottom:16px; }
.ph { padding:13px 17px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.pt { font-family:'Baloo 2',cursive; font-size:15.5px; font-weight:700; }
.pb { padding:16px; }

/* ── Form Elements ────────────────────────────── */
.fg2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:11px; }
.fgi { display:flex; flex-direction:column; gap:5px; }
label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
input, select, textarea {
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px;
  padding:9px 12px; color:var(--text); font-size:13px; font-family:inherit;
  transition:border-color .2s; width:100%;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--flame); background:rgba(232,93,4,.06); }
select option { background:var(--panel); }

/* ── Tables ───────────────────────────────────── */
.tw { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; padding:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); border-bottom:1px solid var(--border); }
td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.025); }

/* ── Tabs ─────────────────────────────────────── */
.tabs { display:flex; gap:3px; margin-bottom:16px; background:rgba(255,255,255,.04); border-radius:11px; padding:3px; flex-wrap:wrap; }
.tab  { padding:7px 13px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--muted); transition:all .2s; text-align:center; }
.tab.active { background:var(--flame); color:#fff; }

/* ── Pills ────────────────────────────────────── */
.pill { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:600; }
.p-g  { background:rgba(62,201,138,.18);  color:var(--green);   }
.p-o  { background:rgba(232,93,4,.18);    color:var(--flame-l); }
.p-b  { background:rgba(74,143,232,.18);  color:var(--blue);    }
.p-r  { background:rgba(224,82,82,.18);   color:var(--red);     }
.p-y  { background:rgba(249,199,79,.18);  color:var(--gold);    }

/* ── Alerts ───────────────────────────────────── */
.alert { padding:10px 14px; border-radius:9px; font-size:12.5px; display:flex; align-items:flex-start; gap:8px; margin-bottom:11px; }
.al-s  { background:rgba(62,201,138,.12);  border:1px solid rgba(62,201,138,.25);  color:var(--green);   }
.al-w  { background:rgba(249,199,79,.12);  border:1px solid rgba(249,199,79,.25);  color:var(--gold);    }
.al-i  { background:rgba(74,143,232,.12);  border:1px solid rgba(74,143,232,.25);  color:var(--blue);    }
.al-r  { background:rgba(224,82,82,.12);   border:1px solid rgba(224,82,82,.25);   color:var(--red);     }

/* ── Modal ────────────────────────────────────── */
.mo  { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:200; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.mb  { background:var(--panel); border-radius:18px; padding:24px; border:1px solid var(--border); min-width:360px; max-width:94vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.mt2 { font-family:'Baloo 2',cursive; font-size:18px; font-weight:700; margin-bottom:14px; }
.ma  { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

/* ── OTP ──────────────────────────────────────── */
.otp-box { display:flex; gap:9px; justify-content:center; margin:14px 0; }
.otp-d   { width:50px; height:55px; text-align:center; font-size:22px; font-weight:700; border-radius:11px; border:2px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); }
.otp-d:focus { border-color:var(--flame); outline:none; }

/* ── Cylinder Inventory ────────────────────────── */
.cyl-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:12px; }
.cyl-card  { background:var(--card-h); border:1px solid var(--border); border-radius:12px; padding:13px; }
.cyl-card-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:9px; }
.cyl-row   { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:13px; }
.inv-full   { color:var(--green);  }
.inv-empty  { color:var(--gold);   }
.inv-defect { color:var(--red);    }

/* ── Summary rows ─────────────────────────────── */
.sr { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.st { display:flex; justify-content:space-between; padding:10px 0 0; font-size:15px; font-weight:700; color:var(--flame-l); }

/* ── Feedback ─────────────────────────────────── */
.feedback-q      { background:rgba(255,255,255,.04); border-radius:11px; padding:12px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.feedback-q-text { font-size:13.5px; font-weight:500; }
.toggle-wrap     { display:flex; gap:6px; }
.toggle-btn      { padding:5px 14px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all .2s; }

/* ── Document Vault ───────────────────────────── */
.doc-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:12px; }
.doc-card  { background:var(--card-h); border:1px solid var(--border); border-radius:12px; padding:13px; transition:transform .2s; }
.doc-card:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.drop-zone { border:2px dashed var(--border); border-radius:12px; padding:28px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; margin-top:12px; }
.drop-zone:hover, .drop-zone.drag { border-color:var(--flame); background:rgba(232,93,4,.05); }

/* ── Loader ────────────────────────────────────── */
.loader      { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--flame); border-radius:50%; animation:spin .7s linear infinite; }
.page-loader { display:flex; align-items:center; justify-content:center; padding:60px; gap:12px; color:var(--muted); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Helpers ──────────────────────────────────── */
.hidden  { display:none !important; }
.mt8     { margin-top:8px;  }
.mt12    { margin-top:12px; }
.mt16    { margin-top:16px; }
.flex    { display:flex; }
.gap-8   { gap:8px;  }
.gap-10  { gap:10px; }
.ac      { align-items:center;    }
.jb      { justify-content:space-between; }
.wrap    { flex-wrap:wrap; }
.fw7     { font-weight:700; }
.tf      { color:var(--flame-l); }
.tg      { color:var(--green);   }
.tr      { color:var(--red);     }
.tm      { color:var(--muted);   }
.tb      { color:var(--blue);    }
.g2      { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g3      { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar       { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:10px; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { width:195px; }
  .main    { margin-left:195px; }
  .content { padding:14px; }
  .g2, .g3 { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .sidebar { width:175px; }
  .main    { margin-left:175px; }
  .sg      { grid-template-columns:repeat(2,1fr); }
}

/* ── Opening Stock Page ──────────────────────────── */
#opening-stock-screen {
  background: var(--deep);
  min-height: 100vh;
  padding: 16px 0 40px;
}
.os-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.os-section-title {
  font-family: 'Baloo 2', cursive;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.os-table-wrap { overflow-x: auto; }
.os-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.os-table th {
  text-align: left; padding: 9px 16px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.os-table td { padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.os-table tr:last-child td { border-bottom: none; }
.os-table tr:hover td { background: rgba(255,255,255,0.025); }
.os-input {
  width: 90px; padding: 7px 10px; font-size: 13px; font-weight: 600;
  text-align: center; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.os-input:focus { outline: none; border-color: var(--flame); background: rgba(232,93,4,0.08); }

/* ── Stock Received Sections ────────────────────── */
.sr-section {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 18px;
  margin-bottom: 16px;
}
.sr-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sr-section-sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}
.sr-sub-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}