/* ======================================================= */
/* ==           Global & Base Element Styles            == */
/* ======================================================= */

:root {
    /* Global Brand & App Colors */
    --OTS-Green: #0cb14b; /*OTS Green from logo*/
    --OTS-Blue: #0071bc; /*OTS Blue from logo*/
    --bordergray: #e7e7e7; /* Light border gray */
    --ots-internal: #7c3aed; /* Purple = internal-only UI (RoleRestricted, InternalPageBanner) */
}

html, body {
    height: 100%;
    /* Per OTS UI style guide (typography.md): Inter is the primary font for web apps.
       Inter is optimized for UI and numeric data density. */
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: #f8f9fa;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #006bb7;
}

/* ======================================================= */
/* ==       Bootstrap Overrides & Form Styles           == */
/* ======================================================= */

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.card {
    margin-bottom: 1.5rem;
}

.form-label {
    font-weight: 500;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-gray-400);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    color: transparent;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.readonly-output {
    background-color: #e9ecef;
}

.form-control.readonly-output:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* ======================================================= */
/* ==       Application Components & Utilities          == */
/* ======================================================= */

.content {
    padding-top: 1.1rem;
}

.otsblue {
    color: #0063a8;
}

/* --- Validation Styles --- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* --- Blazor Error UI --- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1TEAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ======================================================= */
/* ==               NEW: SPINNER STYLES                 == */
/* ======================================================= */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050; /* Ensure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

    .spinner-overlay .spinner-border {
        width: 5rem;
        height: 5rem;
    }

/* Chart loading spinner — centered in container, cleared by JS or hidden by component */
.chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Wrapper for Blazor component pages — spinner behind invisible component */
.chart-loading-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-loading-wrapper > .chart-loading {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.chart-loading-wrapper > :not(.chart-loading) {
    position: relative;
    z-index: 1;
}

/* Themed loading overlay: covers the prerendered designer (which renders in its default light
   theme until the interactive theme is applied) so dark-theme users never see a white flash. The
   background resolves from data-bs-theme, which theme.js sets before first paint. Hidden once the
   component is themed and ready. */
.chart-loading-wrapper > .chart-loading.chart-loading-overlay {
    z-index: 5;
    background-color: var(--bs-body-bg);
}

/* ======================================================= */
/* ==           CONDENSED LAYOUT STYLES                 == */
/* ======================================================= */
/*.layout-condensed .card {
    margin-bottom: 0.5rem;
}

.layout-condensed .card-body, .layout-condensed .card-header {
    padding: 0.5rem 0.75rem;
}

.layout-condensed h5, .layout-condensed h6 {
    font-size: 1rem;
    margin-bottom: 0;
}

.layout-condensed .g-3 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.5rem;
}

.layout-condensed .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

.layout-condensed .mb-2 {
    margin-bottom: 0.25rem !important;
}

.layout-condensed .mb-3 {
    margin-bottom: 0.5rem !important;
}*/

/* ======================================================= */
/* ==         HYPER-CONDENSED LAYOUT STYLES             == */
/* ======================================================= */
/*.layout-hyper-condensed .card {
    margin-bottom: 0.25rem;
}

.layout-hyper-condensed .card-body, .layout-hyper-condensed .card-header {
    padding: 0.25rem 0.5rem;
}

.layout-hyper-condensed h5, .layout-hyper-condensed h6 {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.layout-hyper-condensed .g-3 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.25rem;
}

.layout-hyper-condensed .form-label {
    font-size: 0.75rem;
    margin-bottom: 0;
}

.layout-hyper-condensed .form-check-label {
    font-size: 0.8rem;
}

.layout-hyper-condensed .mb-2, .layout-hyper-condensed .mb-3 {
    margin-bottom: 0.25rem !important;
}*/

/* ======================================================= */
/* ==            DARK MODE OVERRIDES                     == */
/* ======================================================= */

/* Login / Register CTA buttons. Login is green so it stands out against the blue UI;
   Register is solid blue. Bootstrap's themed colors sit too close to the dark navbar/cards,
   so brighten both on dark — Login: vivid green + dark text; Register: brighter blue. */
[data-bs-theme="dark"] .auth-cta-btn.btn-success {
    --bs-btn-bg: #3fb950;
    --bs-btn-border-color: #3fb950;
    --bs-btn-color: #0b0f12;
    --bs-btn-hover-bg: #56d364;
    --bs-btn-hover-border-color: #56d364;
    --bs-btn-hover-color: #0b0f12;
    --bs-btn-active-bg: #56d364;
    --bs-btn-active-border-color: #56d364;
    --bs-btn-active-color: #0b0f12;
    /* Direct color — beats the global "[data-bs-theme=dark] a" link-color rule. */
    color: #0b0f12;
}

[data-bs-theme="dark"] .auth-cta-btn.btn-primary {
    --bs-btn-bg: #3d8bfd;
    --bs-btn-border-color: #3d8bfd;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #5e9eff;
    --bs-btn-hover-border-color: #5e9eff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5e9eff;
    --bs-btn-active-border-color: #5e9eff;
    /* Direct color — beats the global "[data-bs-theme=dark] a" link-color rule. */
    color: #fff;
}

[data-bs-theme="dark"] {
    --OTS-Green: #2ed573;
    --OTS-Blue: #3ea6ff;
    --bordergray: #495057;
    --ots-internal: #a78bfa; /* Lighter purple for contrast on dark surfaces */

    /* --- Telerik / Kendo UI dark mode overrides --- */
    /* Surfaces & backgrounds */
    --kendo-color-app-surface: #212529;
    --kendo-color-on-app-surface: #dee2e6;
    --kendo-color-surface: #2b3035;
    --kendo-color-surface-alt: #212529;
    --kendo-color-subtle: #adb5bd;
    /* Borders */
    --kendo-color-border: rgba(222, 226, 230, 0.15);
    --kendo-color-border-alt: rgba(222, 226, 230, 0.25);
    /* Base (grid headers, buttons, toolbar) */
    --kendo-color-base: #343a40;
    --kendo-color-base-hover: #3d444b;
    --kendo-color-base-active: #495057;
    --kendo-color-base-subtle: #2b2f33;
    --kendo-color-base-subtle-hover: #343a40;
    --kendo-color-base-subtle-active: #3d444b;
    --kendo-color-base-emphasis: rgba(222, 226, 230, 0.25);
    --kendo-color-on-base: #dee2e6;
    --kendo-color-base-on-subtle: #dee2e6;
    --kendo-color-base-on-surface: #dee2e6;
    /* Primary */
    --kendo-color-primary: #3d8bfd;
    --kendo-color-primary-hover: #6ea8fe;
    --kendo-color-primary-active: #86b6fe;
    --kendo-color-primary-subtle: #0a2f64;
    --kendo-color-primary-subtle-hover: #0c3b7d;
    --kendo-color-primary-subtle-active: #0e4896;
    --kendo-color-on-primary: #000000;
    --kendo-color-primary-on-subtle: #9ec5fe;
    --kendo-color-primary-on-surface: #6ea8fe;
    --kendo-color-primary-emphasis: rgba(61, 139, 253, 0.5);
    /* Secondary */
    --kendo-color-secondary: #adb5bd;
    --kendo-color-secondary-hover: #bdc4cb;
    --kendo-color-secondary-active: #ced4da;
    --kendo-color-secondary-subtle: #343a40;
    --kendo-color-secondary-subtle-hover: #3d444b;
    --kendo-color-secondary-subtle-active: #495057;
    --kendo-color-on-secondary: #000000;
    --kendo-color-secondary-on-subtle: #dee2e6;
    --kendo-color-secondary-on-surface: #adb5bd;
    /* Success */
    --kendo-color-success: #479f76;
    --kendo-color-success-subtle: #0b3622;
    --kendo-color-on-success: #000000;
    --kendo-color-success-on-subtle: #a3cfbb;
    /* Error */
    --kendo-color-error: #e35d6a;
    --kendo-color-error-subtle: #58151c;
    --kendo-color-on-error: #000000;
    --kendo-color-error-on-subtle: #f1aeb5;
    /* Warning */
    --kendo-color-warning: #ffcd39;
    --kendo-color-warning-subtle: #4d3c05;
    --kendo-color-on-warning: #000000;
    --kendo-color-warning-on-subtle: #ffe69c;
    /* Info */
    --kendo-color-info: #3dd5f3;
    --kendo-color-info-subtle: #055160;
    --kendo-color-on-info: #000000;
    --kendo-color-info-on-subtle: #9eeaf9;
    /* Light / Dark / Inverse (swap them) */
    --kendo-color-light: #343a40;
    --kendo-color-light-hover: #3d444b;
    --kendo-color-light-active: #495057;
    --kendo-color-light-subtle: #1a1d21;
    --kendo-color-on-light: #dee2e6;
    --kendo-color-light-on-subtle: #adb5bd;
    --kendo-color-light-on-surface: #343a40;
    --kendo-color-dark: #f8f9fa;
    --kendo-color-dark-hover: #e9ecef;
    --kendo-color-dark-active: #dee2e6;
    --kendo-color-dark-subtle: #adb5bd;
    --kendo-color-on-dark: #212529;
    --kendo-color-dark-on-subtle: #212529;
    --kendo-color-dark-on-surface: #f8f9fa;
    --kendo-color-inverse: #f8f9fa;
    --kendo-color-inverse-hover: #e9ecef;
    --kendo-color-inverse-active: #dee2e6;
    --kendo-color-inverse-subtle: #adb5bd;
    --kendo-color-on-inverse: #212529;
    --kendo-color-inverse-on-subtle: #212529;
    --kendo-color-inverse-on-surface: #f8f9fa;
    /* Chart series — brighten for dark backgrounds */
    --kendo-color-series-a: #3d8bfd;
    --kendo-color-series-b: #8c68cd;
    --kendo-color-series-c: #79dfc1;
    --kendo-color-series-d: #479f76;
    --kendo-color-series-e: #e35d6a;
    --kendo-color-series-f: #ffcd39;
}

[data-bs-theme="dark"] body {
    background-color: #212529;
}

/* Bootstrap's .border-dark resolves to near-black via rgba(var(--bs-dark-rgb), ...) !important,
   which is invisible on the dark body bg. Scope the override to the border utility only so we
   don't accidentally alter .bg-dark or .text-dark elsewhere. !important matches Bootstrap's own
   !important on the utility — the documented case for overriding a framework utility class. */
[data-bs-theme="dark"] .border-dark {
    border-color: #dee2e6 !important;
}

/* Prism.js: tighten defaults for inline use in cards.
   Prism's "Tomorrow" theme inherently uses a dark bg regardless of OTS theme — this is
   intentional (code blocks stay dark/high-contrast like GitHub, MSDN, MS Learn). */
pre[class*="language-"] {
    font-size: 0.8125rem;           /* match --ots-text-sm, fits 3-col card layout */
    padding: 0.75rem 1rem;          /* tighter than Prism's default 1em */
    border-radius: var(--bs-border-radius);
}

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .btn-link {
    color: #6cb4ff;
}

[data-bs-theme="dark"] .otsblue {
    color: #6cb4ff;
}

[data-bs-theme="dark"] .readonly-output {
    background-color: #343a40;
}

[data-bs-theme="dark"] .form-control.readonly-output:focus {
    border-color: #495057;
}

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #212529, 0 0 0 0.25rem #258cfb;
}

