/* ==========================================================================
   INSIGHTDECK — teal analytics, presentation-ready.

   Of every system tried here this is the closest fit: the portal IS a
   reporting dashboard, and the spec's three rules are about reporting rather
   than decoration.

   All three are implemented, not just the palette:
     * teal/purple/pink, with the accents reserved for data and insight;
     * a five-colour chart series cap, exposed as tokens the charts already read;
     * a real presentation mode (see polish.css) that strips the chrome.
   ========================================================================== */

html[data-skin="insightdeck"] {
    --pv-bg:          #f8fafc;
    --pv-surface:     #ffffff;
    --pv-surface-2:   #f1f5f9;

    --pv-text:        #0f172a;
    --pv-text-muted:  #64748b;
    --pv-border:      #e2e8f0;

    /* Teal reads analytical rather than corporate-blue — the trust colour
       without the banking connotation. */
    --pv-accent:      #0d9488;
    --pv-accent-600:  #0f766e;
    --pv-accent-soft: #ccfbf1;
    --pv-brand-ink:   #0f172a;

    --pv-sidebar-bg:     #ffffff;
    --pv-sidebar-raise:  #f8fafc;
    --pv-sidebar-fg:     #64748b;
    --pv-sidebar-active: #ccfbf1;
    --pv-beacon:         #10b981;

    --pv-success:      #059669;  --pv-success-soft: #d1fae5;
    --pv-warning:      #b45309;  --pv-warning-soft: #fef3c7;
    --pv-danger:       #dc2626;  --pv-danger-soft:  #fee2e2;
    --pv-info:         #2563eb;  --pv-info-soft:    #dbeafe;

    /* Purple = premium / insight callouts. Pink = trend and alert badges.
       Both are deliberately absent from ordinary UI so they still mean
       something when they appear on a chart. */
    --pv-secondary:      #9333ea;
    --pv-secondary-soft: #f3e8ff;
    --pv-tertiary:       #ec4899;
    --pv-tertiary-soft:  #fce7f3;

    /* The five-colour cap, expressed as tokens. The dashboard's chart code
       already reads --pv-primary and --pv-success from CSS, so a series stays
       inside the palette by construction rather than by discipline. */
    --pv-chart-1: #0d9488;
    --pv-chart-2: #9333ea;
    --pv-chart-3: #ec4899;
    --pv-chart-4: #3b82f6;
    --pv-chart-5: #f59e0b;
    --pv-primary: #0d9488;

    --pv-r-sm: 6px;
    --pv-r-md: 10px;
    --pv-r-lg: 14px;
    --pv-r-xl: 20px;

    --pv-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --pv-shadow-sm: 0 1px 3px rgba(15,23,42,.06);
    --pv-shadow-md: 0 4px 12px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
    --pv-shadow-lg: 0 20px 40px rgba(15,23,42,.12);
    --pv-ring:      0 0 0 3px rgba(13,148,136,.25);

    --pv-grad-brand: linear-gradient(135deg,#14b8a6,#0d9488);

    --pv-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --pv-font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --pv-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

html[data-skin="insightdeck"][data-theme="dark"] {
    --pv-bg:          #0b1120;

    --pv-surface:     #131c2f;
    --pv-surface-2:   #1b2540;
    --pv-text:        #e2e8f0;
    --pv-text-muted:  #94a3b8;
    --pv-border:      rgba(226,232,240,.12);
    --pv-accent:      #2dd4bf;
    --pv-accent-600:  #14b8a6;
    --pv-accent-soft: rgba(45,212,191,.16);
    --pv-brand-ink:   #e2e8f0;
    --pv-sidebar-bg:     #0b1120;
    --pv-sidebar-raise:  #1b2540;
    --pv-sidebar-fg:     #94a3b8;
    --pv-sidebar-active: rgba(45,212,191,.16);
    --pv-secondary-soft: rgba(147,51,234,.2);
    --pv-tertiary-soft:  rgba(236,72,153,.2);
    --pv-shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --pv-shadow-lg: 0 20px 40px rgba(0,0,0,.55);
}

/* ---- Type: quiet UI, loud numbers -------------------------------------- */

html[data-skin="insightdeck"] body,
html[data-skin="insightdeck"] .pv-content {
    font-family: var(--pv-font-sans);
    font-size: .9rem;
    letter-spacing: -.004em;
    -webkit-font-smoothing: antialiased;
}
html[data-skin="insightdeck"] .pv-page-title,
html[data-skin="insightdeck"] .pv-content h1 {
    font-family: var(--pv-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -.025em;
}
html[data-skin="insightdeck"] .pv-content h2,
html[data-skin="insightdeck"] .pv-content h3 { font-weight: 700; letter-spacing: -.015em; }
html[data-skin="insightdeck"] .pv-brand { font-weight: 800; letter-spacing: -.02em; }
html[data-skin="insightdeck"] .pv-page-title::after { background: var(--pv-accent); height: 3px; }

/* The number is the product. Everything around it is smaller than it. */
html[data-skin="insightdeck"] .pv-kpi-value {
    font-family: var(--pv-font-display);
    font-weight: 800;
    font-size: 2.15rem;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums lining-nums;
}
html[data-skin="insightdeck"] .pv-kpi-label {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pv-text-muted);
}
html[data-skin="insightdeck"] .pv-table td { font-variant-numeric: tabular-nums lining-nums; }
html[data-skin="insightdeck"] .pv-label,
html[data-skin="insightdeck"] .pv-table thead th {
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--pv-text-muted);
}

/* A chart card's subtitle is required by the spec — give it somewhere to sit. */
html[data-skin="insightdeck"] .pv-card-title {
    font-family: var(--pv-font-display);
    font-weight: 700; font-size: 1rem; letter-spacing: -.012em;
    color: var(--pv-text);
}
html[data-skin="insightdeck"] .pv-card-title + .pv-muted,
html[data-skin="insightdeck"] .pv-card-subtitle {
    display: block; margin-top: .15rem; font-size: .82rem; color: var(--pv-text-muted);
}

/* ---- Surfaces ----------------------------------------------------------- */

html[data-skin="insightdeck"] .pv-card,
html[data-skin="insightdeck"] .pv-kpi,
html[data-skin="insightdeck"] .pv-chart-card {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-left: 1px solid var(--pv-border) !important;
    border-radius: var(--pv-r-lg);
    box-shadow: var(--pv-shadow-sm);
}
html[data-skin="insightdeck"] .pv-kpi::before,
html[data-skin="insightdeck"] .pv-kpi::after { display: none !important; content: none !important; }
html[data-skin="insightdeck"] .pv-card-pad { padding: 1.15rem 1.25rem; }
html[data-skin="insightdeck"] .pv-content  { padding: 1.75rem 2rem; }

/* ---- Controls ----------------------------------------------------------- */

html[data-skin="insightdeck"] .pv-btn {
    border-radius: var(--pv-r-sm);
    font-weight: 700;
    font-size: .84rem;
    padding: .5rem .9rem;
    letter-spacing: -.002em;
    border: 1px solid transparent;
}
html[data-skin="insightdeck"] .pv-btn-primary {
    background: var(--pv-grad-brand); color: #fff;
    box-shadow: 0 1px 2px rgba(13,148,136,.35);
}
html[data-skin="insightdeck"] .pv-btn-subtle {
    background: var(--pv-surface); color: var(--pv-text);
    border-color: var(--pv-border); box-shadow: var(--pv-shadow-xs);
}
html[data-skin="insightdeck"] .pv-btn-subtle:hover { border-color: var(--pv-accent); color: var(--pv-accent-600); }

html[data-skin="insightdeck"] .pv-input,
html[data-skin="insightdeck"] select.pv-input,
html[data-skin="insightdeck"] textarea.pv-input {
    background: var(--pv-surface); border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-sm); font-size: .875rem; padding: .5rem .7rem;
}
html[data-skin="insightdeck"] .pv-input:focus { border-color: var(--pv-accent); box-shadow: var(--pv-ring); outline: none; }
html[data-skin="insightdeck"] select.pv-input {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .65rem center;
    padding-right: 1.9rem !important; cursor: pointer;
}

