/*
 * Base styles. Colours come only from tokens.css via var(--x); components are added in T0.7.
 * Type scale per design/Oblik-Design-System.md (Typography).
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Layout measures shared by both roles (owner review 2026-10-16). The page gutter lives with the shells below. */
:root {
  --row-inset: 16px; /* a row's text from its hairline's start: the record rows and the first table column */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Text for screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
}

/* Keyboard focus. Not drawn on the boards; needed for accessibility (T0.7 design question 3). */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--body);
}

.note {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}

/* ---------------------------------------------------------------------------------------------
 * Components (T0.7). Values are measured from design/ui-round-2; the plan lists them per board.
 * ------------------------------------------------------------------------------------------- */

/* Buttons: pills. Tabs and toggles are buttons with aria-pressed or aria-current. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary,
.btn[aria-pressed="true"],
.btn[aria-current="page"] {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--md {
  height: 48px;
  padding: 0 20px;
}

.btn--lg {
  height: 56px;
  padding: 0 20px;
}

.btn--sm {
  height: 40px;
  font-size: 14px;
  line-height: 16px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--danger {
  color: var(--danger);
}

/* The large submit of the phone record form (button-large-rounded: radius 16, not a pill); also a link (ErrorPage). */
.btn-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: none;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.icon-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.icon-btn--sm {
  width: 40px;
  height: 40px;
}

/* T4.4: the 40 px controls keep their drawn size; an invisible ::after 2 px outside makes the touch target 44 px. */
.icon-btn--sm,
.btn--sm,
button.avatar {
  position: relative;
}

.icon-btn--sm::after,
.btn--sm::after,
button.avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.icon-btn--ghost {
  background: transparent;
  color: var(--body);
}

.icon-btn:disabled,
.icon-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

button.avatar {
  cursor: pointer;
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 16px;
  line-height: 24px;
}

/* Status chips. */
.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.chip--success {
  background: var(--success-soft);
  color: var(--on-success-soft);
}

.chip--warn {
  background: var(--warn-soft);
  color: var(--on-warn-soft);
}

.chip--muted {
  color: var(--body);
}

/* Form fields: label, control, hint, error. */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row > .field {
  flex: 1 1 0;
}

/* Main: the date column is a little wider than the duration column. */
.field-row--date > .field:first-child {
  flex: 1.2 1 0;
}

.field__label {
  padding: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.field__hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--danger);
}

.field__error svg {
  flex: none;
}

.input,
.picker {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
}

.input::placeholder {
  color: var(--hint);
  opacity: 1;
}

.input--amount {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

textarea.input {
  padding: 16px;
  resize: none;
}

/* A field in use has a 2 px ink border, as drawn (MainNameSuggest, MainRoomNew), instead of the outer ring;
 * an invalid field keeps its danger border (the rule below wins). */
/* focus-within, not focus: a date field keeps its border while the calendar button inside it has focus. */
.input:focus-within,
.input-group:has(input:focus) {
  outline: none;
  border: 2px solid var(--ink);
}

.input[aria-invalid="true"],
.picker[aria-invalid="true"],
.input-group:has([aria-invalid="true"]) {
  border: 2px solid var(--danger);
}

/* A field-looking button that opens a picker (date, duration, position). */
.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.picker__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker svg {
  flex: none;
}

/* A control with a trailing icon (select, room combobox). */
.with-icon {
  position: relative;
}

.with-icon .input {
  padding-right: 44px;
}

.with-icon__icon {
  position: absolute;
  top: 17px;
  right: 14px;
  display: flex;
  color: var(--body);
  pointer-events: none;
}

select.input {
  appearance: none;
  cursor: pointer;
}

/* A select is drawn as a picker: its chevron sits 16 px from the edge (Main, Должность). */
.with-icon--select .with-icon__icon {
  right: 16px;
}

/* Password with a show/hide button (Login). */
.input-group {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 4px 0 16px;
  border-radius: var(--radius-md);
  background: var(--soft);
}

.input-group input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
}

