/* ===========================================
   RESERVATIONS REPORT PAGE
   =========================================== */

.res-page {
    width: 100%;
    padding-bottom: 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.res-page .page-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.res-page .page-title {
    font-size: 30px;
    font-weight: 400;
    color: #000000;
    margin: 0;
}

/* Field spacing/labels, matching the other property pages */
.res-page .form-group {
    margin-bottom: 12px;
}

.res-page .form-label {
    font-weight: 500;
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 6px;
}

.res-page .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.res-page div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 12.9px;
    padding-bottom: 12.9px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    background-color: white;
}

/* CountryDropdown ships a grey field; here it sits beside white ones. */
.res-page .country-dropdown-wrapper-dense {
    background: #FFFFFF;
}

/* ===== VISIBLE COLUMNS ===== */
.res-columns {
    margin-top: 8px;
}

.res-columns-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #4A4A4A;
    cursor: pointer;
    transition: background 0.2s;
}

.res-columns-toggle:hover {
    background: #F5F5F5;
}

.res-columns-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 16px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #FFFFFF;
}

/* ===== GRID ===== */
.res-grid {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    overflow: hidden;
}

.res-table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 320px);
}

.res-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.res-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px;
    background: #F5F5F7;
    border-right: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    text-align: left;
    white-space: nowrap;
}

.res-table thead th:last-child {
    border-right: none;
}

.res-th-abbr {
    border-bottom: 1px dotted #94A3B8;
    cursor: help;
}

.res-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #EFEFEF;
    color: #1C1B1F;
    white-space: nowrap;
    vertical-align: middle;
}

.res-table tbody tr {
    background: #FFFFFF;
}

.res-table tbody tr:hover {
    background: #FFF8F0;
}

.res-empty {
    padding: 48px 24px !important;
    text-align: center;
    color: #9E9E9E;
    white-space: normal !important;
}

.res-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 12px;
    background: #F5F5F7;
    border-top: 2px solid #E0E0E0;
    font-weight: 600;
    color: #1C1B1F;
    white-space: nowrap;
}

.res-grid-footer {
    padding: 12px 16px;
    border-top: 1px solid #E0E0E0;
    font-size: 12px;
    color: #9E9E9E;
}

/* ===== CELLS ===== */
.res-reference {
    padding: 0;
    background: none;
    border: none;
    color: #E58520;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
}

.res-reference:hover {
    text-decoration: underline;
}

.res-status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 10px;
    line-height: 1;
}

.res-status-dot.ok {
    background: #1B8A4B;
}

.res-status-dot.err {
    background: #C62828;
}

.res-attribute-icon {
    color: #E58520;
}

.res-muted {
    color: #9E9E9E;
}

/* ===== MODALS ===== */
.res-modal-info {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E0E0E0;
    font-size: 14px;
    color: #6c757d;
}

.res-modal-info-value {
    font-weight: 500;
    color: #1C1B1F;
}

.res-modal-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6c757d;
}

.res-modal-checking {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: #6c757d;
}

.res-cancel-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.45;
}

.res-cancel-block ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.res-cancel-block.err {
    background: #FDECEA;
    border-color: #F5C2BC;
    color: #8A1C13;
}

.res-cancel-block.warn {
    background: #FFF6E6;
    border-color: #FFD48A;
    color: #7A4E00;
}

.res-cancel-value {
    color: #DE2424;
}

.res-cancel-block.info {
    background: #EAF3FE;
    border-color: #B8D6F7;
    color: #10457F;
}

.res-cancelled-lead {
    margin: 0;
    font-size: 14px;
    color: #1C1B1F;
}

/* ===========================================
   RESERVATION DETAIL PAGE
   =========================================== */

.res-detail-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.res-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.res-detail-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.res-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: #4A4A4A;
    cursor: pointer;
}

.res-detail-back:hover {
    background: #F5F5F5;
}

.res-detail-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1C1B1F;
}

/* A cancelled booking's reference is struck through, but stays in the title colour. */
.res-detail-title-ref.cancelled {
    text-decoration: line-through;
}

.res-detail-subtitle {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

.res-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.res-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.res-detail-action-button {
    text-transform: none;
}

/* ===== CARDS ===== */
.res-detail-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
}

.res-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid #E0E0E0;
    border-radius: 6px 6px 0 0;
}

.res-detail-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #E58520;
}

.res-detail-card-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1C1B1F;
}

.res-detail-card-body {
    padding: 16px;
}

.res-detail-grid {
    display: grid;
    gap: 16px;
}

.res-detail-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.res-detail-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Guest fields sit two to a row, one field per cell, as the design lays them out. */
.res-detail-guest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 4px;
}

.res-detail-guest-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
}

/* Every cell is the same height and reserves room for a validation message, so a field
   that fails validation never shifts the field beside it out of line. */
.res-detail-guest-form > * {
    min-height: 64px;
}

.res-detail-guest-form .mud-input-control {
    width: 100%;
}

.res-detail-guest-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-detail-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-weight: 500;
}

/* ===== ROWS ===== */
.res-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 5px 0;
    font-size: 14px;
}

.res-detail-label {
    color: #6c757d;
    flex-shrink: 0;
}

.res-detail-value {
    color: #1C1B1F;
    text-align: right;
    word-break: break-word;
}

.res-detail-multiline {
    display: block;
    white-space: pre-wrap;
}

.res-detail-link {
    color: #E58520;
    font-weight: 500;
}

.res-detail-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6c757d;
}

/* ===== STATUS CARD ===== */
.res-detail-fd {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #E0E0E0;
}