[data-bs-theme="dark"] .darker-border-checkbox.form-check-input {
    border-color: #6c757d;
}

[data-bs-theme="dark"] #blazor-error-ui {
    color-scheme: dark only;
    background: #443300;
    color: #ffc107;
    box-shadow: 0 -1px 2px rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .validation-message {
    color: #ff6b6b;
}

/* Reconnect modal */
[data-bs-theme="dark"] #components-reconnect-modal {
    background-color: #2b2f33;
    color: #dee2e6;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.5);
}

/* ======================================================= */
/* ==           HelpTip (? tooltip icon)                 == */
/* ======================================================= */
/* Plans comparison table: bold green check for included, faint small dash for not.
   Global (not scoped) so the classes apply to the inline RenderFragment cells. */
.plan-yes {
    font-size: 1.4rem;
    line-height: 1;
}

.plan-no {
    font-size: 0.7rem;
    opacity: 0.5;
}

.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    min-width: 1rem;
    min-height: 1rem;
    width: 1rem;
    height: 1rem;
    font-size: 0.7rem;
    vertical-align: middle;
    cursor: help;
    color: #fff;
    background: var(--bs-primary);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.help-tip:hover {
    background: #0b5ed7;
    transform: scale(1.1);
}

[data-bs-theme="dark"] .help-tip {
    color: #fff;
    background: #4a8fe7;
}

