/*
 * GARUDA 10.2E3 — Component Blue Completion
 *
 * Completes the dark-blue / white conversion for:
 * - Driver Operations
 * - Driver Support Center modal
 * - Service Configuration
 *
 * Red is preserved only for semantic emergency, rejection,
 * failure, delete, or destructive actions.
 */

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

/* ================================================================
   DRIVER OPERATIONS
   ================================================================ */

html body #app-view #driver-operations-page .dop-intro {
  border: 1px solid var(--g3-line) !important;
  border-left: 5px solid var(--g3-blue-500) !important;
  color: var(--g3-ink) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--g3-blue-050) 100%
    ) !important;
  box-shadow: 0 12px 34px rgba(7, 22, 41, .075) !important;
}

html body #app-view #driver-operations-page .dop-intro h1,
html body #app-view #driver-operations-page .dop-intro h2,
html body #app-view #driver-operations-page .dop-intro h3 {
  color: var(--g3-blue-950) !important;
  -webkit-text-fill-color: var(--g3-blue-950) !important;
}

html body #app-view #driver-operations-page .dop-intro .eyebrow {
  color: var(--g3-blue-600) !important;
  -webkit-text-fill-color: var(--g3-blue-600) !important;
}

html body #app-view #driver-operations-page .dop-intro p {
  color: var(--g3-muted) !important;
  -webkit-text-fill-color: var(--g3-muted) !important;
}

/* Emergency KPI intentionally remains red. */
html body #app-view #driver-operations-page
  .dop-summary .dop-stat.emergency {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #7f0710 0%,
      #c4101b 58%,
      #ef3349 100%
    ) !important;
  border: 1px solid #b90e18 !important;
  border-top: 3px solid #ff6574 !important;
  box-shadow: 0 14px 32px rgba(166, 10, 21, .22) !important;
}

html body #app-view #driver-operations-page
  .dop-summary .dop-stat.emergency small,
html body #app-view #driver-operations-page
  .dop-summary .dop-stat.emergency strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* All normal KPI cards must be neutral blue-white. */
html body #app-view #driver-operations-page
  .dop-summary .dop-stat:not(.emergency) {
  color: var(--g3-ink) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--g3-blue-050) 100%
    ) !important;
  border: 1px solid var(--g3-line) !important;
  border-top: 3px solid var(--g3-blue-500) !important;
  box-shadow: 0 10px 28px rgba(7, 22, 41, .075) !important;
}

html body #app-view #driver-operations-page
  .dop-summary .dop-stat:not(.emergency) small {
  color: var(--g3-muted) !important;
  -webkit-text-fill-color: var(--g3-muted) !important;
}

html body #app-view #driver-operations-page
  .dop-summary .dop-stat:not(.emergency) strong {
  color: var(--g3-blue-900) !important;
  -webkit-text-fill-color: var(--g3-blue-900) !important;
}

html body #app-view #driver-operations-page .dop-panel {
  border: 1px solid var(--g3-line) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 34px rgba(7, 22, 41, .075) !important;
}

html body #app-view #driver-operations-page .dop-panel h3,
html body #app-view #driver-operations-page .dop-panel h4,
html body #app-view #driver-operations-page .dop-panel b,
html body #app-view #driver-operations-page .dop-panel strong {
  color: var(--g3-blue-950) !important;
  -webkit-text-fill-color: var(--g3-blue-950) !important;
}

html body #app-view #driver-operations-page
  .dop-panel .panel-head .eyebrow {
  color: var(--g3-blue-600) !important;
  -webkit-text-fill-color: var(--g3-blue-600) !important;
}

html body #app-view #driver-operations-page .dop-panel p,
html body #app-view #driver-operations-page .dop-panel small,
html body #app-view #driver-operations-page .dop-empty {
  color: var(--g3-muted) !important;
  -webkit-text-fill-color: var(--g3-muted) !important;
}

html body #app-view #driver-operations-page .dop-form label,
html body #app-view #driver-operations-page .dop-form label > span {
  color: var(--g3-ink) !important;
  -webkit-text-fill-color: var(--g3-ink) !important;
}

