/* ===================================================
   GLOBAL LAYOUT SAFETY
   Prevent horizontal overflow at the page level.
   =================================================== */
html, body, #root {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* ===================================================
   SCORE RING FILL ANIMATION
   =================================================== */
@keyframes ring-fill {
  from { stroke-dashoffset: var(--ring-circ); }
  to   { stroke-dashoffset: var(--ring-offset); }
}
.score-ring-fill {
  animation: ring-fill 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* ===================================================
   TODAY DOT PULSE (Activity Feed)
   =================================================== */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 4px transparent; }
}
.dot-pulse {
  animation: dot-pulse 2.5s ease-in-out infinite;
}

/* ===================================================
   CHAT MESSAGE STAGGER
   =================================================== */
@keyframes msg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-messages > * {
  animation: msg-fade-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-messages > *:nth-child(1)  { animation-delay: 0s; }
.chat-messages > *:nth-child(2)  { animation-delay: 0.03s; }
.chat-messages > *:nth-child(3)  { animation-delay: 0.06s; }
.chat-messages > *:nth-child(4)  { animation-delay: 0.09s; }
.chat-messages > *:nth-child(5)  { animation-delay: 0.12s; }
.chat-messages > *:nth-child(6)  { animation-delay: 0.15s; }
.chat-messages > *:nth-child(7)  { animation-delay: 0.18s; }
.chat-messages > *:nth-child(8)  { animation-delay: 0.21s; }
.chat-messages > *:nth-child(9)  { animation-delay: 0.24s; }
.chat-messages > *:nth-child(10) { animation-delay: 0.27s; }

/* ===================================================
   STAMP POP-IN ANIMATION (PASSED / FAILED)
   =================================================== */
@keyframes stamp-pop {
  0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
  50%  { transform: scale(1.15) rotate(1deg); opacity: 1; }
  70%  { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(-2deg); opacity: 1; }
}
.stamp-pop {
  animation: stamp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ===================================================
   PROGRESS BAR FILL ANIMATION
   =================================================== */
@keyframes bar-fill {
  from { max-width: 0; }
  to   { max-width: 100%; }
}
/* Inner fill of any overflow-hidden rounded progress track */
.overflow-hidden > .h-full.rounded-full,
.overflow-hidden > .h-full.bg-green-500,
.overflow-hidden > .h-full.bg-teal-500,
.overflow-hidden > .h-full.bg-indigo-500,
.overflow-hidden > .h-full.bg-emerald-500,
.overflow-hidden > .h-full.bg-red-500,
.overflow-hidden > .h-full.bg-amber-500 {
  animation: bar-fill 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bar-fill {
  animation: bar-fill 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===================================================
   PANEL SLIDE-IN + BACKDROP FADE
   =================================================== */
@keyframes panel-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes panel-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.panel-slide-in {
  animation: panel-slide-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.panel-slide-up {
  animation: panel-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.backdrop-fade-in {
  animation: backdrop-fade-in 0.25s ease both;
}

/* ===================================================
   TAB CONTENT FADE-UP TRANSITION
   =================================================== */
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-fade {
  animation: tab-fade-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===================================================
   KPI CARD STAGGER ANIMATION
   =================================================== */
@keyframes kpi-stagger {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-tour="dashboard-kpis"] > *,
[data-tour="aud-kpis"] > * {
  animation: kpi-stagger 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-tour="dashboard-kpis"] > *:nth-child(1), [data-tour="aud-kpis"] > *:nth-child(1) { animation-delay: 0s; }
[data-tour="dashboard-kpis"] > *:nth-child(2), [data-tour="aud-kpis"] > *:nth-child(2) { animation-delay: 0.08s; }
[data-tour="dashboard-kpis"] > *:nth-child(3), [data-tour="aud-kpis"] > *:nth-child(3) { animation-delay: 0.16s; }
[data-tour="dashboard-kpis"] > *:nth-child(4), [data-tour="aud-kpis"] > *:nth-child(4) { animation-delay: 0.24s; }
[data-tour="dashboard-kpis"] > *:nth-child(5), [data-tour="aud-kpis"] > *:nth-child(5) { animation-delay: 0.32s; }

/* KPI filter indicator bar slide-in */
@keyframes kpi-indicator-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.kpi-indicator {
  animation: kpi-indicator-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Scroll-margin for KPI shortcut anchors */
[id^="lane-"] { scroll-margin-top: 20px; }

/* Bulk action bar slide-up */
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===================================================
   BUTTON PRESS EFFECT
   =================================================== */
button:not(:disabled):active,
[role="button"]:not(:disabled):active {
  transform: scale(0.97);
}
button,
[role="button"] {
  transition: transform 0.1s ease;
}

/* ===================================================
   GLOBAL DARK MODE OVERRIDES
   Applied when <html class="dark"> is present.
   This ensures the ENTIRE app switches to dark mode,
   not just the sidebar/nav.
   =================================================== */

html.dark {
  color-scheme: dark;
}

/* --- Page & Card Backgrounds --- */
html.dark .bg-white {
  background-color: #2A2825; /* warm charcoal */
}
html.dark .bg-gray-50,
html.dark .bg-\[\#F8F9FA\],
html.dark .bg-\[\#F3F1EC\] {
  background-color: #1C1B19; /* warm deep charcoal */
}
html.dark .bg-gray-100 {
  background-color: #2A2825;
}
html.dark .bg-gray-200 {
  background-color: #3E3C3A;
}

/* --- Text Colors (warm) --- */
html.dark .text-gray-900 {
  color: #F0EDE8;
}
html.dark .text-gray-800 {
  color: #E0DCD6;
}
html.dark .text-gray-700 {
  color: #C5C0B8;
}
html.dark .text-gray-600 {
  color: #9E9890;
}
html.dark .text-gray-500 {
  color: #7A7672;
}
html.dark .text-gray-400 {
  color: #5A5754;
}

/* --- Border Colors (warm) --- */
html.dark .border-gray-200 {
  border-color: rgba(255,255,255,0.06);
}
html.dark .border-gray-100 {
  border-color: rgba(255,255,255,0.04);
}
html.dark .border-gray-300 {
  border-color: rgba(255,255,255,0.1);
}

/* --- Form Inputs, Selects, Textareas (warm) --- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
  background-color: #1C1B19;
  color: #F0EDE8;
  border-color: rgba(255,255,255,0.1);
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #7A7672;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #8B7EC8;
  outline-color: #8B7EC8;
}

/* --- Tables (warm) --- */
html.dark thead {
  background-color: #2A2825;
}
html.dark th {
  color: #9E9890;
  border-color: rgba(255,255,255,0.06);
}
html.dark td {
  border-color: rgba(255,255,255,0.04);
}
html.dark tbody tr:hover {
  background-color: #3E3C3A;
}

/* --- Hover state overrides (warm) --- */
html.dark .hover\:bg-gray-50:hover {
  background-color: #3E3C3A !important;
}
html.dark .hover\:bg-gray-100:hover {
  background-color: #3E3C3A !important;
}
html.dark .hover\:bg-white:hover {
  background-color: #3E3C3A !important;
}

/* --- Specific component patterns --- */

/* Cards with shadow */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* Dividers (warm) */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.06);
}
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.04);
}

/* Ring colors (focus rings) */
html.dark .ring-gray-200 {
  --tw-ring-color: rgba(255,255,255,0.06);
}
html.dark .ring-gray-100 {
  --tw-ring-color: rgba(255,255,255,0.04);
}

/* Badge / Pill light backgrounds */
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15);
}
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.15);
}
html.dark .bg-rose-50 {
  background-color: rgba(244, 63, 94, 0.15);
}
html.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15);
}
html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15);
}
html.dark .bg-cyan-50 {
  background-color: rgba(6, 182, 212, 0.15);
}
html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.15);
}
html.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.15);
}
html.dark .bg-sky-50 {
  background-color: rgba(14, 165, 233, 0.15);
}
html.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.15);
}
html.dark .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.15);
}
html.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.15);
}
html.dark .bg-slate-50 {
  background-color: #1C1B19;
}
html.dark .bg-slate-100 {
  background-color: #2A2825;
}

