/* Potrošnja goriva i podešavanja vozila. */
.fuel-consumption-section {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.fuel-consumption-toggle,
.vehicle-settings-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 17px;
  color: #fff;
  border: 1px solid #0878b9;
  border-radius: 14px;
  background: linear-gradient(135deg, #159bdc, #0879bd);
  box-shadow: 0 9px 20px rgba(9, 115, 177, .16);
  text-align: left;
}

.fuel-consumption-toggle > span,
.vehicle-settings-toggle > span:not(.vehicle-settings-icon) { display: grid; gap: 2px; }
.fuel-consumption-toggle strong,
.vehicle-settings-toggle strong { font-size: 1rem; }
.fuel-consumption-toggle small,
.vehicle-settings-toggle small { color: rgba(255,255,255,.82); font-size: .78rem; }
.fuel-consumption-toggle > b,
.vehicle-settings-toggle > b { font-size: 1.25rem; transition: transform .2s ease; }
.fuel-consumption-toggle.is-open > b,
.vehicle-settings-toggle.is-open > b { transform: rotate(180deg); }

.fuel-consumption-panel {
  padding: 16px;
  border: 1px solid var(--theme-border, #cfdae4);
  border-radius: 16px;
  background: var(--theme-card, #fff);
}

.fuel-consumption-panel[hidden],
.vehicle-settings-fields[hidden] { display: none !important; }

.fuel-consumption-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.fuel-consumption-panel > header > div { display: grid; gap: 2px; }
.fuel-consumption-panel > header span { color: var(--accent, #0b8bd6); font-size: .7rem; font-weight: 900; letter-spacing: .13em; }
.fuel-consumption-panel > header h3 { margin: 0; }
#openVehicleSettings {
  color: #086b9f;
  border: 1px solid #99cce7;
  background: #eaf6fd;
  font-weight: 850;
}

.fuel-plan-table-slot .transport-route-table-wrap { margin: 0; }
.fuel-occupancy-head,
.fuel-occupancy-cell { text-align: center !important; }
.fuel-occupancy-cell select {
  width: min(150px, 100%);
  min-height: 38px;
  padding: 7px 34px 7px 11px;
  border: 1px solid #b9ccda;
  border-radius: 10px;
  background-color: var(--theme-card, #fff);
  color: var(--theme-text, #1f2a35);
  font-weight: 800;
}

.fuel-calculation-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.fuel-calculation-summary article {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 102px;
  padding: 13px;
  border: 1px solid var(--theme-border, #cfdae4);
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-card, #fff) 88%, #dcedf8 12%);
}
.fuel-calculation-summary article.is-total { border-color: #6cbde7; background: #e8f6fd; }
.fuel-calculation-summary span { color: var(--theme-muted, #677887); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.fuel-calculation-summary strong { font-size: clamp(1rem, 1.25vw, 1.28rem); }
.fuel-calculation-summary small { color: var(--theme-muted, #677887); }
.fuel-calculation-note { margin: 11px 2px 0; color: var(--theme-muted, #677887); font-size: .83rem; }

.vehicle-settings-section { display: grid; gap: 10px; }
.vehicle-settings-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
}
.vehicle-settings-toggle { display: grid; grid-template-columns: auto 1fr auto; }
.vehicle-settings-fields {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--theme-border, #cfdae4);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-card, #fff) 91%, #eaf5fb 9%);
}
.vehicle-settings-group { display: grid; gap: 10px; }
.vehicle-settings-group + .vehicle-settings-group { padding-top: 13px; border-top: 1px solid var(--theme-border, #cfdae4); }
.vehicle-settings-group h3 { margin: 0; font-size: .98rem; }
.vehicle-settings-group p { margin: -5px 0 0; color: var(--theme-muted, #677887); font-size: .78rem; }
.vehicle-setting-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vehicle-setting-columns.two { grid-template-columns: minmax(0, 1fr); }
.vehicle-setting-columns > label { display: grid; min-width: 0; gap: 6px; color: var(--theme-muted, #677887); font-size: .875rem; font-weight: 850; }
.vehicle-setting-columns input,
.vehicle-setting-columns select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px; font-size: 1rem; }
.vehicle-number-input { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.vehicle-number-input input { grid-area: 1 / 1 / 2 / 3; padding-right: 6rem; }
.vehicle-number-input small { grid-area: 1 / 2; z-index: 1; padding-right: 10px; color: var(--theme-muted, #677887); font-size: .8rem; pointer-events: none; }
.vehicle-settings-status { margin: 0; color: #0879bd; font-size: .78rem; font-weight: 750; }

body[data-theme="dark"] .fuel-calculation-summary article.is-total { background: rgba(11,139,214,.17); }
body[data-theme="dark"] #openVehicleSettings { color: #ccecff; background: rgba(11,139,214,.15); }

@media (max-width: 1100px) {
  .fuel-calculation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuel-calculation-summary article.is-total { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .fuel-consumption-panel { padding: 11px; }
  .fuel-consumption-panel > header { align-items: flex-start; }
  .fuel-plan-table-slot { overflow-x: auto; }
  .fuel-plan-table-slot .transport-route-table { min-width: 760px; }
  .fuel-calculation-summary { grid-template-columns: 1fr; }
  .fuel-calculation-summary article.is-total { grid-column: auto; }
  .vehicle-setting-columns,
  .vehicle-setting-columns.two { grid-template-columns: 1fr; }
}