/*
  Charming Look: components and pages. Uses only the variables from tokens.css.
  Version 2 (2026-10-03): professional SaaS app (owner's decision): sidebar with icons, top bar,
  white panels on a grey canvas, black and white like charminglook.lt.
  Owner: the design agent. Concepts that show every class in use:
  /root/charminglook-dizainas/concepts/*.html
*/

/* ==== Base =================================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--text);
  background: var(--canvas);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

a { color: var(--text-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }

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

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100%;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: var(--space-3); }

/* Icons: <svg class="icon" aria-hidden="true"><use href=".../img/icons.svg#i-name"/></svg> */
.icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1rem; height: 1rem; }

/* ==== Buttons ================================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 1px rgb(24 23 23 / 0.04);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--hover); border-color: var(--line-strong); }

.btn--primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--text-on-action);
}
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }

.btn--quiet { border-color: transparent; background: transparent; box-shadow: none; }
.btn--quiet:hover { background: var(--hover); border-color: transparent; }
/* Every delete / remove button outside a dialog (owner 2026-10-19): quiet grey text that turns red on hover. The
   red btn--danger is only the confirming button inside the dialog. */
.btn--delete { color: var(--text-muted); }
.btn--delete:is(:hover, :focus-visible) { color: var(--status-no); }

.btn--icon { padding: 0; width: var(--control); }
.btn--block { width: 100%; }
.btn--lg { min-height: 2.75rem; padding-inline: var(--space-4); font-size: 0.9375rem; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* a form that is sending (form[data-busy], app.js): the button says so and waits; not the faded "unavailable" look */
form[data-busy] .btn[data-label][aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* ==== Form fields ============================================================================ */

.field { display: grid; gap: 0.375rem; }
.field-label { font-size: var(--fs-md); font-weight: var(--weight-medium); }
/* "privalomas" after a field's name: a quiet word, not a red star */
.field-req { margin-left: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-regular); }

.field-input {
  width: 100%;
  min-height: var(--control);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
}
.field-input::placeholder { color: var(--text-muted); }
/* one-line fields are exactly --control tall: whole-pixel text line + padding + 1 px borders */
input.field-input,
select.field-input { height: var(--control); line-height: 1.25rem; padding-block: calc((var(--control) - 1.25rem - 2px) / 2); }
/* date and time fields: Chrome pads the inner editor by 1 px, which would make them 38 px */
.field-input::-webkit-datetime-edit { padding-block: 0; }
/* iPhone/iPad: WebKit forces content-box on a date field drawn as a picker button, so width 100% + padding + border
   stuck out ~25 px past the form and the field grew taller; drawn plain it keeps border-box. The date is left-aligned
   like every other field's text (iOS centres it). Only iOS matches; Chrome and Android are unchanged. */
@supports (-webkit-touch-callout: none) {
  input.field-input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
  input.field-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
.field-input:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field-input[aria-invalid="true"] { border-color: var(--status-no); box-shadow: 0 0 0 1px var(--status-no); }
.field-input:disabled { background: var(--surface-app); color: var(--text-muted); }
/* read-only values to copy (a webhook address, an invite link): grey, but text stays black */
.field-input[readonly] { background: var(--surface-app); border-color: var(--line); color: var(--text); font-variant-numeric: tabular-nums; }
textarea.field-input { min-height: 5.5rem; resize: vertical; line-height: var(--lh-text); }
select.field-input { padding-right: var(--space-6); }

/* A select whose list has a search at its top (app.js [data-pick], Išduota "Prekė iš sandėlio"). The select stays the
   face and the value (inert with JS); a clear button over it opens the list under it, as wide as the field. The
   search icon and the ticks share one column, the search text and the names another. */
.pick { position: relative; }
.pick-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-open:focus-visible { outline-offset: 0; }
.pick-open.pick-quiet:focus-visible { outline: none; } /* back from a click or tap: no ring, as on a select */
.pick:has(.pick-open:focus-visible:not(.pick-quiet)) > select,
.pick:has(.pick-open[aria-expanded="true"]) > select { border-color: var(--focus); }
.pick-pop {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.pick-search { position: relative; border-bottom: var(--border-thin) solid var(--line); }
.pick-search:has(:focus-visible) { border-bottom-color: var(--focus); }
.pick-search .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.pick-search-input { display: block; width: 100%; height: var(--control); padding: 0 var(--space-3) 0 calc(var(--space-3) + 1rem + var(--space-2)); border: 0; background: none; font-size: var(--fs-md); }
.pick-search-input::placeholder { color: var(--text-muted); }
.pick-search-input:focus-visible { outline: none; } /* the line under it turns black */
.pick-list { position: relative; max-height: 20rem; margin: 0; padding: var(--space-1) 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.pick-list [role="option"] { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); line-height: 1.25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-list [role="option"] .icon { margin-top: 0.125rem; visibility: hidden; }
.pick-list [aria-selected="true"] { font-weight: var(--weight-medium); }
.pick-list [aria-selected="true"] .icon { visibility: visible; }
.pick-list .pick-active { background: var(--hover); }
.pick-stock { color: var(--text-muted); font-weight: var(--weight-regular); }
.pick-none { padding: var(--space-1) var(--space-3) var(--space-3) calc(var(--space-3) + 1rem + var(--space-2)); color: var(--text-muted); }
.pick-none:empty { display: none; }
@media (max-width: 47.99rem) {
  .pick-search-input { height: var(--tap); font-size: 1rem; } /* 16 px: iOS does not zoom in */
  .pick-list [role="option"] { padding-block: var(--space-3); font-size: 1rem; }
  .pick-list [role="option"] .icon { margin-top: 0.1875rem; }
}

.field-hint { font-size: var(--fs-sm); color: var(--text-muted); }

.field-error {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--status-no);
}
.field-error::before {
  content: "";
  flex: none;
  width: 0.4375rem; height: 0.4375rem;
  border-radius: var(--radius-round);
  background: currentColor;
  transform: translateY(-0.1em);
}

/* ==== Status: dots, badges, tags ============================================================= */

.dot {
  display: inline-block;
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-round);
  border: 1.5px solid var(--status-none);
  background: transparent;
  vertical-align: 0.05em;
}
.dot--wait { border-color: var(--status-wait); }
.dot--yes  { border-color: var(--status-yes); background: var(--status-yes); }
.dot--no   { border-color: var(--status-no);  background: var(--status-no); }
.dot--new  { border-color: var(--status-new); background: var(--status-new); }
.dot--brand { border-color: var(--brand); background: var(--brand); }
.dot--sm { width: 0.4375rem; height: 0.4375rem; }

/* Badge: a status word in a soft pill, always with its dot */
.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-round);
  background: var(--status-none-tint);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.badge--yes  { background: var(--status-yes-tint);  color: var(--status-yes); }
.badge--no   { background: var(--status-no-tint);   color: var(--status-no); }
.badge--wait { background: var(--status-wait-tint); color: var(--status-wait-ink); }

/* Tag: small magenta label, e.g. "Naujas klientas" */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0 0.4375rem;
  border-radius: var(--radius-round);
  background: var(--brand-tint);
  color: var(--brand-stronger);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

/* ==== Notices ================================================================================ */

.notice {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-app);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
}
.notice::before {
  content: "";
  flex: none;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--status-none);
  transform: translateY(-0.1em);
}
.notice strong { font-weight: var(--weight-semibold); }
.notice--error { background: var(--status-no-tint); border-color: transparent; }
.notice--error::before { background: var(--status-no); }
.notice--wait { background: var(--status-wait-tint); border-color: transparent; color: var(--status-wait-ink); }
.notice--wait::before { background: var(--status-wait); }
.notice--ok { background: var(--status-yes-tint); border-color: transparent; }
.notice--ok::before { background: var(--status-yes); }

/* ==== Login family =========================================================================== */
/* A centred card on the grey canvas with the real black wordmark, like charminglook.lt. */

.page-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--canvas);
}

.login {
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-4) var(--space-5);
}
.login-mirror { display: none; } /* v1 element, no longer shown */

.login-panel {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 25rem);
  padding: var(--space-6);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(24 23 23 / 0.04), 0 8px 24px rgb(24 23 23 / 0.05);
}

.login-brand { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-bottom: var(--space-2); }
.login-logo { width: min(18.875rem, 100%); height: auto; } /* 302 x 47: the size the 1x logo file is drawn for */
.login-product { color: var(--text-muted); font-size: var(--fs-md); }

.login-form { display: grid; gap: var(--space-4); }
.login-title { font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.login-lead { color: var(--text-muted); line-height: var(--lh-text); margin-top: calc(-1 * var(--space-2)); }
.login-lead strong { color: var(--text); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.login-form .field-input { min-height: 2.5rem; font-size: 1rem; }
.login-form .btn--primary { min-height: 2.5rem; margin-top: var(--space-1); font-size: 0.9375rem; }
.login-captcha { min-height: 65px; line-height: 0; margin-inline: min(0px, (100% - 300px) / 2); } /* Turnstile box: 65 px high, never under 300 px wide */

.login-help { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); text-align: center; }
.login-foot { padding: 0 var(--space-4) var(--space-5); color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }

@media (max-width: 47.99rem) {
  .login { align-items: start; padding-top: var(--space-6); }
  .login-panel { padding: var(--space-5); }
  .login-panel { padding-inline: clamp(var(--space-2), (100vw - 334px) / 2, var(--space-5)); } /* under ~382 px the panel gives up side padding so the 300 px box keeps the fields' edges */
  .login-form .field-input,
  .login-form .btn--primary { min-height: var(--tap); }
}

/* ==== App shell: sidebar + top bar + content ================================================= */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* The sidebar is a native popover on phones (opened by the menu button, no JS) and an always
   visible column from 64rem up. */
.sidebar,
.sidebar[popover] {
  position: sticky;
  inset: 0 auto auto auto; /* top: 0 (inset also clears the popover's fixed inset) */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: auto;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  border: 0;
  border-right: var(--border-thin) solid var(--line);
  background: var(--sidebar);
  color: var(--text);
}
@media (min-width: 64rem) {
  .sidebar[popover]:not(:popover-open) { display: flex; }
  .sidebar-close { display: none; }
}

.sidebar-brand {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3);
  color: var(--text);
  text-decoration: none;
}
.sidebar-brand img { width: 12.625rem; height: auto; } /* 202 x 18: the size the 1x logo file is drawn for */
.sidebar-product { color: var(--text-muted); font-size: var(--fs-xs); }

.sidebar-nav { display: grid; gap: var(--space-4); }
.nav-group { display: grid; gap: 0.125rem; }
.nav-group-label { padding: 0 var(--space-2) var(--space-1); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-medium); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.125rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--selected); color: var(--text); font-weight: var(--weight-semibold); }
.nav-item[aria-current="page"] .icon { color: var(--brand); }
.nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count {
  min-width: 1.375rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-round);
  background: var(--selected);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current="page"] .nav-count { background: var(--surface); }
.nav-count--alert { background: var(--status-no); color: var(--text-on-brand); }
.nav-item[aria-current="page"] .nav-count--alert { background: var(--status-no); }
/* Sandėlis: "Baigiasi" and "Baigėsi", the Prašymai count's shape in the colours of the Laukia and Skubu badges
   (badge--wait, badge--no; owner 2026-10-19: the colours only), the same on the current item */
.nav-count--wait,
.nav-item[aria-current="page"] .nav-count--wait { background: var(--status-wait-tint); color: var(--status-wait-ink); }
.nav-count--no,
.nav-item[aria-current="page"] .nav-count--no { background: var(--status-no-tint); color: var(--status-no); }
.nav-counts { display: inline-flex; flex: none; gap: var(--space-1); }

.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-thin) solid var(--line); }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-round);
  background: var(--action);
  color: var(--text-on-action);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
}
.sidebar-user-text { display: grid; min-width: 0; line-height: 1.25; }
.sidebar-user-name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { color: var(--text-muted); font-size: var(--fs-xs); }
.sidebar-user form { margin-left: auto; }

.sidebar-close { align-self: flex-end; }

/* Top bar */
.app-body { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  min-height: var(--topbar-height);
  padding: 0 var(--gutter);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--border-thin) solid var(--line);
}
.topbar-menu { display: none; }
.topbar-crumb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-muted); font-size: var(--fs-md); }
.topbar-crumb strong { color: var(--text); font-weight: var(--weight-semibold); white-space: nowrap; }

.topbar-search { position: relative; flex: 0 1 22rem; margin-left: auto; }
.topbar-search .icon { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.topbar-search .field-input { min-height: 2.125rem; padding-left: 2.125rem; background: var(--surface-app); border-color: var(--line); }
.topbar-search .field-input:focus-visible { background: var(--surface); }

.topbar-status { display: flex; align-items: center; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.chip strong { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip--error { border-color: transparent; background: var(--status-no-tint); color: var(--status-no); }
.chip--error strong { color: var(--status-no); }

/* Sending band: a channel's pages while it is off, elsewhere only when nothing goes to clients (base.html) */
.mode-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  background: var(--mode-test-bg);
  border-bottom: var(--border-thin) solid var(--mode-test-edge);
  color: var(--mode-test-ink);
  font-size: var(--fs-sm);
}
.mode-band strong { font-weight: var(--weight-semibold); }
.mode-band a { color: inherit; font-weight: var(--weight-medium); margin-left: auto; white-space: nowrap; }

.app-main {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-8);
}

/* Phones and small tablets: the sidebar becomes a drawer */
@media (max-width: 63.99rem) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar[popover] { display: none; }
  .sidebar[popover]:popover-open {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    width: min(18rem, 86vw);
    height: 100dvh;
    box-shadow: var(--shadow-pop);
  }
  .sidebar[popover]::backdrop { background: rgb(24 23 23 / 0.32); }
  /* the X on the logo's line, not on a row of its own above it (the owner, 2026-10-25: "viršuje gaunasi tuščias didelis
     tarpas"): centred on the wordmark, its icon's right edge on the counts' right edge, 44 px to tap; the logo's link
     is only as wide as the logo, so the two never overlap */
  .sidebar-close {
    position: absolute;
    top: calc(var(--space-4) + var(--space-2) + 0.5625rem - var(--tap) / 2);
    right: calc(var(--space-3) + var(--space-2) - (var(--tap) - 1.125rem) / 2);
    width: var(--tap);
    min-height: var(--tap);
  }
  .sidebar-brand { align-self: flex-start; padding-right: 0; }
  .nav-item { min-height: var(--tap); }
  .topbar-menu { display: inline-flex; margin-left: calc(-1 * var(--space-2)); }
  .topbar-search { flex-basis: 16rem; }
  .topbar-date { display: none; }
}

@media (max-width: 47.99rem) {
  .topbar { position: static; flex-wrap: wrap; padding-block: var(--space-2); gap: var(--space-2); }
  .chip--sync { display: none; }
  .topbar-search { order: 3; flex: 1 1 100%; margin-left: 0; }
  .topbar-search .field-input { min-height: var(--tap); }
  .topbar-status { margin-left: auto; }
  .btn--icon { width: var(--tap); min-height: var(--tap); }
  .mode-band { align-items: flex-start; flex-wrap: wrap; column-gap: var(--space-2); }
  .mode-band > .icon { margin-top: 0.125rem; }
  .mode-band > span { flex: 1 1 0; min-width: 0; }
  .mode-band a { margin-left: calc(1rem + var(--space-2)); display: inline-flex; min-height: var(--tap); align-items: center; }
  .chip { min-height: var(--tap); }
  /* both channel chips in the top bar: only the dot and the name fit next to the page name (the word stays for screen readers) */
  .chip--channel:has(+ .chip--channel) .chip-state,
  .chip--channel + .chip--channel .chip-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-main { padding-top: var(--space-4); }
}

/* ==== Page head ============================================================================== */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.page-head-text { display: grid; gap: var(--space-1); min-width: 0; }
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.page-date { color: var(--text-muted); font-size: var(--fs-md); }
.page-head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==== Panels ================================================================================= */

.panel {
  min-width: 0;
  background: var(--surface);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}
.panel + .panel { margin-top: var(--space-4); }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-thin) solid var(--line);
}
.panel-title { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.panel-title .count { color: var(--text-muted); font-weight: var(--weight-regular); }
.panel-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.panel-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.panel-link { font-size: var(--fs-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.panel-body { padding: var(--space-4) var(--space-5); }
.panel-body--flush { padding: 0; }
.panel-foot { padding: var(--space-3) var(--space-5); border-top: var(--border-thin) solid var(--line); color: var(--text-muted); font-size: var(--fs-sm); }
.panel-foot a { font-weight: var(--weight-medium); }

/* Older names kept so already ported templates keep working */
.sheet { min-width: 0; }
.section + .section { margin-top: var(--space-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.section-title { font-size: 0.9375rem; font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.section-title .count { color: var(--text-muted); font-weight: var(--weight-regular); }
.section-link { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--weight-medium); }

@media (max-width: 47.99rem) {
  .panel-head { padding-inline: var(--space-4); }
  .panel-body { padding-inline: var(--space-4); }
  .panel-foot { padding-inline: var(--space-4); }
  .panel-link,
  .section-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
}

/* ==== Stats strip: the day's figures in one panel (no icon cards) ============================= */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.stat {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-thin) solid var(--line);
  color: inherit;
  text-decoration: none;
}
.stat:first-child { border-left: 0; }
a.stat:hover { background: var(--hover); }
.stat-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.stat-value { font-size: var(--fs-stat); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: var(--tracking-tight); }
.stat-value small { color: var(--text-muted); font-size: var(--fs-md); font-weight: var(--weight-medium); letter-spacing: 0; }
.stat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); }
.stat-sub span { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.stat--alert .stat-value { color: var(--status-no); }

@media (max-width: 47.99rem) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--space-3) var(--space-4); border-left: 0; border-top: var(--border-thin) solid var(--line); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:nth-child(even) { border-left: var(--border-thin) solid var(--line); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ==== Toolbar: views, dates, filters, search ================================================= */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.panel .toolbar { margin: 0; }

.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-sm);
  background: var(--selected);
}
.segmented a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.segmented a:hover { color: var(--text); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: var(--weight-semibold); box-shadow: 0 1px 2px rgb(24 23 23 / 0.1); }
.segmented-meta { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-regular); }

.filter-links { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.filter-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.filter-links a:hover { color: var(--text); border-color: var(--line-strong); }
.filter-links a .num { color: var(--text-muted); font-weight: var(--weight-regular); }
.filter-links a[aria-current="page"] { background: var(--action); border-color: var(--action); color: var(--text-on-action); }
.filter-links a[aria-current="page"] .num { color: rgb(255 255 255 / 0.75); }

.search { position: relative; display: flex; gap: var(--space-2); flex: 1 1 18rem; min-width: min(100%, 17rem); max-width: 28rem; }
.search .field-input { padding-left: 2.125rem; }
.search .icon { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.date-nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.date-nav .btn { min-width: var(--control); padding-inline: var(--space-2); }
.date-nav .btn--today { padding-inline: var(--space-3); }
.date-nav input[type="date"] { width: auto; }
.toolbar-field { display: inline-flex; align-items: center; gap: var(--space-2); }
.toolbar-field .field-label { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.toolbar-field .field-input { width: auto; }
.toolbar-spacer { flex: 1; }

@media (max-width: 47.99rem) {
  .segmented { display: flex; width: 100%; }
  .segmented a { flex: 1; justify-content: center; min-height: var(--tap); }
  .filter-links { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .filter-links::-webkit-scrollbar { display: none; }
  .filter-links a { min-height: var(--tap); }
  .search { max-width: none; }
  /* two rows: < Šiandien > , then the date and "Rodyti"; the third column is as wide as "Rodyti" needs */
  .date-nav { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) auto var(--tap); gap: var(--space-2); width: 100%; }
  .date-nav .btn { min-height: var(--tap); }
  .date-nav .btn--today { grid-column: 2 / 4; }
  .date-nav input[type="date"] { grid-column: 1 / 3; width: 100%; min-height: var(--tap); }
  .date-nav button[type="submit"] { grid-column: 3 / 5; padding-inline: var(--space-4); }
  .toolbar-field { width: 100%; }
  .toolbar-field .field-input { flex: 1; min-width: 0; min-height: var(--tap); } /* a long option must not widen the page */
}

/* ==== Day summary: "Rytoj 27 vizitai: 19 TAIP, 2 NE, 6 be atsakymo" ============================ */

.day-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); color: var(--text-muted); font-size: var(--fs-sm); }
.day-summary-total { color: var(--text); font-weight: var(--weight-semibold); }
.day-summary-part { display: inline-flex; align-items: center; gap: 0.375rem; }
.day-summary-part strong { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ==== Call list ============================================================================== */
/* Ordered list of visits; adapts to its container (container queries):
   wide (>= 62rem): one line per visit, shared columns (subgrid);
   medium (>= 36rem): two lines; narrow (phone): a block with a big phone button. */

.calls-wrap { container: calls / inline-size; }

.calls-block { padding: var(--space-3) var(--space-5) var(--space-1); }
.calls-block + .calls-block { border-top: var(--border-thin) solid var(--line); }
.calls-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-1) 0 var(--space-2); }
.calls-block-title { font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.calls-block-title span { color: var(--text-muted); font-weight: var(--weight-regular); }

.calls-head { display: none; }

.call {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "time who" ". service" ". phone" ". actions" ". note";
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: var(--border-thin) solid var(--line);
}
.call:target,
.call[aria-current="true"] { background: var(--hover); }

.call-time { grid-area: time; font-size: var(--fs-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: 1.3; }
/* visit end time under the start: <p class="call-time"><time>10:00</time><span class="call-time-end">–10:25</span></p> */
.call-time .call-time-end { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-regular); line-height: 1rem; }
.call-who { grid-area: who; display: grid; gap: 0.25rem; min-width: 0; }
.call-service { grid-area: service; min-width: 0; line-height: 1.35; }
.call-phone { grid-area: phone; }
.call-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.call-note-text { grid-area: note; font-size: var(--fs-sm); color: var(--text); }
.call-note-text b { font-weight: var(--weight-semibold); color: var(--text-muted); }

.call-name-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; line-height: 1.3; }
.call-name-line > .dot { display: none; } /* v1 marker; the badge carries the state now */
.call-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.call-name a { color: inherit; text-decoration: none; }
.call-name a:hover { text-decoration: underline; }
.call-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); }
.call-state a { color: var(--text); }
.call-state-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-round);
  background: var(--status-none-tint);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.call-state-label::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: var(--radius-round); border: 1.5px solid currentColor; }
.call[data-status="wait"] .call-state-label { background: var(--status-wait-tint); color: var(--status-wait-ink); }
.call[data-status="no"] .call-state-label,
.call[data-status="cancelled"] .call-state-label { background: var(--status-no-tint); color: var(--status-no); }
.call[data-status="no"] .call-state-label::before,
.call[data-status="cancelled"] .call-state-label::before { background: currentColor; }
.call[data-status="yes"] .call-state-label,
.call[data-status="arrives"] .call-state-label { background: var(--status-yes-tint); color: var(--status-yes); }
.call[data-status="yes"] .call-state-label::before,
.call[data-status="arrives"] .call-state-label::before { background: currentColor; }
.call-sms { white-space: nowrap; }

.call-service-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.call-master { color: var(--text-muted); font-size: var(--fs-sm); }

.call-phone a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  border: var(--border-thin) solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

