/* app/assets/stylesheets/application.tailwind.css */

@import "tailwindcss";
@import 'leaflet/dist/leaflet.css';
@import 'leaflet-control-geocoder/dist/Control.Geocoder.css';

/*
================================================================================
LAYER 1: BASE STYLES & THEME DEFINITION
================================================================================
*/
@layer base {
  :root {
    --radius: 0.5rem; /* Base border radius for components */

    /* Light Theme Palette */
    --color-background: 248 250 252;      /* slate-50 */
    --color-foreground: 255 255 255;      /* white */
    --color-text-primary: 15 23 42;       /* slate-900 */
    --color-text-secondary: 51 65 85;     /* slate-700 */
    --color-border: 226 232 240;          /* slate-200 */
    --color-ring: 99 102 241;             /* indigo-500 */
    
    --color-primary: 79 70 229;           /* indigo-600 */
    --color-primary-foreground: 255 255 255; /* white */
    --color-primary-hover: 67 56 202;     /* indigo-700 */
    
    --color-star-active: 245 179 1;       /* #f5b301 */
    --color-star-inactive: 226 232 240;   /* slate-200 */
  }

  [data-theme="dark"] {
    /* Dark Theme Palette */
    --color-background: 15 23 42;         /* slate-900 */
    --color-foreground: 30 41 59;        /* slate-800 */
    --color-text-primary: 226 232 240;    /* slate-200 */
    --color-text-secondary: 148 163 184;  /* slate-400 */
    --color-border: 51 65 85;            /* slate-700 */
    --color-ring: 129 140 248;            /* indigo-400 */
    
    --color-primary: 129 140 248;         /* indigo-400 */
    --color-primary-foreground: 15 23 42; /* slate-900 */
    --color-primary-hover: 99 102 241;    /* indigo-500 */
    
    --color-star-active: 250 204 21;      /* yellow-400 */
    --color-star-inactive: 71 85 105;     /* slate-600 */
  }

  /* --- Global Styles --- */
  body {
    @apply bg-[rgb(var(--color-background))] text-[rgb(var(--color-text-primary))] antialiased;
    transition-property: color, background-color;
    transition-duration: 300ms;
  }
}

