/* Tekstualne kartice prate veličinu pomoćnog teksta u meračima. */
.tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) h3,
.tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) p {
  font-size: 20.8px;
  line-height: 1.4;
}

/* Gradovi i granice koriste isti kompaktan red komandi. */
#transportCityBody .transport-border-compact-head {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#transportCityBody .transport-border-compact-head .transport-border-place {
  min-width: 0;
}

#transportCityBody .transport-border-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  white-space: nowrap;
}

#transportCityBody .transport-border-actions button {
  align-items: center;
  background: var(--theme-surface-raised, var(--card));
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 9px;
  color: var(--theme-muted, var(--muted));
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  width: 31px;
}

#transportCityBody .transport-border-actions button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

#transportCityBody .transport-border-actions button.remove {
  color: #df4b59;
}

#transportCityBody .transport-border-actions .manual-border-map-button {
  background: color-mix(in srgb, #35aaf1 13%, var(--theme-surface-raised, var(--card)));
  border-color: color-mix(in srgb, #0b8bd6 48%, var(--theme-border, var(--border)));
  color: #0878b8;
}

#transportCityBody .transport-border-editor-head {
  margin: 9px 0 6px;
}

#transportCityBody .transport-border-editor-head > strong {
  color: var(--theme-muted, var(--muted));
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  #transportCityBody .transport-border-compact-head {
    align-items: center;
    display: grid;
    flex-wrap: nowrap;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #transportCityBody .transport-border-compact-head .transport-border-place {
    display: block;
    flex: initial;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #transportCityBody .transport-border-compact-head .transport-border-place strong {
    display: block;
    line-height: 1.25;
  }

  #transportCityBody .transport-border-actions {
    gap: 3px;
  }

  #transportCityBody .transport-border-actions button,
  #transportCityBody .transport-border-actions .manual-border-map-button {
    flex: 0 0 40px;
    flex-basis: 40px;
    font-size: 1rem;
    height: 42px;
    min-height: 42px;
    padding: 0;
    white-space: nowrap;
    width: 40px;
  }

  #transportCityBody .transport-border-editor-head {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: space-between;
  }

  #transportCityBody .transport-border-editor-head button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  #transportCityBody .transport-border-activity-item {
    align-items: end;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 72px 42px;
  }

  #transportCityBody .transport-border-activity-item > label:first-child {
    grid-column: auto;
  }

  #transportCityBody .transport-border-activity-item select,
  #transportCityBody .transport-border-activity-item input {
    font-size: .84rem !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 0;
    padding-inline: 6px;
    width: 100%;
  }

  #transportCityBody .transport-border-remove-activity {
    height: 42px;
    width: 42px;
  }

  #transportCityBody .transport-activity-item {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 72px 42px;
  }

  #transportCityBody .transport-activity-item > select {
    grid-column: auto;
  }

  #transportCityBody .transport-activity-item > input,
  #transportCityBody .transport-activity-item > select {
    font-size: .84rem;
    height: 42px;
    min-height: 42px;
    min-width: 0;
    padding-inline: 6px;
    width: 100%;
  }

  #transportCityBody .transport-remove-activity {
    height: 42px;
    width: 42px;
  }
}

/* Datum, broj nedelje i status dnevnog grafikona čine jedan kompaktan red. */
.daily-card-header {
  display: block;
}

.daily-card-title-line {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  width: 100%;
}

.daily-card-title-line h3 {
  flex: 0 1 auto;
  margin: 0;
  min-width: 0;
}

