/* ===================================================================
   yakmu.css — Yak-Mu product palette + app-page theming.

   Yak-Mu now rides the shared "data point" design language:
     yak-typography → yakware-style (base tokens + yw-* structure)
       → yw-theme (light/dark re-skin, nav, footer, Bootstrap bridges)
         → yk-marketing → THIS FILE (last).

   The marketing home + pricing pages use the yw-* classes straight from
   that stack, so the only marketing job here is to set Yak-Mu's VIOLET
   accent tokens for both themes (Yak-Mu = business metrics/analytics from
   Stripe — a distinct violet vs YakTimer's blue). Everything below the
   token blocks is the logged-in app (dashboard, query manager, tables,
   tabs, buttons) re-expressed in design tokens so it themes light/dark.

   Accessibility (unchanged intent): rem sizing, >= 4.5:1 body contrast /
   >= 3:1 large text, visible keyboard focus, responsive reflow.
   =================================================================== */

/* ===================================================================
   ACCENT TOKENS — Yak-Mu violet (light-first, brightens on dark).
   These are the ~8 tokens every yw-* component reads; setting them here
   re-skins the whole shared system to Yak-Mu's colour without touching
   the neutral light/dark surfaces (those come from yw-theme.css).
   =================================================================== */
html.yw-light {
    --accent:          #6d28d9;   /* violet-700 — fills, rails, ink */
    --accent-strong:   #5b21b6;
    --accent-soft:     #c4b5fd;   /* soft violet — glows/borders on dark panels */
    --accent-contrast: #ffffff;   /* 4.64:1 on the gradient's LIGHT stop (see below) */
    --accent-tint:     rgba(109, 40, 217, 0.12);
    --accent-ink:      #5b21b6;   /* violet AS TEXT on white (~7.7:1) */
    /* Light stop darkened: white measured 4.23:1 against #8b5cf6 in production. The
       old ~6.6:1 note was the dark stop #6d28d9, which is not where the label sits. */
    --accent-gradient:       linear-gradient(135deg, #8457e9 0%, #6d28d9 100%);
    --accent-gradient-hover: linear-gradient(135deg, #7c4ff0 0%, #5b21b6 100%);
    --footer-accent:   #c4b5fd;   /* bright violet link/hover on the dark footer */
}
html.yw-dark {
    --accent:          #a78bfa;   /* violet-400 for dark surfaces */
    --accent-strong:   #c4b5fd;
    --accent-soft:     #7c3aed;
    --accent-contrast: #1a1030;   /* dark ink on the bright-violet fill */
    --accent-tint:     rgba(167, 139, 250, 0.16);
    --accent-ink:      #c4b5fd;   /* light violet AS TEXT on dark */
    /* Dark ink needs the whole gradient light enough: #1a1030 on #7c3aed was 3.17:1.
       Narrowed so both stops clear 4.5 (light 6.65, dark 4.59). */
    --accent-gradient:       linear-gradient(135deg, #a78bfa 0%, #9163f7 100%);
    --accent-gradient-hover: linear-gradient(135deg, #b9a3ff 0%, #a78bfa 100%);
    --footer-accent:   #c4b5fd;
}

/* ===================================================================
   Nav brand — stylised μ mark in an accent badge + "Yak Mu" wordmark.
   Injected as inline SVG into the .navbar-brand anchor (JakApplication).
   The 40px symbol sits beside an HTML wordmark and follows the shared
   `.navbar-brand img` sizing, with theme-aware accent colours.
   =================================================================== */
.ym-brand { display: inline-flex; align-items: center; gap: 9px; }
.ym-brand .ym-mark {
    width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: content-box;
    border-radius: 9px;
    color: var(--accent-ink);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    display: inline-flex;
    flex: 0 0 auto;
}
.ym-brand .ym-mark svg { width: 40px; height: 40px; display: block; }
.ym-brand .ym-word { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.ym-brand .yw-wm { color: var(--accent-ink); }

/* Nav items folded into the "Analytics" dropdown — hidden in the bar but still route
   (CSS display:none keeps WMenu internal-path resolution working; setHidden would not). */
.navbar .ym-nav-grouped { display: none !important; }

/* Full-bleed navbar bottom border. Bootstrap 3 rounds the navbar corners (border-radius:4px)
   and caps the inner .container width, so the shared bottom border (yw-theme.css) curves in /
   stops short at the ends ("only ends on the sides"). Square the corners, drop the margin and
   let the inner container run full width so the hairline is one continuous edge-to-edge line. */
.navbar.navbar-default { border-radius: 0 !important; margin: 0 !important; width: 100%; }
.navbar.navbar-default > div { max-width: none; width: 100%; }

/* ===================================================================
   Marketing home helpers (used by PageHome.kt). The bulk of the hero,
   feature and CTA structure is the shared yw-* stack; these are the few
   Yak-Mu-specific bits (the circular hero avatar + the closing CTA slab +
   a reassurance note), mirroring YakTimer's yt-cta-panel / yt-hero-note.
   =================================================================== */
.ym-hero-note { color: #94a3bf; font-size: 0.95rem; margin: 16px 0 0; }

/* Closing CTA panel — a rounded dark slab anchored like the hero (fixed dark
   navy in BOTH themes), so the page opens and closes on the same anchor. */
.ym-cta-panel {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 22px;
    border: 1px solid var(--hero-panel-border);
    background: var(--hero-panel-bg);
    padding: clamp(40px, 5vw, 68px) clamp(22px, 4vw, 44px);
}
.ym-cta-panel::after {              /* soft accent glow, like the hero */
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 70% at 50% 30%, var(--accent-tint), transparent 70%);
}
.ym-cta-panel > * { position: relative; z-index: 1; }
.ym-cta-panel h2 { color: #f3f1ea; margin: 0 0 10px; }
.ym-cta-panel p { color: #b9c3d6; font-size: 1.15rem; margin: 0 auto 24px; max-width: 60ch; }
.ym-cta-panel .yw-actions { justify-content: center; }

/* Chart thumbnail band on the home page (screenshots of chart types). */
.ym-chart-strip { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ym-chart-strip img {
    width: 220px;
    max-width: 44vw;
    border-radius: 12px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--card-shadow);
    background: var(--surface);
}

/* Footer link columns rendered as block anchors (JWt client-side internal nav). */
.yw-footer .ym-fl { display: block; margin-bottom: 8px; line-height: 1.45; }

/* ===================================================================
   TipTap invoice-email editor (window.YakTipTap / TipTapEditor widget).
   Toolbar + editing surface themed with tokens so it matches light/dark.
   =================================================================== */
.ytt-root { border: 1px solid var(--surface-border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ytt-toolbar {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 6px 8px; border-bottom: 1px solid var(--surface-border); background: var(--surface-2);
}
.ytt-btn {
    min-width: 30px; height: 30px; padding: 0 9px;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    color: var(--text); font-weight: 600; line-height: 1; cursor: pointer;
}
.ytt-btn:hover { background: var(--accent-tint); color: var(--accent-ink); }
.ytt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ytt-sep { width: 1px; height: 20px; background: var(--surface-border); margin: 0 4px; }
.ytt-vars {
    height: 30px; padding: 0 6px; border: 1px solid var(--surface-border); border-radius: 6px;
    background: var(--surface); color: var(--text); font-size: 0.9rem; cursor: pointer;
}
.ytt-content { min-height: 220px; max-height: 440px; overflow-y: auto; padding: 12px 14px; color: var(--text); background: var(--surface); }
.ytt-content .ProseMirror { outline: none; min-height: 196px; line-height: 1.55; }
.ytt-content .ProseMirror:focus { outline: none; }
.ytt-content .ProseMirror p { margin: 0 0 10px; }
.ytt-content .ProseMirror a { color: var(--accent-ink); text-decoration: underline; }
.ytt-content .ProseMirror ul, .ytt-content .ProseMirror ol { padding-left: 22px; margin: 0 0 10px; }
.ytt-content .ProseMirror h2 { font-size: 1.3rem; margin: 4px 0 8px; color: var(--text); }

/* ===================================================================
   Invoices configuration page (InvoiceConfigurationPage) — two cards
   (email template + invoice document) in a responsive row.
   =================================================================== */
.ym-config-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 8px 0 18px; }
@media (max-width: 820px) { .ym-config-row { grid-template-columns: 1fr; } }
.ym-config-card {
    background: var(--surface); border: 1px solid var(--surface-border);
    border-radius: 14px; box-shadow: var(--card-shadow); padding: 18px 20px;
}
.ym-config-title { font-size: 1.15rem; margin: 0 0 10px; color: var(--text); }
.ym-config-check { display: block; margin: 0 0 12px; color: var(--text); }
.ym-config-help { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 10px 0 0; }
.ym-config-help code, .yakmu-page-intro code {
    background: var(--surface-2); border: 1px solid var(--surface-border);
    border-radius: 5px; padding: 1px 5px; font-size: 0.85em; color: var(--accent-ink);
}
.ym-config-actions { display: flex; align-items: center; gap: 14px; }
.ym-config-save-status { font-size: 0.95rem; }
.ym-config-ok { color: var(--positive, #16a34a); font-weight: 600; }
.ym-config-err { color: var(--negative, #dc2626); font-weight: 600; }

/* ===================================================================
   Connect (Stripe) page — an explainer/value-prop card around the
   "Connect with Stripe" button (page-template-stripe-connect). Replaces
   the bare "Click to Connect" heading. Themes light/dark via tokens.
   =================================================================== */
.ym-connect-wrap { display: flex; justify-content: center; padding: clamp(16px, 4vw, 40px) 0; }
.ym-connect-card {
    width: 100%;
    max-width: 620px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: clamp(24px, 4vw, 40px);
}
.ym-connect-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--accent-gradient);
    color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
}
.ym-connect-title { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; margin: 0 0 10px; color: var(--text); }
.ym-connect-lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.55; margin: 0 auto 18px; max-width: 52ch; }
.ym-connect-benefits {
    list-style: none; margin: 0 auto 18px; padding: 0;
    max-width: 44ch; text-align: left; display: grid; gap: 9px;
}
.ym-connect-benefits li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); line-height: 1.45; }
.ym-connect-check {
    flex: 0 0 auto; margin-top: 1px;
    color: var(--accent-ink); font-weight: 700;
}
.ym-connect-steps {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin: 0 0 22px; color: var(--text-muted); font-weight: 600; font-size: 0.95rem;
}
.ym-connect-step { display: inline-flex; align-items: center; gap: 8px; }
.ym-connect-stepnum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-tint); color: var(--accent-ink); font-size: 0.85rem;
}
.ym-connect-arrow { color: var(--accent-soft); }
.ym-connect-cta { display: flex; justify-content: center; margin: 4px 0 18px; }
.ym-connect-cta .pointer { cursor: pointer; }
.ym-connect-note { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0 auto; max-width: 50ch; }

/* Fixed MRR-band pricing. */
.ym-pricing { text-align: center; }
.ym-pricing-table { display: flex; justify-content: center; margin: 8px 0 4px; }
.ym-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:18px; width:min(1040px,94vw); align-items:stretch; }
.ym-plan-card { position:relative; height:100%; text-align:left; padding:26px; border:1px solid var(--surface-border); border-radius:16px; background:var(--surface); box-shadow:var(--card-shadow); }
.ym-plan-card.featured { border:2px solid var(--accent); transform:translateY(-5px); }
.ym-plan-popular { position:absolute; top:-13px; right:18px; padding:5px 10px; border-radius:999px; background:var(--accent); color:var(--accent-contrast); font-size:.75rem; font-weight:700; }
.ym-plan-price { font-size:2rem; font-weight:750; color:var(--text); }
.ym-plan-price span,.ym-plan-usd,.ym-plan-band { color:var(--text-muted); font-size:.88rem; }
.ym-plan-band { margin:14px 0; font-weight:600; }
.ym-plan-card ul { padding:0; margin:16px 0 0; list-style:none; line-height:1.9; color:var(--text-muted); }
.ym-plan-checkouts { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:20px 0; }
.ym-plan-checkout { min-width:220px; padding:16px; border:1px solid var(--surface-border); border-radius:12px; background:var(--surface); }
.ym-plan-checkout span { display:block; color:var(--text-muted); font-size:.85rem; margin:5px 0 12px; }
@media (max-width:800px) { .ym-plan-grid { grid-template-columns:1fr; } .ym-plan-card.featured { transform:none; } }
table.pricing-table {
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    min-width: min(560px, 92vw);
}
table.pricing-table th,
table.pricing-table td {
    padding: 12px 24px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid var(--surface-border-soft);
    color: var(--text);
}
table.pricing-table thead th,
table.pricing-table tr:first-child th {
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    font-weight: 700;
    border-bottom: 0;
}
table.pricing-table tbody tr:nth-child(even) td { background: var(--surface-2); }
table.pricing-table tbody tr:last-child td { border-bottom: 0; }
.ym-pricing-note {
    max-width: 70ch;
    margin: 18px auto 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.ym-pricing-note span { color: var(--text-muted) !important; font-size: 0.9rem !important; }

/* ===================================================================
   FootedPage footer (marketing + in-app billing / account pages).
   The shared style.css renders `.footer` as a short grey position:absolute
   bar that rode up over content and looked dated. Lay the page out as a flex
   column and put the footer back in normal flow — transparent, muted, stuck
   to the bottom — matching the YakTimer / YakDocs treatment. yakmu.css loads
   last, so this wins over style.css.
   =================================================================== */
.footed-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);   /* 60px = navbar height */
    padding-bottom: 0;
}
.footed-page > .footer {
    order: 100;
    position: static;
    height: auto;
    background: transparent;
    border-top: 1px solid var(--surface-border);
    margin: auto 0 0;
    padding: 18px 30px;
    width: auto;
    align-self: stretch;
    color: var(--text-muted);
}
.footed-page > :last-child:not(.footer) { margin-bottom: 72px; }
@media (max-width: 600px) {
    .footed-page > :last-child:not(.footer) { margin-bottom: 48px; }
}

/* ===================================================================
   Logged-in app pages. Each page opts in with `yakmu-app-page` on its root
   (added in JakApplication.authEvent). Styles JWt's own widgets (WTabWidget,
   WTableView, WTreeTable, buttons) to the token palette so they theme
   light/dark for free. Scoped so the marketing home (yw-* classes) is
   untouched.
   =================================================================== */
.ym-connection-list { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; text-align: left; }
.ym-connection-card { padding: 18px; border: 1px solid var(--surface-border); border-radius: 14px; background: var(--surface); box-shadow: var(--card-shadow); }
.ym-connection-name { display: block; color: var(--text); font-weight: 700; font-size: 1.05rem; }
.ym-connection-meta, .ym-connection-status { display: block; color: var(--text-muted); margin-top: 4px; }
.ym-connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ym-connect-label { color: var(--text-muted); margin-bottom: 8px; }
/* Centered content column with side gutters — pages no longer span edge-to-edge (the navbar
   and footer stay full-bleed since they're siblings outside this container). --maxw is the
   design-system width (1120px); the app is slightly wider to give dashboards/tables room. */
.yakmu-app-page {
    color: var(--text);
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px clamp(16px, 4vw, 32px) 0;
}

.yakmu-page-title {
    font-size: 1.6rem;
    line-height: 1.25;
    color: var(--text);
    margin: 4px 0 6px;
}
.yakmu-page-intro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 70ch;
    margin: 0 0 20px;
}

/* ---- WTabWidget tabs ---- */
.yakmu-app-page .Wt-tabs { border: 0; margin-bottom: 16px; }
.yakmu-app-page .Wt-tabs ul {
    border-bottom: 2px solid var(--surface-border);
    padding-left: 0;
    margin: 0 0 16px;
}
.yakmu-app-page .Wt-tabs li > a,
.yakmu-app-page .Wt-tabs .item > a {
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
    padding: 8px 16px;
    font-weight: 600;
}
.yakmu-app-page .Wt-tabs li > a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.yakmu-app-page .Wt-tabs li.itemselected > a,
.yakmu-app-page .Wt-tabs .item.selected > a {
    color: var(--accent-ink);
    background: var(--surface);
    border-color: var(--surface-border);
    border-bottom: 3px solid var(--accent);
}

/* ---- WTableView / WTreeTable data grids ---- */
.yakmu-app-page .Wt-tableview,
.yakmu-app-page .Wt-treetable {
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}
.yakmu-app-page .Wt-tableview .Wt-headerdiv,
.yakmu-app-page .Wt-tableview .Wt-header,
.yakmu-app-page .Wt-treetable .Wt-header,
.yakmu-app-page .Wt-treetable .header {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid var(--surface-border);
}
.yakmu-app-page .Wt-tableview .Wt-tv-row:nth-child(even) { background: var(--surface-2); }
.yakmu-app-page .Wt-tableview .Wt-tv-row:hover,
.yakmu-app-page .Wt-treetable .Wt-tv-node:hover { background: var(--accent-tint); }

/* ---- Plain HTML tables (query results) ---- */
.yakmu-app-page table.table thead th,
.yakmu-app-page .table thead th {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 2px solid var(--surface-border);
}
.yakmu-app-page .table tbody tr:nth-child(even) td { background: var(--surface-2); }
.yakmu-app-page .table td,
.yakmu-app-page .table th { border-color: var(--surface-border-soft); }

/* On phones a wide plain table becomes its own horizontal scroll container
   instead of forcing page-wide overflow. (.Wt-tableview manages its own scroll.) */
@media (max-width: 768px) {
    .yakmu-app-page .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ---- Buttons: accent-gradient fill, contrast ink (matches yw-btn) ----
   Scoped away from the yw-* marketing buttons and the code-editor toolbar. */
.yakmu-app-page button.btn-primary,
.yakmu-app-page .btn-primary,
.yakmu-app-page button.Wt-btn {
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.yakmu-app-page button.btn-primary:hover,
.yakmu-app-page .btn-primary:hover,
.yakmu-app-page button.Wt-btn:hover { background: var(--accent-gradient-hover); }
.yakmu-app-page button.btn-primary:focus-visible,
.yakmu-app-page .btn-primary:focus-visible,
.yakmu-app-page button.Wt-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Generic content tiles — lift onto token surfaces with a subtle shadow.
   (Dashboard cards are themed by the gridstack .gs-card rules below.) */
.yakmu-app-page .basic-container {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    color: var(--text);
}

/* ===================================================================
   Dashboard — gridstack.js grid + cards (drag / resize / 2-D). gridstack.min.css
   handles positioning; these rules theme the card chrome via design tokens.
   =================================================================== */
.ym-dashboard-head { margin-bottom: 10px; }
.ym-dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }

/* Quieter secondary/outline button (token-themed). */
.ym-btn-secondary {
    background: transparent;
    color: var(--accent-ink);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: 7px 16px;
    font-weight: 600;
    cursor: pointer;
}
.ym-btn-secondary:hover { background: var(--accent-tint); border-color: var(--accent); }

/* Email-digest cadence control (dashboard header). */
.ym-digest-settings { display: inline-flex; align-items: center; gap: 8px; }
.ym-digest-settings .ym-digest-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.ym-digest-settings select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
}

.dashboard-widget { display: block; width: 100%; }
.grid-stack { min-height: 160px; }

/* Each card = .grid-stack-item-content.gs-card (gridstack pins it inset:0). */
.gs-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.gs-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--surface-border-soft);
}
.gs-drag-handle {
    cursor: move;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}
