/* ==========================================================================
   GökçeOS UI V2 – 2026 Premium Enterprise CSS
   Real Rack Architecture: A/B Block, Advanced Filters, Rack Designer
   ========================================================================== */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --accent-primary: #0ea5e9;
  --accent-hover: #0284c7;
  --accent-light: rgba(14, 165, 233, 0.12);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #6366f1;
  --color-purple: #8b5cf6;
  --badge-success-bg: rgba(16, 185, 129, 0.12);
  --badge-warning-bg: rgba(245, 158, 11, 0.12);
  --badge-danger-bg: rgba(239, 68, 68, 0.12);
  --badge-info-bg: rgba(99, 102, 241, 0.12);
  --motion-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg-app: #090d16; --bg-header: #0f172a; --bg-surface: #141e33;
  --bg-subtle: #1e293b; --bg-hover: #2d3d59;
  --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b;
  --border-subtle: #1e293b; --border-strong: #334155;
  --shadow-main: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --bg-app: #f8fafc; --bg-header: #ffffff; --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9; --bg-hover: #e2e8f0;
  --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8;
  --border-subtle: #e2e8f0; --border-strong: #cbd5e1;
  --shadow-main: 0 4px 12px -2px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans); background-color: var(--bg-app);
  color: var(--text-primary); font-size: 13px; line-height: 1.5;
  overflow: hidden; height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* === LAYOUT SHELL === */
#app-layout { display: flex; flex-direction: column; height: 100vh; }

#topbar {
  height: 52px; background: var(--bg-header); border-bottom: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; padding: 0 16px; z-index: 100;
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }

.brand-logo { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; color: var(--accent-primary); display: flex; align-items: center; gap: 8px; }
.brand-tag { font-size: 10px; background: var(--accent-light); color: var(--accent-primary); padding: 2px 6px; border-radius: 4px; font-weight: 700; }

.cmd-palette-trigger {
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 12px;
}
.cmd-palette-trigger kbd { background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; font-size: 10px; font-family: var(--font-mono); }

select, input[type="text"], input[type="password"], textarea {
  background: var(--bg-subtle); color: var(--text-primary); border: 1px solid var(--border-subtle);
  padding: 6px 10px; border-radius: 6px; font-size: 12px; outline: none;
}

#main-frame { display: flex; flex: 1; overflow: hidden; }

#sidebar {
  width: 210px; background: var(--bg-header); border-right: 1px solid var(--border-subtle);
  transition: width var(--motion-fast); display: flex; flex-direction: column; position: relative; z-index: 90;
}
#sidebar.collapsed { width: 56px; }

.sidebar-toggle-btn {
  position: absolute; top: 12px; right: -12px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-header); border: 1px solid var(--border-strong); color: var(--text-primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 5;
}

.nav-list { list-style: none; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px;
  color: var(--text-secondary); cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nav-item.active { background: var(--accent-primary); color: #fff; font-weight: 600; }
#sidebar.collapsed .nav-text { display: none; }

#content-area { flex: 1; background: var(--bg-app); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }

.app-workspace-container {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#footer-bar {
  height: 28px; background: var(--bg-header); border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; padding: 0 16px; font-size: 11px; color: var(--text-muted);
}

/* === ICONS, BUTTONS, BADGES === */
.svg-icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: opacity var(--motion-fast); }
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--accent-primary); color: #fff; }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-success { background: var(--badge-success-bg); color: var(--color-success); }
.badge-warning { background: var(--badge-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--badge-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--badge-info-bg); color: var(--color-info); }

/* === ROOM TYPE STRIP (horizontal scrollable pills) === */
.room-type-strip { display:none; }
.room-type-strip::-webkit-scrollbar { height: 4px; }
.room-type-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.room-type-pill {
  flex-shrink: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 11px; white-space: nowrap;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.room-type-pill:hover { border-color: var(--accent-primary); }
.room-type-pill.active { border-color: var(--accent-primary); background: var(--accent-light); font-weight: 700; }

/* === A/B BLOCK HEADERS === */
.block-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: 6px; margin-bottom: 6px; cursor: pointer;
  user-select: none;
}
.block-header-label { font-size: 13px; font-weight: 800; color: var(--accent-primary); }
.block-header-meta { font-size: 11px; color: var(--text-muted); }
.block-chevron { font-size: 11px; transition: transform var(--motion-fast); }
.block-chevron.open { transform: rotate(90deg); }

/* === RACK MAIN CONTAINER (synced horizontal scroll) === */
.rack-scroll-container {
  border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface);
  overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0;
}

.rack-scroll-viewport {
  overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: thin;
}
.rack-scroll-viewport::-webkit-scrollbar { width: 8px; height: 8px; }
.rack-scroll-viewport::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.rack-inner-grid { display: flex; flex-direction: column; min-width: max-content; }

/* === FLOOR ROWS === */
.rack-floor-row {
  display: flex; align-items: stretch; border-bottom: 1px dashed var(--border-subtle); min-height: 44px;
}
.rack-floor-row:last-child { border-bottom: none; }

.rack-floor-label {
  width: 72px; min-width: 72px; position: sticky; left: 0; z-index: 5;
  background: var(--bg-surface); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--accent-primary);
  border-right: 1px solid var(--border-subtle); flex-direction: column; gap: 2px;
}
.rack-floor-count { font-size: 9px; color: var(--text-muted); font-weight: 500; }

.rack-cells-row { display: flex; gap: 4px; padding: 4px 6px; align-items: center; flex-wrap: nowrap; }

/* === RACK CELLS (zoom-aware) === */
.rack-cell {
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 4px;
  cursor: pointer; display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.rack-cell:hover { border-color: var(--accent-primary); transform: translateY(-1px); z-index: 2; }
.rack-cell.selected { border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-primary); }
.rack-cell.highlight-pulse { border-color: var(--accent-primary) !important; box-shadow: 0 0 8px var(--accent-primary); background: var(--accent-light) !important; }
.rack-cell.dimmed { opacity: 0.22; }

.rack-cell.zoom-compact  { width: 52px;  min-height: 38px; font-size: 9px;  padding: 2px 3px; }
.rack-cell.zoom-standard { width: 80px;  min-height: 52px; font-size: 10px; padding: 3px 5px; }
.rack-cell.zoom-relaxed  { width: 110px; min-height: 68px; font-size: 11px; padding: 4px 6px; }

