:root {
  --bg: #f5f6f2;
  --panel: #ffffff;
  --text: #1f2a22;
  --muted: #6f786f;
  --line: #dfe4dc;
  --accent: #2f6b43;
  --accent-hover: #265938;
  --accent-soft: #e9f1eb;
  --danger: #a23d3d;
  --shadow: 0 18px 50px rgba(24, 40, 28, .12);
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

/* v0.5.7.1 — explicit blocking feedback for server-side list operations. */
.process-overlay{
  position:fixed;
  z-index:5000;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(244,247,243,.78);
  backdrop-filter:blur(3px);
  cursor:progress;
}
.process-overlay-card{
  display:flex;
  align-items:center;
  gap:15px;
  width:min(430px,calc(100vw - 32px));
  padding:18px 20px;
  border:1px solid #ced9cf;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 55px rgba(24,40,28,.20);
}
.process-overlay-card>div{display:grid;gap:4px}
.process-overlay-card strong{font-size:16px}
.process-overlay-card span{color:var(--muted);font-size:13px;line-height:1.4}
.process-overlay-spinner{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border:3px solid #d8e5db;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:farmbase-process-spin .75s linear infinite;
}
@keyframes farmbase-process-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.process-overlay-spinner{animation-duration:1.8s}}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  font-size: 22px;
}

.brand-name {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

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

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.role-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.page {
  max-width: 1560px;
  margin: 0 auto;
  padding: 28px;
}

.hero-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 5px;
  font-size: 30px;
}

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

.summary {
  text-align: right;
  font-size: 14px;
}

.summary > span:first-child {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(24, 40, 28, .035);
}

.filters-panel {
  padding: 18px;
  margin-bottom: 18px;
}

.filters-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input, select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfd6cd;
  border-radius: 9px;
  background: white;
  color: var(--text);
  padding: 9px 11px;
  outline: none;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,107,67,.12);
}

select:disabled {
  background: #f0f2ef;
  color: #9aa19a;
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 700;
}

.btn-primary {
  color: white;
  background: var(--accent);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: white;
  border-color: #ccd4ca;
  color: var(--text);
}

