/* Mobilni raspored odsustava/plana i jasne boje mesta i granica. */

#transportCityBody > .transport-city-main-row,
#transportCityBody > .transport-activity-detail {
  background: #dcefff !important;
  border-color: #76b9e6 !important;
}

#transportCityBody .transport-border-card {
  background: #fff0ad !important;
  border-color: #e3c04e !important;
  border-left-color: #dfa900 !important;
}

#transportCityBody :is(.transport-city-main-row, .transport-activity-detail, .transport-border-card)
  :is(input, select) {
  background: var(--theme-field, #fff);
}

@media (max-width: 720px) {
  .paid-leave-form {
    gap: 9px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .paid-leave-form > .paid-leave-type,
  .paid-leave-form .paid-leave-actions {
    grid-column: 1 / -1 !important;
  }

  .paid-leave-form > label:nth-of-type(2),
  .paid-leave-form > label:nth-of-type(3),
  .paid-leave-form > label:nth-of-type(4),
  .paid-leave-form > label:nth-of-type(5) {
    grid-column: auto !important;
    min-width: 0;
  }

  .paid-leave-form > label > span {
    font-size: clamp(.68rem, 2.7vw, .79rem);
    overflow-wrap: anywhere;
  }

  .paid-leave-form :is(input, select) {
    font-size: clamp(.76rem, 3.1vw, .9rem) !important;
    padding-inline: 7px !important;
  }

  [data-panel="transport_planner"] .transport-meta-grid.is-simplified-meta {
    align-items: end;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  [data-panel="transport_planner"] .transport-meta-grid.is-simplified-meta > label,
  [data-panel="transport_planner"] .transport-departure-field {
    display: grid !important;
    grid-column: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  [data-panel="transport_planner"] :is(#transportTaskDateTime, #transportTaskVehicle) {
    box-sizing: border-box;
    font-size: clamp(.72rem, 3vw, .88rem) !important;
    min-width: 0 !important;
    padding-inline: 7px !important;
    width: 100% !important;
  }
}

@media (max-width: 400px) {
  .paid-leave-form,
  [data-panel="transport_planner"] .transport-meta-grid.is-simplified-meta {
    gap: 6px !important;
  }

  [data-panel="transport_planner"] .transport-meta-grid.is-simplified-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}