/* tickets.css: локальные стили модуля tickets (поддержка) */

.tickets-root {
  /* используем глобальные переменные темы */
  width: 100%;
}

/* Стили для формы верификации компании */
#ticketsViewVerificationForm .form-group {
  margin-bottom: var(--spacing-md);
}

/* Стиль текста в полях ввода формы верификации - синий цвет как в форме создания тикета */
#ticketsViewVerificationForm #verificationCompanyName,
#ticketsViewVerificationForm #verificationWebsite,
#ticketsViewVerificationForm #verificationCountry,
#ticketsViewVerificationForm #verificationBusinessIdType,
#ticketsViewVerificationForm #verificationBusinessId,
#ticketsViewVerificationForm #verificationLegalAddress,
#ticketsViewVerificationForm #verificationContactPerson,
#ticketsViewVerificationForm #verificationContactPhone,
#ticketsViewVerificationForm #verificationContactEmail,
#ticketsViewVerificationForm #verificationAdditionalInfo {
  color: #2481cc !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

#ticketsViewVerificationForm .form-input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

#ticketsViewVerificationForm select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.tickets-view {
  /* Отступ снизу для всего контента от TabBar (как в других разделах) */
  padding-bottom: var(--tabbar-safe-space, 84px);
}

/* Адаптивные хардкоды больше не нужны — safe-space вычисляется динамически в tabbar.js */

.tickets-filters {
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Кнопки фильтров в разделе поддержки - синий цвет */
#ticketsRoot .chip {
  color: #2481cc !important;
}

/* Активная кнопка фильтра в поддержке - белый текст */
#ticketsRoot .chip.active {
  color: #ffffff !important;
}

/* Кнопка обновления в стиле MUI */
.tickets-refresh-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: #2481cc; /* Raily primary */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  /* Android: убираем квадратный фокус/ореол и центрируем иконку */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  font-size: 0;
}

.tickets-refresh-btn:hover {
  background-color: rgba(36, 129, 204, 0.08);
}

.tickets-refresh-btn:active {
  background-color: rgba(36, 129, 204, 0.12);
  transform: scale(0.95);
}

.tickets-refresh-btn:focus {
  outline: none;
}

.tickets-refresh-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 129, 204, 0.25);
}

.tickets-refresh-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0;
  pointer-events: none;
}

/* Notifications: кнопка "Отметить все" рендерит текст, поэтому возвращаем font-size/line-height */
#miniappNotificationsRoot .tickets-filters .tickets-refresh-btn.tickets-markall-btn {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #2481cc !important;
}

#miniappNotificationsRoot .tickets-filters .tickets-refresh-btn.tickets-markall-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Notifications: на мобильных в строке фильтров есть две кнопки справа (удалить + обновить).
 * Чтобы всё помещалось в одну строку, уменьшаем gap/паддинги и прижимаем правый блок. */
@media (max-width: 420px) {
  #miniappNotificationsRoot .tickets-filters {
    gap: 4px;
    flex-wrap: nowrap;
  }

  /* Шрифт НЕ трогаем — только padding */
  #miniappNotificationsRoot .tickets-filters .chip {
    padding: 6px 10px;
  }

  /* Последний chip (обычно "Прочитанные") отталкивает кнопки вправо */
  #miniappNotificationsRoot .tickets-filters .chip:last-of-type {
    margin-right: auto;
  }

  /* В этом разделе margin-left:auto у каждой кнопки мешает (две кнопки начинают "бороться" за место) */
  #miniappNotificationsRoot .tickets-filters .tickets-refresh-btn {
    margin-left: 0;
  }

  /* Маленький отступ между двумя круглыми кнопками справа */
  #miniappNotificationsRoot .tickets-filters .tickets-refresh-btn + .tickets-refresh-btn {
    margin-left: 6px;
  }
}

.tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* Отступ снизу для action-buttons от TabBar (как в других разделах) */
.tickets-view .action-buttons {
  margin-bottom: var(--tabbar-safe-space, 84px);
}

