/* OwnerApp minimal overrides for Sticky Mobile Template + Bootstrap 5
   Keep this file lightweight. Only add targeted fixes or design tokens used by new UI elements.
*/

:root{
  /* Design tokens */
  --brand-primary:#003680;
  --brand-primary-600:#002e6b;
  --brand-primary-700:#002760;
  --text-body:#1f2937;
  --text-muted:#6b7280;
  --bg-surface:#ffffff;
  --bg-muted:#f5f7fb;
  --radius-sm:6px;
  --radius-md:10px;
  --shadow-sm:0 2px 6px rgba(0,0,0,0.08);
  --shadow-md:0 4px 12px rgba(0,0,0,0.12);
}

/* Utilities */
.text-brand{ color:var(--brand-primary)!important; }
.bg-brand{ background-color:var(--brand-primary)!important; color:#fff!important; }
.shadow-token-sm{ box-shadow:var(--shadow-sm)!important; }
.radius-sm{ border-radius:var(--radius-sm)!important; }
.radius-md{ border-radius:var(--radius-md)!important; }

/* Chips (used by filters such as Reservations) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background-color:var(--bg-muted); color:var(--text-body); border:1px solid #e5e7eb; font-size:12px; }
.chip .chip-clear{ border:none; background:transparent; color:var(--text-muted); cursor:pointer; padding:0; font-size:14px; line-height:1; }
.chip.toggle{ cursor:pointer; }
.chip.active{ background-color: rgba(0,54,128,0.1); border-color: var(--brand-primary); color: var(--brand-primary); }

/* Minor layout refinements that layer on Bootstrap 5 */
.header .page-title{ font-weight:700; }
.card.card-style.shadow-sm{ box-shadow:var(--shadow-sm)!important; }

/* Reservations toolbar refinement (kept minimal) */
#reservationsToolbar{ border-radius:10px; }


/* KPI tiles used on Reservations Insights */
.kpi-tile {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 10px 8px;
  height: 100%;
}
.kpi-tile .kpi-label {
  font-size: 12px;
  color: #6c757d;
}
.kpi-tile .kpi-value {
  font-weight: 700;
  font-size: 18px;
  color: #003680;
}

/* Make charts breathe inside cards */
#resMonthlyChart { max-height: 280px; }

/* Polished list rhythm in Reservations */
ol .reservation-info { background-color: #fff; }
ol .reservation-info .badge { min-width: 36px; text-align: center; }

/* Current/Next guest cards */
.guest-card{ border:1px solid #e9ecef; border-radius:10px; background:#fff; padding:12px; box-shadow:var(--shadow-sm); }
.guest-card .gc-header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.guest-card .gc-body{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guest-card .gc-name{ font-weight:700; color:var(--text-body); }
.guest-card .gc-dates{ color:#6c757d; font-size:13px; }
.guest-card .gc-rent{ color:#6c757d; font-weight:600; }