/* =====================================================================
   TABLEAU v3 - grafica nuova (caricato DOPO tableau.css)
   Tutto è limitato a #tableau-module: non tocca le altre pagine.
   Per tornare alla grafica di prima basta togliere questo file da index.html.
   ===================================================================== */
#tableau-module {
    --t-day-col: 48px;
    --t-room-col: 168px;
    --t-row-h: 46px;
    --tb-navy: #0e2440;
    --tb-teal: #0aa5b8;
    --tb-ink: #0f1b2d;
    --tb-muted: #5f6f86;
    --tb-line: #e2e8f0;
    --tb-line2: #eef2f6;
    --tb-bg: #f3f6fa;
    --tb-we: #f8fafc;
    --tb-today: #ecf9fb;
    --tb-conf: #2f6fdc;
    --tb-casa: #14965a;
    --tb-attesa: #d98a0b;
    --tb-out: #94a3b8;
    --tb-canc: #dc3545;
    --tb-noshow: #7c3aed;
    --tb-due: #c2410c;
    --t-font: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--tb-bg) !important;
    font-family: var(--t-font);
    color: var(--tb-ink);
    border-radius: 0;
    gap: 12px;
    padding: 16px 18px 18px;
}
#tableau-module svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Barra superiore ---------- */
#tableau-module > .module-header {
    background: #fff !important;
    border: 1px solid var(--tb-line) !important;
    border-radius: 14px;
    padding: 12px 14px !important;
    align-items: center;
    gap: 14px;
}
#tableau-module .tb2-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
#tableau-module > .module-header h2 { font-size: 22px !important; font-weight: 800; letter-spacing: -.02em; color: var(--tb-ink) !important; }
#tableau-module .room-count-info { font-size: 12.5px; color: var(--tb-muted) !important; }
#tableau-module .room-count-info strong { color: var(--tb-ink); }
#tableau-module .tableau-controls { gap: 8px; }
#tableau-module .tableau-controls input[type="date"],
#tableau-module .tableau-controls select,
#tableau-module .room-type-filter {
    height: 38px; padding: 0 10px; border-radius: 10px !important;
    border: 1px solid var(--tb-line) !important; background: #fff !important; color: var(--tb-ink) !important;
    font-family: var(--t-font); font-size: 13px; font-weight: 600;
}
#tableau-module .tableau-controls .btn,
#tableau-module .tableau-controls button.btn {
    height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
    border-radius: 10px !important; border: 1px solid var(--tb-line) !important;
    background: #fff !important; color: var(--tb-ink) !important; font-weight: 600; font-size: 13px;
}
#tableau-module .tableau-controls .btn:hover { border-color: #c4cfdd !important; background: #f8fafc !important; }
#tableau-module .checkbox-filter { height: 38px; padding: 0 10px; border: 1px solid var(--tb-line); border-radius: 10px; background: #fff; font-weight: 600; font-size: 13px; color: var(--tb-ink) !important; }
#tableau-module .checkbox-filter .checkbox-label { color: var(--tb-ink) !important; }
#tableau-module .checkbox-filter input { width: 16px; height: 16px; accent-color: var(--tb-teal); }

/* Navigazione periodo (dentro la barra) */
#tableau-module .tableau-month-nav {
    display: flex !important; align-items: center; gap: 6px; padding: 0;
    background: transparent !important; border: 0; justify-content: flex-start;
}
#tableau-module .month-nav-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--tb-line);
    background: #fff !important; color: var(--tb-ink) !important;
}
#tableau-module .month-nav-btn:hover { background: var(--tb-teal) !important; border-color: var(--tb-teal); color: #fff !important; }
#tableau-module .month-nav-today {
    height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--tb-teal);
    background: #fff !important; color: #08808f !important; font-weight: 700; font-size: 13px;
}
#tableau-module .month-nav-today:hover { background: var(--tb-teal) !important; color: #fff !important; }
#tableau-module .month-nav-title { font-size: 16px; font-weight: 800; min-width: 0; padding: 0 8px; color: var(--tb-ink) !important; }

