@tailwind base;
@tailwind components;
@tailwind utilities;

/* GemFlow — Simple, warm, readable, sharp */

@layer base {
  html {
    font-size: 17px;
    overflow-x: hidden;
  }

  body {
    @apply bg-white text-gray-800 antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  button,
  .btn,
  input[type="submit"],
  a.btn {
    @apply min-h-[44px];
  }
}

@layer components {

  /* Buttons — Sharp corners, primary is emerald */
  .btn {
    @apply inline-flex items-center justify-center px-5 py-2.5 text-base font-semibold rounded-none transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400;
  }

  .btn-success {
    @apply bg-emerald-600 text-[#1d1d1d] hover:bg-emerald-700 focus:ring-emerald-500;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-400;
  }

  /* Item selection buttons — Sharp */
  .btn-kiosk {
    @apply flex flex-col items-center justify-center p-4 w-full bg-white border-2 border-gray-200 rounded-none hover:border-emerald-500 hover:bg-emerald-50 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer;
  }

  .btn-kiosk.selected {
    @apply border-emerald-500 bg-emerald-50;
  }

  /* Cards — Sharp corners */
  .card {
    @apply bg-white rounded-none border border-gray-200;
  }

  .card-header {
    @apply px-3 py-3 sm:px-6 sm:py-4 border-b border-gray-100 bg-gray-50/50;
  }

  .card-body {
    @apply p-3 sm:p-6;
  }

  /* Form inputs — Sharp corners */
  .form-input {
    @apply w-full px-4 py-3 text-base border-2 border-gray-200 rounded-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 placeholder-gray-400 transition-all duration-150;
  }

  .form-input.is-invalid,
  .form-select.is-invalid,
  .is-invalid {
    @apply border-red-500 focus:border-red-500 focus:ring-red-500;
  }

  /* Row 99: element-qualified so the error colour also beats a control's own
     focus:border-* utility while the field is focused. */
  input.is-invalid,
  select.is-invalid,
  textarea.is-invalid,
  input.is-invalid:focus,
  select.is-invalid:focus,
  textarea.is-invalid:focus,
  canvas.is-invalid,
  div.price-combobox-field.is-invalid {
    border-color: var(--color-red-500, #ef4444);
  }

  /* One red outline only: the red border replaces the focus ring. */
  input.is-invalid:focus,
  select.is-invalid:focus,
  textarea.is-invalid:focus {
    box-shadow: none;
  }

  .field-error {
    @apply mt-1 text-xs text-red-600;
  }

  .form-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
  }

  .form-select {
    @apply w-full pl-4 pr-10 py-3 text-base border-2 border-gray-200 rounded-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white cursor-pointer transition-all duration-150;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
  }

  /* Follow-up plan rows: select-only chevron + ellipsis (do not apply to date inputs). */
  select.crm-follow-up-select {
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.1em 1.1em;
  }

  /* Navigation */
  .nav-link {
    @apply flex items-center gap-2 px-4 py-2.5 text-base text-gray-600 rounded-none hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150;
  }

  .nav-link.active {
    @apply bg-emerald-50 text-emerald-700 font-medium;
  }

  /* Stats */
  .stat-card {
    @apply bg-white rounded-none p-6 border border-gray-200;
  }

  .stat-value {
    @apply text-3xl font-bold text-gray-900 tabular-nums;
  }

  .stat-label {
    @apply text-sm font-medium text-gray-500;
  }

  /* Badges — Sharp */
  .badge {
    @apply inline-flex items-center px-2.5 py-1 text-sm font-medium rounded-none;
  }

  .badge-success {
    @apply bg-emerald-100 text-emerald-700;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-700;
  }

  .badge-danger {
    @apply bg-red-100 text-red-700;
  }

  .badge-info {
    @apply bg-blue-100 text-blue-700;
  }

  /* Table */
  .table {
    @apply w-full text-left;
  }

  /* A header never wraps (Q-95x); a table wider than its card scrolls sideways in .list-scroll. */
  .table th {
    @apply px-5 py-4 text-sm font-semibold text-gray-600 bg-gray-50 border-b border-gray-200 whitespace-nowrap;
  }

  /* Even rows (Q-95x, rule 6): a cell keeps to one line, in full; the table scrolls sideways. */
  .table td {
    @apply px-5 py-4 border-b border-gray-100 whitespace-nowrap;
  }

  .table tbody tr:hover {
    @apply bg-gray-50;
  }

  /* Alerts — Sharp */
  .alert {
    @apply p-4 rounded-none text-base font-medium;
  }

  .alert-success {
    @apply bg-emerald-50 text-emerald-800 border border-emerald-200;
  }

  .alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
  }

  .alert-warning {
    @apply bg-amber-50 text-amber-800 border border-amber-200;
  }

  .alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
  }

  /* Links — row 84: one brand style, no browser blue */
  .link {
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(189 159 85 / 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .link:hover {
    text-decoration-color: #bd9f55;
  }
  .link:visited {
    color: inherit;
  }

  /* Action links: Уреди, Избриши, Отстрани, Контакт, Откажи */
  .link-action {
    display: inline;
    color: #bd9f55;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-height: 0;
  }
  button.link-action,
  input.link-action {
    min-height: 0;
  }
  .link-action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #bd9f55;
  }
  .link-action:visited {
    color: #bd9f55;
  }
  .link-action--danger,
  .link-action.link-action--danger {
    color: #dc2626;
  }
  .link-action--danger:hover {
    color: #b91c1c;
    text-decoration-color: #b91c1c;
  }
  .link-action--danger:visited {
    color: #dc2626;
  }

  /* Worklist / outcome actions (row 88): one family, no blue/orange */
  .btn-outcome {
    @apply inline-flex items-center justify-center px-2.5 py-1 text-xs font-semibold rounded-none transition-colors duration-150 cursor-pointer;
    min-height: 0;
    line-height: 1.25rem;
  }
  .btn-outcome--primary {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 border border-emerald-600;
  }
  .btn-outcome--secondary {
    @apply bg-white text-gray-800 border border-gray-300 hover:border-emerald-600;
  }
}

@layer utilities {
  .text-price {
    @apply font-mono text-xl font-bold text-gray-900 tabular-nums;
  }

}

/* Staff page width doctrine (row 77): one left edge, two widths.
   Pages wrap yield in .page-container--full (1280) or --form (768).
   No mx-auto — the left edge matches main's padding on every page. */
.page-container {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.page-container--full {
  max-width: 1280px;
}
.page-container--form {
  max-width: 768px;
}
/* Books and posted documents: their tables use the whole content width. */
.page-container--wide {
  max-width: none;
}

/* An Article's code beside its name (crm_article_name): tells same-named Articles apart. */
.article-code {
  font-size: 0.75em;
  font-weight: 400;
  color: #6b7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Book tables (books, posted documents, their lists): compact cells. Headers stay on one line
   (Q-95x), so a wide book scrolls sideways inside its card; long text in a cell wraps; numbers
   (.num) stay on one line, right-aligned. */
.table.book-table th {
  padding: 0.5rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.15;
  letter-spacing: 0;
  vertical-align: bottom;
}
.table.book-table td {
  padding: 0.4rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.3;
  vertical-align: top;
}
/* An admin list with many columns (Корисници): cells as tight as the book tables', in normal type. */
.table.compact-table th,
.table.compact-table td {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
/* The audit log on a phone: tighter cells, so time, person and action fit without a swipe (Q-7Y). */
@media (max-width: 639px) {
  .table.audit-table th,
  .table.audit-table td {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}
/* A button beside the filter fields (‹ Претходен ден, Следен ден ›): the fields' height and the full
   width of its grid cell, so fields and buttons form one even row. */
.btn.day-step {
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 2px solid transparent;
  white-space: nowrap;
}
/* Every other table on a phone: tighter cells, so a list keeps its columns on screen and a long
   name wraps less (the stock list lost a third of its width to padding). */
@media (max-width: 639px) {
  .table:not(.book-table) th,
  .table:not(.book-table) td {
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .table:not(.book-table) th:first-child,
  .table:not(.book-table) td:first-child {
    padding-left: 0.875rem;
  }
  .table:not(.book-table) th:last-child,
  .table:not(.book-table) td:last-child {
    padding-right: 0.875rem;
  }
}
.table.book-table th:first-child,
.table.book-table td:first-child {
  padding-left: 0.75rem;
}
.table.book-table th:last-child,
.table.book-table td:last-child {
  padding-right: 0.75rem;
}
.table.book-table th {
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: manual;
}
/* On paper a table can't scroll sideways: a printed screen (a posted document's „Печати“) wraps its
   cells and headers again to fit the page. */
@media print {
  .table th,
  .table td {
    white-space: normal;
  }
}
/* A link in a book table's cell takes the cell's small type and line height, so a linked row is as
   tall as the rest. */
.book-table td .link-action {
  font-size: inherit;
  line-height: inherit;
}
/* A status tag or badge in a table row is no taller than the text beside it. */
.table td .badge,
.table td .doc-status {
  padding-top: 0;
  padding-bottom: 0;
  line-height: inherit;
  font-size: inherit;
}
/* A row's actions („Погледни“, „Измени“, „Избриши“, „Ресетирај лозинка“): side by side in one
   column, never stacked; on a touch screen each is at least 44px high and wide (Q-95x). */
.row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
.row-actions form {
  display: inline;
}
@media (pointer: coarse) {
  .row-actions {
    gap: 0.25rem;
  }
  .row-actions > a,
  .row-actions > form > button,
  .row-actions > form > input[type=submit],
  .row-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.5rem;
  }
}
.table.book-table .num {
  text-align: right;
}
.table.book-table td.num {
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

/* A download or print button (crm_action_content): its full label from 640px, as before; on a
   phone in a page's action group an icon and a short label („PDF“, „Excel“, „Печати“). */
.action-icon,
.action-short {
  display: none;
}
@media (max-width: 639px) {
  .page-actions .action-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }
  .page-actions .action-short {
    display: inline;
  }
  .page-actions .action-full {
    display: none;
  }
  .page-actions > :has(> .action-icon) {
    gap: 0.375rem;
  }
}
/* Page controls on a phone (Q-100x); from 640px they look as before.
   - .page-actions: a page heading's buttons (new, Excel, PDF, Печати…) span the width, each an
     equal share of a row of at most 3 (in small type with tight padding, so three short labels
     such as „Преземи PDF · Печати · Преземи Excel“ share a row equally), labels on one line; a label too long for its share moves the button on to the next row
     instead of wrapping.
   - .chip-grid: a row of filter chips (or tabs, steps) as an even grid: 1–3 chips in one row, 4 as
     2 × 2, 5–6 in rows of 3 (Q-103x); each chip an equal cell with its label centred (a chip whose label and badge need more than
     an equal share keeps its one-line width; the others share the rest). */
@media (max-width: 639px) {
  :has(> .page-actions) {
    flex-wrap: wrap;
  }
  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }
  /* Each starts just over a quarter of the row (so a fourth never fits beside three) and no
     narrower than its one-line label, then the row's space is shared out. */
  .page-actions > *,
  .page-actions > form > button {
    flex: 1 1 calc((100% - 1.5rem) / 4 + 1px);
    min-width: max-content;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
  }
  .page-actions > form {
    display: flex;
  }
  .chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    gap: 0.5rem;
  }
  .chip-grid:has(> :only-child) {
    grid-template-columns: minmax(max-content, 1fr);
  }
  .chip-grid:has(> :nth-child(2):last-child),
  .chip-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
  }
  .chip-grid > * {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
  }
}

/* List pages scroll like any page; a list card scrolls sideways when its table is wider than the
   screen. (A former full-screen layout, where only the card scrolled, left 0–4 rows visible on
   common laptops once the heading, filters and notices took their space.) */
.list-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* A posted document's status in a list (Сторно на бр. 6, Сторнирано): a small linked badge. */
.doc-status {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
}
/* A document list (.doc-list) is a table from 640px and one compact card per row on a phone:
   title and date, the status top right; the detail (reasons) under them; the figures (cells with a
   data-label) in a row, each under its small label; the Sales point small and muted. */
@media (max-width: 639px) {
  .table.doc-list thead {
    display: none;
  }
  .table.doc-list,
  .table.doc-list tbody {
    display: block;
  }
  .table.doc-list tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid theme("colors.gray.100");
  }
  .table.doc-list tbody td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .table.doc-list .doc-list-title { grid-area: 1 / 1; }
  .table.doc-list .doc-list-date { grid-area: 1 / 2; font-size: 0.875rem; }
  .table.doc-list .doc-list-status { grid-area: 1 / 3; justify-self: end; }
  .table.doc-list .doc-list-detail { grid-area: 2 / 1 / 3 / -1; font-size: 0.875rem; }
  .table.doc-list td[data-label] { grid-row: 3; font-size: 0.875rem; }
  .table.doc-list td[data-label]:last-child { text-align: right; }
  .table.doc-list td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: theme("colors.gray.500");
  }
  .table.doc-list .doc-list-point {
    grid-area: 4 / 1 / 5 / -1;
    font-size: 0.75rem;
    color: theme("colors.gray.500");
  }
}
/* Catalogue photo column. The body row is 60px. The square is that
   height and the column is no wider than the square. */
