/* ═══════════════════════════════════════════════════════════════════════════
 * Vitaris — Cotizador Vendedor — Custom Styles v4.0
 * ─────────────────────────────────────────────────────────────────────────
 * Sections:
 *   1. Print Styles        – Overrides for browser print / PDF
 *   2. Alpine.js Cloak     – Hide un-initialized Alpine markup
 *   3. Dark Mode Colors    – CSS custom properties for theme switching
 *   4. Scrollbar           – Thin custom scrollbar for overflow tables
 *   5. Form Inputs         – Number spinner removal, focus rings
 *   6. Responsive Cards    – Mobile card layout for quote & search tables
 *   7. Dark Mode Tweaks    – Extra overrides for dark theme
 *   8. Transitions         – Smooth page / element transitions
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Print Styles ──────────────────────────────────────────────────── */
@media print {
  body {
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print\:hidden {
    display: none !important;
  }
  .print\:block {
    display: block !important;
  }
  .print\:inline {
    display: inline !important;
  }
  .print\:px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .print\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  table {
    font-size: 10px !important;
  }
  /* Force light mode colors on print regardless of theme */
  .dark body, body {
    color: #1f2937 !important;
  }
}

/* ── 2. Alpine.js Cloak ───────────────────────────────────────────────── */
[x-cloak] {
  display: none !important;
}

/* ── 3. Dark Mode Color Variables ─────────────────────────────────────── */
:root {
  --surface: #f8fafc;
  --card-bg: #ffffff;
  --card-border: #f3f4f6;
  --header-bg: #ffffff;
  --header-border: #e5e7eb;
  --input-bg: #ffffff;
  --input-border: #e5e7eb;
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-hover: #94a3b8;
}

html.dark {
  --surface: #0f172a;
  --card-bg: #1e293b;
  --card-border: #334155;
  --header-bg: #1e293b;
  --header-border: #334155;
  --input-bg: #0f172a;
  --input-border: #475569;
  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
  --scrollbar-hover: #64748b;
}

/* ── 4. Custom Scrollbar ──────────────────────────────────────────────── */
.overflow-x-auto::-webkit-scrollbar {
  height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* ── 5. Form Inputs ───────────────────────────────────────────────────── */
/* Remove default number spinners (webkit + firefox) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Consistent focus ring removal (Tailwind handles ring styles) */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ── 6. Responsive Mobile Card Layout ─────────────────────────────────── */
/* On small screens, hide the table and show card-based layouts.
   Cards stack vertically and use label/value pairs instead of columns. */

/* Utility: hide on mobile, show as table on md+ */
@media (max-width: 767px) {
  .quote-table-desktop {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .quote-cards-mobile {
    display: none !important;
  }
}

/* Mobile card item styling */
.mobile-card {
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
}
.mobile-card-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.6;
  margin-bottom: 0.125rem;
}
.mobile-card-value {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ── 7. Dark Mode Tweaks ──────────────────────────────────────────────── */
/* Dark select background for dropdown menus */
html.dark select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

/* Dark mode autofill override */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e2e8f0;
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── 8. Transitions ───────────────────────────────────────────────────── */
/* Smooth background/color transition when toggling dark mode */
body, header, main, section, footer, .mobile-card {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── 9. Premium UI & Visual Effects ──────────────────────────────────── */

/* Glassmorphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(229, 231, 235, 0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
}

html.dark .glass-card {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(71, 85, 105, 0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Premium Glass Inputs */
.glass-input {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(209, 213, 219, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark .glass-input {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(71, 85, 105, 0.6);
}

.glass-input:focus {
  background: #ffffff !important;
  border-color: #127dd6 !important;
  box-shadow: 0 0 0 3px rgba(18, 125, 214, 0.15), 0 4px 12px rgba(18, 125, 214, 0.05);
}

html.dark .glass-input:focus {
  background: #0f172a !important;
  border-color: #62a9f8 !important;
  box-shadow: 0 0 0 3px rgba(98, 169, 248, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Hover scales for interactive items */
.hover-premium {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-premium:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

html.dark .hover-premium:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* Glow buttons */
.glow-button {
  background: linear-gradient(135deg, #127dd6 0%, #0e66b0 100%);
  box-shadow: 0 4px 14px 0 rgba(18, 125, 214, 0.3);
  transition: all 0.25s ease;
}

.glow-button:hover:not(:disabled) {
  box-shadow: 0 6px 20px 0 rgba(18, 125, 214, 0.45);
  transform: translateY(-1px);
}

.glow-button:active:not(:disabled) {
  transform: translateY(0);
}

/* Animated gradient backgrounds for Login */
.animated-bg {
  background: linear-gradient(-45deg, #f1f5f9, #e2e8f0, #cbd5e1, #94a3b8);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

html.dark .animated-bg {
  background: linear-gradient(-45deg, #090d16, #0f172a, #1e293b, #0f172a);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Ambient light spheres */
.light-sphere {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

html.dark .light-sphere {
  opacity: 0.08;
}

.light-sphere-1 {
  background: #127dd6;
  top: 10%;
  left: 10%;
  animation: floatSphere 20s ease-in-out infinite alternate;
}

.light-sphere-2 {
  background: #6366f1;
  bottom: 10%;
  right: 10%;
  animation: floatSphere 25s ease-in-out infinite alternate-reverse;
}

@keyframes floatSphere {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 40px) scale(1.1); }
}

/* Indicator Lights (Semaforos / Statuses) */
.indicator-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.indicator-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  animation: pulseGlow 2s infinite;
  opacity: 0.4;
}

.indicator-ok { background-color: #10b981; }
.indicator-ok::after { background-color: #10b981; }

.indicator-warning { background-color: #f59e0b; }
.indicator-warning::after { background-color: #f59e0b; }

.indicator-danger { background-color: #ef4444; }
.indicator-danger::after { background-color: #ef4444; }

@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Process trace flow arrows */
.process-step {
  position: relative;
  flex: 1;
  text-align: center;
}

.process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #cbd5e1;
}

html.dark .process-step:not(:last-child)::after {
  color: #475569;
}

/* Custom stats pill */
.stats-badge {
  background: linear-gradient(135deg, rgba(18, 125, 214, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 1px solid rgba(18, 125, 214, 0.2);
  color: #127dd6;
}

html.dark .stats-badge {
  background: linear-gradient(135deg, rgba(98, 169, 248, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 1px solid rgba(98, 169, 248, 0.2);
  color: #62a9f8;
}

/* ── 8. Page Transition — Smooth fade-in on every page load ─────────────── */
/* Eliminates the abrupt white flash when navigating between pages.          */
/* Every page starts invisible and fades in smoothly over 300ms.             */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageEnter 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Smooth color transitions everywhere — covers dark-mode toggle & hover states */
*,
*::before,
*::after {
  transition:
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     220ms cubic-bezier(0.4, 0, 0.2, 1),
    color            220ms cubic-bezier(0.4, 0, 0.2, 1),
    fill             220ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke           220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity          220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset transition for elements that manage their own (avoids double-animating) */
.no-transition,
.no-transition * {
  transition: none !important;
}