/*
 * Report Theme - Light Mode Design System
 * Matches DetailedReportPage.tsx design from report-page-demo
 *
 * Usage: Add class="report-theme" to body element
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   Matches demo's index.css .report-theme
   ============================================ */

.report-theme {
  /* Core colors - Light theme matching demo */
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;

  /* Card/Surface colors */
  --card: 0 0% 97%;
  --card-foreground: 0 0% 10%;

  /* Primary accent - Yellow/Gold */
  --primary: 45 93% 46%;
  --primary-foreground: 0 0% 0%;

  /* Secondary colors */
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 20%;

  /* Muted colors */
  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 40%;

  /* Accent (same as primary) */
  --accent: 45 93% 46%;
  --accent-foreground: 0 0% 0%;

  /* Border colors */
  --border: 0 0% 85%;
  --input: 0 0% 85%;
  --ring: 45 93% 46%;

  /* Report-specific tokens */
  --report-accent: 45 93% 46%;
  --report-accent-light: 45 90% 94%;
  --report-success: 142 71% 45%;
  --report-danger: 0 84% 60%;
  --report-info: 217 91% 60%;

  /* Semantic colors */
  --success: 142 71% 45%;
  --success-muted: 142 71% 35%;
  --danger: 0 84% 60%;
  --danger-muted: 0 84% 50%;
  --warning: 38 92% 50%;
  --info: 217 91% 60%;

  /* Chart colors - will be overridden by brand colors from DB */
  --chart-client: 45 93% 47%;
  --chart-competitor-1: 0 84% 60%;
  --chart-competitor-2: 262 83% 58%;
  --chart-competitor-3: 160 84% 39%;
  --chart-competitor-4: 199 89% 48%;
  --chart-grid: 220 13% 91%;
}

/* ============================================
   Base Styles
   ============================================ */

.report-theme {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Utility Classes (matching Tailwind patterns)
   ============================================ */

/* Background colors */
.report-theme .bg-background { background-color: hsl(var(--background)); }
.report-theme .bg-card { background-color: hsl(var(--card)); }
.report-theme .bg-secondary { background-color: hsl(var(--secondary)); }
.report-theme .bg-primary { background-color: hsl(var(--primary)); }
.report-theme .bg-success { background-color: hsl(var(--success)); }
.report-theme .bg-danger { background-color: hsl(var(--danger)); }
.report-theme .bg-warning { background-color: hsl(var(--warning)); }

/* Text colors */
.report-theme .text-foreground { color: hsl(var(--foreground)); }
.report-theme .text-muted-foreground { color: hsl(var(--muted-foreground)); }
.report-theme .text-primary { color: hsl(var(--primary)); }
.report-theme .text-primary-foreground { color: hsl(var(--primary-foreground)); }
.report-theme .text-success { color: hsl(var(--success)); }
.report-theme .text-danger { color: hsl(var(--danger)); }
.report-theme .text-warning { color: hsl(var(--warning)); }

/* Border colors */
.report-theme .border-border { border-color: hsl(var(--border)); }
.report-theme .border-primary { border-color: hsl(var(--primary)); }

/* ============================================
   Component Styles
   ============================================ */

/* Report card */
.report-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
}

.report-card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.report-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
}

.report-card-subtitle {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

.report-card-body {
  padding: 1.5rem;
}

/* Metric display */
.report-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.report-metric-value {
  font-size: 2rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  line-height: 1;
  letter-spacing: -0.05em;
}

.report-metric-value.text-primary {
  color: hsl(var(--primary));
}

.report-metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Delta/Change indicator */
.report-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.report-delta-positive {
  color: hsl(var(--success));
}

.report-delta-negative {
  color: hsl(var(--danger));
}

.report-delta-neutral {
  color: hsl(var(--muted-foreground));
}

/* Trend badge (matching demo's TrendBadge) */
.report-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.report-trend-badge-up {
  background-color: hsl(var(--report-success) / 0.1);
  color: hsl(var(--report-success));
}

.report-trend-badge-down {
  background-color: hsl(var(--report-danger) / 0.1);
  color: hsl(var(--report-danger));
}

.report-trend-badge-neutral {
  background-color: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
}

/* Badge */
.report-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.01em;
}