.catalogue-table.table tbody tr {
  height: 60px;
}
.catalogue-table.table tbody td {
  height: 60px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}
.catalogue-table.table .catalogue-photo-col,
.catalogue-table.table .catalogue-photo-cell {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  padding: 0;
}
.catalogue-table.table tbody td.catalogue-photo-cell {
  box-sizing: border-box;
  height: 60px;
  padding: 8px;
}
.catalogue-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f3f4f6;
}

/* Visit rail. The date sits outside the card, and the circle is centered on that line. */
.visit-rail {
  --visit-date-center: 0.625rem;
  position: relative;
  width: 0.75rem;
  flex-shrink: 0;
}
.visit-rail-line {
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #d1d5db;
}
.visit-rail-line-full {
  top: 0;
  bottom: 0;
}
.visit-rail-line-above {
  top: 0;
  height: var(--visit-date-center);
}
.visit-rail-line-below {
  top: var(--visit-date-center);
  bottom: 0;
}
.visit-rail-dot {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--visit-date-center);
  width: 0.625rem;
  height: 0.625rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: #bd9f55;
}
.admin-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #6b7280;
}
.admin-pagination .count {
  margin-right: auto;
}
.admin-pagination a,
.admin-pagination span.page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #fff;
  font-weight: 500;
}
.admin-pagination a:hover {
  border-color: #d1d5db;
  color: #111827;
  text-decoration: none;
}
.admin-pagination .is-current,
.admin-pagination span.page.is-current {
  background: #bd9f55;
  border-color: #bd9f55;
  color: #fff;
}
.admin-pagination .is-disabled {
  opacity: 0.45;
}
.admin-pagination .muted {
  color: #9ca3af;
}
/* Rows per page (Q-85): label and a small select beside the count (or under a worklist section). */
.per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.per-page select {
  height: 30px;
  padding: 0 28px 0 8px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #374151;
  font-size: 0.875rem;
}
/* Phones and small tablets: room below the pager so it isn't pressed against the screen's bottom
   edge (or the phone's home bar), and 44px touch targets. */
