/* Support desk layout and controls, scoped to its page. */
body[data-view="tickets"] .tiket .container { width: min(1170px, 90%) !important; min-width: 0; padding: 0 !important; }
body[data-view="tickets"] .tiket__title { gap: 20px; flex-wrap: wrap; }
body[data-view="tickets"] .tiket__filters { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-view="tickets"] .tiket__filters .sub-picker-btn { width: 100% !important; min-width: 0 !important; color: #fff; box-sizing: border-box; }
body[data-view="tickets"] .tiket__item { gap: 14px; }
body[data-view="tickets"] .tiket__body { min-width: 0; margin-left: 0 !important; }
body[data-view="tickets"] .tiket__inner { min-width: 0; }
body[data-view="tickets"] .tiket__name, body[data-view="tickets"] .tiket__counetr { overflow-wrap: anywhere; }
body[data-view="tickets"] .tiket__item:focus-visible { outline: 2px solid #5eb4ff; outline-offset: 3px; }

/* Standard popups need keyboard-accessible close buttons. */
.popups:not(.auth-popup) .close { border: 0; background: transparent; padding: 0; }
.popups .close:focus-visible { outline: 2px solid #5eb4ff; outline-offset: 3px; }

@media (max-width: 1170px) {
  body[data-view="tickets"] #app > footer .container { width: 90% !important; }
}
@media (max-width: 700px) {
  body[data-view="tickets"] .tiket { padding-top: 100px !important; }
  body[data-view="tickets"] .tiket__title { padding: 18px !important; }
  body[data-view="tickets"] .tiket__title h1 { font-size: 24px !important; }
  body[data-view="tickets"] .tiket__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-view="tickets"] .tiket__item { padding: 16px !important; align-items: flex-start !important; }
  body[data-view="tickets"] .tiket__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  body[data-view="tickets"] .tiket__counetr { line-height: 1.5; }
  body[data-view="tickets"] #app > footer .footer_links { grid-template-columns: 1fr !important; gap: 24px !important; }
  body[data-view="tickets"] #app > footer .useful_links { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 20px !important; }
  body[data-view="tickets"] #app > footer .separator { display: none !important; }
  body[data-view="tickets"] #app > footer a { font-size: 14px !important; line-height: 21px !important; }
}