/* ---------- Legenda ---------- */
#tableau-module .tableau-legend {
    background: transparent !important; border: 0; padding: 0 4px; gap: 16px; flex-wrap: wrap;
}
#tableau-module .legend-item { font-size: 12px; color: var(--tb-muted); gap: 6px; }
#tableau-module .status-box { width: 14px; height: 12px; border-radius: 4px; }
#tableau-module .status-box.confirmed { background: var(--tb-conf); }
#tableau-module .status-box.checked-in { background: var(--tb-casa); }
#tableau-module .status-box.pending { background: #fff; border: 1.5px dashed var(--tb-attesa); }
#tableau-module .status-box.checked_out { background: var(--tb-out); }
#tableau-module .status-box.cancelled { background: repeating-linear-gradient(135deg, #f3b4ba 0 3px, #fde8ea 3px 6px); }
#tableau-module .status-box.blocked { background: repeating-linear-gradient(135deg, #d5dce6 0 3px, #f1f4f8 3px 6px); border: 1px solid #d5dce6; }

/* ---------- Griglia ---------- */
#tableau-module .tableau-container {
    background: #fff; border: 1px solid var(--tb-line); border-radius: 14px;
    scrollbar-color: #b6c2d1 #f1f4f8;
}
#tableau-module .tableau-container::-webkit-scrollbar-track { background: #f1f4f8; }
#tableau-module .tableau-container::-webkit-scrollbar-thumb { background: #b6c2d1; border-color: #f1f4f8; }
#tableau-module .tableau-table.enhanced { font-family: var(--t-font); background: #fff; }

/* Tutte le colonne dei giorni hanno ESATTAMENTE la stessa larghezza (serve alle barre) */
#tableau-module .tableau-table.enhanced td,
#tableau-module .tableau-table.enhanced th {
    box-sizing: border-box;
    width: var(--t-day-col) !important; min-width: var(--t-day-col) !important; max-width: var(--t-day-col) !important;
    padding: 0 !important;
}
#tableau-module .tableau-table.enhanced th.room-column,
#tableau-module .tableau-table.enhanced td.room-cell {
    width: var(--t-room-col) !important; min-width: var(--t-room-col) !important; max-width: var(--t-room-col) !important;
}

/* Intestazione giorni */
#tableau-module .tableau-table.enhanced thead th {
    height: 52px; background: #fff !important; color: var(--tb-ink) !important;
    border-right: 1px solid var(--tb-line2) !important; border-bottom: 1px solid var(--tb-line) !important; border-left: 0 !important;
    top: 0;
}
#tableau-module .tableau-table.enhanced thead th.we { background: var(--tb-we) !important; }
#tableau-module .day-header { gap: 1px; }
#tableau-module .day-name { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-muted); font-weight: 700; }
#tableau-module .day-number { font-size: 15px; font-weight: 800; color: var(--tb-ink); }
#tableau-module .tableau-table.enhanced thead th.today { background: var(--tb-teal) !important; border-color: var(--tb-teal) !important; }
#tableau-module .tableau-table.enhanced thead th.today .day-name,
#tableau-module .tableau-table.enhanced thead th.today .day-number { color: #fff; }
#tableau-module .tableau-table.enhanced thead th.room-column {
    text-align: left; padding: 0 14px !important; font-size: 12px; font-weight: 800; color: var(--tb-ink) !important;
    background: #fff !important; border-right: 1px solid var(--tb-line) !important; z-index: 40;
}

/* Riga occupazione */
#tableau-module .tableau-table.enhanced thead #tableau-occ th { top: 52px; height: 34px; z-index: 20; }
#tableau-module .tableau-table.enhanced thead #tableau-occ th.room-column { z-index: 40; font-size: 11px; font-weight: 600; color: var(--tb-muted) !important; }
#tableau-module .occ-cell { font-size: 10.5px; line-height: 1.1; }
#tableau-module .occ-cell span { display: block; font-weight: 800; color: var(--tb-ink); }
#tableau-module .occ-cell small { display: none; }
#tableau-module .occ-cell i { display: block; width: 30px; height: 4px; margin: 3px auto 0; border-radius: 2px; background: #e6ecf3; overflow: hidden; }
#tableau-module .occ-cell i u { display: block; height: 100%; background: var(--tb-teal); }
#tableau-module .occ-cell.hi i u { background: #f59e0b; }
#tableau-module .tableau-table.enhanced thead #tableau-occ th.today { background: var(--tb-today) !important; border-color: var(--tb-line2) !important; }

