/* =============================================================
   PIVOT TABLE — READY-TO-USE THEMES
   via CSS Custom Properties (Shadow DOM compatible)
   =============================================================

   USAGE — Light theme (default, always active):
   -----------------------------------------------
   <link rel="stylesheet" href="pivot-themes.css">
   <pivot-table class="pivot-theme-light" ...></pivot-table>

   USAGE — Dark theme:
   --------------------
   <pivot-table class="pivot-theme-dark" ...></pivot-table>

   USAGE — Toggle with JavaScript:
   ---------------------------------
   const el = document.querySelector('pivot-table');
   el.classList.toggle('pivot-theme-dark');
   el.classList.toggle('pivot-theme-light');

   Because CSS custom properties DO penetrate the Shadow DOM boundary,
   all properties set on the host element are inherited by the component.
   ============================================================= */


/* ───────────────────────────────────────────────────────────────
   LIGHT THEME  (Clean, professional — default)
─────────────────────────────────────────────────────────────── */
.pivot-theme-light {

   /* ── Backgrounds ───────────────────────────────────────────── */
   --pivot-bg: #ffffff;
   --pivot-card-bg: #ffffff;
   --pivot-toolbar-bg: linear-gradient(135deg, #dfe8f1 0%, #f1f5f9 100%);
   --pivot-header-bg: #ffffff;
   --pivot-header-bg-light: #f8fafc;
   --pivot-context-menu-bg: #ffffff;
   --pivot-row-header-bg: var(--pivot-header-area-bg, #f8fafc);
   --pivot-column-header-bg: var(--pivot-header-area-bg, #f8fafc);
   --pivot-field-button-bg: var(--pivot-header-area-bg, #d7dcdfff);
   --pivot-value-bg: #ffffff;


   /* ── Totals & Subtotals ────────────────────────────────────── */
   --pivot-subtotal-bg: #eef2f7;
   --pivot-subtotal-row-bg: #eef2f7;
   --pivot-subtotal-header-bg: var(--pivot-header-area-bg, #e4ecf5);
   --pivot-subtotal-hover-bg: #dde6ef;

   --pivot-grandtotal-bg: #dce6f1;
   --pivot-grandtotal-row-bg: #dce6f1;
   --pivot-grandtotal-header-bg: var(--pivot-header-area-bg, #d5e0ec);
   --pivot-grandtotal-hover-bg: #cfd8e3;

   --pivot-total-accent-bg: #d5e0ec;

   /* ── Typography ────────────────────────────────────────────── */
   --pivot-text-color: #0f172a;
   --pivot-text-color-light: #64748b;
   --pivot-header-text: #0f172a;
   --pivot-font-family: 'Inter', system-ui, -apple-system, sans-serif;
   --pivot-font-size: 13px;

   /* ── Borders ───────────────────────────────────────────────── */
   --pivot-border-color: #e2e8f0;
   --pivot-border-color-medium: #c8d5e6;
   --pivot-border-color-dark: #b0c4d8;
   --pivot-border-light: #f1f5f9;
   --pivot-radius-lg: 12px;
   --pivot-radius-sm: 4px;
   --pivot-toolbar-border-color: #e2e8f0;
   --pivot-field-list-border: #e2e8f0;

   /* ── Interaction & UI ─────────────────────────────────────── */
   --pivot-row-hover-bg: #f1f5f9;
   --pivot-button-bg: #ffffff;
   --pivot-button-bg-light: #d7dcdfff;
   --pivot-icon-color: #000000;
   --pivot-accent-color: #3b82f6;
   --pivot-accent-text-color: #ffffff;

   /* ── Field List Items ─────────────────────────────────────── */
   --pivot-field-bg: #ffffff;
   --pivot-field-hover-bg: #f1f5f9;
   --pivot-field-border: #dfe8f1;
   --pivot-field-drag-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);

   /* ── Shadows ───────────────────────────────────────────────── */
   --pivot-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
   --pivot-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --pivot-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
   --pivot-context-menu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

   /* ── Status & States ───────────────────────────────────────── */
   --pivot-success-color: #10b981;
   --pivot-error-color: #ef4444;
   --pivot-warning-color: #f59e0b;
   --pivot-button-hover-bg: #f8fafc;

   /* ── Component Specifics ───────────────────────────────────── */
   --pivot-segmented-bg: #f1f5f9;
   --pivot-segmented-indicator-bg: #ffffff;
   /* --pivot-field-list-toggle-bg: #30363d; */
   /* --pivot-field-list-toggle-hover-bg: #30363d; */
   /* --pivot-field-list-toggle-icon-color: #3b82f6; */
}


/* ───────────────────────────────────────────────────────────────
   DARK THEME  (Slate-based dark mode)
─────────────────────────────────────────────────────────────── */
.pivot-theme-dark {

   /* ── Backgrounds ───────────────────────────────────────────── */
   --pivot-bg: #424346;
   --pivot-card-bg: #161b22;
   --pivot-toolbar-bg: linear-gradient(135deg, #1c2333 0%, #161b22 100%);
   --pivot-header-bg: #161b22;
   --pivot-header-bg-light: #21262d;
   --pivot-context-menu-bg: #161b22;
   --pivot-row-header-bg: var(--pivot-header-area-bg, #21262d);
   --pivot-column-header-bg: var(--pivot-header-area-bg, #21262d);
   --pivot-field-button-bg: var(--pivot-header-area-bg, #30363d);
   --pivot-value-bg: #161b22;
   --pivot-row-label-bg: #21262d;


   /* ── Totals & Subtotals ────────────────────────────────────── */
   --pivot-subtotal-bg: #21262d;
   /* slightly lighter than card-bg */
   --pivot-subtotal-row-bg: #21262d;
   --pivot-subtotal-header-bg: var(--pivot-header-area-bg, #30363d);
   --pivot-subtotal-hover-bg: #363c44;

   --pivot-grandtotal-bg: #1c2128;
   /* darker accent for grand totals */
   --pivot-grandtotal-row-bg: #1c2128;
   --pivot-grandtotal-header-bg: var(--pivot-header-area-bg, #30363d);
   --pivot-grandtotal-hover-bg: #363c44;

   --pivot-total-accent-bg: #3d444d;

   /* ── Typography ────────────────────────────────────────────── */
   --pivot-text-color: #e6edf3;
   --pivot-text-color-light: #8b949e;
   --pivot-header-text: #e6edf3;
   --pivot-font-family: 'Inter', system-ui, -apple-system, sans-serif;
   --pivot-font-size: 13px;

   /* ── Borders ───────────────────────────────────────────────── */
   --pivot-border-color: #30363d;
   --pivot-border-color-medium: #484f58;
   --pivot-border-color-dark: #6e7681;
   --pivot-border-light: #21262d;
   --pivot-radius-lg: 12px;
   --pivot-radius-sm: 4px;
   --pivot-toolbar-border-color: #30363d;
   --pivot-field-list-border: #30363d;

   /* ── Interaction & UI ─────────────────────────────────────── */
   --pivot-row-hover-bg: #1f242c;
   --pivot-button-bg: #21262d;
   --pivot-button-bg-light: #30363d;
   --pivot-icon-color: #ffffff;
   --pivot-accent-color: #58a6ff;
   --pivot-accent-text-color: #ffffff;

   /* ── Field List Items ─────────────────────────────────────── */
   --pivot-field-bg: #21262d;
   --pivot-field-hover-bg: #30363d;
   --pivot-field-border: #30363d;
   --pivot-field-drag-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);

   /* ── Shadows ───────────────────────────────────────────────── */
   --pivot-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
   --pivot-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.6);
   --pivot-shadow-lg: #424346;
   --pivot-context-menu-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);

   /* ── Status & States ───────────────────────────────────────── */
   --pivot-success-color: #34d399;
   --pivot-error-color: #f87171;
   --pivot-warning-color: #fbbf24;
   --pivot-button-hover-bg: #30363d;

   /* ── Component Specifics ───────────────────────────────────── */
   --pivot-segmented-bg: #0d1117;
   --pivot-segmented-indicator-bg: #30363d;
   --pivot-field-list-toggle-bg: #21262d;
   --pivot-field-list-toggle-hover-bg: #30363d;
   --pivot-field-list-toggle-icon-color: #58a6ff;
}

/* ───────────────────────────────────────────────────────────────
   CUSTOM THEME ONE
─────────────────────────────────────────────────────────────── */
.pivot-theme-1 {
   --pivot-toolbar-bg: linear-gradient(135deg, #1f4e5c 0%, #6dbad1 100%);
   --pivot-header-area-bg: #478092;
   --pivot-header-area-text-color: #e9fffb;
   --pivot-row-label-bg: #478092;
   --pivot-row-label-text-color: #e9fffb;
   --pivot-field-list-toggle-bg: #1f4e5c;
   --pivot-field-list-toggle-hover-bg: #1f4e5c;
   --pivot-field-list-border: #6dbad1;
   --pivot-field-border: #6dbad1;
}

/* ───────────────────────────────────────────────────────────────
   CUSTOM THEME TWO
─────────────────────────────────────────────────────────────── */
.pivot-theme-2 {
   --pivot-toolbar-bg: linear-gradient(135deg, #247732 0%, #38be80 100%);
   --pivot-header-area-bg: linear-gradient(90deg, #aaf8c4 0%, #aaf8c4 100%);
   --pivot-header-area-text-color: #2b1143;
   --pivot-field-list-toggle-bg: #247732;
   --pivot-field-list-toggle-hover-bg: #38be80;
   --pivot-button-bg: #d0f5dc;
   --pivot-field-border: #aaf8c4;
   --pivot-field-list-border: #aaf8c4;
}

/* ───────────────────────────────────────────────────────────────
   CUSTOM THEME THREE
─────────────────────────────────────────────────────────────── */
.pivot-theme-3 {
   --pivot-toolbar-bg: linear-gradient(to bottom, #8c3a12, #a84a1c);
   --pivot-header-area-bg: #f5b689;
   --pivot-row-label-bg: linear-gradient(135deg, #ff7e3e 0%, #f5b689 100%);
   --pivot-button-bg: linear-gradient(135deg, #f1efed 0%, #f1d6bd 100%);
   --pivot-field-list-border: #f5b689;
   --pivot-field-bg: #f5b689;
   --pivot-field-border: #f5b689;
   --pivot-field-list-toggle-bg: #8c3a12;
   --pivot-field-list-toggle-hover-bg: #8c3a12;
}