html body #app-view #driver-operations-page .dop-form input,
html body #app-view #driver-operations-page .dop-form select,
html body #app-view #driver-operations-page .dop-form textarea,
html body #app-view #driver-operations-page #dop-document-status,
html body #app-view #driver-operations-page
  .dop-safety-toolbar select {
  border-color: var(--g3-line) !important;
  color: var(--g3-ink) !important;
  -webkit-text-fill-color: var(--g3-ink) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body #app-view #driver-operations-page .dop-form input:focus,
html body #app-view #driver-operations-page .dop-form select:focus,
html body #app-view #driver-operations-page .dop-form textarea:focus,
html body #app-view #driver-operations-page #dop-document-status:focus,
html body #app-view #driver-operations-page
  .dop-safety-toolbar select:focus {
  border-color: var(--g3-blue-600) !important;
  box-shadow: 0 0 0 4px rgba(30, 99, 167, .12) !important;
}

html body #app-view #driver-operations-page .dop-primary {
  border-color: var(--g3-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
  box-shadow: 0 10px 22px rgba(30, 99, 167, .20) !important;
}

html body #app-view #driver-operations-page .dop-action {
  border-color: var(--g3-line) !important;
  color: var(--g3-blue-700) !important;
  -webkit-text-fill-color: var(--g3-blue-700) !important;
  background: #ffffff !important;
}

html body #app-view #driver-operations-page .dop-action:hover {
  border-color: var(--g3-blue-300) !important;
  background: var(--g3-blue-100) !important;
}

html body #app-view #driver-operations-page .dop-action.approve,
html body #app-view #driver-operations-page .dop-action.resolve,
html body #app-view #driver-operations-page .dop-action.contact {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}

html body #app-view #driver-operations-page .dop-action.reject,
html body #app-view #driver-operations-page .dop-action.reopen {
  /* Semantic rejection/reopen warning remains red. */
}

html body #app-view #driver-operations-page .dop-action.online-call,
html body #app-view #driver-operations-page .dop-primary.online-call {
  border-color: var(--g3-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
}

html body #app-view #driver-operations-page
  .dop-incident-card:not(.status-emergency) {
  border-color: var(--g3-line) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
}

html body #app-view #driver-operations-page
  .dop-incident-card:not(.status-emergency) h4 {
  color: var(--g3-blue-950) !important;
  -webkit-text-fill-color: var(--g3-blue-950) !important;
}

html body #app-view #driver-operations-page
  .dop-incident-card:not(.status-emergency) p,
html body #app-view #driver-operations-page
  .dop-incident-card:not(.status-emergency) .dop-incident-meta,
html body #app-view #driver-operations-page
  .dop-incident-card:not(.status-emergency) time {
  color: var(--g3-muted) !important;
  -webkit-text-fill-color: var(--g3-muted) !important;
}

html body #app-view #driver-operations-page .dop-incident-type {
  border: 1px solid #c9def0 !important;
  color: var(--g3-blue-700) !important;
  -webkit-text-fill-color: var(--g3-blue-700) !important;
  background: var(--g3-blue-100) !important;
}

html body #app-view #driver-operations-page .dop-badge {
  color: var(--g3-blue-700) !important;
  -webkit-text-fill-color: var(--g3-blue-700) !important;
  background: var(--g3-blue-100) !important;
}

/* Safety detail drawer — neutral blue except actual emergency state. */
html body .dop-safety-backdrop {
  background: rgba(7, 22, 41, .68) !important;
}

html body .dop-safety-modal {
  color: var(--g3-ink) !important;
  background: var(--g3-blue-050) !important;
  box-shadow: -18px 0 55px rgba(7, 22, 41, .28) !important;
}

html body .dop-safety-modal-head {
  border-bottom-color: var(--g3-line) !important;
  background: #ffffff !important;
}

html body .dop-safety-modal-head h2 {
  color: var(--g3-blue-950) !important;
  -webkit-text-fill-color: var(--g3-blue-950) !important;
}

html body .dop-safety-close {
  border-color: var(--g3-line) !important;
  color: var(--g3-blue-700) !important;
  background: var(--g3-blue-100) !important;
}

html body .dop-safety-detail-grid article,
html body .dop-safety-description,
html body .dop-safety-route {
  border-color: var(--g3-line) !important;
  background: #ffffff !important;
}