/* Gruppi per tipologia */
#tableau-module .tableau-table.enhanced td.tb2-group-cell {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: 30px; background: #f1f5f9 !important; border-bottom: 1px solid var(--tb-line) !important; border-right: 0 !important;
    text-align: left; cursor: default;
}
#tableau-module .tb2-group-cell > span {
    position: sticky; left: 0; display: inline-flex; align-items: baseline; gap: 8px; padding: 0 14px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #34465f;
}
#tableau-module .tb2-group-cell small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tb-muted); }

/* Colonna camere */
#tableau-module .tableau-table.enhanced td.room-cell {
    background: #fff !important; padding: 0 12px 0 14px !important; height: var(--t-row-h);
    border-right: 1px solid var(--tb-line) !important; border-bottom: 1px solid var(--tb-line) !important; z-index: 10;
}
#tableau-module .room-line { display: flex; align-items: center; gap: 8px; }
#tableau-module .room-number { font-size: 15px; font-weight: 800; color: var(--tb-ink); }
#tableau-module .room-type { font-size: 11px; color: var(--tb-muted); max-width: 140px; }
#tableau-module .room-notes { font-size: 11px; color: #9a5d00; font-style: normal; max-width: 140px; }
#tableau-module .room-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
#tableau-module .room-dot.ok { background: #22c55e; }
#tableau-module .room-dot.occ { background: var(--tb-conf); }
#tableau-module .room-dot.warn { background: #f59e0b; }
#tableau-module .room-dot.off { background: #94a3b8; }

/* Celle giorno */
#tableau-module .tableau-table.enhanced td {
    height: var(--t-row-h);
    border-right: 1px solid var(--tb-line2) !important; border-bottom: 1px solid var(--tb-line) !important;
    border-top: 0 !important; border-left: 0 !important;
    background: #fff !important; box-shadow: none !important; opacity: 1 !important; filter: none !important;
}
#tableau-module .tableau-table.enhanced td.we { background: var(--tb-we) !important; }
#tableau-module .tableau-table.enhanced td.today { background: var(--tb-today) !important; }
#tableau-module .empty-cell:hover { background: #e2f6f8 !important; }
#tableau-module .empty-slot { color: var(--tb-teal); opacity: 0; font-size: 18px; font-weight: 400; line-height: var(--t-row-h); }
#tableau-module .empty-cell:hover .empty-slot { opacity: 1; }

/* Le celle delle prenotazioni restano (servono a clic e trascinamento) ma non si vedono: si vede la barra */
#tableau-module .tableau-table.enhanced td.booking-cell { cursor: pointer; overflow: visible !important; }
#tableau-module .booking-cell .booking-info,
#tableau-module .booking-cell .stay-marker,
#tableau-module .booking-cell .checkout-marker { display: none !important; }
#tableau-module .tableau-table.enhanced td.booking-cell.booking-start,
#tableau-module .tableau-table.enhanced td.booking-cell.booking-cont { z-index: 3; }

/* Celle bloccate */
#tableau-module .tableau-table.enhanced td.blocked-cell {
    background: repeating-linear-gradient(135deg, #e5e9f0 0 6px, #f4f6f9 6px 12px) !important;
    cursor: not-allowed; overflow: visible !important; text-align: left;
}
#tableau-module .tb2-block-lbl {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 2;
    font-size: 11px; font-weight: 700; color: #4b5b72; white-space: nowrap;
    background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 6px; pointer-events: none;
}

