/* ============================================================
   Oxina — app shell + reusable components
   Depends on tokens.css (load tokens.css first)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--rose-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--ink);margin:0 0 var(--sp-3)}
h1{font-size:1.85rem;letter-spacing:.2px}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
small{color:var(--muted)}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px}

/* ---------- Layout shell ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:224px;flex:0 0 224px;
  background:var(--sand);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{padding:var(--sp-5) var(--sp-5) var(--sp-4);border-bottom:1px solid var(--line)}
.brand .mark{
  font-family:var(--font-display);
  font-size:2rem;font-weight:600;letter-spacing:3px;
  color:var(--ink);line-height:1;display:block;
}
.brand .sub{
  display:block;margin-top:6px;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;
}
.brand .view-tag{
  display:inline-block;margin-top:var(--sp-3);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-deep);background:rgba(169,118,92,.1);
  padding:3px 9px;border-radius:999px;font-weight:500;
}
.nav{display:flex;flex-direction:column;padding:var(--sp-3) var(--sp-3);gap:2px;flex:1;overflow-y:auto}
.nav a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:9px var(--sp-3);border-radius:var(--radius-sm);
  color:var(--muted);font-weight:500;font-size:.9rem;letter-spacing:.01em;
  text-decoration:none;transition:background .12s,color .12s;
}
.nav a .ic{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.55);color:var(--ink);text-decoration:none}
.nav a.active{background:var(--surface);color:var(--rose-deep);box-shadow:var(--shadow)}
.nav a.active .ic{opacity:1}
.sidebar .who{
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);
}
.sidebar .who .name{display:block;color:var(--ink);font-weight:500;font-size:.9rem}
.sidebar .who .role{text-transform:capitalize;font-size:.72rem;letter-spacing:.06em;color:var(--taupe)}
.sidebar .who form{margin-top:var(--sp-2)}
.logout-btn{
  background:none;border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:.78rem;padding:5px 10px;border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color .12s,color .12s;
}
.logout-btn:hover{border-color:var(--rose-deep);color:var(--rose-deep)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);
  background:var(--cream);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar .page-title{font-family:var(--font-display);font-size:1.5rem;font-weight:500;margin:0}
.topbar .spacer{flex:1}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink)}
.content{padding:var(--sp-6);max-width:1400px;width:100%}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.card.pad-lg{padding:var(--sp-6)}
.card-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-head h2,.card-head h3{margin:0}
.card-head .spacer{flex:1}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow)}
.stat .label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);font-weight:500}
.stat .value{font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:500;font-size:.9rem;letter-spacing:.01em;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .06s;
  text-decoration:none;line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--rose-deep);color:#fff}
.btn-primary:hover{background:#96694f;text-decoration:none;color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--taupe);text-decoration:none}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{background:var(--sand);color:var(--ink);text-decoration:none}
.btn-danger{background:transparent;color:#a4453a;border-color:#e2c3bd}
.btn-danger:hover{background:#a4453a;color:#fff;text-decoration:none}
.btn-sm{padding:5px 11px;font-size:.82rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--muted);margin-bottom:5px;text-transform:uppercase}
.input,input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 11px;transition:border-color .12s,box-shadow .12s;
}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(198,163,152,.22);
}
textarea{resize:vertical;min-height:70px}
.form-row{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.form-row .field{flex:1;min-width:160px}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.check label{margin:0;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink)}

/* ---------- Tables (dense, tabular) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data thead th{
  background:var(--sand);color:var(--muted);font-weight:600;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  position:sticky;top:0;z-index:1;
}
table.data tbody tr:hover{background:rgba(236,226,210,.4)}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tfoot td{background:var(--sand-2);font-weight:600;border-top:2px solid var(--taupe)}
table.data.dense th,table.data.dense td{padding:5px 10px;font-size:.84rem}

/* ---------- Status badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;line-height:1.3;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-keep{color:var(--st-keep);background:rgba(169,118,92,.12)}
.badge-siap{color:var(--st-siap);background:rgba(139,145,132,.15)}
.badge-terkirim{color:var(--st-terkirim);background:rgba(156,145,127,.15)}
.badge-selesai{color:var(--sage);background:rgba(139,145,132,.15)}
.badge-batal{color:#a4453a;background:rgba(164,69,58,.1)}
.badge-neutral{color:var(--muted);background:var(--sand)}

/* ---------- Flash / toast ---------- */
.flash-stack{margin-bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.flash{
  padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.flash-success{border-color:#bcd0be;background:#eef5ee;color:#3a5a3d}
.flash-error{border-color:#e2c3bd;background:#f8ece9;color:#8a3a30}
.flash-info{border-color:var(--sand-2);background:var(--sand);color:var(--muted)}

#toast-stack{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{
  padding:11px 15px;border-radius:var(--radius-sm);font-size:.88rem;color:#fff;
  background:var(--ink);box-shadow:0 6px 18px rgba(44,40,35,.22);
  animation:toast-in .18s ease-out;
}
.toast-success{background:#4a7a4d}
.toast-error{background:#a4453a}
.toast-info{background:var(--rose-deep)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ---------- Empty state ---------- */
.empty{
  text-align:center;padding:var(--sp-6) var(--sp-5);color:var(--muted);
}
.empty .mark{font-family:var(--font-display);font-size:2.2rem;color:var(--sand-2);display:block;margin-bottom:var(--sp-2)}

/* ---------- Login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 600px at 50% -10%,rgba(198,163,152,.18),transparent),var(--cream);padding:var(--sp-5)}
.login-card{
  width:100%;max-width:380px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(44,40,35,.1);padding:var(--sp-6)
}
.login-card .brand{border:none;padding:0;text-align:center;margin-bottom:var(--sp-5)}
.login-card .brand .mark{font-size:2.6rem;letter-spacing:5px}
.login-card .brand .sub{letter-spacing:.4em;margin-top:8px}
.login-card .btn-primary{width:100%;padding:11px}
.login-hint{margin-top:var(--sp-4);text-align:center;font-size:.76rem;color:var(--taupe)}

/* ---------- Product picker dropdown (shared: keep modal, order detail modal) ---------- */
.pick-drop{
  position:absolute;left:0;right:0;z-index:50;max-height:220px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(44,40,35,.18);display:none;margin-top:2px;
}
.pick-drop .opt{padding:7px 11px;cursor:pointer;font-size:.85rem;border-bottom:1px solid var(--line)}
.pick-drop .opt:last-child{border-bottom:none}
.pick-drop .opt small{color:var(--muted);margin-left:6px}
.pick-drop .opt small.stok.low{color:#a4453a}
.pick-drop .opt.active,.pick-drop .opt:hover{background:rgba(198,163,152,.16)}
.pick-drop .opt .k{color:var(--rose-deep);font-weight:600;margin-right:6px}
.stok-hint{font-size:.78rem;color:var(--muted);margin:-4px 0 var(--sp-2)}
.stok-hint.low{color:#a4453a;font-weight:600}

/* ---------- Helpers ---------- */
.muted{color:var(--muted)}
.right{text-align:right}
.num{font-variant-numeric:tabular-nums}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.toolbar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.toolbar .spacer{flex:1}
.pill-tabs{display:inline-flex;gap:4px;background:var(--sand);padding:4px;border-radius:999px}
.pill-tabs a{padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--muted)}
.pill-tabs a.active{background:var(--surface);color:var(--rose-deep);box-shadow:var(--shadow);text-decoration:none}
.hidden{display:none !important}

/* ---------- Responsive / mobile ---------- */
@media (max-width:860px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:6px 0 24px rgba(44,40,35,.16);
  }
  .layout.nav-open .sidebar{transform:none}
  .layout.nav-open::after{content:"";position:fixed;inset:0;background:rgba(44,40,35,.35);z-index:50}
  .menu-toggle{display:inline-flex}
  .content{padding:var(--sp-4)}
  .topbar{padding:var(--sp-3) var(--sp-4)}
  .topbar .page-title{font-size:1.25rem}
}