/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                         🧭 TABS MENU — KOLO UI                            ║
 * ║                    Main Menu + Submenu (Unified)                          ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 * 
 * Features:
 * - Uses KOLO UI variables (--k-*)
 * - Dark theme by default
 * - Glassmorphism + Neon glow
 * - Individual tab colors via --tab-color, --tab-color-rgb
 * - Submenu tints via data-active-tint
 */

/* ═══════════════════════════════════════════════════════════════════════════
   📦 CSS VARIABLES (Bridge to KOLO UI)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Page accent (can be overridden inline per menu) */
  --page-accent: var(--k-primary, #ff6b35);
  --accent-rgb: 255, 107, 53;
  
  /* Menu-specific */
  --menu-radius: var(--k-radius-2xl, 1.25rem);
  --menu-gap: clamp(4px, 0.8vw, 10px);
  --menu-padding: clamp(6px, 1vw, 10px);
  
  /* Tab defaults */
  --tab-color: var(--page-accent);
  --tab-color-rgb: var(--accent-rgb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎴 MENU CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu,
.tabs.tabs--menu {
  display: flex;
  gap: var(--menu-gap);
  padding: var(--menu-padding);
  max-width: 100%;
  
  background: var(--k-glass-bg);
  backdrop-filter: blur(var(--k-glass-blur));
  -webkit-backdrop-filter: blur(var(--k-glass-blur));
  border-radius: var(--menu-radius);
  border: 1px solid var(--k-glass-border);
  box-shadow: var(--k-shadow-lg);
  
  margin-bottom: var(--k-space-4);
  
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  
  position: relative;
  transition: all var(--k-duration-normal) var(--k-ease-default);
  will-change: transform, box-shadow;
}

.tabs--menu:hover,
.tabs.tabs--menu:hover {
  box-shadow: 
    var(--k-shadow-lg),
    0 0 30px rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Duplicate menu (under header) */
.menu-duplicate .tabs--menu,
.menu-duplicate .tabs.tabs--menu {
  background: rgba(18, 18, 26, 0.95);
  border-color: var(--k-border-accent);
  box-shadow: 
    0 0 40px rgba(var(--accent-rgb), 0.35),
    var(--k-shadow-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📜 CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .tabs--menu::-webkit-scrollbar,
  .tabs.tabs--menu::-webkit-scrollbar {
    height: 8px;
    transition: height var(--k-duration-fast);
  }
  
  .tabs--menu:hover::-webkit-scrollbar,
  .tabs.tabs--menu:hover::-webkit-scrollbar {
    height: 10px;
  }
  
  .tabs--menu::-webkit-scrollbar-track,
  .tabs.tabs--menu::-webkit-scrollbar-track {
    background: var(--k-bg-elevated);
    border-radius: 100px;
    margin: 0 var(--k-space-2);
  }
  
  .tabs--menu::-webkit-scrollbar-thumb,
  .tabs.tabs--menu::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0.7));
    border-radius: 100px;
    border: 2px solid var(--k-bg-elevated);
    transition: all var(--k-duration-fast);
  }
  
  .tabs--menu::-webkit-scrollbar-thumb:hover,
  .tabs.tabs--menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0.85));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
  }
}

/* Firefox */
@supports (scrollbar-width: thin) {
  .tabs--menu,
  .tabs.tabs--menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.9) var(--k-bg-elevated);
  }
}

/* Mobile — hide scrollbar */
@media (max-width: 767px) {
  .tabs--menu,
  .tabs.tabs--menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .tabs--menu::-webkit-scrollbar,
  .tabs.tabs--menu::-webkit-scrollbar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔗 TAB ITEMS
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu .tab,
.tabs.tabs--menu .tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--k-space-2);
  
  min-width: fit-content;
  padding: var(--k-space-2) var(--k-space-4);
  min-height: 44px;
  
  border-radius: var(--k-radius-lg);
  border: 1px solid transparent;
  background: transparent;
  
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  color: var(--k-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  
  cursor: pointer;
  transition: all var(--k-duration-normal) var(--k-ease-default);
  position: relative;
  overflow: hidden;
}

/* Hover glow effect */
.tabs--menu .tab::before,
.tabs.tabs--menu .tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    rgba(var(--tab-color-rgb), 0.15) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--k-duration-fast);
}

.tabs--menu .tab:hover::before,
.tabs.tabs--menu .tab:hover::before {
  opacity: 1;
}

/* Hover state */
.tabs--menu .tab:hover,
.tabs.tabs--menu .tab:hover {
  background: var(--k-bg-hover);
  color: var(--k-text-primary);
  border-color: var(--k-border-default);
  transform: translateY(-2px);
}

