/* ================================================
       DxGrid – ViewBooking (Export Bookings Inventory)
       ================================================ */

/* Header */
th.dxbl-grid-header {
    background-color: #0f2d1f !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 18px 14px !important;
    border-bottom: 3px solid #1a4a2e !important;
    border-right: none !important;
    border-left: none !important;
    white-space: nowrap !important;
}

    th.dxbl-grid-header span {
        color: #ffffff !important;
    }

/* Celle dati */
.dxbl-grid-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    font-size: 0.84rem !important;
    vertical-align: middle !important;
}

/* Righe alternate */
.dxbl-grid-table tbody tr:nth-child(even) > td {
    background-color: #f8fafc !important;
}

/* Hover */
.dxbl-grid-table tbody tr:hover > td {
    background-color: #f0fdf4 !important;
    cursor: pointer !important;
}

/* Riga selezionata */
tr.dxbl-grid-focused-row > td {
    background-color: #ecfdf5 !important;
    color: #064e3b !important;
    font-weight: 600 !important;
}

tr.dxbl-grid-focused-row:hover > td {
    background-color: #d1fae5 !important;
}

/* Riga filtri */
.dxbl-grid-table thead tr:last-child > td {
    background-color: #f1f5f9 !important;
    padding: 8px 6px !important;
    border: none !important;
    border-bottom: 2px solid #cbd5e1 !important;
    height: 40px !important;
}

    /* Input filtri */
    .dxbl-grid-table thead tr:last-child > td input,
    .dxbl-grid-table thead tr:last-child > td .dxbl-edit-control {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        padding: 5px 8px 5px 26px !important;
        font-size: 0.78rem !important;
        color: #475569 !important;
        width: 100% !important;
        height: 28px !important;
        box-sizing: border-box !important;
        outline: none !important;
        box-shadow: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: 7px center !important;
    }

    /* Rimuovi focus blu su tutti gli elementi filtro */
    .dxbl-grid-table thead tr:last-child > td *:focus,
    .dxbl-grid-table thead tr:last-child > td *:focus-within,
    .dxbl-grid-table thead tr:last-child > td *:focus-visible,
    .dxbl-grid-table thead tr:last-child > td [class*="focus"],
    .dxbl-grid-table thead tr:last-child > td:focus-within {
        outline: none !important;
        border-color: #e2e8f0 !important;
        box-shadow: none !important;
    }

    /* Altri elementi dentro td filtro */
    .dxbl-grid-table thead tr:last-child > td > *:not(input):not(.dxbl-edit-control) {
        background-color: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Rimuovi bordi esterni griglia */
.dxbl-grid,
.dxbl-grid > *,
.dxbl-grid-table {
    border-left: none !important;
    border-right: none !important;
    border-collapse: collapse !important;
}

/* Riga selezionata – override massima specificità */
html body tr.dxbl-grid-focused-row > td,
html body tr.dxbl-grid-focused-row > td:hover,
html body .dxbl-grid-table tr.dxbl-grid-focused-row > td,
html body .dxbl-grid-table tbody tr.dxbl-grid-focused-row > td {
    background-color: #ecfdf5 !important;
    color: #064e3b !important;
    font-weight: 600 !important;
}


/* ============================================================
   reprint-refund.css
   Classi usate da ReprintRefund.razor che potrebbero non esistere
   ancora nel design system. Includile solo se ti servono; se hai
   già .pay-modal ecc. dal resto del progetto, ignora questo file.
   Palette allineata a Grimaldi navy #003B79 + verde PTML.
   ============================================================ */

/* --- Modal --- */
.pay-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 45, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.pay-modal {
    background: #fff;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(0, 30, 70, .4);
    padding: 24px 26px;
}

.pay-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #003B79;
    margin: 0 0 18px;
    text-align: center;
}

/* Le popup con intestazione scura (.pay-modal-header, fondo --color-steel-900)
   ereditavano il blu #003B79 della regola qui sopra, che general.css applica dopo
   styles.css: il titolo risultava blu scuro su fondo quasi nero (contrasto 1.6:1).
   Sul fondo scuro si usa il grigio chiaro --color-steel-400, lo stesso di
   .booking-number sulla .booking-main-card. */
.pay-modal-header .pay-modal-title {
    color: var(--color-steel-400);
    margin: 0;
}

.pay-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pay-modal-cta {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #E7EBF0;
}

/* --- Form rows --- */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-row .req {
        color: #C0392B;
        font-weight: 700;
    }

    .form-row small {
        color: #6b7785;
        font-weight: 400;
    }

.modal-note {
    font-size: 12px;
    color: #6b7785;
    margin-top: 4px;
}

/* --- Table selection / actions --- */
.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.row-selected {
    background: rgba(0, 59, 121, .06);
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
}

    .icon-btn:hover {
        background: #EEF2F7;
    }

.badge-ok {
    color: #1E7A46;
    font-weight: 700;
}

.badge-box {
    color: #9aa6b2;
}

/* --- Detail block (consignee) --- */
.detail-block {
    font-size: 14px;
    line-height: 1.6;
    color: #1f2a37;
}

.detail-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7785;
}

.detail-value {
    display: block;
    font-weight: 600;
    color: #1f2a37;
}
/* Barra utente sotto l'header (mostrata solo se loggato).
   Includila nel CSS globale o in un <style> del layout. */
.user-session-bar {
    background: #f8fafc;
    border-bottom: 1px solid var(--color-steel-200);
}

/* Pulsanti Save/Cancel dell'edit form delle DxGrid: Save verde, Cancel grigio,
   allineati allo standard dell'app (btn-primary verde / btn-secondary grigio). */
.dxbl-grid-edit-form-buttons .dxbl-btn-primary {
    background-color: var(--color-teal-700);
    border-color: var(--color-teal-700);
    color: #fff;
}

.dxbl-grid-edit-form-buttons .dxbl-btn-primary:hover {
    background-color: var(--color-teal-800);
    border-color: var(--color-teal-800);
}

.dxbl-grid-edit-form-buttons .dxbl-btn-secondary {
    background-color: #fff;
    border-color: var(--color-steel-400);
    color: var(--color-steel-700);
}

.dxbl-grid-edit-form-buttons .dxbl-btn-secondary:hover {
    background-color: var(--color-steel-100);
    border-color: var(--color-steel-400);
}