/* Правки вида раздела «График / Табель» — 10.09.2026 (заметки Раиля).
   Файл подключается после общих стилей и перекрывает их только для своего раздела.

   Область действия — класс .att-view на #content (его ставит раздел, а роутер
   снимает при уходе) и .att-modal — окна раздела (карточка сотрудника,
   «Опоздания за месяц», «Больше суток за одни сутки»): они лежат вне #content.
   Только токены дизайн-системы, теней нет. */

/* ═══ M4.1 — вкладки и выбор периода одной строкой ═══════════════════════
   Раньше год и месяц стояли своей строкой над вкладками, а левая половина
   этой строки была пустой. Теперь: вкладки слева, «Месяц ▾» (и «День ▾» на
   вкладке «Сегодня») — справа в том же ряду. */
.att-view .att-head{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;
}
.att-view .att-head>.subtabs{flex:1 1 auto;min-width:0;margin:0}
.att-view #att-header-right{
  display:flex;align-items:center;gap:6px 14px;flex:0 0 auto;margin-left:auto;
}
.att-view #att-header-right .field-row{margin:0;flex-wrap:nowrap;gap:8px}
/* Подпись «День» — как «Месяц» у общего выбора периода (.mrpick label). */
.att-view #att-header-right .att-day-wrap label{font-size:12px;color:var(--text-2);font-weight:560;white-space:nowrap}
.att-view .att-day-wrap .xsel-btn{min-width:112px}

/* Кнопки загрузки — обычные кнопки сайта (29 px, рамка, без заливки). */
.att-view .att-uploads{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.att-view .att-upbtn{flex:0 0 auto;white-space:nowrap}

/* Под-вкладки «Справочников» — ближе к содержимому. */
.att-view #att-view>.subtabs{margin-bottom:12px}

/* ═══ M4.2 — плашки «Смена на ДД.ММ» ═════════════════════════════════════
   Вдвое ниже (≈46 px вместо 82), число крупнее — 20 px (местное исключение
   по слову Раиля: утверждённые 16 px здесь мелковаты), пояснение мелко
   справа от числа в той же строке. Подпись — одной строкой. */
.att-view .att-shift .bento .bx{
  grid-row:auto;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);
  column-gap:7px;align-items:baseline;padding:4px 9px 4px;
}
.att-view .att-shift .bento .bl{
  grid-column:1/-1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:unset;margin-bottom:1px;
}
.att-view .att-shift .bento .bv{grid-column:1;font-size:20px;line-height:1.1;letter-spacing:-.02em}
.att-view .att-shift .bento .bs{
  grid-column:2;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;color:var(--text-2);
}

/* ═══ M4.3 — таблицы раздела как блоки 02 и 03 Дашборда ══════════════════
   Таблица вплотную к краям блока, шапка таблицы сразу под шапкой блока (без
   белой полосы 10 px — её давало .att-view .tablewrap{padding:10px 12px}
   в components.css), все линии видны, строка 28 px, шапка 19 px / 9 px,
   ФИО в одну строку, остальное тоже в одну строку: не влезает — прокрутка
   вбок внутри блока, ФИО стоит на месте. */
.att-view .tblock .tablewrap,.att-modal .tblock .tablewrap{padding:0;margin:0}
:is(.att-view,.att-modal) .tblock .tablewrap>table>thead>tr>th{
  height:19px;padding:3px 11px;box-sizing:border-box;
  font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.2;
  color:var(--text-3);white-space:nowrap;vertical-align:middle;
}
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr>td{
  height:28px;padding:0 9px;box-sizing:border-box;
  font-size:12.5px;line-height:1.25;vertical-align:middle;
  border-bottom:1px solid var(--hair);
}
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr>td:first-child{
  padding-left:11px;font-weight:500;white-space:nowrap;
}
/* Общее правило сайта даёт первому столбцу минимум 200–230 px и перенос.
   Здесь первый столбец — ФИО (или дата) в одну строку и шириной по
   содержимому; у списков дня ширину выравнивает сам раздел. */