/* Специальный отступ для action-buttons в форме верификации */
#ticketsViewVerificationForm .action-buttons {
  margin-bottom: var(--spacing-md) !important;
  margin-top: 0 !important;
}

/* Стили для иконок в лейблах форм и review секции */
#ticketsRoot .form-label {
  color: #2481cc !important;
}

#ticketsRoot .label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #2481cc !important;
  flex-shrink: 0;
  height: 1em;
}

#ticketsRoot .label-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: #2481cc !important;
  color: #2481cc !important;
}

/* Стили для иконок в review секции */
#ticketsRoot .info-card .label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  color: #2481cc !important;
  margin-right: 4px;
}

#ticketsRoot .info-card .label-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: #2481cc !important;
  color: #2481cc !important;
}

#ticketsRoot .info-card strong {
  color: #2481cc !important;
}

/* Стиль текста в полях ввода формы создания тикета - как в autocomplete-item-title */
#ticketsRoot #ticketCategory,
#ticketsRoot #ticketSubject,
#ticketsRoot #ticketDescription {
  color: #2481cc !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Стиль текста в review секции (Step 2) - как в autocomplete-item-title */
#ticketsRoot #ticketCategoryReview,
#ticketsRoot #ticketSubjectReview {
  color: #2481cc !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Цвет текста при выделении в полях ввода */
#ticketsRoot #ticketCategory::selection,
#ticketsRoot #ticketSubject::selection,
#ticketsRoot #ticketDescription::selection,
#ticketsRoot #ticketCategory::-moz-selection,
#ticketsRoot #ticketSubject::-moz-selection,
#ticketsRoot #ticketDescription::-moz-selection {
  background-color: rgba(36, 129, 204, 0.2) !important;
  color: #2481cc !important;
}

/* Цвет текста в детальном просмотре тикета */
#ticketsRoot #ticketDetailTitle {
  color: #666 !important;
}

#ticketsRoot #ticketDetailStatus,
#ticketsRoot #ticketDetailCategoryValue,
#ticketsRoot #ticketDetailSubjectValue {
  color: #2481cc !important;
}

/* Цвет текста в сообщениях тикета */
#ticketsRoot .ticket-message-author {
  color: #2481cc !important;
}

#ticketsRoot .ticket-message-text {
  color: #666 !important;
}

/* Цвет описания категории тикета - серый */
#ticketsRoot #ticketCategoryDescriptionText {
  color: #666 !important;
}

/* Текст в информационной карточке формы верификации */
#ticketsViewVerificationForm .info-card .info-content p {
  color: #666 !important;
}

/* Текст в hint-text формы верификации - серый цвет */
#ticketsViewVerificationForm .hint-text {
  color: #666 !important;
}

/* Кнопка "Создать обращение" - унифицированный стиль как в карточках заявок */
#ticketsCreateBtn {
  background-color: #ffffff !important;
  color: #2481cc !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#ticketsCreateBtn .btn-ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  line-height: 0;
  color: currentColor !important;
}

#ticketsCreateBtn .btn-ico svg {
  display: block;
}

/* Иконка SVG в кнопке - синий цвет в idle состоянии */
#ticketsCreateBtn svg,
#ticketsCreateBtn .btn-ico svg,
#ticketsCreateBtn path {
  fill: #2481cc !important;
  color: #2481cc !important;
}

#ticketsCreateBtn:hover,
#ticketsCreateBtn:active,
#ticketsCreateBtn:focus-visible {
  background-color: #2481cc !important;
  color: #ffffff !important;
  border-color: #2481cc !important;
}

