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

/* ────────────────────────────────────────────────
   Custom Design Tokens (very easy to change later)
   ──────────────────────────────────────────────── */
:root {
  /* Primary (blue) */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* Success (green) */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;

  /* Danger / Declined (red) */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;

  /* Warning (amber) */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* Info (cyan) */
  --color-info-50:  #ecfeff;
  --color-info-100: #cffafe;
  --color-info-200: #a5f3fc;
  --color-info-300: #67e8f9;
  --color-info-400: #22d3ee;
  --color-info-500: #06b6d4;
  --color-info-600: #0891b2;
  --color-info-700: #0e7490;
  --color-info-800: #155e75;
  --color-info-900: #164e63;

  /* Neutral grays */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Text */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:     var(--color-gray-500);
  --color-text-disabled:  var(--color-gray-400);

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);

  /* Borders */
  --border-color: var(--color-gray-200);
  --border-color-dark: var(--color-gray-300);

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Spacing */
  --spacing-page-x: 1.5rem;
  --spacing-page-y: 2rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary:   #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-text-muted:     #6b7280;
    --color-text-disabled:  #4b5563;

    --bg-primary: #030712;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;

    --border-color: #374151;
    --border-color-dark: #4b5563;

    --color-gray-50:  #030712;
    --color-gray-100: #111827;
    --color-gray-200: #1f2937;
    --color-gray-300: #374151;
    --color-gray-400: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-600: #9ca3af;
    --color-gray-700: #d1d5db;
    --color-gray-800: #e5e7eb;
    --color-gray-900: #f3f4f6;
    --color-gray-950: #f9fafb;
  }
}

/* ────────────────────────────────────────────────
   Global resets & base styles
   ──────────────────────────────────────────────── */
html {
  @apply h-full antialiased;
  scroll-behavior: smooth;
}

body {
  @apply min-h-full bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100;
  font-feature-settings: "cv03", "cv04", "ss01";
}

/* Selection styling */
::selection {
  @apply bg-blue-200 text-blue-900 dark:bg-blue-800 dark:text-blue-100;
}

/* Focus ring - blue everywhere with improved visibility */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
  @apply transition-shadow duration-150;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ────────────────────────────────────────────────
   Buttons (no gradients, solid + hover darken/lighten)
   ──────────────────────────────────────────────── */
.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed select-none;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-blue-500;
}

.btn-outline {
  @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-600;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 active:bg-green-800 focus:ring-green-500;
}

.btn-warning {
  @apply bg-amber-600 text-white hover:bg-amber-700 active:bg-amber-800 focus:ring-amber-500;
}

.btn-ghost {
  @apply bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus:ring-gray-300 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-700;
}

.btn-link {
  @apply bg-transparent text-blue-600 hover:text-blue-700 hover:underline focus:ring-blue-500 dark:text-blue-400 dark:hover:text-blue-300;
}

/* Button sizes */
.btn-xs { @apply px-2.5 py-1 text-xs; }
.btn-sm { @apply px-3.5 py-1.5 text-sm; }
.btn-md { @apply px-5 py-2.5 text-base; }
.btn-lg { @apply px-7 py-3 text-lg; }
.btn-xl { @apply px-8 py-4 text-xl; }

/* Icon-only buttons */
.btn-icon {
  @apply p-2;
}

.btn-icon.btn-sm { @apply p-1.5; }
.btn-icon.btn-lg { @apply p-3; }

/* Button loading state */
.btn-loading {
  @apply relative text-transparent hover:text-transparent cursor-wait;
}

.btn-loading::after {
  content: "";
  @apply absolute inset-0 m-auto w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

/* ────────────────────────────────────────────────
   Alerts / Flash messages
   ──────────────────────────────────────────────── */
.alert {
  @apply rounded-lg border p-4 flex items-start gap-3 shadow-sm;
}

.alert-success {
  @apply bg-green-50 border-green-200 text-green-800 dark:bg-green-950/40 dark:border-green-800 dark:text-green-200;
}

.alert-danger,
.alert-error {
  @apply bg-red-50 border-red-200 text-red-800 dark:bg-red-950/40 dark:border-red-800 dark:text-red-200;
}

.alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950/40 dark:border-blue-800 dark:text-blue-200;
}

.alert-warning {
  @apply bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-950/40 dark:border-amber-800 dark:text-amber-200;
}

.alert-title {
  @apply font-semibold mb-1;
}

.alert-description {
  @apply text-sm opacity-90;
}

/* ────────────────────────────────────────────────
   Badges & Pills
   ──────────────────────────────────────────────── */
.badge {
  @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300;
}

.badge-success {
  @apply bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300;
}

.badge-danger {
  @apply bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300;
}

.badge-warning {
  @apply bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300;
}

.badge-gray {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300;
}

/* Outline variants */
.badge-outline {
  @apply border-2;
}

