/* ---------------------------------------------------------------------------
   CastFlo design tokens (CastFlo Design System, tokens.json). Use var(--cf-*) in
   component CSS instead of hex.
   Primary follows the OfficeWhite theme's orange (as the live CastFlo app does), not the design
   system's #0d6efd. White on #fe7109 is only 2.8:1, so text and icons use --cf-primary-text and
   text on a primary fill uses --cf-on-primary.
   --------------------------------------------------------------------------- */
:root {
    /* Colour */
    --cf-primary: #fe7109;            /* OfficeWhite --bs-primary: fills, focus */
    --cf-primary-hover: #ca6510;      /* OfficeWhite primary button hover */
    --cf-primary-text: #b54d00;       /* links, icons, active text: 5.2:1 on white */
    --cf-on-primary: #1f1300;         /* text on a cf-primary fill: 6.6:1 */
    --cf-surface: #ffffff;
    --cf-surface-alt: #f8f9fa;
    --cf-border: #dee2e6;
    --cf-border-input: #ced4da;
    --cf-text: #212529;
    --cf-text-muted: #6c757d;
    --cf-success: #198754;
    --cf-danger: #dc3545;
    --cf-danger-hover: #bb2d3b;
    --cf-warning: #f59e0b;
    --cf-info: #0dcaf0;
    --cf-env-amber: #f59e0b;
    --cf-env-amber-text: #1f1300;
    --cf-sidebar-bg: #000000;
    --cf-sidebar-fg: #ffffff;
    --cf-sidebar-fg-dim: rgba(255, 255, 255, 0.6);
    --cf-sidebar-hover: rgba(255, 255, 255, 0.08);
    --cf-sidebar-active: rgba(255, 255, 255, 0.12);
    --cf-brand-orange: #e8722a;

    /* Status aliases (StatusBadge) */
    --status-active: var(--cf-success);
    --status-pending: var(--cf-warning);
    --status-onhold: var(--cf-danger);
    --status-draft: var(--cf-text-muted);
    --status-inproduction: var(--cf-primary);

    /* Type */
    --cf-font: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
    --text-page-title: 600 28px/1.2 var(--cf-font);
    --text-section-heading: 600 20px/1.3 var(--cf-font);
    --text-body-md: 400 14px/1.45 var(--cf-font);
    --text-grid-header: 600 13px/1.2 var(--cf-font);
    --text-field-label: 500 13px/1.2 var(--cf-font);
    --text-caption: 400 12px/1.4 var(--cf-font);
    --text-button: 500 14px/1.2 var(--cf-font);
    --text-badge: 600 12px/1.2 var(--cf-font);

    /* Spacing */
    --cf-space: 16px;
    --cf-space-xs: 4px;
    --cf-space-sm: 8px;
    --cf-space-md: 12px;
    --cf-space-lg: 16px;
    --cf-space-xl: 24px;
    --cf-space-2xl: 32px;

    /* Radius, shadow, size */
    --cf-radius: 4px;
    --cf-radius-card: 6px;
    --cf-radius-pill: 999px;
    --cf-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --cf-shadow-sidebar: 0 2px 8px rgba(0, 0, 0, 0.16);
    --cf-shadow-popup: 0 6px 16px rgba(0, 0, 0, 0.18);
    --cf-control-height: 34px;
    --cf-sidebar-width: 240px;
    --cf-env-ribbon-height: 26px;
    --cf-env-border-width: 3px;
    --cf-transition: 120ms ease;

    /* OfficeWhite sets Bootstrap's font to Segoe UI; CastFlo uses the Helvetica stack. */
    --bs-font-sans-serif: var(--cf-font);
    --bs-body-font-family: var(--cf-font);
}

html, body {
    font-family: var(--cf-font);
    color: var(--cf-text);
    background-color: var(--cf-surface);
}

/* Shared CastFlo type helpers. */
.cf-page-title {
    font: var(--text-page-title);
    margin: 0;
}

.cf-section-heading {
    font: var(--text-section-heading);
    margin: 0;
}

.cf-caption {
    font: var(--text-caption);
    color: var(--cf-text-muted);
}