@media (max-width: 1023px) {
  .admin-pagination {
    gap: 8px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .admin-pagination a,
  .admin-pagination span.page {
    min-width: 44px;
    height: 44px;
  }
  .admin-pagination {
    flex-wrap: wrap;
  }
  .per-page select {
    height: 44px;
    min-width: 64px;
  }
  /* Rows per page on its own line under the count and the arrows (Martin: it broke the row). */
  .admin-pagination .per-page {
    order: 99;
    flex-basis: 100%;
    margin-right: 0;
    margin-top: 4px;
  }
}

/* Visit price pickers. The open list is an overlay: it does not grow the form.
   The catalogue scrolls inside a fixed window; only the visible rows are mounted. */
.price-combobox {
  --title-size: 1rem;
  --price-size: 0.75rem;
  --stack-leading: 1.1;
  --copy-inset: 0.5rem;
  --photo-gap: 0.35rem;
  --option-gap: 0.35rem;
  --square: calc(
    (var(--title-size) * var(--stack-leading)) +
    (var(--price-size) * var(--stack-leading))
  );
  position: relative;
  width: 100%;
  min-width: 0;
}
.price-combobox-field {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: calc(1.5rem + 1rem + 2px);
  padding-left: var(--copy-inset);
  gap: var(--photo-gap);
  overflow: hidden;
  background: #fff;
  border: 1px solid #d1d5db;
}
.price-combobox-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0.5rem;
}
.price-combobox-field:focus-within {
  border-color: #bd9f55;
  box-shadow: none;
}
.price-combobox-field input,
.price-combobox-field input:focus,
.price-combobox-field input:focus-visible,
.price-combobox-field input:active,
.price-combobox-price {
  border: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
}
.price-combobox-photo-slot {
  position: relative;
  flex: none;
  align-self: center;
  width: var(--square);
  height: var(--square);
  overflow: hidden;
  background: #f3f4f6;
}
.price-combobox-photo-slot:has(.price-combobox-photo[hidden]) {
  display: none;
}
.price-combobox-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.price-combobox-photo[hidden] {
  display: none;
}
.price-combobox-field input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  background: transparent;
  padding: 0.45rem 0;
  font-size: var(--title-size);
  line-height: var(--stack-leading);
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-combobox-field:has(.price-combobox-price:not(:empty)) input {
  flex: none;
  height: calc(var(--title-size) * var(--stack-leading));
  padding: 0;
}
.price-combobox-price {
  display: block;
  height: calc(var(--price-size) * var(--stack-leading));
  padding: 0;
  font-size: var(--price-size);
  line-height: var(--stack-leading);
  font-variant-numeric: tabular-nums;
  color: #374151;
  white-space: nowrap;
}
.price-combobox-price:empty {
  display: none;
}
.price-combobox.is-open {
  z-index: 40;
}
.price-combobox-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 240px;
  max-height: 240px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.price-combobox-panel.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.price-combobox-panel[hidden] {
  display: none;
}
/* Q-86: how many rows the list holds („Сите 120 · пишете за да пребарате“, „Најдени 3 од 120“).
   Q-91: what to do when nothing matches (on the till: services go through „Нова посета“). */
