/* ============================================================
   DARK MODE — Theme tokens shared by all report pages
   ------------------------------------------------------------
   Light values = the app's original colors (zero visual change
   in light mode). Dark values follow the Barcelo dark palette
   (ocean/pool) from AIContext/dark-mode-guide.md.

   Usage in CSS / inline styles / generated HTML:
     color: var(--bhg-text-strong);
     background: var(--bhg-surface);
     border: 1px solid var(--bhg-border-soft);
   ============================================================ */

:root {
  /* ---- Layout ---- */
  --page-gutter: clamp(16px, 6vw, 96px);     /* DDH guide horizontal gutter */

  /* ---- Surfaces ---- */
  --bhg-surface: #ffffff;                    /* cards, header, menus, inputs, modals */
  --bhg-surface-muted: #f8f9fb;              /* page background — DDH guide (#f8f9fb), was #f8fafc/#f5f7fa */
  --bhg-surface-soft: #f7fafc;               /* table headers, row hover, subtle bg */
  --bhg-surface-softer: #edf2f7;             /* pills, highlight bg (#edf2f7, #f0f4f8) */
  --bhg-track: #e2e8f0;                      /* comparison bar tracks, badge pills */
  --bhg-tint-blue2: #f0f7ff;                 /* footnote/info strip bg */
  --bhg-overlay: rgba(255, 255, 255, 0.95);  /* loading overlay, sticky surfaces */
  --bhg-overlay-soft: rgba(255, 255, 255, 0.7);
  --bhg-accent-deep: #1a365d;                /* dark navy elements (totals row, market label) */

  /* ---- Tinted surfaces (info / brand accents) ---- */
  --bhg-tint-blue: #ebf8ff;                  /* open section header, btn hover (#ebf8ff, #e6f6ff, #f0f9ff) */
  --bhg-tint-purple: #faf5ff;                /* biweekly accents (#faf5ff, #f3e8ff) */
  --bhg-tint-green: #f0fff4;                 /* maya accents (#f0fff4, #e6ffed) */
  --bhg-tint-orange: #fef3e2;                /* hotel-sales accents (#fef3e2, #feebc8) */
  --bhg-tint-amber: #fef3c7;                 /* beta badge bg */
  --bhg-tint-red: #fff5f5;                   /* logout hover, danger tints */

  /* ---- Badges ---- */
  --bhg-pos-bg: #c6f6d5;                     /* positive variation bg (#c6f6d5, #dcfce7) */
  --bhg-pos-text: #22543d;                   /* positive variation text (#22543d, #166534) */
  --bhg-neg-bg: #fed7d7;                     /* negative variation bg (#fed7d7, #fee2e2) */
  --bhg-neg-text: #742a2a;                   /* negative variation text (#742a2a, #b91c1c, #c53030) */
  --bhg-beta-text: #92400e;
  --bhg-info-text: #0369a1;
  --bhg-info-deep: #2c5282;                  /* info text on tinted bg */

  /* ---- Borders ---- */
  --bhg-border-soft: #e2e8f0;                /* default borders (#e2e8f0, #e2e5e9, #edf2f7, #f1f5f9, #f7fafc) */
  --bhg-border-strong: #cbd5e0;
  --bhg-border-neg: #fed7d7;                 /* danger borders (#fed7d7, #feb2b2, #fc8181) */
  --bhg-border-info: #bee3f8;
  --bhg-border-purple: #d6bcfa;
  --bhg-border-green: #9ae6b4;
  --bhg-border-pos: #c6f6d5;

  /* ---- Text ---- */
  --bhg-text-strong: #2d3748;                /* titles, primary text (#2d3748, #1a365d, #1a202c, #1e293b) */
  --bhg-text-mid: #4a5568;                   /* secondary text (#4a5568, #475569) */
  --bhg-text-muted: #718096;                 /* labels, helper text (#718096, #64748b) */
  --bhg-text-faint: #a0aec0;                 /* hints, prev values (#a0aec0, #94a3b8) */
  /* DDH guide-exact tokens (DDH_STYLES_GUIDE palette, do not merge) */
  --bhg-text-greet: #505562;                 /* guide: Text Secundario (greeting, header right) */
  --bhg-text-guide-muted: #575b5e;           /* guide: Text Muted (subtitle under logo) */
  --bhg-border-line: #e2e5e9;                /* guide: Border/Line (header border, outline btns) */

  /* ---- Semantic text ---- */
  --bhg-pos: #38a169;
  --bhg-neg: #e53e3e;
  --bhg-pos-soft: #9ae6b4;                 /* pastel pos on dark-navy rows */
  --bhg-neg-soft: #feb2b2;                 /* pastel neg on dark-navy rows */

  /* ---- Page-brand accent text (labels) ---- */
  --bhg-accent-green: #276749;
  --bhg-accent-orange: #c05621;
  --bhg-accent-purple: #553c9a;
  --bhg-accent-blue: #2b6cb0;

  /* ---- Series accent text (CY/PY figures on cards) ---- */
  --bhg-series-cy: #3182ce;
  --bhg-series-py: #ed8936;

  /* ---- Buttons ---- */
  --bhg-btn-invert: #4a5568;                 /* .ddh-btn:hover solid invert */
}

