/* Dugme i režim ručnog pozicioniranja gradova i mesta. */
.transport-city-actions {
  width: 142px;
}
.transport-city-actions .manual-city-map-button {
  color: #0878b9;
  border-color: #8fc6e6;
  background: #eaf6fd;
}
.transport-city-actions .manual-city-map-button:hover:not(:disabled),
.transport-city-actions .manual-city-map-button.is-positioned {
  color: #075f94;
  border-color: #168dcc;
  background: #d8effa;
}
.transport-city-actions .manual-city-map-button.is-picking {
  color: #a72230;
  border-color: #d14552;
  background: #fff0f1;
}
.manual-city-picking {
  cursor: crosshair !important;
  outline: 4px solid color-mix(in srgb, #0b8bd6 54%, transparent);
  outline-offset: -4px;
}
.manual-location-map-hint {
  position: absolute;
  z-index: 1100;
  top: 12px;
  left: 50%;
  max-width: calc(100% - 100px);
  transform: translateX(-50%);
  padding: 9px 13px;
  border: 1px solid #0878b9;
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 91, 143, .94);
  box-shadow: 0 7px 18px rgba(3, 58, 91, .22);
  font-size: .75rem;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 720px) {
  .transport-city-table th:last-child,
  .transport-city-actions {
    width: 112px !important;
  }
  .transport-city-actions button {
    width: 24px !important;
  }
}

@media (max-width: 520px) {
  .manual-location-map-hint {
    top: 58px;
    max-width: calc(100% - 28px);
    width: max-content;
  }
}

/* Moderni indikatori panela: geometrijski chevron umesto tekstualnog znaka. */
.fuel-consumption-toggle > b,
.time-organization-toggle > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 0;
  line-height: 0;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .2s ease, background-color .2s ease;
  pointer-events: none;
}
.fuel-consumption-toggle > b::before,
.time-organization-toggle > b::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-2px) rotate(45deg);
}
.fuel-consumption-toggle.is-open > b,
.time-organization-toggle.is-open > b { transform: rotate(180deg); }
.fuel-consumption-toggle:hover > b,
.fuel-consumption-toggle:focus-visible > b,
.time-organization-toggle:hover > b,
.time-organization-toggle:focus-visible > b { background-color: rgba(255, 255, 255, .24); }
@media (prefers-reduced-motion: reduce) {
  .fuel-consumption-toggle > b,
  .time-organization-toggle > b { transition: none; }
}

/* Plan transporta: sadržaj određuje visinu, ne širi mobilni ekran. */
.transport-planner-panel.active { grid-template-columns: minmax(0, 1fr); }
.transport-planner-panel,
.transport-workspace,
.transport-layout,
.transport-route-result,
.transport-task-result,
.fuel-consumption-section,
.fuel-consumption-panel,
.fuel-plan-table-slot,
.transport-route-table-wrap,
.time-organization-section,
.time-organization-panel,
.transport-itinerary,
.organized-schedule-table-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.fuel-consumption-section,
.time-organization-section,
.time-organization-panel,
.transport-itinerary { grid-template-columns: minmax(0, 1fr); }
.fuel-consumption-toggle { min-width: 0; max-width: 100%; box-sizing: border-box; }
.fuel-consumption-toggle > span { min-width: 0; overflow-wrap: anywhere; }
.fuel-consumption-toggle > b { flex: 0 0 auto; }

/* Pokretanje je levo; strelica desno zadržava sklapanje gotovog plana. */
#unifiedTimeOrganizationHeader {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px !important;
  min-width: 0;
}
#unifiedTimeOrganizationHeader #buildTransportTask {
  flex: 0 1 auto;
  width: auto;
  max-width: calc(100% - 52px);
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  white-space: normal;
}
#unifiedTimeOrganizationHeader .time-organization-toggle {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 8px;
  justify-content: center;
}

