/* ==========================================================================
   V2 Design Tokens — Font Stacks
   ========================================================================== */

:root {
    --fg-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --fg-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --fg-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ==========================================================================
   V2 Layout — CSS Grid Foundation
   Applied when body has .v2-grid-layout class.
   Grid rows: header (auto) / breadcrumbs (auto) / content (1fr) / footer (auto)
   ========================================================================== */

body.v2-grid-layout {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header"
        "breadcrumbs"
        "content"
        "footer";
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.v2-grid-header {
    grid-area: header;
}

.v2-navbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.v2-grid-breadcrumbs {
    grid-area: breadcrumbs;
}

.v2-grid-content {
    grid-area: content;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
}

.v2-grid-content-gutter-top {
    padding-top: 2.5rem;
}

.v2-grid-content-gutter-sides {
    padding-left: 4.75rem;
    padding-right: 1.5rem;
}

.v2-grid-footer {
    grid-area: footer;
}

/* ==========================================================================
    Load Indicator
   ========================================================================== */

/* ── Overlay (light theme default) ── */
.load-indicator::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #2c3238;
    opacity: 0.55;
    z-index: 100000;
}

/* ── Overlay (dark theme) ── */
[data-bs-theme="dark"] .load-indicator::before {
    background-color: var(--fg-bg-deepest);
    opacity: 0.75;
}

/* ── Inline SVG spinner (injected by fg.loadIndicator) ── */
.fg-load-indicator-spinner {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    z-index: 100001;
    display: none;
}

.load-indicator .fg-load-indicator-spinner {
    display: block;
}

/* ── Container-scoped overlay (fg.loadIndicator.showForContent) ── */
.fg-load-indicator-scope {
    position: relative;
}

.fg-load-indicator-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(44, 50, 56, 0.55);
    z-index: 100;
}

[data-bs-theme="dark"] .fg-load-indicator-overlay {
    background-color: rgba(18, 22, 28, 0.75);
}

.fg-load-indicator-overlay > .fg-load-indicator-spinner {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 72px;
    height: 72px;
    display: block;
}

/* ── SVG outer edges: black in light mode, cream in dark ── */
.fg-outer-top,
.fg-outer-right,
.fg-outer-bottom,
.fg-outer-left {
    fill: #000000;
}

[data-bs-theme="dark"] .fg-outer-top,
[data-bs-theme="dark"] .fg-outer-right,
[data-bs-theme="dark"] .fg-outer-bottom,
[data-bs-theme="dark"] .fg-outer-left {
    fill: #E9E5DC;
}

/* ── Modal ── */
#fgWaitModalDialog .modal-dialog {
    width: 300px;
}

#fgWaitModalDialog p {
    font-size: 18px;
    padding-bottom: 10px;
    text-align: center;
}

#fgWaitModalDialog .fg-modal-spinner {
    width: 100px;
    height: 100px;
    margin: 0 auto 5px;
}

/* ==========================================================================
    Field validations
   ========================================================================== */
.field-validation-error {
    color: #E63E42;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error,
textarea.input-validation-error,
k-input.input-validation-error,
k-textbox.input-validation-error {
    border: 1px solid #E63E42;
}

select.input-validation-error {
    border: 1px solid #E63E42;
}

input[type=checkbox].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #E63E42;
}

/* Informational "nothing matched" copy. Deliberately NOT .validation-summary-errors:
   an empty result set is not a validation error, and rendering it in error red both
   misinforms the user and trips the E2E smoke suite's error-banner detector
   (BaseSmokeTest.AssertNoErrorBannerAsync). See E-SS-094. */
.fg-empty-state {
    color: var(--fg-text-muted);
}

.validation-summary-valid {
    display: none;
}

.fg-input-invalid-msg {
    color: #E63E42 !important;
}

.fg-input-invalid-border {
    border-color: #E63E42 !important;
}

div.fg-input-invalid-border,
tr.fg-input-invalid-border {
    border: solid 1px #E63E42 !important;
}

/* ==========================================================================
    Error page logo.
    Used on _LayoutError.cshtml error pages and Home/NotActive, Home/NotSupported.
   ========================================================================== */

.fg-navbar-logo {
    height: 55px;
    margin-left: 18px;
}

/* ==========================================================================
    Account page responsive layout.
    Used on Login / ForgotPassword / ResetPassword under _AccountLayout.cshtml.
   ========================================================================== */

.fg-login-container_mobile {
    margin: auto;
    width: 30%;
}

@media (max-width: 767.98px) {
    .fg-login-container_mobile {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px;
    }

    .account-form {
        width: 90% !important;
        max-width: 400px;
        margin-top: 60px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .account-logo img {
        max-width: 200px;
        height: auto;
    }

    .account-input-group {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .account-submit-group {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .account-submit-group input[type=submit] {
        width: auto;
        padding: 8px 20px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .fg-login-container_mobile {
        width: 50% !important;
    }

    .account-form {
        width: 360px !important;
        margin-top: 100px !important;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .account-form {
        margin-top: 40px !important;
    }
}