/* =========================================================
   CHATGPT-STYLE DARK UI — EXPORT ERP
   Clean • Calm • Professional
========================================================= */

:root {
  --bg-main: #0f0f10;
  --bg-sidebar: #171717;
  --bg-card: #1e1e1f;
  --bg-input: #111111;

  --text-main: #e6e6e6;
  --text-muted: #a1a1aa;

  --accent: #10a37f;      /* ChatGPT green */
  --border: #2a2a2d;

  --danger: #ef4444;
  --warning: #f59e0b;

  --radius: 10px;
}

/* ---------- BASE ---------- */
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-main);
}

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

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: 250px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 16px;
}

.sidebar .brand {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--accent);
}

.sidebar .nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 6px;
}

.sidebar .nav a:hover {
  background: #202022;
  color: var(--text-main);
}

.sidebar .nav a.active {
  background: rgba(16,163,127,.18);
  color: var(--accent);
}

/* ---------- MAIN ---------- */
.main {
  flex: 1;
  padding: 24px;
}

/* ---------- HEADER ---------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.h1 {
  font-size: 22px;
  font-weight: 700;
}

.badge,
.chip {
  background: rgba(16,163,127,.18);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- CARDS ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

/* ---------- TEXT ---------- */
.label-sm {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.muted { color: var(--text-muted); }
.right { text-align: right; }
.center { text-align: center; }

/* ---------- INPUTS ---------- */
.input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-main);
  outline: none;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

.input::placeholder {
  color: #6b7280;
}

