/* ══════════════════════════════════════════════════════════════════════
   expense-charts.css — FCC Expense Charts: Premium Apple/iOS Design
   ══════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────── */
#fcc-expense-dashboard-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcc-ec-section { }

.fcc-ec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) {
  .fcc-ec-grid { grid-template-columns: 1fr; }
}

/* ── Filter bar (iOS segmented pills) ───────────────────────────────── */
.fcc-ec-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

.fcc-ec-pill {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(15, 23, 42, 0.48);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.fcc-ec-pill:hover:not(.fcc-ec-pill--on) {
  color: rgba(15, 23, 42, 0.76);
  background: rgba(255, 255, 255, 0.55);
}

.fcc-ec-pill:active {
  transform: scale(0.98);
}

.fcc-ec-pill--on {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow:
    0 6px 18px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ── Hero card ──────────────────────────────────────────────────────── */
.fcc-ec-hero {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
  overflow: hidden;
}

.fcc-ec-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 15%, rgba(94, 106, 210, 0.30) 0%, transparent 58%);
  pointer-events: none;
}

.fcc-ec-hero-content {
  position: relative;
  z-index: 1;
  padding: 22px 24px 20px;
}

.fcc-ec-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.fcc-ec-hero-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fcc-ec-delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fcc-ec-delta--up      { background: rgba(255, 59, 48, 0.22); color: #FF6B6B; }
.fcc-ec-delta--down    { background: rgba(52, 199, 89, 0.22); color: #4CD964; }
.fcc-ec-delta--neutral { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.5); }

.fcc-ec-hero-amount {
  font-size: 46px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 14px;
}

.fcc-ec-hero-budget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.fcc-ec-budget-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fcc-ec-budget-pill--on_track { background: rgba(52, 199, 89, 0.22);  color: #4CD964; }
.fcc-ec-budget-pill--warning  { background: rgba(255, 149, 0, 0.22);  color: #FFAA44; }
.fcc-ec-budget-pill--over     { background: rgba(255, 59, 48, 0.22);  color: #FF6B6B; }
.fcc-ec-budget-pill--no_budget { display: none; }

.fcc-ec-budget-of {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
}

.fcc-ec-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.fcc-ec-dot { opacity: 0.3; }

/* ── Insight strip ──────────────────────────────────────────────────── */
.fcc-ec-insights {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.fcc-ec-insights::-webkit-scrollbar { display: none; }

.fcc-ec-insight {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 138px;
}

.fcc-ec-insight-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.fcc-ec-insight-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fcc-ec-insight-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.38);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.fcc-ec-insight-value {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcc-ec-insight-sub {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.38);
  white-space: nowrap;
}

.fcc-ec-insight--up   .fcc-ec-insight-value { color: #FF3B30; }
.fcc-ec-insight--down .fcc-ec-insight-value { color: #34C759; }

/* ── Chart cards ────────────────────────────────────────────────────── */
.fcc-ec-card {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  border-radius: 20px;
  padding: 18px 20px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.045), 0 0 0 0.5px rgba(0, 0, 0, 0.035);
  height: 100%;
  box-sizing: border-box;
}

.fcc-ec-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.fcc-ec-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground, #111);
  letter-spacing: -0.01em;
}

.fcc-ec-canvas-wrap {
  position: relative;
  width: 100%;
}

/* ── Category list ──────────────────────────────────────────────────── */
.fcc-ec-cat-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.fcc-ec-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
}

.fcc-ec-cat-left {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.fcc-ec-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fcc-ec-cat-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fcc-ec-cat-bar-track {
  grid-column: 1;
  grid-row: 2;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.fcc-ec-cat-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.fcc-ec-cat-right {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.fcc-ec-cat-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground, #111);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fcc-ec-cat-pct {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.35);
  font-weight: 500;
}

/* ── Budget list ────────────────────────────────────────────────────── */
.fcc-ec-budget-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fcc-ec-budget-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fcc-ec-budget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fcc-ec-budget-cat {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground, #111);
}

.fcc-ec-budget-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fcc-ec-budget-chip--ok      { background: rgba(52, 199, 89, 0.12);  color: #27AE60; }
.fcc-ec-budget-chip--warning { background: rgba(255, 149, 0, 0.13);  color: #C07A00; }
.fcc-ec-budget-chip--over    { background: rgba(255, 59, 48, 0.12);  color: #D0291A; }

.fcc-ec-budget-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.fcc-ec-budget-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.fcc-ec-budget-fill--ok      { background: #34C759; }
.fcc-ec-budget-fill--warning { background: #FF9500; }
.fcc-ec-budget-fill--over    { background: #FF3B30; }

.fcc-ec-budget-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.35);
}

/* ── Empty & error states ───────────────────────────────────────────── */
.fcc-ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px;
  text-align: center;
  gap: 6px;
  color: rgba(0, 0, 0, 0.3);
}

.fcc-ec-empty-icon { margin-bottom: 4px; }

.fcc-ec-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.fcc-ec-empty-sub {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.35);
  margin: 0;
  max-width: 260px;
  line-height: 1.4;
}

.fcc-ec-empty-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.32);
  text-align: center;
}

.fcc-ec-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
}

.fcc-ec-error-title {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
  text-align: center;
}

.fcc-ec-retry-btn {
  padding: 9px 22px;
  border-radius: 10px;
  background: #5E6AD2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fcc-ec-retry-btn:hover { opacity: 0.88; }

/* ── Skeleton shimmer ───────────────────────────────────────────────── */
@keyframes fccEcShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.fcc-ec-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.03) 50%,
    rgba(0, 0, 0, 0.06) 75%
  );
  background-size: 1200px 100%;
  animation: fccEcShimmer 1.5s ease-in-out infinite;
  border-radius: 18px;
}

.fcc-ec-skeleton--hero  { height: 148px; border-radius: 22px; }
.fcc-ec-skeleton--card  { height: 210px; }
.fcc-ec-skeleton--wide  { height: 160px; }

.fcc-ec-skeleton-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 700px) {
  .fcc-ec-skeleton-row { grid-template-columns: 1fr; }
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
.dark .fcc-ec-filter-bar,
@media (prefers-color-scheme: dark) {
  .fcc-ec-filter-bar {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.18);
  }
}

.dark .fcc-ec-filter-bar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
}

