/* KTM Voyage CRM — availability module styles [AVL].
   Month grid (rooms × days), property switcher, legend, source colours.
   Brand tokens come from base.css (--gold, --line, --paper, …). */

/* ---------- property switcher (big click targets — Vasko-proof) ---------- */
.avl-props{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.avl-prop{display:flex;align-items:center;gap:12px;padding:12px 18px;min-width:220px;
  background:#fff;border:2px solid var(--line);border-radius:12px;text-align:left}
.avl-prop:hover{border-color:var(--gold-2);background:#fbf7e6}
.avl-prop.on{border-color:var(--gold);background:#fbf7e6;box-shadow:0 0 0 3px rgba(204,181,45,.18)}
.avl-prop-ic{font-size:24px}
.avl-prop-txt b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:16px;color:#292109}
.avl-prop-txt small{color:var(--muted);font-size:12px}

/* ---------- month bar ---------- */
.avl-monthbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.avl-monthbar .btn{min-width:40px}
.avl-monthtitle{font-family:"Playfair Display",Georgia,serif;font-size:19px;color:#292109;min-width:170px;text-align:center}
.avl-count{color:var(--muted);font-size:12.5px;white-space:nowrap}
.avl-monthbar .mb-spacer{flex:1}
.avl-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- grid ---------- */
.avl-gridwrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.avl-table{border-collapse:separate;border-spacing:0;width:100%;min-width:900px}
.avl-table th,.avl-table td{border-bottom:1px solid #f0eee6;border-right:1px solid #f5f3ec}
.avl-table thead th{position:sticky;top:0;background:#faf8f1;z-index:3;padding:7px 2px 5px;font-size:11px;color:var(--muted)}
.avl-table thead th.day{min-width:34px;text-align:center;font-weight:600}
.avl-table thead th.day .dw{display:block;font-size:9.5px;color:var(--muted-2);text-transform:uppercase}
.avl-table thead th.day b{font-size:12.5px;color:var(--ink)}
.avl-table thead th.day.today b{color:#211a05;background:var(--gold);border-radius:50%;display:inline-block;width:20px;height:20px;line-height:20px}
.avl-roomhead{text-align:left;padding:7px 12px !important;min-width:160px}
.avl-roomcell{position:sticky;left:0;background:#fff;z-index:2;text-align:left;padding:6px 10px;min-width:160px;max-width:210px;border-right:1px solid var(--line) !important}
.avl-roomrow{display:flex;align-items:center;gap:6px;justify-content:space-between}
.avl-roomname b{display:block;font-size:13px;color:var(--ink);font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avl-roomname small{display:block;color:var(--muted-2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avl-roomedit{background:none;border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12px;color:var(--muted);flex:0 0 auto}
.avl-roomedit:hover{border-color:var(--gold);color:#292109;background:#fbf7e6}

/* cells */
.avl-cell{height:40px;min-width:34px;padding:0;position:relative}
.avl-cell.free{cursor:pointer}
.avl-cell.free:hover{background:#fbf7e6;box-shadow:inset 0 0 0 2px var(--gold-2)}
.avl-cell.free.wkend{background:#f7f5ee}
.avl-cell.free.wkend:hover{background:#fbf7e6}
.avl-cell.today{box-shadow:inset 2px 0 0 var(--gold),inset -2px 0 0 var(--gold)}
.avl-cell.occ{cursor:pointer}
.avl-cell.occ:hover{filter:brightness(1.12)}
.avl-cell.occ.is-start{border-radius:8px 0 0 8px}
.avl-cell.occ.is-end{border-radius:0 8px 8px 0}
.avl-cell.occ.is-start.is-end{border-radius:8px}
.avl-lbl{position:absolute;left:5px;top:50%;transform:translateY(-50%);color:#fff;font-size:10px;font-weight:700;
  white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:1}

/* source colours (legend chips share these classes) */
.src-tui{background:#5987cb}
.src-bookingcom{background:#6a4bb0}
.src-direct{background:#2f9e51}
.src-operator{background:#c98a1a}
.st-blocked{background:repeating-linear-gradient(45deg,#8a909b,#8a909b 6px,#767c87 6px,#767c87 12px)}

/* ---------- legend ---------- */
.avl-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.avl-legend b{color:var(--ink)}
.avl-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.avl-chip i{display:inline-block;width:16px;height:12px;border-radius:3px}
.avl-note{flex-basis:100%;color:var(--muted-2)}

/* ---------- modal form ---------- */
.avl-form2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avl-foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.avl-foot .spacer{flex:1}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .avl-prop{min-width:0;flex:1;padding:10px 12px}
  .avl-form2{grid-template-columns:1fr}
  .avl-roomcell,.avl-roomhead{min-width:120px}
  .avl-monthtitle{min-width:0}
}

/* ---------- print: a clean month grid (title + legend stay, buttons go) ---------- */
@media print{
  .avl-props,.avl-actions,.avl-roomedit,.avl-monthbar .btn,.avl-note,.mb-spacer{display:none !important}
  .avl-monthbar{margin-bottom:6px}
  .avl-gridwrap{overflow:visible;box-shadow:none;border-color:#999}
  .avl-table{min-width:0}
}

/* ---------- P2 polish: long booking-ref labels stay inside the grid ---------- */
.avl-lbl{max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* ---------- QoL: occupancy % in the month bar ---------- */
.avl-occ{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.avl-occ b{color:#292109;font-size:13px}
.avl-occbar{display:inline-block;width:72px;height:8px;border-radius:99px;background:#eeeadb;overflow:hidden;vertical-align:middle}
.avl-occbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.avl-roomnights{flex:0 0 auto;background:#fbf7e6;border:1px solid #e6dcae;border-radius:999px;
  padding:2px 8px;font-size:11px;font-weight:800;color:#8a7a1d;font-variant-numeric:tabular-nums}

/* ---------- QoL: "vandaag" marker line ---------- */
.avl-table thead th.day.today{position:sticky;box-shadow:inset 2px 0 0 var(--gold),inset -2px 0 0 var(--gold)}
.avl-todaytag{display:block;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a7a1d;margin-top:1px}

/* ---------- QoL: legend chips are toggle buttons (source filter) ---------- */
.avl-legend .avl-chip{background:none;border:1px solid transparent;border-radius:999px;padding:4px 10px;
  cursor:pointer;min-height:32px;font-family:inherit;font-size:12.5px}
.avl-legend .avl-chip:hover{border-color:var(--gold);background:#fbf7e6}
.avl-legend .avl-chip.off{opacity:.4;text-decoration:line-through}
.avl-cell.occ.is-dim{opacity:.16}

/* ---------- QoL: multi-day quick-block paint mode ---------- */
.avl-mode-on{border-color:var(--gold)!important;background:#fbf7e6!important;color:#292109!important;
  box-shadow:0 0 0 3px rgba(204,181,45,.18)}
.avl-blockbanner{background:#fbf7e6;border:1px solid #e6dcae;border-radius:var(--radius);
  padding:10px 15px;margin-bottom:12px;font-size:13.5px;font-weight:700;color:#6b5f22}
.avl-cell.free.anchor{background:#f2e9c0;box-shadow:inset 0 0 0 2px var(--gold)}
.avl-cell.free.paint{background:#f2e9c0;box-shadow:inset 0 -3px 0 var(--gold)}

/* ---------- QoL: multi-room block modal ---------- */
.avl-mb-hint{color:var(--muted);font-size:12.5px;margin:2px 0 12px}
.avl-mb-rooms{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;max-height:220px;overflow-y:auto;
  border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin-top:6px;background:#fff}
.avl-mb-room{margin:4px 0}
.avl-mb-room small{color:var(--muted-2)}
@media (max-width:600px){.avl-mb-rooms{grid-template-columns:1fr}}

/* ---------- QoL: entry details popover ---------- */
.avl-popover{position:fixed;z-index:60;width:250px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 38px rgba(20,24,34,.22);padding:12px 14px;animation:avlPopIn .12s ease-out}
@keyframes avlPopIn{from{transform:translateY(4px);opacity:.4}to{transform:none;opacity:1}}
.avl-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.avl-pop-head b{font-size:14px;overflow-wrap:anywhere}
.avl-pop-body{display:flex;flex-direction:column;gap:5px}
.avl-pop-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.avl-pop-row span{color:var(--muted)}
.avl-pop-row b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.avl-pop-foot{display:flex;justify-content:flex-end;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
@media print{.avl-popover,.avl-blockbanner{display:none!important}}