/* ---------- BUTTONS ---------- */
.btn {
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.btn.primary {
  background: var(--accent);
  color: #022c22;
}

.btn.secondary {
  background: #202022;
  color: var(--text-main);
  border: 1px solid var(--border);
}

.btn.danger {
  background: var(--danger);
  color: #fff;
}

.btn:hover {
  opacity: .9;
}

/* ---------- TABLE ---------- */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #19191b;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

th {
  color: var(--text-muted);
  font-weight: 600;
}

tbody tr:hover {
  background: #232326;
}

/* ---------- PREVIEW BOX ---------- */
.preview-box {
  background: #19191b;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  margin-top: 6px;
}

/* ---------- MODAL ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  width: min(1000px, 95vw);
  max-height: 85vh;
  overflow: auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sidebar {
    width: 220px;
  }
}

@media (max-width: 700px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* =========================================================
   ERP shared polish layer
   Applies to pages that missed local finishing styles.
========================================================= */
:root{
  --erp-page-bg:#f5f7fb;
  --erp-surface:#ffffff;
  --erp-surface-soft:#f8fafc;
  --erp-text:#0f172a;
  --erp-muted:#64748b;
  --erp-line:#e2e8f0;
  --erp-primary:#075985;
  --erp-secondary:#0e7490;
  --erp-accent:#0891b2;
  --erp-brand:var(--erp-primary);
  --erp-brand-soft:#ecfeff;
  --erp-success:#047857;
  --erp-success-soft:#ecfdf5;
  --erp-warning:#a16207;
  --erp-warning-soft:#fffbeb;
  --erp-danger:#b91c1c;
  --erp-danger-soft:#fef2f2;
  --erp-neutral:#475569;
  --erp-sidebar:#0b1220;
  --erp-sidebar-open:244px;
  --erp-sidebar-mini:70px;
  --erp-radius-sm:8px;
  --erp-radius-md:12px;
  --erp-control-height:38px;
  --erp-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --erp-shadow-md:0 8px 24px rgba(15,23,42,.07);
  --erp-transition:160ms ease;
}

/* Login uses the same local type system without loading the authenticated shell. */
body.login-page,
body.login-page :where(button,input,select,textarea){
  font-family:Inter,"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif !important;
}

body.login-page .card{
  width:min(420px,calc(100vw - 32px)) !important;
  padding:32px 30px 28px !important;
  border-radius:12px !important;
  border-color:rgba(255,255,255,.74) !important;
  box-shadow:0 18px 46px rgba(2,6,23,.26) !important;
  backdrop-filter:none !important;
}

body.login-page .input{
  min-height:40px !important;
  height:40px !important;
  border-radius:8px !important;
  font-size:14px !important;
  font-weight:400 !important;
}

body.login-page .label{font-size:13px !important;font-weight:600 !important}
body.login-page .btn{
  min-height:40px !important;
  height:40px !important;
  border-radius:8px !important;
  background:#0f172a !important;
  box-shadow:0 6px 16px rgba(15,23,42,.18) !important;
  font-size:13px !important;
  font-weight:600 !important;
}
body.login-page .loginOverlay{
  background:rgba(2,12,28,.72) !important;
  backdrop-filter:none !important;
}

html{min-width:320px}
body{
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body:not(.login-page){
  background:var(--erp-page-bg);
  color:var(--erp-text);
}

.layout{
  min-height:100vh;
  min-width:0;
}

body.sb-mini .layout,
body:not(.sidebar-open) .layout{
  grid-template-columns:var(--erp-sidebar-mini) minmax(0,1fr);
}

body.sidebar-open .layout{
  grid-template-columns:var(--erp-sidebar-open) minmax(0,1fr);
}

.sidebar,
.sidebarX{
  width:var(--erp-sidebar-mini);
  min-width:var(--erp-sidebar-mini);
  flex:0 0 var(--erp-sidebar-mini);
  background:linear-gradient(180deg,#0b1220,#111827);
  color:#e5e7eb;
  border-right:1px solid rgba(255,255,255,.08);
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  z-index:20;
  transition:width var(--erp-transition), min-width var(--erp-transition), flex-basis var(--erp-transition);
}

body.sidebar-open .sidebar,
body.sidebar-open .sidebarX{
  width:var(--erp-sidebar-open);
  min-width:var(--erp-sidebar-open);
  flex-basis:var(--erp-sidebar-open);
  overflow-y:auto;
}

.main{
  min-width:0;
  padding:18px;
}

.topbar,
.pageHead,
.sectionHead,
.header{
  gap:12px;
}

.card{
  background:var(--erp-surface);
  border:1px solid var(--erp-line);
  border-radius:var(--erp-radius-md);
  box-shadow:var(--erp-shadow-md);
}

.card > .card,
.sectionBody .card{
  box-shadow:none;
}

.btn,
button.btn,
a.btn{
  min-height:var(--erp-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--erp-radius-sm);
  font-weight:750;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--erp-transition), border-color var(--erp-transition), color var(--erp-transition), box-shadow var(--erp-transition);
}

.btn.primary,
.btn.btn-primary,
button.btn-primary{
  background:var(--erp-primary);
  border-color:var(--erp-primary);
  color:#fff;
}

.btn.secondary,
button.secondary{
  background:#fff;
  color:var(--erp-text);
  border:1px solid var(--erp-line);
}

.btn.ghost,
button.ghost{
  background:var(--erp-surface-soft);
  color:var(--erp-text);
  border:1px solid var(--erp-line);
}

.btn.danger,
.btn.btn-danger,
button.btn-danger{
  background:var(--erp-danger);
  border-color:var(--erp-danger);
  color:#fff;
}

.btn:disabled,
button:disabled{
  cursor:not-allowed;
  opacity:.58;
}

input,
select,
textarea,
.input{
  min-height:var(--erp-control-height);
  border-radius:var(--erp-radius-sm);
  border:1px solid var(--erp-line);
  background:#fff;
  color:var(--erp-text);
  letter-spacing:0;
  transition:border-color var(--erp-transition), box-shadow var(--erp-transition);
}

input:focus,
select:focus,
textarea:focus,
.input:focus{
  border-color:rgba(37,99,235,.75);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(8,145,178,.28);
  outline-offset:2px;
}

input[readonly],
textarea[readonly],
.input[readonly]{
  background:var(--erp-surface-soft);
  color:#334155;
}

.table-wrap,
.tableWrap{
  border:1px solid var(--erp-line);
  border-radius:10px;
  background:#fff;
  overflow:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

th{
  background:#f1f5f9;
  color:#475569;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}

td{
  color:#0f172a;
}

th,
td{
  border-bottom:1px solid #edf2f7;
}

tbody tr:hover{
  background:#f8fafc;
}

.badge,
.chip,
.pill{
  border-radius:999px;
  letter-spacing:0;
}

.badge.success,
.chip.success,
.pill.success,
.status-success{
  background:var(--erp-success-soft);
  border-color:#a7f3d0;
  color:var(--erp-success);
}

.badge.warning,
.chip.warning,
.pill.warning,
.status-warning{
  background:var(--erp-warning-soft);
  border-color:#fde68a;
  color:var(--erp-warning);
}

.badge.danger,
.chip.danger,
.pill.danger,
.status-danger{
  background:var(--erp-danger-soft);
  border-color:#fecaca;
  color:var(--erp-danger);
}

.erp-state{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  border:1px dashed var(--erp-line);
  border-radius:var(--erp-radius-sm);
  background:var(--erp-surface-soft);
  color:var(--erp-muted);
  font-size:13px;
  text-align:center;
}

.erp-state.error{
  border-color:#fecaca;
  background:var(--erp-danger-soft);
  color:var(--erp-danger);
}

td.num,
th.num,
td[data-type="number"],
th[data-type="number"]{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.muted,
.sub,
.small{
  color:var(--erp-muted);
}

@media (max-width: 900px){
  body.sb-mini .layout,
  body.sidebar-open .layout,
  body:not(.sidebar-open) .layout{
    grid-template-columns:1fr;
  }

  .sidebar,
  .sidebarX{
    position:relative;
    width:100%;
    min-width:0;
    height:auto;
    min-height:72px;
    flex-basis:auto;
  }

  .main{
    padding:14px;
  }
}

:root{
  --bg:#0b1220;
  --panel:#111827;
  --line:rgba(255,255,255,.10);
  --text:#e8eef9;
  --muted:#a3b4d6;
  --ok:#22c55e;
  --warn:#facc15;
  --info:#38bdf8;
  --bad:#ef4444;
  --shadow: 0 14px 36px rgba(0,0,0,.45);
  --r:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(34,197,94,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.muted{color:var(--muted)}

/* layout */
.layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height:100vh;
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
}

/* sidebar (compact) */
.sidebar{
  position:sticky; top:0; height:100vh;
  padding:12px 10px; overflow:auto;
  background: rgba(2,6,23,.86);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.sb-head{padding:6px 8px 10px}
.sb-title{font-weight:1100;letter-spacing:.8px;font-size:18px;color:#22c55e}
.sb-nav{display:grid;gap:8px}

.sb-item, .sb-parent{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
.sb-item:hover, .sb-parent:hover{filter:brightness(1.06)}
.sb-item.active{
  border-color: rgba(56,189,248,.30);
  background: linear-gradient(180deg, rgba(56,189,248,.15), rgba(255,255,255,.02));
}
.sb-ic{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-size:15px;flex:0 0 28px;
}
.sb-txt{font-size:14px;font-weight:1050;flex:1;text-align:left}
.sb-arrow{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:12px;
  background: rgba(2,6,23,.50);
  border:1px solid rgba(255,255,255,.10);
  font-weight:1100;font-size:12px;
  transition: transform .18s ease;
}
.sb-sub{display:none;padding-left:10px;gap:8px}
.sb-sub.open{display:grid}
.sb-child{padding:9px 10px}
.sb-parent[aria-expanded="true"] .sb-arrow{transform:rotate(180deg)}

/* main */
.main{min-width:0}
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background: rgba(2,6,23,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.tb-title{font-weight:1150;font-size:18px}
.tb-sub{font-size:12px;color:var(--muted);margin-top:2px}

.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* user menu */
.tb-user{position:relative}
.user-btn{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.avatar{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  font-weight:1150;
  background: rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.20);
}
.user-meta{display:grid;gap:2px;text-align:left}
.user-name{font-weight:1100;font-size:13px}
.user-role{font-size:12px;color:var(--muted)}
.user-caret{opacity:.9}

.user-menu{
  position:absolute;
  right:0;
  top:48px;
  width:180px;
  display:none;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.92);
  box-shadow: var(--shadow);
}
.user-menu.open{display:block}
.um-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.um-item:hover{filter:brightness(1.08)}
.um-item.danger{
  border-color: rgba(239,68,68,.18);
  background: rgba(239,68,68,.10);
}

/* cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h3{margin:0;font-size:15px}

.kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 1100px){
  .kpis{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 560px){
  .kpis{grid-template-columns: 1fr;}
}

.kpi-top{display:flex;justify-content:space-between;align-items:center}
.kpi-label{font-size:12px;color:var(--muted);font-weight:1000}
.kpi-val{font-size:26px;font-weight:1200;margin-top:10px;margin-bottom:6px}

.chip{
  font-size:11px;font-weight:1100;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.chip.ok{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.12)}
.chip.warn{border-color:rgba(250,204,21,.28);background:rgba(250,204,21,.12)}
.chip.info{border-color:rgba(56,189,248,.28);background:rgba(56,189,248,.12)}
/* ========= SALES TARGET (PERFECT LAYOUT) ========= */
.sales-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 980px){
  .sales-grid{grid-template-columns:1fr}
}

.donut-wrap{
  display:grid;
  place-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.06);
}

.donut{
  width:170px;height:170px;border-radius:50%;
  background: conic-gradient(var(--info) calc(var(--p)*1%), rgba(255,255,255,.10) 0);
  display:grid;place-items:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.donut-inner{
  width:122px;height:122px;border-radius:50%;
  background: rgba(2,6,23,.75);
  border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;text-align:center;
  gap:4px;
}
.donut-pct{font-size:28px;font-weight:1250}
.donut-sub{text-align:center}
.donut-big{font-size:18px;font-weight:1150;margin-top:4px}

.sales-stats2{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  align-content:start;
}
@media (max-width: 980px){
  .sales-stats2{grid-template-columns:1fr}
}

.mini{
  padding:12px;
  border-radius:14px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.06);
}
.mini-soft{
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(0,0,0,.14));
  border-color: rgba(56,189,248,.18);
}

.mini-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mini-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.25);
}
.mini-val{font-size:18px;font-weight:1150}

/* modern form row under minis */
.sales-form{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background: rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.08);
}
@media (max-width: 980px){
  .sales-form{grid-template-columns:1fr}
}

.field2 label{
  display:block;
  font-size:12px;
  margin-bottom:6px;
}
.field2 input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline:none;
}
.field2 input:focus{
  border-color: rgba(56,189,248,.30);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
}

.btn-primary{
  border-color: rgba(56,189,248,.28);
  background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(56,189,248,.10));
}
.btn-primary:hover{filter:brightness(1.08)}

/* =========================
   EXPORT ERP - STYLE.CSS
   Real ERP Layout (Clean + Professional)
   ========================= */

:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --sb:#0b1220;
  --sb2:#0f172a;
  --sbText:#e5e7eb;

  --primary:#2563eb;
  --good:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;

  --radius:14px;
  --shadow:0 10px 25px rgba(15,23,42,.08);
}

