/* Amidhara — quarry palette. Basalt, stone dust, machinery orange. */
:root{
  --ink:#14161A;
  --slate:#2B313A;
  --slate-2:#3A424D;
  --grit:#6E7681;
  --line:#D6D1C8;
  --line-2:#E6E2DA;
  --dust:#EDEAE4;
  --paper:#fff;
  --hivis:#D64500;
  --hivis-soft:#FCEDE5;
  --ok:#14663F;
  --ok-soft:#E7F1EC;
  --warn:#8A5B00;
  --warn-soft:#FBF1DC;
  --rail:220px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dust);color:var(--ink);
  font:400 17px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
.num,input[type=number],td.num,th.num{font-variant-numeric:tabular-nums}
a{color:var(--ink)}
h1,h2,h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.01em}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.rail{
  width:var(--rail);flex:0 0 var(--rail);background:var(--slate);color:#fff;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column
}
.rail .brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.rail .brand b{
  display:block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;
  line-height:1.15;letter-spacing:-.01em
}
.rail .brand span{
  display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#9AA3AE;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:600
}
.rail nav{padding:10px 0;flex:1;overflow:auto}
.rail nav a{
  display:block;padding:13px 20px;color:#D3D8DE;text-decoration:none;font-size:16.5px;
  border-left:4px solid transparent
}
.rail nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.rail nav a.on{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--hivis);font-weight:600}
.rail nav .sep{
  margin:14px 20px 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#79828E;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
}
.rail .who{padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#9AA3AE}
.rail .who b{display:block;color:#fff;font-size:15.5px;font-weight:600}
.rail .who a{color:var(--hivis);text-decoration:none;font-size:14px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:20px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap
}
.topbar h1{font-size:27px}
.topbar .sub{color:var(--grit);font-size:15px}
.topbar .spacer{flex:1}
.wrap{padding:24px 28px 120px;max-width:1280px;width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:11px 18px;border:1px solid var(--slate);background:var(--paper);
  color:var(--ink);font:600 16px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;border-radius:3px;cursor:pointer;
  text-decoration:none;transition:background .12s ease
}
.btn:hover{background:var(--line-2)}
.btn.primary{background:var(--hivis);border-color:var(--hivis);color:#fff}
.btn.primary:hover{background:#B93B00}
.btn.ghost{border-color:var(--line);color:var(--slate)}
.btn.danger{border-color:#A32020;color:#A32020}
.btn.danger:hover{background:#FBEAEA}
.btn.sm{padding:7px 12px;font-size:14.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- panels & forms ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:3px;margin-bottom:20px}
.panel > h2{
  padding:15px 20px;border-bottom:1px solid var(--line-2);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grit);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
}
.panel .body{padding:20px}

.grid{display:grid;gap:16px 20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

label.f{display:block}
label.f > span{
  display:block;margin-bottom:6px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grit);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:3px;background:var(--paper);
  font:400 19px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink)
}
textarea{font-size:17px;line-height:1.45;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--hivis);outline-offset:-1px;border-color:var(--hivis)}
input[readonly]{background:var(--dust);color:var(--slate)}
.hint{margin-top:6px;font-size:14px;color:var(--grit)}

/* ---------- tables ---------- */
.panel:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;background:var(--paper)}
table.data th{
  text-align:left;padding:12px 14px;border-bottom:2px solid var(--slate);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;white-space:nowrap
}
table.data td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:16.5px;vertical-align:middle}
table.data tr:hover td{background:#FAF9F6}
table.data .num,table.data th.num{text-align:right}
table.data .big{font-size:19px;font-weight:600}
.empty{padding:44px 20px;text-align:center;color:var(--grit);font-size:17px}

/* line-entry grid on challan / invoice forms */
table.lines{width:100%;border-collapse:collapse}
table.lines th{
  text-align:left;padding:10px 8px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grit);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;border-bottom:1px solid var(--line)
}
table.lines td{padding:6px 6px;border-bottom:1px solid var(--line-2)}
table.lines input,table.lines select{padding:10px 11px;font-size:18px}
table.lines td.num input{text-align:right}
table.lines .amt{
  text-align:right;font-size:19px;font-weight:600;padding-right:12px;white-space:nowrap
}
.rowdel{
  border:0;background:none;color:var(--grit);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px
}
.rowdel:hover{color:#A32020}

@media(max-width:820px){
      }

/* ---------- misc ---------- */
.tag{
  display:inline-block;padding:4px 10px;border-radius:2px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
}
.tag.open{background:var(--warn-soft);color:var(--warn)}
.tag.invoiced{background:var(--ok-soft);color:var(--ok)}
.tag.cancelled{background:#F2EFEA;color:var(--grit);text-decoration:line-through}
.tag.gst{background:var(--hivis-soft);color:var(--hivis)}
.tag.nongst{background:#ECEFF3;color:var(--slate)}
.tag.cash{background:var(--warn-soft);color:var(--warn)}
.tag.bank{background:var(--ok-soft);color:var(--ok)}

.flash{
  background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok);padding:14px 18px;
  border-radius:3px;margin-bottom:20px;font-weight:600
}
.err{
  background:#FBEAEA;border:1px solid #A32020;color:#A32020;padding:14px 18px;
  border-radius:3px;margin-bottom:20px;font-weight:600
}
.filters{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:16px 18px;margin-bottom:20px
}
.filters label.f{min-width:150px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:20px}
.stat span{
  display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--grit);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;margin-bottom:8px
}
.stat b{font-size:30px;font-weight:700;letter-spacing:-.02em;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.stat b.money{color:var(--hivis)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .box{width:100%;max-width:400px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:34px}
.login h1{font-size:25px;margin-bottom:4px}
.login p.s{color:var(--grit);margin:0 0 26px;font-size:15px}

@media(max-width:820px){
  .shell{flex-direction:column}
  .rail{width:100%;height:auto;position:static;flex:none}
  .rail .brand{padding:16px 16px 12px}
  .rail nav{display:flex;overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch}
  .rail nav a{border-left:0;border-bottom:4px solid transparent;white-space:nowrap;padding:12px 15px}
  .rail nav a.on{border-bottom-color:var(--hivis)}
  .rail nav .sep{display:none}
  .rail .who{display:none}
  .wrap{padding:14px 12px 130px}
  .topbar{padding:14px 12px;gap:10px}
  .topbar h1{font-size:22px}
  table.data th,table.data td{padding:10px 10px;font-size:15px}
  table.lines input,table.lines select{font-size:16px;padding:9px 9px}
  .stat b{font-size:24px}
  .grid.g4,.grid.g3,.grid.g2{gap:12px}
  .filters{padding:14px}
  .filters label.f{min-width:130px;flex:1 1 130px}
        .panel .body{padding:14px}
  input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{font-size:16px;padding:11px}
}
@media(max-width:600px){
  table.lines thead{display:none}
  table.lines, table.lines tbody, table.lines tr, table.lines td{display:block;width:100%}
  table.lines tr{border:1px solid var(--line);border-radius:4px;margin-bottom:12px;padding:12px 12px 10px;
    position:relative;background:var(--paper)}
  table.lines td{padding:7px 0;border:0}
  table.lines td[data-label]::before{
    content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
    color:var(--grit);font-weight:700;margin-bottom:4px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
  table.lines td.num input{text-align:left}
  table.lines td.amt{font-size:22px;padding-top:2px;border-top:1px solid var(--line-2);margin-top:4px}
  table.lines .rowdel{position:absolute;top:8px;right:8px;font-size:26px}
    .wrap{padding-bottom:150px}
}
@media(max-width:480px){
  .topbar{flex-wrap:wrap}
  .topbar .spacer{display:none}
  #pageActions{width:100%;display:flex;gap:8px}
  #pageActions .btn{flex:1;text-align:center}
  .stat{padding:14px}
  }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- inline totals strip (replaces the old fixed dark bar) ---------- */
.totals{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--hivis);
  border-radius:3px;padding:16px 20px;margin-bottom:18px
}
.totals .cell{display:flex;flex-direction:column;gap:3px}
.totals .cell span{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grit);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
}
.totals .cell b{font-size:22px;font-weight:600;letter-spacing:-.01em}
.totals .cell.total b{font-size:30px;color:var(--hivis);line-height:1.05}
.totals .spacer{flex:1}
@media(max-width:820px){
  .totals{gap:14px 20px;padding:14px}
  .totals .cell b{font-size:18px}
  .totals .cell.total b{font-size:24px}
  .totals .spacer{display:none}
  .totals .cell{min-width:30%}
  .totals .cell.total{min-width:100%;border-top:1px solid var(--line-2);padding-top:10px}
}

/* ---------- mobile: hamburger side panel, no horizontal scrolling ---------- */
.navtoggle{display:none}
.scrim{display:none}
@media(max-width:820px){
  .navtoggle{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--slate);color:#fff;border:0;border-radius:3px;padding:10px 14px;
    font:700 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer
  }
  .navtoggle span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}

  .rail{
    position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;height:100vh;z-index:70;
    transform:translateX(-100%);transition:transform .22s ease;overflow:auto;display:flex
  }
  body.navopen .rail{transform:translateX(0)}
  body.navopen .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
  .rail nav{display:block;overflow:visible}
  .rail nav a{border-left:4px solid transparent;border-bottom:0;padding:14px 20px;white-space:normal}
  .rail nav a.on{border-left-color:var(--hivis);border-bottom:0}
  .rail nav .sep{display:block}
  .rail .who{display:block}

  /* keep everything inside the screen — no left/right scrolling */
  .panel:has(table){overflow-x:visible}
  .hidem{display:none}
}

/* ---------- mobile: stack list-table rows into readable cards ---------- */
@media(max-width:820px){
  table.data{table-layout:auto}
  table.data thead{display:none}
  table.data tr:first-child{display:none}          /* header row (tables have no thead) */
  table.data, table.data tbody, table.data tr, table.data td{display:block;width:100%}
  table.data tr{
    border:1px solid var(--line);border-radius:4px;margin:0 0 12px;padding:12px 14px;
    background:var(--paper);position:relative
  }
  table.data tr:hover td{background:transparent}
  table.data td{
    border:0;padding:5px 0;font-size:15px;text-align:left;
    display:flex;justify-content:space-between;align-items:baseline;gap:14px
  }
  table.data td.num{text-align:left}
  table.data td[data-label]::before{
    content:attr(data-label);flex:0 0 42%;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grit);
    font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5
  }
  table.data td[data-label]{font-weight:600}
  table.data td:empty{display:none}
  table.data .big{font-size:17px}
  /* rows we couldn't label (totals / colspan rows) stay as one plain block */
  table.data tr.rowspan{background:var(--dust);font-weight:700}
  table.data tr.rowspan td{display:block;padding:3px 0}
  table.data tr.rowspan td::before{content:none}
  table.data tr.rowspan td:empty{display:none}
  /* action buttons sit full width at the bottom of each card */
  table.data td:last-child{padding-top:10px;margin-top:6px;border-top:1px solid var(--line-2);
    display:flex;gap:8px;justify-content:flex-start}
  table.data td:last-child::before{content:none}
  table.data td:last-child .btn.sm{flex:1;width:auto;margin:0;text-align:center}
  /* checkbox column on the invoice picker */
  table.data td:first-child input[type=checkbox]{margin-right:auto}
  .hidem{display:none}
}

