/* Contracts grid — mirrors app/modules/Contracts/views/ContractItemView.tsx
   Production renders a Grid container of tile cards (NOT a table). */

.contracts-page { display: flex; flex-direction: column; min-height: 0; }

/* EntityHeaderAndAmount.tsx:14-23 — count is rendered inside the h4 Typography
   with only a color override (#8B9092 = greyscale 400) and marginLeft 6px;
   font size/weight inherit from h4 (25/40/normal). */
.page-title .page-count {
  margin-left: 6px;
  color: var(--fx-grey-400);
}

.contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  margin-top: 4px;
}

.contract-tile {
  border-radius: 8px;
  max-height: 360px;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .15s ease, border-color .15s;
  background: white;
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid #E8ECEF;
}
.contract-tile:hover {
  box-shadow: 0 8px 24px rgba(15,30,38,.12);
  transform: translateY(-2px);
  border-color: rgba(86,135,147,.25);
}

/* Header: light teal background (matches prod #E2EEF1) */
/* ContractItemHeader from app/modules/Contracts/views/ContractItemView.tsx
   lines 86-100: padding '24px 32px', maxHeight 86px, gap 24px, bg #E2EEF1. */
.contract-tile-header {
  background: #E2EEF1;
  border: 1px solid var(--fx-greyscale-200);
  border-bottom-style: none;
  border-radius: 8px 8px 0 0;
  padding: 24px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;  /* matches ContractItemView.tsx:98 gap '24px' */
  min-height: 86px;
}
.contract-tile-header-left {
  display: flex; flex-direction: row; gap: 8px;  /* matches ContractItemView.tsx:101 sx={{ gap: '8px' }} */
  align-items: center;
  min-width: 0; flex: 1;
}
/* Pen-icon block from ContractItemView.tsx:103-117 */
.contract-tile-logo {
  width: 38px; height: 38px;
  background: white;
  border-radius: 4px;
  border: 1px solid rgba(23,35,38,.2);
  color: var(--fx-title);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contract-tile-logo .icon { font-size: 22px; color: var(--fx-title); }
/* ContractItemView.tsx:121-127 — column gap '3px' (NOT 2). */
.contract-tile-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Subtitle in this slot is wrapped with sx={{ lineHeight: '10px' }} per
   ContractItemView.tsx:129 — override the base 11/11 Subtitle. */
.contract-tile-header .contract-tile-subtitle { line-height: 10px; }
/* "Total cost breakdown" Subtitle uses sx={{ lineHeight: '16px' }} per
   ContractItemView.tsx:192. */
.contract-tile-cost .contract-tile-subtitle { line-height: 16px; }
/* Subtitle styled — color greyscale.400, font-size 11px, line-height 11px.
   Source: app/modules/Contracts/styles/contracts.styles.ts line 179 (Subtitle).
   No text-transform: production passes already-titleCased strings ("Buyer",
   "Seller", "Start Date") and "Total cost breakdown" intentionally only
   capitalizes the leading T. */
.contract-tile-subtitle {
  font-size: 11px;
  line-height: 11px;
  font-weight: 400;
  color: var(--fx-greyscale-400);
}
/* Title styled — #172326, 14px/18px, weight 700, letter-spacing 0.1, max 2 lines.
   Source: app/modules/Contracts/styles/contracts.styles.ts line 185 (Title). */
.contract-tile-title {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #172326;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 188px;
}
/* ContractItemView.tsx:143-144 — wrapping Box uses sx={{ alignSelf: 'end' }},
   placing the chip at the bottom of the 86px header (not centered). */
.contract-tile-status {
  align-self: flex-end;
  text-transform: capitalize;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
}
/* StatusChipStyled (chip.styles.js:51-83): bg = status[name].background,
   border = status[name].border, label = #5C6467 (greyscale 500) for outlined
   variant — NOT the border hex. */
.contract-tile-status-active {
  background: #EEF9F2;
  color: #5C6467;
  border: 1px solid #27AE60;
}
.contract-tile-status-expiring {
  background: #FEFAF6;
  color: #5C6467;
  border: 1px solid #F7C08F;
}

/* Body — white background, 24px gap between rows (matches sx={{ gap: '24px' }}) */
/* ContractItemBody from app/modules/Contracts/views/ContractItemView.tsx
   lines 168-180: padding '24px 32px', gap 24px. */
.contract-tile-body {
  background: white;
  border: 1px solid var(--fx-greyscale-200);
  border-top: none;
  padding: 24px 32px;
  display: flex; flex-direction: column;
  gap: 24px;
  flex: 1;
}

.contract-tile-row { display: flex; justify-content: space-between; align-items: center; }
/* PriceTitle styled — typography.title (#172326), font-size 25px, font-weight 400.
   Source: app/modules/Contracts/styles/contracts.styles.ts line 225 (PriceTitle). */
.contract-tile-cost .contract-tile-price {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 400;
  color: #172326;
  font-family: 'Open Sans';
  word-wrap: break-word;
  margin-top: 2px;
}
/* ContractItemView.tsx:199-206 — alignItems 'end', gap '6.15px'. */
.contract-tile-meta { display: flex; align-items: flex-end; gap: 6px; }
/* Category icon circle from app/modules/Contracts/views/ContractItemView.tsx
   lines 205-214: 40x40, border 0.5px solid primary['500'], padding 4px. */
.contract-tile-cat-circle {
  width: 40px; height: 40px;
  border: 0.5px solid var(--fx-primary-500);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  color: var(--fx-primary-500);
}
.contract-tile-cat-circle .icon { font-size: 20px; color: var(--fx-primary-500); }
/* FxScore variant='circle' from app/node_modules/@fixefy/fixefy-ui-components/
   dist/FxScore/styles/score.styles.js: container is a solid colored circle
   (background = palette.score[scoreColor]), text color common.white, fontWeight 700.
   Score tier color set inline via JS scoreColorFor(). */
.contract-tile-score {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: white;
  background: var(--fx-primary-500); /* default; overridden inline by scoreColorFor() */
}

.contract-tile-parties { gap: 16px; }
.contract-tile-parties .party {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
/* Production PartiesInfo renders a 70x16 logo via FxIcon — no company name text
   (app/modules/Contracts/views/ContractItemView.tsx:329). Demo falls back to
   text since we don't bundle buyer/seller logos; widen the clamp so names like
   "Atlas Consumer Goods" wrap to 2 lines instead of truncating to "Atlas...". */
.contract-tile-parties .party-logo {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.15px;
  color: var(--fx-title);
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
}

.contract-tile-dates { display: flex; flex-direction: column; gap: 6px; }
.contract-tile-date-row { display: flex; justify-content: space-between; }
.contract-tile-date-val { font-size: 12px; color: var(--fx-title); font-weight: 600; }

.contract-tile-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--fx-divider);
  font-size: 11px; color: var(--fx-body);
}
.contract-tile-invoices { font-weight: 600; color: var(--fx-primary-main); }
.contract-tile-services { color: var(--fx-grey-400); }