/* base */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
.muted{ color:var(--muted); }

/* layout */
.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 270px 1fr;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position:sticky; top:0; z-index:5; }
}

/* sidebar */
.sidebar{
  background:linear-gradient(180deg,var(--sb),var(--sb2));
  color:var(--sbText);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
}
.sb-head{
  padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-title{
  font-weight:900;
  letter-spacing:.6px;
  color:#fff;
}
.sb-subtitle{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
}
.sb-nav{
  padding:12px 10px 18px;
  overflow:auto;
}
.sb-item{
  width:100%;
  border-radius:12px;
  margin:4px 0;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.06);
  background:transparent;
  color:var(--sbText);
  cursor:pointer;
}
.sb-item:hover{ background:rgba(255,255,255,.06); }
.sb-item.active{
  background:rgba(37,99,235,.18);
  border-color:rgba(37,99,235,.35);
}
.sb-arrow{ margin-left:auto; opacity:.9; }
.sb-sub{
  display:none;
  margin:6px 0 10px;
  padding-left:8px;
  border-left:1px dashed rgba(148,163,184,.35);
}
.sb-sub.open{ display:block; }
.sb-child{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.05);
}

.sb-foot{
  margin-top:auto;
  padding:12px 12px 16px;
}
.sb-footbox{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
}

/* main */
.main{ padding:0 0 18px; }

/* topbar */
.topbar{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:16px 16px 0;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.tb-title{
  font-weight:900;
  font-size:16px;
}
.tb-sub{ font-size:12px; color:var(--muted); margin-top:3px; }

/* user */
.tb-user{ position:relative; }
.user-btn{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 10px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.avatar{
  width:36px; height:36px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(37,99,235,.12);
  color:var(--primary);
  font-weight:900;
}
.user-meta{ line-height:1.2; text-align:left; }
.user-name{ font-weight:900; font-size:13px; }
.user-role{ font-size:12px; color:var(--muted); }
.user-caret{ opacity:.75; }

.user-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:170px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  display:none;
  overflow:hidden;
}
.user-menu.open{ display:block; }
.um-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.um-item:hover{ background:#f8fafc; }
.um-item.danger{ color:var(--bad); font-weight:800; }

/* wrap */
.wrap{ padding:16px; }

/* cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.card-head h3{ margin:0; font-size:15px; letter-spacing:.2px; }

/* KPI */
.kpis{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 1100px){
  .kpis{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .kpis{ grid-template-columns: 1fr; }
}
.kpi{ padding:14px 16px; }
.kpi-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.kpi-label{ color:var(--muted); font-weight:700; }
.kpi-val{ font-size:26px; font-weight:900; margin-top:6px; }

/* chip */
.chip{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line);
  background:#f8fafc;
}
.chip.ok{ color:var(--good); border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.08); }
.chip.warn{ color:var(--warn); border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.10); }
.chip.info{ color:var(--primary); border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.10); }

/* grid2 */
.grid2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  margin-top:14px;
}
@media (max-width: 1100px){
  .grid2{ grid-template-columns:1fr; }
}

/* sales section */
.sales-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  padding:16px;
}
@media (max-width: 1100px){
  .sales-grid{ grid-template-columns:1fr; }
}
.donut-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.donut{
  width:190px;
  height:190px;
  border-radius:50%;
  background:
    conic-gradient(var(--primary) calc(var(--p) * 1%), #e9eef7 0);
  display:grid;
  place-items:center;
  position:relative;
}
.donut::after{
  content:"";
  width:140px; height:140px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  box-shadow: inset 0 0 0 1px var(--line);
}
.donut-inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.donut-pct{
  font-size:28px;
  font-weight:900;
}
.donut-sub{ text-align:center; }
.donut-big{ font-size:18px; font-weight:900; }

.sales-stats2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-content:start;
}
.mini{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.mini-soft{ grid-column:1 / -1; background:#f8fafc; }
.mini-top{ display:flex; align-items:center; gap:8px; }
.mini-val{ font-size:18px; font-weight:900; margin-top:6px; }

.mini-dot{
  width:10px; height:10px;
  border-radius:50%;
  background:#cbd5e1;
}
.mini-dot.dot1{ background:var(--primary); }
.mini-dot.dot2{ background:var(--good); }

/* sales form */
.sales-form{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  margin-top:4px;
}
@media (max-width: 650px){
  .sales-form{ grid-template-columns:1fr; }
}
.field2 label{ display:block; font-size:12px; margin-bottom:6px; }
.field2 input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
}
.field2 input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* buttons */
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}
.btn-primary{
  background:var(--primary);
  border-color:rgba(37,99,235,.5);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(.95); }

