.fuel-page-detail { max-width:960px; }
.fuel-list-head { display:grid; grid-template-columns:auto minmax(0,1fr) 48px; gap:12px; }
.fuel-list-head>h1 { grid-column:1; grid-row:1; align-self:baseline; }
.fuel-list-head>p { grid-column:2/-1; grid-row:1; align-self:baseline; justify-self:end; margin:0; text-align:right; }
.fuel-list-head>.fuel-balance { grid-column:1/3; grid-row:2; }
.fuel-list-head>.fuel-balances { grid-column:1/3; grid-row:2; }
.fuel-list-head>.fuel-refresh { grid-column:3; grid-row:2; }
.fuel-balance { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; align-items:baseline; width:100%; max-width:360px; min-width:0; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:var(--soft-raised); }
.fuel-balances { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:8px; width:min(100%,760px); min-width:0; }
.fuel-balances>.fuel-balance { max-width:none; }
.fuel-balance>span,.fuel-balance>small { display:block; color:var(--muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.fuel-balance>small { text-align:right; }
.fuel-balance>b { display:block; grid-column:1/-1; margin:0; color:var(--accent); font-size:17px; line-height:1.3; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fuel-balance.is-stale>small,.fuel-balance.is-stale>b { color:#886518; }
.fuel-balance.is-negative>b { color:var(--danger,#b34252); }
.fuel-detail-head { align-items:flex-start; gap:16px; margin-bottom:22px; }
.fuel-detail-head h1.fuel-plate { display:table; max-width:100%; padding:12px 16px; background:var(--paper); border:1px solid #c7d5de; border-radius:8px; box-shadow:var(--soft-raised); font-size:24px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.fuel-detail-head p { margin-top:10px; }
.fuel-detail-head .fuel-refresh { margin-top:3px; }
.fuel-period { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) 48px; gap:16px; align-items:end; margin:20px 0 24px; }
.fuel-period label { min-width:0; margin:0; }
.fuel-period select { min-width:0; width:100%; max-width:100%; height:48px; margin:0; box-shadow:var(--soft-raised); border:1px solid #c7d5de; padding:0 40px 0 12px; appearance:none; -webkit-appearance:none; }
.fuel-preset-control { display:block; position:relative; margin-top:6px; }
.fuel-preset-control>img { position:absolute; right:14px; top:15px; width:18px!important; height:18px!important; margin:0!important; transform:rotate(90deg); opacity:.6; pointer-events:none; }
.fuel-period .icon-action,.fuel-refresh { width:48px; height:48px; flex:none; padding:12px!important; }
.fuel-period img,.fuel-refresh img,.fuel-page .search-box img { display:block; width:22px; height:22px; margin:auto; }
.fuel-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
.fuel-date-control { display:flex; position:relative; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:0; height:48px; margin-top:6px; padding:0 12px; border:1px solid #c7d5de; border-radius:8px; background:var(--paper); box-shadow:var(--soft-raised); }
.fuel-date-value { min-width:0; font-size:16px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fuel-date-control img { width:18px; height:18px; flex:none; margin:0; opacity:.6; }
/* Native pickers remain accessible; their locale-dependent intrinsic width stays inside the frame. */
.fuel-date-control input[type=date] { position:absolute; inset:0; display:block; width:100%; min-width:0; max-width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; appearance:none; -webkit-appearance:none; cursor:pointer; }
.fuel-date-control input::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; cursor:pointer; }
.fuel-date-control:focus-within { outline:3px solid #186f7440; outline-offset:2px; }
.fuel-date-control:hover { background:var(--soft-hover); }
.fuel-summary { display:flex; flex-wrap:wrap; gap:16px 28px; padding:12px 0; border-block:1px solid var(--line); }
.fuel-summary span { display:block; color:var(--muted); font-size:12px; }
.fuel-summary b { display:block; margin-top:5px; font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fuel-volumes { margin:12px 0 20px; }
.fuel-volume { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 20px; align-items:baseline; padding:6px 0; font-size:13px; }
.fuel-volume>* { min-width:0; overflow-wrap:anywhere; }
.fuel-volume>span:last-child { min-width:90px; text-align:right; color:var(--muted); }
.fuel-list,.fuel-operations { display:grid; gap:14px; }
.fuel-tile,.fuel-operation { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:14px; box-shadow:var(--soft-raised); color:var(--ink); }
.fuel-tile { appearance:none; width:100%; text-align:left; }
.fuel-tile:hover { background:var(--soft-hover); }
.fuel-tile:active { box-shadow:var(--soft-inset); }
.fuel-tile:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fuel-tile-head,.fuel-tile-total,.fuel-operation-head,.fuel-operation-volume { display:flex; align-items:baseline; justify-content:space-between; gap:8px 12px; }
.fuel-tile-head { align-items:center; }
.fuel-tile-head strong { font-size:17px; overflow-wrap:anywhere; min-width:0; }
.fuel-tile-head img { width:20px; height:20px; flex:none; }
.fuel-tile-total { margin:14px 0 8px; flex-wrap:wrap; }
.fuel-tile-total>b { font-size:20px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fuel-tile-total>span,.fuel-last,.fuel-unmatched { color:var(--muted); font-size:12px; line-height:1.5; }
.fuel-last,.fuel-unmatched { display:block; margin-top:8px; }
.fuel-unmatched { color:#8b6100; }
.fuel-tile-volumes { display:grid; gap:5px; font-size:13px; }
.fuel-tile-volumes>span { display:flex; justify-content:space-between; gap:8px; }
.fuel-tile-volumes>span>span { min-width:0; overflow-wrap:anywhere; }
.fuel-tile-volumes b { flex:none; font-variant-numeric:tabular-nums; }
.fuel-operation-head { font-size:14px; flex-wrap:wrap; }
.fuel-operation-head time { color:var(--muted); }
.fuel-operation-volume { margin:12px 0 6px; flex-wrap:wrap; }
.fuel-operation p { margin:6px 0; font-size:13px; overflow-wrap:anywhere; }
.fuel-operation small { display:block; color:var(--muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.fuel-mileage { display:block; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.fuel-mileage-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fuel-mileage-metrics small { display:block; color:var(--muted); font-size:12px; }
.fuel-mileage-metrics b { display:block; font-size:16px; margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fuel-rate-title { display:block; margin-top:12px; font-size:12px; color:var(--muted); }
.fuel-rates { display:grid; gap:6px; margin-top:6px; font-size:13px; }
.fuel-rates>span { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fuel-rates b { font-variant-numeric:tabular-nums; }
.fuel-mileage-status,.fuel-estimate-note { display:block; font-size:12px; line-height:1.5; color:var(--muted); margin:10px 0 0; }
.fuel-estimate-note { margin:12px 0 16px; }
.fuel-analytics { margin:22px 0; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--soft-raised); }
.fuel-analytics .fuel-summary,.fuel-analytics .fuel-mileage-metrics,.fuel-analytics .fuel-rates>span { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
.fuel-analytics .fuel-summary { padding:0; border:0; }
.fuel-analytics .fuel-summary>div { min-width:0; }
.fuel-analytics .fuel-volumes { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.fuel-analytics h2 { display:flex; align-items:center; gap:9px; margin:18px 0; padding-top:18px; border-top:1px solid var(--line); font-size:16px; line-height:1.4; }
.fuel-analytics h2 img { width:22px; height:22px; opacity:.7; }
.fuel-analytics .fuel-mileage { margin:0; padding:0; border:0; }
.fuel-analytics .fuel-mileage-metrics { gap:16px; }
.fuel-analytics .fuel-mileage-metrics>span { display:grid; grid-template-rows:minmax(36px,auto) auto; align-content:start; min-width:0; }
.fuel-analytics .fuel-mileage-metrics small { font-size:13px; line-height:1.3; }
.fuel-analytics .fuel-mileage-metrics b { font-size:19px; line-height:1.3; margin-top:5px; }
.fuel-analytics .fuel-rate-title { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; font-size:13px; }
.fuel-analytics .fuel-rates { gap:0; margin-top:6px; font-size:14px; }
.fuel-analytics .fuel-rates>span { padding:10px 0; align-items:baseline; }
.fuel-analytics .fuel-rates>span+span { border-top:1px solid var(--line); }
.fuel-analytics .fuel-rates>span>span { overflow-wrap:anywhere; }
.fuel-analytics .fuel-rates b { min-width:0; text-align:left; overflow-wrap:anywhere; }
.fuel-analytics .fuel-estimate-note { margin:12px 0 0; border-top:1px solid var(--line); padding-top:12px; }
.fuel-overview-summary .fuel-summary { grid-template-columns:minmax(0,1fr) auto auto; }
.fuel-overview-summary .fuel-summary b { font-size:18px; }
.fuel-days { border-block:1px solid var(--line); margin:18px 0; }
.fuel-days summary { cursor:pointer; padding:14px 0; font-size:15px; font-weight:600; }
.fuel-days summary>span { color:var(--muted); font-size:12px; margin-left:8px; white-space:nowrap; }
.fuel-day { display:flex; gap:10px; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.fuel-day span { text-align:right; }
.fuel-day small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
@media(max-width:1000px) {
  .fuel-period { grid-template-columns:minmax(0,1fr) 48px; gap:16px; }
  .fuel-preset { grid-column:1; grid-row:1; }
  .fuel-apply { grid-column:2; grid-row:1; }
  .fuel-date-range { grid-column:1/-1; }
}
@media(max-width:620px) {
  .fuel-volume { gap:8px; }
  .fuel-volume>span:last-child { min-width:0; }
}
@media(max-width:359px) {
  .fuel-list-head { column-gap:8px; }
  .fuel-balance { padding-inline:9px; }
  .fuel-balance>b { font-size:16px; }
  .fuel-date-control { padding-inline:9px; gap:5px; }
  .fuel-date-control img { width:16px; height:16px; }
  .fuel-analytics { padding:14px; }
  .fuel-analytics .fuel-summary b,.fuel-analytics .fuel-mileage-metrics b { font-size:17px; }
}
@media(min-width:1100px) { .fuel-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.fuel-operation { display:block; width:100%; text-align:left; font:inherit; cursor:pointer; }
.fuel-operation:hover { background:var(--soft-hover); }
.fuel-operation:active { box-shadow:var(--soft-inset); }
.fuel-operation:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.fuel-operation-station { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.fuel-operation-station img { width:20px; height:20px; flex:none; }
.refuel-page { min-width:0; max-width:960px; margin:0 auto; }
.refuel-desktop-actions { display:none; }
.refuel-map-error { color:#8b6100; font-size:13px; }
@media(min-width:760px) { .refuel-desktop-actions { display:flex; justify-content:space-between; margin-bottom:18px; } .refuel-desktop-actions button { width:44px; height:44px; padding:10px; } .refuel-desktop-actions img { width:22px; height:22px; } }
.refuel-page .fuel-detail-head { margin-bottom:8px; }
.refuel-zone,.refuel-muted,.refuel-source-note,.refuel-track-note { font-size:13px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.refuel-zone { margin:0 0 20px; }
.refuel-page h2 { font-size:19px; line-height:1.35; margin:0 0 14px; }
.refuel-receipt { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:var(--soft-raised); }
.refuel-receipt-heading { display:flex; gap:14px; align-items:center; }
.refuel-receipt-heading>img { width:36px; height:36px; flex:none; opacity:.75; }
.refuel-receipt-heading>div { min-width:0; }
.refuel-receipt-heading h2 { margin:0 0 4px; overflow-wrap:anywhere; }
.refuel-receipt-heading p { margin:0; color:var(--muted); }
.refuel-receipt-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:20px 0; }
.refuel-receipt-values span { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; }
.refuel-receipt-values b { display:block; font-size:21px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.refuel-receipt-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.refuel-waybills { padding:26px 0 12px; }
.refuel-waybill-group { padding:16px 0; border-top:1px solid var(--line); }
.refuel-waybill-group h3 { font-size:14px; font-weight:650; color:var(--muted); margin:0 0 12px; }
.refuel-waybill { padding-left:13px; border-left:3px solid #a17e35; margin:14px 0; }
.refuel-waybill.during { border-color:#327b61; }
.refuel-waybill.after { border-color:#6d869e; }
.refuel-waybill>strong { display:block; font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
.refuel-waybill.during>strong { color:#287251; }
.refuel-waybill-number { display:block; color:var(--muted); font-size:12px; margin:4px 0 10px; }
.refuel-waybill dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.refuel-waybill dt { color:var(--muted); font-size:12px; margin-bottom:5px; }
.refuel-waybill dd { margin:0; font-size:14px; line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.refuel-route { border-top:1px solid var(--line); padding-top:20px; }
.refuel-route .section-title { align-items:center; gap:12px; }
.refuel-route .section-title h2 { margin:0; }
.refuel-route .section-title p { color:var(--muted); font-size:13px; margin:6px 0 0; }
.refuel-route .icon-action { width:44px; height:44px; padding:10px; flex:none; }
.refuel-route .icon-action img { width:22px; height:22px; }
.refuel-route [data-track-status] { color:var(--muted); font-size:13px; }
.refuel-map { height:380px; width:100%; border:1px solid var(--line); border-radius:8px; isolation:isolate; background:#dfe8e4; }
.refuel-map .leaflet-control-zoom a { background:#fff; color:#263c40; }
@media(max-width:359px) { .refuel-receipt { padding:14px; } .refuel-receipt-values b { font-size:18px; } .refuel-waybill dd { font-size:13px; } .refuel-map { height:320px; } }