/* ==========================================================================
   UTP RESERVATIONS — DOSSIER VISUAL FOUNDATION v1
   Locked UTP desktop/tablet visual language.
   ========================================================================== */

.utp-reservations,
.utp-reservations *{
    box-sizing:border-box;
}

.utp-reservations{
    color:#0b1622;
    font-family:inherit;
    font-size:13px;
    line-height:1.45;
}

/* Cards */
.utp-reservations--detail .utp-reservations__card{
    padding:20px !important;
    border:1px solid rgba(148,163,184,.18);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 16px 38px rgba(15,23,42,.055);
}

.utp-reservations--detail .utp-reservation-dossier__summary-grid,
.utp-reservations--detail .utp-reservation-dossier__two-col{
    gap:14px !important;
}

/* Locked UTP section typography */
.utp-reservations--detail .utp-reservation-dossier__section-title{
    margin-bottom:14px !important;
    color:#0b1622 !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.2;
    letter-spacing:.08em !important;
    text-transform:uppercase;
}

.utp-reservations--detail .utp-reservation-dossier__section-title small{
    color:#64748b !important;
    font-size:10px !important;
    font-weight:800 !important;
}

.utp-reservations--detail .utp-reservations__grid strong,
.utp-reservations--detail .utp-reservation-dossier__subgrid strong,
.utp-reservations--detail .utp-reservation-dossier__traveller-details b,
.utp-reservations--detail .utp-reservation-dossier__provider-row strong{
    color:#64748b !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase;
}

.utp-reservations--detail .utp-reservations__grid span,
.utp-reservations--detail .utp-reservation-dossier__subgrid span,
.utp-reservations--detail .utp-reservation-dossier__traveller-details span,
.utp-reservations--detail .utp-reservation-dossier__provider-row span{
    min-width:0;
    color:#334155 !important;
    font-size:13px !important;
    line-height:1.4 !important;
    overflow-wrap:anywhere;
    word-break:normal;
}

/* Client & Contact: 4 columns inside a half-width card was causing overlap. */
.utp-reservations--detail .utp-reservation-dossier__summary-grid > .utp-reservations__card:first-child .utp-reservations__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px 18px !important;
}

.utp-reservations--detail .utp-reservation-dossier__summary-grid > .utp-reservations__card:first-child .utp-reservations__grid > div{
    min-width:0;
}

.utp-reservations--detail .utp-reservation-dossier__summary-grid > .utp-reservations__card:first-child .utp-reservations__grid span,
.utp-reservations--detail .utp-reservation-dossier__summary-grid > .utp-reservations__card:first-child .utp-reservations__grid a{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
}

/* Financial values */
.utp-reservations--detail .utp-reservations__grid--financial{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
}

.utp-reservations--detail .utp-reservations__grid--financial span{
    color:#0b1622 !important;
    font-size:14px !important;
    font-weight:700;
    white-space:nowrap;
}

/* Services */
.utp-reservations--detail .utp-reservation-dossier__service-head h2{
    color:#0b1622;
    font-size:18px !important;
    font-weight:500;
    letter-spacing:-.02em;
}

.utp-reservations--detail .utp-reservation-dossier__service-type{
    font-size:9px !important;
    letter-spacing:.09em !important;
}

.utp-reservations--detail .utp-reservation-dossier__subgrid{
    gap:12px 16px !important;
}

/* Traveller card */
.utp-reservations--detail .utp-reservation-dossier__traveller{
    padding:8px 0 0 !important;
}

.utp-reservations--detail .utp-reservation-dossier__traveller > strong{
    color:#0b1622 !important;
    font-size:13px !important;
    font-weight:850 !important;
}

.utp-reservations--detail .utp-reservation-dossier__traveller-details{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 18px !important;
    margin-top:12px !important;
}

/* Client reporting editor */
.utp-reservation-dossier__reporting-edit{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(148,163,184,.17);
}

.utp-reservation-dossier__reporting-edit summary{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#475569;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    list-style:none;
}

.utp-reservation-dossier__reporting-edit summary::-webkit-details-marker{
    display:none;
}