/* production flow */
.prod-flow{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.prod-card{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.prod-title{ font-weight:900; }
.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
  background:#f8fafc;
}
.badge.ok{ color:var(--good); background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.22); }
.badge.warn{ color:var(--warn); background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.22); }
.badge.bad{ color:var(--bad); background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22); }
.due{ margin-top:8px; font-weight:800; }

/* chart */
.chart-wrap{ padding:10px 14px 0; }
.legend{
  padding:10px 16px 16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; display:inline-block; }
.dot.dot1{ background:var(--primary); }
.dot.dot2{ background:var(--good); }

/* table */
.table-wrap{ padding:0 12px 12px; }
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  padding:12px 12px;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
tbody tr:hover{ background:#f8fafc; }

.status.onway{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--primary);
  font-weight:900;
  border:1px solid rgba(37,99,235,.22);
}

.doclinks a{
  color:var(--primary);
  font-weight:800;
}
.doclinks a:hover{ text-decoration:underline; }

/* section spacing */
.wrap > section{ margin-top:14px; }
/* =========================
   DASHBOARD POLISH (Sales + Flow)
   Paste at END of style.css
   ========================= */

/* make card body spacing consistent */
.card .sales-grid,
.card .prod-flow {
  padding: 16px;
}

/* Sales layout: tighter + balanced */
.sales-grid{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 1100px){
  .sales-grid{ grid-template-columns:1fr; }
}