.dark .fcc-ec-pill {
  color: rgba(255, 255, 255, 0.45);
}

.dark .fcc-ec-pill:hover:not(.fcc-ec-pill--on) {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
}

.dark .fcc-ec-pill--on {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  color: #ffffff;
  box-shadow:
    0 8px 20px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.dark .fcc-ec-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
}

.dark .fcc-ec-card-title    { color: rgba(255, 255, 255, 0.88); }
.dark .fcc-ec-cat-name      { color: rgba(255, 255, 255, 0.85); }
.dark .fcc-ec-cat-amount    { color: rgba(255, 255, 255, 0.88); }
.dark .fcc-ec-cat-pct       { color: rgba(255, 255, 255, 0.35); }
.dark .fcc-ec-cat-bar-track { background: rgba(255, 255, 255, 0.08); }
.dark .fcc-ec-budget-cat    { color: rgba(255, 255, 255, 0.85); }
.dark .fcc-ec-budget-track  { background: rgba(255, 255, 255, 0.08); }
.dark .fcc-ec-budget-meta   { color: rgba(255, 255, 255, 0.32); }
.dark .fcc-ec-insight       { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.09); }
.dark .fcc-ec-insight-label { color: rgba(255, 255, 255, 0.35); }
.dark .fcc-ec-insight-value { color: rgba(255, 255, 255, 0.92); }
.dark .fcc-ec-insight-sub   { color: rgba(255, 255, 255, 0.3); }
.dark .fcc-ec-insight--up   .fcc-ec-insight-value { color: #FF6B6B; }
.dark .fcc-ec-insight--down .fcc-ec-insight-value { color: #4CD964; }
.dark .fcc-ec-empty-title   { color: rgba(255, 255, 255, 0.5); }
.dark .fcc-ec-empty-sub     { color: rgba(255, 255, 255, 0.28); }
.dark .fcc-ec-empty-mini    { color: rgba(255, 255, 255, 0.28); }
.dark .fcc-ec-error-title   { color: rgba(255, 255, 255, 0.4); }

.dark .fcc-ec-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.06) 75%
  );
  background-size: 1200px 100%;
}

@media (prefers-color-scheme: dark) {
  .fcc-ec-card          { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); }
  .fcc-ec-insight       { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); }
  .fcc-ec-pill          { color: rgba(255,255,255,0.45); }
  .fcc-ec-pill:hover:not(.fcc-ec-pill--on) { color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.06); }
  .fcc-ec-pill--on      { background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); color: #fff; }
  .fcc-ec-skeleton      { background-color: rgba(255,255,255,0.06); }
}