/* Interaktivna trajanja u organizovanom rasporedu. */
.schedule-duration-edit {
  align-items: center;
  appearance: none;
  background: color-mix(in srgb, var(--panel, #fff) 88%, var(--accent, #0b8dcc) 12%);
  border: 1px solid color-mix(in srgb, var(--accent, #0b8dcc) 42%, var(--border, #c5d5df));
  border-radius: 9px;
  color: var(--text, #142230);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 5px;
  justify-content: center;
  min-height: 38px;
  padding: 5px 8px;
  white-space: nowrap;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#transportItinerary td.schedule-duration-cell {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

.schedule-duration-edit strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}

.schedule-duration-edit svg {
  fill: none;
  flex: 0 0 14px;
  height: 14px;
  stroke: var(--accent, #0b8dcc);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 14px;
}

.schedule-duration-edit:hover {
  border-color: var(--accent, #0b8dcc);
  box-shadow: 0 3px 10px rgba(20, 119, 171, .13);
}

.schedule-duration-edit:focus-visible,
.schedule-duration-dialog button:focus-visible,
.schedule-duration-dialog input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #0b8dcc) 32%, transparent);
  outline-offset: 2px;
}

.schedule-edit-feedback {
  border: 1px solid rgba(25, 153, 100, .35);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel, #fff) 90%, #28ad79 10%);
  color: color-mix(in srgb, var(--text, #142230) 72%, #087047 28%);
  font-size: .875rem;
  font-weight: 750;
  line-height: 1.4;
  margin: 10px 0 0;
  padding: 10px 12px;
}

.schedule-edit-feedback.is-limit {
  border-color: rgba(221, 136, 23, .48);
  background: color-mix(in srgb, var(--panel, #fff) 86%, #f4b64c 14%);
  color: color-mix(in srgb, var(--text, #142230) 78%, #9c5a00 22%);
}

.schedule-edit-feedback[hidden] { display: none !important; }

.schedule-duration-dialog {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 22px 65px rgba(8, 37, 55, .32);
  color: var(--text, #142230);
  margin: auto;
  max-width: min(420px, calc(100vw - 28px));
  padding: 0;
  width: 100%;
}

.schedule-duration-dialog::backdrop {
  backdrop-filter: blur(4px);
  background: rgba(7, 31, 47, .48);
}

.schedule-duration-dialog[open] {
  animation: schedule-duration-enter .2s cubic-bezier(.2, .8, .2, 1);
}

.schedule-duration-dialog.is-fallback-open {
  bottom: 0;
  display: block;
  left: 50%;
  margin: 0;
  max-height: min(92vh, 680px);
  overflow: auto;
  position: fixed;
  top: auto;
  transform: translateX(-50%);
  z-index: 10050;
}

html.schedule-duration-open { overflow: hidden; }

.schedule-duration-dialog form {
  background: linear-gradient(155deg, var(--panel, #fff), color-mix(in srgb, var(--panel, #fff) 91%, var(--accent, #0b8dcc) 9%));
  display: grid;
  gap: 14px;
  padding: 20px;
}

.schedule-duration-dialog header {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.schedule-duration-dialog header small {
  color: var(--accent, #0b8dcc);
  display: block;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .11em;
  margin-bottom: 4px;
}

.schedule-duration-dialog h2 {
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
}

.schedule-duration-close {
  align-items: center;
  background: color-mix(in srgb, var(--panel, #fff) 88%, var(--border, #c5d5df) 12%);
  border: 1px solid var(--border, #c5d5df);
  border-radius: 12px;
  color: var(--text, #142230);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 1.45rem;
  height: 42px;
  justify-content: center;
  line-height: 1;
}

#scheduleDurationActivity {
  color: var(--muted, #637586);
  font-size: 1rem;
  font-weight: 800;
  margin: -4px 0 0;
}

.schedule-duration-picker {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
}

.schedule-duration-picker > b {
  font-size: 2rem;
  margin-top: 25px;
}

.schedule-duration-unit {
  display: grid;
  gap: 7px;
  text-align: center;
}

.schedule-duration-unit > span {
  color: var(--muted, #637586);
  font-size: .8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.schedule-duration-unit button {
  align-items: center;
  background: color-mix(in srgb, var(--panel, #fff) 83%, var(--accent, #0b8dcc) 17%);
  border: 1px solid color-mix(in srgb, var(--accent, #0b8dcc) 35%, var(--border, #c5d5df));
  border-radius: 11px;
  color: var(--accent, #0b8dcc);
  cursor: pointer;
  display: flex;
  font-size: 1.25rem;
  font-weight: 900;
  height: 40px;
  justify-content: center;
}

.schedule-duration-unit input {
  appearance: textfield;
  background: var(--panel, #fff);
  border: 2px solid color-mix(in srgb, var(--accent, #0b8dcc) 48%, var(--border, #c5d5df));
  border-radius: 14px;
  box-sizing: border-box;
  color: var(--text, #142230);
  font: 900 2rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  height: 68px;
  text-align: center;
  width: 100%;
}

.schedule-duration-unit input.is-changing {
  animation: schedule-duration-digit .18s ease-out;
}

.schedule-duration-hint,
.schedule-duration-error {
  font-size: .875rem;
  margin: 0;
  text-align: center;
}

.schedule-duration-hint { color: var(--muted, #637586); }
.schedule-duration-error {
  border-radius: 10px;
  background: rgba(223, 75, 89, .1);
  color: #d83c4f;
  font-weight: 800;
  padding: 9px 10px;
}
.schedule-duration-error[hidden] { display: none !important; }

.schedule-duration-dialog footer {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.25fr;
}

.schedule-duration-dialog footer button {
  border-radius: 12px;
  cursor: pointer;
  font: 850 1rem/1 system-ui, sans-serif;
  min-height: 48px;
  padding: 10px 14px;
}

.schedule-duration-cancel {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #c5d5df);
  color: var(--text, #142230);
}

.schedule-duration-save {
  background: linear-gradient(135deg, #169cd8, #087fbd);
  border: 1px solid #087fbd;
  color: #fff;
  box-shadow: 0 7px 18px rgba(8, 127, 189, .22);
}

.schedule-duration-save:disabled { cursor: wait; opacity: .75; }

@keyframes schedule-duration-enter {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes schedule-duration-digit {
  0% { transform: translateY(5px); opacity: .55; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 720px) {
  #transportItinerary .organized-schedule-table th:nth-child(4) { width: 4.45rem; }

  #transportItinerary .schedule-duration-edit {
    gap: 3px;
    min-height: 36px;
    padding: 4px 5px;
    width: 100%;
  }

  #transportItinerary .schedule-duration-edit svg {
    flex-basis: 12px;
    height: 12px;
    width: 12px;
  }

  .schedule-duration-dialog {
    border-radius: 22px 22px 0 0;
    margin: auto 0 0;
    max-width: none;
    width: 100vw;
  }

  .schedule-duration-dialog.is-fallback-open {
    left: 0;
    transform: none;
  }

  .schedule-duration-dialog form { padding: 18px 18px max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-duration-dialog[open],
  .schedule-duration-unit input.is-changing { animation: none; }
}