.cell-status-bar { height: 3px; border-radius: 2px; width: 100%; }
.cell-room-number { font-weight: 800; }
.cell-type-code { font-size: 9px; color: var(--text-muted); }
.cell-beds { font-size: 9px; display: flex; justify-content: space-between; align-items: center; }
.cell-guest { font-size: 9px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-alerts { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.cell-alert-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Status colors */
.status-occupied    { background: var(--color-warning); }
.status-clean       { background: var(--color-success); }
.status-dirty       { background: var(--color-danger); }
.status-maintenance { background: var(--color-info); }
.status-showing     { background: var(--color-purple); }
.status-partial     { background: linear-gradient(90deg, var(--color-warning) 50%, var(--color-success) 50%); }

/* === INVENTORY SUMMARY STRIP === */
.inventory-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.summary-metric-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px;
  padding: 8px 10px; cursor: pointer; transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.summary-metric-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.summary-metric-card.active { border-color: var(--accent-primary); background: var(--accent-light); }
.summary-metric-title { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.summary-metric-val { font-size: 16px; font-weight: 800; }

/* === ROOM TYPE ANALYTICS TABLE === */
.roomtype-analytics-table-wrap { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; overflow-x: auto; margin-bottom: 12px; }
.roomtype-analytics-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
.roomtype-analytics-table th { background: var(--bg-subtle); padding: 8px 10px; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.roomtype-analytics-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.roomtype-analytics-table tr:hover { background: var(--bg-subtle); }
.clickable-num { cursor: pointer; font-weight: 700; color: var(--accent-primary); padding: 2px 4px; border-radius: 3px; transition: background var(--motion-fast); }
.clickable-num:hover { background: var(--accent-light); text-decoration: underline; }

/* Dense Rack canonical controls and room-type widgets */
.rack-specific-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 10px;margin:0 0 10px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-surface);overflow-x:auto; }
.rack-toolbar-primary,.rack-toolbar-zoom { display:flex;align-items:center;gap:6px;flex-wrap:nowrap; }
.rack-specific-toolbar .btn { min-height:40px;padding-inline:12px;white-space:nowrap; }
.rack-sellable-vacant-toggle{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--color-success);border-radius:8px;background:color-mix(in srgb,var(--color-success) 10%,var(--bg-surface));color:var(--text-primary);font-size:10px;font-weight:800;white-space:nowrap}.rack-sellable-vacant-toggle input{width:16px;height:16px;accent-color:var(--color-success)}
.segment-accordion[data-segment="roomtype"]{margin-bottom:14px}.segment-accordion[data-segment="roomtype"]+.rack-active-filter-summary{margin-top:0;margin-bottom:14px}.rack-active-filter-summary+.rack-scroll-container{margin-top:0}
.rack-specific-toolbar .btn b { display:inline-grid;place-items:center;min-width:18px;height:18px;padding-inline:4px;border-radius:9px;background:var(--accent-primary);color:#fff;font-size:9px; }
.rack-toolbar-primary .btn-warning { background:var(--color-warning);color:#10141b; }
.rack-active-filter-summary { display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:9px 12px;border:1px solid var(--accent-primary);border-radius:8px;background:var(--accent-light);font-size:11px;flex-wrap:wrap; }
.rack-active-filter-summary>div { display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap; }
.roomtype-widget-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--card-gap);margin-bottom:12px; }
.roomtype-widget { position:relative;min-width:0;padding:14px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--bg-surface);cursor:pointer;overflow:hidden;transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast); }
.roomtype-widget::before { position:absolute;inset:0 0 auto;height:3px;background:var(--room-type-color,var(--accent-primary));content:""; }
.roomtype-widget:hover { border-color:var(--room-type-color,var(--accent-primary));transform:translateY(-1px); }
.roomtype-widget.selected { border-color:var(--room-type-color,var(--accent-primary));background:color-mix(in srgb,var(--room-type-color,var(--accent-primary)) 7%,var(--bg-surface));box-shadow:inset 3px 0 var(--room-type-color,var(--accent-primary)); }
.roomtype-widget:focus-visible { outline:2px solid var(--room-type-color,var(--accent-primary));outline-offset:2px; }
.roomtype-widget header { display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0; }
.roomtype-widget-icon { display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:color-mix(in srgb,var(--room-type-color,var(--accent-primary)) 18%,var(--bg-subtle));color:var(--room-type-color,var(--accent-primary)); }
.roomtype-widget h3 { margin:0;overflow:hidden;color:var(--text-primary);font-size:12px;line-height:1.3;text-overflow:ellipsis; }
.roomtype-widget header small { color:var(--text-muted); }
.roomtype-widget-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:12px; }
.roomtype-widget-metrics span { display:grid;gap:2px;min-width:0;padding:5px;border-radius:5px;background:var(--bg-subtle);text-align:center; }
.roomtype-widget-metrics small { overflow:hidden;color:var(--text-muted);font-size:8px;text-overflow:ellipsis; }
.roomtype-widget footer { display:flex;justify-content:space-between;gap:8px;margin-top:10px;color:var(--text-muted);font-size:9px; }
.roomtype-widget footer b { color:var(--room-type-color,var(--accent-primary)); }
.roomtype-widget .badge{border-color:var(--room-type-color,var(--accent-primary));background:color-mix(in srgb,var(--room-type-color,var(--accent-primary)) 18%,var(--bg-subtle));color:var(--text-primary)}.rack-cell[data-room-tone]{border-top-color:var(--room-type-color,var(--border-subtle))}.rack-cell[data-room-tone] .cell-type-code{padding:2px 4px;border-radius:4px;background:color-mix(in srgb,var(--room-type-color) 18%,var(--bg-subtle));color:var(--room-type-color)}.filter-chip[data-room-tone]{border-left:3px solid var(--room-type-color)}.filter-chip[data-room-tone]:hover,.filter-chip[data-room-tone].selected{border-color:var(--room-type-color);background:color-mix(in srgb,var(--room-type-color) 12%,var(--bg-subtle))}
.rack-floor-empty { display:flex;align-items:center;min-height:44px;padding:8px 14px;color:var(--text-muted);font-size:11px; }
.rack-filter-visibility { display:grid;gap:8px;margin-bottom:16px;padding:12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-subtle); }
.rack-filter-visibility h4 { margin:0 0 4px;color:var(--accent-primary);font-size:11px;letter-spacing:.08em; }
.rack-filter-toggle { display:flex;align-items:center;gap:9px;min-height:32px;cursor:pointer; }
.rack-filter-toggle input { width:18px;height:18px;margin:0;accent-color:var(--accent-primary); }
.rack-filter-search { display:grid;gap:5px;margin-top:5px;color:var(--text-muted);font-size:10px; }
.rack-filter-search input { min-height:38px;width:100%;padding:7px 9px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-surface);color:var(--text-primary); }
.rack-filter-group-heading { margin:18px 0 8px;color:var(--accent-primary);font-size:11px;letter-spacing:.08em; }
@media(min-width:3000px){.roomtype-widget-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:1500px){.roomtype-widget-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.roomtype-widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.rack-specific-toolbar{align-items:flex-start;flex-direction:column}.rack-toolbar-primary{max-width:100%;overflow-x:auto}.rack-toolbar-zoom{align-self:flex-end}}
@media(max-width:560px){.roomtype-widget-grid{grid-template-columns:1fr}.rack-active-filter-summary>div{margin-inline-start:0}.roomtype-widget h3{white-space:normal}}

/* === 7-DAY HEATMAP === */
.heatmap-strip-wrap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.heatmap-card { background: var(--bg-subtle); border-radius: 6px; padding: 8px; text-align: center; border-top: 3px solid var(--accent-primary); }

/* === BOTTLENECK STRIP === */
.bottleneck-strip { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bottleneck-card { background: var(--bg-surface); border: 1px solid var(--color-warning); border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; min-width: 240px; }

/* === ADVANCED FILTER POPUP === */
.adv-filter-popup {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; transform: none;
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 12px;
  width: min(440px, 94vw); max-width: 94vw; height: 100vh; max-height: 100vh;
  z-index: 250; box-shadow: var(--shadow-main);
  display: none; flex-direction: column; overflow: hidden;
  min-width: min(360px, 94vw); min-height: 100vh;
}
.adv-filter-popup.active { display: flex; }
.adv-filter-popup.fullscreen { width: 100vw !important; height: 100vh !important; max-width: 100vw; max-height: 100vh; top: 0; left: 0; transform: none; border-radius: 0; }

.filter-popup-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; cursor: move; flex-shrink: 0;
}
.filter-popup-body { flex: 1; overflow-y: auto; padding: 16px; }
.filter-popup-footer { padding: 10px 16px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap; }

.filter-category { margin-bottom: 16px; }
.filter-category-title { font-size: 12px; font-weight: 800; color: var(--accent-primary); margin-bottom: 6px; }
.filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 500;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); cursor: pointer;
  transition: all var(--motion-fast); user-select: none;
}
.filter-chip:hover { border-color: var(--accent-primary); }
.filter-chip.selected { background: var(--accent-light); border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 700; }

/* === ROOM HOVER PREVIEW (floating card) === */
.room-hover-card {
  position: fixed; z-index: 210; background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 12px; width: 280px; box-shadow: var(--shadow-main);
  pointer-events: none; display: none; font-size: 11px; line-height: 1.6;
}
.room-hover-card.pinned { pointer-events: auto; }
.room-hover-card.active { display: block; }

