@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');
@import url('/css/Footer.css');

/* =============================================
   BASE STYLES - Consolidated html/body rules
   ============================================= */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────
   AUTHORIZED FOOTER
   Sits outside DxGridLayout as a direct
   flex child of .page so that a tall sidebar
   can never push it off-screen.
   Explicit padding gives the grid a
   predictable footer height to account for.
───────────────────────────────────────── */
.authorized-footer {
    width: 100%;
    flex-shrink: 0;
    background-color: #ffffff;
    padding: 0.5rem 1rem;
}

/* ─────────────────────────────────────────
   CONTENT LAYOUT ITEM
   min-height: 0 overrides the CSS Grid
   default of min-height: auto.
   Without this, the content row expands
   beyond its 1fr allocation when the sidebar
   is tall, pushing the footer row off-screen.
   padding-bottom ensures content at the
   bottom of the scroll area is not hidden
   behind the authorized-footer.
───────────────────────────────────────── */
.content.layout-item {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 5rem;
}

/* ─────────────────────────────────────────
   DEVEXPRESS GRID LAYOUT ITEM OVERFLOW FIX
   DxGridLayoutItem renders a dxbl-gl-item
   wrapper that can clip the scrollable
   content area. Override to ensure no
   unintended clipping occurs.
───────────────────────────────────────── */
.page-layout .dxbl-gl-item:has(> .content.layout-item) {
    overflow: visible;
}

/* =============================================
   HYPERLINK STYLES
   ============================================= */
.hyperlink {
    text-decoration: none;
    cursor: pointer;
}

    .hyperlink:hover {
        text-decoration: underline;
    }

/* Portal-specific hyperlink colors */
.hyperlinkCL {
    color: #007EA2;
}

.hyperlinkRP {
    color: #027EA2;
}

.hyperlinkCT {
    color: #2087c3;
}

/* =============================================
   TENANT-SPECIFIC BUTTON STYLES
   Used via BaseComponent.ButtonCssClass which
   returns "w-100 siteButtonXX" per portal.

   DevExpress DxButton renders a wrapper element
   with CssClass applied, then an inner <button>
   with class "dxbl-btn" that carries its own
   background-color. We must target both the
   wrapper AND the inner dxbl-btn with !important
   so DevExpress's Contained/Primary render style
   cannot override the tenant brand color.

   Hover is ~12% darker than base — same hue only.
   ============================================= */