/* Call outcome: one segmented control */
.outcome { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.outcome .btn { min-height: var(--tap); padding-inline: var(--space-2); border-radius: 0; font-size: var(--fs-sm); box-shadow: none; }
.outcome .btn + .btn { margin-left: -1px; }
.outcome .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.outcome .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.outcome .btn:focus-visible { position: relative; z-index: 1; }
.outcome .btn[aria-pressed="true"] { position: relative; z-index: 1; font-weight: var(--weight-semibold); }
.outcome .btn[value="arrives"][aria-pressed="true"] { background: var(--status-yes-tint); border-color: var(--status-yes); color: var(--status-yes); }
.outcome .btn[value="no_answer"][aria-pressed="true"] { background: var(--status-wait-tint); border-color: var(--status-wait); color: var(--status-wait-ink); }
.outcome .btn[value="cancelled"][aria-pressed="true"] { background: var(--status-no-tint); border-color: var(--status-no); color: var(--status-no); }

.call-note { position: relative; width: 100%; }
.call-note:not([open]) > .call-note-form { display: none; }
.call-note > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
.call-note > summary::-webkit-details-marker { display: none; }
.call-note > summary:hover,
.call-note[open] > summary { background: var(--hover); color: var(--text); }
.call-note-form { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.call-note-form .btn { justify-self: start; }

.calls-empty { padding: var(--space-5) 0; color: var(--text-muted); }
.calls-more { padding: var(--space-3) 0; border-top: var(--border-thin) solid var(--line); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.calls-more a { display: inline-flex; align-items: center; min-height: var(--tap); }

@container calls (min-width: 36rem) {
  .calls { display: grid; grid-template-columns: [time] 3.5rem [who] minmax(0, 1fr) [phone] max-content [actions] max-content; column-gap: var(--space-4); }
  .call { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: none; column-gap: normal; row-gap: var(--space-1); align-items: start; padding: var(--space-3) 0; }
  .call-time { grid-area: auto; grid-column: time; grid-row: 1 / span 2; }
  .call-who { grid-area: auto; grid-column: who; grid-row: 1; }
  .call-phone { grid-area: auto; grid-column: phone; grid-row: 1; }
  .call-actions { grid-area: auto; grid-column: actions; grid-row: 1 / span 2; flex-wrap: nowrap; }
  .call-service { grid-area: auto; grid-column: who / actions; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
  .call-service-name { -webkit-line-clamp: 1; }
  .call-note-text { grid-area: auto; grid-column: who / -1; grid-row: 3; }
  .call-phone a { display: inline-block; min-height: 0; border: 0; padding: 0; font-size: var(--fs-md); font-weight: var(--weight-medium); line-height: 1.5; }
  .call-phone a:hover { text-decoration: underline; }
  .outcome { display: inline-flex; width: auto; }
  .outcome .btn { min-height: 2rem; padding-inline: var(--space-3); }
  .call-note { width: auto; }
  .call-note > summary { min-height: 2rem; }
  .call-note-form { position: absolute; right: 0; z-index: 3; width: 22rem; margin-top: var(--space-1); padding: var(--space-4); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-pop); }
}

@container calls (min-width: 62rem) {
  .calls { grid-template-columns: [time] 3.5rem [who] minmax(12rem, 22rem) [phone] max-content [service] minmax(12rem, 34rem) [actions] max-content [rest] minmax(0, 1fr); column-gap: var(--space-5); }
  .calls-head { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: var(--space-2) 0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-medium); }
  .call-time { grid-row: 1; }
  .call-actions { grid-column: actions; grid-row: 1; }
  .call-service { grid-column: service; grid-row: 1; display: block; }
  .call-service-name { -webkit-line-clamp: 2; }
  .call-note-text { grid-column: who / -1; grid-row: 2; margin-top: var(--space-1); }
}

@media (max-width: 47.99rem) {
  .calls-block { padding-inline: var(--space-4); }
  .call-name-line { min-height: 1.5rem; }
  .call-name a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((1.5rem - var(--tap)) / 2); }
}

/* Apžvalga's visit card in the narrow list (li.call--visit, _visit.html): the price at the right end of the name line,
   where the two-line layout has it too, not alone under the phone button (the owner, 2026-10-25: "kaina numesta
   apačioje tokia viena"). Lines: time | name … price; state; service + master; the big phone button. Only the rows a
   visit has, so a missing phone or price leaves no empty row and gap. A two-line name gets its own height; its 44 px
   tap area lies over the state line's top (nothing to tap there). Skambučiai's li.call keeps the layout above. */
@container calls (width < 36rem) {
  .call--visit { grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: none; }
  .call--visit .call-time { grid-area: 1 / 1 / span 2; }
  .call--visit .call-who { display: contents; }
  .call--visit .call-name-line { grid-area: 1 / 2; align-self: baseline; }
  .call--visit .call-actions { grid-area: 1 / 3; align-self: baseline; padding-left: var(--space-1); }
  .call--visit .call-actions:has(> .call-sms:empty) { display: none; }
  .call--visit .call-state { grid-area: 2 / 2 / auto / -1; margin-top: calc(var(--space-1) - var(--space-2)); } /* 4 px under the name, as inside .call-who */
  .call--visit .call-service { grid-area: 3 / 2 / auto / -1; }
  .call--visit .call-phone { grid-area: 4 / 2 / auto / -1; }
  .call--visit .call-phone:empty { display: none; }
  .call--visit .call-name a { position: relative; z-index: 1; display: inline; min-height: 0; margin-block: 0; }
  .call--visit .call-name a::after { content: ""; position: absolute; inset: -0.8125rem min(0px, (100% - var(--tap)) / 2); }
}

/* ==== Overview (Apžvalga) ==================================================================== */

.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, var(--side-col)); gap: var(--space-4); align-items: start; }
.overview-main,
.overview-side { min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.overview-main > .panel + .panel,
.overview-side > .panel + .panel { margin-top: 0; }

@media (max-width: 79.99rem) {
  .overview { grid-template-columns: minmax(0, 1fr); }
  .overview-side { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}
@media (max-width: 47.99rem) {
  .overview-side { grid-template-columns: minmax(0, 1fr); }
}

/* Lists inside panels: NE replies, birthdays, comments */
.item-list > li { padding: var(--space-3) var(--space-5); border-top: var(--border-thin) solid var(--line); }
.item-list > li:first-child { border-top: 0; }
.panel-body .item-list > li { padding-inline: 0; }
.panel-body .item-list > li:first-child { padding-top: 0; }
.item-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-weight: var(--weight-semibold); }
.item-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.item-quote {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px;
  background: var(--surface-sunken);
  line-height: var(--lh-text);
  overflow-wrap: anywhere;
}
.item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.item-actions .btn { min-height: 2rem; font-size: var(--fs-sm); }
.side-note { margin-top: var(--space-2); }
.empty-note { color: var(--text-muted); }

@media (max-width: 47.99rem) {
  .item-list > li { padding-inline: var(--space-4); }
  .item-actions .btn { min-height: var(--tap); }
}


/* Key figures as label + value */
.figures { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: baseline; }
.figures dt { color: var(--text-muted); }
.figures dd { min-width: 0; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); overflow-wrap: break-word; }
/* one-line value that is cut with "…"; put the full value in title="" (e.g. a long e-mail) */
.truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==== Rating distribution (single series, one hue, value at the tip) ========================== */

.rating-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.rating-avg { font-size: var(--fs-stat); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--tracking-tight); }
.rating-of { color: var(--text-muted); font-size: var(--fs-sm); }

.bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--space-2) var(--space-3); align-items: center; }
.bars dt { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bars dd { display: contents; }
.bar { height: 0.5rem; border-radius: var(--radius-round); background: linear-gradient(90deg, var(--data-1) 0 var(--value), var(--data-track) var(--value) 100%); }
.bar-value { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; min-width: 2.5ch; }

.score {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--radius-round);
  background: var(--status-none-tint);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.score--low { background: var(--status-no-tint); color: var(--status-no); }
.score--high { background: var(--status-yes-tint); color: var(--status-yes); }
.comments { margin-top: var(--space-4); }

/* ==== Data table ============================================================================= */

.table-wrap { overflow-x: auto; }
.table-wrap .data-table thead th { top: 0; } /* sticky inside its own scroll box */
.data-table { width: 100%; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; }
.data-table th,
.data-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-thin) solid var(--line); text-align: left; vertical-align: middle; }
.data-table th:first-child,
.data-table td:first-child { padding-left: var(--space-5); }
.data-table th:last-child,
.data-table td:last-child { padding-right: var(--space-5); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table thead th {
  position: sticky;
  top: var(--topbar-height);
  z-index: 1;
  padding-block: 0.625rem;
  background: var(--surface-app);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.data-table tbody tr:hover { background: var(--hover); }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .nowrap { white-space: nowrap; }
.data-table .muted { color: var(--text-muted); }
.data-table .row-title { color: var(--text); font-weight: var(--weight-semibold); text-decoration: none; }
.data-table .row-title:hover { text-decoration: underline; }
.data-table .row-sub { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.data-table a[href^="tel:"] { color: var(--text); text-decoration: none; white-space: nowrap; }
.data-table a[href^="tel:"]:hover { text-decoration: underline; }
.data-table tr[data-tw="cc"] td,
.data-table tr[data-tw="rj"] td { color: var(--text-muted); }
.data-table td .tag { margin-left: var(--space-1); }
.data-table .col-name { min-width: 12rem; }

@media (max-width: 47.99rem) {
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--stack,
  .data-table--stack tbody,
  .data-table--stack tr,
  .data-table--stack td { display: block; width: 100%; }
  .data-table--stack tr { padding: var(--space-3) var(--space-4); border-bottom: var(--border-thin) solid var(--line); }
  .data-table--stack tbody tr:last-child { border-bottom: 0; }
  .data-table--stack td,
  .data-table--stack td:first-child,
  .data-table--stack td:last-child { padding: 0.125rem 0; border: 0; text-align: left; }
  .data-table--stack td.num { text-align: left; }
  .data-table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); font-size: var(--fs-xs); }
  .data-table--stack .row-title { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  .data-table--stack a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* Pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); border-top: var(--border-thin) solid var(--line); }
.pager-info { color: var(--text-muted); font-size: var(--fs-sm); margin-right: auto; }
.pager-links { display: flex; gap: var(--space-1); }
.pager-links a,
.pager-links span { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); text-decoration: none; font-variant-numeric: tabular-nums; }
.pager-links a:hover { background: var(--hover); }
.pager-links [aria-current="page"] { background: var(--action); color: var(--text-on-action); font-weight: var(--weight-semibold); }
@media (max-width: 47.99rem) {
  .pager { padding-inline: var(--space-4); }
  .pager-links a,
  .pager-links span { min-width: var(--tap); min-height: var(--tap); }
}

.back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-medium); text-decoration: none; }
.back-link:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 47.99rem) { .back-link { min-height: var(--tap); } }

/* ==== A master's photo by her name (dashboard/_avatar.html, 2026-10-24) ======================= */
/* The side menu's .avatar circle (and its black circle with the white letter when she has no photo) in two sizes, with
   her Treatwell photo over the letter. In a table row --avatar-sm's margins make it exactly as high as the line and
   vertical-align: top puts it there, so the row never grows for it. */
.avatar--sm,
.avatar--lg { position: relative; width: var(--avatar-size); height: var(--avatar-size); overflow: hidden; line-height: 1; vertical-align: top; user-select: none; }
.avatar--sm { --avatar-size: var(--avatar-sm); margin-block: calc((var(--fs-md) * var(--lh-ui) - var(--avatar-size)) / 2 - 0.01px); margin-right: var(--space-2); font-size: var(--fs-xs); }
/* by the page title it takes its own height (the head is 11 px taller), so it keeps clear of the back link above */
.avatar--lg { --avatar-size: var(--avatar-lg); margin-right: var(--space-3); font-size: var(--fs-lg); }
.page-title:has(> .avatar--lg) { display: flex; align-items: center; }
.avatar-letter { position: absolute; inset: 0; display: grid; place-items: center; }
/* with a photo the letter waits hidden on a light circle (no black flash while it loads); app.js takes away a photo
   that cannot be loaded, and the black circle with the letter shows */
.avatar:has(img) { background: var(--surface-sunken); }
.avatar:has(img) .avatar-letter { visibility: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; outline: var(--border-thin) solid var(--avatar-ring); outline-offset: calc(-1 * var(--border-thin)); }

/* ==== Client card ============================================================================ */

.client-layout { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.client-side,
.client-main { display: grid; gap: var(--space-4); min-width: 0; }
.client-side > .panel + .panel,
.client-main > .panel + .panel { margin-top: 0; }
.client-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.readonly-note { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); }

@media (max-width: 63.99rem) {
  .client-layout { grid-template-columns: minmax(0, 1fr); }
  .client-side { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

/* Klientai's card on a phone, in the family of the Sandėlis cards (the owner, 2026-10-25: "klientai taip pat reikia
   tvarkyti"): the name with its tags and the phone at the right end on the first line (a number says what it is, so
   only "nėra" or a number that cannot be called keeps its "Telefonas"); the last visit with the number of visits; the
   next visit with SMS; Gimtadienis and Rinkodara on the last line (2026-10-25: four lines at 360 px too, SMS had a line
   of its own). The two links are one text line high (no empty space around them); their tap areas reach 13 px above
   and below (44 px). */
@media (max-width: 47.99rem) {
  .data-table--stack.cl-clients tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
  .data-table--stack.cl-clients tbody tr::before { content: ""; order: 6; flex: 0 0 100%; } /* the line break after Vizitų */
  .data-table--stack.cl-clients tbody tr::after { content: ""; order: 9; flex: 0 0 100%; } /* and after SMS */
  .data-table--stack.cl-clients tbody td { width: auto; min-width: 0; line-height: 1.25rem; }
  .data-table--stack.cl-clients tbody td[data-label]::before { line-height: 1; } /* the small label never makes its line taller */
  /* beside the name only the phone fits (up to 13.25rem), never the last visit (the shortest phone and last visit
     together are 14.7rem), so the first line ends after the phone without a line break of its own */
  .data-table--stack.cl-clients td.col-name { order: 1; flex: 1 1 calc(100% - 14rem); }
  .data-table--stack.cl-clients td[data-label="Telefonas"] { order: 2; flex: none; margin-left: auto; }
  .data-table--stack.cl-clients td[data-label="Telefonas"]:has(> a)::before { content: none; }
  .data-table--stack.cl-clients td[data-label="Paskutinis vizitas"] { order: 4; }
  .data-table--stack.cl-clients td[data-label="Vizitų"] { order: 5; }
  .data-table--stack.cl-clients td[data-label="Kitas vizitas"] { order: 7; }
  .data-table--stack.cl-clients td[data-label="SMS"] { order: 8; }
  .data-table--stack.cl-clients td:is([data-label="Gimtadienis"], [data-label="Rinkodara"]) { order: 10; }
  .data-table--stack.cl-clients :is(.row-title, a[href^="tel:"]) { position: relative; display: inline; min-width: 0; min-height: 0; }
  .data-table--stack.cl-clients :is(.row-title, a[href^="tel:"])::after { content: ""; position: absolute; inset: -0.8125rem min(0px, (100% - var(--tap)) / 2); }
  /* the gaps after the name and between the tags, so a tag that wraps starts flush with the name */
  .data-table--stack.cl-clients td.col-name .tag { margin-left: 0; }
  .data-table--stack.cl-clients td.col-name > :not(:last-child) { margin-right: var(--space-1); }
}

/* ==== Calendar (Kalendorius) ================================================================= */
/* Day view: one column per master, 5-minute rows from 08:00 (1.5rem per 15 minutes). The server writes on
   each visit --col (master column, 1-based) and --start / --end (row lines: 1 = 08:00, +1 per 5 min).
   Visits are in time order in the HTML, so on a phone the same list reads as an agenda. */

.cal-summary { padding: var(--space-3) var(--space-5); border-bottom: var(--border-thin) solid var(--line); }

.cal-day {
  --slot: 0.5rem; /* 5 minutes */
  --cal-head: 2.75rem;
  --cal-axis: 3.5rem;
  position: relative;
  max-height: max(32rem, calc(100dvh - 15rem));
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cal-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--cal-axis) repeat(var(--cols), minmax(9.5rem, 1fr));
  grid-template-rows: var(--cal-head) repeat(var(--slots, 156), var(--slot));
  min-width: min-content;
}

.cal-masters { display: contents; }
.cal-master {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: var(--surface-app);
  border-bottom: var(--border-thin) solid var(--line);
  border-left: var(--border-thin) solid var(--line);
  font-size: var(--fs-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.cal-master-count { color: var(--text-muted); font-weight: var(--weight-regular); font-size: var(--fs-sm); }
.cal-corner { grid-row: 1; grid-column: 1; position: sticky; left: 0; top: 0; z-index: 3; background: var(--surface-app); border-bottom: var(--border-thin) solid var(--line); }

.cal-hours { display: contents; }
.cal-hour {
  position: sticky;
  left: 0;
  z-index: 1;
  grid-column: 1;
  grid-row: span 12;
  padding-right: var(--space-2);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transform: translateY(-0.5em);
}
.cal-hour:first-child { transform: none; }

.cal-events {
  grid-column: 2 / -1;
  grid-row: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-image:
    linear-gradient(to bottom, var(--line) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--data-grid) 0 1px, transparent 1px);
  background-size: 100% calc(var(--slot) * 12), 100% calc(var(--slot) * 6);
}
.cal-col-line { grid-row: 1 / -1; border-left: var(--border-thin) solid var(--line); }

/* Overlapping visits in one master's column: the server writes --lane (1..N) and --lanes (N, up to 4) */
.cal-event {
  grid-column: var(--col);
  grid-row: var(--start) / var(--end);
  position: relative;
  justify-self: start;
  width: calc(100% / var(--lanes, 1));
  margin-left: calc((var(--lane, 1) - 1) * 100% / var(--lanes, 1));
  min-width: 0;
  padding: 1px 3px 2px;
}
.cal-event[style*="--lanes: 3"] .cal-service,
.cal-event[style*="--lanes: 4"] .cal-service,
.cal-event[style*="--lanes: 3"] .cal-time-end,
.cal-event[style*="--lanes: 4"] .cal-time-end { display: none; }

.cal-event-btn {
  display: grid;
  align-content: start;
  gap: 1px;
  width: 100%;
  height: 100%;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(24 23 23 / 0.06);
}
.cal-event-btn:hover { border-color: var(--line-strong); }
.cal-time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-name { display: flex; align-items: center; gap: 0.3125rem; font-weight: var(--weight-semibold); font-size: var(--fs-sm); line-height: 1.25; min-width: 0; }
.cal-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-service { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--text-muted); }
.cal-master-name { display: none; color: var(--text-muted); }
.cal-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: 2px; }
.cal-status { font-weight: var(--weight-semibold); }
.cal-flags .tag { min-height: 1.125rem; }

.cal-event[data-tw="cp"] .cal-event-btn,
.cal-event[data-tw="past"] .cal-event-btn { background: var(--surface-app); box-shadow: none; color: var(--text-muted); }
.cal-event[data-tw="cp"] .cal-name,
.cal-event[data-tw="past"] .cal-name { color: var(--text-muted); font-weight: var(--weight-medium); }
.cal-event[data-tw="cc"] .cal-event-btn,
.cal-event[data-tw="rj"] .cal-event-btn { background: transparent; box-shadow: none; border-style: dashed; color: var(--text-muted); }
.cal-event[data-tw="cc"] .cal-name-text,
.cal-event[data-tw="rj"] .cal-name-text { text-decoration: line-through; font-weight: var(--weight-regular); }
.cal-event[data-tw="cc"] .cal-status,
.cal-event[data-tw="rj"] .cal-status { color: var(--text-muted); }
.cal-event[data-tw="ns"] .cal-event-btn { border-color: var(--status-no); background: var(--status-no-tint); box-shadow: none; }
.cal-event[data-tw="ns"] .cal-status { color: var(--status-no); }

/* Short visits (the server writes data-size from the box height in 5-minute rows). The owner's rule: every short box
   shows the name and the service, one line each, cut with an ellipsis, never hidden or half-clipped.
   xs (15 min box, 19 px inside): one line: start time, name, service.
   s (20-35 min, 27-51 px): two lines: start time and name, then the service; 14 + 13 px lines fit the 20 min box.
   m (40-45 min): time, name, one line of service.
   xs and s show the start time only: the box's lower edge marks the end and the popover gives the full time. In a
   column shared by overlapping visits (data-lanes) xs and s drop the time for the name, and m shows the start only.
   Phones keep the agenda list. */
@media (min-width: 48rem) {
  .cal-event[data-size="xs"] .cal-event-btn,
  .cal-event[data-size="s"] .cal-event-btn { align-items: center; align-content: center; column-gap: var(--space-2); row-gap: 0; padding-block: 0; }
  .cal-event[data-size="xs"] .cal-event-btn { grid-template-columns: auto fit-content(40%) minmax(0, 1fr); }
  .cal-event[data-size="s"] .cal-event-btn { grid-template-columns: auto minmax(0, 1fr); }
  .cal-event[data-lanes][data-size="xs"] .cal-event-btn { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
  .cal-event[data-lanes][data-size="s"] .cal-event-btn { grid-template-columns: minmax(0, 1fr); }
  .cal-event[data-size="s"] .cal-service { grid-column: 1 / -1; line-height: 0.8125rem; }
  .cal-event[data-size="xs"] .cal-time,
  .cal-event[data-size="xs"] .cal-name,
  .cal-event[data-size="s"] .cal-time,
  .cal-event[data-size="s"] .cal-name { line-height: 0.875rem; }
  .cal-event[data-size="xs"] .cal-service,
  .cal-event[data-size="s"] .cal-service,
  .cal-event[data-size="m"] .cal-service { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .cal-event[data-size="xs"] .cal-time-end,
  .cal-event[data-size="s"] .cal-time-end,
  .cal-event[data-lanes][data-size="m"] .cal-time-end,
  .cal-event[data-lanes][data-size="xs"] .cal-time,
  .cal-event[data-lanes][data-size="s"] .cal-time,
  .cal-event[data-size="xs"] .cal-flags,
  .cal-event[data-size="s"] .cal-flags,
  .cal-event[data-size="m"] .cal-flags { display: none; }
}

.cal-now { position: absolute; left: var(--cal-axis); right: 0; top: calc(var(--cal-head) + var(--now) / 5 * var(--slot)); z-index: 1; height: 0; border-top: 2px solid var(--brand); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -0.3125rem; top: -0.4375rem; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-round); background: var(--brand); }
.cal-now-label { position: absolute; right: calc(100% + 0.5rem); top: -0.6875rem; padding: 0 var(--space-1); background: var(--surface); color: var(--brand-stronger); font-size: var(--fs-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

.cal-pop { width: min(26rem, calc(100vw - 2rem)); margin: auto; padding: var(--space-5); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-pop); }
.cal-pop::backdrop { background: rgb(24 23 23 / 0.28); }
.cal-pop h2 { font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); padding-right: var(--space-6); }
.cal-pop .figures { margin-top: var(--space-4); }
.cal-pop-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.cal-pop-close { position: absolute; top: var(--space-3); right: var(--space-3); min-width: var(--control); }

@media (max-width: 47.99rem) {
  .cal-summary { padding-inline: var(--space-4); }
  .cal-day { max-height: none; overflow: visible; }
  .cal-grid { display: block; min-width: 0; }
  .cal-corner, .cal-masters, .cal-hours, .cal-col-line, .cal-now { display: none; }
  .cal-events { display: block; background: none; }
  .cal-event { padding: 0; border-top: var(--border-thin) solid var(--line); }
  .cal-event:first-of-type { border-top: 0; }
  .cal-event { width: auto; margin: 0; justify-self: stretch; }
  .cal-event-btn,
  .cal-event[data-size="s"] .cal-event-btn {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas: "time name" ". service" ". master" ". flags";
    column-gap: var(--space-2);
    align-items: start;
    min-height: var(--tap);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--fs-sm);
  }
  .cal-event[data-tw] .cal-event-btn { background: transparent; }
  .cal-time { grid-area: time; font-size: var(--fs-md); font-weight: var(--weight-semibold); color: var(--text); }
  .cal-name { grid-area: name; font-size: var(--fs-md); }
  .cal-service { grid-area: service; }
  .cal-event[data-size] .cal-flags { display: flex; }
  .cal-event[data-size] .cal-service { display: -webkit-box; -webkit-line-clamp: 2; }
  .cal-master-name { grid-area: master; display: block; }
  .cal-flags { grid-area: flags; }
  .cal-time-end { display: none; }
}