/* Segmented choice (currency, theme): radio inputs, so it works without JavaScript. */
.segmented {
  display: flex;
  gap: 8px;
}

.segmented__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

.segmented__option:has(input:checked) {
  background: var(--primary);
  color: var(--on-primary);
}

.segmented__option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Banners: a status line with an icon. */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
}

.banner svg {
  flex: none;
  margin-top: 1px;
}

.banner--warn {
  background: var(--warn-soft);
  color: var(--on-warn-soft);
}

.banner--success {
  background: var(--success-soft);
  color: var(--on-success-soft);
}

.banner--danger {
  background: var(--danger-soft);
  color: var(--on-danger-soft);
}

/* Tables: ARIA-role grids as on the boards (role=table/row/columnheader/cell), a grey header strip and
 * 60 px rows with a hairline above each. Each table sets its columns with a modifier that defines
 * --table-cols (the grid-template-columns drawn on its board) and, when it scrolls on a phone, --table-min. */
.table-scroll {
  position: relative; /* contains the visually-hidden header labels, which would otherwise widen the page */
  overflow-x: auto;
}

.table {
  min-width: var(--table-min, 0);
}

.table__head,
.table__row {
  display: grid;
  grid-template-columns: var(--table-cols);
  align-items: center;
}

.table__head {
  min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--soft);
  color: var(--body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.table__row {
  box-sizing: content-box; /* 60 px plus the 1 px border, as drawn */
  min-height: 60px;
  border-top: 1px solid var(--line);
}

.table__cell {
  min-width: 0;
  padding: 0 12px;
  text-align: left;
}

.table__cell:first-child {
  padding-left: var(--row-inset);
}

.table__cell.num {
  text-align: right;
}

.table__name {
  font-weight: 500;
}

.table__row.is-off .table__name {
  color: var(--body);
}

/* Staff table (AdminStaff). */
.table--staff {
  --table-cols: minmax(130px, 1.2fr) minmax(100px, 1fr) 112px minmax(110px, 1fr) 64px 48px;
  --table-min: 580px;
}

/* Dictionaries (AdminDictionaries, AdminDictionariesPositions); currencies and categories are not drawn. */
.table--dict-rooms {
  --table-cols: minmax(150px, 2fr) 100px minmax(150px, 1.6fr) 130px 96px;
  --table-min: 640px;
}

.table--dict-positions,
.table--dict-categories {
  --table-cols: 48px minmax(200px, 2fr) 110px 120px 200px;
  --table-min: 640px;
}

.table--dict-currencies {
  --table-cols: 48px 100px minmax(160px, 2fr) 110px 120px 200px;
  --table-min: 740px;
}

a.icon-btn {
  color: var(--ink);
  text-decoration: none;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.report-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.report-card__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.report-card__text {
  font-size: 14px;
  line-height: 20px;
}

.dialog__form {
  display: contents;
}

/* Empty state (PhoneMyWeekEmpty). */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px 0;
  text-align: center;
}

.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--soft);
}