:is(.att-view,.att-modal) .tblock .tablewrap>table>thead>tr>th:first-child,
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr>td:first-child{min-width:0}
:is(.att-view,.att-modal) .tblock .tablewrap>table>thead>tr>th:first-child{padding-left:11px}
:is(.att-view,.att-modal) .tblock .tablewrap>table>thead>tr>th:last-child,
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr>td:last-child{padding-right:11px}
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr:last-child>td,
:is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr.att-last>td{border-bottom:0}
/* Широкие таблицы (11 столбцов «Явок»): поля числовых ячеек 8 px вместо
   9–11 — на 1680 таблица встаёт в блок целиком, без прокрутки. */
.att-view .att-wide .tablewrap>table>thead>tr>th:not(:first-child),
.att-view .att-wide .tablewrap>table>tbody>tr>td:not(:first-child){padding-left:8px;padding-right:8px}
/* Две роли за сутки — двумя строками внутри ячейки. */
:is(.att-view) .tblock[data-group] .tablewrap>table>tbody>tr>td:nth-child(2){line-height:1.2}
/* Метка-статус в строке — компактная, чтобы строка оставалась 28 px. */
:is(.att-view,.att-modal) .tablewrap td .badge{
  font-size:10.5px;padding:2px 7px;line-height:1.25;gap:5px;white-space:nowrap;
}
/* Комментарий: одна строка, если есть место; длинный — переносится
   внутри своей ячейки (он последний и забирает остаток ширины). */
:is(.att-view,.att-modal) .tablewrap td .att-note{display:block;font-size:11.5px;line-height:1.3;padding:3px 0}

/* Сортировка щелчком по заголовку (M4.5): стрелка ↑/↓ у выбранного столбца. */
:is(.att-view,.att-modal) th.att-sort{cursor:pointer;user-select:none;-webkit-user-select:none}
:is(.att-view,.att-modal) th.att-sort:hover,
:is(.att-view,.att-modal) th.att-sort[aria-sort="ascending"],
:is(.att-view,.att-modal) th.att-sort[aria-sort="descending"]{color:var(--text-1)}
:is(.att-view,.att-modal) th.att-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.att-sort-ar{display:inline-block;margin-left:4px;font-size:10px;letter-spacing:0;line-height:1}

/* Шапка блока — 30 px ровно, как у эталона: поле 8 px сверху и снизу из
   components.css раздувало её до 40 px, когда в шапке стоит поле поиска. */
@media (min-width:761px){
  .att-view .tblock-head{padding:0 14px}
}

/* Поиск в шапке «На смене сейчас» (M4.5): белое поле 24 px — как малые
   переключатели в шапках блоков. Счётчик «7 из 29 чел.» — справа от поля. */
.att-view .tblock-head input.inp.att-find{
  margin-left:auto;height:24px;width:210px;max-width:46%;min-width:120px;padding:0 9px;
  font-family:inherit;font-size:12px;line-height:1;
  background:var(--surface-2);color:var(--text-1);
  border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);box-shadow:none;
}
.att-view .tblock-head input.inp.att-find::placeholder{color:var(--text-3);opacity:1}
.att-view .tblock-head input.inp.att-find:focus{outline:1px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.att-view .tblock-head .att-find+.th-note{margin-left:8px;min-width:0}
.att-find-empty{padding:8px 11px;font-size:12px;color:var(--text-3);border-top:1px solid var(--hair)}

/* ── Календарь «Плановый график» — обычная таблица ────────────────────── */
.att-view table.att-cal{width:max-content;min-width:100%}
.att-view table.att-cal col.c-day{width:26px}
:is(.att-view) .tblock .tablewrap>table.att-cal>thead>tr>th.d{
  padding:2px 0;min-width:26px;text-align:center;letter-spacing:0;line-height:1.1;
}
.att-view table.att-cal thead th.d b{display:block;font-size:10px;font-weight:700;color:var(--text-1)}
.att-view table.att-cal thead th.d small{display:block;font-size:9px;font-weight:600;color:var(--text-3);text-transform:none}
:is(.att-view) .tblock .tablewrap>table.att-cal>tbody>tr>td.d{padding:0;text-align:center;min-width:26px}
/* Выходные — без бордо: их столбцы на ступень темнее фона строки. */
.att-view table.att-cal tbody td.wk{background:color-mix(in srgb,var(--surface-head) 55%,var(--surface-2))}
.att-view table.att-cal tbody tr:hover td.wk{background:color-mix(in srgb,var(--surface-head) 75%,var(--surface-2))}
.att-view table.att-cal .att-let{display:inline-block;font-size:11.5px;font-weight:600;color:var(--text-1);line-height:1}
.att-view table.att-cal .att-let.two{font-size:10px;letter-spacing:-.02em}
:is(.att-view) .tblock .tablewrap>table.att-cal>tbody>tr>td.att-cal-name{cursor:pointer}
:is(.att-view) .tblock .tablewrap>table.att-cal>tbody>tr>td.att-cal-role{font-size:11.5px;color:var(--text-2);white-space:nowrap}

/* ── «История загрузок»: блоки одного ряда — одной высоты ──────────────── */
.att-view .att-uploads-row{align-items:stretch}
.att-view .att-uploads-row>.tblock{margin:0}
:is(.att-view) .att-uploads-row .tablewrap>table>thead>tr>th{padding:3px 8px}
:is(.att-view) .att-uploads-row .tablewrap>table>tbody>tr>td{padding:0 8px;font-size:12px}
:is(.att-view) .att-uploads-row .tablewrap>table>*>tr>:first-child{padding-left:10px}
:is(.att-view) .att-uploads-row .tablewrap>table>*>tr>:last-child{padding-right:10px}

/* ── Легенда графика «Прогулы и опоздания»: отрезок линии и точка ─────── */
.att-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--text-2);margin-left:10px}
.att-legend-it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.att-legend-it>i{position:relative;display:inline-block;width:16px;height:2px;border-radius:1px;background:var(--ln)}
.att-legend-it>i::after{
  content:"";position:absolute;left:5px;top:-2.5px;width:7px;height:7px;border-radius:50%;background:var(--pt);
}

