@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

@layer base {
  :root {
    --background: #ffffff;
    --foreground: #09090b;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #18181b;
    --primary: #18181b;
    --primary-foreground: #fafafa;
    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --destructive: #fee2e2;
    --destructive-foreground: #ef4444;
    --success: #dcfce7;
    --success-foreground: #16a34a;
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --radius: 0.5rem;
  }

  .dark {
    --background: #09090b;
    --foreground: #fafafa;
    --border: #27272a;
    --input: #27272a;
    --ring: #d4d4d8;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --destructive: #7b1414;
    --destructive-foreground: #f87171;
    --success: #162d16;
    --success-foreground: #4ade80;
    --accent: #27272a;
    --accent-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Calendar picker icon: hitam di light mode, putih di dark mode */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0);
  opacity: 0.8;
  cursor: pointer;
}

.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}