/* ONETINY SOFT LIGHT THEME V1 */
/* Konsep:
   - sidebar tetap gelap
   - area konten terang lembut
   - teks gelap jelas
   - visual rapi, tidak silau, tidak norak
*/

:root {
  --ot-bg: #f5f7fb;
  --ot-panel: #ffffff;
  --ot-panel-soft: #f8fafc;
  --ot-border: #dbe3ee;
  --ot-border-strong: #cbd5e1;
  --ot-text: #0f172a;
  --ot-text-soft: #475569;
  --ot-text-faint: #64748b;
  --ot-accent: #1f2937;
  --ot-accent-soft: #e8eef7;
  --ot-danger-bg: #fff1f2;
  --ot-danger-border: #fecdd3;
  --ot-danger-text: #b91c1c;
  --ot-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* =========================
   GLOBAL CONTENT AREA
   ========================= */
html, body {
  background: var(--ot-bg) !important;
  color: var(--ot-text) !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Jaga sidebar tetap dark */
aside,
aside * {
  /* biarkan style sidebar existing menang */
}

/* Seluruh area selain sidebar */
main,
main * {
  box-sizing: border-box;
}

/* Background konten utama */
main,
main[class],
div[class*="w-full px-8"],
div[class*="w-full px-8 md:px-12"],
div[class*="w-full px-8 md:px-12 py-8"] {
  background: transparent !important;
  color: var(--ot-text) !important;
}

/* Heading & teks umum */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main .font-display,
main .text-ink,
main .text-signal,
main .text-white,
main .text-slate-50,
main .text-slate-100,
main .text-slate-200 {
  color: var(--ot-text) !important;
  -webkit-text-fill-color: var(--ot-text) !important;
}

main p,
main span,
main label,
main small,
main div,
main td,
main th,
main li {
  color: inherit;
}

main .text-ink-dim,
main .text-ink-faint,
main .text-slate-400,
main .text-slate-500,
main .text-slate-600 {
  color: var(--ot-text-soft) !important;
  -webkit-text-fill-color: var(--ot-text-soft) !important;
}

/* =========================
   PANEL / CARD
   ========================= */
main .rounded-2xl,
main .rounded-xl,
main .rounded-lg,
main .rounded-md {
  border-color: var(--ot-border) !important;
}

main section,
main article,
main .bg-base,
main .bg-base-panel,
main .bg-white,
main .bg-signal-lo,
main .bg-zinc-900\/5,
main .bg-zinc-900\/10,
main [class*="bg-base-panel"],
main [class*="bg-base"],
main [class*="bg-white"] {
  background: var(--ot-panel) !important;
  color: var(--ot-text) !important;
}

main .shadow,
main .shadow-sm,
main .shadow-md,
main .shadow-lg {
  box-shadow: var(--ot-shadow) !important;
}

/* Kartu trafik, aktivitas, form */
main .border,
main [class*="border"] {
  border-color: var(--ot-border) !important;
}

/* =========================
   HERO / DECORATIVE LINE
   ========================= */
main .compress-rule {
  background: linear-gradient(
    90deg,
    transparent,
    #cbd5e1 18%,
    #cbd5e1 82%,
    transparent
  ) !important;
}
main .compress-rule::before,
main .compress-rule::after {
  background: #e11d48 !important;
}

/* =========================
   METRIC NUMBERS
   ========================= */
main .font-mono,
main .tabular-nums,
main [class*="text-2xl"],
main [class*="text-3xl"],
main [class*="text-4xl"] {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
  opacity: 1 !important;
  letter-spacing: -0.02em;
}

/* Label di bawah angka */
main .text-sm,
main .text-xs {
  color: var(--ot-text-soft);
}

/* =========================
   ALERT / ERROR
   ========================= */
main .bg-red-500\/10,
main .bg-red-900\/20,
main .border-red-500\/20,
main .text-red-300,
main .text-red-400,
main .text-red-500 {
  background: var(--ot-danger-bg) !important;
  border-color: var(--ot-danger-border) !important;
  color: var(--ot-danger-text) !important;
  -webkit-text-fill-color: var(--ot-danger-text) !important;
}

/* =========================
   BUTTONS / TOGGLES / BADGES
   ========================= */
main button,
main .inline-flex,
main .flex.items-center.justify-center {
  border-color: var(--ot-border-strong);
}

/* Toggle kanan atas: tetap dark elegan */
main button[class*="bg-black"],
main button[class*="bg-zinc-"],
main button[class*="bg-slate-"],
main button[class*="bg-gray-"],
main [class*="bg-[#0"] {
  background: #0f172a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #0f172a !important;
}

main button[class*="bg-black"] *,
main button[class*="bg-zinc-"] *,
main button[class*="bg-slate-"] *,
main button[class*="bg-gray-"] *,
main [class*="bg-[#0"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Tombol biasa */
main button:not([class*="bg-black"]):not([class*="bg-zinc-"]):not([class*="bg-slate-"]):not([class*="bg-gray-"]):not([class*="bg-[#0"]) {
  background: #ffffff !important;
  color: var(--ot-text) !important;
  border: 1px solid var(--ot-border) !important;
}

/* =========================
   FORM
   ========================= */
main input,
main select,
main textarea {
  background: #ffffff !important;
  color: var(--ot-text) !important;
  -webkit-text-fill-color: var(--ot-text) !important;
  border: 1px solid var(--ot-border-strong) !important;
  box-shadow: none !important;
}

main input::placeholder,
main textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

main input:focus,
main select:focus,
main textarea:focus,
main button:focus {
  outline: none !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18) !important;
}

/* =========================
   CHART / SVG
   ========================= */
main svg text,
main svg tspan {
  fill: #334155 !important;
}

main svg line,
main svg path {
  stroke-opacity: 1;
}

/* gridline lembut */
main svg line[stroke],
main svg path[stroke] {
  stroke: #d7dee9 !important;
}

/* batang grafik / area data */
main svg rect,
main svg path[fill]:not([fill="none"]),
main svg circle {
  fill-opacity: 1 !important;
}

/* kalau chart batang gelap, biarkan gelap elegan */
main svg rect {
  fill: #0f172a !important;
}

/* Pastikan text chart terbaca */
main svg text {
  font-weight: 500;
}

/* =========================
   TABLE / ACTIVITY LIST
   ========================= */
main table,
main tbody,
main thead,
main tr,
main td,
main th {
  background: transparent !important;
  color: var(--ot-text) !important;
  border-color: var(--ot-border) !important;
}

/* Badge kanan "15 klik terakhir" */
main .rounded-full {
  border-color: var(--ot-border) !important;
}

/* =========================
   TOP BAR AVATAR AREA
   ========================= */
header,
header * {
  color: var(--ot-text) !important;
}

header .rounded-full,
main .rounded-full {
  background-clip: padding-box;
}

/* =========================
   WHITE CONTENT WRAPPER TONE
   ========================= */
main > div,
main > section,
main > article {
  color: var(--ot-text) !important;
}

/* =========================
   SAFETY: jangan sentuh sidebar
   ========================= */
aside {
  background: #08111f !important;
}

aside .bg-white\/20,
aside .bg-white\/10 {
  background: rgba(255,255,255,0.12) !important;
}

aside * {
  color: #ffffff !important;
  -webkit-text-fill-color: initial;
}