/* =========================================================
   MARVITA OS — Modern Design System
   Teal-Cyan • Mobile-first • Theme-stable
   ========================================================= */
:root{
  --sidebar-w:268px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --ease:.22s cubic-bezier(.4,0,.2,1);
  --ease-out:.28s cubic-bezier(.16,1,.3,1);
  /* Light */
  --bg:#F8FAFC;
  --bg-alt:#FFFFFF;
  --bg-muted:#F1F5F9;
  --bg-soft:#F8FAFC;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --border:#E2E8F0;
  --border-light:#F1F5F9;
  --primary:#0D9488;
  --primary-hover:#0F766E;
  --primary-soft:#F0FDFA;
  --primary-ring:rgba(13,148,136,.18);
  --success:#059669;
  --success-soft:#ECFDF5;
  --warning:#D97706;
  --warning-soft:#FFFBEB;
  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --info:#7C3AED;
  --info-soft:#F5F3FF;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 16px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10),0 4px 12px rgba(15,23,42,.06);
  --sidebar-bg:#FFFFFF;
  --topbar-bg:rgba(255,255,255,.78);
}
[data-theme="dark"]{
  --bg:#020617;
  --bg-alt:#0F172A;
  --bg-muted:#1E293B;
  --bg-soft:#0B1220;
  --text:#FFFFFF;
  --text-muted:#FFFFFF;
  --text-faint:#FFFFFF;
  --border:#334155;
  --border-light:#243449;
  --primary:#2DD4BF;
  --primary-hover:#5EEAD4;
  --primary-soft:rgba(45,212,191,.12);
  --primary-ring:rgba(45,212,191,.18);
  --success:#34D399;
  --success-soft:rgba(52,211,153,.12);
  --warning:#FBBF24;
  --warning-soft:rgba(251,191,36,.12);
  --danger:#F87171;
  --danger-soft:rgba(248,113,113,.12);
  --info:#A78BFA;
  --info-soft:rgba(167,139,250,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);
  --sidebar-bg:rgba(15, 23, 42, 0.95);
  --topbar-bg:rgba(15,23,42,.78);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;min-height:100%;width:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.6;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
img{max-width:100%}

/* App shell */
.marvita-app{display:flex;min-height:100vh;width:100%}

/* Sidebar — fixed desktop, off-canvas mobile */
.marvita-sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  min-height:100vh;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;left:0;top:0;bottom:0;
  z-index:1040;
  transition:transform var(--ease),box-shadow var(--ease);
  transform:translateX(0);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
}
.marvita-sidebar::-webkit-scrollbar{width:4px}
.marvita-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* Overlay */
.marvita-sidebar-overlay{
  position:fixed;inset:0;
  background:rgba(2,6,23,.48);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:1039;
  opacity:0;pointer-events:none;
  transition:opacity var(--ease);
}
.marvita-sidebar-overlay.open{opacity:1;pointer-events:auto}

@media(max-width:991.98px){
  .marvita-sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .marvita-sidebar.open{transform:translateX(0)}
}

/* Brand */
.marvita-brand{
  padding:26px 22px 20px;
  border-bottom:1px solid var(--border-light);
  position:sticky;top:0;background:var(--sidebar-bg);z-index:1;
}
.brand-name{
  font-size:22px;font-weight:800;letter-spacing:.08em;
  color:var(--text);line-height:1;
  display:flex;align-items:center;gap:10px;
}
.brand-name::before{
  content:"";width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#0D9488 0%,#06B6D4 100%);
  display:inline-block;flex-shrink:0;
  box-shadow:0 4px 12px rgba(13,148,136,.35);
}
.brand-subtitle{margin-top:6px;font-size:12.5px;font-weight:500;color:var(--text-muted);letter-spacing:.02em}

/* Nav */
.marvita-nav{padding:14px 12px;flex:1}
.marvita-nav-link{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 12px;margin-bottom:4px;
  border-radius:12px;
  color:var(--text-muted);font-size:14px;font-weight:550;
  text-decoration:none;white-space:nowrap;
  transition:background var(--ease),color var(--ease),transform var(--ease);
  position:relative;
}
.marvita-nav-link i{width:20px;min-width:20px;font-size:17px;text-align:center;flex-shrink:0;opacity:.9}
.marvita-nav-link:hover{background:var(--bg-muted);color:var(--text);transform:translateX(1px)}
.marvita-nav-link.active{
  background:var(--primary-soft);color:var(--primary);
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(13,148,136,.12);
}
[data-theme="dark"] .marvita-nav-link.active{box-shadow:inset 0 0 0 1px rgba(45,212,191,.18)}
.marvita-nav-link.active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:999px;background:var(--primary);
}
@media(max-width:991.98px){.marvita-nav-link.active::before{display:none}}