/* Week view */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(8.5rem, 1fr)); overflow-x: auto; } /* the 7 days fit next to the sidebar from 1280 px up; narrower windows scroll */
.cal-week-day { min-width: 0; padding: var(--space-3) var(--space-3) var(--space-4); border-left: var(--border-thin) solid var(--line); container-type: inline-size; }
.cal-week-day:first-child { border-left: 0; }
.cal-week-day[aria-current="date"] { background: var(--surface-app); }
.cal-week-day[aria-current="date"] .cal-week-date a::after { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-left: 0.375rem; border-radius: var(--radius-round); background: var(--brand); vertical-align: 0.15em; }
.cal-week-head { display: grid; margin-bottom: var(--space-3); }
.cal-week-date { font-size: var(--fs-md); font-weight: var(--weight-semibold); line-height: 1.3; }
.cal-week-date a { color: inherit; text-decoration: none; }
.cal-week-date a:hover { text-decoration: underline; }
.cal-week-meta { color: var(--text-muted); font-size: var(--fs-xs); }
.cal-week-list > li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-1) 0; border-top: var(--border-thin) solid var(--line); font-size: var(--fs-xs); line-height: 1.35; }
.cal-week-list time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cal-week-list b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.cal-week-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.cal-week-list li[data-tw="cc"] b { text-decoration: line-through; font-weight: var(--weight-regular); color: var(--text-muted); }
.cal-week-more { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
/* a narrow day column (1280-1700 px windows): the time goes above the name, so names are not cut */
@container (max-width: 10rem) {
  .cal-week-list > li { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.99rem) {
  .cal-week { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .cal-week-day { border-left: 0; padding: var(--space-4); border-top: var(--border-thin) solid var(--line); }
  .cal-week-day:first-child { border-top: 0; }
  .cal-week-list > li { font-size: var(--fs-sm); padding: var(--space-2) 0; }
  .cal-week-date a,
  .cal-week-more a { display: inline-flex; align-items: center; min-height: var(--tap); }
}


/* ==== Settings: forms for the manager (Nustatymai) =========================================== */
/* A settings page is a stack of panels. Inside a panel each setting is a row: the label and a
   plain-language help text on the left, the control on the right. One save bar per form. */

.settings-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); display: grid; gap: 0.125rem; }
.settings-nav a { display: flex; align-items: center; gap: var(--space-2); min-height: 2.125rem; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: var(--weight-medium); text-decoration: none; }
.settings-nav a:hover { background: var(--hover); color: var(--text); }
.settings-nav a[aria-current="page"],
.settings-nav a[aria-current="true"] { background: var(--selected); color: var(--text); font-weight: var(--weight-semibold); }
.settings-main { display: grid; gap: var(--space-4); min-width: 0; }
.settings-main > .panel + .panel { margin-top: 0; }

@media (max-width: 63.99rem) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--space-1); }
  .settings-nav a { white-space: nowrap; min-height: var(--tap); }
}

.form-rows > .form-row + .form-row { border-top: var(--border-thin) solid var(--line); }
/* several row groups in one panel (e.g. common fields, then one provider's fields): a rule between
   the visible groups; [hidden] groups are display: none, so the next visible one still gets it */
.form-rows + .form-rows:not([hidden]) { border-top: var(--border-thin) solid var(--line); }
.form-row {
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) var(--space-5);
}
.form-row-label { display: grid; gap: var(--space-1); align-content: start; }
/* the label's first line sits level with the text inside a 36 px control next to it; rows that start
   with a switch or a line of text get the same offset */
.form-row-label .field-label { line-height: 1.25rem; }
.form-row-label { padding-top: calc((var(--control) - 1.25rem) / 2); }
.form-row-control > .switch:first-child,
.form-row-control > .secret-state:first-child,
.form-row-control > p:first-child:not(.field-error):not(.secret-state):not(.stat-value) { margin-top: calc((var(--control) - 1.25rem) / 2); }
/* a big figure as the value (SMS balance): centred on the label like a 36 px control */
.form-row-control > .stat-value:first-child { line-height: var(--control); }
.form-row-label .field-label { font-weight: var(--weight-semibold); }
.form-row-help { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); max-width: 46ch; }
.form-row-control { display: grid; gap: var(--space-2); align-content: start; min-width: 0; max-width: 40rem; }
.form-row-control .field-input { max-width: 28rem; }
.form-row-control .field-input--wide,
.form-row-control textarea.field-input { max-width: none; }
.form-row--stack { grid-template-columns: minmax(0, 1fr); }
.form-row--stack .form-row-control { max-width: none; }

@media (max-width: 47.99rem) {
  .form-row { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .form-row-label { padding-top: 0; }
  .form-row-control > .switch:first-child,
  .form-row-control > .secret-state:first-child,
  .form-row-control > p:first-child:not(.field-error):not(.secret-state) { margin-top: 0; }
}

/* Inline controls: time ranges, numbers with a unit */
.inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inline-fields .field-input { width: auto; }
.inline-fields .sep { color: var(--text-muted); }
.input-unit { display: inline-flex; align-items: stretch; max-width: 100%; }
.input-unit .field-input { width: 6rem; border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-variant-numeric: tabular-nums; }
.input-unit-suffix { display: inline-flex; align-items: center; padding: 0 var(--space-3); border: var(--border-thin) solid var(--line-strong); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-app); color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }

/* Radio and checkbox choices: one per line, the whole row is the target */
.choice-group { display: grid; gap: var(--space-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.choice input { width: 1rem; height: 1rem; margin: 0.15rem 0 0; accent-color: var(--action); }
.choice-title { font-weight: var(--weight-medium); }
.choice-help { grid-column: 2; color: var(--text-muted); font-size: var(--fs-sm); }
.choice-group--inline { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 47.99rem) {
  .choice { min-height: var(--tap); align-items: center; }
  .choice-help { padding-bottom: var(--space-1); }
}

/* Switch: a real checkbox with a visible state word */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: var(--radius-round);
  background-color: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-round);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(24 23 23 / 0.2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch input:checked { background-color: var(--status-yes); }
.switch input:checked::after { transform: translateX(1rem); }
.switch input:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.switch input:disabled { opacity: 0.5; cursor: not-allowed; }
.switch-label { font-weight: var(--weight-medium); }
.switch-state { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 47.99rem) {
  .switch { min-height: var(--tap); }
  /* a 44 px hit area around the same-looking track */
  .switch input { box-sizing: content-box; padding: 0.75rem 0.25rem; background-clip: content-box; }
  .switch input::after { top: calc(0.75rem + 2px); left: calc(0.25rem + 2px); }
  .error-summary a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* Who changed what and when: "Sustabdė Rasa, spalio 5 d. 09:12" */
.audit { color: var(--text-muted); font-size: var(--fs-sm); }
.audit strong { color: var(--text); font-weight: var(--weight-medium); }

/* Secret fields: shown as set, never echoed back */
.secret-state { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* Save bar: sticks to the bottom of the viewport while a form has changes */
.save-bar {
  position: static;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgb(24 23 23 / 0.06);
}
.save-bar:has(.save-bar-status--dirty) { position: sticky; }
.save-bar-status { margin-right: auto; color: var(--text-muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--space-2); }
.save-bar-status--dirty { color: var(--status-wait-ink); font-weight: var(--weight-medium); }
.save-bar-status--saved { color: var(--status-yes); font-weight: var(--weight-medium); }
@media (max-width: 47.99rem) {
  .save-bar { padding-inline: var(--space-4); }
  .save-bar .btn { flex: 1; }
}

/* Error summary at the top of a form */
.error-summary { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--status-no-tint); color: var(--text); }
.error-summary-title { font-weight: var(--weight-semibold); color: var(--status-no); }
.error-summary ul { display: grid; gap: var(--space-1); padding-left: var(--space-4); list-style: disc; }
.error-summary a { color: var(--status-no); }

/* Confirmation dialog: native popover, the action is a POST form inside */
.confirm {
  width: min(30rem, calc(100vw - 2rem));
  margin: auto;
  padding: var(--space-5);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.confirm::backdrop { background: rgb(24 23 23 / 0.32); }
.confirm-title { font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.confirm-text { margin-top: var(--space-2); color: var(--text-muted); line-height: var(--lh-text); }
.confirm-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.confirm-form .confirm-actions { margin-top: var(--space-1); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.btn--danger { background: var(--status-no); border-color: var(--status-no); color: var(--text-on-brand); }
.btn--danger:hover { background: var(--status-no); border-color: var(--status-no); filter: brightness(0.92); }

/* Info hint: an (i) button after a table heading (dashboard/_hint_btn.html), its short text in a popover under it.
   app.js places it and opens it on hover, keyboard focus and a click or tap. The icon keeps the heading's line
   height: its box (24 px, a 44 px tap box on phones) reaches outside the line by negative margins, the icon sits 4 px
   after the word and its right edge on the column's edge, like the numbers under it. 0.75 px more margin on top than
   below: the circle's centre on the text's (between x-height and caps), measured at 1x from 1024 to 3440 px. */
.hint-head { white-space: nowrap; } /* the last word and its icon never part */
.hint-btn {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.421875rem -0.3125rem -0.328125rem -0.0625rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--text-muted);
  vertical-align: middle;
  cursor: pointer;
}
.hint-btn .icon { width: 0.875rem; height: 0.875rem; }
.hint-btn:hover,
.hint-btn[aria-expanded="true"] { color: var(--text); }
.hint-btn:focus-visible { outline-offset: -0.25rem; } /* the ring close round the icon, clear of the word */
@media (max-width: 47.99rem) {
  .hint-btn { width: var(--tap); height: var(--tap); margin: -1.046875rem -0.9375rem -0.953125rem -0.6875rem; }
  .hint-btn:focus-visible { outline-offset: -0.875rem; }
}
.hint {
  width: max-content;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  text-wrap: pretty;
}

/* Big state block: the sending switch, a flow's state */
.state-block { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); }
.state-block-text { display: grid; gap: var(--space-1); margin-right: auto; min-width: 0; }
.state-block-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
.state-block--stopped { background: var(--status-no-tint); }
.state-block--test { background: var(--status-wait-tint); }
@media (max-width: 47.99rem) {
  .state-block { padding-inline: var(--space-4); }
  .state-block .btn { width: 100%; }
}

/* ==== Flows and the template editor (Srautai ir tekstai) ==================================== */

/* ==== Flow list ============================================================================== */

.flow-name { display: grid; gap: 0.125rem; min-width: 14rem; }
.flow-name a { color: var(--text); font-weight: var(--weight-semibold); text-decoration: none; }
.flow-name a:hover { text-decoration: underline; }
.flow-when { color: var(--text-muted); font-size: var(--fs-sm); }
.flow-state { display: grid; gap: 0.25rem; justify-items: start; }
.flow-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.flow-counts { white-space: nowrap; }
.flow-counts span { color: var(--text-muted); }

/* ==== Salon-made flows ======================================================================= */

/* Srautai table: the salon's own flows follow the built-in ones under a group row that reads like the table head */
.data-table-group th { padding-block: 0.625rem; border-top: var(--border-thin) solid var(--line); background: var(--surface-app); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-medium); }
@media (max-width: 47.99rem) {
  .data-table--stack tr.data-table-group { padding: 0; border-bottom: 0; }
  .data-table--stack .data-table-group th { display: block; padding: var(--space-2) var(--space-4); }
}

/* "Kada": a number with its unit chosen next to it (val. / d.) */
.input-unit .input-unit-select { width: auto; border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Fields that follow the chosen trigger (_flow_when_panel.html), CSS only: [data-for-trigger] shows for the listed
   triggers, [data-needs-trigger] once one is chosen, [data-days-only] when the timing is in days */
form:has(.trigger-choices):not(:has(.trigger-choices :checked)) :is([data-needs-trigger], [data-for-trigger]) { display: none; }
form:has(.trigger-choices [value="before_visit"]:checked) [data-for-trigger]:not([data-for-trigger~="before_visit"]),
form:has(.trigger-choices [value="after_visit"]:checked) [data-for-trigger]:not([data-for-trigger~="after_visit"]),
form:has(.trigger-choices [value="no_visit"]:checked) [data-for-trigger]:not([data-for-trigger~="no_visit"]),
form:has(.trigger-choices [value="birthday"]:checked) [data-for-trigger]:not([data-for-trigger~="birthday"]),
form:has(.trigger-choices [value="booked"]:checked) [data-for-trigger]:not([data-for-trigger~="booked"]) { display: none; }
form:has(.trigger-choices :is([value="before_visit"], [value="after_visit"], [value="booked"]):checked):has(.input-unit-select option[value="hours"]:checked) [data-days-only] { display: none; }
form:has(.input-unit-select option[value="days"]:checked) [data-hours-only] { display: none; }
/* a row that only matters for a marketing message (e.g. the gap between marketing messages) follows "Reklaminė žinutė" */
form:has(input[name="is_marketing"]:not(:checked)) [data-needs-marketing] { display: none; }

/* Delete: apart from the settings, at the end of the page */
.flow-delete { margin-top: var(--space-6); }
.flow-delete .state-block-text { gap: 0.125rem; }

/* ==== Template editor: text on the left, phone preview on the right ========================= */

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-5); padding: var(--space-4) var(--space-5); }
.editor-main { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.editor-vars { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.editor-vars-label { width: 100%; color: var(--text-muted); font-size: var(--fs-sm); }
.editor-var {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-app);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.editor-var:hover { border-color: var(--line-strong); background: var(--surface); }
textarea.editor-input { min-height: 7.5rem; font-size: var(--fs-md); line-height: var(--lh-text); }
.editor-suffix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.editor-suffix code { color: var(--text); font-family: inherit; font-weight: var(--weight-medium); }

/* Live counter: the figures the manager needs before saving */
.editor-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-app); font-size: var(--fs-sm); }
.editor-count-parts { font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
.editor-count dt { color: var(--text-muted); }
.editor-count dl { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; }
.editor-count dl div { display: inline-flex; gap: var(--space-1); }
.editor-count dd { margin: 0; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.editor-note { color: var(--text-muted); font-size: var(--fs-xs); }

/* Phone preview: the message as the client sees it, with the longest name filled in */
.phone {
  align-self: start;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-5);
  border: var(--border-thin) solid var(--line);
  border-radius: 1.5rem;
  background: var(--surface-app);
}
.phone-head { display: grid; justify-items: center; gap: 0.125rem; padding-bottom: var(--space-2); border-bottom: var(--border-thin) solid var(--line); text-align: center; }
.phone-sender { font-size: var(--fs-sm); font-weight: var(--weight-semibold); }
.phone-meta { color: var(--text-muted); font-size: var(--fs-xs); }
.phone-bubble {
  max-width: 92%;
  padding: var(--space-2) var(--space-3);
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--surface);
  border: var(--border-thin) solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.phone-caption { color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }

/* E-mail preview */
.mail-preview { align-self: start; display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-thin) solid var(--line); border-radius: var(--radius-md); background: var(--surface-app); font-size: var(--fs-sm); }
.mail-preview-subject { font-weight: var(--weight-semibold); }
.mail-preview-from { color: var(--text-muted); font-size: var(--fs-xs); }
.mail-preview-body { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-text); }

/* Test send */
.test-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5); }
.test-send + .test-send { border-top: var(--border-thin) solid var(--line); }
.test-send-text { margin-right: auto; display: grid; gap: 0.125rem; }
.test-send-text strong { font-weight: var(--weight-semibold); }
.test-send .notice { width: 100%; }

@media (max-width: 63.99rem) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .phone { max-width: 22rem; }
}
@media (max-width: 47.99rem) {
  .editor { padding-inline: var(--space-4); }
  .editor-var { min-height: var(--tap); padding-inline: var(--space-3); }
  .test-send { padding-inline: var(--space-4); }
  .test-send .btn { width: 100%; }
  .flow-actions { justify-content: flex-start; }
  .flow-name a { display: inline-flex; align-items: center; min-height: var(--tap); }
}


/* ==== Sending control (Siuntimas) ============================================================ */

.sending-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.sending-grid > .panel + .panel { margin-top: 0; }
.sending-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); border-top: var(--border-thin) solid var(--line); }
.sending-list > li:first-child { border-top: 0; }
.sending-row-name { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--text); font-weight: var(--weight-medium); text-decoration: none; }
a.sending-row-name:hover { text-decoration: underline; }
.sending-notice { margin: var(--space-4) var(--space-5) 0; }
.inline-fields .sending-port { width: 6rem; }
@media (max-width: 63.99rem) { .sending-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) {
  .sending-list > li { padding-inline: var(--space-4); }
  .sending-notice { margin-inline: var(--space-4); }
  a.sending-row-name { min-height: var(--tap); }
}


/* ==== Lists: NE replies, birthdays, opt-outs (merged from staging/lists.css) ================= */

/* ==== NE reply: a call-list row plus the client's own words ================================== */
/* li.call.call--reply reuses the call list (ol.calls inside .calls-wrap) so the admin sees the same
   appointment-book line as on Skambučiai; under it sits her reply as an incoming SMS bubble.
   data-status="no" = nesutvarkyta, data-status="yes" = sutvarkyta.                              */

.call--reply {
  grid-template-areas:
    "time who"
    ".    service"
    ".    reply"
    ".    phone"
    ".    actions"
    ".    note";
}

.reply-message {
  grid-area: reply;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
/* the bubble is as wide as the message, like on her phone: "Ne" stays small */
.reply-quote {
  margin-top: 0;
  width: fit-content;
  max-width: 60ch;
}
.reply-received { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }

/* "Skambinti" is written on the big phone button; on wider screens the number alone is the link */
.call--reply .call-phone a { gap: var(--space-2); }
.reply-call-word { font-weight: var(--weight-medium); }

.reply-state-form { display: flex; flex: 1 1 100%; }
.reply-state-form .btn { width: 100%; }
/* undo ("Grąžinti") stays a quiet text button at the start of the line */
.reply-state-form .btn--quiet { width: auto; padding-inline: var(--space-3); }

/* Narrow container: the phone is one big button. app.css turns every tel: link on phones into
   inline-flex, which would shrink-wrap it, so the full-width block is set again here. */
@container calls (max-width: 35.99rem) {
  .call--reply .call-phone a { display: flex; width: 100%; padding-inline: var(--space-3); }
  /* the name link keeps its 44 px tap area without pushing the state line away from the name */
  .call--reply .call-name-line { min-height: 0; }
  .call--reply .call-name a { margin-block: calc((var(--tap) - 1.3em) / -2); }
}

@container calls (min-width: 36rem) {
  .call--reply { grid-template-areas: none; }
  .reply-message { grid-area: auto; grid-column: who / -1; grid-row: 3; padding-left: 1.25rem; }
  .call--reply .call-note-text { grid-row: 4; }

  .reply-call-word {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  .reply-state-form { flex: none; }
  .reply-state-form .btn { width: auto; min-height: 2.25rem; padding-inline: var(--space-3); font-size: var(--fs-sm); }
}

@container calls (min-width: 62rem) {
  /* several day blocks on one page: fixed tracks keep the columns in line from block to block */
  .calls--aligned {
    grid-template-columns:
      [time] 3.75rem
      [who] minmax(12rem, 22rem)
      [phone] 9.5rem
      [service] minmax(12rem, 30rem)
      [actions] max-content
      [rest] minmax(0, 1fr);
  }
  .reply-message { grid-column: who / actions; grid-row: 2; margin-top: var(--space-1); }
  .call--reply .call-note-text { grid-row: 3; }
}

/* ==== Empty state: nothing to do here, and where to go instead ================================ */

.empty-state {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-6);
  border-top: var(--border-thin) solid var(--line);
}
.empty-state > * { max-width: 40rem; }
/* inside a panel: the panel's own side padding, no extra rule on top */
.panel .empty-state { padding: var(--space-5) var(--space-5) var(--space-6); border-top: 0; }
.panel > .empty-note,
.panel > section > .empty-note { padding: var(--space-5); }
@media (max-width: 47.99rem) {
  .panel .empty-state { padding-inline: var(--space-4); }
  .panel > .empty-note,
  .panel > section > .empty-note { padding: var(--space-4); }
}
.empty-state-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
}
.empty-state-text { color: var(--text-muted); line-height: var(--lh-text); padding-left: calc(0.75rem + var(--space-3)); }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-left: calc(0.75rem + var(--space-3)); }
@media (max-width: 47.99rem) {
  .empty-state-text,
  .empty-state-actions { padding-left: 0; }
  .empty-state-actions .btn { width: 100%; }
}

/* ==== Birthdays: table.data-table.bday-table ================================================= */
/* The one rule the team must remember sits next to the page title; the visit column carries it:
   filled green dot = she comes this week, the gift is given on arrival; empty dot = no visit.     */

.bday-rule { max-width: 75ch; color: var(--text); }
.bday-rule strong { font-weight: var(--weight-semibold); }

.bday-day { font-weight: var(--weight-medium); }
.bday-table tr[aria-current="date"] .bday-day { font-weight: var(--weight-semibold); }
.bday-age { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }

.bday-gift { color: var(--status-yes); font-weight: var(--weight-semibold); }
.bday-none { color: var(--text-muted); }
.bday-when { color: var(--text); font-weight: var(--weight-regular); }

/* sub lines start under the word, not under the dot */
.bday-table .status ~ .row-sub { padding-left: 1rem; }
.bday-table .bday-visit .row-sub { padding-left: 1.25rem; }

@media (max-width: 47.99rem) {
  .bday-table .bday-date { color: var(--text-muted); font-size: var(--fs-sm); }
  .bday-table .bday-date .row-sub { display: inline; font-size: inherit; }
  .bday-table tr[aria-current="date"] .bday-day { color: var(--text); }
  .bday-table .bday-visit { padding-block: var(--space-1); }
}

/* ==== Data screens: surveys, SMS log, system status (merged from staging/data.css) ========== */

/* ==== Status dot: one more state ============================================================= */
/* Sent, waiting for the delivery report: the green ring (ring = in progress, fill = done). */
.dot--sent { border-color: var(--status-yes); }

/* ==== Charts: shared parts =================================================================== */

.chart { min-width: 0; margin: 0; }
.chart-head { margin-bottom: var(--space-3); }
.chart-title { font-size: var(--fs-lg); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.chart-note { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); max-width: 70ch; }
.chart-title + .chart-note { margin-top: var(--space-1); }
.chart-note + .chart { margin-top: var(--space-5); }

