/* =============================================================
   Fiscal Wizard — Bootstrap 5.3 brand bridge
   Maps Bootstrap CSS variables onto the Fiscal Wizard palette so
   every Bootstrap utility (.btn, .badge, .text-success, etc.)
   inherits the brand without overriding individual components.
   Loaded AFTER bootstrap.min.css and BEFORE app.css so app.css
   keeps the upper hand for legacy custom components, while
   Bootstrap utilities pick up the brand tokens defined here.
   ============================================================= */

:root,
[data-bs-theme="light"] {
    --bs-primary:           #4f46e5;
    --bs-primary-rgb:       79, 70, 229;
    --bs-primary-text-emphasis: #312e81;
    --bs-primary-bg-subtle: #ece9ff;
    --bs-primary-border-subtle: #c7c2f5;

    --bs-secondary:         #6c6c87;
    --bs-secondary-rgb:     108, 108, 135;

    --bs-success:           #0d9266;
    --bs-success-rgb:       13, 146, 102;
    --bs-success-text-emphasis: #065f3f;
    --bs-success-bg-subtle: #d6f3e6;
    --bs-success-border-subtle: #9adfc1;

    --bs-danger:            #be1547;
    --bs-danger-rgb:        190, 21, 71;
    --bs-danger-text-emphasis: #7a0d2d;
    --bs-danger-bg-subtle:  #ffd7e1;
    --bs-danger-border-subtle: #f5a3b6;

    --bs-warning:           #c2530b;
    --bs-warning-rgb:       194, 83, 11;
    --bs-warning-text-emphasis: #7a3306;
    --bs-warning-bg-subtle: #ffe5cf;
    --bs-warning-border-subtle: #f5b88e;

    --bs-info:              #2563eb;
    --bs-info-rgb:          37, 99, 235;
    --bs-info-text-emphasis: #15397b;
    --bs-info-bg-subtle:    #dde7ff;
    --bs-info-border-subtle: #aabfff;

    --bs-body-bg:           #f7f6fb;
    --bs-body-bg-rgb:       247, 246, 251;
    --bs-body-color:        #1a1730;
    --bs-body-color-rgb:    26, 23, 48;
    --bs-emphasis-color:    #0f0c20;
    --bs-secondary-color:   #5e5b78;
    --bs-tertiary-color:    #8e8ba9;
    --bs-tertiary-bg:       #f4f3fa;
    --bs-border-color:      #d8d4ea;
    --bs-border-color-translucent: rgba(20, 17, 60, 0.12);

    --bs-link-color:        #4f46e5;
    --bs-link-color-rgb:    79, 70, 229;
    --bs-link-hover-color:  #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-body-font-family:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size:    1rem;
    --bs-body-font-weight:  400;
    --bs-body-line-height:  1.55;

    --bs-heading-color:     #0f0c20;
    --bs-code-color:        #4c1d95;
    --bs-highlight-bg:      #f3dd91;
}