.price-combobox-status {
  flex: none;
  border-top: 1px solid #f3f4f6;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #6b7280;
  background: #fff;
}
.price-combobox-empty {
  flex: none;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #374151;
  background: #fff;
}
.price-combobox-status[hidden],
.price-combobox-empty[hidden] {
  display: none;
}
.price-combobox-panel.is-empty .price-combobox-scroll {
  display: none;
}
.price-combobox-pinned {
  flex: none;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
}
.price-combobox-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Touch scrolling stays in the list: no chaining into the page, which moves the anchored panel. */
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: var(--option-gap);
  padding-bottom: var(--option-gap);
}
.price-combobox-list {
  position: relative;
  width: 100%;
}
.price-combobox-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--photo-gap);
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--square) + var(--option-gap));
  min-width: 0;
  overflow: hidden;
  padding: 0 0.5rem var(--option-gap) var(--copy-inset);
  line-height: var(--stack-leading);
  text-align: left;
  background: transparent;
  border: 0;
  color: #111827;
}
.price-combobox-option-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.price-combobox-option .price-combobox-photo-slot {
  margin-left: 0;
}
.price-combobox-option-label {
  height: calc(var(--title-size) * var(--stack-leading));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--title-size);
  line-height: var(--stack-leading);
}
.price-combobox-option-price {
  display: block;
  height: calc(var(--price-size) * var(--stack-leading));
  margin: 0;
  font-size: var(--price-size);
  line-height: var(--stack-leading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #374151;
}

/* The X lives in the card's top padding. Fields start below that band. */
.piercing-row {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 0.5rem 1rem 1rem;
}
.piercing-row-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.piercing-row-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.piercing-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
  color: #9ca3af;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.piercing-row-remove:hover {
  color: #dc2626;
}
.piercing-row-remove svg {
  width: 1rem;
  height: 1rem;
}
.piercing-row-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}
.piercing-row-fields > * {
  min-width: 0;
}
@media (min-width: 640px) {
  .piercing-row-fields {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .piercing-row-fields {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.piercing-row select[data-piercing-location]:disabled {
  background-color: #f3f4f6;
  color: #111827;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Customer profile — compact navy/gold layout under .crm-customer-profile
   -------------------------------------------------------------------------- */
.crm-customer-profile {
  container-type: inline-size;
  container-name: cpe;
  --cpe-pad: 0.875rem;
  --cpe-ink: #111827;
  --cpe-ink-secondary: #4b5563;
  --cpe-ink-muted: #6b7280;
  --cpe-gold: #8c7338;
  --cpe-gold-icon: #a88b45;
  --cpe-gold-soft: #f6f0e0;
  font-size: 0.875rem;
  color: var(--cpe-ink);
}
.crm-customer-profile .cpe-banner {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--cpe-ink-secondary);
  background: #fafaf9;
  border: 1px solid #e7e5e4;
}
.crm-customer-profile .cpe-banner-link {
  margin-left: 0.35rem;
  font-weight: 600;
  color: var(--cpe-gold);
  text-decoration: underline;
}
.crm-customer-profile .cpe-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-meta-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cpe-ink-secondary);
}
.crm-customer-profile .cpe-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cpe-ink);
  white-space: nowrap;
}
.crm-customer-profile .cpe-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* Consent card (row 101): link state + PDF header, gold rule, label/status pairs. */
.crm-customer-profile .cpe-consent-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.375rem;
}
.crm-customer-profile .cpe-consent-block-head .cpe-section-title {
  margin-bottom: 0;
}
.crm-customer-profile .cpe-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}
.crm-customer-profile .cpe-consent {
  padding: var(--cpe-pad);
}
.crm-customer-profile .cpe-consent-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem 1rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--cpe-gold-icon);
}
/* No link state and no document: no header, no floating rule. */
.crm-customer-profile .cpe-consent-head:not(:has(.cpe-consent-doc)):has(> .cpe-consent-link:empty) {
  display: none;
}
.crm-customer-profile .cpe-consent-link {
  min-width: 0;
}
.crm-customer-profile .cpe-consent-link:empty {
  display: none;
}
.crm-customer-profile .cpe-consent-meta {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-consent-doc {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
  max-width: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cpe-ink);
  text-decoration: underline;
  text-decoration-color: rgb(189 159 85 / 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.crm-customer-profile .cpe-consent-doc:hover {
  text-decoration-color: #bd9f55;
}
.crm-customer-profile .cpe-consent-doc:focus-visible {
  outline: 2px solid var(--cpe-gold-icon);
  outline-offset: 2px;
}
.crm-customer-profile .cpe-consent-doc-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.15rem;
  color: var(--cpe-gold-icon);
}
.crm-customer-profile .cpe-consent-values {
  display: grid;
  /* The status track keeps its full wording; long labels wrap instead. */
  grid-template-columns: fit-content(12rem) minmax(max-content, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.5rem;
  margin: 0;
}
.crm-customer-profile .cpe-consent-row {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  align-items: start;
  min-width: 0;
}
.crm-customer-profile .cpe-consent-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.1875rem;
  color: var(--cpe-ink);
  overflow-wrap: anywhere;
}
.crm-customer-profile .cpe-consent-status {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.1875rem; /* matches the 14px label's first line box */
  color: var(--cpe-ink-secondary);
  white-space: nowrap;
}
/* Leading status icon: fixed 16px slot so every status word aligns. Colour stays
   restrained — gold for granted, muted for expired/withdrawn, lightest grey for none. */
.crm-customer-profile .cpe-consent-icon-slot {
  display: inline-flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.09375rem; /* centred in the 19px line box */
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-consent-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}
.crm-customer-profile .cpe-consent-status--granted .cpe-consent-icon-slot {
  color: var(--cpe-gold-icon);
}
.crm-customer-profile .cpe-consent-status--not-recorded {
  color: var(--cpe-ink-muted);
}
/* Q-82: an explicit refusal reads as a decision, not as „not recorded“. */
.crm-customer-profile .cpe-consent-status--declined .cpe-consent-icon-slot {
  color: #b91c1c;
}
/* The day (and who recorded a withdrawal) after the status on the same line, muted, after a dot:
   „Дадена · 06.10.2026“, like the other data points on the profile. */
.crm-customer-profile .cpe-consent-detail {
  color: var(--cpe-ink-muted);
  font-weight: 400;
}
.crm-customer-profile .cpe-consent-status--has-detail > .cpe-consent-status-text {
  white-space: nowrap;
}
.crm-customer-profile .cpe-consent-status--not-recorded .cpe-consent-icon-slot {
  color: #9ca3af;
}
.crm-customer-profile .cpe-consent-empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cpe-ink-secondary);
}
.crm-customer-profile .cpe-consent-link-ready {
  margin-top: 0.625rem;
}
.crm-customer-profile .cpe-record-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cpe-ink);
}
.crm-customer-profile .cpe-status {
  font-weight: 500;
}
.crm-customer-profile .cpe-status--overdue {
  color: #b91c1c;
}
.crm-customer-profile .cpe-status-sep {
  color: #9ca3af;
  font-weight: 400;
}
.crm-customer-profile .cpe-fu-group {
  border-radius: 0;
}
.crm-customer-profile .cpe-visit-card.cpe-anchor-flash,
.crm-customer-profile .cpe-fu-row.cpe-anchor-flash {
  animation: cpe-anchor-flash 2.2s ease-out;
}
.crm-customer-profile .cpe-visit-card,
.crm-customer-profile .cpe-fu-row {
  scroll-margin-block: max(1.5rem, 28vh);
}
@keyframes cpe-anchor-flash {
  0%, 40% {
    outline: 2px solid var(--cpe-gold-icon);
    outline-offset: -1px;
    box-shadow: 0 0 0 3px var(--cpe-gold-soft);
  }
  100% {
    outline: 2px solid transparent;
    outline-offset: -1px;
    box-shadow: 0 0 0 0 transparent;
  }
}
.crm-customer-profile .cpe-action-link {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  min-height: 0;
  color: var(--cpe-gold);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.crm-customer-profile .cpe-action-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cpe-gold);
  color: var(--cpe-gold);
}
.crm-customer-profile .cpe-action-link:focus-visible {
  outline: 2px solid var(--cpe-gold-icon);
  outline-offset: 2px;
}
.crm-customer-profile .cpe-related-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  max-width: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cpe-ink);
  text-decoration: underline;
  text-decoration-color: rgb(189 159 85 / 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.crm-customer-profile .cpe-related-link:hover {
  text-decoration-color: #bd9f55;
}
.crm-customer-profile .cpe-related-link:focus-visible {
  outline: 2px solid var(--cpe-gold-icon);
  outline-offset: 2px;
}
.crm-customer-profile .cpe-related-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2rem;
  color: var(--cpe-gold-icon);
  align-self: flex-start;
}
.crm-customer-profile .cpe-related-label {
  overflow-wrap: anywhere;
}
.crm-customer-profile .cpe-visit-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.crm-customer-profile .cpe-visit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  padding: var(--cpe-pad);
  align-items: start;
}
.crm-customer-profile .cpe-visit-card--with-total {
  grid-template-columns: minmax(0, 1fr) auto;
}
/* Visit card (row 128): each piercing in a thin gold box; subtotals share the header
   total's right edge (the total is inset by the box border + padding); tabular digits. */
