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

/* --- Вход --- */
.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: 6.75rem; }
.orders-table .cell-main { min-width: 11rem; }
.orders-table .cell-addr { min-width: 14rem; max-width: 22rem; }
/* Сортировка по клику на заголовок (десктоп) */
.table th.th-sortable { padding-block: 0; }
.th-sorts { display: flex; align-items: center; column-gap: var(--space-3); }
.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-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.sort-bar .field { max-width: 24rem; }
@media (min-width: 1100px) { .sort-bar { display: none; } }

.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); }