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

/* Dashboard v2 — Sunset Travel Design Tokens */

:root {
  /* Core */
  --bg: #F8F7F4;
  --card: #FFFFFF;
  --card-alt: #FFF9F0;

  /* Brand */
  --primary: #FF6B35;
  --primary-dark: #E55528;
  --primary-light: #FFE8DE;
  --secondary: #4ECDC4;
  --secondary-dark: #38B2AC;
  --secondary-light: #E0FAF8;

  /* Status */
  --success: #48BB78;
  --success-light: #F0FFF4;
  --warning: #F6AD55;
  --warning-light: #FFFAF0;
  --danger: #FC8181;
  --danger-light: #FFF5F5;
  --info: #63B3ED;

  /* Text */
  --text-primary: #2D3748;
  --text-secondary: #718096;
  --text-muted: #A0AEC0;

  /* Borders & Shadows */
  --border: #E2E8F0;
  --border-strong: #CBD5E0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 24px rgba(0,0,0,0.10);

  /* Chart colors */
  --chart-1: #FF6B35;
  --chart-2: #4ECDC4;
  --chart-3: #667EEA;
  --chart-4: #F6AD55;
  --chart-5: #68D391;
  --chart-6: #F687B3;

  /* Spacing */
  --sidebar-width: 256px;
  --page-padding: 24px;
  --card-padding: 20px 24px;
  --card-gap: 16px;
  --section-gap: 24px;

  /* Radius */
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 8px;
  --radius-badge: 6px;
  --radius-full: 9999px;
}

/* Global */
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Rubik', sans-serif;
  direction: rtl;
}

/* Numbers always LTR */
.num, [data-num] {
  direction: ltr;
  unicode-bidi: embed;
  font-family: 'Inter', sans-serif;
}

/* Card base */
.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--card-padding);
  transition: all 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* KPI value */
.kpi-value {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  direction: ltr;
  unicode-bidi: embed;
}
.kpi-value-lg {
  font-size: 2.5rem;
}
.kpi-label {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Progress bar */
.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
}
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }
.progress-fill.danger { background: var(--danger); }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: #B7791F; }
.badge-danger { background: var(--danger-light); color: #C53030; }
.badge-info { background: #EBF8FF; color: #2B6CB0; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--card);
  border-left: 1px solid var(--border);
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
  overflow-y: auto;
}
.sidebar-item {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-right: 3px solid transparent;
  font-size: 0.9rem;
}
.sidebar-item:hover {
  background: var(--bg);
}
.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary);
  border-right-color: var(--primary);
  font-weight: 600;
}

/* Main content area */
.main-content {
  margin-right: var(--sidebar-width);
  padding: var(--page-padding);
  min-height: 100vh;
}

/* Tabs */
.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--section-gap);
  overflow-x: auto;
}
.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.tab-item:hover {
  color: var(--text-primary);
}
.tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ====== Sticky Weekly Header ====== */
.weekly-sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}
.weekly-sticky-header .card {
  transition: padding 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}
.weekly-header-stuck {
  padding: 8px 16px !important;
  border-radius: 0 0 var(--radius-card, 16px) var(--radius-card, 16px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(8px);
}

/* (Scroll progress indicator is now inline in sticky header — no separate CSS needed) */

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #F1F5F9 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-badge);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Alert card */
.alert-card {
  border-right: 4px solid var(--warning);
  padding: 12px 16px;
  background: var(--card);
  border-radius: 0 var(--radius-badge) var(--radius-badge) 0;
}
.alert-card.critical { border-right-color: var(--danger); }
.alert-card.positive { border-right-color: var(--success); }

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-right: 0;
    padding: 16px;
  }
  /* F-6-01: cards with multi-column flex rows should wrap on mobile (not nowrap off-screen) */
  .card .flex.items-center {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  /* F-6-01: allow horizontal scroll for any content that's still wider than viewport */
  .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ====== AI Insight Cards — v2 Design System ====== */

/* Card base */
.ai-card {
  background: #FFFFFF;
  border-radius: 10px;
  border-right: 4px solid #6366F1;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-top: 12px;
  transition: box-shadow 0.2s ease;
}
.ai-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.09);
}