html body .dop-safety-detail-grid small,
html body .dop-safety-description small,
html body .dop-safety-route small {
  color: var(--g3-blue-600) !important;
  -webkit-text-fill-color: var(--g3-blue-600) !important;
}

html body .dop-safety-map {
  border-color: var(--g3-line) !important;
}

/* Online call modal — calling is not an emergency. */
html body .garuda-call-backdrop {
  background: rgba(7, 22, 41, .72) !important;
}

html body .garuda-call-modal {
  border-color: #bfd8ed !important;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--g3-blue-100)
    ) !important;
  box-shadow: 0 28px 80px rgba(7, 22, 41, .38) !important;
}

html body .garuda-call-avatar {
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
}

html body .garuda-call-modal h2 {
  color: var(--g3-blue-950) !important;
  -webkit-text-fill-color: var(--g3-blue-950) !important;
}

/* ================================================================
   SUPPORT CENTER MODAL
   Overlay is appended directly under body, outside #app-view.
   ================================================================ */

html body .jsc-overlay {
  background: rgba(7, 22, 41, .78) !important;
  backdrop-filter: blur(4px) !important;
}

html body .jsc-shell {
  border: 1px solid rgba(120, 184, 241, .36) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 30px 90px rgba(7, 22, 41, .40) !important;
}

html body .jsc-head {
  color: #ffffff !important;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, .18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--g3-blue-950),
      var(--g3-blue-600)
    ) !important;
}

html body .jsc-head h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .jsc-head small {
  color: #cfe9fb !important;
  -webkit-text-fill-color: #cfe9fb !important;
}

html body .jsc-head p {
  color: rgba(255, 255, 255, .84) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .84) !important;
}

html body .jsc-head button {
  border: 1px solid rgba(255, 255, 255, .38) !important;
  color: var(--g3-blue-900) !important;
  -webkit-text-fill-color: var(--g3-blue-900) !important;
  background: rgba(255, 255, 255, .95) !important;
}

html body .jsc-head button:hover {
  background: var(--g3-blue-100) !important;
}

html body .jsc-tabs {
  border-bottom-color: var(--g3-line) !important;
  background: #ffffff !important;
}

html body .jsc-tabs button {
  border: 1px solid var(--g3-line) !important;
  color: var(--g3-blue-700) !important;
  -webkit-text-fill-color: var(--g3-blue-700) !important;
  background: var(--g3-blue-050) !important;
}

html body .jsc-tabs button.active {
  border-color: var(--g3-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
}

html body .jsc-layout {
  background: #ffffff !important;
}

html body .jsc-list {
  border-right-color: var(--g3-line) !important;
  background: var(--g3-blue-050) !important;
}

html body .jsc-item {
  border-color: var(--g3-line) !important;
  background: #ffffff !important;
}

html body .jsc-item:hover {
  border-color: var(--g3-blue-300) !important;
  background: var(--g3-blue-100) !important;
}

html body .jsc-item.active {
  border-color: var(--g3-blue-500) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(46, 127, 194, .14) !important;
}

html body .jsc-item span {
  color: var(--g3-blue-900) !important;
  -webkit-text-fill-color: var(--g3-blue-900) !important;
}

html body .jsc-item small,
html body .jsc-empty,
html body .jsc-detail-head p,
html body .jsc-bubble small,
html body .jsc-ticket-body small {
  color: var(--g3-muted) !important;
  -webkit-text-fill-color: var(--g3-muted) !important;
}

html body .jsc-detail {
  color: var(--g3-ink) !important;
  background: #ffffff !important;
}

html body .jsc-detail-head,
html body .jsc-reply {
  border-color: var(--g3-line) !important;
}

html body .jsc-detail-actions button,
html body .jsc-reply button {
  border-color: var(--g3-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
}

html body .jsc-bubble.driver {
  color: var(--g3-ink) !important;
  background: #f1f5f9 !important;
}

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

html body .jsc-reply textarea,
html body .jsc-detail select {
  border-color: var(--g3-line) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
}

html body .jsc-reply textarea:focus,
html body .jsc-detail select:focus {
  border-color: var(--g3-blue-600) !important;
  box-shadow: 0 0 0 4px rgba(30, 99, 167, .12) !important;
}

html body .jsc-ticket-body {
  border-color: var(--g3-line) !important;
  background: #ffffff !important;
}

/* Success stays green; actual errors stay red. */
html body .jsc-status:not(.error) {
  color: #166534 !important;
  background: #ecfdf5 !important;
}

/* ================================================================
   SERVICE CONFIGURATION
   Actual component classes use cm-*, not cfg-*.
   ================================================================ */

html body #app-view #config-management-page .cm-intro {
  border: 1px solid rgba(120, 184, 241, .28) !important;
  color: #ffffff !important;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 255, 255, .17),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--g3-blue-950) 0%,
      var(--g3-blue-700) 60%,
      var(--g3-blue-500) 100%
    ) !important;
  box-shadow: 0 18px 42px rgba(7, 22, 41, .20) !important;
}

