/* =====================================================================
   YakCharts — violet→magenta GRADIENT accent on the shared yw-theme.css
   ---------------------------------------------------------------------
   Load order: yakware-style.css → yw-theme.css → THIS. yw-theme.css carries
   the design-language re-skin + neutral light/dark token blocks; this file
   sets the violet→magenta gradient accent + chart-editor specifics.
   Light-first (the server stamps html.yw-light by default).
   ===================================================================== */

/* chart-spectrum accents (theme-independent) used by the editor + extras */
:root {
    --chart-violet:  #7c3aed;
    --chart-magenta: #c026d3;
    --chart-red:     #e11d48;
    --chart-gold:    #f5b301;
    --footer-accent: #c4b5fd;   /* light violet reads on the dark footer */
}

/* —— accents: LIGHT —— */
html.yw-light {
    --accent:          #6d28d9;   /* violet — solid borders/rails/ink */
    --accent-strong:   #5b21b6;
    --accent-soft:     #a78bfa;
    --accent-contrast: #ffffff;   /* label ink on the violet→magenta fill */
    --accent-tint:     rgba(109,40,217,0.12);
    --accent-ink:      #6d28d9;   /* violet AS TEXT on white */
    --accent-gradient:       linear-gradient(135deg, rgb(109,40,217) 0%, rgb(192,38,211) 100%);
    --accent-gradient-hover: linear-gradient(135deg, rgb(91,33,182) 0%,  rgb(192,38,211) 100%);
}
/* —— accents: DARK —— */
html.yw-dark {
    --accent:          #8b5cf6;
    --accent-strong:   #a78bfa;
    --accent-soft:     #7c3aed;
    --accent-contrast: #ffffff;
    --accent-tint:     rgba(139,92,246,0.18);
    --accent-ink:      #c4b5fd;   /* light violet AS TEXT on dark */
    --accent-gradient:       linear-gradient(135deg, rgb(124,58,237) 0%, rgb(192,38,211) 100%);
    --accent-gradient-hover: linear-gradient(135deg, rgb(109,40,217) 0%, rgb(192,38,211) 100%);
}

/* Eyebrow gets a violet→magenta gradient-text flourish (charts-local; solid
   --accent-ink fallback where background-clip is unsupported). */
.yw-eyebrow {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-ink);
}

/* ── Single window scrollbar ──
   The shared base style.css pins body { overflow-y: hidden } and turns the
   Wt contents stack into its own 100vh scroll container, which strands the
   yw-footer below the fold behind a second scrollbar. Marketing pages (and
   the editor) read better with normal document scrolling, so undo it here.
   !important is required to beat both the base rules and Wt's inline
   overflow on the stack. */
.Wt-domRoot { height: auto !important; }
body { overflow-y: auto !important; }
.Wt-stack.contents {
    max-height: none;
    overflow-y: visible !important;
    padding-bottom: 0;
}

/* YakCharts uses one global dark footer; hide the legacy FootedPage footer. */
.yw-app > .yc-global-footer {
    display: block;
    width: 100%;
    align-self: stretch;
    flex-shrink: 0;
}
.yw-app > .yc-global-footer .yw-footer { width: 100%; }
.yw-app .footed-page > .footer { display: none !important; }
.yw-app .footed-page {
    min-height: 0;
    padding-bottom: 30px;
}

/* Nav CTA ("Start free trial") uses the shared .yw-nav-cta gradient pill from
   yw-theme.css (violet→magenta, white ink) — no charts-local override needed
   now that the bar is dark navy rather than deep purple. */

/* ── Hero spec-stats strip — lives INSIDE the always-dark hero panel, so its
   colours are fixed light (not theme tokens, which would vanish on the panel). */
.yc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.75rem;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    justify-content: center;
}
.yc-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    color: #c4b5fd;            /* light violet — reads on the dark panel */
    line-height: 1.1;
}
.yc-stat span {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9fadc6;            /* light muted — matches the hero lead */
}

/* ── Hero SVG sits contained in the circular medallion ── */
.yw-hero__media img.charts-hero {
    border-radius: 0;
    object-fit: contain;
    padding: 6px;
}

/* ── Theme chips (editor / themes showcase) ── */
.yc-theme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.yc-theme-chip {
    font-size: .85rem;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-soft);
}
.yc-theme-chip::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .4rem;
    background: var(--swatch, var(--navy));
}

/* ── Configuration WPanel ── */
.chart-config-panel {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.075);
}

.chart-config-panel > .Wt-panelbar {
    background: var(--accent-gradient);
    color: #fff;
    padding: 10px 14px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
}

.chart-config-panel > .Wt-panelbar .titlebar {
    flex: 1;
}

.chart-config-panel.Wt-collapsed > .Wt-panelbar {
    border-radius: 4px;
}

.chart-config-panel > .Wt-panel-body {
    padding: 16px;
}