/* Severity variants — border right + very subtle bg tint */
.ai-card--warning { border-color: #F59E0B; background: #FFFDF7; }
.ai-card--danger  { border-color: #DC2626; background: #FFFAFA; }
.ai-card--success { border-color: #16A34A; background: #FAFFF7; }
.ai-card--action  { border-color: #7C3AED; background: #FCFAFF; }
.ai-card--info    { border-color: #6366F1; background: #FAFAFF; }
.ai-card--neutral { border-color: #94A3B8; background: #FAFAFA; }

/* Label row — category + AI badge */
.ai-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6B7280;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-card__label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Badge "AI" pill */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #EEF2FF;
  color: #6366F1;
  letter-spacing: 0;
}
.ai-badge svg { width: 12px; height: 12px; }

/* Headline */
.ai-card__headline {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* Body text */
.ai-card__body {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.65;
}
.ai-card__body strong,
.ai-card__body b {
  color: #111827;
  font-weight: 600;
}

/* Action chip */
.ai-card__action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  background: #F5F3FF;
  color: #7C3AED;
  border: 1px solid #E9E5FF;
}
.ai-card__action-chip svg { width: 13px; height: 13px; }

/* Impact chip */
.ai-card__impact-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  margin-right: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}
.ai-card__impact-chip svg { width: 13px; height: 13px; }

/* Expand/collapse */
.ai-card__body-wrap {
  position: relative;
  overflow: hidden;
  max-height: 4.2em; /* ~2.5 lines */
  transition: max-height 0.3s ease;
}
.ai-card__body-wrap.expanded {
  max-height: 2000px;
}
.ai-card__body-wrap:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, var(--card-bg, #FFFFFF));
}
/* Investigator cards: table always visible, no max-height when collapsed */
.ai-card__body-wrap--inv {
  max-height: none;
  overflow: visible;
}
.ai-card__body-wrap--inv:not(.expanded)::after {
  display: none;
}
.ai-card__toggle {
  cursor: pointer;
  color: #6366F1;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
}
.ai-card__toggle:hover {
  color: #4F46E5;
  text-decoration: underline;
}

/* Synthesis card — department summary with issues list */
.ai-card--synthesis {
  border-right-width: 5px;
  padding: 16px 18px;
}
.ai-card--synthesis .ai-card__headline {
  font-size: 15px;
  margin-bottom: 10px;
}

/* Issue row inside synthesis */
.ai-issue {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}
.ai-issue:last-child { border-bottom: none; }
.ai-issue__title {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 3px;
}
.ai-issue__detail {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 6px;
}
.ai-issue__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* AI compact table — findings/actions/impact */
.ai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  direction: rtl;
}
.ai-table th {
  background: #F8FAFC;
  color: #64748B;
  font-weight: 600;
  font-size: 11px;
  text-align: right;
  padding: 8px 12px;
  border-bottom: 2px solid #E2E8F0;
  white-space: nowrap;
}
.ai-table td {
  padding: 10px 12px;
  color: #334155;
  line-height: 1.5;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: top;
}
.ai-table td:first-child { font-weight: 500; }
.ai-table tr:last-child td { border-bottom: none; }
.ai-table .ai-who {
  font-weight: 600;
  color: #0D9488;
  white-space: nowrap;
  text-align: center;
}

/* AI Teaser — always visible, enticing hook */
.ai-teaser {
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  line-height: 1.5;
}

/* v52/v54: Urgency + sentiment row colors */
/* HIGH=red (urgent), MEDIUM=amber, LOW+positive=green (bright spot), LOW+negative/neutral=gray */
.ai-table tr.ai-row-high > td:first-child { border-right: 4px solid #EF4444; }
.ai-table tr.ai-row-high { background: #FEF2F2; }
.ai-table tr.ai-row-medium > td:first-child { border-right: 4px solid #F59E0B; }
.ai-table tr.ai-row-medium { background: #FFFBEB; }
.ai-table tr.ai-row-low > td:first-child { border-right: 4px solid #10B981; }
.ai-table tr.ai-row-low { background: #F0FDF4; }
/* v54: LOW + negative/neutral = gray (minor issue, NOT positive news) */
.ai-table tr.ai-row-low-neutral > td:first-child { border-right: 4px solid #94A3B8; }
.ai-table tr.ai-row-low-neutral { background: #F8FAFC; }
/* Single-finding variant — div not tr */
.ai-row-high:not(tr) { border-right: 4px solid #EF4444; background: #FEF2F2; }
.ai-row-medium:not(tr) { border-right: 4px solid #F59E0B; background: #FFFBEB; }
.ai-row-low:not(tr) { border-right: 4px solid #10B981; background: #F0FDF4; }
.ai-row-low-neutral:not(tr) { border-right: 4px solid #94A3B8; background: #F8FAFC; }

/* v59: MIXED sentiment = dual-color (green+red split) — conflicting signals */
/* Left half = green (some positive), right half = red (some negative) */
.ai-table tr.ai-row-mixed > td:first-child {
  border-right: 4px solid transparent;
  border-image: linear-gradient(to bottom, #10B981 50%, #EF4444 50%) 1;
}
.ai-table tr.ai-row-mixed {
  background: linear-gradient(to left, #FEF2F2 50%, #F0FDF4 50%);
}
.ai-row-mixed:not(tr) {
  border-right: 4px solid transparent;
  border-image: linear-gradient(to bottom, #10B981 50%, #EF4444 50%) 1;
  background: linear-gradient(to left, #FEF2F2 50%, #F0FDF4 50%);
}

/* AI Investigator table — hidden by default, shown when expanded */
.ai-inv-table {
  display: none;
  margin-top: 10px;
}
.ai-card__body-wrap.expanded .ai-inv-table,
.ai-card__body-wrap--inv.expanded .ai-inv-table {
  display: block;
}

/* Legacy detail text — hidden (replaced by table) */
.ai-detail-text {
  display: none !important;
}

/* Empty state — waiting for AI */
.ai-card--empty {
  border-color: #E5E7EB;
  background: #FAFAFA;
  text-align: center;
  padding: 16px;
}
.ai-card--empty p {
  font-size: 13px;
  color: #9CA3AF;
}

/* Legacy compat — keep old classes working but restyle */
.ai-text-wrap {
  position: relative;
  overflow: hidden;
  max-height: 4.8em;
  transition: max-height 0.3s ease;
}
.ai-text-wrap.expanded {
  max-height: 2000px;
}
.ai-text-wrap:not(.expanded)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, var(--ai-fade, #FFFFFF));
}
.ai-read-more {
  cursor: pointer;
  color: #6366F1;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.25rem;
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
}
.ai-read-more:hover {
  color: #4F46E5;
  text-decoration: underline;
}

/* Print */
@media print {
  .sidebar, .no-print { display: none !important; }
  .main-content { margin-right: 0; }
}

/* ====== DESIGN POLISH (21.4.2026) ====== */

/* 1. Accessibility — Focus-visible ring (keyboard-only, invisible on mouse click) */
/* Applies to all interactive elements. Uses primary color with subtle outline + offset. */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
[\@click]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-btn);
  transition: outline-offset 0.1s ease;
}
.sidebar-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* 2. Sticky header — subtler shadow when stuck (was 0 4px 20px 0.1 → now 0 2px 12px 0.06) */
.weekly-header-stuck {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.92) !important;
}

/* 3. Row hover only — zebra removed after testing (conflicted with semantic bg-danger-light/30 rows). */
/* Hover provides scannability without masking critical-row red/green tints. */
.card table tbody tr:hover,
.ai-table tbody tr:hover {
  background-color: rgba(255, 107, 53, 0.06);
  transition: background-color 0.12s ease;
}

/* 4. KPI card micro-lift on hover — unified feel across inline KPI boxes */
/* Targets any element marked hover:shadow-md AND cursor-pointer (Alpine-authored cards) */
.cursor-pointer.hover\:shadow-md {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cursor-pointer.hover\:shadow-md:hover {
  transform: translateY(-1px);
}

/* ============================================================
   Round 7 #7 (27.4.2026 evening) — Department wrappers
   Daily report grouped Sales → Planning → Marketing.
   Each dept block: subtle background tint + colored H1 banner.
   ============================================================ */
.dept-section {
  margin-bottom: 2rem;
  border-radius: 12px;
  padding: 1.25rem 1rem 0.75rem 1rem;
}
.dept-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.25rem -0.25rem 1rem -0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  /* R20.2 (10.5.2026) #2: dept-header NO LONGER sticky per Nativ "מה שעובד זה סטקי רק על הכותרת זה לא מה שהתכוונתי".
     Tab nav now takes the sticky slot below pills. */
}
/* R20.2 (10.5.2026) #2: sub-tab nav sticky directly below pills nav (was below dept-header — that didn't work).
   Strong visual: white bg + shadow ensures separation from content scrolling underneath. */
.dept-section .tab-nav-sticky {
  position: sticky;
  top: 56px; /* directly below pills nav */
  z-index: 22;
  background: #ffffff;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* R20 #5 / R20.2 #3: main top pills nav for monthly tab — slight always-on opacity reduction so it doesn't compete visually when sticky */
.monthly-section-pills {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.75rem;
  margin: 0 -0.5rem 1rem -0.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  transition: background 0.2s;
}
.monthly-section-pills:hover { background: rgba(255, 255, 255, 1); }
.monthly-section-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: rgba(0,0,0,0.04);
  color: #475569;
  border: 1px solid transparent;
  white-space: nowrap;
}
.monthly-section-pill:hover { background: rgba(0,0,0,0.08); color: #1F2937; }
.monthly-section-pill.active { background: #1F2937; color: #fff; border-color: #1F2937; }
.dept-header .dept-icon { font-size: 1.875rem; line-height: 1; }
.dept-header .dept-title { font-size: 1.5rem; }
.dept-header .dept-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-right: auto;
}
/* Sales — sky-blue tint */
.dept-sales {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, rgba(255,255,255,0) 60%);
  border: 1px solid rgba(14, 165, 233, 0.15);
}
.dept-sales .dept-header {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0.04) 100%);
  border-right: 4px solid #0EA5E9;
}
.dept-sales .dept-title { color: #0369A1; }
/* Planning — green tint */
.dept-planning {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(255,255,255,0) 60%);
  border: 1px solid rgba(16, 185, 129, 0.15);
}
.dept-planning .dept-header {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 100%);
  border-right: 4px solid #10B981;
}
.dept-planning .dept-title { color: #047857; }
/* Marketing — amber tint */
.dept-marketing {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(255,255,255,0) 60%);
  border: 1px solid rgba(245, 158, 11, 0.15);
}
.dept-marketing .dept-header {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%);
  border-right: 4px solid #F59E0B;
}
.dept-marketing .dept-title { color: #B45309; }
/* Mobile responsive */
@media (max-width: 640px) {
  .dept-section { padding: 0.75rem 0.5rem 0.5rem 0.5rem; }
  .dept-header { padding: 0.5rem 0.75rem; }
  .dept-header .dept-title { font-size: 1.125rem; }
  .dept-header .dept-icon { font-size: 1.5rem; }
}