/* Donut area: remove grey box feel */
.donut-wrap{
  align-items:center;
  gap:10px;
}
.donut{
  width:170px;
  height:170px;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), #eef2ff 0);
  box-shadow: inset 0 0 0 1px var(--line);
}
.donut::after{
  width:126px;
  height:126px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.donut-pct{
  font-size:26px;
  font-weight:900;
}

/* Sales mini cards: uniform height */
.sales-stats2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.mini{
  min-height:84px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mini-val{ font-size:18px; }

/* Status card: full width clean */
.mini-soft{
  grid-column: 1 / -1;
  background:#f8fafc;
}

/* Sales form: remove dark background (make it clean ERP) */
.sales-form{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  padding:12px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:#fff;
}
@media (max-width: 650px){
  .sales-form{ grid-template-columns:1fr; }
}
.field2 label{ font-weight:700; color:var(--muted); }
.field2 input{
  background:#fff;
}

/* Production flow cards: make them compact */
.prod-card{
  padding:14px;
  border-radius:14px;
  background:#fff;
}
.prod-left .prod-title{
  font-size:16px;
}
.prod-right{
  text-align:right;
  min-width:170px;
}
@media (max-width: 700px){
  .prod-card{ flex-direction:column; }
  .prod-right{ text-align:left; min-width:auto; }
}
/* ===== Donut center + colors FIX ===== */
.donut{
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), #e9edf7 0) !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}

.donut::after{
  /* ✅ CENTER CIRCLE COLOR (inside tracker) */
  background: #ffffff !important;      /* change to #f8fafc if you want light grey */
  box-shadow: inset 0 0 0 1px var(--line) !important;
}

/* make the percent readable */
.donut-inner .donut-pct{
  color: var(--text) !important;
}

/* remove any grey background behind donut (if any parent had it) */
.donut-wrap, .donut-sub{
  background: transparent !important;
}

/* ===== Sales form layout FIX ===== */
.sales-form{
  grid-template-columns: 1fr 1fr 140px !important;
  align-items:end !important;
  padding:14px !important;
  border:1px dashed var(--line) !important;
  border-radius:14px !important;
  background:#fff !important;
}

.sales-form .field2 input{
  height:42px !important;
}

.sales-form .btn{
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* Mobile */
@media (max-width:650px){
  .sales-form{ grid-template-columns:1fr !important; }
  .sales-form .btn{ width:100% !important; }
}

/* ===== Login Page (Crystal / Glass) ===== */
.login-page{
  margin:0;
  min-height:100vh;
  background:#000;
  color:#fff;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(34,197,94,.10), transparent 50%),
    linear-gradient(180deg,#000,#050505);
}

.login-card{
  width:min(420px, 100%);
  padding:22px;
  border-radius:18px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,.8);
}

.login-brand{
  display:flex; gap:12px; align-items:center;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.login-logo{
  width:44px; height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color:#08110b;
}

.login-title{ font-weight:900; letter-spacing:.5px; }
.login-sub{ font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }

.login-h{ margin:10px 0 12px; }

.login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.login-form label{
  font-size:12px;
  color:rgba(255,255,255,.75);
  text-align:left;
}

.login-form input{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.55);
  color:#fff;
  outline:none;
}

.login-form input:focus{
  border-color: rgba(34,197,94,.7);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.login-btn{
  margin-top:6px;
  padding:12px;
  border:none;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color:#07110c;
}

.login-msg{ min-height:18px; font-size:13px; margin-top:4px; }
.login-msg.ok{ color:#4ade80; }
.login-msg.err{ color:#ff7b7b; }

.login-demo{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.65);
}

/* ============================
   DASHBOARD + MENU LIGHT PATCH
   Paste at END of style.css
   ============================ */

/* Prevent horizontal scroll */
html, body { overflow-x: hidden; }

/* Layout width */
.wrap{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 14px 16px 22px !important;
}

/* Sidebar compact */
.sidebar{
  width: 240px !important;
}
.sb-head{ padding: 14px 14px !important; }
.sb-title{ font-size: 16px !important; letter-spacing: .4px !important; }
.sb-subtitle{ font-size: 12px !important; opacity: .75 !important; }

/* Sidebar items smaller */
.sb-item, .sb-parent{
  margin: 4px 10px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.sb-ic{
  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
.sb-txt{ font-size: 13px !important; font-weight: 800 !important; }
.sb-arrow{ width: 24px !important; height: 24px !important; border-radius: 10px !important; }

/* Submenu clean */
.sb-sub{ padding-left: 10px !important; }
.sb-item.sb-child{ padding: 9px 10px !important; }

/* Topbar cleaner (less bulky) */
.topbar{
  padding: 12px 16px !important;
  border-radius: 14px !important;
  margin: 12px 12px 0 !important;
}
.tb-title{ font-size: 18px !important; }
.tb-sub{ font-size: 12px !important; }

/* KPI smaller cards */
.kpis{ gap: 12px !important; }
.kpi{ padding: 14px !important; min-height: 110px !important; }
.kpi-val{ font-size: 28px !important; margin-top: 8px !important; }

/* Grid spacing */
.grid2{ gap: 12px !important; margin-top: 12px !important; }
.card{ border-radius: 16px !important; }

/* Sales section compact */
.sales-grid{ padding: 12px 14px 14px !important; gap: 12px !important; }
.donut{ width: 170px !important; height: 170px !important; }
.donut::after{ width: 120px !important; height: 120px !important; }
.donut-pct{ font-size: 26px !important; }

/* Vessel table */
.table-wrap{ padding: 8px 12px 12px !important; }
table{ border-radius: 14px !important; }

/* Mobile */
@media (max-width: 980px){
  .sidebar{ width: 100% !important; }
  .sb-item, .sb-parent{ margin: 4px 8px !important; }
}
/* ============================
   FIX SIDEBAR DOUBLE SCROLLBAR
   Paste at END of style.css
   ============================ */

/* Only sidebar should scroll */
.sidebar{
  overflow-y: auto !important;
  overflow-x: hidden !important;  /* ✅ removes bottom horizontal scroll bar */
}

/* nav should NOT scroll */
.sb-nav{
  overflow: visible !important;
  max-height: none !important;
  padding-right: 0 !important;
}

/* remove any forced height that creates inner scroll */
.sidebar{ height: 100vh !important; }

/* also block any horizontal scrolling everywhere */
html, body{ overflow-x: hidden !important; }

/* ============================
   ERP MENU (Clean + Compact)
   ============================ */
.sb-item, .sb-parent{
  padding: 10px 12px !important;
  margin: 6px 8px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.sb-ic{
  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;
}

.sb-txt{
  font-size: 13px !important;
  font-weight: 700 !important;
}

.sb-sub{
  margin: 0 10px 10px !important;
  padding-left: 14px !important;
  border-left: 1px dashed rgba(255,255,255,.18) !important;
}

.sb-item.sb-child{
  padding: 9px 10px !important;
  margin: 6px 0 !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.04) !important;
}

/* =========================================================
   EXPORT ERP – SIDEBAR PERFECT LAYOUT (NO SCROLLBAR)
   Paste this at END of css/style.css to override old styles
========================================================= */

:root{
  --sb-bg:#0b1220;
  --sb-border: rgba(255,255,255,.08);
  --sb-text:#e5e7eb;
  --sb-muted: rgba(229,231,235,.70);
  --sb-hover: rgba(255,255,255,.08);
  --sb-active: rgba(56,189,248,.18);
  --sb-active-b: rgba(56,189,248,.35);
}

/* Layout safe */
.layout{
  min-height:100vh;
  display:flex;
  background:#f6f7fb;
}

/* ======================
   SIDEBAR (NO SCROLLBAR)
====================== */
.sidebar{
  width:280px;
  flex:0 0 280px;
  height:100vh;
  background:var(--sb-bg);
  color:var(--sb-text);
  overflow:hidden;                 /* ✅ remove scrollbar */
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--sb-border);
}

/* Head */
.sb-head{
  padding:18px 16px 14px;
  border-bottom:1px solid var(--sb-border);
}
.sb-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
}
.sb-subtitle{
  margin-top:6px;
  font-size:12px;
  color:var(--sb-muted);
}

/* Nav */
.sb-nav{
  flex:1;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;                 /* ✅ keep clean */
}

/* Items */
.sb-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--sb-text);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
}

/* icon box */
.sb-ic{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.07);
  font-size:14px;
}

/* text */
.sb-txt{
  flex:1;
  text-align:left;
}

/* arrow */
.sb-arrow{
  margin-left:auto;
  opacity:.75;
  transition:transform .18s ease;
}

/* hover */
.sb-item:hover{
  background:var(--sb-hover);
  border-color:rgba(255,255,255,.08);
}

/* active */
.sb-item.active{
  background:var(--sb-active);
  border-color:var(--sb-active-b);
  color:#fff;
}
.sb-item.active .sb-ic{
  background:rgba(56,189,248,.20);
  border-color:rgba(56,189,248,.20);
}

/* parent (dropdown) button */
.sb-parent{
  font-family:inherit;
}
.sb-parent.open .sb-arrow{
  transform:rotate(180deg);
}

/* ======================
   SUBMENU (open/close)
====================== */
.sb-sub{
  display:none;
  margin:4px 0 8px 18px;
  padding-left:12px;
  border-left:2px solid rgba(255,255,255,.12);
}
.sb-sub.open{ display:flex; flex-direction:column; gap:6px; }

/* child item */
.sb-child{
  padding:9px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);
}
.sb-child:hover{
  background:rgba(255,255,255,.10);
}
.sb-child .sb-ic{
  width:24px;height:24px;border-radius:8px;
  background:rgba(255,255,255,.07);
}

/* Footer */
.sb-foot{
  padding:14px;
  border-top:1px solid var(--sb-border);
}
.sb-footbox{
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.sb-footbox .muted{
  color:rgba(255,255,255,.70) !important;
}

/* MAIN area */
.main{
  flex:1;
  min-width:0;
}
.wrap{
  padding:18px 18px 40px;
}

/* Responsive (no scrollbars) */
@media (max-width: 980px){
  .sidebar{ width:250px; flex-basis:250px; }
}
@media (max-width: 780px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; }
}
/* ===========================
   Sidebar Footer User Box (Last)
=========================== */

.sidebar{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden !important;   /* ✅ no sidebar scroll */
}

.sb-nav{
  flex:1;                       /* ✅ nav takes remaining space */
  overflow:hidden !important;    /* ✅ no scroll */
}

/* footer pinned to bottom */
.sb-foot{
  margin-top:auto;              /* ✅ pushes footer to bottom */
  padding:14px 12px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}

.sb-userbox{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
}

.sb-user-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.sb-user-avatar{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:rgba(56,189,248,.20);
  border:1px solid rgba(56,189,248,.35);
}

.sb-user-name{
  font-weight:900;
  font-size:14px;
  color:#fff;
  line-height:1.1;
}

.sb-user-role{
  font-size:12px;
  color:rgba(255,255,255,.70);
  margin-top:2px;
}

.sb-user-status{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.65);
  padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.14);
}
/* ==============================
   SIDEBAR LAYOUT FIX (NO OVERLAP)
============================== */

