/* ============================================================================
   HotelTRS modal interiors

   Five modals whose <style> blocks each opened with the same two rules:

       .modal-header      { justify-content: center; }
       .modal-body-holder > div { padding-bottom: 1em; }

   Neither is scoped to anything. .modal-body-holder is used by 77 components,
   so what those five were really writing was an app-wide rule that happened to
   be in the DOM only while one of them was open. Both already live in
   components.css since the modal-chrome batch, so in every one of these files
   they were a redundant copy and are simply deleted.

   What is left is each modal's own interior, which is what this file holds -
   four unrelated modals that had nothing in common except being modals, in the
   same way content.css holds two unrelated feed screens.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   DEPARTMENT SERVICE SCHEDULE

   Create and EditDepartmentModal carried byte-identical <style> blocks. The
   box marks out one service (breakfast, lunch, dinner) and dims when that
   service is switched off - a dotted border when live, dashed when not, which
   is the only signal distinguishing them apart from opacity.
   ---------------------------------------------------------------------------- */

.service-schedule-box,
.service-schedule-box-disabled {
    padding: var(--trs-space-4);
    margin-top: var(--trs-space-4);
    border-radius: var(--trs-radius-sm);
}

.service-schedule-box {
    border: 2px dotted var(--trs-border-strong);
}

.service-schedule-box-disabled {
    border: 2px dashed var(--trs-border-strong);
    opacity: .6;
}

/* The times read as a pair either side of a separator, so they are centred in
   their inputs rather than left-aligned like an ordinary text field. */
.service-schedule-box input[type="text"],
.service-schedule-box .flatpickr-alt-input {
    text-align: center;
}

/* ----------------------------------------------------------------------------
   CONTACT DIRECTORY

   Was a Bootstrap grey border, a Tailwind-ish blue card edge (#99cfff), a pale
   blue hover (#f0f7ff) and Bootstrap's near-black for the name.
   ---------------------------------------------------------------------------- */

/* Written against the parent, not bare: this list is a direct child of
   .modal-body-holder, whose shared `> div { padding-bottom: 16px }` in
   components.css scores (0,1,1) and beats a lone class. The original carried
   `padding: 0 !important` for exactly that reason - dropping the flag let the
   16px back in, which the browser caught. Naming the parent says what is
   actually meant: this child opts out of the shared spacing. */
.modal-body-holder > .contact-list-holder {
    width: 100%;
    height: 400px;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
}

.contact-card-item {
    padding: var(--trs-space-3);
    margin: var(--trs-space-2);
    border: 1px solid var(--trs-border-strong);
    border-radius: var(--trs-radius-sm);
    cursor: default;
}

.contact-card-item:hover {
    background: var(--trs-surface-sunken);
}

.contact-icon-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--trs-p-100);
}

.contact-name {
    font-size: var(--trs-text-md);
    font-weight: var(--trs-weight-medium);
    color: var(--trs-text);
}

.contact-phone {
    font-size: var(--trs-text-lg);
}

/* ----------------------------------------------------------------------------
   AUDIT TRAIL DETAIL

   The two table rules were written as `.modal-body-holder table`, which is
   every table in all 77 modals that use that holder. Scoped to this modal's
   own table now. Fixed layout plus break-all is what stops a long id or user
   agent stretching the modal past the viewport.
   ---------------------------------------------------------------------------- */

.audit-detail-table {
    table-layout: fixed;
    width: 100%;
}