/* Active state */
.tabs--menu .tab.active,
.tabs.tabs--menu .tab.active,
.tabs--menu .tab[aria-current="page"],
.tabs.tabs--menu .tab[aria-current="page"] {
  background: linear-gradient(
    135deg,
    rgba(var(--tab-color-rgb), 0.2) 0%,
    rgba(var(--tab-color-rgb), 0.1) 100%
  );
  color: rgb(var(--tab-color-rgb));
  border-color: rgba(var(--tab-color-rgb), 0.5);
  box-shadow: 
    0 0 20px rgba(var(--tab-color-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: var(--k-weight-semibold);
}

.tabs--menu .tab.active::before,
.tabs.tabs--menu .tab.active::before {
  opacity: 1;
}

/* Disabled state */
.tabs--menu .tab.disabled,
.tabs.tabs--menu .tab.disabled,
.tabs--menu .tab[aria-disabled="true"],
.tabs.tabs--menu .tab[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 TAB ICON
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu .tab i,
.tabs.tabs--menu .tab i {
  font-size: 1.1em;
  transition: all var(--k-duration-fast);
  color: inherit;
}

.tabs--menu .tab:hover i,
.tabs.tabs--menu .tab:hover i {
  transform: scale(1.1);
}

.tabs--menu .tab.active i,
.tabs.tabs--menu .tab.active i {
  filter: drop-shadow(0 0 4px currentColor);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 TAB BADGE
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu .tab .tab__badge,
.tabs.tabs--menu .tab .tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--k-space-1);
  
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-bold);
  line-height: 1;
  
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0.75));
  color: #fff;
  border-radius: var(--k-radius-full);
  
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.45);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.45);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.55);
  }
}

/* Badge variants */
.tabs--menu .tab .tab__badge.success,
.tabs.tabs--menu .tab .tab__badge.success {
  background: linear-gradient(135deg, var(--k-success), var(--k-success-dark));
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.tabs--menu .tab .tab__badge.danger,
.tabs.tabs--menu .tab .tab__badge.danger {
  background: linear-gradient(135deg, var(--k-danger), var(--k-danger-dark));
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎭 SUBMENU (Tinted)
   ═══════════════════════════════════════════════════════════════════════════ */
nav.tabs[data-widget="submenu"],
.tabs--menu[data-widget="submenu"],
nav.tabs.tabs--submenu,
.tabs--menu.tabs--submenu {
  padding: var(--k-space-1) var(--k-space-2);
  border-radius: var(--k-radius-xl);
  margin-top: calc(var(--k-space-4) * -1 + var(--k-space-2));
  margin-bottom: var(--k-space-4);
  
  --tint-rgb: var(--accent-rgb);
  
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.12) 0%,
    rgba(var(--tint-rgb), 0.06) 100%
  );
  border: 1px solid rgba(var(--tint-rgb), 0.2);
  box-shadow: 0 4px 16px rgba(var(--tint-rgb), 0.1);
}

/* Duplicate submenu */
.menu-duplicate nav.tabs[data-widget="submenu"],
.menu-duplicate .tabs--menu[data-widget="submenu"],
.menu-duplicate nav.tabs.tabs--submenu,
.menu-duplicate .tabs--menu.tabs--submenu {
  background: linear-gradient(
    180deg,
    rgba(var(--tint-rgb), 0.18) 0%,
    rgba(var(--tint-rgb), 0.10) 100%
  ), rgba(18, 18, 26, 0.9);
  border-color: rgba(var(--tint-rgb), 0.3);
  box-shadow: 
    0 0 30px rgba(var(--tint-rgb), 0.2),
    var(--k-shadow-lg);
}

/* Submenu tabs */
nav.tabs[data-widget="submenu"] .tab,
.tabs--menu[data-widget="submenu"] .tab,
nav.tabs.tabs--submenu .tab,
.tabs--menu.tabs--submenu .tab {
  padding: var(--k-space-2) var(--k-space-3);
  min-height: 38px;
  font-size: var(--k-text-sm);
}

/* Active tab in submenu */
nav.tabs[data-widget="submenu"] .tab.active,
.tabs--menu[data-widget="submenu"] .tab.active,
nav.tabs.tabs--submenu .tab.active,
.tabs--menu.tabs--submenu .tab.active,
nav.tabs[data-widget="submenu"] .tab[aria-current="page"],
.tabs--menu[data-widget="submenu"] .tab[aria-current="page"],
nav.tabs.tabs--submenu .tab[aria-current="page"],
.tabs--menu.tabs--submenu .tab[aria-current="page"] {
  background: rgba(var(--tab-color-rgb), 0.2);
  color: rgb(var(--tab-color-rgb));
  border: 1px solid rgba(var(--tab-color-rgb), 0.5);
  box-shadow: 0 4px 12px rgba(var(--tab-color-rgb), 0.2);
}

