.dash-shell{ display:flex; min-height: 100vh; padding-top: var(--nav-h); }

/* --- Sidebar --------------------------------------------------------- */
.sidebar{
  width: 264px; flex-shrink:0; background: var(--primary-dark); color: rgba(255,255,255,0.82);
  position: fixed; top: var(--nav-h); bottom:0; left:0; overflow-y:auto; transition: transform .25s ease; z-index: 400;
  display:flex; flex-direction:column;
}
.sidebar-section{ padding: var(--space-5) var(--space-4) var(--space-2); }
.sidebar-label{ font-size: 11px; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,0.35); padding: 0 var(--space-3); margin-bottom: var(--space-2); }
.sidebar-link{ display:flex; align-items:center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; margin-bottom: 2px; transition: background .15s ease, color .15s ease; }
.sidebar-link svg{ flex-shrink: 0; opacity: 0.75; }
.sidebar-link:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-link.active{ background: linear-gradient(90deg, rgba(184,135,75,0.22), rgba(184,135,75,0.04)); color: #fff; box-shadow: inset 3px 0 0 var(--brass); }
.sidebar-link.active svg{ opacity: 1; color: var(--brass-light); }
.sidebar-link .count{ margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: rgba(255,255,255,0.1); padding: 2px 7px; border-radius: var(--r-pill); }
.sidebar-footer{ margin-top: auto; padding: var(--space-4); border-top: 1px solid rgba(255,255,255,0.08); }

.sidebar-overlay{ display:none; position: fixed; inset:0; top: var(--nav-h); background: rgba(0,0,0,0.4); z-index: 390; }
@media (max-width: 980px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-overlay.open{ display:block; }
}

/* --- Main content ------------------------------------------------------ */
.dash-main{ flex:1; margin-left: 264px; padding: var(--space-6) var(--space-6) var(--space-8); min-width:0; }
@media (max-width: 980px){ .dash-main{ margin-left:0; } }
.dash-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap:wrap; }
.dash-header h1{ font-size: 26px; }
.dash-header p{ color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.dash-menu-btn{ display:none; width: 40px; height:40px; align-items:center; justify-content:center; border-radius: var(--r-sm); border:1px solid var(--border); background:var(--surface); }
@media (max-width: 980px){ .dash-menu-btn{ display:flex; } }

/* --- Stat cards ------------------------------------------------------ */
.stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 980px){ .stat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .stat-grid{ grid-template-columns: 1fr; } }
.stat-card{ padding: var(--space-5); }
.stat-card-body{ padding: 0 var(--space-5) var(--space-5); }
.stat-top{ display:flex; justify-content:space-between; align-items:flex-start; padding: var(--space-5) var(--space-5) 0; }
.stat-icon{ width: 42px; height:42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; }
.stat-icon.i-green{ background: var(--green-tint); color: var(--green-status); }
.stat-icon.i-brass{ background: var(--brass-tint); color: var(--brass-dark); }
.stat-icon.i-wine{ background: var(--wine-tint); color: var(--wine); }
.stat-icon.i-primary{ background: var(--primary-tint); color: var(--primary); }
.stat-trend{ font-size: 12px; font-weight: 700; display:flex; align-items:center; gap:3px; }
.stat-trend.up{ color: var(--green-status); }
.stat-trend.down{ color: var(--wine); }
.stat-value{ font-family: var(--font-mono); font-size: 30px; font-weight:500; margin: var(--space-4) 0 2px; color: var(--ink); }
.stat-label{ font-size: 13px; color: var(--ink-soft); }

/* --- Panels / tables --------------------------------------------------- */
.panel{ padding: var(--space-5); margin-bottom: var(--space-5); }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); flex-wrap:wrap; gap: var(--space-3); }
.panel-head h3{ font-size: 17px; }
.panel-tabs{ display:flex; gap: 4px; background: var(--surface-sunk); padding: 4px; border-radius: var(--r-pill); }
.panel-tab{ padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.panel-tab.active{ background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.data-table{ width:100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th{ text-align:left; font-size: 11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-faint); font-weight:600; padding: 10px 14px; border-bottom: 1.5px solid var(--border); white-space:nowrap; }
.data-table tbody td{ padding: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background: var(--surface-sunk); }
.table-scroll{ overflow-x:auto; }
.cell-user{ display:flex; align-items:center; gap: 10px; }
.cell-avatar{ width: 34px; height:34px; border-radius:50%; background: var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-mono); flex-shrink:0; }
.cell-user b{ display:block; font-size: 13.5px; }
.cell-user span{ font-size: 12px; color: var(--ink-faint); }
.row-actions{ display:flex; gap: 6px; }
.icon-btn{ width: 32px; height:32px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center; color: var(--ink-soft); }
.icon-btn:hover{ background: var(--surface-sunk); color: var(--ink); }
.icon-btn.danger:hover{ background: var(--wine-tint); color: var(--wine); }
.mini-thumb{ width: 46px; height: 46px; border-radius: var(--r-sm); object-fit:cover; background: var(--surface-sunk); }

/* --- Charts -------------------------------------------------------------- */
.chart-card{ padding: var(--space-5); }
.chart-legend{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-3); }
.chart-legend span{ display:flex; align-items:center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.chart-legend i{ width: 10px; height: 10px; border-radius: 3px; display:inline-block; }
.charts-row{ display:grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-5); }
@media (max-width: 900px){ .charts-row{ grid-template-columns: 1fr; } }