html body #app-view #config-management-page .cm-intro h1,
html body #app-view #config-management-page .cm-intro h2,
html body #app-view #config-management-page .cm-intro h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(7, 22, 41, .22) !important;
}

html body #app-view #config-management-page .cm-intro .eyebrow {
  color: #cfe9fb !important;
  -webkit-text-fill-color: #cfe9fb !important;
}

html body #app-view #config-management-page .cm-intro p {
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
}

html body #app-view #config-management-page .cm-scope-badge {
  border: 1px solid rgba(255, 255, 255, .44) !important;
  color: var(--g3-blue-900) !important;
  -webkit-text-fill-color: var(--g3-blue-900) !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 8px 22px rgba(7, 22, 41, .16) !important;
}

html body #app-view #config-management-page .cm-scope-panel,
html body #app-view #config-management-page .cm-service-panel,
html body #app-view #config-management-page .cm-editor-panel,
html body #app-view #config-management-page .cm-card {
  border-color: var(--g3-line) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 34px rgba(7, 22, 41, .075) !important;
}

html body #app-view #config-management-page .cm-primary {
  border-color: var(--g3-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
  box-shadow: 0 10px 22px rgba(30, 99, 167, .20) !important;
}

html body #app-view #config-management-page
  .cm-service-item:not(.active) {
  border-color: var(--g3-line) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
}

html body #app-view #config-management-page
  .cm-service-item:not(.active):hover {
  border-color: var(--g3-blue-300) !important;
  background: var(--g3-blue-100) !important;
}

html body #app-view #config-management-page
  .cm-service-item.active {
  border-color: var(--g3-blue-500) !important;
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g3-blue-700),
      var(--g3-blue-500)
    ) !important;
  box-shadow: 0 12px 28px rgba(30, 99, 167, .20) !important;
}

html body #app-view #config-management-page
  .cm-service-item.active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body #app-view #config-management-page
  .cm-service-item.active .cm-service-icon {
  color: var(--g3-blue-700) !important;
  -webkit-text-fill-color: var(--g3-blue-700) !important;
  background: #ffffff !important;
}

html body #app-view #config-management-page label,
html body #app-view #config-management-page h3,
html body #app-view #config-management-page h4,
html body #app-view #config-management-page strong {
  color: var(--g3-ink) !important;
  -webkit-text-fill-color: var(--g3-ink) !important;
}

html body #app-view #config-management-page .eyebrow {
  color: var(--g3-blue-600) !important;
  -webkit-text-fill-color: var(--g3-blue-600) !important;
}

html body #app-view #config-management-page input,
html body #app-view #config-management-page select,
html body #app-view #config-management-page textarea {
  border-color: var(--g3-line) !important;
  color: var(--g3-ink) !important;
  background: #ffffff !important;
}

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

/* Active switch uses blue. */
html body #app-view #config-management-page
  .cm-switch input:checked + span::before,
html body #app-view #config-management-page
  .cm-switch input:checked + span {
  border-color: var(--g3-blue-600) !important;
}

/* Generic modal backdrop should be navy, not brown-red. */
html body .modal-bg,
html body [class*="modal-backdrop"],
html body [class*="dialog-backdrop"] {
  background: rgba(7, 22, 41, .68) !important;
}