:root {
  --crm-sidebar-width: 155px;
  --crm-navbar-height: 44px;
  --crm-radius: 1rem;
  --crm-topbar: #072f63;
  --crm-sidebar: #04264f;
  --crm-sidebar-active: #0b4e9b;
  --crm-sidebar-hover: #083f80;
  --crm-sidebar-text: #e7eff8;
  --crm-sidebar-muted: #6fb2ff;
}

body { background:var(--bs-tertiary-bg); min-height:100vh; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#123a82,#345fd0); color:#fff; border-radius:.55rem; min-width:3rem; height:2rem; padding:0 .65rem; font-size:.8rem; letter-spacing:.08em; box-shadow:0 .35rem .8rem rgba(18,58,130,.22); }
.brand-mark-lg { width:5rem; height:3rem; font-size:1rem; }

/* Shared PDPS application navigation — aligned with the Fleet Manager UI. */
.crm-topbar {
  min-height:var(--crm-navbar-height);
  padding:.18rem 0;
  background:var(--crm-topbar);
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index:1045;
}
.crm-topbar .crm-topbar-control {
  color:#f5f9ff;
  border:1px solid rgba(230,239,248,.58);
  background:transparent;
  border-radius:.38rem;
}
.crm-topbar .crm-topbar-control:hover,
.crm-topbar .crm-topbar-control:focus {
  color:#fff;
  border-color:#fff;
  background:rgba(255,255,255,.10);
}
.crm-topbar .dropdown-toggle::after { vertical-align:.12em; }
.crm-topbar .btn-primary { border-radius:.38rem; }
.crm-navbar-search { width:185px; }
.crm-navbar-search .form-control {
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(230,239,248,.45);
  border-radius:.38rem 0 0 .38rem;
}
.crm-navbar-search .form-control::placeholder { color:#d6e1ef; opacity:.9; }
.crm-navbar-search .form-control:focus { background:rgba(255,255,255,.10); border-color:#8fc7ff; box-shadow:none; }
.crm-navbar-search .btn { border-radius:0 .38rem .38rem 0; }

.crm-navbar-brand { flex:0 0 auto; min-width:0; margin-right:.4rem; }
.crm-navbar-logo-wrapper { display:flex; align-items:center; justify-content:flex-start; width:126px; height:36px; overflow:hidden; flex-shrink:0; }
.navbar .navbar-brand .crm-navbar-logo { display:block!important; width:100%!important; height:100%!important; max-width:126px!important; max-height:36px!important; object-fit:contain!important; object-position:left center; }

.crm-sidebar {
  background:var(--crm-sidebar)!important;
  color:var(--crm-sidebar-text);
  border-right:1px solid rgba(255,255,255,.10);
}

/* Desktop rail: fixed to the viewport below the topbar.
   Only .crm-sidebar-scroll can scroll; the rail and footer never grow with page content. */
.crm-sidebar-desktop {
  position:fixed;
  top:var(--crm-navbar-height);
  bottom:0;
  left:0;
  width:var(--crm-sidebar-width);
  height:calc(100vh - var(--crm-navbar-height));
  height:calc(100dvh - var(--crm-navbar-height));
  flex-direction:column;
  overflow:hidden;
  z-index:1035;
}
.crm-sidebar-scroll {
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:rgba(255,255,255,.48) rgba(255,255,255,.07);
}
.crm-sidebar-scroll::-webkit-scrollbar { width:9px; }
.crm-sidebar-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.07); }
.crm-sidebar-scroll::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.48);
  border-radius:999px;
  border:2px solid var(--crm-sidebar);
}
.crm-sidebar-scroll::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.66); }