/* ═══ Окна раздела ═══════════════════════════════════════════════════════ */
.att-modal .modal-head{padding:12px 14px 12px 20px}
.att-modal .modal-head h2{font-size:16px;font-weight:600}
.att-modal button.modal-close{padding:0;font-family:inherit;font-size:15px;line-height:1}
.att-modal .modal-body{padding:16px 20px 18px}
.att-modal .tblock{margin-bottom:12px}
.att-modal .tblock:last-child{margin-bottom:0}
.att-modal-count{font-size:12px;color:var(--text-2);line-height:1.45;margin:0 0 10px}
.att-modal-scroll{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%}
/* Таблица «Опоздания / Прогулы за месяц» и «Больше суток за одни сутки» —
   та же геометрия строк: шапка 19 px / 9 px, строка 28 px. */
.att-modal table.tbl>thead>tr>th{
  height:19px;padding:3px 11px;font-size:9px;letter-spacing:.08em;line-height:1.2;color:var(--text-3);
}
.att-modal table.tbl>tbody>tr>td{
  height:28px;padding:3px 9px;font-size:12.5px;line-height:1.3;vertical-align:middle;
}
.att-modal table.tbl>tbody>tr>td:first-child,.att-modal table.tbl>thead>tr>th:first-child{padding-left:11px}
/* ФИО, роль, дата — в одну строку; переносится только «Причина». */
.att-modal table.tbl>tbody>tr>td.nw{white-space:nowrap}
.att-modal table.tbl>tbody>tr>td.v{font-size:12.5px;font-weight:600}
.att-modal table.tbl>tbody>tr>td+td,.att-modal table.tbl>thead>tr>th+th{border-left:1px solid var(--hair-2)}

/* ═══ Телефон ════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .att-view .att-head>.subtabs{flex:1 1 100%}
  .att-view #att-header-right{margin-left:0;flex-wrap:wrap}
  .att-view .att-uploads{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  .att-view .att-uploads::-webkit-scrollbar{display:none}
  .att-view .tblock-head input.inp.att-find{order:3;flex:1 1 100%;max-width:none;margin-left:0}
}
@media (max-width:560px){
  /* На узком экране ФИО переносится: закреплённый столбец в 250 px оставил
     бы на остальные данные меньше трети экрана. */
  :is(.att-view,.att-modal) .tblock .tablewrap>table>tbody>tr>td:first-child{
    white-space:normal;min-width:160px;max-width:180px;line-height:1.2;padding-top:3px;padding-bottom:3px;
  }
}