.report-badge-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.report-badge-success {
  background-color: hsl(142 71% 45% / 0.12);
  color: hsl(var(--success));
}

.report-badge-danger {
  background-color: hsl(0 84% 60% / 0.12);
  color: hsl(var(--danger));
}

.report-badge-muted {
  background-color: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
}

/* Table styles */
.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  background-color: hsl(var(--secondary));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid hsl(var(--border));
}

.report-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}

.report-table tr:last-child td {
  border-bottom: none;
}

.report-table tbody tr:nth-child(even) {
  background-color: hsl(var(--secondary) / 0.5);
}

/* Progress bar */
.report-progress {
  height: 0.5rem;
  background-color: hsl(var(--secondary));
  border-radius: 9999px;
  overflow: hidden;
}

.report-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.report-progress-fill-primary {
  background-color: hsl(var(--primary));
}

.report-progress-fill-success {
  background-color: hsl(var(--success));
}

.report-progress-fill-danger {
  background-color: hsl(var(--danger));
}

/* Sentiment bar (horizontal progress) */
.report-sentiment-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-sentiment-bar-track {
  width: 4rem;
  height: 0.5rem;
  background-color: hsl(var(--secondary));
  border-radius: 9999px;
  overflow: hidden;
}

.report-sentiment-bar-fill {
  height: 100%;
  border-radius: 9999px;
}

/* Report section title styling */
.report-section-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

.report-section-subtitle {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2rem;
}

/* Report title with primary color */
.report-title-primary {
  color: hsl(var(--primary));
}

/* Report accent box (for takeaway/insight) */
.report-accent-box {
  background-color: hsl(var(--report-accent-light));
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.report-accent-box-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
}

/* Insight text styling */
.report-insight {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
  line-height: 1.6;
}

/* ============================================
   Print-Only Header/Footer
   Hidden on screen, visible when printing
   ============================================ */

.report-print-header,
.report-print-footer {
  display: none;
}
/* Inner layout helpers for print header/footer content */
.report-print-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.report-print-header-label {
  font-size: 10px;
  font-weight: 500;
  color: hsl(0 0% 40%);
}

.report-print-header-url {
  font-size: 10px;
  color: hsl(0 0% 40%);
}

.report-print-footer-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-print-footer-label {
  font-size: 9px;
  color: hsl(0 0% 50%);
}

/* Hide elements that shouldn't print */
.report-no-print {
  /* Only hidden during print via @media print */
}

/* ============================================
   Print Table — screen-mode reset
   The table structure is invisible on screen;
   thead/tfoot only appear during printing.
   ============================================ */

.report-print-table {
  display: block;
  width: 100%;
}

.report-print-table > tbody,
.report-print-table > tbody > tr,
.report-print-table > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-spacing: 0;
}