/* Chart-page bottom drawer: a full-width bar pinned to the bottom of the chart area. The chart
   fills the remaining height so the page shows no scrollbar by default; expanding the bar reveals
   the educational article below it (introducing the scroll). The article stays in the served HTML
   either way, so it remains crawlable for search engines. */
.ots-chart-page {
    --ots-drawer-bar-h: 3.25rem;
    display: flex;
    flex-direction: column;
}

.ots-chart-drawer {
    flex: 0 0 auto;
    background-color: var(--bs-body-bg);
}

/* The bar gets a gentle, theme-aware accent (subtle primary tint + a thin top line) to draw a
   little attention without shouting. The tint is on the summary only, so an expanded article keeps
   the normal body background. */
.ots-chart-drawer > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--ots-drawer-bar-h);
    padding: 0.375rem 1rem;
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 2px 0 var(--bs-primary);
}

.ots-chart-drawer > summary:hover {
    background-color: var(--bs-primary-border-subtle);
}

.ots-chart-drawer > summary::-webkit-details-marker {
    display: none;
}

.ots-drawer-chevron {
    transition: transform 0.2s ease;
}

.ots-chart-drawer[open] .ots-drawer-chevron {
    transform: rotate(180deg);
}

.ots-drawer-body {
    padding: 0.5rem 1rem 1.5rem;
}

