/* Pahgo brand polish overrides.
   This file is intentionally scoped with high specificity so it can stabilize
   the live brand presentation while component-level styles continue to mature. */
:root {
  --pahgo-violet-500: #7C3AED;
  --pahgo-violet-400: #9D50FF;
  --pahgo-ink: #0D1024;
}

/* Public website logo composition: remove tiny tagline/shadow artifacts. */
html body #root nav button[aria-label="Go to Pahgo homepage"],
html body #root footer button[aria-label="Go to Pahgo homepage"] {
  gap: 10px !important;
  overflow: visible !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body #root nav button[aria-label="Go to Pahgo homepage"] img[src*="pahgo-horizontal-full-color"],
html body #root footer button[aria-label="Go to Pahgo homepage"] img[src*="pahgo-horizontal-white"] {
  display: none !important;
}

html body #root nav button[aria-label="Go to Pahgo homepage"]::before,
html body #root footer button[aria-label="Go to Pahgo homepage"]::before {
  content: "";
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: block;
  background: url("/pahgo-icon-only.svg?v=20260805a") center / contain no-repeat;
  box-shadow: none !important;
  filter: none !important;
}

html body #root nav button[aria-label="Go to Pahgo homepage"]::after,
html body #root footer button[aria-label="Go to Pahgo homepage"]::after {
  content: "";
  flex: 0 0 auto;
  width: 206px;
  height: 50px;
  display: block;
  background: url("/pahgo-wordmark-only.svg?v=20260805a") left center / contain no-repeat;
  box-shadow: none !important;
  filter: none !important;
}

html body #root footer button[aria-label="Go to Pahgo homepage"]::before {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1) !important;
}

html body #root footer button[aria-label="Go to Pahgo homepage"]::after {
  width: 112px;
  height: 30px;
  filter: brightness(0) invert(1) !important;
}

html body #root footer button[aria-label="Go to Pahgo homepage"] *,
html body #root footer img[src*="pahgo-"] {
  box-shadow: none !important;
  text-shadow: none !important;
}

@media (max-width: 767px) {
  html body #root nav button[aria-label="Go to Pahgo homepage"]::before {
    width: 46px;
    height: 46px;
  }

  html body #root nav button[aria-label="Go to Pahgo homepage"]::after {
    width: 160px;
    height: 40px;
  }
}

/* Portal logo: natural side-panel lockup, no sticker or tagline. */
html body #root .pahgo-shared-shell .pahgo-shell-logo,
html body #root .pahgo-main .pahgo-shell-logo,
html body #root .pahgo-main .pahgo-sidebar-rail > div:first-child {
  min-height: 162px !important;
  padding: 22px 18px 14px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body #root .pahgo-shared-shell .pahgo-portal-brand-lockup,
html body #root .pahgo-main .pahgo-portal-brand-lockup {
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body #root .pahgo-portal-brand-icon {
  width: 86px !important;
  height: 98px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html body #root .pahgo-portal-brand-wordmark {
  width: 150px !important;
  height: 44px !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html body #root .pahgo-shell-logo small,
html body #root .pahgo-shell-logo .tagline,
html body #root .pahgo-shell-logo [class*="tagline"],
html body #root .pahgo-portal-brand-lockup small,
html body #root .pahgo-portal-brand-lockup [class*="tagline"] {
  display: none !important;
}

/* Theme toggles: rectangular oval, consistent with Pahgo controls. */
html body #root .pahgo-toggle-switch {
  width: 42px !important;
  height: 22px !important;
  min-width: 42px !important;
  min-height: 22px !important;
  max-width: 42px !important;
  max-height: 22px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(124, 58, 237, 0.26) !important;
  background: #EDE9FE !important;
  box-shadow: inset 0 1px 2px rgba(13, 16, 36, 0.06) !important;
}

html body #root .pahgo-toggle-switch[aria-checked="true"] {
  border-color: var(--pahgo-violet-500) !important;
  background: var(--pahgo-violet-500) !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.2) !important;
}

html body #root .pahgo-toggle-switch > span {
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
  transform: translateX(0) !important;
  box-shadow: 0 1px 5px rgba(13, 16, 36, 0.2) !important;
}

html body #root .pahgo-toggle-switch[aria-checked="true"] > span {
  transform: translateX(20px) !important;
}

html body #root .pahgo-toggle-switch--sm {
  width: 34px !important;
  height: 18px !important;
  min-width: 34px !important;
  min-height: 18px !important;
  border-radius: 7px !important;
}

html body #root .pahgo-toggle-switch--sm > span {
  top: 2px !important;
  left: 2px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 4px !important;
}

html body #root .pahgo-toggle-switch--sm[aria-checked="true"] > span {
  transform: translateX(16px) !important;
}

/* Settings and application screens: reduce visual noise while preserving function. */
html body #root .pahgo-settings-main-panel button,
html body #root .pahgo-settings-main-panel input,
html body #root .pahgo-settings-main-panel select {
  letter-spacing: 0 !important;
}

html body #root .pahgo-settings-main-panel [style*="border-radius: 9999px"] {
  border-radius: 18px !important;
}

/* Clickable metric cards should make the active state obvious. */
html body #root .pahgo-selected-card,
html body #root [aria-pressed="true"].pahgo-metric-card {
  color: #FFFFFF !important;
  border-color: var(--pahgo-violet-500) !important;
  background: var(--pahgo-violet-500) !important;
}

html body #root .pahgo-selected-card *,
html body #root [aria-pressed="true"].pahgo-metric-card * {
  color: #FFFFFF !important;
}

/* Mia command bar: hide fake scope/action affordances until there is an actual command. */
html body #root .pahgo-native-ai .pahgo-native-ai-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

html body #root .pahgo-native-ai .pahgo-native-ai-chip {
  display: none !important;
}

html body #root .pahgo-native-ai .pahgo-native-ai-button:disabled {
  display: none !important;
}

/* Dashboard occupancy card: match the taller right-side module instead of compressing the timeline. */
html body #root #occupancy-board-widget,
html body #root .pahgo-occupancy-heatmap-card {
  height: clamp(420px, 34vw, 500px) !important;
  min-height: 420px !important;
  max-height: 500px !important;
}

html body #root #occupancy-board-widget .pahgo-occupancy-matrix-scroll,
html body #root .pahgo-occupancy-heatmap-card .pahgo-occupancy-matrix-scroll {
  min-height: 0 !important;
}

@media (max-width: 900px) {
  html body #root #occupancy-board-widget,
  html body #root .pahgo-occupancy-heatmap-card {
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
  }
}

/* Make card movement affordances visible anywhere dashboard cards already support drag/reorder. */
html body #root .pahgo-widget-card {
  position: relative !important;
  min-width: 0 !important;
}

html body #root .pahgo-widget-card [aria-label*="Move"],
html body #root .pahgo-widget-card [aria-label*="move"],
html body #root .pahgo-widget-card [aria-label*="Drag"],
html body #root .pahgo-widget-card [aria-label*="drag"],
html body #root .pahgo-widget-card [title*="Move"],
html body #root .pahgo-widget-card [title*="move"],
html body #root .pahgo-widget-card [title*="Drag"],
html body #root .pahgo-widget-card [title*="drag"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body #root .pahgo-widget-card[draggable="true"],
html body #root [draggable="true"].pahgo-widget-card,
html body #root .pahgo-widget-card [draggable="true"] {
  cursor: grab !important;
}

html body #root .pahgo-widget-card[draggable="true"]:active,
html body #root [draggable="true"].pahgo-widget-card:active,
html body #root .pahgo-widget-card [draggable="true"]:active {
  cursor: grabbing !important;
}