/* The table twin of every chart: closed by default, one click away */
.chart-table { margin-top: var(--space-3); }
.chart-table > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  color: var(--text-link);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.chart-table > summary:hover,
.chart-table[open] > summary { background: var(--brand-tint); }
.chart-table .data-table { margin-top: var(--space-2); font-size: var(--fs-sm); }
.chart-table .data-table th,
.chart-table .data-table td { padding-block: var(--space-1); }
.chart-table .data-table thead th { position: static; }

/* Bars with long category names: the name sits above its bar (the "Kodėl negrįžote?" reasons) */
.bars--stacked { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 0; }
.bars--stacked dt { grid-column: 1 / -1; padding-top: var(--space-3); color: var(--text); font-size: var(--fs-md); }
.bars--stacked dt:first-of-type { padding-top: 0; }
.bars--stacked .bar { margin-top: var(--space-1); }
.bars--stacked .bar-value { margin-top: var(--space-1); }
.bar-share { color: var(--text-muted); }

/* ---- Line chart: one series over weeks. The line is SVG (stretched, non-scaling stroke); the
        points, labels and grid are HTML placed with --x / --y in %, so text never scales. ----- */
.chart-plot {
  position: relative;
  height: calc(var(--space-8) * 2.5);
  margin: var(--space-5) 0 0 var(--space-7);
}
.chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--y);
  border-top: var(--border-thin) solid var(--data-grid);
}
.chart-gridline > span {
  position: absolute;
  right: 100%;
  top: 0;
  transform: translateY(-50%);
  padding-right: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.chart-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-line polyline {
  fill: none;
  stroke: var(--data-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* The point: a 24 px hit area around an 10 px dot with a 2 px surface ring */
.chart-point {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--space-5);
  height: var(--space-5);
  transform: translate(-50%, 50%);
  border-radius: var(--radius-round);
  outline-offset: 0;
}
.chart-point::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-round);
  background: var(--data-1);
  box-shadow: 0 0 0 2px var(--surface);
  transition: transform var(--dur-fast) var(--ease-out);
}
.chart-point:hover::before,
.chart-point:focus-visible::before { transform: scale(1.3); }
.chart-point-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  line-height: 1;
}
.chart-tip {
  display: none;
  position: absolute;
  z-index: 2;
  bottom: calc(100% + var(--space-1));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.chart-tip strong { display: block; font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.chart-tip span { color: var(--text-muted); }
.chart-point:hover .chart-tip,
.chart-point:focus-visible .chart-tip { display: block; }
.chart-point:hover .chart-point-label,
.chart-point:focus-visible .chart-point-label { visibility: hidden; }
/* the last point's tooltip opens to the left so it never leaves the plot */
.chart-point:last-of-type .chart-tip { left: auto; right: 0; transform: none; }

.chart-xaxis {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: var(--space-2) 0 0 var(--space-7);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Dot plot inside a table: an average on a short scale, the number in the next column ---- */
.chart-scale {
  position: relative;
  display: block;
  min-width: 8rem;
  height: 1em;
}
.chart-scale > span { position: absolute; top: 0; transform: translateX(-50%); }
.chart-scale > span:first-child { transform: none; }
.chart-scale > span:last-child { transform: translateX(-100%); }
.chart-track {
  position: relative;
  display: block;
  min-width: 8rem;
  height: 1.25rem;
}
.chart-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: var(--border-thin) solid var(--data-grid);
}
.chart-track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 20%;
  border-left: var(--border-thin) solid var(--data-grid);
}
.chart-mark {
  position: absolute;
  z-index: 1;
  left: var(--pos);
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-round);
  background: var(--data-1);
  box-shadow: 0 0 0 2px var(--surface);
}
/* fewer than 5 answers: a ring, the average is not reliable yet */
.chart-mark--few { background: var(--surface); border: 2px solid var(--data-1); }

.chart-dots td { vertical-align: middle; }
.chart-dots .chart-dots-track { width: 40%; }
.chart-dots-sub th {
  padding-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
}
.chart-dots tbody tr.chart-dots-sub:hover { background: transparent; }

/* ==== Anketos (survey results) =============================================================== */

/* Main column + the "Kodėl negrįžote?" column, like the overview */
.survey-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-col);
  gap: var(--space-6);
  align-items: start;
}
.survey-main { min-width: 0; container: survey / inline-size; }
.survey-side {
  min-width: 0;
  align-self: stretch;
  padding-left: var(--space-6);
  border-left: var(--border-thin) solid var(--line);
}
.survey-block + .survey-block { margin-top: var(--space-7); }

/* The one number this page leads with */
.survey-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-5); }
.survey-avg {
  font-size: calc(var(--fs-2xl) * 1.75);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.survey-avg-text { color: var(--text-muted); line-height: var(--lh-text); }
.survey-avg-text strong { color: var(--text); font-weight: var(--weight-semibold); }

.survey-charts { display: grid; gap: var(--space-7) var(--space-7); align-items: start; }
.survey-range { color: var(--text-muted); font-size: var(--fs-sm); }

@container survey (min-width: 44rem) {
  .survey-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .survey-groups { grid-column: 1 / -1; }
}
@container survey (min-width: 100rem) {
  .survey-charts { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.5fr); }
  .survey-groups { grid-column: auto; }
}

/* Comments: score ring, the client's words, group and date (never the master: see the page note) */
.answers > li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--line);
}
.answers > li:first-child { border-top: 0; padding-top: 0; }
.answers .score { margin-top: var(--space-2); }
.answers .item-quote { margin-top: 0; max-width: 70ch; }
.answers .item-meta { margin-top: var(--space-1); }
.answer--low .item-quote { background: var(--status-no-tint); }
.answers--plain > li { grid-template-columns: minmax(0, 1fr); }

@container survey (min-width: 64rem) {
  .answers--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); column-gap: var(--space-7); }
  .answers--cols > li:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
}
@container survey (min-width: 100rem) {
  .answers--cols > li:nth-child(3) { border-top: 0; padding-top: 0; }
}

.survey-anon { margin-bottom: var(--space-4); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); max-width: 70ch; }

@media (min-width: 140rem) {
  .survey-layout { grid-template-columns: minmax(0, 1fr) calc(var(--side-col) * 1.25); }
}
@media (max-width: 79.99rem) {
  .survey-layout { grid-template-columns: minmax(0, 1fr); }
  .survey-side { padding: var(--space-6) 0 0; border-left: 0; border-top: var(--border-thin) solid var(--line); }
}
@media (max-width: 47.99rem) {
  .survey-filters .toolbar-field { flex-wrap: wrap; }
  .survey-filters .toolbar-field .field-label { width: 100%; }
  .survey-avg { font-size: calc(var(--fs-2xl) * 1.5); }
  .chart-table > summary { min-height: var(--tap); }
  .chart-dots .chart-dots-track { width: 30%; }
  .chart-scale,
  .chart-track { min-width: 4.5rem; }
}

/* ==== SMS žurnalas (log) ===================================================================== */

/* Month totals written as a sentence, not tiles */
.log-month { max-width: 80ch; line-height: var(--lh-text); }
.log-month strong { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.log-month-prev { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); }
.log-month + .panel,
.log-month-prev + .panel { margin-top: var(--space-4); } /* the month summary sits above the log, not on it */

/* One row of filters, labels above the fields */
.log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0 var(--space-4);
}
.log-filters .field-label { font-weight: var(--weight-medium); color: var(--text-muted); }
/* fields are 36 px like the buttons next to them; phones get 44 px from the global phone rule */
.log-filters input[type="date"] { width: auto; }
.log-filter-phone { flex: 1 1 12rem; max-width: 16rem; }
.log-filter-actions { display: flex; gap: var(--space-2); }

.log-result { margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* Table columns */
.log-table .log-time { width: 4.5rem; font-size: var(--fs-md); font-weight: var(--weight-semibold); white-space: nowrap; }
/* the phone number (or e-mail) sits under the client's name, so the table keeps one column less */
.log-table td .log-contact { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.log-table .log-flow { white-space: nowrap; }
.log-table .log-msg-cell { width: 38%; min-width: 16rem; }
.log-table td .row-sub { max-width: 22ch; white-space: normal; }

/* Day groups */
.log-table tbody tr.log-day:hover { background: transparent; }
.log-day th {
  padding-top: var(--space-5);
  border-bottom-color: var(--line-strong);
  font-size: var(--fs-md);
  font-weight: var(--weight-semibold);
}
.log-day th span { color: var(--text-muted); font-weight: var(--weight-regular); }
.log-table tbody:first-of-type .log-day th { padding-top: var(--space-3); }

/* The moment the sending mode changed: the one loud line in the log */
.log-table tbody tr.log-event:hover { background: transparent; }
.log-event td {
  padding: var(--space-2) var(--space-3);
  background: var(--mode-test-bg);
  border-top: var(--border-thin) solid var(--mode-test-edge);
  border-bottom: var(--border-thin) solid var(--mode-test-edge);
  color: var(--mode-test-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-text);
}
.log-event strong { font-weight: var(--weight-bold); }
.log-event a { color: var(--mode-test-ink); }
.log-event .dot { margin-right: var(--space-1); }

/* Status words take the status colour; the dot sits next to them */
.log-state--failed { color: var(--status-no); font-weight: var(--weight-semibold); }
.log-state--queued { color: var(--status-wait-ink); font-weight: var(--weight-semibold); }
.log-state--test { color: var(--text-muted); }

/* The message: one line, the whole text and its length on demand */
.log-msg > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.log-msg > summary::-webkit-details-marker { display: none; }
.log-msg-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.log-msg > summary::after {
  content: "Visa";
  flex: none;
  color: var(--text-link);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
}
.log-msg > summary:hover::after { text-decoration: underline; }
.log-msg[open] > summary::after { content: "Suskleisti"; }
.log-msg[open] .log-msg-text {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--lh-text);
}
.log-msg[open] > summary { align-items: flex-start; }
.log-msg-meta { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-xs); }

/* Phone: each message becomes a block (time on the left, like the call list) */
@media (max-width: 47.99rem) {
  .log-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Srautas and Būsena full width, then Nuo and Iki side by side (a hidden input may come first) */
  .log-filters > .field:nth-child(-n + 2 of .field),
  .log-filter-phone { grid-column: 1 / -1; max-width: none; }
  .log-filters input[type="date"] { width: 100%; }
  /* a date field must not push its half of the row past the panel edge */
  .log-filters > .field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .log-filter-actions { grid-column: 1 / -1; }
  .log-filter-actions .btn { flex: 1; }

  .log-table tr.log-row {
    display: grid;
    grid-template-columns: 3.5rem max-content minmax(0, 1fr);
    grid-template-areas:
      "time who    who"
      ".    status status"
      ".    flow   flow"
      ".    parts  price"
      ".    msg    msg";
    column-gap: var(--space-3);
  }
  .log-table .log-row > td { width: auto; min-width: 0; }
  .log-table .log-row > .log-time { grid-area: time; margin: 0; font-size: var(--fs-lg); line-height: var(--tap); } /* level with the name, whose link is a 44 px tap target */
  .log-table .log-row > .log-who { grid-area: who; }
  .log-table .log-row > .log-status { grid-area: status; padding-block: var(--space-1); }
  .log-table .log-row > .log-flow { grid-area: flow; }
  .log-table .log-row > .log-parts { grid-area: parts; }
  .log-table .log-row > .log-price { grid-area: price; }
  .log-table .log-row > .log-msg-cell { grid-area: msg; padding-top: var(--space-2); }
  .log-table .log-row .row-title { min-height: var(--tap); line-height: 1.3; display: inline-flex; align-items: center; }
  .log-table td .row-sub { max-width: none; }
  .log-table tr.log-day { padding: var(--space-5) 0 var(--space-2); border-bottom: var(--border-thin) solid var(--line-strong); }
  .log-table tr.log-day th { display: block; padding: 0; border: 0; }
  .log-table tr.log-event { padding: 0; border: 0; }
  .log-table tr.log-event td { padding: var(--space-3); }
  .log-msg > summary { min-height: var(--tap); align-items: center; }
  .log-msg[open] > summary { flex-direction: column; align-items: stretch; }
  .log-msg[open] > summary::after { align-self: flex-start; }
}

/* ==== Sistemos būsena (status) =============================================================== */

/* One calm sentence when everything works */
.sync-summary {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  max-width: 80ch;
  margin-bottom: var(--space-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-text);
}
.sync-summary strong { font-weight: var(--weight-semibold); }

/* The ledger: what | state | details, one ruled row per part of the system */
.sync-board { border-top: var(--border-thin) solid var(--line-strong); }
.sync-row {
  display: grid;
  grid-template-columns: 13rem 11rem minmax(0, 72ch);
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: var(--border-thin) solid var(--line);
}
.sync-name { font-size: var(--fs-md); font-weight: var(--weight-semibold); line-height: var(--lh-ui); }
.sync-state { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); line-height: var(--lh-ui); }
.sync-state--yes { color: var(--status-yes); }
.sync-state--wait { color: var(--status-wait-ink); }
.sync-state--no { color: var(--status-no); }
.sync-state--none { color: var(--text-muted); font-weight: var(--weight-medium); }
.sync-detail { display: grid; gap: var(--space-2); line-height: var(--lh-text); }
.sync-detail .item-meta { line-height: var(--lh-text); }
.sync-detail h3 { margin-top: var(--space-2); font-size: var(--fs-md); font-weight: var(--weight-semibold); }

/* The sending mode row: BANDOMASIS is loud on purpose (same colours as the mode band) */
.sync-row--test {
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  background: var(--mode-test-bg);
  border-bottom-color: var(--mode-test-edge);
  box-shadow: inset 0 var(--border-thin) 0 var(--mode-test-edge);
}
.sync-row--test .sync-detail { color: var(--mode-test-ink); }
.sync-row--test .item-meta { color: var(--mode-test-ink); }
.sync-row--no { box-shadow: inset 3px 0 0 var(--status-no); margin-left: calc(-1 * var(--space-4)); padding-left: var(--space-4); }

.sync-modes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); }
.sync-modes dt { font-weight: var(--weight-semibold); }

.sync-switch { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-2); padding-top: var(--space-3); border-top: var(--border-thin) solid var(--mode-test-edge); }
.sync-confirm { display: flex; gap: var(--space-3); align-items: flex-start; line-height: var(--lh-text); cursor: pointer; }
.sync-confirm input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--brand-strong);
}

/* Runs and errors side by side on wide screens */
.sync-columns { display: grid; gap: var(--space-7); margin-top: var(--space-7); align-items: start; }
@media (min-width: 64rem) {
  .sync-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.sync-runs .row-sub { white-space: normal; }
.sync-runs tr[data-result="error"] td { background: var(--status-no-tint); }
.sync-runs tbody tr[data-result="error"]:hover td { background: var(--status-no-tint); }

.sync-errors > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: var(--border-thin) solid var(--line); }
.sync-errors > li:first-child { border-top: 0; padding-top: 0; }
.sync-errors time { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--lh-ui); }
.sync-errors .item-title { font-weight: var(--weight-semibold); }
.sync-errors p { line-height: var(--lh-text); }
.sync-error-state { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* Something is broken: the alert opens the page and can't be missed */
.sync-alert {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--status-no-tint);
  box-shadow: inset 0 calc(var(--border-thin) * 4) 0 var(--status-no);
  border-radius: var(--radius-sm);
  max-width: 80rem;
}
.sync-alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--status-no);
  font-size: var(--fs-xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}
.sync-alert-title .dot { width: var(--space-4); height: var(--space-4); }
.sync-alert-lead { margin-top: var(--space-3); font-size: var(--fs-lg); line-height: var(--lh-text); max-width: 72ch; }
.sync-steps { margin-top: var(--space-4); padding-left: var(--space-5); list-style: decimal; line-height: var(--lh-text); max-width: 72ch; }
.sync-steps li + li { margin-top: var(--space-2); }
.sync-steps li::marker { font-weight: var(--weight-semibold); }

@media (max-width: 63.99rem) {
  .sync-row { grid-template-columns: 11rem minmax(0, 1fr); }
  .sync-detail { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .sync-summary { font-size: var(--fs-md); }
  .sync-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .sync-alert { padding: var(--space-4); }
  .sync-alert-lead { font-size: var(--fs-md); }
  .sync-switch .btn { width: 100%; }
  .sync-errors > li { grid-template-columns: minmax(0, 1fr); }
  .sync-modes { grid-template-columns: minmax(0, 1fr); }
  .sync-modes dd + dt { margin-top: var(--space-2); }
}

/* Runs table details */
.sync-runs .sync-run-time { font-weight: var(--weight-semibold); }
.sync-runs-note { margin-top: var(--space-2); }
.sync-switch--quiet { border-top: 0; padding-top: 0; }
.sync-alert-after { margin-top: var(--space-4); color: var(--text-muted); line-height: var(--lh-text); max-width: 72ch; }

@media (max-width: 47.99rem) {
  /* a run on two lines: the time with the result on the right, then the numbers in one line.
     The time has a fixed width so that the result fills the rest of the first line exactly. */
  .data-table--stack.sync-runs tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
  .data-table--stack.sync-runs td { width: auto; margin: 0; }
  .sync-runs .sync-run-time { order: -2; flex: 0 0 6rem; white-space: nowrap; }
  .data-table--stack.sync-runs .sync-run-result { order: -1; flex: 1 1 calc(100% - 6rem - var(--space-3) - 1px); text-align: right; }
  .data-table--stack.sync-runs .sync-run-result::before { content: none; }
  .sync-runs .sync-run-result .row-sub { display: block; }
}

/* ==== v2 panel look for the screens above (merged from staging/screens.css) ================ */

/* Anketos: every block is a panel */
.survey-layout { gap: var(--space-4); }
.survey-main,
.survey-side { gap: var(--space-4); }
.survey-block {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}
.survey-side { padding-left: 0; border-left: 0; }

/* Būsena: the board is one panel, the summary a notice above it */
.sync-summary {
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.sync-board {
  background: var(--surface);
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.sync-board > .sync-row { padding-inline: var(--space-5); }
.sync-board > .sync-row:first-child { border-top: 0; }
.sync-board > .sync-row.sync-row--test { margin-inline: 0; padding-inline: var(--space-5); }

/* SMS žurnalas: the message never widens the table; one line with "…", full text on "Visa" */
.log-filters.panel-head { align-items: flex-end; gap: var(--space-3); }
.log-table .log-msg-cell { width: 32%; max-width: 0; }
.log-msg-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.log-msg[open] .log-msg-text { overflow: visible; }
.panel > .log-result { padding: var(--space-3) var(--space-5) 0; }

/* NE atsakymai: the reply bubble on the panel */
.panel .calls-block .reply-quote { background: var(--surface-sunken); }

@media (max-width: 47.99rem) {
  .log-table .log-msg-cell { max-width: none; width: auto; }
  .log-table .row-title,
  .sync-detail a:not(.btn),
  .sync-board .item-meta a,
  .item-list .item-meta a,
  .sync-errors .item-meta a,
  .chart-dots a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
  .survey-block { padding-inline: var(--space-4); }
  .sync-board > .sync-row { padding-inline: var(--space-4); }
}


/* ==== Services, intervals, users (settings) ================================================== */

.settings-tabs { margin-bottom: var(--space-4); }
.interval-inputs { display: inline-flex; align-items: center; gap: var(--space-1); }
.interval-inputs .field-input { width: 4.5rem; font-variant-numeric: tabular-nums; }
.input-unit-suffix-plain { color: var(--text-muted); font-size: var(--fs-sm); }
.category-table .field-input { min-width: 0; }
.category-table td:first-child .field-input { min-width: 11rem; }
.category-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

.data-table .col-check { width: 2.5rem; padding-right: 0; }
.data-table .col-check input { width: 1rem; height: 1rem; accent-color: var(--action); }
.service-name { font-weight: var(--weight-medium); cursor: pointer; }
.data-table tr.row-attention { background: var(--status-wait-tint); }
.data-table tr.row-attention:hover { background: var(--status-wait-tint); }
.service-table select.field-input { min-width: 12rem; }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); border-top: var(--border-thin) solid var(--line); background: var(--surface-app); }
.bulk-bar .field-label { font-weight: var(--weight-semibold); }
.bulk-bar .field-input { width: auto; }
.bulk-hint { color: var(--text-muted); font-size: var(--fs-sm); margin-left: auto; }

.name-example { font-size: var(--fs-sm); }
.name-example strong { color: var(--text); font-weight: var(--weight-semibold); }

.user-cell { display: inline-flex; align-items: center; gap: var(--space-3); }
.user-cell strong { font-weight: var(--weight-semibold); }
.user-self { color: var(--text-muted); font-size: var(--fs-sm); }
.invite-result { border-color: var(--status-yes); box-shadow: 0 0 0 1px var(--status-yes); }
.invite-result .panel-body { display: grid; gap: var(--space-2); }
.invite-link { font-variant-numeric: tabular-nums; }
.invite-result--failed { border-color: var(--status-no); box-shadow: 0 0 0 1px var(--status-no); }
/* what happened to the e-mail, one sentence above the link; the ring and the dot say sent or not, the words stay black */
.invite-mail { margin-bottom: var(--space-2); line-height: var(--lh-text); }
.invite-mail strong { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.invite-copy { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.invite-copy .invite-link { flex: 1 1 20rem; min-width: 0; }
.invite-copy .btn { flex: none; min-width: 11rem; } /* "Nukopijuota" is shorter: the button keeps its width, the field does not jump */

@media (max-width: 47.99rem) {
  .bulk-bar { padding-inline: var(--space-4); }
  .bulk-bar .field-input,
  .bulk-bar .btn { width: 100%; }
  .bulk-hint { margin-left: 0; }
  .invite-copy .btn { flex: 1 1 100%; }
  .data-table--stack tr:has(td.col-check) { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); column-gap: var(--space-2); }
  .data-table--stack td.col-check { grid-row: 1 / span 3; width: auto; margin-left: calc(-1 * var(--space-3)); }
  .data-table--stack tr:has(td.col-check) > td:not(.col-check) { grid-column: 2; }
  /* a 44 px target around a 20 px box */
  .data-table--stack .col-check input { appearance: none; -webkit-appearance: none; position: relative; width: var(--tap); height: var(--tap); margin: 0; cursor: pointer; }
  .data-table--stack .col-check input::before { content: ""; position: absolute; inset: 0.75rem; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
  .data-table--stack .col-check input:checked::before { background: var(--action); border-color: var(--action); }
  .data-table--stack .col-check input:checked::after { content: ""; position: absolute; left: 1.125rem; top: 0.875rem; width: 0.375rem; height: 0.6875rem; border: solid var(--text-on-action); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .service-name { display: inline-flex; align-items: center; min-height: var(--tap); }
  .interval-inputs .field-input { width: 5rem; }
  .category-table td.num a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
  /* the switch says Aktyvi / Išjungta itself: no small "Aktyvi" before it (the owner, 2026-10-25: "2 kartus ta pati
     informacija"); its track starts on the fields' left edge, the 44 px tap area reaching 4 px into the card's padding */
  .category-table td[data-label="Aktyvi"]::before { content: none; }
  .category-table td[data-label="Aktyvi"] .switch input { margin-left: -0.25rem; }
}


/* ==== Status page (Būsena) =================================================================== */
/* Rows: name and state on the left (top-aligned), the explanation on the right. */

.info-rows > .info-row + .info-row { border-top: var(--border-thin) solid var(--line); }
.info-row { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-5); align-items: start; }
.info-row-label { display: grid; justify-items: start; gap: var(--space-2); }
.info-row-title { font-size: var(--fs-md); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.info-row-body { display: grid; gap: var(--space-1); max-width: 70ch; line-height: var(--lh-text); }
.status-value { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xl); }
.status-value .dot { width: 0.625rem; height: 0.625rem; }
.status-todo { display: grid; gap: var(--space-3); border-top: var(--border-thin) solid var(--line); }
.steps { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; line-height: var(--lh-text); }
.steps li::marker { font-weight: var(--weight-semibold); }
@media (max-width: 47.99rem) {
  .info-row { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .info-row-label { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}


/* ==== Pixel-exact centring ==================================================================== */
/* Controls with an icon or a dot get a whole-pixel line box, so the browser does not round the
   text half a pixel away from the icon (measured at 1x and 2x). */
.nav-item,
.btn,
.segmented a,
.filter-links a,
.pager-links a,
.pager-links span,
.call-note > summary { line-height: 1.25rem; }
.chip,
.badge,
.status,
.tag,
.call-state-label,
.nav-count { line-height: 1rem; }
.stat-sub,
.day-summary,
.item-meta,
.sending-row-name,
.back-link { line-height: 1.25rem; }
.state-block-title { line-height: 1.5rem; }
.status-value { line-height: 1.5rem; }
.cal-name { line-height: 1rem; }
/* larger text (16–18 px) sits a pixel lower than the dot or icon beside it: move the mark down */
.state-block-title > .dot,
.status-value > .dot,
.cal-name > .dot,
.back-link > .icon { position: relative; top: 1px; }

/* ==== Footnote =============================================================================== */

.page-foot { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--fs-sm); }

/* ==== Phone: every standalone control is at least 44 px ====================================== */

@media (max-width: 47.99rem) {
  .btn { min-height: var(--tap); }
  .figures a[href^="tel:"],
  .item-meta a[href^="tel:"],
  .call-state a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .field-input { min-height: var(--tap); font-size: 1rem; }
}

/* ==== Navigation v3 (2026-10-04): SMS and e-mail pages ======================================
   design/meniu-struktura.md. Concepts: sms-tekstai, sms-tekstas, sms-nustatymai, laisku-*. */

/* Texts list: one row group per flow, its texts below it */
.text-table .text-flow th { padding-top: var(--space-4); padding-bottom: var(--space-2); font-weight: var(--weight-regular); }
.text-table tbody + tbody .text-flow th { border-top: var(--border-thin) solid var(--line); }
.text-table tbody tr.text-flow:hover { background: transparent; }
.text-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.text-table tbody tr:last-child td { padding-bottom: var(--space-4); }
.text-flow-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.text-flow-name { color: var(--text); font-size: var(--fs-lg); font-weight: var(--weight-semibold); text-decoration: none; }
.text-flow-name:hover { text-decoration: underline; }
.text-flow-edit { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--weight-medium); }
.text-flow-meta { flex-basis: 100%; color: var(--text-muted); font-size: var(--fs-sm); }
.text-table .text-cell { width: 100%; max-width: 0; }
.text-preview { display: block; overflow: hidden; color: var(--text-muted); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.text-preview--empty { white-space: normal; }
.text-table tr.is-unused td,
.text-table tr.is-unused .row-title { color: var(--text-muted); }
.text-table--mail .text-cell { width: 60%; }
.text-table--mail .text-subject { width: 40%; color: var(--text); }
.text-subject-inline { display: none; }
.text-flow-head > .field-error { flex-basis: 100%; } /* why the flow's texts cannot be sent, said once */

/* Flow list: the row's buttons stay on one line from tablet width up */
@media (min-width: 48rem) { .flow-actions { flex-wrap: nowrap; } }

/* Message logs: the phone or e-mail under the name uses the column's full width */
.log-table td .log-contact { max-width: none; }

/* Under the head of a text editor: the flow's state, channel and the way to its other settings */
.flow-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--text-muted); font-size: var(--fs-sm); }
.flow-context-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-left: auto; }
.flow-context-links a,
.flow-texts a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); font-weight: var(--weight-medium); line-height: 1.25rem; }
.flow-texts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.form-row-control > .flow-texts { margin-top: var(--space-2); }

