/* HYDRA Calm Enterprise — soften signature layer; light workspace, subtle depth */

/* —— 1. Light workspace canvas (rollback dark main area) —— */
body.use-new-ui {
  --app-bg: #f3f6fb;
  --app-bg-soft: #eef3f8;
  --workspace-bg: linear-gradient(180deg, #f3f6fb 0%, #eef3f8 100%);
  --surface-base: rgba(255, 255, 255, 0.88);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --surface-table: rgba(255, 255, 255, 0.86);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --topbar-blur: blur(8px);
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.08);
  --table-row-hover: rgba(15, 23, 42, 0.025);
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 22px rgba(15, 23, 42, 0.04);
  --elev-2: 0 2px 6px rgba(15, 23, 42, 0.03), 0 14px 36px rgba(15, 23, 42, 0.05);
  --elev-focus: 0 4px 14px rgba(15, 23, 42, 0.05), 0 22px 52px rgba(15, 23, 42, 0.07);
  --panel-glow-soft: none;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: var(--elev-1);
  --shadow-lg: var(--elev-2);
}

body.use-new-ui,
body.dark.use-new-ui {
  background: var(--workspace-bg) !important;
  color: #0f172a;
}

body.use-new-ui .main-content {
  background: var(--app-bg-soft);
}

body.use-new-ui #contentScroll.content-scroll,
body.dark.use-new-ui #contentScroll.content-scroll,
body.dark.use-new-ui.route-dashboard #contentScroll.content-scroll,
body.use-new-ui.route-dashboard #contentScroll.content-scroll {
  background: var(--workspace-bg) !important;
  background-image: linear-gradient(180deg, #f3f6fb 0%, #eef3f8 100%) !important;
}

body.use-new-ui .app-content-shell,
body.use-new-ui .page-shell.app-content-shell {
  background: transparent;
}

/* Legacy body.dark + light workspace: readable text on cards */
body.dark.use-new-ui .main-content {
  color: #0f172a;
}

body.dark.use-new-ui.route-dashboard .dashboard-premium-wrap,
body.dark.use-new-ui.route-dashboard .panel,
body.dark.use-new-ui.route-dashboard .card:not(.sidebar *) {
  color: #334155;
}

body.dark.use-new-ui.route-dashboard .page-title-text,
body.dark.use-new-ui.route-dashboard .panel h3,
body.dark.use-new-ui.route-dashboard .daily-review-compact-title,
body.dark.use-new-ui.route-dashboard .owner-insight-value {
  color: #0f172a !important;
}

body.dark.use-new-ui.route-dashboard .muted,
body.dark.use-new-ui.route-dashboard .owner-insight-meta,
body.dark.use-new-ui.route-dashboard .topbar-route-subtitle {
  color: #64748b !important;
}

/* —— 2. Calm elevation (border > shadow) —— */
body.use-new-ui .card,
body.use-new-ui .panel.section-block,
body.use-new-ui .table-wrap {
  box-shadow: var(--elev-1) !important;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

body.use-new-ui .modal-card {
  box-shadow: var(--elev-focus) !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

body.use-new-ui .sidebar-command-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* —— 3. KPI cards — calm, not pop —— */
body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: var(--elev-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card--secondary {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

body.use-new-ui .dashboard-kpi-grid .premium-kpi-card.kpi-tone-revenue,
body.use-new-ui .dashboard-kpi-grid .premium-kpi-card.kpi-tone-profit,
body.use-new-ui .dashboard-kpi-grid .premium-kpi-card.kpi-tone-cod {
  box-shadow: var(--elev-1) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

body.use-new-ui .premium-kpi-card.kpi-tone-revenue .card-value {
  color: #2563eb !important;
}

body.use-new-ui .premium-kpi-card.kpi-tone-profit .card-value {
  color: #059669 !important;
}

body.use-new-ui .premium-kpi-card.kpi-tone-cod .card-value {
  color: #c2410c !important;
}

body.use-new-ui .premium-kpi-card.kpi-tone-inventory .card-value {
  color: #7c3aed !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card.kpi-tone-revenue .premium-kpi-icon {
  background: rgba(59, 130, 246, 0.1) !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card.kpi-tone-profit .premium-kpi-icon {
  background: rgba(16, 185, 129, 0.1) !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card.kpi-tone-cod .premium-kpi-icon {
  background: rgba(245, 158, 11, 0.12) !important;
}

body.use-new-ui .premium-kpi-card.kpi-ambient-stock-warn {
  animation: none !important;
  box-shadow: var(--elev-1) !important;
  border-left: 2px solid rgba(245, 158, 11, 0.35) !important;
}

body.use-new-ui .premium-kpi-card.kpi-ambient-trend-up .kpi-sparkline path {
  filter: none !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-card:not(.premium-kpi-card--secondary) .card-value {
  font-weight: 700 !important;
}

body.use-new-ui.route-dashboard .app-layout #hydraDashKpi .premium-kpi-head .card-title {
  font-weight: 600 !important;
  letter-spacing: 0.05em;
}

/* —— 4. Login — luxury auth, not game launcher —— */
body.hydra-control-login-active {
  background: #eef2f7 !important;
}

#hydraLandingRoot .hydra-control-login {
  background: linear-gradient(128deg, #1e293b 0%, #273549 32%, #eef2f7 32%, #f3f6fb 100%);
  padding: clamp(28px, 5vw, 56px);
}

#hydraLandingRoot .hydra-control-login__glow {
  width: min(520px, 70vw);
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.07) 0%, transparent 72%);
  opacity: 0.85;
}

#hydraLandingRoot .hydra-control-login__grid {
  opacity: 0.35;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 72%);
}

#hydraLandingRoot .hydra-control-login__grain {
  opacity: 0.02;
}

#hydraLandingRoot .hydra-control-login__shell {
  max-width: 920px;
  gap: clamp(32px, 5vw, 56px);
}