/* Sidebar footer */
.marvita-sidebar-footer{
  padding:16px 22px;
  border-top:1px solid var(--border-light);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);
}

/* Main */
.marvita-main{
  margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  min-height:100vh;
  padding:28px 28px 40px;
  background:var(--bg);
  transition:margin var(--ease),width var(--ease);
  min-width:0;
}
@media(max-width:991.98px){
  .marvita-main{margin-left:0;width:100%;padding:14px 14px 32px}
}

/* Topbar */
.marvita-topbar{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--topbar-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;
  box-shadow:var(--shadow-sm);
}
@media(max-width:991.98px){
  .marvita-topbar{border-radius:14px;padding:10px 12px}
}
.marvita-topbar h2{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
#sidebarToggle{
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);
  font-size:18px;
}
#sidebarToggle:active{transform:scale(.96)}

/* Titles */
.page-title{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--text);margin:0}
@media(max-width:575.98px){.page-title{font-size:22px}}
.page-subtitle{color:var(--text-muted);font-size:14px;margin-top:4px}

/* Cards — glass depth, stronger hover */
.card{
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease),background var(--ease);
  overflow:hidden;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border)}
[data-theme="dark"] .card{
  background:#0F172A;
  border-color:#334155;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
}
[data-theme="dark"] .card:hover{box-shadow:0 12px 32px rgba(0,0,0,.6);border-color:#475569}
.card-body{padding:18px}
@media(max-width:575.98px){.card-body{padding:16px}}
.dashboard-card{border-radius:var(--radius-md)}
.dashboard-card .card-body{padding:20px}
@media(max-width:575.98px){.dashboard-card .card-body{padding:16px}}

/* Dashboard icon */
.dashboard-icon{
  width:48px;height:48px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary-soft) 0%,rgba(255,255,255,.02) 100%);
}
[data-theme="dark"] .dashboard-icon{background:linear-gradient(135deg,var(--primary-soft) 0%,rgba(255,255,255,.05) 100%);border:1px solid var(--border)}
.dashboard-icon i{line-height:1}
.omzet-icon{color:var(--primary)}
.laba-icon{color:var(--success)}
.produksi-icon{color:var(--warning)}
.stok-icon{color:var(--info)}

/* Chart */
.chart-container{position:relative;width:100%;height:320px;min-height:260px}
@media(max-width:575.98px){.chart-container{height:260px}}

/* Tables — modern + mobile scroll */
.table{--bs-table-bg:transparent;margin:0;background:transparent}
.table thead th{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);background:var(--bg-soft);
  border-bottom:1px solid var(--border);
  padding:12px 14px;white-space:nowrap;
}
[data-theme="dark"] .table thead th{color:#94A3B8}
.table tbody td{
  padding:13px 14px;font-size:14px;color:var(--text);
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--bg-soft)}
[data-theme="dark"] .table tbody tr:hover td{background:rgba(255,255,255,.03)}
.table-responsive{
  border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--bg-alt);overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.table-responsive .table{border:none}
