/* ==========================================================================
   Стили экранов: вход, список заявок, карточки рабочего, админ-панель
   ========================================================================== */

/* --- Вход --- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.auth__card { width: min(26rem, 100%); display: grid; gap: var(--space-5); }
.auth__brand { display: flex; align-items: center; gap: var(--space-3); }
.auth__brand .brand__mark { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); }
.auth__brand .brand__mark svg { width: 1.6rem; height: 1.6rem; }
.auth__title { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.auth__sub { color: var(--c-text-muted); font-size: var(--fs-sm); }
.auth__theme { position: fixed; top: var(--space-3); right: var(--space-3); }

/* --- Фильтры списка заявок --- */
.filters-toggle { display: inline-flex; }
.filters-panel { display: none; }
.filters-panel.is-open { display: block; }
@media (min-width: 960px) {
  .filters-toggle { display: none; }
  .filters-panel { display: block; }
}
.filters-card { padding: var(--space-4); }

/* --- Список заявок: таблица (десктоп) и карточки (телефон) --- */
.orders-table { display: none; }
.orders-cards { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .orders-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .orders-table { display: block; }
  .orders-cards { display: none; }
}

.orders-table .cell-num { white-space: nowrap; min-width: 5.5rem; }
.orders-table .cell-status { min-width: 6.75rem; }
.orders-table .cell-main { min-width: 10rem; }
.orders-table .cell-addr { min-width: 12rem; max-width: 15rem; }
/* Столбцов стало больше (адрес и заказчик раздельно): уже боковые отступы, в «Действиях» только иконка корзины */
.orders-table th, .orders-table td { padding-inline: var(--space-3); }
.orders-table .row-actions { min-width: 0; }
/* Сортировка по клику на заголовок (десктоп) */
.table th.th-sortable { padding-block: 0; }
.orders-table .cell-company { min-width: 8rem; max-width: 11rem; }
.th-sort__n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: var(--radius-pill);
  background: var(--c-blue-soft); color: var(--c-blue); font-size: 0.7rem; font-weight: 700; letter-spacing: 0;
}
/* Столбец «Время»: подпись меняется («По дате создания»), поэтому резервируем ширину, чтобы столбцы не «прыгали» */
.th-sortable[data-column="time"] .th-sort__text { display: inline-block; min-width: 7.9rem; }
.th-sort {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: var(--tap); margin-inline: calc(-1 * var(--space-2)); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
  color: inherit; cursor: pointer;
}
.th-sort__icon { display: inline-flex; flex: none; }
.th-sort .icon { width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.5; }
.th-sort:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-surface-3) 70%, transparent); }
.th-sort:hover .icon { opacity: 0.9; }
.th-sort.is-active { color: var(--c-text); }
.th-sort.is-active .icon { opacity: 1; color: var(--c-blue); }
.th-sort:focus-visible { outline-offset: -2px; }
#results.is-stale { opacity: 0.6; transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) { #results.is-stale { transition: none; } }

/* Панель выбранных сортировок (везде): метки по приоритету, «+ Добавить», «Сбросить» */
.sort-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sort-panel__title { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.sort-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sort-chip {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-surface-2);
}
.sort-chip button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sort-chip__main { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0 var(--space-2) 0 var(--space-3); font-size: var(--fs-sm); font-weight: 600; }
.sort-chip__main .icon { width: 0.95rem; height: 0.95rem; color: var(--c-blue); }
.sort-chip__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  border-radius: var(--radius-pill); background: var(--c-blue-soft); color: var(--c-blue); font-size: 0.7rem; font-weight: 700;
}
.sort-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 2rem; color: var(--c-text-muted); }
.sort-chip__main:hover, .sort-chip__x:hover { background: color-mix(in srgb, var(--c-surface-3) 70%, transparent); color: var(--c-text); }
.sort-chip button:focus-visible { outline-offset: -2px; }
.sort-add { width: auto; min-height: 2rem; padding-block: 0.15rem; font-size: var(--fs-sm); }
.sort-panel[hidden] { display: none; }

.amount-line { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-title { font-weight: 600; }
.cell-sub { color: var(--c-text-muted); font-size: var(--fs-xs); }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; min-width: 12rem; max-width: 24rem; }

.order-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.order-card--urgent { border-left: 5px solid var(--c-danger); }
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.order-card__num {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0; border: 0; background: none;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); color: var(--c-text);
  cursor: pointer; text-align: left;
}
/* Растягиваем область нажатия на всю карточку, не вкладывая интерактивные элементы */
.order-card__num::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.order-card__num:focus-visible { outline: none; }
.order-card__num:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.order-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; position: relative; z-index: 1; pointer-events: none; }
.order-card__name { font-weight: 650; }
.order-card__addr { color: var(--c-text-muted); }
.order-card__desc { color: var(--c-text); font-size: var(--fs-sm); }
.order-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--c-text-muted); font-size: var(--fs-sm); }
.order-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.order-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.order-card__actions .btn { flex: 1 1 auto; }

/* --- Экран рабочего --- */
.worker-card { padding: var(--space-4); gap: var(--space-3); }
.worker-card .order-card__num { font-size: var(--fs-lg); }
.worker-card .order-card__name { font-size: var(--fs-lg); }
.worker-card .order-card__addr { color: var(--c-text); }
.worker-card .order-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.worker-card .order-card__actions .btn--wide { grid-column: 1 / -1; }
@media (min-width: 720px) { .worker-card .order-card__actions { display: flex; } .worker-card .order-card__actions .btn--wide { flex: 1 1 100%; } }

.worker-groups { display: grid; gap: var(--space-5); }
.worker-group__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-md); }
.worker-group__count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: var(--c-surface-3); font-size: var(--fs-xs); font-weight: 700; }
.worker-grid { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .worker-grid { grid-template-columns: repeat(2, 1fr); } }

.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.big-actions .btn { min-height: 3.25rem; }
@media (max-width: 380px) { .big-actions { grid-template-columns: 1fr; } }

/* --- Админ-панель --- */
.admin-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.cards-list { display: grid; gap: var(--space-3); }
.mini-card { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.mini-card__title { font-weight: 650; }
.table-only { display: none; }
.cards-only { display: grid; }
@media (min-width: 640px) { .cards-only { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .table-only { display: block; }
  .cards-only { display: none; }
}
.total-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); font-size: var(--fs-sm); }
.total-line strong { font-variant-numeric: tabular-nums; }
.section-title { font-size: var(--fs-lg); margin-bottom: var(--space-3); }

/* --- Уведомления в MAX (экран рабочего) и окно с кодом --- */
.max-block { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.max-block__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-blue-soft); color: var(--c-blue); }
.max-block__text { flex: 1 1 12rem; min-width: 0; display: grid; gap: 2px; }
.max-block__title { font-weight: 650; }
.max-block__state { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--c-text-muted); }
.max-block .btn { min-height: var(--tap); }
@media (max-width: 479px) { .max-block .btn { width: 100%; } }

.max-code { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-1); }
.max-code__value {
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2;
  padding: var(--space-2) var(--space-4); border: 1px dashed var(--c-input-border); border-radius: var(--radius-md); background: var(--c-surface-2);
  user-select: all; overflow-wrap: anywhere;
}
.max-code.is-expired .max-code__value { opacity: 0.45; text-decoration: line-through; }
.max-code__timer { font-size: var(--fs-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 379px) { .max-code__value { font-size: 1.6rem; letter-spacing: 0.12em; } }