/*
 * GARUDA 10.2E2 — Final Blue Polish
 * Removes residual pink/red branding from non-danger UI.
 * Red remains reserved for rejected, failed, emergency, delete,
 * and destructive confirmation states.
 */

:root {
  --g2-blue-950: #071629;
  --g2-blue-900: #0b1f3a;
  --g2-blue-850: #102b4e;
  --g2-blue-800: #12375f;
  --g2-blue-700: #174a7a;
  --g2-blue-600: #1e63a7;
  --g2-blue-500: #2e7fc2;
  --g2-blue-300: #78b8f1;
  --g2-blue-100: #eaf3fb;
  --g2-blue-050: #f4f7fb;
  --g2-ink: #152033;
  --g2-muted: #5f6f85;
  --g2-line: #dbe4ef;
}

/* Dashboard hero contrast. */
html body #app-view .hero h2,
html body #app-view .hero h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(7, 22, 41, .20) !important;
}

html body #app-view .hero > div > p,
html body #app-view .hero #scope-description,
html body #app-view .hero #v2-context-line {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}

html body #app-view .hero .scope-badge {
  border: 1px solid rgba(255, 255, 255, .42) !important;
  color: var(--g2-blue-900) !important;
  -webkit-text-fill-color: var(--g2-blue-900) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 8px 22px rgba(7, 22, 41, .16) !important;
}

/* Synchronized status card: white and blue, never pink. */
html body #app-view .hero .api-status {
  border: 1px solid rgba(120, 184, 241, .52) !important;
  color: var(--g2-blue-900) !important;
  -webkit-text-fill-color: var(--g2-blue-900) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 10px 28px rgba(7, 22, 41, .16) !important;
}

html body #app-view .hero .api-status b {
  color: var(--g2-blue-900) !important;
  -webkit-text-fill-color: var(--g2-blue-900) !important;
}

html body #app-view .hero .api-status small {
  color: var(--g2-muted) !important;
  -webkit-text-fill-color: var(--g2-muted) !important;
}

/* Topbar identity card. */
html body #app-view .topbar .user-chip {
  border-color: #bfd8ed !important;
  color: var(--g2-blue-900) !important;
  -webkit-text-fill-color: var(--g2-blue-900) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--g2-blue-100) 100%
    ) !important;
  box-shadow: 0 7px 18px rgba(7, 22, 41, .07) !important;
}

html body #app-view .topbar .user-chip b {
  color: var(--g2-blue-900) !important;
  -webkit-text-fill-color: var(--g2-blue-900) !important;
}

html body #app-view .topbar .user-chip small {
  color: var(--g2-muted) !important;
  -webkit-text-fill-color: var(--g2-muted) !important;
}

html body #app-view .topbar .avatar {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g2-blue-700),
      var(--g2-blue-500)
    ) !important;
}

/* Neutral pills and metadata. */
html body #app-view .neutral-pill,
html body #app-view .operation-meta span,
html body #app-view .activity-status:not(.danger):not(.failed):not(.rejected),
html body #app-view .secure-pill {
  border: 1px solid #c9def0 !important;
  color: var(--g2-blue-700) !important;
  -webkit-text-fill-color: var(--g2-blue-700) !important;
  background: var(--g2-blue-100) !important;
}

/* Financial time selector. */
html body #app-view .periods {
  border: 1px solid #d2e3f1 !important;
  background: var(--g2-blue-100) !important;
}

html body #app-view .period {
  color: var(--g2-muted) !important;
  -webkit-text-fill-color: var(--g2-muted) !important;
  background: transparent !important;
}

html body #app-view .period.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g2-blue-700),
      var(--g2-blue-500)
    ) !important;
  box-shadow: 0 6px 15px rgba(30, 99, 167, .22) !important;
}

/* Generic non-danger filter and secondary buttons. */
html body #app-view .soft-button,
html body #app-view button[type="button"]:not(.nav):not(.logout-button):not(.danger):not(.iv-danger):not([data-delete]):not([data-danger]) {
  border-color: var(--g2-line) !important;
}

html body #app-view .soft-button {
  color: var(--g2-blue-700) !important;
  -webkit-text-fill-color: var(--g2-blue-700) !important;
  background: #ffffff !important;
}

html body #app-view .soft-button:hover {
  border-color: var(--g2-blue-300) !important;
  background: var(--g2-blue-100) !important;
}

/* Input surfaces: remove warm/pink tint. */
html body #app-view input:not([type="checkbox"]):not([type="radio"]),
html body #app-view select,
html body #app-view textarea {
  border-color: var(--g2-line) !important;
  color: var(--g2-ink) !important;
  background: #ffffff !important;
}

html body #app-view input:focus,
html body #app-view select:focus,
html body #app-view textarea:focus {
  border-color: var(--g2-blue-600) !important;
  box-shadow: 0 0 0 4px rgba(30, 99, 167, .12) !important;
}

/* Cards and shadows must use blue-gray instead of red-brown. */
html body #app-view .panel,
html body #app-view .metric-card,
html body #app-view .revenue-item,
html body #app-view .activity-item {
  border-color: var(--g2-line) !important;
  box-shadow: 0 12px 34px rgba(7, 22, 41, .075) !important;
}

/* Dashboard metric decoration. */
html body #app-view .metric-card::after {
  background: var(--g2-blue-100) !important;
}

html body #app-view .metric-icon {
  color: var(--g2-blue-700) !important;
  -webkit-text-fill-color: var(--g2-blue-700) !important;
  background: var(--g2-blue-100) !important;
}

/* Progress tracks. */
html body #app-view .track,
html body #app-view progress {
  background: #e3edf6 !important;
}

html body #app-view .fill {
  background:
    linear-gradient(
      90deg,
      var(--g2-blue-500),
      var(--g2-blue-800)
    ) !important;
}

/* Keep sidebar explicitly blue in all modes. */
html body #app-view .sidebar {
  border-right-color: rgba(120, 184, 241, .18) !important;
}

html body #app-view .sidebar .nav:not(.active) {
  border-color: rgba(255, 255, 255, .17) !important;
}

html body #app-view .sidebar .nav:not(.active):hover {
  border-color: rgba(120, 184, 241, .56) !important;
  background: rgba(46, 127, 194, .20) !important;
}

/* Program group indicator and collapsible arrows. */
html body #app-view .nav-group-title,
html body #app-view .nav-group-title::after {
  border-color: rgba(120, 184, 241, .48) !important;
}

/* Semantic danger is intentionally untouched. */
html body #app-view .danger,
html body #app-view .iv-danger,
html body #app-view .rejected,
html body #app-view .failed,
html body #app-view .emergency,
html body #app-view [data-delete],
html body #app-view [data-danger] {
  /* Red may remain here because it communicates risk. */
}