.crm-customer-profile .cpe-visit-card {
  --cpe-vc-box-pad-x: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.crm-customer-profile .cpe-visit-card .cpe-visit-total {
  padding-right: calc(var(--cpe-vc-box-pad-x) + 1px);
}
.crm-customer-profile .cpe-vc-body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin-top: 0.25rem;
}
.crm-customer-profile .cpe-vc-piercing {
  min-width: 0;
  padding: 0.625rem var(--cpe-vc-box-pad-x);
  border: 1px solid var(--cpe-gold-icon);
}
.crm-customer-profile .cpe-vc-piercing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.crm-customer-profile .cpe-vc-piercing-title {
  margin: 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cpe-ink);
  overflow-wrap: anywhere;
}
.crm-customer-profile .cpe-vc-subtotal {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cpe-ink);
  white-space: nowrap;
}
.crm-customer-profile .cpe-vc-jewellery {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--cpe-ink-muted);
  overflow-wrap: anywhere;
}
.crm-customer-profile .cpe-vc-follow-ups {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}
.crm-customer-profile .cpe-vc-visit-follow-ups .cpe-vc-follow-ups {
  margin-top: 0;
}
/* Row 129: every follow-up line stays on one line — only the kind shrinks, with an
   ellipsis; the date, status (and the rail's Уреди) never shrink or wrap. */
.crm-customer-profile .cpe-fu-oneline {
  display: flex;
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}
.crm-customer-profile .cpe-fu-oneline > .cpe-unit {
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.crm-customer-profile .cpe-fu-oneline > .cpe-related-link,
.crm-customer-profile .cpe-fu-oneline > .cpe-fu-kind {
  min-width: 0;
  overflow: hidden;
}
/* Row 134: a short kind („Контрола“, „Намалување“) never shrinks and is never padded; a
   longer one may truncate, but not below the width of a short kind. */
.crm-customer-profile .cpe-fu-oneline > .fu-kind--whole {
  flex-shrink: 0;
}
.crm-customer-profile .cpe-fu-oneline > .fu-kind--shrinks {
  min-width: min(5.75rem, 100%);
}
.crm-customer-profile .cpe-fu-oneline .cpe-related-label,
.crm-customer-profile .cpe-fu-oneline > .cpe-fu-kind {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-customer-profile .cpe-fu-edit {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.75rem;
}
.crm-customer-profile .cpe-vc-follow-up {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-vc-follow-up + .cpe-vc-follow-up {
  margin-top: 0.125rem;
}
.crm-customer-profile .cpe-vc-follow-up .cpe-related-link {
  font-size: 0.8125rem;
}
.crm-customer-profile .cpe-vc-follow-up .cpe-related-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.crm-customer-profile .cpe-fu-line .link-action {
  font-size: inherit;
  line-height: inherit;
}
.crm-customer-profile .cpe-vc-therapeutic {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.crm-customer-profile .cpe-vc-therapeutic .cpe-value {
  margin: 0.125rem 0 0;
}
/* Контролни посети rail row: the card's follow-up line + a quiet back-link. */
.crm-customer-profile .cpe-fu-row {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #f3f4f6;
}
.crm-customer-profile .cpe-fu-row:first-child {
  border-top: 0;
}
.crm-customer-profile .cpe-fu-line {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-fu-kind {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cpe-ink);
}
.crm-customer-profile .cpe-fu-row--finished .cpe-fu-kind {
  color: #374151;
}
.crm-customer-profile .cpe-fu-back {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
}
.crm-customer-profile .cpe-fu-back .cpe-related-link {
  font-size: inherit;
  font-weight: 400;
  color: var(--cpe-ink-muted);
}
.crm-customer-profile .cpe-fu-back .cpe-related-icon {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.1rem;
}
.crm-customer-profile .cpe-visit-head {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.crm-customer-profile .cpe-visit-total {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
  align-self: start;
  white-space: nowrap;
}
.crm-customer-profile .cpe-visit-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem; /* row 141: ~6px when the type chip wraps under Посета #N */
}
.crm-customer-profile .cpe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.crm-customer-profile .cpe-badge--aesthetic {
  background: var(--cpe-gold-soft);
  color: var(--cpe-gold);
}
.crm-customer-profile .cpe-badge--therapeutic {
  background: #fef3c7;
  color: #92400e;
}
.crm-customer-profile .cpe-value {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--cpe-ink-muted);
  overflow-wrap: anywhere;
}
.crm-customer-profile .cpe-visit-total-label {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cpe-ink-secondary);
}
.crm-customer-profile .cpe-visit-total-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cpe-ink);
}

@container cpe (min-width: 40rem) {
  .crm-customer-profile .cpe-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .crm-customer-profile .cpe-consent-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  /* label | status | 0 spacer | label | status: the spacer doubles the gap between pairs. */
  .crm-customer-profile .cpe-consent-values {
    grid-template-columns: fit-content(12rem) minmax(max-content, 1fr) 0 fit-content(12rem) minmax(max-content, 1fr);
    max-width: 46rem;
  }
  .crm-customer-profile .cpe-consent-row {
    grid-row: var(--cpe-consent-row);
    grid-column: 1 / span 2;
  }
  .crm-customer-profile .cpe-consent-row--col2 {
    grid-column: 4 / span 2;
  }
  .crm-customer-profile .cpe-visit-card--with-total .cpe-visit-head {
    grid-column: 1;
    grid-row: 1;
  }
  .crm-customer-profile .cpe-visit-card--with-total .cpe-visit-total {
    grid-column: 2;
    grid-row: 1;
  }
  .crm-customer-profile .cpe-visit-total-label {
    display: inline;
  }
}

/* Rows 111–114: the worklist (/crm/worklist; promoted from the preview). Scoped; mirrors the
   profile's compact record conventions (.crm-customer-profile) without sharing them.
   Row 113: one divided list per group, two-line rows, Заврши + Повеќе. */
.crm-worklist {
  --wlp-ink: #111827;
  --wlp-ink-secondary: #4b5563;
  --wlp-ink-muted: #6b7280;
  --wlp-gold-icon: #a88b45;
  --wlp-line: #e5e7eb;
  --wlp-divider: #f0f1f3;
  container-type: inline-size;
}
.crm-worklist .wlp-group {
  margin-bottom: 2rem;
}
.crm-worklist .wlp-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  margin-bottom: 0.5rem;
}
.crm-worklist .wlp-group-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wlp-ink-secondary);
}
.crm-worklist .wlp-group-meta {
  font-size: 0.875rem;
  color: var(--wlp-ink-muted);
}