/* === ROOM DETAIL POPUP (multi-tab, draggable, resizable) === */
.room-detail-popup {
  position: fixed; z-index: 220; background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-main); display: none; flex-direction: column;
  width: 640px; height: 520px; min-width: 420px; min-height: 320px;
  resize: both; overflow: hidden;
}
.room-detail-popup.active { display: flex; }
.room-detail-popup.fullscreen { width: 100vw !important; height: calc(100vh - 52px - 28px) !important; top: 52px !important; left: 0 !important; border-radius: 0; }

.detail-popup-titlebar {
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; cursor: move; flex-shrink: 0;
  background: var(--bg-header);
}
.detail-popup-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; overflow-x: auto;
}
.detail-tab {
  padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.detail-tab:hover { color: var(--text-primary); }
.detail-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.detail-popup-content { flex: 1; overflow-y: auto; padding: 16px; }

/* === POPUP TASKBAR (minimized popups) === */
.popup-taskbar {
  position: fixed; bottom: 28px; left: 56px; right: 0; height: 32px;
  background: var(--bg-header); border-top: 1px solid var(--border-subtle);
  display: flex; gap: 4px; padding: 4px 8px; overflow-x: auto; z-index: 215;
}
.popup-taskbar:empty { display: none; }
.taskbar-item {
  padding: 2px 10px; border-radius: 4px; font-size: 10px; font-weight: 600;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); cursor: pointer;
  white-space: nowrap;
}
.taskbar-item.active-task { border-color: var(--accent-primary); }

/* === SELECTION MODE === */
.selection-toolbar {
  position: sticky; top: 0; z-index: 10; background: var(--accent-primary); color: #fff;
  padding: 6px 14px; border-radius: 6px; display: none; align-items: center; gap: 12px;
  margin-bottom: 8px; font-size: 12px;
}
.selection-toolbar.active { display: flex; }

/* === MINIMAP === */
.minimap-panel {
  position: fixed; top: 60px; right: 16px; width: 160px; background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-main);
  z-index: 80; display: none; flex-direction: column; padding: 8px; font-size: 10px;
}
.minimap-panel.active { display: flex; }
.minimap-floor {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer;
  border-radius: 3px;
}
.minimap-floor:hover { background: var(--bg-subtle); }
.minimap-bar { height: 8px; border-radius: 2px; flex: 1; }

/* === RACK DESIGNER === */
.rack-designer-layout { display: grid; grid-template-columns: 240px 1fr 280px; gap: 12px; flex: 1; min-height: 0; }
@media (max-width: 1280px) { .rack-designer-layout { grid-template-columns: 1fr; } }
.designer-tree { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px; overflow-y: auto; }
.designer-preview { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px; overflow: auto; }
.designer-props { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px; overflow-y: auto; }

.designer-tree-item {
  padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 11px;
  display: flex; align-items: center; gap: 6px;
}
.designer-tree-item:hover { background: var(--bg-subtle); }
.designer-tree-item.selected { background: var(--accent-light); color: var(--accent-primary); font-weight: 700; }

/* === CONTEXT MENU (enhanced RBAC) === */
#context-menu-v2 {
  position: absolute; background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: var(--shadow-main); z-index: 300; display: none; min-width: 220px;
  padding: 4px 0;
}
.ctx-section-label { padding: 4px 12px; font-size: 9px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ctx-item {
  padding: 6px 12px; font-size: 11px; color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.ctx-item:hover { background: var(--bg-subtle); color: var(--accent-primary); }
.ctx-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }

/* === INSPECTOR DRAWER === */
#inspector-drawer {
  width: 380px; background: var(--bg-surface); border-left: 1px solid var(--border-subtle);
  position: fixed; top: 52px; right: -400px; bottom: 28px; z-index: 95;
  transition: right var(--motion-fast); display: flex; flex-direction: column; box-shadow: var(--shadow-main);
}
#inspector-drawer.active { right: 0; }

/* === OVERLAY & MODALS === */
.overlay-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 200; display: none;
}
.overlay-backdrop.active { display: block; }
.modal-dialog-v2 {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 20px; z-index: 201; width: 480px; max-width: 90vw;
  box-shadow: var(--shadow-main); display: none;
}
.modal-dialog-v2.active { display: block; }

/* === 3-COLUMN LAYOUT (Attio / Guest 360) === */
.attio-3col-container { display: grid; grid-template-columns: 280px 1fr 320px; gap: 16px; flex: 1; }
@media (max-width: 1280px) { .attio-3col-container { grid-template-columns: 1fr; } }

