@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
}

body {
  @apply bg-surface-base text-text-primary antialiased;
}

.dark {
  color-scheme: dark;
}

.dark body {
  @apply bg-slate-950 text-slate-100;
}

/* Global token remap for dark mode so hardcoded light utilities stay consistent */
.dark .bg-surface-base {
  background-color: rgb(2 6 23);
}

.dark .bg-surface-card {
  background-color: rgb(15 23 42);
}

.dark .border-surface-border {
  border-color: rgb(51 65 85);
}

.dark .text-text-primary {
  color: rgb(241 245 249);
}

.dark .text-text-secondary {
  color: rgb(148 163 184);
}

.dark .bg-white {
  background-color: rgb(15 23 42);
}

.dark .bg-white\/95 {
  background-color: rgb(2 6 23 / 0.95);
}

.dark .bg-white\/90 {
  background-color: rgb(15 23 42 / 0.9);
}

.dark .bg-white\/80 {
  background-color: rgb(15 23 42 / 0.8);
}

.dark .bg-white\/75 {
  background-color: rgb(15 23 42 / 0.75);
}

.dark .bg-white\/70 {
  background-color: rgb(15 23 42 / 0.7);
}

.dark .bg-brand-50,
.dark .bg-brand-50\/70,
.dark .bg-brand-50\/60,
.dark .bg-brand-50\/40,
.dark .bg-brand-50\/30 {
  background-color: rgb(30 41 59);
}

.dark .bg-brand-100 {
  background-color: rgb(30 58 95 / 0.45);
}

.dark .text-brand-800 {
  color: rgb(147 197 253);
}

.dark .from-brand-50,
.dark .from-brand-50\/80 {
  --tw-gradient-from: rgb(30 41 59) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .to-white {
  --tw-gradient-to: rgb(15 23 42) var(--tw-gradient-to-position);
}

.card {
  @apply rounded-2xl border border-surface-border bg-surface-card shadow-soft;
}

.card-muted {
  @apply rounded-2xl border border-surface-border bg-white/80 backdrop-blur-sm;
}

.input {
  @apply h-11 w-full rounded-xl border border-surface-border bg-white px-4 text-sm text-text-primary outline-none transition placeholder:text-text-secondary/60 focus:border-brand-500 focus:shadow-glow;
}

.select-field {
  @apply input appearance-none pr-10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.date-field {
  @apply input;
}

.date-field::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  filter: hue-rotate(195deg) saturate(1.2);
}

.checkbox-field {
  @apply h-4 w-4 cursor-pointer appearance-none rounded border border-surface-border bg-white align-middle transition;
}

.checkbox-field:checked {
  border-color: #4f8cff;
  background-color: #4f8cff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5L8.5 14L15 7.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.btn-primary {
  @apply inline-flex items-center justify-center rounded-xl bg-brand-500 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-brand-700 active:scale-[0.99];
}

.btn-primary:disabled {
  @apply cursor-not-allowed opacity-60 hover:bg-brand-500;
}

.btn-ghost {
  @apply inline-flex items-center justify-center rounded-xl border border-surface-border bg-white px-4 py-2.5 text-sm font-medium text-text-primary transition hover:border-brand-300 hover:bg-brand-50;
}

.chip {
  @apply inline-flex items-center rounded-full border border-brand-100 bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700;
}

.sidebar-shell {
  @apply border-r border-surface-border bg-white/90;
}

.sidebar-brand {
  @apply rounded-2xl border border-surface-border bg-gradient-to-b from-white to-brand-50/50;
}

.sidebar-link {
  @apply relative rounded-xl text-text-secondary outline-none transition-all duration-200 ease-out focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white active:scale-[0.98] dark:focus-visible:ring-offset-slate-950;
}

.sidebar-link-idle {
  @apply hover:translate-x-0.5 hover:bg-brand-50/70 hover:text-text-primary;
}

.sidebar-link-active {
  @apply bg-brand-50 text-brand-700 shadow-[inset_0_0_0_1px_rgba(79,140,255,0.25)];
}

.sidebar-link-active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%) scaleY(0.6);
  background: rgb(79 140 255);
  opacity: 0;
  animation: sidebar-active-bar 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sidebar-active-bar {
  to {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
}

.dark .card {
  @apply border-slate-800 bg-slate-900 shadow-none;
}

.dark .card-muted {
  @apply border-slate-800 bg-slate-900/70;
}

.dark .input {
  @apply border-slate-700 bg-slate-900 text-slate-100 placeholder:text-slate-400 focus:border-brand-300;
}

.dark .select-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dark .date-field::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

.dark .checkbox-field {
  @apply border-slate-600 bg-slate-900;
}

.dark .btn-ghost {
  @apply border-slate-700 bg-slate-900 text-slate-100 hover:border-brand-300 hover:bg-slate-800;
}

.dark .chip {
  @apply border-brand-300/20 bg-brand-500/15 text-brand-300;
}

.dark header,
.dark aside {
  @apply border-slate-800 bg-slate-950/85;
}

.dark .hover\:bg-brand-50:hover {
  background-color: rgb(30 41 59);
}

.dark .hover\:bg-brand-50\/40:hover {
  background-color: rgb(51 65 85);
}

.dark .hover\:bg-brand-50\/30:hover {
  background-color: rgb(51 65 85);
}

.dark .sidebar-shell {
  @apply border-slate-800 bg-slate-950/90;
}

.dark .sidebar-brand {
  @apply border-slate-800 bg-gradient-to-b from-slate-900 to-slate-900/70;
}

.dark .sidebar-link-idle {
  @apply text-slate-300 hover:bg-slate-800/80 hover:text-slate-100;
}

.dark .sidebar-link-active {
  @apply bg-slate-800/90 text-brand-300 shadow-[inset_0_0_0_1px_rgba(122,178,255,0.25)];
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  @apply text-slate-100;
}

.dark p,
.dark li,
.dark label {
  @apply text-slate-300;
}

/* Normalize ApexCharts surface across themes */
.apexcharts-canvas,
.apexcharts-svg,
.apexcharts-inner,
.apexcharts-graphical,
.apexcharts-grid,
.apexcharts-plot-area {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.apexcharts-canvas svg,
.apexcharts-canvas foreignObject {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.apexcharts-gridline,
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
  stroke: #e5eef9 !important;
}

.apexcharts-tooltip {
  border: 1px solid #e5eef9 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.dark .apexcharts-canvas,
.dark .apexcharts-svg,
.dark .apexcharts-inner,
.dark .apexcharts-graphical,
.dark .apexcharts-grid,
.dark .apexcharts-plot-area {
  background: #0f172a !important;
  background-color: #0f172a !important;
}

.dark .apexcharts-canvas svg,
.dark .apexcharts-canvas foreignObject {
  background: #0f172a !important;
  background-color: #0f172a !important;
}

.dark .apexcharts-gridline,
.dark .apexcharts-xcrosshairs,
.dark .apexcharts-ycrosshairs {
  stroke: #334155 !important;
}

.dark .apexcharts-tooltip {
  border-color: #334155 !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45) !important;
}

/* Transisi halaman global (Nuxt app.pageTransition name: "page") */
.page-enter-active,
.page-leave-active {
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-leave-active {
  transition-duration: 0.18s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.page-enter-to,
.page-leave-from {
  opacity: 1;
  transform: translateY(0);
}