:root{
  --ink:#171310;
  --ink-soft:#2b241d;
  --ivory:#FAF6EF;
  --paper:#FFFFFF;
  --gold:#B8873A;
  --gold-deep:#8C6423;
  --gold-bright:#D9A94A;
  --maroon:#6B1E23;
  --stone:#8A8378;
  --stone-line:#E4DDCE;
  --success:#3F6E4E;
  --danger:#A23B2E;
  --text:#211C16;
  --text-soft:#5C5347;
  --bg:var(--ivory);
  --surface:var(--paper);
  --border:var(--stone-line);
  --shadow: 0 1px 0 rgba(23,19,16,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15120E;
    --surface:#1E1912;
    --text:#F1EADC;
    --text-soft:#C9BEA9;
    --border:#382F22;
    --ink:#0E0C09;
  }
}
:root[data-theme="dark"]{
  --bg:#15120E;
  --surface:#1E1912;
  --text:#F1EADC;
  --text-soft:#C9BEA9;
  --border:#382F22;
  --ink:#0E0C09;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Times New Roman',Times,serif;
  min-height:100vh;
  font-feature-settings:"tnum" 1;
}
h1,h2,h3,.serif{font-family:'Times New Roman',Times,serif;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--gold);color:#fff;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- LOGIN ---------- */
#loginScreen{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(184,135,58,0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(107,30,35,0.10), transparent 45%),
    var(--ink);
  padding:24px;
}
.login-card{
  width:100%;max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:38px 34px 30px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.login-logo{width:78px;height:78px;object-fit:contain;margin:0 auto 14px;display:block;}
.login-card h1{font-size:26px;font-weight:600;letter-spacing:0.3px;margin:0 0 2px;color:var(--text);}
.login-sub{font-size:12.5px;letter-spacing:1.5px;color:var(--gold);margin:0 0 26px;text-transform:uppercase;}
.field{text-align:left;margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--text-soft);margin-bottom:5px;}
.field input,.field select{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:3px;background:var(--bg);color:var(--text);font-size:14.5px;
}
.field input:focus,.field select:focus,textarea:focus{outline:none;border-color:var(--gold);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:3px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:0.2px;transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.07);}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:#241900;border-color:var(--gold-deep);}
.btn-dark{background:var(--ink);color:#F1EADC;border-color:var(--ink);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.login-note{margin-top:18px;font-size:11.5px;color:var(--stone);line-height:1.5;}
.demo-users{margin-top:16px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.demo-users button{font-size:11px;padding:5px 9px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--text-soft);}

/* ---------- APP SHELL ---------- */
#mainApp{display:none;min-height:100vh;}
.shell{display:flex;min-height:100vh;}
.sidebar{
  width:216px;flex-shrink:0;background:var(--ink);color:#E9E1D0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.08);}
.side-brand img{width:36px;height:36px;object-fit:contain;}
.side-brand .name{font-family:'Times New Roman',Times,serif;font-size:17px;font-weight:600;color:#F1EADC;line-height:1.15;}
.side-brand .tag{font-size:9.5px;letter-spacing:1.2px;color:var(--gold);text-transform:uppercase;}
.nav{padding:10px 10px;flex:1;}
.nav button{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:none;border:none;color:#CBC0A9;padding:9px 10px;border-radius:4px;
  font-size:13.5px;margin-bottom:2px;
}
.nav button .ic{width:16px;text-align:center;opacity:0.9;font-size:13px;}
.nav button:hover{background:rgba(255,255,255,0.06);color:#fff;}
.nav button.active{background:linear-gradient(90deg,rgba(184,135,58,0.28),rgba(184,135,58,0.05));color:#F3DFA9;border-left:2px solid var(--gold);padding-left:8px;}
.nav .divider{height:1px;background:rgba(255,255,255,0.08);margin:10px 4px;}
.side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,0.08);font-size:11.5px;color:#9C927B;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:5;flex-wrap:wrap;
}
.topbar .rates{display:flex;gap:14px;flex-wrap:wrap;}
.rate-chip{font-size:11.5px;color:var(--text-soft);border-right:1px solid var(--border);padding-right:14px;}
.rate-chip:last-child{border-right:none;}
.rate-chip b{color:var(--gold-deep);font-size:12.5px;display:block;}
.topbar .who{display:flex;align-items:center;gap:12px;}
.who .role-badge{font-size:10px;padding:2px 8px;border-radius:20px;background:var(--gold);color:#241900;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;}
.content{padding:22px;flex:1;}

.view{display:none;}
.view.active{display:block;}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.page-head h2{margin:0;font-size:24px;font-weight:600;}
.page-head .sub{font-size:12.5px;color:var(--text-soft);margin-top:2px;}

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

.card{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:16px 18px;}
.stat-card .label{font-size:11.5px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.6px;}
.stat-card .value{font-family:'Times New Roman',Times,serif;font-size:28px;font-weight:600;margin-top:4px;color:var(--text);}
.stat-card .value small{font-size:14px;font-weight:500;color:var(--text-soft);}
.stat-card .foot{font-size:11px;color:var(--stone);margin-top:6px;}
.stat-accent{border-left:3px solid var(--gold);}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;letter-spacing:0.4px;color:var(--text-soft);text-transform:uppercase;border-bottom:1px solid var(--border);padding:8px 10px;font-weight:600;}
td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text);}
tr:last-child td{border-bottom:none;}
table.right td.num,table.right th.num{text-align:right;}
.table-wrap{overflow-x:auto;}
.empty-row td{text-align:center;color:var(--stone);padding:26px;font-size:13px;}

.section-title{font-family:'Times New Roman',Times,serif;font-size:19px;font-weight:600;margin:0 0 10px;color:var(--text);}
.hr{height:1px;background:var(--border);margin:20px 0;}

.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:12px;}
.form-row label{display:block;font-size:11.5px;color:var(--text-soft);margin-bottom:4px;}
.form-row input,.form-row select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:3px;background:var(--bg);color:var(--text);font-size:13.5px;}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--gold);}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:0.3px;text-transform:uppercase;}
.pill-paid{background:rgba(63,110,78,0.15);color:var(--success);}
.pill-partial{background:rgba(184,135,58,0.18);color:var(--gold-deep);}
.pill-due{background:rgba(162,59,46,0.15);color:var(--danger);}
.pill-stock{background:rgba(63,110,78,0.15);color:var(--success);}
.pill-sold{background:rgba(140,132,120,0.18);color:var(--stone);}