/* Desktop: pin the bar to the bottom by giving the chart the remaining viewport height, so the
   page fits exactly (no scrollbar) until the bar is opened. Mobile keeps the existing flowing
   layout (chart min-height + natural scroll). */
@media (min-width: 992px) {
    .ots-chart-page {
        height: 100%;
    }

    .ots-chart-page > .chart-container-full {
        flex: 0 0 auto;
        height: calc(100% - var(--ots-drawer-bar-h));
        min-height: 0;
    }
}

[data-bs-theme="dark"] .help-tip:hover {
    background: #6cb4ff;
}
/* ==========================================================================
   Non-production environment ribbon (Components/Features/EnvironmentRibbon.razor)
   Overlay only — fixed, pointer-events:none, and it never occupies layout space, so it cannot
   push the header or clip the workbench breadcrumb the way a top-nav badge did.
   ========================================================================== */
.ots-env-ribbon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--bs-danger);
    /* Above the sticky header (1020) and the fixed sidebar (1030), but below Bootstrap's
       offcanvas (1045) and modal (1055) so a dialog isn't overlapped by a stray chip. */
    z-index: 1035;
    pointer-events: none;
}

.ots-env-ribbon-label {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1036;
    pointer-events: none;
    padding: 0 0.6rem 0.1rem;
    border-bottom-left-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
    background-color: var(--bs-danger);
    color: var(--bs-white);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
}