/* Readiness of a channel: data saved, connection checked, one real test sent */
.readiness { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--line); }
.readiness-title { font-size: var(--fs-sm); font-weight: var(--weight-semibold); }
.readiness-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; }
.readiness-step { display: flex; align-items: flex-start; gap: var(--space-2); }
.readiness-mark { display: inline-grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-round); }
.readiness-step--yes .readiness-mark { border: 0; background: var(--status-yes); color: var(--text-on-brand); }
.readiness-step--no .readiness-mark { border: 0; background: var(--status-no); color: var(--text-on-brand); }
.readiness-mark .icon { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.readiness-text { display: grid; gap: 0.125rem; font-size: var(--fs-md); line-height: 1.25rem; }
.readiness-text strong { font-weight: var(--weight-semibold); }
.readiness-step--no .readiness-text strong { color: var(--status-no); }
.readiness-text .row-sub { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.25rem; }
.readiness-note { max-width: 72ch; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); }

@media (max-width: 47.99rem) {
  .readiness { padding-inline: var(--space-4); }
  .readiness-steps { grid-template-columns: minmax(0, 1fr); }
  /* e-mail log: no parts and price; a long address wraps instead of widening the row */
  .log-table--mail tr.log-row { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "time who" ". status" ". flow" ". msg"; }
  .editor-suffix a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 0.375rem; margin-inline: -0.375rem; }
  .flow-context-links { margin-left: 0; }
  .flow-context-links a,
  .flow-texts a { min-height: var(--tap); }
  .text-flow-name,
  .text-table .row-title { display: inline-flex; align-items: center; min-height: var(--tap); }
  .text-flow-edit { display: none; } /* the flow name is the same link, and a full-width tap target */
  .text-table--mail thead th:last-child,
  .text-table.text-table--mail td.text-subject { display: none; } /* beats .text-table td:last-child below */
  .text-table--mail .text-cell { width: 100%; }
  .text-table--mail .text-subject-inline { display: block; color: var(--text); }
  /* texts list: one block per text, parts and price on a line under the preview */
  .text-table,
  .text-table tbody,
  .text-table tr,
  .text-table th { display: block; }
  .text-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .text-table tr:not(.text-flow) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: var(--border-thin) solid var(--line); }
  .text-table tbody tr:last-child { border-bottom: 0; }
  .text-table td,
  .text-table td:first-child,
  .text-table td:last-child,
  .text-table tbody tr:last-child td { display: block; padding: 0; border: 0; }
  .text-table .text-cell { flex-basis: 100%; min-width: 0; max-width: none; }
  .text-table td.num { color: var(--text); font-size: var(--fs-sm); text-align: left; }
  .text-table td.num::before { content: attr(data-label) " "; color: var(--text-muted); font-size: var(--fs-xs); }
  .text-table .text-flow th { padding: var(--space-4) var(--space-4) var(--space-2); }
  /* top bar: a long page name ends in "…" so the sending chip stays on the first row */
  .topbar-crumb { flex: 1 1 0; }
  .topbar-crumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* stacked tables: a list of links stays on its label's line */
  .data-table--stack td[data-label] > .flow-texts { display: inline-flex; vertical-align: baseline; }
}

/* ==== DI asistentas: the "Klausti" button and its sheet ======================================= */
/* dashboard/_assistant.html + js/assistant.js; design notes: /root/charminglook-dizainas/design/di-asistentas.md.
   The sheet is a native popover (Esc, a click outside and the X close it; the field gets the focus).
   Desktop and tablets: a sheet on the right as tall as the window, its head as tall as the top bar.
   Phones: the whole screen. Empty: the greeting and the big field in the middle, examples under it
   (on phones above it, where the keyboard does not cover them). data-state: empty | waiting | idle. */

.assistant-launch {
  position: fixed;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 1.125rem 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--action);
  color: var(--text-on-action);
  font-size: var(--fs-md);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), bottom var(--dur-base) var(--ease-out);
}
.assistant-launch:hover { background: var(--action-hover); }
/* a form with unsaved changes: its save bar sticks to the bottom, the button stands above it */
body:has(.save-bar-status--dirty) .assistant-launch { bottom: calc(var(--space-5) + 3.5rem); }

.assistant[popover] {
  position: fixed;
  inset: 0 0 0 auto;
  width: clamp(28rem, 30vw, 36rem);
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain; /* the page behind does not scroll along */
  border: 0;
  border-left: var(--border-thin) solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.assistant[popover]:popover-open {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
@starting-style {
  .assistant[popover]:popover-open { transform: translateX(1.5rem); opacity: 0; }
}
.assistant::backdrop { background: transparent; }

.assistant-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--topbar-height);
  padding: 0 var(--space-3) 0 var(--space-5);
  border-bottom: var(--border-thin) solid var(--line);
}
.assistant-title { margin-right: auto; font-size: var(--fs-md); font-weight: var(--weight-semibold); }

