/* ==========================================================================
   Helpdesk — экраны прототипа: вход, список заявок, карточка заявки.
   Поверх дизайн-системы 1.0: только раскладка и специфика экранов,
   все цвета, отступы и шрифты — токены.
   ========================================================================== */

/* .app объявлен как display:grid и перебивает браузерное [hidden] */
[hidden] { display: none !important; }

/* --- Загрузка ------------------------------------------------------------- */

.boot {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
}
.boot__mark {
  width: 40px; height: 40px;
  background-image: var(--grad-hot);
  animation: hd-blink 1.2s var(--ease) infinite;
}
@keyframes hd-blink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* --- Вход и регистрация ---------------------------------------------------- */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
}
.auth__card {
  width: min(440px, 100%);
  padding: 0;
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
}
.auth__stripe { height: 6px; }
.auth__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.auth__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}
.auth .tabs .tab { flex: 1; text-align: center; }
.auth__sent { display: flex; flex-direction: column; gap: var(--sp-4); }

/* --- Список --------------------------------------------------------------- */

.tickets tbody tr { cursor: pointer; }

/* Колонки уже, чем в макете: тема должна получить максимум места */
.tickets .c-id     { width: 76px; }
.tickets .c-pri    { width: 108px; }
.tickets .c-status { width: 124px; }
.tickets .c-people { width: 132px; }
.tickets .c-upd    { width: 108px; }

.cell-sub { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-sub__title {
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-sub__meta { font-size: var(--fs-xs); color: var(--fg-muted); }

/* --- Карточка заявки ------------------------------------------------------- */

.ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.ticket__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ticket__panel {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-6));
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.ticket__panel h3 {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
}

.panel-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.panel-row dt { color: var(--fg-muted); flex: none; }
.panel-row dd { margin: 0; text-align: right; min-width: 0; }

.message__text { white-space: pre-wrap; overflow-wrap: anywhere; }

.reply {
  border: var(--bw-hair) solid var(--bd-default);
  background: var(--bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reply .textarea { min-height: 96px; }

/* --- Модалка -------------------------------------------------------------- */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  overflow: auto;
}

/* --- Тосты ---------------------------------------------------------------- */

.toasts {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(380px, calc(100vw - var(--sp-8)));
}
.toasts .alert { box-shadow: var(--sh-pop); }

/* --- Мелочи ---------------------------------------------------------------- */

.is-busy { opacity: .5; pointer-events: none; }
.stretch-start { align-self: flex-start; }

@media (max-width: 1040px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket__panel { position: static; }
}

@media (max-width: 768px) {
  /* На узком экране правая группа топбара не помещалась и «Выйти» уезжал за край.
     Имя и почта всё равно продублированы в сайдбаре. */
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-3); }
  .topbar__user { display: none; }
  .auth__body { padding: var(--sp-5); }
}