/* =======================  DARK  ======================= */
html.dark {
  --bhg-surface: #1F3B4D;                    /* ocean-120 */
  --bhg-surface-muted: #162D3B;              /* ocean-140 */
  --bhg-surface-soft: rgba(47, 89, 117, 0.30);
  --bhg-surface-softer: rgba(47, 89, 117, 0.42);
  --bhg-track: rgba(47, 89, 117, 0.35);
  --bhg-tint-blue2: rgba(47, 161, 191, 0.15);
  --bhg-overlay: rgba(22, 45, 59, 0.95);
  --bhg-overlay-soft: rgba(22, 45, 59, 0.75);
  --bhg-accent-deep: #1C6072;                /* pool-140 */

  --bhg-tint-blue: rgba(47, 161, 191, 0.15);
  --bhg-tint-purple: rgba(128, 90, 213, 0.18);
  --bhg-tint-green: rgba(56, 161, 105, 0.16);
  --bhg-tint-orange: rgba(221, 107, 32, 0.18);
  --bhg-tint-amber: rgba(255, 207, 62, 0.15);
  --bhg-tint-red: rgba(229, 62, 62, 0.12);

  --bhg-pos-bg: rgba(74, 222, 128, 0.18);
  --bhg-pos-text: #4ADE80;
  --bhg-neg-bg: rgba(248, 113, 113, 0.18);
  --bhg-neg-text: #F87171;
  --bhg-beta-text: #FBD38D;
  --bhg-info-text: #2FA1BF;                  /* pool-100 */
  --bhg-info-deep: #ACBCC8;                  /* ocean-20 */

  --bhg-border-soft: rgba(47, 89, 117, 0.55);
  --bhg-border-strong: rgba(47, 89, 117, 0.70);
  --bhg-border-neg: rgba(248, 113, 113, 0.40);
  --bhg-border-info: rgba(47, 161, 191, 0.45);
  --bhg-border-purple: rgba(128, 90, 213, 0.45);
  --bhg-border-green: rgba(56, 161, 105, 0.45);
  --bhg-border-pos: rgba(74, 222, 128, 0.40);

  --bhg-text-strong: #F3F4F6;
  --bhg-text-mid: #E5E7EB;
  --bhg-text-muted: #D1D5DB;
  --bhg-text-faint: #9CA3AF;
  --bhg-text-greet: #E5E7EB;
  --bhg-text-guide-muted: #D1D5DB;
  --bhg-border-line: rgba(47, 89, 117, 0.55);

  --bhg-pos: #4ADE80;
  --bhg-neg: #F87171;
  --bhg-pos-soft: #4ADE80;
  --bhg-neg-soft: #F87171;

  --bhg-accent-green: #68D391;
  --bhg-accent-orange: #F6AD55;
  --bhg-accent-purple: #B794F4;
  --bhg-accent-blue: #63B3ED;

  --bhg-btn-invert: #268299;                 /* pool-120 */

  /* Native controls (scrollbars, selects, date pickers, checkboxes) */
  color-scheme: dark;
}

/* ===================  DUAL LOGO  =================== */
/* BHG_pos.png = dark lettering -> light mode. BHG_neg.png = light lettering -> dark mode. */
.bhg-logo-dark { display: none; }
html.dark .bhg-logo-light { display: none; }
html.dark .bhg-logo-dark { display: block; }

/* =============  USER MENU (avatar dropdown)  ============= */
.ddh-user-line { position: relative; }
.bhg-avatar-clickable { cursor: pointer; }
.bhg-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--bhg-surface);
  border: 1px solid var(--bhg-border-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 100;
}
.bhg-user-menu.open { display: block; }
.bhg-user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--bhg-text-mid);
  cursor: pointer;
  text-align: left;
}
.bhg-user-menu-item:hover { background: var(--bhg-surface-soft); }
.bhg-theme-icon, .bhg-menu-icon { display: inline-flex; width: 14px; height: 14px; }
.bhg-theme-icon svg, .bhg-menu-icon svg { width: 14px; height: 14px; }

