/* ============================================================
   Surprise Tex - admin skin (Bootstrap 5 override)
   Palette: petrol sidebar, dye-teal actions, gold thread accent
   ============================================================ */
:root{
  --st-ink:#16202a;
  --st-petrol:#102730;
  --st-petrol-2:#17394a;
  --st-teal:#0f6e63;
  --st-teal-dark:#0b544b;
  --st-gold:#c9922c;
  --st-surface:#f1f4f3;
  --st-line:#dfe5e3;
  --st-muted:#6c7a80;
  --st-radius:.5rem;
}
*{scrollbar-width:thin}
body{
  background:var(--st-surface);
  color:var(--st-ink);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Bengali",sans-serif;
  font-size:.925rem;
}
.num,td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ---------- auth ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,var(--st-petrol) 0%,var(--st-teal-dark) 100%);padding:1rem}
.auth-card{background:#fff;border-radius:var(--st-radius);padding:2rem;width:100%;max-width:420px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.auth-logo{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto .8rem}
.auth-brand{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .25rem;text-align:center}
.auth-brand small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--st-gold)}

/* ---------- layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:246px;flex:0 0 246px;background:var(--st-petrol);color:#c8d6da;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-brand{display:flex;gap:.6rem;align-items:center;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand .mark{background:var(--st-gold);color:#231a05;font-weight:800;border-radius:.35rem;
  width:34px;height:34px;display:grid;place-items:center;font-size:.9rem;letter-spacing:-.03em}
.sidebar-brand .mark-logo{
  background:#fff;padding:2px;border-radius:50%;overflow:hidden;
  width:38px;height:38px;display:grid;place-items:center;
}
.sidebar-brand .mark-logo img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar-brand .txt{color:#fff;font-weight:600;line-height:1.1}
.sidebar-brand small{display:block;font-size:.62rem;letter-spacing:.2em;color:var(--st-gold);text-transform:uppercase}
.sidebar-nav{overflow-y:auto;padding:.5rem 0 1rem;flex:1}
.sidebar-nav .nav-head{font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;
  color:#7d949c;padding:.9rem 1rem .3rem}
.sidebar-nav .nav-link{color:#c8d6da;padding:.45rem 1rem;border-left:3px solid transparent;
  display:flex;gap:.6rem;align-items:center;font-size:.86rem;border-radius:0}
.sidebar-nav .nav-link i{width:1rem;text-align:center;opacity:.85}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-nav .nav-link.active{background:var(--st-petrol-2);color:#fff;border-left-color:var(--st-gold)}
.sidebar-foot{padding:.6rem 1rem;font-size:.7rem;color:#69818a;border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--st-line);padding:.6rem 1rem;
  display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:20}
.page-title{font-size:1.02rem;font-weight:600;margin:0;flex:1}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.branch-chip{background:var(--st-teal);color:#fff;border-radius:2rem;padding:.1rem .6rem;
  font-size:.7rem;font-weight:700;letter-spacing:.08em}
.content{padding:1rem;flex:1}
.foot{padding:.6rem 1rem;border-top:1px solid var(--st-line);color:var(--st-muted);
  font-size:.75rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#fff}

/* ---------- cards / kpi ---------- */
.card{border:1px solid var(--st-line);border-radius:var(--st-radius);box-shadow:none}
.card-header{background:#fff;border-bottom:1px solid var(--st-line);font-weight:600;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.kpi{display:block;background:#fff;border:1px solid var(--st-line);border-radius:var(--st-radius);
  padding:.85rem;height:100%;text-decoration:none;color:inherit;position:relative;transition:.15s}
a.kpi:hover{border-color:var(--st-teal);transform:translateY(-1px)}
.kpi .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--st-muted)}
.kpi .val{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.kpi .sub{font-size:.72rem;color:var(--st-muted)}
.kpi.k-teal{border-top:3px solid var(--st-teal)}
.kpi.k-gold{border-top:3px solid var(--st-gold)}
.kpi.k-red{border-top:3px solid #b4443a}
.kpi.k-blue{border-top:3px solid #2b6cb0}

/* ---------- tables ---------- */
.table{margin:0}
.table>thead>tr>th{background:#eef2f1;border-bottom:1px solid var(--st-line);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:#48585f;white-space:nowrap}
.table>tbody>tr>td{vertical-align:middle}
.table-sm>:not(caption)>*>*{padding:.4rem .5rem}
.thumb{width:38px;height:38px;object-fit:cover;border-radius:.3rem;border:1px solid var(--st-line);background:#fff}
.thumb.broken{border-color:#d9a441;box-shadow:0 0 0 2px rgba(217,164,65,.25)}
.empty{padding:2rem 1rem;text-align:center;color:var(--st-muted)}
.empty i{font-size:1.6rem;display:block;margin-bottom:.35rem;opacity:.5}

/* ---------- controls ---------- */
.btn-brand{background:var(--st-teal);border-color:var(--st-teal);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--st-teal-dark);border-color:var(--st-teal-dark);color:#fff}
.btn-outline-brand{border-color:var(--st-teal);color:var(--st-teal)}
.btn-outline-brand:hover{background:var(--st-teal);color:#fff}
.form-label{font-size:.78rem;font-weight:600;color:#46545b;margin-bottom:.2rem}
.form-control,.form-select{border-color:#ccd6d3}
.form-control:focus,.form-select:focus{border-color:var(--st-teal);box-shadow:0 0 0 .18rem rgba(15,110,99,.15)}
.filterbar{background:#fff;border:1px solid var(--st-line);border-radius:var(--st-radius);
  padding:.7rem;margin-bottom:.9rem}
.req:after{content:" *";color:#b4443a}

/* ---------- invoice / print ---------- */
.doc{background:#fff;padding:1.4rem;border:1px solid var(--st-line);border-radius:var(--st-radius)}
.doc-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--st-petrol);
  padding-bottom:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.doc-head h2{font-size:1.25rem;font-weight:700;margin:0}
.doc-brand{display:flex;gap:.9rem;align-items:center}
.doc-logo{width:72px;height:72px;object-fit:contain;flex:0 0 72px}
@media print{ .doc-logo{width:64px;height:64px;flex:0 0 64px} }
.doc-meta{font-size:.8rem;color:var(--st-muted)}
.report-title{text-align:center;margin-bottom:1rem}
.report-title h2{font-size:1.15rem;font-weight:700;margin:0}
.report-title p{margin:0;font-size:.8rem;color:var(--st-muted)}
@media print{
  .sidebar,.topbar,.foot,.no-print,.filterbar{display:none!important}
  .content{padding:0}
  body{background:#fff;font-size:12px}
  .card,.doc{border:0}
  .table>thead>tr>th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .sidebar{position:fixed;z-index:1040;left:-260px;transition:left .2s}
  .sidebar.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .content{padding:.75rem}
}


/* ---------- select2 sized to match bootstrap controls ---------- */
.select2-container--bootstrap-5 .select2-selection{min-height:31px}
.select2-container--bootstrap-5 .select2-selection--single{
  padding-top:.15rem;padding-bottom:.15rem;font-size:.875rem}
.select2-container--bootstrap-5 .select2-dropdown{font-size:.875rem;z-index:1060}
.select2-container{max-width:100%}
.line-row .select2-container--bootstrap-5 .select2-selection{font-size:.875rem}
.select2-results__option{padding:.3rem .6rem}