/* ==========================================================================
   Bhatta Manager -- theme
   A kiln-yard palette: warm clay & fire tones against a paper ground.
   Signature piece: the SVG "kiln gauge" / donut charts on the dashboard
   (see .gauge-wrap / .gauge-svg below and static/js/pages/dashboard.js).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&display=swap');

:root{
  /* -- surfaces & ink -- */
  --bg:#F6EFE2; --surface:#FFFFFF; --surface-2:#FFF9EE; --border:#E6D9C2;
  --ink:#241B12; --muted:#8A7A66; --muted-2:#A6987F;

  /* -- brand palette (kiln / clay / fire) -- */
  --clay:#BD4526; --clay-dark:#8C3016; --clay-tint:#F6DCCB;
  --flame:#EE8A34; --flame-dark:#C96A1E;
  --gold:#DCA836; --gold-dark:#B48420;
  --moss:#3F7A5C; --moss-dark:#2C5B43;
  --indigo:#4E5D8C; --indigo-dark:#3A4569;

  --kiln-1:#241A14; --kiln-2:#332417; --kiln-3:#40301F;
  --track:#EDE2CD;

  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(36,27,18,.06);
  --shadow-md:0 10px 30px -12px rgba(36,27,18,.28);
}

*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.font-display, h1,h2,h3,h4,h5{ font-family:'Fraunces',Georgia,'Times New Roman',serif; letter-spacing:-.01em; }
a{ color:var(--clay); }

/* ---------- shell layout ---------- */
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:250px; border:0; color:#EFE6D8;
  background:linear-gradient(185deg,var(--kiln-1) 0%,var(--kiln-2) 60%,var(--kiln-3) 100%);
}
.app-sidebar .offcanvas-body{background:transparent;}
.app-sidebar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.08); color:#fff;}