/* ---------- Barre prenotazione ---------- */
#tableau-module .tb2-bar {
    position: absolute; top: 6px; bottom: 6px; z-index: 4;
    display: flex; align-items: center; gap: 6px; padding: 0 8px;
    border-radius: 9px; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,27,45,.18); transition: box-shadow .12s, transform .12s;
}
#tableau-module .tb2-bar * { pointer-events: none; }   /* trascinamento e rilascio arrivano sempre alla cella giusta */
#tableau-module .booking-cell:hover .tb2-bar { box-shadow: 0 6px 16px rgba(15,27,45,.22); transform: translateY(-1px); }
#tableau-module .tb2-bar.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#tableau-module .tb2-bar.confirmed { background: var(--tb-conf); }
#tableau-module .tb2-bar.checked_in,
#tableau-module .tb2-bar.checked-in { background: var(--tb-casa); }
#tableau-module .tb2-bar.pending { background: #fff; color: #8a5200; border: 1.5px dashed var(--tb-attesa); box-shadow: none; }
#tableau-module .tb2-bar.checked_out { background: var(--tb-out); }
#tableau-module .tb2-bar.cancelled { background: repeating-linear-gradient(135deg, #f8d3d7 0 6px, #fdecee 6px 12px); color: #a1242f; box-shadow: none; text-decoration: line-through; }
#tableau-module .tb2-bar.no_show { background: repeating-linear-gradient(135deg, #e3d6fb 0 6px, #f3edfe 6px 12px); color: #5b21b6; box-shadow: none; }
#tableau-module .tb2-bar { text-align: left; justify-content: flex-start; }
/* Nelle barre corte si accorcia prima "2 pax · 3n", il nome resta leggibile */
#tableau-module .tb2-name { overflow: hidden; text-overflow: ellipsis; min-width: 3.2em; flex: 1 1 auto; }
#tableau-module .tb2-meta { font-weight: 600; font-size: 11px; opacity: .9; flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
#tableau-module .tb2-ic { width: 14px !important; height: 14px !important; stroke-width: 2.2 !important; }
#tableau-module .tb2-due {
    flex: none; background: #fff; color: var(--tb-due); border-radius: 6px; padding: 1px 6px;
    font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
#tableau-module .tableau-legend .tb2-due { background: #fff1e8; }
#tableau-module .tb2-bar.pending .tb2-due { background: #fff1e8; }
#tableau-module .tb2-paid { flex: none; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; }
#tableau-module .tb2-paid svg { width: 11px; height: 11px; stroke-width: 3; }
/* Barre corte: resta solo l'essenziale */
#tableau-module .tb2-bar .ch-dot { flex: none; }

/* Icone canale: quadratini arrotondati */
#tableau-module .ch-dot {
    width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 800; margin: 0;
    border: 1.5px solid rgba(255,255,255,.85); box-shadow: none; font-family: var(--t-font);
}
#tableau-module .tb2-bar.pending .ch-dot,
#tableau-module .tb2-bar.cancelled .ch-dot,
#tableau-module .tb2-bar.no_show .ch-dot { border-color: transparent; }

/* Overbooking */
#tableau-module .tableau-table.enhanced td.booking-cell.overbooking {
    background: repeating-linear-gradient(135deg, #fecaca 0 6px, #fee2e2 6px 12px) !important; animation: none;
}
#tableau-module .tb2-ob {
    position: absolute; top: 2px; right: 2px; z-index: 6; min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--tb-canc); color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
#tableau-module .overbooking-alert {
    margin: 0; border-radius: 12px; border: 1px solid #fecaca; border-left: 4px solid var(--tb-canc);
    background: #fef2f2;
}

/* Trascinamento */
#tableau-module .drag-over { background: #e2f6f8 !important; outline: 2px dashed var(--tb-teal); outline-offset: -2px; border-radius: 0; }

/* ---------- Riepilogo in basso ---------- */
#tableau-module .tableau-summary { background: transparent !important; border: 0; padding: 0; }
#tableau-module .summary-cards { justify-content: flex-start; }
#tableau-module .summary-card {
    background: #fff; border: 1px solid var(--tb-line); border-radius: 12px; text-align: left; padding: 12px 16px; flex: 0 1 220px;
}
#tableau-module .summary-card h4 { font-size: 11px; letter-spacing: .06em; color: var(--tb-muted); font-weight: 700; }
#tableau-module .summary-value { font-size: 22px; font-weight: 800; color: var(--tb-ink); font-variant-numeric: tabular-nums; }