.sidebar{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* MENU SCROLLS, FOOTER DOES NOT */
.sb-nav{
  flex:1;
  overflow-y:auto;
  padding-bottom:12px;
}

/* REMOVE SIDEBAR SCROLL BAR VISUALLY */
.sb-nav::-webkit-scrollbar{
  width:0;
}
.sb-nav{
  scrollbar-width:none;
}

/* ===== Sidebar submenu REQUIRED ===== */
.sb-sub { display: none; }
.sb-sub.open { display: block; }

.sb-child.active{
  background: rgba(255,255,255,.14);
  font-weight: 700;
}

/* =========================
   PRINT LAYOUT – IMPROVED
   (Replace your .sheet, table.inv rules + @media print)
========================= */

/* Better A4 “screen preview” too (optional) */
.sheet{
  width:210mm;
  min-height:297mm;
  background:#fff;
  margin:10px auto 18px;
  padding:8mm;                 /* ✅ uniform inner margin */
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  font-family:"Times New Roman", Times, serif;
  color:#000;
}

/* Title */
.title{
  text-align:center;
  font-weight:700;
  font-size:18px;              /* ✅ slightly smaller = more professional */
  padding:8px 0 6px;
  border-bottom:1px solid #000;
  letter-spacing:.3px;
}

/* Main invoice tables */
table.inv{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11px;              /* ✅ ideal for A4 */
  line-height:1.25;
}

table.inv td,
table.inv th{
  border:1px solid #000;       /* ✅ consistent black borders */
  padding:5px 6px;
  vertical-align:top;
  word-break:break-word;
  overflow-wrap:anywhere;      /* ✅ long words / SWIFT / account no wrap */
}

table.inv th{
  font-weight:700;
}

/* Ensure text blocks look clean */
.pre{
  white-space:pre-line;
  line-height:1.25;
}

/* Prevent items table from breaking rows in half */
table.inv tr,
table.inv td,
table.inv th{
  page-break-inside:avoid;
}

/* Repeat thead on next printed page (items table) */
table.inv thead{
  display:table-header-group;
}
table.inv tfoot{
  display:table-footer-group;
}

/* Keep footer/long declarations readable */
.small{
  font-size:10.5px;
  line-height:1.25;
}

/* Print-only behavior */
@media print{
  html, body{
    background:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Hide sidebar + entry UI */
  .sidebar{ display:none !important; }
  .main{ padding:0 !important; }
  #entryView{ display:none !important; }
  #printView{ display:block !important; }

  /* True A4 print sizing */
  @page{
    size:A4;
    margin:8mm;               /* ✅ outer printer margin */
  }

  /* Remove preview shadow & keep full width */
  .sheet{
    margin:0 !important;
    box-shadow:none !important;
    width:auto !important;
    min-height:auto !important;
    padding:0 !important;      /* ✅ let @page margin control */
  }

  /* Avoid orphaned content splitting badly */
  .title{
    page-break-after:avoid;
  }

  /* If any table still breaks, this reduces chance */
  table.inv{
    page-break-inside:auto;
  }
}
 /* keeps big text from inflating row height too much */
#p_items td{ line-height:1.2; }
/* =========================================================
   ONE SIDEBAR UI (WORKING)
   ✅ mini default, toggle expand/collapse
========================================================= */
:root{
  --sb-bg:#0b1220;
  --sb-bg2:#0f172a;
  --sb-border: rgba(255,255,255,.08);
  --sb-text:#e7eaf3;
  --sb-muted: rgba(231,234,243,.70);
  --sb-hover: rgba(255,255,255,.06);

  --sb-accent:#14a3d6;
  --sb-active: rgba(20,163,214,.14);

  --sb-w-open: 250px;
  --sb-w-mini: 78px;
}

/* Sidebar base */
.sidebar{
  background: linear-gradient(180deg,var(--sb-bg),var(--sb-bg2)) !important;
  border-right: 1px solid var(--sb-border) !important;
  color: var(--sb-text) !important;

  width: var(--sb-w-open) !important;
  flex: 0 0 var(--sb-w-open) !important;

  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  overflow:hidden !important;
}

/* Default MINI */
body.sb-mini .sidebar{
  width: var(--sb-w-mini) !important;
  flex-basis: var(--sb-w-mini) !important;
}

/* TOP */
.sb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-left{display:grid;gap:2px}
.sb-brand{font-weight:950;letter-spacing:.35px}
.sb-subtitle{font-size:12px;color:var(--sb-muted)}

.sb-right{display:flex;align-items:center;gap:10px}

/* Toggle */
.sb-toggle{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--sb-text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.sb-toggle:hover{ background: rgba(255,255,255,.10); }

/* Top user */
.sb-top-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.sb-avatar{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: rgba(20,163,214,.16);
  border: 1px solid rgba(20,163,214,.25);
}
.sb-user-meta{line-height:1.15}
.sb-user-name{font-weight:900;font-size:13px;color:#fff}
.sb-user-role{font-size:12px;color:rgba(255,255,255,.70);margin-top:2px}

/* MINI: hide text/meta */
body.sb-mini .sb-subtitle{display:none !important;}
body.sb-mini .sb-user-meta{display:none !important;}
body.sb-mini .sb-top-user{padding:6px !important;}

/* NAV */
.sb-nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 0 12px;
}
.sb-nav::-webkit-scrollbar{ width:0; height:0; }
.sb-nav{ scrollbar-width:none; }

/* ONE line items */
.sb-item, .sb-parent{
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 10px 12px;

  display:flex;
  align-items:center;
  gap:10px;

  border:0 !important;
  box-shadow:none !important;
  background: transparent;
  color: var(--sb-text);
  text-decoration:none;
  cursor:pointer;

  border-radius:12px;
  position:relative;
}
.sb-item:hover, .sb-parent:hover{ background: var(--sb-hover); }

.sb-item.active{
  background: var(--sb-active);
}
.sb-item.active::before{
  content:"";
  position:absolute;
  left:0; top:8px; bottom:8px;
  width:3px;
  border-radius:999px;
  background: var(--sb-accent);
}

.sb-ic{
  width:28px;height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  flex:0 0 28px;
}
.sb-txt{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sb-arrow{ margin-left:auto; opacity:.85; }

/* MINI: icons only */
body.sb-mini .sb-item,
body.sb-mini .sb-parent{
  justify-content:center;
  padding: 10px 10px;
}
body.sb-mini .sb-txt,
body.sb-mini .sb-arrow{ display:none !important; }

/* Submenu */
.sb-sub{
  display:none;
  margin: 4px 10px 10px;
  padding: 6px 0 8px;
  border-radius:12px;
  background: rgba(0,0,0,.12);
}
.sb-sub.open{ display:block; }

.sb-item.sb-child{
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 9px 10px;
  border-radius:12px;
}

/* MINI: hide submenu always */
body.sb-mini .sb-sub{ display:none !important; }

/* Footer */
.sb-foot{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.sb-footbox{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.muted{ color: rgba(255,255,255,.70); }

/* Donut wrapper */
.sales-donut{
  position: relative;
  width: 180px;
  height: 180px;
  margin: auto;
}

/* Outer ring background */
.sales-donut::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at center,
      #0f172a 58%,           /* inner cut */
      transparent 59%),
    conic-gradient(
      #7C3AED 0%,
      #22D3EE 100%           /* outer ring gradient */
    );
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Inner circle */
.sales-donut .donut-center{
  position:absolute;
  inset:22px;
  border-radius:50%;
  background: linear-gradient(145deg,#0145ef,#0f56ca);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 20px rgba(201, 60, 60, 0.45);
}

/* Percentage text */
.sales-donut .donut-value{
  font-size: 32px;
  font-weight: 800;
  color: #0db4ce;
  line-height: 1;
}

/* Label text */
.sales-donut .donut-label{
  font-size: 14px;
  color: #94a3b8;
  margin-top: 4px;
}


/* ===== PRODUCTION REPORT FINAL CLEAN FIX ===== */
#reportBody td,
#reportBody th{
  font-size:12px !important;
  padding:7px 8px !important;
  line-height:1.25 !important;
}

#reportBody tr td:first-child{
  font-weight:650 !important;
  white-space:normal !important;
  word-break:break-word !important;
}

.reportToggle{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  margin-right:6px !important;
  font-size:13px !important;
  border-radius:8px !important;
}

.report-items-table th{
  font-size:11px !important;
  padding:7px 8px !important;
}

.report-items-table td{
  font-size:11.5px !important;
  padding:6px 8px !important;
}

.reportDetailsBox{
  padding:8px 10px !important;
}
.reportTable .btn,
#reportBody .btn{
  border: 0;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}

.reportTable .btn.secondary,
#reportBody .btn.secondary{
  background: #eef6ff;
  color: #075985;
  border: 1px solid #bae6fd;
}

.reportTable .btn.primary,
#reportBody .btn.primary{
  background: #0ea5e9;
  color: #fff;
}

.reportTable .btn.danger,
#reportBody .btn.danger{
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.reportTable .btn:hover,
#reportBody .btn:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
}