.sidebar-brand{align-items:center; gap:11px; padding:22px 18px 18px;}
.brick-mark{display:inline-grid; grid-template-columns:repeat(2,10px); gap:2px;}
.brick-mark i{height:7px; background:var(--flame); display:block; border-radius:2px; box-shadow:0 0 8px rgba(238,138,52,.55);}
.brick-mark i:nth-child(2), .brick-mark i:nth-child(3){background:var(--gold); box-shadow:0 0 8px rgba(220,168,54,.5);}
.brand-title{font-family:'Fraunces',serif; font-weight:700; font-size:17px; line-height:1.1; color:#fff;}
.brand-sub{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#B8A98E; margin-top:4px;}

.app-nav{padding:14px 10px; gap:2px; display:flex; flex-direction:column;}
.app-nav .nav-link{
  color:#C7B9A2; padding:10px 14px; font-size:13.5px; font-weight:500;
  border-radius:10px; border-left:3px solid transparent; display:flex; align-items:center;
  transition:background .12s ease, color .12s ease;
}
.app-nav .nav-link i{width:20px; text-align:center; margin-right:10px; opacity:.9;}
.app-nav .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.app-nav .nav-link.active{
  background:linear-gradient(90deg,rgba(238,138,52,.22),rgba(238,138,52,.04));
  color:#fff; border-left-color:var(--flame);
}
.sidebar-footer{padding:16px 18px; border-top:1px solid rgba(255,255,255,.08); color:#EFE6D8;}
.sidebar-footer .text-muted{color:#A6987F !important;}

.lang-switch{display:flex; width:100%;}
.lang-switch .btn{
  flex:1; background:rgba(255,255,255,.06); color:#C7B9A2; border:1px solid rgba(255,255,255,.1);
  font-size:11px; font-weight:700; padding:4px 8px;
}
.lang-switch .btn.active{background:var(--flame); border-color:var(--flame); color:#241205;}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{
  display:flex; align-items:center; gap:10px; background:var(--surface);
  color:var(--ink); padding:10px 20px; position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.app-topbar select{
  background:var(--surface-2); color:var(--ink); border:1px solid var(--border);
  border-radius:999px; padding:5px 14px; font-weight:600; font-size:12.5px;
}
.app-topbar .btn-link{color:var(--ink);}
.app-topbar .dropdown-toggle{border-radius:999px; font-weight:600; border-color:var(--border); color:var(--ink);}
.app-content{padding:22px; max-width:1320px; width:100%; margin:0 auto;}

@media(min-width:992px){
  .app-sidebar{position:sticky; top:0; height:100vh;}
}

/* ---------- buttons & forms ---------- */
.btn{border-radius:9px; font-weight:600; font-size:13.5px;}
.btn-dark{background:var(--kiln-1); border-color:var(--kiln-1);}
.btn-dark:hover{background:#171009; border-color:#171009;}
.btn[style*="var(--ochre)"], .btn[style*="var(--clay)"]{background:var(--flame) !important; color:#241205 !important; border-color:var(--flame) !important;}
.btn-outline-secondary{color:var(--muted); border-color:var(--border);}
.btn-outline-secondary:hover{background:var(--surface-2); color:var(--ink); border-color:var(--muted-2);}
.btn-outline-danger{color:var(--clay-dark); border-color:var(--clay-tint);}
.btn-outline-danger:hover{background:var(--clay); border-color:var(--clay);}

.form-control, .form-select{
  border-radius:9px; border-color:var(--border); background:var(--surface);
  font-size:13.5px;
}
.form-control:focus, .form-select:focus{
  border-color:var(--flame); box-shadow:0 0 0 3px rgba(238,138,52,.15);
}
.form-label{font-weight:700; color:var(--muted); font-size:10.5px !important;}

.modal-content{border-radius:16px; border:1px solid var(--border);}
.modal-header, .modal-footer{border-color:var(--border);}
.modal-title{font-family:'Fraunces',serif; font-weight:700;}

.table{--bs-table-color:var(--ink); font-size:13.5px;}
.table thead th{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border-bottom:2px solid var(--border); font-weight:700; padding-bottom:10px;
}
.table td{border-color:var(--border); vertical-align:middle;}
.table tbody tr:hover{background:var(--surface-2);}

/* ---------- reusable widgets ---------- */
.kpi-card{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  height:100%; position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.kpi-icon{
  flex:none; width:38px; height:38px; border-radius:11px; display:flex;
  align-items:center; justify-content:center; font-size:15px; color:#fff;
  background:linear-gradient(150deg,var(--flame),var(--clay-dark));
  box-shadow:0 4px 10px -4px rgba(189,69,38,.55);
}
.kpi-card.e .kpi-icon{background:linear-gradient(150deg,var(--clay),var(--clay-dark)); box-shadow:0 4px 10px -4px rgba(140,48,22,.55);}
.kpi-card.m .kpi-icon{background:linear-gradient(150deg,#5C8F73,var(--moss-dark)); box-shadow:0 4px 10px -4px rgba(44,91,67,.5);}
.kpi-card.s .kpi-icon{background:linear-gradient(150deg,#6C7CAE,var(--indigo-dark)); box-shadow:0 4px 10px -4px rgba(58,69,105,.5);}
.kpi-card .eyebrow{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.kpi-card .value{font-family:'Fraunces',serif; font-size:23px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; line-height:1.15;}
.kpi-card .sub{font-size:11.5px; color:var(--muted); margin-top:3px;}
.kpi-card.kpi-gauge{align-items:center;}

.section-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:var(--shadow-sm);}
.section-title{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.section-title i{color:var(--flame);}

/* -- gauges / donuts (SVG, drawn in dashboard.js) -- */
.gauge-wrap{position:relative; width:118px; height:118px; flex:none; margin:0 auto;}
.gauge-svg{width:100%; height:100%; display:block;}
.gauge-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.gauge-center .gauge-value{font-family:'Fraunces',serif; font-weight:700; font-size:19px; line-height:1;}
.gauge-center .gauge-label{font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:3px;}

.stock-donut-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.stock-legend{display:flex; flex-direction:column; gap:8px; flex:1; min-width:180px;}
.stock-legend .leg-row{display:flex; align-items:center; gap:9px; font-size:12.5px;}
.stock-legend .leg-swatch{width:10px; height:10px; border-radius:3px; flex:none;}
.stock-legend .leg-name{color:var(--muted); font-weight:600; min-width:38px;}
.stock-legend .leg-val{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums;}
.stock-empty{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; padding:6px 2px;}
.stock-empty i{font-size:22px; color:var(--muted-2);}

/* -- brick pictogram strip -- */
.wall{display:flex; flex-wrap:wrap; gap:2px; padding:10px; background:var(--kiln-1); border-radius:var(--radius-sm);}
.wall i{width:16px; height:8px; background:var(--flame); display:block; border-radius:1px; opacity:.92;}
.wall i.g2{background:var(--gold);} .wall i.g3{background:var(--moss);} .wall i.g4{background:var(--indigo);} .wall i.g5{background:#8A7A66;}

/* -- horizontal bar rows (money / expenses) -- */
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px;}
.bar-row .bar-label{width:112px; flex:none; color:var(--muted); font-weight:600;}
.bar-row .bar-track{flex:1; height:11px; background:var(--track); border-radius:999px; overflow:hidden;}
.bar-row .bar-fill{height:100%; border-radius:999px;}
.bar-row .bar-value{min-width:82px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums;}

.split-bar{display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--track);}
.split-bar span{height:100%;}
.split-legend{display:flex; gap:18px; margin-top:10px; font-size:12px; flex-wrap:wrap;}
.split-legend .leg{display:flex; align-items:center; gap:7px; color:var(--muted); font-weight:600;}
.split-legend .leg i{width:9px; height:9px; border-radius:3px; display:inline-block;}
.due-stat{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.due-stat .kpi-icon{width:44px; height:44px; border-radius:12px; font-size:17px;}
.due-stat .due-value{font-family:'Fraunces',serif; font-size:24px; font-weight:700; line-height:1;}
.due-stat .due-label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-top:2px;}

.prod-compare{margin-top:14px;}
.prod-compare .prod-track{position:relative; height:16px; background:var(--track); border-radius:999px; overflow:hidden;}
.prod-compare .prod-moulded{position:absolute; inset:0; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); border-radius:999px;}
.prod-compare .prod-fired{position:absolute; inset:0; background:linear-gradient(90deg,var(--flame),var(--clay-dark)); border-radius:999px;}
.prod-compare .prod-caption{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px; font-weight:600;}

.table-actions{white-space:nowrap; text-align:right;}
.table-num{text-align:right; font-variant-numeric:tabular-nums;}
.badge{border-radius:999px; font-weight:700; letter-spacing:.02em; padding:.42em .8em;}
.badge-stage-open{background:#FBEACD; color:#8A5A0C;}
.badge-stage-closed{background:#DCEDE3; color:#245239;}

.toast-host{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center;}
.toast-host .app-toast{background:var(--kiln-1); color:#fff; padding:10px 18px; border-radius:20px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.28);}
.toast-host .app-toast.error{background:var(--clay);}

/* ---------- login / portal ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(circle at 30% 20%,#3a2a1a 0%,var(--kiln-1) 55%,#120b06 100%);
}
.auth-card{background:var(--surface); border-radius:18px; width:100%; max-width:400px; padding:30px 28px; box-shadow:0 24px 70px rgba(0,0,0,.45); border:1px solid var(--border);}
.auth-brand{text-align:center; margin-bottom:20px;}
.auth-brand .brick-mark{margin:0 auto 10px; justify-content:center;}
.auth-brand h5{font-family:'Fraunces',serif; font-weight:700;}
.login-type-toggle .btn{flex:1;}
.login-type-toggle .btn.active{background:var(--kiln-1) !important; border-color:var(--kiln-1) !important; color:#fff !important;}