:root {
  --gold: #ff8a1f;
  --gold-dark: #e56d00;
  --ink: #0a1554;
  --ink-soft: #3a4a8c;
  --cyan: #29b6f6;
  --cream: #f2f6fc;
  --card-radius: 14px;
}

body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Public site ---------- */
.navbar-luxury {
  background: var(--ink);
}
.navbar-luxury .navbar-brand {
  padding: 0;
}
.brand-logo {
  width: 63px;
  height: auto;
  border-radius: 24px;
  display: block;
}
.brand-logo-footer {
  height: 56px;
}
.navbar-luxury .nav-link {
  color: #e9e6de !important;
}
.navbar-luxury .nav-link:hover { color: var(--gold) !important; }

.hero {
  background: linear-gradient(120deg, #050b2e 0%, #0a1554 45%, #0d3a7a 100%);
  color: #fff;
  padding: 110px 0 90px;
}
.hero h1 { font-family: Georgia, serif; font-weight: 700; }

.search-card {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
  margin-top: -60px;
  position: relative;
  z-index: 5;
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
}
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.text-gold { color: var(--gold) !important; }

.badge.bg-gold { background: var(--gold); font-size: .7rem; }

.resort-card, .room-card {
  border: none;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,20,20,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}
.resort-card:hover, .room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20,20,20,.14);
}
.resort-card img, .room-card img { height: 210px; object-fit: cover; width: 100%; }
.img-placeholder {
  height: 210px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #dcecfb, var(--cyan));
  color: #0a1554; font-size: 2.4rem;
}
.img-placeholder.sm { height: 90px; font-size: 1.4rem; }
.img-placeholder.cover { height: 320px; font-size: 3rem; }

/* Food menu/specials/order thumbnails — fixed square so every item (regardless of the
   uploaded photo's own dimensions) renders at the same size instead of stretching to its
   native resolution. object-fit:cover keeps the crop centered without distortion. */
.menu-thumb { width: 84px; height: 84px; min-width: 84px; flex-shrink: 0; object-fit: cover; border-radius: .5rem; }
.img-placeholder.menu-thumb { width: 84px; height: 84px; min-width: 84px; font-size: 1.6rem; }
@media (max-width: 480px) {
  .menu-thumb { width: 64px; height: 64px; min-width: 64px; }
  .img-placeholder.menu-thumb { width: 64px; height: 64px; min-width: 64px; }
}

.badge-rating {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
}

.section-title {
  font-family: Georgia, serif;
  color: var(--ink);
  position: relative;
  margin-bottom: 30px;
}
.section-title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin-top: 10px;
}

.amenity-pill {
  background: #e5f0fb;
  color: var(--ink);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px;
}

footer.site-footer {
  background: var(--ink);
  color: #cfd3d8;
  padding: 40px 0 20px;
}
footer.site-footer a { color: #e9e6de; }
.rtable-row img {
    width: 93px;
}
/* ---------- Dashboards (admin / manager / reception / guest account) ---------- */
.dash-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  background: var(--ink);
  color: #cfd3d8;
  width: 250px;
  flex-shrink: 0;
}
.dash-sidebar .brand {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 1.2rem;
}
.dash-sidebar a.nav-link {
  color: #cfd3d8;
  border-radius: 8px;
  margin-bottom: 2px;
  font-size: .85rem;
  padding: .4rem .75rem;
}
.dash-sidebar a.nav-link.active, .dash-sidebar a.nav-link:hover {
  background: rgba(184,147,74,.18);
  color: var(--gold);
}
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: #8a8f98;
  letter-spacing: .04em;
  font-size: .72rem;
  padding: .3rem .5rem;
  margin-bottom: .1rem;
  cursor: pointer;
}
.nav-group-toggle:hover { color: var(--gold); }
.nav-group-toggle .toggle-caret { font-size: .7rem; transition: transform .2s ease; }
.nav-group-toggle[aria-expanded="true"] .toggle-caret { transform: rotate(180deg); }
/* min-width: 0 overrides the flex item's default min-width: auto, which otherwise
   refuses to shrink below its content's natural width — with a wide .rtable inside
   (see .rtable's own min-width: max-content below), that stretched the WHOLE page
   (sidebar included) and put the scrollbar at the bottom of the browser window instead
   of letting .rtable contain its own horizontal scroll where the table actually is. */