/*
================================================================================
LAYER 2: REUSABLE COMPONENTS
================================================================================
*/
@layer components {
  /* --- Navbar --- */
  .themed-navbar {
    /* OPTIMIZATION: backdrop-blur is expensive on mobile. We apply it only on md+ screens. */
    @apply sticky top-0 z-50 bg-[rgb(var(--color-foreground)/0.8)] text-[rgb(var(--color-text-primary))] shadow-md md:backdrop-blur-lg;
    border-bottom: 1px solid rgb(var(--color-border) / 0.5);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .themed-navbar a, .themed-navbar button {
    @apply transition-opacity duration-200 hover:opacity-75;
  }

  /* --- Buttons --- */
  .themed-button-primary {
    /* OPTIMIZATION: Replaced 'transition-all' with specific, animatable properties. */
    @apply w-full inline-flex items-center justify-center rounded-[--radius] px-4 py-2 text-sm font-semibold tracking-wide shadow-sm duration-200;
    @apply bg-[rgb(var(--color-primary))] text-[rgb(var(--color-primary-foreground))];
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--color-ring))] focus:ring-offset-[rgb(var(--color-background))];
    transition-property: color, background-color, border-color, transform;
  }
  .themed-button-primary:hover {
    @apply bg-[rgb(var(--color-primary-hover))];
  }
  .themed-button-primary:active {
    @apply scale-[0.98];
  }

  .themed-button-secondary {
    @apply w-full inline-flex items-center justify-center rounded-[--radius] px-4 py-2 text-sm font-semibold tracking-wide shadow-sm duration-200;
    @apply bg-transparent border border-[rgb(var(--color-border))] text-[rgb(var(--color-text-primary))];
    @apply hover:bg-[rgba(var(--color-primary),0.05)] hover:border-[rgb(var(--color-primary))];
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--color-ring))] focus:ring-offset-[rgb(var(--color-background))];
    transition-property: color, background-color, border-color, transform;
  }
  .themed-button-secondary:active {
    @apply scale-[0.98];
  }
  
  .themed-button-success {
    @apply w-full inline-flex items-center justify-center rounded-[--radius] px-4 py-2 text-sm font-semibold tracking-wide shadow-sm duration-200;
    @apply bg-green-600 text-white;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 focus:ring-offset-[rgb(var(--color-background))];
    transition-property: color, background-color, border-color, transform;
  }
  .themed-button-success:hover { @apply bg-green-700; }
  [data-theme="dark"] .themed-button-success { @apply bg-green-500 text-slate-900; }
  [data-theme="dark"] .themed-button-success:hover { @apply bg-green-400; }
  .themed-button-success:active { @apply scale-[0.98]; }

  .themed-button-danger {
    @apply w-full inline-flex items-center justify-center rounded-[--radius] px-4 py-2 text-sm font-semibold tracking-wide shadow-sm duration-200;
    @apply bg-red-600 text-white;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:ring-offset-[rgb(var(--color-background))];
    transition-property: color, background-color, border-color, transform;
  }
  .themed-button-danger:hover { @apply bg-red-700; }
  [data-theme="dark"] .themed-button-danger { @apply bg-red-500 text-slate-900; }
  [data-theme="dark"] .themed-button-danger:hover { @apply bg-red-400; }
  .themed-button-danger:active { @apply scale-[0.98]; }

  /* --- Links --- */
  .themed-link {
    @apply text-sm font-medium text-[rgb(var(--color-text-secondary))] transition-colors duration-200;
    @apply hover:text-[rgb(var(--color-primary))];
  }
  .themed-link-primary {
    @apply font-medium transition-colors duration-200 text-[rgb(var(--color-primary))];
    @apply hover:text-[rgb(var(--color-primary-hover))];
  }
  .themed-link-danger {
    @apply text-sm font-medium transition-colors duration-200 text-red-600;
    @apply hover:text-red-800;
  }
  [data-theme="dark"] .themed-link-danger { @apply text-red-400; }
  [data-theme="dark"] .themed-link-danger:hover { @apply text-red-300; }

  /* --- Forms --- */
  .themed-label {
    @apply block text-sm font-medium text-[rgb(var(--color-text-secondary))] mb-1.5;
  }
  .themed-input {
    @apply block w-full rounded-[--radius] border border-[rgb(var(--color-border))] bg-[rgb(var(--color-foreground))] px-3 py-2 text-sm shadow-sm;
    @apply placeholder:text-[rgb(var(--color-text-secondary)/0.6)];
    @apply focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[rgb(var(--color-ring))] focus:ring-offset-[rgb(var(--color-background))];
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* --- Cards & Containers --- */
  .themed-card {
    @apply p-6 border rounded-[--radius] shadow-sm;
    @apply bg-[rgb(var(--color-foreground))] border-[rgb(var(--color-border))];
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .themed-dashed-box {
    @apply text-center py-4 border-2 border-dashed rounded-lg;
    @apply text-[rgb(var(--color-text-secondary))] border-[rgb(var(--color-border))];
    transition: border-color 0.3s ease, color 0.3s ease;
  }

  /* --- Alerts --- */
  .themed-alert {
    /* RTL FIX: Changed from items-start, border-l-4, rounded-r-lg */
    @apply relative flex items-center p-4 border-s-4 rounded-lg rounded-s-none;
    transition: opacity 150ms ease-in-out;
  }
  .themed-alert-success {
    @apply border-green-500 bg-green-500/10 text-green-800;
  }
  [data-theme="dark"] .themed-alert-success {
    @apply border-green-400 bg-green-400/10 text-green-300;
  }
  .themed-alert-danger {
    @apply border-red-500 bg-red-500/10 text-red-800;
  }
  [data-theme="dark"] .themed-alert-danger {
    @apply border-red-400 bg-red-400/10 text-red-300;
  }
  .themed-alert-info {
    @apply border-blue-500 bg-blue-500/10 text-blue-700;
  }
  [data-theme="dark"] .themed-alert-info {
    @apply border-blue-400 bg-blue-400/10 text-blue-300;
  }
  .themed-alert-close-button {
    /* RTL FIX: Replaced absolute positioning with flex-compatible utilities */
    @apply ms-auto p-1.5 leading-none text-current opacity-70 transition-opacity rounded-full;
    @apply hover:opacity-100 hover:bg-current/10;
  }

  /* --- Role Selection Card --- */
  .role-selection-card {
    @apply flex flex-col justify-center p-6 h-full border-2 rounded-xl cursor-pointer ease-in-out;
    @apply border-[rgb(var(--color-border))] bg-[rgb(var(--color-foreground))];
    @apply hover:border-[rgb(var(--color-ring))];
    @apply peer-checked:border-[rgb(var(--color-primary))] peer-checked:bg-[rgba(var(--color-primary),0.05)] peer-checked:shadow-lg;
    @apply peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-offset-[rgb(var(--color-background))] peer-checked:ring-[rgb(var(--color-primary))];
    /* OPTIMIZATION: Replaced 'transition-all' with specific properties */
    transition-property: color, background-color, border-color, box-shadow, ring-color;
    transition-duration: 200ms;
    .peer-checked\:text-\[rgb\(var\(--color-primary\)\)\] {
      color: rgb(var(--color-primary));
    }
  }
  
  /* --- Notifications --- */
  .notification-item.unread {
    @apply bg-[rgba(var(--color-primary),0.05)] font-semibold;
  }
  [data-theme="dark"] .notification-item.unread {
    @apply bg-[rgba(var(--color-primary),0.1)] font-semibold;
  }

  /* --- Star Rating --- */
  .star-rating { @apply flex flex-row-reverse justify-end; }
  .star-rating input[type="radio"] { @apply hidden; }
  .star-rating label {
    @apply text-2xl cursor-pointer transition-colors duration-200;
    color: rgb(var(--color-star-inactive));
  }
  .star-rating label:hover,
  .star-rating label:hover ~ label { color: rgb(var(--color-star-active)); }
  .star-rating input[type="radio"]:checked ~ label { color: rgb(var(--color-star-active)); }
  .static-stars { font-size: 1.25rem; }
  .static-stars .filled { color: rgb(var(--color-star-active)); }
  .static-stars .empty { color: rgb(var(--color-inactive)); }

  /* --- Status Badges --- */
  .status-badge {
    @apply inline-flex items-center gap-x-1.5 rounded-full px-2.5 py-1 text-xs font-semibold;
  }
  .status-badge-dot {
    @apply h-1.5 w-1.5 rounded-full bg-current;
  }
  .badge-pending {
    @apply bg-yellow-500/20 text-yellow-700 shadow-[0_1px_5px_theme(colors.yellow.500/0.4)];
  }
  [data-theme="dark"] .badge-pending {
    @apply bg-yellow-400/20 text-yellow-300 shadow-[0_1px_5px_theme(colors.yellow.400/0.3)];
  }
  .badge-approved {
    @apply bg-green-500/20 text-green-700 shadow-[0_1px_5px_theme(colors.green.500/0.4)];
  }
  [data-theme="dark"] .badge-approved {
    @apply bg-green-400/20 text-green-300 shadow-[0_1px_5px_theme(colors.green.400/0.3)];
  }
  .badge-rejected {
    @apply bg-red-600/20 text-red-700 shadow-[0_1px_5px_theme(colors.red.500/0.4)];
  }
  [data-theme="dark"] .badge-rejected {
    @apply bg-red-500/20 text-red-400 shadow-[0_1px_5px_theme(colors.red.400/0.3)];
  }

  /* --- Dashboard Specific Components --- */
  .stat-card {
    @apply overflow-hidden rounded-[--radius] shadow-lg;
    @apply bg-[rgb(var(--color-foreground))] border border-[rgb(var(--color-border))];
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .stat-card-content { @apply p-5; }
  .stat-card-footer {
    @apply px-5 py-3;
    background-color: rgba(var(--color-border), 0.4);
    transition: background-color 0.3s ease;
  }
  [data-theme="dark"] .stat-card-footer {
    background-color: rgba(var(--color-border), 0.2);
  }
  .dashboard-card {
    @apply p-6 rounded-[--radius] shadow-lg h-full;
    @apply bg-[rgb(var(--color-foreground))] border border-[rgb(var(--color-border))];
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .themed-list-item {
    @apply block p-4 -m-4 rounded-lg transition-colors duration-200;
    @apply hover:bg-[rgba(var(--color-primary),0.05)];
  }
  .pet-list-item {
    @apply block p-4 rounded-lg border shadow-sm duration-200;
    @apply bg-[rgb(var(--color-foreground))] border-[rgb(var(--color-border))];
    @apply hover:border-[rgb(var(--color-ring))] hover:shadow-md;
    @apply focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-ring))];
    /* OPTIMIZATION: Replaced 'transition-all' with specific properties */
    transition-property: border-color, box-shadow;
  }
}