/* Иконка SVG в кнопке - белый цвет в hover/active/focus состоянии */
#ticketsCreateBtn:hover svg,
#ticketsCreateBtn:hover .btn-ico svg,
#ticketsCreateBtn:hover path,
#ticketsCreateBtn:active svg,
#ticketsCreateBtn:active .btn-ico svg,
#ticketsCreateBtn:active path,
#ticketsCreateBtn:focus-visible svg,
#ticketsCreateBtn:focus-visible .btn-ico svg,
#ticketsCreateBtn:focus-visible path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Кнопки формы создания тикета - унифицированный стиль */
#ticketBackFromStep1Btn,
#ticketBackFromStep2Btn,
#ticketNextToStep2Btn,
#ticketSubmitBtn,
#ticketBackFromVerificationBtn,
#ticketVerificationSubmitBtn {
  background-color: #ffffff !important;
  color: #2481cc !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#ticketBackFromStep1Btn .btn-ico,
#ticketBackFromStep2Btn .btn-ico,
#ticketNextToStep2Btn .btn-ico,
#ticketSubmitBtn .btn-ico,
#ticketBackFromVerificationBtn .btn-ico,
#ticketVerificationSubmitBtn .btn-ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  line-height: 0;
  color: currentColor !important;
}

#ticketBackFromStep1Btn .btn-ico svg,
#ticketBackFromStep2Btn .btn-ico svg,
#ticketNextToStep2Btn .btn-ico svg,
#ticketSubmitBtn .btn-ico svg,
#ticketBackFromVerificationBtn .btn-ico svg,
#ticketVerificationSubmitBtn .btn-ico svg {
  display: block;
}

/* Иконка SVG в кнопках - синий цвет в idle состоянии */
#ticketBackFromStep1Btn svg,
#ticketBackFromStep1Btn .btn-ico svg,
#ticketBackFromStep1Btn path,
#ticketBackFromStep2Btn svg,
#ticketBackFromStep2Btn .btn-ico svg,
#ticketBackFromStep2Btn path,
#ticketNextToStep2Btn svg,
#ticketNextToStep2Btn .btn-ico svg,
#ticketNextToStep2Btn path,
#ticketSubmitBtn svg,
#ticketSubmitBtn .btn-ico svg,
#ticketSubmitBtn path,
#ticketBackFromVerificationBtn svg,
#ticketBackFromVerificationBtn .btn-ico svg,
#ticketBackFromVerificationBtn path,
#ticketVerificationSubmitBtn svg,
#ticketVerificationSubmitBtn .btn-ico svg,
#ticketVerificationSubmitBtn path {
  fill: #2481cc !important;
  color: #2481cc !important;
}

#ticketBackFromStep1Btn:hover,
#ticketBackFromStep1Btn:active,
#ticketBackFromStep1Btn:focus-visible,
#ticketBackFromStep2Btn:hover,
#ticketBackFromStep2Btn:active,
#ticketBackFromStep2Btn:focus-visible,
#ticketNextToStep2Btn:hover,
#ticketNextToStep2Btn:active,
#ticketNextToStep2Btn:focus-visible,
#ticketSubmitBtn:hover,
#ticketSubmitBtn:active,
#ticketSubmitBtn:focus-visible,
#ticketBackFromVerificationBtn:hover,
#ticketBackFromVerificationBtn:active,
#ticketBackFromVerificationBtn:focus-visible,
#ticketVerificationSubmitBtn:hover,
#ticketVerificationSubmitBtn:active,
#ticketVerificationSubmitBtn:focus-visible {
  background-color: #2481cc !important;
  color: #ffffff !important;
  border-color: #2481cc !important;
}

