/* ============================================
   MODERN WEB STANDARDS 2025
   
   Implements latest CSS features and accessibility standards:
   - CSS Container Queries (component-based responsiveness)
   - View Transitions API (smooth state transitions)
   - WCAG 2.2 Compliance (focus, touch targets, dragging alternatives)
   - Enhanced Focus Indicators
   - Color scheme and contrast preferences
   - Scroll-driven animations
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - 2025 DESIGN TOKENS
   ============================================ */
:root {
  /* Touch targets - WCAG 2.2 compliant */
  --touch-target-minimum: 24px;    /* WCAG 2.2 Level AA minimum */
  --touch-target-comfortable: 44px; /* iOS/Apple HIG standard */
  --touch-target-large: 48px;       /* Android Material standard */
  --touch-target-visionos: 60px;    /* visionOS standard */
  
  /* Focus indicators - WCAG 2.2 compliant */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  --focus-outline-color: #0066CC;
  --focus-outline-color-light: #3B82F6;
  
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  
  /* Animation tokens */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* View transition names */
  --vt-panel: panel;
  --vt-card: card;
  --vt-modal: modal;
}

/* ============================================
   VIEW TRANSITIONS API - Smooth State Changes
   Baseline Newly Available in 2025 (Chrome, Safari, Firefox 144+)
   ============================================ */

/* Enable view transitions for the document */
@view-transition {
  navigation: auto;
}

/* Default transition for all named elements */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: var(--duration-normal);
  animation-timing-function: var(--easing-standard);
}

/* Panel transitions (Form/Preview toggle) */
.panel-content {
  view-transition-name: var(--vt-panel);
}

::view-transition-group(panel) {
  animation-duration: var(--duration-normal);
  animation-timing-function: var(--easing-decelerate);
}

::view-transition-old(panel) {
  animation: slide-out-left var(--duration-normal) var(--easing-accelerate) forwards;
}

::view-transition-new(panel) {
  animation: slide-in-right var(--duration-normal) var(--easing-decelerate) forwards;
}

/* Card transitions with auto-naming */
.estimate-card,
.approval-card {
  view-transition-name: match-element;
  view-transition-class: card;
}

::view-transition-group(*.card) {
  animation-timing-function: var(--easing-bounce);
  animation-duration: var(--duration-slow);
}

/* Modal transitions */
.modal-content {
  view-transition-name: modal;
}

::view-transition-old(modal) {
  animation: scale-fade-out var(--duration-fast) var(--easing-accelerate) forwards;
}

::view-transition-new(modal) {
  animation: scale-fade-in var(--duration-normal) var(--easing-decelerate) forwards;
}

/* Transition keyframes */
@keyframes slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

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

@keyframes scale-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============================================
   CSS CONTAINER QUERIES - Component-Based Responsiveness
   Baseline Available 2023, widely adopted 2025
   ============================================ */

/* Define containers */
.card-container,
.estimate-card,
.approval-card {
  container-type: inline-size;
  container-name: card;
}

.panel-content {
  container-type: inline-size;
  container-name: panel;
}

.form-section {
  container-type: inline-size;
  container-name: form-section;
}

.action-bar {
  container-type: inline-size;
  container-name: action-bar;
}

