/* ============================================================
       BYND Finances — Insights bundle
       Layers on top of bynd-finances-core.css. Only Insights-specific
       styles live here (range picker, KPI strip, chart toggle, chart
       container, breakdown grid). The shared shell + nav + auth
       overlay still come from the core bundle.
       ============================================================ */

    /* ===== Subhead with inline Configure link + range picker ===== */
    .insights-subhead {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 12px 16px; flex-wrap: wrap;
      margin-bottom: 22px;
    }
    .insights-subhead .page-sub { margin-bottom: 0; flex: 1 1 280px; min-width: 0; }
    .insights-subhead .range-row { margin-bottom: 0; flex-shrink: 0; }
    /* Inline link inside the sub-sentence — picks up the surrounding font size/colour
       and flows with the text. Visually distinct via underline + accent colour only. */
    .config-link {
      background: transparent; border: none;
      color: var(--primary); font-family: inherit;
      font-size: inherit; font-weight: 500;
      cursor: pointer;
      padding: 0; margin: 0;
      text-decoration: underline;
      text-decoration-color: var(--primary-soft);
      text-underline-offset: 3px;
      transition: text-decoration-color 0.15s, opacity 0.15s;
    }
    .config-link:hover { text-decoration-color: var(--primary); opacity: 0.9; }
    .config-link.active { text-decoration-color: var(--primary); }
    .budget-config-panel { margin-bottom: 18px; }

    /* ===== Date range picker ===== */
    .range-row {
      display: flex; justify-content: flex-end; align-items: center;
      gap: 10px; flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .range-control { display: inline-flex; align-items: center; gap: 8px; }
    .range-control-label {
      font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--text-secondary);
    }
    .range-select {
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 7px 30px 7px 12px;
      font-family: inherit; font-size: 13px; font-weight: 500;
      cursor: pointer;
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23ADB5BD' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      transition: border-color 0.15s;
    }
    .range-select:hover { border-color: var(--text-dim); }
    .range-select:focus { outline: none; border-color: var(--primary); }
    .range-custom { display: inline-flex; align-items: center; gap: 6px; }
    .range-date {
      background: var(--bg-input); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: 6px;
      padding: 6px 8px;
      font-family: inherit; font-size: 12px;
      color-scheme: dark;
      font-variant-numeric: tabular-nums;
    }
    .range-date:focus { outline: none; border-color: var(--primary); }
    .range-dash { color: var(--text-dim); font-size: 12px; }
    .range-apply {
      background: var(--primary); color: var(--bg-dark);
      border: none; border-radius: 6px;
      padding: 7px 14px; font-size: 12px; font-weight: 600;
      cursor: pointer; font-family: inherit;
      transition: background 0.15s, opacity 0.15s;
    }
    .range-apply:hover { background: var(--primary-dim); }
    .range-apply:disabled { opacity: 0.45; cursor: not-allowed; }
    @media (max-width: 480px) {
      .range-row { justify-content: stretch; }
      .range-control { flex: 1 1 100%; }
      .range-select { flex: 1; min-width: 0; }
      .range-custom { flex: 1 1 100%; flex-wrap: wrap; }
      .range-date { flex: 1; min-width: 0; }
    }

    /* ===== KPI strip ===== */
    .kpi-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .kpi-tile {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
    }
    .kpi-tile::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: var(--border);
    }
    .kpi-tile.income::before           { background: var(--positive); }
    .kpi-tile.expense::before          { background: var(--red); }
    .kpi-tile.net.positive::before     { background: var(--positive); }
    .kpi-tile.net.negative::before     { background: var(--red); }
    .kpi-tile.pending::before          { background: var(--orange); }
    .kpi-label {
      font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-secondary); margin-bottom: 6px;
    }
    .kpi-value {
      font-size: 20px; font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .kpi-tile.income  .kpi-value { color: var(--positive); }
    .kpi-tile.expense .kpi-value { color: var(--red); }
    .kpi-tile.net.positive .kpi-value { color: var(--positive); }
    .kpi-tile.net.negative .kpi-value { color: var(--red); }
    .kpi-tile.pending .kpi-value { color: var(--orange); }
    .kpi-sub {
      font-size: 11px; color: var(--text-dim); margin-top: 4px;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 768px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .kpi-strip { grid-template-columns: 1fr; } }

    /* ===== Chart toggle (Bar / Line on Cashflow) ===== */
    .chart-toggle {
      display: inline-flex; gap: 2px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 3px;
    }
    .chart-toggle button {
      background: transparent; border: none;
      color: var(--text-secondary);
      padding: 5px 12px;
      border-radius: 5px;
      cursor: pointer;
      font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
      transition: background 0.15s, color 0.15s;
    }
    .chart-toggle button:hover { color: var(--text-primary); }
    .chart-toggle button.active { background: var(--bg-card); color: var(--primary); }

    /* ===== Chart container + card-header ===== */
    .card-header {
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      margin-bottom: 14px;
    }
    .card-header .card-title { margin-bottom: 0; }
    .chart-container {
      position: relative;
      height: 320px;
      margin-top: 8px;
    }
    @media (max-width: 768px) { .chart-container { height: 260px; } }

    /* Empty-state overlay shown when a chart has no data. DOM-based (rather than
       canvas fillText) so it doesn't fight Chart.js's leftover canvas transform
       state after destroy(). */
    .chart-container .chart-empty {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-dim); font-size: 13px;
      text-align: center; padding: 0 16px;
      pointer-events: none;
    }

    .breakdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    .breakdown-grid .card + .card { margin-top: 0; }
    @media (max-width: 980px) {
      .breakdown-grid { grid-template-columns: 1fr; }
      .breakdown-grid .card + .card { margin-top: 18px; }
    }

    .breakdown-list { display: flex; flex-direction: column; gap: 4px; }
    .breakdown-row { border-radius: 6px; overflow: hidden; }
    .breakdown-toggle {
      width: 100%;
      display: grid;
      grid-template-columns: 12px 1fr 2fr auto auto;
      gap: 10px;
      align-items: center;
      background: var(--bg-input);
      border: 1px solid var(--border);
      color: var(--text-primary);
      padding: 10px 12px;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s, border-color 0.15s;
      text-align: left;
      border-radius: 6px;
    }
    .breakdown-toggle:hover { background: var(--bg-card-hover); border-color: var(--text-dim); }
    .breakdown-row.expanded .breakdown-toggle { border-radius: 6px 6px 0 0; }
    .breakdown-caret {
      font-size: 10px; color: var(--text-muted);
      transition: transform 0.15s;
    }
    .breakdown-row.expanded .breakdown-caret { transform: rotate(90deg); }
    .breakdown-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .breakdown-bar {
      height: 6px; background: var(--bg-card); border-radius: 999px; overflow: hidden;
      position: relative;
    }
    .breakdown-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.3s ease; }
    .expense .breakdown-fill { background: var(--red); }
    .income  .breakdown-fill { background: var(--positive); }
    .breakdown-amt { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .breakdown-pct { font-size: 11px; color: var(--text-secondary); white-space: nowrap; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
    .breakdown-expanded {
      display: none;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 6px 6px;
      padding: 8px 12px;
      max-height: 240px; overflow-y: auto;
    }
    .breakdown-row.expanded .breakdown-expanded { display: block; }
    .breakdown-txn {
      display: grid; grid-template-columns: auto 1fr auto;
      gap: 10px; padding: 6px 0;
      font-size: 12px; align-items: baseline;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .breakdown-txn:last-child { border-bottom: none; }
    .breakdown-txn .when { font-size: 10px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .breakdown-txn .desc {
      color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .breakdown-txn .amt { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
    .breakdown-txn.income  .amt { color: var(--positive); }
    .breakdown-txn.expense .amt { color: var(--red); }

    @media (max-width: 768px) {
      .breakdown-toggle { grid-template-columns: 12px 1fr auto auto; }
      .breakdown-bar { grid-column: 1 / -1; margin-top: 2px; }
    }