/* Иконка SVG в кнопках - белый цвет в hover/active/focus состоянии */
#ticketBackFromStep1Btn:hover svg,
#ticketBackFromStep1Btn:hover .btn-ico svg,
#ticketBackFromStep1Btn:hover path,
#ticketBackFromStep1Btn:active svg,
#ticketBackFromStep1Btn:active .btn-ico svg,
#ticketBackFromStep1Btn:active path,
#ticketBackFromStep1Btn:focus-visible svg,
#ticketBackFromStep1Btn:focus-visible .btn-ico svg,
#ticketBackFromStep1Btn:focus-visible path,
#ticketBackFromStep2Btn:hover svg,
#ticketBackFromStep2Btn:hover .btn-ico svg,
#ticketBackFromStep2Btn:hover path,
#ticketBackFromStep2Btn:active svg,
#ticketBackFromStep2Btn:active .btn-ico svg,
#ticketBackFromStep2Btn:active path,
#ticketBackFromStep2Btn:focus-visible svg,
#ticketBackFromStep2Btn:focus-visible .btn-ico svg,
#ticketBackFromStep2Btn:focus-visible path,
#ticketNextToStep2Btn:hover svg,
#ticketNextToStep2Btn:hover .btn-ico svg,
#ticketNextToStep2Btn:hover path,
#ticketNextToStep2Btn:active svg,
#ticketNextToStep2Btn:active .btn-ico svg,
#ticketNextToStep2Btn:active path,
#ticketNextToStep2Btn:focus-visible svg,
#ticketNextToStep2Btn:focus-visible .btn-ico svg,
#ticketNextToStep2Btn:focus-visible path,
#ticketSubmitBtn:hover svg,
#ticketSubmitBtn:hover .btn-ico svg,
#ticketSubmitBtn:hover path,
#ticketSubmitBtn:active svg,
#ticketSubmitBtn:active .btn-ico svg,
#ticketSubmitBtn:active path,
#ticketSubmitBtn:focus-visible svg,
#ticketSubmitBtn:focus-visible .btn-ico svg,
#ticketSubmitBtn:focus-visible path,
#ticketBackFromVerificationBtn:hover svg,
#ticketBackFromVerificationBtn:hover .btn-ico svg,
#ticketBackFromVerificationBtn:hover path,
#ticketBackFromVerificationBtn:active svg,
#ticketBackFromVerificationBtn:active .btn-ico svg,
#ticketBackFromVerificationBtn:active path,
#ticketBackFromVerificationBtn:focus-visible svg,
#ticketBackFromVerificationBtn:focus-visible .btn-ico svg,
#ticketBackFromVerificationBtn:focus-visible path,
#ticketVerificationSubmitBtn:hover svg,
#ticketVerificationSubmitBtn:hover .btn-ico svg,
#ticketVerificationSubmitBtn:hover path,
#ticketVerificationSubmitBtn:active svg,
#ticketVerificationSubmitBtn:active .btn-ico svg,
#ticketVerificationSubmitBtn:active path,
#ticketVerificationSubmitBtn:focus-visible svg,
#ticketVerificationSubmitBtn:focus-visible .btn-ico svg,
#ticketVerificationSubmitBtn:focus-visible path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Кнопка "Подать заявку" в карточке уведомления о верификации */
#verificationNoticeBtn {
  background-color: #ffffff !important;
  color: rgb(237, 108, 2) !important;
  border: 1px solid rgb(237, 108, 2) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#verificationNoticeBtn:hover,
#verificationNoticeBtn:active,
#verificationNoticeBtn:focus-visible {
  background-color: rgb(237, 108, 2) !important;
  color: #ffffff !important;
  border-color: rgb(237, 108, 2) !important;
}

#verificationNoticeBtn svg,
#verificationNoticeBtn .btn-ico svg,
#verificationNoticeBtn path {
  fill: rgb(237, 108, 2) !important;
  color: rgb(237, 108, 2) !important;
}

#verificationNoticeBtn:hover svg,
#verificationNoticeBtn:hover .btn-ico svg,
#verificationNoticeBtn:hover path,
#verificationNoticeBtn:active svg,
#verificationNoticeBtn:active .btn-ico svg,
#verificationNoticeBtn:active path,
#verificationNoticeBtn:focus-visible svg,
#verificationNoticeBtn:focus-visible .btn-ico svg,
#verificationNoticeBtn:focus-visible path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Адаптивные хардкоды больше не нужны — safe-space вычисляется динамически в tabbar.js */

