/* Стили раздела «Калькулятор поездок».

   Перенесены из отдельного приложения и целиком заперты внутрь контейнера
   раздела (#fuel-view-wrap): ни один селектор не действует на остальной портал.
   Цвета берутся из переменных портала (--bg, --text, --accent и т.д.), поэтому
   раздел сам по себе поддерживает светлую и тёмную тему.
   Переменные темы, сброс стилей, шапка приложения, тосты и модалка из
   оригинального файла НЕ переносились — всё это у портала своё.
*/
/* Две переменные, которых в палитре портала нет: берём значения из
   оригинального оформления раздела. Объявлены внутри контейнера, наружу
   не видны. Светлая тема — своим блоком ниже. */
#fuel-view-wrap{
  --glow-strong:0 0 18px rgba(77,141,240,.65), 0 0 36px rgba(77,141,240,.35);
  --red-dim:rgba(240,85,107,.16);
}
[data-theme="light"] #fuel-view-wrap{
  --glow-strong:0 0 18px rgba(47,111,224,.45), 0 0 36px rgba(47,111,224,.25);
  --red-dim:rgba(214,48,80,.12);
}
#fuel-view-wrap .dim{color:var(--text3);}
#fuel-view-wrap ::selection{background:var(--accent-dim);color:var(--accent-h);}
@keyframes fuViewIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
#fuel-view-wrap .view{animation:none;}
}
#fuel-view-wrap .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px;padding-bottom:15px;
  border-bottom:1px solid var(--border);
}
#fuel-view-wrap .page-title{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:-.4px;color:var(--text);line-height:1.2;}
#fuel-view-wrap .page-sub{font-size:12.5px;color:var(--text3);margin-top:4px;}
#fuel-view-wrap .page-actions{display:flex;gap:8px;flex-wrap:wrap;}
#fuel-view-wrap .panel{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  margin-bottom:16px;box-shadow:var(--card-shadow);transition:background .25s,border-color .25s;
  overflow:hidden;
}
#fuel-view-wrap .panel-head{padding:13px 18px;border-bottom:1px solid var(--border);background:var(--bg2);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
#fuel-view-wrap .panel-title{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
  color:var(--text);letter-spacing:-.2px;}
#fuel-view-wrap .panel-note{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
#fuel-view-wrap .panel-actions{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;}
#fuel-view-wrap .panel-body{padding:18px;}
#fuel-view-wrap .panel-body.flush{padding:0;}
#fuel-view-wrap .panel-foot{padding:13px 18px;border-top:1px solid var(--border);background:var(--bg2);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
#fuel-view-wrap .btn{padding:8px 14px;background:var(--accent);border:1px solid var(--accent);
  border-radius:8px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .14s,border-color .14s,box-shadow .18s,color .14s;
}
#fuel-view-wrap .btn:hover{background:var(--accent-h);border-color:var(--accent-h);box-shadow:var(--glow-strong);color:#fff;}
#fuel-view-wrap .btn:active{transform:translateY(1px);}
#fuel-view-wrap .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;background:var(--accent);}
#fuel-view-wrap .btn-sec{padding:8px 14px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:8px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .14s,border-color .14s,box-shadow .18s,color .14s;
}
#fuel-view-wrap .btn-sec:hover{border-color:var(--accent);color:var(--accent-h);
  box-shadow:0 0 0 1px var(--accent),var(--glow-strong);}
#fuel-view-wrap .btn-sec:active{transform:translateY(1px);}
#fuel-view-wrap .btn-sec:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
#fuel-view-wrap .btn-icon{padding:4px 8px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);
  font-size:11.5px;font-weight:600;color:var(--text2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;
  transition:background .12s,color .12s,border-color .12s;
}
#fuel-view-wrap .btn-icon:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
#fuel-view-wrap .btn-icon.danger:hover{background:var(--red-dim);border-color:var(--red);color:var(--red);}
#fuel-view-wrap .btn-link{background:none;border:none;padding:0;color:var(--accent-h);
  font-size:12px;font-weight:600;cursor:pointer;}
#fuel-view-wrap .btn-link:hover{text-decoration:underline;}
#fuel-view-wrap .seg{display:inline-flex;gap:3px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;padding:3px;}
#fuel-view-wrap .seg label{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:7px;
  color:var(--text3);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s,box-shadow .18s;}
#fuel-view-wrap .seg input{position:absolute;opacity:0;pointer-events:none;}
#fuel-view-wrap .seg label:has(input:checked){background:var(--accent);color:#fff;
  box-shadow:0 0 14px rgba(77,141,240,.5),0 0 28px rgba(77,141,240,.25);}