/* ---------- Tablet e telefono ---------- */
@media (max-width: 768px) {
    #tableau-module { --t-day-col: 40px; --t-room-col: 104px; --t-row-h: 44px; padding: 10px; gap: 10px; }
    #tableau-module .tb2-title { width: 100%; }
    #tableau-module .tableau-controls { width: 100%; }
    #tableau-module .tableau-month-nav { width: 100%; }
    #tableau-module .month-nav-title { margin-left: auto; font-size: 14px; }
    #tableau-module .tableau-controls .btn .btn-text { display: none; }
    #tableau-module .room-type { display: none; }
    #tableau-module .tb2-meta { display: none; }
    #tableau-module .tableau-legend { gap: 10px; }
}

/* ---------- Stampa ---------- */
@media print {
    #tableau-module { background: #fff !important; padding: 0; }
    #tableau-module .tb2-bar { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #tableau-module .tableau-controls { display: none; }
}

/* ===================== SCHEDA PRENOTAZIONE (pannello laterale) ===================== */
#booking-detail-modal.bd-veil {
    --bd-navy: #0e2440; --bd-teal: #0aa5b8; --bd-teal-d: #08808f; --bd-teal-s: #e2f6f8;
    --bd-ink: #0f1b2d; --bd-muted: #5f6f86; --bd-line: #e2e8f0; --bd-bg: #f3f6fa; --bd-due: #c2410c;
    position: fixed; inset: 0; z-index: 9999; background: rgba(15, 27, 45, .28);
    opacity: 0; transition: opacity .2s; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--bd-ink);
}
#booking-detail-modal.bd-veil.open { opacity: 1; }
#booking-detail-modal .bd-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%;
    background: #fff; box-shadow: -20px 0 50px rgba(15, 27, 45, .18);
    display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s ease;
}
#booking-detail-modal.open .bd-drawer { transform: none; }
#booking-detail-modal .bd-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#booking-detail-modal .bd-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--bd-line); }
#booking-detail-modal .bd-row { display: flex; align-items: center; gap: 10px; }
#booking-detail-modal .bd-head h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--bd-ink); line-height: 1.2; }
#booking-detail-modal .bd-head p { margin: 6px 0 0; color: var(--bd-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#booking-detail-modal .ch-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bd-navy); color: #fff; font-size: 12px; font-weight: 800; flex: none; }
#booking-detail-modal .bd-x { width: 36px; height: 36px; border: 1px solid var(--bd-line); border-radius: 10px; background: #fff; color: var(--bd-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#booking-detail-modal .bd-x:hover { background: var(--bd-bg); color: var(--bd-ink); }

#booking-detail-modal .bd-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
#booking-detail-modal .bd-pill.conf { background: #e8f0fe; color: #1e55b8; }
#booking-detail-modal .bd-pill.casa { background: #e7f6ee; color: #0f7a48; }
#booking-detail-modal .bd-pill.attesa { background: #fdf3e1; color: #a86400; }
#booking-detail-modal .bd-pill.out { background: #eef2f6; color: #5f6f86; }
#booking-detail-modal .bd-pill.canc { background: #fdecec; color: #b42323; }
#booking-detail-modal .bd-pill.noshow { background: #f1ebfe; color: #6d28d9; }

#booking-detail-modal .bd-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
#booking-detail-modal .bd-sec h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-muted); font-weight: 700; }
#booking-detail-modal small { color: var(--bd-muted); }

#booking-detail-modal .bd-stay { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--bd-line); border-radius: 12px; }
#booking-detail-modal .bd-stay small { display: block; font-size: 11.5px; font-weight: 600; }
#booking-detail-modal .bd-stay b { font-size: 15px; }
#booking-detail-modal .bd-stay .r { text-align: right; }
#booking-detail-modal .bd-stay .n { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--bd-muted); font-weight: 700; }