.audit-detail-table td,
.audit-detail-table th {
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ----------------------------------------------------------------------------
   LOCK CREDENTIALS
   ---------------------------------------------------------------------------- */

/* The issue form is a single short field; full width made it read as a section
   rather than one input. */
.issue-form-active {
    width: 50%;
    margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   BULK SET ROOM TYPE

   The sixth modal carrying a redundant `.modal-header { justify-content:
   center }` copy; deleted like the other five. The rest was already half
   migrated - it read var(--bs-*) with hex fallbacks rather than literals - so
   this is mostly a move onto the --trs-* layer those bridge to anyway.
   ---------------------------------------------------------------------------- */

.bulk-rooms-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    background-color: var(--trs-surface);
}

.bulk-rooms-list-row {
    padding: var(--trs-space-3) var(--trs-space-4);
    border-bottom: 1px solid var(--trs-border);
    cursor: pointer;
    transition: background-color var(--trs-motion-fast) var(--trs-ease);
}

.bulk-rooms-list-row:hover {
    background-color: var(--trs-surface-sunken);
}

.bulk-rooms-list-row.is-selected,
.bulk-rooms-list-row.is-selected:hover {
    background-color: var(--trs-success-bg);
}

.bulk-rooms-list-row.is-last {
    border-bottom: none;
}

/* The Blazorise Check renders its own click handler; stop the row click from
   firing twice. */
.bulk-rooms-list-check {
    pointer-events: none;
}

/* Flex children default to min-width:auto, which blocks the truncation. */
.bulk-rooms-list-text {
    min-width: 0;
}

.bulk-rooms-list-badge {
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   RECIPE COMPOSER

   Create and EditRecipeModal are the same two-pane layout - form on the left,
   live preview on the right - and carried the same rules twice. CreateRecipe
   also had a fifth copy of `.input-file-component-holder > label`, which has
   been in components.css since the modal sweep and which that modal does not
   even use: the class belongs to the three document and maintenance modals.
   ---------------------------------------------------------------------------- */

.recipe-modal-split {
    display: flex;
    height: calc(100vh - 14rem);
    overflow: hidden;
}

/* Both panes scroll independently, and overscroll-behavior stops a pane that
   has hit its end from scrolling the modal behind it. */
.recipe-modal-form,
.recipe-modal-preview {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--trs-space-4);
}

.recipe-modal-form {
    flex: 7;
}

.recipe-modal-preview {
    flex: 5;
    background: var(--trs-surface-sunken);
    border-left: 1px solid var(--trs-border);
}

/* ----------------------------------------------------------------------------
   CANCELLATION POLICIES

   The modal's own comment said its border treatment was "the same as the
   receipt tables", and it was - a third copy of what finance.css already
   ships as .trs-money-table. The table now asks for that class and this file
   keeps only the column width that is actually about policies.
   ---------------------------------------------------------------------------- */

.policies-table .policy-name {
    min-width: 16rem;
}

/* ----------------------------------------------------------------------------
   SCHEDULE ROOM RESERVATION

   The seventh and last modal carrying the redundant .modal-header /
   .modal-body-holder pair; both have been in components.css since the modal
   sweep. What is left is one rule that was written bare:

       .flatpickr-wrapper > input { pointer-events: none; }

   The date here is chosen from the inline calendar, so its text input must not
   take a click - but unscoped that made every flatpickr input in the
   application unclickable for as long as this modal was open.
   ---------------------------------------------------------------------------- */

.schedule-reservation .flatpickr-wrapper > input {
    pointer-events: none;
}

/* ----------------------------------------------------------------------------
   IMAGE PREVIEW
   ---------------------------------------------------------------------------- */

.add-photo-modal-image-wrapper .modal-image {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------------------
   RESERVATION - CHILD AGE
   The picker's step buttons sit at the right edge of whatever holds it, so the
   holder carries the width rather than the input.
   ---------------------------------------------------------------------------- */

.trs-child-age-input {
    flex: 0 0 110px;
    width: 110px;
}

/* ----------------------------------------------------------------------------
   ADD CHARGE TO STAY
   ---------------------------------------------------------------------------- */

.charge-table .charge-total-col {
    min-width: 120px;
}

.charge-table .charge-qty-input {
    max-width: 80px;
    margin: 0 auto;
}

.charge-total-bar {
    display: flex;
    justify-content: flex-end;
    gap: var(--trs-space-3);
    align-items: center;
    font-weight: var(--trs-weight-semibold);
    padding-top: var(--trs-space-2);
}

.charge-total-amount {
    font-size: var(--trs-text-lg);
}

/* ----------------------------------------------------------------------------
   DOCUMENTS VIEW
   One scrollbar: the grid's wrapper, its form and .table-responsive give way to
   the modal body. .table-responsive needs overflow visible on BOTH axes -
   overflow-x:auto otherwise coerces overflow-y back to auto.
   ---------------------------------------------------------------------------- */

.trs-documents-view .blazorise-preferred-modal-height,
.trs-documents-view .blazorise-preferred-modal-height form,
.trs-documents-view .table-responsive {
    overflow: visible !important;
    max-height: none !important;
}