/* Challans and Notifications in the desk's look: the list comes first, rows are tight, no blue. Presentation only. */
:root { --pg-text: #29313d; --pg-muted: #6b7886; --pg-line: #e9edf1; --pg-soft: #f1f3f5; --pg-soft-text: #465263; --pg-accent: #ff701e; --pg-tint: #fff0e6; --pg-tint-text: #8f3f0a; }

/* Top bar, on every page. */
html body .premium-topbar .bfc-btn-ghost, html body .premium-topbar button.bfc-btn { border-color: #ccd4df !important; color: var(--pg-soft-text) !important; }
html body .skip-link { background: var(--pg-text) !important; }

/* One calm surface instead of the photo behind the lists. */
html body .premium-main-frame:has(.challan-dashboard), html body .premium-main-frame:has(.bf-notifications), html body .premium-main-frame:has(.challan-create-page) { background: #f8f9fb !important; }
html body .challan-dashboard a:not(.bfc-btn):not(.bfc-stat), html body .bf-notifications a:not(.bfc-btn) { color: var(--pg-soft-text); }
html body .challan-dashboard .bfc-btn-ghost:not(.premium-primary-control):not(.premium-danger-control), html body .bf-notifications .bfc-btn { color: var(--pg-soft-text) !important; background: var(--pg-soft) !important; border-color: transparent !important; box-shadow: none !important; }
html body .challan-dashboard .bfc-btn-ghost:not(.premium-primary-control):not(.premium-danger-control):hover, html body .bf-notifications .bfc-btn:hover { background: #e7eaee !important; color: var(--pg-text) !important; }
html body .challan-dashboard input:focus, html body .challan-dashboard select:focus, html body .bf-notifications input:focus, html body .bf-notifications select:focus { border-color: var(--pg-accent) !important; box-shadow: 0 0 0 3px rgba(255, 112, 30, .16) !important; outline: 0 !important; }
html body .challan-dashboard input, html body .challan-dashboard select, html body .bf-notifications input, html body .bf-notifications select { height: 38px !important; min-height: 38px !important; border: 1px solid #ccd4df !important; border-radius: 10px !important; font-size: 14px !important; box-shadow: none !important; background-color: #fff !important; }

/* Challans: heading and filters on one line. */
html body .challan-dashboard { gap: 0 !important; }
html body .challan-page-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 10px !important; padding: 0 !important; min-height: 0 !important; }
html body .challan-page-head h1, html body .bf-page-head h1 { margin: 0 !important; font-size: 24px !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: var(--pg-text) !important; }
html body .challan-page-head .premium-primary-control { min-height: 38px !important; height: 38px !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 13px !important; }
html body .co-overview { margin: 0 !important; }
html body .co-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px 12px !important; margin: 0 0 10px !important; }
html body .co-periods { display: flex !important; gap: 2px !important; padding: 3px !important; border-radius: 10px !important; background: var(--pg-soft) !important; box-shadow: none !important; }
html body .co-periods .co-period { height: 32px !important; min-height: 32px !important; padding: 0 14px !important; border-radius: 8px !important; background: transparent !important; font-size: 13px !important; font-weight: 600 !important; }
html body .co-periods .co-period.is-current { background: #fff !important; color: var(--pg-text) !important; box-shadow: 0 1px 2px rgba(30, 45, 60, .1) !important; }
html body .co-filters { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
html body .co-filters label { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 12px !important; color: var(--pg-muted) !important; }
html body .co-filters select, html body .co-filters input { width: auto !important; min-width: 150px !important; }
html body .co-filters .bfc-btn { height: 38px !important; min-height: 38px !important; border-radius: 10px !important; font-size: 13px !important; }

/* The counts become one slim strip. */
html body .co-metrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; border: 1px solid var(--pg-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; overflow: hidden !important; }
html body .co-metrics .co-metric { display: flex !important; flex-direction: row !important; text-align: left !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 0 !important; padding: 10px 16px !important; border: 0 !important; border-left: 1px solid var(--pg-line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; color: var(--pg-text) !important; text-decoration: none !important; }
html body .co-metrics .co-metric:first-child { border-left: 0 !important; }
html body .co-metrics .co-metric::after, html body .co-metrics .co-metric::before { display: none !important; }
html body .co-metrics .co-metric:hover { background: #f8f9fb !important; }
html body .co-metrics .co-metric.is-current, html body .co-metrics .co-metric[aria-current="true"] { background: var(--pg-tint) !important; }
html body .co-metrics .bfc-stat-title { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pg-muted) !important; white-space: nowrap; }
html body .co-metrics .bfc-stat-value { margin: 0 !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 700 !important; color: var(--pg-text) !important; }
html body .co-caption { display: flex !important; justify-content: space-between !important; gap: 12px !important; margin: 6px 2px 4px !important; font-size: 12px !important; color: var(--pg-muted) !important; }
html body .co-caption a { color: var(--pg-tint-text) !important; }

/* Tabs. */
html body .co-tabs, html body .bf-notice-tabs { display: flex !important; gap: 18px !important; margin: 0 0 10px !important; padding: 0 2px !important; border-bottom: 1px solid var(--pg-line) !important; }
html body .co-tabs a, html body .bf-notice-tabs a { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 2px !important; margin-bottom: -1px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--pg-muted) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; }
html body .co-tabs a:hover, html body .bf-notice-tabs a:hover { color: var(--pg-text) !important; }
html body .co-tabs a.is-current, html body .bf-notice-tabs a[aria-current="page"] { border-bottom-color: var(--pg-accent) !important; color: var(--pg-text) !important; }
html body .co-tabs a span, html body .bf-notice-tabs a span { padding: 0 6px !important; border-radius: 6px !important; background: var(--pg-soft) !important; color: var(--pg-muted) !important; font-size: 12px !important; font-weight: 600 !important; }

/* Search sits on the page; it is not another card. */
html body .co-history-title { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
html body .challan-history-toolbar { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body .challan-history-toolbar label { flex: 1 !important; margin: 0 !important; }
html body .challan-history-toolbar label > span:first-child { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
html body .challan-history-toolbar > div { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
html body .challan-history-toolbar small { color: var(--pg-muted) !important; white-space: nowrap; }
html body .challan-history-toolbar .bfc-btn, html body .co-search .bfc-btn { height: 38px !important; min-height: 38px !important; border-radius: 10px !important; font-size: 13px !important; }
html body .challan-history-search { height: 38px !important; }
html body .co-list-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 10px !important; }
html body .co-list-head h2 { margin: 0 !important; font-size: 16px !important; color: var(--pg-text) !important; }
html body .co-list-head h2 span { color: var(--pg-muted) !important; font-size: 13px !important; font-weight: 600 !important; }
html body .co-search { display: flex !important; gap: 8px !important; margin: 0 !important; }

/* One sheet of tight rows. */
html body .challan-history-list { display: block !important; border: 1px solid var(--pg-line) !important; border-radius: 12px !important; background: #fff !important; overflow: hidden !important; }
html body .challan-history-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 52px 72px 76px 112px auto !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-top: 1px solid var(--pg-line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; min-height: 0 !important; transform: none !important; }
html body .challan-history-row:first-child { border-top: 0 !important; }
html body .challan-history-row:hover { background: #fafbfc !important; }
html body .challan-history-main { display: grid !important; grid-template-columns: 136px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 1px !important; align-items: center !important; min-width: 0 !important; }
html body .challan-history-main > .challan-reference, html body .challan-history-main > .challan-erp-list-reference { grid-column: 1 !important; justify-self: start !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--pg-muted) !important; font: 600 11px "Nunito Sans", sans-serif !important; }
html body .challan-history-main > .premium-vehicle { grid-column: 1 !important; grid-row: 2 / span 3 !important; align-self: start !important; margin: 0 !important; }
html body .challan-history-main .vehicle-plate { zoom: .72; margin: 0 !important; transform: none !important; }
html body .challan-history-main > small { grid-column: 2 !important; margin: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; font-size: 12px !important; line-height: 1.35 !important; color: var(--pg-muted) !important; }
html body .challan-history-main > small:nth-of-type(1) { color: var(--pg-text) !important; font-size: 13px !important; font-weight: 600 !important; }
html body .challan-history-creator { grid-column: 2 !important; display: flex !important; flex-wrap: nowrap !important; overflow: hidden !important; white-space: nowrap !important; gap: 0 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 12px !important; color: var(--pg-muted) !important; }
html body .challan-history-creator-avatar, html body .challan-history-creator small { display: none !important; }
html body .challan-history-creator-copy, html body .challan-history-creator-time { display: inline-flex !important; gap: 5px !important; margin: 0 !important; color: inherit !important; font: inherit !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; }
html body .challan-history-creator-copy *, html body .challan-history-creator-time * { color: inherit !important; font: inherit !important; text-transform: none !important; letter-spacing: 0 !important; }
html body .challan-history-creator-copy strong { color: var(--pg-soft-text) !important; font-weight: 600 !important; }
html body .challan-history-creator-copy span::before, html body .challan-history-creator-time::before { content: "·"; margin-right: 5px; }
html body .challan-fact { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: right !important; }
html body .challan-fact span { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pg-muted) !important; }
html body .challan-fact strong { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--pg-text) !important; }
html body .challan-history-status { margin: 0 !important; text-align: left !important; }
html body .challan-history-status .badge { font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; padding: 3px 8px !important; white-space: nowrap; }
html body .challan-history-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 6px !important; margin: 0 !important; }
html body .challan-history-actions .bfc-btn { min-height: 34px !important; height: 34px !important; font-size: 13px !important; border-radius: 10px !important; padding: 0 12px !important; white-space: nowrap; }
html body .challan-history-actions .bfc-btn-circle { width: 34px !important; padding: 0 !important; }
html body .challan-history-pagination, html body .co-pagination, html body .bf-notice-pagination { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 10px 0 0 !important; font-size: 13px !important; color: var(--pg-muted) !important; }

/* Trips waiting for a challan. */
html body .co-table-wrap, html body .bf-notice-table { border: 1px solid var(--pg-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; overflow: hidden !important; }
html body .co-table th, html body .bf-notice-table thead th { padding: 8px 14px !important; background: #f8f9fb !important; border-bottom: 1px solid var(--pg-line) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pg-muted) !important; }
html body .co-table td { padding: 8px 14px !important; border-bottom: 1px solid var(--pg-line) !important; font-size: 13px !important; color: var(--pg-text) !important; vertical-align: middle !important; }
html body .co-table tr:last-child td, html body .bf-notice-table tbody tr:last-child > * { border-bottom: 0 !important; }
html body .co-table td small { display: block !important; font-size: 12px !important; color: var(--pg-muted) !important; }
html body .co-table .vehicle-plate { zoom: .72; margin: 0 !important; transform: none !important; }
html body .co-actions { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 6px !important; }
html body .co-table td:nth-child(3) { white-space: nowrap !important; }
html body .co-state::before { background: var(--pg-muted) !important; }
html body .co-state.co-pending::before, html body .co-state[class*="ready"]::before { background: var(--pg-accent) !important; }
html body .co-state.co-completed::before, html body .co-state[class*="done"]::before { background: #2e8b57 !important; }
html body .co-actions .bfc-btn { white-space: nowrap; min-height: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 13px !important; padding: 0 12px !important; }
html body .co-actions .premium-primary-control, html body .co-actions .bfc-btn:not(.bfc-btn-ghost) { background: var(--pg-accent) !important; color: #2b1608 !important; }

/* Notifications. */
html body .bf-page-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 8px !important; padding: 0 !important; }
html body .bf-page-head > div:first-child { display: flex !important; align-items: baseline !important; gap: 10px !important; }
html body .bf-page-head p { margin: 0 !important; font-size: 13px !important; color: var(--pg-muted) !important; }
html body .bf-page-actions { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 0 !important; }
html body .bf-page-actions .bfc-btn { height: 36px !important; min-height: 36px !important; border-radius: 10px !important; font-size: 13px !important; padding: 0 12px !important; white-space: nowrap; }
html body .bf-notice-filters { display: grid !important; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, 170px)) auto auto !important; align-items: center !important; gap: 8px !important; margin: 0 0 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .bf-notice-filters label { display: block !important; margin: 0 !important; min-width: 0 !important; }
html body .bf-notice-filters label > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
html body .bf-notice-filters input:not([type=hidden]), html body .bf-notice-filters select { width: 100% !important; }
html body .bf-notice-filters .bfc-btn { height: 38px !important; min-height: 38px !important; border-radius: 10px !important; font-size: 13px !important; }
html body .bf-notice-table table { margin: 0 !important; }
html body .bf-notice-table tbody th, html body .bf-notice-table tbody td { padding: 7px 14px !important; border-bottom: 1px solid var(--pg-line) !important; background: #fff !important; vertical-align: middle !important; font-size: 13px !important; color: var(--pg-text) !important; }
html body .bf-notice-table tbody th { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; column-gap: 10px !important; font-weight: 400 !important; }
html body .bf-notice-table tbody tr:hover > * { background: #fafbfc !important; }
html body .bf-notice-title { order: -1; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--pg-text) !important; }
html body .bf-notice-type { margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pg-muted) !important; }
html body .bf-notice-detail { margin: 0 !important; font-size: 12px !important; }
html body .bf-notice-detail[open] { flex-basis: 100% !important; }
html body .bf-notice-detail summary { color: var(--pg-muted) !important; cursor: pointer; }
html body .bf-notice-detail summary:hover { color: var(--pg-text) !important; }
html body .bf-notice-detail p { margin: 4px 0 2px !important; color: var(--pg-soft-text) !important; }
html body .bf-notice-state { border-radius: 8px !important; padding: 3px 8px !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; }
html body .bf-notice-action { text-align: right !important; white-space: nowrap; }
html body .bf-notice-action .bfc-btn { height: 32px !important; min-height: 32px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 13px !important; }

/* Phones: same content stacked. */
@media (max-width: 760px) {
  html body .co-toolbar, html body .co-filters { width: 100% !important; }
  html body .co-filters select, html body .co-filters input { flex: 1 !important; min-width: 0 !important; }
  html body .co-filters label { flex: 1 !important; }
  html body .co-metrics .co-metric { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; padding: 8px 10px !important; }
  html body .co-metrics .bfc-stat-title { font-size: 11px !important; white-space: normal; }
  html body .co-metrics .bfc-stat-value { font-size: 17px !important; }
  html body .co-list-head { flex-wrap: wrap !important; }
  html body .co-search { width: 100% !important; }
  html body .co-search input { flex: 1 !important; min-width: 0 !important; }
  html body .challan-page-head h1, html body .bf-page-head h1 { text-align: left !important; }
  html body .challan-page-head { flex-wrap: nowrap !important; flex-direction: row !important; }
  html body .bf-page-head > div:first-child { flex-wrap: wrap !important; }
  html body .co-actions { flex-wrap: wrap !important; justify-content: flex-start !important; }
  html body .challan-history-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  html body .challan-history-toolbar > div { width: 100% !important; justify-content: space-between !important; }
  html body .challan-history-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px 10px !important; }
  html body .challan-history-main, html body .challan-history-status, html body .challan-history-actions { grid-column: 1 / -1 !important; }
  html body .challan-history-main { grid-template-columns: minmax(0, 1fr) !important; }
  html body .challan-history-main > .premium-vehicle { grid-row: auto !important; }
  html body .challan-history-creator { flex-wrap: wrap !important; white-space: normal !important; }
  html body .challan-history-main > small, html body .challan-history-creator { grid-column: 1 !important; }
  html body .challan-fact { text-align: left !important; }
  html body .challan-history-actions { justify-content: flex-start !important; flex-wrap: wrap !important; }
  html body .bf-page-head { flex-wrap: wrap !important; }
  html body .bf-notice-tabs, html body .co-tabs { overflow-x: auto !important; scrollbar-width: none; }
  html body .bf-notice-tabs a { white-space: nowrap; flex: none; }
  html body .bf-notice-filters { grid-template-columns: 1fr 1fr !important; }
  html body .bf-notice-search { grid-column: 1 / -1 !important; }
}

/* Challan list: three short lines that are never cut off, and numbers that line up. */
html body .challan-history-main > small { white-space: normal !important; overflow: visible !important; }
html body .challan-history-main > small:nth-of-type(1) { font-size: 14px !important; font-weight: 700 !important; }
html body .challan-history-creator { flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; gap: 0 10px !important; }
html body .challan-history-creator-copy, html body .challan-history-creator-time { flex: none !important; }
html body .challan-history-creator-time::before { content: none !important; }
html body .challan-history-creator-copy { gap: 0 !important; }
html body .challan-history-creator-copy span::before { content: ", " !important; margin-right: 0 !important; white-space: pre; }
html body .challan-fact strong { font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
  html body .challan-history-row { padding: 12px 16px !important; }
  html body .challan-history-main { grid-template-columns: 136px minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 3px !important; }
}

/* The phone menu sits inside the top bar: its links are not top-bar buttons. */
html body .premium-topbar .premium-mobile-panel .premium-nav-link:not([aria-current='page']) { color: #fff !important; border-color: transparent !important; }
html body .premium-topbar .premium-mobile-panel .premium-nav-link[aria-current='page'] { color: #3c2515 !important; border-color: transparent !important; }