#booking-detail-modal .bd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#booking-detail-modal .bd-facts > div { padding: 10px 12px; border-radius: 10px; background: var(--bd-bg); min-width: 0; }
#booking-detail-modal .bd-facts small { display: block; font-size: 11px; font-weight: 600; }
#booking-detail-modal .bd-facts b { display: block; font-size: 14px; }
#booking-detail-modal .bd-facts span { display: block; font-size: 12px; color: var(--bd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#booking-detail-modal .bd-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
#booking-detail-modal .bd-money > div { background: var(--bd-bg); border-radius: 10px; padding: 8px 10px; }
#booking-detail-modal .bd-money small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
#booking-detail-modal .bd-money b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
#booking-detail-modal .bd-money .due { background: #fff1e8; } #booking-detail-modal .bd-money .due b { color: var(--bd-due); }
#booking-detail-modal .bd-money .ok b { color: #0f7a48; }
#booking-detail-modal .bd-bar { height: 6px; border-radius: 3px; background: #eef2f7; overflow: hidden; }
#booking-detail-modal .bd-bar i { display: block; height: 100%; background: #14965a; border-radius: 3px; }

#booking-detail-modal .bd-lines { border: 1px solid var(--bd-line); border-radius: 12px; overflow: hidden; }
#booking-detail-modal .bd-lines > a, #booking-detail-modal .bd-lines > div { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--bd-line); font-size: 13px; color: var(--bd-ink) !important; text-decoration: none; }
#booking-detail-modal .bd-lines > :last-child { border-bottom: 0; }
#booking-detail-modal .bd-lines > a:hover { background: var(--bd-bg); }
#booking-detail-modal .bd-lines .bd-ic { color: var(--bd-teal-d); margin-top: 1px; }
#booking-detail-modal .bd-lines span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#booking-detail-modal .bd-lines span small { display: block; font-size: 11px; font-weight: 600; }

#booking-detail-modal .bd-lock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bd-line); border-radius: 12px; }
#booking-detail-modal .bd-lock > .bd-ic { color: var(--bd-muted); }
#booking-detail-modal #lock-label { flex: 1; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#booking-detail-modal .bd-switch { position: relative; width: 50px; height: 26px; flex: none; cursor: pointer; }
#booking-detail-modal .bd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
#booking-detail-modal #lock-slider { position: absolute; inset: 0; border-radius: 26px; transition: background .2s; }
#booking-detail-modal #lock-slider[style*="2ecc71"] { background: var(--bd-teal) !important; }
#booking-detail-modal #lock-slider[style*="ccc"] { background: #cbd5e1 !important; }
#booking-detail-modal #lock-knob { position: absolute; bottom: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; pointer-events: none; }

#booking-detail-modal .bd-move { margin-top: 8px; border: 1px solid var(--bd-line); border-radius: 12px; padding: 0 12px; }
#booking-detail-modal .bd-move summary { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
#booking-detail-modal .bd-move summary::-webkit-details-marker { display: none; }
#booking-detail-modal .bd-move summary .bd-ic { color: var(--bd-teal-d); }
#booking-detail-modal .bd-move > small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 6px; }
#booking-detail-modal .bd-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 12px; }
#booking-detail-modal .bd-room { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1px solid var(--bd-line); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; min-width: 0; }
#booking-detail-modal .bd-room b { font-size: 14px; color: var(--bd-ink); }
#booking-detail-modal .bd-room small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#booking-detail-modal .bd-room:hover { border-color: var(--bd-teal); background: var(--bd-teal-s); }

#booking-detail-modal .bd-foot { padding: 14px 20px; border-top: 1px solid var(--bd-line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#booking-detail-modal .bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--bd-line); border-radius: 10px; background: #fff; color: var(--bd-ink); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
#booking-detail-modal .bd-btn:hover { background: var(--bd-bg); }
#booking-detail-modal .bd-btn.pri { background: var(--bd-teal); border-color: var(--bd-teal); color: #fff; }
#booking-detail-modal .bd-btn.pri:hover { background: var(--bd-teal-d); }
#booking-detail-modal .bd-btn.wide { grid-column: 1 / -1; height: 46px; font-size: 14.5px; }

@media (max-width: 520px) {
    #booking-detail-modal .bd-drawer { width: 100%; }
    #booking-detail-modal .bd-head, #booking-detail-modal .bd-body, #booking-detail-modal .bd-foot { padding-left: 16px; padding-right: 16px; }
}