html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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;
    }

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

    .title.title-secondary {
        padding-top: 0.313rem;
        padding-bottom: 0;
        color: var(--bs-secondary-color);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}


.or {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .or .or-line {
        border-bottom: 1px solid var(--bs-body-color);
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem 0px 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: var(--bs-body-color);
        opacity: 0.7;
    }

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--bs-body-color);
        opacity: 0.7;
    }

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary);
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-message.info-panel {
        margin-bottom: 0.625rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

.icon-external-provider {
    width: 1rem;
    height: 1rem;
}

.icon-google {
    background-image: url("/images/account/providers/google-logo.svg")
}

.icon-facebook {
    background-image: url("/images/account/providers/facebook-logo.svg")
}

.icon-microsoft {
    background-image: url("/images/account/providers/microsoft-logo.svg")
}

.icon-twitter {
    background-image: url("/images/account/providers/x-logo.svg")
}

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

    .display-mobile {
        display: block;
    }

    /* Allow scrolling on mobile devices */
    html, body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Hide LastPass icons globally - 2024 selectors */
div[data-lastpass-icon-root],
div[data-lastpass-root],
span[data-lastpass-icon-root],
span[data-lastpass-root] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Sticky form action footer - used for form save/cancel buttons */
.form-action-footer {
    position: sticky;
    bottom: 0;
    background-color: white;
    border-top: 1px solid var(--bs-border-color);
    padding: 0.5rem 1.5rem;
    z-index: 1020;
    margin: 1rem -1.5rem -1.5rem -1.5rem;
}

.form-action-footer .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .form-action-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0.75rem 1rem;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Add padding to content so last items aren't hidden behind fixed footer */
    .form-action-footer-spacer {
        height: 10rem;
    }

    /* Larger spacer when validation errors are expanded */
    .form-action-footer-spacer.validation-expanded {
        height: 28rem;
    }
}

/* Print-only text elements - hidden on screen, shown in print */
.print-only-text {
    display: none;
}

/* =============================================================================
   PRINT STYLES (CI-500)
   Print-friendly styling for contact notes and other printable content.
   Notes may be printed and sent to doctors or service coordinators.
   ============================================================================= */

