/*
 * GARUDA 10.2E1
 * Dark Blue / White hard override for the JET Admin V2 baseline.
 *
 * Red is reserved only for semantic danger states:
 * rejected, failed, delete, emergency, destructive confirmation.
 */

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

  /* Redirect all legacy JET/GARUDA red brand variables to blue. */
  --garuda-red-950: var(--garuda-blue-950) !important;
  --garuda-red-900: var(--garuda-blue-900) !important;
  --garuda-red-800: var(--garuda-blue-800) !important;
  --garuda-red-700: var(--garuda-blue-600) !important;
  --garuda-red-600: var(--garuda-blue-500) !important;
  --garuda-red-500: var(--garuda-blue-500) !important;
  --garuda-red-100: var(--garuda-blue-100) !important;
  --garuda-red-50: var(--garuda-blue-050) !important;

  --red: var(--garuda-blue-600) !important;
  --red-dark: var(--garuda-blue-900) !important;
  --red-soft: var(--garuda-blue-100) !important;
  --redSoft: var(--garuda-blue-100) !important;

  --rf-red: var(--garuda-blue-600) !important;
  --rf-red-dark: var(--garuda-blue-900) !important;
  --rf-red-soft: var(--garuda-blue-100) !important;
  --dp-red: var(--garuda-blue-600) !important;

  --blue: var(--garuda-blue-600) !important;
  --blue2: var(--garuda-blue-800) !important;
  --blueSoft: var(--garuda-blue-100) !important;
  --b950: var(--garuda-blue-950) !important;
  --b900: var(--garuda-blue-900) !important;
  --b800: var(--garuda-blue-800) !important;
  --b700: var(--garuda-blue-600) !important;
  --b600: var(--garuda-blue-500) !important;
  --b100: var(--garuda-blue-100) !important;

  --garuda-ink: var(--garuda-ink-blue) !important;
  --garuda-muted: var(--garuda-muted-blue) !important;
  --garuda-line: var(--garuda-line-blue) !important;
  --garuda-soft: var(--garuda-blue-050) !important;
  --ink: var(--garuda-ink-blue) !important;
  --muted: var(--garuda-muted-blue) !important;
  --line: var(--garuda-line-blue) !important;
  --bg: var(--garuda-blue-050) !important;
}

/* Main application background. */
html body,
html body #app-view.app-shell,
html body #app-view .workspace,
html body #app-view .content {
  color: var(--garuda-ink-blue) !important;
  background-color: var(--garuda-blue-050) !important;
}

/* Fixed sidebar layer from the former red design. */
@media (min-width: 681px) {
  html body #app-view.app-shell::before {
    background:
      radial-gradient(
        circle at 20% 0%,
        rgba(46, 127, 194, .31),
        transparent 20rem
      ),
      linear-gradient(
        180deg,
        var(--garuda-blue-950) 0%,
        var(--garuda-blue-900) 50%,
        var(--garuda-blue-850) 100%
      ) !important;
  }

  html body #app-view.app-shell > aside.sidebar {
    background: transparent !important;
  }
}

html body #app-view .sidebar,
html body #app-view.app-shell > aside.sidebar {
  color: #fff !important;
}

html body #app-view .sidebar nav .nav:not(.active),
html body #app-view .sidebar nav button.nav:not(.active),
html body #app-view .sidebar [data-finance-page]:not(.active),
html body #app-view .sidebar [data-admin-users-page]:not(.active),
html body #app-view .sidebar [data-order-page]:not(.active),
html body #app-view .sidebar [data-partner-page]:not(.active),
html body #app-view .sidebar [data-config-page]:not(.active),
html body #app-view .sidebar [data-driver-ops-page]:not(.active),
html body #app-view .sidebar [data-support-center-page]:not(.active),
html body #app-view .sidebar [data-verification-page]:not(.active),
html body #app-view .sidebar [data-referral-page]:not(.active),
html body #app-view .sidebar [data-driver-pension-page]:not(.active),
html body #app-view .sidebar [data-slide-ads-page]:not(.active),
html body #app-view .sidebar [data-voucher-page]:not(.active) {
  border-color: rgba(255, 255, 255, .18) !important;
  color: rgba(255, 255, 255, .92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}

