/* ============================================================
   DASHBOARD HOME V2 — simple flat surface
   Backup: _backup-staff-dashboard-home-v2-20260808-181345
   Scope: #view-home / data-rail-view="home" only. Content unchanged.
   One light background, few boxes — pills/circles only when needed.
   ============================================================ */

body.staff-concierge-app[data-rail-view="home"] {
  --home-v2-bg: #F4F6F8;
  --home-v2-ink: #0F172A;
  --home-v2-muted: #64748B;
  --home-v2-line: rgba(15, 23, 42, 0.08);
  --home-v2-accent: #00B8D4;
}

body.staff-concierge-app[data-rail-view="home"] .concierge-main-wrap,
body.staff-concierge-app[data-rail-view="home"] .dashboard,
body.staff-concierge-app[data-rail-view="home"] #view-home.hijiffy-dashboard:not([hidden]) {
  background: var(--home-v2-bg) !important;
}

body.staff-concierge-app[data-rail-view="home"] .concierge-topbar.topbar--compact,
body.staff-concierge-app[data-rail-view="home"] .concierge-topbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.staff-concierge-app #view-home.hijiffy-dashboard:not([hidden]) {
  padding: 8px 20px 20px !important;
  background: var(--home-v2-bg, #F4F6F8) !important;
}

body.staff-concierge-app #view-home .home-dashboard-grid--command {
  gap: 28px !important;
}

body.staff-concierge-app #view-home .hijiffy-main,
body.staff-concierge-app #view-home .home-ops-column,
body.staff-concierge-app #view-home .command-side {
  gap: 22px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* —— KPI strip: no cards, just metrics —— */