/* Contract detail page — mirrors app/modules/Contracts/contractView/content/ContractTabs/ContractHeader.tsx */
.contract-page { display: flex; flex-direction: column; gap: 16px; }

.contract-page-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.contract-page-header-left {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
}
/* Circular back button: 24x24 with 1px primary 500 border, hosting a 15x15
   arrow_left_big.svg. Verbatim from ContractHeader.tsx:104-122 and
   InvoiceHeader.tsx:586-609. */
.contract-back-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--fx-primary-500);
  background: transparent;
  color: var(--fx-primary-500);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.contract-back-btn:hover { background: rgba(86,135,147,.08); }
.contract-back-btn .icon { font-size: 18px; color: inherit; }

/* Dark-bg pen icon block (production uses theme.palette.typography.title bg) */
.contract-page-logo {
  width: 40px; height: 40px;
  background: var(--fx-title);
  color: white;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contract-page-logo .icon { color: white; font-size: 22px; }
/* PageTitle = theme.typography.h4 (25/40/400) + common.black.
   Source: app/node_modules/@fixefy/fixefy-ui-components/dist/FxStyledComponents/
   index.js line 182. */
.contract-page-title {
  margin: 0;
  font-size: 25px; line-height: 40px; font-weight: 400;
  letter-spacing: 0px;
  color: #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.contract-page-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Info tile row — production: row of Cards (Category | Parties | Period | Measurement specs) */
.contract-info-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
.contract-info-tile {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--fx-greyscale-200);
  padding: 16px 20px;
  min-height: 92px;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: space-between;
}
.contract-info-cat { display: flex; align-items: center; gap: 12px; }
.contract-parties { display: flex; justify-content: space-between; gap: 16px; }
.contract-period-dates { display: flex; justify-content: space-between; }
.contract-period-date { font-size: 13px; font-weight: 600; color: var(--fx-title); }
.contract-info-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--fx-grey-400);
}
.contract-score-inline {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: white;
  background: var(--fx-primary-500); /* overridden inline */
}