/* One white surface per group; thin dividers between rows. */
.crm-worklist .wlp-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--wlp-line);
}
.crm-worklist .wlp-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}
.crm-worklist .wlp-row + .wlp-row {
  border-top: 1px solid var(--wlp-divider);
}
@container (min-width: 40rem) {
  .crm-worklist .wlp-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .crm-worklist .wlp-actions {
    flex-shrink: 0;
  }
}
.crm-worklist .wlp-empty {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--wlp-ink-muted);
  background: #fff;
  border: 1px solid var(--wlp-line);
}

/* Two lines of information. */
.crm-worklist .wlp-info {
  min-width: 0;
  flex: 1 1 auto;
}
.crm-worklist .wlp-line1 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
  row-gap: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.crm-worklist .wlp-client-link,
.crm-worklist .wlp-client {
  font-weight: 600;
  color: var(--wlp-ink);
  overflow-wrap: anywhere;
}
.crm-worklist .wlp-client-link {
  /* Row 142: no resting underline on client names; it appears on hover / focus. */
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.crm-worklist .wlp-client-link:hover,
.crm-worklist .wlp-client-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--wlp-ink);
}
.crm-worklist .wlp-line1 {
  min-width: 0;
}
/* Row 132: „kind · due date · status“ in the profile's one-line format — never wraps;
   only the kind truncates (full kind in its title). */
.crm-worklist .wlp-summary {
  display: flex;
  align-items: baseline;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--wlp-ink-muted);
}
.crm-worklist .wlp-kind {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--wlp-ink);
}
.crm-worklist .wlp-unit {
  flex-shrink: 0;
}
/* Row 143: on a shared line the client and the kind are joined by the same tight „ · “
   (no flex gap); stacked on mobile, the separator is hidden. */
.crm-worklist .wlp-row:not(.wlp-row--visit) .wlp-line1 {
  column-gap: 0;
}
.crm-worklist .wlp-lead-sep {
  flex-shrink: 0;
}
/* Row 134: a short kind never shrinks (and is never padded); a longer one may truncate,
   but not below the width of a short kind. */
.crm-worklist .wlp-kind.fu-kind--whole {
  flex-shrink: 0;
}
.crm-worklist .wlp-kind.fu-kind--shrinks {
  min-width: min(5.75rem, 100%);
}
.crm-worklist .wlp-sep {
  color: #9ca3af;
}
.crm-worklist .wlp-line2 {
  /* Row 134: inline text so every „ · “ has the same tight spacing (no flex gap). */
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--wlp-ink-muted);
}
.crm-worklist .wlp-line2 .cpe-related-link {
  font-size: inherit;
  font-weight: 400;
  color: var(--wlp-ink-secondary);
}
/* Row 133: „Последни посети“ rows — the total right-aligned in tabular digits; the
   services line stays one line and truncates. */