[data-theme="light"] #fuel-view-wrap .seg label:has(input:checked){box-shadow:0 0 14px rgba(47,111,224,.4),0 0 28px rgba(47,111,224,.2);}
#fuel-view-wrap .seg label:not(:has(input:checked)):hover{background:var(--bg4);color:var(--text);
  box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(77,141,240,.4);}
[data-theme="light"] #fuel-view-wrap .seg label:not(:has(input:checked)):hover{box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(47,111,224,.3);}
#fuel-view-wrap .form-label{font-size:10.5px;color:var(--text3);margin-bottom:6px;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;display:block;}
#fuel-view-wrap .form-label .opt{text-transform:none;letter-spacing:0;font-weight:500;}
#fuel-view-wrap .form-input{width:100%;padding:10px 13px;background:var(--bg3);border:1px solid var(--border);
  border-radius:10px;color:var(--text);font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
#fuel-view-wrap .form-input:hover{border-color:var(--border2);}
#fuel-view-wrap .form-input:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--bg2);}
#fuel-view-wrap .form-input::placeholder{color:var(--text3);}
#fuel-view-wrap input.form-input[type="number"]{font-family:'JetBrains Mono',monospace;font-size:12.5px;}
#fuel-view-wrap select.form-input{appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%2394a6c8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
#fuel-view-wrap .form-hint{font-size:11px;color:var(--text3);line-height:1.5;margin-top:5px;}
#fuel-view-wrap .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#fuel-view-wrap .form-grid.c3{grid-template-columns:repeat(3,1fr);}
#fuel-view-wrap .form-grid.c4{grid-template-columns:repeat(4,1fr);}
#fuel-view-wrap .form-row{margin-bottom:14px;}
#fuel-view-wrap .form-row:last-child{margin-bottom:0;}
#fuel-view-wrap .tbl-wrap{overflow-x:auto;}
#fuel-view-wrap table.tbl{width:100%;border-collapse:collapse;}
#fuel-view-wrap table.tbl thead th{padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--border2);
  color:var(--text3);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;text-align:left;white-space:pre-line;vertical-align:bottom;
  position:sticky;top:0;z-index:5;
}
#fuel-view-wrap table.tbl tbody td{padding:9px 14px;border-bottom:1px solid var(--border);
  font-size:12.5px;color:var(--text);vertical-align:middle;
}
#fuel-view-wrap table.tbl tbody tr{transition:background .12s;}
#fuel-view-wrap table.tbl tbody tr:hover td{background:var(--bg3);}
#fuel-view-wrap table.tbl tbody tr:last-child td{border-bottom:none;}
#fuel-view-wrap .td-num{text-align:right;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  font-variant-numeric:tabular-nums;color:var(--text2);}
#fuel-view-wrap .td-center{text-align:center;}
#fuel-view-wrap .td-mono{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);}
#fuel-view-wrap tr.row-idle td{color:var(--text3);background:color-mix(in srgb,var(--bg3) 45%,transparent);}
#fuel-view-wrap tr.row-idle .td-num{color:var(--text3);}
#fuel-view-wrap tr.row-weekend td{background:color-mix(in srgb,var(--bg3) 70%,transparent);}
#fuel-view-wrap tr.row-refuel td{box-shadow:inset 2px 0 0 var(--gold);}
#fuel-view-wrap tr.row-refuel .td-refuel{color:var(--gold);font-weight:700;}
#fuel-view-wrap .route-cell{font-size:11.5px;color:var(--text2);line-height:1.45;min-width:250px;}
#fuel-view-wrap .td-gap{color:var(--gold);font-weight:600;cursor:help;}
#fuel-view-wrap .route-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-h);}
#fuel-view-wrap .badge{display:inline-block;padding:3px 9px;background:var(--accent-dim);
  color:var(--accent-h);border-radius:20px;font-size:11px;font-weight:600;line-height:1.4;}
#fuel-view-wrap .badge-gold{background:var(--gold-dim);color:var(--gold);}
#fuel-view-wrap .badge-green{background:var(--green-dim);color:var(--green);}
#fuel-view-wrap .badge-muted{background:var(--bg3);color:var(--text3);}
#fuel-view-wrap .num-chip{font-size:10.5px;font-family:'JetBrains Mono',monospace;color:var(--text3);
  background:var(--bg3);padding:2px 7px;border-radius:8px;}
#fuel-view-wrap .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
#fuel-view-wrap .stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:15px 17px;
  box-shadow:var(--card-shadow);transition:border-color .15s,transform .15s;
}
#fuel-view-wrap .stat:hover{border-color:var(--border2);transform:translateY(-1px);}
#fuel-view-wrap .stat-label{font-size:10.5px;color:var(--text3);font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;margin-bottom:7px;}
#fuel-view-wrap .stat-value{font-family:'Sora',sans-serif;font-size:25px;font-weight:700;color:var(--text);
  letter-spacing:-.6px;line-height:1;font-variant-numeric:tabular-nums;}