/* ==============  DARK-SPECIFIC TWEAKS  ============== */
/* Things the token swap cannot express (gradients, pseudo-elements). */
html.dark .ddh-avatar {
  background: linear-gradient(135deg, #268299, #1C6072);
  border-color: rgba(47, 161, 191, 0.45);
}

/* Sidebar tooltip: dark slate on dark bg is unreadable — invert it. */
html.dark .section-sidebar-link::after {
  background: #ACBCC8;                       /* ocean-20 */
  color: #162D3B;
}

/* Active nav pills keep a visible accent on the dark surface. */
html.dark .section-nav-link.active,
html.dark .section-sidebar-link.active {
  background: #268299;                       /* pool-120 */
  border-color: #268299;
}

html.dark .bhg-user-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Stronger elevation cues on dark surfaces. */
html.dark .ddh-header,
html.dark .filters-bar,
html.dark .section-nav {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.dark .kpi-card,
html.dark .chart-card,
html.dark .table-card,
html.dark .market-kpi-card,
html.dark .collapsible-section,
html.dark .report-card,
html.dark .about-section,
html.dark .section-sidebar,
html.dark .placeholder-message,
html.dark .empty-state .steps {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

/* ============ About modal (user menu) ============ */
.bhg-about-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.bhg-about-overlay.open { display: flex; }
.bhg-about-modal {
  background: var(--bhg-surface); color: var(--bhg-text-strong);
  border-radius: 14px; border: 1px solid var(--bhg-border-soft);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  max-width: 860px; width: 100%; max-height: 85vh;
  overflow-y: auto; position: relative;
}
html.dark .bhg-about-modal { box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.bhg-about-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--bhg-border-soft);
  position: sticky; top: 0; background: var(--bhg-surface); z-index: 2;
}
.bhg-about-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--bhg-text-strong); }
.bhg-about-close {
  border: none; background: none; cursor: pointer; padding: 6px;
  color: var(--bhg-text-muted); border-radius: 8px; display: flex;
}
.bhg-about-close:hover { background: var(--bhg-surface-soft); color: var(--bhg-text-strong); }

  .bhg-about-modal .about-inner {
      padding: 28px;
    }

    /* Report Table */
  .bhg-about-modal .report-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 28px;
      font-size: 13px;
    }

  .bhg-about-modal .report-table th {
      text-align: left;
      padding: 12px 16px;
      background: var(--bhg-surface-muted);
      font-weight: 600;
      color: var(--bhg-text-mid);
      border-bottom:2px solid var(--bhg-border-soft);
    }

  .bhg-about-modal .report-table td {
      padding: 14px 16px;
      border-bottom:1px solid var(--bhg-border-soft);
      color: var(--bhg-text-strong);
      vertical-align: top;
    }

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

  .bhg-about-modal .report-table .report-name {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

  .bhg-about-modal .report-table .report-name .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

  .bhg-about-modal .report-table .report-name .dot.blue { background: #3182ce; }
  .bhg-about-modal .report-table .report-name .dot.purple { background: #805ad5; }
  .bhg-about-modal .report-table .report-name .dot.green { background: #38a169; }
  .bhg-about-modal .report-table .report-name .dot.orange { background: #dd6b20; }

  .bhg-about-modal .report-table .export-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

  .bhg-about-modal .report-table .export-badge.pptx {
      background: var(--bhg-neg-bg);
      color: var(--bhg-neg-text);
    }

  .bhg-about-modal .report-table .export-badge.excel {
      background: var(--bhg-pos-bg);
      color: var(--bhg-pos-text);
    }

    /* Section block */
  .bhg-about-modal .info-block {
      margin-bottom: 28px;
    }

  .bhg-about-modal .info-block:last-child {
      margin-bottom: 0;
    }

  .bhg-about-modal .info-block h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--bhg-text-strong);
      margin: 0 0 14px 0;
      padding-bottom: 10px;
      border-bottom:1px solid var(--bhg-border-soft);
    }

    /* Inline list */
  .bhg-about-modal .inline-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

  .bhg-about-modal .inline-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--bhg-surface-muted);
      border:1px solid var(--bhg-border-soft);
      border-radius: 8px;
      font-size: 13px;
      color: var(--bhg-text-strong);
    }

  .bhg-about-modal .inline-item .flag {
      font-size: 16px;
    }

  .bhg-about-modal .inline-item .item-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

  .bhg-about-modal .inline-item .item-dot.own { background: #3182ce; }
  .bhg-about-modal .inline-item .item-dot.third { background: #ed8936; }

    /* Two column layout */
  .bhg-about-modal .two-cols {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    @media (min-width: 640px) {
  .bhg-about-modal .two-cols {
        grid-template-columns: 1fr 1fr;
      }
    }

  .bhg-about-modal .col-block {
      padding: 16px;
      background: var(--bhg-surface-muted);
      border-radius: 10px;
      border:1px solid var(--bhg-border-soft);
    }

  .bhg-about-modal .col-block h5 {
      font-size: 12px;
      font-weight: 600;
      color: var(--bhg-text-muted);
      margin: 0 0 10px 0;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

  .bhg-about-modal .col-block ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

  .bhg-about-modal .col-block li {
      padding: 6px 0;
      font-size: 13px;
      color: var(--bhg-text-strong);
      display: flex;
      align-items: center;
      gap: 8px;
    }

  .bhg-about-modal .col-block li::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #94a3b8;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* KPI list */
  .bhg-about-modal .kpi-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    @media (min-width: 640px) {
  .bhg-about-modal .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

  .bhg-about-modal .kpi-item {
      padding: 12px;
      background: var(--bhg-tint-blue);
      border-radius: 8px;
      text-align: center;
    }

  .bhg-about-modal .kpi-item .kpi-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--bhg-info-text);
    }

  .bhg-about-modal .kpi-item .kpi-desc {
      font-size: 11px;
      color: var(--bhg-text-muted);
      margin-top: 2px;
    }