/* the conversation; in the empty state it only holds the greeting, sitting on the field */
.assistant-log {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assistant[data-state="empty"] .assistant-log { justify-content: flex-end; padding-bottom: var(--space-4); }
.assistant:not([data-state="empty"]) :is(.assistant-hello, .assistant-ideas) { display: none; }

/* No working key yet (assistant_state != ready): one notice under the head says what is wrong and where to fix it */
.assistant-notice { flex: none; margin: var(--space-4) var(--space-5) 0; }
.assistant-notice-text { display: grid; gap: 0.125rem; min-width: 0; }
.assistant-notice a { justify-self: start; color: inherit; font-weight: var(--weight-semibold); }

.assistant-hello { display: grid; gap: var(--space-1); }
.assistant-hello-title {
  font-size: var(--fs-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.assistant-hello-text { color: var(--text-muted); line-height: var(--lh-text); }

/* The big calm field: the one bold thing in the sheet */
.assistant-composer {
  flex: none;
  display: grid;
  gap: var(--space-1);
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  cursor: text;
}
.assistant-composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.assistant-input {
  display: block;
  width: 100%;
  min-height: 3rem; /* two lines */
  max-height: 12rem;
  margin: 0;
  padding: 0 var(--space-2) 0 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lg); /* 16 px: iPhones do not zoom into the field */
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
.assistant-input:focus-visible { outline: none; } /* the whole box shows the focus */
.assistant-input::placeholder { color: var(--text-muted); opacity: 1; }
.assistant-composer-foot { display: flex; justify-content: flex-end; }
.assistant-send {
  display: inline-grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: var(--text-on-action);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.assistant-send:hover { background: var(--action-hover); }
/* nothing to send yet, or the answer is on its way */
.assistant-composer:has(.assistant-input:placeholder-shown) .assistant-send,
.assistant[data-state="waiting"] .assistant-send { background: var(--selected); color: var(--text-subtle); cursor: default; }

/* Examples: they look like menu items, since that is what they replace */
.assistant-ideas {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 0 var(--space-4) var(--space-5);
  overflow-y: auto;
}
.assistant-idea {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
}
.assistant-idea .icon { color: var(--text-muted); }
.assistant-idea:hover { background: var(--hover); }
.assistant-idea:hover .icon { color: var(--text); }

/* One question and its answer: a ledger, not chat bubbles */
.assistant-turn { display: grid; gap: var(--space-3); }
.assistant-turn + .assistant-turn { padding-top: var(--space-5); border-top: var(--border-thin) solid var(--line); }
.assistant-q { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: var(--weight-semibold); line-height: var(--lh-text); overflow-wrap: anywhere; }
.assistant-q .avatar { width: 1.5rem; height: 1.5rem; margin-top: -0.0625rem; font-size: var(--fs-xs); }
.assistant-q-text { min-width: 0; white-space: pre-line; }
.assistant-a { display: grid; gap: var(--space-3); line-height: var(--lh-text); overflow-wrap: anywhere; }
/* the AI's own text: <p>, <strong>, <ul>/<ol>, <li> without classes (the server's blocks have their own) */
.assistant-a ul:not([class]),
.assistant-a ol:not([class]) { display: grid; gap: var(--space-1); padding-left: 1.25rem; list-style: disc; }
.assistant-a ol:not([class]) { list-style: decimal; }
.assistant-a strong { font-weight: var(--weight-semibold); }
.assistant-a .btn { justify-self: start; }
.assistant-a .notice { line-height: var(--lh-ui); }

/* a short list in an answer: [lead: time or date] name and a line under it [end: phone or figure] */
.assistant-rows { display: grid; border-top: var(--border-thin) solid var(--line); line-height: var(--lh-ui); }
.assistant-rows > li { display: flex; align-items: baseline; gap: var(--space-3); border-bottom: var(--border-thin) solid var(--line); }
.assistant-row-lead { flex: none; min-width: 2.75rem; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.assistant-row-main { flex: 1 1 0; min-width: 0; display: grid; padding: var(--space-2) 0; }
/* a row with a page (the client card): name and service are one link */
a.assistant-row-main { color: var(--text); text-decoration: none; }
a.assistant-row-main:hover .assistant-row-title { text-decoration: underline; }
.assistant-row-title,
.assistant-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-row-title { font-weight: var(--weight-medium); }
.assistant-row-sub { color: var(--text-muted); font-size: var(--fs-sm); }
.assistant-row-end { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assistant-row-end a[href^="tel:"] { color: var(--text); text-decoration: none; }
.assistant-row-end a[href^="tel:"]:hover { text-decoration: underline; }

/* "Naujas pokalbis" in the head: only once there is a question */
.assistant[data-state="empty"] .assistant-reset { display: none; }

/* "Pokalbiai": one's saved conversations in place of the conversation (assistant.showList / hideList) */
.assistant-list-toggle[aria-expanded="true"] { background: var(--selected); }
.assistant[data-view="list"] :is(.assistant-notice, .assistant-log, .assistant-composer, .assistant-ideas) { display: none; }
.assistant-list:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.assistant-list-bar { flex: none; padding: var(--space-2) var(--space-5) 0; }
.assistant-list-bar .back-link { padding: 0; border: 0; background: none; cursor: pointer; } /* .back-link is a link elsewhere; here a button */
.assistant-list-body {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-5); /* + the rows' own 12 px: text in line with the title */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* _conversations.html: newest first, the open one marked like the current page in the menu */
.assistant-convs { display: grid; gap: 0.125rem; }
.assistant-conv { display: flex; align-items: center; gap: var(--space-1); }
.assistant-conv form { flex: none; }
.assistant-conv-open {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.assistant-conv-open:hover { background: var(--hover); }
.assistant-conv-open[aria-current] { background: var(--selected); }
.assistant-conv-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-weight: var(--weight-medium);
  line-height: var(--lh-ui);
  overflow-wrap: anywhere;
}
.assistant-conv-open[aria-current] .assistant-conv-title { font-weight: var(--weight-semibold); }
.assistant-conv-meta { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.assistant-conv .btn--icon { color: var(--text-muted); }
.assistant-conv .btn--icon:hover { color: var(--status-no); }
.assistant-convs-empty { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-3) 0; color: var(--text-muted); line-height: var(--lh-text); }
.assistant-convs-empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
.assistant-convs-note { padding: 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-text); }

/* ---- Answer blocks the server adds under the AI's text (templates/assistant/) ---------------- */
/* _rows.html: a list from the salon's own data */
.assistant-block { display: grid; gap: var(--space-2); }
.assistant-block-title { font-weight: var(--weight-semibold); }
.assistant-more { color: var(--text-muted); font-size: var(--fs-sm); }
.assistant-more a { color: var(--text); font-weight: var(--weight-medium); }

/* _proposal.html: a change the AI proposed. Nothing changes before "Patvirtinti"; the card says what
   changes (lines: setting, old -> new), the old and the new text in full, and the warnings */
.assistant-card {
  display: grid;
  border: var(--border-thin) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.assistant-card--pending { border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.assistant-card-head {
  display: grid;
  gap: 0.125rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--line);
  background: var(--surface-app);
}
.assistant-card-title { font-size: var(--fs-md); font-weight: var(--weight-semibold); line-height: var(--lh-ui); }
.assistant-card-sub { color: var(--text-muted); font-size: var(--fs-sm); }
.assistant-card-lines { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.assistant-card-lines > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); }
.assistant-card-lines dt { color: var(--text-muted); }
.assistant-card-lines dd { margin: 0; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.assistant-card-texts { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.assistant-card-text { display: grid; gap: var(--space-1); }
.assistant-card-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
/* the whole text, as it will be sent; a long e-mail scrolls inside its box */
.assistant-card-copy {
  max-height: 15rem;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--line-strong);
  border-radius: var(--radius-sm);
  line-height: var(--lh-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-card-text--before .assistant-card-copy { border-color: transparent; background: var(--surface-app); color: var(--text-muted); }
.assistant-card-notes {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--status-wait-tint);
  color: var(--status-wait-ink);
  font-size: var(--fs-sm);
}
.assistant-card-notes li { display: flex; align-items: baseline; gap: var(--space-2); }
.assistant-card-notes li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--status-wait);
  transform: translateY(-0.1em);
}
.assistant-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.assistant-card-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.assistant-card-note { color: var(--text-muted); }
.assistant-card-result a { color: var(--text); font-weight: var(--weight-medium); }
/* preview.manual: "Patvirtinus padarys DI." and the page where people do the same themselves (they learn where things are) */
.assistant-card-ways { flex-basis: 100%; display: grid; gap: 0.125rem; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.assistant-card-ways a { color: var(--text); font-weight: var(--weight-medium); }

/* waiting: a small turning ring (still for reduced motion) */
.assistant-wait { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.assistant-spinner {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--line);
  border-top-color: var(--text);
  border-radius: var(--radius-round);
  animation: assistant-turn 0.9s linear infinite;
}
@keyframes assistant-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .assistant-spinner { animation: none; } }

@media (max-width: 47.99rem) {
  .assistant-launch { right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  body:has(.save-bar-status--dirty) .assistant-launch { bottom: calc(var(--space-4) + 6.5rem + env(safe-area-inset-bottom)); }
  .assistant[popover] { inset: 0; width: 100%; border-left: 0; box-shadow: none; }
  .assistant-head { padding-left: var(--space-4); padding-right: var(--space-2); }
  .assistant-log { padding: var(--space-4); }
  .assistant-notice { margin-inline: var(--space-4); }
  /* the head keeps one row: "Pokalbiai" shows only its icon (the word stays for screen readers), the title is cut last */
  .assistant-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .assistant-list-toggle { width: var(--tap); padding: 0; }
  .assistant-list-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assistant-list-bar { padding-inline: var(--space-4); }
  .assistant-list-body { padding: var(--space-2) var(--space-1) var(--space-4); }
  .assistant-conv-open { min-height: var(--tap); }
  .assistant-notice a { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* the examples go above the field */
  .assistant-ideas { order: 1; flex: none; padding: 0 var(--space-2) var(--space-3); }
  .assistant-composer { order: 2; margin: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .assistant-idea { min-height: var(--tap); }
  .assistant-send { width: var(--tap); height: var(--tap); }
  .assistant-row-end a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--tap); }
  .assistant-card-foot form { flex: 1 1 0; }
  .assistant-card-foot .btn { width: 100%; }
  a.assistant-row-main { min-height: var(--tap); align-content: center; }
  .assistant-card-result a,
  .assistant-card-ways a,
  .assistant-more a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }
}

/* ==== Registracijos (dashboard/registrations.html) =========================================== */
/* The owner's layout (2026-10-08): the totals in one line, ONE table "who booked x procedure group" (procedures; an
   empty cell is a muted dot), then the list of bookings. Plain numbers, no bars or repeated figures. */

.reg-toolbar { row-gap: var(--space-2); }
.reg-by { margin-left: auto; }
.reg-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.reg-range .field-input { width: auto; }
.reg-range .btn--icon { min-width: var(--control); }
.reg-range-dash { padding-inline: var(--space-1); color: var(--text-muted); }
.reg-period { margin-bottom: var(--space-3); font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }

/* The table. Headers are the full group names, wrapped on words; the names column stays put when it scrolls sideways. */
.reg-panel { overflow: hidden; } /* the rounded corners clip the table's head */
.reg-panel .table-wrap { position: relative; } /* keeps the hidden "0" for screen readers inside the scroll box */
/* tight columns: a month's 12 procedure groups fit next to each other at 1440 px */
.reg-grid :is(th, td) { padding: var(--space-2) 0.375rem; }
.reg-grid :is(th, td):first-child { padding-left: var(--space-4); }
.reg-grid :is(th, td):last-child { padding-right: var(--space-4); }
.reg-grid thead th,
.reg-grid thead th.num { vertical-align: bottom; white-space: normal; line-height: 1.25; text-wrap: balance; }
.reg-grid :is(tbody, tfoot) th[scope="row"] { font-weight: var(--weight-regular); }
.reg-grid-who {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 7rem;
  max-width: 10rem; /* "Pati per salono nuorodą" takes two lines */
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--line);
  text-align: left;
}
/* "Viso" stays at the right edge too, so a month's totals are in sight while the procedures scroll between */
.reg-grid .reg-grid-total { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: inset 1px 0 0 var(--line); }
.reg-grid thead :is(.reg-grid-who, .reg-grid-total) { z-index: 2; background: var(--surface-app); }
.reg-grid tbody tr:hover :is(.reg-grid-who, .reg-grid-total) { background: var(--hover); }
/* names are links to their own clients in the list below: underlined like every link; the open one is marked */
.reg-grid .row-title { font-weight: var(--weight-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.reg-grid .row-title:hover { text-decoration-thickness: 2px; }
.reg-grid tbody tr:has(.row-title[aria-current]) :is(th, td) { background: var(--selected); }
.reg-grid .row-title[aria-current] { font-weight: var(--weight-semibold); }
.reg-grid-clients { box-shadow: inset -1px 0 0 var(--line); }
.reg-none { color: var(--text-subtle); }
.reg-grid-total { font-weight: var(--weight-semibold); }
/* a stronger rule between the staff and the clients who booked themselves, and above the total */
.reg-grid tbody tr:has(+ .reg-grid-self) :is(th, td) { border-bottom-color: var(--line-strong); }
.reg-grid tbody tr:last-child th { border-bottom: 0; }
.reg-grid tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); font-weight: var(--weight-semibold); }

/* Every number opens its own services and clients below: a light underline; the picked cell is marked */
.reg-cell { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.reg-cell:hover { text-decoration-color: currentColor; }
.reg-cell[aria-current] { font-weight: var(--weight-semibold); text-decoration-color: currentColor; }
.reg-grid :is(tbody, tfoot) td:has(> .reg-cell[aria-current]) { background: var(--selected); }

/* The exact services of the picked row, cell or column (the owner's pick): group, then its services indented */
.reg-kinds { width: auto; min-width: min(100%, 34rem); }
.reg-kinds :is(th, td) { padding-block: 0.375rem; }
.reg-kinds th[scope="row"] { font-weight: var(--weight-regular); }
.reg-kinds .num { padding-left: var(--space-6); }
.reg-kinds .reg-kinds-group :is(th, td) { padding-top: var(--space-3); font-weight: var(--weight-semibold); }
.reg-kinds:has(.reg-kinds-group) .reg-kind { padding-left: calc(var(--space-5) + 1rem); }
.reg-kinds tbody tr:hover { background: none; }
.reg-kinds tbody tr:last-child th { border-bottom: 0; }
.reg-list-title { padding: var(--space-4) var(--space-5) var(--space-2); border-top: var(--border-thin) solid var(--line); font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.reg-list-title .count { color: var(--text-muted); font-weight: var(--weight-regular); }

/* The list: one row per booking, its procedures under each other */
.reg-bookings td { vertical-align: top; }
.reg-client { font-weight: var(--weight-semibold); }
.reg-items { display: grid; gap: var(--space-2); }
.reg-items li { display: grid; gap: 0.125rem; }
.reg-item-service { font-weight: var(--weight-medium); }
.reg-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }
.reg-item--cancelled .reg-item-service,
.reg-cancelled td { color: var(--text-muted); }

@media (max-width: 47.99rem) {
  .reg-by { margin-left: 0; }
  .reg-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reg-presets a,
  .reg-by a { white-space: normal; text-align: center; line-height: 1.2; }
  /* dates side by side, then < Rodyti > */
  .reg-range { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) minmax(0, 1fr) var(--tap); gap: var(--space-2); width: 100%; }
  .reg-range .field-input { width: 100%; min-height: var(--tap); }
  .reg-range #reg-nuo { grid-row: 1; grid-column: 1 / 3; }
  .reg-range #reg-iki { grid-row: 1; grid-column: 3 / 5; }
  .reg-range-dash { display: none; }
  .reg-range > :first-child { grid-row: 2; grid-column: 1; }
  .reg-range button[type="submit"] { grid-row: 2; grid-column: 2 / 4; }
  .reg-range > :last-child { grid-row: 2; grid-column: 4; }
  .reg-range .btn { min-height: var(--tap); }
  /* the table scrolls sideways inside its panel, the names stay */
  .reg-grid thead th,
  .reg-grid thead th.num { min-width: 4.25rem; }
  .reg-grid-who { min-width: 0; max-width: 8.5rem; }
  .reg-grid .reg-grid-total { position: static; } /* on a phone only the names stay; "Viso" is at the end of the scroll */
  .reg-grid .row-title { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }
  .reg-bookings td.nowrap { white-space: normal; font-weight: var(--weight-medium); }
  .reg-cell { display: inline-flex; align-items: center; justify-content: flex-end; min-width: var(--tap); min-height: var(--tap); }
  .reg-kinds { width: 100%; }
  .reg-kinds:has(.reg-kinds-group) .reg-kind { padding-left: calc(var(--space-4) + 1rem); }
  .reg-kinds .num { padding-left: var(--space-3); }
  .reg-list-title { padding-inline: var(--space-4); }
}

/* ==== Channel settings: staff whose clients get no messages on this channel (_staff_panel.html) ==== */

.staff-skip-lead { max-width: 46rem; padding: var(--space-4) var(--space-5) 0; font-size: var(--fs-sm); line-height: var(--lh-text); }
/* an alphabetical roster read down the columns, at most four */
.staff-skip { columns: 14rem 4; column-gap: var(--space-4); margin: 0; padding: var(--space-3) var(--space-3) var(--space-4); border: 0; }
.staff-skip-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: start;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  break-inside: avoid;
  cursor: pointer;
}
@media (hover: hover) { .staff-skip-item:hover { background: var(--surface-sunken); } }
.staff-skip-item input { width: 1rem; height: 1rem; margin: 0.125rem 0 0; accent-color: var(--action); }
.staff-skip-name { font-weight: var(--weight-medium); line-height: 1.25rem; overflow-wrap: anywhere; }
.staff-skip-sub { grid-column: 2; color: var(--text-muted); font-size: var(--fs-xs); }
/* the save bar closes the panel instead of sitting in it as a second box */
#meistres > .save-bar { border-width: var(--border-thin) 0 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: none; }
#meistres > .save-bar:has(.save-bar-status--dirty) { box-shadow: 0 -4px 16px rgb(24 23 23 / 0.06); }
@media (max-width: 47.99rem) {
  .staff-skip-lead { padding-inline: var(--space-4); }
  .staff-skip { padding-inline: var(--space-2); }
  .staff-skip-item { min-height: var(--tap); padding-block: var(--space-2); align-items: center; }
  .staff-skip-sub { align-self: start; }
}

/* ==== Meistrių apyvarta (dashboard/turnover.html, turnover_master.html, turnover_comments.html) ============== */
/* The owner's rule for reports: one plain table, every number once, lists under it. The month: ONE table master x
   (services, Treatwell, comments, turnover, unclosed visits). A master: the turnover in one line, then its two parts
   named like the month's columns ("Pagal Treatwell", "Iš komentarų"). The comments: one row per comment, its form in
   the last cell. Full page width like every other dashboard page (the owner asked, 2026-10-18; it had stopped at 72rem). */

.turn-page { max-width: none; }
.turn-toolbar { row-gap: var(--space-2); }
.turn-month { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.turn-month .field-input { width: auto; min-width: 12rem; }
.turn-month .btn--icon { min-width: var(--control); }
/* a master's page: the month as text between the arrows */
.turn-month--label { margin-bottom: var(--space-3); }
.turn-month-name { min-width: 10.5rem; padding-inline: var(--space-2); font-weight: var(--weight-semibold); text-align: center; }
/* the one thing to do on the month page: amber while comments wait, a quiet green line when none do */
.turn-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control); margin-left: auto; font-size: var(--fs-md); font-weight: var(--weight-medium); line-height: 1.25rem; } /* whole-pixel line box: the dot sits on the text centre at 1x */
.turn-check--wait { border-color: transparent; background: var(--status-wait-tint); color: var(--status-wait-ink); font-weight: var(--weight-semibold); }
.turn-check--wait:hover { border-color: var(--status-wait); background: var(--status-wait-tint); }
.turn-none { color: var(--text-subtle); }
.turn-client { font-weight: var(--weight-semibold); }

/* The month table */
.turn-panel { overflow: hidden; } /* the rounded corners clip the table's head */
.turn-panel .table-wrap { position: relative; }
.turn-grid thead th { vertical-align: bottom; }
.turn-grid thead th.num { white-space: normal; line-height: 1.25; text-wrap: balance; }
/* Full page width: the names take about a fifth, the number columns share the rest evenly (fixed 8.5rem number
   columns had left all the extra width to the names and squeezed the numbers to the right edge). */
@media (min-width: 48rem) {
  .turn-grid { table-layout: fixed; }
  .turn-grid thead .turn-grid-name { width: 20%; }
  .turn-grid td:has(.turn-wait) { white-space: normal; } /* "1 laukia" and the sum go on two lines when narrow */
}
.turn-grid :is(tbody, tfoot) th[scope="row"] { font-weight: var(--weight-regular); }
.turn-grid-name { background: var(--surface); text-align: left; }
.turn-grid thead .turn-grid-name { background: var(--surface-app); }
.turn-grid tbody tr:hover .turn-grid-name { background: var(--hover); }
/* names open the master's own month: underlined like every link */
.turn-grid .row-title { font-weight: var(--weight-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.turn-grid .row-title:hover { text-decoration-thickness: 2px; }
.turn-grid .turn-grid-total { font-weight: var(--weight-semibold); }
.turn-wait { margin-right: var(--space-2); vertical-align: 0.0625rem; }
.turn-grid tbody tr:last-child th { border-bottom: 0; }
.turn-grid tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); border-bottom: 0; font-weight: var(--weight-semibold); }
/* With Finansai three more columns (Sandėlis, Išlaidos, Lieka): nine in all, a little less room between them, so
   "11 098,86 €" fits at 1440 px. Narrower than that (a tablet) the table scrolls sideways in its panel and the names
   stay, a line beside them as on a phone */
.turn-grid--money :is(th, td) { padding-inline: var(--space-3); }
.turn-grid--money :is(th, td):first-child { padding-left: var(--space-5); }
.turn-grid--money :is(th, td):last-child { padding-right: var(--space-4); }
@media (min-width: 48rem) { .turn-grid--money { min-width: 70rem; } }
@media (min-width: 48rem) and (max-width: 89.99rem) {
  .turn-grid--money .turn-grid-name { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
  .turn-grid--money thead .turn-grid-name { z-index: 2; }
}

/* A master: the turnover, then "Pagal Treatwell" (a group is a heading row, its services under it) */
.turn-sum { margin-bottom: var(--space-3); font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.turn-services th[scope="row"] { font-weight: var(--weight-regular); }
.turn-services td.num { width: 8.5rem; }
.turn-services thead th.num { width: 8.5rem; }
.turn-services .turn-services-group th { padding-top: var(--space-4); padding-bottom: var(--space-1); border-bottom: 0; font-weight: var(--weight-semibold); }
.turn-services tbody:first-of-type .turn-services-group th { padding-top: var(--space-3); }
.turn-services tbody tr:last-child td { border-bottom: var(--border-thin) solid var(--line); }
.turn-services tbody tr.turn-services-group:hover { background: none; }
.turn-services:has(.turn-services-group) .turn-service { padding-left: calc(var(--space-5) + 1rem); }
.turn-services .turn-service.turn-service--group { padding-left: var(--space-5); font-weight: var(--weight-semibold); }
.turn-notice { margin-bottom: var(--space-4); }
.turn-services tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); font-weight: var(--weight-semibold); }
.turn-services tbody:last-of-type tr:last-child :is(th, td) { border-bottom: 0; }

/* Lists of comments: "Iš komentarų", "Laukia patikrinimo" and the check page */
.turn-list :is(th, td) { vertical-align: top; }
.turn-list thead th { vertical-align: bottom; }
.turn-list .turn-note-cell { width: 32%; min-width: 15rem; }
.turn-list :is(td, th).num { width: 7.5rem; }
.turn-added { min-width: 11.5rem; }
.data-table .turn-added { white-space: normal; }
.turn-note { max-width: 34rem; white-space: pre-line; overflow-wrap: anywhere; }
/* the short list on a master's page: one line, cut with "…", the whole comment on hover and on the check page */
.turn-note--short { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-reason { max-width: 34rem; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.turn-pending .turn-reason,
.turn-row--wait .turn-reason { color: var(--status-wait-ink); }
.turn-added strong { font-weight: var(--weight-semibold); }
.turn-list tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); font-weight: var(--weight-semibold); }
.turn-pending .panel-title .dot { transform: translateY(0.0625rem); }

/* The check page: the last cell holds the decision */
/* date with the master under it; the client with the service under it */
.turn-when { width: 8rem; }
.turn-when time { font-weight: var(--weight-medium); }
.turn-who-cell { min-width: 12rem; }
/* after a decision the page comes back to its row (#k<pk>): below the top bar and the table head */
.turn-check-list tbody tr { scroll-margin-top: calc(var(--topbar-height) + 3.5rem); }
.turn-decide,
.turn-decide-head { width: 1%; min-width: 22rem; }
.turn-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.turn-amount .field-input { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.turn-state { line-height: 1.375rem; }
.turn-who { margin-top: 0.125rem; color: var(--text-muted); font-size: var(--fs-sm); }
.turn-change { margin-top: var(--space-1); }
.turn-change > summary {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-left: calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
  list-style: none;
}
.turn-change > summary::-webkit-details-marker { display: none; }
.turn-change > summary:hover { background: var(--hover); }
.turn-change[open] > summary { text-decoration: none; }
.turn-change .turn-form { margin-top: var(--space-1); }

/* "N laukia" in a master's row opens her waiting comments (.turn-dialog), each with the check page's form. The badge
   keeps its look. In the dialog the title and the close button stay while the list scrolls; each comment is who and
   what on the left (the master's words in a quote, the comparison under it) and the decision on the right. */
.turn-wait-open { position: relative; border: 0; cursor: pointer; }
.turn-wait-open:hover { box-shadow: inset 0 0 0 1px var(--status-wait); }
.turn-wait-open::after { content: ""; position: absolute; inset: -0.6875rem -0.25rem; } /* 44 px to tap */
.turn-dialog { width: min(48rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; overflow: hidden; }
.turn-dialog:popover-open { display: flex; flex-direction: column; }
.turn-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: var(--border-thin) solid var(--line); }
.turn-dialog-heading { min-width: 0; }
.turn-dialog .confirm-title .count { color: var(--text-muted); font-weight: var(--weight-regular); }
.turn-dialog-meta { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); }
.turn-dialog-meta a { color: var(--text); font-weight: var(--weight-medium); }
.turn-dialog-close { display: grid; flex: none; place-items: center; width: var(--control); height: var(--control); margin: -0.375rem -0.5rem 0 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.turn-dialog-close:hover { background: var(--hover); color: var(--text); }
.turn-dialog-list { overflow: auto; overscroll-behavior: contain; padding-bottom: var(--space-2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* the hairline between comments runs inside the margins, not edge to edge */
.turn-dialog-item { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--space-3) var(--space-6); margin-inline: var(--space-5); padding-block: var(--space-5); }
.turn-dialog-item + .turn-dialog-item { border-top: var(--border-thin) solid var(--line); }
.turn-dialog-main { display: grid; align-content: start; min-width: 0; }
.turn-dialog-client { font-weight: var(--weight-semibold); line-height: 1.125rem; } /* on the baseline of "Vizito suma" */
.turn-dialog-client .row-title { font-weight: inherit; }
.turn-dialog-sub { margin-top: 0.125rem; color: var(--text-muted); font-size: var(--fs-sm); }
.turn-dialog-sub time { font-variant-numeric: tabular-nums; }
/* the master's own words, as she typed them: a quote, so it never reads as a field */
.turn-dialog-quote { margin: var(--space-3) 0 0; padding: 0.125rem 0 0.125rem var(--space-3); border-left: 2px solid var(--line-strong); line-height: var(--lh-ui); }
.turn-dialog-quote .turn-note { max-width: none; }
.turn-dialog .turn-reason { max-width: none; margin-top: var(--space-2); color: var(--status-wait-ink); font-weight: var(--weight-medium); }
.turn-dialog-decide { display: grid; align-content: start; gap: var(--space-3); }
.turn-dialog-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.turn-dialog-facts dt { color: var(--text-muted); }
.turn-dialog-facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.turn-dialog-facts dd:first-of-type { font-weight: var(--weight-semibold); }
/* the form fills the column: the sum on its own line, the two buttons side by side under it */
.turn-dialog .turn-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.turn-dialog .turn-amount { display: flex; grid-column: 1 / -1; }
.turn-dialog .turn-amount .field-input { flex: 1; width: auto; min-width: 0; }

/* A master's months side by side (the month table's columns): the open month marked like a picked row */
.turn-jump { margin-left: var(--space-3); }
#palyginimas { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); } /* the jump lands below the top bar */
.turn-history .turn-history-current :is(th, td),
.turn-history tbody tr.turn-history-current:hover :is(th, td) { background: var(--selected); }
.turn-history .row-title[aria-current] { font-weight: var(--weight-semibold); }
.turn-month--label + .empty-state { margin-bottom: var(--space-4); }

@media (max-width: 47.99rem) {
  .turn-page { max-width: none; }
  /* < month > on one row, the check link under it */
  .turn-month { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); gap: var(--space-2); width: 100%; }
  .turn-month .field-input { width: 100%; min-width: 0; min-height: var(--tap); }
  .turn-month .btn { min-height: var(--tap); }
  .turn-month-name { min-width: 0; }
  .turn-check { width: 100%; min-height: var(--tap); margin-left: 0; }
  .turn-check--wait { justify-content: center; }
  /* the month table scrolls sideways inside its panel, the names stay */
  .turn-grid thead th.num { width: auto; min-width: 5.75rem; }
  .turn-grid-name { position: sticky; left: 0; z-index: 1; max-width: 8.5rem; box-shadow: inset -1px 0 0 var(--line); }
  .turn-grid-name:has(.avatar--sm) { max-width: calc(8.5rem + var(--avatar-sm) + var(--space-2)); } /* the name keeps its room */
  .turn-grid thead .turn-grid-name { z-index: 2; }
  .turn-grid .row-title { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }
  .turn-grid :is(th, td) { padding-inline: var(--space-2); }
  .turn-grid :is(th, td):first-child { padding-left: var(--space-4); }
  .turn-grid :is(th, td):last-child { padding-right: var(--space-4); }
  .turn-wait { margin: 0 0 var(--space-1); }
  .turn-grid td:has(.turn-wait) { white-space: normal; }
  .turn-services td.num,
  .turn-services thead th.num { width: auto; }
  .turn-services :is(th, td):first-child { padding-left: var(--space-4); }
  .turn-services:has(.turn-services-group) .turn-service { padding-left: calc(var(--space-4) + 0.75rem); }
  .turn-services .turn-service.turn-service--group { padding-left: var(--space-4); }
  .turn-services :is(th, td):last-child { padding-right: var(--space-4); }
  /* lists: each comment a block; the date leads, the sums keep their labels */
  .turn-list td.nowrap { font-weight: var(--weight-medium); }
  .turn-list .turn-note-cell { padding-block: var(--space-2) 0.125rem; }
  .turn-note,
  .turn-reason { max-width: none; }
  .turn-note--short { white-space: pre-line; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* the total: "Iš viso" and the sum on one line */
  .data-table.turn-list tfoot { display: block; }
  .data-table.turn-list tfoot tr { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--line-strong); }
  .data-table.turn-list tfoot :is(th, td) { display: block; padding: 0; border: 0; }
  .turn-list .turn-note-cell { width: auto; min-width: 0; }
  .turn-check-list .turn-decide { width: auto; min-width: 0; padding-top: var(--space-3); }
  .turn-when,
  .turn-added,
  .turn-list :is(td, th).num { width: auto; min-width: 0; }
  .turn-when .row-sub { display: inline; margin-left: var(--space-2); font-size: var(--fs-sm); }
  .turn-who-cell { min-width: 0; }
  .turn-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turn-amount { grid-column: 1 / -1; }
  .turn-amount .field-input { flex: 1; width: auto; min-width: 0; }
  .turn-auto { grid-column: 1 / -1; }
  .turn-change > summary { min-height: var(--tap); }
  /* the dialog: one column, the decision under the comment */
  .turn-dialog-head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .turn-dialog-close { width: var(--tap); height: var(--tap); margin: -0.625rem -0.75rem 0 0; }
  .turn-dialog-item { grid-template-columns: minmax(0, 1fr); margin-inline: var(--space-4); padding-block: var(--space-4); }
  .turn-dialog-meta a,
  .turn-dialog-client .row-title { position: relative; }
  .turn-dialog-meta a::after,
  .turn-dialog-client .row-title::after { content: ""; position: absolute; inset: -0.8125rem 0; } /* 44 px to tap */
  .turn-excel { width: 100%; }
  .turn-jump { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}

/* ==== Vertinimai (2026-10-21): Treatwell reviews per master, one master's reviews, the block on the client card ==== */
/* The month table is Apyvarta's turn-grid with two column groups, the month and all time; the second starts after a
   hairline like a year in Registracijos. The lists: one row per review, each cell one line cut with "…", the text opens
   whole in a .confirm dialog (like the comments in Prašymai). Stars: the given ones filled, 1–3 stars in the NE red. */
.stars { display: inline-flex; gap: 0.0625rem; color: var(--text); vertical-align: middle; }
.star { flex: none; width: 0.875rem; height: 0.875rem; fill: var(--data-track); stroke: var(--data-track); stroke-width: 1.75; stroke-linejoin: round; }
.star--on { fill: currentColor; stroke: currentColor; }
.stars--low { color: var(--status-no); }
/* one filled star in a heading or a filter: "1–3 ★" */
.star-glyph { display: inline-block; width: 0.75rem; height: 0.75rem; fill: currentColor; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; vertical-align: -0.0625rem; }

.rev-grid thead th.rev-period { padding-bottom: 0; border-bottom: 0; color: var(--text); font-weight: var(--weight-semibold); text-align: left; }
.rev-grid .turn-grid-name { box-shadow: inset -1px 0 0 var(--line); } /* where the month starts */
.rev-grid .rev-all { box-shadow: inset 1px 0 0 var(--line); }
.rev-low { color: var(--status-no); }

.rev-list .rev-date { white-space: nowrap; } /* a date never breaks at its hyphen */
.rev-list .rev-rating .stars { display: flex; } /* a box of its own, centred in the row like the date's line */
.rev-list .rev-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-text-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rev-text-open:hover { text-decoration: underline; }
@media (min-width: 48rem) {
  /* the date and the stars as wide as they are, the words share the rest; the text takes what is left */
  .rev-list { table-layout: fixed; }
  .rev-list .rev-date { width: 7.5rem; }
  .rev-list .rev-rating { width: 7rem; }
  .rev-list .rev-who { width: 16%; }
  .rev-list .rev-services { width: 20%; }
  .rev-list--master .rev-masters { width: 10%; }
  .rev-list--client .rev-masters { width: 15%; }
  .rev-list--client .rev-services { width: 25%; }
}
/* the whole review: the text in the page's ink, the facts under it */
.rev-full-stars { margin-top: var(--space-2); }
.rev-full-stars .star { width: 1rem; height: 1rem; }
.rev-full-text { color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.rev-full-facts { margin-top: var(--space-4); font-size: var(--fs-sm); }
.rev-full-facts dd { font-weight: var(--weight-regular); }

@media (max-width: 47.99rem) {
  /* a review is a card: the date and the stars on the first line, then the words; a fact nobody gave is left out;
     the text in up to two lines, the whole card line opens it */
  .data-table--stack.rev-list tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); }
  .data-table--stack.rev-list td.rev-date,
  .data-table--stack.rev-list td.rev-rating { width: auto; }
  .data-table--stack.rev-list td.rev-date { font-weight: var(--weight-medium); }
  .data-table--stack.rev-list td.rev-none { display: none; }
  .rev-list .rev-who { white-space: normal; }
  .data-table--stack td.rev-text { position: relative; display: flex; gap: 0.25em; align-items: baseline; }
  .data-table--stack td.rev-text::before { flex: none; }
  .rev-text-open { flex: 1 1 auto; width: auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .rev-text-open::after { content: ""; position: absolute; inset: -0.625rem 0; } /* 44 px to tap even for one line: into the card's bottom padding and the line above */
}

/* ==== Ataskaitos (2026-10-18): Registracijos pagal mėnesius, Registracijos į priekį, SMS rezultatai, Reklamos nuorodos == */
/* Every report answers ONE question (the line under its title) with ONE table. The month tables reuse the Registracijos
   grid (reg-grid: tight cells, the names and the total stay put when it scrolls); the month picker, the plain tables
   and the page width reuse Apyvarta's turn-* rules. */

/* Registracijos: "Pasirinktas laikotarpis | Pagal mėnesius" at the right of the title */
.reg-view { margin-left: auto; }

/* Months as columns: the year heads its months, the running month says so under its name */
.reg-months thead th.reg-year { padding-bottom: 0; border-bottom: 0; color: var(--text); font-weight: var(--weight-semibold); text-align: left; box-shadow: inset 1px 0 0 var(--line); }
/* The year stays in sight while the months scroll: it sticks just right of the frozen name column (--who-w is that
   column's width, measured by app.js) for as long as any month of that year is visible. */
.reg-months .reg-year-label { position: sticky; left: calc(var(--who-w, 7rem) + 0.375rem); }
.reg-months thead th.reg-month { min-width: 3.75rem; padding-top: var(--space-1); }
.reg-month-note { display: block; color: var(--text-muted); font-weight: var(--weight-regular); }

/* Registracijos į priekį: the share, and "24 iš 56" under it */
.pre-grid :is(tbody, tfoot) :is(th, td) { vertical-align: top; }
.pre-pct { display: block; font-size: var(--fs-md); font-weight: var(--weight-semibold); line-height: 1.25rem; }
.pre-of { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-regular); white-space: nowrap; }
.pre-grid :is(tbody, tfoot) .reg-none { line-height: 1.25rem; }
.pre-foot { line-height: var(--lh-text); }
.pre-foot p + p { margin-top: var(--space-1); }

/* SMS rezultatai: who booked */
.sms-res-list td { vertical-align: top; }

/* Reklamos nuorodos: the create form in one row, the links with their clicks */
.nuor-form { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-4) var(--space-5) var(--space-5); }
.nuor-form .field-label { line-height: 1.25rem; }
.nuor-create { margin-top: calc(1.25rem + 0.375rem); } /* level with the fields: the label's line + the field's gap */
.nuor-booking { overflow-wrap: anywhere; }
.nuor-table td { vertical-align: middle; }
.nuor-name { font-weight: var(--weight-semibold); }
.nuor-name-cell .badge { margin-left: var(--space-1); }
.nuor-target { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a long address is cut, the whole one on hover */
.nuor-link-cell { white-space: nowrap; }
.nuor-short { user-select: all; } /* one click selects the whole link */
.nuor-copy { min-height: 2rem; margin-left: var(--space-2); padding-inline: var(--space-2); font-size: var(--fs-sm); }
.nuor-copy > .icon { position: relative; top: 1px; } /* measured at 1x: the 13 px word sits a pixel below the icon's centre */
.nuor-total { font-weight: var(--weight-semibold); }
.nuor-action { width: 1%; white-space: nowrap; text-align: right; }
/* a switched-off link: pale, its clicks no longer counted */
.nuor-off :is(td, .nuor-name) { color: var(--text-muted); }
.nuor-off .nuor-name { font-weight: var(--weight-medium); }
.nuor-foot { max-width: 46rem; }

@media (max-width: 47.99rem) {
  .reg-view { margin-left: 0; }
  .reg-view a { white-space: normal; text-align: center; line-height: 1.2; }
  .reg-months thead th.reg-month { min-width: 4.25rem; }
  .nuor-form { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .nuor-create { width: 100%; margin-top: var(--space-2); }
  .nuor-target { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .nuor-name-cell .row-sub { margin-top: var(--space-1); }
  .nuor-link-cell { white-space: normal; }
  .nuor-short { overflow-wrap: anywhere; }
  .nuor-copy { min-height: var(--tap); }
  .nuor-table td.nuor-action { width: auto; padding-top: var(--space-2); text-align: left; }
}

/* ==== Sandėlis (templates/inventory/*.html) and the worker page (2026-10-18) ============================== */
/* The salon owner's own stock tool ("Charming Look atsargos") moved in: her tab names, button words and flow, our
   look. Someone who may only use Sandėlis gets the plain worker page (base.html, worker_layout): the wordmark, her
   tabs, her name and Atsijungti, made for a phone first. Money parts are left out of the markup, never greyed. */

/* The worker page: no side menu */
.worker-shell { min-height: 100vh; min-height: 100dvh; background: var(--canvas); }
.worker-top { background: var(--surface); border-bottom: var(--border-thin) solid var(--line); }
.worker-top-row,
.worker-tabs { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.worker-top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3) var(--space-2); }
.worker-brand { display: inline-flex; flex: none; align-items: center; min-height: var(--tap); }
.worker-brand img { width: 12.625rem; height: auto; } /* 202 x 18, the size the 1x file is drawn for */
.worker-me { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.worker-me-name { overflow: hidden; font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.worker-me form { flex: none; }
.worker-tabs { display: flex; gap: var(--space-1); }
.worker-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
}
.worker-tabs a:hover { color: var(--text); }
.worker-tabs a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--text); font-weight: var(--weight-semibold); }
.worker-main { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-8); }

/* Forms: her two buttons, the field grid, the send button at the end */
.inv-form { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); }
.inv-me strong { color: var(--text); font-weight: var(--weight-semibold); }
/* "Asmeniškai mano darbui | Bendram naudojimui": a two-way choice across the form, like the segmented views */
.inv-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 2px; border: 0; border-radius: var(--radius-sm); background: var(--selected); }
.inv-use-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
}
.inv-use-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.inv-use-option:hover { color: var(--text); }
.inv-use-option:has(input:checked) { background: var(--surface); color: var(--text); font-weight: var(--weight-semibold); box-shadow: 0 1px 2px rgb(24 23 23 / 0.1); }
.inv-use-option:has(input:focus-visible) { outline: var(--focus-ring) solid var(--focus); outline-offset: 1px; }
.inv-form textarea.field-input { min-height: 5.5rem; }
.inv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }
.inv-field-wide { grid-column: span 2; }
/* an invoice's data: supplier, number, date, total, and the short "PVM, %" at the end */
.inv-fields--invoice { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(5rem, 7rem); }
/* Išlaidos, "Nauja išlaida": the date, category and master, then the sums (be PVM, the short PVM %, su PVM) in one
   row; the note under them and Įrašyti under "Suma su PVM". The form under the two buttons that read an invoice, a
   line between (it is also where a read invoice comes back to be checked) */