.crm-worklist .wlp-total {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wlp-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Row 137: the visit-type chip — the same badge as the profile's visit card. */
.crm-worklist .cpe-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.crm-worklist .cpe-badge--aesthetic {
  background: #f6f0e0;
  color: #8c7338;
}
.crm-worklist .cpe-badge--therapeutic {
  background: #fef3c7;
  color: #92400e;
}
/* Client + chip as one inline flow beside the total: a long name wraps and the chip
   follows it; the total stays top-right. */
.crm-worklist .wlp-row--visit .wlp-line1 {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.crm-worklist .wlp-who {
  /* Row 141: when the chip wraps under the name, a ~6px row gap; one-line rows unchanged. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}
/* Row 146: line 2 as one link — „Посета #N · services · date“, one line; only the
   services part shrinks (ellipsis), so the visit and the date stay visible. */
.crm-worklist .wlp-context-link {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.crm-worklist .wlp-ctx {
  display: flex;
  min-width: 0;
  white-space: nowrap; /* the parts never wrap inside themselves */
}
.crm-worklist .wlp-ctx-visit,
.crm-worklist .wlp-ctx-date {
  flex-shrink: 0;
}
.crm-worklist .wlp-ctx-services {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pending overdue / escalated warnings: their own line, never truncated. */
.crm-worklist .wlp-warnings {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}
/* Q-84: the follow-up's note, one quiet line (the whole note in the title). */
.crm-worklist .wlp-note,
.crm-customer-profile .cpe-fu-note {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--wlp-ink-secondary, #374151);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crm-customer-profile .cpe-fu-note {
  color: var(--cpe-ink-secondary, #374151);
}
.crm-worklist .wlp-meta {
  color: var(--wlp-ink-muted);
}
.crm-worklist .wlp-status {
  font-weight: 500;
}
.crm-worklist .wlp-status--overdue {
  color: #b91c1c;
}
.crm-worklist .wlp-status--escalated {
  color: #991b1b;
}
/* The profile's related-record link, restated for this scope. */
.crm-worklist .cpe-related-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  max-width: 100%;
  font-weight: 500;
  color: var(--wlp-ink);
  text-decoration: underline;
  text-decoration-color: rgb(189 159 85 / 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: normal;
}
.crm-worklist .cpe-related-link:hover {
  text-decoration-color: #bd9f55;
}
.crm-worklist .cpe-related-icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.15rem;
  color: var(--wlp-gold-icon);
  align-self: flex-start;
}
.crm-worklist .cpe-related-label {
  overflow-wrap: anywhere;
}
.crm-worklist .wlp-client-link:focus-visible,
.crm-worklist .cpe-related-link:focus-visible,
.crm-worklist .wlp-pager-link:focus-visible,
.crm-worklist .btn-outcome:focus-visible,
.crm-worklist .wlp-menu-button:focus-visible,
.crm-worklist .wlp-menu-item:focus-visible {
  outline: 2px solid var(--wlp-gold-icon);
  outline-offset: 2px;
}

/* Actions: Заврши + a quieter Повеќе. */
.crm-worklist .wlp-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.crm-worklist .wlp-action-form,
.crm-worklist .wlp-menu-form {
  display: contents;
}
.crm-worklist .btn-outcome {
  min-height: 2rem;
}
.crm-worklist .btn-outcome[disabled],
.crm-worklist .wlp-menu-item[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.crm-worklist .wlp-menu {
  position: relative;
}
.crm-worklist .wlp-menu-button {
  /* Row 132: a quiet text button — no resting border or fill; 44px hit area. */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wlp-ink-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.crm-worklist .wlp-menu-button:hover,
.crm-worklist .wlp-menu-button[aria-expanded="true"] {
  color: var(--wlp-ink);
}
.crm-worklist .wlp-menu-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.crm-worklist .wlp-menu-dots {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
}
/* Row 136 — mobile (the row's stacking breakpoint): Повеќе is an icon button in the row's
   top-right corner, the actions no longer form their own line (finished rows end after
   their content; open rows keep Заврши under it), and line 1 always stacks the client
   over the summary. Desktop is unchanged. */
@container (max-width: 39.99rem) {
  .crm-worklist .wlp-row {
    position: relative;
  }
  .crm-worklist .wlp-row:has(.wlp-menu) .wlp-info {
    padding-right: 2.5rem; /* room for the corner icon */
  }
  .crm-worklist .wlp-actions {
    display: contents;
  }
  .crm-worklist .wlp-action-form .btn-outcome {
    align-self: flex-start;
  }
  .crm-worklist .wlp-menu {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
  }
  .crm-worklist .wlp-menu-button {
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }
  .crm-worklist .wlp-menu-text {
    display: none;
  }
  .crm-worklist .wlp-menu-dots {
    display: block;
  }
  .crm-worklist .wlp-menu .wlp-menu-list {
    left: auto;
    right: 0;
  }
  .crm-worklist .wlp-row:not(.wlp-row--visit) .wlp-summary {
    flex-basis: 100%;
  }
  .crm-worklist .wlp-lead-sep {
    display: none;
  }
}
.crm-worklist .wlp-menu-caret {
  width: 0.875rem;
  height: 0.875rem;
}
.crm-worklist .wlp-menu-list {
  position: absolute;
  /* Narrow: actions sit at the left under the content, so the menu opens rightward. */
  left: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  min-width: 13rem;
  padding: 0.25rem 0;
  background: #fff;
  border: 1px solid var(--wlp-line);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}
.crm-worklist .wlp-menu-list[hidden] {
  display: none;
}
@container (min-width: 40rem) {
  /* Wide: actions sit at the right edge, so the menu opens leftward. */
  .crm-worklist .wlp-menu-list {
    left: auto;
    right: 0;
  }
}
.crm-worklist .wlp-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--wlp-ink);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.crm-worklist .wlp-menu-item:hover,
.crm-worklist .wlp-menu-item:focus {
  background: #f9fafb;
}
.crm-worklist .wlp-menu-item--danger {
  color: #dc2626;
  border-top: 1px solid #f3f4f6;
}

/* Pager above and below a multi-page group. */
.crm-worklist .wlp-per-page {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}
.crm-worklist .wlp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.25rem;
  font-size: 0.875rem;
}
.crm-worklist .wlp-pager--top {
  margin-bottom: 0.5rem;
}
.crm-worklist .wlp-pager--bottom {
  margin-top: 0.625rem;
}
.crm-worklist .wlp-pager-status,
.crm-worklist .wlp-pager-links {
  margin: 0;
}
.crm-worklist .wlp-pager-status {
  color: var(--wlp-ink-muted);
}
.crm-worklist .wlp-pager-range {
  color: var(--wlp-ink);
  font-weight: 500;
}
.crm-worklist .wlp-pager-links {
  display: flex;
  gap: 1.25rem;
}
.crm-worklist .wlp-pager-link {
  font-weight: 600;
  color: var(--wlp-ink);
  text-decoration: underline;
  text-decoration-color: rgb(189 159 85 / 0.6);
  text-underline-offset: 3px;
}
.crm-worklist .wlp-pager-link:hover {
  text-decoration-color: #bd9f55;
}

/* Row 147: on the worklist and the client profile, text links carry no resting underline;
   it appears on hover and keyboard focus (the focus outlines stay as they are). */
:is(.crm-worklist, .crm-customer-profile) :is(.link, .cpe-related-link, .wlp-pager-link, .cpe-consent-doc) {
  text-decoration-line: none;
}
:is(.crm-worklist, .crm-customer-profile) :is(.link, .cpe-related-link, .wlp-pager-link, .cpe-consent-doc):is(:hover, :focus-visible) {
  text-decoration-line: underline;
}

/* Row 124: the empty hint of „Контролни посети“ disappears once a row is added by hand. */
[data-follow-ups-section]:has([data-follow-up-plan]:not(.hidden)) [data-follow-ups-empty] {
  display: none;
}

/* Row 145: one header height for the top bar and the sidebar's logo block, so the line
   under the logo continues the top bar's bottom border. Values are the top bar's own
   rendered heights (border included), so the top bar itself does not change. */
:root {
  --admin-header-h: 70.5px;
}
@media (min-width: 640px) {
  :root {
    --admin-header-h: 79px;
  }
}
.admin-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--admin-header-h);
  box-sizing: border-box;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  height: var(--admin-header-h);
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Printable documents (Goods receipt, ПЛТ): only the document prints, landscape A4. */
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }
  .admin-sidebar,
  .admin-header,
  .page-breadcrumbs,
  .print-hidden,
  .admin-pagination,
  .alert {
    display: none !important;
  }
  .admin-main-content main {
    padding: 0 !important;
  }
  .print-document {
    border: 0 !important;
    box-shadow: none !important;
  }
  .print-document .card-body {
    padding: 0 !important;
  }
  .print-document .plt-table {
    font-size: 8.5pt;
  }
  .print-document .plt-table th,
  .print-document .plt-table td {
    padding: 2px 4px;
    border: 1px solid #9ca3af;
  }
}

/* Touch batch (Q-97x T1): a consent answer (Да/Не, Се согласувам, Препорака, a piercer's name) is a
   whole 44px tappable row, not a 17px radio; the chosen one is marked by a soft green. */
.choice-option {
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}
.choice-option:has(input:checked) {
  border-color: #6ee7b7;
  background-color: #ecfdf5;
}
/* Touch batch (Q-97x): on a touch screen a field's text is at least 16px, so iOS does not zoom in
   when it is focused. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px !important;
  }
}
/* Touch batch (lane B r6 #1): the till's day total scales with its column, so it always fits
   (21.600 ден was cut in the 212px column on an iPad in landscape). */
.till-total {
  container-type: inline-size;
}
.till-total #daily_total {
  font-size: clamp(1.25rem, 12cqi, 3rem);
}
/* The smiley and the gap scale with it: total, gap and smiley fit even a seven-digit day
   (1.234.560 ден) in the narrowest column. */
.till-total div:has(> #daily_total) {
  gap: clamp(0.375rem, 3cqi, 1rem);
}
.till-total #mood_emoji svg {
  width: clamp(1.5rem, 14cqi, 3.5rem);
  height: clamp(1.5rem, 14cqi, 3.5rem);
}

/* Touch batch (Q-97x): touch sizes follow the pointer, not the width, so a tablet in landscape
   (1024px, desktop layout) gets the same 44px targets as a phone. Desktop with a mouse is unchanged. */
@media (pointer: coarse) {
  .admin-pagination a,
  .admin-pagination span.page {
    min-width: 44px;
    height: 44px;
  }
  .per-page select {
    height: 44px;
    min-width: 64px;
  }
  .page-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* A checkbox or radio with its label: the label row is the 44px target (settings, filters). */
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]),
  label.cursor-pointer[for] {
    min-height: 44px;
  }
  label.cursor-pointer[for] {
    display: inline-flex;
    align-items: center;
  }
}
/* Touch batch (lane B r6 #4): a list's first column (a document number, a client's or a user's name,
   a КДФИ day) is the way into the row; on a touch screen its link covers the whole cell, and so does
   the link of any cell that holds only a link (a related document, „Кон бр. 62/2026“). Every row is
   at least 44px high. The row's actions (.row-actions, Q-95x) are in their own cell and keep their
   own targets. */