/* Display headlines use the brand serif. */
h1.display-1, h1.display-2, h1.display-3, h1.display-4, h1.display-5, h1.display-6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.headline-serif {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Tone semantic helpers — let pages tag good/bad/warn/ok regardless of element. */
.tone-good  { color: var(--bs-success) !important; }
.tone-bad   { color: var(--bs-danger)  !important; }
.tone-warn  { color: var(--bs-warning) !important; }
.tone-ok    { color: var(--bs-info)    !important; }

.bg-tone-good { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.bg-tone-bad  { background-color: var(--bs-danger-bg-subtle)  !important; color: var(--bs-danger-text-emphasis)  !important; }
.bg-tone-warn { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.bg-tone-ok   { background-color: var(--bs-info-bg-subtle)    !important; color: var(--bs-info-text-emphasis)    !important; }

/* Wizard mark in the navbar brand. */
.brand-mark {
    color: #c8a13a;
    font-size: 1.1em;
    margin-right: 0.35rem;
    line-height: 1;
}

/* Navbar tweak — active nav links get the brand indigo + weight. */
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--bs-primary) !important;
}
.navbar .nav-link.active {
    font-weight: 600;
}

/* Body needs a touch of vertical breathing so the navbar shadow shows. */
body {
    min-height: 100vh;
}
main {
    padding-bottom: 3rem;
}

/* ------------------------------------------------------------------
   Profile chip row (portal.php industry scan).
   The chips have JS hooks on the .chip / .is-active classes; we
   restyle them in-place so they look like a Bootstrap pill toggle
   without changing the markup the JS depends on.
   ------------------------------------------------------------------ */
.profile-chip-row .chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--bs-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.profile-chip-row .chip:hover,
.profile-chip-row .chip:focus-visible {
    background: var(--bs-primary-bg-subtle);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}
.profile-chip-row .chip.is-active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* ------------------------------------------------------------------
   Hero containers.
   The .page-hero rule in app.css owns the visual styling (rounded
   gradient card, shadow, padding); we just give it a top-level margin
   so it doesn't kiss the navbar and keep the Bootstrap container-xl
   inside the hero stacking-context aware.
   ------------------------------------------------------------------ */
.page-hero {
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
}
.page-hero .container-xl {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.page-hero .display-5,
.page-hero h1 {
    color: var(--bs-emphasis-color);
}

/* Range-slider polish for Bootstrap form-range - thumb in brand color. */
.form-range::-webkit-slider-thumb { background: var(--bs-primary); }
.form-range::-moz-range-thumb     { background: var(--bs-primary); }
.form-range::-ms-thumb            { background: var(--bs-primary); }

/* Cards (Bootstrap) - softer hover lift on the run-grid + weights cards. */
.card.shadow-sm {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.run-card.card.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(20, 17, 60, 0.10), 0 4px 8px rgba(20, 17, 60, 0.05) !important;
}

/* Buttons - the brand .btn-primary gets a soft gradient feel. */
.btn-primary {
    background: linear-gradient(180deg, var(--bs-primary) 0%, #4338ca 100%);
    border-color: #4338ca;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg, #4338ca 0%, #3730a3 100%);
    border-color: #3730a3;
}

.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.btn-outline-primary:hover {
    background: var(--bs-primary);
    color: #fff;
}

/* Alerts - tighter rounded, subtle shadow. */
.alert {
    border-radius: 12px;
    border-width: 1px;
}

/* Focus ring uses the brand soft. */
.form-control:focus, .form-select:focus, .form-range:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

/* Tables - tighten the .table-light header so it has a little more
   contrast against the page background. */
.table-light, .table-light > th, .table-light > td {
    --bs-table-bg: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}
.table > :not(caption) > * > * {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Bigger, bolder gauge centre numerals - the inline 0-100 score is the
   page's headline figure; default 32px reads too quiet inside the 200px
   hero gauge. */
.gauge-text {
    font-size: 38px !important;
    font-weight: 800 !important;
}
.brief-hero .gauge-text {
    font-size: 52px !important;
}

/* ------------------------------------------------------------------
   Brief page — Bootstrap-native cards with tone-coloured top bands.
   The .tone-strip is a 4px coloured bar at the top of any card; the
   .tone-* utility (defined above) colours score-text and subscore
   numbers; the .subscore-bar / .subscore-bar-fill render an inline
   progress bar inside each subscore button.
   ------------------------------------------------------------------ */

/* Tone strip - top accent bar coloured by score band. */
.tone-strip {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-secondary) 100%);
    flex-shrink: 0;
}
.tone-strip--good     { background: linear-gradient(90deg, var(--bs-success) 0%, #065f3f 100%); }
.tone-strip--ok       { background: linear-gradient(90deg, var(--bs-info)    0%, #7c3aed 100%); }
.tone-strip--warn     { background: linear-gradient(90deg, var(--bs-warning) 0%, #d35315 100%); }
.tone-strip--bad      { background: linear-gradient(90deg, var(--bs-danger)  0%, #221a4f 100%); }
.tone-strip--neutral  { background: linear-gradient(90deg, #6c6c87 0%, #8e8ba9 100%); opacity: 0.7; }

/* Brief hero - bigger gauge, premium feel via radial accents. */
.brief-hero {
    background:
        radial-gradient(at 0% 0%, color-mix(in srgb, var(--bs-primary) 14%, transparent) 0%, transparent 55%),
        radial-gradient(at 100% 100%, color-mix(in srgb, #c8a13a 22%, transparent) 0%, transparent 55%),
        var(--bs-body-bg);
}

/* Hero meta badges - lighter weight, more breathing room. */
.brief-hero .badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.7rem;
}

/* Report cards - tone-coloured eyebrow per kind (fundamentals = indigo,
   technicals = green) for an instant visual cue. !important so we beat
   the legacy app.css rule that targets .report--fundamentals descendants
   (different parent class - doesn't match anymore but kept for safety). */
.report-eyebrow--fundamentals { color: #312e81 !important; font-weight: 800; }
.report-eyebrow--technicals   { color: #065f3f !important; font-weight: 800; }

/* Brief detail-block category headings - in the master-detail right
   pane, the eyebrow + h2 title pair was reading too soft. Force the h2
   to body-emphasis dark and bump the eyebrow to a stronger weight. */
.detail-block h2 {
    color: var(--bs-emphasis-color) !important;
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
}
.detail-block .text-body-secondary[class*="text-uppercase"],
.detail-block header p.text-uppercase {
    color: var(--bs-secondary-color) !important;
    font-weight: 800 !important;
}

/* Report-card eyebrow gets bigger now that the rest of the card is just
   gauge + score + tone. */
.report-eyebrow {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    margin: 0;
}

/* Category nav - master rail for the detail panel. Two groups
   (Fundamentals / Technicals) sit side-by-side on lg+, stacked
   below. Each pill carries the category score and a tone tint
   so the user reads the whole breakdown at a glance. */
.category-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
@media (min-width: 992px) {
    .category-nav { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .category-nav-group + .category-nav-group {
        border-left: 1px solid var(--bs-border-color);
        padding-left: 2rem;
    }
}
.category-nav-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
}
.category-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.category-pill:hover { transform: translateY(-1px); }
.category-pill-score { font-weight: 700; opacity: 0.85; }
.category-pill--good    { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: rgba(13, 146, 102, 0.3); }
.category-pill--ok      { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis);    border-color: rgba(37, 99, 235, 0.3); }
.category-pill--warn    { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: rgba(194, 83, 11, 0.3); }
.category-pill--bad     { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  border-color: rgba(190, 21, 71, 0.3); }
.category-pill--neutral { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.category-pill.is-active {
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle), 0 1px 2px rgba(15, 23, 42, 0.06);
    border-color: var(--bs-primary);
}

/* Generic subscore-btn fallback (now only used by .category-pill). */
.subscore-btn {
    cursor: pointer;
    color: var(--bs-body-color);
}

/* Info "i" button on metric cards - toggles a Bootstrap collapse panel
   that holds the education content (measure / formula / trigger rule /
   parameters). The live stats stay visible above; education is on
   demand. */
.info-icon-btn {
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-style: italic;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
    padding: 0;
}
.info-icon-btn:hover {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    transform: scale(1.05);
}
.info-icon-btn[aria-expanded="true"] {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Metric cards inside the detail panel - distinct background + stronger
   shadow so they read as separate "wrapping" cards rather than blending
   into the parent .detail-panel card (which uses the same body-bg). */
.metric-card.card {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.metric-card.card:hover {
    box-shadow: 0 8px 20px rgba(20, 17, 60, 0.08), 0 2px 4px rgba(20, 17, 60, 0.05) !important;
}

/* Detail-panel card uses the page bg so the inner metric cards pop. */
.detail-panel.card {
    background-color: var(--bs-tertiary-bg);
}

/* Metric interpretation block - the "For AAPL" verdict, lifted to the
   top of each metric card and tinted by the metric's tone so the user
   sees the meaning before the raw numbers. */
.metric-interp {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bs-secondary);
    background: var(--bs-tertiary-bg);
}
.metric-interp p { line-height: 1.5; }
.metric-interp--good {
    background: var(--bs-success-bg-subtle);
    border-left-color: var(--bs-success);
    color: var(--bs-success-text-emphasis);
}
.metric-interp--ok {
    background: var(--bs-info-bg-subtle);
    border-left-color: var(--bs-info);
    color: var(--bs-info-text-emphasis);
}
.metric-interp--warn {
    background: var(--bs-warning-bg-subtle);
    border-left-color: var(--bs-warning);
    color: var(--bs-warning-text-emphasis);
}
.metric-interp--bad {
    background: var(--bs-danger-bg-subtle);
    border-left-color: var(--bs-danger);
    color: var(--bs-danger-text-emphasis);
}
.metric-interp--neutral {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--bs-secondary);
    color: var(--bs-secondary-color);
}
.score-tone--good { background: var(--bs-success); }
.score-tone--ok   { background: var(--bs-info); }
.score-tone--warn { background: var(--bs-warning); }
.score-tone--bad  { background: var(--bs-danger); }
.score-tone--neutral { background: #6c6c87; }

/* Detail panel - prominent card under reports; the active block
   slides in via .show animation on the JS toggle. */
.detail-panel {
    margin-bottom: 2rem;
}
.detail-block {
    margin: 0;
}
.detail-empty {
    text-align: center;
    color: var(--bs-secondary-color);
}
.detail-empty h3 {
    color: var(--bs-emphasis-color);
}

/* Trigger history items inside metric cards. */
.trigger-item {
    padding: 0.25rem 0;
}
.trigger-item-arrow {
    font-weight: 700;
    width: 1em;
    text-align: center;
}
.trigger-item-arrow--bull { color: var(--bs-success); }
.trigger-item-arrow--bear { color: var(--bs-danger); }
.trigger-item-arrow--idle { color: var(--bs-tertiary-color); }