/* Villa PMS — visual theme. Bootstrap 5 is the base; this is only a thin layer. */
:root {
  --vp-sand:      #f6f3ee;
  --vp-ink:       #2a2521;
  --vp-teal:      #14746f;
  --vp-teal-dark: #0d5551;
  --vp-teal-soft: #e5f2f0;
  --vp-clay:      #c05621;
  --vp-line:      #e3ddd3;
  --vp-sidebar:   #1d2b2a;
  --vp-radius:    .65rem;
}

body {
  background: var(--vp-sand);
  color: var(--vp-ink);
  font-size: .925rem;
}

/* ── Shell ──────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 236px; flex: 0 0 236px;
  background: var(--vp-sidebar);
  color: #cfd8d6;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark { font-size: 1.5rem; line-height: 1; }
.brand-text strong { display: block; color: #fff; font-size: .92rem; line-height: 1.2; }
.brand-text small  { color: #8fa5a2; font-size: .7rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .5rem; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .7rem; margin-bottom: .12rem;
  border-radius: var(--vp-radius);
  color: #b9c7c5; text-decoration: none; font-size: .875rem;
  transition: background .12s, color .12s;
}
.sidebar-nav .nav-item i { width: 1.1rem; font-size: 1rem; }
.sidebar-nav .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav .nav-item.active { background: var(--vp-teal); color: #fff; font-weight: 500; }

.sidebar-footer { padding: .7rem; border-top: 1px solid rgba(255,255,255,.08); }
.shift-chip {
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; padding: .4rem .6rem; border-radius: var(--vp-radius);
}
.shift-chip.open   { background: rgba(20,116,111,.28); color: #7fe0d6; }
.shift-chip.closed { background: rgba(255,255,255,.06); color: #8fa5a2; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.1rem; background: #fff;
  border-bottom: 1px solid var(--vp-line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-size: 1.02rem; font-weight: 600; margin: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.topbar-date { font-size: .8rem; color: #7a736b; }

.app-content { flex: 1; padding: 1.1rem; }
.app-footer {
  display: flex; justify-content: space-between;
  padding: .6rem 1.1rem; font-size: .75rem; color: #8b837a;
  border-top: 1px solid var(--vp-line);
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; z-index: 1040; left: -240px; transition: left .2s;
  }
  .app-sidebar.show { left: 0; }
  .app-content { padding: .8rem; }
}

/* ── Components ─────────────────────────────────────────────── */
.card { border: 1px solid var(--vp-line); border-radius: var(--vp-radius); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; border-bottom: 1px solid var(--vp-line); font-weight: 600; font-size: .9rem; }