/* Container query: Card layout adapts to its container width */
@container card (max-width: 300px) {
  .card-actions {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .card-actions button {
    width: 100%;
  }
  
  .card-meta {
    flex-direction: column;
    gap: var(--space-1);
  }
}

@container card (min-width: 301px) and (max-width: 500px) {
  .card-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@container card (min-width: 501px) {
  .card-actions {
    flex-direction: row;
    gap: var(--space-3);
  }
}

/* Container query: Form sections adapt to panel width */
@container panel (max-width: 400px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .form-row {
    flex-direction: column;
    gap: var(--space-3);
  }
}

@container panel (min-width: 401px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* Container query: Action bar adapts to its width */
@container action-bar (max-width: 500px) {
  .action-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .action-buttons::-webkit-scrollbar {
    display: none;
  }
  
  .action-buttons button span:not(.sr-only) {
    display: none;
  }
}

@container action-bar (min-width: 501px) {
  .action-buttons button span {
    display: inline;
  }
}

/* ============================================
   WCAG 2.2 FOCUS INDICATORS
   2.4.11 Focus Not Obscured (AA)
   2.4.13 Focus Appearance (AAA - optional but recommended)
   ============================================ */

/* Prevent sticky headers from obscuring focus */
html {
  scroll-padding-top: 140px; /* Account for sticky header + action bar */
  scroll-padding-bottom: var(--space-6);
}

/* Enhanced focus indicator - 3px, high contrast */
*:focus {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Focus-visible for keyboard navigation only */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  border-radius: 4px;
}

/* Ensure focused elements scroll into view properly */
*:focus-visible {
  scroll-margin-top: 150px;
  scroll-margin-bottom: var(--space-6);
}

/* High contrast focus for buttons */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 calc(var(--focus-outline-width) + var(--focus-outline-offset)) rgba(0, 102, 204, 0.2);
}

/* Form input focus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 0;
  border-color: var(--focus-outline-color);
}

/* Skip to main content link (WCAG best practice) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-4);
  background: var(--focus-outline-color);
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top var(--duration-fast) var(--easing-standard);
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   WCAG 2.2 TARGET SIZE (2.5.8)
   Minimum 24x24px, recommended 44x44px
   ============================================ */

/* All interactive elements meet minimum */
button,
a,
input,
select,
textarea,
[role="button"],
[role="link"],
[role="menuitem"],
[role="tab"],
[role="checkbox"],
[role="radio"],
[role="switch"] {
  min-height: var(--touch-target-minimum);
}

/* Primary actions use comfortable size */
.btn-primary,
.btn-secondary,
.btn-danger,
button[type="submit"],
.action-btn {
  min-height: var(--touch-target-comfortable);
  min-width: var(--touch-target-comfortable);
  padding: var(--space-3) var(--space-4);
}

/* Touch devices get larger targets */
@media (pointer: coarse) {
  button,
  a:not(.inline-link),
  [role="button"],
  [role="menuitem"] {
    min-height: var(--touch-target-comfortable);
    min-width: var(--touch-target-comfortable);
  }
  
  /* Adequate spacing between touch targets */
  .button-group > *,
  .action-buttons > * {
    margin: var(--space-1);
  }
}

/* ============================================
   PREFERS CONTRAST - High Contrast Mode
   WCAG 2.2 compliance for users needing more contrast
   ============================================ */

@media (prefers-contrast: more) {
  :root {
    --focus-outline-width: 4px;
    --focus-outline-color: #000000;
  }
  
  /* Stronger borders and outlines */
  button,
  input,
  select,
  textarea {
    border-width: 2px;
    border-color: #000000;
  }
  
  /* Remove subtle shadows in high contrast */
  .shadow-sm,
  .shadow,
  .shadow-md,
  .shadow-lg {
    box-shadow: 0 0 0 2px #000000;
  }
  
  /* Ensure text has maximum contrast */
  body {
    color: #000000;
    background-color: #ffffff;
  }
  
  /* Links are clearly distinguished */
  a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (prefers-contrast: less) {
  /* Softer contrasts for users who prefer reduced contrast */
  :root {
    --focus-outline-width: 2px;
    --focus-outline-color: #6B7280;
  }
}

/* ============================================
   PREFERS REDUCED MOTION - Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable view transitions */
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  
  /* Keep essential state changes instant */
  .panel-content,
  .modal-content {
    view-transition-name: none;
  }
}

/* ============================================
   WCAG 2.2 DRAGGING MOVEMENTS (2.5.7)
   Provide single-pointer alternatives
   ============================================ */

/* Drag handle styling with keyboard alternative indication */
[draggable="true"] {
  cursor: grab;
  position: relative;
}

[draggable="true"]:active {
  cursor: grabbing;
}

/* Keyboard-accessible reorder buttons */
.drag-alternatives {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.drag-alternatives button {
  min-height: var(--touch-target-comfortable);
  min-width: var(--touch-target-comfortable);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   SCROLL-DRIVEN ANIMATIONS (2025 Feature)
   Progressive enhancement - graceful degradation
   ============================================ */

@supports (animation-timeline: scroll()) {
  /* Fade in cards as they scroll into view */
  .estimate-card {
    animation: fade-in linear;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  
  /* Progress indicator tied to scroll */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--focus-outline-color);
    transform-origin: left;
    animation: scale-x linear;
    animation-timeline: scroll();
  }
  
  @keyframes scale-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ============================================
   ACCESSIBLE AUTOCOMPLETE (WCAG 2.2 - 3.3.8)
   Support for password managers
   ============================================ */

/* Ensure inputs support autocomplete */
input[autocomplete] {
  /* Browser autocomplete UI should be visible */
}

/* Styled autocomplete suggestions */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #111827;
}

/* ============================================
   HAPTIC FEEDBACK HINTS (iOS Safari)
   Using CSS to hint at haptic-capable interactions
   ============================================ */

/* Indicate haptic-capable buttons */
@supports (-webkit-touch-callout: none) {
  button.haptic-feedback,
  [data-haptic] {
    /* iOS will provide haptic feedback on long-press */
    -webkit-touch-callout: default;
  }
}

/* ============================================
   SUBGRID SUPPORT (2025 Baseline)
   Better alignment in nested grids
   ============================================ */

@supports (grid-template-columns: subgrid) {
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  .form-row {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
  }
  
  .form-row > label {
    grid-column: 1;
  }
  
  .form-row > input,
  .form-row > select,
  .form-row > textarea {
    grid-column: 2;
  }
}

/* ============================================
   :HAS() SELECTOR (2025 Baseline)
   Parent selection based on children
   ============================================ */

@supports selector(:has(*)) {
  /* Card with locked status gets special styling */
  .estimate-card:has([data-locked="true"]) {
    border-color: #FCD34D;
    background-color: #FFFBEB;
  }
  
  /* Form section with error */
  .form-section:has(input:invalid) {
    border-color: #EF4444;
  }
  
  /* Form section with all valid inputs */
  .form-section:has(input:valid):not(:has(input:invalid)) {
    border-color: #10B981;
  }
  
  /* Action bar adjusts when panel is active */
  .action-bar:has(+ .panel-content.active) {
    border-bottom-color: var(--focus-outline-color);
  }
  
  /* Empty state visibility */
  .card-list:has(.card:first-child) .empty-state {
    display: none;
  }
  
  .card-list:not(:has(.card)) .empty-state {
    display: flex;
  }
}

/* ============================================
   LOGICAL PROPERTIES (Internationalization)
   Support RTL languages
   ============================================ */

.card-content {
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  margin-block-end: var(--space-4);
}

.action-buttons {
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* RTL support */
[dir="rtl"] .action-buttons {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ============================================
   ACTIVE VIEW TRANSITION SELECTOR (2025)
   Style elements during transitions
   ============================================ */

@supports selector(:active-view-transition) {
  /* Disable pointer events during transition */
  :root:active-view-transition {
    pointer-events: none;
  }
  
  /* Show loading indicator during transition */
  :root:active-view-transition::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--focus-outline-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10000;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Remove interactive-only elements */
  .action-bar,
  .panel-tab,
  .skip-link,
  button:not(.print-visible) {
    display: none !important;
  }
  
  /* Ensure focus indicators don't print */
  *:focus,
  *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Disable view transitions for print */
  * {
    view-transition-name: none !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible utility */
.focus-ring:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Touch manipulation for better tap response */
.touch-action-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Container query utility classes */
.container-inline {
  container-type: inline-size;
}

.container-size {
  container-type: size;
}