:root {
  --brand: #f97316;
  --brand-dark: #c2410c;
  --accent: #0ea5e9;
  --ink: #0f172a;
  --muted: #64748b;
  --surface: #ffffff;
  --bg: #f8fafc;
  --side-a: #0f172a;
  --side-b: #1e293b;
  --border: #e2e8f0;
  --radius: 14px;
}
[data-theme="dark"] {
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --surface: #111827;
  --bg: #020617;
  --side-a: #0b1220;
  --side-b: #111827;
  --border: #1f2937;
}
* { font-family: 'Plus Jakarta Sans', sans-serif; }
body {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 42%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    var(--bg);
  color: var(--ink);
}
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.app-card { height: 100%; }
.table { color: var(--ink); }
.table thead th { white-space: nowrap; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.app-shell .sidebar {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--side-a), var(--side-b));
  position: sticky;
  top: 0;
}
.app-shell .sidebar a { color: #cbd5e1; text-decoration: none; border-radius: 10px; }
.app-shell .sidebar a:hover,
.app-shell .sidebar a.active { color: #fff; background: rgba(249,115,22,.15); }
.brand-chip {
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  color: #fff;
  border-radius: 12px;
  padding: 12px;
}
.brand-logo { max-height: 34px; max-width: 34px; border-radius: 8px; object-fit: cover; background: #fff; padding: 3px; }
.content-wrapper { padding: 22px; }
.page-hero {
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(249,115,22,.11), rgba(14,165,233,.12));
  border: 1px solid var(--border);
}
.badge-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #fff; }
.badge-menunggu { background: #64748b; }
.badge-proses { background: #3b82f6; }
.badge-sparepart { background: #f59e0b; color: #1f2937; }
.badge-selesai { background: #22c55e; }
.badge-diambil { background: #166534; }
.theme-toggle { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; width: 36px; height: 36px; }
.theme-toggle:hover { background: rgba(255,255,255,.15); color: #fff; }
.login-wrap {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(249,115,22,.18), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(14,165,233,.16), transparent 40%),
    #f8fafc;
}
.login-card { border: 0; border-radius: 16px; box-shadow: 0 16px 34px rgba(15,23,42,.12); }
.public-header {
  background: linear-gradient(120deg, rgba(249,115,22,.11), rgba(14,165,233,.11));
  border-bottom: 1px solid var(--border);
}
.public-brand-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; padding: 4px; border: 1px solid #e5e7eb; }
.status-chip { border-radius: 999px; padding: 7px 12px; font-size: 12px; border: 1px solid var(--border); background: #fff; }
[data-theme="dark"] .page-hero { background: linear-gradient(120deg, rgba(249,115,22,.16), rgba(14,165,233,.16)); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  background: #0f172a;
  border-color: #1f2937;
  color: #e2e8f0;
}
[data-theme="dark"] .text-muted { color: #94a3b8 !important; }
@media (max-width: 992px) {
  .app-shell .sidebar { min-height: auto; position: static; }
  .content-wrapper { padding: 14px; }
}