@media print {
    /* ----- HIDE NON-ESSENTIAL UI ELEMENTS ----- */

    /* Hide navigation drawer panel (NOT .navigation-drawer - that's the whole component!)
       The dxbl-drawer-panel contains the nav sidebar */
    dxbl-drawer-panel,
    .dxbl-drawer-panel {
        display: none !important;
    }

    /* Hide nav buttons (menu, back, logout) */
    .nav-buttons-container {
        display: none !important;
    }

    /* Hide auth controls */
    .auth-controls {
        display: none !important;
    }

    /* Hide form action footer (Save/Submit/Cancel buttons) */
    .form-action-footer {
        display: none !important;
    }

    /* Hide footer spacer */
    .form-action-footer-spacer {
        display: none !important;
    }

    /* Hide informational alerts (required fields hints) */
    .alert-info {
        display: none !important;
    }

    /* Hide Blazor error UI */
    #blazor-error-ui {
        display: none !important;
    }

    /* ----- FIX LAYOUT FOR PRINT ----- */

    /* Remove body scroll constraints */
    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    /* Remove page container constraints */
    .page {
        height: auto !important;
        overflow: visible !important;
    }

    /* CRITICAL: Fix dxbl-drawer elements which have overflow:hidden and fixed height
       This prevents content from flowing to multiple print pages */
    dxbl-drawer,
    .dxbl-drawer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* DevExpress drawer content - allow natural flow */
    .dxbl-drawer-content {
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        margin-left: 0 !important;
    }

    /* CRITICAL: Override DevExpress drawer shrink mode calculations
       Shrink mode sets margin-left equal to panel width (240px).
       When we hide the panel, this margin pushes content off-screen. */
    .dxbl-drawer.dxbl-drawer-shrink > .dxbl-drawer-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Handle nested drawer structure (mobile + desktop) */
    .navigation-drawer > .dxbl-drawer-content,
    .navigation-drawer.mobile > .dxbl-drawer-content {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Ensure main content takes full width */
    .dxbl-drawer-target,
    .dxbl-drawer > .dxbl-drawer-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ----- BLACK & WHITE PRINT MODE ----- */

    /* Force grayscale printing */
    body {
        color: black !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Apply grayscale filter to convert any remaining colors */
    .page {
        filter: grayscale(100%) !important;
    }

    /* Override all text colors to black */
    * {
        color: black !important;
    }

    /* Override colored backgrounds to white/light gray */
    .text-primary,
    .text-success,
    .text-danger,
    .text-warning,
    .text-info,
    .bg-primary,
    .bg-success,
    .bg-danger,
    .bg-warning,
    .bg-info {
        color: black !important;
        background-color: transparent !important;
    }

    /* Cards should have visible borders without shadows */
    .card {
        border: 1px solid #666 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 1rem !important;
        background-color: white !important;
    }

    .card-header {
        background-color: #eee !important;
        border-bottom: 1px solid #666 !important;
        color: black !important;
    }

    /* Make muted text darker for better print contrast */
    .text-muted {
        color: #333 !important;
    }

    /* Read-only inputs should look like plain text */
    .bg-light,
    .form-control[readonly],
    .form-control-plaintext {
        background-color: transparent !important;
        border: none !important;
        color: black !important;
    }

    /* Ensure links print as black text */
    a, a:visited {
        color: black !important;
        text-decoration: none !important;
    }

    /* Status badges - print as plain text */
    .badge {
        background-color: transparent !important;
        border: 1px solid #666 !important;
        color: black !important;
    }

    /* ----- FORM LAYOUT OPTIMIZATION ----- */

    /* Prevent page breaks inside form groups */
    .dxbl-fl-group {
        page-break-inside: avoid;
        border: 1px solid #ddd !important;
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Make group headers stand out */
    .dxbl-fl-group-header {
        font-weight: bold !important;
        border-bottom: 1px solid #ccc !important;
        margin-bottom: 0.5rem !important;
    }

    /* Remove DevExpress input styling for cleaner print */
    .dxbl-fl-ctrl,
    .dxbl-text-edit,
    .dxbl-spin-edit,
    .dxbl-combobox {
        border: none !important;
        box-shadow: none !important;
    }

    /* ----- HIDE FORM FIELD DECORATORS ----- */

    /* Hide textarea resize handle */
    textarea {
        resize: none !important;
    }

    /* Hide spin button up/down arrows (DevExpress) */
    .dxbl-spin-btns,
    .dxbl-spin-btn-inc,
    .dxbl-spin-btn-dec {
        display: none !important;
    }

    /* Hide dropdown/combobox expand buttons (DevExpress) */
    .dxbl-edit-btn-dropdown,
    .dxbl-btn-group-right {
        display: none !important;
    }

    /* Hide Clear Signature buttons */
    .signature-capture-container button,
    .signature-capture-container .btn {
        display: none !important;
    }

    /* Make text form fields look like plain text (no borders, no backgrounds)
       Excludes checkboxes and radio buttons to preserve their appearance */
    input:not([type=checkbox]):not([type=radio]),
    textarea,
    select,
    .dxbl-text-edit,
    .dxbl-text-edit input:not([type=checkbox]):not([type=radio]),
    .dxbl-fl-ctrl input:not([type=checkbox]):not([type=radio]),
    .dxbl-readonly,
    .dxbl-readonly input:not([type=checkbox]):not([type=radio]),
    [class*="dxbl-text-edit"],
    [class*="dxbl-input"],
    dxbl-input-editor,
    dxbl-combo-box,
    dxbl-date-edit {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    /* ----- PRINT-ONLY TEXT DISPLAYS ----- */

    /* Show print-only text displays in print mode */
    .print-only-text {
        display: block !important;
    }

    /* Hide the read-only input fields that have print alternatives */
    .screen-only-field {
        display: none !important;
    }

    /* ----- SIGNATURE DISPLAY ----- */

    /* Ensure signatures print clearly */
    .signature-display img,
    .signature-image,
    img[alt*="signature"] {
        max-width: 300px !important;
        height: auto !important;
        border: 1px solid #999 !important;
        page-break-inside: avoid;
    }

    /* ----- VALIDATION STYLING ----- */

    /* Hide validation borders (not needed in print) */
    .border-danger,
    .border-warning {
        border-color: transparent !important;
    }

    /* Hide validation messages */
    .validation-message,
    .validation-summary-errors {
        display: none !important;
    }

    /* ----- PAGE SETUP ----- */

    /* Set reasonable margins for printing */
    @page {
        margin: 0.5in;
    }
}