@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    --sunset-1: #f5b700;
    --sunset-2: #f55d3e;
    --ink: #161616;
    --mist: #fdf8ef;
    --glass: rgba(255, 255, 255, 0.72);
    --line: rgba(22, 22, 22, 0.12);
}

body {
    font-family: "Space Grotesk", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 20% 10%, rgba(245, 183, 0, 0.22), transparent 30%),
        radial-gradient(circle at 85% 0%, rgba(245, 93, 62, 0.15), transparent 34%),
        linear-gradient(180deg, #fffdf8 0%, #f8f3ea 100%);
    min-height: 100vh;
}

[v-cloak] {
    display: none;
}

.hero-header {
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(245, 183, 0, 0.2), rgba(245, 93, 62, 0.1));
    backdrop-filter: blur(6px);
}

.brand-link {
    font-family: "Spectral", serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.hero-subtitle {
    color: #3a3a3a;
}

.content-shell {
    padding-bottom: 3rem;
}

.glass-panel {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--glass);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.display-title {
    font-family: "Spectral", serif;
    font-weight: 700;
}

.btn-sunrise {
    background: linear-gradient(90deg, var(--sunset-1), var(--sunset-2));
    color: white;
    border: none;
    font-weight: 700;
}

.btn-sunrise:hover {
    opacity: 0.95;
    color: white;
}

.bg-sunrise {
    background: linear-gradient(90deg, var(--sunset-1), var(--sunset-2));
}

.stock-table thead th {
    background: rgba(245, 183, 0, 0.12);
    border-bottom: 1px solid var(--line);
}

.scroll-table {
    max-height: 70vh;
    overflow-y: auto;
}

.scroll-table .stock-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbead0;
}

.stock-table td,
.stock-table th {
    vertical-align: middle;
}

/* Data Grid (Share detail page's Indicators/Filters/Plugins debug table): every cell gets a
   visible box so a dense sheet of numbers and flag columns stays readable at a glance. */
.data-grid-table {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
}

.data-grid-table th,
.data-grid-table td {
    border: 1px solid var(--line);
    padding: 0.35rem 0.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-grid-table th:first-child,
.data-grid-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--mist);
    z-index: 1;
}

.data-grid-table thead th {
    background: #fbead0;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
}

.data-grid-table thead th:first-child {
    z-index: 3;
    text-align: left;
}

.data-grid-table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.02);
}

.trend-up {
    color: #0f8b52;
    font-weight: 700;
}

.trend-down {
    color: #c0392b;
    font-weight: 700;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.metric-card {
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.68);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.metric-label {
    font-size: 0.85rem;
    color: #5c5c5c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-value {
    font-family: "Spectral", serif;
    font-size: 1.5rem;
    font-weight: 700;
}

#priceChart {
    width: 100%;
    height: 360px;
    min-height: 360px;
    position: relative;
}

/* Legacy Rule Tester as a popup dialog (TradingView-style: the chart owns the page, detailed
   settings open on demand and close when you're done) instead of a permanently-visible
   section or side panel. */
.rule-tester-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 22, 0.5);
    z-index: 1070;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.rule-tester-modal {
    width: min(760px, 96vw);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================================
   Trading-terminal theme, scoped to the Share detail page only (.tv-shell wraps its content).
   Every color has exactly one job: --tv-accent is the only interactive color, --tv-bull/-bear
   are reserved for price direction and never reused elsewhere - so color always means the same
   thing on this page. Dense, sharp-edged, hairline-divided panels instead of padded shadow
   cards, matching how real trading terminals (this one's explicit reference) actually look.
   ============================================================================================ */
.tv-shell {
    --tv-void: #0b0e13;
    --tv-panel: #12161d;
    --tv-raised: #1a2029;
    --tv-line: #232a35;
    --tv-text: #d7dce3;
    --tv-muted: #7c8797;
    --tv-accent: #2f7eff;
    --tv-bull: #26a69a;
    --tv-bear: #ef5350;

    background: var(--tv-void);
    color: var(--tv-text);
    font-family: "Inter", "Space Grotesk", sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

.tv-mono {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    font-variant-numeric: tabular-nums;
}

.tv-up { color: var(--tv-bull); }
.tv-down { color: var(--tv-bear); }

/* Symbol bar: replaces the old card+3-metric-cards header with one compact row. */
.tv-symbolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tv-line);
}

.tv-symbol-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tv-text);
}

.tv-price {
    font-size: 1.6rem;
    font-weight: 600;
}

.tv-change {
    font-size: 1rem;
    font-weight: 600;
}

.tv-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.tv-field-label {
    font-size: 0.68rem;
    color: var(--tv-muted);
}

.tv-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Buttons, inside the shell only - Bootstrap's own classes stay untouched everywhere else. */
.tv-shell .btn {
    border-radius: 4px;
    font-size: 0.82rem;
}