.stat-card { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; }
.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #8b837a; }
.stat-card .stat-value { font-size: 1.45rem; font-weight: 650; line-height: 1.15; }
.stat-card .stat-hint  { font-size: .75rem; color: #8b837a; }
.stat-card.accent-teal .stat-value { color: var(--vp-teal); }
.stat-card.accent-clay .stat-value { color: var(--vp-clay); }

.table { font-size: .865rem; }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #8b837a; font-weight: 600; }
.table-hover tbody tr:hover { background: var(--vp-teal-soft); }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-money-neg { color: #b02a37; }

.badge-status { font-weight: 500; font-size: .72rem; padding: .3em .6em; }

.btn-teal { background: var(--vp-teal); border-color: var(--vp-teal); color: #fff; }
.btn-teal:hover { background: var(--vp-teal-dark); border-color: var(--vp-teal-dark); color: #fff; }
.btn-outline-teal { border-color: var(--vp-teal); color: var(--vp-teal); }
.btn-outline-teal:hover { background: var(--vp-teal); color: #fff; }

.form-label { font-size: .8rem; font-weight: 500; margin-bottom: .25rem; }
.form-text { font-size: .74rem; }
.required::after { content: ' *'; color: #b02a37; }

/* ── Timeline calendar ──────────────────────────────────────── */
.timeline-wrap { overflow-x: auto; border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: #fff; }
table.timeline { border-collapse: separate; border-spacing: 0; font-size: .78rem; min-width: max-content; }
table.timeline th, table.timeline td { border-right: 1px solid var(--vp-line); border-bottom: 1px solid var(--vp-line); }
table.timeline thead th {
  position: sticky; top: 0; z-index: 3; background: #fff;
  min-width: 40px; text-align: center; padding: .25rem .1rem; font-weight: 500;
}
table.timeline thead th.tl-weekend { background: #fdf6ec; }
table.timeline thead th.tl-today   { background: var(--vp-teal); color: #fff; }
table.timeline th.tl-room {
  position: sticky; left: 0; z-index: 4; background: #fff;
  min-width: 108px; max-width: 108px; text-align: left; padding: .3rem .5rem;
}
table.timeline thead th.tl-room { z-index: 6; }
table.timeline td { height: 34px; padding: 0; position: relative; background: #fff; }
table.timeline td.tl-weekend { background: #fffdf8; }
table.timeline td.tl-today   { box-shadow: inset 2px 0 0 var(--vp-teal); }
table.timeline td.tl-past    { background: #faf9f7; }

.tl-bar {
  position: absolute; inset: 3px 1px; border-radius: 4px;
  color: #fff; font-size: .7rem; line-height: 28px;
  padding: 0 .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer; text-decoration: none; display: block;
}
.tl-bar:hover { filter: brightness(1.12); color: #fff; }
.tl-bar.status-tentative { opacity: .72; border: 1px dashed rgba(255,255,255,.75); }
.tl-bar.status-checked_in { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.tl-block { position: absolute; inset: 3px 1px; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #d6d0c6, #d6d0c6 5px, #c8c1b5 5px, #c8c1b5 10px);
  color: #4a453e; font-size: .68rem; line-height: 28px; padding: 0 .4rem; overflow: hidden; }
.tl-cell-free { cursor: crosshair; }
.tl-cell-free.selecting { background: var(--vp-teal-soft) !important; }

/* ── Housekeeping board ─────────────────────────────────────── */
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .7rem; }
.hk-card { border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: #fff; padding: .65rem .7rem; }
.hk-card .hk-room { font-weight: 650; font-size: 1rem; }
.hk-card .hk-type { font-size: .72rem; color: #8b837a; }
.hk-card .hk-guest { font-size: .76rem; margin-top: .3rem; }
.hk-status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; }

/* ── POS ────────────────────────────────────────────────────── */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .55rem; }
.pos-product {
  border: 1px solid var(--vp-line); border-radius: var(--vp-radius); background: #fff;
  padding: .55rem .6rem; cursor: pointer; text-align: left; transition: border-color .12s, transform .06s;
}
.pos-product:hover { border-color: var(--vp-teal); }
.pos-product:active { transform: scale(.98); }
.pos-product .p-name { font-size: .82rem; font-weight: 500; line-height: 1.25; }
.pos-product .p-price { font-size: .78rem; color: var(--vp-teal); font-weight: 600; }
.pos-cart { position: sticky; top: 4.5rem; }

/* ── Rate calendar ───────────────────────────────── */
.rate-cal-scroll { overflow-x: auto; }
.rate-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; min-width: 700px; }
.rate-dow { text-align: center; font-size: .74rem; font-weight: 500; color: #8b837a; }
.rate-day {
  border: 1px solid var(--vp-line); border-radius: var(--vp-radius);
  padding: .45rem .5rem; min-height: 96px;
}
.rate-day.rate-cell { cursor: pointer; }
.rate-day.rate-cell:hover { border-color: var(--vp-teal); }
.rate-day .rate-num { font-weight: 650; }
.rate-day .rate-sold { font-size: .72rem; color: #8b837a; }
.rate-day .rate-amount { font-size: .82rem; font-weight: 600; }
.rate-day .rate-src { font-size: .68rem; color: #8b837a; line-height: 1.25; }
.rate-day .rate-flags { font-size: .66rem; }

/* ── Print ──────────────────────────────────────────────────── */
.print-sheet { background: #fff; max-width: 800px; margin: 0 auto; padding: 2rem; }
.print-sheet.thermal { max-width: 302px; padding: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
@media print {
  .app-sidebar, .app-topbar, .app-footer, .no-print { display: none !important; }
  .app-content { padding: 0; }
  body { background: #fff; }
  .print-sheet { box-shadow: none; max-width: none; padding: 0; }
}