html body #app-view .sidebar nav .nav:not(.active):hover,
html body #app-view .sidebar nav button.nav:not(.active):hover {
  border-color: rgba(120, 184, 241, .50) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(46, 127, 194, .22) !important;
}

html body #app-view .sidebar nav .nav.active,
html body #app-view .sidebar button.nav.active {
  border-color: rgba(255, 255, 255, .86) !important;
  color: var(--garuda-blue-800) !important;
  -webkit-text-fill-color: var(--garuda-blue-800) !important;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      var(--garuda-blue-100) 100%
    ) !important;
  box-shadow: 0 12px 28px rgba(7, 22, 41, .24) !important;
}

html body #app-view .sidebar nav .nav.active *,
html body #app-view .sidebar button.nav.active * {
  color: var(--garuda-blue-800) !important;
  -webkit-text-fill-color: var(--garuda-blue-800) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body #app-view .sidebar .nav-icon {
  background: rgba(255, 255, 255, .11) !important;
}

html body #app-view .sidebar .nav.active .nav-icon {
  color: var(--garuda-blue-700) !important;
  background: #fff !important;
}

html body #app-view .sidebar .nav-group-title {
  color: rgba(255, 255, 255, .55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .55) !important;
}

html body #app-view .sidebar-scope {
  border: 1px solid rgba(120, 184, 241, .70) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--garuda-blue-100) 100%
    ) !important;
  box-shadow: 0 14px 32px rgba(7, 22, 41, .24) !important;
}

html body #app-view .sidebar-scope small {
  color: var(--garuda-muted-blue) !important;
  -webkit-text-fill-color: var(--garuda-muted-blue) !important;
}

html body #app-view .sidebar-scope b {
  color: var(--garuda-blue-800) !important;
  -webkit-text-fill-color: var(--garuda-blue-800) !important;
}

html body #app-view .sidebar-scope span {
  color: var(--garuda-muted-blue) !important;
  -webkit-text-fill-color: var(--garuda-muted-blue) !important;
}

/* Top bar controls. */
html body #app-view .soft-button,
html body #app-view .mobile-menu-button {
  border-color: var(--garuda-line-blue) !important;
  color: var(--garuda-blue-700) !important;
  background: #fff !important;
}

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

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

html body #app-view .logout-button {
  border: 1px solid var(--garuda-blue-900) !important;
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-900),
      var(--garuda-blue-700)
    ) !important;
  box-shadow: 0 8px 18px rgba(7, 22, 41, .14) !important;
}

html body #app-view .logout-button:hover {
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-800),
      var(--garuda-blue-600)
    ) !important;
}

/* Dashboard and generic management pages. */
html body #app-view .hero {
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(255, 255, 255, .18),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      var(--garuda-blue-950),
      var(--garuda-blue-600)
    ) !important;
  box-shadow: 0 18px 42px rgba(7, 22, 41, .20) !important;
}

html body #app-view .metric-card::after,
html body #app-view .metric-icon,
html body #app-view .activity-type {
  color: var(--garuda-blue-700) !important;
  background: var(--garuda-blue-100) !important;
}

html body #app-view .period.active,
html body #app-view .activity-status,
html body #app-view .revenue-primary span,
html body #app-view .v2-bar-row b {
  color: var(--garuda-blue-700) !important;
}

html body #app-view .fill,
html body #app-view progress::-webkit-progress-value,
html body #app-view .v2-bar-row progress::-webkit-progress-value {
  background:
    linear-gradient(
      90deg,
      var(--garuda-blue-500),
      var(--garuda-blue-800)
    ) !important;
}

