/**
 * Maison 1887 — Hospitality OS (HOS)
 * Design System v2.0 — Premium PMS Edition
 * Scope: #m1887-hos uniquement
 */

@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/tabler-icons.min.css');

/* ─── TOKENS ──────────────────────────────────────────────── */
#m1887-hos {
  --bg:          #0A0A0A;
  --surface:     #111111;
  --surface-2:   #181818;
  --surface-3:   #1E1E1E;
  --border:      rgba(201,168,106,.18);
  --border-h:    rgba(201,168,106,.35);
  --gold:        #C9A86A;
  --gold-dim:    rgba(201,168,106,.12);
  --gold-glow:   rgba(201,168,106,.06);
  --text:        #FFFFFF;
  --text-2:      #B5B5B5;
  --text-3:      rgba(181,181,181,.5);
  --green:       #4CAF7D;
  --green-dim:   rgba(76,175,125,.12);
  --red:         #E87575;
  --red-dim:     rgba(232,117,117,.12);
  --blue:        #7AB8F0;
  --blue-dim:    rgba(122,184,240,.12);
  --orange:      #F0A057;
  --orange-dim:  rgba(240,160,87,.12);
  --sidebar-w:   320px;
  --topbar-h:    56px;
  --radius:      10px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow:      0 4px 24px rgba(0,0,0,.45);
  --shadow-gold: 0 0 0 1px rgba(201,168,106,.2), 0 4px 24px rgba(201,168,106,.06);
  --transition:  160ms cubic-bezier(.4,0,.2,1);
}

/* ─── RESET SCOPE ─────────────────────────────────────────── */
#m1887-hos, #m1887-hos * {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ─── LAYOUT ──────────────────────────────────────────────── */
#m1887-hos {
  display: flex;
  height: 100vh;
  min-height: 700px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;
}

/* ─── SIDEBAR ─────────────────────────────────────────────── */
.hos-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: #0D0D0D;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.hos-logo {
  padding: 28px 24px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hos-logo-text {
  display: block;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 600;
}
.hos-logo-sub {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 5px;
}

.hos-nav {
  flex: 1;
  padding: 12px 0 16px;
  overflow-y: auto;
  scrollbar-width: none;
}
.hos-nav::-webkit-scrollbar { display: none; }

.hos-nav-section {
  padding: 20px 24px 6px;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: rgba(201,168,106,.4);
  text-transform: uppercase;
  font-weight: 600;
}
.hos-nav-section:first-child { padding-top: 10px; }

.hos-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
  font-size: 15px;
  font-weight: 450;
  color: var(--text-2);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  border-radius: 0;
}
.hos-nav-item:hover {
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.hos-nav-item.active {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 500;
}
.hos-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}
.hos-nav-icon { font-size: 20px; width: 22px; text-align: center; flex-shrink: 0; }

.hos-badge {
  margin-left: auto;
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.hos-badge.red { background: var(--red-dim); color: var(--red); }

.hos-sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  flex-shrink: 0;
}
.hos-user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hos-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--border-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--gold); font-weight: 700;
  flex-shrink: 0;
}
.hos-user-name { font-size: 13.5px; color: var(--text); font-weight: 500; }
.hos-user-role { font-size: 11px; color: var(--text-3); margin-top: 2px; text-transform: capitalize; }

/* ─── MAIN ────────────────────────────────────────────────── */
.hos-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ─── TOPBAR ──────────────────────────────────────────────── */
.hos-topbar {
  height: var(--topbar-h);
  background: #0D0D0D;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 32px;
  flex-shrink: 0;
}
.hos-hotel-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); flex-shrink: 0;
}
.hos-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.hos-status-dot.calm  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.hos-status-dot.busy  { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.hos-status-dot.full  { background: var(--red); box-shadow: 0 0 6px var(--red); }

.hos-topbar-notifs {
  display: flex; align-items: center; gap: 8px; flex: 1; overflow: hidden;
}
.hos-notif {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-dim);
  color: var(--green);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(76,175,125,.2);
  white-space: nowrap;
}
.hos-notif.warn {
  background: var(--red-dim); color: var(--red);
  border-color: rgba(232,117,117,.2);
}

.hos-topbar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.hos-quick-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--gold-dim);
  border: 1px solid var(--border-h);
  color: var(--gold);
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.hos-quick-btn:hover { background: rgba(201,168,106,.22); }