/* Warm text colors */
html.dark .text-slate-900 { color: #F0EDE8; }
html.dark .text-slate-800 { color: #E0DCD6; }
html.dark .text-slate-700 { color: #C5C0B8; }
html.dark .text-slate-600 { color: #9E9890; }
html.dark .text-slate-500 { color: #7A7672; }
html.dark .text-slate-400 { color: #9E9890; }

/* Colored text on light badges */
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-600 { color: #818cf8; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-rose-600 { color: #fb7185; }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-blue-600 { color: #60a5fa; }
html.dark .text-cyan-700 { color: #67e8f9; }
html.dark .text-cyan-600 { color: #22d3ee; }
html.dark .text-red-600 { color: #fb7185; }
html.dark .text-green-600 { color: #34d399; }

/* Badge borders (warm) */
html.dark .border-indigo-100 { border-color: rgba(139, 126, 200, 0.3); }
html.dark .border-emerald-100 { border-color: rgba(46, 212, 122, 0.3); }
html.dark .border-rose-100 { border-color: rgba(255, 71, 87, 0.3); }
html.dark .border-amber-100 { border-color: rgba(255, 171, 46, 0.3); }
html.dark .border-blue-100 { border-color: rgba(123, 163, 212, 0.3); }
html.dark .border-slate-200 { border-color: rgba(255,255,255,0.06); }
html.dark .border-slate-100 { border-color: rgba(255,255,255,0.04); }

/* Gradient endpoint overrides (warm) */
html.dark .to-white { --tw-gradient-to: #2A2825; }
html.dark .from-white { --tw-gradient-from: #2A2825; }

/* Scrollbar styling (warm) */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: #1C1B19;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #3E3C3A;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #5A5754;
}

/* Modal overlays */
html.dark .bg-gray-900\/50 {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Recharts / SVG charts (warm) */
html.dark .recharts-cartesian-grid line {
  stroke: rgba(255,255,255,0.06);
}
html.dark .recharts-text {
  fill: #9E9890;
}

/* ===================================================
   PRINT / EXPORT PDF STYLES
   A4 portrait, page breaks between sections.
   Palette: navy #0B1D3A, teal #1A8A7D, light teal #E6F5F3
   =================================================== */

@media print {
  /* --- A4 Page Setup --- */
  @page {
    size: A4 portrait;
    margin: 10mm 10mm 12mm 10mm;
  }

  /* Force light mode in print regardless of theme */
  html, html.dark {
    color-scheme: light !important;
  }

  /* --- Hide non-print elements --- */
  .no-print,
  .no-print * {
    display: none !important;
  }

  /* --- Hide campaign report builder sidebar in print --- */
  .campaign-report-builder {
    display: none !important;
  }

  /* --- Reset the full-screen overlay for printing --- */
  .print-report-root {
    position: static !important;
    overflow: visible !important;
    background: white !important;
    height: auto !important;
  }

  /* --- Report container: remove decorative styles --- */
  .print-report-container {
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: white !important;
    min-height: auto !important;
    /* Reset any mobile fit-to-screen scaling for print/PDF export so the
       document is rendered at its native 900px resolution. */
    zoom: 1 !important;
    transform: none !important;
  }

  /* --- Report pages: remove screen-only shadows/margins --- */
  .report-page {
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 20px 24px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* --- Section page-break control --- */
  .print-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .print-page-break {
    page-break-before: always;
    break-before: page;
  }

  .print-section + .print-section {
    page-break-before: auto;
    break-before: auto;
  }

  /* --- Keep table rows together --- */
  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }

  /* --- Preserve ALL inline colors for print --- */
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Remove shadows for cleaner print */
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: none !important;
  }

  /* Ensure all colored backgrounds print correctly */
  [class*="bg-indigo"],
  [class*="bg-emerald"],
  [class*="bg-rose"],
  [class*="bg-amber"],
  [class*="bg-sky"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Links: hide URLs in print */
  a[href]::after {
    content: none;
  }
}

/* ===================================================
   RATING SCALE STYLES (AuditRunner)
   =================================================== */

/* Stars */
.rating-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
}
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.star-btn:hover {
  transform: scale(1.15);
}
.star-btn.active svg {
  filter: drop-shadow(0 2px 4px rgba(244,169,64,0.3));
}
.star-label {
  font-size: 10px;
  color: #9CA3AF;
}
.rating-value-display {
  margin-left: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0B1D3A;
}
.rating-value-display.color-light {
  color: #f1f5f9;
}

/* Numbers */
.rating-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}
.number-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid #DDE3E9;
  background: white;
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.number-btn:hover {
  border-color: #1A8A7D;
  background: #E6F5F3;
}
.number-btn.active {
  background: #1A8A7D;
  border-color: #1A8A7D;
  color: white;
  box-shadow: 0 2px 8px rgba(26,138,125,0.3);
}
.number-btn.dark {
  border-color: rgba(255,255,255,0.1);
  background: #1C1B19;
  color: #F0EDE8;
}
.number-btn.dark:hover {
  border-color: #5BA89D;
  background: rgba(91,168,157,0.15);
}
.number-btn.dark.active {
  background: #5BA89D;
  border-color: #5BA89D;
  color: white;
}
.rating-labels-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}
.rating-label-min,
.rating-label-max {
  font-size: 11px;
  color: #9CA3AF;
}

/* Emoji */
.rating-emoji {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.emoji-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #F7F8FA;
  cursor: pointer;
  transition: all 0.15s;
}
.emoji-btn:hover {
  background: #EEF0F4;
  transform: scale(1.1);
}
.emoji-btn.active {
  border-color: #1A8A7D;
  background: #E6F5F3;
}
.emoji-btn.dark {
  background: #1C1B19;
}
.emoji-btn.dark:hover {
  background: #3E3C3A;
}
.emoji-btn.dark.active {
  border-color: #5BA89D;
  background: rgba(91,168,157,0.15);
}
.emoji {
  font-size: 28px;
}
.emoji-label {
  font-size: 10px;
  color: #6B7B8D;
}

/* ===================================================
   QUESTION TYPE DROPDOWN (Template Editor)
   =================================================== */
.qtype-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 22px;
  border: 1.5px solid #DDE3E9;
  background: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s;
  white-space: nowrap;
}
.qtype-trigger:hover {
  border-color: #1A8A7D;
}
.qtype-icon {
  font-size: 15px;
}
.qtype-chevron {
  color: #9CA3AF;
  transition: transform 0.2s;
}
.qtype-chevron.open {
  transform: rotate(180deg);
}
.qtype-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(11,29,58,0.15);
  border: 1px solid #EEF0F4;
  z-index: 60;
  overflow: hidden;
  padding: 6px;
}
.qtype-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.qtype-option:hover {
  background: #F7F8FA;
}
.qtype-option.active {
  background: #E6F5F3;
}
.qtype-option-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F8FA;
  border-radius: 8px;
  font-size: 15px;
  flex-shrink: 0;
}
.qtype-option.active .qtype-option-icon {
  background: #D1FAE5;
}
.qtype-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.qtype-option-label {
  font-size: 13px;
  font-weight: 600;
  color: #0B1D3A;
}
.qtype-option-desc {
  font-size: 11px;
  color: #9CA3AF;
}
.qtype-check {
  flex-shrink: 0;
}

/* ===================================================
   SITES TABLE — Responsive Grid
   13 columns: ☐ | Site | Brand | Area | Country | Status | Score | Trend | Progress | Last Audit | Manager | Auditor | Actions
   =================================================== */
.sites-grid {
  display: grid;
  grid-template-columns: 32px 1.4fr 0.7fr 0.6fr 0.7fr 70px 56px 52px 66px 70px 0.7fr 0.7fr 100px;
  gap: 0 4px;
  min-width: 1020px;
}

/* ≤1280 px — hide Trend + Progress + Area */
@media (max-width: 1280px) {
  .sites-grid {
    grid-template-columns: 32px 1.4fr 0.7fr 0.7fr 70px 56px 70px 0.8fr 0.8fr 100px;
    min-width: 780px;
  }
  .sites-col-trend,
  .sites-col-progress,
  .sites-col-area { display: none !important; }
}

/* ≤1024 px — also hide Last Audit + Auditor */
@media (max-width: 1024px) {
  .sites-grid {
    grid-template-columns: 32px 1.3fr 0.7fr 0.7fr 68px 56px 0.8fr 90px;
    min-width: 620px;
  }
  .sites-col-last,
  .sites-col-auditor { display: none !important; }
}

/* ≤768 px — also hide Manager + Status + Actions (site name is clickable) */
@media (max-width: 768px) {
  .sites-grid {
    grid-template-columns: 28px 1fr 0.6fr 0.6fr 50px;
    min-width: 0;
  }
  .sites-col-manager,
  .sites-col-status,
  .sites-col-actions { display: none !important; }
}

/* ===================================================
   MASONRY SETTINGS LAYOUT
   =================================================== */
.settings-masonry {
  columns: 3;
  column-gap: 16px;
}
.settings-masonry > * {
  break-inside: avoid;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .settings-masonry { columns: 2; }
}
@media (max-width: 700px) {
  .settings-masonry { columns: 1; }
}