/* --- Room form / image uploader ------------------------------------------ */
.image-upload-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: var(--space-3); }
.image-upload-tile{ position:relative; aspect-ratio:1; border-radius: var(--r-sm); overflow:hidden; background: var(--surface-sunk); border: 1.5px dashed var(--border-strong); }
.image-upload-tile img{ width:100%; height:100%; object-fit:cover; }
.image-upload-tile .remove-img{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(19,26,22,0.7); color:#fff; display:flex; align-items:center; justify-content:center; }
.image-upload-tile.add-tile{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color: var(--ink-faint); cursor:pointer; font-size: 11px; }
.image-upload-tile.add-tile:hover{ border-color: var(--primary); color: var(--primary); }
.upload-progress{ position:absolute; bottom:0; left:0; right:0; height:4px; background: rgba(0,0,0,0.2); }
.upload-progress span{ display:block; height:100%; background: var(--brass); width:0%; transition: width .2s ease; }

/* --- Account page (customer) -------------------------------------------- */

/* Two-column profile/bookings layout — collapses to one column on tablet
   and below so neither panel gets squeezed into a sliver on mobile. */
.account-grid{ display:grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-5); align-items:start; }
@media (max-width: 900px){ .account-grid{ grid-template-columns: 1fr; } }

.profile-header{ display:flex; align-items:center; gap: var(--space-4); padding: var(--space-5); flex-wrap: wrap; }
.profile-avatar{ width: 72px; height:72px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size: 26px; font-weight:700; font-family: var(--font-mono); flex-shrink:0; }
@media (max-width: 480px){
  .profile-header{ text-align:center; justify-content:center; }
  .profile-avatar{ margin: 0 auto; }
}

/* Status filter tabs: scroll horizontally instead of wrapping into a messy
   multi-row cluster once they no longer fit the panel width. A visible
   brass-colored scrollbar + a right-edge fade make it obvious there's more
   to scroll to — an earlier version hid the scrollbar entirely, which left
   no cue at all that these tabs scrolled. */
.panel-tabs{ -webkit-overflow-scrolling: touch; }
@media (max-width: 640px){
  .panel-head{ flex-wrap: nowrap; }
  .panel-tabs{
    overflow-x: auto; flex-shrink: 0; scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--brass) var(--surface-sunk);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .panel-tabs::-webkit-scrollbar{ height: 5px; }
  .panel-tabs::-webkit-scrollbar-track{ background: var(--surface-sunk); border-radius: 10px; }
  .panel-tabs::-webkit-scrollbar-thumb{ background: var(--brass); border-radius: 10px; }
  .panel-tab{ white-space: nowrap; padding: 9px 16px; scroll-snap-align: start; }
}

.booking-item{ display:flex; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--space-3); align-items:center; }
.booking-item img{ width: 90px; height: 90px; border-radius: var(--r-sm); object-fit:cover; flex-shrink:0; }
.booking-item-body{ flex:1; min-width:0; }
.booking-item-body .item-title-row{ display:flex; align-items:center; gap: var(--space-2); flex-wrap: wrap; }
.booking-item-body h4{ font-size: 15.5px; margin-bottom: 4px; }
.booking-item-meta{ display:flex; gap: var(--space-4); flex-wrap:wrap; font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.booking-item-meta span{ display:flex; align-items:center; gap: 5px; }
.booking-item-actions{ display:flex; flex-direction:column; gap: 8px; align-items:flex-end; flex-shrink:0; }

@media (max-width: 560px){
  .booking-item{ flex-wrap: wrap; padding: var(--space-3); gap: var(--space-3); }
  .booking-item img{ width: 56px; height: 56px; }
  .booking-item-body{ flex-basis: calc(100% - 56px - var(--space-3)); }
  .booking-item-meta{ flex-direction: column; gap: 6px; margin-top: var(--space-2); }
  .booking-item-actions{
    order: 3; flex-direction: row; width: 100%; justify-content: stretch;
    margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
  }
  .booking-item-actions .btn{ width: 100%; }
}

.pagination{ display:flex; justify-content:center; align-items:center; gap: 6px; margin-top: var(--space-5); }
.page-btn{ width: 34px; height:34px; border-radius: var(--r-sm); font-size: 13px; font-weight:600; color: var(--ink-soft); }
.page-btn:hover{ background: var(--surface-sunk); }
.page-btn.active{ background: var(--primary); color:#fff; }

/* --- Message threads (customer + admin) --------------------------------- */
.message-bubble{ max-width: 78%; padding: 12px 15px; border-radius: 16px; font-size: 13.5px; line-height:1.5; margin-bottom: var(--space-3); position:relative; }
.message-bubble.from-guest{ background: var(--surface-sunk); color: var(--ink); border-bottom-left-radius: 4px; margin-right:auto; }
.message-bubble.from-admin{ background: var(--primary); color:#fff; border-bottom-right-radius: 4px; margin-left:auto; }
.message-bubble .msg-meta{ display:block; font-size: 11px; margin-top: 6px; opacity: 0.6; }
.message-thread-item{ margin-bottom: var(--space-5); }
.message-thread-item:last-child{ margin-bottom: 0; }