/* ─── CONTENT ─────────────────────────────────────────────── */
.hos-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.hos-content::-webkit-scrollbar { width: 4px; }
.hos-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* ─── PAGE ────────────────────────────────────────────────── */
.hos-page { animation: hosIn .2s ease; }
@keyframes hosIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.hos-page-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.hos-page-title {
  font-size: 28px; font-weight: 600; color: var(--text);
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.hos-page-date { font-size: 13px; color: var(--text-3); margin-left: auto; text-transform: capitalize; }
.hos-page-desc { font-size: 14px; color: var(--text-2); margin-top: -20px; margin-bottom: 24px; }

.hos-page-actions { margin-left: auto; }

/* ─── KPI GRID ────────────────────────────────────────────── */
.hos-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
@media (max-width: 1200px) { .hos-kpi-grid { grid-template-columns: repeat(2,1fr); } }

.hos-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.hos-kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.hos-kpi:hover { border-color: var(--border-h); box-shadow: var(--shadow-gold); }
.hos-kpi:hover::before { opacity: 1; }

.hos-kpi-label {
  font-size: 11px; letter-spacing: .12em; color: var(--text-3);
  text-transform: uppercase; font-weight: 600; margin-bottom: 12px;
}
.hos-kpi-val {
  font-size: 48px; font-weight: 700; color: var(--text);
  line-height: 1; letter-spacing: -.02em;
}
.hos-kpi-val.gold { color: var(--gold); }
.hos-kpi-sub {
  font-size: 12.5px; color: var(--text-2); margin-top: 10px;
}
.hos-kpi-sub.positive { color: var(--green); }
.hos-kpi-sub.warn     { color: var(--red); }

/* ─── SECONDARY KPI GRID (2 cols) ────────────────────────── */
.hos-kpi-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* ─── CARDS ───────────────────────────────────────────────── */
.hos-row-2col {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px;
}
@media (max-width: 1100px) { .hos-row-2col { grid-template-columns: 1fr; } }

.hos-row-3col {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 20px;
}
@media (max-width: 1100px) { .hos-row-3col { grid-template-columns: 1fr; } }

.hos-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.hos-card-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.hos-card-title {
  font-size: 11px; letter-spacing: .13em; color: var(--text-2);
  text-transform: uppercase; font-weight: 600; flex: 1;
  display: flex; align-items: center; gap: 7px;
}
.hos-card-title i { color: var(--gold); font-size: 15px; }
.hos-link {
  font-size: 11.5px; color: var(--gold); background: none; border: none;
  cursor: pointer; padding: 0; font-family: var(--font); opacity: .7;
  transition: opacity var(--transition);
}
.hos-link:hover { opacity: 1; }

/* ─── RESERVATION LIST ────────────────────────────────────── */
.hos-res-list { display: flex; flex-direction: column; }
.hos-res-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.hos-res-item:last-child { border-bottom: none; }
.hos-res-studio { font-size: 13px; font-weight: 600; color: var(--text); width: 82px; flex-shrink: 0; }
.hos-res-guest  { font-size: 13.5px; color: var(--text); flex: 1; }
.hos-res-time   { font-size: 11.5px; color: var(--text-3); }

/* ─── TABLE ───────────────────────────────────────────────── */
.hos-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.hos-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.hos-table th {
  padding: 13px 18px;
  text-align: left; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.hos-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text); vertical-align: middle;
}
.hos-table tr:last-child td { border-bottom: none; }
.hos-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.hos-ref { font-size: 11.5px; color: var(--gold); font-weight: 600; font-family: 'SF Mono',monospace; }
td.gold { color: var(--gold); font-weight: 600; }

/* ─── SEARCH & FILTER ─────────────────────────────────────── */
.hos-filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px;
}
.hos-search-wrap { position: relative; flex: 1; min-width: 200px; }
.hos-search-wrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 16px; pointer-events: none;
}
.hos-search {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px 9px 38px;
  border-radius: var(--radius); font-size: 14px; font-family: var(--font);
}
.hos-search::placeholder { color: var(--text-3); }
.hos-search:focus { outline: none; border-color: var(--border-h); }