.table-responsive::-webkit-scrollbar{height:6px}
.table-responsive::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* Forms */
.form-control,.form-select{
  border-radius:10px;border:1px solid var(--border);
  background:var(--bg-alt);color:var(--text);
  padding:10px 12px;font-size:14px;line-height:1.4;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
  min-height:42px;
}
.form-control::placeholder{color:var(--text-faint)}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);background:var(--bg-alt);color:var(--text);
  box-shadow:0 0 0 4px var(--primary-ring);outline:none;
}
.form-label{font-size:13px;font-weight:650;color:var(--text);margin-bottom:6px;letter-spacing:.01em}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select{background:#0B1220}

/* Buttons */
.btn{
  border-radius:10px;font-weight:650;font-size:14px;
  padding:9px 14px;line-height:1.2;
  transition:all var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:9px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-dark{background:#0F172A;border-color:#0F172A;color:#fff}
.btn-dark:hover{background:#020617;border-color:#020617}
[data-theme="dark"] .btn-dark{background:#1E293B;border-color:#334155}
[data-theme="dark"] .btn-dark:hover{background:#334155}
.btn-outline-secondary{border-color:var(--border);color:var(--text);background:var(--bg-alt)}
.btn-outline-secondary:hover{background:var(--bg-muted);border-color:var(--border);color:var(--text)}
.btn-outline-primary{color:var(--primary);border-color:var(--primary);background:transparent}
.btn-outline-primary:hover{background:var(--primary);color:#fff}
.btn-outline-danger{color:var(--danger);border-color:rgba(220,38,38,.25)}
.btn-outline-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* Alerts */
.alert{border-radius:12px;border:1px solid var(--border);font-size:14px;padding:12px 14px}
.alert-success{background:var(--success-soft);border-color:rgba(5,150,105,.18);color:#065F46}
[data-theme="dark"] .alert-success{color:#6EE7B7}
.alert-danger{background:var(--danger-soft);border-color:rgba(220,38,38,.18);color:#991B1B}
[data-theme="dark"] .alert-danger{color:#FCA5A5}

/* Badge / utilities keep */
.text-muted{color:var(--text-muted)!important}
.small{font-size:13px}

/* Bootstrap row gutters already ok — tighten on mobile */
@media(max-width:575.98px){
  .row.g-4{--bs-gutter-x:14px;--bs-gutter-y:14px}
  .btn-group .btn{padding:7px 10px}
}

/* Theme transition — only color props, no layout jump */
html,body,.card,.marvita-sidebar,.marvita-main,.table,.form-control,.btn{
  transition-property:background-color,color,border-color,box-shadow;
  transition-duration:.22s;transition-timing-function:ease;
}
.marvita-sidebar,.marvita-main{transition-property:transform,margin,width,background-color,border-color}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* Dark mode — all text white */
[data-theme="dark"] .text-muted{color:#FFFFFF !important;opacity:.85}
[data-theme="dark"] .text-muted small{color:#FFFFFF !important;opacity:.85}
[data-theme="dark"] .brand-name{color:#FFFFFF}
[data-theme="dark"] .brand-subtitle{color:rgba(255,255,255,.7)}
[data-theme="dark"] .marvita-nav-link{color:#FFFFFF}
[data-theme="dark"] .marvita-nav-link i{opacity:.7}
[data-theme="dark"] .marvita-nav-link:hover{color:#FFFFFF;background:rgba(255,255,255,.05)}
[data-theme="dark"] .marvita-sidebar-footer{color:#FFFFFF;opacity:.6}
[data-theme="dark"] .marvita-topbar h2{color:#FFFFFF}
[data-theme="dark"] .page-title{color:#FFFFFF}
[data-theme="dark"] .page-subtitle{color:#FFFFFF;opacity:.85}
[data-theme="dark"] .table thead th{color:#FFFFFF;opacity:.75}
[data-theme="dark"] .table tbody td{color:#FFFFFF}
[data-theme="dark"] .form-label{color:#FFFFFF}
[data-theme="dark"] .form-control{color:#FFFFFF}
[data-theme="dark"] .form-select{color:#FFFFFF}
[data-theme="dark"] .btn-outline-secondary{color:#FFFFFF;border-color:rgba(255,255,255,.25);background:transparent}
[data-theme="dark"] .btn-outline-secondary:hover{background:rgba(255,255,255,.08);color:#FFFFFF;border-color:rgba(255,255,255,.4)}
[data-theme="dark"] .fw-bold{color:#FFFFFF}
[data-theme="dark"] .fw-semibold{color:#FFFFFF}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{color:#FFFFFF}
[data-theme="dark"] p{color:#FFFFFF}
[data-theme="dark"] .badge{color:#0F172A;background:#FFFFFF;font-weight:700}
[data-theme="dark"] #sidebarToggle{color:#FFFFFF;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .alert-success{color:#FFFFFF;background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.3)}
[data-theme="dark"] .alert-danger{color:#FFFFFF;background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.3)}
[data-theme="dark"] .alert-info{color:#FFFFFF;background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3)}
[data-theme="dark"] .alert-warning{color:#FFFFFF;background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.3)}
[data-theme="dark"] small{color:#FFFFFF !important;opacity:.85}
[data-theme="dark"] .card small{color:#FFFFFF !important;opacity:.85}
[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert.alert-light{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.14) !important;color:#FFFFFF !important}
[data-theme="dark"] .alert-light strong{color:#FFFFFF}
[data-theme="dark"] tfoot th{color:#FFFFFF}
[data-theme="dark"] .card p{color:#FFFFFF !important;opacity:.9}
[data-theme="dark"] .card strong{color:#FFFFFF}
[data-theme="dark"] .card i.bi-info-circle{color:#FFFFFF}
[data-theme="dark"] .card i.bi-box-seam{color:#FFFFFF}
[data-theme="dark"] .card .fs-3{color:#FFFFFF}
[data-theme="dark"] .card .fs-3 i{color:#FFFFFF}
[data-theme="dark"] .card .bi{color:#FFFFFF}
[data-theme="dark"] .dashboard-icon i{color:inherit}
[data-theme="dark"] .omzet-icon{color:#2DD4BF}
[data-theme="dark"] .laba-icon{color:#34D399}
[data-theme="dark"] .produksi-icon{color:#FBBF24}
[data-theme="dark"] .stok-icon{color:#A78BFA}

/* Focus visible */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}