/* Enterprise Clean Design System - Based on Design Prompt */

:root {
  /* Color Palette - Strictly Slate Scale for Neutrals */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  
  /* Primary Action - Walmart Blue */
  --primary-blue: #0071DC;
  --primary-blue-hover: #0056b3;
  
  /* Status Indicators */
  --status-critical-bg: #fef2f2;
  --status-critical-text: #b91c1c;
  --status-critical-border: #fecaca;
  
  --status-warning-bg: #fffbeb;
  --status-warning-text: #b45309;
  --status-warning-border: #fde68a;
  
  --status-success-bg: #ecfdf5;
  --status-success-text: #047857;
  --status-success-border: #a7f3d0;
  
  --status-info-bg: #eff6ff;
  --status-info-text: #1e40af;
  
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition-base: all 0.2s ease;
  --transition-fast: all 0.1s ease;
}

/* Dark Mode — classic bluish slate (Bluish slate shell / default tokens) */
.dark {
  --slate-50: #0f172a;
  --slate-100: #1e293b;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-800: #f1f5f9;
  --slate-900: #f8fafc;
}

/* Black glass shell overrides */
html.dark[data-dark-shell="black"] {
  --slate-50: #000000;
  --slate-100: #0a0a0a;
  --slate-200: #171717;
  --slate-300: #262626;
  --slate-400: #52525b;
  --slate-500: #a1a1aa;
  --slate-600: #d4d4d8;
  --slate-700: #e4e4e7;
  --slate-800: #f4f4f5;
  --slate-900: #fafafa;
}

/* Base Styles - Enterprise Clean Theme */
body {
  font-family: var(--font-sans);
  background-color: var(--slate-50);
  color: var(--slate-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark body {
  background-color: #0f172a;
  color: var(--slate-100);
}

html.dark[data-dark-shell="black"] body {
  background-color: #000000;
}

/* Typography - Data/IDs/SKUs use Mono */
.font-mono,
code,
pre,
.sku,
.product-id,
.data-value {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}

/* Small Text - Metadata Labels */
.metadata-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--slate-500);
}

.dark .metadata-label {
  color: var(--slate-400);
}

/* Cards - Enterprise Clean Pattern */
.enterprise-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

/* Grid product cards: light = white (ebay-ui), dark = glass (ebay-ui) – no override needed */

.enterprise-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dark .enterprise-card {
  background: var(--slate-800);
  border-color: var(--slate-700);
}

/* Modals - Backdrop Blur Required */
.enterprise-modal {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in zoom-in-95 200ms ease-out;
}

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

@keyframes zoom-in-95 {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}

/* Buttons - Primary Action */
.btn-primary {
  background: var(--primary-blue);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--primary-blue-hover);
  box-shadow: var(--shadow-md);
}

.btn-primary:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--primary-blue);
  ring-offset: 2px;
}

/* Secondary/Icon Buttons */
.btn-icon {
  padding: 0.5rem;
  border-radius: 9999px; /* rounded-full */
  background: transparent;
  color: var(--slate-600);
  transition: var(--transition-base);
  cursor: pointer;
}

.btn-icon:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}

.dark .btn-icon {
  color: var(--slate-400);
}

.dark .btn-icon:hover {
  background: var(--slate-700);
  color: var(--slate-100);
}

/* Status Indicators */
.status-critical {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
  border: 1px solid var(--status-critical-border);
}

.status-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border: 1px solid var(--status-warning-border);
}

.status-success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-success-border);
}

.status-info {
  background: var(--status-info-bg);
  color: var(--status-info-text);
}

/* Spec Rows - Key-Value Pairs */
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.spec-label {
  color: var(--slate-500);
  font-weight: 500;
  font-size: 0.75rem;
}

.spec-value {
  font-weight: 500;
  color: var(--slate-700);
  text-align: right;
}

.dark .spec-label {
  color: var(--slate-400);
}

.dark .spec-value {
  color: var(--slate-300);
}