.dash-main { background: #f4f2ed; min-height: 100vh; min-width: 0; }

/* Mobile/tablet top bar: logo left, notification + menu icons right (below the md
   breakpoint only — desktop keeps the full sidebar, no top bar needed). Floating rounded
   card with margin on all sides, not a flush edge-to-edge strip. */
.mobile-topbar {
  margin: 12px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(20,20,20,.08);
}
.mobile-topbar-logo { height: 32px; }
.mobile-topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #f1f2f5; color: var(--ink); border: none; font-size: .9rem;
}
.topbar-icon-btn:hover, .topbar-icon-btn:active { background: #e5e7eb; color: var(--ink); }
.topbar-icon-btn .badge { font-size: .55rem; padding: .25em .4em; }

.stat-card {
  border: none;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 18px rgba(20,20,20,.06);
  background: #fff;
}
.stat-card .stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(184,147,74,.15);
  color: var(--gold);
  font-size: 1.3rem;
}

.table-luxury thead { background: #e5f0fb; }

/* ---------- Responsive data list (replaces <table> everywhere) ---------- */
.rtable {
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 18px rgba(20,20,20,.06);
  overflow-x: auto;
  overflow-y: hidden;
}
.rtable-row { font-size: .92rem; }
.rtable-empty { padding: 24px 16px; text-align: center; color: var(--ink-soft); }
.rtable-cell { min-width: 0; overflow-wrap: break-word; }
.rtable-cell.text-end { text-align: right; }

/* Desktop/tablet: .rtable-head and every .rtable-row are just markers in the markup —
   display:contents removes their OWN box and promotes their .rtable-cell children to be
   direct items of ONE shared grid on .rtable itself. This is deliberate, not incidental:
   .rtable-head and each .rtable-row used to be separate grid containers that each sized
   their own columns from their own content, so a row with a long guest name and the
   header with a short label could each land on DIFFERENT column widths — scrolling then
   showed cells drifted out from under their headers. One shared grid means every column's
   width is computed once, across every row's content, so headers and cells always line
   up — exactly how a real <table> auto-sizes columns.

   min-width: max-content lives on the CELLS (grid items), not on .rtable (the grid
   container) — that distinction matters: .rtable's own min-width stays the default
   "auto", which combined with its overflow-x:auto above is exactly the condition that
   makes flexbox treat a wide child as contributing ZERO to its ancestors' width (.rtable
   sits inside .card, a flex column) — that's what stops the whole page (sidebar
   included) from stretching to match the table, confining the scrollbar to .rtable
   itself. Putting min-width: max-content directly on .rtable instead (tried once) skips
   that automatic-zero rule entirely, since it only applies when min-width computes to
   "auto" — an explicit value is used as-is and DOES propagate outward, which is exactly
   what dragged the scrollbar back down to the bottom of the browser window. Forcing the
   cells themselves to their content width still makes the grid's tracks overflow
   .rtable's given width (triggering its scrollbar) without .rtable ever declaring that
   width itself. */
@media (min-width: 768px) {
  .rtable {
    display: grid;
    grid-template-columns: var(--rtable-cols, 1fr);
    column-gap: 10px;
    align-items: center;
  }
  .rtable-head, .rtable-row { display: contents; }
  /* display:contents boxes don't paint their own background/color — since .rtable-head
     itself no longer has a box, the header styling lives on its cell divs instead. */
  .rtable-head > div {
    background: #e5f0fb;
    font-weight: 600;
    font-size: .8rem;
    color: var(--ink);
    padding: 12px 16px;
    min-width: max-content;
  }
  .rtable-row > .rtable-cell { padding: 12px 16px; border-top: 1px solid #eee; transition: background .8s ease; min-width: max-content; }
  .rtable-row:hover > .rtable-cell { background: #f7fafd; }
  .rtable-row.highlight > .rtable-cell { background: rgba(255,138,31,.18); }
  /* .rtable-empty is a direct child of the grid too (no row wrapper) — span every
     column instead of collapsing into just the first, narrow one. */
  .rtable-empty { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .rtable-head { display: none; }
  .rtable-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid #eee;
    transition: background .8s ease;
  }
  .rtable-row:hover { background: #f7fafd; }
  .rtable-row.highlight { background: rgba(255,138,31,.18); }
  .rtable-cell {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    text-align: right;
  }
  .rtable-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ink-soft);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
    flex-shrink: 0;
  }
  .rtable-cell[data-label=""]::before,
  .rtable-cell:not([data-label])::before { content: none; }
}

.status-pill {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status-pending, .status-received { background: #fff3cd; color: #856404; }
.status-confirmed, .status-assigned, .status-reserved { background: #d1ecf1; color: #0c5460; }
.status-checked_in, .status-processing, .status-preparing, .status-occupied { background: #cfe2ff; color: #084298; }
.status-completed, .status-delivered, .status-served, .status-ready, .status-active, .status-available, .status-in_stock, .status-success, .status-paid { background: #d4edda; color: #155724; }
.status-cancelled, .status-no_show, .status-failed, .status-blocked, .status-inactive, .status-out_of_stock, .status-unpaid { background: #f8d7da; color: #721c24; }
.status-maintenance, .status-cleaning, .status-partial, .status-temporarily_unavailable { background: #e2d9f3; color: #4b2e83; }
.status-new, .status-accepted, .status-out_for_delivery, .status-billed_to_room { background: #cfe2ff; color: #084298; }

/* ---------- Kitchen Management: requirement/purchase-request statuses + priority badges ---------- */
.status-under_review, .status-ordered { background: #cfe2ff; color: #084298; }
.status-approved { background: #d4edda; color: #155724; }
.status-rejected { background: #f8d7da; color: #721c24; }
.status-partially_received { background: #e2d9f3; color: #4b2e83; }

.priority-pill {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: capitalize;
}
.priority-low { background: #e2e3e5; color: #41464b; }
.priority-medium { background: #d1ecf1; color: #0c5460; }
.priority-high { background: #ffe5cc; color: #a35300; }
.priority-urgent { background: #f8d7da; color: #721c24; }

.kanban-col { background: #fff; border-radius: var(--card-radius); padding: 12px; min-height: 300px; }
.kanban-card { background: var(--cream); border-radius: 10px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }

.tier-badge-Bronze { background:#cd7f32; color:#fff; }
.tier-badge-Silver { background:#adb5bd; color:#fff; }
.tier-badge-Gold { background:#d4af37; color:#fff; }
.tier-badge-VIP { background:#1c2430; color:var(--gold); }

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, #050b2e 0%, #0a1554 45%, #0d3a7a 100%);
}
.auth-card {
  border-radius: var(--card-radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  border: none;
}

@media (max-width: 767px) {
  .dash-sidebar { position: fixed; left: -260px; top: 0; z-index: 1050; transition: left .2s; }
  .dash-sidebar.show { left: 0; }
}

/* Hides the app chrome (sidebar, mobile topbar, page title + notification bell) on any
   print — dedicated Print buttons on invoice/receipt pages already load their own
   invoice-print.css/receipt-print.css with an equivalent rule, but style.css is loaded on
   every dashboard page, so this covers printing any page directly (e.g. browser Ctrl+P). */
@media print {
  .dash-sidebar, .no-print { display: none !important; }
  .dash-main { margin-left: 0 !important; width: 100% !important; }
  body { background: #fff !important; }
}

/* ---------- Manual invoicing: type-picker cards + icon picker (includes/manual_invoice_form.php) ---------- */
.type-card { border:1px solid #e3e6ea; border-radius: var(--card-radius); padding:14px; cursor:pointer; background:#fff; height:100%; transition:border-color .15s, box-shadow .15s; }
.type-card:hover { border-color: var(--gold); }
.type-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,147,74,.25); background: rgba(184,147,74,.06); }
.type-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: rgba(184,147,74,.15); color: var(--gold); font-size:1.1rem; margin-bottom:8px; }
.type-card-add { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-style:dashed; color:#6c757d; }
.icon-pick-btn { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid #e3e6ea; border-radius:8px; cursor:pointer; }
.icon-pick-btn.active { border-color: var(--gold); background: rgba(184,147,74,.15); color: var(--gold); }
.invoice-logo-preview { max-width:100%; max-height:60px; object-fit:contain; border:1px solid #e3e6ea; border-radius:6px; padding:2px; }

/* ---------- Guest Communication: two-pane chat-style layout (includes/guest_communication.php) ---------- */
.gc-shell {
  display: flex;
  align-items: stretch;
  height: min(74vh, 720px);
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--card-radius);
}
.chat-list {
  width: 300px;
  flex: none;
  border-right: 1px solid #e3e6ea;
  overflow-y: auto;
  background: #fbfbfd;
}
.chat-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f4;
  text-decoration: none;
  color: var(--ink);
}
.chat-list-item:hover { background: #f2f4fa; }
.chat-list-item.active { background: rgba(255,138,31,.12); border-left: 3px solid var(--gold); padding-left: 11px; }
.chat-avatar {
  flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem;
}
.chat-avatar-lg { width: 46px; height: 46px; font-size: 1.05rem; }
.chat-list-item-body { min-width: 0; }
.chat-list-item-name { display: block; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item-preview { display: block; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-pane-empty, .chat-thread-empty { margin: auto; color: var(--ink-soft); text-align: center; padding: 24px; }
.chat-pane-header { padding: 14px 18px; border-bottom: 1px solid #e3e6ea; }
.chat-pane-back { display: none; font-size: .85rem; color: var(--ink-soft); text-decoration: none; margin-bottom: 8px; }
.chat-pane-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.chat-pane-name:hover { color: var(--gold-dark); }

.chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; background: #fbfbfd; display: flex; flex-direction: column; }
.chat-bubble { background: #fff; border: 1px solid #e3e6ea; border-left: 3px solid var(--cyan); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; max-width: 640px; }
.chat-bubble-sms { border-left-color: var(--gold); }
.chat-bubble-whatsapp { border-left-color: #25d366; }
.chat-bubble-meta { font-size: .78rem; margin-bottom: 4px; }
.chat-bubble-text { font-size: .9rem; white-space: pre-wrap; }

.chat-composer { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid #e3e6ea; }

@media (max-width: 767px) {
  .gc-shell { height: auto; min-height: 0; }
  .chat-list { width: 100%; max-height: 65vh; }
  .chat-pane { display: none; }
  .gc-conv-open .chat-list { display: none; }
  .gc-conv-open .chat-pane { display: flex; max-height: 75vh; }
  .chat-pane-back { display: inline-block; }
}

/* ---------- Bulk room-status form (includes/room_bulk_block_form.php) ---------- */
.room-block-panel { border: none; border-radius: var(--card-radius); box-shadow: 0 4px 20px rgba(10,21,84,.09); overflow: hidden; }
.room-block-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--ink) 0%, #16215f 100%);
  color: #fff; border: none; padding: 16px 20px;
  font-weight: 600; font-size: .95rem; text-align: left; cursor: pointer;
}
.room-block-toggle-icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(255,138,31,.22); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.room-block-toggle-label { flex: 1; }
.room-block-chevron { transition: transform .2s ease; opacity: .8; }
.room-block-toggle[aria-expanded="false"] .room-block-chevron { transform: rotate(180deg); }
.room-block-body { padding: 22px 20px; }
.room-block-section-label {
  font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}

.room-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: 1px solid #dde1ea; border-radius: 20px;
  font-size: .85rem; background: #fff; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.room-chip:hover { border-color: var(--gold); box-shadow: 0 2px 8px rgba(255,138,31,.18); }
.room-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.room-chip.active { border-color: var(--gold); background: linear-gradient(120deg, var(--gold), var(--gold-dark)); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(255,138,31,.35); }
.room-type-group { border: 1px solid #eef0f4; border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fbfbfd; }
.room-type-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.room-type-group-head .small { color: var(--ink); }
.room-block-count { background: var(--cream); color: var(--ink); padding: 2px 10px; border-radius: 12px; font-weight: 700; }

.status-chip {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 12px; border-radius: 12px; border: 1.5px solid transparent;
  font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none; background: #fff;
  transition: all .15s ease;
}
.status-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.status-chip-icon { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.status-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(10,21,84,.1); }
.status-chip.active { color: #fff; border-color: transparent; box-shadow: 0 5px 14px rgba(10,21,84,.18); transform: translateY(-1px); }
.status-chip.active .status-chip-icon { background: rgba(255,255,255,.28); color: #fff; }

.status-chip-available { border-color: #bfe3c9; color: #157347; }
.status-chip-available .status-chip-icon { background: #d4edda; color: #157347; }
.status-chip-available.active { background: linear-gradient(120deg, #198754, #22a866); }

.status-chip-reserved { border-color: #b7dbe8; color: #0c6d84; }
.status-chip-reserved .status-chip-icon { background: #d1ecf1; color: #0c6d84; }
.status-chip-reserved.active { background: linear-gradient(120deg, #0c6d84, #1391ad); }

.status-chip-maintenance, .status-chip-cleaning { border-color: #d3c3ec; color: #5b3aa0; }
.status-chip-maintenance .status-chip-icon, .status-chip-cleaning .status-chip-icon { background: #e2d9f3; color: #5b3aa0; }
.status-chip-maintenance.active, .status-chip-cleaning.active { background: linear-gradient(120deg, #5b3aa0, #6f42c1); }

.status-chip-blocked { border-color: #f1b6bd; color: #b02a37; }
.status-chip-blocked .status-chip-icon { background: #f8d7da; color: #b02a37; }
.status-chip-blocked.active { background: linear-gradient(120deg, #b02a37, #dc3545); }

/* ---------- Admin Dashboard polish (admin/dashboard.php) ---------- */
.dash-section-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .95rem; color: var(--ink);
  margin-bottom: 12px;
}
.dash-section-title i { color: var(--gold); font-size: 1rem; }

.dash-card { border: none; border-radius: var(--card-radius); box-shadow: 0 6px 18px rgba(20,20,20,.06); background: #fff; }
.dash-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.dash-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--ink); margin: 0; }
.dash-card-title i { color: var(--gold); }
.dash-card-subtitle { font-size: .78rem; color: var(--ink-soft); margin: 0px 0 14px; }

.stat-icon-success { background: rgba(25,135,84,.12); color: #157347; }
.stat-icon-warning { background: rgba(255,193,7,.2); color: #8a6100; }
.stat-icon-danger { background: rgba(220,53,69,.12); color: #b02a37; }
.stat-icon-info { background: rgba(13,110,253,.12); color: #0954c9; }
.stat-icon-purple { background: rgba(111,66,193,.12); color: #5b3aa0; }

.room-status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 20px; font-size: .78rem; font-weight: 600;
}
.rs-booked { background: #d1ecf1; color: #0c6d84; }
.rs-empty { background: #d4edda; color: #157347; }
.rs-maintenance { background: #ffe3cc; color: #a35300; }
.room-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.cal-day { text-align: center; padding: 6px 2px; border-radius: 9px; border: 1px solid #eef0f4; min-height: 54px; transition: border-color .15s, background .15s; }
.cal-day:hover { border-color: var(--gold); background: rgba(255,138,31,.06); }
.cal-day.is-today { border: 2px solid var(--gold); background: rgba(255,138,31,.08); }
.cal-day-num { font-size: .82rem; }
.cal-day-badge { font-size: .65rem; padding: .2em .5em; }

.activity-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f0f1f4; }
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}

/* ---------- Kitchen Issues (includes/kitchen_issues.php) ---------- */
.kitchen-issue-card {
  border: 1px solid #eef0f4; border-radius: 12px; background: #fbfbfd;
  padding: 18px; margin-bottom: 16px;
}
.upload-dropzone {
  border: 2px dashed #d8dbe3; border-radius: 12px; background: #fff;
  min-height: 130px; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.upload-dropzone:hover { border-color: var(--gold); background: rgba(255,138,31,.04); }
.upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink-soft); font-size: .82rem; cursor: pointer; padding: 16px; text-align: center;
}
.upload-placeholder i { font-size: 1.6rem; color: var(--gold); }
.upload-preview { position: relative; width: 100%; padding: 8px; }
.upload-preview img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; display: block; }
.upload-remove-btn {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(10,21,84,.75); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; cursor: pointer;
}
.upload-remove-btn:hover { background: #b02a37; }

.kitchen-issue-total-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--cream); border-radius: 10px; padding: 14px 18px;
  font-weight: 700; color: var(--ink); font-size: 1rem;
}
.kitchen-issue-total-bar span:last-child { color: var(--gold-dark); font-size: 1.15rem; }

.date-preset-btn { font-size: .78rem; }

/* ---------- Food Bills page: status tabs (includes/food_bills.php) ---------- */
.fb-tabs .nav-link {
  background: #fff; color: var(--ink); border: 1px solid #e2e5ee; border-radius: 999px;
  font-weight: 600; font-size: .85rem; padding: .4rem .9rem; display: inline-flex; align-items: center; gap: .45rem;
}
.fb-tabs .nav-link:hover { border-color: var(--ink-soft); }
.fb-tabs .nav-link .badge { background: #eef0f7; color: var(--ink); font-weight: 700; border-radius: 999px; }
.fb-tabs .nav-link.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fb-tabs .nav-link.active .badge { background: rgba(255,255,255,.2); color: #fff; }
.fb-tabs .fb-tab-pending:not(.active) .badge { background: #fff1de; color: #b45f06; }
.fb-tabs .fb-tab-paid:not(.active) .badge { background: #dff5e6; color: #1b7a3f; }
.fb-tabs .fb-tab-unpaid:not(.active) .badge { background: #fde4e4; color: #b02a2a; }
.fb-tabs .fb-tab-cancelled:not(.active) .badge { background: #eceef2; color: #5b6472; }

/* ---------- Food Dashboard tiles (includes/food_dashboard.php) ---------- */
.stat-card .stat-icon-sm { width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; flex-shrink: 0; }
.fd-tile { transition: transform .15s ease, box-shadow .15s ease; }
.fd-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,20,20,.09); }
.fd-progress { height: 10px; border-radius: 999px; background: #eceef4; }
.fd-progress .progress-bar { background: linear-gradient(90deg, #1b9a5a, #35c27d); border-radius: 999px; }
.fd-tile .stat-icon.stat-icon-success { background: rgba(25,135,84,.12); color: #157347; }
.fd-tile .stat-icon.stat-icon-warning { background: rgba(255,193,7,.2); color: #8a6100; }
.fd-tile .stat-icon.stat-icon-danger  { background: rgba(220,53,69,.12); color: #b02a37; }
.fd-tile .stat-icon.stat-icon-info    { background: rgba(13,110,253,.12); color: #0954c9; }
.fd-tile .stat-icon.stat-icon-purple  { background: rgba(111,66,193,.12); color: #5b3aa0; }