@media (pointer: coarse) {
  .list-scroll .table:not(.doc-list) tbody td,
  .overflow-x-auto > table tbody td {
    height: 44px;
  }
  /* A sticky first column (КДФИ, valuation) is positioned already and anchors the link itself. */
  :is(.list-scroll, .overflow-x-auto) table tbody td:not([class*="-sticky"]) {
    position: relative;
  }
  :is(.list-scroll, .overflow-x-auto) table tbody td:first-child > a:first-of-type::after,
  :is(.list-scroll, .overflow-x-auto) table tbody td > a:only-child::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  /* The worklist's „Заврши“ (34px). */
  .btn-outcome,
  .crm-worklist .btn-outcome {
    min-height: 44px;
  }
}
/* A document list is a table again from 640px (on a phone it is one card per row). */
@media (pointer: coarse) and (min-width: 640px) {
  .list-scroll .table.doc-list tbody td {
    height: 44px;
  }
}
/* Touch batch (lane B r6 #3): a table wider than its card scrolls sideways; the edge with more
   columns behind it fades softly (scroll_cue_controller.js sets the classes), and the fade goes once
   that end is reached. A mask, not a shadow, so the header cells' grey cannot cover it. */
@media screen {
  .scroll-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .scroll-more-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  }
  .scroll-more-left.scroll-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  }
}

/* Touch leftovers (Q-105x, lane C T9): the header's menu button and a piercing's „ד are 44×44.
   The „ד keeps its place: the extra width goes into the card's padding. */
.admin-header [data-action="sidebar#toggle"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.piercing-row-remove {
  width: 44px;
  height: 44px;
  margin-right: -10px;
}
@media (pointer: coarse) {
  /* Touch leftovers (lane C T4): a worklist card's information opens the client (its name's link
     covers the column); the visit line keeps its own link, lifted above it. „Заврши“ and „Повеќе“
     are outside the column and stay separate. */
  .crm-worklist .wlp-info {
    position: relative;
  }
  .crm-worklist .wlp-client-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .crm-worklist .wlp-context-link {
    position: relative;
    z-index: 1;
  }
  /* Touch leftovers (Q-105x): a text link or a link-styled button is 44px tall to a finger and
     unchanged to the eye. 12px of padding above and below, taken back by a negative margin, so
     nothing moves. Covers the worklist's visit line and pager, the client profile's consent
     actions, „Уреди“ and the paper-form PDF, the notice's „Подесувања“, the links inside
     documents and the ЕТ proof rows, and the till's „Сите денешни продажби (уште N)“. */
  .crm-worklist .wlp-context-link,
  .crm-worklist .wlp-pager-link,
  .crm-customer-profile .cpe-action-link,
  .crm-customer-profile .cpe-consent-doc,
  main a.link,
  main .link-action {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }
}
/* Touch leftovers (Q-105x, lane B r9): the till's choice buttons size themselves by their own width.
   Two buttons narrower than about 215px each (a phone, or iPad landscape with the sidebar open) take
   the compact padding and 14px type; below about 145px each the decorative emoji goes. */
.till-choices {
  container-type: inline-size;
}
@container (max-width: 440px) {
  .till-choices > label {
    gap: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@container (max-width: 300px) {
  .till-choices > label > span[aria-hidden] {
    display: none;
  }
}
/* Touch leftovers (lane B r9): a till line too narrow for „Наплатена цена (ден/парче)“ on one line
   shows „ден/парче“ inside the price field instead, so the two labels and fields line up. */
.till-line-fields {
  container-type: inline-size;
}
.till-unit-suffix {
  display: none;
}
@container (max-width: 340px) {
  .till-line-fields .till-unit-hint {
    display: none;
  }
  .till-line-fields .till-unit-suffix {
    display: block;
  }
  .till-line-fields .till-unit-input {
    padding-right: 5.5rem;
  }
}

/* Q-109x: a daily Sale line (till „Денешни продажби“, Денешен промет) never cuts its text. In a narrow
   list (under 300px, the till's right column on iPad landscape) the name takes the whole width and the
   who/when line sits beside the amount under it, so the name is not broken after every word. The
   `.sale-line` prefix outranks the sm: utilities, which Tailwind emits after this block. */
.sale-line {
  container-type: inline-size;
}
@container (max-width: 300px) {
  .sale-line .sale-line-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    align-items: baseline;
  }
  .sale-line .sale-line-text,
  .sale-line .sale-line-figures {
    display: contents;
  }
  .sale-line .sale-line-name {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .sale-line .sale-line-meta {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sale-line .sale-line-amount {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sale-line .sale-line-discount {
    grid-column: 1;
    grid-row: 3;
  }
  .sale-line .sale-line-quantity {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
  }
}
/* Q-106x (lane A round 8): a book printed from the screen fits A4 landscape. On paper its tables
   take small type and tight cells, and their text may wrap (an amount never breaks: it has no
   space), so the last column is never cut („2.353.400,“). A dismissible screen hint (the Sales
   point note) never prints. The page itself: no sidebar margin on paper (A4 landscape is wider than
   1024px, so the desktop layout's 16rem margin applied and left a quarter of the page empty), and
   html/body don't clip (their overflow-x: hidden made body a scroll container, and Chromium stopped
   printing partway down page 2). */
@media print {
  .admin-main-content {
    margin-left: 0 !important;
  }
  html,
  body {
    overflow: visible !important;
  }
  main table {
    font-size: 8pt !important;
  }
  main table th,
  main table td {
    padding: 2px 4px !important;
    white-space: normal !important;
  }
  [data-controller~="once-hint"] {
    display: none !important;
  }
}

/* R9-3: on a touch screen a settings checkbox or radio sits inside a generous target. Its row (the
   label holding the box) reaches 12px past its edges with a transparent ::before, which takes the tap
   for the label without moving anything; the radio rows are already 44px tall and reach 12px to the
   left and right. */
@media (pointer: coarse) {
  .settings-switch,
  .settings-choice {
    position: relative;
  }
  .settings-switch::before,
  .settings-choice::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
  .settings-choice::before {
    inset: 0 -12px;
  }
}

/* Q-111x (lane A round 9): a printed table's totals (its <tfoot>, always after the body) print once,
   at the end, instead of at the foot of every page, where they read as page totals. A cell marked
   print-nowrap (the specification's „бр. 583 · 10:43“ and its article) stays on one line on paper, where
   other text may wrap (Q-106x); rows are a little tighter there. */
@media print {
  main table tfoot {
    display: table-row-group;
  }
  main table th.print-nowrap,
  main table td.print-nowrap {
    white-space: nowrap !important;
  }
  main table th,
  main table td {
    line-height: 1.25 !important;
  }
}