/* ---- Navigation --------------------------------------------------------- */

html[data-skin="insightdeck"] .pv-sidebar { border-right: 1px solid var(--pv-border); }
html[data-skin="insightdeck"] .pv-nav-link {
    border-radius: var(--pv-r-sm); padding: .42rem .65rem; margin: 1px .55rem;
    font-size: .865rem; font-weight: 600; color: var(--pv-sidebar-fg);
    box-shadow: none !important;
}
html[data-skin="insightdeck"] .pv-nav-link:hover { background: var(--pv-surface-2); color: var(--pv-text); }
html[data-skin="insightdeck"] .pv-nav-link.active {
    background: var(--pv-sidebar-active) !important; color: var(--pv-accent-600) !important; font-weight: 700;
    box-shadow: inset 2px 0 0 var(--pv-accent) !important;
}
html[data-skin="insightdeck"] .pv-nav-link i {
    background: none !important; border-radius: 0; width: 17px; height: auto;
    font-size: .8rem; color: inherit !important; opacity: .75; margin-right: .5rem;
}
html[data-skin="insightdeck"] .pv-nav-label,
html[data-skin="insightdeck"] .pv-nav-section {
    font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #94a3b8;
}

/* ---- Chrome, tabs, tables, badges, alerts ------------------------------- */