.contract-services-row {
  margin-bottom: 8px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* Section titles ('Lane Rates', 'Related Invoices') in production use the
   CardTemplate header style verbatim: Open Sans bold 14, lineHeight 24px,
   letter-spacing 0.1px, color common.black.
   Source: app/modules/Dashboards/content/CardTemplate.tsx lines 28-40. */
.contract-section-title {
  font-family: 'Open Sans';
  font-size: 14px; line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #000;
  margin: 16px 0 10px;
}

/* Keep legacy table wrap styling for any other tables that still use it. */
.contracts-table-wrap {
  overflow: hidden; border-radius: var(--fx-radius);
}
.contracts-table-wrap .data-table th {
  padding: 16px 8px 16px 0;
  color: var(--fx-grey-400);
  font-size: 12px;
  border-bottom: 1px solid var(--fx-divider);
}
.contracts-table-wrap .data-table th:first-child { padding-left: 16px; }
.contracts-table-wrap .data-table td {
  font-size: 13px;
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--fx-divider);
}
.contracts-table-wrap .data-table td:first-child { padding-left: 16px; }
.contracts-table-wrap .data-table td strong { font-weight: 600; }
.contracts-table-wrap .data-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Contract detail — FxTabs styled tab bar + tab panels
   Production: FxTabs from @fixefy/fixefy-ui-components renders an
   underline-style tab row with active border-bottom indicator.
   ============================================================ */