.ticket-card {
  background-color: var(--tg-theme-secondary-bg-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  /* Запрещаем выделение текста в карточках (Android/Telegram WebView) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* На некоторых Android WebView user-select может не наследоваться на вложенные элементы */
.ticket-card,
.ticket-card * {
  -webkit-user-select: none;
  user-select: none;
}

.ticket-card:active {
  transform: scale(0.99);
}

.ticket-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.ticket-number {
  font-weight: 700;
  color: #666 !important;
}

.ticket-status {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--tg-theme-bg-color);
}

.ticket-status.open { color: var(--danger-color); }
.ticket-status.in_progress { color: var(--warning-color); }
.ticket-status.answered { color: var(--primary-color); }
.ticket-status.resolved { color: var(--success-color); }
.ticket-status.closed { color: var(--tg-theme-hint-color); }

.ticket-subject {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
  line-height: 1.25;
}

.ticket-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 12px;
  color: var(--tg-theme-hint-color);
}

/* Карточка-уведомление о неподтвержденной компании */
.verification-notice-card {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  cursor: default;
}

/* Явно запрещаем выделение текста в карточке уведомления о верификации */
#verificationNoticeCard,
#verificationNoticeCard * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.verification-notice-card:active {
  transform: none;
}

.verification-notice-icon {
  display: inline-flex;
  align-items: center;
  color: rgb(237, 108, 2) !important;
  flex-shrink: 0;
}

.verification-notice-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.verification-notice-card .ticket-subject {
  color: rgb(237, 108, 2) !important;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.verification-notice-card .ticket-meta {
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.verification-notice-card .ticket-card-actions {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(133, 100, 4, 0.2);
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.ticket-message {
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.06);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ticket-message:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.ticket-message.support {
  border-left: 4px solid var(--primary-color);
}

.ticket-message.user {
  border-left: 4px solid var(--success-color);
}

.ticket-message-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.ticket-message-author {
  font-weight: 700;
  color: var(--tg-theme-text-color);
}

.ticket-message-date {
  font-size: 12px;
  color: var(--tg-theme-hint-color);
}

.ticket-message-text {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--tg-theme-text-color);
  line-height: 1.35;
  
  /* Перенос длинных слов и строк */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  
  /* Ограничение до 3 строк по умолчанию */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-normal);
}

.ticket-message-text.expanded {
  /* При разворачивании убираем ограничение */
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.ticket-message-text {
  /* Убираем кликабельность с текста, так как кликабелен весь блок */
  cursor: default;
  user-select: text; /* Разрешаем выделение текста */
}

/* Отступ снизу для thread, чтобы контент не перекрывался панелью ввода (как в чате) */
.ticket-thread {
  padding-bottom: 100px; /* Отступ для chat-input-container: высота контейнера (~64px) + запас (36px) */
}

/* Модальное окно просмотра сообщения - применяем стили ticket-message к самому modal-content */
#ticketMessageModal .modal-content.ticket-message {
  cursor: default; /* Убираем курсор pointer, так как это модальное окно */
}

#ticketMessageModal .modal-content.ticket-message:hover {
  background-color: var(--tg-theme-secondary-bg-color); /* Убираем hover эффект */
}

/* Стили для области текста в модальном окне */
#ticketMessageModal .railway-modal-list {
  background: transparent !important; /* Убираем белый фон, используем фон модального окна */
  border: 1px solid rgba(0, 0, 0, 0.12); /* Полупрозрачная серая рамка */
  border-radius: 8px; /* Аккуратные скругленные углы */
  padding: var(--spacing-md) !important;
}

/* Модальное окно расширенного ввода использует стили из chat.css (chat-message-modal-*) */

/* Стили для header детального просмотра с кнопками */
.tickets-detail-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

.tickets-detail-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  justify-content: center;
  text-align: center;
}

.tickets-detail-title h3 {
  margin: 0;
}

/* Кнопки действий в стиле MUI */
.tickets-action-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: #1976d2; /* MUI primary color */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.tickets-action-btn:hover {
  background-color: rgba(25, 118, 210, 0.08); /* MUI hover color */
}

.tickets-action-btn:active {
  background-color: rgba(25, 118, 210, 0.12);
  transform: scale(0.95);
}

.tickets-action-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}