/* ==============================================================================
   Queue Management styles

   Moved out of the Razor pages so no <style> block ships inside a component.
   A component <style> is injected globally for as long as that component is
   mounted, so rules written without a page scope leak onto every other screen.
   Every selector below is therefore scoped to a page or component class.
   ============================================================================== */

/* ============================== Patient Manager ============================== */
    /* Scoped to the page. Unscoped, this forced 16px headers onto every Blazorise table
       on screen while Patient Manager was mounted - including the Call Member modal grid,
       whose inline HeaderCellStyle sets colours but not font size. */
    .patient-manager-page .b-table th {
        background-color: #EFF2F7;
        color: #6D757D;
        font-size: 0.8rem;
        font-weight: 600 !important;
        border: none
    }

    .patient-manager-page .form-label {
        margin-bottom: 0rem;
    }

    .patient-manager-page .rounded-button {
        border-radius: 0.25rem !important;
    }

    .patient-manager-page .table > :not(caption) > * > * {
        padding: 0.15rem 0.5rem;
        background-color: var(--bs-table-bg);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
        vertical-align: middle;
        color: #535353;
        line-height: 1.3;
    }

    .patient-manager-page .ph-card {
        border-top: #06356B;
        border-style: solid;
        border-top-width: 0.3125rem; /* 5px */
    }

    /* Tighten the member detail rows. Blazorise Field renders .mb-3, which stacks a
       full 1rem under every label/value pair and left the card mostly whitespace.
       Scoped to this card so no other Field on the page is affected. */
    .member-details-body {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Blazorise Field renders .mb-3 - a full 1rem gap under every pair. Now that each
       value is a textbox rather than plain text, keep a small gap so consecutive inputs
       do not butt up against one another. */
    .member-details-body .mb-3,
    .member-details-body .form-group {
        margin-bottom: 0.35rem !important;
    }

    /* Each label/value pair is its own Row. Zero the vertical gutter so consecutive
       rows sit directly on top of one another. */
    .member-details-body .row {
        --bs-gutter-y: 0;
        margin-top: 0;
        margin-bottom: 0;
        row-gap: 0;
    }

    .member-details-body .row > * {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Line height is what is left once the margins are gone - the labels and values are
       block elements, so their leading sets the row pitch. */
    .member-details-body .form-label,
    .member-details-body label,
    .member-details-body p {
        margin-bottom: 0 !important;
        line-height: 1.35;
    }

    /* ==========================================================================
       PHMAS control sizing, applied across the whole screen and its modals.
       Everything is scoped to .patient-manager-page so no other screen is touched.
       These mirror compact.css: reduced-phmas-search-btn for buttons,
       reduced-phmas-compact-control for inputs, reduced-rounded-button for modals.
       ========================================================================== */

    /* Buttons - the PHMAS action size, not the tiny in-grid icon size */
    .patient-manager-page .btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.2rem !important;
        white-space: nowrap;
    }

    /* Inputs, dropdowns and date pickers. Same vertical padding and font size as the
       buttons above, with height left to compute, so both come out the same height
       instead of a fixed 1.6rem that sat shorter than the buttons beside them. */
    .patient-manager-page .form-control,
    .patient-manager-page .form-select {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
        height: auto;
        line-height: 1.5;
    }

    /* Read-only member detail fields: still obviously inputs, but flat rather than
       the heavy grey Bootstrap applies to a disabled control */
    .member-details-body .form-control:disabled,
    .member-details-body .form-control[readonly] {
        background-color: #f8f9fa;
        color: #212529;
        opacity: 1;
        cursor: default;
    }

    /* Textareas must grow with their Rows attribute rather than sit at one line */
    .patient-manager-page textarea.form-control {
        height: auto;
        min-height: 4.2rem;
        line-height: 1.2rem;
    }

    .patient-manager-page .form-label,
    .patient-manager-page label {
        font-size: 0.8rem;
    }

    /* Modal chrome: headers, bodies and footers all sit tighter on PHMAS */
    .patient-manager-page .modal-header {
        padding: 0.4rem 0.75rem;
    }

    .patient-manager-page .modal-title,
    .patient-manager-page .modal-header .h4 {
        font-size: 1rem !important;
    }

    .patient-manager-page .modal-body {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .patient-manager-page .modal-footer {
        padding: 0.4rem 0.75rem;
    }

    /* Grids inside the page and its modals */
    .patient-manager-page .table {
        font-size: 0.8rem;
    }

    /* Icon buttons inside a grid row must NOT take the action-button padding above -
       0.4rem top and bottom on every Sign Off and Delete button was what set the row
       height, not the cell padding. */
    .patient-manager-page .table .btn {
        padding: 0 0.25rem !important;
        line-height: 1.3;
    }

    /* Status badges likewise sit inline rather than adding their own row height */
    .patient-manager-page .table .badge {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
    }

    /* The dropdown toggle in the card header is an icon only, so it keeps its own
       tight padding rather than the action-button padding above */
    .patient-manager-page .dropdown-toggle.btn {
        padding: 0 0.25rem !important;
    }

    /* Sign Off Patient dialog: explicit width with auto margins, mirroring
       .reduced-phmas-modal-content in compact.css */
    .signoff-modal-content {
        width: 650px !important;
        max-width: 95vw;
        margin-left: auto;
        margin-right: auto;
    }

    /* The notes box should fill the dialog and be comfortably tall */
    .signoff-modal-content textarea.form-control {
        width: 100%;
        min-height: 6rem;
        resize: vertical;
    }

    /* Signoff Patient in the PH turquoise (Constants.constSuccessColor). Defined as a
       class rather than Color.Primary so the hover, focus and disabled states move with
       it - an inline background alone would leave Bootstrap's blue showing on hover. */
    .patient-manager-page .signoff-btn,
    .patient-manager-page .signoff-btn:disabled {
        background-color: #2ba9b3 !important;
        border-color: #2ba9b3 !important;
        color: #ffffff !important;
    }

    .patient-manager-page .signoff-btn:hover,
    .patient-manager-page .signoff-btn:focus,
    .patient-manager-page .signoff-btn:active {
        background-color: #24919a !important;
        border-color: #24919a !important;
        color: #ffffff !important;
        box-shadow: none;
    }

    .patient-manager-page .rounded-button {
        border-radius: 0.25rem !important;
    }

    .patient-manager-page .flatpickr-calendar.open,
    .patient-manager-page .flatpickr-calendar.inline {
        opacity: 1;
        max-height: 640px;
        width: -webkit-fill-available;
        visibility: visible;
        font-size: 0.9rem;
    }

    .patient-manager-page .flatpickr-rContainer {
        display: inline-block;
        padding: 0;
        box-sizing: border-box;
        width: -webkit-fill-available;
        font-size: 0.9rem;
    }

    .patient-manager-page .flatpickr-days {
        position: relative;
        overflow: hidden;
        display: flex;
        -webkit-box-align: start;
        align-items: flex-start;
        width: -webkit-fill-available;
        font-size: 0.9rem;
    }

    .patient-manager-page .dayContainer {
        padding: 0;
        outline: 0;
        text-align: left;
        min-width: -webkit-fill-available !important;
        box-sizing: border-box;
        display: flex;
        justify-content: space-evenly;
        transform: translate3d(0px, 0px, 0px);
        opacity: 1;
        column-gap: 1.5rem;
        font-size: 0.9rem;
    }

/* ============================ Queue View (admin) ============================= */
.queue-view-admin .card-body {
    padding: 0.5rem 0.5rem;
}

/* ============================== Queue Manager =============================== */
.queue-manager-page .card-body {
    padding: 0.5rem 0.5rem;
}

.queue-manager-page .table > :not(caption) > * > * {
    padding: 0.1rem 0.5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    vertical-align: middle;
    color: #535353;
}

.queue-manager-page .ph-card {
    border-top: #06356B;
    border-style: solid;
    border-top-width: 0.3125rem;
    font-size: 0.9rem;
}

/* Call Member modal filter checkboxes: the box sat hard against its text.
   Padding on the label works whether the input floats (BS5) or not. */
.call-member-filters .form-check-label {
    padding-left: 0.35rem;
}

.call-member-filters .form-check-input {
    margin-right: 0.2rem;
}