.btn-secondary:hover { background: #f4f6f3; }

.btn:disabled {
  cursor: default;
  opacity: .45;
}

.btn-wide { width: 100%; }

.table-panel {
  /* Do not create a vertical scroll container on desktop:
     sticky table headers must attach to the browser viewport. */
  overflow: visible;
}

.table-wrap {
  overflow: visible;
  border-radius: var(--radius) var(--radius) 0 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1120px;
}

thead th {
  position: sticky;
  top: 72px;
  z-index: 12;
  padding: 11px 14px;
  text-align: left;
  background: #edf1ec;
  color: #536057;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid #cfd7cd;
  box-shadow: 0 1px 0 rgba(31, 42, 34, .03);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

/* v0.5.2.1 — denser location columns, wider phone workspace.
   The organization cell already wraps to several lines, so region/address can
   give space to multiple phone rows + Telegram/status controls. */
thead th:nth-child(1), tbody td:nth-child(1) { width: 22%; }
thead th:nth-child(2), tbody td:nth-child(2) { width: 13%; }
thead th:nth-child(3), tbody td:nth-child(3) { width: 18%; }
thead th:nth-child(4), tbody td:nth-child(4) { width: 19%; }
thead th:nth-child(5), tbody td:nth-child(5) { width: 12%; }
thead th:nth-child(6), tbody td:nth-child(6) { width: 16%; }

tbody td:nth-child(4),
tbody td:nth-child(5) {
  word-break: normal;
  overflow-wrap: anywhere;
}

tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf0eb;
  vertical-align: top;
  font-size: 14px;
}

tbody tr {
  transition: background .12s ease;
  cursor: pointer;
}

tbody tr:hover { background: #f8faf7; }

.org-name {
  font-weight: 800;
  line-height: 1.3;
}

.org-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.org-activity {
  margin-top: 3px;
  color: #526a58;
  font-size: 12px;
  line-height: 1.28;
  font-weight: 650;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 650;
}

.status-chip {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  background: #eef2ec;
  font-size: 12px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.page-info {
  min-width: 150px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.page-size {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.page-size select {
  width: 86px;
  min-height: 38px;
}

.loading, .detail-loading {
  padding: 20px;
  color: var(--muted);
}

.inline-error, .form-error {
  color: var(--danger);
  background: #fff0f0;
  border: 1px solid #efcccc;
  border-radius: 9px;
  padding: 10px 12px;
}

.inline-error { margin: 14px; }

.empty-state {
  padding: 34px;
  text-align: center;
  color: var(--muted);
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 15%, rgba(47,107,67,.12), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(47,107,67,.10), transparent 36%),
    var(--bg);
}

.login-card {
  width: min(430px, 100%);
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.brand-login {
  margin-bottom: 26px;
}

.login-card form {
  display: grid;
  gap: 14px;
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(13, 20, 15, .34);
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(720px, 94vw);
  height: 100vh;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .18s ease;
  background: white;
  box-shadow: -18px 0 50px rgba(18, 32, 22, .18);
}

.detail-panel.open { transform: translateX(0); }

.detail-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.detail-header h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: white;
  font-size: 24px;
  line-height: 1;
}

.detail-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.detail-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.detail-item dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.detail-item dd {
  margin: 4px 0 0;
  line-height: 1.4;
}

.contact-list, .activity-list {
  display: grid;
  gap: 8px;
}

.contact-row, .activity-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafbf9;
}

.primary-mark {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .field-search { grid-column: span 3; }
}


@media (max-width: 900px) {
  .table-panel {
    overflow: hidden;
  }

  .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  thead th {
    position: static;
  }
}

@media (max-width: 720px) {
  .topbar {
    padding: 10px 14px;
  }
  .brand-subtitle { display: none; }
  .user-chip #user-name { display: none; }
  .page { padding: 16px 10px 24px; }
  .hero-row { align-items: start; }
  h1 { font-size: 25px; }
  .filters-grid { grid-template-columns: 1fr; }
  .field-search { grid-column: auto; }
  .filter-actions .btn { flex: 1; }
  .pagination { flex-wrap: wrap; }
  .page-size { width: 100%; margin-left: 0; }
  .detail-grid { grid-template-columns: 1fr; }
}


.crm-filters-grid { grid-template-columns: minmax(260px,1.6fr) repeat(4,minmax(150px,1fr)); }
.detail-panel-wide { width: min(820px, 96vw); }
.work-cell { display:grid; gap:4px; }
.work-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.crm-chip { display:inline-flex; align-items:center; max-width:100%; padding:3px 7px; border-radius:999px; background:#eef2ec; color:#465348; font-size:11px; font-weight:750; }
.crm-chip.unprocessed { background:#f2f2f0; color:#777; }
.crm-chip.overdue { background:#fff0ec; color:#a54735; }
.crm-chip.updated { background:#fff8df; color:#866b18; }
.work-meta { color:var(--muted); font-size:11px; line-height:1.25; }
.crm-section { background:#fbfcfa; }
.crm-section h3 { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.crm-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.crm-grid .field.full { grid-column:1/-1; }
textarea { width:100%; min-height:86px; resize:vertical; border:1px solid #cfd6cd; border-radius:9px; padding:9px 11px; color:var(--text); background:#fff; outline:none; font:inherit; }
textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,107,67,.12); }
.crm-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.crm-divider { height:1px; background:var(--line); margin:16px 0; }
.timeline { display:grid; gap:9px; }
.timeline-item { border-left:3px solid #d8dfd6; padding:8px 10px; background:#fafbf9; border-radius:0 8px 8px 0; }
.timeline-item strong { display:block; font-size:13px; }
.timeline-meta { color:var(--muted); font-size:11px; margin-top:3px; }
.contact-row.review-invalid { border-color:#edc7c0; background:#fff8f6; }
.contact-row.review-confirmed { border-color:#c9dfcf; background:#f7fbf8; }
.review-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.btn-mini { min-height:30px; padding:4px 8px; border-radius:7px; font-size:11px; }
.btn-good { color:#27613b; border-color:#bcd5c4; background:#f5faf6; }
.btn-bad { color:#974433; border-color:#e1beb6; background:#fff8f6; }
.crm-contact-added { border-left:3px solid var(--accent); }
.notice { padding:10px 12px; border-radius:9px; background:#fff8df; color:#6e5a1c; font-size:13px; margin-bottom:12px; }
.assignment-box { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.unassigned-box { padding:14px; border:1px dashed #c8d0c6; border-radius:10px; background:#fafbf9; }
.admin-user-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-user-form .btn { align-self:end; }
.users-list { display:grid; gap:8px; }
.user-row { border:1px solid var(--line); border-radius:10px; padding:11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.user-name { font-weight:800; }
.user-email { color:var(--muted); font-size:12px; }
.user-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.user-actions select { min-height:32px; padding:4px 7px; width:auto; }
.small-message { margin-top:10px; padding:8px 10px; border-radius:8px; background:#eef5ef; color:#2f6b43; font-size:12px; }
.users-panel { width:min(700px,96vw); }
.date-hot { color:#a54735; font-weight:800; }

@media (max-width:1180px) {
  .crm-filters-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .crm-filters-grid .field-search { grid-column:span 3; }
}
@media (max-width:720px) {
  .crm-filters-grid { grid-template-columns:1fr; }
  .crm-filters-grid .field-search { grid-column:auto; }
  .crm-grid, .admin-user-form { grid-template-columns:1fr; }
  .assignment-box { grid-template-columns:1fr; }
  .user-row { grid-template-columns:1fr; }
  .user-actions { justify-content:flex-start; }
}

/* v0.2.1 — bulk assignment and manager operator administration */
.bulk-panel {
  padding: 16px 18px;
  margin-bottom: 18px;
}
.bulk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.bulk-head h2 {
  margin: 0 0 3px;
  font-size: 17px;
}
.bulk-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.bulk-state {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f2ef;
  color: #6f786f;
  font-size: 11px;
  font-weight: 750;
}
.bulk-state.ready { background: #e9f1eb; color: var(--accent); }
.bulk-state.applied { background: #e7f4ea; color: #27613b; }
.bulk-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.bulk-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}
.bulk-preview-result {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d8dfd6;
  border-radius: 9px;
  background: #fafbf9;
  color: #465348;
  font-size: 12px;
  line-height: 1.45;
}
.bulk-preview-result strong { color: var(--text); }
.bulk-warning {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #ead9a8;
  border-radius: 9px;
  background: #fff8df;
  color: #725d19;
  font-size: 12px;
}
.secondary-assignees {
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f4f7f3;
  color: #526058;
  font-size: 12px;
}

@media (max-width: 900px) {
  .bulk-grid { grid-template-columns: 1fr 1fr; }
  .bulk-actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .bulk-head { display: block; }
  .bulk-state { display: inline-flex; margin-top: 8px; }
  .bulk-grid { grid-template-columns: 1fr; }
  .bulk-actions { grid-column: auto; align-items: stretch; }
  .bulk-actions .btn { flex: 1; min-height:64px; height:auto; white-space:normal; line-height:1.15; }
}


/* FarmBase-native confirmation dialog.
   Replaces browser confirm() so the user never sees technical hostname UI. */
.app-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(16, 25, 18, .42);
  backdrop-filter: blur(3px);
}

.app-confirm-card {
  width: min(520px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(18, 32, 22, .24);
}

.app-confirm-title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 800;
}

.app-confirm-message {
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
}

.app-confirm-details {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f5f7f4;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.btn-confirm-danger {
  color: #fff;
  border-color: #8d3c3c;
  background: #9d4545;
}

.btn-confirm-danger:hover {
  background: #873939;
}


/* v0.3.0 — responsibility zones, operator monitoring, mobile operator queue */
.rules-list,.monitor-summary,.monitor-feed{display:grid;gap:10px}.rule-row,.monitor-card{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.rule-row.inactive{opacity:.58}.check-row{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px;border-radius:10px;background:#f6f8f5;color:var(--muted);font-size:13px;line-height:1.45}.check-row input{margin-top:3px}.monitor-panel{width:min(920px,96vw)}.monitor-filters{display:grid;grid-template-columns:180px minmax(240px,1fr);gap:12px}.monitor-grid{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:8px;margin-top:10px}.monitor-grid .detail-item{padding:8px;background:#f7f8f6;border-radius:8px}.monitor-event{cursor:pointer}.mobile-queue{display:none}.mobile-farmer-card{min-height:58vh;display:flex;flex-direction:column;gap:14px;padding:8px 2px}.mobile-farmer-card h2{margin:0;font-size:25px;line-height:1.18}.mobile-meta,.mobile-address,.mobile-work{font-size:15px;line-height:1.45}.mobile-address{color:var(--muted)}.mobile-status{display:flex;gap:8px}.mobile-contact-actions{display:grid;grid-template-columns:1fr auto;gap:10px}.mobile-call{text-align:center}.mobile-work{margin-top:auto;padding:12px;border-radius:10px;background:#f6f8f5}.mobile-nav,.mobile-queue-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.mobile-nav .btn{flex:1}
@media(max-width:760px){
  body.role-operator .table-panel{display:none}
  body.role-operator .mobile-queue{display:block}
  body.role-operator .filters-panel{display:none}
  body.role-operator .filters-panel.mobile-expanded{display:block}
  body.role-operator .hero-row{margin-bottom:10px}
  body.role-operator .page{padding:12px}
  body.role-operator .topbar{padding:10px 12px}
  body.role-operator .brand-subtitle{display:none}
  body.role-operator .user-chip{display:none}
  body.role-operator .detail-panel{width:100vw;max-width:none}
  body.role-operator .detail-grid,body.role-operator .crm-grid{grid-template-columns:1fr}
  body.role-operator .mobile-farmer-card{min-height:calc(100vh - 270px)}
  .monitor-grid{grid-template-columns:repeat(2,1fr)}
  .monitor-filters{grid-template-columns:1fr}
  .rule-row,.monitor-card{display:block}.rule-row .user-actions{margin-top:10px}
}


/* v0.4.0 — mobile operator workspace */
.mobile-progress{height:4px;border-radius:999px;background:#e6ebe5;overflow:hidden}.mobile-progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}.mobile-queue-tools{display:flex;align-items:center;gap:8px}.btn-icon-mobile{min-width:40px;padding:8px 10px;background:#fff;border:1px solid #ccd4ca;color:var(--text);font-size:20px}.mobile-card-top{display:grid;gap:8px}.mobile-card-top h2{margin:0;font-size:24px;line-height:1.16}.mobile-activity{font-weight:800;color:var(--accent);font-size:15px;line-height:1.35}.mobile-location{font-weight:700;font-size:14px}.mobile-tax{font-size:12px;color:var(--muted)}.mobile-contact-stack{display:grid;gap:8px}.mobile-call-main,.mobile-email{text-align:center;text-decoration:none;min-height:48px;display:flex;align-items:center;justify-content:center}.mobile-extra-contacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-mobile-contact{text-align:center;text-decoration:none;overflow:hidden;text-overflow:ellipsis}.mobile-no-contact{padding:12px;border-radius:10px;background:#f5f6f3;color:var(--muted);text-align:center}.mobile-section-title{font-size:17px;font-weight:800;margin-bottom:2px}.mobile-work-form{display:grid;gap:11px;padding-top:4px}.mobile-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-work-grid .field>span,.mobile-work-form>.field>span{font-size:11px}.mobile-control{min-height:44px}.mobile-notes{width:100%;min-height:78px;resize:vertical;border:1px solid #cfd6cd;border-radius:9px;background:#fff;color:var(--text);padding:10px 11px;font:inherit;outline:none}.mobile-notes:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,67,.12)}.mobile-quick-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mobile-quick-outcome{min-height:38px;padding:7px 9px;background:#f5f7f4;border:1px solid #d8dfd6;color:var(--text);font-size:13px}.mobile-quick-outcome.active{background:var(--accent-soft);border-color:#9fbca7;color:var(--accent)}.mobile-save-actions{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(170px,1.3fr);gap:9px}.mobile-save-actions .btn{min-height:48px}.mobile-current-work{padding:10px 12px;border-radius:10px;background:#f5f7f4;color:var(--muted);font-size:13px;line-height:1.4}.btn-link-mobile{width:100%;min-height:42px;background:transparent;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.mobile-workspace-loading{display:grid;place-items:center;min-height:160px;color:var(--muted)}.mobile-empty-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:30px}.mobile-empty-card strong{color:var(--text);font-size:20px}.mobile-toast{position:fixed;z-index:200;left:50%;bottom:84px;transform:translate(-50%,18px);padding:10px 16px;border-radius:999px;background:#1f2a22;color:#fff;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:.18s ease;box-shadow:0 10px 30px rgba(0,0,0,.18)}.mobile-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:820px){
  body.role-operator{overflow:hidden}
  body.role-operator .topbar{min-height:60px;height:60px;padding:8px 12px}
  body.role-operator .brand{gap:9px}
  body.role-operator .brand-mark{width:36px;height:36px;border-radius:10px;font-size:18px}
  body.role-operator .brand-name{font-size:17px}
  body.role-operator .brand-subtitle,body.role-operator .user-chip{display:none}
  body.role-operator .topbar-actions{gap:6px}
  body.role-operator #logout-button{min-height:38px;padding:7px 11px;font-size:13px}
  body.role-operator .page{height:calc(100dvh - 60px);max-width:none;padding:0}
  body.role-operator .hero-row,body.role-operator .table-panel{display:none}
  body.role-operator .mobile-queue{display:grid!important;grid-template-rows:auto 4px minmax(0,1fr) auto;height:100%;padding:9px 10px 8px;border:0;border-radius:0;background:var(--bg);box-shadow:none;gap:8px}
  body.role-operator .mobile-queue-head{min-height:38px}
  body.role-operator .mobile-queue-position{display:flex;align-items:baseline;gap:7px;font-size:13px}
  body.role-operator #mobile-counter{font-size:18px;color:var(--accent)}
  body.role-operator .mobile-card{min-height:0;overflow:hidden}
  body.role-operator .mobile-farmer-card{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:13px;padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:none;scrollbar-width:none;-ms-overflow-style:none}
  body.role-operator .mobile-card-body{display:grid;gap:13px}
  body.role-operator .mobile-nav{padding-bottom:max(0px,env(safe-area-inset-bottom));gap:8px}
  body.role-operator .mobile-nav .btn{min-height:48px}
  body.role-operator .filters-panel{display:none;position:fixed;z-index:45;inset:60px 0 0;margin:0;padding:16px;border-radius:0;border:0;overflow-y:auto;background:#fff;box-shadow:none}
  body.role-operator .filters-panel.mobile-expanded{display:block}
  body.role-operator .filters-grid,body.role-operator .crm-filters-grid{grid-template-columns:1fr 1fr;gap:10px}
  body.role-operator .field-search{grid-column:1/-1}
  body.role-operator .filter-actions{position:sticky;bottom:0;margin:18px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  body.role-operator .filter-actions .btn{flex:1;min-height:46px}
  body.role-operator.mobile-filters-open .mobile-queue{filter:blur(1px)}
  body.role-operator .detail-panel{width:100vw;max-width:none}
  body.role-operator .detail-grid,body.role-operator .crm-grid{grid-template-columns:1fr}
  body.role-operator .detail-header{padding:14px 16px}
  body.role-operator .detail-section{padding:16px}
  .app-confirm-backdrop{padding:12px}.app-confirm-card{padding:20px;border-radius:16px}.app-confirm-actions{display:grid;grid-template-columns:1fr 1fr}.app-confirm-actions .btn{min-height:46px}
}
@media(max-width:420px){
  body.role-operator .filters-grid,body.role-operator .crm-filters-grid{grid-template-columns:1fr}
  body.role-operator .field-search{grid-column:auto}
  .mobile-work-grid{grid-template-columns:1fr 1fr}
  .mobile-save-actions{grid-template-columns:1fr 1.5fr}
  .mobile-card-top h2{font-size:22px}
}

.mobile-filter-head{display:none}
@media(max-width:820px){body.role-operator .mobile-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:20px}body.role-operator .mobile-filter-head .icon-button{width:42px;height:42px}}


/* v0.4.2 — FarmBase / Sensera branding + PWA */
.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(24, 74, 43, .12);
}

.brand-logo-login {
  width: 68px;
  height: 68px;
  border-radius: 18px;
}

.brand-madeby {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: #7b837c;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .01em;
}

.brand-madeby img {
  width: 12px;
  height: 12px;
  display: block;
}

.brand-madeby strong {
  color: var(--accent);
  font-weight: 800;
}

.sensera-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 12px 8px;
  color: #7b837c;
  font-size: 11px;
}

.sensera-footer img {
  width: 18px;
  height: 18px;
}

.sensera-footer strong {
  color: var(--accent);
  font-weight: 800;
}

.pwa-install-button {
  border-color: #b7cbbb;
  color: var(--accent);
}

@media (display-mode: standalone) {
  .pwa-install-button { display: none !important; }
}

@media (max-width: 820px) {
  body.role-operator .brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  body.role-operator .brand-madeby,
  body.role-operator .sensera-footer {
    display: none;
  }

  body.role-operator .pwa-install-button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
  }
}


/* v0.4.4 — operator card: previous work is visible, not hidden in history */
.mobile-last-work {
  margin: 2px 0 16px;
  padding: 14px 15px;
  border: 1px solid #dce7dc;
  border-radius: 14px;
  background: #f7faf6;
}

.mobile-last-work-title {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.mobile-last-work-meta {
  color: var(--accent);
  font-size: 14px;
  font-weight: 750;
}

.mobile-last-work-comment {
  margin-top: 8px;
  color: #505a52;
  font-size: 14px;
  line-height: 1.45;
}

.mobile-last-work-comment strong {
  color: var(--text);
}


/* v0.4.5 — stable FarmBase ID */
.mobile-farmbase-id {
  margin: 3px 0 5px;
  color: #788178;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}


/* v0.4.6 — Telegram + contact person */
.contact-inline-actions{display:inline-flex;align-items:center;gap:7px;max-width:100%}
.telegram-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;text-decoration:none}
.telegram-link svg,.mobile-telegram-main svg,.mobile-telegram-extra svg{width:20px;height:20px;fill:currentColor}
.telegram-link-small{width:30px;height:30px;border:1px solid #b8d5c0;border-radius:9px;color:var(--accent);background:#f7faf6}
.contact-person-name{margin-bottom:3px;color:var(--text);font-size:14px;font-weight:800}
.mobile-contact-person{display:flex;align-items:baseline;gap:7px;margin:1px 2px 7px;color:var(--text);font-size:14px}
.mobile-contact-person strong{font-weight:800}.mobile-contact-person span{color:var(--muted);font-size:12px}
.mobile-primary-contact-row{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:8px;align-items:stretch}
.mobile-primary-contact-row .mobile-call-main{min-width:0}
.mobile-telegram-main{min-width:58px;padding:0;color:#fff;border-color:#258acb;background:#2aabee}
.mobile-extra-contact-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:7px;align-items:end}
.mobile-extra-contact-main{min-width:0}.mobile-extra-contact-person{margin:0 2px 4px;overflow:hidden;color:var(--muted);font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.mobile-telegram-extra{min-width:46px;min-height:42px;padding:0;color:#229ed9;border-color:#b9ddeb;background:#f4fbfe}
@media(max-width:560px){.mobile-primary-contact-row{grid-template-columns:minmax(0,1fr) 54px}.mobile-telegram-main{min-width:54px}}


/* v0.4.7 — operator UI cleanup + settings */
body.role-operator .mobile-card,body.role-operator .mobile-farmer-card{-webkit-overflow-scrolling:touch}
body.role-operator .mobile-card::-webkit-scrollbar,body.role-operator .mobile-farmer-card::-webkit-scrollbar{width:0;height:0;display:none}
body.role-operator .settings-button{display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:1}
body.role-operator .topbar-actions{gap:8px}
body.role-operator .mobile-status-live{gap:10px;flex-wrap:wrap}
body.role-operator .mobile-status-live .crm-chip{padding:7px 12px;font-size:14px;font-weight:800;border-radius:999px}
body.role-operator .mobile-status-live .crm-chip.status-primary{background:#fff2bf;color:#6c5600;border:1px solid #eedf91}
body.role-operator .mobile-status-live .crm-chip.status-secondary{background:#edf5ef;color:var(--accent);border:1px solid #cfe0d2}
body.role-operator .mobile-status-live .crm-chip.overdue{background:#ffe8e1;color:#9e3b2b;border:1px solid #f2c4b8}
body.role-operator .mobile-last-work{padding:16px 16px 15px;border:1px solid #d5e3d7;border-radius:14px;background:#f7fbf7}
body.role-operator .mobile-last-work-title{font-size:16px;font-weight:900;color:var(--text)}
body.role-operator .mobile-last-work-meta{font-size:15px;font-weight:900;color:var(--accent)}
body.role-operator .mobile-last-work-comment{font-size:15px;color:#334136}
body.role-operator .mobile-call-main{font-size:18px;font-weight:800;letter-spacing:.01em}
body.role-operator .mobile-primary-contact-row{grid-template-columns:minmax(0,1fr) 58px}
body.role-operator .mobile-extra-contacts{grid-template-columns:1fr;gap:10px}
body.role-operator .mobile-extra-contact-row{grid-template-columns:minmax(0,1fr) 46px;align-items:center}
body.role-operator .mobile-telegram-main{min-width:58px;padding:0;color:#fff;border-color:#258acb;background:#2aabee}
body.role-operator .mobile-telegram-extra{min-width:46px;min-height:42px;padding:0;color:#229ed9;border-color:#b9ddeb;background:#f4fbfe}
body.role-operator .mobile-telegram-main svg,body.role-operator .mobile-telegram-extra svg{width:20px;height:20px;fill:currentColor}
.settings-panel{width:min(460px,94vw)}
.settings-section{padding:18px 22px 22px}
.settings-stack{display:grid;gap:14px}
.settings-card{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#f7faf6}
.settings-label{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.settings-value{margin-top:4px;font-size:20px;font-weight:800;color:var(--text)}
.settings-language-field select{min-height:46px}
.settings-hint{display:block;padding:12px 14px;border-radius:12px;background:#f7f8f6;color:var(--muted);font-size:13px;line-height:1.45}
.settings-link{justify-content:center;min-height:44px;text-decoration:none}
@media(max-width:560px){body.role-operator .mobile-primary-contact-row{grid-template-columns:minmax(0,1fr) 54px}body.role-operator .mobile-telegram-main{min-width:54px}}


/* v0.4.7.2 — remove ghost side gradient from closed slide-out panels */
.detail-panel:not(.open){
  box-shadow:none !important;
  visibility:hidden;
  pointer-events:none;
}
.detail-panel.open{
  visibility:visible;
  pointer-events:auto;
  box-shadow:-18px 0 50px rgba(18,32,22,.18);
}

/* Telegram — canonical brand icon, centered and undistorted */
.telegram-brand-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.telegram-link-small{
  padding:4px;
  overflow:hidden;
  background:#fff;
  border-color:#cddde5;
}
.telegram-link-small .telegram-brand-icon{
  width:22px;
  height:22px;
}
body.role-operator .mobile-telegram-main{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:7px;
  background:#fff !important;
  border:1px solid #c8dce6 !important;
  color:#26A5E4 !important;
  overflow:hidden;
}
body.role-operator .mobile-telegram-main .telegram-brand-icon{
  width:40px;
  height:40px;
}
body.role-operator .mobile-telegram-extra{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  padding:6px;
  background:#fff !important;
  border:1px solid #c8dce6 !important;
  color:#26A5E4 !important;
  overflow:hidden;
}
body.role-operator .mobile-telegram-extra .telegram-brand-icon{
  width:30px;
  height:30px;
}

/* Settings footer */
.settings-stack{
  min-height:calc(100vh - 150px);
  grid-template-rows:auto auto auto 1fr auto;
}
.settings-madeby{
  align-self:end;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
  padding:13px 14px;
  border:1px solid #d8e4da;
  border-radius:14px;
  background:#f6faf6;
  color:inherit;
  text-decoration:none;
  transition:.15s ease;
}
.settings-madeby:hover{
  background:#eef6ef;
  border-color:#bfd3c3;
}
.settings-madeby img{
  width:34px;
  height:34px;
  flex:0 0 34px;
}
.settings-madeby span{
  display:grid;
  justify-items:center;
  gap:3px;
}
.settings-madeby strong{
  color:var(--accent);
  font-size:14px;
  font-weight:850;
}
.settings-madeby small{
  color:var(--muted);
  font-size:11px;
}
@media(max-width:560px){
  body.role-operator .mobile-telegram-main{min-width:54px}
  body.role-operator .mobile-telegram-main .telegram-brand-icon{width:38px;height:38px}
}


/* v0.4.8 — queue semantics, registry manager, centered Sensera footer */
.mobile-registry-manager{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:-2px;
  padding:8px 10px;
  border-radius:10px;
  background:#f5f8f4;
  color:var(--text);
}
.mobile-registry-manager span{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}
.mobile-registry-manager strong{
  min-width:0;
  font-size:14px;
  font-weight:850;
  line-height:1.35;
}

.settings-madeby{
  justify-content:center !important;
  text-align:center;
}
.settings-madeby span{
  justify-items:center;
  text-align:center;
}


/* v0.4.9 — operator management */
.operator-user-row{cursor:default}
.user-phone{
  margin-top:4px;
  color:var(--accent);
  font-size:12px;
  font-weight:750;
}
.user-job{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}
.operator-profile-panel{
  width:min(620px,96vw);
  z-index:120;
}
.operator-profile-backdrop{
  z-index:115;
}
.operator-profile-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.operator-profile-note{
  grid-column:1/-1;
}
.operator-profile-meta{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.operator-profile-meta>div{
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f7faf6;
  display:grid;
  gap:3px;
}
.operator-profile-meta span{
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.operator-profile-meta strong{
  color:var(--text);
  font-size:14px;
}
.operator-profile-form .small-message,
.operator-profile-save{
  grid-column:1/-1;
}
.operator-profile-privacy{
  margin-top:14px;
  padding:11px 13px;
  border:1px solid #e4dfcb;
  border-radius:10px;
  background:#fffaf0;
  color:#6f654a;
  font-size:12px;
  line-height:1.45;
}
@media(max-width:720px){
  .operator-profile-form{grid-template-columns:1fr}
  .operator-profile-note,
  .operator-profile-meta,
  .operator-profile-form .small-message,
  .operator-profile-save{grid-column:auto}
  .operator-profile-meta{grid-template-columns:1fr}
}


/* v0.5.0 — multi-select responsibility zones */
.multi-picker{
  position:relative;
  min-width:0;
}
.multi-picker-trigger{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.multi-picker-trigger:hover{
  border-color:#a9b8aa;
}
.multi-picker.disabled .multi-picker-trigger{
  background:#f3f5f2;
  color:#a1aaa2;
  cursor:not-allowed;
}
.multi-picker-arrow{
  color:var(--muted);
  font-size:16px;
}
.multi-picker-menu{
  position:absolute;
  z-index:180;
  left:0;
  right:0;
  top:calc(100% + 5px);
  max-height:330px;
  overflow:auto;
  padding:6px;
  border:1px solid #cbd5ca;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 32px rgba(20,35,24,.16);
}
.multi-picker-option{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 10px;
  border-radius:7px;
  color:var(--text);
  font-size:14px;
  line-height:1.3;
  cursor:pointer;
}
.multi-picker-option:hover{
  background:#f1f6f1;
}
.multi-picker-option input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:1px 0 0;
  accent-color:var(--accent);
}
.multi-picker-all{
  margin-bottom:4px;
  border-bottom:1px solid #edf1ec;
  border-radius:7px 7px 0 0;
  font-weight:800;
}
.rule-row .org-meta{
  max-width:820px;
  line-height:1.45;
}
.rule-facets-status{
  min-height:20px;
  margin:9px 1px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.rule-facets-status.is-loading{color:var(--accent)}
.rule-facets-status.is-error{color:var(--danger)}


/* v0.5.1.1 — manager/admin multi-filter UX */
.multi-picker-tools{
  position:sticky;
  z-index:2;
  top:-6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-6px -6px 5px;
  padding:7px 8px;
  border-bottom:1px solid #e7ece6;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(5px);
}
.multi-picker-all-action,
.multi-picker-clear{
  min-height:32px;
  border:0;
  border-radius:7px;
  background:transparent;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.multi-picker-all-action{
  padding:6px 8px;
  color:var(--text);
  text-align:left;
}
.multi-picker-all-action:hover,
.multi-picker-all-action.active{
  background:#eef5ef;
  color:var(--accent);
}
.multi-picker-clear{
  padding:6px 8px;
  color:#667169;
  white-space:nowrap;
}
.multi-picker-clear:hover:not(:disabled){
  background:#f4f6f3;
  color:var(--text);
}
.multi-picker-clear:disabled{
  opacity:.4;
  cursor:default;
}
.multi-picker-wide .multi-picker-menu{
  right:auto;
  width:min(430px,calc(100vw - 32px));
  min-width:100%;
}
.multi-picker-wide .multi-picker-option span{
  max-width:350px;
}
@media(max-width:720px){
  .multi-picker-wide .multi-picker-menu{
    left:0;
    right:0;
    width:auto;
    min-width:0;
  }
  .multi-picker-tools{gap:4px}
  .multi-picker-all-action,.multi-picker-clear{font-size:11px}
}


/* v0.5.2 — global phone identity, duplicate numbers, Telegram verification status */
.phone-cell-list{display:grid;gap:7px;min-width:205px}
.phone-cell-entry{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.phone-cell-entry .contact-link{white-space:nowrap}
.telegram-status-control{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;flex:0 0 auto;vertical-align:middle}
.telegram-status-control .telegram-link{position:relative;flex:0 0 auto}
.telegram-status-control.tg-unverified .telegram-brand-icon{filter:grayscale(.18);opacity:.38}
.telegram-status-control.tg-verified .telegram-brand-icon{filter:none;opacity:1}
.telegram-status-control.tg-unresolved .telegram-brand-icon{filter:grayscale(1);opacity:.52}
.telegram-status-control.tg-no_account .telegram-brand-icon{filter:grayscale(1);opacity:.34}
.telegram-status-control.tg-no_account>a::after{content:'';position:absolute;left:13%;right:13%;top:48%;height:2px;background:#5f6862;border-radius:2px;transform:rotate(-42deg);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.telegram-status-button{position:static;z-index:auto;display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;padding:0;border:1px solid #c6d0c7;border-radius:8px;background:#fff;color:#68726a;font:900 14px/1 system-ui;box-shadow:0 1px 3px rgba(0,0,0,.10);cursor:pointer}
.telegram-status-button:hover{background:#f3f6f3;border-color:#aeb9b0}
span.telegram-status-button{cursor:default}
.tg-verified .telegram-status-button{border-color:#84cce9;color:#168cc4}
.tg-unresolved .telegram-status-button{border-color:#b8beb9;color:#6e756f}
.tg-no_account .telegram-status-button{border-color:#aeb5b0;color:#555d57}
.phone-shared-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:#fff3cd;border:1px solid #ead38b;color:#725d15;font-size:11px;font-weight:800;cursor:help}
.phone-duplicate-info{margin-top:5px;max-width:720px;color:#8a6b16;font-size:11px;line-height:1.35}
.telegram-status-menu{position:fixed;z-index:1200;width:260px;padding:10px;border:1px solid #d6ddd5;border-radius:12px;background:#fff;box-shadow:0 16px 44px rgba(18,32,22,.22)}
.telegram-status-menu>strong{display:block;padding:4px 8px 8px;font-size:13px}
.telegram-status-option{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.telegram-status-option:hover,.telegram-status-option.active{background:#f1f5f0}
.telegram-status-option-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #cbd3cc;background:#fff;font-weight:900}
.telegram-status-option-mark.tg-verified{color:#168cc4;border-color:#84cce9}.telegram-status-option-mark.tg-unresolved{color:#737b75}.telegram-status-option-mark.tg-no_account{color:#555d57}.telegram-status-option-mark.tg-unverified{color:#9eaaa2}
.mobile-primary-contact-row .telegram-status-control,.mobile-extra-contact-row .telegram-status-control{width:100%;height:100%;gap:7px}
.mobile-primary-contact-row .telegram-status-control>.mobile-telegram-main,.mobile-extra-contact-row .telegram-status-control>.mobile-telegram-extra{width:100%;height:100%}
.mobile-primary-contact-row .telegram-status-button,.mobile-extra-contact-row .telegram-status-button{flex:0 0 30px;width:30px;height:30px;border-radius:9px;font-size:15px}
.mobile-contact-stack>.phone-duplicate-info{margin:-2px 2px 3px}
.mobile-extra-contact-main .phone-duplicate-info{margin:3px 2px 0;white-space:normal}
@media(max-width:560px){.telegram-status-menu{width:min(260px,calc(100vw - 20px))}.phone-cell-list{min-width:0}}


/* v0.5.2.4 — operator mobile: fit phone + Telegram + Telegram-status without horizontal scroll.
   Before this fix the grid reserved only 54-58px for a Telegram control that now contains
   BOTH the Telegram button and a separate 30px status button. The children therefore overflowed
   the card by ~35-40px and forced horizontal scrolling. */
@media (max-width:720px){
  body.role-operator .mobile-primary-contact-row{
    grid-template-columns:minmax(0,1fr) 96px;
    gap:8px;
    min-width:0;
  }

  body.role-operator .mobile-extra-contact-row{
    grid-template-columns:minmax(0,1fr) 90px;
    gap:7px;
    min-width:0;
  }

  body.role-operator .mobile-primary-contact-row .telegram-status-control,
  body.role-operator .mobile-extra-contact-row .telegram-status-control{
    display:flex;
    width:100%;
    min-width:0;
    max-width:100%;
    gap:7px;
  }

  body.role-operator .mobile-primary-contact-row .telegram-status-control > .mobile-telegram-main{
    width:auto;
    min-width:54px;
    flex:1 1 auto;
  }

  body.role-operator .mobile-extra-contact-row .telegram-status-control > .mobile-telegram-extra{
    width:auto;
    min-width:46px;
    flex:1 1 auto;
  }

  body.role-operator .mobile-primary-contact-row .telegram-status-button,
  body.role-operator .mobile-extra-contact-row .telegram-status-button{
    flex:0 0 30px;
    width:30px;
    min-width:30px;
    max-width:30px;
  }

  body.role-operator .mobile-call-main,
  body.role-operator .mobile-extra-contact-main{
    min-width:0;
    max-width:100%;
  }

  /* Safety net: a contact control must never make the whole operator card horizontally scrollable. */
  body.role-operator .mobile-card,
  body.role-operator .mobile-farmer-card{
    overflow-x:hidden;
  }
}


/* v0.5.2.5 — manager/admin mobile header.
   Desktop manager navigation has too many actions for a phone viewport.
   On <=760px:
   - brand/settings/logout occupy a compact first row;
   - manager actions become a dedicated three-column second row;
   - no horizontal page scrolling;
   - "Распределение" is shortened visually to "Зоны" only on mobile. */
@media (max-width:760px){
  body.role-manager,
  body.role-admin{
    overflow-x:hidden;
  }

  body.role-manager .topbar,
  body.role-admin .topbar{
    position:sticky;
    top:0;
    display:block;
    min-height:104px;
    padding:8px 10px 10px;
    overflow:visible;
  }

  body.role-manager .brand,
  body.role-admin .brand{
    min-height:40px;
    gap:8px;
    padding-right:124px;
  }

  body.role-manager .brand-logo,
  body.role-admin .brand-logo{
    width:40px;
    height:40px;
    border-radius:10px;
  }

  body.role-manager .brand-name,
  body.role-admin .brand-name{
    font-size:18px;
  }

  body.role-manager .brand-subtitle,
  body.role-admin .brand-subtitle,
  body.role-manager .brand-madeby,
  body.role-admin .brand-madeby,
  body.role-manager .user-chip,
  body.role-admin .user-chip,
  body.role-manager .pwa-install-button,
  body.role-admin .pwa-install-button{
    display:none !important;
  }

  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:100%;
    margin-top:8px;
  }

  body.role-manager #monitor-button,
  body.role-manager #rules-button,
  body.role-manager #users-button,
  body.role-admin #monitor-button,
  body.role-admin #rules-button,
  body.role-admin #users-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    width:100%;
    min-height:38px;
    padding:7px 4px;
    border-radius:9px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:12.5px;
    line-height:1;
  }

  /* The full desktop word is unnecessarily long on a phone. */
  body.role-manager #rules-button,
  body.role-admin #rules-button{
    font-size:0;
  }
  body.role-manager #rules-button::after,
  body.role-admin #rules-button::after{
    content:"Зоны";
    font-size:12.5px;
    line-height:1;
  }

  body.role-manager #settings-button,
  body.role-admin #settings-button{
    position:absolute;
    top:8px;
    right:82px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    font-size:18px;
  }

  body.role-manager #logout-button,
  body.role-admin #logout-button{
    position:absolute;
    top:8px;
    right:10px;
    min-width:66px;
    width:66px;
    min-height:40px;
    padding:7px 6px;
    font-size:12.5px;
  }

  body.role-manager .page,
  body.role-admin .page{
    max-width:100%;
  }
}


/* v0.5.3.0 — visual operator control dashboard */
.monitor-panel{width:min(1240px,98vw)}
.monitor-header-sub{margin-top:4px;color:var(--muted);font-size:13px}
.monitor-toolbar-section{padding-bottom:10px}
.monitor-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px}
.monitor-filters{display:grid;grid-template-columns:180px minmax(250px,1fr) auto;gap:10px;align-items:end;flex:1}
.monitor-refresh{height:42px;white-space:nowrap}
.monitor-refresh-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:175px;color:var(--muted);font-size:12px}
.monitor-live-note{font-size:11px}
.monitor-tabs{display:flex;gap:6px;margin-top:12px;padding:4px;background:#f3f6f2;border:1px solid var(--line);border-radius:12px;overflow-x:auto;scrollbar-width:thin}
.monitor-tab{flex:0 0 auto;border:0;background:transparent;border-radius:9px;padding:9px 13px;color:var(--muted);font-weight:800;font-size:13px;cursor:pointer}
.monitor-tab:hover{background:#fff;color:var(--text)}
.monitor-tab.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px rgba(20,50,30,.10)}
.monitor-dashboard-section{padding-top:14px}
.monitor-error{margin-bottom:10px;color:#a83b2f}
.monitor-view{display:none}
.monitor-view.active{display:block}
.monitor-section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 0 12px}
.monitor-section-title h3{margin:0 0 3px;font-size:18px}
.monitor-section-title p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4}
.monitor-inline-note{margin:-4px 0 10px;color:var(--muted);font-size:12px}
.monitor-empty{padding:20px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center;background:#fbfcfa}

.monitor-team-kpis{display:grid;grid-template-columns:repeat(8,minmax(105px,1fr));gap:8px;margin-bottom:16px}
.monitor-kpi{min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-kpi-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.monitor-kpi-value{display:block;margin-top:4px;font-size:23px;line-height:1;color:var(--text)}
.monitor-kpi small{display:block;margin-top:5px;color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monitor-kpi.good .monitor-kpi-value{color:#267447}
.monitor-kpi.callback .monitor-kpi-value{color:#a36c08}
.monitor-kpi.danger .monitor-kpi-value{color:#a23b32}

.monitor-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.monitor-operator-card{padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff}
.monitor-operator-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.monitor-operator-name{font-size:16px}
.monitor-pulse-line{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--muted);font-size:11.5px}
.monitor-pulse{width:8px;height:8px;border-radius:50%;background:#c5cbc5}
.monitor-pulse.fresh{background:#2d8651;box-shadow:0 0 0 3px rgba(45,134,81,.12)}
.monitor-pulse.warm{background:#d6a12d}
.monitor-pulse.idle{background:#9ba39c}
.monitor-pulse.none{background:#d8dcda}
.monitor-assigned-mini{text-align:right}
.monitor-assigned-mini strong{display:block;font-size:18px}
.monitor-assigned-mini span{color:var(--muted);font-size:10.5px}
.monitor-operator-metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.monitor-mini-metric{padding:7px 8px;border-radius:9px;background:#f6f8f5}
.monitor-mini-metric span{display:block;color:var(--muted);font-size:10px}
.monitor-mini-metric strong{display:block;margin-top:2px;font-size:16px}
.monitor-mini-metric.good strong{color:#267447}.monitor-mini-metric.callback strong{color:#a36c08}.monitor-mini-metric.danger strong{color:#a23b32}
.monitor-spark-box{margin-top:10px}
.monitor-spark-title{margin-bottom:4px;color:var(--muted);font-size:10.5px}
.monitor-spark{display:flex;align-items:end;gap:3px;height:34px;padding:3px 4px;border-radius:8px;background:#f7f9f6}
.monitor-spark span{flex:1;min-width:3px;max-width:18px;border-radius:3px 3px 1px 1px;background:#dfe5df;opacity:.8}
.monitor-spark span.has-activity{background:#4f9569;opacity:1}

.monitor-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px 10px}
.monitor-legend-item{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10.5px}
.monitor-legend-dot{width:8px;height:8px;border-radius:50%;background:#aeb5af}
.monitor-legend-dot.good,.monitor-time-dot.good,.monitor-stack-seg.good{background:#2f8a53}
.monitor-legend-dot.connected,.monitor-time-dot.connected,.monitor-stack-seg.connected{background:#2d7f9f}
.monitor-legend-dot.callback,.monitor-time-dot.callback,.monitor-stack-seg.callback{background:#d7a126}
.monitor-legend-dot.negative,.monitor-time-dot.negative,.monitor-stack-seg.negative{background:#c76556}
.monitor-legend-dot.wrong,.monitor-time-dot.wrong,.monitor-stack-seg.wrong{background:#8f4a43}
.monitor-legend-dot.muted,.monitor-time-dot.muted,.monitor-stack-seg.muted{background:#aeb5af}
.monitor-legend-dot.other,.monitor-time-dot.other,.monitor-stack-seg.other{background:#8d79a8}

.monitor-timeline-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-timeline-board{min-width:760px;padding:10px}
.monitor-time-axis,.monitor-time-row{display:grid;grid-template-columns:150px minmax(560px,1fr);gap:10px;align-items:center}
.monitor-time-axis{padding-bottom:7px;border-bottom:1px solid var(--line)}
.monitor-time-axis-name{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.monitor-time-axis-track,.monitor-time-track{position:relative}
.monitor-time-axis-track{height:18px}
.monitor-time-axis-track span{position:absolute;top:0;transform:translateX(-50%);color:var(--muted);font-size:9px}
.monitor-time-row{min-height:48px;border-bottom:1px solid #eef1ee}
.monitor-time-row:last-child{border-bottom:0}
.monitor-time-operator{min-width:0}
.monitor-time-operator strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.monitor-time-operator small{color:var(--muted);font-size:9.5px}
.monitor-time-track{height:28px;border-radius:8px;background:
 repeating-linear-gradient(to right,#f6f8f6 0,#f6f8f6 calc(16.666% - 1px),#e8ece8 calc(16.666% - 1px),#e8ece8 16.666%)}
.monitor-time-dot{position:absolute;top:50%;width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.22);cursor:pointer;z-index:2}
.monitor-time-dot:hover{width:16px;height:16px;z-index:4}
.monitor-now-line{position:absolute;top:-3px;bottom:-3px;width:2px;background:#d14f3f;opacity:.75;z-index:1}
.monitor-now-line::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:#d14f3f}

.monitor-calendar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.monitor-month{padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-month h4{margin:0 0 8px;text-transform:capitalize;font-size:14px}
.monitor-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.monitor-weekday{text-align:center;color:var(--muted);font-size:9px;font-weight:800}
.monitor-day{position:relative;min-height:43px;padding:5px;border-radius:7px;background:#f4f6f3;overflow:hidden}
.monitor-day.blank{background:transparent}
.monitor-day.outside{opacity:.28;background:#fafbfa}
.monitor-day[data-level="1"]{background:#e7f2ea}.monitor-day[data-level="2"]{background:#cde4d4}.monitor-day[data-level="3"]{background:#91c4a0}.monitor-day[data-level="4"]{background:#4f9569;color:#fff}
.monitor-day-num{font-size:9px;opacity:.8}.monitor-day strong{display:block;margin-top:3px;font-size:14px;line-height:1}.monitor-day small{position:absolute;right:5px;bottom:4px;font-size:9px;font-weight:800;color:#24663f}.monitor-day[data-level="4"] small{color:#fff}

.monitor-results{display:grid;gap:9px}
.monitor-result-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-result-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.monitor-result-head span{color:var(--muted);font-size:11px}
.monitor-stack{display:flex;height:15px;overflow:hidden;border-radius:999px;background:#edf0ed}
.monitor-stack-seg{display:block;height:100%;min-width:2px}.monitor-stack.empty{opacity:.5}
.monitor-result-stats{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.monitor-result-chip{padding:4px 7px;border-radius:999px;background:#f2f4f2;color:#59625b;font-size:10px}
.monitor-result-chip.good{background:#e4f2e8;color:#24663f}.monitor-result-chip.connected{background:#e3f0f4;color:#27677f}.monitor-result-chip.callback{background:#fbf0d1;color:#805a08}.monitor-result-chip.negative,.monitor-result-chip.wrong{background:#fae9e6;color:#8c4037}

.monitor-regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.monitor-region-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-region-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.monitor-region-head span{color:var(--muted);font-size:10.5px}
.monitor-region-bar{height:7px;margin:8px 0;border-radius:999px;background:#edf1ed;overflow:hidden}
.monitor-region-bar span{display:block;height:100%;border-radius:999px;background:#4f9569}
.monitor-region-stats,.monitor-workload-stats{display:flex;flex-wrap:wrap;gap:7px 13px;color:var(--muted);font-size:10.5px}
.monitor-region-stats b,.monitor-workload-stats b{color:var(--text)}
.monitor-workload{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.monitor-workload-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.monitor-workload-head{display:flex;justify-content:space-between;gap:10px}
.monitor-workload-head span{color:var(--muted);font-size:11px}
.monitor-progress{height:10px;margin:9px 0;border-radius:999px;background:#edf1ed;overflow:hidden}
.monitor-progress span{display:block;height:100%;border-radius:999px;background:#4f9569}
.monitor-workload-stats .danger b{color:#a23b32}
.monitor-feed{display:grid;gap:8px}

@media(max-width:980px){
  .monitor-team-kpis{grid-template-columns:repeat(4,minmax(100px,1fr))}
  .monitor-summary,.monitor-calendar,.monitor-regions,.monitor-workload{grid-template-columns:1fr}
  .monitor-operator-metrics{grid-template-columns:repeat(6,minmax(58px,1fr))}
}
@media(max-width:760px){
  .monitor-panel{width:100vw;max-width:none}
  .monitor-header{padding:14px 15px}
  .monitor-header-sub{display:none}
  .monitor-toolbar{display:block}
  .monitor-filters{grid-template-columns:1fr 1fr;gap:8px}
  .monitor-filters .monitor-refresh{grid-column:1/-1;width:100%}
  .monitor-refresh-meta{margin-top:6px;align-items:flex-start;min-width:0}
  .monitor-live-note{display:none}
  .monitor-tabs{margin-left:-2px;margin-right:-2px;scroll-snap-type:x proximity}
  .monitor-tab{scroll-snap-align:start;padding:9px 12px}
  .monitor-dashboard-section{padding:12px}
  .monitor-team-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .monitor-kpi{padding:9px}.monitor-kpi-value{font-size:21px}.monitor-kpi small{white-space:normal}
  .monitor-section-title{display:block}.monitor-legend{justify-content:flex-start;margin-top:8px}
  .monitor-summary{grid-template-columns:1fr}
  .monitor-operator-card{padding:11px}
  .monitor-operator-metrics{grid-template-columns:repeat(3,1fr)}
  .monitor-mini-metric:nth-child(4),.monitor-mini-metric:nth-child(5){grid-column:auto}
  .monitor-time-axis,.monitor-time-row{grid-template-columns:115px minmax(560px,1fr)}
  .monitor-timeline-board{min-width:700px}
  .monitor-calendar{grid-template-columns:1fr}
  .monitor-month{padding:9px}
  .monitor-day{min-height:38px;padding:4px}
  .monitor-region-head{align-items:flex-start}
  .monitor-result-head,.monitor-workload-head{align-items:flex-start}
}


/* v0.5.3.1 — manager/admin Base status control */
.base-button{display:inline-flex;align-items:center;gap:7px}
.base-button-dot{width:9px;height:9px;border-radius:50%;background:#9aa39b;box-shadow:0 0 0 3px rgba(154,163,155,.12)}
.base-dot-fresh{background:#2f7a49;box-shadow:0 0 0 3px rgba(47,122,73,.14)}
.base-dot-quiet{background:#d39b32;box-shadow:0 0 0 3px rgba(211,155,50,.16)}
.base-dot-attention{background:#b74848;box-shadow:0 0 0 3px rgba(183,72,72,.15)}

.base-panel{width:min(1040px,94vw)}
.base-header-sub{margin-top:5px;color:var(--muted);font-size:14px}
.base-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.base-health-chip{display:inline-flex;align-items:center;min-height:34px;padding:7px 12px;border-radius:999px;font-weight:800;font-size:14px}
.base-health-fresh{background:#e8f3eb;color:#28653d;border:1px solid #cce2d2}
.base-health-quiet{background:#fff5dc;color:#81601b;border:1px solid #eedda8}
.base-health-attention{background:#faeaea;color:#963737;border:1px solid #eccaca}
.base-health-unknown{background:#eef1ed;color:#606a61;border:1px solid #dce1db}
.base-status-note{margin-top:10px;font-size:14px;line-height:1.45}
.base-updated{margin-top:5px;font-size:12px}
.base-summary-grid,.base-coverage-grid,.base-admin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.base-admin-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.base-metric-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fafbf9}
.base-metric-label{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.base-metric-value{display:block;margin-top:7px;font-size:24px;line-height:1.05;color:var(--text)}
.base-metric-sub{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.35}
.base-section-title h3{margin:0}
.base-section-title p{margin:5px 0 0}
.base-admin-block{margin-top:22px}
.base-admin-block h4{margin:0 0 10px}
.base-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;border:1px solid var(--line);border-radius:12px;background:#fff}
.base-table{min-width:760px}
.base-table th,.base-table td{padding:10px 11px;font-size:12px}
.base-errors-list{display:grid;gap:8px}
.base-error-card{padding:12px;border:1px solid #ead4d4;border-radius:12px;background:#fff8f8}
.base-error-card strong{display:block}
.base-error-message{margin-top:6px;font-size:12px;line-height:1.4;white-space:pre-wrap;word-break:break-word}

@media (max-width:980px){
  .base-summary-grid,.base-coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .base-admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Extend the v0.5.2.5 mobile manager/admin header to four navigation actions. */
@media (max-width:760px){
  body.role-manager .topbar,
  body.role-admin .topbar{min-height:104px}

  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }

  body.role-manager #monitor-button,
  body.role-manager #rules-button,
  body.role-manager #users-button,
  body.role-manager #base-button,
  body.role-admin #monitor-button,
  body.role-admin #rules-button,
  body.role-admin #users-button,
  body.role-admin #base-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    width:100%;
    min-height:38px;
    padding:7px 3px;
    font-size:11.5px;
    gap:4px;
  }

  body.role-manager #users-button,
  body.role-admin #users-button{font-size:11px}

  body.role-manager .base-button-dot,
  body.role-admin .base-button-dot{width:7px;height:7px;box-shadow:none}

  .base-panel{width:100vw;max-width:100vw}
  .base-summary-grid,.base-coverage-grid,.base-admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .base-metric-card{padding:11px}
  .base-metric-value{font-size:19px}
  .base-metric-sub{font-size:11px}
  .base-toolbar{align-items:flex-start}
}

@media (max-width:390px){
  body.role-manager #monitor-button,
  body.role-manager #rules-button,
  body.role-manager #users-button,
  body.role-manager #base-button,
  body.role-admin #monitor-button,
  body.role-admin #rules-button,
  body.role-admin #users-button,
  body.role-admin #base-button{
    font-size:10.5px;
  }
  .base-summary-grid,.base-coverage-grid,.base-admin-kpis{grid-template-columns:1fr}
}


/* v0.5.3.2 — startup shell and corrected manager/admin header layout */
.boot-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--bg);
}
.boot-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text);
}
.boot-card img{width:58px;height:58px;border-radius:14px;box-shadow:0 8px 28px rgba(24,40,28,.12)}
.boot-card strong{font-size:22px}
.boot-card span{font-size:13px;color:var(--muted)}

.topbar-center{display:flex;align-items:center;justify-content:center}

/* Desktop: brand left, Install exactly in the center, all work controls right.
   Base is deliberately the right-most work/header action. */
@media (min-width:761px){
  body.role-manager .topbar,
  body.role-admin .topbar{
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:18px;
  }

  body.role-manager .brand,
  body.role-admin .brand{grid-column:1;justify-self:start;min-width:0}

  body.role-manager .topbar-center,
  body.role-admin .topbar-center{grid-column:2;justify-self:center}

  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    grid-column:3;
    justify-self:end;
    min-width:0;
  }

  body.role-manager #base-button,
  body.role-admin #base-button{order:100}

  body.role-manager #logout-button,
  body.role-admin #logout-button{order:90}

  body.role-manager #settings-button,
  body.role-admin #settings-button{order:80}

  body.role-manager .user-chip,
  body.role-admin .user-chip{order:70}
}

@media (min-width:761px) and (max-width:1180px){
  body.role-manager .topbar,
  body.role-admin .topbar{padding-left:16px;padding-right:16px;gap:10px}
  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{gap:6px}
  body.role-manager .user-chip,
  body.role-admin .user-chip{display:none}
}

/* Mobile: the install prompt is irrelevant in an already installed PWA.
   Main navigation remains the compact four-button second row. */
@media (max-width:760px){
  body.role-manager .topbar-center,
  body.role-admin .topbar-center{display:none!important}
}


/* v0.5.3.3 — compact Base signal + three-button mobile nav + update indicator */
.base-signal-button{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  margin-left:2px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.base-signal-button:hover{background:#f1f5f1}
.base-signal-button .base-button-dot{width:12px;height:12px;box-shadow:0 0 0 4px rgba(154,163,155,.12)}
.base-signal-button .base-dot-fresh{box-shadow:0 0 0 4px rgba(47,122,73,.14)}
.base-signal-button .base-dot-quiet{box-shadow:0 0 0 4px rgba(211,155,50,.16)}
.base-signal-button .base-dot-attention{box-shadow:0 0 0 4px rgba(183,72,72,.15)}

.settings-update-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-update-status{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.35}
.settings-button.has-app-update{position:relative}
.settings-button.has-app-update::after{
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d39b32;
  box-shadow:0 0 0 2px #fff;
}

@media (max-width:760px){
  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  body.role-manager #monitor-button,
  body.role-manager #rules-button,
  body.role-manager #users-button,
  body.role-admin #monitor-button,
  body.role-admin #rules-button,
  body.role-admin #users-button{
    font-size:11.5px;
    padding-left:3px;
    padding-right:3px;
  }

  body.role-manager #rules-button,
  body.role-admin #rules-button{font-size:11.5px}
  body.role-manager #rules-button::after,
  body.role-admin #rules-button::after{content:none}

  body.role-manager .base-signal-button,
  body.role-admin .base-signal-button{
    flex-basis:30px;
    width:30px;
    height:30px;
    margin-left:0;
  }
  body.role-manager .base-signal-button .base-button-dot,
  body.role-admin .base-signal-button .base-button-dot{
    width:10px;height:10px;box-shadow:0 0 0 3px rgba(47,122,73,.12)
  }
}


/* v0.5.3.3 FINAL — trusted-device login option */
.trusted-device-option{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbf9;
  cursor:pointer;
}
.trusted-device-option input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:#2f7546;
}
.trusted-device-option > span{display:grid;gap:2px;min-width:0}
.trusted-device-option strong{font-size:13px;line-height:1.25;color:var(--text)}
.trusted-device-option small{font-size:11px;line-height:1.3;color:var(--muted)}


/* v0.5.4.0 — navigation/draft safety */
.mobile-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mobile-draft-hint{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid #e4d69b;
  background:#fff7d9;
  color:#725f1c;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

@media (max-width:420px){
  .mobile-section-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}


/* v0.5.4.1 — compact catalog/header and one-line pagination */
body.role-manager .hero-row,
body.role-admin .hero-row{
  display:none;
}
body.role-manager .page,
body.role-admin .page{
  padding-top:14px;
}

.header-summary{
  align-items:center;
  gap:7px;
  color:var(--muted);
  white-space:nowrap;
}
.header-summary strong{
  color:var(--accent);
  font-size:24px;
  line-height:1;
  font-weight:850;
  letter-spacing:.01em;
}
.header-summary span{
  font-size:11px;
  line-height:1;
}
.header-summary-label-short{display:none}

@media (min-width:761px){
  body.role-manager .header-summary,
  body.role-admin .header-summary{
    display:flex;
    grid-column:1;
    justify-self:end;
    align-self:center;
    margin-right:8px;
  }
}

.pagination{
  flex-wrap:nowrap;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
}
.pagination .page-arrow{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  padding:7px 0;
  font-size:20px;
  line-height:1;
}
.page-info{
  flex:0 1 auto;
  min-width:118px;
  width:auto;
  white-space:nowrap;
}
.page-size{
  flex:0 0 auto;
  margin-left:4px;
}
.page-size select{
  width:72px;
  min-width:72px;
}
.organizations-table-wrap{
  scroll-margin-top:150px;
}

@media (max-width:760px){
  body.role-manager .page,
  body.role-admin .page{
    padding-top:12px;
  }

  body.role-manager .brand > div,
  body.role-admin .brand > div{
    display:none!important;
  }

  body.role-manager .header-summary,
  body.role-admin .header-summary{
    position:absolute;
    top:13px;
    left:136px;
    display:flex!important;
    align-items:baseline;
    max-width:120px;
    margin:0;
  }

  body.role-manager .header-summary strong,
  body.role-admin .header-summary strong{
    font-size:22px;
  }

  body.role-manager .header-summary-label-full,
  body.role-admin .header-summary-label-full{
    display:none;
  }
  body.role-manager .header-summary-label-short,
  body.role-admin .header-summary-label-short{
    display:inline;
    font-size:10px;
  }

  .pagination{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:7px;
    padding:10px 8px;
    overflow:hidden;
  }

  .pagination .page-arrow{
    flex-basis:40px;
    width:40px;
    min-width:40px;
    min-height:40px;
  }

  .page-info{
    flex:1 1 auto;
    min-width:0;
    max-width:150px;
    text-align:center;
    font-size:12px;
  }

  .page-size{
    flex:0 0 66px;
    width:66px;
    margin-left:0;
  }

  .page-size select{
    width:66px;
    min-width:66px;
    min-height:40px;
    padding-left:8px;
    padding-right:22px;
  }
}

@media (max-width:390px){
  body.role-manager .header-summary,
  body.role-admin .header-summary{
    left:124px;
    max-width:108px;
  }
  body.role-manager .header-summary strong,
  body.role-admin .header-summary strong{
    font-size:20px;
  }
  .pagination{
    gap:5px;
    padding-left:6px;
    padding-right:6px;
  }
  .pagination .page-arrow{
    flex-basis:38px;
    width:38px;
    min-width:38px;
  }
  .page-info{font-size:11px}
  .page-size{
    flex-basis:62px;
    width:62px;
  }
  .page-size select{
    width:62px;
    min-width:62px;
  }
}


/* v0.5.4.2 — desktop header: force every header element onto one grid row.
   v0.5.4.1 put brand and result count into the same grid column without
   an explicit grid-row, so CSS Grid auto-placement created a second row. */
@media (min-width:761px){
  body.role-manager .topbar,
  body.role-admin .topbar{
    grid-template-columns:minmax(360px,1fr) auto minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
    min-height:72px;
  }

  body.role-manager .brand,
  body.role-admin .brand{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:center;
  }

  body.role-manager .header-summary,
  body.role-admin .header-summary{
    grid-column:1;
    grid-row:1;
    justify-self:end;
    align-self:center;
    margin-right:10px;
  }

  body.role-manager .topbar-center,
  body.role-admin .topbar-center{
    grid-column:2;
    grid-row:1;
    justify-self:center;
    align-self:center;
  }

  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    grid-column:3;
    grid-row:1;
    justify-self:end;
    align-self:center;
  }
}

/* On narrower desktop widths keep one row, but compress the left zone first. */
@media (min-width:761px) and (max-width:1180px){
  body.role-manager .topbar,
  body.role-admin .topbar{
    grid-template-columns:minmax(300px,1fr) auto minmax(0,1fr);
  }

  body.role-manager .header-summary,
  body.role-admin .header-summary{
    margin-right:6px;
  }
}


/* v0.5.4.4 — header count / pagination / filter UX */

/* The count itself is enough; no "организаций"/"орг." text. */
.header-summary{
  line-height:1;
}
.header-summary strong{
  font-size:38px;
  line-height:.95;
  transform:translateY(2px);
}

/* 100 must remain fully visible beside the native select arrow. */
.page-size{
  flex-basis:88px;
  width:88px;
}
.page-size select{
  width:88px;
  min-width:88px;
  padding-left:12px;
  padding-right:30px;
  text-align:left;
  font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  body.role-manager .header-summary strong,
  body.role-admin .header-summary strong{
    font-size:31px;
    line-height:.95;
    transform:translateY(1px);
  }

  .page-size{
    flex:0 0 82px;
    width:82px;
  }
  .page-size select{
    width:82px;
    min-width:82px;
    padding-left:10px;
    padding-right:28px;
  }
}

@media (max-width:390px){
  body.role-manager .header-summary strong,
  body.role-admin .header-summary strong{
    font-size:29px;
  }

  .page-size{
    flex-basis:78px;
    width:78px;
  }
  .page-size select{
    width:78px;
    min-width:78px;
    padding-left:9px;
    padding-right:27px;
  }
}


/* v0.5.4.6 — exact header count placement.
   JS computes the midpoint between real rendered controls. */
body.role-manager .topbar,
body.role-admin .topbar{
  position:sticky; /* already the application header; establishes containing block */
}

body.role-manager .header-summary,
body.role-admin .header-summary{
  position:absolute!important;
  z-index:4;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  justify-self:auto!important;
  align-self:auto!important;
  pointer-events:none;
}

/* Remove the old approximate desktop/mobile placement. */
@media (min-width:761px){
  body.role-manager .header-summary,
  body.role-admin .header-summary{
    grid-column:auto!important;
    grid-row:auto!important;
  }
}

@media (max-width:760px){
  body.role-manager .header-summary,
  body.role-admin .header-summary{
    max-width:none!important;
  }
}


/* v0.5.4.7 — mobile current-user profile */
.mobile-profile-button{
  display:none;
}

.mobile-profile-backdrop{
  position:fixed;
  inset:0;
  z-index:118;
  background:transparent;
}

.mobile-profile-menu{
  position:fixed;
  z-index:119;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 50px rgba(20,36,25,.18);
}

.mobile-profile-menu-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.mobile-profile-kicker{
  margin-bottom:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mobile-profile-menu-head strong{
  display:block;
  max-width:220px;
  font-size:17px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.mobile-profile-close{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:22px;
  line-height:1;
}

.mobile-profile-email{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  overflow-wrap:anywhere;
}

.mobile-profile-role-row{
  margin-top:10px;
}

.mobile-profile-session{
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:10px 11px;
  border-radius:11px;
  background:#f6f8f5;
}

.mobile-profile-session-label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.mobile-profile-session strong{
  font-size:12px;
  line-height:1.35;
}

.mobile-profile-logout{
  width:100%;
  margin-top:12px;
  min-height:42px;
}

@media (max-width:760px){
  /* Desktop identity/logout is replaced by one compact self-profile control. */
  body.role-manager .user-chip,
  body.role-admin .user-chip,
  body.role-operator .user-chip,
  body.role-manager #logout-button,
  body.role-admin #logout-button,
  body.role-operator #logout-button{
    display:none!important;
  }

  body.role-manager .mobile-profile-button,
  body.role-admin .mobile-profile-button,
  body.role-operator .mobile-profile-button{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    flex:0 0 auto;
    min-width:100px;
    max-width:118px;
    min-height:58px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    color:var(--text);
    text-align:left;
    overflow:hidden;
  }

  .mobile-profile-name{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:800;
    line-height:1.15;
  }

  .mobile-profile-meta{
    display:flex;
    align-items:center;
    gap:4px;
    width:100%;
    margin-top:3px;
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
  }

  .mobile-profile-chevron{
    margin-left:auto;
    color:var(--muted);
    font-size:12px;
    transform:translateY(-1px);
  }

  /* Keep manager/admin count centered against Settings, not the profile button. */
  body.role-manager .topbar-actions,
  body.role-admin .topbar-actions{
    align-items:center;
  }
}

@media (max-width:390px){
  body.role-manager .mobile-profile-button,
  body.role-admin .mobile-profile-button,
  body.role-operator .mobile-profile-button{
    min-width:90px;
    max-width:102px;
    padding-left:8px;
    padding-right:8px;
  }
  .mobile-profile-name{font-size:13px}
  .mobile-profile-meta{font-size:9px}
}


/* v0.5.4.8 — mobile profile belongs to the FIRST header row.
   It occupies the old Logout area and is removed from the manager/admin
   three-column navigation grid. Long names can never widen the header. */

@media (max-width:760px){
  body.role-manager .mobile-profile-button,
  body.role-admin .mobile-profile-button{
    position:absolute!important;
    top:8px;
    right:8px;
    z-index:6;
    display:flex!important;
    width:102px;
    min-width:102px;
    max-width:102px;
    height:40px;
    min-height:40px;
    padding:5px 8px;
    margin:0;
    border-radius:10px;
  }

  /* Settings moves left by exactly the space reserved for the profile.
     The filtered count continues to be geometrically centered between
     Base indicator and Settings by positionHeaderSummary(). */
  body.role-manager #settings-button,
  body.role-admin #settings-button{
    top:8px;
    right:118px;
  }

  body.role-manager .mobile-profile-name,
  body.role-admin .mobile-profile-name{
    font-size:12px;
    line-height:1.05;
  }

  body.role-manager .mobile-profile-meta,
  body.role-admin .mobile-profile-meta{
    margin-top:2px;
    font-size:8.5px;
    line-height:1;
  }

  body.role-manager .mobile-profile-chevron,
  body.role-admin .mobile-profile-chevron{
    font-size:10px;
  }
}

/* Very narrow phones: fixed compact slot; full name stays in the popup. */
@media (max-width:400px){
  body.role-manager .mobile-profile-button,
  body.role-admin .mobile-profile-button{
    right:7px;
    width:88px;
    min-width:88px;
    max-width:88px;
    padding-left:7px;
    padding-right:7px;
  }

  body.role-manager #settings-button,
  body.role-admin #settings-button{
    right:102px;
  }

  body.role-manager .mobile-profile-name,
  body.role-admin .mobile-profile-name{
    font-size:11px;
  }

  body.role-manager .mobile-profile-meta,
  body.role-admin .mobile-profile-meta{
    font-size:8px;
  }
}

/* Operator header uses flex rather than the manager/admin two-row grid.
   Keep the same compact identity idea without changing operator workspace height. */
@media (max-width:820px){
  body.role-operator #logout-button{
    display:none!important;
  }

  body.role-operator .mobile-profile-button{
    display:flex!important;
    width:96px;
    min-width:96px;
    max-width:96px;
    height:40px;
    min-height:40px;
    padding:5px 8px;
    border-radius:10px;
  }

  body.role-operator .mobile-profile-name{
    font-size:12px;
    line-height:1.05;
  }

  body.role-operator .mobile-profile-meta{
    margin-top:2px;
    font-size:8.5px;
    line-height:1;
  }
}

/* The profile popup is a fixed right-aligned card and may never clip
   beyond either side of the viewport. */
@media (max-width:820px){
  .mobile-profile-menu{
    max-width:calc(100vw - 20px);
    overflow:hidden;
  }

  .mobile-profile-menu-head strong{
    max-width:calc(100vw - 105px);
    white-space:normal;
    overflow-wrap:anywhere;
  }
}


/* v0.5.4.9 — operator mobile header:
   logo | maximally-wide current-user profile | settings
   Manager/admin layout is intentionally unchanged. */
@media (max-width:820px){
  body.role-operator .topbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto;
    align-items:center;
    gap:10px;
    padding-left:14px;
    padding-right:14px;
  }

  body.role-operator .brand{
    grid-column:1;
    grid-row:1;
    min-width:0;
    margin:0;
  }

  /* For the operator the FarmBase wordmark is redundant; preserve only logo. */
  body.role-operator .brand > div{
    display:none!important;
  }

  body.role-operator .brand-logo{
    width:58px;
    height:58px;
  }

  /* Hide Base indicator for operator if present in the shared brand DOM. */
  body.role-operator .base-signal-button{
    display:none!important;
  }

  body.role-operator .topbar-actions{
    display:contents;
  }

  body.role-operator .mobile-profile-button{
    grid-column:2;
    grid-row:1;
    position:static!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:58px;
    min-height:58px;
    padding:8px 14px;
    margin:0;
    border-radius:13px;
    overflow:hidden;
  }

  body.role-operator .mobile-profile-name{
    width:100%;
    font-size:16px;
    line-height:1.08;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.role-operator .mobile-profile-meta{
    width:100%;
    margin-top:5px;
    font-size:10px;
    line-height:1;
  }

  body.role-operator #settings-button{
    grid-column:3;
    grid-row:1;
    position:static!important;
    width:58px;
    height:58px;
    min-width:58px;
    margin:0;
  }

  body.role-operator #logout-button,
  body.role-operator .user-chip{
    display:none!important;
  }

  /* No manager/admin second-row nav exists for operator, so keep header compact. */
  body.role-operator .topbar-center{
    display:none!important;
  }
}

@media (max-width:400px){
  body.role-operator .topbar{
    gap:8px;
    padding-left:10px;
    padding-right:10px;
  }

  body.role-operator .brand-logo{
    width:54px;
    height:54px;
  }

  body.role-operator .mobile-profile-button{
    height:54px;
    min-height:54px;
    padding-left:11px;
    padding-right:11px;
  }

  body.role-operator .mobile-profile-name{
    font-size:15px;
  }

  body.role-operator #settings-button{
    width:54px;
    height:54px;
    min-width:54px;
  }
}


/* v0.5.4.10 — operator mobile visual polish */
@media (max-width:820px){
  /* Use the same neutral background as the queue/filter workspace. */
  body.role-operator .topbar{
    background:var(--bg)!important;
    backdrop-filter:none;
  }

  /* Full operator name uses all available middle-column width and clips safely. */
  body.role-operator .mobile-profile-button{
    position:relative!important;
    padding-right:42px!important;
  }

  body.role-operator .mobile-profile-name{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* One clean, larger chevron vertically centered at the right edge. */
  body.role-operator .mobile-profile-chevron{
    position:absolute;
    top:50%;
    right:16px;
    width:10px;
    height:10px;
    margin:0;
    font-size:0!important;
    color:transparent;
    border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);
    transform:translateY(-68%) rotate(45deg);
    transform-origin:center;
  }

  body.role-operator .mobile-profile-meta{
    padding-right:0;
  }

  /* Status and FarmBase ID form one balanced top row. */
  body.role-operator .mobile-card-status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
  }

  body.role-operator .mobile-card-status-row .mobile-status{
    min-width:0;
    flex:1 1 auto;
    flex-wrap:wrap;
  }

  body.role-operator .mobile-card-status-row .mobile-farmbase-id{
    flex:0 0 auto;
    margin-left:auto;
    text-align:right;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
  }
}

@media (max-width:400px){
  body.role-operator .mobile-profile-button{
    padding-right:36px!important;
  }

  body.role-operator .mobile-profile-chevron{
    right:13px;
    width:9px;
    height:9px;
  }
}


/* v0.5.4.11 — explicit unsaved-change semantics */
.mobile-unsaved-hint{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid #e5c987;
  background:#fff5d8;
  color:#775d18;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* Old "draft saved" UI is retired. */
.mobile-draft-hint{
  display:none!important;
}

.app-decision-actions{
  grid-template-columns:auto auto minmax(150px,1fr);
}

@media (max-width:760px){
  .app-decision-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .app-decision-actions .btn:last-child{
    grid-column:1 / -1;
    grid-row:1;
  }

  .app-decision-actions .btn:first-child{
    grid-column:1;
    grid-row:2;
  }

  .app-decision-actions .btn:nth-child(2){
    grid-column:2;
    grid-row:2;
  }
}


/* v0.5.4.12 — clickable filtered result count = Base health signal.
   The number itself remains the current FILTERED result count. */
#base-button{display:none!important}

.header-summary{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:5px 8px;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .16s ease,opacity .16s ease,transform .16s ease;
}
.header-summary:hover{background:#f1f5f1}
.header-summary:focus-visible{outline:2px solid rgba(47,107,67,.35);outline-offset:2px}
.header-summary strong{transition:color .18s ease,opacity .18s ease}
.header-summary.base-count-fresh strong{color:#2f6b43}
.header-summary.base-count-quiet strong{color:#b68125}
.header-summary.base-count-attention strong{color:#b74848}
.header-summary.base-count-unknown strong{color:#778079}
.header-summary.header-summary-updated{animation:farmbase-count-soft-update .30s ease}
@keyframes farmbase-count-soft-update{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  45%{opacity:.58;transform:translate(-50%,-50%) scale(.985)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

body.role-manager .header-summary,
body.role-admin .header-summary{
  position:absolute!important;
  margin:0!important;
  transform:translate(-50%,-50%);
  z-index:7;
  pointer-events:auto!important;
  touch-action:manipulation;
}

/* v0.5.4.12 — operator save belongs to the persistent bottom navigation. */
body.role-operator .mobile-save-actions{display:none!important}
body.role-operator .mobile-nav.mobile-nav-three{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.15fr);
  gap:10px;
}
body.role-operator .mobile-nav.mobile-nav-three .btn{
  width:100%;
  min-width:0;
  min-height:54px;
  padding-left:8px;
  padding-right:8px;
}
body.role-operator .mobile-nav-save{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;
}
body.role-operator .mobile-nav-save:disabled{
  opacity:1;
  color:#929a94;
  border-color:#d7dcd7;
  background:#eef0ed;
  cursor:default;
}
body.role-operator .mobile-nav-save.is-dirty:not(:disabled){
  color:#fff;
  border-color:var(--accent);
  background:var(--accent);
}
@media(max-width:380px){
  body.role-operator .mobile-nav.mobile-nav-three{gap:7px}
  body.role-operator .mobile-nav.mobile-nav-three .btn{font-size:14px;padding-left:5px;padding-right:5px}
}


/* v0.5.4.13 — header count hotfix.
   v0.5.4.6 intentionally disabled pointer events when the number was display-only.
   It is now the Base-status button, so restore click/tap explicitly. */
body.role-manager #header-summary,
body.role-admin #header-summary{
  pointer-events:auto!important;
  z-index:7!important;
}


/* v0.5.5.0 — operator daily-access controls */
.field-hint{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}
.user-access-usage{margin-top:4px;color:var(--accent);font-size:11px;font-weight:700}
body.role-operator .mobile-queue-position{min-width:0;line-height:1.25}
body.role-operator #mobile-counter{display:block;max-width:230px;white-space:normal}
@media(max-width:420px){body.role-operator #mobile-counter{font-size:16px;max-width:205px}}


/* v0.5.5.1 — compact two-line operator queue counter */
body.role-operator .mobile-queue-position>.muted{display:none!important}
body.role-operator #mobile-counter{white-space:pre-line;line-height:1.28;max-width:none}


/* v0.5.5.2 — final mobile polish + inline operator contact capture */
.mobile-email{font-weight:700}
.mobile-direct-telegram{display:flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;color:#1688bd;border-color:#b9ddeb;background:#f4fbfe}
.mobile-add-contact-wrap{display:grid;gap:8px;margin-top:2px}
.mobile-add-contact-toggle{width:100%;min-height:44px;background:#fff;border:1px dashed #b9c8b9;color:var(--accent)}
.mobile-add-contact-form{display:grid;gap:9px;padding:11px;border:1px solid #d7dfd5;border-radius:11px;background:#f7faf6}
.mobile-add-contact-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px}
.mobile-add-contact-grid .field:last-child{grid-column:1/-1}
.mobile-add-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-add-contact-actions .btn{min-height:42px}
.mobile-add-contact-note{color:var(--muted);font-size:11px;line-height:1.35}
@media(max-width:420px){.mobile-add-contact-grid{grid-template-columns:1fr}.mobile-add-contact-grid .field:last-child{grid-column:auto}}


/* v0.5.5.3 — date-aware operator timeline */
.monitor-timeline-date-field{min-width:180px}
.monitor-date-picker{display:grid;grid-template-columns:42px minmax(125px,1fr) 42px;gap:6px;align-items:center}
.monitor-date-picker input{height:42px;min-width:0;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font:inherit}
.monitor-date-step{height:42px;min-width:42px;padding:0;font-size:18px}
.monitor-legend-dot.opened{background:#fff;border:1.5px solid #748078}
.monitor-time-dot.opened{background:#fff;border-color:#748078;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.monitor-day.clickable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.monitor-day.clickable:hover{transform:translateY(-1px);box-shadow:0 2px 7px rgba(25,55,35,.14)}
.monitor-day.timeline-selected{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:760px){
  .monitor-timeline-date-field{min-width:0}
  .monitor-date-picker{grid-template-columns:42px minmax(0,1fr) 42px}
}


/* v0.5.5.5 — explicit timeline navigation + user access sharing */
.user-main{min-width:0}
.user-contact-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:25px}
.user-role-meta{color:var(--muted);font-size:13px}
.user-share-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;
  border:1px solid #d7dfd5;border-radius:8px;background:#fff;
  color:var(--accent);text-decoration:none;transition:background .12s ease,border-color .12s ease,transform .12s ease
}
.user-share-link:hover{background:#f0f7f1;border-color:#b8cbbd;transform:translateY(-1px)}
.user-share-link .telegram-brand-icon{width:17px;height:17px}
.user-share-svg{width:17px;height:17px}
.user-copy-access{white-space:nowrap}
.monitor-timeline-date-field>span{font-weight:800;color:var(--muted)}
.monitor-date-picker{max-width:360px}
@media(max-width:760px){
  .monitor-filters .monitor-timeline-date-field{grid-column:1/-1}
  .monitor-timeline-date-field>span{font-size:13px}
  .monitor-date-picker{max-width:none;width:100%;grid-template-columns:48px minmax(0,1fr) 48px}
  .monitor-date-step{height:46px;min-width:48px}
  .monitor-date-picker input{height:46px;font-size:16px}
  .user-contact-line{gap:4px}
  .user-role-meta{font-size:12px}
}


/* v0.5.5.6 — timeline toolbar geometry fix */
@media(min-width:761px){
  .monitor-filters.timeline-mode{grid-template-columns:270px minmax(260px,420px) auto;justify-content:start}
  .monitor-filters.timeline-mode .monitor-timeline-date-field{min-width:0;width:270px}
  .monitor-filters.timeline-mode .monitor-date-picker{width:100%;max-width:270px;grid-template-columns:42px minmax(0,1fr) 42px}
  .monitor-filters.timeline-mode .field:has(#monitor-operator){width:100%;max-width:420px}
}
@media(max-width:760px){
  .monitor-filters.timeline-mode{grid-template-columns:1fr 1fr}
  .monitor-filters.timeline-mode .monitor-timeline-date-field{grid-column:1/-1;width:auto}
  .monitor-filters.timeline-mode .monitor-date-picker{max-width:none;width:100%;grid-template-columns:48px minmax(0,1fr) 48px}
}


/* v0.5.5.7 — Super Admin unified source health cards */
.base-source-health-card{display:flex;flex-direction:column;gap:8px}
.base-source-health-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.base-source-health-name{font-size:15px;line-height:1.25}
.base-source-health-chip{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.base-source-health-note{font-size:13px;line-height:1.4}
.base-source-health-meta{color:var(--muted);font-size:12px;line-height:1.35}
.base-source-ok{background:#f6faf6;border-color:#cfe2d3}
.base-source-warning{background:#fffaf0;border-color:#eadba9}
.base-source-critical{background:#fff7f7;border-color:#e6c3c3}
.base-source-unknown{background:#f7f8f6;border-color:#dce1db}
.base-source-health-ok{background:#e8f3eb;color:#28653d;border:1px solid #cce2d2}
.base-source-health-warning{background:#fff5dc;color:#81601b;border:1px solid #eedda8}
.base-source-health-critical{background:#faeaea;color:#963737;border:1px solid #eccaca}
.base-source-health-unknown{background:#eef1ed;color:#606a61;border:1px solid #dce1db}


/* v0.5.5.8 — self-service account profile */
.account-backdrop{z-index:125}
.account-panel{width:min(560px,96vw);z-index:130}
.account-section{display:grid;gap:10px}
.account-section h3{margin:0}
.account-intro{margin:0 0 2px;line-height:1.45}
.account-form{display:grid;gap:12px}
.account-form .btn{min-height:44px}
.account-form input[readonly]{background:#f3f5f2;color:#6f786f;cursor:default}
.account-readonly-note,.account-password-note{padding:10px 12px;border-radius:10px;background:#f6f8f5;color:var(--muted);font-size:12px;line-height:1.45}
.account-message-error{background:#fff0f0!important;color:var(--danger)!important}
.mobile-profile-account{width:100%;margin-top:2px}
.settings-account-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-account-card .btn{flex:0 0 auto}
@media(max-width:760px){
  .account-panel{width:100vw;max-width:none}
  .settings-account-card{align-items:stretch}
}

.settings-stack{grid-template-rows:auto auto auto auto auto 1fr auto}

/* v0.5.5.9 — password recovery */
.auth-screen .login-card{width:min(430px,100%)}
.auth-flow-copy{margin:-8px 0 18px}
.auth-flow-copy h2{margin:0 0 7px;font-size:22px;line-height:1.25}
.auth-flow-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.auth-link-button{
  width:100%;
  min-height:34px;
  padding:4px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:13px;
  font-weight:750;
  text-align:center;
  cursor:pointer;
}
.auth-link-button:hover{background:#f2f6f1;text-decoration:underline;text-underline-offset:3px}
.auth-link-button:disabled{opacity:.45;cursor:default;text-decoration:none}
.auth-link-muted{color:var(--muted)}
.auth-flow-message{margin-top:0;line-height:1.45}
.auth-flow-message.is-error{background:#fff0f0;color:var(--danger)}
@media(max-width:560px){
  .auth-screen,.login-screen{padding:14px}
  .auth-screen .login-card,.login-screen .login-card{padding:22px}
  .auth-flow-copy h2{font-size:20px}
}/* v0.5.6.2 — compact, extensible server-side sorting controls */
.sort-toolbar{display:flex;align-items:center;gap:8px;margin-top:14px;min-width:0}
.sort-toolbar-label{flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:800}
.sort-options{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;flex-wrap:wrap}
.sort-option{min-height:36px;border:1px solid #ccd4ca;border-radius:9px;background:#fff;color:var(--text);font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:7px 10px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.sort-option::after{content:attr(data-arrow);display:inline-block;flex:0 0 1em;width:1em;margin-left:5px;text-align:center;font-size:15px;line-height:1;visibility:hidden}
.sort-option:hover{background:#f4f6f3}
.sort-option.active{border-color:#9fbea7;background:var(--accent-soft);color:var(--accent)}
.sort-option.active::after{visibility:visible}
/* Arrow space is reserved on every button, so activating or reversing sort never changes button width. */
/* Future sort buttons (including equipment) are inserted here without changing layout. */
.sort-extra-options{display:contents}
@media(max-width:560px){.sort-toolbar{gap:6px;flex-wrap:wrap}.sort-toolbar-label{width:100%;flex-basis:100%}.sort-options{gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sort-options::-webkit-scrollbar{display:none}.sort-option{flex:0 0 auto;padding:7px 9px;font-size:11px}.sort-option::after{margin-left:4px;font-size:14px}}


/* v0.5.8.6 — R17 features plus contained diagnostics tables and project-potential facets. */
.process-overlay{
  position:fixed;
  inset:0;
  z-index:1400;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(245,246,242,.78);
  backdrop-filter:blur(3px);
}
.process-overlay-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:min(430px,calc(100vw - 32px));
  padding:16px 18px;
  border:1px solid #ccd9ce;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 48px rgba(24,40,28,.18);
}
.process-overlay-card strong{display:block;font-size:16px;line-height:1.25}
.process-overlay-card span:not(.process-overlay-spinner){display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.process-overlay-spinner{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:3px solid #dce9df;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:farmbase-process-spin .75s linear infinite;
}
@keyframes farmbase-process-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.process-overlay-spinner{animation-duration:1.8s}}

/* A checkbox must not inherit the full-width text-input geometry. */
.check-row input[type="checkbox"]{
  appearance:auto;
  flex:0 0 19px;
  width:19px!important;
  min-width:19px;
  max-width:19px;
  height:19px;
  min-height:19px!important;
  margin:2px 0 0;
  padding:0;
  border-radius:4px;
  accent-color:var(--accent);
}

.phone-shared-action{cursor:pointer;font:inherit;line-height:1}
.phone-shared-action:hover,.phone-shared-action:focus-visible{background:#ffe9a6;border-color:#d3b85c;outline:none;box-shadow:0 0 0 3px rgba(211,184,92,.18)}
.phone-duplicate-action{
  display:block;
  width:auto;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  text-align:left;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  cursor:pointer;
}
.phone-duplicate-action:hover,.phone-duplicate-action:focus-visible{color:#654d0c;outline:none;text-decoration-style:solid}

tbody tr.shared-phone-group-row{--phone-group-color:#d5e6d7;--phone-group-bg:#f7fbf7;background:var(--phone-group-bg)}
tbody tr.shared-phone-group-tone-1{--phone-group-color:#d7dfef;--phone-group-bg:#f7f9fd}
tbody tr.shared-phone-group-tone-2{--phone-group-color:#eadcb8;--phone-group-bg:#fffbf1}
tbody tr.shared-phone-group-tone-3{--phone-group-color:#dfd5eb;--phone-group-bg:#fbf8fd}
tbody tr.shared-phone-group-row:hover{background:color-mix(in srgb,var(--phone-group-bg) 78%,#e8efe9)}
tbody tr.shared-phone-group-row td:first-child{border-left:4px solid var(--phone-group-color);padding-left:10px}
tbody tr.shared-phone-group-start td{border-top:2px solid var(--phone-group-color)}
.shared-phone-group-label{display:inline-flex;margin:5px 0 1px;padding:3px 7px;border-radius:999px;background:var(--phone-group-color);color:#425047;font-size:10px;font-weight:800;line-height:1.2}

@media(max-width:560px){
  .catalog-view-bar{display:block!important;padding:10px!important}
  .catalog-view-bar-label{display:block;margin:0 0 8px}
  .catalog-view-bar .catalog-view-switch{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,.8fr) minmax(0,1.52fr);
    gap:6px;
    width:100%;
    flex-wrap:nowrap;
  }
  .catalog-view-switch .btn{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:7px 4px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:clip;
    font-size:clamp(11px,3.35vw,13px);
    line-height:1.1;
  }
}

.floating-help-button{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:65;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid #a9c5b0;
  border-radius:50%;
  background:#fff;
  color:var(--accent);
  box-shadow:0 9px 28px rgba(24,40,28,.17);
  font-size:22px;
  font-weight:900;
}
.floating-help-button:hover{background:var(--accent-soft)}
.context-help{
  display:inline-grid;
  place-items:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  min-height:20px;
  margin-left:4px;
  padding:0;
  border:1px solid #b8c9bb;
  border-radius:50%;
  background:#fff;
  color:var(--accent);
  font:800 12px/1 system-ui;
  vertical-align:middle;
}
.context-help:hover{background:var(--accent-soft)}
.help-panel{
  position:fixed;
  inset:0;
  z-index:1500;
  overflow-y:auto;
  background:var(--bg);
}
.help-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px max(20px,calc((100vw - 980px)/2));
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
}
.help-header h2{margin:3px 0 0;font-size:28px}
.help-content{width:min(980px,calc(100vw - 32px));margin:0 auto;padding:28px 0 56px}
.help-intro{margin:0 0 18px;padding:16px 18px;border:1px solid #d7e2d8;border-radius:14px;background:#fff;color:#4e5c52;font-size:16px;line-height:1.55}
.help-section{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.help-section h3{margin:0 0 10px;font-size:18px}
.help-section ul{margin:0;padding-left:22px;color:#4f5b52;line-height:1.55}
.help-section li+li{margin-top:7px}
@media(max-width:760px){
  .floating-help-button{right:12px;bottom:72px;width:42px;height:42px;font-size:20px}
  .context-help{display:none!important}
  .help-header{padding:14px 16px}
  .help-header h2{font-size:22px}
  .help-content{width:auto;margin:0;padding:16px 12px 40px}
  .help-intro,.help-section{padding:14px}
}

.base-source-output-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:10px}
.base-source-output-head h4{margin:0}
.base-source-output-head p{margin:5px 0 0;font-size:12px}
.base-source-period{flex:0 0 150px}
.base-source-period select{min-height:38px;padding-top:6px;padding-bottom:6px}
.base-source-table{min-width:940px;table-layout:fixed}
.base-source-table th:nth-child(1),.base-source-table td:nth-child(1){width:25%!important}
.base-source-table th:nth-child(2),.base-source-table td:nth-child(2){width:9%!important}
.base-source-table th:nth-child(3),.base-source-table td:nth-child(3){width:12%!important}
.base-source-table th:nth-child(4),.base-source-table td:nth-child(4){width:14%!important}
.base-source-table th:nth-child(5),.base-source-table td:nth-child(5){width:9%!important}
.base-source-table th:nth-child(6),.base-source-table td:nth-child(6){width:9%!important}
.base-source-table th:nth-child(7),.base-source-table td:nth-child(7){width:11%!important}
.base-source-table th:nth-child(8),.base-source-table td:nth-child(8){width:11%!important}
.base-streams-table{min-width:900px;table-layout:fixed}
.base-streams-table th:nth-child(1),.base-streams-table td:nth-child(1){width:22%!important}
.base-streams-table th:nth-child(2),.base-streams-table td:nth-child(2){width:16%!important}
.base-streams-table th:nth-child(3),.base-streams-table td:nth-child(3){width:10%!important}
.base-streams-table th:nth-child(4),.base-streams-table td:nth-child(4){width:9%!important}
.base-streams-table th:nth-child(5),.base-streams-table td:nth-child(5){width:9%!important}
.base-streams-table th:nth-child(6),.base-streams-table td:nth-child(6){width:9%!important}
.base-streams-table th:nth-child(7),.base-streams-table td:nth-child(7){width:12.5%!important}
.base-streams-table th:nth-child(8),.base-streams-table td:nth-child(8){width:12.5%!important}
.base-source-name{display:block;font-weight:800;line-height:1.3}
.base-source-code{display:block;margin-top:3px;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.base-source-stream{display:inline-flex;padding:3px 7px;border-radius:999px;background:#edf4ee;color:#2f6841;font-size:10px;font-weight:800}
.base-source-stream.projects{background:#f4efe5;color:#735b28}
.base-source-number{font-variant-numeric:tabular-nums;font-weight:750}
.base-source-output-note{margin-top:9px;font-size:11px;line-height:1.4}

/* v0.5.8.6-HF1 — the two diagnostics tables live inside horizontal scroll
   containers. The application's global sticky header uses top:72px and would
   therefore move these local headers below the first data row. Keep their
   native table order; horizontal containment and the R18 column widths remain. */
.base-table-wrap>.base-table>thead{display:table-header-group}
.base-table-wrap>.base-table>tbody{display:table-row-group}
.base-table-wrap>.base-table>thead>tr>th{
  position:static;
  top:auto;
  z-index:auto;
}
@media(max-width:760px){
  .base-source-output-head{align-items:stretch;flex-direction:column}
  .base-source-period{flex-basis:auto;width:100%}
}

/* v0.5.6.2 — registry date in list without adding a separate column */
.org-region-date{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.2;font-variant-numeric:tabular-nums}
.mobile-registration-date{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.25;font-weight:650;font-variant-numeric:tabular-nums}


/* R19U2 / v0.5.8.8 — fit the operator queue below its actual header and tabs.
   The card scrolls inside the remaining space; navigation keeps its own row. */
@media (max-width:820px) {
  body.role-operator #app {
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
  }
  body.role-operator .topbar {
    flex:0 0 auto;
    height:auto;
  }
  body.role-operator .page {
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-height:0;
    height:auto;
    width:100%;
  }
  body.role-operator .catalog-view-bar {
    flex:0 0 auto;
  }
  body.role-operator .mobile-queue {
    flex:1 1 0;
    min-height:0;
    height:auto;
  }
}