/* Mobile uses a normal Bootstrap offcanvas and scrolls its body. */
.crm-sidebar-mobile { --bs-offcanvas-width:min(86vw,280px); }
.crm-sidebar-mobile .offcanvas-body {
  background:var(--crm-sidebar);
  overflow-y:auto;
  overflow-x:hidden;
}
.crm-sidebar-mobile-header { color:#fff; background:var(--crm-sidebar); border-color:rgba(255,255,255,.14)!important; }

.crm-sidebar-nav {
  gap:.16rem;
  padding:.75rem .45rem 1.25rem;
}
.crm-sidebar-footer {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.38rem;
  min-height:30px;
  padding:.45rem .62rem;
  border-top:1px solid rgba(255,255,255,.12);
  background:var(--crm-sidebar);
  color:#bfd1e6;
  font-size:.62rem;
  white-space:nowrap;
}
.crm-sidebar-status-dot { width:.38rem; height:.38rem; border-radius:50%; background:#20c997; flex:0 0 auto; }
.crm-sidebar .nav-link {
  display:flex;
  align-items:center;
  gap:.58rem;
  min-height:38px;
  color:var(--crm-sidebar-text);
  border-radius:.48rem;
  padding:.52rem .56rem;
  font-size:.82rem;
  line-height:1.2;
  font-weight:600;
  text-decoration:none;
  transition:background-color .12s ease,color .12s ease;
}
.crm-sidebar .nav-link span:not(.badge) { min-width:0; }
.crm-sidebar .nav-link:hover,
.crm-sidebar .nav-link:focus { color:#fff; background:var(--crm-sidebar-hover); }
.crm-sidebar .nav-link.active,
.crm-sidebar .nav-link.active:hover,
.crm-sidebar .nav-link.active:focus { color:#fff; background:var(--crm-sidebar-active); }
.crm-sidebar .nav-link i { color:#6fb2ff; font-size:.92rem; width:1.05rem; flex:0 0 1.05rem; text-align:center; }
.crm-sidebar .nav-link.active i { color:#fff; }
.crm-sidebar .nav-link .badge { font-size:.61rem; padding:.25rem .4rem; }
.nav-section {
  padding:.5rem .56rem .32rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:.58rem;
  line-height:1.2;
  color:var(--crm-sidebar-muted);
  font-weight:800;
}

.crm-main { min-width:0; }
.card { border-radius:var(--crm-radius); overflow:hidden; }
.card-header { border-bottom-color:var(--bs-border-color-translucent); }
.page-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.page-heading h1 { font-weight:750; font-size:clamp(1.8rem,3vw,2.45rem); margin:0 0 .25rem; }
.page-heading p { color:var(--bs-secondary-color); margin:0; }
.eyebrow { display:block; text-transform:uppercase; letter-spacing:.12em; color:var(--bs-primary); font-size:.72rem; font-weight:800; margin-bottom:.35rem; }
.metric-card { height:100%; display:flex; align-items:center; gap:1rem; background:var(--bs-body-bg); border:1px solid var(--bs-border-color-translucent); border-radius:var(--crm-radius); padding:1rem; box-shadow:var(--bs-box-shadow-sm); }
.metric-icon { width:2.8rem; height:2.8rem; border-radius:.85rem; display:grid; place-items:center; color:var(--bs-primary); background:var(--bs-primary-bg-subtle); font-size:1.25rem; flex:0 0 auto; }
.metric-value { font-size:1.65rem; line-height:1; font-weight:800; letter-spacing:-.03em; }
.metric-money { font-size:1.25rem; }
.metric-label { font-size:.78rem; color:var(--bs-secondary-color); margin-top:.35rem; }
.work-icon { width:2.55rem; height:2.55rem; display:grid; place-items:center; border-radius:.75rem; flex:0 0 auto; }
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--bs-secondary-color); }
.empty-state i { display:block; font-size:2rem; margin-bottom:.65rem; opacity:.7; }
.empty-state h3 { font-size:1rem; color:var(--bs-body-color); }
.empty-state p { margin-bottom:0; }
.detail-list { display:grid; grid-template-columns:minmax(7rem,42%) 1fr; column-gap:1rem; row-gap:.85rem; margin:0; }
.detail-list dt { color:var(--bs-secondary-color); font-weight:500; }
.detail-list dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.review-stepper { display:grid; gap:.65rem; }
.review-step { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--bs-border-color); border-radius:.85rem; color:var(--bs-body-color); text-decoration:none; transition:.15s ease; }
a.review-step:hover { border-color:var(--bs-primary); transform:translateY(-1px); box-shadow:var(--bs-box-shadow-sm); }
.review-step small { display:block; color:var(--bs-secondary-color); margin-top:.2rem; }
.step-icon { width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:50%; background:var(--bs-secondary-bg); color:var(--bs-secondary-color); }
.step-icon.complete { background:var(--bs-success-bg-subtle); color:var(--bs-success); }
.table thead th { white-space:nowrap; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.04em; font-size:.72rem; font-weight:700; padding-top:1rem; padding-bottom:1rem; }
.table tbody td { padding-top:.9rem; padding-bottom:.9rem; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at top left,rgba(13,110,253,.18),transparent 35%),radial-gradient(circle at bottom right,rgba(25,135,84,.12),transparent 30%),var(--bs-tertiary-bg); }
.login-card { width:min(100%,30rem); border-radius:1.35rem; }
.form-control,.form-select,.input-group-text,.btn { border-radius:.65rem; }
.input-group > :not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > :not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }

@media (min-width:992px) {
  .crm-main { margin-left:var(--crm-sidebar-width); }
}

@media (max-width:767.98px) {
  .metric-value { font-size:1.35rem; }
  .detail-list { grid-template-columns:1fr; row-gap:.2rem; }
  .detail-list dd { margin-bottom:.65rem; }
  .crm-navbar-logo-wrapper { width:108px; height:32px; }
  .navbar .navbar-brand .crm-navbar-logo { max-width:108px!important; max-height:32px!important; }
}

.chart-shell { min-height: 20rem; position: relative; }
.technical-question { padding: 1rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.technical-question:last-child { border-bottom: 0; }
.preserve-lines { white-space: pre-line; }
.timeline { position: relative; }
.timeline-item { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; padding-bottom: 1.25rem; }
.timeline-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--bs-primary); margin-top: .35rem; box-shadow: 0 0 0 .25rem var(--bs-primary-bg-subtle); }
.audit-json { white-space: pre-wrap; word-break: break-word; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .65rem; padding: .75rem; font-size: .75rem; max-height: 22rem; overflow: auto; }
.progress { background: var(--bs-secondary-bg); }
@media (max-width: 991.98px) { .chart-shell { min-height: 16rem; } }
.decision-question + .decision-question { border-top:1px solid var(--bs-border-color-translucent); }
.kpi-card { background:var(--bs-body-bg); }
.kpi-card .display-6 { font-size:clamp(1.5rem,2vw,2.25rem); }
.kpi-unit-icon { width:2.65rem; height:2.65rem; border-radius:.9rem; display:inline-grid; place-items:center; flex:0 0 auto; color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.13); border:1px solid rgba(var(--bs-primary-rgb),.18); font-size:1.25rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.kpi-card:hover .kpi-unit-icon { background:rgba(var(--bs-primary-rgb),.2); transform:translateY(-1px); }
.kpi-unit-icon { transition:background-color .15s ease,transform .15s ease; }
/* Management-ready KPI presentation */
.kpi-overview { background:linear-gradient(180deg,rgba(var(--bs-primary-rgb),.035),transparent 28%),var(--bs-body-bg); }
.kpi-headline-card,.kpi-progress-card { display:block; color:inherit; text-decoration:none; background:var(--bs-body-bg); border:1px solid var(--bs-border-color-translucent); border-radius:1rem; padding:1.1rem; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.kpi-headline-card { position:relative; overflow:hidden; }
.kpi-headline-card::before { content:""; position:absolute; inset:0 auto 0 0; width:.22rem; background:var(--bs-primary); opacity:.75; }
.kpi-headline-card:hover,.kpi-progress-card:hover { color:inherit; transform:translateY(-2px); border-color:rgba(var(--bs-primary-rgb),.45); box-shadow:var(--bs-box-shadow-sm); }
.kpi-headline-value { font-size:clamp(1.8rem,2.4vw,2.65rem); line-height:1; font-weight:800; letter-spacing:-.045em; }
.kpi-progress-value { font-size:clamp(1.45rem,1.7vw,1.9rem); line-height:1.1; font-weight:800; letter-spacing:-.035em; }
.kpi-unit-icon-sm { width:2.35rem; height:2.35rem; border-radius:.75rem; font-size:1.05rem; }
.kpi-overview .progress { height:.48rem; }
.kpi-group + .kpi-group { border-top:1px solid var(--bs-border-color-translucent); padding-top:1.25rem; }
@media (max-width:575.98px){ .kpi-headline-value { font-size:1.8rem; } }

/* RFQ list quick-status control: clearly visible without overpowering the table. */
.rfq-status-control {
  padding:.75rem;
  border:1px solid rgba(var(--bs-primary-rgb),.28);
  border-radius:.85rem;
  background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.13),rgba(var(--bs-primary-rgb),.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.rfq-status-control .form-control,.rfq-status-control .form-select { background-color:var(--bs-body-bg); }