/* === GUEST 360 CORE PROFILE === */
.guest360-shell { min-height: 100%; color: var(--text-primary); }
.guest360-shell { gap: var(--section-gap, 24px) !important; }
.guest360-directory-toolbar, .guest360-card-grid, .guest360-kpi-strip { margin: 0 !important; }
.guest360-card-grid { gap: var(--card-gap, 18px) !important; margin-top: var(--section-gap, 24px) !important; margin-bottom: var(--section-gap, 24px) !important; }
.guest360-kpi-strip { margin-bottom: var(--section-gap, 24px) !important; }
.guest360-directory-card > header, .guest360-directory-card > dl { padding: var(--card-padding, 16px) !important; }
.guest360-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.guest360-title h1 { font-size: 18px; font-weight: 800; }
.guest360-title p { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.guest360-title > span { color: var(--text-muted); font-size: 10px; }
.guest360-layout { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: var(--card-gap, 18px); min-height: calc(100vh - 145px); }
.guest360-sidebar, .guest360-profile { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; min-width: 0; }
.guest360-sidebar { overflow: hidden; }
.guest360-main { min-width: 0; }
.guest360-search-wrap { padding: 12px; border-bottom: 1px solid var(--border-subtle); }
.guest360-search-wrap label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.guest360-search-box { display: flex; align-items: center; gap: 7px; padding: 0 9px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 6px; }
.guest360-search-box .svg-icon { width: 13px; height: 13px; color: var(--text-muted); }
.guest360-search-box input { width: 100%; padding: 8px 0; border: 0; background: transparent; color: var(--text-primary); outline: 0; font-size: 11px; }
.guest360-list { max-height: calc(100vh - 230px); overflow-y: auto; padding: 6px; }
.guest360-list-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.guest360-list-item:hover { background: var(--bg-subtle); border-color: var(--border-strong); transform: translateX(1px); }
.guest360-list-item.active { background: var(--accent-light); border-color: var(--accent-primary); box-shadow: inset 3px 0 0 var(--accent-primary); }
.guest360-list-avatar, .guest360-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--accent-light); color: var(--accent-primary); font-weight: 800; }
.guest360-card-avatar { align-self: center; border-radius: 50% !important; line-height: 1; }
.guest360-list-avatar { width: 34px; height: 34px; font-size: 10px; }
.guest360-list-copy { min-width: 0; }
.guest360-list-copy strong, .guest360-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest360-list-copy strong { font-size: 11px; }
.guest360-list-copy small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.guest360-list-copy > span { display: block; margin-top: 5px; }
.guest360-list-risk { align-self: start; }
.guest360-profile { overflow: hidden; }
.guest360-profile-header { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(560px, auto); gap: var(--card-gap, 18px); align-items: start; padding: var(--card-padding, 16px); }
.guest360-profile-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.guest360-avatar { width: 58px; height: 58px; font-size: 17px; line-height: 1; }
.guest360-identity { min-width: 0; }
.guest360-identity h1 { font-size: 18px; font-weight: 800; }
.guest360-profile-header-actions { display: flex; align-items: flex-start; justify-content: flex-end; min-width: 0; }
.guest360-profile-header-actions .guest360-primary-actions { max-width: 760px; }
.guest360-header-actions { display: flex; justify-content: flex-end; min-width: 0; width: 100%; }
.guest360-primary-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; justify-content: end; gap: 7px; width: 100%; max-width: 720px; }
.guest360-primary-actions .guest360-action-btn { justify-content: center; width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 0 12px; overflow: hidden; border-radius: 7px; font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 2px rgba(2, 6, 23, .16); transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.guest360-primary-actions .guest360-action-btn span { overflow: hidden; text-overflow: ellipsis; }
.guest360-primary-actions .guest360-action-btn:hover:not(:disabled) { border-color: var(--accent-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 20%, transparent); transform: translateY(-1px); }
.guest360-primary-actions .guest360-action-btn:active:not(:disabled) { box-shadow: none; transform: translateY(0); }
.guest360-primary-actions .guest360-action-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.guest360-primary-actions .guest360-action-btn .svg-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.guest360-overflow-wrap { position: relative; min-width: 0; width: 100%; }
.guest360-overflow-trigger { justify-content: center; white-space: nowrap; }
.guest360-overflow-menu { position: absolute; z-index: 360; top: calc(100% + 8px); inset-inline-end: 0; width: min(280px, calc(100vw - 24px)); max-height: min(420px, calc(100vh - 150px)); overflow-y: auto; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-main); }
.guest360-overflow-menu button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 13px; padding: 10px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: 10px; text-align: left; cursor: pointer; }
.guest360-overflow-menu button:hover { background: var(--accent-light); color: var(--accent-primary); }
.guest360-overflow-menu .svg-icon { width: 12px; height: 12px; }
.guest360-detail-title { display: block; margin-bottom: 3px; color: var(--accent-primary); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guest360-directory-toolbar > .guest360-directory-search,
.guest360-directory-toolbar > .guest360-directory-controls { align-items: center; min-height: 42px; }
.guest360-directory-toolbar > .guest360-directory-search .guest360-search-box,
.guest360-directory-toolbar > .guest360-directory-controls > button,
.guest360-directory-toolbar > .guest360-directory-controls .guest360-view-switch { min-height: 42px; }
.guest360-context-backdrop { position: fixed; z-index: 370; inset: 0; }
.guest360-context-menu { position: fixed; width: 270px; max-height: min(500px, calc(100vh - 16px)); overflow-y: auto; padding: 6px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--bg-surface); box-shadow: var(--shadow-main); }
.guest360-context-menu section { padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.guest360-context-menu section:last-child { border-bottom: 0; }
.guest360-context-menu h3 { padding: 3px 7px; color: var(--text-muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guest360-context-menu button { width: 100%; padding: 6px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: 9px; text-align: left; cursor: pointer; }
.guest360-context-menu button:hover { background: var(--accent-light); color: var(--accent-primary); }
.guest360-identity p { margin-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.guest360-identity-statuses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.guest360-identity-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--bg-subtle); }
.guest360-identity-status small { color: var(--text-muted); font-size: 7px; font-weight: 700; }
.guest360-identity-status strong { padding: 2px 4px; border-radius: 3px; font-size: 7px; font-weight: 900; }
.guest360-identity-status-success { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.guest360-identity-status-warning { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); }
.guest360-identity-status-danger { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.guest360-identity-status-info { background: var(--accent-light); color: var(--accent-primary); }
.guest360-identity-status-neutral { background: var(--bg-surface); color: var(--text-secondary); }
.guest360-quick-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.guest360-action-btn { padding: 5px 7px; font-size: 9px; }
.guest360-action-btn .svg-icon { width: 12px; height: 12px; }
.guest360-header-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(75px, 1fr)); gap: 8px; }
.guest360-header-metrics span { min-width: 0; padding: 7px 8px; border-radius: 6px; background: var(--bg-subtle); }
.guest360-header-metrics small, .guest360-header-metrics strong { display: block; }
.guest360-header-metrics small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.guest360-header-metrics strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-size: 10px; white-space: nowrap; }
.guest360-header-metrics .guest360-status-badge { display: inline-flex; margin-top: 4px; padding: 3px 6px; }
.guest360-header-metrics .guest360-metric-warning { border: 1px solid color-mix(in srgb, var(--color-danger) 50%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-subtle)); }
.guest360-header-metrics .guest360-persistent-status { border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, transparent); background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-subtle)); }
.guest360-operational-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.guest360-operational-group { min-width: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-subtle); }
.guest360-operational-group > header { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.guest360-operational-group > header .svg-icon { width: 13px; height: 13px; color: var(--accent-primary); }
.guest360-operational-group > header h2 { font-size: 9px; font-weight: 850; letter-spacing: .02em; }
.guest360-operational-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); }
.guest360-operational-metric { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 48px; padding: 7px 8px; background: var(--bg-subtle); }
.guest360-operational-metric small, .guest360-operational-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.guest360-operational-metric small { color: var(--text-muted); font-size: 7px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.guest360-operational-metric strong { margin-top: 4px; color: var(--text-primary); font-size: 9px; line-height: 1.3; }
.guest360-operational-metric .guest360-status-badge { margin-top: 0; }
.guest360-operational-metric-warning { background: color-mix(in srgb, var(--color-danger) 9%, var(--bg-subtle)); }
.guest360-operational-metric-warning strong { color: var(--color-danger); }
.guest360-tab-content,.guest360-overview,.guest360-current-columns,.guest360-operational-summary{gap:var(--card-gap,18px)}
.guest360-card,.guest360-stay-current,.guest360-operational-group{padding:var(--card-padding,16px)}
.guest360-operational-group>header{margin:calc(var(--card-padding,16px) * -1);margin-bottom:0;padding:10px var(--card-padding,16px)}
.guest360-operational-ai { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-subtle)); }
.guest360-operational-ai > header { background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-surface)); }
.guest360-operational-ai .guest360-operational-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guest360-inline-badges { display: flex !important; gap: 4px; padding: 0 !important; background: transparent !important; }
.guest360-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.guest360-tag { padding: 3px 6px; border-radius: 999px; background: var(--accent-light); color: var(--accent-primary); font-size: 9px; font-weight: 700; }
.guest360-tag-risk { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.guest360-muted { color: var(--text-muted); font-size: 10px; }
.guest360-status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 3px 6px; border: 1px solid transparent; border-radius: 999px; font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; }
.guest360-status-success { border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.guest360-status-warning { border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.guest360-status-danger { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.guest360-status-info { border-color: color-mix(in srgb, var(--color-info) 35%, transparent); background: color-mix(in srgb, var(--color-info) 12%, transparent); color: var(--color-info); }
.guest360-status-neutral { border-color: var(--border-strong); background: var(--bg-subtle); color: var(--text-secondary); }
.guest360-warning-area { display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--color-danger) 48%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--color-danger) 9%, var(--bg-surface)); color: var(--color-danger); }
.guest360-warning-area .svg-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.guest360-warning-area strong { font-size: 10px; }
.guest360-warning-area ul { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 4px; padding-left: 15px; color: var(--text-secondary); font-size: 9px; }
.guest360-tabs { display: flex; gap: var(--space-1, 4px); overflow-x: auto; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 0 var(--space-4, 16px); scrollbar-width: thin; }
.guest360-tab { flex: 0 0 auto; min-height: 42px; padding: 0 var(--space-3, 12px); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.guest360-tab:hover { color: var(--text-primary); }
.guest360-tab.active { border-bottom-color: var(--accent-primary); color: var(--accent-primary); }
.guest360-tab-content { padding: var(--space-4, 16px); }
.guest360-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap, 18px); align-items: stretch; }
.guest360-card { display:flex; flex-direction:column; min-width: 0; min-height: 150px; padding: var(--card-padding, 16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); background: var(--bg-subtle); }
.guest360-card-wide { grid-column: 1 / -1; }
.guest360-card h3 { margin-bottom: 9px; color: var(--accent-primary); font-size: 11px; font-weight: 800; }
.guest360-card p { color: var(--text-secondary); font-size: 10px; line-height: 1.6; }
.guest360-card dl > div { display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; min-height:32px; gap: var(--space-3, 12px); padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: 10px; }
.guest360-card dl > div:last-child { border-bottom: 0; }
.guest360-card dt { overflow:hidden; color: var(--text-muted); text-overflow:ellipsis; white-space:nowrap; }
.guest360-card dd { min-width:0; overflow:hidden; text-align: right; text-overflow:ellipsis; white-space:nowrap; }
.guest360-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.guest360-ops span { color: var(--text-muted); font-size: 9px; }
.guest360-ops strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 11px; }
.guest360-ops .guest360-status-badge { display: flex; margin-top: 4px; }
.guest360-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 18px; color: var(--text-muted); font-size: 11px; text-align: center; }
.guest360-state .svg-icon { width: 18px; height: 18px; }
.guest360-state-partial { min-height: auto; margin-bottom: 8px; border: 1px solid var(--color-warning); border-radius: 7px; color: var(--color-warning); }
.guest360-state-error { color: var(--color-danger); }
.guest360-modal-backdrop { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 23, .68); backdrop-filter: blur(4px); }
.guest360-modal { width: min(480px, 100%); padding: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); box-shadow: var(--shadow-main); }
.guest360-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.guest360-modal-header h2 { color: var(--accent-primary); font-size: 14px; font-weight: 800; }
.guest360-modal-header p { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.guest360-modal > label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.guest360-modal textarea { width: 100%; min-height: 96px; resize: vertical; }
.guest360-modal-note { margin-top: 8px; color: var(--text-muted); font-size: 9px; }
.guest360-modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.guest360-timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.guest360-timeline-toolbar > span { flex: 0 0 auto; color: var(--text-muted); font-size: 9px; }
.guest360-timeline-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.guest360-timeline-filter { padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font-size: 9px; font-weight: 700; cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast); }
.guest360-timeline-filter:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.guest360-timeline-filter.active { border-color: var(--accent-primary); background: var(--accent-light); color: var(--accent-primary); }
.guest360-timeline { display: flex; flex-direction: column; gap: 16px; }
.guest360-timeline-group > h3 { position: sticky; top: 0; z-index: 2; padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); color: var(--text-secondary); font-size: 10px; font-weight: 800; }
.guest360-timeline-group > div { position: relative; margin: 6px 0 0 54px; border-left: 1px solid var(--border-strong); }
.guest360-timeline-event { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 62px; margin-left: 21px; padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); }
.guest360-event-time { position: absolute; right: calc(100% + 32px); width: 46px; color: var(--text-muted); font-size: 9px; text-align: right; }
.guest360-event-icon { position: absolute; right: calc(100% + 7px); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-surface); color: var(--accent-primary); }
.guest360-event-icon .svg-icon { width: 13px; height: 13px; }
.guest360-event-critical { border-color: var(--color-danger); color: var(--color-danger); }
.guest360-event-warning { border-color: var(--color-warning); color: var(--color-warning); }
.guest360-event-success { border-color: var(--color-success); color: var(--color-success); }
.guest360-event-copy { grid-column: 2; min-width: 0; }
.guest360-event-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.guest360-event-heading strong { font-size: 11px; }
.guest360-event-copy p { margin-top: 4px; color: var(--text-muted); font-size: 9px; }
.guest360-event-copy small { display: block; margin-top: 4px; color: var(--accent-primary); font-size: 8px; }
.guest360-event-severity { padding: 2px 5px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-secondary); font-size: 8px; font-weight: 800; }
.guest360-event-severity-success { color: var(--color-success); }
.guest360-event-severity-warning { color: var(--color-warning); }
.guest360-event-severity-critical { color: var(--color-danger); }
.guest360-event-detail-btn { grid-column: 3; font-size: 9px; }
.guest360-event-detail-btn .svg-icon { width: 11px; height: 11px; }
.guest360-event-modal-backdrop { position: fixed; inset: 0; z-index: 330; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 23, .72); backdrop-filter: blur(4px); }
.guest360-event-modal { width: min(720px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); box-shadow: var(--shadow-main); }
.guest360-event-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.guest360-event-modal > header h2 { color: var(--accent-primary); font-size: 14px; font-weight: 800; }
.guest360-event-modal > header p { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.guest360-event-modal > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 14px; }
.guest360-event-modal > dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 10px; }
.guest360-event-modal dt { color: var(--text-muted); }
.guest360-event-modal dd { overflow-wrap: anywhere; color: var(--text-primary); }
.guest360-event-metadata { margin-top: 12px; }
.guest360-event-metadata h3 { margin-bottom: 5px; color: var(--text-secondary); font-size: 10px; }
.guest360-event-metadata pre { max-height: 150px; overflow: auto; padding: 9px; border-radius: 6px; background: var(--bg-subtle); color: var(--text-secondary); font: 9px/1.5 monospace; white-space: pre-wrap; }
.guest360-event-modal > footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.guest360-stays { display: flex; flex-direction: column; gap: 12px; }
.guest360-stay-current, .guest360-stay-history { padding: 13px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-subtle); }
.guest360-stay-current { border-top: 2px solid var(--accent-primary); }
.guest360-current-summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.guest360-current-summary > span { min-width: 0; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); }
.guest360-current-summary > span.warning { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-surface)); }
.guest360-current-summary small, .guest360-current-summary strong { display: block; }
.guest360-current-summary small { color: var(--text-muted); font-size: 7px; text-transform: uppercase; }
.guest360-current-summary strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
.guest360-current-summary .guest360-status-badge { margin-top: 3px; }
.guest360-current-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.guest360-current-columns > section { min-width: 0; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-current-columns h3 { margin-bottom: 5px; color: var(--accent-primary); font-size: 10px; font-weight: 800; }
.guest360-current-columns dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.guest360-current-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); font-size: 9px; }
.guest360-current-field dt { color: var(--text-muted); }
.guest360-current-field dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-weight: 700; text-align: right; white-space: nowrap; }
.guest360-current-field .guest360-status-badge { max-width: 100%; }
.guest360-current-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.guest360-current-actions .btn { font-size: 9px; }
.guest360-current-actions .svg-icon { width: 11px; height: 11px; }
.guest360-current-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.guest360-current-heading-actions .svg-icon { width: 11px; height: 11px; }
.guest360-overview-after-stay { margin-top: 12px; }
.guest360-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.guest360-section-heading h2 { color: var(--text-primary); font-size: 12px; font-weight: 800; }
.guest360-section-heading p { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.guest360-stay-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.guest360-stay-summary > span { min-width: 0; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); }
.guest360-stay-summary small, .guest360-stay-summary strong { display: block; }
.guest360-stay-summary small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.guest360-stay-summary strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
.guest360-stay-summary .guest360-status-badge { margin-top: 4px; }
.guest360-stay-context { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 9px; color: var(--text-muted); font-size: 9px; }
.guest360-stay-context strong { color: var(--text-primary); }
.guest360-stay-list { display: flex; flex-direction: column; gap: 6px; }
.guest360-stay-list > article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-stay-list > article > div:first-child { min-width: 0; }
.guest360-stay-list strong { font-size: 10px; }
.guest360-stay-list p { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.guest360-stay-list small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: 8px; white-space: nowrap; }
.guest360-stay-list-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.guest360-change-indicator { padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-info) 12%, transparent); color: var(--color-info); font-size: 8px; font-weight: 700; }
.guest360-folio { display: flex; flex-direction: column; gap: 12px; }
.guest360-folio-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.guest360-folio-summary > span { min-width: 0; padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-subtle); }
.guest360-folio-summary > span.warning { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: color-mix(in srgb, var(--color-danger) 9%, var(--bg-subtle)); }
.guest360-folio-summary small, .guest360-folio-summary strong { display: block; }
.guest360-folio-summary small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.guest360-folio-summary strong { margin-top: 3px; font-size: 11px; }
.guest360-folio-summary .guest360-status-badge { margin-top: 4px; }
.guest360-folio-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.guest360-folio-toolbar > div { display: flex; flex-wrap: wrap; gap: 4px; }
.guest360-folio-filter { padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.guest360-folio-filter:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.guest360-folio-filter.active { border-color: var(--accent-primary); background: var(--accent-light); color: var(--accent-primary); }
.guest360-folio-list { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; }
.guest360-folio-list > button { width: 100%; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); text-align: left; cursor: pointer; }
.guest360-folio-list > button:last-child { border-bottom: 0; }
.guest360-folio-list > button:hover { background: var(--bg-subtle); }
.guest360-folio-list > button > span:nth-child(2) { min-width: 0; }
.guest360-folio-list > button > span:nth-child(2) strong, .guest360-folio-list > button > span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest360-folio-list > button > span:nth-child(2) strong { font-size: 10px; }
.guest360-folio-list > button > span:nth-child(2) small { margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.guest360-folio-type { width: fit-content; padding: 3px 6px; border-radius: 999px; background: var(--accent-light); color: var(--accent-primary); font-size: 8px; font-weight: 800; }
.guest360-folio-type-payment { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.guest360-folio-type-refund, .guest360-folio-type-reversal { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.guest360-folio-indicators { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.guest360-folio-indicators i { padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); font-size: 8px; font-style: normal; font-weight: 700; }
.guest360-folio-indicators strong { min-width: 70px; font-size: 10px; text-align: right; }
.guest360-record-modal-backdrop { position: fixed; inset: 0; z-index: 335; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 23, .72); backdrop-filter: blur(4px); }
.guest360-record-modal { width: min(760px, 100%); max-height: min(800px, calc(100vh - 40px)); overflow-y: auto; padding: 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); box-shadow: var(--shadow-main); }
.guest360-record-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.guest360-record-modal > header h2 { color: var(--accent-primary); font-size: 14px; font-weight: 800; }
.guest360-record-modal > header p { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.guest360-record-modal > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 14px; }
.guest360-record-modal > dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 10px; }
.guest360-record-modal dt { color: var(--text-muted); }
.guest360-record-modal dd { overflow-wrap: anywhere; }
.guest360-record-history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.guest360-record-history section { padding: 10px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-subtle); }
.guest360-record-history h3 { margin-bottom: 6px; color: var(--text-secondary); font-size: 10px; }
.guest360-record-history ul { list-style: none; }
.guest360-record-history li { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); font-size: 9px; }
.guest360-record-history li:last-child { border-bottom: 0; }
.guest360-record-history li strong, .guest360-record-history li span { display: block; }
.guest360-record-history li span { margin-top: 2px; color: var(--text-muted); }
.guest360-record-modal > footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.guest360-ai-panel { display: flex; flex-direction: column; gap: 10px; }
.guest360-ai-executive, .guest360-ai-section { padding: 12px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-subtle); }
.guest360-ai-executive { border-top: 2px solid var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-subtle)); }
.guest360-ai-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.guest360-ai-section-title > .svg-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-primary); }
.guest360-ai-section-title h2 { font-size: 11px; font-weight: 800; }
.guest360-ai-section-title p { margin-top: 2px; color: var(--text-muted); font-size: 8px; }
.guest360-ai-executive-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(150px, .65fr)); gap: 8px; }
.guest360-ai-narrative, .guest360-ai-kpi { padding: 10px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-ai-narrative p { color: var(--text-secondary); font-size: 10px; line-height: 1.55; }
.guest360-ai-narrative p + p { margin-top: 6px; }
.guest360-ai-kpi { display: flex; flex-direction: column; justify-content: center; }
.guest360-ai-kpi small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.guest360-ai-kpi strong { margin-top: 5px; color: var(--accent-primary); font-size: 16px; }
.guest360-ai-risk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.guest360-ai-risk { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-ai-risk > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.guest360-ai-risk strong { font-size: 9px; }
.guest360-ai-risk > div:first-child span { font-size: 8px; font-weight: 800; }
.guest360-ai-risk-score { height: 4px; margin: 7px 0; overflow: hidden; border-radius: 999px; background: var(--bg-subtle); }
.guest360-ai-risk-score i { display: block; height: 100%; border-radius: inherit; background: var(--accent-primary); }
.guest360-ai-risk p { min-height: 34px; color: var(--text-muted); font-size: 8px; line-height: 1.4; }
.guest360-ai-risk > small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 7px; text-align: right; }
.guest360-ai-risk-success { border-top: 2px solid var(--color-success); }
.guest360-ai-risk-success .guest360-ai-risk-score i { background: var(--color-success); }
.guest360-ai-risk-success > div:first-child span { color: var(--color-success); }
.guest360-ai-risk-warning { border-top: 2px solid var(--color-warning); }
.guest360-ai-risk-warning .guest360-ai-risk-score i { background: var(--color-warning); }
.guest360-ai-risk-warning > div:first-child span { color: var(--color-warning); }
.guest360-ai-risk-critical { border-top: 2px solid var(--color-danger); }
.guest360-ai-risk-critical .guest360-ai-risk-score i { background: var(--color-danger); }
.guest360-ai-risk-critical > div:first-child span { color: var(--color-danger); }
.guest360-ai-behaviour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.guest360-ai-behaviour > div { padding: 8px 9px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); }
.guest360-ai-behaviour small, .guest360-ai-behaviour strong { display: block; }
.guest360-ai-behaviour small { color: var(--text-muted); font-size: 8px; }
.guest360-ai-behaviour strong { margin-top: 4px; font-size: 10px; }
.guest360-ai-recommendations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.guest360-ai-recommendation { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-primary); border-radius: 7px; background: var(--bg-surface); }
.guest360-ai-recommendation > .svg-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--accent-primary); }
.guest360-ai-recommendation h3 { font-size: 9px; }
.guest360-ai-recommendation p { margin-top: 3px; color: var(--text-muted); font-size: 8px; line-height: 1.4; }
.guest360-ai-priority-high { border-left-color: var(--color-danger); }
.guest360-ai-priority-medium { border-left-color: var(--color-warning); }
.guest360-ai-priority-low { border-left-color: var(--color-success); }
.guest360-ai-insights { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-ai-insights article { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--border-subtle); }
.guest360-ai-insights article:last-child { border-bottom: 0; }
.guest360-ai-insights .svg-icon { width: 13px; height: 13px; color: var(--accent-primary); }
.guest360-ai-insights strong { font-size: 9px; }
.guest360-ai-insights p { margin-top: 2px; color: var(--text-muted); font-size: 8px; }
.guest360-ai-insights time { color: var(--text-muted); font-size: 8px; white-space: nowrap; }
.guest360-ai-predictions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.guest360-ai-predictions article { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); }
.guest360-ai-predictions article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.guest360-ai-predictions small { color: var(--text-muted); font-size: 8px; }
.guest360-ai-predictions strong { font-size: 10px; }
.guest360-ai-predictions article > span { display: block; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-subtle); }
.guest360-ai-predictions i { display: block; height: 100%; border-radius: inherit; background: var(--accent-primary); }
.guest360-ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.guest360-ai-actions .svg-icon { width: 12px; height: 12px; }
.guest360-documents-panel { display: flex; flex-direction: column; gap: 10px; }
.guest360-document-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.guest360-document-summary article { padding: 9px 10px; border: 1px solid var(--border-subtle); border-top: 2px solid var(--accent-primary); border-radius: 7px; background: var(--bg-subtle); }
.guest360-document-summary article.success { border-top-color: var(--color-success); }
.guest360-document-summary article.warning { border-top-color: var(--color-warning); }
.guest360-document-summary article.danger { border-top-color: var(--color-danger); }
.guest360-document-summary small, .guest360-document-summary strong { display: block; }
.guest360-document-summary small { color: var(--text-muted); font-size: 8px; }
.guest360-document-summary strong { margin-top: 4px; font-size: 15px; }
.guest360-document-categories { display: flex; flex-wrap: wrap; gap: 5px; }
.guest360-document-categories span { padding: 4px 7px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--bg-subtle); color: var(--text-muted); font-size: 7px; font-weight: 700; }
.guest360-document-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.guest360-document-groups section { padding: 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-subtle); }
.guest360-document-groups h3 { margin-bottom: 6px; color: var(--text-secondary); font-size: 9px; }
.guest360-document-groups section > div { display: flex; flex-wrap: wrap; gap: 3px; }
.guest360-document-groups span { padding: 3px 5px; border-radius: 4px; background: var(--bg-surface); color: var(--text-muted); font-size: 6px; }
.guest360-document-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-subtle); }
.guest360-document-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.guest360-document-filter { padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); font-size: 8px; font-weight: 700; cursor: pointer; }
.guest360-document-filter:hover, .guest360-document-filter.active { border-color: var(--accent-primary); color: var(--accent-primary); }
.guest360-document-filter.active { background: var(--accent-light); }
.guest360-document-list { display: flex; flex-direction: column; gap: 7px; }
.guest360-document-list > article { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
.guest360-document-main { width: 100%; display: grid; grid-template-columns: 30px minmax(170px, 1.2fr) minmax(115px, .65fr) minmax(135px, .7fr) minmax(120px, .55fr); align-items: center; gap: 9px; padding: 10px; border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.guest360-document-main:hover { background: var(--bg-subtle); }
.guest360-document-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent-light); color: var(--accent-primary); }
.guest360-document-icon .svg-icon { width: 14px; height: 14px; }
.guest360-document-copy, .guest360-document-dates, .guest360-document-origin, .guest360-document-badges { min-width: 0; }
.guest360-document-copy strong, .guest360-document-copy small, .guest360-document-dates small, .guest360-document-dates strong, .guest360-document-origin small, .guest360-document-origin strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest360-document-copy strong, .guest360-document-dates strong, .guest360-document-origin strong { font-size: 9px; }
.guest360-document-copy em { display: block; margin-top: 3px; color: var(--accent-primary); font-size: 7px; font-style: normal; font-weight: 700; }
.guest360-document-copy small, .guest360-document-dates small, .guest360-document-origin small { margin-top: 2px; color: var(--text-muted); font-size: 7px; }
.guest360-document-badges { display: flex; align-items: flex-end; flex-direction: column; gap: 4px; }
.guest360-document-badges i { color: var(--text-muted); font-size: 7px; font-style: normal; }
.guest360-document-status { width: fit-content; padding: 3px 6px; border-radius: 999px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.guest360-document-status-success { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.guest360-document-status-warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.guest360-document-status-danger { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.guest360-document-status-neutral { background: var(--bg-subtle); color: var(--text-muted); }
.guest360-document-row-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.guest360-document-row-actions button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-muted); font-size: 7px; cursor: pointer; }
.guest360-document-row-actions button:hover { border-color: var(--border-strong); background: var(--bg-surface); color: var(--text-primary); }
.guest360-document-row-actions .svg-icon { width: 10px; height: 10px; }
.guest360-document-modal { width: min(820px, 100%); }
.guest360-document-audit { grid-template-columns: 1fr; }
.guest360-document-action-modal { width: min(480px, 100%); }
.guest360-document-action-note { padding: 12px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-subtle); color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.guest360-5651-section { padding: 11px; border: 1px solid var(--border-subtle); border-top: 2px solid var(--accent-primary); border-radius: 8px; background: var(--bg-subtle); }
.guest360-5651-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.guest360-5651-list { display: flex; flex-direction: column; gap: 5px; }
.guest360-5651-list article { display: grid; grid-template-columns: 1.1fr 1fr 1fr .65fr auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); }
.guest360-5651-list strong, .guest360-5651-list small { display: block; overflow-wrap: anywhere; }
.guest360-5651-list strong { font-size: 8px; }
.guest360-5651-list small { margin-top: 2px; color: var(--text-muted); font-size: 7px; }
.guest360-5651-status span { display: inline-block; padding: 3px 6px; border-radius: 999px; background: var(--accent-light); color: var(--accent-primary); font-size: 7px; font-weight: 800; }
.guest360-5651-modal { width: min(820px, 100%); }
.guest360-messages-panel { display: flex; flex-direction: column; gap: 9px; }
.guest360-message-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-subtle); }
.guest360-message-channels, .guest360-message-quick-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.guest360-message-channel { padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.guest360-message-channel:hover, .guest360-message-channel.active { border-color: var(--accent-primary); color: var(--accent-primary); }
.guest360-message-channel.active { background: var(--accent-light); }
.guest360-message-list { display: flex; flex-direction: column; gap: 6px; }
.guest360-message-list > article { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
.guest360-message-main { width: 100%; display: grid; grid-template-columns: 90px minmax(190px, 1fr) minmax(145px, .55fr) 105px; align-items: center; gap: 9px; padding: 10px; border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.guest360-message-main:hover { background: var(--bg-subtle); }
.guest360-message-channel-badge { width: fit-content; padding: 4px 7px; border-radius: 999px; background: var(--accent-light); color: var(--accent-primary); font-size: 8px; font-weight: 800; }
.guest360-message-channel-sms { background: color-mix(in srgb, var(--color-info) 13%, transparent); color: var(--color-info); }
.guest360-message-channel-email { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); }
.guest360-message-channel-system { background: var(--bg-subtle); color: var(--text-secondary); }
.guest360-message-copy, .guest360-message-meta { min-width: 0; }
.guest360-message-copy strong, .guest360-message-copy small, .guest360-message-copy p, .guest360-message-meta time, .guest360-message-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest360-message-copy strong { font-size: 10px; }
.guest360-message-copy small, .guest360-message-copy p, .guest360-message-meta { margin-top: 3px; color: var(--text-muted); font-size: 7px; }
.guest360-message-status { justify-self: end; padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 800; text-align: right; }
.guest360-message-status small { display: block; margin-top: 2px; font-size: 6px; font-weight: 600; }
.guest360-message-status-success { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.guest360-message-status-warning { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); }
.guest360-message-status-danger { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.guest360-message-status-info { background: var(--accent-light); color: var(--accent-primary); }
.guest360-message-row-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.guest360-message-row-actions button { padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-muted); font-size: 7px; cursor: pointer; }
.guest360-message-row-actions button:hover { border-color: var(--border-strong); background: var(--bg-surface); color: var(--text-primary); }
.guest360-message-modal, .guest360-message-composer { width: min(840px, 100%); }
.guest360-message-delivery { grid-template-columns: 1fr; }
.guest360-message-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.guest360-message-form label { color: var(--text-muted); font-size: 8px; font-weight: 700; }
.guest360-message-form input, .guest360-message-form select, .guest360-message-form textarea { width: 100%; margin-top: 4px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-subtle); color: var(--text-primary); font-size: 10px; }
.guest360-message-form input, .guest360-message-form select { height: 36px; padding: 0 8px; }
.guest360-message-form textarea { min-height: 130px; padding: 9px; resize: vertical; }
.guest360-message-form-wide, .guest360-message-attachment { grid-column: 1 / -1; }
.guest360-message-form label > small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 7px; text-align: right; }
.guest360-message-attachment { display: flex; align-items: center; gap: 7px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 7px; color: var(--text-muted); font-size: 8px; }
.guest360-message-attachment .svg-icon { width: 13px; height: 13px; }
.guest360-message-composer-actions { gap: 6px; }
.guest360-audit-panel { display: flex; flex-direction: column; gap: 9px; }
.guest360-audit-summary { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.guest360-audit-summary article { padding: 8px; border: 1px solid var(--border-subtle); border-top: 2px solid var(--accent-primary); border-radius: 7px; background: var(--bg-subtle); }
.guest360-audit-summary article.success { border-top-color: var(--color-success); }
.guest360-audit-summary article.warning { border-top-color: var(--color-warning); }
.guest360-audit-summary article.danger { border-top-color: var(--color-danger); }
.guest360-audit-summary small, .guest360-audit-summary strong { display: block; }
.guest360-audit-summary small { min-height: 20px; color: var(--text-muted); font-size: 7px; line-height: 1.35; }
.guest360-audit-summary strong { margin-top: 4px; font-size: 14px; }
.guest360-audit-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-subtle); }
.guest360-audit-filter { padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); font-size: 7px; font-weight: 800; cursor: pointer; }
.guest360-audit-filter:hover, .guest360-audit-filter.active { border-color: var(--accent-primary); color: var(--accent-primary); }
.guest360-audit-filter.active { background: var(--accent-light); }
.guest360-audit-table { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); }
.guest360-audit-head, .guest360-audit-row { min-width: 1050px; display: grid; grid-template-columns: 125px minmax(150px, 1.25fr) 90px minmax(130px, 1fr) 100px 120px 130px 115px; align-items: center; gap: 8px; }
.guest360-audit-head { padding: 7px 9px; background: var(--bg-subtle); color: var(--text-muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.guest360-audit-row { width: 100%; padding: 8px 9px; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-size: 8px; text-align: left; cursor: pointer; }
.guest360-audit-row:hover { background: var(--bg-subtle); }
.guest360-audit-row time, .guest360-audit-row strong, .guest360-audit-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest360-audit-row strong { color: var(--text-primary); font-size: 8px; }
.guest360-audit-row small { margin-top: 2px; color: var(--text-muted); font-size: 7px; }
.guest360-audit-result { display: inline-block; padding: 3px 5px; border-radius: 4px; font-size: 7px; font-style: normal; font-weight: 800; }
.guest360-audit-result-success { background: color-mix(in srgb, var(--color-success) 13%, transparent); color: var(--color-success); }
.guest360-audit-result-failed, .guest360-audit-result-denied { background: color-mix(in srgb, var(--color-danger) 13%, transparent); color: var(--color-danger); }
.guest360-audit-immutable { width: fit-content; padding: 2px 4px; border-radius: 3px; background: var(--accent-light); color: var(--accent-primary) !important; font-weight: 800; }
.guest360-audit-modal { width: min(900px, 100%); }
.guest360-audit-seal { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px; border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--color-success) 8%, var(--bg-subtle)); color: var(--color-success); }
.guest360-audit-seal .svg-icon { width: 16px; height: 16px; }
.guest360-audit-seal strong, .guest360-audit-seal span { display: block; }
.guest360-audit-seal strong { font-size: 9px; }
.guest360-audit-seal span { margin-top: 2px; color: var(--text-muted); font-size: 7px; }

@media (max-width: 1500px) {
  .guest360-profile-header { grid-template-columns: minmax(250px, .65fr) minmax(480px, 1.35fr); }
  .guest360-avatar { width: 50px; height: 50px; }
  .guest360-header-metrics { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
  .guest360-operational-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-operational-ai { grid-column: 1 / -1; }
  .guest360-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-folio-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-current-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guest360-current-columns dl { grid-template-columns: 1fr; }
  .guest360-ai-risk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guest360-ai-predictions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-document-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guest360-document-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guest360-document-main { grid-template-columns: 30px minmax(160px, 1fr) minmax(110px, .6fr) minmax(110px, .6fr); }
  .guest360-document-badges { grid-column: 2 / -1; align-items: center; flex-direction: row; }
  .guest360-message-main { grid-template-columns: 80px minmax(170px, 1fr) minmax(130px, .6fr); }
  .guest360-message-status { grid-column: 2 / -1; justify-self: start; }
  .guest360-audit-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .guest360-layout { grid-template-columns: 1fr; }
  .guest360-list { max-height: 260px; }
  .guest360-profile-header { grid-template-columns: 1fr; }
  .guest360-header-actions, .guest360-primary-actions { justify-content: flex-start; }
  .guest360-primary-actions { max-width: none; }
  .guest360-operational-summary { grid-template-columns: 1fr; }
  .guest360-operational-ai { grid-column: auto; }
  .guest360-operational-ai .guest360-operational-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-event-modal > dl { grid-template-columns: 1fr; }
  .guest360-record-modal > dl { grid-template-columns: 1fr; }
  .guest360-document-toolbar { align-items: flex-start; flex-direction: column; }
  .guest360-document-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-5651-list article { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-message-toolbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 900px) {
  .guest360-current-summary, .guest360-current-columns { grid-template-columns: 1fr; }
  .guest360-ai-executive-grid, .guest360-ai-behaviour, .guest360-ai-recommendations, .guest360-ai-risk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .guest360-operational-grid, .guest360-operational-ai .guest360-operational-grid { grid-template-columns: 1fr; }
  .guest360-timeline-toolbar { align-items: flex-start; flex-direction: column; }
  .guest360-timeline-group > div { margin-left: 42px; }
  .guest360-timeline-event { grid-template-columns: minmax(0, 1fr); margin-left: 17px; }
  .guest360-event-copy, .guest360-event-detail-btn { grid-column: 1; }
  .guest360-event-detail-btn { width: fit-content; }
  .guest360-event-time { right: calc(100% + 28px); width: 38px; }
  .guest360-event-modal > dl > div { grid-template-columns: 90px minmax(0, 1fr); }
  .guest360-stay-summary, .guest360-folio-summary, .guest360-record-history { grid-template-columns: 1fr; }
  .guest360-stay-list > article, .guest360-folio-toolbar { align-items: flex-start; flex-direction: column; }
  .guest360-stay-list-actions { justify-content: flex-start; }
  .guest360-folio-list > button { grid-template-columns: 1fr; }
  .guest360-folio-indicators { justify-content: flex-start; }
  .guest360-folio-indicators strong { text-align: left; }
  .guest360-record-modal > dl > div { grid-template-columns: 90px minmax(0, 1fr); }
  .guest360-current-actions { align-items: stretch; flex-direction: column; }
  .guest360-current-actions .btn { justify-content: center; width: 100%; }
  .guest360-ai-predictions { grid-template-columns: 1fr; }
  .guest360-ai-insights article { grid-template-columns: 20px minmax(0, 1fr); }
  .guest360-ai-insights time { grid-column: 2; }
  .guest360-ai-actions { align-items: stretch; flex-direction: column; }
  .guest360-ai-actions .btn { justify-content: center; width: 100%; }
  .guest360-document-summary, .guest360-document-main { grid-template-columns: 1fr; }
  .guest360-document-groups, .guest360-5651-list article { grid-template-columns: 1fr; }
  .guest360-document-icon { display: none; }
  .guest360-document-badges { grid-column: 1; align-items: flex-start; }
  .guest360-document-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest360-document-row-actions button { min-height: 36px; justify-content: center; }
  .guest360-primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .guest360-primary-actions > .btn, .guest360-overflow-wrap, .guest360-overflow-trigger { width: 100%; }
  .guest360-overflow-menu { right: auto; left: 0; width: min(280px, calc(100vw - 48px)); }
  .guest360-message-main, .guest360-message-form { grid-template-columns: 1fr; }
  .guest360-message-status { grid-column: 1; }
  .guest360-message-form-wide, .guest360-message-attachment { grid-column: 1; }
  .guest360-message-composer-actions { align-items: stretch; flex-direction: column; }
  .guest360-message-composer-actions .btn { justify-content: center; width: 100%; }
  .guest360-audit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === SEGMENT ACCORDION HEADER === */
.segment-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 6px; cursor: pointer; user-select: none;
}
.segment-chevron { font-size: 12px; transition: transform var(--motion-fast); }
.segment-chevron.open { transform: rotate(90deg); }