html[data-skin="insightdeck"] .pv-topbar {
    background: var(--pv-surface); border-bottom: 1px solid var(--pv-border);
    box-shadow: none; backdrop-filter: none;
}
html[data-skin="insightdeck"] .pv-topbar::after { display: none; }

html[data-skin="insightdeck"] .pv-tabs { border-bottom: 1px solid var(--pv-border); gap: 1.35rem; }
html[data-skin="insightdeck"] .pv-tab {
    background: none !important; border-radius: 0; padding: .6rem 0;
    font-size: .865rem; font-weight: 600; color: var(--pv-text-muted);
}
html[data-skin="insightdeck"] .pv-tab.active {
    color: var(--pv-accent-600); font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--pv-accent);
}

html[data-skin="insightdeck"] .pv-table th,
html[data-skin="insightdeck"] .pv-table td {
    border: none; border-bottom: 1px solid var(--pv-border);
    padding: .6rem .5rem; font-size: .865rem; background: transparent !important;
}
html[data-skin="insightdeck"] .pv-table tbody tr:hover td { background: var(--pv-surface-2) !important; }

html[data-skin="insightdeck"] .pv-badge {
    border: none; border-radius: 999px; font-weight: 700;
    font-size: .7rem; padding: .15rem .55rem; letter-spacing: .01em;
}
html[data-skin="insightdeck"] .pv-badge-success { background: var(--pv-success-soft); color: var(--pv-success); }
html[data-skin="insightdeck"] .pv-badge-warning { background: var(--pv-warning-soft); color: var(--pv-warning); }
html[data-skin="insightdeck"] .pv-badge-danger  { background: var(--pv-danger-soft);  color: var(--pv-danger); }
html[data-skin="insightdeck"] .pv-badge-info    { background: var(--pv-secondary-soft); color: var(--pv-secondary); }

html[data-skin="insightdeck"] .pv-alert {
    border: 1px solid var(--pv-border); border-radius: var(--pv-r-md);
    font-size: .865rem; padding: .8rem 1rem; box-shadow: none;
}
html[data-skin="insightdeck"] .pv-alert-warning { background: var(--pv-warning-soft); border-color: rgba(180,83,9,.25); color: #92400e; }
html[data-skin="insightdeck"] .pv-alert-danger  { background: var(--pv-danger-soft);  border-color: rgba(220,38,38,.25); color: #991b1b; }
html[data-skin="insightdeck"] .pv-alert-success { background: var(--pv-success-soft); border-color: rgba(5,150,105,.25); color: #065f46; }

/* Trend: pink is the spec's trend colour, but a falling metric must still read
   as bad — pink for movement, semantic colour for direction. */
html[data-skin="insightdeck"] .pv-kpi-foot .pv-trend {
    background: none !important; padding: 0 !important; font-weight: 700; font-size: .78rem;
}
html[data-skin="insightdeck"] .pv-trend-up   { color: var(--pv-success) !important; }
html[data-skin="insightdeck"] .pv-trend-down { color: var(--pv-tertiary) !important; }
html[data-skin="insightdeck"] .pv-stat-icon {
    background: none !important; color: var(--pv-accent) !important;
    font-size: .85rem; opacity: .7;
}

/* Segmented range control (inline styles in the view). */
html[data-skin="insightdeck"] [style*="border-radius:10px"] {
    background: var(--pv-surface-2) !important; border-radius: var(--pv-r-sm) !important; padding: 3px !important;
}
html[data-skin="insightdeck"] [style*="border-radius:10px"] button {
    border-radius: 4px !important; font-weight: 700 !important; font-size: .8rem !important;
    color: var(--pv-text-muted) !important; padding: .35rem .8rem !important;
    box-shadow: none !important; background: transparent !important;
}
html[data-skin="insightdeck"] [style*="border-radius:10px"] button[style*="background:#fff"],
html[data-skin="insightdeck"] [style*="border-radius:10px"] button[style*="background: rgb(255, 255, 255)"] {
    background: var(--pv-accent) !important; color: #fff !important;
}