#hydraLandingRoot .hydra-control-login__logo {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}

#hydraLandingRoot .hydra-control-login__headline {
  font-weight: 650;
  letter-spacing: 0.03em;
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
}

#hydraLandingRoot .hydra-control-login__subtitle {
  color: #94a3b8;
  font-weight: 450;
  letter-spacing: 0.02em;
}

#hydraLandingRoot .hydra-control-login__chip {
  font-weight: 550;
  letter-spacing: 0.06em;
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.28);
}

#hydraLandingRoot .hydra-control-login__card {
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: var(--elev-2, 0 8px 32px rgba(15, 23, 42, 0.08));
}

#hydraLandingRoot .hydra-control-login__card .hydra-pub-btn--primary {
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18) !important;
}

#hydraLandingRoot .hydra-control-login__card .hydra-pub-btn--primary:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22) !important;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  #hydraLandingRoot .hydra-control-login {
    background: linear-gradient(180deg, #1e293b 0%, #334155 22%, #f3f6fb 22%, #eef3f8 100%);
  }
}

/* —— 5. Sidebar — calm (keep navy rail) —— */
body.use-new-ui .sidebar {
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.use-new-ui .sidebar .sidebar-online-dot {
  color: #86efac;
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(74, 222, 128, 0.22);
  box-shadow: none !important;
}

body.use-new-ui .sidebar-command-clock .sidebar-clock-time {
  font-weight: 700;
  color: #e2e8f0;
  text-shadow: none !important;
  letter-spacing: 0.02em;
}

body.use-new-ui.route-dashboard .sidebar-command-card {
  background: rgba(30, 41, 59, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.use-new-ui.route-dashboard .sidebar-command-clock .sidebar-clock-time {
  font-weight: 700;
  text-shadow: none !important;
}

body.use-new-ui.route-dashboard .sidebar-online-dot {
  box-shadow: none !important;
}

/* —— 6. Topbar — blend into workspace —— */
body.use-new-ui header.topbar,
body.use-new-ui .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: var(--topbar-blur);
  -webkit-backdrop-filter: var(--topbar-blur);
}

body.use-new-ui .topbar-spotlight-btn {
  box-shadow: none !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #fff !important;
  font-weight: 650;
}

body.use-new-ui .topbar-spotlight-btn:hover {
  border-color: rgba(59, 130, 246, 0.25) !important;
  background: #f8fafc !important;
}

body.use-new-ui .topbar-title-group .page-title-text {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.use-new-ui .topbar-route-subtitle {
  font-weight: 450;
  color: #64748b;
  opacity: 0.95;
}

/* —— 7. Dashboard UI soften —— */
body.use-new-ui .hydra-daily-insight-summary {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: none;
}

body.use-new-ui .hydra-smart-insight {
  font-weight: 500;
}

body.use-new-ui.route-dashboard .dashboard-period-btn.is-active,
body.use-new-ui.route-dashboard .dashboard-period-btn.active {
  background: #3b82f6 !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18) !important;
}

body.use-new-ui.route-dashboard .chart-toggle-group .btn.primary {
  background: #334155 !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

body.use-new-ui.route-dashboard #hydraDashQuickStats .quick-chip {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: none;
}

body.use-new-ui.route-dashboard #hydraDashQuickStats .quick-chip strong {
  font-weight: 700;
}

body.use-new-ui .owner-insight-card,
body.use-new-ui .panel.daily-review-shell {
  box-shadow: var(--elev-1) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* —— 8. Tables —— */
@media (min-width: 769px) {
  body.use-new-ui .table-wrap table thead th {
    background: #f8fafc;
    box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9);
  }

  body.use-new-ui .compact-table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.35);
  }

  body.use-new-ui .compact-table tbody tr:hover {
    background: rgba(241, 245, 249, 0.75) !important;
  }

  body.use-new-ui .orders-page .table-wrap,
  body.use-new-ui .inventory-page .table-wrap,
  body.use-new-ui .customers-page .table-wrap,
  body.use-new-ui .cod-page .table-wrap {
    box-shadow: var(--elev-1) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
  }
}

/* —— 9. Focus mode & ambient — lighter —— */
body.use-new-ui.hydra-focus-mode #app .main-content::after {
  background: rgba(15, 23, 42, 0.02) !important;
}

body.use-new-ui.hydra-focus-mode .command-palette-overlay {
  background: rgba(15, 23, 42, 0.12) !important;
}

body.use-new-ui .command-palette-modal,
body.use-new-ui .spotlight-modal {
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--elev-focus) !important;
}

/* —— 10. Micro empty & chips —— */
body.use-new-ui .hydra-micro-empty {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(15, 23, 42, 0.06);
}

body.use-new-ui .hydra-micro-empty__title {
  font-weight: 600;
}

body.use-new-ui .app-layout .card:hover,
body.use-new-ui .app-layout .panel:hover {
  box-shadow: var(--elev-1) !important;
}

/* Storefront cart empty on light public pages */
#hydraLandingRoot .hydra-micro-empty {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.06);
}