/* ── Cryo-Logix  base: #007EA2  hover: #006B8A ── */
.siteButtonCL,
.siteButtonCL .dxbl-btn,
.siteButtonCL.dxbl-btn {
    background-color: #007EA2 !important;
    color: #ffffff !important;
    border: 1px solid #007EA2 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonCL:hover,
    .siteButtonCL:focus,
    .siteButtonCL .dxbl-btn:hover,
    .siteButtonCL .dxbl-btn:focus,
    .siteButtonCL.dxbl-btn:hover,
    .siteButtonCL.dxbl-btn:focus {
        background-color: #006B8A !important;
        border-color: #006B8A !important;
        color: #ffffff !important;
    }

    .siteButtonCL:disabled .dxbl-btn,
    .siteButtonCL .dxbl-btn:disabled,
    .siteButtonCL.disabled .dxbl-btn {
        background-color: #a0c8d4 !important;
        border-color: #a0c8d4 !important;
        cursor: not-allowed;
    }

/* ── Reprotech  base: #027EA2  hover: #016B8A ── */
.siteButtonRP,
.siteButtonRP .dxbl-btn,
.siteButtonRP.dxbl-btn {
    background-color: #027EA2 !important;
    color: #ffffff !important;
    border: 1px solid #027EA2 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonRP:hover,
    .siteButtonRP:focus,
    .siteButtonRP .dxbl-btn:hover,
    .siteButtonRP .dxbl-btn:focus,
    .siteButtonRP.dxbl-btn:hover,
    .siteButtonRP.dxbl-btn:focus {
        background-color: #016B8A !important;
        border-color: #016B8A !important;
        color: #ffffff !important;
    }

    .siteButtonRP:disabled .dxbl-btn,
    .siteButtonRP .dxbl-btn:disabled,
    .siteButtonRP.disabled .dxbl-btn {
        background-color: #a0c8d4 !important;
        border-color: #a0c8d4 !important;
        cursor: not-allowed;
    }

/* ── Cryo-Trust  base: #2087c3  hover: #1B74A8 ── */
.siteButtonCT,
.siteButtonCT .dxbl-btn,
.siteButtonCT.dxbl-btn {
    background-color: #2087c3 !important;
    color: #ffffff !important;
    border: 1px solid #2087c3 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonCT:hover,
    .siteButtonCT:focus,
    .siteButtonCT .dxbl-btn:hover,
    .siteButtonCT .dxbl-btn:focus,
    .siteButtonCT.dxbl-btn:hover,
    .siteButtonCT.dxbl-btn:focus {
        background-color: #1B74A8 !important;
        border-color: #1B74A8 !important;
        color: #ffffff !important;
    }

    .siteButtonCT:disabled .dxbl-btn,
    .siteButtonCT .dxbl-btn:disabled,
    .siteButtonCT.disabled .dxbl-btn {
        background-color: #a0c4dc !important;
        border-color: #a0c4dc !important;
        cursor: not-allowed;
    }

/* ── Outline variants (OutlineButtonCssClass) ── */
.siteButtonOutlineCL,
.siteButtonOutlineCL .dxbl-btn,
.siteButtonOutlineCL.dxbl-btn {
    background-color: transparent !important;
    color: #007EA2 !important;
    border: 1px solid #007EA2 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonOutlineCL:hover,
    .siteButtonOutlineCL:focus,
    .siteButtonOutlineCL .dxbl-btn:hover,
    .siteButtonOutlineCL .dxbl-btn:focus {
        background-color: rgba(0, 107, 138, 0.10) !important;
        color: #006B8A !important;
        border-color: #006B8A !important;
    }

.siteButtonOutlineRP,
.siteButtonOutlineRP .dxbl-btn,
.siteButtonOutlineRP.dxbl-btn {
    background-color: transparent !important;
    color: #027EA2 !important;
    border: 1px solid #027EA2 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonOutlineRP:hover,
    .siteButtonOutlineRP:focus,
    .siteButtonOutlineRP .dxbl-btn:hover,
    .siteButtonOutlineRP .dxbl-btn:focus {
        background-color: rgba(1, 107, 138, 0.10) !important;
        color: #016B8A !important;
        border-color: #016B8A !important;
    }

.siteButtonOutlineCT,
.siteButtonOutlineCT .dxbl-btn,
.siteButtonOutlineCT.dxbl-btn {
    background-color: transparent !important;
    color: #2087c3 !important;
    border: 1px solid #2087c3 !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

    .siteButtonOutlineCT:hover,
    .siteButtonOutlineCT:focus,
    .siteButtonOutlineCT .dxbl-btn:hover,
    .siteButtonOutlineCT .dxbl-btn:focus {
        background-color: rgba(27, 116, 168, 0.10) !important;
        color: #1B74A8 !important;
        border-color: #1B74A8 !important;
    }

/* Disabled state for all portal buttons */
.siteButtonDisabled,
.siteButtonDisabled .dxbl-btn {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
    border-radius: 6px !important;
    cursor: not-allowed;
    opacity: 0.65;
}

/* =============================================
   MARKDOWN CONTENT
   ============================================= */
.markdown-content {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3 {
        border-bottom: 1px solid #eaecef;
        padding-bottom: 0.3em;
    }

    .markdown-content ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    .markdown-content .nested-list {
        margin-left: 20px;
    }

/* ─────────────────────────────────────────
   DEVEXPRESS MENU — USER BUTTON OVERRIDE
   Scoped CSS in Header.razor.css cannot
   target DevExpress component internals
   (elements lack the Blazor scope attribute).
   These global rules override the default
   teal/primary background on the DxMenu
   user button in the header navbar.

   NOTE: MenuCssClass adds "siteButtonXX" to
   the DxMenuItem, so the siteButton rules
   above would make the user button solid
   teal. The block below re-overrides any
   siteButton class that appears inside
   .header-navbar, restoring transparent bg.
───────────────────────────────────────── */
.header-navbar {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-color: #212529;
    --dxbl-btn-border-color: #007EA2;
    --dxbl-btn-hover-bg: rgba(0, 107, 138, 0.08);
    --dxbl-btn-hover-border-color: #006B8A;
    --dxbl-btn-active-bg: rgba(0, 107, 138, 0.14);
    --dxbl-btn-active-border-color: #006B8A;
}

/* Base DevExpress elements inside the header */
.header-navbar .dxbl-btn,
.header-navbar [class*="dxbl-btn"],
.header-navbar .dxbl-menu-item-btn,
.header-navbar .dxbl-menu .dxbl-nav-link,
.header-navbar .dxbl-dropdown-toggle {
    background-color: transparent !important;
    border: 1px solid #007EA2 !important;
    border-radius: 6px !important;
    color: #212529 !important;
    box-shadow: none !important;
    padding: 0.35rem 0.75rem !important;
}

    .header-navbar .dxbl-btn:hover,
    .header-navbar [class*="dxbl-btn"]:hover,
    .header-navbar .dxbl-menu .dxbl-nav-link:hover {
        background-color: rgba(0, 107, 138, 0.08) !important;
        border-color: #006B8A !important;
        color: #212529 !important;
    }

/* ─────────────────────────────────────────
   HEADER siteButton COUNTER-OVERRIDE
   MenuCssClass places siteButtonXX on the
   DxMenuItem element directly. The siteButton
   rules above have !important and would win
   if not overridden here with equal or higher
   specificity LATER in the cascade.
   Two-class selectors (.header-navbar .siteButtonXX)
   match specificity and appear after the
   siteButton block, so these win.
───────────────────────────────────────── */
.header-navbar .siteButtonCL,
.header-navbar .siteButtonRP,
.header-navbar .siteButtonCT,
.header-navbar .siteButtonCL .dxbl-btn,
.header-navbar .siteButtonRP .dxbl-btn,
.header-navbar .siteButtonCT .dxbl-btn,
.header-navbar .siteButtonCL.dxbl-btn,
.header-navbar .siteButtonRP.dxbl-btn,
.header-navbar .siteButtonCT.dxbl-btn {
    background-color: transparent !important;
    border: 1px solid #007EA2 !important;
    color: #212529 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

    .header-navbar .siteButtonCL:hover,
    .header-navbar .siteButtonRP:hover,
    .header-navbar .siteButtonCT:hover,
    .header-navbar .siteButtonCL .dxbl-btn:hover,
    .header-navbar .siteButtonRP .dxbl-btn:hover,
    .header-navbar .siteButtonCT .dxbl-btn:hover {
        background-color: rgba(0, 107, 138, 0.08) !important;
        border-color: #006B8A !important;
        color: #212529 !important;
    }

/* =============================================
   PRINT STYLES - Global print rules
   ============================================= */
@media print {
    .no-print {
        display: none !important;
    }

    .page {
        display: block !important;
        min-height: 0 !important;
    }

    .page-layout {
        display: block !important;
        flex: none !important;
    }

    .content.layout-item {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        padding-bottom: 0 !important;   /* remove screen padding for print */
    }

    .authorized-footer {
        padding: 0 !important;          /* compact footer in print */
    }

    .mobile-nav-drawer,
    .mobile-menu-overlay {
        display: none !important;
    }
}