.inv-fields--expense { grid-template-columns: minmax(9rem, 10rem) repeat(2, minmax(10rem, 1fr)) minmax(7rem, 9rem) minmax(4.5rem, 6rem) minmax(7rem, 9rem); }
.inv-fields--expense .inv-field-wide { grid-column: 1 / -2; }
.inv-exp-form { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--line); }
.inv-fields--correct .inv-field-wide { grid-column: auto; }
.inv-fields--correct { grid-template-columns: minmax(10rem, 14rem) minmax(12rem, 1fr) auto; }
/* "Pataisyti likutį": the amount's label follows Pridėti | Atimti ("Kiek pridėti" / "Kiek atimti") */
.inv-delta-take { display: none; }
.inv-correct:has(input[name="direction"][value="atimti"]:checked) .inv-delta-add { display: none; }
.inv-correct:has(input[name="direction"][value="atimti"]:checked) .inv-delta-take { display: inline; }
/* Prašymai: "Ko reikia?" and Kiekis side by side, Komentaras under both (one column on a phone) */
.inv-fields--req { grid-template-columns: minmax(0, 1fr) minmax(6rem, 9rem); }
.inv-fields--req .inv-field-wide { grid-column: 1 / -1; }
.inv-inline-submit { align-self: end; margin-bottom: 0; }
.inv-fields:has(.field-error) .inv-inline-submit { align-self: start; margin-top: calc(1.25rem + 0.375rem); }
.inv-fields .field-label { line-height: 1.25rem; }
.inv-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; } /* a long photo name is cut, never widens the form */
.inv-submit { min-width: 8rem; margin-left: auto; }
.inv-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: var(--weight-medium); cursor: pointer; }
.inv-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--action); }
.inv-check--sm { min-height: 2rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--weight-regular); }
/* "Priemonė" only while "— ne iš sąrašo —" is chosen; a product from the list brings its own name */
.inv-issue-form:has(#inv-product option:checked:not([value=""])) .inv-item-field { display: none; }

/* Lists: the thing in bold, its badges next to it, the buttons at the end of the row */
.inv-filters { row-gap: var(--space-2); }
.panel + .inv-filters { margin-top: var(--space-4); } /* the same gap as between two panels */
.inv-list td { vertical-align: top; }
.inv-list .badge { vertical-align: 0.0625rem; }
.inv-what-text { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.inv-what .badge { margin-left: var(--space-1); }
.inv-state .badge { white-space: nowrap; }
.data-table td.inv-actions { width: 1%; text-align: right; white-space: nowrap; }
/* the buttons' words sit on the row's first text line */
.inv-actions .btn { margin-block: calc((1.25rem - var(--control)) / 2); }
.inv-list .row-sub { white-space: nowrap; }
.inv-actions > form { display: inline-flex; vertical-align: top; }
.inv-actions > form + form { margin-left: var(--space-2); }
/* "Kiek kuri meistrė sunaudoja": a name with ▸ opens her items under the table (▾ and the row marked while open) */
/* the ▸ follows the name's last word, also when a long name wraps */
.inv-usage-open .icon { display: inline-block; margin-left: var(--space-1); vertical-align: -0.1875rem; color: var(--text-muted); transition: transform 0.15s ease; }
.inv-usage-open[aria-current] { font-weight: var(--weight-semibold); }
.inv-usage-open[aria-current] .icon { transform: rotate(90deg); color: var(--text); }
.turn-grid.inv-usage tbody tr:has([aria-current]) :is(th, td) { background: var(--selected); } /* also under the pointer */
@media (prefers-reduced-motion: reduce) { .inv-usage-open .icon { transition: none; } }
/* her items: a row across the table right under hers, closed by a strong line. On a phone, where the table scrolls
   sideways, the list stays in the visible part (sticky, as wide as the box: 100cqi). Scrolled into view, its sum stays
   clear of the Klausti button (bottom right, 44 px at 24 px from the edge). */
.inv-usage-wrap { container-type: inline-size; }
.inv-usage tbody tr.inv-usage-more:hover { background: transparent; }
.inv-usage .inv-usage-more > td { padding: 0; border-bottom: var(--border-thin) solid var(--line-strong); } /* also beats td:first-child */
.inv-usage-detail { position: sticky; left: 0; width: 100cqi; scroll-margin: calc(var(--topbar-height) + var(--space-4)) 0 calc(var(--tap) + var(--space-5) + var(--space-4)); }
/* where the tabs' anchors land without JS: below the top bar, the panel's head still in view */
#inv-sunaudoja, #inv-irasai { scroll-margin-top: calc(var(--topbar-height) + 2 * var(--space-4)); }
#prasymai { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
html.keep-scroll body { visibility: hidden; } /* keep-scroll.js: until app.js has put the scroll back */
.inv-usage-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--selected); }
.inv-usage-detail-title { min-width: 0; font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.inv-usage-close { flex: none; margin-right: calc(-1 * var(--space-3)); } /* its word ends on the Vertė column's edge */
/* a plain table on every screen (not the phone cards of the lists above): the total under Vertė */
.inv-usage-items td { vertical-align: top; }
.inv-usage-items tbody tr:last-child :is(th, td) { border-bottom: 0; }
.inv-usage .inv-usage-items tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); border-bottom: 0; font-weight: var(--weight-semibold); }
.inv-usage-part { margin-left: 0.125rem; color: var(--text-muted); }
/* Išduota: "Sunaudota šiandien" and "Ištrinti" in two columns, the gap between them as between two buttons */
.data-table td.inv-act-used { padding-right: 0; }
.data-table td.inv-act-del { padding-left: var(--space-2); }
.inv-list tfoot :is(th, td) { border-top: var(--border-thin) solid var(--line); font-weight: var(--weight-regular); }
.inv-list tfoot tr:first-child :is(th, td) { border-top-color: var(--line-strong); }
.inv-list tfoot .inv-total-all :is(th, td) { font-weight: var(--weight-semibold); }
/* A request's photo: "Pridėti nuotrauką" in the form's foot, the chosen one small with its name and Nuimti */
.inv-photo-pick { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.inv-photo-chosen { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.inv-photo-thumb { position: relative; display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); overflow: hidden; border: var(--border-thin) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); }
.inv-photo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inv-photo-thumb img:not([src]) { display: none; }
.inv-photo-name { min-width: 0; max-width: 16rem; overflow: hidden; color: var(--text-muted); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.inv-photo-remove { flex: none; }
/* Prašymai: Skubu and Siųsti together at the right end of the foot */
.inv-send { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
/* in the list: left of the request's words, as high as the two lines of "Kas prašė" (20 + 18 px), so the row keeps
   its height; the words wrap beside it (their own block next to the float), never under it */
.inv-req-photo { float: left; width: 2.375rem; height: 2.375rem; margin-right: var(--space-3); overflow: hidden; border: var(--border-thin) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); cursor: zoom-in; }
.inv-req-photo + .inv-what-main { display: flow-root; }
/* Komentaras, like Pastaba in Išlaidos: plain table text on ONE line, cut with "…", so a row with a comment is as high
   as one without (the owner, 2026-10-20). Its width is set (its words never widen the column) and grows with the
   window, so the item keeps its room first: 4rem at 1440 px, 20rem from about 1760 px. A click opens the whole comment
   in the .confirm dialog */
.inv-req-note-open { display: block; width: clamp(4rem, 100vw - 90rem, 20rem); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.inv-req-note-open:hover { text-decoration: underline; }
.inv-req-note-full { white-space: pre-line; overflow-wrap: anywhere; }
/* Išlaidos' Pastaba the same way, in a table with more room for it: 4rem at 1024 px (seven columns fit), 17rem at
   1440, 32rem from 1920 */
.inv-expenses .inv-req-note-open { width: clamp(4rem, 50vw - 28rem, 32rem); }
/* Meistrė: one line; a long "Anastasija (Mokinė) (nebedirba)" is cut with "…" (whole on hover), 4.5rem up to 1280 px,
   10rem at 1440, whole from about 1650 */
.inv-exp-master { display: block; max-width: clamp(4.5rem, 100vw - 80rem, 16rem); overflow: hidden; text-overflow: ellipsis; }
/* a tablet (about 1024 px): a little less room between the columns, so a long category ("Telekomunikacijos") stays whole */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .inv-expenses :is(th, td) { padding-inline: var(--space-3); }
  .inv-expenses :is(th, td):first-child { padding-left: var(--space-4); }
  .inv-expenses :is(th, td):last-child { padding-right: var(--space-4); }
}
/* short labels and the names ("Adrija (nebedirba)") on one line; only the request's or item's words wrap */
.inv-req td:is([data-label="Kam"], [data-label="Kas prašė"]),
.inv-issues td:is([data-label="Kam"], [data-label="Kas paėmė"]) { white-space: nowrap; }
/* Išduota, Vertė (who sees prices): the value, or "Įrašyti" when there is none, opens a one-field dialog. Underlined
   like the numbers in Registracijos that open something; one text line high, so the row keeps its height */
.inv-value-open { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.inv-value-open:hover { text-decoration-thickness: 2px; }
.inv-value-open--none { color: var(--text-muted); }
.inv-value-open--none:hover { color: var(--text); }
/* after Išsaugoti the page comes back to that cell (#verte-pk), well below the top bar, its row marked */
.inv-value { scroll-margin-top: 40vh; }
.inv-issues tr:has(> td.inv-value:target) > td { background: var(--selected); }
.confirm-text time { white-space: nowrap; } /* a date never breaks at its hyphen */
.inv-req-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inv-req-photo:hover { border-color: var(--line-strong); }
/* Loading (app.js sets data-photo-state): a photo not there yet is hidden ("loading") and a small turning ring, the
   assistant's, fades into its box after 150 ms; the photo then fades in over the ring ("shown"), which stops appearing
   (a quick photo never shows it). A photo from the cache shows at once, without animation; one that fails ends on the
   plain grey box ("failed"). For reduced motion the ring stands still. */
.inv-req-photo { position: relative; }
.inv-req-photo img { position: relative; } /* above the ring */
.inv-req-photo:is([data-photo-state="loading"], [data-photo-state="failed"]) img { opacity: 0; }
.inv-req-photo[data-photo-state="shown"] img { transition: opacity var(--dur-base) var(--ease-out); }
.inv-req-photo:is([data-photo-state="loading"], [data-photo-state="shown"])::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 1rem;
  height: 1rem;
  margin: auto;
  border: 2px solid var(--line);
  border-top-color: var(--text-muted);
  border-radius: var(--radius-round);
  animation: inv-photo-ring var(--dur-base) var(--ease-out) 150ms both, assistant-turn 0.9s linear infinite;
}
.inv-req-photo[data-photo-state="shown"]::before { animation-play-state: paused, running; }
@keyframes inv-photo-ring { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .inv-req-photo:is([data-photo-state="loading"], [data-photo-state="shown"])::before { animation: inv-photo-ring 0ms 150ms both; }
}

/* The photo viewer: the whole screen dark, the photo as large as it fits, the request's words and the buttons on top */
.photo-view { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-on-action); }
.photo-view[open] { display: grid; grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); }
.photo-view::backdrop { background: rgb(24 23 23 / 0.97); }
html:has(.photo-view[open]) { overflow: hidden; }
.photo-view-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); }
.photo-view-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.photo-view-full { display: inline-flex; flex: none; align-items: center; min-height: var(--tap); color: inherit; font-size: var(--fs-sm); text-underline-offset: 3px; white-space: nowrap; }
.photo-view-close { display: grid; flex: none; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; }
.photo-view-close:hover { background: rgb(255 255 255 / 0.12); }
.photo-view-full:focus-visible,
.photo-view-close:focus-visible { outline: var(--focus-ring) solid var(--text-on-action); outline-offset: 2px; }
.photo-view-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 var(--space-5) var(--space-5); }
.photo-view-wait,
.photo-view-img { grid-area: 1 / 1; }
.photo-view-wait { color: rgb(255 255 255 / 0.72); font-size: var(--fs-sm); }
.photo-view-img { width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: var(--radius-sm); }
.photo-view-img:not([src]) { display: none; }

/* Sandėlis: the figures in one line, "Nauji pirkiniai", the drafts that wait */
.inv-sum { margin-bottom: var(--space-4); font-size: var(--fs-xl); font-weight: var(--weight-semibold); line-height: var(--lh-tight); }
.inv-sum-out { color: var(--status-no); }
.inv-buy-text { max-width: 46rem; line-height: var(--lh-text); }
.inv-buy-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inv-photo { position: relative; }
.inv-photo-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.inv-photo:has(input:focus-visible) { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.inv-photo[aria-disabled="true"] { opacity: 0.6; cursor: progress; pointer-events: none; }
.inv-drafts { padding-top: var(--space-3); border-top: var(--border-thin) solid var(--line); }
.inv-drafts-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--weight-semibold); }
.inv-drafts-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); }
.inv-search { flex: 0 1 20rem; }

