/* QuotR admin: reduce stark white, softer backgrounds and QuotR feel */
:root {
  --quotr-content-bg: #f1f5f9;
  --quotr-card-bg: #ffffff;
  --quotr-border: #e2e8f0;
  --quotr-primary: #183152;
  --quotr-accent: #f59e0b;
}

/* Overall page background - soft slate gray */
#content,
.content,
.main-content,
[role="main"],
body.dark .max-w-full {
  background-color: var(--quotr-content-bg) !important;
}

/* Unfold: content wrapper and cards */
.max-w-screen-2xl.bg-white,
.bg-gray-50,
.bg-white.rounded-lg {
  background-color: var(--quotr-content-bg) !important;
}

/* Keep cards/panels slightly off-white for depth */
.rounded-xl.border.border-gray-200.bg-white,
.shadow-sm.bg-white {
  background-color: var(--quotr-card-bg) !important;
  border-color: var(--quotr-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Softer inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  background-color: #f8fafc !important;
  border-color: var(--quotr-border) !important;
}

/* QuotR primary (dark blue) for main actions */
a.bg-primary-600,
button.bg-primary-600,
[class*="bg-primary"] {
  background-color: var(--quotr-primary) !important;
}

a.bg-primary-600:hover,
button.bg-primary-600:hover {
  background-color: #1e3a5f !important;
}

/* Pipeline tracking: View details / Details button – full design (blue, gradient, shadow, hover lift) */
button.pipeline-detail-btn,
html:not(.dark) button.pipeline-detail-btn,
body:not(.dark) button.pipeline-detail-btn,
.dark button.pipeline-detail-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(37, 99, 235, 0.2) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
button.pipeline-detail-btn:hover,
.dark button.pipeline-detail-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px) !important;
}
button.pipeline-detail-btn:focus,
html:not(.dark) button.pipeline-detail-btn:focus,
body:not(.dark) button.pipeline-detail-btn:focus,
.dark button.pipeline-detail-btn:focus {
  outline: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
}
button.pipeline-detail-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}