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

/* Public site olive button */
@layer components {
  .btn-public-primary {
    @apply bg-gradient-to-b from-olive-800 to-olive-900 text-white;
    box-shadow: 0 2px 8px rgba(61, 90, 34, 0.4);
  }
  .btn-public-primary:hover {
    @apply from-olive-900 to-olive-950;
    box-shadow: 0 3px 12px rgba(61, 90, 34, 0.5);
  }
}

/* Grid Editor Styles */
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  
  /* Excel-like cell styling */
  .grid-cell {
    @apply border border-gray-200 bg-white transition-all duration-150 px-2 py-1;
  }
  
  .grid-cell:focus {
    @apply ring-2 ring-blue-500 ring-opacity-50 outline-none border-blue-300 bg-blue-50;
  }
  
  .grid-cell:hover {
    @apply border-gray-300 bg-gray-50;
  }
  
  /* Modified cell styling */
  .grid-cell.modified {
    @apply bg-yellow-50 border-yellow-300;
  }
  
  .grid-cell.modified:focus {
    @apply bg-yellow-100 border-yellow-400 ring-yellow-200;
  }
  
  /* Save button states */
  .save-button:disabled {
    @apply opacity-50 cursor-not-allowed bg-gray-400 hover:bg-gray-400;
  }
  
  .save-button.loading {
    @apply opacity-75 cursor-wait;
  }
  
  /* Loading spinner */
  .loading-spinner {
    @apply animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full;
  }
  
  /* Sort indicators */
  .sort-indicator {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .sort-indicator:hover {
    @apply scale-110;
  }
  
  /* Sort indicator arrows using CSS pseudo-elements */
  .sort-indicator::before {
    content: "↕";
    @apply opacity-0 transition-opacity duration-200;
  }
  
  .sort-indicator.asc::before {
    content: "↑";
    @apply opacity-100;
  }
  
  .sort-indicator.desc::before {
    content: "↓";
    @apply opacity-100;
  }
  
  .sort-indicator:not(.asc):not(.desc)::before {
    @apply opacity-0 group-hover:opacity-100;
  }
}

/* Tax Pro Offers index */
@layer components {
  .offers-filterbar {
    @apply flex flex-wrap items-center gap-3 bg-white border border-slate-200 rounded-lg px-3 py-2 mb-2;
  }

  .offers-chip {
    @apply inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full border border-slate-300 bg-white text-xs text-slate-600 hover:bg-slate-50;
  }

  .offers-chip-active {
    @apply bg-slate-900 text-white border-slate-900;
  }

  .offers-chip-active .offers-chip-num {
    @apply bg-slate-700 text-white;
  }

  .offers-chip-warn.offers-chip-warn-active {
    @apply bg-amber-600 border-amber-600 text-white;
  }

  .offers-chip-success.offers-chip-success-active {
    @apply bg-emerald-700 border-emerald-700 text-white;
  }

  .offers-chip-danger.offers-chip-danger-active {
    @apply bg-red-700 border-red-700 text-white;
  }

  .offers-chip-num {
    @apply text-[10px] px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600;
  }

  .offers-toggle {
    @apply inline-flex items-center gap-2 text-xs text-slate-600;
  }

  .offers-switch {
    @apply relative w-7 h-4 rounded-full bg-slate-300 transition-colors;
  }

  .offers-switch-on {
    @apply bg-blue-600;
  }

  .offers-switch-knob {
    @apply absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white transition-transform;
  }

  .offers-switch-on .offers-switch-knob {
    @apply translate-x-3;
  }

  .offers-tab {
    @apply inline-flex items-center gap-1.5 py-2 px-3 text-sm text-slate-500 border-b-2 border-transparent hover:text-slate-700;
  }

  .offers-tab-active {
    @apply text-blue-600 border-blue-600 font-medium;
  }

  .offers-tab-count {
    @apply text-[11px] px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600 font-medium;
  }

  .offers-tab-active .offers-tab-count {
    @apply bg-blue-50 text-blue-600;
  }

  .offers-table-wrap {
    @apply w-full bg-white border border-slate-200 rounded-lg overflow-hidden;
  }

  .offers-table thead th {
    @apply px-2.5 py-2 text-[11px] font-medium text-slate-500 uppercase tracking-wide bg-slate-50 border-b border-slate-200;
  }

  .offers-table thead tr.offers-group-row th {
    @apply text-[11px] font-semibold text-slate-800 normal-case tracking-normal text-center bg-slate-100;
  }

  .offers-table td {
    @apply px-2.5 py-2 text-xs border-b border-slate-200 align-middle;
  }

  .offers-group-end {
    @apply border-r border-slate-200;
  }

  .offers-row-good td {
    @apply bg-green-50;
  }

  .offers-row-accepted td {
    @apply bg-blue-50;
  }

  .offers-row-rejected td {
    @apply bg-gray-50 opacity-60;
  }

  .offers-delta-pos {
    @apply text-emerald-700;
  }

  .offers-delta-neg {
    @apply text-red-700;
  }

  .offers-delta-zero {
    @apply text-slate-400;
  }

  .offers-delta-pct {
    @apply text-[11px] ml-1.5 opacity-90;
  }

  .offers-pill {
    @apply inline-block px-2 py-0.5 rounded-full text-[11px] font-medium;
  }

  .offers-pill-accepted {
    @apply bg-green-100 text-green-900;
  }

  .offers-pill-rejected {
    @apply bg-red-100 text-red-900;
  }

  .offers-pill-pending {
    @apply bg-slate-100 text-slate-600;
  }

  .offers-pill-noticed {
    @apply bg-slate-100 text-slate-600;
  }

  .offers-pill-final {
    @apply bg-indigo-100 text-indigo-900;
  }

  .offers-good-flag {
    @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-green-600 text-white;
  }

  .offers-view-btn {
    @apply inline-flex items-center px-2.5 py-1 text-[11px] font-medium text-white bg-blue-600 rounded hover:bg-blue-700;
  }
}