.history-body { min-height: 100vh; background: #f2f5f7; }
.history-back-top { padding: 6px 9px; border: 1px solid rgba(255,255,255,.23); border-radius: 3px; color: #fff; font-size: 9px; font-weight: 700; text-decoration: none; }
.history-back-top:hover { color: #071f33; border-color: #f4c400; background: #f4c400; }
.history-page { width: calc(100% - 16px); max-width: calc(100% - 16px); margin: 8px 8px 25px; }
.history-kicker { color: #365f7c; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.history-titlebar { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 13px; border: 1px solid #d8e2e8; background: #fff; }
.history-titlebar h1 { margin: 2px 0 0; color: #071f33; font: 700 18px/1.05 Outfit, sans-serif; }
.history-titlebar p { margin: 3px 0 0; color: #7b8e99; font-size: 8px; }
.history-titlebar > a { padding: 7px 9px; border: 1px solid #cdd9e0; border-radius: 3px; color: #071f33; background: #fff; font-size: 8px; font-weight: 700; text-decoration: none; }
.history-titlebar > a:hover { border-color: #f4c400; background: #fff8dc; }

.history-summary-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 5px 0; }
.history-summary-strip article { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; min-height: 55px; padding: 8px 11px; border: 1px solid #d9e3e8; border-top: 3px solid #0b3552; background: #fff; }
.history-summary-strip article:before { content: ""; position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; background: linear-gradient(135deg, transparent 50%, rgba(11,53,82,.05) 50%); }
.history-summary-strip small { color: #4d6a7c; font-size: 8px; font-weight: 800; letter-spacing: .65px; }
.history-summary-strip strong { grid-row: 1 / 3; grid-column: 2; color: #071f33; font: 700 21px/1 Outfit, sans-serif; }
.history-summary-strip span { color: #8a9aa4; font-size: 8px; }
.history-summary-strip .completed { border-top-color: #f4c400; }
.history-summary-strip .active { border-top-color: #315f7c; }
.history-summary-strip .today { border-top-color: #f4c400; }
.history-summary-strip .cancelled { border-top-color: #df5050; }
.history-summary-strip .total { border-top-color: #071f33; }
.history-summary-strip .cancelled strong { color: #b33c3c; }
.history-summary-strip .completed strong { color: #071f33; }

.history-card { overflow: hidden; border: 1px solid #d5e0e6; background: #fff; }
.history-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 7px 9px; border-bottom: 1px solid #dfe7eb; }
.history-card-heading h2 { margin: 1px 0 0; color: #071f33; font: 700 14px/1 Outfit, sans-serif; }
.history-actions { display: flex; align-items: center; gap: 5px; }
.history-search { display: grid; grid-template-columns: 21px minmax(150px, 230px); align-items: center; height: 30px; padding: 0 7px; border: 1px solid #cbd8df; border-radius: 2px; color: #365f7c; background: #fff; }
.history-search span { font-size: 14px; }
.history-search input { width: 100%; height: 28px; padding: 0 4px; border: 0; color: #29485c; background: transparent; outline: 0; font-size: 9px; }
.history-search:focus-within { border-color: #0b3552; box-shadow: 0 0 0 2px rgba(11,53,82,.09); }
.history-result-count { padding: 5px 7px; border-radius: 10px; color: #4f6e80; background: #edf3f7; font-size: 8px; font-weight: 700; white-space: nowrap; }
.history-clear, .history-export, .history-refresh { height: 30px; padding: 0 9px; border-radius: 2px; font-size: 8px; font-weight: 800; }
.history-clear { border: 1px solid #cad7de; color: #071f33; background: #fff; }
.history-export { border: 0; color: #071f33; background: #f4c400; }
.history-refresh { width: 31px; padding: 0; border: 0; color: #fff; background: #0b3552; font-size: 14px; }
.history-clear:hover { border-color: #f4c400; background: #fff8dc; }
.history-export:hover, .history-refresh:hover { color: #fff; background: #071f33; }
.history-refresh:disabled { cursor: wait; opacity: .6; }

.history-table-wrap { overflow-x: auto; width: 100%; max-width: 100%; }
.history-table-wrap table { width: 100%; min-width: 1700px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.history-column-headings th { height: 38px; padding: 7px 6px; border-right: 1px solid #e2e9ed; color: #4f6878; background: #f7f9fa; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .2px; text-transform: uppercase; }
.history-filter-row th { height: 38px; padding: 5px 5px; border-top: 1px solid #dce5ea; border-right: 1px solid #e2e9ed; border-bottom: 1px solid #ccd8df; background: #eef3f6; }
.history-filter-row input, .history-filter-row select { width: 100%; height: 27px; padding: 0 6px; border: 1px solid #c3d1d9; border-radius: 2px; color: #2e4d61; background: #fff; outline: 0; font-size: 8px; }
.history-filter-row input:focus, .history-filter-row select:focus, .history-filter-row .filter-active { border-color: #0b3552; border-left: 3px solid #f4c400; background: #fffdf3; box-shadow: 0 0 0 2px rgba(11,53,82,.07); }
.history-table-wrap td { height: 54px; padding: 8px 6px; border-top: 1px solid #e2e9ed; border-right: 1px solid #edf1f3; color: #486475; background: #fff; font-size: 9px; line-height: 1.35; vertical-align: top; overflow-wrap: anywhere; }
.history-table-wrap tbody tr:hover td { background: #fffdf4; }
.history-table-wrap th:nth-child(1), .history-table-wrap td:nth-child(1) { width: 110px; }
.history-table-wrap th:nth-child(2), .history-table-wrap td:nth-child(2) { width: 100px; }
.history-table-wrap th:nth-child(3), .history-table-wrap td:nth-child(3) { width: 82px; }
.history-table-wrap th:nth-child(4), .history-table-wrap td:nth-child(4) { width: 112px; }
.history-table-wrap th:nth-child(5), .history-table-wrap td:nth-child(5) { width: 102px; }
.history-table-wrap th:nth-child(6), .history-table-wrap td:nth-child(6) { width: 112px; }
.history-table-wrap th:nth-child(7), .history-table-wrap td:nth-child(7), .history-table-wrap th:nth-child(8), .history-table-wrap td:nth-child(8) { width: 190px; }
.history-table-wrap th:nth-child(9), .history-table-wrap td:nth-child(9) { width: 84px; }
.history-table-wrap th:nth-child(10), .history-table-wrap td:nth-child(10) { width: 78px; }
.history-table-wrap th:nth-child(11), .history-table-wrap td:nth-child(11) { width: 74px; }
.history-table-wrap th:nth-child(12), .history-table-wrap td:nth-child(12) { width: 70px; }
.history-table-wrap th:nth-child(13), .history-table-wrap td:nth-child(13) { width: 105px; }
.history-table-wrap th:nth-child(14), .history-table-wrap td:nth-child(14) { width: 190px; }
.history-table-wrap th:nth-child(15), .history-table-wrap td:nth-child(15) { width: 92px; }
.history-trip-id { color: #0b3552; font-weight: 800; }
.history-trip-id small, .history-cell-detail { display: block; margin-top: 2px; color: #8798a2; font-size: 7px; }
.history-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.history-status:before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.history-status.cancelled { color: #9d3939; background: #fde5e5; }.history-status.cancelled:before { background: #df5050; }
.history-status.completed { color: #236448; background: #def3e8; }.history-status.completed:before { background: #36a56f; }
.history-price { color: #071f33; font-weight: 800; }
.history-metric { color: #274e65; font-weight: 700; }
.history-reason { color: #294b60; font-weight: 700; }
.history-note { display: block; margin-top: 3px; color: #7d8f99; font-size: 7px; font-weight: 400; }
.history-empty { height: 160px !important; color: #80939e !important; text-align: center; font-size: 9px !important; }

@media (max-width: 900px) {
  .history-summary-strip { grid-template-columns: repeat(3, 1fr); }
  .history-card-heading { align-items: flex-start; flex-direction: column; }
  .history-actions { width: 100%; flex-wrap: wrap; }
  .history-search { flex: 1 1 220px; grid-template-columns: 21px 1fr; }
}
@media (max-width: 600px) {
  .history-back-top { display: none; }
  .history-page { width: calc(100% - 12px); margin: 6px; }
  .history-titlebar { align-items: flex-start; gap: 9px; flex-direction: column; }
  .history-titlebar > a { align-self: stretch; text-align: center; }
  .history-summary-strip { grid-template-columns: 1fr 1fr; }
  .history-summary-strip article:last-child { grid-column: 1 / -1; }
  .history-actions .history-result-count { order: 5; }
  .history-export { flex: 1; }
}