/* Focus States - Accessibility (A11y) */
*:focus-visible {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* Ensure focus ring works with Tailwind */
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[#0071DC\]:focus {
  --tw-ring-color: #0071DC;
}

/* Tooltips - IssueIcon Pattern */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  cursor: help;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--slate-800);
  color: white;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-base);
  z-index: 100;
  min-width: 16rem;
  max-width: 20rem;
}

.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Accordion Pattern - Collapsed Summary -> Expanded Details */
.accordion-summary {
  cursor: pointer;
  transition: var(--transition-base);
}

.accordion-summary:hover {
  background: var(--slate-50);
}

.dark .accordion-summary:hover {
  background: var(--slate-800);
}

.accordion-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-details.expanded {
  max-height: 2000px;
  transition: max-height 0.5s ease-in;
}

/* Micro-interactions - Copy to Clipboard Feedback */
.copy-feedback {
  position: relative;
}

.copy-feedback::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--status-success-text);
  font-weight: bold;
  opacity: 0;
  transition: var(--transition-base);
}

.copy-feedback.copied::after {
  opacity: 1;
  animation: fade-in-out 1.5s ease;
}

@keyframes fade-in-out {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* Contrast Fixes - WCAG Compliance */
.text-contrast-safe {
  color: var(--slate-900);
}

.dark .text-contrast-safe {
  color: var(--slate-100);
}

/* Semantic HTML Enhancements */
button {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--slate-900);
  font-weight: 700;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--slate-100);
}

/* Transitions - Smooth State Changes */
.transition-smooth {
  transition: var(--transition-base);
}

/* Ensure enterprise-card hover works */
.enterprise-card:hover {
  transform: translateY(-1px);
}

/* Status classes with proper colors */
.status-critical {
  background-color: var(--status-critical-bg) !important;
  color: var(--status-critical-text) !important;
  border-color: var(--status-critical-border) !important;
}

.status-warning {
  background-color: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
  border-color: var(--status-warning-border) !important;
}

.status-success {
  background-color: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
  border-color: var(--status-success-border) !important;
}

.status-info {
  background-color: var(--status-info-bg) !important;
  color: var(--status-info-text) !important;
}

/* Dark mode status colors */
.dark .status-critical {
  background-color: rgba(254, 242, 242, 0.1) !important;
  color: #fca5a5 !important;
  border-color: rgba(254, 202, 202, 0.3) !important;
}

.dark .status-warning {
  background-color: rgba(255, 251, 235, 0.1) !important;
  color: #fcd34d !important;
  border-color: rgba(253, 230, 138, 0.3) !important;
}

.dark .status-success {
  background-color: rgba(236, 253, 245, 0.1) !important;
  color: #6ee7b7 !important;
  border-color: rgba(167, 243, 208, 0.3) !important;
}

.dark .status-info {
  background-color: rgba(239, 246, 255, 0.1) !important;
  color: #93c5fd !important;
}

/* Hover States - Required for Interactive Elements */
.interactive {
  transition: var(--transition-base);
  cursor: pointer;
}

.interactive:hover {
  background: var(--slate-100);
}

.dark .interactive:hover {
  background: var(--slate-700);
}

/* Product detail uses one page scrollbar. Nested gallery scroll areas made it
   difficult to reach image QA and trapped wheel/touch input. */
.detail-layout-fixed-gallery .detail-image-gallery-fixed {
  max-height: none;
  overflow: visible;
}

.detail-layout-fixed-gallery .detail-gallery-scroll {
  max-height: none;
  overflow: visible;
}

.wmc-image-stage {
  height: clamp(280px, 44vh, 460px);
}

@media (max-width: 1023px) {
  .detail-layout-fixed-gallery .detail-image-gallery-fixed {
    position: relative;
    top: 0;
  }
  .detail-layout-fixed-gallery .detail-gallery-scroll {
    max-height: none;
    overflow: visible;
  }

  .wmc-image-stage {
    height: min(400px, 55vh);
  }
}