.gs-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-item-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.gs-item-action { cursor: pointer; color: var(--text-muted); }
.gs-item-action:hover { color: var(--accent-ink); }
.gs-remove-btn:hover { color: var(--danger); }
.gs-item-content {
    flex: 1 1 auto;
    min-height: 0;          /* let the flex child actually shrink so overflow works */
    overflow: hidden;       /* charts are sized to fit; nothing double-scrolls */
    padding: 10px 12px;
}
/* Charts occasionally end up a hair taller than the body — clip, don't spawn a 2nd bar. */
.gs-card.ym-type-chart .gs-item-content { overflow: hidden; }
/* Tables: the WTableView fills the body and is the ONE scroller (no outer bar, no padding). */
.gs-card.ym-type-table .gs-item-content { overflow: hidden; padding: 0; }
.gs-card.ym-type-table .Wt-tableview { width: 100% !important; height: 100% !important; border: 0; }
.gs-item-updated {
    font-size: 0.72rem;
    color: var(--text-faint);
    padding: 2px 12px 7px;
}

/* ── Non-chart tiles: stat / progress / list ───────────────────────────────── */
.ym-tile-empty { color: var(--text-muted); font-size: 0.9rem; padding: 8px 2px; }

.ym-stat { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ym-stat-value {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.05; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ym-stat-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ym-stat-label { font-size: 0.8rem; color: var(--text-muted); }
.ym-stat-delta { font-size: 0.8rem; font-weight: 700; }
.ym-stat-delta.ym-up { color: #16a34a; }
.ym-stat-delta.ym-down { color: var(--danger, #dc2626); }

.ym-progress { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; }
.ym-progress-nums { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ym-progress-target { color: var(--text-muted); font-weight: 400; }
.ym-progress-bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--surface-border); overflow: hidden; }
.ym-progress-fill { height: 100%; background: var(--accent-gradient); border-radius: 999px; }
.ym-progress-pct { font-size: 0.8rem; color: var(--accent-ink); font-weight: 700; }

.ym-list { display: flex; flex-direction: column; }
.ym-list-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--surface-border-soft);
}
.ym-list-row:last-child { border-bottom: 0; }
.ym-list-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ym-list-metric { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ym-list-more { color: var(--text-muted); font-size: 0.8rem; padding-top: 6px; }

.ym-digest-slack { min-width: 220px; background: var(--surface); color: var(--text); border: 1px solid var(--surface-border); border-radius: 8px; padding: 6px 10px; }

/* Alert settings row. */
.ym-alert-settings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ym-alert-inline { color: var(--text-muted); font-size: 0.85rem; }
.ym-alert-num { width: 56px; text-align: center; background: var(--surface); color: var(--text); border: 1px solid var(--surface-border); border-radius: 8px; padding: 6px 8px; }

/* Board report section. */
.ym-report-box { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; box-shadow: var(--card-shadow); padding: 16px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ym-report-dl { display: inline-block; text-decoration: none; padding: 7px 14px; }
.ym-report-note { color: var(--text-muted); font-size: 0.85rem; }
.ym-report-note code { background: var(--accent-wash, rgba(109,40,217,0.10)); color: var(--accent-ink); padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }

/* Onboarding checklist. */
.ym-onboard { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; box-shadow: var(--card-shadow); padding: 14px 16px; margin-bottom: 16px; }
.ym-onboard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ym-onboard-title { font-weight: 700; color: var(--text); }
.ym-onboard-count { color: var(--accent-ink); font-weight: 600; font-size: 0.85rem; background: var(--accent-wash, rgba(109,40,217,0.12)); border-radius: 999px; padding: 2px 10px; }
.ym-onboard-dismiss { margin-left: auto; background: transparent; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; }
.ym-onboard-steps { display: flex; flex-direction: column; gap: 6px; }
.ym-onboard-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ym-onboard-tick { color: var(--text-muted); font-weight: 700; }
.ym-onboard-step.done .ym-onboard-tick { color: var(--success, #16a34a); }
.ym-onboard-step.done .ym-onboard-label { color: var(--text-muted); text-decoration: line-through; }
.ym-onboard-cta { margin-left: auto; background: var(--accent, #6d28d9); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; }

/* MRR forecast. */
.ym-forecast-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; box-shadow: var(--card-shadow); padding: 16px; margin-bottom: 8px; }
.ym-forecast-now { color: var(--text); margin-bottom: 12px; }
.ym-forecast-table { width: 100%; max-width: 520px; border-collapse: collapse; }
.ym-forecast-table th { color: var(--text-muted); font-weight: 600; text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--surface-border); }
.ym-forecast-table td { color: var(--text); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; padding: 8px 12px; }
.ym-forecast-note { color: var(--text-faint); font-size: 0.78rem; margin-top: 10px; }

/* Cohort retention heatmap. */
.ym-heatmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ym-heatmap { border-collapse: collapse; font-size: 0.8rem; }
.ym-heatmap th, .ym-heatmap td { padding: 5px 8px; text-align: center; white-space: nowrap; }
.ym-heatmap thead th { color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--surface-border); }
.ym-heatmap .ym-heatmap-cohort { text-align: left; color: var(--text-muted); font-weight: 600; position: sticky; left: 0; background: var(--surface); }
.ym-heatmap-cell { border-radius: 4px; font-variant-numeric: tabular-nums; }
.ym-heatmap-empty { color: var(--text-faint); }

/* Empty state (shown when the dashboard has no cards). */
.customise-your-dashboard-widget {
    max-width: 520px;
    margin: 40px auto;
    padding: 40px 28px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--surface-border);
    border-radius: 16px;
    color: var(--text);
}
.customise-your-dashboard-widget h3 { margin: 8px 0 6px; color: var(--text); }
.customise-your-dashboard-widget p { color: var(--text-muted); margin: 0 0 18px; }
.ym-empty-icon {
    display: inline-flex;
    width: 56px; height: 56px;
    align-items: center; justify-content: center;
    border-radius: 14px;
    font-size: 1.5rem;
    color: var(--accent-ink);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
}

/* ===================================================================
   Recovery page — stat strip + at-risk table + tiles.
   =================================================================== */
.ym-recovery-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}
.ym-stat-card, .ym-recovery-tile {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 16px;
}
.ym-recovery-tile { margin-bottom: 8px; }

/* Goal card + inline set form. */
.ym-goal-card {
    background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px;
    box-shadow: var(--card-shadow); padding: 16px; margin-bottom: 12px; max-width: 520px;
}
.ym-goal-head { font-weight: 700; color: var(--text); margin-bottom: 10px; }
.ym-goal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ym-goal-form select, .ym-goal-form input {
    background: var(--surface); color: var(--text); border: 1px solid var(--surface-border);
    border-radius: 8px; padding: 7px 10px;
}
.ym-goal-card .ym-btn-secondary { margin-top: 8px; }

/* Segments page: dimension selector + form inputs. */
.ym-seg-combo { margin-bottom: 12px; }
.ym-seg-combo, .ym-goal-form select, .ym-goal-form input {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--surface-border); border-radius: 8px; padding: 7px 10px;
}
.ym-recovery-table { width: 100%; border-collapse: collapse; }
.ym-recovery-table th, .ym-recovery-table td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--surface-border-soft); color: var(--text);
}
.ym-recovery-table th { background: var(--surface-2); font-weight: 600; }
.ym-recovery-table td:nth-child(2) { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================================================================
   Live Feed (LiveFeedWidget) — token-themed stream of Stripe events.
   =================================================================== */
.live-feed-page-body { max-width: 1000px; margin: 0 auto; }
.lf-header { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.lf-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--text);
}
.lf-live-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: lf-pulse 1.8s infinite;
}
@keyframes lf-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
    70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.lf-count { color: var(--text-muted); font-size: 0.9rem; }