.report-print-table > thead {
  display: none;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  @page {
    size: letter;
    margin: 0.35in 0.6in 0.42in 0.6in;
  }

  .report-theme {
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

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

  /* Page break utilities */
  .report-page-break {
    page-break-before: always;
    break-before: page;
  }

  /* Inside a section-group, sub-sections flow naturally — no forced per-section breaks.
     The outer group's break-before:page already ensures the group starts on a fresh page. */
  .report-section-group .report-page-break {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  .report-avoid-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Table-based repeating header/footer (CSS 2.1 table-header/footer-group) */
  .report-print-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  .report-print-table > thead {
    display: table-header-group;
  }

  .report-print-table > tbody {
    display: table-row-group;
  }

  .report-print-table > thead > tr,
  .report-print-table > tbody > tr {
    display: table-row;
  }

  .report-print-table > thead > tr > td,
  .report-print-table > tbody > tr > td {
    display: table-cell;
    padding: 0;
    border: none;
    vertical-align: top;
  }

  /* Print header — in-flow inside the thead table cell */
  .report-print-table > thead > tr > td {
    padding-bottom: 0.22in; /* SOLE source of the header-to-content gap on every page */
  }

  .report-print-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08in 0 0.10in;
    border-bottom: 1px solid hsl(0 0% 85%);
  }

  /* === CONSISTENT HEADER-TO-CONTENT GAP ===
     Three sources can add variable top space: py-8 wrapper padding, space-y-16 margins,
     and individual section padding. All are zeroed here so the thead padding-bottom above
     is the only gap source — identical on every page.
     margin-bottom is used for in-page visual separation between sections; the CSS
     Fragmentation spec discards margin-bottom at page breaks, so it never adds to the
     header gap on continuation pages. */

  /* Strip py-8 from the content wrapper */
  .report-print-table > tbody > tr > td > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Strip space-y-16 top margins and any section-level top padding */
  .report-print-table > tbody > tr > td > div > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Visual separation between section groups that flow on the same page.
     Discarded at page breaks, so it never appears at the top of a new page. */
  .report-print-table > tbody > tr > td > div > * {
    margin-bottom: 2.5rem;
  }

  .report-print-table > tbody > tr > td > div > *:last-child {
    margin-bottom: 0;
  }

  /* Same treatment for sub-sections flowing inside a section group */
  .report-section-group > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 2rem;
  }

  .report-section-group > *:last-child {
    margin-bottom: 0;
  }

  .report-print-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.05in 0.6in 0.03in;
    background: white;
    border-top: 1px solid hsl(0 0% 85%);
    z-index: 1000;
  }

  /* Hide in-flow header/footer on print - table versions replace them */
  .report-inline-header,
  .report-inline-footer {
    display: none !important;
  }

  /* Table pagination: avoid breaking if possible, but allow with repeating header */
  .report-theme table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .report-theme thead {
    display: table-header-group;
  }

  .report-theme tbody {
    display: table-row-group;
  }

  .report-theme tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Headings must not orphan from the content that follows */
  .report-theme h2 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .report-theme h2 + p {
    page-break-after: avoid;
    break-after: avoid;
  }

  .report-theme h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Prevent page breaks inside bounded content blocks (cards, analysis boxes, etc.) */
  .report-theme .rounded-xl {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Hide horizontal rules in print (from markdown-rendered content) */
  .report-theme hr {
    display: none !important;
  }

  /* Force colors for printing */
  .report-theme .text-primary {
    color: #B8860B !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-theme .text-success {
    color: #16A34A !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-theme .text-danger {
    color: #DC2626 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-badge-primary {
    background-color: #DBA507 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-progress-fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-card {
    box-shadow: none !important;
    border: 1px solid #e5e5e5 !important;
  }

  /* Limit chart heights for print */
  canvas {
    max-width: 100% !important;
    max-height: 400px;
  }
}

/* ============================================
   Chart Helpers (for Chart.js configuration)
   ============================================ */

/*
 * Use these CSS variables in JavaScript for Chart.js:
 *
 * const chartColors = {
 *   client: 'hsl(45, 93%, 47%)',        // Gold
 *   competitor1: 'hsl(0, 84%, 60%)',    // Red
 *   competitor2: 'hsl(262, 83%, 58%)',  // Purple
 *   competitor3: 'hsl(160, 84%, 39%)',  // Emerald
 *   competitor4: 'hsl(199, 89%, 48%)',  // Cyan
 *   grid: 'hsl(220, 13%, 91%)',         // Grid lines
 *   text: 'hsl(0, 0%, 40%)',            // Axis labels (matching demo)
 * };
 *
 * NOTE: Brand colors should be pulled from the database
 * (client_brands.color, client_competitors.color)
 * rather than using these defaults.
 */

/* ============================================
   Snapshot Bar Chart (Single-Day Visibility)
   Horizontal bar chart for 1-day reports
   ============================================ */

.report-snapshot-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0;
}