.badge-outline.badge-primary {
  @apply bg-transparent border-blue-600 text-blue-700 dark:border-blue-400 dark:text-blue-300;
}

.badge-outline.badge-success {
  @apply bg-transparent border-green-600 text-green-700 dark:border-green-400 dark:text-green-300;
}

/* ────────────────────────────────────────────────
   Cards & containers
   ──────────────────────────────────────────────── */
.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-200 dark:border-gray-700 overflow-hidden;
}

.card-interactive {
  @apply card transition-all duration-200 hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 cursor-pointer;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/70 dark:bg-gray-900/50;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50/70 dark:bg-gray-900/50;
}

.section-title {
  @apply text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6;
}

.section-subtitle {
  @apply text-sm text-gray-600 dark:text-gray-400 mt-1;
}

/* ────────────────────────────────────────────────
   Tables (used in history, invoices, etc.)
   ──────────────────────────────────────────────── */
.table-container {
  @apply overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700;
}

.table {
  @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-head {
  @apply bg-gray-50 dark:bg-gray-900/60;
}

.table-th {
  @apply px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300;
}

.table-th-sortable {
  @apply table-th cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
}

.table-td {
  @apply px-6 py-4 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap;
}

.table-row {
  @apply hover:bg-blue-50/40 dark:hover:bg-blue-950/30 transition-colors;
}

.table-row-selected {
  @apply bg-blue-50 dark:bg-blue-950/50;
}

/* Responsive table */
.table-responsive {
  @apply block overflow-x-auto whitespace-nowrap;
}

/* ────────────────────────────────────────────────
   Forms & inputs
   ──────────────────────────────────────────────── */
.form-group {
  @apply mb-4;
}

.label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
}

.label-required::after {
  content: " *";
  @apply text-red-500;
}

.input {
  @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 transition-colors;
}

.input-error {
  @apply border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-600 dark:text-red-200 dark:placeholder-red-400 dark:focus:border-red-500 dark:focus:ring-red-500;
}

.input-success {
  @apply border-green-300 focus:border-green-500 focus:ring-green-500 dark:border-green-600 dark:focus:border-green-500 dark:focus:ring-green-500;
}

.input-disabled {
  @apply bg-gray-100 cursor-not-allowed opacity-60 dark:bg-gray-900;
}

.help-text {
  @apply mt-1.5 text-sm text-gray-600 dark:text-gray-400;
}

.error-text {
  @apply mt-1.5 text-sm text-red-600 dark:text-red-400;
}

/* Input groups */
.input-group {
  @apply relative flex items-stretch;
}

.input-group-text {
  @apply inline-flex items-center px-3 text-sm text-gray-600 bg-gray-50 border border-gray-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-400;
}

.input-group-text:first-child {
  @apply rounded-l-lg border-r-0;
}

.input-group-text:last-child {
  @apply rounded-r-lg border-l-0;
}

.input-group .input {
  @apply flex-1;
}

/* Checkbox & Radio */
.checkbox,
.radio {
  @apply h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-blue-500;
}

.radio {
  @apply rounded-full;
}