/* Hover in submenu */
nav.tabs[data-widget="submenu"] .tab:hover:not(.active):not(.disabled),
.tabs--menu[data-widget="submenu"] .tab:hover:not(.active):not(.disabled),
nav.tabs.tabs--submenu .tab:hover:not(.active):not(.disabled),
.tabs--menu.tabs--submenu .tab:hover:not(.active):not(.disabled) {
  background: rgba(var(--tab-color-rgb), 0.12);
  border-color: rgba(var(--tab-color-rgb), 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 TINT PALETTE (data-active-tint)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-widget="submenu"][data-active-tint="purple"],
.tabs--submenu[data-active-tint="purple"] {
  --tint-rgb: 168, 85, 247;
}

[data-widget="submenu"][data-active-tint="blue"],
.tabs--submenu[data-active-tint="blue"] {
  --tint-rgb: 59, 130, 246;
}

[data-widget="submenu"][data-active-tint="green"],
.tabs--submenu[data-active-tint="green"] {
  --tint-rgb: 16, 185, 129;
}

[data-widget="submenu"][data-active-tint="yellow"],
.tabs--submenu[data-active-tint="yellow"] {
  --tint-rgb: 250, 204, 21;
}

[data-widget="submenu"][data-active-tint="red"],
.tabs--submenu[data-active-tint="red"] {
  --tint-rgb: 239, 68, 68;
}

[data-widget="submenu"][data-active-tint="orange"],
.tabs--submenu[data-active-tint="orange"] {
  --tint-rgb: 255, 107, 53;
}

[data-widget="submenu"][data-active-tint="teal"],
.tabs--submenu[data-active-tint="teal"] {
  --tint-rgb: 20, 184, 166;
}

[data-widget="submenu"][data-active-tint="pink"],
.tabs--submenu[data-active-tint="pink"] {
  --tint-rgb: 236, 72, 153;
}

[data-widget="submenu"][data-active-tint="cyan"],
.tabs--submenu[data-active-tint="cyan"] {
  --tint-rgb: 34, 211, 238;
}

[data-widget="submenu"][data-active-tint="gray"],
.tabs--submenu[data-active-tint="gray"] {
  --tint-rgb: 107, 114, 128;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📏 SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Small */
.tabs--menu.tabs--sm .tab,
.tabs.tabs--menu.tabs--sm .tab {
  padding: var(--k-space-1) var(--k-space-3);
  min-height: 36px;
  font-size: var(--k-text-xs);
}

/* Large */
.tabs--menu.tabs--lg .tab,
.tabs.tabs--menu.tabs--lg .tab {
  padding: var(--k-space-3) var(--k-space-5);
  min-height: 52px;
  font-size: var(--k-text-base);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tabs--menu,
  .tabs.tabs--menu {
    border-radius: var(--k-radius-xl);
    padding: var(--k-space-1);
    gap: var(--k-space-1);
  }
  
  .tabs--menu .tab,
  .tabs.tabs--menu .tab {
    padding: var(--k-space-2) var(--k-space-3);
    min-height: 40px;
    font-size: var(--k-text-sm);
  }
  
  .tabs--menu .tab i,
  .tabs.tabs--menu .tab i {
    font-size: 1em;
  }
  
  .tabs--menu .tab .tab__badge,
  .tabs.tabs--menu .tab .tab__badge {
    min-width: 18px;
    height: 18px;
    font-size: 0.7em;
  }
  
  nav.tabs[data-widget="submenu"],
  .tabs--submenu {
    margin-top: calc(var(--k-space-3) * -1);
  }
}

@media (max-width: 480px) {
  .tabs--menu .tab,
  .tabs.tabs--menu .tab {
    padding: var(--k-space-2);
    min-height: 36px;
    font-size: var(--k-text-xs);
  }
  
  /* Hide text on very small screens, show only icon */
  .tabs--menu .tab span,
  .tabs.tabs--menu .tab span {
    display: none;
  }
  
  .tabs--menu .tab i,
  .tabs.tabs--menu .tab i {
    font-size: 1.2em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu .tab:focus-visible,
.tabs.tabs--menu .tab:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs--menu.animated,
.tabs.tabs--menu.animated {
  animation: menu-fade-in 0.5s var(--k-ease-default) both;
}

@keyframes menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabs--menu.animated .tab,
.tabs.tabs--menu.animated .tab {
  animation: tab-slide-in 0.4s var(--k-ease-default) both;
}

.tabs--menu.animated .tab:nth-child(1) { animation-delay: 0.05s; }
.tabs--menu.animated .tab:nth-child(2) { animation-delay: 0.10s; }
.tabs--menu.animated .tab:nth-child(3) { animation-delay: 0.15s; }
.tabs--menu.animated .tab:nth-child(4) { animation-delay: 0.20s; }
.tabs--menu.animated .tab:nth-child(n+5) { animation-delay: 0.25s; }

@keyframes tab-slide-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ♿ REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .tabs--menu,
  .tabs.tabs--menu,
  .tabs--menu .tab,
  .tabs.tabs--menu .tab,
  .tabs--menu .tab i,
  .tabs.tabs--menu .tab i,
  .tabs--menu .tab .tab__badge,
  .tabs.tabs--menu .tab .tab__badge {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🖨️ PRINT
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .tabs--menu,
  .tabs.tabs--menu {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  
  .tabs--menu .tab,
  .tabs.tabs--menu .tab {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #ddd !important;
  }
  
  .tabs--menu .tab.active,
  .tabs.tabs--menu .tab.active {
    background: #f5f5f5 !important;
    font-weight: bold !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ END OF MENU STYLES
   ═══════════════════════════════════════════════════════════════════════════ */