.reportTable .status.done,
#reportBody .status.done{
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
/* =====================================================
   FIX: FORECAST REPORT ACTION BUTTONS VISIBLE
   This overrides old production report hide rule
===================================================== */

#reportBody td .fc-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
}

#reportBody td button.fc-open-btn,
#reportBody td button.fc-edit-btn,
#reportBody td button.fc-cancel-btn,
#reportBody td .btn.fc-open-btn,
#reportBody td .btn.fc-edit-btn,
#reportBody td .btn.fc-cancel-btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:99 !important;
  height:30px !important;
  min-height:30px !important;
  min-width:62px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}

#reportBody td button.fc-open-btn{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #d6e2ef !important;
}

#reportBody td button.fc-edit-btn{
  background:#0ea5e9 !important;
  color:#fff !important;
  border:1px solid #0ea5e9 !important;
}

#reportBody td button.fc-cancel-btn{
  background:#ef4444 !important;
  color:#fff !important;
  border:1px solid #ef4444 !important;

}

/* PERFECT SIDEBAR SUBMENU */
body.sidebar-open #sbNav,
body.sidebar-open .sb-nav{
  padding:12px 10px !important;
  overflow-y:auto !important;
}

#sbNav .sb-item,
#sbNav .sb-parent,
.sb-nav .sb-item,
.sb-nav .sb-parent{
  height:42px !important;
  min-height:42px !important;
  margin:5px 0 !important;
  border-radius:12px !important;
}

body:not(.sidebar-open) #sbNav .sb-txt,
body:not(.sidebar-open) #sbNav .sb-arrow{
  display:none !important;
}

body:not(.sidebar-open) #sbNav .sb-item,
body:not(.sidebar-open) #sbNav .sb-parent{
  justify-content:center !important;
  padding:9px 0 !important;
}

body.sidebar-open #sbNav .sb-sub.open{
  display:grid !important;
  gap:6px !important;
  margin:5px 0 8px 18px !important;
  padding-left:10px !important;
  border-left:1px dashed rgba(148,163,184,.35) !important;
}

body:not(.sidebar-open) #sbNav .sb-sub{
  display:none !important;
}

/* Smooth, clear, compact sidebar icons everywhere */
#sbNav .sb-ic,
.sb-nav .sb-ic{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  flex:0 0 24px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:9px !important;
  font-size:14px !important;
  line-height:1 !important;
  background:rgba(255,255,255,.07) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055) !important;
}

#sbNav .sb-child,
.sb-nav .sb-child{
  min-height:36px !important;
  height:36px !important;
  padding:0 11px !important;
  gap:9px !important;
  border-radius:12px !important;
  font-size:12.5px !important;
  font-weight:760 !important;
  letter-spacing:0 !important;
}

#sbNav .sb-child .sb-ic,
.sb-nav .sb-child .sb-ic{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  flex-basis:22px !important;
  border-radius:8px !important;
  font-size:13px !important;
}

#sbNav .sb-parent .sb-ic,
.sb-nav .sb-parent .sb-ic{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  flex-basis:24px !important;
  border-radius:9px !important;
  font-size:14px !important;
}

#sbNav .sb-arrow,
.sb-nav .sb-arrow{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  margin-left:auto !important;
  border-radius:9px !important;
  font-size:10px !important;
  background:rgba(255,255,255,.04) !important;
}

body.sidebar-open #sbNav .sb-sub.open,
body.sidebar-open .sb-nav .sb-sub.open{
  gap:4px !important;
  margin:5px 0 8px 28px !important;
  padding:8px 0 8px 12px !important;
  border-left-color:rgba(148,163,184,.28) !important;
}
/* ==============================
   PRODUCTION REPORT SAME AS FORECAST
============================== */

.prodReportFilters{
  display:grid;
  grid-template-columns: 180px 180px minmax(260px,1fr) 135px;
  gap:11px;
  align-items:end;
}

.reportTable{
  min-width:1120px !important;
  table-layout:fixed !important;
}

.reportTable th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--head) !important;
  color:#334155 !important;
  font-size:11.5px !important;
  letter-spacing:.28px !important;
  text-transform:uppercase !important;
  font-weight:760 !important;
  padding:9px 8px !important;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap !important;
}

.reportTable td{
  padding:8px 8px !important;
  border-bottom:1px solid #eef2f7 !important;
  background:#fff !important;
  color:var(--text) !important;
  font-size:13px !important;
  font-weight:560 !important;
  vertical-align:middle !important;
}

.reportTable tbody tr:nth-child(even) td{
  background:#fbfdff !important;
}

.reportTable tbody tr:hover td{
  background:#f7fbff !important;
}

.prodReportActions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:7px !important;
}

.prodReportActions .btn,
.prodEditBtn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  height:30px !important;
  min-height:30px !important;
  min-width:62px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.reportStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  padding:6px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  border:1px solid #dbe5f1;
  white-space:nowrap;
}