@media (max-width: 720px) {
  .transport-layout { grid-template-columns: minmax(0, 1fr); }
  .transport-route-result, .transport-task-result { padding-inline: 10px; }
  .fuel-consumption-panel { padding: 10px; }
  .fuel-consumption-panel > header { flex-wrap: wrap; gap: 8px; }
  .fuel-consumption-toggle { gap: 10px; padding: 12px; }
  .fuel-consumption-toggle small { white-space: normal; }

  /* Sve tri dvojke: put/trošak, gorivo/trošak, AdBlue/trošak. */
  #fuelCalculationSummary {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #fuelCalculationSummary > article {
    grid-column: auto !important;
    min-width: 0;
    max-width: 100%;
    padding: 10px !important;
  }
  #fuelCalculationSummary > article > span { font-size: .8125rem !important; }
  #fuelCalculationSummary > article > strong { font-size: 1rem !important; white-space: normal; overflow-wrap: anywhere; }
  #tourResultMetrics { min-width: 0; max-width: 100%; }
  #tourResultMetrics > article { min-width: 0; }

  /* Plan puta postaje skup deonica; svaki podatak ostaje uz svoju oznaku. */
  #fuelConsumptionPanel .fuel-plan-table-slot,
  #fuelConsumptionPanel .transport-route-table-wrap { overflow-x: visible; }
  #fuelConsumptionPanel .transport-route-table {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: .875rem;
  }
  #fuelConsumptionPanel .transport-route-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #fuelConsumptionPanel .transport-route-table tbody { display: block; }
  #fuelConsumptionPanel .transport-route-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--theme-border, var(--border));
  }
  #fuelConsumptionPanel .transport-route-table tbody tr:last-child { border-bottom: 0; }
  #fuelConsumptionPanel .transport-route-table td {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: auto;
    gap: 4px;
    padding: 0;
    border: 0;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #fuelConsumptionPanel .transport-route-table td:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    color: var(--theme-muted, var(--muted));
    font-size: .75rem;
    font-weight: 800;
  }
  #fuelConsumptionPanel .transport-route-table td:first-child::before { content: "Deonica "; }
  #fuelConsumptionPanel .transport-route-table td:nth-child(2) {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 7px;
    align-items: center;
  }
  #fuelConsumptionPanel .transport-route-table td:nth-child(2) small { white-space: normal; max-width: 100%; }
  #fuelConsumptionPanel .fuel-occupancy-cell { grid-column: 1 / -1; }
  #fuelConsumptionPanel .fuel-occupancy-cell label { min-width: 0; width: 100%; }
  #fuelConsumptionPanel .fuel-occupancy-cell select { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
  #fuelConsumptionPanel .transport-route-table td:nth-child(n + 3)::before {
    content: attr(data-label);
    color: var(--theme-muted, var(--muted));
    font-size: .75rem;
    font-weight: 800;
  }
  #fuelConsumptionPanel .transport-route-notices { overflow-wrap: anywhere; }

  /* Vremena i aktivnost staju u isti red; redni broj je samo na širem ekranu. */
  #transportItinerary .organized-schedule-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
  }
  #transportItinerary .organized-schedule-table th,
  #transportItinerary .organized-schedule-table td { padding: 8px 4px; vertical-align: middle; }
  #transportItinerary .organized-schedule-table th { font-size: .75rem; letter-spacing: 0; }
  #transportItinerary .organized-schedule-table th:first-child,
  #transportItinerary .organized-schedule-table td:first-child { display: none; }
  #transportItinerary .organized-schedule-table th:nth-child(2),
  #transportItinerary .organized-schedule-table th:nth-child(3) { width: 3.125rem; }
  #transportItinerary .organized-schedule-table th:nth-child(4) { width: 3.875rem; }
  #transportItinerary .organized-schedule-table td:nth-child(2),
  #transportItinerary .organized-schedule-table td:nth-child(3),
  #transportItinerary .organized-schedule-table td:nth-child(4) { white-space: nowrap; }
  #transportItinerary .organized-activity-name { overflow-wrap: anywhere; line-height: 1.35; }
  #transportItinerary .organized-activity-name::before { width: 6px; height: 6px; margin-right: 5px; box-shadow: none; }
  #transportItinerary .organized-day-divider { margin-left: 0; white-space: normal; }
  #transportItinerary tr.organized-daily-rest td:nth-child(2),
  #transportItinerary tr.organized-weekly-rest td:nth-child(2),
  #transportItinerary tr.organized-compensation td:nth-child(2) { border-left: 3px solid #2587c1; }

  /* Colspan radi samo dok su red i ćelija stvarni delovi iste tabele. */
  .transport-city-table { table-layout: fixed; min-width: 0; width: 100%; }
  .transport-city-table th:first-child { width: 24px; }
  .transport-city-table input { min-width: 0; max-width: 100%; width: 100%; }
  #transportCityBody > .transport-border-stop { display: table-row !important; width: auto !important; }
  #transportCityBody > .transport-border-stop > td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 8px 4px 14px !important;
  }
  #transportCityBody .transport-border-card { min-width: 0; max-width: 100%; overflow: visible !important; }
  #transportCityBody .transport-border-compact-head { flex-wrap: wrap; align-items: flex-start; }
  #transportCityBody .transport-border-compact-head .transport-border-place { flex: 1 1 100%; display: grid; overflow-wrap: anywhere; }
  #transportCityBody .transport-border-compact-head button { flex: 1 1 auto; max-width: 100%; min-height: 44px; font-size: .875rem; white-space: normal; }
  #transportCityBody .transport-border-compact-head .manual-border-map-button { flex-basis: 100%; }
  #transportCityBody .transport-border-badge { max-width: 100%; white-space: normal; }
  #transportCityBody .transport-border-activity-item { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  #transportCityBody .transport-border-activity-item > label:first-child { grid-column: 1 / -1; }
  #transportCityBody .transport-border-activity-item > label > span { font-size: .75rem; }
  #transportCityBody .transport-border-activity-item select,
  #transportCityBody .transport-border-activity-item input { min-height: 44px !important; height: 44px !important; font-size: 1rem !important; }
  #transportCityBody .transport-border-remove-activity { width: 44px; height: 44px; }
  #transportCityBody .transport-border-card:not([data-multi-border-editor="1"]) { grid-template-columns: minmax(0, 1fr) !important; }
  #transportCityBody .transport-border-card:not([data-multi-border-editor="1"]) > * { grid-column: 1 !important; grid-row: auto !important; }
  #transportCityBody .transport-border-card:not([data-multi-border-editor="1"]) > label > input,
  #transportCityBody .transport-border-card:not([data-multi-border-editor="1"]) > label > strong { max-width: 100% !important; }
  #transportCityBody .transport-activity-item { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  #transportCityBody .transport-activity-item > select { grid-column: 1 / -1; }
  #transportCityBody .transport-activity-item > input,
  #transportCityBody .transport-activity-item > select { min-width: 0; width: 100%; min-height: 44px; font-size: 1rem; }
  #transportCityBody .transport-remove-activity { width: 44px; height: 44px; }
}