/*
 * Završni mobilni form-system. Ovaj sloj je namerno poslednji u dokumentu:
 * usaglašava stare komponente bez promene njihovog ponašanja.
 */
@media (max-width: 720px) {
  :root {
    --mobile-ui-height: 48px;
    --mobile-ui-radius: 12px;
    --mobile-ui-gap: 10px;
    --mobile-ui-border: #b7cdda;
    --mobile-ui-fill: #f8fbfd;
    --mobile-ui-ink: #142331;
    --mobile-ui-muted: #617788;
    --mobile-ui-accent: #0b8fd2;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ),
  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) * {
    box-sizing: border-box;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) [hidden],
  [data-panel="transport_planner"] .transport-departure-source,
  [data-panel="transport_planner"] .transport-start-source-label {
    display: none !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    block-size: var(--mobile-ui-height) !important;
    height: var(--mobile-ui-height) !important;
    min-height: var(--mobile-ui-height) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--mobile-ui-border) !important;
    border-radius: var(--mobile-ui-radius) !important;
    background-color: var(--mobile-ui-fill) !important;
    color: var(--mobile-ui-ink) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(25, 73, 99, .045) !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) :is(input, select, textarea):focus {
    border-color: var(--mobile-ui-accent) !important;
    box-shadow: 0 0 0 3px rgba(11, 143, 210, .16) !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) input:is([type="date"], [type="datetime-local"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) input:is([type="date"], [type="datetime-local"])::-webkit-date-and-time-value {
    align-items: center !important;
    block-size: 46px !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    min-inline-size: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) input:is([type="date"], [type="datetime-local"])::-webkit-datetime-edit {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    min-inline-size: 0 !important;
    padding: 0 !important;
  }

  :is(
    [data-panel="activity_review"],
    [data-panel="violation_review"],
    [data-panel="transport_planner"],
    [data-panel="paid_leave"],
    [data-panel="documentation"],
    [data-panel="schengen_90_180"]
  ) input:is([type="date"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
    flex: 0 0 auto !important;
    margin: 0 0 0 4px !important;
    padding: 1px !important;
  }

  :is(.review-range, .paid-leave-form, .documentation-tour-form, .schengen-stay-form) label,
  [data-panel="transport_planner"] .transport-meta-grid label {
    display: grid !important;
    gap: 6px !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
  }

  :is(.review-range, .paid-leave-form, .documentation-tour-form, .schengen-stay-form) label > span,
  [data-panel="transport_planner"] .transport-meta-grid label > span {
    color: var(--mobile-ui-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .045em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  :is([data-panel="activity_review"], [data-panel="violation_review"]) .review-range {
    align-items: end !important;
    display: grid !important;
    gap: var(--mobile-ui-gap) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid #b7d2e1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 5px 14px rgba(24, 73, 99, .045) !important;
  }

  :is([data-panel="activity_review"], [data-panel="violation_review"]) .review-range > :is(label, button) {
    inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  :is([data-panel="activity_review"], [data-panel="violation_review"]) .review-range > button,
  [data-panel="activity_review"] .activity-view-switch-buttons button {
    block-size: var(--mobile-ui-height) !important;
    height: var(--mobile-ui-height) !important;
    min-height: var(--mobile-ui-height) !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #8bbfd9 !important;
    border-radius: var(--mobile-ui-radius) !important;
    background: #fff !important;
    color: #087fc4 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    box-shadow: 0 3px 8px rgba(20, 87, 124, .06) !important;
  }

  :is([data-panel="activity_review"], [data-panel="violation_review"]) .review-range > button.primary-action,
  [data-panel="activity_review"] .activity-view-switch-buttons button:is(.active, [aria-pressed="true"]) {
    border-color: #087fc4 !important;
    background: linear-gradient(135deg, #159bdc, #0879bd) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(8, 127, 196, .2) !important;
  }

  [data-panel="activity_review"] .activity-view-switch-buttons {
    display: grid !important;
    gap: var(--mobile-ui-gap) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 0 !important;
  }

  [data-panel="violation_review"] .violation-summary-grid {
    gap: 10px !important;
  }

  [data-panel="violation_review"] .violation-summary-grid article {
    min-height: 88px !important;
    padding: 12px 14px !important;
    border: 1px solid #c3d4df !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .62) !important;
    box-shadow: none !important;
  }

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

  [data-panel="transport_planner"] input.transport-departure-source,
  [data-panel="transport_planner"] label.transport-start-source-label {
    display: none !important;
  }

  [data-panel="transport_planner"] :is(#transportTaskDateTime, #transportTaskVehicle) {
    block-size: var(--mobile-ui-height) !important;
    height: var(--mobile-ui-height) !important;
    min-height: var(--mobile-ui-height) !important;
    padding-inline: 9px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
  }

  [data-panel="transport_planner"] #transportTaskDateTime::-webkit-date-and-time-value,
  [data-panel="transport_planner"] #transportTaskDateTime::-webkit-datetime-edit {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #transportCityBody > .transport-city-main-row {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    padding: 10px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #transportCityBody .transport-city-main-row [data-transport-city-name] {
    block-size: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 11px !important;
    font-size: 16px !important;
  }

  #transportCityBody .transport-city-actions {
    align-items: center !important;
    display: grid !important;
    gap: 4px !important;
    grid-template-columns: repeat(4, 30px) !important;
    justify-content: end !important;
    width: 132px !important;
  }

  #transportCityBody .transport-city-actions button {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 30px !important;
    justify-content: center !important;
    inline-size: 30px !important;
    width: 30px !important;
    block-size: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b8ccd8 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #5e7484 !important;
    font-size: 17px !important;
    box-shadow: none !important;
  }

  #transportCityBody .transport-city-actions .manual-city-map-button {
    border-color: #65b7e2 !important;
    background: #eef9ff !important;
    color: #087fc4 !important;
  }

  #transportCityBody .transport-city-actions button.remove {
    color: #dd4554 !important;
  }

  #transportCityBody .transport-border-card[data-multi-border-editor="1"] {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #transportCityBody .transport-border-compact-head {
    align-items: start !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  #transportCityBody .transport-border-actions {
    align-items: center !important;
    display: grid !important;
    gap: 4px !important;
    grid-template-columns: repeat(4, 36px) !important;
    justify-content: end !important;
    justify-self: end !important;
    width: max-content !important;
  }

  #transportCityBody .transport-border-actions button,
  #transportCityBody .transport-border-actions .manual-border-map-button {
    align-items: center !important;
    display: inline-flex !important;
    flex: none !important;
    justify-content: center !important;
    inline-size: 36px !important;
    width: 36px !important;
    block-size: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9b743 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .74) !important;
    color: #5f6f79 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  #transportCityBody .transport-border-actions .manual-border-map-button {
    border-color: #5fb5e0 !important;
    background: #edf9ff !important;
    color: #087fc4 !important;
  }

  #transportCityBody .transport-border-actions button.remove {
    color: #dd4554 !important;
  }

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

  #transportCityBody .transport-border-activity-item :is(select, input) {
    block-size: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 8px !important;
    font-size: 13px !important;
  }

  #transportCityBody .transport-border-remove-activity {
    inline-size: 42px !important;
    width: 42px !important;
    block-size: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }

  #transportCityBody .transport-border-editor-head button,
  #transportCityBody .transport-activity-editor-head button {
    min-height: 40px !important;
    padding: 7px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #087fc4 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  [data-panel="transport_planner"] :is(#addTransportCity, #calculateTransportRoute),
  .paid-leave-form .paid-leave-actions button,
  .documentation-tour-form > button,
  .schengen-form-actions button {
    block-size: var(--mobile-ui-height) !important;
    height: var(--mobile-ui-height) !important;
    min-height: var(--mobile-ui-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: var(--mobile-ui-radius) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  [data-panel="transport_planner"] #calculateTransportRoute,
  .paid-leave-form .paid-leave-actions .primary-action,
  .documentation-tour-form > button,
  .schengen-form-actions .primary-action {
    border: 1px solid #087fc4 !important;
    background: linear-gradient(135deg, #159bdc, #0879bd) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(8, 127, 196, .2) !important;
  }

  [data-panel="transport_planner"] #addTransportCity {
    border: 1px solid var(--mobile-ui-border) !important;
    background: #fff !important;
    color: var(--mobile-ui-ink) !important;
    box-shadow: none !important;
  }

  .paid-leave-form {
    align-items: end !important;
    gap: var(--mobile-ui-gap) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px !important;
    border: 1px solid #b7d2e1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .72) !important;
  }

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

  .documentation-tour-form {
    display: grid !important;
    gap: var(--mobile-ui-gap) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
    border: 1px solid #b7d2e1 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .72) !important;
  }

  .documentation-tour-form > :is(label, button) {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .documentation-tour {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .documentation-capture-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 70px 48px !important;
  }

  .documentation-capture-row :is(select, button, .documentation-camera-button) {
    block-size: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .documentation-capture-row button:not(.documentation-camera-button) {
    padding-inline: 8px !important;
    border: 1px solid var(--mobile-ui-border) !important;
    background: #fff !important;
    color: var(--mobile-ui-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .documentation-camera-button {
    inline-size: 48px !important;
    width: 48px !important;
    padding: 0 !important;
    border: 1px solid #087fc4 !important;
    background: linear-gradient(135deg, #159bdc, #0879bd) !important;
    color: #fff !important;
  }

  .schengen-reference,
  .schengen-stat,
  .schengen-summary-status,
  .schengen-stay-form {
    border-radius: 18px !important;
    box-shadow: none !important;
  }

  .schengen-stay-form {
    gap: var(--mobile-ui-gap) !important;
    padding: 14px !important;
  }

  .schengen-ongoing input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    inline-size: 24px !important;
    width: 24px !important;
    min-inline-size: 24px !important;
    min-width: 24px !important;
    block-size: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 2px solid #8ea2af !important;
    border-radius: 7px !important;
    background: #fff !important;
  }

  .schengen-ongoing input[type="checkbox"]:checked {
    border-color: #159bdc !important;
    background: #159bdc !important;
  }
}

@media (max-width: 390px) {
  #transportCityBody > .transport-city-main-row {
    grid-template-columns: minmax(0, 1fr) 124px !important;
  }

  #transportCityBody .transport-city-actions {
    grid-template-columns: repeat(4, 28px) !important;
    width: 124px !important;
  }

  #transportCityBody .transport-city-actions button {
    flex-basis: 28px !important;
    inline-size: 28px !important;
    width: 28px !important;
  }

  #transportCityBody .transport-border-actions {
    grid-template-columns: repeat(4, 34px) !important;
  }

  #transportCityBody .transport-border-actions button,
  #transportCityBody .transport-border-actions .manual-border-map-button {
    inline-size: 34px !important;
    width: 34px !important;
  }
}