@import "tailwindcss";

@theme {
  /* Hurma-inspired shell: navy sidebar, blue accents, light content area */
  --color-hurma-sidebar: #2c3345;
  --color-hurma-sidebar-hover: #363d52;
  --color-hurma-sidebar-active: #3d4a63;
  --color-hurma-page: #f4f7f9;
  --color-hurma-accent: #7b61ff;
  --color-hurma-accent-bright: #9580ff;

  /* Primary actions / links — brand purple #7B61FF */
  --color-primary: #7b61ff;
  --color-primary-hover: #6347e8;
  --color-primary-50: #f7f5ff;
  --color-primary-100: #ece8ff;
  --color-primary-200: #dcd4ff;
  --color-primary-300: #c4b4ff;
  --color-primary-400: #a890ff;
  --color-primary-500: #8f78ff;
  --color-primary-600: #7b61ff;
  --color-primary-700: #6347e8;
  --color-primary-800: #4f38c4;
  --color-primary-900: #3f2e9e;

  /* Form fields (input styleguide: neutral border, violet focus ring, gray disabled) */
  --color-input-border: #e5e7eb;
  --color-input-focus: #a78bfa;
  --color-input-disabled-bg: #f3f4f6;
}

@layer base {
  body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
  }
}

/* Hurma-style content cards */
@layer components {
  .hurma-card {
    @apply rounded-lg bg-white shadow-sm border border-gray-100/80;
  }

  /**
   * Default text-like controls: text, email, password, search, date, textarea, select.
   * Normal: white bg, light border; Focus: violet border + soft ring; Disabled: gray fill.
   */
  .form-input {
    @apply block w-full rounded-md border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm;
    @apply placeholder:text-gray-400;
    @apply focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/25;
    @apply disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:placeholder:text-gray-400;
  }

  .form-input-lg {
    @apply px-4 py-3;
  }

  /**
   * Native file inputs: neutral “add-on” style for the file button.
   */
  .form-file {
    @apply mt-1 block w-full text-sm text-gray-500;
    @apply file:mr-4 file:rounded-md file:border file:border-gray-200 file:bg-gray-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-gray-700;
    @apply hover:file:bg-gray-100;
  }

  /**
   * Native <select> — styleguide: neutral border, periwinkle hover/focus, chevron, disabled gray fill.
   * Modifiers: form-select--success (green + check + chevron), form-select--error (red + alert + chevron).
   */
  .form-select {
    @apply block w-full cursor-pointer appearance-none rounded-md border border-gray-200 bg-white px-3 py-2.5 pr-10 text-left text-sm text-gray-900 shadow-sm transition-colors;
    @apply hover:border-violet-300;
    @apply focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/25;
    @apply disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1.25rem 1.25rem;
  }

  .form-select-lg {
    @apply px-4 py-3 pr-11;
    background-position: right 0.85rem center;
  }

  .form-select--success {
    @apply border-emerald-400 hover:border-emerald-500 focus:border-emerald-500 focus:ring-emerald-400/25;
    @apply pr-14;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 2.15rem center, right 0.65rem center;
    background-size: 1.125rem 1.125rem, 1.25rem 1.25rem;
  }

  .form-select-lg.form-select--success {
    @apply pr-16;
    background-position: right 2.35rem center, right 0.85rem center;
  }

  .form-select--error {
    @apply border-red-300 hover:border-red-400 focus:border-red-400 focus:ring-red-400/20;
    @apply pr-14;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f87171' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 2.1rem center, right 0.65rem center;
    background-size: 1.25rem 1.25rem, 1.25rem 1.25rem;
  }

  .form-select-lg.form-select--error {
    @apply pr-16;
    background-position: right 2.3rem center, right 0.85rem center;
  }

  /* Amber “status” section: keep warm border; focus still uses violet ring */
  .form-select.form-select--warning {
    @apply border-amber-200 hover:border-amber-300;
    @apply focus:border-violet-400 focus:ring-violet-400/25;
  }

  /**
   * Multi-select (custom): trigger matches .form-select border/hover/focus; pills + checkbox panel.
   */
  .form-multi-select {
    @apply relative;
  }

  .form-multi-select-trigger {
    @apply relative flex min-h-[2.75rem] w-full cursor-pointer items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-2 pr-10 text-left shadow-sm transition-colors;
    @apply hover:border-violet-300;
    @apply focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/25;
  }

  .form-multi-select-lg .form-multi-select-trigger {
    @apply min-h-[3.25rem] px-4 py-2.5 pr-11;
  }

  .form-multi-select-pills {
    @apply flex min-h-[1.5rem] min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 text-left;
  }

  .form-multi-select-chevron {
    @apply pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 transition-transform duration-150;
  }

  .form-multi-select-lg .form-multi-select-chevron {
    @apply right-3.5;
  }

  .form-multi-select-panel {
    @apply absolute left-0 right-0 top-full z-30 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg;
  }

  .form-multi-select-option {
    @apply flex cursor-pointer items-center gap-2.5 px-3 py-2 transition-colors hover:bg-gray-50;
  }

  /**
   * Standalone filter row (e.g. checkbox) — same footprint as .form-multi-select-lg trigger.
   */
  .form-filter-toggle-lg {
    @apply flex min-h-[3.25rem] w-full cursor-pointer items-center gap-3 rounded-md border border-gray-200 bg-white px-4 py-2.5 shadow-sm transition-colors;
    @apply hover:border-violet-300;
  }

  .form-filter-toggle-lg:focus-within {
    @apply border-violet-400 ring-2 ring-violet-400/25;
  }

  .form-filter-toggle-lg input[type="checkbox"] {
    @apply h-5 w-5 shrink-0 rounded border-gray-300 text-primary-600;
    @apply focus:outline-none focus:ring-2 focus:ring-violet-400/40;
  }
}