.utp-reservation-dossier__reporting-edit summary::before{
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid #64748b;
    border-bottom:2px solid #64748b;
    transform:rotate(-45deg);
    transition:transform .15s ease;
}

.utp-reservation-dossier__reporting-edit[open] summary::before{
    transform:rotate(45deg) translateY(-2px);
}

.utp-reservation-dossier__reporting-edit form{
    display:grid;
    grid-template-columns:minmax(150px,.8fr) minmax(240px,1.6fr) minmax(180px,1fr);
    gap:12px;
    align-items:end;
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:14px;
    background:#f8fafc;
}

.utp-reservation-dossier__reporting-edit label{
    display:grid;
    gap:6px;
    min-width:0;
    color:#64748b;
    font-size:10px;
    font-weight:900;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.utp-reservation-dossier__reporting-edit input{
    width:100%;
    min-height:40px;
    padding:0 11px;
    border:1px solid rgba(148,163,184,.28);
    border-radius:11px;
    background:#fff;
    color:#334155;
    font:inherit;
    font-size:12px;
    outline:0;
}

.utp-reservation-dossier__reporting-edit input:focus{
    border-color:rgba(255,102,71,.72);
    box-shadow:0 0 0 3px rgba(255,102,71,.08);
}

.utp-reservation-dossier__reporting-edit button{
    grid-column:1/-1;
    justify-self:start;
    min-height:38px;
    padding:0 14px;
    border:0;
    border-radius:11px;
    background:#0f172a;
    color:#fff;
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

/* Provider / notes */
.utp-reservations--detail .utp-reservation-dossier__notes-grid p{
    color:#475569 !important;
    font-size:12px !important;
}

.utp-reservations--detail .utp-reservation-dossier__provider-row{
    font-size:12px;
}

/* Tablet portrait */
@media (min-width:768px) and (max-width:1050px){
    .utp-reservations--detail .utp-reservation-dossier__summary-grid,
    .utp-reservations--detail .utp-reservation-dossier__two-col{
        grid-template-columns:1fr !important;
    }

    .utp-reservation-dossier__reporting-edit form{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (min-width:768px) and (max-width:880px){
    .utp-reservation-dossier__reporting-edit form{
        grid-template-columns:1fr;
    }
}


/* ==========================================================================
   Reservation Dossier — final typography normalization
   Normal financial values follow the same visual weight as service/client
   values. Only the customer Total is intentionally emphasized.
   ========================================================================== */

.utp-reservations--detail .utp-reservations__grid--financial > div > span {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

.utp-reservations--detail .utp-reservations__grid--financial > div:nth-child(3) > span {
    font-weight: 800 !important;
}

/* ==========================================================================
   Reservation Dossier — canonical light entity header
   --------------------------------------------------------------------------
   The dossier header follows the locked dossier grammar:
   Navigation -> Entity Header -> Content.
   It is a light Platform surface, not a second dark workspace shell.
   ========================================================================== */

.utp-reservations--detail .utp-reservation-dossier__hero {
    align-items: center;
    margin: 0 0 18px;
    padding: 20px 22px;
    border: 1px solid var(--utp-ui-border);
    border-radius: var(--utp-ui-radius-panel);
    background: var(--utp-ui-surface);
    color: var(--utp-ui-text);
    box-shadow: var(--utp-ui-shadow-panel);
}

.utp-reservations--detail .utp-reservation-dossier__eyebrow {
    color: var(--utp-ui-accent);
    font-size: var(--utp-ui-font-eyebrow);
    font-weight: var(--utp-ui-weight-bold);
    letter-spacing: .08em;
}

.utp-reservations--detail .utp-reservation-dossier__hero h1 {
    color: var(--utp-ui-text);
    font-size: var(--utp-ui-font-page-title);
    line-height: 1.1;
}

.utp-reservations--detail .utp-reservation-dossier__meta {
    margin-top: 8px;
    color: var(--utp-ui-text-muted);
    font-size: var(--utp-ui-font-meta);
}

.utp-reservations--detail .utp-reservation-dossier__hero .utp-reservations__badge {
    border: 1px solid var(--utp-ui-border);
    background: var(--utp-ui-surface-soft);
    color: var(--utp-ui-text-secondary);
    box-shadow: none;
}