.report-snapshot-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.report-snapshot-label {
  flex: 0 0 140px;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-snapshot-label-client {
  font-weight: 700;
  color: hsl(var(--primary));
}

.report-snapshot-client-badge {
  font-size: 0.4rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.125rem 0.375rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 9999px;
}

.report-snapshot-bar-wrapper {
  flex: 1;
  height: 1.5rem;
  background-color: hsl(var(--secondary));
  border-radius: 0.375rem;
  overflow: hidden;
}

.report-snapshot-bar {
  height: 100%;
  border-radius: 0.375rem;
  transition: width 0.5s ease-out;
  min-width: 4px; /* Ensure visibility even at 0% */
}

.report-snapshot-bar-client {
  background-color: hsl(var(--primary));
  box-shadow: inset 0 1px 0 hsl(45 93% 55%), inset 0 -1px 0 hsl(45 93% 38%);
}

.report-snapshot-bar-competitor {
  background-color: hsl(0 0% 65%);
}

/* Alternate competitor colors for visual distinction */
.report-snapshot-row:nth-child(2) .report-snapshot-bar-competitor {
  background-color: hsl(0 84% 65%);
}

.report-snapshot-row:nth-child(3) .report-snapshot-bar-competitor {
  background-color: hsl(262 83% 65%);
}

.report-snapshot-row:nth-child(4) .report-snapshot-bar-competitor {
  background-color: hsl(160 84% 45%);
}

.report-snapshot-row:nth-child(5) .report-snapshot-bar-competitor {
  background-color: hsl(199 89% 55%);
}

.report-snapshot-value-group {
  flex: 0 0 85px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.report-snapshot-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-align: right;
}

.report-snapshot-value-client {
  color: hsl(var(--primary));
  font-weight: 700;
}

.report-snapshot-delta {
  font-size: 0.625rem;
  font-weight: 600;
}

/* Print styles for snapshot */
@media print {
  .report-snapshot-bar-client {
    background-color: #DBA507 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-snapshot-bar-competitor {
    background-color: #999999 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-snapshot-row:nth-child(2) .report-snapshot-bar-competitor {
    background-color: #E57373 !important;
  }

  .report-snapshot-row:nth-child(3) .report-snapshot-bar-competitor {
    background-color: #9575CD !important;
  }

  .report-snapshot-row:nth-child(4) .report-snapshot-bar-competitor {
    background-color: #4DB6AC !important;
  }

  .report-snapshot-row:nth-child(5) .report-snapshot-bar-competitor {
    background-color: #4FC3F7 !important;
  }

  .report-snapshot-client-badge {
    background-color: #DBA507 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================
   Section Groups
   Groups related visualizations together with
   a single consolidated analysis at the end
   ============================================ */

.report-section-group {
  /* Visual grouping with padding and separator */
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;

  /* Subtle bottom border as section divider */
  border-bottom: 1px solid hsl(var(--border));
}

.report-section-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Space between sections within a group */
.report-section-group > section {
  margin-bottom: 3rem;
}

.report-section-group > section:last-of-type {
  margin-bottom: 0;
}

/* Print styles for section groups */
@media print {
  .report-section-group {
    border-bottom: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-section-group:last-child {
    border-bottom: none !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ═══════════════════════════════════════════════════════════════
   VOLUME BARS LOADING ANIMATION
   Sequential wave effect for demand score loading state
   ═══════════════════════════════════════════════════════════════ */

/* NOTE: Cannot replace with Tailwind animate-pulse - this uses staggered animation-delay per nth-child
   to create a sequential wave effect, which animate-pulse does not support. */
@keyframes volume-wave {
  0%, 100% { opacity: 0.3; }
  20% { opacity: 1; }
  40% { opacity: 0.3; }
}

.volume-loading .volume-bar {
  background-color: #6ee7b7; /* emerald-300 */
  animation: volume-wave 1.5s ease-in-out infinite;
}

.volume-loading .volume-bar:nth-child(1) { animation-delay: 0s; }
.volume-loading .volume-bar:nth-child(2) { animation-delay: 0.15s; }
.volume-loading .volume-bar:nth-child(3) { animation-delay: 0.3s; }
.volume-loading .volume-bar:nth-child(4) { animation-delay: 0.45s; }
.volume-loading .volume-bar:nth-child(5) { animation-delay: 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   CIRCULAR FAVICON STYLING
   Brand display with Google S2 favicons and initial fallbacks
   ═══════════════════════════════════════════════════════════════ */

/* All 4 size variants (sm, default/md, lg, xl) are actively used in views.
   favicon-circle-md was removed as unused (not in _brand_icon.html.erb size_classes map).
   See: shared/_brand_icon.html.erb */

/* Base shared styles for all favicon-circle (image) variants */
.favicon-circle,
.favicon-circle-sm,
.favicon-circle-lg,
.favicon-circle-xl {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e7e5e4; /* stone-200 */
  border: 1px solid #d6d3d1; /* stone-300 */
}

/* Base shared styles for all initial-circle (text fallback) variants */
.initial-circle,
.initial-circle-sm,
.initial-circle-lg,
.initial-circle-xl {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}

/* Size-specific overrides */
.favicon-circle      { width: 24px; height: 24px; }     /* Standard (24px) */
.favicon-circle-sm   { width: 20px; height: 20px; }     /* Small (20px) */
.favicon-circle-lg   { width: 48px; height: 48px; }     /* Large (48px) - headers */
.favicon-circle-xl   { width: 80px; height: 80px; }     /* Extra large (80px) - profile pages */

.initial-circle      { width: 24px; height: 24px; font-size: 10px; }
.initial-circle-sm   { width: 20px; height: 20px; font-size: 9px; }
.initial-circle-lg   { width: 48px; height: 48px; font-size: 18px; font-weight: 700; }
.initial-circle-xl   { width: 80px; height: 80px; font-size: 24px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   BRAND ICON LOADING STATES
   Smooth transitions while cascade fetches icons
   ═══════════════════════════════════════════════════════════════ */

/* Loading state - subtle pulse while trying sources */
.brand-icon-loading {
  animation: brand-icon-pulse 1.5s ease-in-out infinite;
}

/* TODO: Replace with Tailwind animate-pulse if .brand-icon-loading class is refactored in views.
   Currently used in shared/_brand_icon.html.erb and removed via onload JS. */
@keyframes brand-icon-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Smooth fade-in when icon loads */
.favicon-circle,
.favicon-circle-sm,
.favicon-circle-lg,
.favicon-circle-xl {
  transition: opacity 0.2s ease-in-out;
}

/* Fallback circles fade in smoothly */
.initial-circle,
.initial-circle-sm,
.initial-circle-lg,
.initial-circle-xl {
  transition: opacity 0.2s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════
   MODEL LOGO BADGES
   Circular badges for LLM provider logos on reports and dashboards
   ═══════════════════════════════════════════════════════════════ */

.model-logo-badge {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f4f4f5; /* zinc-100 - light background for contrast */
  border: 1px solid #e4e4e7; /* zinc-200 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.model-logo-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.model-logo-badge img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}



/* ==========================================================================
   SENTIMENT BAR INDICATOR
   Vertical colored bar used in brand tables to indicate sentiment score.
   Height is set dynamically via inline style (sentiment_bar_height helper).
   Width and shape are static and extracted here from view inline <style> blocks.
   ========================================================================== */

/* NOTE: height is set via inline style="height: Xpx" using the sentiment_bar_height helper.
   The background color class (e.g., bg-emerald-400) is applied via sentiment_bar_color helper. */
.sentiment-bar {
  width: 3px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   Tailwind Component Utilities
   Shared flex patterns for use across views.
   ========================================================================== */
@layer components {
  .flex-row-center {
    @apply flex items-center;
  }

  .flex-row-between {
    @apply flex items-center justify-between;
  }

  .flex-row-gap2 {
    @apply flex items-center gap-2;
  }
}