/* ─── FORM ELEMENTS ───────────────────────────────────────── */
.hos-select, .hos-input, .hos-textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text); padding: 10px 13px;
  border-radius: var(--radius); font-size: 14px;
  font-family: var(--font); width: 100%;
  transition: border-color var(--transition);
}
.hos-select:focus, .hos-input:focus, .hos-textarea:focus {
  outline: none; border-color: var(--border-h);
}
.hos-select option { background: #181818; }
.hos-textarea { resize: vertical; min-height: 72px; }
.hos-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.hos-label .hos-select, .hos-label .hos-input, .hos-label .hos-textarea { margin-top: 0; }
.hos-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hos-form { display: flex; flex-direction: column; gap: 16px; }
.hos-fieldset { border: none; padding: 0; }
.hos-fieldset legend { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 10px; }
.hos-checkboxes { display: flex; flex-direction: column; gap: 9px; }
.hos-checkbox-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.hos-checkbox-label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--gold); }
.hos-input-date {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px;
  border-radius: var(--radius); font-size: 13px;
  font-family: var(--font); color-scheme: dark; cursor: pointer;
}
.hos-select.full { width: 100%; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.hos-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold-dim); border: 1px solid var(--border-h);
  color: var(--gold); font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius);
  cursor: pointer; transition: background var(--transition);
  font-family: var(--font); width: 100%; margin-top: 4px;
}
.hos-btn-primary:hover { background: rgba(201,168,106,.22); }

.hos-btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; padding: 6px 11px;
  border-radius: 7px; cursor: pointer; transition: all var(--transition);
  font-family: var(--font); white-space: nowrap;
}
.hos-btn-sm:hover { background: rgba(255,255,255,.1); color: var(--text); border-color: rgba(255,255,255,.2); }
.hos-btn-sm.warn  { border-color: rgba(232,117,117,.3); color: var(--red); }
.hos-btn-sm.warn:hover { background: var(--red-dim); }
.hos-btn-sm i { font-size: 13px; }

.hos-btn-checkin {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-dim); border: 1px solid rgba(76,175,125,.3);
  color: var(--green); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius);
  cursor: pointer; transition: background var(--transition); font-family: var(--font);
}
.hos-btn-checkin:hover { background: rgba(76,175,125,.22); }

.hos-actions { display: flex; gap: 6px; }

/* ─── BADGES ──────────────────────────────────────────────── */
.hos-badge-exp {
  display: inline-block; font-size: 10px; padding: 3px 9px;
  border-radius: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.hos-badge-exp.2h     { background: var(--blue-dim);   color: var(--blue);   }
.hos-badge-exp.soiree { background: var(--gold-dim);   color: var(--gold);   }
.hos-badge-exp.sejour { background: var(--green-dim);  color: var(--green);  }

.hos-badge-status {
  display: inline-block; font-size: 10px; padding: 3px 9px;
  border-radius: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.status-pending     { background: rgba(255,255,255,.06); color: var(--text-2); }
.status-processing  { background: var(--blue-dim);       color: var(--blue);   }
.status-confirmed   { background: var(--gold-dim);       color: var(--gold);   }
.status-checked_in  { background: var(--green-dim);      color: var(--green);  }
.status-checked_out { background: rgba(255,255,255,.05); color: var(--text-3); }
.status-completed   { background: var(--green-dim);      color: var(--green);  }
.status-cancelled   { background: var(--red-dim);        color: var(--red);    }
.status-on-hold     { background: rgba(255,255,255,.05); color: var(--text-2); }

/* ─── STUDIOS GRID ────────────────────────────────────────── */
.hos-studios-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}
@media (max-width: 1100px) { .hos-studios-grid { grid-template-columns: repeat(2,1fr); } }

.hos-studio-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  transition: border-color var(--transition);
}
.hos-studio-card.free     { border-color: rgba(76,175,125,.25); }
.hos-studio-card.occupied { border-color: rgba(201,168,106,.35); background: rgba(201,168,106,.03); }
.hos-studio-card.reserved { border-color: rgba(122,184,240,.25); }
.hos-studio-card.cleaning { border-color: rgba(240,160,87,.25); }