.ct-tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E0E5EB;
  margin: 8px 0 20px;
}
.ct-tab {
  font: 600 13px/16px "Open Sans";
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8B9092;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.ct-tab:hover { color: #4F6063; }
.ct-tab.active {
  color: #172326;
  border-bottom-color: #568793;
}

.ct-tab-panel { display: none; margin-bottom: 24px; }
.ct-tab-panel.active { display: block; animation: ctPanelIn .25s cubic-bezier(.2,.7,.2,1); }
@keyframes ctPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ct-empty {
  padding: 36px;
  text-align: center;
  color: #8B9092;
  font: 400 13px/20px "Open Sans";
  background: #ffffff;
  border: 1px dashed #E0E5EB;
  border-radius: 8px;
}

/* ─── Locations panel ─── */
.ct-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.ct-location-card {
  background: #ffffff;
  border: 1px solid #E0E5EB;
  border-radius: 8px;
  padding: 18px 20px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ct-location-card:hover {
  box-shadow: 0 6px 16px rgba(15, 30, 38, 0.08);
  transform: translateY(-1px);
}
.ct-location-arc {
  display: grid;
  grid-template-columns: 14px 1fr 14px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ct-location-arc svg { width: 100%; height: 24px; display: block; }
.ct-loc-pin {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 3px solid #568793;
  background: #ffffff;
  margin: 6px 0;
}
.ct-loc-pin.dest { background: #568793; border-color: #2F4F57; }
.ct-location-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.ct-loc-city.right { text-align: right; }
.ct-loc-label {
  font: 600 11px/14px "Open Sans";
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8B9092;
  margin-bottom: 4px;
}
.ct-loc-name {
  font: 600 14px/18px "Open Sans";
  color: #172326;
}
.ct-location-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #F0F2F5;
}
.ct-loc-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(86, 135, 147, 0.1);
  color: #2F4F57;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font: 600 11px/16px "Open Sans";
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.ct-loc-mode-chip .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 14px !important;
  line-height: 14px !important;
}
.ct-loc-unit {
  font: 500 12px/16px "Open Sans";
  color: #8B9092;
}

/* ─── Business Units panel ─── */
.ct-bu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.ct-bu-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #E0E5EB;
  border-radius: 8px;
  padding: 16px 18px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ct-bu-card:hover {
  box-shadow: 0 6px 16px rgba(15, 30, 38, 0.08);
  transform: translateY(-1px);
}
.ct-bu-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #E2EEF1 0%, #C6DDE2 100%);
  color: #2F4F57;
  display: flex; align-items: center; justify-content: center;
}
.ct-bu-icon .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 22px !important;
  line-height: 22px !important;
}
.ct-bu-title { font: 600 14px/18px "Open Sans"; color: #172326; }
.ct-bu-meta { font: 500 12px/16px "Open Sans"; color: #8B9092; margin-top: 2px; }

/* ─── Services panel ─── */
.ct-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ct-svc-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #E0E5EB;
  border-radius: 8px;
  padding: 14px 16px;
}
.ct-svc-bullet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #568793;
  margin-top: 6px;
  flex: 0 0 8px;
}
.ct-svc-title { font: 600 13px/18px "Open Sans"; color: #172326; }
.ct-svc-desc { font: 400 12px/18px "Open Sans"; color: #4F6063; margin-top: 2px; }

/* ── Fixenator health ring + annotation ───────────────────────────────── */
.ct-health-ring {
  flex-shrink: 0;
}
.contract-tile-expiring {
  border-left: 2px solid #ED323B;
}
.ct-fxn-annotation {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 6px;
  font: 500 11px/15px "Open Sans";
  margin: 8px 0;
}
.ct-fxn-annotation .icon {
  font-size: 12px !important;
  font-family: 'Material Icons Outlined' !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  flex-shrink: 0;
}
.ct-fxn-annotation-ok {
  background: rgba(39,174,96,.08);
  color: #27AE60;
}
.ct-fxn-annotation-warn {
  background: rgba(242,153,74,.08);
  color: #C2873B;
}
.ct-fxn-annotation-critical {
  background: rgba(237,50,59,.08);
  color: #ED323B;
}

/* ── Contracts dashboard header ──────────────────────────────────────── */
.ct-dashboard {
  display: flex; gap: 20px;
  margin-bottom: 20px;
  min-height: 200px;
}
.ct-dashboard-map {
  flex-shrink: 0; width: 340px;
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ct-map-label {
  font: 600 10px/13px 'Open Sans';
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #A8B4B8;
}
.ct-dashboard-map canvas { border-radius: 4px; display: block; }
.ct-map-legend { display: flex; gap: 12px; }
.ct-map-leg-item { display: flex; align-items: center; gap: 5px; font: 400 11px/14px 'Open Sans'; color: #4F6063; }
.ct-map-leg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.ct-dashboard-right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ct-dash-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.ct-dash-metric {
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  padding: 14px 16px;
}
.ct-dash-metric-warn { border-color: rgba(242,153,74,.35); background: rgba(242,153,74,.04); }
.ct-dash-metric-val {
  font: 600 22px/28px 'Open Sans';
  color: #172326;
  letter-spacing: -0.3px;
}
.ct-dash-metric-warn .ct-dash-metric-val { color: #C2873B; }
.ct-dash-metric-unit { font-size: 13px; font-weight: 400; color: #8B9092; }
.ct-dash-metric-lbl {
  font: 400 11px/15px 'Open Sans';
  color: #8B9092;
  margin-top: 3px;
}
.ct-dash-insight {
  flex: 1;
  background: rgba(86,135,147,.04);
  border: 1px solid rgba(86,135,147,.15);
  border-radius: 8px;
  padding: 14px 16px;
}
.ct-dash-insight-header {
  display: flex; align-items: center; gap: 5px;
  font: 700 10px/13px 'Open Sans';
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #568793;
  margin-bottom: 6px;
}
.ct-dash-insight-text {
  font: 400 13px/19px 'Open Sans';
  color: #2F4F57;
}

/* ── Detail route map panel ──────────────────────────────────────────── */
.ct-map-panel { display: flex; flex-direction: column; gap: 16px; }
.ct-detail-map-canvas {
  width: 100%; border-radius: 8px;
  border: 1px solid #E8ECEF;
  display: block;
}
.ct-map-panel-lanes { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-map-lane-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 6px;
  font: 400 12px/16px 'Open Sans';
  color: #2F4F57;
}
.ct-map-lane-origin, .ct-map-lane-dest { font-weight: 600; }
.ct-map-lane-mode {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(86,135,147,.1);
  color: #568793;
  font: 600 10px/14px 'Open Sans';
  letter-spacing: 0.3px;
}

/* ── Business Units redesign ─────────────────────────────────────────── */
.ct-bu-header { margin-bottom: 16px; }
.ct-bu-summary {
  display: flex; gap: 20px;
  margin-bottom: 12px;
  padding: 14px 20px;
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
}
.ct-bu-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.ct-bu-summary-val { font: 600 18px/24px 'Open Sans'; color: #172326; }
.ct-bu-summary-lbl { font: 400 11px/14px 'Open Sans'; color: #8B9092; }
.ct-bu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.ct-bu-card {
  background: white;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .15s;
}
.ct-bu-card:hover { box-shadow: 0 4px 12px rgba(86,135,147,.1); border-color: rgba(86,135,147,.25); }
.ct-bu-card-header { display: flex; align-items: center; gap: 10px; }
.ct-bu-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(86,135,147,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ct-bu-icon .icon { font-size: 18px !important; color: #568793; font-family: 'Material Icons Outlined' !important; text-transform: none !important; letter-spacing: 0 !important; }
.ct-bu-info { flex: 1; min-width: 0; }
.ct-bu-title { font: 700 13px/17px 'Open Sans'; color: #172326; }
.ct-bu-meta  { font: 400 11px/14px 'Open Sans'; color: #8B9092; margin-top: 2px; }
.ct-bu-trend { display: flex; align-items: center; gap: 3px; font: 600 11px/14px 'Open Sans'; flex-shrink: 0; }
.ct-bu-trend.positive { color: #27AE60; }
.ct-bu-trend.negative { color: #ED323B; }
.ct-bu-trend.neutral  { color: #8B9092; }
.ct-bu-trend .icon { font-size: 14px !important; font-family: 'Material Icons Outlined' !important; text-transform: none !important; letter-spacing: 0 !important; }
.ct-bu-spend { font: 400 20px/26px 'Open Sans'; color: #172326; }
.ct-bu-compliance-row { display: flex; justify-content: space-between; align-items: center; }
.ct-bu-compliance-lbl { font: 400 11px/14px 'Open Sans'; color: #8B9092; }
.ct-bu-compliance-val { font: 700 13px/16px 'Open Sans'; }
.ct-bu-bar { height: 4px; border-radius: 2px; background: #F0F3F5; overflow: hidden; }
.ct-bu-bar-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }

/* ── Services redesign ───────────────────────────────────────────────── */
.ct-svc-header { margin-bottom: 16px; }
.ct-svc-rows { display: flex; flex-direction: column; gap: 2px; }
.ct-svc-row {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: white;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  transition: box-shadow .12s;
}
.ct-svc-row:hover { box-shadow: 0 2px 8px rgba(86,135,147,.08); border-color: rgba(86,135,147,.2); }
.ct-svc-row-name { display: flex; align-items: center; gap: 8px; }
.ct-svc-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ct-svc-row-title { font: 600 13px/18px 'Open Sans'; color: #172326; }
.ct-svc-row-rates { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ct-svc-rate-col { display: flex; flex-direction: column; gap: 2px; }
.ct-svc-rate-lbl { font: 400 10px/13px 'Open Sans'; color: #A8B4B8; letter-spacing: 0.3px; text-transform: uppercase; }
.ct-svc-rate-val { font: 600 13px/17px 'Open Sans'; color: #172326; }
.ct-svc-rate-bench { color: #8B9092; font-weight: 400; }
.ct-svc-row-bars { display: flex; align-items: center; gap: 12px; }
.ct-svc-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ct-svc-bar-label { font: 400 10px/12px 'Open Sans'; color: #A8B4B8; }
.ct-svc-bar-track { height: 5px; border-radius: 3px; background: #F0F3F5; overflow: hidden; }
.ct-svc-bar-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.ct-svc-compliance { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.ct-svc-compliance-lbl { font: 400 10px/12px 'Open Sans'; color: #A8B4B8; }

/* ── Tab icon ────────────────────────────────────────────────────────── */
.ct-tab-icon {
  font-size: 14px !important;
  vertical-align: middle;
  margin-right: 4px;
  font-family: 'Material Icons Outlined' !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Shipments tab ───────────────────────────────────────────────────── */
.ct-shp-summary {
  display: flex; gap: 0;
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.ct-shp-sum-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px;
  border-right: 1px solid #E8ECEF;
  flex: 1;
}
.ct-shp-sum-stat:last-child { border-right: none; }
.ct-shp-sum-total { background: white; }
.ct-shp-sum-val { font: 600 20px/26px 'Open Sans'; color: #172326; }
.ct-shp-sum-lbl { font: 400 11px/14px 'Open Sans'; color: #8B9092; }

.ct-shp-table-wrap { overflow: auto; }
.ct-shp-table { table-layout: auto; }
.ct-shp-table tbody tr { cursor: pointer; }
.ct-shp-row:hover { background: rgba(86,135,147,.04) !important; }
.ct-shp-row-open { background: rgba(86,135,147,.06) !important; }
.ct-shp-row-risk td:first-child { border-left: 3px solid #ED323B; }
.ct-shp-id { display: flex; align-items: center; gap: 6px; }
.ct-shp-id-val { font: 600 12px/16px 'Open Sans'; color: #172326; }
.ct-shp-risk-dot { width: 6px; height: 6px; border-radius: 50%; background: #ED323B; flex-shrink: 0; animation: cmdk-dot-pulse 1.5s ease-in-out infinite; }
.ct-shp-lane { font: 400 12px/16px 'Open Sans'; color: #4F6063; }
.ct-shp-state-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font: 600 10px/14px 'Open Sans';
  letter-spacing: 0.3px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Expandable detail row */
.ct-shp-detail td { padding: 0 !important; }
.ct-shp-detail-inner {
  padding: 16px 20px;
  background: #F7F8FA;
  border-top: 1px solid #E8ECEF;
  border-bottom: 1px solid #E8ECEF;
}
.ct-shp-detail-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 12px; }
.ct-shp-detail-col { display: flex; flex-direction: column; gap: 8px; }
.ct-shp-dfield { display: flex; flex-direction: column; gap: 2px; }
.ct-shp-dlabel { font: 400 10px/13px 'Open Sans'; color: #A8B4B8; text-transform: uppercase; letter-spacing: 0.4px; }
.ct-shp-dval   { font: 500 13px/17px 'Open Sans'; color: #172326; }
.ct-shp-detail-flag { margin-top: 8px; }

/* ── Quotations tab ──────────────────────────────────────────────────── */
.ct-qt-summary {
  display: flex; gap: 0;
  background: #F7F8FA;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ct-qt-sum-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 20px;
  border-right: 1px solid #E8ECEF;
  flex: 1;
}
.ct-qt-sum-stat:last-child { border-right: none; }
.ct-qt-sum-val { font: 600 20px/26px 'Open Sans'; color: #172326; }
.ct-qt-sum-lbl { font: 400 11px/14px 'Open Sans'; color: #8B9092; }

.ct-qt-groups { display: flex; flex-direction: column; gap: 20px; }
.ct-qt-shipment-group {}
.ct-qt-shipment-label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 8px;
  border-bottom: 2px solid #E8ECEF;
  margin-bottom: 12px;
}
.ct-qt-shipment-id { font: 700 13px/17px 'Open Sans'; color: #172326; }
.ct-qt-shipment-lane { font: 400 12px/16px 'Open Sans'; color: #8B9092; }
.ct-qt-shipment-count {
  margin-left: auto;
  font: 400 11px/14px 'Open Sans';
  color: #A8B4B8;
  background: #F0F3F5;
  padding: 2px 8px;
  border-radius: 999px;
}

.ct-qt-card {
  background: white;
  border: 1px solid #E8ECEF;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  transition: box-shadow .12s;
}
.ct-qt-card:hover { box-shadow: 0 2px 8px rgba(86,135,147,.08); }
.ct-qt-card-approved { border-left: 3px solid #27AE60; }
.ct-qt-card-rejected { border-left: 3px solid #ED323B; opacity: 0.7; }
.ct-qt-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ct-qt-card-meta { display: flex; align-items: center; gap: 10px; }
.ct-qt-id   { font: 700 13px/17px 'Open Sans'; color: #172326; }
.ct-qt-seller { font: 400 12px/16px 'Open Sans'; color: #8B9092; }
.ct-qt-card-right { display: flex; align-items: center; gap: 12px; }
.ct-qt-value { font: 700 16px/20px 'Open Sans'; color: #172326; }
.ct-qt-charges-table { margin-top: 4px; }
.ct-qt-charges-table th, .ct-qt-charges-table td { padding: 7px 12px; font-size: 12px; }
.ct-qt-charges-total td { font: 600 12px/16px 'Open Sans'; background: #F7F8FA; border-top: 2px solid #E8ECEF !important; }
.ct-qt-expires { margin-top: 10px; font: 400 11px/14px 'Open Sans'; color: #A8B4B8; }