#fuel-view-wrap .stat-value .unit{font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:600;
  color:var(--text3);margin-left:5px;letter-spacing:0;}
#fuel-view-wrap .stat.accent .stat-value{color:var(--accent-h);}
#fuel-view-wrap .alert{padding:11px 14px;border-radius:11px;font-size:12.5px;line-height:1.55;
  background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);
  color:var(--text2);margin-bottom:14px;
}
#fuel-view-wrap .alert strong{color:var(--text);}
#fuel-view-wrap .alert-warn{border-left-color:var(--gold);background:color-mix(in srgb,var(--gold-dim) 55%,var(--bg3));}
#fuel-view-wrap .alert-err{border-left-color:var(--red);background:color-mix(in srgb,var(--red-dim) 55%,var(--bg3));}
#fuel-view-wrap .alert-ok{border-left-color:var(--green);background:color-mix(in srgb,var(--green-dim) 55%,var(--bg3));}
#fuel-view-wrap .alert ul{margin:7px 0 0;padding-left:19px;}
#fuel-view-wrap .alert li{margin-bottom:3px;}
#fuel-view-wrap .alert li:last-child{margin-bottom:0;}
#fuel-view-wrap .hintbox{margin-bottom:14px;padding:10px 13px;border-radius:10px;
  background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);
  font-size:12px;color:var(--text2);line-height:1.55;}
#fuel-view-wrap .hintbox b{color:var(--text);}
#fuel-view-wrap .fu-modal-bg{position:fixed;inset:0;background:rgba(6,9,16,.62);
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fuBgFade .2s ease;
}
@keyframes fuBgFade{from{opacity:0;}to{opacity:1;}}
#fuel-view-wrap .fu-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;
  width:540px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:26px;position:relative;
  box-shadow:var(--shadow);animation:fuModalIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes fuModalIn{from{opacity:0;transform:scale(.96) translateY(14px);}to{opacity:1;transform:scale(1) translateY(0);}}
#fuel-view-wrap .fu-modal-title{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:var(--text);
  margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--border);
  letter-spacing:-.3px;
}
#fuel-view-wrap .fu-modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:22px;}
#fuel-view-wrap .addr-input{width:100%;padding:7px 10px;background:transparent;border:1px solid transparent;
  border-radius:8px;color:var(--text);font-size:12.5px;font-family:inherit;outline:none;
  transition:border-color .14s,background .14s,box-shadow .14s;}
#fuel-view-wrap .addr-input:hover{border-color:var(--border);background:var(--bg3);}
#fuel-view-wrap .addr-input:focus{border-color:var(--accent);background:var(--bg3);box-shadow:var(--ring);}
#fuel-view-wrap .coord-input{width:104px;padding:6px 9px;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;color:var(--text2);font-family:'JetBrains Mono',monospace;font-size:11px;
  outline:none;transition:border-color .14s,box-shadow .14s,color .14s;}
#fuel-view-wrap .coord-input:focus{border-color:var(--accent);box-shadow:var(--ring);color:var(--text);}
#fuel-view-wrap .coord-input.empty{border-color:var(--gold);color:var(--gold);}
#fuel-view-wrap .limit-input{width:58px;padding:6px 8px;text-align:center;background:var(--bg3);
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;outline:none;
  transition:border-color .14s,box-shadow .14s;}
#fuel-view-wrap .limit-input:focus{border-color:var(--accent);box-shadow:var(--ring);}
#fuel-view-wrap .limit-input:disabled{opacity:.4;cursor:not-allowed;}
#fuel-view-wrap tr.office-row td{background:var(--accent-dim);}
#fuel-view-wrap tr.office-row:hover td{background:var(--accent-dim);}
#fuel-view-wrap .office-flag{display:inline-flex;align-items:center;padding:3px 9px;
  background:var(--accent);color:#fff;border-radius:20px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;margin-left:8px;}
#fuel-view-wrap .row-actions{display:flex;gap:5px;justify-content:flex-end;}
#fuel-view-wrap .refuel-row{display:grid;grid-template-columns:120px 150px 1fr auto;gap:11px;
  align-items:end;margin-bottom:9px;}
#fuel-view-wrap .refuel-row:last-child{margin-bottom:0;}
#fuel-view-wrap .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:14px;}
#fuel-view-wrap .rcard{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;position:relative;box-shadow:var(--card-shadow);
  transition:border-color .15s,transform .15s,box-shadow .15s;cursor:pointer;
}
#fuel-view-wrap .rcard:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:var(--card-shadow),0 0 0 1px var(--accent),var(--glow);}
#fuel-view-wrap .rcard-period{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;
  color:var(--text);letter-spacing:-.3px;}
