/* 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
================================================================================
This layer defines the core design tokens (colors, fonts, radii) as CSS 
variables for a consistent and easily customizable theme.
*/
@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 */
    
    /* NEW: Star Rating Colors */
    --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 */
    
    /* NEW: Star Rating Colors */
    --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
================================================================================
This layer defines the styles for themed components used throughout the app.
*/
@layer components {

  /* --- Cards (NEW) --- */
  .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;
  }

  /* --- Links (NEW) --- */
  .themed-link {
    @apply text-sm font-medium text-[rgb(var(--color-text-secondary))] transition-colors duration-200;
    @apply hover:text-[rgb(var(--color-primary))];
  }
  
  /* --- Star Rating (MOVED & THEMED) --- */
  .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-star-inactive));
  }
  
/* ADD THESE CLASSES TO app/assets/stylesheets/application.tailwind.css INSIDE @layer components */

/* --- Links (Primary Variant) --- */
.themed-link-primary {
  @apply font-medium transition-colors duration-200;
  @apply text-[rgb(var(--color-primary))];
}
.themed-link-primary:hover {
  @apply text-[rgb(var(--color-primary-hover))];
}

/* --- Dashboard Stat Card --- */
.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 Main Content Card --- */
.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;
}

/* --- Dashboard List Item --- */
.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 (Specific variant of a list item) --- */
.pet-list-item {
  @apply block p-4 rounded-lg border shadow-sm transition-all 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))];
}

/* --- Dashed Placeholder Box --- */
.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;
}

  /* --- Navbar --- */
  .themed-navbar {
    @apply sticky top-0 z-50 bg-[rgb(var(--color-foreground)/0.8)] text-[rgb(var(--color-text-primary))] shadow-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 {
    @apply w-full inline-flex items-center justify-center rounded-[--radius] px-4 py-2 text-sm font-semibold tracking-wide shadow-sm transition-all 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))];
  }
  .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 transition-all 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))];
  }
  .themed-button-secondary:active {
    @apply scale-[0.98];
  }

  /* --- 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;
  }

  /* --- Role Selection Card --- */
  .role-selection-card {
    @apply flex flex-col justify-center p-6 h-full border-2 rounded-xl cursor-pointer transition-all duration-200 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))];
    .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;
  }

  /*
  ==============================================================================
  SPECIFIC UI STYLING: Leaflet Map
  ==============================================================================
  */

  #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; /* Let Tailwind handle inner padding */
  }

  .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))];
  }

  /* This filter tunes the default blue Leaflet marker to match our Indigo theme */
  .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);
  }
}