.tv-btn-accent {
    background: var(--tv-accent);
    border: 1px solid var(--tv-accent);
    color: #fff;
}

.tv-btn-accent:hover {
    background: #4c8bff;
    border-color: #4c8bff;
    color: #fff;
}

.tv-btn-outline {
    background: transparent;
    border: 1px solid var(--tv-line);
    color: var(--tv-text);
}

.tv-btn-outline:hover {
    border-color: var(--tv-accent);
    color: var(--tv-accent);
}

/* Chart panel: toolbar sits flush against the chart, shared border, no gap - reads as one
   instrument rather than a settings widget floating above a separate chart card. */
.tv-chart-panel {
    background: var(--tv-panel);
    border-bottom: 1px solid var(--tv-line);
}

.tv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--tv-line);
    background: var(--tv-raised);
}

.tv-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.tv-toolbar-label {
    font-size: 0.72rem;
    color: var(--tv-muted);
    margin-right: 0.15rem;
}

.tv-pill {
    display: inline-block;
    border: 1px solid var(--tv-line);
    background: transparent;
    color: var(--tv-muted);
    border-radius: 3px;
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}

.tv-pill.is-active {
    color: var(--tv-text);
    border-color: currentColor;
}

#priceChart {
    background: var(--tv-panel);
}

/* Dense panels/tables for Final Result, Intraday, Recent History. */
.tv-panel {
    background: var(--tv-panel);
    border: 1px solid var(--tv-line);
    border-radius: 6px;
    margin: 0 1.25rem 1.25rem;
}

.tv-panel:first-of-type {
    margin-top: 1.25rem;
}

.tv-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tv-line);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tv-text);
}

.tv-panel-meta {
    font-size: 0.75rem;
    color: var(--tv-muted);
    font-weight: 400;
}

.tv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.tv-table th,
.tv-table td {
    padding: 0.4rem 0.9rem;
    border-bottom: 1px solid var(--tv-line);
    text-align: right;
}

.tv-table th:first-child,
.tv-table td:first-child {
    text-align: left;
    color: var(--tv-muted);
}

.tv-table thead th {
    color: var(--tv-muted);
    font-weight: 500;
    font-size: 0.72rem;
}

.tv-table tbody tr:last-child td {
    border-bottom: none;
}

.tv-table tbody tr:hover td {
    background: var(--tv-raised);
}

/* Legacy Rule Tester popup, restyled to match. */
.tv-shell .rule-tester-modal-backdrop {
    background: rgba(4, 6, 9, 0.72);
}

.tv-shell .rule-tester-modal {
    background: var(--tv-panel);
    border: 1px solid var(--tv-line);
    border-radius: 6px;
    color: var(--tv-text);
}

.tv-shell .rule-tester-modal .form-label {
    color: var(--tv-muted);
    font-size: 0.82rem;
}

.tv-shell .rule-tester-modal .form-control,
.tv-shell .rule-tester-modal .form-select,
.tv-shell .rule-tester-modal textarea {
    background: var(--tv-raised);
    border: 1px solid var(--tv-line);
    color: var(--tv-text);
}

.tv-shell .rule-tester-modal .form-control:focus,
.tv-shell .rule-tester-modal .form-select:focus {
    background: var(--tv-raised);
    color: var(--tv-text);
    border-color: var(--tv-accent);
    box-shadow: 0 0 0 2px rgba(47, 126, 255, 0.25);
}

.tv-shell .rule-tester-modal .form-text {
    color: var(--tv-muted);
}

.tv-tabs {
    border-bottom: 1px solid var(--tv-line);
    padding-bottom: 0.5rem;
}

/* CodeMirror-backed expression editors (Filter rows, Data Points - see code-editor.js).
   .code-editor-sm is carried onto CodeMirror's generated wrapper div by the directive, since
   fromTextArea() doesn't copy the original textarea's classes there itself. */
.CodeMirror {
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.85rem;
    height: auto;
}

.code-editor-sm .CodeMirror-lines {
    padding: 0.25rem 0;
}

.code-editor-sm .CodeMirror-line {
    padding: 0 0.5rem;
}

/* Dark-theme match for the Share detail page's .tv-shell - the autocomplete popup itself
   stays default-styled (CodeMirror appends it to <body>, outside .tv-shell, so it can't be
   scoped the same way without a global override that would also wrongly darken the
   light-themed Plugins page). */
.tv-shell .CodeMirror {
    background: var(--tv-raised);
    color: var(--tv-text);
    border-color: var(--tv-line);
}

.tv-shell .CodeMirror-cursor {
    border-left-color: var(--tv-text);
}

.tv-shell .CodeMirror-selected {
    background: rgba(47, 126, 255, 0.25);
}

@media (max-width: 700px) {
    .tv-symbolbar,
    .tv-toolbar {
        gap: 0.75rem;
    }

    .tv-actions {
        margin-left: 0;
        width: 100%;
    }
}