body.staff-concierge-app #view-home .command-kpi-strip {
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card,
body.staff-concierge-app #view-home #home-metrics-row-1 .home-kpi-card:nth-child(1),
body.staff-concierge-app #view-home #home-metrics-row-1 .home-kpi-card:nth-child(2),
body.staff-concierge-app #view-home .home-kpi-card,
body.staff-concierge-app #view-home .kpi-active-now,
body.staff-concierge-app #view-home .kpi-unread {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 18px 8px 0 !important;
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card + .home-kpi-card {
  border-left: 1px solid var(--home-v2-line) !important;
  padding-left: 18px !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card:hover,
body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card:hover .insights-hero-value {
  color: var(--home-v2-accent) !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card::before,
body.staff-concierge-app #view-home .kpi-active-now::before,
body.staff-concierge-app #view-home .kpi-unread::before {
  content: none !important;
  display: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-hero-kpi-icon {
  display: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .insights-hero-label {
  color: var(--home-v2-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding-right: 0 !important;
  margin-bottom: 6px !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .insights-hero-value {
  color: var(--home-v2-ink) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

body.staff-concierge-app #view-home .home-kpi-live-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 184, 212, 0.12) !important;
  color: #0E7490 !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
}

body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-trend-pill,
body.staff-concierge-app #view-home .command-kpi-strip .insights-trend--up,
body.staff-concierge-app #view-home .command-kpi-strip .insights-trend--down {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* —— Volume strip: text row, not a box —— */
body.staff-concierge-app #view-home .home-kpi-volume-block,
body.staff-concierge-app #view-home .home-kpi-volume-strip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-block {
  padding: 4px 0 0 !important;
  border-top: 1px solid var(--home-v2-line) !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-label {
  color: var(--home-v2-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 10px 0 8px !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-item-label {
  color: var(--home-v2-muted) !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-item-value {
  color: var(--home-v2-ink) !important;
  font-weight: 700 !important;
}

body.staff-concierge-app #view-home .home-kpi-volume-sep {
  opacity: 0.35 !important;
}

/* —— Graph areas: bare headers + chart, no card chrome —— */
body.staff-concierge-app #view-home .home-graphs-row {
  gap: 20px !important;
  background: transparent !important;
}

body.staff-concierge-app #view-home .home-graph-card,
body.staff-concierge-app #view-home .home-area-chart-card,
body.staff-concierge-app #view-home .command-table-panel,
body.staff-concierge-app #view-home .hijiffy-panel,
body.staff-concierge-app #view-home .home-queue-panel,
body.staff-concierge-app #view-home .hijiffy-orders-card,
body.staff-concierge-app #view-home .hijiffy-open-card,
body.staff-concierge-app #view-home .home-side-panel,
body.staff-concierge-app #view-home #home-pending-approvals {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.staff-concierge-app #view-home .home-graph-card::before,
body.staff-concierge-app #view-home .home-area-chart-card::before,
body.staff-concierge-app #view-home .command-table-panel::before,
body.staff-concierge-app #view-home .home-queue-panel::before,
body.staff-concierge-app #view-home .hijiffy-orders-card::before,
body.staff-concierge-app #view-home .hijiffy-open-card::before,
body.staff-concierge-app #view-home #home-pending-approvals::before {
  content: none !important;
  display: none !important;
}

body.staff-concierge-app #view-home .home-graph-header,
body.staff-concierge-app #view-home .home-area-chart-header,
body.staff-concierge-app #view-home .home-side-panel-header,
body.staff-concierge-app #view-home .home-queue-head,
body.staff-concierge-app #view-home .command-table-head {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--home-v2-line) !important;
  box-shadow: none !important;
  padding: 0 0 10px !important;
  margin-bottom: 12px !important;
}

body.staff-concierge-app #view-home .home-graph-header h4,
body.staff-concierge-app #view-home .home-side-panel-header h4,
body.staff-concierge-app #view-home .command-table-head h4 {
  color: var(--home-v2-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body.staff-concierge-app #view-home .home-area-range select,
body.staff-concierge-app #view-home .home-orders-range select,
body.staff-concierge-app #view-home .home-bookings-range select {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--home-v2-muted) !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

body.staff-concierge-app #view-home .home-graph-body,
body.staff-concierge-app #view-home .home-area-chart-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* —— Side lists —— */
body.staff-concierge-app #view-home .home-side-badge,
body.staff-concierge-app #view-home .home-queue-tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--home-v2-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

body.staff-concierge-app #view-home .home-queue-tabs,
body.staff-concierge-app #view-home .command-tabs {
  gap: 18px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body.staff-concierge-app #view-home .home-queue-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
  color: var(--home-v2-muted) !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 600 !important;
}

body.staff-concierge-app #view-home .home-queue-tab.is-active {
  background: transparent !important;
  color: var(--home-v2-ink) !important;
  border-bottom-color: var(--home-v2-accent) !important;
  box-shadow: none !important;
}

body.staff-concierge-app #view-home .hijiffy-conversation,
body.staff-concierge-app #view-home .home-pending-row,
body.staff-concierge-app #view-home .hijiffy-conversation-list .hijiffy-conversation {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--home-v2-line) !important;
  padding: 12px 0 !important;
}

body.staff-concierge-app #view-home .hijiffy-conversation:hover,
body.staff-concierge-app #view-home .home-pending-row:hover {
  background: transparent !important;
  box-shadow: none !important;
}

body.staff-concierge-app #view-home .hijiffy-avatar {
  /* Keep circles — necessary for room identity */
  box-shadow: none !important;
  border: none !important;
}

body.staff-concierge-app #view-home .hijiffy-empty,
body.staff-concierge-app #view-home .hijiffy-view-more {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.staff-concierge-app #view-home .hijiffy-view-more {
  color: var(--home-v2-accent) !important;
  font-weight: 600 !important;
  padding: 10px 0 0 !important;
  text-align: left !important;
}

body.staff-concierge-app #view-home .hijiffy-empty {
  color: var(--home-v2-muted) !important;
  padding: 16px 0 !important;
}

/* Soften search in topbar on home — keep one pill for search only */
body.staff-concierge-app[data-rail-view="home"] .concierge-search--compact,
body.staff-concierge-app[data-rail-view="home"] .concierge-search {
  background: rgba(15, 23, 42, 0.04) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

@media (max-width: 1100px) {
  body.staff-concierge-app #view-home .command-kpi-strip .home-kpi-card + .home-kpi-card {
    border-left: none !important;
    padding-left: 0 !important;
  }
}