.empty__title {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

.empty__text {
  margin: 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

/* A page header with tools on the right: the week picker and buttons (ExpensesBalance, «Мои записи»). */
.page-header__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* «Расходы» (board ExpensesBalance, T4.22): the balance cards, then the expenses and payouts tables. */
.spends {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.balance__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.balance__card {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--band);
  color: var(--band-text);
}

.balance__label {
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}

.balance__closing {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
}

.balance__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}

.balance__line > :first-child {
  opacity: 0.8;
}

.balance__sum {
  font-variant-numeric: tabular-nums;
}

.spends__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.spend-total {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.spends-empty {
  margin: 0;
  color: var(--body);
}

/* The date field's status line, empty here (no status URL): it must not add a gap above the hint. */
.field__status:empty {
  display: none;
}

.spend-date {
  color: var(--body);
  font-size: 14px;
}

/* As the records table (board CompactRows): one line per row, 48 px, columns shared by every row (subgrid) and sized
 * by the longest value; date and amount always whole, a cut category or comment shows whole in a popup ([data-tip]). */
.table--expenses {
  --table-cols: auto minmax(180px, 1.2fr) minmax(200px, 2fr) auto 56px;
  --table-min: 640px;
}

.table--payouts {
  --table-cols: auto minmax(200px, 1fr) auto 56px;
  --table-min: 480px;
}

@media (min-width: 600px) {
  .table--spends {
    display: grid;
    grid-template-columns: var(--table-cols);
  }

  .table--spends > .table__head,
  .table--spends > .table__row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .table--spends > .table__row {
    min-height: 48px;
  }

  .table--spends .table__cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table--spends .table__cell--actions {
    overflow: visible;
  }
}

/* The panel's one-line explanation under its title (ExpenseNew, PayoutNew): 4 px under the title, as drawn. */
.panel__lead {
  margin: -28px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

/* Record history (AdminRecordHistory). */
.history {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.history-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.history-card__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.history__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history__entry {
  position: relative;
  padding-left: 22px;
}

.history__entry::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.history__when {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.history__line--quiet {
  color: var(--body);
}

/* A replaced or removed result file, still the admin's to download (RecordFile, D6). */
.history__download {
  margin-top: 8px;
}

/* The records table (record/table.html), the admin's (AdminRecords) and the manager's own (owner review 2026-10-16).
 * The date stays on one line. A day heading (.table__group) is for the phone form only. */
/* Board CompactRows (owner 2026-10-19): one line per record, 48 px. The columns are the table's, shared by every row
 * (subgrid), and sized by the longest value in the table: date, time, amount and status always whole; the client
 * first (at least 160 px), the manager 110-140 px and room · position 170-260 px; the comment takes the rest. Cut text shows whole in a
 * popup ([data-tip], js/app.js). The phone keeps its PhoneMyWeek rows (below 600 px). */
.table--records {
  --table-cols: auto fit-content(140px) minmax(160px, 1fr) fit-content(260px) minmax(80px, 1fr) auto auto auto 56px;
  --table-min: 800px;
}

.table--own {
  --table-cols: auto minmax(140px, 1fr) fit-content(260px) minmax(120px, 1.4fr) auto auto 56px;
  --table-min: 760px;
}

@media (min-width: 600px) {
  .table--records {
    display: grid;
    grid-template-columns: var(--table-cols);
  }

  .table--records > .table__head,
  .table--records > .table__row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .table--records > .table__row {
    min-height: 48px;
  }

  .table--records .table__cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table--records .table__cell--actions {
    overflow: visible;
  }

  .table--records .table__cell--staff {
    min-width: 110px;
  }

  .table--records .table__cell--place {
    min-width: 170px;
  }

  .table--records .table__cell--client {
    min-width: 160px;
  }

  .table__cut,
  .table--records .table__name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table--records .table__client {
    min-width: 0;
  }
}

/* A record's comment, one line; a cut one can take focus and shows its whole text (js/app.js, .comment-tip). */
.record-comment {
  display: block;
  overflow: hidden;
  color: var(--body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-tip][tabindex] {
  cursor: default;
}

[data-tip]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.comment-tip {
  position: fixed;
  z-index: 50;
  box-sizing: border-box;
  max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--canvas);
  font-size: 14px;
  line-height: 20px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.comment-tip[hidden] {
  display: none;
}

.table__cell--date {
  white-space: nowrap;
}

.table--records .table__group {
  display: none;
}

/* A row with a current result file (RecordFile): a paperclip after the client's name, which still shortens first. */
.table__client {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.table__client .table__name {
  min-width: 0;
}

.record-file {
  display: inline-flex;
  flex: none;
  color: var(--body);
}

/* A submitted week's row (RecordFile): the lock stands before the time; the menu stays and opens the record read-only. */
.table--records .table__cell--time {
  white-space: nowrap;
}

.table__lock {
  display: inline-flex;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--body);
}

/* A part of a page that is swapped as a whole (#records-page); its children sit in the page's own flow and gaps. */
.page-part {
  display: contents;
}

.is-deleted .strike {
  color: var(--body);
  text-decoration: line-through;
}

.record-place__none {
  color: var(--body);
}

.chip--danger {
  background: var(--danger-soft);
  color: var(--on-danger-soft);
}

/* Filters drawn as pill buttons with a chevron: styled native selects, and a pill toggle. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-wrap {
  position: relative;
}

.filter {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

select.filter {
  padding-right: 42px;
  appearance: none;
}

.filter-wrap__icon {
  position: absolute;
  top: 13px;
  right: 16px;
  display: flex;
  pointer-events: none;
}

/* A text filter (the client name on AdminRecords): the pill holds the input and, once it has text, a 44 px clear button
   next to it (not on top of it, so the two never share a touch area). */
.filter--search {
  display: inline-flex;
  align-items: center;
  width: 220px;
  padding: 0 0 0 16px;
  cursor: text;
}

.filter--search:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.filter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
}

.filter__input::placeholder {
  color: var(--hint);
  opacity: 1;
}

.filter__clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.filter__input:placeholder-shown + .filter__clear {
  display: none;
}

.filter--search:has(.filter__input:placeholder-shown) {
  padding-right: 16px;
}

.filter__clear:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.filter--toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter--toggle:has(input:checked) {
  background: var(--primary);
  color: var(--on-primary);
}

.filter--toggle:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Reports (AdminReports). The currency columns vary: report-grid--N sets their number. */
.report-grid--1 { --report-currencies: 1; }
.report-grid--2 { --report-currencies: 2; }
.report-grid--3 { --report-currencies: 3; }
.report-grid--4 { --report-currencies: 4; }
.report-grid--5 { --report-currencies: 5; }
.report-grid--6 { --report-currencies: 6; }

.week-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.week-picker__label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.report-band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 48px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--band);
  color: var(--band-text);
}

.report-band__label {
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}

.report-band__tests,
.report-band__sum {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.report-band__tests {
  font-size: 52px;
  line-height: 64px;
}

.report-band__sum {
  font-size: 36px;
  line-height: 44px;
}

.report-section__head {
  padding-bottom: 16px;
}

.report-table {
  --report-managers: minmax(170px, 1.4fr) 84px 88px repeat(var(--report-currencies), minmax(88px, 1fr)) 168px;
  --report-rooms: minmax(110px, 1fr) minmax(170px, 1.5fr) 84px repeat(var(--report-currencies), minmax(88px, 1fr));
  /* «Итоги по комнатам» (owner request 2026-10-19): the rooms table without the position column. */
  --report-room-sums: minmax(170px, 2.5fr) 84px repeat(var(--report-currencies), minmax(88px, 1fr));
  min-width: 900px;
}

.report-table--rooms {
  min-width: 720px;
}

.report-table--room-sums {
  min-width: 540px;
}

.report-head,
.report-row__main,
.report-total,
.room-row,
.room-total,
.room-sum-row,
.room-sum-total {
  display: grid;
  align-items: center;
}

.report-head--managers,
.report-row__main,
.report-total {
  grid-template-columns: var(--report-managers);
}

.report-head--rooms,
.room-row,
.room-total {
  grid-template-columns: var(--report-rooms);
}

.report-head--room-sums,
.room-sum-row,
.room-sum-total {
  grid-template-columns: var(--report-room-sums);
}

.report-head {
  min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--soft);
  color: var(--body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.report-table .num {
  padding-right: 16px;
  font-variant-numeric: tabular-nums;
}

.report-cell--first {
  padding-left: 16px;
}

.report-strong {
  font-weight: 500;
}

.report-row__main,
.report-total {
  min-height: 56px;
}

.report-row {
  border-top: 1px solid var(--line);
}

/* An open row is a grey card around its drill-down (AdminReports). */
.report-row.is-open {
  margin: 4px 0;
  padding-bottom: 16px;
  border-top: none;
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.report-row.is-open + .report-row {
  border-top: none;
}

.report-row__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 0 0 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.report-row__toggle[aria-expanded="true"] {
  font-weight: 500;
}

.report-row__toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.report-total,
.room-total,
.room-sum-total {
  border-top: 2px solid var(--ink);
  font-weight: 500;
}

.room-row,
.room-total,
.room-sum-row,
.room-sum-total {
  min-height: 52px;
}

.room-row {
  border-top: 1px solid var(--line);
}

.report-detail {
  margin: 0 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--canvas);
}

.report-detail__title {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.report-detail__table {
  min-width: 680px;
}

.report-detail__head,
.report-detail__row {
  display: grid;
  grid-template-columns: 72px minmax(150px, 1.2fr) 96px minmax(150px, 1.2fr) 64px 100px;
  align-items: center;
  column-gap: 12px;
}

.report-detail__head {
  min-height: 32px;
  color: var(--body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.report-detail__row {
  min-height: 44px;
  border-top: 1px solid var(--line);
}

/* A room's records (board RoomTotals): the manager after the date, no room column. */
.report-detail__table--room .report-detail__head,
.report-detail__table--room .report-detail__row {
  grid-template-columns: 72px 110px minmax(150px, 1.2fr) minmax(150px, 1.2fr) 64px 100px;
}

.report-detail__table .num {
  font-variant-numeric: tabular-nums;
}

.report-detail__date {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

/* Board AdminReportsEmpty. */
.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 32px;
  border-radius: var(--radius-xl);
  background: var(--soft);
  text-align: center;
}

.report-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--canvas);
}

.report-empty__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

.report-empty__text {
  max-width: 420px;
  margin: 0;
  color: var(--body);
}

.report-empty__missing {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

/* Combobox: the option list opens under the field (or under the whole row, as for the room). */
.combobox {
  position: relative;
}

.combobox__list {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
}

/* Duration sheet (DurationPicker). */
.duration__display {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 56px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.duration__steppers {
  display: flex;
  gap: 16px;
}

.stepper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stepper__label {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.stepper__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper__value {
  min-width: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.duration__presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.duration__hint {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.btn--num {
  font-variant-numeric: tabular-nums;
}

.icon-btn--lg {
  width: 48px;
  height: 48px;
}

/* App-styled select (owner decision 2026-10-16; js/app.js): the hidden select stays the form field, a button with
 * the field's look shows the choice and opens the listbox below. */
.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.select-button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.select-button.filter {
  width: auto;
  padding-right: 42px;
}

.select-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.select-button__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listbox.select-list {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
}

.select-list--up {
  top: auto;
  bottom: calc(100% + 4px);
}

.select-list .listbox__option.is-active {
  background: var(--soft);
}

.select-list .listbox__option[aria-selected="true"] {
  font-weight: 500;
}

/* Option list of a combobox (MainNameSuggest, MainRoomNew). */
.listbox {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
}

.listbox__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: none;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}

.listbox > :first-child {
  border-top: none;
}

/* With a mouse the drawn 56 px phone rows are needlessly tall; 44 px keeps the touch-target minimum. */
@media (pointer: fine) and (min-width: 600px) {
  .listbox__option:not(.listbox__option--rich) {
    min-height: 44px;
  }
}

.listbox__option[aria-selected="true"] {
  background: var(--soft);
}

.listbox__option--rich {
  min-height: 64px;
  padding: 8px 16px;
}

.listbox__option--name {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 16px;
}

.listbox__name {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.listbox__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}

.listbox__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.listbox__title {
  font-weight: 500;
}

.listbox__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.listbox__note {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--softer);
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.listbox mark {
  margin: 0 -2px;
  padding: 0 2px;
  border-radius: 4px;
  background: var(--pressed);
  color: var(--ink);
}

/* Icon buttons at the end of a row. The rooms board squeezes two 40 px buttons into 72 px (they shrink to
 * 34 px there); a narrower cell padding keeps them 40 px wide instead. */
.table--dict-rooms .table__cell--actions {
  padding: 0 6px;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.row-actions--tight {
  gap: 0;
}

/* T4.4: on a phone the drawn 0 gap would let the 44 px hit areas overlap; 4 px keeps each one whole. */
@media (max-width: 599px) {
  .row-actions--tight {
    gap: 4px;
  }
}

/* Overlays: native <dialog> opened with showModal() (js/app.js). */
dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: none;
  background: var(--canvas);
  color: var(--ink);
}

dialog::backdrop {
  background: var(--scrim);
}

html:has(dialog[open]) {
  overflow: hidden;
}

.overlay__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.overlay__text {
  margin: 0;
  color: var(--body);
}

/* Confirmation dialog: phone (WeekSubmit) and desktop (AdminReportsUnlock). */
.dialog {
  width: calc(100% - 32px);
  margin: auto;
  border-radius: var(--radius-xl);
}

.dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

/* A dialog with a form (AdminRoomMerge): 520 px on a desktop, more room between parts. */
.dialog__inner--roomy {
  gap: 20px;
}

.overlay__lead {
  margin: 4px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.merge-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--soft);
}

.merge-source__name {
  font-weight: 500;
}

.merge-source__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dialog__actions .btn {
  width: 100%;
}

@media (min-width: 600px) {
  .dialog {
    width: 480px;
  }

  .dialog--wide {
    width: 520px;
  }

  .dialog__inner {
    padding: 32px;
  }

  .dialog__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .dialog__actions .btn {
    width: auto;
  }
}

/* A secret shown once, such as a temporary password (AdminStaffPassword). */
.secret {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--soft);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  user-select: all;
}

/* Bottom sheet (RecordActions, ProfileMenu). */
.sheet {
  width: 100%;
  margin: auto 0 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.sheet__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px 24px;
}

.sheet__handle {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--pressed);
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sheet__head > div {
  flex: 1;
  min-width: 0;
}

.sheet__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.sheet__meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}

.sheet__hint {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.sheet__amount {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--soft);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.action-row--danger {
  color: var(--danger);
}

/* Side panel for create and edit forms (AdminStaffNew); a full-screen sheet on a phone. */
.panel {
  width: 440px;
  max-width: 100%;
  height: 100%;
  margin: 0 0 0 auto;
  border-left: 1px solid var(--line);
  overflow: auto;
}

.panel__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  padding: 32px;
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The record's fields in the panel; disabled as a whole for a submitted week (RecordFile, read-only panel). */
.panel__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.panel__fields:disabled :is(.input, .picker, .select-button, .segmented__option:not(:has(input:checked))) {
  color: var(--body);
  cursor: default;
  opacity: 1;
}

/* Hints explain how to fill a field; a locked record is not filled, so they go (as drawn). */
.panel__fields:disabled .field__hint {
  display: none;
}

/* The result-file block (board RecordFile): the record's result file below the comment, in both roles' panels. */
.file-block,
.file-block__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-block__file,
.file-block__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--soft);
}

.file-block__file > svg,
.file-block__progress > svg {
  flex: none;
}

.file-block__text {
  flex: 1 1 auto;
  min-width: 0;
}

.file-block__name {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file-block__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.file-block__bar {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.file-block__bar-fill {
  width: 0;
  height: 100%;
  background: var(--ink);
}

.file-block__actions {
  display: flex;
  gap: 8px;
}

.file-block__actions .btn {
  flex: 1 1 0;
  padding: 0 12px;
}

/* While a file uploads, the progress row stands in for the block's body. */
.file-block.is-uploading .file-block__body,
.file-block__progress[hidden],
.file-block__error[hidden] {
  display: none;
}

.panel__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

@media (max-width: 599px) {
  .panel {
    width: 100%;
    border-left: none;
  }

  .panel__inner {
    padding: 24px 16px;
  }
}

/* Admin shell: sidebar and main (AdminStaff, AdminReports). */
.app {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 100vh;
}

/* The page gutter of the one shell, defined only here (owner review 2026-10-16). The title, cards and forms start
 * at it. The records table draws its hairlines across the content box on a desktop and runs to the screen edge on a
 * phone, as drawn in PhoneMyWeek (--bleed); its text keeps the 16 px row inset either way. */
.app__main {
  --gutter: 32px;
  --bleed: 0px;
}

@media (max-width: 599px) {
  .app__main {
    --gutter: 16px;
    --bleed: var(--gutter);
  }
}

/* The sidebar on a desktop. It stays put while the page scrolls, so the account block is always in view. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: none;
  width: 240px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 16px;
  border-right: 1px solid var(--line);
}

.sidebar__brand {
  padding: 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}

.sidebar__link[aria-current="page"] {
  background: var(--primary);
  color: var(--on-primary);
}

/* The account block at the bottom of the sidebar (AdminAccount): the user, then sign-out. */
.sidebar__account {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* The user: a button that opens the profile sheet (theme, password, sign-out). */
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.sidebar__action {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.sidebar__action--danger {
  color: var(--danger);
}

.sidebar__name {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.sidebar__role {
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
}

.app__main {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px var(--gutter);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.page-title {
  font-size: 36px;
  line-height: 44px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section__title {
  font-size: 24px;
  line-height: 32px;
}

.section__lead {
  margin: 4px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* On a desktop (owner decision 2026-10-16). */
@media (min-width: 600px) {
  /* The report status: status on the left, the button on the right. */
  .report-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .report-card .btn--block {
    width: auto;
    padding: 0 24px;
  }

  /* Bottom sheets (profile, record actions) become centred dialogs. */
  .sheet {
    width: 440px;
    margin: auto;
    border-radius: var(--radius-xl);
  }

  .sheet__handle {
    display: none;
  }
}

/* A page of its own without a shell (ChangePassword): brand, title, fields, buttons at the bottom. */
.solo {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}

.solo__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px 0;
}

.solo__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.solo__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solo__title {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
}

.solo__lead {
  margin: 0;
  color: var(--body);
}

.solo__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.solo__footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 24px 24px;
}

/* A secret field with its show button beside it (ChangePassword). */
.field-row--secret {
  align-items: center;
  gap: 8px;
}

.field-row--secret > .input {
  flex: 1 1 0;
  min-width: 0;
}

.icon-btn--xl {
  width: 56px;
  height: 56px;
}

/* Login page (board Login): a phone column, centred on wider windows (not drawn). */
.login {
  display: flex;
  flex-direction: column;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}

.login__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 0 24px;
}

.login__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
}

.login__title {
  font-size: 24px;
  line-height: 32px;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.login__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login__footer {
  flex: none;
  padding: 0 24px 24px;
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------
 * T4.13 · The admin area on a phone (boards AdminPhoneMenu, AdminPhoneReports). Below 600 px the sidebar gives way
 * to a bar (menu, page title, avatar) and a drawer; the reports show cards; other tables scroll sideways.
 * ------------------------------------------------------------------------------------------- */
.app-bar {
  display: none;
}

.app-bar__menu {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.app-bar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

.drawer {
  inset: 0 auto 0 0;
  width: 300px;
  height: 100%;
  margin: 0;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  padding: 24px 16px;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 16px;
}

.drawer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer__link {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
}

.drawer__link[aria-current="page"] {
  background: var(--primary);
  color: var(--on-primary);
}

.drawer__account {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.drawer__user {
  padding: 0 8px;
  font-weight: 500;
}

.drawer__role {
  color: var(--body);
  font-weight: 400;
}

.drawer__action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.drawer__action--danger {
  color: var(--danger);
}

/* AdminPhoneReports: manager cards. «Клиенты» opens the records inside the card. */
.staff-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.staff-cards__title {
  margin: 4px 0;
  font-size: 24px;
  line-height: 32px;
}

.staff-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--soft);
}

.staff-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.staff-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.staff-card__meta {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.staff-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-card__chip {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.staff-card__actions {
  display: flex;
  gap: 8px;
}

.staff-card__button {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
}

.staff-card__record {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.staff-card__text {
  flex: 1;
  min-width: 0;
}

.staff-card__client {
  font-weight: 500;
}

.staff-card__line {
  color: var(--body);
  font-size: 14px;
  line-height: 20px;
}

.staff-card__amount {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-band__time .report-band__sum {
  font-size: 32px;
  line-height: 40px;
}

@media (max-width: 599px) {
  .app {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .app-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    padding: 0 8px 0 4px;
  }

  .app__main {
    gap: 16px;
    padding: 0 var(--gutter) 24px;
  }

  /* The bar holds the page title on a phone. */
  .app__main .page-title {
    display: none;
  }

  .app__main .week-picker {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  /* A header's week picker and button (ExpensesBalance, «Мои записи»): the picker, then the buttons below it. */
  .page-header__tools {
    flex: 1 1 100%;
  }

  .page-header__tools > .btn {
    flex: 1 1 100%;
  }

  /* The records table as the phone rows of PhoneMyWeek (owner decision 2026-10-16): under a heading for each day,
   * the name; the manager, room and position, time; the amount and currency; the menu or the lock. The rows run
   * to the screen edge; the column heads stay for screen readers only. */
  .table-scroll:has(> .table--records) {
    margin-inline: calc(-1 * var(--bleed));
    overflow: visible;
  }

  .table--records {
    min-width: 0;
  }

  .table--records .table__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table--records .table__group {
    display: flex;
    align-items: flex-end;
    height: 40px;
    padding: 0 var(--row-inset) 6px;
    color: var(--body);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
  }

  .table--records .table__group .table__cell {
    display: flex;
    justify-content: space-between;
    flex: 1;
    padding: 0;
  }

  .table__group-count {
    font-variant-numeric: tabular-nums;
  }

  .table--records .table__row {
    box-sizing: border-box;
    /* The second line takes only its text (the place shrinks first); the free space goes after it. */
    grid-template-columns: auto minmax(0, max-content) auto minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "client client client client amount actions"
      "staff place time status amount actions"
      "comment comment comment comment comment actions";
    align-items: center;
    min-height: 64px;
    padding: 8px 4px 8px var(--row-inset);
  }

  .table--own .table__row {
    grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr) auto 44px;
    grid-template-areas:
      "client client client amount actions"
      "place time . amount actions"
      "comment comment comment comment actions";
  }

  .table--records .table__cell {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table--records .table__cell--date {
    display: none;
  }

  .table--records .table__cell--client {
    grid-area: client;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }

  .table--records .table__cell--client .table__name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table--records .table__cell--staff,
  .table--records .table__cell--place,
  .table--records .table__cell--time {
    margin-top: 2px;
    color: var(--body);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .table--records .table__cell--staff {
    grid-area: staff;
  }

  .table--records .table__cell--staff::after,
  .table--records .table__cell--time::before {
    content: "\00a0\00b7\00a0";
  }

  .table--records .table__cell--place {
    grid-area: place;
  }

  .table--records .table__cell--time {
    grid-area: time;
    overflow: visible;
  }

  /* The comment as the row's third line (board RecordComment); a row without one keeps two. */
  .table--records .table__cell--comment {
    grid-area: comment;
    margin-top: 2px;
    font-size: 14px;
    line-height: 20px;
  }

  .table--records .table__cell--comment:not(:has(.record-comment)) {
    display: none;
  }

  .table--records .table__cell--status {
    grid-area: status;
    padding-left: 8px;
    margin-top: 2px;
  }

  .table--records .table__cell--amount {
    grid-area: amount;
    padding-left: 8px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  /* The currency beside the amount, small and grey (PhoneMyWeek). */
  .table--records .table__currency {
    padding-left: 2px;
    color: var(--body);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }

  .table--records .table__cell--actions {
    grid-area: actions;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .report-band {
    gap: 12px 32px;
    padding: 20px;
    border-radius: var(--radius-xl);
  }

  .report-band__tests {
    font-size: 44px;
    line-height: 52px;
  }

  .report-band__sum {
    font-size: 24px;
    line-height: 32px;
  }
}

/* Layout switches, last so that they win over a component's own display. */
@media (min-width: 600px) {
  .phone-only {
    display: none;
  }
}

@media (max-width: 599px) {
  .desktop-only {
    display: none;
  }
}

/* The dev gallery's result-file states side by side, each as wide as a side panel. */
.gallery-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 390px));
  gap: 32px;
  align-items: start;
}