.hos-studio-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hos-studio-name { font-size: 15px; font-weight: 600; color: var(--text); }
.hos-studio-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.hos-studio-dot.free     { background: var(--green); box-shadow: 0 0 6px var(--green); }
.hos-studio-dot.occupied { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.hos-studio-dot.reserved { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.hos-studio-dot.cleaning { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.hos-studio-dot.maintenance { background: var(--text-3); }

.hos-studio-status-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.free     .hos-studio-status-label { color: var(--green); }
.occupied .hos-studio-status-label { color: var(--gold); }
.reserved .hos-studio-status-label { color: var(--blue); }
.cleaning .hos-studio-status-label { color: var(--orange); }

.hos-studio-guest { font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.hos-studio-until, .hos-studio-free-label { font-size: 12px; color: var(--text-3); }
.hos-studio-actions { margin-top: 14px; }

/* ─── MINI STUDIOS GRID (dashboard) ──────────────────────── */
.hos-studios-mini {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.hos-studio-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px; border-radius: var(--radius); border: 1px solid var(--border);
  text-align: center; gap: 4px;
}
.hos-studio-pill.free     { border-color: rgba(76,175,125,.3);   background: rgba(76,175,125,.05); }
.hos-studio-pill.occupied { border-color: rgba(201,168,106,.35); background: rgba(201,168,106,.06); }
.hos-studio-pill span { font-size: 11.5px; font-weight: 600; color: var(--text); }
.hos-studio-pill small { font-size: 9.5px; color: var(--text-3); }
.hos-studio-pill.free small     { color: var(--green); }
.hos-studio-pill.occupied small { color: var(--gold); }

/* ─── FRONTDESK ───────────────────────────────────────────── */
.hos-frontdesk-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
@media (max-width: 1100px) { .hos-frontdesk-grid { grid-template-columns: 1fr; } }

.hos-frontdesk-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.hos-frontdesk-item:last-of-type { border-bottom: none; }
.hos-frontdesk-item strong { font-size: 14px; color: var(--text); display: block; }
.hos-frontdesk-item small { font-size: 12px; color: var(--text-3); display: block; margin-top: 3px; }

/* ─── PARAM ROWS ──────────────────────────────────────────── */
.hos-param-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.hos-param-row:last-child { border-bottom: none; }
.hos-param-row code {
  background: var(--surface-2); color: var(--gold);
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
}

/* ─── MINI TABLE ──────────────────────────────────────────── */
.hos-mini-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hos-mini-table th { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 0 10px; text-align: left; }
.hos-mini-table td { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text); vertical-align: middle; }
.hos-mini-table tr:last-child td { border-bottom: none; }

/* ─── EMPTY ───────────────────────────────────────────────── */
.hos-empty { padding: 24px; text-align: center; font-size: 13.5px; color: var(--text-3); font-style: italic; }

/* ─── ACCESS DENIED ───────────────────────────────────────── */
.hos-access-denied { padding: 40px; text-align: center; color: var(--text-2); font-size: 15px; }

/* ─── UTILITY ─────────────────────────────────────────────── */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ─── HIDE PAGE CHROME ────────────────────────────────────── */
body.page-id-8208 .site-header,
body.page-id-8208 #masthead,
body.page-id-8208 .main-navigation,
body.page-id-8208 footer.site-footer,
body.page-id-8208 #colophon { display: none !important; }
body.page-id-8208 .site-content,
body.page-id-8208 .entry-content,
body.page-id-8208 main { padding: 0; margin: 0 !important; max-width: 100% !important; }
body.page-id-8208 { overflow: hidden; }

/* ─── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  #m1887-hos { flex-direction: column; height: auto; min-height: 100vh; }
  .hos-sidebar { width: 100%; min-width: 100%; height: auto; }
  .hos-sidebar .hos-nav { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .hos-sidebar.open .hos-nav { max-height: 1000px; }
  .hos-content { padding: 20px 18px; }
  .hos-kpi-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hos-kpi { min-height: 120px; padding: 18px; }
  .hos-kpi-val { font-size: 32px; }
  .hos-studios-grid { grid-template-columns: repeat(2,1fr); }
  .hos-frontdesk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hos-kpi-grid { grid-template-columns: 1fr; }
  .hos-page-title { font-size: 22px; }
}


/* ── FIX AMOJA LAYOUT — containing block collapse ── */
body.page-id-8208{width:100vw!important;overflow-x:hidden}
body.page-id-8208 .col-full{width:100vw!important;max-width:100vw!important;padding:0!important;margin:0!important}
body.page-id-8208 #m1887-hos{width:100vw;height:100vh}

/* ── SPECIFICITY FIX — padding overrides ── */
#m1887-hos > .hos-main > .hos-content{padding:32px 40px!important}
#m1887-hos .hos-kpi-grid .hos-kpi{padding:26px 28px!important}

/* ── SPECIFICITY FIX ── */
#m1887-hos > .hos-main > .hos-content{padding:32px 40px!important}
#m1887-hos .hos-kpi-grid .hos-kpi{padding:26px 28px!important}