.res-detail-fd-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* The reference on record, shown above the field the replacement is typed into. */
.res-detail-fd-current {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #1C1B1F;
}

/* An amount field grows downwards when it shows a validation message. Centring would push
   the button down with the row's mid-line, so these two stay pinned to the top instead. */
.res-detail-amount-controls {
    align-items: flex-start;
}

/* MudBlazor's dense input carries its own 4px top margin and stands 40px tall, while a button
   is 36.5px with none — so the two are squared off here to sit exactly level with each other. */
.res-detail-amount-controls .mud-button-root {
    margin-top: 4px;
    height: 40px;
}

/* Charge and refund are the same button in two colourways — same size, opposite fill — so the
   pair reads as one control. Both are Filled, which leaves MudBlazor's own disabled colours
   (set with !important) to take over untouched when the action is unavailable.
   Every rule here is scoped to the page: MudBlazor's stylesheet is linked after this one, so a
   bare class would lose to .mud-button-filled on specificity alone. */
.res-detail-page .res-detail-charge-button,
.res-detail-page .res-detail-refund-button {
    min-width: 132px;
}

.res-detail-page .res-detail-charge-button {
    background-color: #1C1B1F;
    color: #FFFFFF;
}

.res-detail-page .res-detail-charge-button:hover {
    background-color: #4A4A4A;
}

.res-detail-page .res-detail-refund-button {
    background-color: #E5E7EB;
    color: #1C1B1F;
}

.res-detail-page .res-detail-refund-button:hover {
    background-color: #E0E0E0;
}

.res-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.res-badge.ok {
    background: #E6F4EA;
    color: #1B8A4B;
}

.res-badge.err {
    background: #FDECEA;
    color: #C62828;
}

.res-badge.warn {
    background: #FFF4E5;
    color: #B26A00;
}

.res-badge.muted {
    background: #F1F1F1;
    color: #6c757d;
}

.res-badge.outline {
    border: 1px solid #E0E0E0;
    color: #4A4A4A;
}

/* ===== ROOM CARDS ===== */
.res-detail-room {
    padding: 16px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background: #FCFCFC;
}

.res-detail-room.cancelled {
    border-color: #F3C6C2;
}

.res-detail-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.res-detail-room-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1C1B1F;
}

.res-detail-room-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.res-detail-mini-wide {
    grid-column: 1 / -1;
}

.res-detail-mini-label {
    font-size: 12px;
    color: #6c757d;
}

.res-detail-mini-value {
    font-size: 14px;
    color: #1C1B1F;
    word-break: break-word;
}

/* ===== CHARGES ===== */
.res-detail-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E0E0E0;
    font-size: 14px;
    font-weight: 600;
    color: #1C1B1F;
}

.res-detail-total-value {
    font-size: 18px;
    font-weight: 700;
    color: #1B8A4B;
}

.res-detail-card-number {
    display: block;
    font-weight: 500;
}

.res-detail-card-holder {
    display: block;
    font-size: 12px;
    color: #6c757d;
}

.res-detail-inset {
    padding: 16px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
}

.res-detail-table-wrapper {
    margin-top: 16px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    overflow: hidden;
}

.res-detail-table-title {
    padding: 8px 12px;
    background: #F5F5F7;
    border-bottom: 1px solid #E0E0E0;
    font-size: 13px;
    font-weight: 500;
    color: #4A4A4A;
}

.res-detail-page .res-table thead th {
    position: static;
}

/* ===== CHARGE HISTORY ===== */
/* Wide on a narrow screen: the table scrolls inside the card rather than stretching the page. */
.res-detail-table-scroll {
    overflow-x: auto;
}

.res-detail-charge-table {
    min-width: 640px;
}

/* The type carries the direction of the money, so it is the one coloured value in the row. */
.res-detail-charge-type {
    color: #1B8A4B;
    font-weight: 600;
}

.res-detail-rebate-type {
    color: #C62828;
    font-weight: 600;
}

.res-detail-charge-table .res-detail-charge-action {
    text-align: right;
    width: 1%;
}

/* Table rows are 12px text, so the action button is scaled down to sit inside one. */
.res-detail-page .res-detail-row-button {
    min-width: 88px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

/* Sits under the table as the design has it — the last row's own bottom border separates them. */
.res-detail-table-total {
    display: flex;
    gap: 6px;
    padding: 12px;
    font-size: 13px;
    color: #6c757d;
}

.res-detail-table-total-value {
    font-weight: 600;
    color: #1C1B1F;
}

/* ===== INTEGRATION ===== */
.res-detail-integration {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.res-detail-integration-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.res-detail-stripe {
    padding: 6px 12px;
    background: #635BFF;
    border-radius: 4px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}

.res-detail-integration-title {
    font-weight: 500;
    color: #1C1B1F;
}

.res-detail-integration-sub {
    font-size: 12px;
    color: #6c757d;
}

/* ===== EMPTY / ERROR STATE ===== */
.res-detail-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 24px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    color: #6c757d;
    text-align: center;
}

.res-detail-state h2 {
    margin: 0;
    font-size: 18px;
    color: #1C1B1F;
}

.res-detail-state p {
    margin: 0 0 8px;
    font-size: 14px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .res-page .page-title {
        font-size: 24px;
    }

    .res-table-wrapper {
        max-height: none;
    }

    .res-detail-row {
        flex-direction: column;
        gap: 2px;
    }

    .res-detail-value {
        text-align: left;
    }

    .res-detail-room-body {
        grid-template-columns: 1fr;
    }

    .res-detail-guest-grid,
    .res-detail-guest-form {
        grid-template-columns: 1fr;
    }
}