.item-row{border:1px solid var(--border);border-radius:5px;padding:14px;margin-bottom:12px;background:var(--bg);position:relative;}
.item-row .rm{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--danger);font-size:16px;}
.calc-line{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border);}
.calc-line:last-child{border-bottom:none;}
.calc-line .l{color:var(--text-soft);}
.calc-line .v{font-weight:600;}
.calc-total{display:flex;justify-content:space-between;font-size:16px;padding-top:10px;margin-top:6px;border-top:1px solid var(--gold);font-family:'Times New Roman',Times,serif;font-weight:700;}

.tag-search{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.tag-search input,.tag-search select{padding:8px 11px;border:1px solid var(--border);border-radius:3px;background:var(--surface);color:var(--text);font-size:13px;}
.tag-search input{flex:1;min-width:160px;}

.modal-bg{display:none;position:fixed;inset:0;background:rgba(15,12,9,0.55);z-index:50;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.modal-bg.active{display:flex;}
.modal{background:var(--surface);border-radius:6px;max-width:640px;width:100%;padding:22px 24px;border:1px solid var(--border);}
.modal h3{margin:0 0 16px;font-size:20px;}
.modal-close{float:right;background:none;border:none;font-size:18px;color:var(--text-soft);}

.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#F1EADC;padding:12px 18px;border-radius:4px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:100;border-left:3px solid var(--gold);display:none;}

/* Invoice print styling */
#invoiceModal .modal{max-width:960px;width:96vw;}
.inv-paper{background:#fff;color:#171310;padding:26px 30px;font-family:'Times New Roman',Times,serif;font-size:12.5px;border:1px solid #ddd;max-width:100%;box-sizing:border-box;}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #B8873A;padding-bottom:12px;margin-bottom:14px;}
.inv-head .brand{display:flex;gap:12px;align-items:center;}
.inv-head img.logo{width:52px;height:52px;object-fit:contain;}
.inv-head h2{margin:0;font-size:20px;font-family:'Times New Roman',Times,serif;}
.inv-head .meta{font-size:11px;color:#555;margin-top:2px;}
.inv-head .bis{width:56px;height:56px;object-fit:contain;}
.inv-sub{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:12px;gap:20px;flex-wrap:wrap;}
.inv-sub div{flex:1;min-width:200px;}
.inv-sub b{display:block;font-size:10px;letter-spacing:0.5px;color:#8A8378;text-transform:uppercase;margin-bottom:3px;}
.inv-paper table{font-size:10.5px;table-layout:auto;}
.inv-paper th{background:#F4EEDF;font-size:8.5px;}
.inv-paper table th,.inv-paper table td{padding:4px 5px;word-break:break-word;}
.inv-paper .table-wrap{overflow-x:visible;}
.inv-total-box{margin-top:10px;width:280px;margin-left:auto;}
.inv-total-box .calc-line{font-size:12px;}
.inv-words{font-size:11px;margin-top:10px;font-style:italic;color:#444;}
.inv-foot{display:flex;justify-content:space-between;margin-top:40px;font-size:11px;}
.inv-slogan{font-size:10.5px;font-style:italic;color:#B8873A;margin:1px 0 3px;}
.inv-thankyou{text-align:center;margin-top:18px;font-size:12px;font-weight:600;color:#171310;border-top:1px dashed #ccc;padding-top:10px;}
.inv-terms{margin-top:18px;padding-top:10px;border-top:1px dashed #ccc;font-size:10px;color:#555;}
.inv-terms b{display:block;font-size:10.5px;letter-spacing:0.4px;color:#8A8378;text-transform:uppercase;margin-bottom:4px;}
.inv-terms ol{margin:0;padding-left:16px;line-height:1.6;}
.sign-box{text-align:center;width:180px;border-top:1px solid #999;padding-top:6px;}
@page{size:A4;margin:8mm;}
@media print{
  body *{visibility:hidden;}
  #invoiceModal, #invoiceModal *{visibility:visible;}
  #invoiceModal{position:absolute;top:0;left:0;width:100%;background:#fff !important;padding:0;overflow:visible;}
  #invoiceModal .modal{max-width:none;width:100%;padding:0;border:none;box-shadow:none;}
  .modal-close,#invoiceActions{display:none !important;}
  .inv-paper{border:none;transform-origin:top left;}
  .inv-head,.inv-total-box,.inv-foot,.sign-box,.inv-thankyou,.inv-terms,tr{page-break-inside:avoid;}
}

.hidden{display:none !important;}
.flex{display:flex;}
.gap8{gap:8px;}
.mt8{margin-top:8px;}
.mt16{margin-top:16px;}
.small{font-size:11.5px;color:var(--text-soft);}
.right{text-align:right;}
.w100{width:100%;}