html body #app-view .om-tab.active,
html body #app-view .pm-tab.active,
html body #app-view .cfg-tab.active,
html body #app-view .fm-tab.active,
html body #app-view .rf-view-tab.active,
html body #app-view .dp-tab.active,
html body #app-view .sa-tab.active,
html body #app-view .vc-tab.active {
  color: #fff !important;
  background: var(--garuda-blue-700) !important;
}

html body #app-view .om-apply,
html body #app-view .pm-apply,
html body #app-view .cfg-primary,
html body #app-view .fm-primary,
html body #app-view .rf-primary,
html body #app-view .dp-primary,
html body #app-view .sa-primary,
html body #app-view .vc-primary,
html body #app-view .dop-primary,
html body #app-view .au-primary,
html body #app-view .mt-primary,
html body #app-view .uw-primary,
html body #app-view [data-save-driver-jobs] {
  border-color: var(--garuda-blue-600) !important;
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-700),
      var(--garuda-blue-500)
    ) !important;
  box-shadow: 0 10px 22px rgba(30, 99, 167, .20) !important;
}

html body #app-view .om-reset,
html body #app-view .pm-reset,
html body #app-view .cfg-secondary,
html body #app-view .fm-secondary,
html body #app-view .rf-secondary,
html body #app-view .dp-secondary,
html body #app-view .sa-secondary,
html body #app-view .vc-secondary,
html body #app-view .dop-secondary,
html body #app-view .au-secondary {
  border-color: var(--garuda-line-blue) !important;
  color: var(--garuda-blue-700) !important;
  background: #fff !important;
}

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

/* Verification Center — remove the hardcoded red JET/INDIEGO layer. */
html body #app-view #garuda-verification-page .iv-intro {
  border-color: rgba(120, 184, 241, .28) !important;
  color: #fff !important;
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 255, 255, .17),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--garuda-blue-950) 0%,
      var(--garuda-blue-700) 58%,
      var(--garuda-blue-500) 100%
    ) !important;
  box-shadow: 0 18px 42px rgba(7, 22, 41, .20) !important;
}

html body #app-view #garuda-verification-page .iv-intro h2 {
  color: #fff !important;
}

html body #app-view #garuda-verification-page .iv-intro p {
  color: rgba(255, 255, 255, .78) !important;
}

html body #app-view #garuda-verification-page .iv-intro .eyebrow {
  color: #cfe9fb !important;
}

html body #app-view #garuda-verification-page .iv-total {
  border-color: rgba(255, 255, 255, .24) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
}

html body #app-view #garuda-verification-page .iv-tab.active {
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-800),
      var(--garuda-blue-500)
    ) !important;
  box-shadow: 0 8px 18px rgba(7, 22, 41, .18) !important;
}

html body #app-view #garuda-verification-page .iv-summary-card {
  border-top-color: var(--garuda-blue-600) !important;
}

html body #app-view #garuda-verification-page .iv-primary,
html body .iv-modal .iv-primary {
  border-color: var(--garuda-blue-600) !important;
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-700),
      var(--garuda-blue-500)
    ) !important;
  box-shadow: 0 9px 20px rgba(30, 99, 167, .20) !important;
}

html body #app-view #garuda-verification-page .iv-detail {
  border-color: #bfd8ed !important;
  color: var(--garuda-blue-700) !important;
  background: var(--garuda-blue-100) !important;
}

html body #app-view #garuda-verification-page .iv-detail:hover {
  border-color: var(--garuda-blue-600) !important;
  color: #fff !important;
  background: var(--garuda-blue-600) !important;
}

html body .iv-modal .iv-detail-hero {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, .16),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--garuda-blue-950),
      var(--garuda-blue-600)
    ) !important;
}

html body .iv-modal .iv-detail-hero small {
  color: #cfe9fb !important;
}

html body .iv-modal .iv-image-viewer header {
  background:
    linear-gradient(
      90deg,
      var(--garuda-blue-950),
      var(--garuda-blue-700)
    ) !important;
}

html body #app-view .iv-nav-badge {
  color: #fff !important;
  background: var(--garuda-blue-500) !important;
}

