:root {
  --red:    #c8102e;
  --gold:   #d4a017;
  --dark:   #111827;
  --sw:     260px;
  --bg:     #f8fafc;
  --card:   #ffffff;
  --text:   #111827;
  --muted:  #6b7280;
  --border: #e5e7eb;
  --ok:     #059669;
  --warn:   #d97706;
  --err:    #dc2626;
  --info:   #2563eb;
  --sh:     0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); font-size:14px; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; } /* no stray underlines anywhere */
.hidden { display:none!important; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* ── LOGIN ── */
#LP {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  padding:20px;
}
.lc {
  background:#fff; border-radius:20px; padding:40px; width:100%; max-width:400px;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.lc-logo { text-align:center; margin-bottom:28px; }
.lc-logo img { width:200px; max-width:90%; }
.lc-logo h1 { font-size:20px; font-weight:900; color:var(--red); margin-top:10px; letter-spacing:-0.5px; }
.lc-logo p { font-size:12px; color:var(--muted); margin-top:3px; }
.ltabs { display:flex; gap:4px; background:#f1f5f9; border-radius:10px; padding:4px; margin-bottom:24px; }
.ltab { flex:1; padding:8px; border:none; background:transparent; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; color:var(--muted); font-family:inherit; transition:.2s; }
.ltab.on { background:#fff; color:var(--red); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.fg input, .fg select, .fg textarea {
  width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:9px;
  font-size:14px; outline:none; font-family:inherit; background:#fff; color:var(--text); transition:.2s;
}
.fg input:focus, .fg select:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.08); }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:480px) { .fr { grid-template-columns:1fr; } }
.dc { margin-top:14px; background:#fef3f2; border:1px solid #fecdd3; border-radius:8px; padding:10px 12px; font-size:12px; color:#9f1239; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px;
  border:none; border-radius:9px; cursor:pointer; font-weight:600; font-size:13px;
  font-family:inherit; transition:transform .15s, box-shadow .15s, filter .15s;
  text-decoration:none; white-space:nowrap; line-height:1.2;
}
.btn:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.13); }
.btn:active { transform:translateY(0); box-shadow:none; }
.bpri { background:var(--red); color:#fff; padding:10px 20px; font-size:14px; box-shadow:0 2px 6px rgba(200,16,46,.22); }
.btn.full { width:100%; }
.bok  { background:var(--ok);   color:#fff; }
.bwarn{ background:var(--warn); color:#fff; }
.berr { background:var(--err);  color:#fff; }
.binfo{ background:var(--info); color:#fff; }
.bmut { background:#f1f5f9; color:var(--text); border:1px solid var(--border); }
.bmut:hover { background:#e2e8f0; }
.bgold{ background:var(--gold); color:#fff; }
.btn.sm { padding:7px 13px; font-size:12px; border-radius:8px; }
.btn.xs { padding:5px 10px;  font-size:11px; border-radius:7px; }

/* ── APP ── */
#AP { display:flex; min-height:100vh; }

/* ── SIDEBAR (WHITE) ── */
.sb {
  width:var(--sw); background:#ffffff; border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:200; overflow:hidden;
}
.sb-logo { padding:22px 18px 18px; border-bottom:1px solid var(--border); }
.sb-logo img { width:100%; max-width:170px; display:block; }
.sb-logo .tag { margin-top:9px; font-size:9.5px; font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:1.2px; }
.sb-user {
  margin:12px; background:linear-gradient(135deg,#fef2f2,#fff5f5); border:1px solid #fecdd3; border-radius:11px;
  padding:12px 13px; display:flex; align-items:center; gap:11px;
}
.su-av {
  width:36px; height:36px; border-radius:50%; background:var(--red);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
  box-shadow:0 2px 6px rgba(200,16,46,.28);
}
.su-name { font-size:13px; font-weight:700; color:var(--dark); line-height:1.2; }
.su-role { font-size:10px; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.sb nav { flex:1; overflow-y:auto; padding:8px; }
.nsep { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; padding:14px 8px 5px; }
.ni {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  cursor:pointer; font-size:13px; font-weight:500; color:var(--muted);
  margin-bottom:1px; border:none; background:transparent; width:100%; text-align:left; font-family:inherit; transition:.15s;
  text-decoration:none; /* sidebar items are <a> tags — kill the default underline */
}
.ni:hover { background:#fef2f2; color:var(--red); text-decoration:none; }
.ni.on { background:var(--red); color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(200,16,46,.25); }
.ni .ico { width:18px; text-align:center; font-size:15px; flex-shrink:0; }
.sb-ft { padding:10px; border-top:1px solid var(--border); }

/* ── MAIN ── */
.mn { margin-left:var(--sw); flex:1; }
.tb {
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
}
.tb h2 { font-size:19px; font-weight:800; letter-spacing:-.3px; }
.tb-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.tb-date { font-size:12px; font-weight:500; color:var(--muted); background:#f1f5f9; padding:7px 14px; border-radius:99px; }
.pc { padding:28px; }
@media(max-width:700px) { .pc { padding:16px; } .tb { padding:14px 16px; } }

/* ── CARDS ── */
.card { background:#fff; border-radius:14px; padding:22px; box-shadow:var(--sh); border:1px solid var(--border); transition:box-shadow .2s; }
.card:hover { box-shadow:0 2px 6px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.06); }
.ch { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.ch h3 { font-size:15px; font-weight:800; letter-spacing:-.2px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:1100px) { .g4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px)  { .g4,.g3,.g2 { grid-template-columns:1fr; } }

/* Stat cards */
.sc {
  background:#fff; border-radius:14px; padding:20px; box-shadow:var(--sh);
  border:1px solid var(--border); display:flex; align-items:center; gap:16px;
  transition:transform .18s, box-shadow .18s; position:relative; overflow:hidden;
}
.sc::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); opacity:0; transition:.18s; }
.sc:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.07); }
.sc:hover::after { opacity:1; }
.si { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.si.red   { background:#fef2f2; }
.si.green { background:#f0fdf4; }
.si.gold  { background:#fffbeb; }
.si.blue  { background:#eff6ff; }
.sv { font-size:25px; font-weight:900; line-height:1.1; color:var(--dark); letter-spacing:-.5px; }
.sl { font-size:12px; color:var(--muted); margin-top:4px; font-weight:500; }

/* Table */
.tw { overflow-x:auto; border-radius:10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { padding:11px 14px; text-align:left; font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; border-bottom:2px solid var(--border); white-space:nowrap; background:#fafbfc; }
tbody td { padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:#f8fafc; }

/* Badges */
.bdg { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.bdg::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.bg  { background:#d1fae5; color:#065f46; }
.br  { background:#fee2e2; color:#991b1b; }
.by  { background:#fef3c7; color:#92400e; }
.bb  { background:#dbeafe; color:#1e40af; }
.bo  { background:#ffedd5; color:#9a3412; }
.bgr { background:#f3f4f6; color:#374151; }

/* Modal */
.mov { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px); }
.mbox { background:#fff; border-radius:16px; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.15); animation:fu .2s ease; }
.mbox.wide { max-width:840px; }
@keyframes fu { from { transform:translateY(16px); opacity:0; } to { transform:none; opacity:1; } }
.mh { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:1; }
.mh h3 { font-size:16px; font-weight:800; }
.mc { background:none; border:none; cursor:pointer; font-size:20px; color:var(--muted); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mc:hover { background:#f1f5f9; }
.mb { padding:20px 24px; }

/* Section label */
.sl-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:10px 0 6px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.divr { height:1px; background:var(--border); margin:14px 0; }
.oid { font-size:12px; font-weight:800; color:var(--red); background:#fef2f2; padding:3px 8px; border-radius:6px; letter-spacing:.5px; }

/* Service item (order builder) */
.si-box { border:1.5px solid var(--border); border-radius:10px; padding:14px; margin-bottom:10px; background:#fafafa; }
.si-top { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.si-nm { font-weight:700; }
.si-ct { font-size:11px; color:var(--muted); margin-top:2px; }
.si-ctrl { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.si-ctrl input { width:95px; padding:6px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; font-family:inherit; }
.si-flds { margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Order summary box */
.osum { background:linear-gradient(135deg,#111827,#1e1b4b); color:#fff; border-radius:12px; padding:18px; margin-bottom:16px; display:none; }
.osum-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.osum-lbl { font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; }
.osum-val { font-size:18px; font-weight:800; }
.osum-total .osum-lbl { color:var(--gold); font-weight:700; }
.osum-total .osum-val { font-size:26px; font-weight:900; color:var(--gold); }

/* Chart */
.bc { display:flex; align-items:flex-end; gap:8px; height:130px; padding:8px 0 0; }
.bcc { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:4px; }
.bcb { width:100%; background:linear-gradient(180deg,var(--red),#8b0000); border-radius:4px 4px 0 0; min-height:4px; transition:height 1s; }
.bcl { font-size:10px; color:var(--muted); }
.bcv { font-size:10px; font-weight:700; color:var(--red); }

/* Punch */
.pbox { text-align:center; padding:32px; }
.pclock { font-size:52px; font-weight:900; color:var(--dark); letter-spacing:-2px; }
.pdate { color:var(--muted); font-size:13px; margin:6px 0 28px; }
.pbtn { width:140px; height:140px; border-radius:50%; border:none; cursor:pointer; font-size:15px; font-weight:800; line-height:1.3; letter-spacing:1px; box-shadow:0 8px 30px rgba(0,0,0,.15); transition:.25s; }
.pbtn:hover { transform:scale(1.06); }
.pin  { background:linear-gradient(135deg,#059669,#047857); color:#fff; }
.pout { background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; }
.pst  { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:99px; font-size:13px; font-weight:600; margin-top:14px; }
.pst.in  { background:#d1fae5; color:#065f46; }
.pst.out { background:#fee2e2; color:#991b1b; }

/* ── INVOICE PRINT ── */
.inv { background:#fff; font-family:'Inter',sans-serif; font-size:13px; }
.inv-stripe { height:6px; background:linear-gradient(90deg,var(--red),var(--gold)); }
.inv-hdr { background:#111827; color:#fff; padding:24px 32px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.inv-hdr-left img { height:48px; filter:brightness(1.1); display:block; margin-bottom:10px; }
.inv-hdr-left p { font-size:12px; color:rgba(255,255,255,.6); line-height:1.8; }
.inv-hdr-right { text-align:right; }
.inv-hdr-right h1 { font-size:24px; font-weight:900; letter-spacing:2px; color:var(--gold); }
.inv-hdr-right table { margin-top:10px; font-size:12px; }
.inv-hdr-right td { padding:2px 6px; color:rgba(255,255,255,.7); }
.inv-hdr-right td:last-child { color:#fff; font-weight:600; }
.inv-body { padding:24px 32px; }
.inv-parties { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.inv-party { background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.inv-party h4 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:8px; }
.inv-party p { line-height:1.9; font-size:13px; color:var(--dark); }
.inv-party strong { font-size:14px; font-weight:800; }
.inv-table table { width:100%; border-collapse:collapse; margin-bottom:16px; font-size:13px; }
.inv-table thead th { background:#111827; color:#fff; padding:10px 12px; text-align:left; }
.inv-table tbody td { padding:10px 12px; border-bottom:1px solid var(--border); }
.inv-table tbody tr:nth-child(even) td { background:#f8fafc; }
.inv-totals { display:flex; justify-content:flex-end; }
.inv-totals table { font-size:13px; min-width:280px; }
.inv-totals td { padding:6px 12px; }
.inv-totals tr:last-child td { background:var(--red); color:#fff; font-size:15px; font-weight:800; padding:10px 12px; }
.inv-totals .paid-row td { color:var(--ok); font-weight:700; }
.inv-totals .due-row  td { color:var(--err); font-weight:700; }
.inv-note { margin-top:16px; padding:12px 16px; background:#fffbeb; border-left:3px solid var(--gold); border-radius:0 8px 8px 0; font-size:13px; }
.inv-footer { background:#f8fafc; padding:16px 32px; text-align:center; font-size:11px; color:var(--muted); line-height:1.8; border-top:1px solid var(--border); }
.inv-footer b { color:var(--dark); }
.inv-sign { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:24px 32px 0; }
.inv-sign-box { border-top:1.5px solid var(--border); padding-top:8px; font-size:12px; color:var(--muted); }

/* ── E-WARRANTY CERTIFICATE ── */
.warr-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:18px; }
.warr-cell { background:#fff; padding:9px 14px; font-size:12.5px; }
.warr-cell b { display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:2px; font-weight:700; }
.warr-sec { margin-bottom:16px; }
.warr-sec h4 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--red); margin-bottom:6px; padding-bottom:4px; border-bottom:1.5px solid var(--gold); }
.warr-sec ul { margin:0; padding-left:18px; font-size:12px; line-height:1.85; color:var(--dark); }
.warr-plate { margin-bottom:16px; }
.warr-plate img { max-width:260px; border-radius:8px; border:1px solid var(--border); display:block; }

/* Loader */
.ldr { text-align:center; padding:56px; color:var(--muted); }
.spin { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--red); border-radius:50%; animation:sp .7s linear infinite; margin:0 auto 12px; }
@keyframes sp { to { transform:rotate(360deg); } }
.es { text-align:center; padding:52px 24px; color:var(--muted); }
.es-ic { font-size:40px; margin-bottom:12px; opacity:.35; }
.es p { font-size:13.5px; }
.sb-bar {
  display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; align-items:center;
  padding:14px; background:#fafbfc; border:1px solid var(--border); border-radius:11px;
}
.sb-bar input, .sb-bar select {
  padding:9px 13px; border:1.5px solid var(--border); border-radius:9px;
  font-size:13px; outline:none; font-family:inherit; background:#fff; transition:.18s;
}
.sb-bar input:focus, .sb-bar select:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.08); }

/* Customer profile card */
.profile-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.profile-hdr { background:linear-gradient(135deg,#111827,#1e1b4b); padding:24px; display:flex; align-items:center; gap:16px; }
.profile-av { width:56px; height:56px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; flex-shrink:0; }
.profile-name { font-size:18px; font-weight:800; color:#fff; }
.profile-meta { font-size:12px; color:rgba(255,255,255,.6); margin-top:3px; }

/* ── MOBILE: slide-out sidebar ──
   On phones the fixed 260px sidebar would squash the content, so it slides
   off-screen and a hamburger button toggles it. */
.sb-toggle { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--dark); padding:0 12px 0 0; line-height:1; }
.sb-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:150; }
.sb-backdrop.show { display:block; }
@media(max-width:900px) {
  .sb { transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.2); }
  .sb.open { transform:translateX(0); }
  .mn { margin-left:0; }
  .sb-toggle { display:block; }
  .tb-date { display:none; }
  .tb h2 { font-size:17px; }
}

@media print {
  /* When bill modal is open — print only the invoice */
  body.printing-bill > *:not(#billModal) { display:none!important; }
  body.printing-bill #billModal { position:static!important; background:none!important; padding:0!important; overflow:visible!important; }
  body.printing-bill .inv { box-shadow:none; }

  /* When printing the reports page directly (no bill modal open) */
  body:not(.printing-bill) .sb,
  body:not(.printing-bill) .tb,
  body:not(.printing-bill) .sb-backdrop,
  body:not(.printing-bill) #MOV,
  body:not(.printing-bill) #billModal,
  body:not(.printing-bill) .rpt-noprint { display:none!important; }

  body:not(.printing-bill) .mn { margin-left:0 !important; }
  body:not(.printing-bill) .pc { padding:0 !important; }
  body:not(.printing-bill) #AP { display:block !important; }
  body:not(.printing-bill) .mn { display:block !important; }

  body:not(.printing-bill) .card { box-shadow:none !important; border:1px solid #ccc !important; break-inside:avoid; }
  body:not(.printing-bill) .sc   { box-shadow:none !important; border:1px solid #ccc !important; }
  body:not(.printing-bill) .g2,.g4 { display:grid !important; }
  body:not(.printing-bill) table  { font-size:11px; }
  body:not(.printing-bill) .btn, body:not(.printing-bill) select, body:not(.printing-bill) input { display:none !important; }
  body:not(.printing-bill) .sb-bar { display:none !important; }
  body:not(.printing-bill) .rpt-print-header { display:block !important; }
}

/* ── JOB DETAIL / TIMELINE ── */
.timeline-dot { width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:4px; }
.tl-line { border-left:2px dashed var(--border);margin-left:4px;padding-left:16px; }

/* ── ACTIVE JOBS badge on orders list ── */
.job-active-badge { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#fff3cd;color:#856404;border-radius:99px;font-size:10px;font-weight:700; }