/* ---------- mobile: stack list tables into readable cards ---------- */
@media(max-width:820px){
  table.data{table-layout:auto}
  table.data thead{display:none}
  table.data tr:first-child{display:none}          /* header row (tables here have no thead) */
  table.data, table.data tbody{display:block;width:100%}
  table.data tr{
    display:block;width:100%;border:1px solid var(--line);border-radius:4px;
    background:var(--paper);padding:12px 14px;margin-bottom:10px
  }
  table.data tr:hover td{background:transparent}
  table.data td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    width:100%;padding:5px 0;border:0;font-size:14.5px;text-align:right
  }
  table.data td[data-label]::before{
    content:attr(data-label);flex:0 0 42%;text-align:left;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grit);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700
  }
  table.data td.num{text-align:right}
  table.data td .btn.sm{width:auto;display:inline-block;margin:0 0 0 6px}
  table.data td:last-child{
    justify-content:flex-end;padding-top:10px;margin-top:6px;border-top:1px solid var(--line-2)
  }
  table.data td:last-child:empty{display:none}
  /* summary / colspan rows stay as one full-width strip */
  table.data tr.rowspan{background:var(--dust);padding:12px 14px}
  table.data tr.rowspan td{display:flex;justify-content:space-between;text-align:right}
  table.data tr.rowspan td:last-child{border-top:0;margin-top:0;padding-top:5px}
  table.data td.empty,table.data .empty{display:block;text-align:center}
}

/* ---------- belt-and-braces: nothing may push the page sideways ---------- */
@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  .main,.wrap,.panel,.filters,.topbar{max-width:100%;min-width:0}
  .filters{flex-direction:column;align-items:stretch}
  .filters label.f,.filters .btn{width:100%;min-width:0}
  .filters .hint{width:100%}
  .totals .cell{min-width:0}
  img,table,pre{max-width:100%}
  .tag{white-space:nowrap}
}

/* ---------- dashboard: plain menu cards ---------- */
.menu-grid{margin-top:4px}
.menu-card{
  display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:22px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .12s ease,background .12s ease
}
.menu-card:hover{border-color:var(--hivis);background:#FFFBF8}
.menu-card-title{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em
}
.menu-card-desc{color:var(--grit);font-size:14.5px}
@media(max-width:820px){
  .menu-card{padding:18px 16px}
  .menu-card-title{font-size:17px}
}