/* Global Night Light mode: softens bright titanium whites into warm amber tones. */
:root {
  --night-soft-white: #F1E0B8;
  --night-titanium-100: #F6E7C4;
  --night-titanium-200: #E3D2AA;
  --night-titanium-300: #C6B58F;
  --night-titanium-400: #9D8F73;
  --night-muted-text: #B1A486;
  --night-line-soft: rgba(229, 204, 150, 0.24);
  --night-line-strong: rgba(246, 224, 184, 0.58);
  --night-warm-accent: #D8B982;
}

html[data-night-light="on"] {
  --soft-white: var(--night-soft-white);
  --titanium-100: var(--night-titanium-100);
  --titanium-200: var(--night-titanium-200);
  --titanium-300: var(--night-titanium-300);
  --titanium-400: var(--night-titanium-400);
  --muted-text: var(--night-muted-text);
  --line-soft: var(--night-line-soft);
  --line-strong: var(--night-line-strong);
  --warm-accent: var(--night-warm-accent);
  color-scheme: dark;
}

html[data-night-light="on"] body {
  color: var(--soft-white);
}

html[data-night-light="on"] :where(
  h1,h2,h3,h4,h5,h6,
  .hero-title,.section-title,.panel-title,.brand-text,.portal-brand span,.auth-logo span,
  .nav-link,.nav-links a,.language-switcher summary,.language-menu a,
  .outline-button,.icon-button,.portal-button,.portal-icon-button,
  .download-btn,.modal-title,.card-title,.activity-title,.client-logo-card,
  th,strong,summary
) {
  color: var(--titanium-100) !important;
}

html[data-night-light="on"] :where(
  p,li,td,label,small,
  .hero-lead,.section-text,.panel-desc,.muted,.card-text,
  .user-line span:first-child,.field label,.portal-eyebrow,.eyebrow
) {
  color: var(--muted-text) !important;
}

html[data-night-light="on"] :where(.titanium-panel,.auth-card,.orbit-card,.client-logo-card,.activity-card,.workflow-card,.metric-card,.glass-card,.portal-panel) {
  border-color: var(--line-soft) !important;
  box-shadow: 0 0 0 1px rgba(246, 224, 184, 0.025) inset, 0 30px 86px rgba(0,0,0,.32), 0 0 46px rgba(216,185,130,.045) !important;
}

html[data-night-light="on"] :where(input,select,textarea,.table-input) {
  color: var(--soft-white) !important;
  border-color: rgba(229,204,150,.24) !important;
  caret-color: var(--night-warm-accent);
}

html[data-night-light="on"] ::selection {
  background: rgba(216,185,130,.28);
  color: #fff1cf;
}

.night-light-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-soft, rgba(196,202,204,.28));
  border-radius: 10px;
  background: rgba(10, 12, 12, 0.46);
  color: var(--titanium-200, #D8DCDB);
  font-family: Manrope, Inter, Arial, sans-serif;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease, ease), border-color .25s var(--ease, ease), box-shadow .25s var(--ease, ease), color .25s var(--ease, ease), background .25s var(--ease, ease);
  white-space: nowrap;
}

.night-light-toggle:hover,
.night-light-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--line-strong, rgba(225,231,233,.68));
  color: var(--titanium-100, #F1F2F0);
  box-shadow: var(--shadow-soft, 0 0 38px rgba(210,218,222,.10));
  outline: none;
}

.night-light-toggle__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  position: relative;
  border: 1px solid currentColor;
  opacity: .92;
}

.night-light-toggle__icon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .72;
}

html[data-night-light="on"] .night-light-toggle {
  color: #F4DFAC;
  border-color: rgba(244, 223, 172, .48);
  background: radial-gradient(circle at 32% 18%, rgba(244,223,172,.18), transparent 42%), rgba(37, 30, 19, .42);
  box-shadow: 0 0 26px rgba(216,185,130,.10), 0 0 0 1px rgba(244,223,172,.035) inset;
}

html[data-night-light="on"] .night-light-toggle__icon {
  box-shadow: 0 0 16px rgba(244,223,172,.28);
}

.portal-top-actions .night-light-toggle {
  min-height: 40px;
}

.night-light-toggle.is-floating {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 980px) {
  .night-light-toggle {
    padding: 0 11px;
  }
  .night-light-toggle__label {
    display: none;
  }
}

html[data-night-light="on"] #network-canvas {
  opacity: .20 !important;
  filter: sepia(.44) saturate(.82) brightness(.92);
}

html[data-night-light="on"] :where(.brand-mark,.client-logo-card img,.activity-card img,.activity-icon img,.company-logo img) {
  filter: sepia(.18) saturate(.84) brightness(.96);
}

/* Keep the Graphic Design impossible-geometry accent frameless in Night Light mode. */
html[data-night-light="on"] .page-design .impossible-wire-card,
html[data-night-light="on"] .page-design .impossible-wire-card.titanium-panel,
html[data-night-light="on"] .page-design .impossible-wire-card.orbit-card {
  border-color: transparent !important;
  border-width: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-night-light="on"] .page-design .impossible-wire-card::before,
html[data-night-light="on"] .page-design .impossible-wire-card::after {
  opacity: 0 !important;
  content: none !important;
}

/* Clients section keeps only logo cards; the wrapper stays fully transparent. */
html[data-night-light="on"] .clients-panel,
html[data-night-light="on"] .clients-panel.titanium-panel {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-night-light="on"] .clients-panel::before,
html[data-night-light="on"] .clients-panel::after {
  opacity: 0 !important;
  content: none !important;
}


/* Stage 24: clearer Night Light status icon */
.night-light-toggle__icon {
  border: 0;
  box-shadow: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  color: currentColor;
  background: transparent;
}

.night-light-toggle__icon::before {
  content: "☀";
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  opacity: .92;
}

.night-light-toggle__icon::after {
  content: "";
}

html[data-night-light="on"] .night-light-toggle__icon {
  position: relative;
  box-shadow: none;
}

html[data-night-light="on"] .night-light-toggle__icon::before {
  content: "☾";
  font-size: 20px;
  opacity: .98;
}

html[data-night-light="on"] .night-light-toggle__icon::after {
  content: "✦";
  position: absolute;
  right: -3px;
  top: -4px;
  font-size: 8px;
  line-height: 1;
  opacity: .9;
}