/* ==========================================================
   Walia Opticals ERP
   Visual idea: an optician's instrument panel. Every number a
   staff member can misread - power, axis, money, barcode - is
   set in tabular mono so digits line up in a column and a
   mis-keyed 5 next to a 6 is visible at a glance.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0D2027;
  --ink-2:#294851;
  --slate:#64818B;
  --line:#D3DEDD;
  --line-2:#E7EDEC;
  --paper:#E9EFEE;
  --card:#FFFFFF;
  --tint:#0A7C74;
  --tint-2:#065E58;
  --tint-soft:#DCEDEA;
  --amber:#A96A12;
  --amber-soft:#F7ECD9;
  --rose:#A33326;
  --rose-soft:#F8E4E0;
  --ok:#226B4E;
  --ok-soft:#DDEDE4;

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --r:4px;
  --side:224px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}
a{color:var(--tint-2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}

.side{
  width:var(--side);flex:0 0 var(--side);
  background:var(--ink);color:#B9CDCE;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.side-brand{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.side-brand b{display:block;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.2px}
.side-brand span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6E9296;margin-top:3px}
.side-nav{padding:10px 0;overflow-y:auto;flex:1}
.side-nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;color:#B9CDCE;font-size:14.5px;
  border-left:3px solid transparent;
}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.side-nav a.on{background:rgba(10,124,116,.22);border-left-color:var(--tint);color:#fff;font-weight:600}
.side-nav .grp{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#54767B;padding:14px 18px 5px;
}
.side-foot{padding:12px 18px;border-top:1px solid rgba(255,255,255,.09);font-size:13px}
.side-foot b{color:#fff;display:block}
.side-foot span{color:#6E9296;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.side-foot a{color:#8FB0B2;font-size:13px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.top{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:10px 22px;display:flex;gap:16px;align-items:center;
  position:sticky;top:0;z-index:20;
}
.top form{flex:1;max-width:520px;display:flex;gap:8px}
.top .hint{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.04em}
.burger{display:none}

.wrap{padding:22px;max-width:1240px;width:100%}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{font-size:23px;font-weight:700;letter-spacing:-.4px;margin:0}
.page-head p{margin:3px 0 0;color:var(--slate);font-size:14px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tint-2);margin:0 0 4px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.card-head{padding:12px 16px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.1px}
.card-body{padding:16px}
.card-body.tight{padding:0}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}

/* ---------- KPI tiles ---------- */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.kpi .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.kpi .v{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12.5px;color:var(--slate);margin-top:2px}
.kpi.warn{border-color:#E3C79B;background:var(--amber-soft)}
.kpi.warn .v{color:var(--amber)}
.kpi.due{border-color:#E0BAB3;background:var(--rose-soft)}
.kpi.due .v{color:var(--rose)}
.kpi.good .v{color:var(--ok)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;padding:9px 14px;background:#F3F7F6;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600;
  white-space:nowrap;
}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F7FAF9}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.empty{padding:34px 16px;text-align:center;color:var(--slate)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.pill.on{background:var(--tint-soft);color:var(--tint-2)}
.pill.wait{background:var(--amber-soft);color:var(--amber)}
.pill.bad{background:var(--rose-soft);color:var(--rose)}
.pill.done{background:var(--ok-soft);color:var(--ok)}
.pill.flat{background:#EEF2F1;color:var(--ink-2)}

/* ---------- forms ---------- */
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
input,select,textarea{
  width:100%;padding:8px 10px;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
}
input[type=number],input.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{border-color:var(--tint);outline:2px solid rgba(10,124,116,.18);outline-offset:0}
textarea{min-height:74px;resize:vertical}
.field{margin-bottom:13px}
.help{font-size:12.5px;color:var(--slate);margin-top:4px}
.req{color:var(--rose)}

.btn{
  display:inline-block;padding:9px 16px;border:1px solid var(--tint);border-radius:var(--r);
  background:var(--tint);color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:600;
  cursor:pointer;text-align:center;width:auto;
}
.btn:hover{background:var(--tint-2);border-color:var(--tint-2);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn.ghost:hover{background:#F3F7F6;color:var(--ink)}
.btn.danger{background:var(--rose);border-color:var(--rose)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* password box with a reveal button sitting inside it */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:40px}
.pw-eye{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r);color:var(--slate);cursor:pointer;
}
.pw-eye:hover{color:var(--ink);background:#F0F5F4}
.pw-eye:focus-visible{outline:2px solid var(--tint);outline-offset:-2px}

/* ---------- flashes ---------- */
.flash{padding:11px 15px;border-radius:var(--r);margin-bottom:14px;font-size:14.5px;border:1px solid}
.flash.ok{background:var(--ok-soft);border-color:#A9CFBB;color:#17553C}
.flash.err{background:var(--rose-soft);border-color:#E0BAB3;color:#82281D}
.flash.info{background:var(--tint-soft);border-color:#A6CFC9;color:var(--tint-2)}

/* ==========================================================
   SIGNATURE 1 - the Rx card
   An optician's grid. Powers stay huge and mono because a
   misread axis is a remake, and a misread SPH is a headache
   the customer blames on the shop.
   ========================================================== */
.rx{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.rx-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:10px 14px;background:var(--ink);color:#fff;
}
.rx-top .v{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8FB0B2}
.rx-top .v b{color:#fff}
.rx table{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rx thead th{background:#F3F7F6;font-size:10px;text-align:center;padding:7px 6px}
.rx thead th:first-child{text-align:left}
.rx tbody td{text-align:center;font-size:17px;padding:11px 6px;letter-spacing:-.3px}
.rx tbody td:first-child{
  text-align:left;font-size:12px;letter-spacing:.12em;font-weight:600;
  color:var(--tint-2);width:74px;
}
.rx tbody tr:hover{background:transparent}
.rx-foot{padding:9px 14px;border-top:1px solid var(--line-2);font-size:13px;color:var(--slate);display:flex;gap:18px;flex-wrap:wrap}
.rx-foot b{color:var(--ink);font-family:var(--mono)}
.rx.void{opacity:.62}
.rx.void .rx-top{background:var(--rose)}

/* the calculated reading power - shown, never typed, so it is
   drawn flat rather than as a set of boxes */
.near-panel{
  border:1px solid var(--line);border-radius:var(--r);background:#F7FAF9;
  margin:14px 0 4px;overflow:hidden;
}
.near-panel.live{border-color:var(--tint);background:var(--tint-soft)}
.near-head{padding:9px 13px;border-bottom:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.near-head b{font-size:13.5px}
.near-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.near-sec{border-bottom:1px solid var(--line-2)}
.near-sec:last-child{border-bottom:0}
.near-sec-t{
  padding:8px 13px 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tint-2);font-weight:600;
}
.near-table{font-family:var(--mono);font-variant-numeric:tabular-nums}
.near-table thead th{background:transparent;border-bottom:1px solid var(--line-2);font-size:10px;text-align:center;padding:6px}
.near-table thead th:first-child{text-align:left;padding-left:13px}
.near-table tbody td{text-align:center;font-size:16px;padding:8px 6px;border-bottom:0;color:var(--slate)}
.near-table tbody td:first-child{
  text-align:left;padding-left:13px;font-size:11.5px;letter-spacing:.1em;
  font-weight:600;color:var(--tint-2);width:88px;
}
.near-table tbody tr.on td{color:var(--ink);font-weight:600}
.near-table tbody tr.near-only td{font-size:14px}
.near-table tbody tr.near-only td:first-child{font-size:10.5px;color:var(--slate)}
.near-table tbody tr:hover{background:transparent}
.near-note{margin:0;padding:0 13px 10px;font-size:12.5px;color:var(--slate)}

/* on the Rx card and on print */
.rx-near{
  display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  padding:9px 14px;border-top:1px solid var(--line-2);background:#F7FAF9;
  font-size:13px;color:var(--slate);
}
.rx-near .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tint-2)}
.rx-near b{font-family:var(--mono);font-size:15px;color:var(--ink);letter-spacing:-.2px}

/* power change: how much this Rx moved from the one before */
.delta{font-family:var(--mono);font-size:11px;display:block;margin-top:2px;letter-spacing:0}
.delta.up{color:var(--rose)}
.delta.dn{color:var(--ok)}
.delta.same{color:var(--slate)}

/* ==========================================================
   SIGNATURE 2 - the order rail
   Seven stages, drawn as the job actually moves through the
   shop. The current stage is the only loud thing on it.
   ========================================================== */
.rail{display:flex;gap:0;margin:4px 0 2px;flex-wrap:wrap}
.rail .st{flex:1;min-width:84px;position:relative;padding:0 0 0 0;text-align:center}
.rail .bar{height:5px;background:var(--line);margin-bottom:7px}
.rail .st:first-child .bar{border-radius:3px 0 0 3px}
.rail .st:last-child .bar{border-radius:0 3px 3px 0}
.rail .st.done .bar{background:var(--tint)}
.rail .st.now .bar{background:var(--amber)}
.rail .lbl{font-size:11.5px;color:var(--slate);line-height:1.25;padding:0 4px}
.rail .st.now .lbl{color:var(--amber);font-weight:600}
.rail .st.done .lbl{color:var(--ink-2)}
.rail .n{font-family:var(--mono);font-size:10px;color:var(--slate);display:block}

/* ---------- billing screen ---------- */
.line-table input{padding:6px 8px;font-size:14px}
.line-table td{padding:6px 8px}
.totals{margin-left:auto;width:min(340px,100%)}
.totals div{display:flex;justify-content:space-between;padding:5px 0;font-size:14.5px}
.totals div.big{border-top:1px solid var(--line);margin-top:5px;padding-top:9px;font-size:19px;font-weight:700}
.totals .num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- customer portal ---------- */
.portal{background:var(--ink);min-height:100vh;padding:0}
.portal-top{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:12px}
.portal-top b{color:#fff;font-size:17px}
.portal-top .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E9296}
.portal-top a{color:#8FB0B2;font-size:13.5px}
.portal-wrap{max-width:760px;margin:0 auto;padding:22px 16px 60px}
.portal-wrap .card{border-color:transparent}
.gate{max-width:400px;margin:8vh auto;padding:0 16px}
.gate .card{border:0}
.gate h1{font-size:22px;margin:0 0 5px}
.gate p{color:var(--slate);font-size:14px;margin:0 0 16px}
.otp-input{font-family:var(--mono);font-size:26px;letter-spacing:.42em;text-align:center;padding:12px}
.portal-note{color:#6E9296;font-size:12.5px;text-align:center;margin-top:16px;line-height:1.6}

/* ---------- print ---------- */
.print-only{display:none}
@media print{
  @page{size:A4;margin:11mm}
  body{background:#fff;font-size:12px}
  .side,.top,.no-print,.btn-row{display:none !important}
  .shell{display:block}
  .wrap{padding:0;max-width:none}
  .card{border:0;margin:0}
  .card-head{display:none}
  .card-body{padding:0}
  .print-only{display:block}
  .rx-top{background:#fff !important;color:#000 !important;border-bottom:1px solid #000}
  .rx-top .v{color:#444}
  .rx-top .v b{color:#000}
  thead th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .near-panel{display:none}
  .rx-near{background:#fff !important;border-top:1px solid #999}
  .rx-near b{color:#000}
  a{color:#000;text-decoration:none}
}

/* ---------- invoice paper ---------- */
.doc{background:#fff;padding:26px;border:1px solid var(--line);border-radius:var(--r)}
.doc-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:16px;flex-wrap:wrap}
.doc-head h1{margin:0;font-size:21px;letter-spacing:-.3px}
.doc-head .meta{text-align:right;font-family:var(--mono);font-size:12.5px;line-height:1.7}
.doc-head .meta b{font-size:14px}
.doc-party{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.doc-party>div{flex:1;min-width:210px}
.doc-party .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:3px}
.doc-terms{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--slate);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sign{margin-top:34px;text-align:right;font-size:12px;color:var(--slate)}
.sign b{display:block;color:var(--ink);border-top:1px solid var(--line);padding-top:6px;margin-top:34px;display:inline-block;min-width:170px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .g4,.g5,.g6{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .shell{display:block}
  .side{
    position:static;width:auto;height:auto;flex-direction:row;
    align-items:center;justify-content:space-between;gap:10px;padding-right:12px;
  }
  .side-brand{border-bottom:0;padding:12px 14px}
  .side-nav{
    display:none;position:absolute;top:56px;left:0;right:0;z-index:40;
    background:var(--ink);border-bottom:1px solid rgba(255,255,255,.12);max-height:70vh;
  }
  .side-nav.open{display:block}
  .side-foot{display:none}
  .burger{
    display:block;background:transparent;border:1px solid rgba(255,255,255,.25);
    color:#fff;padding:7px 12px;border-radius:var(--r);font-family:var(--mono);font-size:12px;width:auto;
  }
  .top{padding:9px 14px}
  .top .hint{display:none}
  .wrap{padding:14px}
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .rx tbody td{font-size:15px}
  .near-table tbody td{font-size:14px}
  .rx-near{gap:10px}
  .rail .st{min-width:70px}
  .rail .lbl{font-size:10.5px}
  table.scroll-x{display:block;overflow-x:auto;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}