/* ── ChartEditor description row (column headers in data table) ── */
.chart-editor-description-row td {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    padding: 4px 6px;
    border-bottom: 2px solid #dee2e6;
}

/* ── Data table inside ChartEditorDataWidget ── */
.chart-editor-data-widget table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.chart-editor-data-widget table td {
    padding: 4px 6px;
    vertical-align: middle;
}

.chart-editor-data-widget table input[type="text"],
.chart-editor-data-widget table input[type="number"] {
    width: 100%;
    min-width: 70px;
    padding: 3px 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.15s ease-in-out;
}

.chart-editor-data-widget table input[type="text"]:focus,
.chart-editor-data-widget table input[type="number"]:focus {
    border-color: var(--navy);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(109, 40, 217, 0.25);
}

/* ── Add Row / Add Column buttons ── */
.chart-editor-data-widget button {
    font-size: 0.8rem;
    padding: 3px 10px;
    margin-right: 6px;
    margin-top: 6px;
    border-radius: 4px;
    border: 1px solid #6c757d;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s;
}

.chart-editor-data-widget button:hover {
    background: #6c757d;
    color: #fff;
}

/* ── Chart-type-specific options row ── */
.chart-type-options {
    padding: 8px 0 4px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.chart-type-options .form-check-inline {
    margin-right: 1.5rem;
}

/* ── Preview image ── */
#chart-image-widget img,
.chart-editor-preview img {
    max-width: 100%;
    border-radius: 6px;
}

/* Editor first-run intro banner */
.editor-intro {
    background: var(--navy-tint, #efe6fb);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    color: var(--ink-soft);
    font-size: .95rem;
}
.editor-intro a { font-weight: 600; }

/* ── Email Tracking (tracked embeds) dashboard ─────────────────────────────
   Stat cards + breakdown tables. Colors meet WCAG AA against the card paper;
   sizes use rem so they scale with the global type baseline.            */
.embed-analytics-detail { margin-top: 1.5rem; }

.embed-list-table .embed-url-field {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
}

.embed-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0;
}
.embed-stat-card {
    flex: 1 1 8.5rem;
    min-width: 8.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-faint);
    border-radius: .5rem;
    padding: .75rem .9rem;
}
.embed-stat-card .embed-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}
.embed-stat-card .embed-stat-label {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--ink-soft);
}
/* Verified = trustworthy (violet); proxy/bot = caveated (muted/gold). */
.embed-stat-card.stat-verified { border-left-color: var(--navy); }
.embed-stat-card.stat-prefetch { border-left-color: var(--brass); }
.embed-stat-card.stat-cached   { border-left-color: var(--brass-soft); }
.embed-stat-card.stat-bot      { border-left-color: var(--ink-faint); }
.embed-stat-card.stat-unique   { border-left-color: var(--chart-violet); }
.embed-stat-card.stat-total    { border-left-color: var(--ink-soft); }

.embed-breakdown-table { max-width: 32rem; font-size: .9rem; }
.embed-analytics-detail h4 { margin-top: 1.25rem; font-size: 1.05rem; color: var(--ink); }
.embed-note { font-size: .85rem; max-width: 46rem; }
.embed-empty { color: var(--ink-soft); }
.embed-empty code,
.embed-note code {
    background: var(--paper-2);
    padding: .1rem .35rem;
    border-radius: .25rem;
    font-size: .85rem;
}

/* ---------------------------------------------------------------------
   Bootstrap-4 utility shim.
   Wt's Bootstrap-3 theme (WBootstrap3Theme) loads only bootstrap.css +
   wt.css, but the charts editor markup is written with Bootstrap-4
   utility classes. bootstrap.css defines none of these, so without this
   shim flex rows never become flex — collapsing .form-control width to
   ~0 — and spacing/buttons are lost. Loaded after bootstrap.css, so wins.
   --------------------------------------------------------------------- */

/* flex layout — fixes the degenerate .form-control width */
.d-flex                  { display: flex; }
.flex-grow-1             { flex: 1 1 auto; min-width: 0; }  /* min-width:0 lets the field shrink instead of overflow */
.flex-shrink-0           { flex-shrink: 0; }
.align-items-center      { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2                   { gap: .5rem; }

/* spacing */
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mt-2 { margin-top: .5rem; }
.p-2  { padding: .5rem; }

/* text */
.font-weight-bold { font-weight: 700; }

/* small form controls (height/padding only — width still comes from .form-control) */
.form-control-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem; }

/* buttons / image utilities used by the editor */
.btn-outline-primary   { color: var(--navy, #6d28d9); border: 1px solid var(--navy, #6d28d9); background: transparent; }
.btn-outline-secondary { color: #6c757d; border: 1px solid #6c757d; background: transparent; }
.btn-outline-danger    { color: #dc3545; border: 1px solid #dc3545; background: transparent; }
.img-fluid  { max-width: 100%; height: auto; }
.rounded    { border-radius: .25rem; }
.shadow-sm  { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }