/* =========================================================
   SHIFTPILOT · HOST ISOLATED PRODUCTION STYLESHEET
   Source: ShiftPilot-App-Stage-Elementor-Safe.css
   Scope: .sp-app-stage only
   Loading: external WordPress plugin, late enqueue

   IMPORTANT
   - Do not paste this file into Elementor Custom CSS.
   - Keep the Elementor root container class: sp-app-stage
   - Remove the old Custom CSS from the App Stage container.
   ========================================================= */

/* =========================================================
   SHIFTPILOT · FINAL ELEMENTOR PROTOTYPE
   Consolidated architecture · image-based MorphGlass
   Original outside tiles, fully opaque Photoshop blur inside
   ========================================================= */

.sp-app-stage{
  --sp-bg-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Background_edited.jpg");
  --sp-bg-blur-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Background_edited_blur.jpg");
  --sp-bg-position-x: 50%;
  --sp-bg-position-y: 50%;

  /* ---------------------------------------------------------
     TYPOGRAPHY SYSTEM
     Mirrors Elementor Global Fonts:
     sp_Display, sp_Page_Title, sp_Section_Title, sp_KPI,
     sp_Body, sp_UI, sp_Label, sp_Meta
     --------------------------------------------------------- */

  --sp-font-display:
    "sp_Aptos",
    "Aptos",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --sp-font-ui:
    "sp_Inter",
    "Inter",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;

  --sp-type-display: 40px;
  --sp-type-page-title: 30px;
  --sp-type-section-title: 20px;
  --sp-type-kpi: 34px;
  --sp-type-body: 15px;
  --sp-type-ui: 14px;
  --sp-type-label: 11px;
  --sp-type-meta: 12px;

  --sp-leading-display: 1.05;
  --sp-leading-page-title: 1.10;
  --sp-leading-section-title: 1.20;
  --sp-leading-kpi: 1;
  --sp-leading-body: 1.50;
  --sp-leading-ui: 1.35;
  --sp-leading-label: 1.25;
  --sp-leading-meta: 1.35;

  --sp-tracking-display: -0.035em;
  --sp-tracking-page-title: -0.030em;
  --sp-tracking-section-title: -0.020em;
  --sp-tracking-kpi: -0.030em;
  --sp-tracking-body: 0;
  --sp-tracking-ui: -0.005em;
  --sp-tracking-label: 0.060em;
  --sp-tracking-meta: 0.010em;

  /* ---------------------------------------------------------
     COLOR SYSTEM
     Mirrors Elementor Global Colors:
     Text, Icons, Status, Operations and Interactive States
     --------------------------------------------------------- */

  /* Text */
  --sp-text-primary: #17242D;
  --sp-text-secondary: #3D4E58;
  --sp-text-tertiary: #5C6D77;
  --sp-text-muted: #74818A;
  --sp-text-disabled: #929BA1;
  --sp-text-inverse: #F6F9FB;

  /* Icons */
  --sp-icon-primary: #233A46;
  --sp-icon-secondary: #536670;
  --sp-icon-muted: #75838C;
  --sp-icon-active: #2F6783;
  --sp-icon-inverse: #F7FAFC;

  /* Status */
  --sp-status-success: #2F705A;
  --sp-status-warning: #8B6128;
  --sp-status-critical: #98474D;
  --sp-status-info: #3A6F8C;
  --sp-status-neutral: #596A74;

  --sp-status-success-rgb: 47 112 90;
  --sp-status-warning-rgb: 139 97 40;
  --sp-status-critical-rgb: 152 71 77;
  --sp-status-info-rgb: 58 111 140;
  --sp-status-neutral-rgb: 89 106 116;

  /* Operations */
  --sp-op-arrival: #34728F;
  --sp-op-departure: #6E6877;
  --sp-op-inhouse: #496E64;
  --sp-op-vip: #6E5F7F;
  --sp-op-loyalty: #5F5884;
  --sp-op-housekeeping: #42745F;
  --sp-op-technical: #687078;

  --sp-op-arrival-rgb: 52 114 143;
  --sp-op-departure-rgb: 110 104 119;
  --sp-op-inhouse-rgb: 73 110 100;
  --sp-op-vip-rgb: 110 95 127;
  --sp-op-loyalty-rgb: 95 88 132;
  --sp-op-housekeeping-rgb: 66 116 95;
  --sp-op-technical-rgb: 104 112 120;

  /* Interactive */
  --sp-interactive-primary: #2F6783;
  --sp-interactive-hover: #285A71;
  --sp-interactive-pressed: #224C60;
  --sp-focus-ring: #3A7593;

  /* Material surfaces and structure */
  --sp-line: rgba(255,255,255,.28);
  --sp-line-dark: rgba(34,51,63,.10);
  --sp-surface: rgba(255,255,255,.12);
  --sp-surface-strong: rgba(255,255,255,.20);

  /* Elevated inner panels (KPI ribbon, intelligence rail) — a step
     deeper than the surrounding main tile without becoming opaque. */
  --sp-surface-elevated: rgba(28,42,54,.09);
  --sp-surface-elevated-hover: rgba(28,42,54,.14);
  --sp-line-elevated: rgba(28,42,54,.12);

  /* Anthracite Apple-glass score material (used under the blur image). */
  --sp-score-surface: linear-gradient(180deg,#20282F 0%,#161D24 100%);
  --sp-score-surface-strong: linear-gradient(180deg,#252E36 0%,#141A20 100%);

  /* Guest Experience classification (tuned for the dark score bar). */
  --sp-tier-elite: #74B7D6;
  --sp-tier-superior: #6FBF9C;
  --sp-tier-reputable-plus: #CBA968;
  --sp-tier-reputable: #C79A72;
  --sp-tier-unsatisfactory: #DD8A90;

  /* Compatibility aliases for existing component architecture */
  --sp-ink: var(--sp-text-primary);
  --sp-ink-2: var(--sp-text-secondary);
  --sp-ink-3: var(--sp-text-tertiary);
  --sp-arrival: var(--sp-op-arrival);
  --sp-departure: var(--sp-op-departure);
  --sp-success: var(--sp-status-success);
  --sp-warning: var(--sp-status-warning);
  --sp-critical: var(--sp-status-critical);
  --sp-vip: var(--sp-op-vip);
  --sp-blue: var(--sp-status-info);
  --sp-radius-sidebar: 34px;
  --sp-radius-score: 26px;
  --sp-radius-main: 36px;
  --sp-radius-bulletin: 28px;

  /* Unified outer frame */
  --sp-edge-gap: clamp(16px,1.35vw,28px);
  --sp-gap: clamp(12px,.9vw,16px);
  --sp-pad-x: var(--sp-edge-gap);
  --sp-pad-y: var(--sp-edge-gap);

  /* Adaptive sidebar geometry */
  --sp-sidebar-width-expanded: clamp(226px,14.6vw,270px);
  --sp-sidebar-width-collapsed: 78px;
  --sp-sidebar-width: var(--sp-sidebar-width-expanded);

  --sp-score-height: 92px;
  --sp-bulletin-height: 118px;

  /* Brand asset */
  --sp-logo-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/06/Logo-Fertig_weiss.svg");
  --sp-logo-icon-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Logo-Fertig_weiss-Icon.svg");
  --sp-overlay-surface: linear-gradient(180deg,rgba(39,50,59,.92),rgba(24,32,39,.94));
  --sp-overlay-surface-soft: linear-gradient(180deg,rgba(57,70,80,.84),rgba(32,42,50,.88));
  --sp-overlay-line: rgba(216,229,236,.22);
  --sp-overlay-line-strong: rgba(236,245,249,.30);
  --sp-overlay-shadow: 0 30px 90px rgba(9,17,23,.34),0 10px 30px rgba(9,17,23,.18),inset 0 1px 0 rgba(255,255,255,.16);
  --sp-overlay-radius-compact: 16px;
  --sp-overlay-radius-medium: 24px;
  --sp-overlay-radius-large: 30px;
  --sp-overlay-backdrop: rgba(12,20,26,.32);
  --sp-logo-icon-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Logo-Fertig_weiss-Icon.svg");

  /* Unified Overlay Material */
  --sp-overlay-surface:
    linear-gradient(180deg,rgba(39,50,59,.92),rgba(24,32,39,.94));
  --sp-overlay-surface-soft:
    linear-gradient(180deg,rgba(57,70,80,.84),rgba(32,42,50,.88));
  --sp-overlay-line: rgba(216,229,236,.22);
  --sp-overlay-line-strong: rgba(236,245,249,.30);
  --sp-overlay-shadow:
    0 30px 90px rgba(9,17,23,.34),
    0 10px 30px rgba(9,17,23,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
  --sp-overlay-radius-compact: 16px;
  --sp-overlay-radius-medium: 24px;
  --sp-overlay-radius-large: 30px;
  --sp-overlay-backdrop: rgba(12,20,26,.32);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100svh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--sp-edge-gap);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
  background-image: var(--sp-bg-image);
  background-size: cover;
  background-position: var(--sp-bg-position-x) var(--sp-bg-position-y);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #dfe5e8;
  color: var(--sp-text-primary);
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-ui);
  font-weight:var(--sp-weight-regular);
  line-height:var(--sp-leading-ui);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   SHIFTPILOT · DEFENSIVE HOST RESET
   Purpose:
   - neutralise WordPress theme defaults inside the app only
   - neutralise Elementor Kit button/link/heading inheritance
   - keep ShiftPilot's own component rules authoritative
   - do not affect anything outside .sp-app-stage
   ========================================================= */

.sp-app-stage {
  --e-global-color-primary:var(--sp-text-primary);
  --e-global-color-secondary:var(--sp-text-secondary);
  --e-global-color-text:var(--sp-text-primary);
  --e-global-color-accent:var(--sp-interactive-primary);
  --e-global-typography-primary-font-family:var(--sp-font-display);
  --e-global-typography-secondary-font-family:var(--sp-font-ui);
  --e-global-typography-text-font-family:var(--sp-font-ui);
  --e-global-typography-accent-font-family:var(--sp-font-ui);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.sp-app-stage,
.sp-app-stage *,
.sp-app-stage *::before,
.sp-app-stage *::after {
  box-sizing:border-box;
}

.sp-app-stage button,
.sp-app-stage input,
.sp-app-stage select,
.sp-app-stage textarea {
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  text-transform:none;
  text-shadow:none;
}

.sp-app-stage button {
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-color:transparent;
  background-image:none;
  box-shadow:none;
  color:inherit;
  line-height:inherit;
  text-align:inherit;
  text-decoration:none;
  text-transform:none;
}

.sp-app-stage button:hover,
.sp-app-stage button:focus,
.sp-app-stage button:active {
  background-color:transparent;
  background-image:none;
  color:inherit;
  box-shadow:none;
  text-decoration:none;
  text-shadow:none;
  transform:none;
}

.sp-app-stage input,
.sp-app-stage select,
.sp-app-stage textarea {
  margin:0;
  max-width:100%;
  border-radius:0;
  box-shadow:none;
}

.sp-app-stage input:hover,
.sp-app-stage input:focus,
.sp-app-stage select:hover,
.sp-app-stage select:focus,
.sp-app-stage textarea:hover,
.sp-app-stage textarea:focus {
  box-shadow:none;
}

.sp-app-stage a,
.sp-app-stage a:visited,
.sp-app-stage a:hover,
.sp-app-stage a:focus,
.sp-app-stage a:active {
  color:inherit;
  text-decoration:none;
  text-shadow:none;
}

.sp-app-stage h1,
.sp-app-stage h2,
.sp-app-stage h3,
.sp-app-stage h4,
.sp-app-stage h5,
.sp-app-stage h6,
.sp-app-stage p {
  margin:0;
  padding:0;
  border:0;
  color:inherit;
  font:inherit;
  text-transform:none;
  text-shadow:none;
}

.sp-app-stage svg {
  flex-shrink:0;
}

.sp-app-stage button::-moz-focus-inner,
.sp-app-stage input::-moz-focus-inner {
  padding:0;
  border:0;
}



/* WordPress admin bar compensation keeps the visual outer frame balanced. */
body.admin-bar .sp-app-stage{
  height:calc(100dvh - 32px);
  min-height:calc(100svh - 32px);
  max-height:calc(100dvh - 32px)
}

@media (min-width:961px) {
  .sp-app-stage.is-sidebar-collapsed{
    --sp-sidebar-width:var(--sp-sidebar-width-collapsed)
  }
}

.sp-app-stage::before,
.sp-app-stage::after{
  content:none
}

.sp-app-stage *{
  box-sizing:border-box
}

.sp-app-stage button,
.sp-app-stage input,
.sp-app-stage select,
.sp-app-stage textarea{
  font:inherit
}

.sp-app-stage button{
  color:inherit
}

.sp-app-stage button:focus-visible,
.sp-app-stage input:focus-visible,
.sp-app-stage select:focus-visible,
.sp-app-stage textarea:focus-visible{
  outline:2px solid var(--sp-focus-ring);
  outline-offset:2px
}

.sp-app-stage .sp-icon{
  width:19px;
  height:19px;
  display:block;
  flex:0 0 auto
}


/* =========================================================
   TYPOGRAPHY ROLE MAPPING
   Mirrors the Elementor Global Font roles by name and value.

   Note:
   Elementor does not expose stable CSS variables by Global Font
   name. Therefore this CSS mirrors the same semantic system
   through the ShiftPilot tokens defined on .sp-app-stage.
   ========================================================= */
/* ---------- sp_Display ---------- */
.sp-app-stage .sp-type-display{
  font-family:var(--sp-font-display);
  font-size:var(--sp-type-display);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-display);
  letter-spacing:var(--sp-tracking-display);
  text-transform:none;
}

/* ---------- sp_Page_Title ---------- */
.sp-app-stage .sp-main-title,
.sp-app-stage .sp-type-page-title{
  font-family:var(--sp-font-display);
  font-size:var(--sp-type-page-title);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-page-title);
  letter-spacing:var(--sp-tracking-page-title);
  text-transform:none;
}

/* ---------- sp_Section_Title ---------- */
.sp-app-stage .sp-brand-mark span,
.sp-app-stage .sp-brand-lockup,
.sp-app-stage .sp-score-drawer-head h3,
.sp-app-stage .sp-section-head h2,
.sp-app-stage .sp-loyalty-ring span,
.sp-app-stage .sp-module-summary strong,
.sp-app-stage .sp-task-stats strong,
.sp-app-stage .sp-arrival-overview strong,
.sp-app-stage .sp-arrival-pressure strong,
.sp-app-stage .sp-module-hero h2,
.sp-app-stage .sp-loyalty-hero h2,
.sp-app-stage .sp-report-hero h2,
.sp-app-stage .sp-loyalty-ring.is-large span,
.sp-app-stage .sp-hk-ribbon strong,
.sp-app-stage .sp-breakfast-split strong,
.sp-app-stage .sp-board-visual.is-team,
.sp-app-stage .sp-bulletin-visual.is-team,
.sp-app-stage .sp-bulletin-visual strong,
.sp-app-stage .sp-quick-panel-head h3,
.sp-app-stage .sp-type-section-title{
  font-family:var(--sp-font-display);
  font-size:var(--sp-type-section-title);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-section-title);
  letter-spacing:var(--sp-tracking-section-title);
  text-transform:none;
}

/* ---------- sp_KPI ---------- */
.sp-app-stage .sp-score-item strong,
.sp-app-stage .sp-score-detail strong,
.sp-app-stage .sp-op-metric strong,
.sp-app-stage .sp-meter-copy strong,
.sp-app-stage .sp-house-ring span,
.sp-app-stage .sp-vip-room strong,
.sp-app-stage .sp-monthly-kpi strong,
.sp-app-stage .sp-delivery-total strong,
.sp-app-stage .sp-board-visual span,
.sp-app-stage .sp-type-kpi{
  font-family:var(--sp-font-display);
  font-size:var(--sp-type-kpi);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-kpi);
  letter-spacing:var(--sp-tracking-kpi);
  text-transform:none;
}

/* ---------- sp_Body ---------- */
.sp-app-stage .sp-score-insight p,
.sp-app-stage .sp-priority-body p,
.sp-app-stage .sp-stream-main p,
.sp-app-stage .sp-dense-main p,
.sp-app-stage .sp-task-main p,
.sp-app-stage .sp-module-hero p,
.sp-app-stage .sp-loyalty-hero p,
.sp-app-stage .sp-report-hero p,
.sp-app-stage .sp-vip-feature p,
.sp-app-stage .sp-note-list p,
.sp-app-stage .sp-board-body p,
.sp-app-stage .sp-type-body{
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-body);
  font-weight:var(--sp-weight-regular);
  line-height:var(--sp-leading-body);
  letter-spacing:var(--sp-tracking-body);
  text-transform:none;
}

/* ---------- sp_UI ---------- */
.sp-app-stage .sp-text-button,
.sp-app-stage .sp-rail-link,
.sp-app-stage .sp-status-chip,
.sp-app-stage .sp-count-pill,
.sp-app-stage .sp-goal-chip,
.sp-app-stage .sp-owner-pill,
.sp-app-stage .sp-property-chip strong,
.sp-app-stage .sp-nav-label,
.sp-app-stage .sp-user-copy strong,
.sp-app-stage .sp-score-kicker,
.sp-app-stage .sp-score-toggle,
.sp-app-stage .sp-score-insight button,
.sp-app-stage .sp-date-control strong,
.sp-app-stage .sp-global-search input,
.sp-app-stage .sp-segmented-filter button,
.sp-app-stage .sp-section-head h3,
.sp-app-stage .sp-rail-head h3,
.sp-app-stage .sp-priority-body h3,
.sp-app-stage .sp-stream-top strong,
.sp-app-stage .sp-focus-row strong,
.sp-app-stage .sp-loyalty-progress strong,
.sp-app-stage .sp-vip-mini strong,
.sp-app-stage .sp-dense-title strong,
.sp-app-stage .sp-task-main strong,
.sp-app-stage .sp-table-row,
.sp-app-stage .sp-guest-cell strong,
.sp-app-stage .sp-exception-list strong,
.sp-app-stage .sp-opportunity-list strong,
.sp-app-stage .sp-room-priority-list strong,
.sp-app-stage .sp-compact-stat-list strong,
.sp-app-stage .sp-vip-top h3,
.sp-app-stage .sp-large-progress>div:last-child strong,
.sp-app-stage .sp-funnel strong,
.sp-app-stage .sp-hk-load strong,
.sp-app-stage .sp-program-progress strong,
.sp-app-stage .sp-mini-forecast strong,
.sp-app-stage .sp-forecast-bars strong,
.sp-app-stage .sp-note-list strong,
.sp-app-stage .sp-board-body h3,
.sp-app-stage .sp-report-card h3,
.sp-app-stage .sp-data-pipeline,
.sp-app-stage .sp-toast p,
.sp-app-stage .sp-bulletin-label span:not(.sp-live-dot),
.sp-app-stage .sp-bulletin-copy h3,
.sp-app-stage .sp-mobile-more,
.sp-app-stage .sp-room-number,
.sp-app-stage .sp-type-ui{
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-ui);
  font-weight:var(--sp-weight-medium);
  line-height:var(--sp-leading-ui);
  letter-spacing:var(--sp-tracking-ui);
  text-transform:none;
}

/* ---------- sp_Label ---------- */
.sp-app-stage .sp-overline,
.sp-app-stage .sp-nav-section-label,
.sp-app-stage .sp-score-label,
.sp-app-stage .sp-main-eyebrow,
.sp-app-stage .sp-op-metric span,
.sp-app-stage .sp-occupancy-meter span,
.sp-app-stage .sp-row-kicker,
.sp-app-stage .sp-table-head,
.sp-app-stage .sp-monthly-kpi span,
.sp-app-stage .sp-board-visual small,
.sp-app-stage .sp-bulletin-kicker,
.sp-app-stage .sp-quick-panel label>span,
.sp-app-stage .sp-elite-mark,
.sp-app-stage .sp-type-label{
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-label);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-label);
  letter-spacing:var(--sp-tracking-label);
  text-transform:uppercase;
}

/* ---------- sp_Meta ---------- */
.sp-app-stage .sp-mini-avatar,
.sp-app-stage .sp-avatar,
.sp-app-stage .sp-brand-tagline,
.sp-app-stage .sp-property-chip span:not(.sp-live-dot),
.sp-app-stage .sp-nav-badge,
.sp-app-stage .sp-user-copy small,
.sp-app-stage .sp-score-window,
.sp-app-stage .sp-score-item em,
.sp-app-stage .sp-data-freshness,
.sp-app-stage .sp-score-detail span,
.sp-app-stage .sp-score-detail small,
.sp-app-stage .sp-main-subtitle,
.sp-app-stage .sp-date-control small,
.sp-app-stage .sp-global-search kbd,
.sp-app-stage .sp-segmented-filter button span,
.sp-app-stage .sp-op-metric small,
.sp-app-stage .sp-occupancy-meter small,
.sp-app-stage .sp-meter-copy strong span,
.sp-app-stage .sp-inline-meta,
.sp-app-stage .sp-stream-top time,
.sp-app-stage .sp-stream-meta,
.sp-app-stage .sp-stream-meta .sp-mini-avatar,
.sp-app-stage .sp-focus-time,
.sp-app-stage .sp-focus-row small,
.sp-app-stage .sp-loyalty-ring small,
.sp-app-stage .sp-loyalty-progress p,
.sp-app-stage .sp-vip-mini small,
.sp-app-stage .sp-module-summary span,
.sp-app-stage .sp-summary-note p,
.sp-app-stage .sp-dense-meta,
.sp-app-stage .sp-task-stats span,
.sp-app-stage .sp-task-stats small,
.sp-app-stage .sp-task-main>span,
.sp-app-stage .sp-task-owner,
.sp-app-stage .sp-arrival-overview span,
.sp-app-stage .sp-arrival-overview small,
.sp-app-stage .sp-guest-cell small,
.sp-app-stage .sp-house-ring small,
.sp-app-stage .sp-exception-list small,
.sp-app-stage .sp-opportunity-list small,
.sp-app-stage .sp-room-priority-list small,
.sp-app-stage .sp-vip-room span,
.sp-app-stage .sp-vip-tags span,
.sp-app-stage .sp-large-progress>div:last-child span,
.sp-app-stage .sp-funnel span,
.sp-app-stage .sp-monthly-kpi small,
.sp-app-stage .sp-module-note,
.sp-app-stage .sp-hk-ribbon span,
.sp-app-stage .sp-hk-ribbon small,
.sp-app-stage .sp-program-progress span,
.sp-app-stage .sp-program-progress small,
.sp-app-stage .sp-mini-forecast span,
.sp-app-stage .sp-mini-forecast small,
.sp-app-stage .sp-breakfast-split span,
.sp-app-stage .sp-forecast-bars span,
.sp-app-stage .sp-delivery-total span,
.sp-app-stage .sp-delivery-total small,
.sp-app-stage .sp-system-status,
.sp-app-stage .sp-report-card p,
.sp-app-stage .sp-bulletin-label small,
.sp-app-stage .sp-bulletin-visual small,
.sp-app-stage .sp-bulletin-copy p,
.sp-app-stage .sp-compact-stat-list span,
.sp-app-stage .sp-row-kicker time,
.sp-app-stage .sp-type-meta{
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-meta);
  font-weight:var(--sp-weight-medium);
  line-height:var(--sp-leading-meta);
  letter-spacing:var(--sp-tracking-meta);
  text-transform:none;
}

/* ---------- Numeric data ---------- */
.sp-app-stage .sp-score-item strong,
.sp-app-stage .sp-score-detail strong,
.sp-app-stage .sp-op-metric strong,
.sp-app-stage .sp-meter-copy strong,
.sp-app-stage .sp-house-ring span,
.sp-app-stage .sp-loyalty-ring span,
.sp-app-stage .sp-room-number,
.sp-app-stage .sp-vip-room strong,
.sp-app-stage .sp-monthly-kpi strong,
.sp-app-stage .sp-hk-ribbon strong,
.sp-app-stage .sp-mini-forecast strong,
.sp-app-stage .sp-breakfast-split strong,
.sp-app-stage .sp-forecast-bars strong,
.sp-app-stage .sp-delivery-total strong,
.sp-app-stage .sp-table-head,
.sp-app-stage .sp-table-row,
.sp-app-stage time{
  font-variant-numeric:tabular-nums lining-nums;
}


/* ---------- Fully opaque pre-blurred glass material ---------- */

.sp-app-stage .sp-glass-tile,
.sp-app-stage .sp-morphglass{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0;
  background:transparent;
  color:var(--sp-ink);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  backface-visibility:hidden;
  box-shadow:0 24px 72px rgba(18,31,43,.105),0 10px 28px rgba(18,31,43,.06),0 2px 8px rgba(18,31,43,.045),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(28,43,55,.075),inset 1px 0 0 rgba(255,255,255,.075),inset -1px 0 0 rgba(28,43,55,.035)
}

.sp-app-stage .sp-glass-tile::before,
.sp-app-stage .sp-morphglass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:
  radial-gradient(ellipse 78% 58% at 14% -12%,rgba(255,255,255,.105) 0%,rgba(255,255,255,.05) 34%,rgba(255,255,255,.012) 56%,rgba(255,255,255,0) 76%),
  radial-gradient(ellipse 48% 90% at 105% 38%,rgba(229,238,243,.055) 0%,rgba(229,238,243,.02) 48%,rgba(229,238,243,0) 78%),
  linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 16%,rgba(255,255,255,.008) 38%,rgba(255,255,255,0) 56%,rgba(25,40,53,.01) 78%,rgba(25,40,53,.04) 100%),
  linear-gradient(122deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.008) 32%,rgba(255,255,255,0) 51%,rgba(212,225,233,.022) 76%,rgba(212,225,233,.01) 100%),
  var(--sp-bg-blur-image);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,cover;
  background-position:center,center,center,center,var(--sp-bg-position-x) var(--sp-bg-position-y);
  background-repeat:no-repeat;
  background-attachment:scroll,scroll,scroll,scroll,fixed;
  opacity:1;
  backface-visibility:hidden
}

.sp-app-stage .sp-glass-tile::after,
.sp-app-stage .sp-morphglass::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-sizing:border-box;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.64) 0%,rgba(255,255,255,.24) 17%,rgba(255,255,255,.075) 35%,rgba(255,255,255,.10) 52%,rgba(222,232,238,.12) 68%,rgba(70,85,97,.115) 84%,rgba(46,60,71,.24) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}

.sp-app-stage .sp-glass-tile>*{
  position:relative;
  z-index:2
}

.sp-app-stage .sp-morphglass__refraction{
  display:none
}

.sp-app-stage .sp-morphglass__content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  min-width:0;
  background:transparent;
  border:0;
  box-shadow:none
}

/* ---------- Shell geometry ---------- */

.sp-app-stage .sp-dashboard-shell{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:var(--sp-sidebar-width) minmax(0,1fr);
  gap:var(--sp-gap);
  width:100%;
  max-width:none;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:0;
  align-items:stretch;
  align-self:stretch;
  background:transparent;
  transition:grid-template-columns .28s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage .sp-sidebar-tile{
  border-radius:var(--sp-radius-sidebar);
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  overflow:hidden;
  transition:padding .28s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage .sp-dashboard-main{
  position:relative;
  display:grid;
  grid-template-rows:var(--sp-score-height) minmax(0,1fr) var(--sp-bulletin-height);
  gap:var(--sp-gap);
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:0;
  align-self:stretch;
  overflow:visible
}

.sp-app-stage .sp-score-tile{
  z-index:30;
  border-radius:var(--sp-radius-score);
  width:100%;
  height:var(--sp-score-height);
  min-height:var(--sp-score-height);
  margin:0;
  padding:0 22px;
  align-self:start;
  overflow:visible;
  /* Anthracite base sits under the image-based MorphGlass layer.
     Also acts as fallback when the tile has no glass pseudo-element. */
  background:var(--sp-score-surface);
  color:var(--sp-text-inverse)
}

/* Keep the prepared blur image, but drop a controlled anthracite
   material and a soft silver rim over it (no heavy backdrop-filter). */
.sp-app-stage .sp-score-tile.sp-glass-tile::before,
.sp-app-stage .sp-score-tile.sp-morphglass::before{
  background-image:
    radial-gradient(ellipse 70% 130% at 8% -30%,rgba(196,214,226,.20) 0%,rgba(196,214,226,.06) 42%,rgba(196,214,226,0) 70%),
    linear-gradient(180deg,rgba(31,41,50,.80) 0%,rgba(22,30,38,.86) 46%,rgba(15,21,27,.90) 100%),
    var(--sp-bg-blur-image);
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,var(--sp-bg-position-x) var(--sp-bg-position-y);
  background-repeat:no-repeat;
  background-attachment:scroll,scroll,fixed
}

.sp-app-stage .sp-score-tile.sp-glass-tile::after,
.sp-app-stage .sp-score-tile.sp-morphglass::after{
  background:linear-gradient(135deg,
    rgba(210,224,234,.50) 0%,
    rgba(170,188,200,.16) 20%,
    rgba(120,138,150,.05) 52%,
    rgba(52,66,78,.20) 82%,
    rgba(34,46,56,.34) 100%)
}

.sp-app-stage .sp-score-tile.sp-glass-tile,
.sp-app-stage .sp-score-tile.sp-morphglass{
  box-shadow:0 24px 66px rgba(10,16,22,.34),0 8px 24px rgba(10,16,22,.22),inset 0 1px 0 rgba(226,236,243,.22),inset 0 -1px 0 rgba(0,0,0,.28)
}

.sp-app-stage .sp-main-tile{
  z-index:2;
  border-radius:var(--sp-radius-main);
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden
}

.sp-app-stage .sp-bulletin-tile{
  z-index:2;
  border-radius:var(--sp-radius-bulletin);
  width:100%;
  height:var(--sp-bulletin-height);
  min-height:var(--sp-bulletin-height);
  margin:0;
  padding:0 16px;
  overflow:hidden
}

/* ---------- Common controls ---------- */

.sp-app-stage .sp-icon-button{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease
}

.sp-app-stage .sp-icon-button:hover{
  background:rgba(255,255,255,.24);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(30,47,59,.06)
}

.sp-app-stage .sp-soft-button,
.sp-app-stage .sp-primary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease
}

.sp-app-stage .sp-soft-button{
  background:rgba(255,255,255,.12);
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-soft-button:hover{
  background:rgba(255,255,255,.22)
}

.sp-app-stage .sp-primary-button{
  background:linear-gradient(180deg,#294D61,#234455);
  color:var(--sp-text-inverse);
  border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px rgba(22,44,57,.14)
}

.sp-app-stage .sp-primary-button span{
  color:var(--sp-text-inverse);
  -webkit-text-fill-color:var(--sp-text-inverse)
}

.sp-app-stage .sp-primary-button .sp-icon{
  color:var(--sp-icon-inverse);
  stroke:currentColor
}

.sp-app-stage .sp-primary-button:hover{
  background:linear-gradient(180deg,#234455,#1F3E4E);
  color:var(--sp-text-inverse);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 11px 24px rgba(22,44,57,.18)
}

.sp-app-stage .sp-primary-button:active{
  background:linear-gradient(180deg,var(--sp-interactive-pressed),#1B3A49);
  transform:translateY(0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 12px rgba(22,44,57,.14)
}

.sp-app-stage .sp-primary-button:disabled,
.sp-app-stage .sp-primary-button[aria-disabled="true"]{
  opacity:.52;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}

.sp-app-stage .sp-primary-button .sp-icon,
.sp-app-stage .sp-soft-button .sp-icon{
  width:16px;
  height:16px
}

.sp-app-stage .sp-text-button,
.sp-app-stage .sp-rail-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--sp-interactive-primary);
  cursor:pointer
}

.sp-app-stage .sp-text-button .sp-icon,
.sp-app-stage .sp-rail-link .sp-icon{
  width:14px;
  height:14px
}

.sp-app-stage .sp-text-button:hover,
.sp-app-stage .sp-rail-link:hover{
  color:var(--sp-interactive-hover)
}

.sp-app-stage .sp-overline{
  display:block;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.18);
  color:var(--sp-status-neutral);
  white-space:nowrap
}

.sp-app-stage .sp-status-chip.is-warning{
  background:rgb(var(--sp-status-warning-rgb) / .12);
  color:var(--sp-status-warning)
}

.sp-app-stage .sp-status-chip.is-critical{
  background:rgb(var(--sp-status-critical-rgb) / .13);
  color:var(--sp-status-critical)
}

.sp-app-stage .sp-status-chip.is-success{
  background:rgb(var(--sp-status-success-rgb) / .13);
  color:var(--sp-status-success)
}

.sp-app-stage .sp-status-chip.is-vip{
  background:rgb(var(--sp-op-vip-rgb) / .13);
  color:var(--sp-op-vip)
}

.sp-app-stage .sp-status-chip.is-hk{
  background:rgb(var(--sp-op-housekeeping-rgb) / .11);
  color:var(--sp-op-housekeeping)
}

.sp-app-stage .sp-status-chip.is-diamond{
  background:rgb(var(--sp-status-info-rgb) / .14);
  color:var(--sp-status-info)
}

.sp-app-stage .sp-status-chip.is-platinum{
  background:rgb(var(--sp-status-neutral-rgb) / .13);
  color:var(--sp-status-neutral)
}

.sp-app-stage .sp-status-chip.is-gold{
  background:rgb(var(--sp-status-warning-rgb) / .13);
  color:var(--sp-status-warning)
}

.sp-app-stage .sp-status-chip.is-neutral{
  background:rgba(255,255,255,.13);
  color:rgba(35,50,59,.62)
}

.sp-app-stage .sp-mini-avatar,
.sp-app-stage .sp-avatar{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.44),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.28);
  color:var(--sp-icon-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)
}

.sp-app-stage .sp-mini-avatar{
  width:30px;
  height:30px;
}

.sp-app-stage .sp-avatar{
  width:38px;
  height:38px;
}

.sp-app-stage .sp-mini-avatar.is-blue{
  background:rgb(var(--sp-status-info-rgb) / .18);
  color:var(--sp-status-info)
}

.sp-app-stage .sp-mini-avatar.is-green{
  background:rgb(var(--sp-op-housekeeping-rgb) / .17);
  color:var(--sp-op-housekeeping)
}

.sp-app-stage .sp-mini-avatar.is-purple{
  background:rgb(var(--sp-op-vip-rgb) / .17);
  color:var(--sp-op-vip)
}

.sp-app-stage .sp-mini-avatar.is-amber{
  background:rgb(var(--sp-status-warning-rgb) / .17);
  color:var(--sp-status-warning)
}

.sp-app-stage .sp-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--sp-status-success);
  box-shadow:0 0 0 4px rgb(var(--sp-status-success-rgb) / .11);
  flex:0 0 auto
}

.sp-app-stage .sp-count-pill,
.sp-app-stage .sp-goal-chip,
.sp-app-stage .sp-owner-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:var(--sp-ink-3);
  white-space:nowrap
}

/* ---------- Sidebar ---------- */

.sp-app-stage .sp-sidebar-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0
}

/* Brand header: logo + property form one centered anchor.
   Collapse control is absolutely placed so it can never overlap the mark. */
.sp-app-stage .sp-sidebar-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  min-height:56px;
  padding:10px 34px 12px
}

.sp-app-stage .sp-brand-lockup{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-align:center
}

.sp-app-stage .sp-brand-logo{
  display:block;
  width:148px;
  max-width:100%;
  height:32px;
  flex:0 0 auto;
  background:var(--sp-icon-primary);
  -webkit-mask-image:var(--sp-logo-image);
  mask-image:var(--sp-logo-image);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain
}

.sp-app-stage .sp-brand-tagline{
  display:block;
  margin-top:4px;
  padding-left:0;
  color:var(--sp-text-tertiary);
  text-align:center;
  white-space:nowrap;
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage .sp-sidebar-collapse{
  position:absolute;
  top:8px;
  right:2px;
  width:30px;
  height:30px;
  background:transparent;
  color:var(--sp-icon-secondary);
  transition:color .16s ease,opacity .16s ease,transform .18s cubic-bezier(.22,1,.36,1)
}

/* Subtle hover: colour + micro-scale only, never a filled tile. */
.sp-app-stage .sp-sidebar-collapse:hover,
.sp-app-stage .sp-sidebar-collapse:focus-visible{
  background:transparent;
  color:var(--sp-icon-active);
  transform:translateY(-1px) scale(1.03);
  box-shadow:none
}

.sp-app-stage .sp-sidebar-collapse .sp-icon{
  width:15px;
  height:15px;
  transform:rotate(180deg);
  transition:transform .28s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage.is-sidebar-collapsed .sp-sidebar-collapse .sp-icon{
  transform:rotate(0deg)
}

/* Property line: free-standing, centered, no chip / no live dot. */
.sp-app-stage .sp-property-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin:0 6px 14px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  text-align:center
}

.sp-app-stage .sp-property-chip div{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0
}

.sp-app-stage .sp-property-chip strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-property-chip span:not(.sp-live-dot){
  color:var(--sp-ink-3);
  margin-top:2px
}

.sp-app-stage .sp-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow:auto;
  padding:0 2px 8px;
  scrollbar-width:none
}

.sp-app-stage .sp-sidebar-nav::-webkit-scrollbar{
  display:none
}

.sp-app-stage .sp-nav-section{
  display:flex;
  flex-direction:column;
  gap:3px
}

.sp-app-stage .sp-nav-section-label{
  padding:6px 10px 3px;
  color:var(--sp-text-tertiary)
}

.sp-app-stage .sp-sidebar-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:38px;
  padding:0 9px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--sp-text-secondary);
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease
}

.sp-app-stage .sp-sidebar-nav-item:hover{
  background:rgba(255,255,255,.13);
  color:var(--sp-text-primary);
  transform:translateX(1px)
}

.sp-app-stage .sp-sidebar-nav-item.is-active{
  color:var(--sp-text-primary);
  background:linear-gradient(180deg,rgba(255,255,255,.33),rgba(255,255,255,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 5px 16px rgba(25,40,52,.045)
}

.sp-app-stage .sp-nav-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 auto
}

.sp-app-stage .sp-nav-icon .sp-icon{
  width:17px;
  height:17px
}

.sp-app-stage .sp-nav-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sp-app-stage .sp-nav-badge{
  margin-left:auto;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-sidebar-footer{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  margin-top:auto;
  padding:11px 3px 2px;
  border-top:1px solid rgba(255,255,255,.17)
}

/* Row that holds the active employee card + settings. */
.sp-app-stage .sp-account-row{
  display:flex;
  align-items:center;
  gap:6px
}

.sp-app-stage .sp-user-card{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  flex:1;
  padding:6px 8px;
  border:0;
  border-radius:13px;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease
}

.sp-app-stage .sp-user-card:hover,
.sp-app-stage .sp-user-card:focus-visible{
  background:var(--sp-surface)
}

.sp-app-stage .sp-user-card>.sp-icon{
  width:15px;
  height:15px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-user-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1
}

.sp-app-stage .sp-user-copy strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-user-copy small{
  color:var(--sp-ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px
}

.sp-app-stage .sp-settings-button{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:0;
  border-radius:11px;
  background:transparent;
  cursor:pointer
}

.sp-app-stage .sp-settings-button:hover{
  background:rgba(255,255,255,.12)
}

.sp-app-stage .sp-settings-button .sp-icon{
  width:16px;
  height:16px
}

.sp-app-stage .sp-mobile-more{
  display:none
}


/* ---------- Collapsible desktop sidebar ---------- */

@media (min-width:961px) {
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-tile{
    padding:12px 10px;
    overflow:visible
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-inner{
    overflow:visible
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-brand{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:auto;
    padding:8px 0 12px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-brand-lockup{
    flex:0 0 auto;
    width:38px;
    overflow:hidden
  }

  .sp-app-stage.is-sidebar-collapsed .sp-brand-logo{
    width:34px;
    max-width:34px;
    height:34px;
    -webkit-mask-image:var(--sp-logo-icon-image);
    mask-image:var(--sp-logo-icon-image);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-position:center;
    mask-position:center
  }

  .sp-app-stage.is-sidebar-collapsed .sp-brand-tagline{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    opacity:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-collapse{
    position:static;
    top:auto;
    right:auto;
    margin:0 auto;
    width:30px;
    height:30px;
    z-index:1
  }

  .sp-app-stage.is-sidebar-collapsed .sp-property-chip{
    justify-content:center;
    width:42px;
    min-height:42px;
    margin:0 auto 12px;
    padding:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-property-chip div,
.sp-app-stage.is-sidebar-collapsed .sp-nav-badge,
.sp-app-stage.is-sidebar-collapsed .sp-nav-section-label,
.sp-app-stage.is-sidebar-collapsed .sp-user-copy,
.sp-app-stage.is-sidebar-collapsed .sp-user-card>.sp-icon{
    display:none
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav{
    gap:6px;
    overflow:visible;
    padding:0 0 8px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-nav-section{
    gap:4px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item{
    position:relative;
    justify-content:center;
    width:46px;
    min-height:42px;
    margin:0 auto;
    padding:0;
    overflow:visible;
    transform:none
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item .sp-nav-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item::after{
    content:attr(aria-label);
    position:absolute;
    left:calc(100% + 14px);
    top:50%;
    z-index:220;
    min-height:34px;
    display:flex;
    align-items:center;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:12px;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08)),
      var(--sp-bg-blur-image);
    background-size:100% 100%,cover;
    background-position:center,var(--sp-bg-position-x) var(--sp-bg-position-y);
    background-repeat:no-repeat;
    background-attachment:scroll,fixed;
    color:var(--sp-text-primary);
    font-family:var(--sp-font-ui);
    font-size:var(--sp-type-ui);
    font-weight:var(--sp-weight-medium);
    line-height:var(--sp-leading-ui);
    letter-spacing:var(--sp-tracking-ui);
    white-space:nowrap;
    box-shadow:0 12px 34px rgba(18,31,43,.14),inset 0 1px 0 rgba(255,255,255,.30);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(5px,-50%);
    transition:opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .16s ease
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item:hover::after,
.sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%)
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-footer{
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:10px 0 2px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-user-card{
    flex:0 0 auto;
    justify-content:center;
    width:44px;
    padding:3px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-settings-button{
    display:grid
  }
}

/* ---------- Score bar and overlay ---------- */

.sp-app-stage .sp-score-shell{
  display:grid;
  grid-template-columns:minmax(132px,.82fr) minmax(0,4fr) minmax(78px,.52fr);
  align-items:stretch;
  gap:12px;
  width:100%;
  height:100%
}

.sp-app-stage .sp-score-heading{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  min-width:0;
  padding:0 6px
}

/* Inverse typography for the anthracite score bar. */
.sp-app-stage .sp-score-kicker{
  color:#F4F8FA;
  text-shadow:0 1px 0 rgba(0,0,0,.16)
}

.sp-app-stage .sp-score-window{
  margin-top:3px;
  color:rgba(230,239,244,.70)
}

.sp-app-stage .sp-score-window b{
  color:#7ED0AE;
  margin-left:3px;
  font-weight:var(--sp-weight-semibold);
}

.sp-app-stage .sp-score-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  width:100%;
  height:100%;
  min-height:0
}

.sp-app-stage .sp-score-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  align-self:center;
  gap:3px;
  min-width:0;
  padding:0 clamp(10px,1.05vw,18px);
  border-left:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-score-item:first-child{
  border-left:0
}

.sp-app-stage .sp-score-label{
  display:block;
  margin-bottom:1px;
  color:rgba(246,249,251,.60);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-score-item>div{
  display:flex;
  align-items:baseline;
  gap:7px
}

.sp-app-stage .sp-score-item strong{
  color:#F8FBFC;
  -webkit-text-fill-color:#F8FBFC;
  text-shadow:0 1px 0 rgba(0,0,0,.16)
}

.sp-app-stage .sp-score-item em{
  font-style:normal;
}

.sp-app-stage .sp-score-item em.is-up{
  color:#7ED0AE
}

.sp-app-stage .sp-score-item em.is-down{
  color:#E58B92
}

.sp-app-stage .sp-score-toggle{
  display:flex;
  align-items:center;
  align-self:center;
  justify-self:end;
  gap:5px;
  height:34px;
  margin:0;
  padding:0 12px;
  border:0;
  border-radius:11px;
  background:rgba(233,240,246,.13);
  color:var(--sp-text-inverse);
  cursor:pointer;
  transition:background .16s ease,transform .18s ease
}

.sp-app-stage .sp-score-toggle .sp-type-ui{
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-score-toggle:hover,
.sp-app-stage .sp-score-toggle:focus-visible{
  background:rgba(233,240,246,.22);
  transform:translateY(-1px)
}

.sp-app-stage .sp-score-toggle .sp-icon{
  width:14px;
  height:14px;
  transition:transform .24s ease
}

.sp-app-stage .sp-score-tile.is-expanded .sp-score-toggle .sp-icon{
  transform:rotate(180deg)
}

.sp-app-stage .sp-score-drawer{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:9300;
  min-height:270px;
  padding:20px 22px;
  border-radius:var(--sp-overlay-radius-medium);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.99);
  transform-origin:top center;
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .22s ease;
  overflow:hidden;
  color:var(--sp-text-inverse);
  box-shadow:var(--sp-overlay-shadow);
  border:1px solid var(--sp-overlay-line);
  background:var(--sp-overlay-surface-soft)
}

.sp-app-stage .sp-score-tile.is-expanded .sp-score-drawer{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1)
}

.sp-app-stage .sp-score-drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px
}

.sp-app-stage .sp-score-drawer-head h3{
  margin:3px 0 0;
}

.sp-app-stage .sp-data-freshness{
  color:rgba(238,245,248,.58)
}

.sp-app-stage .sp-score-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}

.sp-app-stage .sp-score-detail{
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(227,239,244,.12)
}

.sp-app-stage .sp-score-detail>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px
}

.sp-app-stage .sp-score-detail span{
  color:rgba(238,245,248,.64)
}

.sp-app-stage .sp-score-detail svg{
  width:100%;
  height:42px;
  margin:5px 0 2px;
  overflow:visible
}

.sp-app-stage .sp-score-detail svg path{
  fill:none;
  stroke:var(--sp-status-info);
  stroke-width:2
}

.sp-app-stage .sp-score-detail.is-watch svg path{
  stroke:var(--sp-status-critical)
}

.sp-app-stage .sp-score-detail small{
  color:rgba(238,245,248,.58)
}

.sp-app-stage .sp-score-insight{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:13px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(227,239,244,.12)
}

.sp-app-stage .sp-insight-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:rgb(var(--sp-status-info-rgb) / .14);
  color:var(--sp-status-info)
}

.sp-app-stage .sp-insight-icon .sp-icon{
  width:16px;
  height:16px
}

.sp-app-stage .sp-score-insight p{
  margin:0;
  color:rgba(246,249,251,.78)
}

.sp-app-stage .sp-score-insight button{
  border:0;
  background:transparent;
  color:var(--sp-interactive-primary);
  cursor:pointer
}

/* ---------- Main app frame ---------- */

.sp-app-stage .sp-main-app{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
  padding:22px 24px 18px
}

.sp-app-stage .sp-workspace-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex:0 0 auto;
  margin-bottom:16px
}

.sp-app-stage .sp-title-block{
  min-width:0
}

.sp-app-stage .sp-main-eyebrow{
  display:block;
  margin:0 0 4px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-main-title.sp-type-page-title,
.sp-app-stage [data-sp-title].sp-main-title{
  margin:0;
  color:var(--sp-text-primary);
  -webkit-text-fill-color:var(--sp-text-primary);
  font-family:var(--sp-font-display);
  font-size:var(--sp-type-page-title);
  font-weight:var(--sp-weight-semibold);
  line-height:var(--sp-leading-page-title);
  letter-spacing:var(--sp-tracking-page-title);
  opacity:1;
  text-shadow:none
}

.sp-app-stage .sp-main-subtitle{
  margin:6px 0 0;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-workspace-actions{
  display:flex;
  align-items:center;
  gap:8px
}

.sp-app-stage .sp-date-control{
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  background:rgba(255,255,255,.11);
  cursor:pointer
}

.sp-app-stage .sp-date-control>.sp-icon{
  width:16px;
  height:16px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-date-control>.sp-icon:last-child{
  width:13px;
  height:13px
}

.sp-app-stage .sp-date-control span{
  display:flex;
  flex-direction:column;
  text-align:left;
}

.sp-app-stage .sp-date-control small{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-date-control strong{
  margin-top:2px;
}

/* Compact header search: collapsed to nothing, expands leftward from a
   stable right anchor. No full-width overlay, no layout shift on the header. */
.sp-app-stage .sp-global-search{
  position:absolute;
  left:auto;
  right:24px;
  top:22px;
  z-index:40;
  display:flex;
  align-items:center;
  gap:10px;
  width:0;
  max-width:calc(100% - 48px);
  height:40px;
  padding:0;
  border-radius:13px;
  background:rgba(237,243,246,.96);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 45px rgba(24,41,53,.16);
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  transform:none;
  transition:
    width .34s cubic-bezier(.22,1,.36,1),
    padding .34s cubic-bezier(.22,1,.36,1),
    opacity .2s ease,
    visibility .2s ease
}

.sp-app-stage .sp-main-app.is-searching .sp-global-search{
  width:clamp(220px,24vw,360px);
  padding:0 14px;
  opacity:1;
  visibility:visible
}

/* Keep the toggle clickable above the expanding field so it can close it. */
.sp-app-stage .sp-search-toggle{
  position:relative;
  z-index:41
}

.sp-app-stage .sp-search-toggle .sp-icon{
  width:18px;
  height:18px
}

.sp-app-stage .sp-global-search>span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-global-search input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--sp-ink);
  outline:none;
}

.sp-app-stage .sp-global-search input::placeholder{
  color:var(--sp-text-muted)
}

.sp-app-stage .sp-global-search kbd{
  padding:3px 6px;
  border-radius:6px;
  background:rgba(20,34,44,.06);
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-view-stack{
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:rgba(37,56,68,.15) transparent
}

.sp-app-stage .sp-view-stack::-webkit-scrollbar{
  width:5px
}

.sp-app-stage .sp-view-stack::-webkit-scrollbar-thumb{
  background:rgba(37,56,68,.13);
  border-radius:999px
}

.sp-app-stage .sp-view{
  display:none;
  animation:spViewIn .28s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage .sp-view.is-active{
  display:block
}

@keyframes spViewIn {
  from {
    opacity:0;
    transform:translateY(5px)
  }

  to {
    opacity:1;
    transform:none
  }

}

.sp-app-stage .sp-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}

.sp-app-stage .sp-toolbar-right{
  display:flex;
  align-items:center;
  gap:7px
}

.sp-app-stage .sp-segmented-filter{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  padding:3px;
  border-radius:13px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  overflow:auto;
  scrollbar-width:none
}

.sp-app-stage .sp-segmented-filter::-webkit-scrollbar{
  display:none
}

.sp-app-stage .sp-segmented-filter button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:30px;
  padding:0 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--sp-ink-3);
  white-space:nowrap;
  cursor:pointer
}

.sp-app-stage .sp-segmented-filter button span{
  opacity:.75
}

.sp-app-stage .sp-segmented-filter button:hover{
  color:var(--sp-ink)
}

.sp-app-stage .sp-segmented-filter button.is-active{
  background:rgba(255,255,255,.24);
  color:var(--sp-text-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px rgba(30,47,59,.04)
}

.sp-app-stage .sp-section-head,
.sp-app-stage .sp-rail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}

.sp-app-stage .sp-section-head h2,
.sp-app-stage .sp-section-head h3,
.sp-app-stage .sp-rail-head h3{
  margin:3px 0 0;
}

/* ---------- Dashboard ---------- */

.sp-app-stage .sp-ops-ribbon{
  display:grid;
  grid-template-columns:repeat(4,minmax(90px,1fr)) minmax(180px,1.45fr);
  align-items:stretch;
  min-height:76px;
  margin-bottom:16px;
  border-radius:18px;
  background:var(--sp-surface-elevated);
  border:1px solid var(--sp-line-elevated);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 22px rgba(18,31,43,.07);
  overflow:hidden
}

.sp-app-stage .sp-op-metric{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:11px 14px;
  border-right:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-op-metric::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  bottom:15px;
  width:2px;
  border-radius:2px;
  background:transparent
}

.sp-app-stage .sp-op-metric.sp-accent-arrival::before{
  background:var(--sp-arrival)
}

.sp-app-stage .sp-op-metric.sp-accent-departure::before{
  background:var(--sp-departure)
}

.sp-app-stage .sp-op-metric span,
.sp-app-stage .sp-occupancy-meter span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-op-metric strong{
  margin-top:2px;
}

.sp-app-stage .sp-op-metric small,
.sp-app-stage .sp-occupancy-meter small{
  margin-top:4px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-occupancy-meter{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 14px
}

.sp-app-stage .sp-meter-copy{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px
}

.sp-app-stage .sp-meter-copy strong span{
  margin-left:1px
}

.sp-app-stage .sp-meter-track{
  width:100%;
  height:5px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(27,45,56,.09);
  overflow:hidden
}

.sp-app-stage .sp-meter-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(69,112,137,.78),rgba(91,139,161,.72))
}

.sp-app-stage .sp-meter-track.is-large{
  height:7px;
  margin-top:13px
}

.sp-app-stage .sp-dashboard-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(250px,.82fr);
  gap:18px;
  min-height:0
}

.sp-app-stage .sp-primary-flow{
  min-width:0;
  padding-right:18px;
  border-right:1px solid rgba(255,255,255,.18)
}

.sp-app-stage .sp-priority-callout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  margin-top:12px;
  padding:13px 14px;
  border-radius:17px;
  background:linear-gradient(120deg,rgb(var(--sp-status-critical-rgb) / .10),rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-priority-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:11px;
  background:rgb(var(--sp-status-critical-rgb) / .13);
  color:var(--sp-status-critical)
}

.sp-app-stage .sp-priority-icon .sp-icon{
  width:16px;
  height:16px
}

.sp-app-stage .sp-priority-body{
  min-width:0
}

.sp-app-stage .sp-row-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-priority-body h3{
  margin:4px 0 3px;
}

.sp-app-stage .sp-priority-body p{
  margin:0;
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-inline-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-inline-meta>span:not(.sp-status-chip){
  display:inline-flex;
  align-items:center;
  gap:4px
}

.sp-app-stage .sp-inline-meta .sp-icon{
  width:12px;
  height:12px
}

.sp-app-stage .sp-handover-stream{
  margin-top:9px
}

.sp-app-stage .sp-stream-item{
  position:relative;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:9px;
  padding:10px 2px 10px 0;
  border-bottom:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-stream-item:last-child{
  border-bottom:0
}

.sp-app-stage .sp-stream-dot{
  width:7px;
  height:7px;
  margin-top:5px;
  border-radius:50%;
  background:var(--sp-status-info)
}

.sp-app-stage .sp-stream-dot.is-vip{
  background:var(--sp-op-vip)
}

.sp-app-stage .sp-stream-dot.is-hk{
  background:var(--sp-op-housekeeping)
}

.sp-app-stage .sp-stream-dot.is-guest{
  background:var(--sp-status-warning)
}

.sp-app-stage .sp-stream-main{
  min-width:0
}

.sp-app-stage .sp-stream-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.sp-app-stage .sp-stream-top time{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-stream-main p{
  margin:3px 0 0;
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-stream-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-stream-meta .sp-mini-avatar{
  width:22px;
  height:22px;
}

.sp-app-stage .sp-stream-meta .sp-status-chip{
  margin-left:auto
}

.sp-app-stage .sp-intel-rail{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:11px
}

.sp-app-stage .sp-rail-section{
  padding:12px 13px;
  border-radius:17px;
  background:var(--sp-surface-elevated);
  border:1px solid var(--sp-line-elevated);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(18,31,43,.06)
}

.sp-app-stage .sp-focus-list{
  margin-top:7px
}

.sp-app-stage .sp-focus-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  padding:7px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:transparent;
  text-align:left;
  cursor:pointer
}

.sp-app-stage .sp-focus-row:last-child{
  border-bottom:0
}

.sp-app-stage .sp-focus-row:hover strong{
  color:var(--sp-interactive-hover)
}

.sp-app-stage .sp-focus-time{
  color:var(--sp-status-info)
}

.sp-app-stage .sp-focus-row>span:nth-child(2){
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-focus-row strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-focus-row small{
  margin-top:2px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-focus-row .sp-icon{
  width:13px;
  height:13px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-loyalty-progress{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:9px
}

.sp-app-stage .sp-loyalty-ring{
  --progress:50;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  flex:0 0 auto;
  border-radius:50%;
  background:conic-gradient(var(--sp-status-info) calc(var(--progress)*1%),rgba(42,61,72,.10) 0);
  position:relative
}

.sp-app-stage .sp-loyalty-ring::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:rgba(232,239,242,.86)
}

.sp-app-stage .sp-loyalty-ring span{
  position:relative;
  z-index:1;
}

.sp-app-stage .sp-loyalty-ring small{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-loyalty-progress>div:last-child{
  min-width:0
}

.sp-app-stage .sp-loyalty-progress strong{
  display:block;
}

.sp-app-stage .sp-loyalty-progress p{
  margin:3px 0 0;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-loyalty-rail .sp-rail-link{
  margin-top:8px
}

.sp-app-stage .sp-vip-mini-list{
  margin-top:7px
}

.sp-app-stage .sp-vip-mini{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:transparent;
  text-align:left;
  cursor:pointer
}

.sp-app-stage .sp-vip-mini:last-child{
  border-bottom:0
}

.sp-app-stage .sp-vip-mini>span:nth-child(2){
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-vip-mini small{
  color:var(--sp-ink-3);
  margin-top:1px
}

.sp-app-stage .sp-elite-mark{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:9px;
}

.sp-app-stage .sp-elite-mark.is-diamond{
  background:rgb(var(--sp-status-info-rgb) / .15);
  color:var(--sp-status-info)
}

.sp-app-stage .sp-elite-mark.is-platinum{
  background:rgb(var(--sp-status-neutral-rgb) / .13);
  color:var(--sp-status-neutral)
}

/* ---------- Dense modules ---------- */

.sp-app-stage .sp-module-summary{
  display:grid;
  grid-template-columns:repeat(3,110px) minmax(0,1fr);
  align-items:stretch;
  margin-bottom:12px;
  border-radius:16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden
}

.sp-app-stage .sp-module-summary>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 13px;
  border-right:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-module-summary span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-module-summary .sp-summary-note{
  flex-direction:row;
  align-items:center;
  gap:9px;
  border-right:0
}

.sp-app-stage .sp-summary-note p{
  margin:0;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-dense-list{
  border-top:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-dense-row{
  position:relative;
  display:grid;
  grid-template-columns:3px auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 5px;
  border-bottom:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-dense-row.is-filtered-out{
  display:none
}

.sp-app-stage .sp-priority-rail{
  width:3px;
  height:34px;
  border-radius:999px;
  background:rgba(74,100,115,.32)
}

.sp-app-stage .sp-priority-rail.is-high{
  background:var(--sp-status-critical)
}

.sp-app-stage .sp-priority-rail.is-medium{
  background:var(--sp-status-warning)
}

.sp-app-stage .sp-priority-rail.is-low{
  background:var(--sp-status-neutral)
}

.sp-app-stage .sp-dense-main{
  min-width:0
}

.sp-app-stage .sp-dense-title{
  display:flex;
  align-items:center;
  gap:7px
}

.sp-app-stage .sp-dense-title strong{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-dense-main p{
  margin:3px 0 0;
  color:var(--sp-ink-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-dense-meta{
  display:flex;
  gap:5px;
  margin-top:5px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-row-actions{
  display:flex;
  align-items:center;
  gap:6px
}

.sp-app-stage .sp-row-actions .sp-icon-button{
  width:30px;
  height:30px;
  background:transparent
}

.sp-app-stage .sp-row-actions .sp-icon-button .sp-icon{
  width:15px;
  height:15px
}

.sp-app-stage .sp-task-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(180px,1.3fr);
  margin-bottom:12px;
  border-radius:16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden
}

.sp-app-stage .sp-task-stats>div{
  display:flex;
  flex-direction:column;
  padding:10px 13px;
  border-right:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-task-stats>div:last-child{
  border-right:0
}

.sp-app-stage .sp-task-stats span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-task-stats small{
  color:var(--sp-ink-3);
  margin-top:2px
}

.sp-app-stage .sp-task-completion div{
  height:4px;
  margin-top:7px;
  border-radius:999px;
  background:rgba(30,48,59,.08);
  overflow:hidden
}

.sp-app-stage .sp-task-completion i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--sp-status-info)
}

.sp-app-stage .sp-task-list{
  border-top:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-task-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:11px 3px;
  border-bottom:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-task-row.is-done{
  opacity:.48
}

.sp-app-stage .sp-task-row.is-done .sp-task-main strong{
  text-decoration:line-through
}

.sp-app-stage .sp-task-check{
  width:20px;
  height:20px;
  border-radius:7px;
  border:1px solid rgba(34,53,64,.20);
  background:rgba(255,255,255,.10);
  cursor:pointer
}

.sp-app-stage .sp-task-row.is-done .sp-task-check{
  background:var(--sp-status-success);
  border-color:var(--sp-status-success);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.9)
}

.sp-app-stage .sp-task-main{
  min-width:0
}

.sp-app-stage .sp-task-main>div{
  display:flex;
  align-items:center;
  gap:7px
}

.sp-app-stage .sp-task-main p{
  margin:3px 0 0;
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-task-main>span{
  display:block;
  margin-top:4px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-task-owner{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--sp-ink-3)
}

/* ---------- Tables / arrivals ---------- */

.sp-app-stage .sp-arrival-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(165px,1.25fr);
  margin-bottom:12px;
  border-radius:16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden
}

.sp-app-stage .sp-arrival-overview>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 12px;
  border-right:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-arrival-overview>div:last-child{
  border-right:0
}

.sp-app-stage .sp-arrival-overview span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-arrival-overview small{
  color:var(--sp-ink-3);
  margin-top:2px
}

.sp-app-stage .sp-table-list{
  width:100%
}

.sp-app-stage .sp-table-head,
.sp-app-stage .sp-table-row{
  display:grid;
  grid-template-columns:minmax(190px,1.5fr) 90px 62px 70px minmax(160px,1.2fr) 34px;
  align-items:center;
  gap:8px
}

.sp-app-stage .sp-table-head{
  padding:7px 8px;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-table-row{
  min-height:52px;
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.sp-app-stage .sp-table-row:hover{
  background:rgba(255,255,255,.06)
}

.sp-app-stage .sp-guest-cell{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.sp-app-stage .sp-guest-cell>span:last-child{
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-guest-cell strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-guest-cell small{
  color:var(--sp-ink-3);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-remark-cell{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-table-row>.sp-icon-button{
  width:30px;
  height:30px;
  background:transparent
}

.sp-app-stage .sp-table-row>.sp-icon-button .sp-icon{
  width:15px;
  height:15px
}

/* ---------- Module layouts ---------- */

.sp-app-stage .sp-module-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:15px;
  padding:16px 18px;
  border-radius:19px;
  background:linear-gradient(120deg,rgb(var(--sp-status-info-rgb) / .12),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-module-hero h2,
.sp-app-stage .sp-loyalty-hero h2,
.sp-app-stage .sp-report-hero h2{
  margin:4px 0 4px;
}

.sp-app-stage .sp-module-hero p,
.sp-app-stage .sp-loyalty-hero p,
.sp-app-stage .sp-report-hero p{
  margin:0;
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-house-ring{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  border-radius:50%;
  background:conic-gradient(var(--sp-status-info) 84%,rgba(39,58,69,.09) 0);
  position:relative
}

.sp-app-stage .sp-house-ring::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:rgba(232,239,242,.88)
}

.sp-app-stage .sp-house-ring span{
  position:relative;
  z-index:1;
}

.sp-app-stage .sp-three-column-layout,
.sp-app-stage .sp-loyalty-layout,
.sp-app-stage .sp-hk-layout,
.sp-app-stage .sp-breakfast-layout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.sp-app-stage .sp-module-pane{
  min-width:0;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-exception-list,
.sp-app-stage .sp-opportunity-list,
.sp-app-stage .sp-room-priority-list{
  margin-top:8px
}

.sp-app-stage .sp-exception-list article,
.sp-app-stage .sp-opportunity-list article,
.sp-app-stage .sp-room-priority-list article{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-exception-list article:last-child,
.sp-app-stage .sp-opportunity-list article:last-child,
.sp-app-stage .sp-room-priority-list article:last-child{
  border-bottom:0
}

.sp-app-stage .sp-room-number{
  display:grid;
  place-items:center;
  min-width:36px;
  height:28px;
  padding:0 6px;
  border-radius:9px;
  background:rgba(255,255,255,.13);
}

.sp-app-stage .sp-exception-list article>div,
.sp-app-stage .sp-opportunity-list article>div,
.sp-app-stage .sp-room-priority-list article>div{
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-exception-list small,
.sp-app-stage .sp-opportunity-list small,
.sp-app-stage .sp-room-priority-list small{
  color:var(--sp-ink-3);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-compact-stat-list{
  margin-top:7px
}

.sp-app-stage .sp-compact-stat-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-compact-stat-list div:last-child{
  border-bottom:0
}

.sp-app-stage .sp-compact-stat-list span{
  color:var(--sp-ink-2)
}

/* VIP */

.sp-app-stage .sp-vip-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.sp-app-stage .sp-vip-feature{
  position:relative;
  padding:15px;
  border-radius:19px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
  overflow:hidden
}

.sp-app-stage .sp-vip-feature::after{
  content:"";
  position:absolute;
  inset:auto -30px -45px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgb(var(--sp-op-vip-rgb) / .12),transparent 70%);
  pointer-events:none
}

.sp-app-stage .sp-vip-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px
}

.sp-app-stage .sp-vip-top h3{
  margin:3px 0 0;
}

.sp-app-stage .sp-vip-room{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:14px
}

.sp-app-stage .sp-vip-room span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-vip-feature p{
  margin:7px 0 10px;
  color:var(--sp-ink-2);
  min-height:39px
}

.sp-app-stage .sp-vip-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:10px
}

.sp-app-stage .sp-vip-tags span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:var(--sp-ink-3)
}

/* Loyalty */

.sp-app-stage .sp-loyalty-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:14px;
  padding:17px 18px;
  border-radius:19px;
  background:linear-gradient(120deg,rgb(var(--sp-status-info-rgb) / .12),rgb(var(--sp-op-vip-rgb) / .08));
  border:1px solid rgba(255,255,255,.16)
}

.sp-app-stage .sp-large-progress{
  display:flex;
  align-items:center;
  gap:10px
}

.sp-app-stage .sp-loyalty-ring.is-large{
  width:68px;
  height:68px
}

.sp-app-stage .sp-loyalty-ring.is-large::after{
  inset:6px
}

.sp-app-stage .sp-large-progress>div:last-child{
  display:flex;
  flex-direction:column
}

.sp-app-stage .sp-large-progress>div:last-child span{
  color:var(--sp-ink-3);
  margin-top:2px
}

.sp-app-stage .sp-funnel{
  margin-top:9px
}

.sp-app-stage .sp-funnel>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}

.sp-app-stage .sp-funnel span{
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-funnel i{
  grid-column:1/-1;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,rgb(var(--sp-status-info-rgb) / .78),rgba(99,143,164,.62))
}

.sp-app-stage .sp-monthly-kpi{
  display:flex;
  flex-direction:column;
  margin-top:12px
}

.sp-app-stage .sp-monthly-kpi small,
.sp-app-stage .sp-module-note{
  color:var(--sp-ink-3);
  margin-top:3px
}

.sp-app-stage .sp-module-note{
  margin-bottom:0
}

/* Housekeeping */

.sp-app-stage .sp-hk-ribbon{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,1.2fr);
  margin-bottom:14px;
  border-radius:17px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden
}

.sp-app-stage .sp-hk-ribbon>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 13px;
  border-right:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-hk-ribbon>div:last-child{
  border-right:0
}

.sp-app-stage .sp-hk-ribbon span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-hk-ribbon small{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-hk-load{
  display:grid!important;
  grid-template-columns:1fr auto;
  align-items:center
}

.sp-app-stage .sp-hk-load .sp-status-chip{
  grid-row:1/3;
  grid-column:2
}

.sp-app-stage .sp-program-progress{
  margin-top:10px
}

.sp-app-stage .sp-program-progress>div{
  margin-bottom:14px
}

.sp-app-stage .sp-program-progress span{
  color:var(--sp-ink-2)
}

.sp-app-stage .sp-program-progress strong{
  float:right;
}

.sp-app-stage .sp-program-progress small{
  display:block;
  margin-top:4px;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-mini-forecast{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:7px;
  height:128px;
  margin-top:8px
}

.sp-app-stage .sp-mini-forecast div{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  height:100%
}

.sp-app-stage .sp-mini-forecast i{
  position:absolute;
  bottom:0;
  width:72%;
  max-width:34px;
  border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,rgb(var(--sp-status-info-rgb) / .52),rgb(var(--sp-status-info-rgb) / .20));
  z-index:0
}

.sp-app-stage .sp-mini-forecast span,
.sp-app-stage .sp-mini-forecast strong,
.sp-app-stage .sp-mini-forecast small{
  position:relative;
  z-index:1
}

.sp-app-stage .sp-mini-forecast span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-mini-forecast small{
  color:var(--sp-ink-3);
  margin-bottom:4px
}

/* Breakfast */

.sp-app-stage .sp-module-hero.is-breakfast{
  background:linear-gradient(120deg,rgb(var(--sp-status-warning-rgb) / .10),rgba(255,255,255,.08))
}

.sp-app-stage .sp-breakfast-split{
  display:flex;
  gap:7px
}

.sp-app-stage .sp-breakfast-split>div{
  display:flex;
  flex-direction:column;
  min-width:80px;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-breakfast-split span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-breakfast-layout{
  grid-template-columns:1.6fr .8fr .9fr
}

.sp-app-stage .sp-forecast-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:150px;
  margin-top:8px;
  padding-top:8px
}

.sp-app-stage .sp-forecast-bars>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  height:100%
}

.sp-app-stage .sp-forecast-bars i{
  width:68%;
  min-width:14px;
  height:var(--v);
  border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,rgba(82,125,150,.62),rgba(82,125,150,.20));
  order:2
}

.sp-app-stage .sp-forecast-bars span{
  color:var(--sp-ink-3);
  order:1;
  margin-bottom:3px
}

.sp-app-stage .sp-forecast-bars strong{
  order:3;
  margin-top:3px
}

.sp-app-stage .sp-delivery-total{
  display:flex;
  flex-direction:column;
  margin:12px 0
}

.sp-app-stage .sp-delivery-total small{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-note-list{
  margin-top:9px
}

.sp-app-stage .sp-note-list article{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-note-list article:last-child{
  border-bottom:0
}

.sp-app-stage .sp-note-list .sp-icon{
  width:16px;
  height:16px;
  color:var(--sp-status-warning);
  margin-top:1px
}

.sp-app-stage .sp-note-list p{
  margin:2px 0 0;
  color:var(--sp-ink-3)
}

/* Bulletin board view */

.sp-app-stage .sp-bulletin-board-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.sp-app-stage .sp-board-card{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  min-height:135px;
  border-radius:19px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-board-card.is-featured{
  grid-column:span 2;
  grid-template-columns:160px minmax(0,1fr)
}

.sp-app-stage .sp-board-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100%;
  background:linear-gradient(145deg,rgba(50,83,102,.74),rgba(31,56,72,.86));
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-board-visual.is-wm{
  background:linear-gradient(145deg,#6f3d35,#a36a45)
}

.sp-app-stage .sp-board-visual.is-event{
  background:linear-gradient(145deg,#466f82,#2f5367)
}

.sp-app-stage .sp-board-visual.is-tech{
  background:linear-gradient(145deg,#5e6871,#3f4b55)
}

.sp-app-stage .sp-board-visual.is-team{
  background:linear-gradient(145deg,#6b6684,#4e4a68);
}

.sp-app-stage .sp-board-visual .sp-icon{
  width:28px;
  height:28px
}

.sp-app-stage .sp-board-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px
}

.sp-app-stage .sp-board-body h3{
  margin:4px 0 4px;
}

.sp-app-stage .sp-board-body p{
  margin:0 0 9px;
  color:var(--sp-ink-2)
}

/* Reports */

.sp-app-stage .sp-report-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:19px;
  background:linear-gradient(120deg,rgb(var(--sp-status-info-rgb) / .11),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.15)
}

.sp-app-stage .sp-system-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:999px;
  background:rgb(var(--sp-status-success-rgb) / .10);
  color:var(--sp-status-success)
}

.sp-app-stage .sp-system-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--sp-status-success)
}

.sp-app-stage .sp-report-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px
}

.sp-app-stage .sp-report-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:11px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)
}

.sp-app-stage .sp-report-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgb(var(--sp-status-info-rgb) / .13);
  color:var(--sp-status-info)
}

.sp-app-stage .sp-report-icon .sp-icon{
  width:19px;
  height:19px
}

.sp-app-stage .sp-report-card h3{
  margin:3px 0 3px;
}

.sp-app-stage .sp-report-card p{
  margin:0;
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-report-card .sp-rail-link{
  grid-column:2;
  margin-top:4px;
  justify-self:start
}

.sp-app-stage .sp-data-pipeline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
  padding:10px;
  border-radius:15px;
  background:rgba(255,255,255,.08);
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-data-pipeline .sp-icon{
  width:12px;
  height:12px
}

/* ---------- Quick panel / toast ---------- */

.sp-app-stage .sp-quick-panel{
  position:absolute;
  z-index:55;
  top:0;
  right:0;
  width:min(390px,94%);
  height:100%;
  padding:20px;
  border-radius:0 36px 36px 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),var(--sp-bg-blur-image);
  background-size:100% 100%,cover;
  background-position:center,var(--sp-bg-position-x) var(--sp-bg-position-y);
  background-attachment:scroll,fixed;
  border-left:1px solid rgba(255,255,255,.35);
  box-shadow:-24px 0 60px rgba(20,36,47,.14);
  transform:translateX(104%);
  opacity:0;
  visibility:hidden;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility .2s ease
}

.sp-app-stage .sp-main-app.is-quick-open .sp-quick-panel{
  transform:translateX(0);
  opacity:1;
  visibility:visible
}

.sp-app-stage .sp-quick-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px
}

.sp-app-stage .sp-quick-panel-head h3{
  margin:4px 0 0;
}

.sp-app-stage .sp-quick-panel form{
  display:flex;
  flex-direction:column;
  gap:12px
}

.sp-app-stage .sp-quick-panel label{
  display:flex;
  flex-direction:column;
  gap:5px
}

.sp-app-stage .sp-quick-panel label>span{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-quick-panel input,
.sp-app-stage .sp-quick-panel select,
.sp-app-stage .sp-quick-panel textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  background:rgba(255,255,255,.14);
  padding:9px 10px;
  color:var(--sp-ink);
  outline:none
}

.sp-app-stage .sp-quick-panel input,
.sp-app-stage .sp-quick-panel select{
  height:40px
}

.sp-app-stage .sp-quick-panel textarea{
  resize:vertical
}

.sp-app-stage .sp-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.sp-app-stage .sp-quick-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px
}

.sp-app-stage .sp-toast{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:260px;
  max-width:80%;
  padding:10px 13px;
  border-radius:14px;
  background:rgba(31,49,60,.92);
  color:var(--sp-text-inverse);
  box-shadow:0 15px 40px rgba(19,33,43,.22);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,12px);
  transition:.25s ease
}

.sp-app-stage .sp-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}

.sp-app-stage .sp-toast-icon{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:8px;
  background:rgba(255,255,255,.11)
}

.sp-app-stage .sp-toast-icon .sp-icon{
  width:14px;
  height:14px
}

.sp-app-stage .sp-toast p{
  margin:0;
}

.sp-app-stage .sp-search-hidden{
  display:none!important
}

/* ---------- Bottom bulletin slider ---------- */

.sp-app-stage .sp-bulletin-shell{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  height:100%
}

.sp-app-stage .sp-bulletin-label{
  display:flex;
  align-items:center;
  gap:10px
}

.sp-app-stage .sp-bulletin-label>div{
  display:flex;
  flex-direction:column
}

.sp-app-stage .sp-bulletin-label small{
  color:var(--sp-ink-3);
  margin-top:2px
}

.sp-app-stage .sp-bulletin-track{
  position:relative;
  min-width:0;
  height:78px;
  overflow:hidden
}

.sp-app-stage .sp-bulletin-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  opacity:0;
  visibility:hidden;
  transform:translateX(18px);
  transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility .28s ease
}

.sp-app-stage .sp-bulletin-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0)
}

.sp-app-stage .sp-bulletin-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:74px;
  height:62px;
  border-radius:15px;
  color:var(--sp-text-inverse);
  background:linear-gradient(145deg,#476f82,#2f5367);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)
}

.sp-app-stage .sp-bulletin-visual.is-wm{
  background:linear-gradient(145deg,#7d4739,#a26c48)
}

.sp-app-stage .sp-bulletin-visual.is-event{
  background:linear-gradient(145deg,#4c7587,#305667)
}

.sp-app-stage .sp-bulletin-visual.is-team{
  background:linear-gradient(145deg,#6c6684,#4e4968);
}

.sp-app-stage .sp-bulletin-visual small{
  margin-top:3px
}

.sp-app-stage .sp-bulletin-copy{
  min-width:0
}

.sp-app-stage .sp-bulletin-kicker{
  color:var(--sp-ink-3)
}

.sp-app-stage .sp-bulletin-copy h3{
  margin:3px 0 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-bulletin-copy p{
  margin:0;
  color:var(--sp-ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-bulletin-controls{
  display:flex;
  align-items:center;
  gap:8px
}

.sp-app-stage .sp-bulletin-controls button{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  cursor:pointer
}

.sp-app-stage .sp-bulletin-controls button:hover{
  background:rgba(255,255,255,.20)
}

.sp-app-stage .sp-bulletin-controls button .sp-icon{
  width:14px;
  height:14px
}

.sp-app-stage .sp-bulletin-controls .sp-icon.is-back{
  transform:rotate(180deg)
}

.sp-app-stage .sp-bulletin-controls>span{
  display:flex;
  gap:4px
}

.sp-app-stage .sp-bulletin-controls i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(31,49,59,.18)
}

.sp-app-stage .sp-bulletin-controls i.is-active{
  width:14px;
  border-radius:999px;
  background:var(--sp-interactive-primary)
}


/* =========================================================
   SEMANTIC ICON COLOR MAPPING
   Mirrors Elementor Global Colors:
   sp_Icon_Primary, sp_Icon_Secondary, sp_Icon_Muted,
   sp_Icon_Active, sp_Icon_Inverse
   ========================================================= */

.sp-app-stage .sp-icon-button,
.sp-app-stage .sp-settings-button,
.sp-app-stage .sp-bulletin-controls button{
  color:var(--sp-icon-secondary)
}

.sp-app-stage .sp-icon-button:hover,
.sp-app-stage .sp-settings-button:hover,
.sp-app-stage .sp-bulletin-controls button:hover{
  color:var(--sp-icon-primary)
}

.sp-app-stage .sp-soft-button .sp-icon,
.sp-app-stage .sp-date-control>.sp-icon{
  color:var(--sp-icon-secondary)
}

.sp-app-stage .sp-primary-button .sp-icon{
  color:var(--sp-icon-inverse)
}

.sp-app-stage .sp-sidebar-nav-item .sp-nav-icon{
  color:var(--sp-icon-secondary)
}

.sp-app-stage .sp-sidebar-nav-item:hover .sp-nav-icon{
  color:var(--sp-icon-primary)
}

.sp-app-stage .sp-sidebar-nav-item.is-active .sp-nav-icon{
  color:var(--sp-icon-active)
}

.sp-app-stage .sp-user-card>.sp-icon,
.sp-app-stage .sp-focus-row>.sp-icon,
.sp-app-stage .sp-data-pipeline>.sp-icon{
  color:var(--sp-icon-muted)
}

.sp-app-stage .sp-row-actions .sp-icon-button,
.sp-app-stage .sp-table-row>.sp-icon-button{
  color:var(--sp-icon-muted)
}

.sp-app-stage .sp-row-actions .sp-icon-button:hover,
.sp-app-stage .sp-table-row>.sp-icon-button:hover{
  color:var(--sp-icon-primary)
}

.sp-app-stage .sp-text-button .sp-icon,
.sp-app-stage .sp-rail-link .sp-icon{
  color:currentColor
}


/* =========================================================
   SEMANTIC TEXT COLOR MAPPING
   Fixed colors are preferred over weak alpha text on MorphGlass.
   ========================================================= */

.sp-app-stage .sp-brand-copy strong,
.sp-app-stage .sp-property-chip strong,
.sp-app-stage .sp-main-title,
.sp-app-stage .sp-score-item strong,
.sp-app-stage .sp-score-detail strong,
.sp-app-stage .sp-section-head h2,
.sp-app-stage .sp-section-head h3,
.sp-app-stage .sp-rail-head h3,
.sp-app-stage .sp-priority-body h3,
.sp-app-stage .sp-stream-top strong,
.sp-app-stage .sp-focus-row strong,
.sp-app-stage .sp-dense-title strong,
.sp-app-stage .sp-task-main strong,
.sp-app-stage .sp-guest-cell strong,
.sp-app-stage .sp-vip-top h3,
.sp-app-stage .sp-report-card h3,
.sp-app-stage .sp-board-body h3,
.sp-app-stage .sp-bulletin-copy h3{
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-main-subtitle,
.sp-app-stage .sp-priority-body p,
.sp-app-stage .sp-stream-main p,
.sp-app-stage .sp-dense-main p,
.sp-app-stage .sp-task-main p,
.sp-app-stage .sp-remark-cell,
.sp-app-stage .sp-module-hero p,
.sp-app-stage .sp-loyalty-hero p,
.sp-app-stage .sp-report-hero p,
.sp-app-stage .sp-vip-feature p,
.sp-app-stage .sp-note-list p,
.sp-app-stage .sp-board-body p,
.sp-app-stage .sp-bulletin-copy p{
  color:var(--sp-text-secondary)
}

.sp-app-stage .sp-brand-tagline,
.sp-app-stage .sp-property-chip span:not(.sp-live-dot),
.sp-app-stage .sp-nav-section-label,
.sp-app-stage .sp-score-window,
.sp-app-stage .sp-score-label,
.sp-app-stage .sp-data-freshness,
.sp-app-stage .sp-main-eyebrow,
.sp-app-stage .sp-op-metric small,
.sp-app-stage .sp-occupancy-meter small,
.sp-app-stage .sp-inline-meta,
.sp-app-stage .sp-stream-meta,
.sp-app-stage .sp-focus-row small,
.sp-app-stage .sp-dense-meta,
.sp-app-stage .sp-task-main>span,
.sp-app-stage .sp-task-owner,
.sp-app-stage .sp-guest-cell small,
.sp-app-stage .sp-vip-room span,
.sp-app-stage .sp-vip-tags span,
.sp-app-stage .sp-module-note,
.sp-app-stage .sp-hk-ribbon small,
.sp-app-stage .sp-delivery-total small,
.sp-app-stage .sp-bulletin-label small{
  color:var(--sp-text-tertiary)
}

.sp-app-stage .sp-global-search input::placeholder{
  color:var(--sp-text-muted)
}

.sp-app-stage .sp-sidebar-nav-item{
  color:var(--sp-text-secondary)
}

.sp-app-stage .sp-sidebar-nav-item:hover,
.sp-app-stage .sp-sidebar-nav-item.is-active{
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-main-title,
.sp-app-stage .sp-type-display,
.sp-app-stage .sp-type-page-title{
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-score-item em.is-up{
  color:var(--sp-status-success)
}

.sp-app-stage .sp-score-item em.is-down{
  color:var(--sp-status-critical)
}

.sp-app-stage .sp-board-visual,
.sp-app-stage .sp-bulletin-visual,
.sp-app-stage .sp-toast{
  color:var(--sp-text-inverse)
}


@media (max-width:782px) {
  body.admin-bar .sp-app-stage{
    height:calc(100dvh - 46px);
    min-height:calc(100svh - 46px);
    max-height:calc(100dvh - 46px)
  }
}

/* ---------- Responsive ---------- */

@media (max-width:1199px) {
  .sp-app-stage{
    --sp-type-display:36px;
    --sp-type-page-title:28px;
    --sp-type-section-title:19px;
    --sp-type-kpi:32px;

    --sp-sidebar-width-expanded:205px;
    --sp-sidebar-width:var(--sp-sidebar-width-expanded);
    --sp-edge-gap:18px;
    --sp-gap:14px;
    --sp-score-height:88px;
    --sp-bulletin-height:112px
  }

  .sp-app-stage .sp-sidebar-tile{
    padding:12px 9px
  }

  .sp-app-stage .sp-score-shell{
    grid-template-columns:118px minmax(0,1fr) auto;
    align-items:stretch
  }

  .sp-app-stage .sp-score-heading{
    padding-left:0
  }

  .sp-app-stage .sp-score-item{
    padding:0 9px
  }

  .sp-app-stage .sp-main-app{
    padding:19px 19px 15px
  }

  .sp-app-stage .sp-dashboard-workspace{
    grid-template-columns:minmax(0,1.55fr) minmax(230px,.8fr);
    gap:14px
  }

  .sp-app-stage .sp-primary-flow{
    padding-right:14px
  }

  .sp-app-stage .sp-date-control span{
    display:none
  }

  .sp-app-stage .sp-ops-ribbon{
    grid-template-columns:repeat(4,minmax(78px,1fr)) minmax(145px,1.2fr)
  }

  .sp-app-stage .sp-op-metric{
    padding:10px
  }

  .sp-app-stage .sp-table-head,
.sp-app-stage .sp-table-row{
    grid-template-columns:minmax(160px,1.4fr) 80px 55px 62px minmax(130px,1fr) 30px
  }

  .sp-app-stage .sp-three-column-layout,
.sp-app-stage .sp-loyalty-layout,
.sp-app-stage .sp-hk-layout{
    gap:9px
  }

  .sp-app-stage .sp-breakfast-layout{
    grid-template-columns:1.35fr .8fr .9fr
  }

}

@media (max-width:960px) and (min-width:768px) {
  .sp-app-stage{
    --sp-sidebar-width:76px;
    --sp-edge-gap:14px;
    --sp-gap:12px
  }

  .sp-app-stage .sp-sidebar-tile{
    padding:11px 8px
  }

  .sp-app-stage .sp-brand-tagline,
.sp-app-stage .sp-property-chip div,
.sp-app-stage .sp-nav-label,
.sp-app-stage .sp-nav-badge,
.sp-app-stage .sp-nav-section-label,
.sp-app-stage .sp-user-copy,
.sp-app-stage .sp-settings-button{
    display:none
  }

  .sp-app-stage .sp-brand-lockup{
    flex:0 0 36px;
    width:36px;
    overflow:hidden
  }

  .sp-app-stage .sp-brand-logo{
    width:34px;
    max-width:34px;
    height:34px;
    -webkit-mask-image:var(--sp-logo-icon-image);
    mask-image:var(--sp-logo-icon-image);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-position:center;
    mask-position:center
  }

  .sp-app-stage .sp-sidebar-brand{
    justify-content:center;
    padding:5px 0 12px
  }

  .sp-app-stage .sp-sidebar-collapse{
    display:none
  }

  .sp-app-stage .sp-property-chip{
    justify-content:center;
    margin:0 6px 10px;
    padding:10px
  }

  .sp-app-stage .sp-nav-section{
    gap:5px
  }

  .sp-app-stage .sp-sidebar-nav-item{
    justify-content:center;
    padding:0;
    min-height:42px
  }

  .sp-app-stage .sp-sidebar-nav-item:hover{
    transform:none
  }

  .sp-app-stage .sp-sidebar-footer{
    justify-content:center
  }

  .sp-app-stage .sp-user-card{
    flex:0 0 auto;
    padding:4px
  }

  .sp-app-stage .sp-score-shell{
    grid-template-columns:105px minmax(0,1fr) auto;
    align-items:stretch
  }

  .sp-app-stage .sp-score-item:nth-child(4){
    display:none
  }

  .sp-app-stage .sp-score-grid{
    grid-template-columns:repeat(3,1fr)
  }

  .sp-app-stage .sp-dashboard-workspace{
    grid-template-columns:1fr
  }

  .sp-app-stage .sp-primary-flow{
    padding-right:0;
    border-right:0
  }

  .sp-app-stage .sp-intel-rail{
    display:grid;
    grid-template-columns:1fr 1fr
  }

  .sp-app-stage .sp-vip-rail{
    display:none
  }

  .sp-app-stage .sp-three-column-layout,
.sp-app-stage .sp-loyalty-layout,
.sp-app-stage .sp-hk-layout,
.sp-app-stage .sp-breakfast-layout{
    grid-template-columns:1fr 1fr
  }

  .sp-app-stage .sp-three-column-layout>.sp-module-pane:last-child,
.sp-app-stage .sp-hk-layout>.sp-module-pane:last-child,
.sp-app-stage .sp-breakfast-layout>.sp-module-pane:first-child{
    grid-column:1/-1
  }

  .sp-app-stage .sp-vip-feature-grid{
    grid-template-columns:1fr 1fr
  }

  .sp-app-stage .sp-vip-feature:last-child{
    grid-column:1/-1
  }

  .sp-app-stage .sp-board-card.is-featured{
    grid-template-columns:120px minmax(0,1fr)
  }

}

@media (max-width:767px) {
  body.admin-bar .sp-app-stage{
    height:auto;
    min-height:calc(100svh - 46px);
    max-height:none
  }
}

@media (max-width:767px) {
  .sp-app-stage{
    --sp-type-display:32px;
    --sp-type-page-title:26px;
    --sp-type-section-title:18px;
    --sp-type-kpi:30px;
    --sp-type-body:16px;
    --sp-type-ui:15px;
    --sp-type-label:12px;
    --sp-type-meta:13px;

    --sp-edge-gap:10px;
    --sp-pad-x:var(--sp-edge-gap);
    --sp-pad-y:var(--sp-edge-gap);
    --sp-gap:10px;
    --sp-score-height:auto;
    --sp-bulletin-height:auto;
    --sp-bg-position-x:44%;
    height:auto;
    min-height:100svh;
    max-height:none;
    padding:var(--sp-edge-gap);
    padding-bottom:90px;
    overflow:visible;
    background-attachment:scroll
  }

  .sp-app-stage .sp-glass-tile::before,
.sp-app-stage .sp-morphglass::before{
    background-attachment:scroll;
    background-size:100% 100%,100% 100%,100% 100%,100% 100%,auto 100vh;
    background-position:center,center,center,center,var(--sp-bg-position-x) var(--sp-bg-position-y)
  }

  .sp-app-stage .sp-dashboard-shell{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:auto
  }

  .sp-app-stage .sp-dashboard-main{
    grid-template-rows:auto minmax(620px,auto) auto;
    height:auto
  }

  .sp-app-stage .sp-sidebar-tile{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:120;
    width:auto;
    height:66px;
    padding:7px;
    border-radius:22px;
    overflow:visible
  }

  .sp-app-stage .sp-sidebar-inner{
    position:relative
  }

  .sp-app-stage .sp-sidebar-brand,
.sp-app-stage .sp-property-chip,
.sp-app-stage .sp-sidebar-footer,
.sp-app-stage .sp-nav-section-label{
    display:none
  }

  .sp-app-stage .sp-sidebar-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr) 1fr;
    gap:2px;
    overflow:visible;
    padding:0;
    height:100%
  }

  .sp-app-stage .sp-nav-section{
    display:contents
  }

  .sp-app-stage .sp-sidebar-nav-item{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    min-height:52px;
    padding:3px;
    border-radius:15px
  }

  .sp-app-stage .sp-sidebar-nav-item.sp-mobile-primary{
    display:flex
  }

  .sp-app-stage .sp-nav-icon{
    width:22px;
    height:22px
  }

  .sp-app-stage .sp-nav-icon .sp-icon{
    width:18px;
    height:18px
  }

  .sp-app-stage .sp-nav-label{
    display:block;
  }

  .sp-app-stage .sp-nav-badge{
    display:none
  }

  .sp-app-stage .sp-mobile-more{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    position:absolute;
    right:0;
    top:0;
    width:20%;
    height:52px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:var(--sp-text-secondary)
  }

  .sp-app-stage .sp-mobile-more .sp-nav-icon{
    display:grid
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open{
    height:min(68vh,510px);
    padding:12px
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-sidebar-inner{
    padding-bottom:58px
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-sidebar-nav{
    display:flex;
    flex-direction:column;
    overflow:auto
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-nav-section{
    display:flex
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-nav-section-label{
    display:block
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-sidebar-nav-item{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    gap:10px;
    min-height:40px;
    padding:0 9px
  }

  .sp-app-stage .sp-sidebar-tile.is-mobile-open .sp-mobile-more{
    top:auto;
    bottom:0;
    right:0;
    width:56px;
    height:48px
  }

  .sp-app-stage .sp-score-tile{
    height:auto;
    min-height:0;
    padding:12px 13px;
    border-radius:23px
  }

  .sp-app-stage .sp-score-shell{
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px
  }

  .sp-app-stage .sp-score-heading{
    grid-column:1
  }

  .sp-app-stage .sp-score-grid{
    grid-column:1/-1;
    grid-row:2;
    grid-template-columns:repeat(2,1fr);
    height:auto;
    gap:7px
  }

  .sp-app-stage .sp-score-item{
    min-height:55px;
    padding:8px 10px;
    border:0;
    border-radius:13px;
    background:rgba(255,255,255,.10)
  }

  .sp-app-stage .sp-score-toggle{
    grid-column:2;
    grid-row:1
  }

  .sp-app-stage .sp-score-drawer{
    position:fixed;
    left:10px;
    right:10px;
    top:70px;
    max-height:calc(100vh - 160px);
    overflow:auto;
    background-attachment:scroll
  }

  .sp-app-stage .sp-score-detail-grid{
    grid-template-columns:1fr 1fr
  }

  .sp-app-stage .sp-score-insight{
    grid-template-columns:auto 1fr
  }

  .sp-app-stage .sp-score-insight button{
    grid-column:2;
    justify-self:start
  }

  .sp-app-stage .sp-main-tile{
    height:auto;
    min-height:620px;
    border-radius:25px
  }

  .sp-app-stage .sp-main-app{
    padding:16px 14px 14px;
    min-height:620px
  }

  .sp-app-stage .sp-workspace-header{
    align-items:flex-start;
    margin-bottom:14px
  }

  .sp-app-stage .sp-main-subtitle{
    display:none
  }

  .sp-app-stage .sp-workspace-actions{
    gap:5px
  }

  .sp-app-stage .sp-date-control{
    display:none
  }

  .sp-app-stage .sp-primary-button{
    width:38px;
    padding:0
  }

  .sp-app-stage .sp-primary-button span{
    display:none
  }

  .sp-app-stage .sp-global-search{
    left:12px;
    right:12px;
    top:12px
  }

  .sp-app-stage .sp-view-stack{
    overflow:visible;
    padding-right:0
  }

  .sp-app-stage .sp-ops-ribbon{
    grid-template-columns:repeat(2,1fr);
    min-height:0
  }

  .sp-app-stage .sp-op-metric{
    min-height:68px;
    border-bottom:1px solid rgba(255,255,255,.14)
  }

  .sp-app-stage .sp-occupancy-meter{
    grid-column:1/-1
  }

  .sp-app-stage .sp-dashboard-workspace{
    grid-template-columns:1fr
  }

  .sp-app-stage .sp-primary-flow{
    padding-right:0;
    border-right:0
  }

  .sp-app-stage .sp-intel-rail{
    display:grid;
    grid-template-columns:1fr
  }

  .sp-app-stage .sp-priority-callout{
    grid-template-columns:auto minmax(0,1fr)
  }

  .sp-app-stage .sp-priority-callout>.sp-icon-button{
    display:none
  }

  .sp-app-stage .sp-inline-meta{
    gap:6px
  }

  .sp-app-stage .sp-stream-main p{
    white-space:normal
  }

  .sp-app-stage .sp-module-summary,
.sp-app-stage .sp-task-stats,
.sp-app-stage .sp-arrival-overview,
.sp-app-stage .sp-hk-ribbon{
    grid-template-columns:repeat(2,1fr)
  }

  .sp-app-stage .sp-module-summary .sp-summary-note,
.sp-app-stage .sp-task-completion,
.sp-app-stage .sp-arrival-pressure,
.sp-app-stage .sp-hk-load{
    grid-column:1/-1
  }

  .sp-app-stage .sp-view-toolbar{
    align-items:flex-start
  }

  .sp-app-stage .sp-toolbar-right .sp-soft-button{
    padding:0 9px
  }

  .sp-app-stage .sp-dense-row{
    grid-template-columns:3px auto minmax(0,1fr)
  }

  .sp-app-stage .sp-row-actions{
    display:none
  }

  .sp-app-stage .sp-dense-main p{
    white-space:normal
  }

  .sp-app-stage .sp-task-row{
    grid-template-columns:auto minmax(0,1fr)
  }

  .sp-app-stage .sp-task-owner{
    grid-column:2;
    margin-top:-2px
  }

  .sp-app-stage .sp-table-list{
    overflow-x:auto
  }

  .sp-app-stage .sp-table-head,
.sp-app-stage .sp-table-row{
    min-width:690px
  }

  .sp-app-stage .sp-three-column-layout,
.sp-app-stage .sp-loyalty-layout,
.sp-app-stage .sp-hk-layout,
.sp-app-stage .sp-breakfast-layout,
.sp-app-stage .sp-vip-feature-grid,
.sp-app-stage .sp-bulletin-board-grid,
.sp-app-stage .sp-report-grid{
    grid-template-columns:1fr
  }

  .sp-app-stage .sp-board-card.is-featured{
    grid-column:auto;
    grid-template-columns:92px minmax(0,1fr)
  }

  .sp-app-stage .sp-module-hero,
.sp-app-stage .sp-loyalty-hero,
.sp-app-stage .sp-report-hero{
    align-items:flex-start;
    flex-direction:column
  }

  .sp-app-stage .sp-vip-feature:last-child{
    grid-column:auto
  }

  .sp-app-stage .sp-breakfast-split{
    width:100%
  }

  .sp-app-stage .sp-breakfast-split>div{
    flex:1
  }

  .sp-app-stage .sp-data-pipeline{
    overflow:auto;
    justify-content:flex-start
  }

  .sp-app-stage .sp-quick-panel{
    position:fixed;
    top:10px;
    right:10px;
    bottom:86px;
    width:calc(100% - 20px);
    height:auto;
    border-radius:24px;
    background-attachment:scroll
  }

  .sp-app-stage .sp-form-grid{
    grid-template-columns:1fr
  }

  .sp-app-stage .sp-bulletin-tile{
    height:auto;
    min-height:106px;
    padding:10px 12px;
    border-radius:23px
  }

  .sp-app-stage .sp-bulletin-shell{
    grid-template-columns:1fr auto;
    gap:8px
  }

  .sp-app-stage .sp-bulletin-label{
    display:none
  }

  .sp-app-stage .sp-bulletin-track{
    height:82px
  }

  .sp-app-stage .sp-bulletin-slide{
    grid-template-columns:60px minmax(0,1fr);
    gap:9px
  }

  .sp-app-stage .sp-bulletin-slide>.sp-status-chip{
    display:none
  }

  .sp-app-stage .sp-bulletin-visual{
    width:60px;
    height:58px
  }

  .sp-app-stage .sp-bulletin-controls{
    grid-column:2;
    grid-row:1
  }

  .sp-app-stage .sp-bulletin-controls>span{
    display:none
  }

  .sp-app-stage .sp-bulletin-controls button{
    width:28px;
    height:28px
  }

}

@media (prefers-reduced-motion:reduce) {
  .sp-app-stage *{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }

}


/* =========================================================
   SHIFTPILOT · UI REFINEMENT LAYER
   Additive, fully scoped to .sp-app-stage. Contains only:
   1. Accent / pink neutralisation (Elementor + theme)
   2. Score bar iconography + classification badges
   3. Score coaching popover (hover / focus / touch)
   4. Employee switch + account menu
   No overrides of working component logic below this line.
   ========================================================= */

/* ---------- 1 · Neutralise inherited pink accents ---------- */
/* Remap Elementor global accent to the ShiftPilot interactive colour so
   any theme hover that reads --e-global-color-accent stays on-system. */
.sp-app-stage{
  --e-global-color-accent: var(--sp-interactive-primary);
  --e-global-color-primary: var(--sp-text-primary);
  --e-global-color-secondary: var(--sp-text-secondary);
}

.sp-app-stage a{
  color:inherit;
  text-decoration:none
}

.sp-app-stage a:hover,
.sp-app-stage a:focus,
.sp-app-stage a:active,
.sp-app-stage a:focus-visible{
  color:inherit
}

/* Date control had no explicit hover, so the theme accent leaked through. */
.sp-app-stage .sp-date-control:hover,
.sp-app-stage .sp-date-control:focus-visible{
  background:var(--sp-surface-strong);
  border-color:rgba(255,255,255,.30);
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-date-control:hover > .sp-icon,
.sp-app-stage .sp-date-control:focus-visible > .sp-icon{
  color:var(--sp-icon-active)
}

/* Toolbar filter chips: quiet, on-system hover / active. */
.sp-app-stage [data-filter]:hover,
.sp-app-stage [data-filter]:focus-visible{
  color:var(--sp-text-primary)
}

.sp-app-stage [data-filter].is-active{
  color:var(--sp-interactive-primary)
}

/* ---------- 2 · Score bar icon + classification badges ---------- */
.sp-app-stage .sp-score-shell .sp-score-toggle .sp-icon{
  color:var(--sp-icon-inverse)
}

.sp-app-stage .sp-score-tier{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:1px;
  padding:2px 8px 2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--sp-font-ui);
  font-size:10px;
  font-weight:var(--sp-weight-semibold);
  letter-spacing:.02em;
  line-height:1.35;
  white-space:nowrap
}

.sp-app-stage .sp-score-tier::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.92
}

.sp-app-stage .sp-score-tier.is-elite{
  color:var(--sp-tier-elite);
  background:rgba(116,183,214,.14);
  border-color:rgba(116,183,214,.32)
}

.sp-app-stage .sp-score-tier.is-superior{
  color:var(--sp-tier-superior);
  background:rgba(111,191,156,.14);
  border-color:rgba(111,191,156,.32)
}

.sp-app-stage .sp-score-tier.is-reputable-plus{
  color:var(--sp-tier-reputable-plus);
  background:rgba(203,169,104,.14);
  border-color:rgba(203,169,104,.32)
}

.sp-app-stage .sp-score-tier.is-reputable{
  color:var(--sp-tier-reputable);
  background:rgba(199,154,114,.13);
  border-color:rgba(199,154,114,.30)
}

.sp-app-stage .sp-score-tier.is-unsatisfactory{
  color:var(--sp-tier-unsatisfactory);
  background:rgba(221,138,144,.14);
  border-color:rgba(221,138,144,.34)
}

/* Score items become focusable coaching triggers. */
.sp-app-stage .sp-score-item{
  cursor:default;
  border-radius:12px;
  transition:background .16s ease
}

.sp-app-stage .sp-score-item.is-interactive{
  cursor:pointer
}

.sp-app-stage .sp-score-item.is-interactive:hover,
.sp-app-stage .sp-score-item.is-interactive:focus-visible,
.sp-app-stage .sp-score-item.is-active{
  background:rgba(233,240,246,.08)
}

.sp-app-stage .sp-score-item:focus-visible{
  outline:2px solid var(--sp-focus-ring);
  outline-offset:2px
}

/* ---------- 3 · Score coaching popover ---------- */
.sp-app-stage .sp-score-pop{
  position:absolute;
  z-index:120;
  width:min(320px,86vw);
  padding:15px 17px 16px;
  border-radius:18px;
  color:var(--sp-text-inverse);
  background:linear-gradient(180deg,rgba(33,43,52,.97) 0%,rgba(17,24,31,.98) 100%);
  border:1px solid rgba(212,226,236,.16);
  box-shadow:0 30px 74px rgba(6,11,16,.52),0 10px 26px rgba(6,11,16,.34),inset 0 1px 0 rgba(226,236,243,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px) scale(.985);
  transform-origin:top center;
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility .18s ease
}

.sp-app-stage .sp-score-pop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1)
}

.sp-app-stage .sp-score-pop-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:2px
}

.sp-app-stage .sp-score-pop-name{
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-ui);
  font-weight:var(--sp-weight-semibold);
  letter-spacing:var(--sp-tracking-ui);
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-score-pop-value{
  font-family:var(--sp-font-display);
  font-size:22px;
  font-weight:var(--sp-weight-semibold);
  letter-spacing:var(--sp-tracking-kpi);
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-score-pop .sp-score-tier{
  margin:6px 0 10px
}

.sp-app-stage .sp-score-pop-text{
  margin:0 0 12px;
  font-family:var(--sp-font-ui);
  font-size:12.5px;
  line-height:1.5;
  color:rgba(238,244,248,.74)
}

.sp-app-stage .sp-score-pop-sub{
  display:block;
  margin:0 0 6px;
  font-family:var(--sp-font-ui);
  font-size:10px;
  font-weight:var(--sp-weight-semibold);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:rgba(238,244,248,.5)
}

.sp-app-stage .sp-score-pop-actions{
  margin:0 0 12px;
  padding:0 0 0 2px;
  list-style:none
}

.sp-app-stage .sp-score-pop-actions li{
  position:relative;
  margin:0 0 5px;
  padding-left:14px;
  font-family:var(--sp-font-ui);
  font-size:12.5px;
  line-height:1.45;
  color:rgba(238,244,248,.82)
}

.sp-app-stage .sp-score-pop-actions li::before{
  content:"";
  position:absolute;
  left:2px;
  top:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--sp-tier-superior)
}

.sp-app-stage .sp-score-scale{
  display:grid;
  gap:2px;
  padding-top:10px;
  border-top:1px solid rgba(212,226,236,.12)
}

.sp-app-stage .sp-score-scale-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:3px 6px;
  border-radius:8px;
  font-family:var(--sp-font-ui);
  font-size:11.5px;
  color:rgba(238,244,248,.6)
}

.sp-app-stage .sp-score-scale-row.is-current{
  background:rgba(233,240,246,.1);
  color:var(--sp-text-inverse);
  font-weight:var(--sp-weight-medium)
}

.sp-app-stage .sp-score-scale-row b{
  font-weight:var(--sp-weight-medium);
  font-variant-numeric:tabular-nums
}

.sp-app-stage .sp-score-scale-tier{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.sp-app-stage .sp-score-scale-tier::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.sp-app-stage .sp-score-scale-row.t-elite .sp-score-scale-tier{ color:var(--sp-tier-elite) }
.sp-app-stage .sp-score-scale-row.t-superior .sp-score-scale-tier{ color:var(--sp-tier-superior) }
.sp-app-stage .sp-score-scale-row.t-reputable-plus .sp-score-scale-tier{ color:var(--sp-tier-reputable-plus) }
.sp-app-stage .sp-score-scale-row.t-reputable .sp-score-scale-tier{ color:var(--sp-tier-reputable) }
.sp-app-stage .sp-score-scale-row.t-unsatisfactory .sp-score-scale-tier{ color:var(--sp-tier-unsatisfactory) }

/* ---------- 4 · Employee switch + account menu ---------- */
.sp-app-stage .sp-employee-switch{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:1px solid var(--sp-line);
  border-radius:11px;
  background:var(--sp-surface);
  color:var(--sp-text-secondary);
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease
}

.sp-app-stage .sp-employee-switch:hover,
.sp-app-stage .sp-employee-switch:focus-visible{
  background:var(--sp-surface-strong);
  border-color:rgba(255,255,255,.32)
}

.sp-app-stage .sp-employee-switch .sp-icon{
  width:15px;
  height:15px;
  flex:0 0 auto;
  color:var(--sp-icon-secondary)
}

.sp-app-stage .sp-employee-switch span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.sp-app-stage .sp-employee-menu{
  position:absolute;
  left:3px;
  right:3px;
  bottom:calc(100% + 10px);
  z-index:9400;
  padding:8px;
  border-radius:var(--sp-overlay-radius-compact);
  border:1px solid var(--sp-overlay-line);
  background:var(--sp-overlay-surface-soft);
  color:var(--sp-text-inverse);
  box-shadow:var(--sp-overlay-shadow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px) scale(.985);
  transform-origin:bottom center;
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility .18s ease
}

.sp-app-stage .sp-employee-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1)
}

.sp-app-stage .sp-employee-menu-label{
  display:block;
  padding:6px 9px 4px;
  color:rgba(238,245,248,.62);
  font-family:var(--sp-font-ui);
  font-size:var(--sp-type-label);
  font-weight:var(--sp-weight-semibold);
  letter-spacing:var(--sp-tracking-label);
  text-transform:uppercase
}

.sp-app-stage .sp-employee-option{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:7px 9px;
  border:0;
  border-radius:11px;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease
}

.sp-app-stage .sp-employee-option:hover,
.sp-app-stage .sp-employee-option:focus-visible{
  background:rgba(255,255,255,.09)
}

.sp-app-stage .sp-employee-option.is-current{
  background:rgba(98,151,176,.18);
  box-shadow:inset 0 0 0 1px rgba(170,205,220,.14)
}

.sp-app-stage .sp-employee-option .sp-avatar{
  width:30px;
  height:30px;
  flex:0 0 auto
}

.sp-app-stage .sp-employee-option-copy{
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-employee-option-copy strong{
  color:var(--sp-text-inverse);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-employee-option-copy small{
  margin-top:1px;
  color:rgba(238,245,248,.60);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-employee-option .sp-employee-check{
  margin-left:auto;
  width:15px;
  height:15px;
  flex:0 0 auto;
  color:var(--sp-icon-active);
  opacity:0
}

.sp-app-stage .sp-employee-option.is-current .sp-employee-check{
  opacity:1
}

/* Collapsed sidebar: keep switch, active employee and settings reachable. */
@media (min-width:961px) {
  .sp-app-stage.is-sidebar-collapsed .sp-account-row{
    flex-direction:column;
    align-items:center;
    gap:5px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-employee-switch{
    width:40px;
    min-height:36px;
    justify-content:center;
    padding:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-employee-switch span{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%)
  }

  .sp-app-stage.is-sidebar-collapsed .sp-employee-menu{
    left:auto;
    right:-6px;
    width:230px
  }
}

/* =========================================================
   SHIFTPILOT · WORDPRESS / ELEMENTOR HOST COMPATIBILITY LAYER
   Placement:
   External stylesheet loaded after Theme and Elementor

   All selectors are anchored to .sp-app-stage for host isolation.
   ========================================================= */

/* ---------- A. Token bridge across Elementor widget boundaries ---------- */
.sp-app-stage,
.sp-app-stage .sp-sidebar-inner,
.sp-app-stage .sp-score-shell,
.sp-app-stage .sp-main-app,
.sp-app-stage .sp-bulletin-shell{
  --sp-bg-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Background_edited.jpg");
  --sp-bg-blur-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/07/Background_edited_blur.jpg");
  --sp-bg-position-x: 50%;
  --sp-bg-position-y: 50%;
  --sp-font-display: "sp_Aptos",
    "Aptos",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  --sp-font-ui: "sp_Inter",
    "Inter",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-type-display: 40px;
  --sp-type-page-title: 30px;
  --sp-type-section-title: 20px;
  --sp-type-kpi: 34px;
  --sp-type-body: 15px;
  --sp-type-ui: 14px;
  --sp-type-label: 11px;
  --sp-type-meta: 12px;
  --sp-leading-display: 1.05;
  --sp-leading-page-title: 1.10;
  --sp-leading-section-title: 1.20;
  --sp-leading-kpi: 1;
  --sp-leading-body: 1.50;
  --sp-leading-ui: 1.35;
  --sp-leading-label: 1.25;
  --sp-leading-meta: 1.35;
  --sp-tracking-display: -0.035em;
  --sp-tracking-page-title: -0.030em;
  --sp-tracking-section-title: -0.020em;
  --sp-tracking-kpi: -0.030em;
  --sp-tracking-body: 0;
  --sp-tracking-ui: -0.005em;
  --sp-tracking-label: 0.060em;
  --sp-tracking-meta: 0.010em;
  --sp-text-primary: #17242D;
  --sp-text-secondary: #3D4E58;
  --sp-text-tertiary: #5C6D77;
  --sp-text-muted: #74818A;
  --sp-text-disabled: #929BA1;
  --sp-text-inverse: #F6F9FB;
  --sp-icon-primary: #233A46;
  --sp-icon-secondary: #536670;
  --sp-icon-muted: #75838C;
  --sp-icon-active: #2F6783;
  --sp-icon-inverse: #F7FAFC;
  --sp-status-success: #2F705A;
  --sp-status-warning: #8B6128;
  --sp-status-critical: #98474D;
  --sp-status-info: #3A6F8C;
  --sp-status-neutral: #596A74;
  --sp-status-success-rgb: 47 112 90;
  --sp-status-warning-rgb: 139 97 40;
  --sp-status-critical-rgb: 152 71 77;
  --sp-status-info-rgb: 58 111 140;
  --sp-status-neutral-rgb: 89 106 116;
  --sp-op-arrival: #34728F;
  --sp-op-departure: #6E6877;
  --sp-op-inhouse: #496E64;
  --sp-op-vip: #6E5F7F;
  --sp-op-loyalty: #5F5884;
  --sp-op-housekeeping: #42745F;
  --sp-op-technical: #687078;
  --sp-op-arrival-rgb: 52 114 143;
  --sp-op-departure-rgb: 110 104 119;
  --sp-op-inhouse-rgb: 73 110 100;
  --sp-op-vip-rgb: 110 95 127;
  --sp-op-loyalty-rgb: 95 88 132;
  --sp-op-housekeeping-rgb: 66 116 95;
  --sp-op-technical-rgb: 104 112 120;
  --sp-interactive-primary: #2F6783;
  --sp-interactive-hover: #285A71;
  --sp-interactive-pressed: #224C60;
  --sp-focus-ring: #3A7593;
  --sp-line: rgba(255,255,255,.28);
  --sp-line-dark: rgba(34,51,63,.10);
  --sp-surface: rgba(255,255,255,.12);
  --sp-surface-strong: rgba(255,255,255,.20);
  --sp-surface-elevated: rgba(28,42,54,.09);
  --sp-surface-elevated-hover: rgba(28,42,54,.14);
  --sp-line-elevated: rgba(28,42,54,.12);
  --sp-score-surface: linear-gradient(180deg,#20282F 0%,#161D24 100%);
  --sp-score-surface-strong: linear-gradient(180deg,#252E36 0%,#141A20 100%);
  --sp-tier-elite: #74B7D6;
  --sp-tier-superior: #6FBF9C;
  --sp-tier-reputable-plus: #CBA968;
  --sp-tier-reputable: #C79A72;
  --sp-tier-unsatisfactory: #DD8A90;
  --sp-ink: var(--sp-text-primary);
  --sp-ink-2: var(--sp-text-secondary);
  --sp-ink-3: var(--sp-text-tertiary);
  --sp-arrival: var(--sp-op-arrival);
  --sp-departure: var(--sp-op-departure);
  --sp-success: var(--sp-status-success);
  --sp-warning: var(--sp-status-warning);
  --sp-critical: var(--sp-status-critical);
  --sp-vip: var(--sp-op-vip);
  --sp-blue: var(--sp-status-info);
  --sp-radius-sidebar: 34px;
  --sp-radius-score: 26px;
  --sp-radius-main: 36px;
  --sp-radius-bulletin: 28px;
  --sp-edge-gap: clamp(16px,1.35vw,28px);
  --sp-gap: clamp(12px,.9vw,16px);
  --sp-pad-x: var(--sp-edge-gap);
  --sp-pad-y: var(--sp-edge-gap);
  --sp-sidebar-width-expanded: clamp(226px,14.6vw,270px);
  --sp-sidebar-width-collapsed: 78px;
  --sp-sidebar-width: var(--sp-sidebar-width-expanded);
  --sp-score-height: 92px;
  --sp-bulletin-height: 118px;
  --sp-logo-image: url("https://brokenhorizonai.com/wp-content/uploads/2026/06/Logo-Fertig_weiss.svg");
}

/* ---------- B. Root host normalization ---------- */
.sp-app-stage{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  height:100dvh;
  min-height:100svh;
  max-height:100dvh;
  margin:0;
  padding:var(--sp-edge-gap);
  overflow:hidden;
  box-sizing:border-box;
}

.sp-app-stage > .e-con-inner{
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  flex:1 1 auto;
  align-self:stretch;
}

/* Elementor HTML widgets add wrappers that do not exist in Claude's
   standalone preview. Stretch them so height:100% and vertical centering work. */
.sp-app-stage .sp-sidebar-tile .elementor-widget-html,
.sp-app-stage .sp-score-tile .elementor-widget-html,
.sp-app-stage .sp-main-tile .elementor-widget-html,
.sp-app-stage .sp-bulletin-tile .elementor-widget-html{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:0;
  align-self:stretch;
}

.sp-app-stage .sp-sidebar-tile .elementor-widget-html > .elementor-widget-container,
.sp-app-stage .sp-score-tile .elementor-widget-html > .elementor-widget-container,
.sp-app-stage .sp-main-tile .elementor-widget-html > .elementor-widget-container,
.sp-app-stage .sp-bulletin-tile .elementor-widget-html > .elementor-widget-container{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
}

.sp-app-stage .sp-sidebar-inner,
.sp-app-stage .sp-score-shell,
.sp-app-stage .sp-main-app,
.sp-app-stage .sp-bulletin-shell{
  width:100%;
  max-width:100%;
  height:100%;
  min-height:0;
}

/* ---------- C. Native control normalization inside ShiftPilot ---------- */
.sp-app-stage button.sp-icon-button,
.sp-app-stage button.sp-soft-button,
.sp-app-stage button.sp-primary-button,
.sp-app-stage button.sp-date-control,
.sp-app-stage button.sp-score-toggle,
.sp-app-stage button.sp-sidebar-nav-item,
.sp-app-stage button.sp-employee-switch,
.sp-app-stage button.sp-user-card,
.sp-app-stage button.sp-settings-button,
.sp-app-stage .sp-bulletin-controls button{
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none;
  text-shadow:none;
  text-transform:none;
  font:inherit;
}

/* ---------- D. Search toggle: exact optical centering ---------- */
.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle{
  position:relative;
  z-index:41;
  display:grid;
  place-items:center;
  align-items:center;
  justify-content:center;
  inline-size:36px;
  block-size:36px;
  min-inline-size:36px;
  min-block-size:36px;
  flex:0 0 36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:12px;
  line-height:0;
  vertical-align:middle;
  background:rgba(255,255,255,.10);
  color:var(--sp-icon-primary);
  box-shadow:none;
  overflow:hidden;
}

.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle::before,
.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle::after{
  content:none;
  display:none;
}

.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle > svg.sp-icon{
  position:static;
  display:block;
  inline-size:18px;
  block-size:18px;
  min-inline-size:18px;
  min-block-size:18px;
  margin:auto;
  padding:0;
  transform:none;
  translate:none;
  color:currentColor;
  stroke:currentColor;
}

.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle:hover,
.sp-app-stage .sp-main-app .sp-workspace-actions button.sp-search-toggle:focus-visible{
  background:rgba(255,255,255,.20);
  color:var(--sp-icon-active);
  transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 18px rgba(30,47,59,.05);
}

/* Compact search field. Strong selectors prevent inherited width:100%. */
.sp-app-stage .sp-main-app > .sp-global-search{
  left:auto;
  right:24px;
  top:22px;
  width:0;
  max-width:min(360px,calc(100% - 48px));
  height:40px;
  min-height:40px;
  padding:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
}

.sp-app-stage .sp-main-app.is-searching > .sp-global-search{
  width:clamp(220px,24vw,360px);
  padding:0 14px;
  opacity:1;
  visibility:visible;
}

/* ---------- E. Remove inherited Elementor accent/pink states ---------- */
.sp-app-stage{
  --e-global-color-accent:var(--sp-interactive-primary);
  --e-global-color-primary:var(--sp-text-primary);
  --e-global-color-secondary:var(--sp-text-secondary);
}

.sp-app-stage button.sp-icon-button:hover,
.sp-app-stage button.sp-icon-button:focus-visible{
  background:rgba(255,255,255,.20);
  color:var(--sp-icon-primary);
}

.sp-app-stage button.sp-soft-button:hover,
.sp-app-stage button.sp-soft-button:focus-visible{
  background:rgba(255,255,255,.22);
  color:var(--sp-text-primary);
}

.sp-app-stage button.sp-date-control:hover,
.sp-app-stage button.sp-date-control:focus-visible{
  background:var(--sp-surface-strong);
  border-color:rgba(255,255,255,.30);
  color:var(--sp-text-primary);
}

.sp-app-stage button.sp-sidebar-nav-item:hover,
.sp-app-stage button.sp-sidebar-nav-item:focus-visible{
  background:rgba(255,255,255,.13);
  color:var(--sp-text-primary);
}

.sp-app-stage button.sp-employee-switch:hover,
.sp-app-stage button.sp-employee-switch:focus-visible{
  background:var(--sp-surface-strong);
  border-color:rgba(255,255,255,.30);
  color:var(--sp-text-primary);
}

.sp-app-stage button.sp-settings-button:hover,
.sp-app-stage button.sp-settings-button:focus-visible{
  background:rgba(255,255,255,.12);
  color:var(--sp-icon-primary);
}

.sp-app-stage .sp-bulletin-controls button:hover,
.sp-app-stage .sp-bulletin-controls button:focus-visible{
  background:rgba(255,255,255,.18);
  color:var(--sp-icon-primary);
}

/* Sidebar collapse stays a quiet icon, never a colored hover tile. */
.sp-app-stage button.sp-sidebar-collapse{
  background:transparent;
  box-shadow:none;
}

.sp-app-stage button.sp-sidebar-collapse:hover,
.sp-app-stage button.sp-sidebar-collapse:focus-visible{
  background:transparent;
  color:var(--sp-icon-active);
  box-shadow:none;
  transform:translateY(-1px) scale(1.03);
}

/* ---------- F. Brand header and property line ---------- */
.sp-app-stage .sp-sidebar-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:10px 34px 12px;
  text-align:center;
}

.sp-app-stage .sp-brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  margin:0 auto;
  text-align:center;
}

.sp-app-stage .sp-brand-logo{
  display:block;
  width:148px;
  max-width:100%;
  height:32px;
  margin:0 auto;
  background:var(--sp-icon-primary);
}

.sp-app-stage .sp-property-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 6px 14px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}

.sp-app-stage .sp-property-chip::before,
.sp-app-stage .sp-property-chip::after{
  content:none;
}

.sp-app-stage .sp-property-chip .sp-live-dot{
  display:none;
}

/* ---------- G. Sidebar footer and full active employee name ---------- */
.sp-app-stage .sp-sidebar-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

.sp-app-stage .sp-sidebar-nav{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

.sp-app-stage .sp-sidebar-footer{
  flex:0 0 auto;
  margin-top:auto;
}

.sp-app-stage .sp-user-copy strong{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.2;
}

.sp-app-stage .sp-user-copy small{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
}

/* ---------- H. Anthracite score bar through Elementor wrappers ---------- */
.sp-app-stage .sp-score-tile{
  background:var(--sp-score-surface);
  color:var(--sp-text-inverse);
}

.sp-app-stage .sp-score-tile.sp-glass-tile::before,
.sp-app-stage .sp-score-tile.sp-morphglass::before{
  background-image:
    radial-gradient(ellipse 70% 130% at 8% -30%,rgba(196,214,226,.20) 0%,rgba(196,214,226,.06) 42%,rgba(196,214,226,0) 70%),
    linear-gradient(180deg,rgba(31,41,50,.80) 0%,rgba(22,30,38,.86) 46%,rgba(15,21,27,.90) 100%),
    var(--sp-bg-blur-image);
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,var(--sp-bg-position-x) var(--sp-bg-position-y);
  background-repeat:no-repeat;
  background-attachment:scroll,scroll,fixed;
}

.sp-app-stage .sp-score-shell{
  display:grid;
  align-items:stretch;
  width:100%;
  height:100%;
  min-height:0;
}

.sp-app-stage .sp-score-heading{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
}

.sp-app-stage .sp-score-grid{
  display:grid;
  align-items:center;
  width:100%;
  height:100%;
  min-height:0;
}

.sp-app-stage .sp-score-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  min-height:0;
}

.sp-app-stage button.sp-score-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  margin:0;
  color:var(--sp-text-inverse);
}

/* ---------- I. Dashboard inner surfaces ---------- */
.sp-app-stage .sp-ops-ribbon{
  background:var(--sp-surface-elevated);
  border:1px solid var(--sp-line-elevated);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 22px rgba(18,31,43,.07);
}

.sp-app-stage .sp-rail-section{
  background:var(--sp-surface-elevated);
  border:1px solid var(--sp-line-elevated);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(18,31,43,.06);
}

/* ---------- J. Bulletin optical vertical centering ---------- */
.sp-app-stage .sp-bulletin-shell{
  display:grid;
  align-items:center;
  width:100%;
  height:100%;
  min-height:0;
}

.sp-app-stage .sp-bulletin-label,
.sp-app-stage .sp-bulletin-track,
.sp-app-stage .sp-bulletin-slide,
.sp-app-stage .sp-bulletin-controls{
  align-self:center;
}

.sp-app-stage .sp-bulletin-slide{
  align-items:center;
}

/* ---------- K. Responsive Elementor host fixes ---------- */
@media (min-width:961px) {
  .sp-app-stage.is-sidebar-collapsed{
    --sp-sidebar-width:var(--sp-sidebar-width-collapsed);
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-collapse{
    position:static;
    margin:0 auto;
  }
}

@media (max-width:767px) {
  .sp-app-stage{
    height:auto;
    min-height:100svh;
    max-height:none;
    overflow:visible;
  }

  .sp-app-stage .sp-main-app > .sp-global-search{
    right:12px;
    top:12px;
    max-width:calc(100% - 24px);
  }

  .sp-app-stage .sp-main-app.is-searching > .sp-global-search{
    width:min(320px,calc(100% - 24px));
  }
}

/* =========================================================
   SHIFTPILOT · UX WORKFLOW REFINEMENT 2.0
   Unified overlays · attachments · archives · entry modal
   dedicated collapsed brand icon · precise icon rail
   ========================================================= */

/* ---------- Unified overlay primitives ---------- */
.sp-app-stage .sp-overlay-backdrop{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,44px);
  background:var(--sp-overlay-backdrop);
  -webkit-backdrop-filter:blur(9px) saturate(.92);
  backdrop-filter:blur(9px) saturate(.92);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease
}

.sp-app-stage .sp-overlay-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.sp-app-stage .sp-overlay-surface{
  width:min(100%,720px);
  max-height:min(88dvh,860px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--sp-overlay-line);
  background:var(--sp-overlay-surface);
  color:var(--sp-text-inverse);
  box-shadow:var(--sp-overlay-shadow);
  overflow:hidden;
  transform:translateY(12px) scale(.985);
  transition:transform .28s cubic-bezier(.22,1,.36,1)
}

.sp-app-stage .sp-overlay-backdrop.is-open .sp-overlay-surface{
  transform:translateY(0) scale(1)
}

.sp-app-stage .sp-overlay-compact{
  max-width:320px;
  border-radius:var(--sp-overlay-radius-compact)
}

.sp-app-stage .sp-overlay-medium{
  max-width:680px;
  border-radius:var(--sp-overlay-radius-medium)
}

.sp-app-stage .sp-overlay-large{
  max-width:920px;
  border-radius:var(--sp-overlay-radius-large)
}

.sp-app-stage .sp-overlay-header,
.sp-app-stage .sp-overlay-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex:0 0 auto
}

.sp-app-stage .sp-overlay-header{
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(230,241,246,.11)
}

.sp-app-stage .sp-overlay-header h3{
  margin:3px 0 0;
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-overlay-header .sp-overline{
  color:rgba(232,241,246,.60)
}

.sp-app-stage .sp-overlay-body{
  min-height:0;
  overflow:auto;
  padding:18px 22px
}

.sp-app-stage .sp-overlay-footer{
  justify-content:flex-end;
  padding:16px 22px 20px;
  border-top:1px solid rgba(230,241,246,.10)
}

/* ---------- Full entry workflow ---------- */
.sp-app-stage .sp-entry-dialog{
  width:min(920px,100%)
}

.sp-app-stage .sp-entry-form{
  min-height:0;
  overflow:auto;
  padding:18px 22px 0
}

.sp-app-stage .sp-entry-primary,
.sp-app-stage .sp-entry-context{
  display:grid;
  gap:14px
}

.sp-app-stage .sp-entry-context{
  margin-top:15px
}

.sp-app-stage .sp-field{
  display:flex;
  flex-direction:column;
  gap:6px
}

.sp-app-stage .sp-entry-form input,
.sp-app-stage .sp-entry-form select{
  width:100%;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(227,239,244,.14);
  border-radius:13px;
  background:rgba(255,255,255,.065);
  color:var(--sp-text-inverse);
  outline:0
}

.sp-app-stage .sp-entry-form input::placeholder{
  color:rgba(230,239,244,.42)
}

.sp-app-stage .sp-entry-form select option{
  color:#17242D
}

.sp-app-stage .sp-rich-editor{
  position:relative;
  border:1px solid rgba(227,239,244,.14);
  border-radius:15px;
  background:rgba(255,255,255,.055);
  overflow:visible
}

.sp-app-stage .sp-rich-toolbar{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:40px;
  padding:5px 7px;
  border-bottom:1px solid rgba(227,239,244,.10)
}

.sp-app-stage .sp-rich-toolbar button,
.sp-app-stage .sp-emoji-menu button{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(246,249,251,.80);
  cursor:pointer
}

.sp-app-stage .sp-rich-toolbar button:hover,
.sp-app-stage .sp-rich-toolbar button:focus-visible,
.sp-app-stage .sp-emoji-menu button:hover,
.sp-app-stage .sp-emoji-menu button:focus-visible{
  background:rgba(255,255,255,.10);
  color:#fff
}

.sp-app-stage .sp-rich-toolbar .sp-icon{
  width:15px;
  height:15px
}

.sp-app-stage .sp-rich-content{
  min-height:142px;
  max-height:280px;
  overflow:auto;
  padding:13px 14px;
  color:rgba(246,249,251,.88);
  outline:0
}

.sp-app-stage .sp-rich-content:empty::before{
  content:attr(data-placeholder);
  color:rgba(230,239,244,.40);
  pointer-events:none
}

.sp-app-stage .sp-emoji-menu{
  position:absolute;
  top:42px;
  left:8px;
  z-index:4;
  display:flex;
  gap:3px;
  padding:6px;
  border:1px solid var(--sp-overlay-line);
  border-radius:12px;
  background:var(--sp-overlay-surface-soft);
  box-shadow:var(--sp-overlay-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .18s ease,visibility .16s ease
}

.sp-app-stage .sp-emoji-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}

.sp-app-stage .sp-attachment-section{
  margin-top:18px;
  padding:15px;
  border:1px solid rgba(227,239,244,.12);
  border-radius:18px;
  background:rgba(255,255,255,.035)
}

.sp-app-stage .sp-attachment-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.sp-app-stage .sp-attachment-head p{
  margin:3px 0 0;
  color:rgba(233,241,245,.56)
}

.sp-app-stage .sp-file-picker{
  position:relative;
  overflow:hidden;
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-file-picker input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer
}

.sp-app-stage .sp-entry-dropzone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:88px;
  margin-top:12px;
  padding:14px;
  border:1px dashed rgba(190,216,227,.28);
  border-radius:15px;
  color:rgba(240,247,250,.72);
  background:rgba(255,255,255,.028);
  transition:background .16s ease,border-color .16s ease,transform .18s ease
}

.sp-app-stage .sp-entry-dropzone.is-dragging{
  background:rgba(83,137,160,.15);
  border-color:rgba(143,194,214,.54);
  transform:translateY(-1px)
}

.sp-app-stage .sp-entry-dropzone>.sp-icon{
  width:24px;
  height:24px;
  color:#8EC0D4
}

.sp-app-stage .sp-entry-dropzone>div{
  display:flex;
  flex-direction:column
}

.sp-app-stage .sp-entry-dropzone .sp-type-meta{
  margin-top:2px;
  color:rgba(233,241,245,.54)
}

.sp-app-stage .sp-attachment-list{
  display:grid;
  gap:7px;
  margin-top:10px
}

.sp-app-stage .sp-attachment-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 8px;
  border:1px solid rgba(227,239,244,.10);
  border-radius:13px;
  background:rgba(255,255,255,.045)
}

.sp-app-stage .sp-attachment-file-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(82,137,160,.16);
  color:#8FC1D5
}

.sp-app-stage .sp-attachment-file-icon .sp-icon{
  width:16px;
  height:16px
}

.sp-app-stage .sp-attachment-row>div{
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-attachment-row strong{
  color:var(--sp-text-inverse);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-attachment-row .sp-type-meta{
  margin-top:2px;
  color:rgba(233,241,245,.54)
}

/* ---------- Full-app file drag affordance ---------- */
.sp-app-stage .sp-file-drop-overlay{
  position:fixed;
  inset:0;
  z-index:12500;
  display:grid;
  place-items:center;
  padding:30px;
  background:rgba(15,25,32,.24);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease
}

.sp-app-stage .sp-file-drop-overlay.is-visible{
  opacity:1;
  visibility:visible
}

.sp-app-stage .sp-file-drop-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:24px 28px;
  border:1px solid var(--sp-overlay-line-strong);
  border-radius:22px;
  background:var(--sp-overlay-surface);
  color:var(--sp-text-inverse);
  box-shadow:var(--sp-overlay-shadow)
}

.sp-app-stage .sp-file-drop-card>.sp-icon{
  width:30px;
  height:30px;
  color:#91C4D8
}

/* ---------- Handover readability, status and attachments ---------- */
.sp-app-stage .sp-handover-list{
  display:grid;
  gap:5px
}

.sp-app-stage .sp-handover-list .sp-dense-row{
  min-height:68px;
  margin:0;
  padding:10px 10px 10px 8px;
  border:1px solid rgba(37,57,69,.065);
  border-radius:14px;
  background:rgba(255,255,255,.040);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .16s ease,border-color .16s ease,transform .18s ease,opacity .18s ease
}

.sp-app-stage .sp-handover-list .sp-dense-row:nth-child(even){
  background:rgba(31,49,61,.035)
}

.sp-app-stage .sp-handover-list .sp-dense-row:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(55,84,100,.10);
  transform:translateY(-1px)
}

.sp-app-stage .sp-handover-list .sp-dense-row.is-done{
  opacity:.50
}

.sp-app-stage .sp-handover-list .sp-dense-row.is-done .sp-dense-title strong{
  text-decoration:line-through
}

.sp-app-stage .sp-handover-done[aria-pressed="true"]{
  background:rgb(var(--sp-status-success-rgb) / .15);
  color:var(--sp-status-success)
}

.sp-app-stage .sp-item-archive[hidden]{
  display:none
}

.sp-app-stage .sp-attachment-indicator{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  margin-left:5px;
  padding:0 8px;
  border:1px solid rgba(58,111,140,.15);
  border-radius:999px;
  background:rgba(58,111,140,.08);
  color:var(--sp-status-info);
  cursor:pointer
}

.sp-app-stage .sp-attachment-indicator .sp-icon{
  width:13px;
  height:13px
}

.sp-app-stage .sp-dense-rich{
  margin-top:3px;
  color:var(--sp-text-secondary)
}

/* ---------- Archive system ---------- */
.sp-app-stage .sp-archive-button{
  gap:6px
}

.sp-app-stage .sp-archive-list{
  display:grid;
  gap:8px
}

.sp-app-stage .sp-archive-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:11px 12px;
  border:1px solid rgba(227,239,244,.11);
  border-radius:14px;
  background:rgba(255,255,255,.045)
}

.sp-app-stage .sp-archive-row>div{
  display:flex;
  flex-direction:column;
  min-width:0
}

.sp-app-stage .sp-archive-row strong{
  color:var(--sp-text-inverse);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.sp-app-stage .sp-archive-row .sp-type-meta{
  margin-top:2px;
  color:rgba(233,241,245,.54)
}

.sp-app-stage .sp-archive-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:24px;
  text-align:center;
  color:rgba(238,245,248,.64)
}

.sp-app-stage .sp-archive-empty strong{
  color:var(--sp-text-inverse)
}

.sp-app-stage .sp-archive-empty span{
  margin-top:5px
}

.sp-app-stage .sp-board-card{
  position:relative
}

.sp-app-stage .sp-board-archive{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  padding:5px 8px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:var(--sp-text-tertiary);
  cursor:pointer
}

.sp-app-stage .sp-board-archive:hover{
  background:rgba(255,255,255,.14);
  color:var(--sp-text-primary)
}

.sp-app-stage .sp-board-archive .sp-icon{
  width:13px;
  height:13px
}

/* ---------- Score bar contrast ---------- */
.sp-app-stage .sp-score-tile .sp-score-label{
  color:rgba(229,239,244,.78)
}

.sp-app-stage .sp-score-tile .sp-score-item strong{
  color:#FAFCFD;
  -webkit-text-fill-color:#FAFCFD
}

.sp-app-stage .sp-score-tile .sp-score-item em{
  font-weight:var(--sp-weight-semibold)
}

.sp-app-stage .sp-score-tile .sp-score-toggle{
  color:rgba(244,249,251,.84)
}

/* ---------- Collapsed rail precision + dedicated icon asset ---------- */
@media (min-width:961px){
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-tile,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-inner,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav,
  .sp-app-stage.is-sidebar-collapsed .sp-nav-section{
    overflow:visible
  }

  .sp-app-stage.is-sidebar-collapsed .sp-brand-lockup{
    width:34px;
    height:34px;
    flex:0 0 34px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-brand-logo{
    width:34px;
    height:34px;
    max-width:34px;
    -webkit-mask-image:var(--sp-logo-icon-image);
    mask-image:var(--sp-logo-icon-image);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-position:center;
    mask-position:center
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-brand{
    gap:8px
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-collapse,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item,
  .sp-app-stage.is-sidebar-collapsed .sp-employee-switch,
  .sp-app-stage.is-sidebar-collapsed .sp-user-card,
  .sp-app-stage.is-sidebar-collapsed .sp-settings-button{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    display:grid;
    place-items:center;
    justify-content:center;
    align-items:center
  }

  .sp-app-stage.is-sidebar-collapsed .sp-nav-icon,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item .sp-nav-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    margin:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-nav-icon .sp-icon,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item .sp-icon,
  .sp-app-stage.is-sidebar-collapsed .sp-employee-switch .sp-icon,
  .sp-app-stage.is-sidebar-collapsed .sp-settings-button .sp-icon{
    width:18px;
    height:18px;
    margin:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-user-card .sp-avatar{
    margin:0
  }

  .sp-app-stage.is-sidebar-collapsed .sp-account-row,
  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-footer{
    width:100%;
    align-items:center
  }

  .sp-app-stage.is-sidebar-collapsed .sp-sidebar-nav-item::after{
    z-index:15000;
    min-height:36px;
    padding:0 12px;
    border:1px solid var(--sp-overlay-line);
    border-radius:12px;
    background:var(--sp-overlay-surface-soft);
    color:var(--sp-text-inverse);
    box-shadow:var(--sp-overlay-shadow)
  }
}

/* tablet icon rail also gets dedicated icon asset */
@media (min-width:768px) and (max-width:960px){
  .sp-app-stage .sp-brand-logo{
    width:34px;
    height:34px;
    max-width:34px;
    -webkit-mask-image:var(--sp-logo-icon-image);
    mask-image:var(--sp-logo-icon-image);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-position:center;
    mask-position:center
  }
}

/* ---------- Responsive modal ---------- */
@media (max-width:767px){
  .sp-app-stage .sp-overlay-backdrop{
    padding:10px
  }

  .sp-app-stage .sp-overlay-surface{
    width:100%;
    max-height:calc(100dvh - 20px);
    border-radius:22px
  }

  .sp-app-stage .sp-entry-form{
    padding:14px 14px 0
  }

  .sp-app-stage .sp-overlay-header{
    padding:16px 16px 13px
  }

  .sp-app-stage .sp-overlay-footer{
    padding:13px 16px 16px
  }

  .sp-app-stage .sp-attachment-head{
    align-items:flex-start;
    flex-direction:column
  }

  .sp-app-stage .sp-file-picker{
    width:100%;
    justify-content:center
  }

  .sp-app-stage .sp-rich-toolbar{
    overflow-x:auto
  }

  .sp-app-stage .sp-archive-row{
    grid-template-columns:1fr
  }
}