/* ---------------------------------------------------------------------------
   DISA Production Module (the DISA Console and the Office view).
   --lc-select is the consoles' blue for the selected mould, the open tab and their primary buttons (handoff): the
   line-side screens keep it instead of the app's orange, which is too close to the colour of a poured mould.
   The greys are the Bootstrap steps the drawings use where no --cf-* name says what the colour is for (a machine
   part, a tick, a mould); text, borders and surfaces use --cf-text, --cf-border and the rest.
   The line-state badges are shared by the console's top bar and the office line card and machine switch.
   LineStyle.cs holds the same colours for the moulds it draws with inline styles.
   --------------------------------------------------------------------------- */
:root {
    --lc-select: #0d6efd;
    --lc-grey-100: #f8f9fa;
    --lc-grey-200: #e9ecef;
    --lc-grey-300: #dee2e6;
    --lc-grey-400: #ced4da;
    --lc-grey-500: #adb5bd;
    --lc-grey-600: #6c757d;
    --lc-grey-700: #495057;
    --lc-grey-800: #343a40;
    --lc-grey-900: #212529;
}

.lc-badge-success {
    background: var(--cf-success);
    color: #fff;
}

.lc-badge-warning {
    background: var(--cf-warning);
    color: var(--cf-env-amber-text);
}

.lc-badge-danger {
    background: var(--cf-danger);
    color: #fff;
}

.lc-badge-muted {
    background: var(--cf-text-muted);
    color: #fff;
}

/* DxGrid in the CastFlo look: bordered card, grey header band with uppercase muted
   headers, 9x12 cells, hover rows in surface-alt. Small/large size modes keep their padding. */
.dxbl-grid {
    --dxbl-grid-border-color: var(--cf-border);
    --dxbl-grid-border-radius: var(--cf-radius-card);
    --dxbl-grid-header-bg: var(--cf-surface-alt);
    --dxbl-grid-header-color: var(--cf-text-muted);
    --dxbl-grid-hover-bg: var(--cf-surface-alt);
    --dxbl-grid-text-cell-padding-x: var(--cf-space-md);
    --dxbl-grid-text-cell-padding-y: 9px;
}

    .dxbl-grid .dxbl-grid-header-content {
        font-size: 13px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

/* Field-style captions in DxFormLayout: 13/500 muted label. */
.dxbl-fl .dxbl-fl-cpt {
    font: var(--text-field-label);
    color: var(--cf-text-muted);
}

html, body {
    height: 100%;
    overflow: hidden; /* the app shell owns scrolling: .content is the scroller */
    display: flex;
    flex-direction: column;
}

/* Grid pages: the grid fills the window under the title bar. One rule here, not an inline
   <style> block on every page (CastFlo repeats it per page). Usage: <div class="grid-page">. */
.grid-page .dxbl-grid {
    height: calc(100vh - 135px);
}

/* Grid pages with more than the title above the grid (status lines, notes): the grid takes the
   height left in .content instead of the fixed calc above, however many lines sit on top.
   Usage: <div class="grid-page grid-fill">. Every element between .content (already a flex
   column with a fixed height) and the grid becomes a stretching flex column, whatever wrappers
   DevExpress renders in between (DxLoadingPanel). Below 300px the page scrolls instead. */
.content :has(.grid-fill),
.grid-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.grid-fill .dxbl-grid {
    flex: 1 1 0;
    height: auto;
    min-height: 300px;
}

/* ---------------------------------------------------------------------------
   Full-page scroll for tall tabbed detail pages.

   Opt in by wrapping the page content in <div class="full-page-scroll">.

   By default the app shell traps scrolling: html/body are overflow:hidden and
   the .content grid cell is a fixed-height scroller. That clips tall tab
   content on small screens. Here the whole window scrolls instead, while the
   layout still stretches to fill the viewport when content is short (no gap).
   The viewport height is measured from .page, so the non-production banner and
   border frame are respected automatically. Pages without the marker keep the
   fixed-height app-shell scroll.
   --------------------------------------------------------------------------- */
html:has(.full-page-scroll),
body:has(.full-page-scroll) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

body:has(.full-page-scroll) .page {
    height: auto;
    min-height: 100vh; /* fill the viewport when content is short */
    display: flex;
    flex-direction: column;
}

/* Continue a flex chain all the way down to the grid so each level fills its
   parent without relying on percentage heights (a flex-grown block's height is
   not "definite", so height:100% on its children collapses back to content). */
body:has(.full-page-scroll) .page-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Direct child only, so the NavMenu's own inner grid is not affected. */
body:has(.full-page-scroll) .page-layout > .dxbl-gridlayout-root {
    flex: 1 1 auto;
    min-height: 0;
}

body:has(.full-page-scroll) .content {
    overflow: visible; /* stop the inner pane from being the scroller */
}

/* Inside the page body a grid sizes to its content and lets the page scroll. Scoped to
   descendants of the marker (not body:has), so grids in DxWindow/DxPopup dialogs, which
   render outside the marker, keep their capped height. */
.full-page-scroll .dxbl-grid {
    height: auto;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cf-success);
}