#fuel-view-wrap .rcard-sub{font-size:11.5px;color:var(--text3);margin:3px 0 13px;}
#fuel-view-wrap .rcard-stats{display:flex;gap:18px;margin-bottom:13px;}
#fuel-view-wrap .rcard-stats div{display:flex;flex-direction:column;gap:2px;}
#fuel-view-wrap .rcard-stats small{font-size:9.5px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;}
#fuel-view-wrap .rcard-stats b{font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--text);font-weight:600;}
#fuel-view-wrap .rcard-odo{display:flex;align-items:baseline;gap:8px;margin:-5px 0 12px;}
#fuel-view-wrap .rcard-odo small{font-size:9.5px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;}
#fuel-view-wrap .rcard-odo b{font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--text2);font-weight:600;}
#fuel-view-wrap .rcard-foot{display:flex;justify-content:space-between;align-items:center;
  padding-top:11px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
#fuel-view-wrap .rcard-warn{position:absolute;top:14px;right:15px;padding:3px 8px;border-radius:20px;
  background:var(--gold-dim);color:var(--gold);font-size:10px;font-weight:700;}
#fuel-view-wrap .empty{padding:56px 24px;text-align:center;}
#fuel-view-wrap .empty-icon{width:52px;height:52px;margin:0 auto 16px;border-radius:15px;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text3);}
#fuel-view-wrap .empty-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;}
#fuel-view-wrap .empty-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;
  color:var(--text2);margin-bottom:6px;}
#fuel-view-wrap .empty-sub{font-size:12.5px;color:var(--text3);margin-bottom:18px;}
#fuel-view-wrap .divider{height:1px;background:var(--border);margin:20px 0;}
#fuel-view-wrap .kv{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px 0;}
#fuel-view-wrap .kv dt{font-size:11px;color:var(--text3);font-weight:600;align-self:center;}
#fuel-view-wrap .kv dd{font-size:12.5px;color:var(--text);}
#fuel-view-wrap kbd{display:inline-block;padding:2px 6px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);
  box-shadow:0 1px 0 var(--border);}
@media (max-width: 1000px){
#fuel-view-wrap .stats{grid-template-columns:1fr 1fr;}
#fuel-view-wrap .form-grid, #fuel-view-wrap .form-grid.c3, #fuel-view-wrap .form-grid.c4{grid-template-columns:1fr 1fr;}
}
@media (max-width: 620px){
#fuel-view-wrap .stats{grid-template-columns:1fr;}
#fuel-view-wrap .form-grid, #fuel-view-wrap .form-grid.c3, #fuel-view-wrap .form-grid.c4{grid-template-columns:1fr;}
#fuel-view-wrap .refuel-row{grid-template-columns:1fr 1fr auto;}
#fuel-view-wrap .page-head{flex-direction:column;align-items:stretch;}
}

/* ── Каркас раздела внутри портала ─────────────────────────────────────── */
#fuel-view-wrap{background:var(--bg);min-height:100%;}
#fuel-view-wrap .fu-shell{max-width:1420px;margin:0 auto;padding:18px 26px 90px;}
#fuel-view-wrap .fu-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;
  border-bottom:1px solid var(--border);padding-bottom:10px;}
#fuel-view-wrap .fu-tab{padding:8px 15px;border-radius:8px;border:1px solid transparent;
  background:none;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .14s,color .14s,border-color .14s;}
#fuel-view-wrap .fu-tab:hover{background:var(--bg3);color:var(--text);}
#fuel-view-wrap .fu-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
#fuel-view-wrap .fu-loading{padding:60px 20px;text-align:center;color:var(--text3);font-size:13px;}
#fuel-view-wrap .fu-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
#fuel-view-wrap .fu-actions-right{margin-left:auto;display:flex;align-items:center;gap:9px;}
#fuel-view-wrap .fu-seed{display:flex;align-items:center;gap:6px;}
#fuel-view-wrap .fu-check-label{display:flex;align-items:center;gap:7px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text2);margin-bottom:0;}
#fuel-view-wrap .fu-help{cursor:help;border-bottom:1px dotted var(--text3);}
#fuel-view-wrap .rcard{cursor:pointer;}
/* На узком окне боковые поля съедают ширину таблиц — ужимаем.
   Правило идёт ПОСЛЕ базового .fu-shell, иначе не перебьёт его. */
@media (max-width: 1000px){ #fuel-view-wrap .fu-shell{padding:18px 14px 80px;} }
@media (max-width: 620px){ #fuel-view-wrap .fu-shell{padding:14px 10px 70px;} }