/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* =============================================================================
   Brags Design System - CSS Custom Properties
   ============================================================================= */

:root {
  /* Primary Brand Colors */
  --primary-50: rgb(239 246 255);   /* blue-50 */
  --primary-100: rgb(219 234 254);  /* blue-100 */
  --primary-500: rgb(59 130 246);   /* blue-500 */
  --primary-600: rgb(37 99 235);    /* blue-600 - Primary brand color */
  --primary-700: rgb(29 78 216);    /* blue-700 */
  --primary-800: rgb(30 64 175);    /* blue-800 */

  /* Semantic Colors */
  --success-50: rgb(240 253 244);   /* green-50 */
  --success-400: rgb(74 222 128);   /* green-400 */
  --success-600: rgb(22 163 74);    /* green-600 */
  --success-800: rgb(22 101 52);    /* green-800 */

  --warning-50: rgb(254 252 232);   /* yellow-50 */
  --warning-400: rgb(250 204 21);   /* yellow-400 */
  --warning-600: rgb(202 138 4);    /* yellow-600 */
  --warning-800: rgb(133 77 14);    /* yellow-800 */

  --error-50: rgb(254 242 242);     /* red-50 */
  --error-400: rgb(248 113 113);    /* red-400 */
  --error-600: rgb(220 38 38);      /* red-600 */
  --error-800: rgb(153 27 27);      /* red-800 */

  /* Neutral Colors */
  --gray-50: rgb(249 250 251);      /* gray-50 */
  --gray-100: rgb(243 244 246);     /* gray-100 */
  --gray-200: rgb(229 231 235);     /* gray-200 */
  --gray-300: rgb(209 213 219);     /* gray-300 */
  --gray-400: rgb(156 163 175);     /* gray-400 */
  --gray-500: rgb(107 114 128);     /* gray-500 */
  --gray-600: rgb(75 85 99);        /* gray-600 */
  --gray-700: rgb(55 65 81);        /* gray-700 */
  --gray-800: rgb(31 41 55);        /* gray-800 */
  --gray-900: rgb(17 24 39);        /* gray-900 */
}

/* =============================================================================
   CSS-Only Sliding Toggle Components
   ============================================================================= */

/* Entry Type Toggle (3 options) */
.entry-type-toggle {
  --button-1-width: 100px;  /* Will be set by JavaScript */
  --button-2-width: 100px;  /* Will be set by JavaScript */
  --button-3-width: 100px;  /* Will be set by JavaScript */
  --button-1-left: 4px;     /* Will be set by JavaScript */
  --button-2-left: 108px;   /* Will be set by JavaScript */
  --button-3-left: 212px;   /* Will be set by JavaScript */
}

.entry-type-toggle .entry-type-slider {
  left: var(--button-1-left);
  width: var(--button-1-width);
  /* No transition by default - will be added by JavaScript after first interaction */
}

/* Only add transition after user has interacted */
.entry-type-toggle.transitions-enabled .entry-type-slider {
  transition: all 0.3s ease-out;
}

/* Position slider based on which radio is checked */
.entry-type-toggle input[type="radio"]:nth-of-type(1):checked ~ .entry-type-slider {
  transform: translateX(0);
  width: var(--button-1-width);
}

.entry-type-toggle input[type="radio"]:nth-of-type(2):checked ~ .entry-type-slider {
  transform: translateX(calc(var(--button-2-left) - var(--button-1-left)));
  width: var(--button-2-width);
}

.entry-type-toggle input[type="radio"]:nth-of-type(3):checked ~ .entry-type-slider {
  transform: translateX(calc(var(--button-3-left) - var(--button-1-left)));
  width: var(--button-3-width);
}

/* List/Grid Toggle (2 options) */
.list-grid-toggle {
  --button-1-width: 80px;   /* Will be set by JavaScript */
  --button-2-width: 80px;   /* Will be set by JavaScript */
  --button-1-left: 4px;     /* Will be set by JavaScript */
  --button-2-left: 88px;    /* Will be set by JavaScript */
}

.list-grid-toggle .toggle-slider {
  left: var(--button-1-left);
  width: var(--button-1-width);
  /* No transition by default - will be added by JavaScript after first interaction */
}

/* Only add transition after user has interacted */
.list-grid-toggle.transitions-enabled .toggle-slider {
  transition: all 0.3s ease-out;
}

.list-grid-toggle input[type="radio"]:nth-of-type(1):checked ~ .toggle-slider {
  transform: translateX(0);
  width: var(--button-1-width);
}

.list-grid-toggle input[type="radio"]:nth-of-type(2):checked ~ .toggle-slider {
  transform: translateX(calc(var(--button-2-left) - var(--button-1-left)));
  width: var(--button-2-width);
}