/*
================================================================================
LAYER 3: SPECIFIC UI STYLING (Leaflet Map)
================================================================================
*/
@layer components { /* Continue in components layer for consistency */
  #clinic-map {
    @apply w-full h-80 rounded-[--radius] border border-[rgb(var(--color-border))] z-0 shadow-inner;
    @apply bg-[rgb(var(--color-foreground))];
  }
  .leaflet-container {
    transition: background-color 0.3s ease;
  }
  .leaflet-control-geocoder, .leaflet-control, .leaflet-popup-content-wrapper {
    @apply bg-[rgb(var(--color-foreground))] text-[rgb(var(--color-text-primary))] rounded-[--radius] border border-[rgb(var(--color-border))] shadow-lg;
  }
  .leaflet-popup-tip {
    @apply bg-[rgb(var(--color-foreground))];
  }
  .leaflet-popup-content-wrapper {
    padding: 0.25rem;
  }
  .leaflet-control-geocoder .leaflet-control-geocoder-form input {
    @apply w-64 px-3 py-2 text-sm bg-[rgb(var(--color-background))] text-[rgb(var(--color-text-primary))] border-none;
  }
  .leaflet-control-geocoder .leaflet-control-geocoder-form input:focus {
    @apply ring-2 ring-offset-1 ring-[rgb(var(--color-ring))] ring-offset-[rgb(var(--color-background))];
  }
  .leaflet-marker-icon {
    filter: hue-rotate(220deg) saturate(1.5) brightness(0.9);
  }
  [data-theme="dark"] .leaflet-marker-icon {
    filter: hue-rotate(210deg) saturate(1.5) brightness(1.1);
  }
}