.reportStatus.plan{
  background:#ffedd5;
  border-color:#fdba74;
  color:#9a3412;
}

.reportStatus.run{
  background:#fef9c3;
  border-color:#fde047;
  color:#854d0e;
}

.reportStatus.done{
  background:#dcfce7;
  border-color:#86efac;
  color:#065f46;
}

.reportStatus.locked{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#475569;
}

@media (max-width:900px){
  .prodReportFilters{
    grid-template-columns:1fr;
  }
}
/* =====================================================
   PRODUCTION REPORT — FORECAST STYLE + DETAILS
===================================================== */

.productionReportCard .sectionHead{
  border-radius:15px 15px 0 0;
}

.prodReportFilters{
  display:grid;
  grid-template-columns:210px 210px minmax(260px,1fr) 135px 240px;
  gap:11px;
  align-items:end;
}

.prodReportFilters .actionField .btn{
  width:100%;
  min-width:0;
  height:37px !important;
  min-height:37px !important;
}

.reportShell{
  border-radius:15px !important;
  overflow:hidden !important;
}

.reportWrap{
  max-height:520px !important;
  overflow:auto !important;
}

#reportTable.reportTable{
  min-width:1220px !important;
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

#reportTable.reportTable thead th{
  background:var(--head) !important;
  color:#334155 !important;
  font-size:11.5px !important;
  letter-spacing:.28px !important;
  text-transform:uppercase !important;
  font-weight:780 !important;
  padding:9px 8px !important;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap !important;
}

#reportTable.reportTable tbody td{
  padding:8px 8px !important;
  border-bottom:1px solid #eef2f7 !important;
  color:var(--text) !important;
  font-size:12.5px !important;
  font-weight:640 !important;
  vertical-align:middle !important;
}

#reportTable.reportTable tbody tr.reportMainRow:hover td{
  background:#f7fbff !important;
}

.reportToggleBtn{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  border-radius:8px !important;
  border:1px solid var(--line2) !important;
  background:#fff !important;
  color:#075985 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  font-weight:900 !important;
  padding:0 !important;
  cursor:pointer !important;
}

.reportStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid #dbe5f1;
  white-space:nowrap;
}

.reportStatus.plan{background:#ffedd5;border-color:#fdba74;color:#9a3412;}
.reportStatus.run{background:#fef9c3;border-color:#fde047;color:#854d0e;}
.reportStatus.done{background:#dcfce7;border-color:#86efac;color:#065f46;}
.reportStatus.locked{background:#f1f5f9;border-color:#cbd5e1;color:#475569;min-width:72px;}

.prodReportActions{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:7px !important;
}

.prodReportActions .btn,
.prodEditBtn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  height:30px !important;
  min-height:30px !important;
  min-width:62px !important;
  padding:0 10px !important;
  border-radius:9px !important;
  font-size:12px !important;
  font-weight:850 !important;
  align-items:center !important;
  justify-content:center !important;
}

.reportDetailsRow{
  display:none;
}

.reportDetailsRow.open{
  display:table-row;
}

.reportDetailsRow td{
  padding:0 !important;
  background:#f8fbff !important;
}

.reportDetailsBox{
  padding:10px 12px !important;
  border-top:1px solid #e2e8f0;
  background:#f8fbff;
}

.reportDetailsTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  color:#334155;
  font-size:12px;
  font-weight:850;
}

.report-items-table{
  width:100%;
  min-width:860px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.report-items-table th{
  background:#eef5fc !important;
  color:#475569 !important;
  padding:7px 8px !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
}

.report-items-table td{
  background:#fff !important;
  padding:7px 8px !important;
  font-size:11.8px !important;
  font-weight:600 !important;
  border-bottom:1px solid #eef2f7 !important;
}

.report-items-table tr:last-child td{
  border-bottom:0 !important;
}

@media (max-width:1100px){
  .prodReportFilters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .prodReportFilters .statusField{
    grid-column:1 / -1;
  }

  .prodReportFilters .exportField{
    grid-column:auto;
  }
}

@media (max-width:760px){
  .prodReportFilters{
    grid-template-columns:1fr;
  }

  .prodReportFilters .statusField,
  .prodReportFilters .exportField{
    grid-column:auto;
  }
}

/* =========================================================
   ERP final page polish overrides
   Keeps skipped/older pages aligned with the current shell.
========================================================= */
body:not(.login-page){
  background:var(--erp-page-bg,#f5f7fb) !important;
  color:var(--erp-text,#0f172a);
  letter-spacing:0;
}

body.sb-mini .layout,
body:not(.sidebar-open) .layout{
  grid-template-columns:var(--erp-sidebar-mini,88px) minmax(0,1fr);
}

body.sidebar-open .layout{
  grid-template-columns:var(--erp-sidebar-open,220px) minmax(0,1fr);
}

.sidebar,
.sidebarX{
  width:var(--erp-sidebar-mini,76px) !important;
  min-width:var(--erp-sidebar-mini,76px) !important;
  flex:0 0 var(--erp-sidebar-mini,76px) !important;
  background:linear-gradient(180deg,#0b1220,#111827) !important;
  color:#e5e7eb;
  border-right:1px solid rgba(255,255,255,.08) !important;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  z-index:20;
  transition:width var(--erp-transition), min-width var(--erp-transition), flex-basis var(--erp-transition);
}

body.sidebar-open .sidebar,
body.sidebar-open .sidebarX{
  width:var(--erp-sidebar-open,220px) !important;
  min-width:var(--erp-sidebar-open,220px) !important;
  flex-basis:var(--erp-sidebar-open,220px) !important;
  overflow-y:auto;
}

.main{
  min-width:0;
}

.card{
  border-radius:12px !important;
  border:1px solid var(--erp-line,#e2e8f0) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}

.btn,
button.btn,
a.btn{
  min-height:38px;
  border-radius:8px !important;
  letter-spacing:0 !important;
  text-decoration:none;
  white-space:nowrap;
}

input,
select,
textarea,
.input{
  min-height:38px;
  border-radius:8px !important;
  letter-spacing:0 !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus{
  border-color:rgba(37,99,235,.75) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}

.table-wrap,
.tableWrap{
  border-radius:10px !important;
  background:#fff;
}

th{
  letter-spacing:0 !important;
  text-transform:none !important;
}

@media (max-width:900px){
  body.sb-mini .layout,
  body.sidebar-open .layout,
  body:not(.sidebar-open) .layout{
    grid-template-columns:1fr;
  }

  .sidebar,
  .sidebarX{
    position:relative;
    width:100% !important;
    min-width:0 !important;
    height:auto;
    min-height:72px;
    flex-basis:auto !important;
  }
}