/* View Toggle (List/Timeline - 2 options) */
.view-toggle {
  --button-1-width: 80px;   /* Will be set by JavaScript */
  --button-2-width: 80px;   /* Will be set by JavaScript */
  --button-1-left: 4px;     /* Will be set by JavaScript */
  --button-2-left: 88px;    /* Will be set by JavaScript */
}

.view-toggle .toggle-slider {
  left: var(--button-1-left);
  width: var(--button-1-width);
  /* No transition by default - will be added by JavaScript after first interaction */
}

/* Only add transition after user has interacted */
.view-toggle.transitions-enabled .toggle-slider {
  transition: all 0.3s ease-out;
}

.view-toggle input[type="radio"]:nth-of-type(1):checked ~ .toggle-slider {
  transform: translateX(0);
  width: var(--button-1-width);
}

.view-toggle input[type="radio"]:nth-of-type(2):checked ~ .toggle-slider {
  transform: translateX(calc(var(--button-2-left) - var(--button-1-left)));
  width: var(--button-2-width);
}

/* Common styles for all toggles */
.css-toggle-button {
  user-select: none;
}

.css-toggle-button:focus-within {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Ensure radio inputs remain hidden but accessible */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============================================================================
   Flash Message Animations
   ============================================================================= */

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

  /* Spacing Scale */
  --section-spacing: 4rem;          /* py-16 equivalent */
  --section-spacing-mobile: 3rem;   /* py-12 equivalent */
  --card-padding: 1.5rem;           /* p-6 equivalent */
  --component-gap: 1.5rem;          /* gap-6 equivalent */

  /* Typography */
  --heading-color: var(--gray-900);
  --body-color: var(--gray-600);
  --secondary-color: var(--gray-500);

  /* Component Styles */
  --border-radius-md: 0.375rem;     /* rounded-md */
  --border-radius-lg: 0.5rem;       /* rounded-lg */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --transition-default: all 0.2s ease-in-out;
  --focus-ring: 0 0 0 2px var(--primary-600), 0 0 0 4px rgb(59 130 246 / 0.1);
}

/* =============================================================================
   Base Component Classes
   ============================================================================= */

/* Card Base Class */
.card-base {
  background-color: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
}

/* Button Base Classes */
.btn-primary {
  background-color: var(--primary-600);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  transition: var(--transition-default);
  border: 1px solid transparent;
}

.btn-primary:hover {
  background-color: var(--primary-700);
}

.btn-primary:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-secondary {
  background-color: white;
  color: var(--gray-700);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  transition: var(--transition-default);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
  background-color: var(--gray-50);
}

.btn-secondary:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Icon Size Standards */
.icon-sm { width: 1rem; height: 1rem; }      /* h-4 w-4 */
.icon-md { width: 1.25rem; height: 1.25rem; } /* h-5 w-5 */
.icon-lg { width: 1.5rem; height: 1.5rem; }   /* h-6 w-6 */

/* =============================================================================
   Utility Classes
   ============================================================================= */

/* Consistent focus states */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Semantic focus states */
.focus-ring-success:focus {
  box-shadow: 0 0 0 2px var(--success-600), 0 0 0 4px rgb(22 163 74 / 0.1);
}

.focus-ring-warning:focus {
  box-shadow: 0 0 0 2px var(--warning-600), 0 0 0 4px rgb(202 138 4 / 0.1);
}

.focus-ring-error:focus {
  box-shadow: 0 0 0 2px var(--error-600), 0 0 0 4px rgb(220 38 38 / 0.1);
}

/* =============================================================================
   Pagy Pagination Styling
   ============================================================================= */

/* Pagy nav wrapper styling */
nav[aria-label="Pagination"] {
  display: inline-flex;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

nav[aria-label="Pagination"] a,
nav[aria-label="Pagination"] span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: white;
  color: #374151;
  text-decoration: none;
  margin-left: -1px;
  transition: all 0.2s ease-in-out;
}

nav[aria-label="Pagination"] a:hover {
  background-color: #f9fafb;
  color: #111827;
}

nav[aria-label="Pagination"] a:focus {
  z-index: 10;
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Current page styling */
nav[aria-label="Pagination"] span.current {
  z-index: 10;
  background-color: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  font-weight: 600;
}

/* Disabled/gap state */
nav[aria-label="Pagination"] span.gap {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: default;
}

/* First child rounded corners */
nav[aria-label="Pagination"] a:first-child,
nav[aria-label="Pagination"] span:first-child {
  margin-left: 0;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

/* Last child rounded corners */
nav[aria-label="Pagination"] a:last-child,
nav[aria-label="Pagination"] span:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* =============================================================================
   Form Elements - Better Select Styling
   ============================================================================= */

/* Enhanced select styling with better chevron positioning */
select.form-select {
  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='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem; /* Ensures text never overlaps with chevron */
}