/* Select */
.select {
  @apply input appearance-none bg-no-repeat;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Textarea */
.textarea {
  @apply input resize-y min-h-[100px];
}

/* Toggle/Switch */
.toggle {
  @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer;
}

.toggle-checked {
  @apply bg-blue-600;
}

.toggle-unchecked {
  @apply bg-gray-200 dark:bg-gray-700;
}

.toggle-thumb {
  @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
}

.toggle-thumb-checked {
  @apply translate-x-6;
}

.toggle-thumb-unchecked {
  @apply translate-x-1;
}

/* ────────────────────────────────────────────────
   Modals & Overlays
   ──────────────────────────────────────────────── */
.modal-overlay {
  @apply fixed inset-0 bg-gray-900/50 dark:bg-gray-950/80 backdrop-blur-sm z-40 transition-opacity;
}

.modal {
  @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-container {
  @apply flex min-h-full items-center justify-center p-4;
}

.modal-content {
  @apply relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full p-6 transform transition-all;
}

.modal-header {
  @apply flex items-start justify-between mb-4;
}

.modal-title {
  @apply text-xl font-semibold text-gray-900 dark:text-gray-100;
}

.modal-close {
  @apply text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors;
}

.modal-body {
  @apply text-gray-700 dark:text-gray-300;
}

.modal-footer {
  @apply flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700;
}

/* ────────────────────────────────────────────────
   Tooltips & Popovers
   ──────────────────────────────────────────────── */
.tooltip {
  @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg dark:bg-gray-700;
}

.tooltip-arrow {
  @apply absolute w-2 h-2 bg-gray-900 dark:bg-gray-700 transform rotate-45;
}

/* ────────────────────────────────────────────────
   Loading & Skeleton
   ──────────────────────────────────────────────── */
.spinner {
  @apply inline-block w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin;
}

.spinner-lg { @apply w-8 h-8 border-4; }
.spinner-sm { @apply w-4 h-4; }

.skeleton {
  @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

.skeleton-text {
  @apply skeleton h-4 w-full mb-2;
}

.skeleton-circle {
  @apply skeleton rounded-full;
}

/* ────────────────────────────────────────────────
   Dividers
   ──────────────────────────────────────────────── */
.divider {
  @apply border-t border-gray-200 dark:border-gray-700 my-6;
}

.divider-vertical {
  @apply border-l border-gray-200 dark:border-gray-700 mx-4 h-full;
}

.divider-text {
  @apply relative flex items-center;
}

.divider-text::before,
.divider-text::after {
  content: "";
  @apply flex-1 border-t border-gray-200 dark:border-gray-700;
}

.divider-text span {
  @apply px-4 text-sm text-gray-600 dark:text-gray-400;
}

/* ────────────────────────────────────────────────
   Pre / code blocks (history, receipts preview, etc.)
   ──────────────────────────────────────────────── */
pre, code {
  @apply font-mono text-sm;
}

pre {
  @apply bg-gray-50 dark:bg-gray-900/70 p-4 rounded-lg border border-gray-200 dark:border-gray-700 overflow-auto whitespace-pre-wrap break-all max-h-96;
}

code {
  @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-red-600 dark:text-red-400;
}

pre code {
  @apply bg-transparent p-0 text-gray-800 dark:text-gray-200;
}

/* ────────────────────────────────────────────────
   Pagination (matches history page)
   ──────────────────────────────────────────────── */
.pagination-container {
  @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50/70 dark:bg-gray-900/40;
}

.pagination {
  @apply flex items-center gap-1;
}

.page-link {
  @apply px-4 py-2 text-sm font-medium rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700;
}

.page-link-active {
  @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}

.page-link-disabled {
  @apply opacity-50 cursor-not-allowed hover:bg-white dark:hover:bg-gray-800 pointer-events-none;
}

.pagination-info {
  @apply text-sm text-gray-600 dark:text-gray-400;
}

/* ────────────────────────────────────────────────
   Navigation & Tabs
   ──────────────────────────────────────────────── */
.nav-tabs {
  @apply flex border-b border-gray-200 dark:border-gray-700;
}

.nav-tab {
  @apply px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:border-gray-300 border-b-2 border-transparent transition-colors dark:text-gray-400 dark:hover:text-gray-200;
}

.nav-tab-active {
  @apply text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-400;
}

/* Pills */
.nav-pills {
  @apply flex gap-2;
}

.nav-pill {
  @apply px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors dark:text-gray-300 dark:hover:bg-gray-800;
}

.nav-pill-active {
  @apply bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300;
}

/* ────────────────────────────────────────────────
   Lists
   ──────────────────────────────────────────────── */
.list-group {
  @apply divide-y divide-gray-200 dark:divide-gray-700 rounded-lg border border-gray-200 dark:border-gray-700;
}

.list-group-item {
  @apply p-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors;
}

.list-group-item-active {
  @apply bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300;
}

/* ────────────────────────────────────────────────
   Progress Bars
   ──────────────────────────────────────────────── */
.progress {
  @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden h-2;
}

.progress-bar {
  @apply h-full bg-blue-600 transition-all duration-300;
}

.progress-bar-success {
  @apply bg-green-600;
}

.progress-bar-danger {
  @apply bg-red-600;
}

.progress-bar-warning {
  @apply bg-amber-600;
}

.progress-lg { @apply h-4; }
.progress-sm { @apply h-1; }

/* ────────────────────────────────────────────────
   Misc helpers
   ──────────────────────────────────────────────── */
.text-balance {
  text-wrap: balance;
}

.break-words {
  word-break: break-word;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@layer utilities {
  .bg-blue-600 { background-color: rgb(37 99 235); }
  .bg-blue-700 { background-color: rgb(29 78 216); }
  .border-blue-700 { border-color: rgb(29 78 216); }
}
/* Force visible text color on all form inputs */
input, textarea, select {
    @apply text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500;
}

/* Make sure autofill doesn't ruin readability */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important; /* white bg */
    -webkit-text-fill-color: #111827 !important; /* gray-900 */
    transition: background-color 5000s ease-in-out 0s; /* hack to prevent flash */
}

/* Dark mode autofill fix */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1f2937 inset !important; /* gray-800 */
    -webkit-text-fill-color: #f3f4f6 !important; /* gray-100 */
}

/* Stronger focus styles – make sure user sees where they are typing */
input:focus, textarea:focus, select:focus {
    @apply border-blue-500 ring-2 ring-blue-500 ring-opacity-50 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
}

/* Fix placeholder visibility */
::placeholder {
    @apply text-gray-400 dark:text-gray-500 opacity-100;
}