.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lf-chip {
    background: var(--surface); color: var(--text-muted);
    border: 1px solid var(--surface-border); border-radius: 999px;
    padding: 5px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.lf-chip:hover { background: var(--accent-tint); color: var(--accent-ink); }
.lf-chip.active { background: var(--accent-gradient); color: var(--accent-contrast); border-color: transparent; }

.lf-list {
    background: var(--surface); border: 1px solid var(--surface-border);
    border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow);
}
.live-feed-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 16px; border-bottom: 1px solid var(--surface-border-soft);
    color: var(--text); font-size: 0.95rem; line-height: 1.45;
}
.live-feed-row:last-child { border-bottom: 0; }
.live-feed-row:hover { background: var(--accent-tint); }
.lf-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); align-self: center; }
.live-feed-row.lf-pos .lf-dot { background: #22c55e; }
.live-feed-row.lf-neg .lf-dot { background: var(--danger, #ef4444); }
.lf-time { flex: 0 0 auto; color: var(--text-faint); font-size: 0.8rem; min-width: 66px; }
.lf-body { flex: 1 1 auto; }
.lf-body i { color: var(--text-muted); margin-right: 4px; }
.lf-type { font-weight: 600; color: var(--text); }
.lf-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: var(--accent-ink); word-break: break-all; }
.lf-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.live-feed-row.lf-pos .lf-amount { color: #16a34a; }
.live-feed-row.lf-neg .lf-amount { color: var(--danger, #dc2626); }
.lf-empty {
    text-align: center; color: var(--text-muted);
    padding: 40px 20px; border: 1px dashed var(--surface-border); border-radius: 12px; margin-top: 4px;
}

/* ===================================================================
   Insights gallery (InsightsPage) — one-click KPI cards.
   =================================================================== */
.ym-insight-cat {
    font-size: 1.15rem;
    color: var(--text);
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--surface-border);
}
.ym-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.ym-insight-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 16px;
}
.ym-insight-card h4 { margin: 0; color: var(--text); font-size: 1rem; }
.ym-insight-card p { margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; flex: 1 1 auto; }
.ym-insight-icon {
    display: inline-flex;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    color: var(--accent-ink);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
}
.ym-insight-add {
    align-self: flex-start;
    background: var(--accent-gradient) !important;
    color: var(--accent-contrast) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    margin-top: 4px;
}
.ym-insight-add:hover { background: var(--accent-gradient-hover) !important; }

/* ===================================================================
   Marketing "start free trial" button — pull the legacy BS button into the
   yw-btn look so the home hero CTA reads as the shared primary button even
   though it comes from SelectPlanBtnWidget's plain WPushButton.
   =================================================================== */
.marketing-free-trial-btn {
    background: var(--accent-gradient) !important;
    color: var(--accent-contrast) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 10px 24px var(--accent-tint);
    cursor: pointer;
}
.marketing-free-trial-btn:hover { background: var(--accent-gradient-hover) !important; }
.marketing-free-trial-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ===================================================================
   YakBrain — SQL-assist icon on the Query page + the "Ask YakBrain" tab.
   =================================================================== */
/* Discrete brain icon in the Query-page command row. */
.ym-yakbrain-icon {
    display: inline-flex;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border-radius: 9px;
    cursor: pointer;
    color: var(--accent-ink);
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    font-size: 1.05rem;
    transition: background .15s ease, color .15s ease;
}
.ym-yakbrain-icon:hover { background: var(--accent-gradient); color: var(--accent-contrast); }
.ym-yakbrain-icon:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Ask YakBrain tab surfaces. */
.ym-yakbrain-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
}
.ym-yakbrain-actions { margin: 12px 0; }
.ym-yakbrain-status { display: block; min-height: 1.2em; color: var(--text-muted); font-size: 0.9rem; margin: 6px 0; }
.ym-yakbrain-question { color: var(--text-muted); font-size: 0.9rem; margin: 10px 0 4px; }
.ym-yakbrain-analysis {
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    border-radius: 10px;
    color: var(--text);
    padding: 14px 16px;
    margin: 10px 0;
    line-height: 1.55;
}
.ym-yakbrain-sql {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 6px 0 0;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text);
    white-space: pre;
}
.ym-yakbrain-disclaimer { color: var(--text-muted); font-size: 0.8rem; margin: 12px 0 0; }