html body #app-view .sidebar .nav.active .iv-nav-badge {
  color: var(--garuda-blue-700) !important;
  background: #fff !important;
}

/* Support Center. */
html body #app-view .jsc-shell {
  background: #fff !important;
}

html body #app-view .jsc-head {
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-950),
      var(--garuda-blue-600)
    ) !important;
}

html body #app-view .jsc-head p {
  color: rgba(255, 255, 255, .78) !important;
}

html body #app-view .jsc-tabs {
  border-color: var(--garuda-line-blue) !important;
}

html body #app-view .jsc-tabs button.active,
html body #app-view .jsc-reply button {
  color: #fff !important;
  background: var(--garuda-blue-600) !important;
}

html body #app-view .jsc-list {
  border-color: var(--garuda-line-blue) !important;
  background: var(--garuda-blue-050) !important;
}

html body #app-view .jsc-item {
  border-color: var(--garuda-line-blue) !important;
}

html body #app-view .jsc-item.active {
  border-color: var(--garuda-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(46, 127, 194, .14) !important;
}

html body #app-view .jsc-item span {
  color: var(--garuda-blue-800) !important;
}

html body #app-view .jsc-detail-head,
html body #app-view .jsc-reply,
html body #app-view .jsc-list,
html body #app-view .jsc-ticket-body {
  border-color: var(--garuda-line-blue) !important;
}

html body #app-view .jsc-bubble.admin {
  color: var(--garuda-blue-900) !important;
  background: var(--garuda-blue-100) !important;
}

/* Referral, pension, GPS guard, profile, voucher and slide-ad accents. */
html body #app-view .rf-hero,
html body #app-view .dp-hero {
  border-top-color: var(--garuda-blue-600) !important;
}

html body #app-view .rf-view-tab.active,
html body #app-view .rf-tab.active,
html body #app-view .rf-chip.active {
  border-color: var(--garuda-blue-600) !important;
  color: #fff !important;
  background: var(--garuda-blue-600) !important;
}

html body #app-view .rf-program-badge.inactive,
html body #app-view .rf-gate.inactive,
html body #app-view .dp-pill.inactive,
html body #app-view .dp-pill.foundation {
  color: var(--garuda-blue-700) !important;
  background: var(--garuda-blue-100) !important;
}

html body #app-view .jgr-panel,
html body #app-view .garuda-driver-profile-card,
html body #app-view .garuda-verification-official-photo {
  border-color: var(--garuda-line-blue) !important;
  background:
    linear-gradient(
      145deg,
      #fff,
      var(--garuda-blue-050)
    ) !important;
}

html body #app-view .jgr-eyebrow,
html body #app-view .garuda-driver-profile-eyebrow,
html body #app-view .garuda-verification-official-photo span {
  color: var(--garuda-blue-700) !important;
}

html body #app-view button.jgr-switch[aria-checked="true"] {
  background:
    linear-gradient(
      135deg,
      var(--garuda-blue-700),
      var(--garuda-blue-500)
    ) !important;
}

html body #app-view #slide-ads-page [class*="upload"] {
  border-color: var(--garuda-line-blue) !important;
  color: var(--garuda-blue-700) !important;
  background: var(--garuda-blue-050) !important;
}

/* Preserve semantic danger red only where it carries meaning. */
html body #app-view .iv-danger,
html body #app-view .iv-status.rejected,
html body #app-view .status-danger,
html body #app-view .danger,
html body #app-view [data-danger],
html body #app-view [data-delete] {
  /* intentionally not recolored */
}

/* Mobile navigation must remain dark blue. */
@media (max-width: 680px) {
  html body #app-view.app-shell > aside.sidebar,
  html body #app-view .sidebar {
    background:
      linear-gradient(
        90deg,
        var(--garuda-blue-950),
        var(--garuda-blue-800)
      ) !important;
  }

  html body #app-view .sidebar nav .nav.active,
  html body #app-view .sidebar button.nav.active {
    color: var(--garuda-blue-800) !important;
    background: #fff !important;
  }
}