.invalid {
    outline: 1px solid var(--cf-danger);
}

.validation-message {
    color: var(--cf-danger);
}

.button-link {
    text-decoration: unset;
}


.strikethrough-row > td {
    text-decoration: line-through;
}


#blazor-error-ui {
    background: var(--cf-surface);
    border-top: 3px solid var(--cf-danger);
    color: var(--cf-text);
    bottom: 0;
    box-shadow: var(--cf-shadow-popup);
    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;
        color: var(--cf-text-muted);
    }

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

/* ---------- Identity pages (/Account/*): CastFlo Field and title styles over the stock template. ---------- */
.account-page {
    max-width: 60rem;
    padding: var(--cf-space-xl) 0;
}

    .account-page h1 {
        font: var(--text-page-title);
        margin-bottom: var(--cf-space);
    }

    .account-page h2,
    .account-page h3 {
        font: var(--text-section-heading);
        margin-bottom: var(--cf-space-md);
    }

    .account-page h4,
    .account-page h5 {
        font: 600 16px/1.3 var(--cf-font);
    }

    .account-page hr {
        border-color: var(--cf-border);
        opacity: 1;
    }

    .account-page .form-label,
    .account-page .form-floating > label {
        font: var(--text-field-label);
        color: var(--cf-text-muted);
    }

    .account-page .form-control,
    .account-page .form-select {
        font: var(--text-body-md);
        color: var(--cf-text);
        border-color: var(--cf-border-input);
        border-radius: var(--cf-radius);
    }

    .account-page .form-control:not(.form-floating > .form-control) {
        min-height: var(--cf-control-height);
    }

    .account-page .form-text,
    .account-page .text-secondary {
        font: var(--text-caption);
        color: var(--cf-text-muted) !important;
    }

    .account-page .btn {
        font: var(--text-button);
        border-radius: var(--cf-radius);
        padding: var(--cf-space-sm) var(--cf-space-lg);
        transition: background-color var(--cf-transition), border-color var(--cf-transition), color var(--cf-transition);
    }

    .account-page .btn-lg {
        min-height: 40px;
    }

    .account-page .btn-primary:hover {
        background-color: var(--cf-primary-hover);
        border-color: var(--cf-primary-hover);
    }

    .account-page .alert {
        border-radius: var(--cf-radius-card);
    }

    /* Manage menu: CastFlo tab-style active item (primary text, 600 weight) instead of filled pills. */
    .account-page .nav-pills .nav-link {
        color: var(--cf-text-muted);
        border-radius: var(--cf-radius);
        padding: var(--cf-space-sm) var(--cf-space-md);
        transition: background-color var(--cf-transition), color var(--cf-transition);
    }

        .account-page .nav-pills .nav-link:hover {
            background-color: var(--cf-surface-alt);
            color: var(--cf-text);
        }

        .account-page .nav-pills .nav-link.active {
            background-color: var(--cf-surface-alt);
            color: var(--cf-primary-text);
            font-weight: 600;
        }

/* Rendered Markdown (CastProBase.RenderMarkdown). Markdig emits bare <table>, so give tables borders and padding. */
.md-body table {
    border-collapse: collapse;
    margin: 0 0 1rem;
    max-width: 100%;
}

.md-body th,
.md-body td {
    border: 1px solid var(--cf-border);
    padding: 0.375rem 0.625rem;
    vertical-align: top;
    text-align: left;
}

.md-body thead th {
    background: var(--cf-surface-alt);
    font-weight: 600;
}