/*
  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; }

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

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

.field { display: grid; gap: 0.375rem; }
.field-label { font-size: var(--fs-md); font-weight: var(--weight-medium); }

.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); }
.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); }
textarea.field-input { min-height: 5.5rem; resize: vertical; line-height: var(--lh-text); }
select.field-input { padding-right: var(--space-6); }

.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--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: 13.5rem; height: auto; }
.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-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-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-1);
  padding: var(--space-2) var(--space-2) var(--space-3);
  color: var(--text);
  text-decoration: none;
}
.sidebar-brand img { width: 10.5rem; height: auto; }
.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); }

.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 mode band: shown only in BANDOMASIS mode */
.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); }
  .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); }
  .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; }
  .date-nav { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap); width: 100%; }
  .date-nav .btn { min-height: var(--tap); }
  .date-nav input[type="date"] { grid-column: 1 / 3; width: 100%; min-height: var(--tap); }
  .date-nav button[type="submit"] { grid-column: 3 / 4; }
  .toolbar-field { width: 100%; }
  .toolbar-field .field-input { flex: 1; min-height: var(--tap); }
}

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

/* ==== 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); } }

/* ==== 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)); }
}

/* ==== Calendar (Kalendorius) ================================================================= */
/* Day view: one column per master, 15-minute rows from 08:00. The server writes on each visit
   --col (master column, 1-based) and --start / --end (row lines: 1 = 08:00, +1 per 15 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: 1.5rem;
  --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, 52), 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 4;
  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) * 4), 100% calc(var(--slot) * 2);
}
.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); }

.cal-event[data-size="s"] .cal-event-btn { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-2); padding-block: 0; }
.cal-event[data-size="s"] .cal-service,
.cal-event[data-size="s"] .cal-flags,
.cal-event[data-size="m"] .cal-flags { display: none; }
.cal-event[data-size="m"] .cal-service { -webkit-line-clamp: 1; }

.cal-now { position: absolute; left: var(--cal-axis); right: 0; top: calc(var(--cal-head) + var(--now) / 15 * 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(11rem, 1fr)); overflow-x: auto; }
.cal-week-day { min-width: 0; padding: var(--space-3) var(--space-3) var(--space-4); border-left: var(--border-thin) solid var(--line); }
.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); }

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

/* 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); }

/* 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); }

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

/* 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); }
.log-filters .field-input { min-height: var(--tap); }
.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; }
.log-table .log-phone { white-space: nowrap; }
.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)); }
  .log-filters .field:first-child,
  .log-filter-phone { grid-column: 1 / -1; max-width: none; }
  .log-filters input[type="date"] { width: 100%; }
  .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"
      ".    phone  phone"
      ".    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: 1.3; }
  .log-table .log-row > .log-who { grid-area: who; }
  .log-table .log-row > .log-phone { grid-area: phone; }
  .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 .log-phone a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .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: time and result, then the numbers */
  .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-result { order: -1; flex: 1 1 calc(100% - 5rem); }
  .sync-runs .sync-run-time { order: -2; flex: 0 0 auto; }
}

/* ==== 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; }

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


/* ==== 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; }
}

/* ==== 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; }
}