.daily-card-title-line .daily-week {
  flex: 0 0 auto;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.daily-card-title-line .day-statuses {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-left: auto;
}

.day-status-icon {
  align-items: center;
  border: 2px solid color-mix(in srgb, currentColor 82%, #0000);
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 950;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}

.day-status-icon.clear {
  background: #16a365;
  border-color: #0d8650;
}

.day-status-icon.violation {
  background: #e54852;
  border-color: #bd2c3a;
}

.day-status-icon.no-record {
  background: #718096;
  border-color: #536176;
}

@media (max-width: 620px) {
  .daily-card-header {
    display: block;
    padding: 12px 10px 8px;
  }

  .daily-card-title-line {
    gap: 4px;
  }

  .daily-card-title-line h3 {
    font-size: clamp(.84rem, 4.2vw, 1.08rem);
  }

  .daily-card-title-line .daily-date-button {
    gap: 4px;
    margin: -3px 0 -3px -4px;
    min-height: 36px;
    padding: 3px 4px;
  }

  .daily-card-title-line .daily-date-button > span:first-child {
    white-space: nowrap;
  }

  .daily-card-title-line .daily-date-chevron {
    height: 20px;
    width: 20px;
  }

  .daily-card-title-line .daily-week {
    font-size: clamp(.66rem, 3vw, .76rem);
  }

  .daily-card-title-line .day-statuses {
    gap: 3px;
  }

  .day-status-icon {
    font-size: .9rem;
    height: 24px;
    width: 24px;
  }
}

/* Kompaktna traka sumarnih aktivnosti i kontrola neposredno iznad grafikona. */
.daily-totals {
  align-items: end;
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

.daily-total-icon {
  height: 16.5px;
  width: 16.5px;
}

.daily-totals > .activity-zoom-controls {
  align-self: center;
  box-shadow: 0 3px 10px color-mix(in srgb, #000 11%, transparent);
  flex: 0 0 auto;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  position: static;
}

.daily-totals > .activity-zoom-controls button {
  -webkit-tap-highlight-color: transparent;
  height: 28px;
  transition: none;
  width: 28px;
}

/* Klik, fokus i Safari hover ne menjaju izgled kontrola zuma. */
.daily-totals > .activity-zoom-controls button:is(:hover, :focus, :focus-visible, :active, :disabled) {
  background: var(--theme-field, var(--panel));
  border-color: var(--theme-border, var(--border));
  color: var(--theme-text, var(--ink));
  filter: none;
  opacity: 1;
  transform: none;
}

.activity-chart-frame .activity-chart-scroll {
  padding-top: 0;
}

/* Moderna SVG strelica za tabelarni prikaz aktivnosti. */
.daily-date-chevron {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 18%, var(--theme-surface-raised, var(--panel))),
    var(--theme-surface-raised, var(--panel)));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 20%, transparent);
}

.daily-date-chevron svg {
  fill: none;
  height: 14px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  width: 14px;
}

.daily-date-button:hover .daily-date-chevron,
.daily-date-button:focus-visible .daily-date-chevron {
  background: var(--accent);
  color: #fff;
}

/* Sve kolone ostaju vidljive bez horizontalnog pomeranja na telefonu. */
.daily-activity-table col.daily-table-col-index { width: 7%; }
.daily-activity-table col.daily-table-col-time { width: 15%; }
.daily-activity-table col.daily-table-col-duration { width: 20%; }
.daily-activity-table col.daily-table-col-activity { width: 43%; }

@media (max-width: 620px) {
  .daily-totals {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    padding: 0 8px 2px;
  }

  .daily-total {
    gap: 3px;
    min-width: 0;
    padding: 4px 1px;
  }

  .daily-total strong {
    font-size: clamp(.76rem, 3.25vw, .875rem);
  }

  .daily-totals > .activity-zoom-controls {
    gap: 1px;
    margin-left: 2px;
    padding: 1px;
  }

  .daily-totals > .activity-zoom-controls button {
    border-radius: 6px;
    font-size: .9rem;
    height: 26px;
    width: 26px;
  }

  .activity-chart-scroll {
    margin-top: 0;
  }

  .daily-activity-table-wrap {
    overflow-x: hidden;
  }

  .daily-activity-table {
    font-size: clamp(.68rem, 2.9vw, .82rem);
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }

  .daily-activity-table th,
  .daily-activity-table td {
    overflow: hidden;
    padding: 8px 3px;
    text-overflow: clip;
  }

  .daily-activity-table th:first-child,
  .daily-activity-table td:first-child {
    padding-left: 6px;
  }

  .daily-table-activity {
    border-left-width: 3px;
    font-size: inherit;
    line-height: 1.15;
    min-height: 24px;
    overflow-wrap: anywhere;
    padding: 3px 4px;
    white-space: normal;
  }
}

/* Status is already clear from each title and value, so no extra badge is shown. */
#results :is(.premium-gauge-status-badge, .upcoming-status-badge) {
  display: none;
}

#results :is(.premium-dashboard-gauge-shell, .upcoming-gauge-shell) {
  margin-top: -11px;
}

.tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) h3 {
  font-weight: 750;
}

.tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) p {
  font-weight: 520;
}

@media (max-width: 430px) {
  .tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) h3,
  .tab-panel:not([data-panel="upcoming"]) :is(.info-card, .check-card) p {
    font-size: 18.2px;
  }
}

/* Two-column mobile dashboard; route planning and settings keep their own layout. */
@media (max-width: 720px) {
  #results .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #results .dashboard-grid > .dashboard-card {
    min-width: 0;
    min-height: 0;
    order: var(--mobile-card-order, 0);
  }

  #results .dashboard-grid > .dashboard-card.mobile-card-wide {
    grid-column: 1 / -1;
  }

  #results .dashboard-grid > .gauge-card {
    padding: 8px 12px 10px;
  }

  #results .dashboard-grid .gauge-title {
    font-size: clamp(13px, 3.5vw, 18px);
    line-height: 1.2;
    margin: 14px 24px 0;
    min-height: 2.4em;
    overflow-wrap: anywhere;
  }

  #results .dashboard-grid :is(.premium-gauge-status-badge, .upcoming-status-badge) {
    font-size: clamp(9px, 2.4vw, 11px);
    letter-spacing: .06em;
    margin-top: 4px;
    padding: 5px 7px;
    max-width: 100%;
  }

  /* Match the SVG proportions so a narrow card does not keep a desktop-height gap. */
  #results .dashboard-grid :is(.premium-dashboard-gauge-shell, .upcoming-gauge-shell) {
    aspect-ratio: 260 / 170;
    flex: 0 0 auto;
    height: auto;
    margin: 0;
    max-width: none;
    width: 100%;
  }

  #results .dashboard-grid .semi-gauge {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }

  #results .dashboard-grid .gauge-value {
    font-size: clamp(22px, 6vw, 38px);
    line-height: 1;
    top: 47%;
    white-space: nowrap;
  }

  #results .dashboard-grid .gauge-scale {
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.2;
    top: calc(47% + clamp(22px, 6vw, 38px) + 2px);
  }

  /* SVG text scales with the arc; leave padding beyond both endpoint labels. */
  #results .dashboard-grid .gauge-endpoint-labels {
    font-size: 21px;
    letter-spacing: 0;
  }

  #results .dashboard-grid .gauge-note {
    border-radius: 12px;
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.2;
    margin: 3px 0 0;
    max-width: 100%;
    max-height: calc(2.4em + 10px);
    min-height: calc(2.4em + 10px);
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: 5px 6px;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #results .dashboard-grid .gauge-note:empty {
    display: none;
  }

  #results .dashboard-grid > .gauge-card.mobile-card-wide :is(.premium-dashboard-gauge-shell, .upcoming-gauge-shell) {
    margin-inline: auto;
    max-width: 180px;
  }

  #results .dashboard-grid .favorite-box {
    height: 28px;
    left: 10px;
    top: 8px;
    width: 28px;
  }

  #results .dashboard-grid .gauge-card .favorite-input {
    height: 44px;
    inset: -8px;
    width: 44px;
  }

  #results .dashboard-grid .severity-satisfied :is(.premium-dashboard-gauge-shell, .upcoming-gauge-shell) {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 130px;
    padding-block: 8px;
  }

  #results .dashboard-grid .satisfied-gauge {
    border-width: 4px;
    font-size: 30px;
    height: 48px;
    margin: 0;
    position: static;
    transform: none;
    width: 48px;
  }

  #results .dashboard-grid .severity-satisfied :is(.gauge-value, .gauge-scale) {
    position: static;
  }

  #results .dashboard-grid .severity-satisfied .gauge-value {
    font-size: clamp(16px, 4.2vw, 24px);
    white-space: normal;
  }

  #results .dashboard-grid > .title-card {
    min-height: 200px;
  }

  #results .dashboard-grid .section-card-title {
    font-size: clamp(19px, 5vw, 30px);
    line-height: 1.15;
    overflow-wrap: anywhere;
    padding: 10px;
  }

  #results .dashboard-grid > :is(.info-card, .check-card) {
    padding: 44px 10px 14px;
    overflow-wrap: anywhere;
  }

  #results .dashboard-grid :is(.info-card, .check-card) :is(h3, p) {
    font-size: clamp(13px, 3.6vw, 17px);
    line-height: 1.4;
  }
}