/* An invoice: its data, the lines as a table of fields, the sums kept by app.js */
.inv-notice { margin-bottom: var(--space-4); }
.inv-purchase { display: grid; gap: var(--space-4); }
.inv-purchase > .panel + .panel { margin-top: 0; }
.inv-purchase > * { min-width: 0; }
.inv-lines-table :is(th, td) { padding-inline: var(--space-2); vertical-align: top; }
.inv-lines-table :is(th, td):first-child { padding-left: var(--space-5); }
.inv-lines-table :is(th, td):last-child { padding-right: var(--space-5); }
.inv-lines-table tbody tr:hover { background: none; }
.inv-lines-table .inv-num { text-align: right; font-variant-numeric: tabular-nums; }
/* each field's label: for screen readers next to the table head, shown above the field on phones */
.inv-line-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-line-name { min-width: 13rem; }
.inv-line-product { min-width: 11rem; }
.inv-line-qty { width: 6rem; }
.inv-line-unit { width: 5.5rem; }
.inv-line-price { width: 7rem; }
.inv-lines-table td.inv-line-sum { width: 7rem; padding-top: calc(var(--space-3) + 0.5rem); }
.inv-line-del { width: 1%; white-space: nowrap; }
.inv-line--deleted td:not(.inv-line-del) { opacity: 0.4; }
.inv-lines-table tfoot :is(th, td) { padding-block: var(--space-2); border-bottom: 0; font-weight: var(--weight-regular); }
.inv-lines-table tfoot tr:first-child :is(th, td) { border-top: var(--border-thin) solid var(--line-strong); }
.inv-lines-table tfoot .inv-total-all :is(th, td) { font-weight: var(--weight-semibold); } /* Be PVM, PVM, then "Iš viso su PVM" in bold */
.inv-lines-diff { padding: var(--space-3) var(--space-5) 0; color: var(--status-wait-ink); }
.inv-lines-add { padding: var(--space-3) var(--space-5) var(--space-4); }
/* Prekė be sąskaitos: the same lines, one product per row, the name takes the room; "Eilutė" and the save in one row */
@media (min-width: 48rem) {
  .inv-new-table .inv-line-qty { width: 9rem; }
  .inv-new-table .inv-line-unit { width: 10rem; }
  .inv-new-table .inv-line-price { width: 13rem; }
}
.inv-new-optional { margin-left: var(--space-1); font-weight: var(--weight-regular); }
.inv-lines-error { padding: var(--space-3) var(--space-5) 0; }
.inv-new-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* no panel head: the table head is the panel's top, so its grey band follows the panel's round corners */
.inv-new-lines > input[type="hidden"] + .table-wrap { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.inv-purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inv-purchase-actions--done { margin-top: var(--space-4); } /* a confirmed invoice: "Ištrinti sąskaitą" under its lines */
.inv-purchase-hint { color: var(--text-muted); font-size: var(--fs-sm); }
/* An invoice's pages in the page head: "Žiūrėti sąskaitą: 1 psl. 2 psl." and "Kitas puslapis" */
.inv-pages { align-items: center; justify-content: flex-end; }
.inv-pages-label { color: var(--text-muted); font-size: var(--fs-sm); }
/* adding a page reloads the page: while the invoice below has unsaved edits the button rests and says to save first */
.inv-add-page-hint { display: none; flex-basis: 100%; color: var(--status-wait-ink); font-size: var(--fs-sm); text-align: right; }
body:has(form.inv-purchase[data-dirty="true"]) .inv-add-page-hint { display: block; }
body:has(form.inv-purchase[data-dirty="true"]) .inv-add-page .btn { opacity: 0.5; pointer-events: none; }
/* "Panaši sąskaita jau yra": the words, then "Sujungti" at the end of the line */
.inv-similar > span { flex: 1 1 auto; min-width: 0; }
.inv-similar-btn { flex: none; }
.inv-unit-input { max-width: 8rem; }

/* Vartotojai: what each person sees, the sections dialog with its quick choices */
.confirm--wide { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.perm-group { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.perm-group legend { margin-bottom: var(--space-2); padding: 0; font-weight: var(--weight-semibold); }
.perm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.perm-presets-label { color: var(--text-muted); font-size: var(--fs-sm); }
.perm-preset { min-height: 2rem; }
.perm-list { columns: 2; column-gap: var(--space-5); } /* read down, in the menu's order */
.perm-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: 0.3125rem 0; line-height: 1.25rem; cursor: pointer; break-inside: avoid; }
.perm-item input { width: 1rem; height: 1rem; margin: 0.125rem 0 0; accent-color: var(--action); }
/* a Vadovė sees everything: no sections to tick while she is chosen */
.invite-form:has(input[name="role"][value="Vadovė"]:checked) .invite-sections { display: none; }
/* seven things per person: headers may wrap, the two buttons stack, so the table fits a 1440 px window */
.users-table thead th { white-space: normal; }
.users-table .flow-actions { flex-direction: column; align-items: stretch; width: max-content; margin-left: auto; }
.users-table .flow-actions .btn { width: 100%; }
.users-table td[data-label="Paskutinis prisijungimas"] { min-width: 6.5rem; white-space: normal; }
.user-role .field-input { width: auto; min-width: 8.5rem; }
.user-sections { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); font-size: var(--fs-sm); }
.user-sections-name { font-weight: var(--weight-medium); }
.user-sections:has(.user-sections-name) .user-sections-count { display: none; }
.user-sections-edit { min-height: 1.75rem; padding-inline: var(--space-2); font-size: var(--fs-sm); }
.users-table .user-employee { width: auto; min-width: 8.5rem; max-width: 12rem; }

@media (max-width: 47.99rem) {
  .worker-top-row { padding-block: var(--space-2) 0; }
  .worker-brand img { width: 10.5rem; }
  /* Atsijungti as its icon (the word stays for screen readers), so her name keeps its room */
  .worker-logout { width: var(--tap); padding: 0; }
  .worker-logout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .worker-tabs { gap: 0; padding-inline: 0; }
  .worker-tabs a { flex: 1 1 0; min-width: 0; padding: var(--space-1) var(--space-1); white-space: normal; line-height: 1.2; }
  .worker-main { padding-top: var(--space-4); }
  .inv-form { padding-inline: var(--space-4); }
  .inv-field-wide { grid-column: auto; }
  .inv-fields { grid-template-columns: minmax(0, 1fr); }
  /* an invoice's data: one field per row, the total and "PVM, %" side by side */
  .inv-fields.inv-fields--invoice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-fields--invoice > .field:nth-child(-n+3) { grid-column: 1 / -1; }
  .inv-submit { width: 100%; margin-left: 0; }
  .inv-inline-submit { width: 100%; }
  .inv-fields:has(.field-error) .inv-inline-submit { margin-top: 0; } /* the desktop's line-up with the fields; one column here */
  .inv-actions { width: auto; text-align: left; white-space: normal; }
  .inv-actions > form + form { margin-left: 0; }
  .inv-list td.inv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
  .inv-list .inv-what { padding-bottom: var(--space-1); }
  /* the buttons side by side: the desktop's 1% width (the column hugs its buttons) must not squeeze the card's row */
  .data-table--stack td.inv-actions { width: 100%; text-align: left; white-space: normal; }
  .data-table--stack td.inv-what { display: flow-root; } /* holds the photo's float */
  .inv-req-photo { width: var(--tap); height: var(--tap); } /* a finger's size on the phone card */
  .data-table--stack td.inv-req-qty--none { display: none; } /* an old request: no empty "Kiekis" line on the card */
  /* Komentaras on the card: after its label like Kam, two lines at most, then "…"; no line when there is none */
  .data-table--stack td.inv-req-note { display: flex; gap: 0.25em; align-items: baseline; }
  .data-table--stack td.inv-req-note::before { flex: none; }
  .data-table--stack td.inv-req-note--none { display: none; }
  .inv-req-note-open { flex: 1 1 auto; width: auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  /* the whole "Komentaras" line is the button (label and words), exactly that line's height; nothing sticks out */
  .data-table--stack td.inv-req-note { position: relative; }
  .inv-req-note-open::after { content: ""; position: absolute; inset: 0; }
  /* Prašymai's card (the owner, 2026-10-25: "atrodo tragiškai"): the item with its state at the right on the first
     line, Kiekis and Kam on the second (Kam drops under Kiekis when they do not fit), Kas prašė with its date on the
     third, the comment last; the buttons across the card's foot, Ištrinti at its right end (alone, it ends the last
     line instead). The photo stands left of the words, never above them, so a card with a photo is as high as one
     without. Išduota's card below is built the same way (the shared rules name both tables); Išlaidos keeps its own. */
  .data-table--stack:is(.inv-req, .inv-issues) tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
  .data-table--stack:is(.inv-req, .inv-issues) tbody tr::before { content: ""; order: 3; flex: 0 0 100%; } /* the line break after the state */
  .data-table--stack:is(.inv-req, .inv-issues) tbody tr::after { content: ""; order: 6; flex: 0 0 100%; } /* and before Kas prašė / Kas paėmė */
  .data-table--stack.inv-req tbody tr:has(.inv-req-photo) { padding-left: calc(var(--space-4) + var(--tap) + var(--space-3)); }
  .data-table--stack:is(.inv-req, .inv-issues) td { line-height: 1.25rem; }
  .data-table--stack.inv-req td.inv-what { order: 1; flex: 1 1 0; min-width: 0; }
  .data-table--stack:is(.inv-req, .inv-issues) td.inv-state { order: 2; flex: none; width: auto; }
  .data-table--stack.inv-req td.inv-req-qty { order: 4; width: auto; }
  .data-table--stack.inv-req td[data-label="Kam"] { order: 5; flex: 0 1 auto; width: auto; min-width: 0; }
  .data-table--stack.inv-req td[data-label="Kas prašė"] { order: 7; }
  .data-table--stack.inv-req td.inv-req-note { order: 8; }
  .data-table--stack.inv-req td.inv-actions { order: 9; }
  .inv-req .inv-req-photo { position: absolute; top: var(--space-3); left: var(--space-4); margin: 0; }
  .inv-req tr:has(.inv-req-photo) > td.inv-actions { flex-basis: calc(100% + var(--tap) + var(--space-3)); margin-left: calc(-1 * (var(--tap) + var(--space-3))); }
  .inv-req td.inv-actions:not(:has(.btn)) { display: none; } /* a master's card for someone else's request */
  .inv-req td.inv-actions > .btn--delete { margin-left: auto; margin-right: calc(-1 * var(--space-3)); } /* its word ends on the card's edge */
  /* Ištrinti alone (Jau salone, a master's card) gets no row of its own: it ends the last line (Kas prašė, or the
     comment when there is one) like the state ends the first, and the words wrap before it. Exactly one text line
     high (no top and bottom border, so that line keeps its height); its tap area reaches 12 px above and below (44 px) */
  .data-table--stack.inv-req tbody tr:not(:has(> td.inv-actions > form)):not(:has(> td.inv-req-note:not(.inv-req-note--none))) > td[data-label="Kas prašė"],
  .data-table--stack.inv-req tbody tr:not(:has(> td.inv-actions > form)) > td.inv-req-note { flex: 1 1 0; min-width: 0; }
  .data-table--stack.inv-req tbody tr > td.inv-actions:not(:has(form)) { flex: none; width: auto; margin-left: 0; padding-top: 0.125rem; }
  .data-table--stack.inv-req td.inv-actions:not(:has(form)) > .btn--delete { position: relative; min-height: 0; border-block-width: 0; }
  .data-table--stack.inv-req td.inv-actions:not(:has(form)) > .btn--delete::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) 0; }
  /* the comment's label inside its button, so its second line starts under the label, as a long Kas prašė does */
  .data-table--stack.inv-req td.inv-req-note::before { content: none; }
  .data-table--stack.inv-req .inv-req-note-open::before { content: "Komentaras"; display: inline-block; margin-right: 0.25em; color: var(--text-muted); font-size: var(--fs-xs); }
  /* the date right after the name; a long name sends the whole date to the next line, flush left */
  .inv-req td[data-label="Kas prašė"] .row-sub { display: inline; white-space: normal; }
  .inv-req td[data-label="Kas prašė"] .row-sub::before { content: " "; margin-right: var(--space-1); }
  .inv-req td[data-label="Kas prašė"] time { white-space: nowrap; }
  /* Skubu's gap after the words, so a Skubu that wraps starts flush with them */
  .data-table--stack.inv-req .inv-what .badge { margin-left: 0; }
  .data-table--stack.inv-req .inv-what-text::after { content: ""; margin-right: var(--space-1); }
  /* "Kiek kuri meistrė sunaudoja" on a phone: no table to scroll sideways. Each master is two lines: her name across
     the row, under it the four numbers in the header's four columns (the name's header is left to screen readers).
     Only this table's own rows and cells (>): the list opened inside it stays a plain table. */
  .turn-grid.inv-usage,
  .turn-grid.inv-usage > :is(thead, tbody) { display: block; }
  .turn-grid.inv-usage > :is(thead, tbody) > tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--border-thin) solid var(--line); }
  .turn-grid.inv-usage > tbody > tr:last-child { border-bottom: 0; }
  .turn-grid.inv-usage > :is(thead, tbody) > tr > :is(th, td) { display: block; min-width: 0; padding: var(--space-1) var(--space-2) var(--space-3); border: 0; box-shadow: none; }
  .turn-grid.inv-usage > :is(thead, tbody) > tr > :is(th, td):nth-child(2) { padding-left: var(--space-4); }
  .turn-grid.inv-usage > :is(thead, tbody) > tr > :is(th, td):last-child { padding-right: var(--space-4); }
  .turn-grid.inv-usage > thead > tr > th.num { min-width: 0; padding-block: var(--space-2); }
  .turn-grid.inv-usage > thead > tr > .turn-grid-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .turn-grid.inv-usage > tbody > tr > .turn-grid-name { position: static; grid-column: 1 / -1; max-width: none; padding: var(--space-3) var(--space-4) 0; background: transparent; }
  .turn-grid.inv-usage > tbody > tr:has([aria-current]) { background: var(--selected); }
  .turn-grid.inv-usage > tbody > tr:has([aria-current]) > :is(th, td) { background: transparent; }
  /* the name's tap area reaches into the padding around it (12 + 20 + 12 px), above the numbers' line */
  .inv-usage .inv-usage-open { position: relative; z-index: 1; min-height: 0; margin-block: calc(-1 * var(--space-3)); padding-block: var(--space-3); }
  .inv-usage .inv-usage-open:has(> .avatar--sm) { vertical-align: top; } /* her photo comes first: the line, not its letter, places the link */
  .turn-grid.inv-usage > tbody > tr.inv-usage-more { display: block; border-bottom: var(--border-thin) solid var(--line-strong); }
  .turn-grid.inv-usage > tbody > tr.inv-usage-more > td { padding: 0; }
  .inv-usage-detail-head { padding-inline: var(--space-4); }
  .inv-usage-items :is(th, td):first-child { padding-left: var(--space-4); }
  .inv-usage-items :is(th, td):last-child { padding-right: var(--space-4); }
  .inv-req td:is([data-label="Kam"], [data-label="Kas prašė"]),
  .inv-issues td:is([data-label="Kam"], [data-label="Kas paėmė"]) { white-space: normal; }
  .data-table--stack .inv-value-open { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); } /* a finger's size */
  /* Išduota's two button cells side by side on the card; an empty one takes no room */
  .data-table--stack td.inv-act-used,
  .data-table--stack td.inv-act-del { display: inline-flex; width: auto; padding-right: 0; padding-left: 0; }
  .data-table--stack td.inv-act-used:not(:empty) + td.inv-act-del { margin-left: var(--space-2); }
  .data-table--stack td.inv-act-used:empty,
  .data-table--stack td.inv-act-del:empty { display: none; }
  /* Išduota's card like Prašymai's (the owner, 2026-10-25: "kaip mes tvarkėm prašymus"): the item with its state on the
     first line; how much, its Vertė (who sees prices) and Kam on the second; Kas paėmė with "paimta …" on the third;
     Sunaudota šiandien and Ištrinti in the foot, a lone Ištrinti ends the last line. The item's cell hands its two
     parts (the words, how much) to the card's lines. */
  .data-table--stack.inv-issues td.inv-what { display: contents; }
  .data-table--stack.inv-issues .inv-what-text { order: 1; flex: 1 1 0; min-width: 0; padding-block: 0.125rem; line-height: 1.25rem; }
  .data-table--stack.inv-issues .inv-what > .row-sub { order: 4; padding-block: 0.125rem; color: var(--text); font-size: inherit; line-height: 1.25rem; } /* a value like Kiekis */
  .data-table--stack.inv-issues td.inv-value { order: 4; width: auto; }
  .data-table--stack.inv-issues td[data-label="Kam"] { order: 5; flex: 0 1 auto; width: auto; min-width: 0; }
  .data-table--stack.inv-issues td[data-label="Kas paėmė"] { order: 7; }
  .data-table--stack.inv-issues td.inv-act-used { order: 8; }
  .data-table--stack.inv-issues td.inv-act-del,
  .data-table--stack.inv-issues td.inv-act-used:not(:empty) + td.inv-act-del { order: 9; margin-left: auto; }
  .inv-issues td.inv-act-del > .btn--delete { margin-right: calc(-1 * var(--space-3)); } /* its word ends on the card's edge */
  /* Ištrinti alone (sunaudota, someone else's): it ends Kas paėmė's line, one text line high, its tap area 44 px */
  .data-table--stack.inv-issues tbody tr:has(> td.inv-act-used:empty) > td[data-label="Kas paėmė"] { flex: 1 1 0; min-width: 0; }
  .data-table--stack.inv-issues td.inv-act-used:empty + td.inv-act-del { padding-top: 0.125rem; }
  .data-table--stack.inv-issues td.inv-act-used:empty + td.inv-act-del > .btn--delete { position: relative; min-height: 0; border-block-width: 0; }
  .data-table--stack.inv-issues td.inv-act-used:empty + td.inv-act-del > .btn--delete::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) 0; }
  /* "paimta …" right after the name; a long name sends it whole to the next line, flush left */
  .inv-issues td[data-label="Kas paėmė"] .row-sub { display: inline; }
  .inv-issues td[data-label="Kas paėmė"] .row-sub::before { content: " "; margin-right: var(--space-1); white-space: normal; }
  /* Vertė one text line high (no row of its own), its tap area 44 px around the sum */
  .data-table--stack.inv-issues .inv-value-open { position: relative; display: inline-block; min-width: 0; min-height: 0; }
  .data-table--stack.inv-issues .inv-value-open::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2); }
  /* back from the value dialog (#verte-pk): the whole card marked, not its cells one by one */
  .inv-issues tbody tr:has(> td.inv-value:target) { background: var(--selected); }
  .inv-issues tbody tr:has(> td.inv-value:target) > td { background: transparent; }
  /* Sandėlis' product card in the same family (the owner, 2026-10-25: "sandėlis ... baisu"): the name on the first line
     with Baigėsi / Baigiasi at its right end (the badge stays in the Likutis cell and is only placed there), Likutis,
     Kaina and Vertė on the next, Ištrinti at the right end of the last line. Ištrinti has a column of its own (the
     card's right padding), so the numbers wrap before it, never under it; the name goes across it. */
  .data-table--stack.inv-stock tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
  .data-table--stack.inv-stock tbody tr:has(> td.inv-actions > .btn) { padding-right: calc(var(--space-4) + 3.375rem); } /* + Ištrinti's 54 px */
  .data-table--stack.inv-stock td { width: auto; line-height: 1.25rem; }
  .data-table--stack.inv-stock td.inv-what { flex: 0 0 100%; min-width: 0; }
  .data-table--stack.inv-stock tbody tr:has(> td.inv-actions > .btn) > td.inv-what { flex-basis: calc(100% + 3.375rem); margin-right: -3.375rem; }
  .data-table--stack.inv-stock tbody tr:has(.badge) > td.inv-what { padding-right: 6rem; } /* the badge's room */
  .inv-stock td[data-label="Likutis"] .badge { position: absolute; top: calc(var(--space-3) + 0.0625rem); right: var(--space-4); }
  /* the name's link one text line high (no empty space above a one-line name), its tap area 44 px */
  .data-table--stack.inv-stock .row-title { position: relative; display: block; width: fit-content; min-width: 0; min-height: 0; }
  .data-table--stack.inv-stock .row-title::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) 0; }
  /* Ištrinti one text line high at the right end of the last line, its tap area 44 px (Išlaidos' card too) */
  .data-table--stack:is(.inv-stock, .inv-expenses) td.inv-actions { position: absolute; right: var(--space-4); bottom: var(--space-3); display: block; padding: 0.125rem 0; }
  .data-table--stack:is(.inv-stock, .inv-expenses) td.inv-actions:not(:has(.btn)) { display: none; }
  :is(.inv-stock, .inv-expenses) td.inv-actions > .btn--delete { position: relative; min-height: 0; margin-right: calc(-1 * var(--space-3)); border-block-width: 0; }
  :is(.inv-stock, .inv-expenses) td.inv-actions > .btn--delete::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) 0; }
  .inv-photo-name { max-width: none; }
  .inv-send { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-left: 0; }
  .photo-view-head { padding-left: var(--space-4); }
  .photo-view-stage { padding: 0 var(--space-2) var(--space-2); }
  .data-table.inv-list tfoot { display: block; width: 100%; }
  .data-table.inv-list tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-thin) solid var(--line); }
  .data-table.inv-list tfoot tr:first-child { border-top-color: var(--line-strong); }
  .data-table.inv-list tfoot :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
  .data-table.inv-list tfoot td.num { text-align: right; white-space: nowrap; }
  .data-table.inv-list tfoot td:empty { display: none; }
  .inv-search { flex-basis: 100%; }
  .inv-actions .btn { margin-block: 0; }
  .inv-fields--correct { grid-template-columns: minmax(0, 1fr); }
  /* Išlaidos' form: one field per row, the three sums side by side (be PVM, PVM %, su PVM) */
  .inv-fields.inv-fields--expense { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); }
  .inv-fields--expense > .field:nth-child(-n+3),
  .inv-fields--expense > .inv-field-wide,
  .inv-fields--expense > .inv-inline-submit { grid-column: 1 / -1; }
  /* Išlaidos' card: no "Meistrė" line for the whole salon's costs; Be PVM and Su PVM on one line */
  .data-table--stack td.inv-exp-none { display: none; }
  .data-table--stack .inv-exp-master { display: inline; max-width: none; }
  .data-table--stack td.inv-exp-sum { display: inline-block; width: auto; margin-right: var(--space-4); }
  .inv-exp-file { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* its totals: the words, then Be PVM and Su PVM in two columns, named in the first row */
  .data-table.inv-expenses tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; align-items: end; column-gap: var(--space-3); }
  .data-table.inv-expenses tfoot tr:first-child td[data-label]::before { display: block; }
  /* Išlaidos' cost card in the same family (the owner, 2026-10-25: "taip pat sutvarkyti"): the name with its date at
     the right end on the first line; "Pirkinių sąskaita" or the cost's file, and Meistrė, on the second; Be PVM and
     Su PVM on the third; Pastaba last, as Komentaras on Prašymai, so it and the file are never on neighbouring lines
     (each keeps its whole 44 px tap area). Ištrinti ends the last line as on Sandėlis (the rules above), and that
     line (Pastaba, or Su PVM) leaves it its room. The name's cell hands its two parts to the card's lines. */
  .data-table--stack.inv-expenses tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
  .data-table--stack.inv-expenses tbody tr::before { content: ""; order: 3; flex: 0 0 100%; } /* the line break after the date */
  .data-table--stack.inv-expenses tbody tr::after { content: ""; order: 6; flex: 0 0 100%; } /* and before the sums */
  .data-table--stack.inv-expenses tbody td { width: auto; line-height: 1.25rem; }
  .data-table--stack.inv-expenses td.inv-what { display: contents; }
  .data-table--stack.inv-expenses .inv-what > :first-child { order: 1; flex: 1 1 0; max-width: fit-content; min-width: 0; padding-block: 0.125rem; line-height: 1.25rem; }
  .data-table--stack.inv-expenses tbody td:first-child { order: 2; flex: none; margin-left: auto; }
  .data-table--stack.inv-expenses .inv-what > .row-sub { order: 4; padding-block: 0.125rem; line-height: 1.25rem; }
  .data-table--stack.inv-expenses td[data-label="Meistrė"] { order: 5; min-width: 0; white-space: normal; }
  .data-table--stack.inv-expenses tbody td[data-label]::before { line-height: 1; } /* the small label never makes its line taller */
  .data-table--stack.inv-expenses td.inv-exp-sum { order: 7; margin-right: 0; }
  .data-table--stack.inv-expenses td.inv-req-note { order: 8; flex: 0 0 100%; }
  .data-table--stack.inv-expenses tbody tr:has(> td.inv-actions > .btn) > td.inv-req-note { flex-basis: calc(100% - 3.375rem); margin-right: 3.375rem; }
  .data-table--stack.inv-expenses tbody tr:has(> td.inv-actions > .btn):has(> td.inv-req-note--none) > td.inv-exp-sum + td.inv-exp-sum { margin-right: 3.375rem; }
  /* the name's link and the file's link one text line high, their tap areas 44 px (also around a short word) */
  .data-table--stack.inv-expenses :is(.row-title, .inv-exp-file) { position: relative; display: inline-block; min-width: 0; min-height: 0; }
  .data-table--stack.inv-expenses :is(.row-title, .inv-exp-file)::after { content: ""; position: absolute; inset: calc((1.25rem - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2); }
  /* Pastaba's label inside its button, so its second line starts under the label; the whole line opens it, 44 px high */
  .data-table--stack.inv-expenses td.inv-req-note::before { content: none; }
  .data-table--stack.inv-expenses .inv-req-note-open { width: auto; }
  .data-table--stack.inv-expenses .inv-req-note-open::before { content: "Pastaba"; display: inline-block; margin-right: 0.25em; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1; }
  .data-table--stack.inv-expenses .inv-req-note-open::after { inset: min(0px, (100% - var(--tap)) / 2) 0; }
  .inv-dup-link { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* Prekė be sąskaitos card: the name across, how many and the unit side by side, the price across (its label is long) */
  .inv-new-table .inv-line-price { grid-column: 1 / -1; }
  .inv-new-table td.inv-line-del:has(> [hidden]) { display: none; }
  .inv-line-label .field-req { font-size: inherit; }
  .inv-lines-error { padding-inline: var(--space-4); }
  .inv-drafts-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .inv-key-link { display: inline-flex; align-items: center; min-height: var(--tap); white-space: nowrap; }
  .inv-check--sm { min-height: var(--tap); }
  /* an invoice's lines: each a small block of labelled fields, two per row */
  .inv-lines-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inv-lines-table,
  .inv-lines-table tbody,
  .inv-lines-table tfoot { display: block; width: 100%; }
  .inv-lines-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-thin) solid var(--line); }
  .inv-lines-table tbody td,
  .inv-lines-table tbody td:first-child,
  .inv-lines-table tbody td:last-child,
  .inv-lines-table tbody td.inv-line-sum { width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
  .inv-lines-table .inv-line-name,
  .inv-lines-table .inv-line-product { grid-column: 1 / -1; }
  .inv-line-label { position: static; display: block; width: auto; height: auto; margin-bottom: 0.25rem; overflow: visible; clip: auto; color: var(--text-muted); font-size: var(--fs-xs); white-space: normal; }
  .inv-lines-table .inv-num { text-align: left; }
  .inv-lines-table tbody td.num { text-align: left; }
  .inv-lines-table td.inv-line-sum { align-self: center; font-weight: var(--weight-semibold); }
  .inv-lines-table td.inv-line-sum::before { content: "Suma "; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--weight-regular); }
  .inv-lines-table td.inv-line-del { align-self: center; }
  .inv-lines-table tfoot tr { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
  .inv-lines-table tfoot :is(th, td) { padding: 0; border: 0; }
  .inv-lines-table tfoot tr:first-child { border-top: var(--border-thin) solid var(--line-strong); }
  .inv-lines-table tfoot tr:first-child :is(th, td) { border: 0; }
  .inv-lines-table tfoot td:empty { display: none; }
  .inv-buy-actions > form,
  .inv-buy-actions .btn { width: 100%; }
  .inv-lines-table :is(th, td):first-child { padding-left: var(--space-4); }
  .inv-lines-table :is(th, td):last-child { padding-right: var(--space-4); }
  .inv-lines-diff,
  .inv-lines-add { padding-inline: var(--space-4); }
  /* the pages and "Kitas puslapis" under the title, from the left; "Sujungti" under the words */
  .inv-pages { margin-left: 0; justify-content: flex-start; }
  .inv-add-page-hint { text-align: left; }
  .inv-similar { flex-wrap: wrap; }
  .inv-similar > span { flex-basis: calc(100% - 0.5rem - var(--space-3)); } /* the words beside the dot, the button under them */
  .inv-similar-btn { margin-left: calc(0.5rem + var(--space-3)); }
  .perm-list { columns: 1; }
  .perm-item { min-height: var(--tap); align-items: center; }
  .perm-item input { margin-top: 0; }
  .user-sections-edit { min-height: var(--tap); }
}