:root {
  --ink: #223932;
  --muted: #7b8780;
  --green: #375e46;
  --line: #e2e7df;
  --paper: #f6f7f2;
  --white: #fff;
  --gold: #b0843d;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font:
    15px/1.5 "Segoe UI",
    Arial,
    sans-serif;
  background: var(--paper);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  transition: background 0.16s;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  color: var(--green);
}
[hidden] {
  display: none !important;
}
.shell {
  display: grid;
  grid-template-columns: 242px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #fdfefa;
  border-right: 1px solid var(--line);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
  font-size: 29px;
  letter-spacing: -1.2px;
  font-weight: 600;
  margin: 0 12px 45px;
}
.brand-mark {
  background: var(--green);
  border-radius: 14px 4px 14px 4px;
  color: #fff;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 37px;
  width: 43px;
  height: 43px;
  line-height: 40px;
  text-align: center;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.45px;
  font-weight: 500;
  margin-top: 0;
}
.workspace {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--muted);
  padding: 0 14px 24px;
}
.workspace span {
  display: block;
  letter-spacing: 0;
  font-size: 15px;
  color: #526c59;
  margin-top: 5px;
}
nav {
  display: grid;
  gap: 7px;
}
.nav {
  border: 0;
  background: none;
  text-align: left;
  color: #6e7b72;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 15px;
  display: flex;
  gap: 11px;
  align-items: center;
}
.nav span {
  font-size: 18px;
  width: 20px;
}
.nav b {
  font-size: 14px;
  margin-left: auto;
  background: #dae5d7;
  padding: 1px 7px;
  border-radius: 4px;
}
.nav.active,
.nav:hover {
  background: #eaf0e5;
  color: #355540;
}
.sidebar-bottom {
  margin-top: auto;
  padding: 24px 12px 0;
}
.sidebar-bottom p {
  color: #90998f;
  font-size: 14px;
}
.bot-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.bot-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #809877;
}
.quiet {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
}
main {
  padding: 36px 42px 15px;
  min-width: 0;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  gap: 20px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: #889286;
  font-weight: 600;
}
h1 {
  font-size: 31px;
  letter-spacing: -0.8px;
  margin: 7px 0 3px;
  font-weight: 600;
}
header p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.primary,
.secondary {
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
}
.primary {
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
}
.primary:hover {
  background: #294834;
}
.secondary {
  background: #fff;
  border: 1px solid #dbe2d6;
  color: #38503e;
}
.secondary:hover {
  background: #edf2e9;
}
.avatar {
  width: 35px;
  height: 35px;
  border: 1px solid #dde4d5;
  background: #e8eedf;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
}
.metric-top {
  display: flex;
  justify-content: space-between;
  color: #79877b;
  font-size: 14px;
}
.metric-icon {
  background: #edf2e6;
  color: #6d8260;
  border-radius: 5px;
  padding: 0 6px;
}
.metric strong {
  font-size: 30px;
  font-weight: 500;
  display: block;
  margin: 8px 0 0;
  line-height: 1.2;
}
.metric small {
  font-size: 13px;
  color: #a0a79b;
}
.automation {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #edf2e7;
  border: 1px solid #dde6d6;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 27px;
}
.automation-icon {
  border-radius: 50%;
  background: #dbe7d4;
  color: var(--green);
  font-size: 23px;
  width: 39px;
  height: 39px;
  text-align: center;
}
.automation strong {
  font-size: 15px;
  font-weight: 600;
}
.automation p {
  font-size: 14px;
  color: #879180;
  margin: 2px 0 0;
}
.automation .switch {
  margin-left: auto;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 21px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch span {
  position: absolute;
  inset: 0;
  background: #bec8b6;
  border-radius: 21px;
  cursor: pointer;
}
.switch span:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: transform 0.15s;
}
.switch input:checked + span {
  background: #5c7a4c;
}
.switch input:checked + span:before {
  transform: translateX(15px);
}
#autoLabel {
  font-size: 14px;
  min-width: 67px;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.toolbar {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tab {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  color: #939b91;
  border-radius: 6px;
  font-size: 14px;
}
.tab.active {
  background: #eff3e9;
  color: #44633c;
  font-weight: 600;
}
.search {
  width: 245px;
  border: 1px solid #e4e8de;
  border-radius: 6px;
  padding: 9px 12px;
  background: #fcfdfb;
  font-size: 14px;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #92aa83;
  outline-offset: 1px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}
th {
  background: #f9faf6;
  color: #879180;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15px;
  padding: 13px 20px;
  border-top: 1px solid #edf0e7;
  border-bottom: 1px solid #edf0e7;
}
td {
  padding: 17px 20px;
  border-bottom: 1px solid #edf0e7;
  font-size: 15px;
  color: #62705f;
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #fafbf7;
}
.order-link {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  color: #34583c;
  font-size: 15px;
}
.sub {
  display: block;
  font-size: 13px;
  color: #a1a79c;
  margin-top: 3px;
}
.customer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.initials {
  width: 29px;
  height: 29px;
  background: #f0eee3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #9b956b;
}
.badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 13px;
  background: #f1f3ee;
  color: #68755e;
}
.badge.new {
  background: #f6efe0;
  color: #a17b37;
}
.badge.cdek_created {
  background: #edf0f6;
  color: #687994;
}
.badge.in_transit {
  background: #eaf1f5;
  color: #628198;
}
.badge.ready {
  background: #f0edfa;
  color: #8b72b2;
}
.badge.delivered,
.badge.sent {
  background: #e8f1e3;
  color: #688551;
}
.badge.failed,
.badge.uncertain {
  background: #f8e9e4;
  color: #aa6350;
}
.amount {
  font-weight: 600;
  color: #4a5c45;
}
.pagination {
  padding: 16px 20px;
  color: #a1a99b;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 10px;
  color: var(--green);
  margin-left: 5px;
}
footer {
  display: flex;
  justify-content: space-between;
  color: #a4ac9e;
  font-size: 13px;
  margin-top: 23px;
}
.empty {
  text-align: center;
  padding: 55px 20px;
  color: #8b9784;
}
.empty strong {
  display: block;
  font-size: 17px;
  color: #50674b;
  margin-bottom: 8px;
}
.empty p {
  max-width: 500px;
  margin: 0 auto;
  font-size: 15px;
}
.empty-icon {
  font-size: 36px;
  color: #a6b49c;
  margin-bottom: 14px;
}
.section-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 5px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}
.card p {
  font-size: 15px;
  color: #8c9685;
}
.card .badge {
  margin-bottom: 15px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 14px 0;
  font-size: 15px;
  color: #617557;
}
input,
select,
textarea {
  border: 1px solid #dce4d5;
  border-radius: 6px;
  padding: 9px;
  color: #3f5439;
  background: #fff;
}
textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.6;
}
.stack {
  display: grid;
  gap: 16px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.small {
  padding: 5px 9px;
  font-size: 13px;
}
.notice {
  background: #f8f3e7;
  border: 1px solid #ece1c8;
  border-radius: 7px;
  padding: 12px 16px;
  color: #9b7e42;
  font-size: 15px;
  margin: 12px 0;
}
.error {
  color: #ae5948;
}
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top, #e2eadb, transparent 70%);
}
.login-card {
  width: min(420px, 90vw);
  padding: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 15px 50px #2739260a;
}
.login-card h1 {
  font-size: 25px;
  margin-top: 23px;
}
.login-card p {
  font-size: 15px;
  color: #86917e;
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 20px 0;
  font-size: 15px;
}
.login-card button.primary {
  width: 100%;
  margin-top: 8px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  width: min(790px, 94vw);
  max-height: 90vh;
  padding: 26px;
  color: var(--ink);
  box-shadow: 0 30px 100px #23342533;
}
dialog::backdrop {
  background: #19301f66;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.dialog-head h2 {
  font-size: 23px;
  font-weight: 500;
  margin: 3px 0;
}
.icon-button {
  border: 0;
  background: #f0f3eb;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #7e8c73;
  font-size: 22px;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  font:
    15px/1.8 "Segoe UI",
    sans-serif;
  background: #f8faf5;
  border-radius: 8px;
  padding: 18px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-grid div {
  font-size: 15px;
  padding: 10px;
  background: #f8faf5;
  border-radius: 7px;
}
.detail-grid small {
  display: block;
  color: #919b89;
  font-size: 13px;
  margin-bottom: 4px;
}
.timeline {
  border-left: 2px solid #dce7d3;
  margin: 20px 8px;
  padding-left: 20px;
}
.timeline article {
  position: relative;
  margin-bottom: 15px;
}
.timeline article:before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 8px;
  height: 8px;
  background: #91a87e;
  border-radius: 50%;
  border: 1px solid #fff;
}
.timeline p {
  margin: 2px 0;
  color: #8f9b85;
  font-size: 14px;
}
#toast {
  position: fixed;
  bottom: 25px;
  right: 30px;
  max-width: 420px;
  border: 1px solid #d5e0cf;
  border-radius: 9px;
  background: #fff;
  color: #3f5a34;
  padding: 15px 20px;
  box-shadow: 0 6px 35px #25392322;
  z-index: 5;
}
.mono {
  font-family: Consolas, monospace;
  word-break: break-all;
}
.spaced {
  margin-top: 22px;
}
.inline-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inline-input input {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1050px) {
  .shell {
    grid-template-columns: 195px 1fr;
  }
  .sidebar {
    padding: 25px 10px;
  }
  .brand {
    font-size: 24px;
  }
  main {
    padding: 25px;
  }
  .summary {
    gap: 7px;
  }
  .metric {
    padding: 12px;
  }
  .metric-top {
    font-size: 13px;
  }
  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .search {
    width: 100%;
  }
  .header-actions {
    gap: 8px;
  }
  .avatar {
    display: none;
  }
}
@media (max-width: 750px) {
  .shell {
    display: block;
  }
  .sidebar {
    position: relative;
    height: auto;
    padding: 15px;
  }
  .brand {
    margin: 0 0 15px;
  }
  .workspace,
  .sidebar-bottom {
    display: none;
  }
  nav {
    display: flex;
    overflow: auto;
  }
  .nav {
    flex-shrink: 0;
    font-size: 14px;
    padding: 9px;
  }
  .nav span {
    display: none;
  }
  main {
    padding: 20px 14px;
  }
  header {
    align-items: flex-start;
  }
  h1 {
    font-size: 26px;
  }
  header p {
    max-width: 210px;
    font-size: 14px;
  }
  .summary {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric strong {
    font-size: 24px;
  }
  .cards,
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .automation {
    padding: 12px;
    gap: 10px;
  }
  .automation-icon {
    display: none;
  }
  .header-actions {
    flex-direction: column;
  }
  .automation p {
    max-width: 190px;
  }
  footer {
    gap: 20px;
  }
  .toolbar {
    padding: 12px;
  }
}

.login-card .error {
  color: #b42318;
  font-weight: 600;
}
.password-field {
  position: relative;
  display: block;
  width: 100%;
}
.password-field input {
  width: 100%;
  padding-right: 52px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 44px;
  height: 38px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526c59;
  display: grid;
  place-items: center;
}
.password-toggle:hover {
  background: #eaf0e5;
}
.password-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
.password-toggle svg {
  width: 21px;
  height: 21px;
}
.password-toggle .eye-slash {
  display: none;
}
.password-toggle.password-visible .eye-slash {
  display: block;
}

/* Compact order workspace and notification history. */
.shell { grid-template-columns: 218px minmax(0, 1fr); }
.sidebar { padding: 24px 12px; }
.brand { margin: 0 10px 28px; }
.workspace { padding-bottom: 18px; }
.nav { padding: 11px 12px; gap: 8px; }
main { padding: 20px 22px 15px; }
.summary { gap: 10px; margin-bottom: 12px; }
.metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; min-height: 62px; }
.metric-top { font-size: 14px; color: #60715f; }
.metric-icon { display: none; }
.metric strong { font-size: 27px; margin: 0; }
.automation { gap: 12px; padding: 9px 14px; margin-bottom: 16px; }
.automation-icon { width: 32px; height: 32px; font-size: 21px; flex-shrink: 0; }
.automation strong { font-size: 15px; }
.automation p { font-size: 13px; margin: 0; color: #66755e; }
#autoLabel { font-size: 14px; min-width: 68px; }
.orders-heading { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.orders-heading h1 { font-size: 24px; margin: 0; letter-spacing: -.4px; }
.orders-heading h1 span { display: inline-block; font-size: 14px; font-weight: 500; background: #eef2e8; border-radius: 6px; padding: 2px 8px; vertical-align: middle; margin-left: 7px; letter-spacing: 0; }
.orders-sync { display: flex; align-items: center; gap: 16px; }
.last-sync { display: grid; font-size: 13px; text-align: right; color: #788373; }
.last-sync time, .last-sync strong { font-size: 14px; color: #40583e; font-weight: 500; font-variant-numeric: tabular-nums; }
#sync { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 192px; min-height: 43px; white-space: nowrap; }
#sync:disabled { opacity: 1; background: #edf2e7; color: #49663c; }
.sync-icon { display: inline-flex; width: 18px; height: 18px; }
.sync-icon svg { width: 100%; height: 100%; }
.is-loading .sync-icon { animation: sync-spin .9s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
.sync-error { margin: 0 18px 12px; font-size: 14px; }
.orders-panel .toolbar { padding: 0 18px 14px; flex-wrap: wrap; }
.tab { font-size: 14px; padding: 7px 10px; color: #65755e; }
.search { font-size: 14px; width: 215px; }
.orders-table { min-width: 1000px; table-layout: fixed; white-space: normal; }
.order-column { width: 270px; }
.customer-column { width: 208px; }
.amount-column { width: 106px; }
.shipment-column { width: 145px; }
.notification-column { width: 76px; }
.orders-table th { padding: 12px 10px; font-size: 13px; color: #62745c; font-weight: 600; line-height: 1.35; }
.orders-table td { padding: 13px 10px; font-size: 15px; }
.orders-table .order-link { font-size: 15px; text-align: left; display: block; }
.order-number + .order-number { margin-top: 4px; }
.order-number.cdek-link { font-size: 14px; color: #516a43; }
.orders-table .sub { font-size: 13px; color: #7c8776; }
.orders-table .phone { color: #6a7963; }
.customer-name { line-height: 1.4; overflow-wrap: anywhere; }
.orders-table .amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.orders-table .badge { font-size: 13px; padding: 3px 7px; }
.notification-heading, .notification-cell { text-align: center; }
.notification-state { background: transparent; border: 1px solid transparent; border-radius: 9px; width: 42px; height: 40px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.notification-state svg { width: 27px; height: 27px; flex-shrink: 0; }
.notification-state small { position: absolute; right: -3px; bottom: -4px; font-size: 10px; font-weight: 600; background: white; padding: 0 2px; border-radius: 3px; }
.notification-state.current { color: #cf2e36; background: #fff0f0; border-color: #f4d0d2; }
.notification-state.queued { color: #9c650b; background: #fff3d5; border-color: #eed49a; }
.notification-state.obsolete { color: #b0b8ad; }
.notification-state.sent { color: #708575; }
.notification-state.read { color: #1689d4; }
.notification-state:hover { background: #edf2e8; border-color: #d8e3d2; }
.notification-state.current:hover { background: #ffe0e1; border-color: #e9a6aa; }
.notification-state.queued:hover { background: #ffe7af; border-color: #d9b666; }
.notification-state:focus-visible, .open-whatsapp:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.open-whatsapp { display: inline-flex; align-items: center; gap: 5px; color: #287348; background: #f1f8f0; border: 1px solid #d8e9d8; border-radius: 5px; padding: 4px 7px; font-size: 13px; text-decoration: none; white-space: nowrap; margin-top: 7px; }
.open-whatsapp svg { width: 17px; height: 17px; flex-shrink: 0; }
.open-whatsapp:hover { background: #e4f2e2; }
.open-whatsapp.disabled { background: transparent; border-color: transparent; padding-left: 0; color: #8b9586; }
.actions .open-whatsapp { margin-top: 0; }
.notification-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 18px 0; font-size: 13px; border-top: 1px solid var(--line); }
.notification-legend span { display: inline-flex; align-items: center; gap: 5px; color: #6b7964; }
.notification-legend svg { width: 20px; height: 20px; }
.notification-legend .current svg { color: #cf2e36; }
.notification-legend .queued svg { color: #9c650b; }
.notification-legend .obsolete svg { color: #a6afa1; }
.notification-legend .read svg { color: #1689d4; }
.pagination { padding: 12px 18px; }
footer { margin-top: 14px; }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 198px minmax(0, 1fr); }
  main { padding: 16px; }
  .metric { padding: 9px 10px; gap: 6px; }
  .metric-top { font-size: 13px; }
  .orders-panel .toolbar { flex-direction: row; }
}
@media (max-width: 750px) {
  .shell { display: block; }
  .sidebar { padding: 12px; }
  .brand { margin-bottom: 14px; }
  .summary { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .metric { min-height: 48px; }
  .metric:last-child { grid-column: 1 / -1; }
  .automation { gap: 8px; }
  .automation p { max-width: none; }
  .orders-heading { flex-wrap: wrap; padding: 12px; gap: 12px; }
  .orders-sync { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .last-sync { text-align: left; }
  .orders-panel .toolbar { padding: 0 12px 12px; }
  .orders-panel .search { width: 100%; }
  .notification-legend { padding: 12px; }
}

.orders-table { min-width: 1280px; }
.site-amount-column { width: 160px; }
.cdek-amount-column { width: 197px; }
.amount-breakdown { margin: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.4; }
.amount-breakdown > div { display: flex; gap: 8px; justify-content: space-between; padding: 0; background: transparent; }
.amount-breakdown dt { color: #7d8975; white-space: nowrap; }
.amount-breakdown dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: #465d3f; font-weight: 500; }
.amount-breakdown > div:last-child dd { font-weight: 700; }
.amount-breakdown > div:last-child { margin-top: 3px; }

.orders-table { min-width: 1020px; }
.order-column { width: 154px; }
.customer-column { width: 190px; }
.site-amount-column { width: 148px; }
.cdek-amount-column { width: 198px; }
.notification-column { width: 66px; }
.order-stage { margin-top: 6px; }
.orders-table .amount-breakdown { font-size: 13px; }
.shell { grid-template-columns: 208px minmax(0, 1fr); }
main { padding: 20px 18px 15px; }
.orders-table { min-width: 1000px; }
.order-column { width: 150px; }
.customer-column { width: 182px; }
.cdek-amount-column { width: 190px; }
.notification-column { width: 66px; }
.order-number.cdek-link { font-size: 13px; white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 750px) { .shell { display: block; } main { padding: 16px 12px; } }

.selection-column { width: 58px; }
.orders-table { min-width: 1245px; }
.site-amount-column { width: 188px; }
.cdek-amount-column { width: 235px; }
.selection-cell { text-align: center; font-variant-numeric: tabular-nums; }
.selection-cell input { width: 18px; height: 18px; accent-color: var(--green); vertical-align: middle; cursor: pointer; margin: 0; }
.selection-cell span { display: block; margin-top: 5px; font-size: 13px; color: #788773; }
.bulk-notifications { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: #eef5e9; border-top: 1px solid #dfe9d8; border-bottom: 1px solid #dfe9d8; padding: 12px 18px; margin-bottom: 12px; }
.bulk-notifications > div { margin-right: auto; }
.bulk-notifications strong { display: block; font-size: 15px; }
.bulk-notifications span { display: block; font-size: 13px; color: #718269; }
.orders-table tr:has(input[data-select-order]:checked) { background: #f1f6ec; }
.order-stage .sub.error { color: #b42318; }

/* The orders table owns scrolling; everything above it stays in place. */
body.orders-workspace { height: 100dvh; overflow: hidden; }
.orders-workspace .shell { height: 100dvh; min-height: 0; }
.orders-workspace main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.orders-workspace .sidebar { height: 100dvh; overflow-y: auto; }
.orders-workspace main > :not(#content) { flex-shrink: 0; }
.orders-workspace #content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.orders-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.orders-panel > :not(.table-wrap) { flex-shrink: 0; }
.orders-panel .table-wrap { flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.orders-table th { position: sticky; top: 0; z-index: 1; background: #f9faf6; box-shadow: inset 0 -1px #e2e7df; }
.orders-table th, .orders-table td { text-align: left; vertical-align: top; }
.orders-table .amount-breakdown > div { justify-content: flex-start; }
.orders-table .amount-breakdown { grid-template-columns: max-content max-content; gap: 3px 8px; }
.orders-table .amount-breakdown > div { display: contents; }
.send-arrow { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: #25d366; color: #fff; }
.send-arrow:hover { background: #1aaa52; }
.send-arrow:focus-visible { outline: 3px solid #7bdbac; outline-offset: 3px; }
.send-arrow svg { width: 24px; height: 24px; }
.send-arrow[aria-busy="true"] svg { animation: sync-spin 1s linear infinite; }
.manual-send-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.send-feedback { color: #47634c; font-size: 14px; white-space: normal; }
.send-feedback.error { color: #b42318; }
#confirmDialog { max-width: 500px; }
.mobile-table-hint { display: none; }
/* Small screens need document scrolling as well as the table's own scroller. */
@media (max-width: 750px), (max-height: 600px) {
  body.orders-workspace { height: auto; min-height: 100dvh; overflow: auto; }
  .orders-workspace .shell { height: auto; min-height: 100dvh; }
  .orders-workspace main { overflow: visible; }
  .orders-workspace #content, .orders-panel { flex: none; }
  .orders-panel .table-wrap { flex: none; height: clamp(320px, 55dvh, 600px); overscroll-behavior: auto; }
}
@media (max-width: 750px) {
  .orders-workspace .shell { display: flex; flex-direction: column; }
  .orders-workspace .sidebar { height: auto; flex-shrink: 0; padding: 8px 12px; overflow: visible; }
  .orders-workspace .brand { display: none; }
  .orders-workspace main { flex: 1; padding: 10px; }
  .orders-workspace .summary { display: flex; overflow-x: auto; }
  .orders-workspace .metric { min-width: 130px; min-height: 45px; }
  .orders-workspace .automation p, .orders-workspace footer { display: none; }
  .orders-workspace .automation { margin-bottom: 8px; }
  .orders-workspace .orders-heading { display: grid; grid-template-columns: 1fr auto; padding: 8px 12px; gap: 6px; }
  .orders-workspace .orders-heading h1 { font-size: 20px; }
  .orders-workspace .notification-legend { padding: 6px 12px; gap: 3px 10px; }
  .orders-workspace .pagination { padding: 6px 12px; }
  .sidebar { min-width: 0; }
  nav, .summary { scrollbar-width: thin; }
  .orders-workspace .summary { margin-bottom: 8px; padding-bottom: 4px; }
  .orders-workspace .metric { flex-shrink: 0; }
  .orders-sync { display: contents; }
  .last-sync { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; }
  .last-sync time, .last-sync strong { font-size: 13px; }
  #sync { grid-column: 2; grid-row: 1; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 14px; }
  .orders-panel .toolbar { gap: 8px; }
  .orders-panel .tabs { width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .orders-panel .tab { flex-shrink: 0; white-space: nowrap; }
  .mobile-table-hint { display: block; margin: 0; padding: 0 12px 8px; font-size: 12px; color: #66755e; }
  .bulk-notifications { gap: 8px; padding: 10px 12px; }
  .pagination { flex-wrap: wrap; gap: 8px; }
  dialog { padding: 16px; max-height: 90dvh; overflow-x: hidden; overflow-y: auto; }
  .dialog-head { gap: 10px; }
  .dialog-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .icon-button { flex-shrink: 0; }
  .detail-grid > div { min-width: 0; overflow-wrap: anywhere; }
  .inline-input { flex-wrap: wrap; }
  .inline-input input { min-width: 150px; }
  input, select, textarea, .search { font-size: 16px; }
  .card { padding: 16px; min-width: 0; overflow-wrap: anywhere; }
  #toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
@media (max-width: 360px) {
  .orders-workspace .orders-heading h1 { font-size: 18px; white-space: nowrap; }
  .orders-heading h1 span { margin-left: 4px; padding: 2px 6px; }
}

/* Workspace v2: compact controls, observable modules and a mobile drawer. */
#mobileTop, #navBackdrop { display: none; }
#systemStatus { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 0 2px 10px; }
.module-state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.module-state small { color: #7e887b; }
.module-state i, .health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #bc8c2f; flex-shrink: 0; }
.module-state.ok i, .health-dot.ok { background: #35975a; }
.module-state.error i, .health-dot.error { background: #d5343a; }
#activeIssues { margin-bottom: 10px; background: #fff5f2; border: 1px solid #f0c9c1; border-radius: 9px; color: #a12b28; }
#activeIssues summary { padding: 9px 13px; cursor: pointer; font-size: 14px; font-weight: 600; }
.issue-list { max-height: 22dvh; overflow-y: auto; padding: 0 10px 7px; }
.issue-row { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr auto; text-align: left; width: 100%; background: transparent; border: 0; border-top: 1px solid #efd6cf; padding: 8px 4px; gap: 8px; font-size: 13px; color: #9c342e; }
.issue-row:hover { background: #ffe9e3; }
.issue-row span { overflow-wrap: anywhere; }
.orders-heading { padding: 12px 16px; }
.orders-heading h1 { font-size: 24px; }
.last-sync strong { color: #376c40; font-size: 16px; font-weight: 750; }
.last-sync time { display: block; color: #8d9688; font-size: 12px; font-weight: 400; }
.orders-panel .toolbar { padding: 0 14px 8px; flex-wrap: wrap; gap: 8px; }
.orders-panel .tabs { gap: 4px; flex-wrap: wrap; }
.orders-panel .tab { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 9px; font-size: 13px; white-space: nowrap; }
.orders-panel .tab b { color: #b93235; font-size: 18px; line-height: 1; }
.orders-panel .tab small { color: #8c9687; font-size: 12px; }
.archive-toggle { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-left: auto; white-space: nowrap; }
.archive-toggle input, .filter-check input { width: 17px; height: 17px; accent-color: var(--green); }
.order-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 7px; }
.order-tools .pagination { padding: 0; margin: 0; border: 0; font-size: 13px; gap: 10px; }
.order-tools .search { width: 280px; padding: 8px 10px; }
.order-tools .pagination button { padding: 5px 10px; }
.advanced-filter { border-top: 1px solid var(--line); font-size: 13px; }
.advanced-filter > summary { cursor: pointer; padding: 8px 14px; color: #557249; }
#advancedForm { padding: 6px 14px 14px; max-height: 38dvh; overflow-y: auto; border-top: 1px solid var(--line); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px; margin-bottom: 15px; }
.filter-field { display: block; min-width: 0; font-size: 13px; }
.filter-field > span { display: block; margin-bottom: 5px; color: #65765d; }
.filter-field > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.filter-field input, .filter-field select { min-width: 60px; width: 90px; flex: 1; padding: 6px; font-size: 13px; }
.filter-field input[type=datetime-local] { min-width: 190px; }
.filter-reset { padding: 5px 8px; background: #f3f5ee; border: 1px solid #dfe5d8; border-radius: 4px; }
.filter-check { display: flex; align-items: center; gap: 6px; }
.orders-table { min-width: 1330px; }
.selection-column { width: 40px; }
.orders-table .selection-cell { padding: 12px 7px; }
.notification-column { width: 100px; }
.sort-button { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; text-align: left; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; width: 100%; cursor: pointer; }
.sort-button span { color: #a0ad96; }
th[aria-sort=ascending] .sort-button span, th[aria-sort=descending] .sort-button span { color: #305f37; }
.status-time { display: block; font-size: 11px; color: #99a092; line-height: 1.5; white-space: normal; max-width: 95px; font-variant-numeric: tabular-nums; }
.notification-cell .notification-state { margin: 4px 0; }
.notification-state.error { color: #cf2e36; background: #fff0ee; }
.notification-icons { display: flex; align-items: center; gap: 2px; }
.reply-indicator { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; padding: 0; border: 1px solid; border-radius: 50%; font-size: 21px; font-weight: 700; cursor: pointer; }
.reply-indicator.confirmed { color: #168343; background: #e9f9ed; border-color: #96cfaa; }
.reply-indicator.clarification { color: #b95705; background: #fff0d2; border-color: #e4a15b; }
.reply-indicator:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.completion { display: block; color: #607454; font-size: 12px; margin: 0 0 5px; }
.template-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.template-heading h2 { margin: 0; }
.template-heading small { color: #88917e; }
.save-state { margin-left: auto; color: #72915f; font-size: 13px; }
.save-state.error { color: #b5262d; }
.template-help { color: #8a957e; font-size: 13px; margin-top: 9px; }
.template-help summary { cursor: pointer; }
.template-help p { overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  body, body.orders-workspace { height: auto; min-height: 100dvh; overflow: auto; }
  .shell, .orders-workspace .shell { display: block; height: auto; min-height: 100dvh; padding-top: 54px; }
  #mobileTop { display: flex; position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 54px; align-items: center; padding: 0 12px; gap: 12px; background: #f8faf4; border-bottom: 1px solid #dce5d5; box-shadow: 0 2px 7px #1830210a; }
  #burger { width: 38px; height: 38px; padding: 4px; border: 0; background: transparent; color: #395e3c; font-size: 25px; }
  #mobileTop strong { color: #36563b; font-size: 20px; }
  #mobileHealth { display: flex; gap: 7px; margin-left: auto; }
  #mobileCount { padding: 4px 9px; border-radius: 12px; color: #be3537; background: #fce6e1; font-size: 16px; }
  .sidebar, .orders-workspace .sidebar { display: flex; position: fixed; flex-direction: column; z-index: 40; left: 0; top: 54px; bottom: 0; width: min(290px,85vw); height: auto; padding: 22px 16px; background: #eef3e7; transform: translateX(-105%); overflow-y: auto; transition: transform .16s ease; }
  .sidebar .brand, .orders-workspace .brand { display: flex; }
  .sidebar nav { display: flex; flex-direction: column; overflow: visible; gap: 6px; }
  .sidebar .nav { width: 100%; padding: 14px 10px; }
  .sidebar-bottom { display: block; margin-top: auto; }
  .menu-open .sidebar { transform: translateX(0); }
  .menu-open #navBackdrop { display: block; position: fixed; inset: 54px 0 0; border: 0; background: #19312255; z-index: 35; }
  main, .orders-workspace main { display: block; padding: 10px; height: auto; overflow: visible; min-width: 0; }
  .orders-workspace #content, .orders-panel { display: block; height: auto; flex: none; min-height: 0; }
  .orders-panel .table-wrap { height: auto; max-height: none; flex: none; overflow-x: auto; overflow-y: visible; overscroll-behavior: auto; scrollbar-gutter: auto; touch-action: pan-x pan-y; }
  .orders-table th { position: static; }
  .orders-workspace .orders-heading, .orders-heading { display: flex; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .orders-heading h1, .orders-workspace .orders-heading h1 { font-size: 20px; }
  .orders-sync { display: flex; flex-wrap: wrap; width: auto; flex: 1; justify-content: flex-end; gap: 6px; }
  .last-sync { display: block; text-align: right; }
  .last-sync strong { display: block; font-size: 14px; }
  .last-sync time { font-size: 11px; }
  #sync { padding: 8px; font-size: 13px; min-width: 0; min-height: 36px; }
  #sync .sync-icon { width: 16px; height: 16px; }
  .orders-panel .toolbar { display: flex; flex-wrap: wrap; padding: 0 10px 8px; }
  .orders-panel .tabs { display: flex; width: 100%; flex-wrap: wrap; overflow: visible; gap: 4px; padding: 0; }
  .orders-panel .tab { padding: 6px 7px; gap: 4px; font-size: 12px; }
  .orders-panel .tab b { font-size: 16px; }
  .archive-toggle { margin: 1px 0 0; }
  .order-tools { flex-wrap: wrap; padding: 0 10px 8px; gap: 8px; }
  .order-tools .search { width: 100%; }
  .order-tools .pagination { width: 100%; }
  .mobile-table-hint { display: block; font-size: 12px; padding: 0 10px 8px; margin: 0; }
  #systemStatus { gap: 6px 12px; padding-bottom: 8px; }
  .module-state { font-size: 12px; gap: 5px; }
  .module-state small { display: none; }
  .issue-row { display: flex; flex-direction: column; gap: 4px; }
  .issue-list { max-height: none; }
  #advancedForm { max-height: none; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-field input, .filter-field select, input, select, textarea { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .template-heading { gap: 5px 10px; }
  .template-heading h2 { font-size: 18px; }
  .save-state { margin-left: 0; }
  dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding: 14px; max-height: 92dvh; overflow-y: auto; overflow-x: hidden; }
  .detail-grid { grid-template-columns: 1fr; }
  .dialog-head h2 { font-size: 19px; overflow-wrap: anywhere; }
  .inline-input { flex-wrap: wrap; }
  #toast { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .orders-workspace footer { display: none; }
}
/* Status, error history and manual order workspace. */
.nav-wa { color:#8b9388; width:21px; height:21px; }
.nav-wa svg { width:21px; height:21px; }
#autoCount { color:#919a89; margin-left:auto; font-size:12px; font-weight:400; }
#currentUsername { color:#52664d; font-weight:600; }
.orders-table { min-width:1340px; }
.order-column { width:270px; }
.general-badge,.woo-badge,.foreign-badge { display:inline-block; border-radius:6px; padding:4px 7px; font-size:13px; }
.general-draft { background:#fff0db; color:#8b5516; }
.general-new { background:#e4f1fc; color:#365f85; }
.general-in_progress { background:#e5f2e4; color:#36683d; }
.general-completed { background:#e4ecf2; color:#405f76; }
.general-cancelled { background:#f9dfdc; color:#9b352f; }
.woo-badge { background:#edf1e7; color:#65725a; font-size:11px; padding:3px 5px; }
.woo-processing { background:#e0f2e2; color:#40764a; }
.woo-pending,.woo-on-hold { background:#fff0ce; color:#856824; }
.woo-cancelled,.woo-failed { background:#fbe2dd; color:#a34335; }
.woo-completed { background:#e8e9e7; color:#6d7369; }
.foreign-badge { background:#f1e8fa; color:#76548c; margin-top:5px; }
.site-identity { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.status-line,.source-status { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:6px; font-size:13px; }
.status-line .status-time,.source-status .status-time { display:inline; max-width:none; font-size:11px; color:#969e91; }
.search-box { position:relative; flex:1; min-width:140px; max-width:320px; }
.order-tools .search-box .search { width:100%; padding-right:34px; }
.search-box > span { position:absolute; right:11px; top:4px; font-size:26px; color:#a3ad99; pointer-events:none; }
#advancedToggle { white-space:nowrap; font-size:13px; padding:8px; }
#advancedToggle.filter-applied { font-weight:800; background:#e5eddf; }
.search-description { padding:0 14px 8px; margin:0; color:#697e5d; font-size:13px; overflow-wrap:anywhere; }
.pagination { color:#48643e; font-size:14px; }
.pagination strong { white-space:nowrap; }
.pagination button { border:1px solid #bbcdb0; background:#edf4e7; border-radius:6px; }
.orders-heading { gap:12px; flex-wrap:wrap; }
#addManual { font-size:13px; padding:8px 10px; }
.issue-controls { display:flex; justify-content:flex-end; padding:5px 12px; }
.issue-controls .archive-toggle { margin:0; }
.issue-entry { display:flex; align-items:flex-start; border-top:1px solid #edd8d0; gap:8px; }
.issue-body { flex:1; min-width:0; border:0; background:none; color:inherit; text-align:left; display:grid; grid-template-columns:1fr auto; gap:5px 14px; padding:8px 4px; cursor:pointer; font-size:13px; }
.issue-body span,.issue-body small { grid-column:1/-1; overflow-wrap:anywhere; }
.issue-body time { font-size:12px; color:#a27d70; }
.issue-body:hover { background:#ffebe5; }
.old-issue { opacity:.62; }
.trash-button { padding:6px; border:0; background:transparent; color:#a77f75; cursor:pointer; flex-shrink:0; border-radius:5px; }
.trash-button:hover { color:#a53130; background:#ffe3dc; }
.trash-button svg { width:19px; height:19px; }
.errors-panel .issue-list { max-height:none; color:#99473c; padding:0 16px 16px; }
.errors-panel { overflow:auto; }
#activeIssues:has(details):not([hidden]) { display:block; }
#activeIssues:not(:has(details)) { background:transparent; border:0; margin-bottom:3px; }
.message-snippet { max-width:420px; min-width:180px; margin:0 0 5px; overflow-wrap:anywhere; white-space:pre-wrap; }
.manual-order-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
#manualDialog { width:1000px; }
#manualSource { min-height:340px; }
#manualDialog .archive-toggle { margin:10px 0 16px; }
.source-data { display:grid; grid-template-columns:minmax(130px,1fr) 3fr; gap:8px 14px; font-size:14px; }
.source-data dt { color:#7a8570; overflow-wrap:anywhere; }
.source-data dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.source-data details { margin:0 0 7px; }
.source-data summary { cursor:pointer; color:#537c43; }
#sourcePane { padding:12px 0; max-height:45dvh; overflow:auto; margin-bottom:15px; border-bottom:1px solid var(--line); }
#sourcePane > p { white-space:pre-wrap; }
#sourcePane pre { white-space:pre-wrap; }
.detail-tabs { flex-wrap:wrap; gap:7px; }
#historyPane { padding:14px 0; }
@media(max-width:1000px) {
 .order-tools { align-items:center; }
 .search-box { min-width:130px; max-width:none; }
 #advancedToggle { font-size:12px; }
 .order-tools .pagination { justify-content:flex-end; }
 .issue-list { max-height:22dvh; }
 .issue-body { display:flex; flex-direction:column; }
 .manual-order-grid { grid-template-columns:1fr; gap:20px; }
 #manualSource { min-height:190px; }
 .source-data { grid-template-columns:1fr; gap:3px; }
 .source-data dd { padding-bottom:9px; }
 #sourcePane { max-height:none; }
 #addManual { margin-left:auto; }
}

@media(max-width:1000px){#manualSource{height:220px;min-height:190px;}}
@media(max-width:400px){
 .search-box{min-width:100px;}
 #advancedToggle{white-space:normal;flex:0 0 120px;font-size:12px;padding:7px;}
 .orders-sync{width:100%;flex-wrap:nowrap;justify-content:space-between;}
 .last-sync strong{font-size:12px;}
 .last-sync time{font-size:10px;}
 #sync{font-size:12px;padding:7px;}
 #addManual{width:145px;white-space:normal;font-size:12px;padding:7px;}
 .orders-heading{gap:6px;}
}

/* Compact order workspace with conventional connected tabs. */
#detail { width:min(1180px,96vw); }
.order-basics { display:grid; grid-template-columns:1fr 1.35fr 2fr 1.2fr; gap:10px; margin-bottom:14px; }
.order-basics>div { display:flex; flex-direction:column; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fafbf7; overflow-wrap:anywhere; }
.order-basics small,.detail-grid small { display:block; color:#778270; font-size:11px; letter-spacing:.04em; }
.order-tabs { display:flex; align-items:flex-end; gap:3px; overflow-x:auto; margin:0 0 -1px; padding:0 4px; border-bottom:1px solid #bdcab5; }
.order-tab { flex-shrink:0; padding:9px 13px; border:1px solid #cbd5c5; border-bottom-color:#bdcab5; border-radius:8px 8px 0 0; background:#edf2e8; color:#53664e; cursor:pointer; }
.order-tab.active { position:relative; z-index:1; border-color:#bdcab5; border-bottom-color:#fff; background:#fff; color:#254c2d; font-weight:700; }
.order-pane { min-height:260px; padding:16px 5px 4px; }
.pane-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.phone-error { display:block; color:#c6222c; font-size:13px; font-weight:700; }
.chat-history { display:flex; flex-direction:column; gap:8px; width:min(100%,760px); margin:0 auto; padding:14px; border-radius:12px; background:#efeae2; }
.chat-message { width:fit-content; max-width:72%; min-width:180px; padding:7px 9px 5px; border-radius:8px; background:#fff; box-shadow:0 1px 1px #26382a22; }
.chat-message.outgoing { align-self:flex-end; background:#daf2de; }
.chat-message p { margin:4px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message small,.chat-message span,.chat-message time { color:#71806d; font-size:11px; }
.chat-message footer { display:flex; justify-content:flex-end; align-items:center; gap:5px; }
.chat-author { display:block; font-weight:700; color:#39705d!important; }
.chat-check { font-weight:800; letter-spacing:-3px; padding-right:3px; }
.chat-check.read { color:#168bd2!important; }
.chat-check.delivered,.chat-check.sent { color:#7a837c!important; }
.previous-order { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:left; cursor:pointer; }
.button-link { display:inline-flex; align-items:center; text-decoration:none; }
.compact-form .form-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:10px; }
.compact-form label { display:flex; flex-direction:column; gap:4px; color:#62705d; font-size:13px; }
.compact-form input,.compact-form select { width:100%; }
.compact-form fieldset { margin:14px 0; border:1px solid var(--line); border-radius:8px; }
.description-field { position:relative; }
.clear-field { position:absolute; top:22px; right:5px; z-index:1; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:#eef1eb; color:#687464; font-size:21px; }
#manualSource { min-height:190px; padding-right:38px; }
@media(max-width:800px){
 #detail { width:calc(100vw - 16px); }
 .order-basics { grid-template-columns:1fr 1fr; }
 .compact-form .form-grid { grid-template-columns:1fr; }
 .order-pane { min-height:180px; }
 .previous-order { grid-template-columns:1fr; gap:4px; }
 .chat-message { width:92%; }
 .sidebar-create { display:flex; }
}

/* Error and result messages stay in the user's focus area. */
#toast { top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; transform:translate(-50%,-50%); max-width:min(520px,calc(100vw - 28px))!important; z-index:20; }

/* Order list alignment and standalone order workspace. */
.orders-title-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.orders-title-actions #addManual { margin-left:0; }
.order-tools { display:grid; grid-template-columns:minmax(300px,1fr) auto minmax(120px,1fr); align-items:center; }
.search-tools { display:flex; justify-content:center; align-items:center; gap:7px; }
.filter-toggle span { display:inline-block; transition:transform .15s; }
.filter-toggle[aria-expanded=true] span { transform:rotate(180deg); }
.bulk-notifications { min-height:42px; margin:0; padding:4px 8px; border:0; background:#eef5e9; flex-wrap:wrap; }
.bulk-notifications.is-empty { visibility:hidden; pointer-events:none; }
.bulk-notifications strong { white-space:nowrap; }
.bulk-notifications .primary { padding:7px 9px; font-size:12px; white-space:nowrap; }
.bulk-status-label { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; }
.bulk-status-label select,#applyBulkStatus { padding:7px 8px; font-size:12px; }
.selection-head { display:flex!important; align-items:center; justify-content:center; gap:5px; margin:0!important; }
.selection-head span { display:inline!important; margin:0!important; }
.orders-panel .tab b.zero { color:#8f998b; font-size:13px; font-weight:500; }
.order-cell-button { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; }
.clickable-order-cell { cursor:pointer; }
.clickable-order-cell:hover { background:#eef5e9; }
.crm-order-id { display:block; margin-bottom:4px; color:#223f2a; font-size:13px; }
.order-created-at { display:block; margin-bottom:7px; color:#7c8776; font-size:12px; }
.manager-note { display:block; margin-top:7px; padding:6px 7px; border-left:3px solid #9daf91; background:#f4f6f0; color:#334b37; font-weight:700; white-space:pre-wrap; }
.manual-order-contents { white-space:pre-wrap; overflow-wrap:anywhere; color:#455b42; font-size:13px; }
.composition-cell { display:block; width:100%; padding:4px; border:0; border-radius:6px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.composition-cell:hover { background:#edf4e9; box-shadow:0 0 0 1px #cfddc8 inset; }
.composition-cell:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

.order-page { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; min-width:0; }
.order-page-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 14px; }
.order-page-head h1 { margin:3px 0 0; font-size:25px; }
.editable-basics { grid-template-columns:1.35fr 1.35fr 2fr; }
.summary-label { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.editable-summary .summary-value { display:grid; gap:4px; align-content:start; }
.edit-field-button { width:28px; height:28px; border:1px solid #d5ded0; border-radius:6px; background:#fff; color:#496846; padding:2px; }
.editable-summary form { display:grid; gap:7px; margin-top:5px; }
.edit-actions-top { margin:0 0 3px; }
.editable-summary.editing { border-color:#d64a4f; box-shadow:0 0 0 1px #d64a4f inset; background:#fffafa; }
.editable-summary textarea { resize:vertical; }
.note-summary { grid-column:1/-1; }
.status-summary { display:grid!important; grid-template-columns:1fr; gap:9px; }
.manager-note-block { padding-top:8px; border-top:1px solid var(--line); }
.manager-note-block .summary-value { white-space:pre-wrap; }
.buyer-phone { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.messenger-links { display:inline-flex; align-items:center; gap:5px; }
.messenger-link { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; padding:2px; border:0; border-radius:4px; background:transparent; text-decoration:none; }
.messenger-link svg,.messenger-links.disabled svg { width:17px; height:17px; }
.messenger-link.whatsapp { color:#168a48; }
.messenger-link.telegram { color:#229ed9; }
.messenger-link.max { color:#6a54d8; }
.messenger-link:hover { transform:translateY(-1px); background:transparent; opacity:.78; }
.messenger-links.disabled { color:#aab2a6; }
.order-meta-table { width:auto; min-width:min(100%,460px); margin:0 0 12px; border-collapse:collapse; font-size:14px; }
.order-meta-table th,.order-meta-table td { padding:6px 10px; border-bottom:1px solid #e5e9e1; background:#f6f8f3; text-align:left; }
.order-meta-table th { width:120px; color:#72806d; font-weight:600; }
.overview-grid { display:grid; grid-template-columns:minmax(280px,1.4fr) minmax(230px,.8fr); gap:12px; align-items:start; }
.composition-summary,.amount-summary { min-width:0; padding:11px; border:1px solid var(--line); border-radius:8px; background:#fafbf7; }
.composition-summary>small,.amount-summary>small,.cdek-current small { display:block; margin-bottom:7px; color:#778270; font-size:11px; letter-spacing:.04em; }
.composition-summary pre { margin:0 0 10px; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; color:#334a37; }
.composition-summary form { margin-top:0; }
.compact-status-edit { max-width:520px; margin-top:12px; }
.cdek-current { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 14px; margin-bottom:12px; padding:10px 12px; border:1px solid #cdddc7; border-radius:8px; background:#f2f8ef; }
.cdek-current small { width:100%; margin:0; }
.cdek-current strong { color:#315b39; font-size:18px; }
.cdek-current time { color:#6e7d69; font-size:13px; }
.cdek-actions { margin-bottom:12px; }
.icon-action { display:inline-flex; align-items:center; gap:7px; }
.icon-action svg { width:19px; height:19px; flex-shrink:0; }
.icon-action.destructive { color:#a33131; border-color:#e5baba; }
.cdek-point { display:block; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.order-head-action { display:inline-flex; align-items:center; gap:7px; }
.order-head-action svg { width:18px; height:18px; }
.order-head-action.destructive { color:#a33131; border-color:#e5baba; }
.timeline .timeline-passed strong { font-weight:800; color:#304a35; }
.timeline .timeline-future { opacity:.42; }
.timeline .timeline-future:before { background:#c6ccc3; }
.sidebar-create { display:none; margin:4px 14px 12px; justify-content:center; align-items:center; gap:5px; }
#addManual { background:#34723f; color:#fff; border-color:#34723f; box-shadow:0 2px 8px #315b3444; }
#addManual:hover { background:#285d33; }
@media(max-width:1000px){ .sidebar-create { display:flex; } }
.foreign-inline { display:flex; align-items:center; gap:5px; margin-top:7px; color:#76548c; font-size:13px; }
.foreign-inline input { width:17px; height:17px; }
.address-summary .summary-value>b { display:block; margin-top:5px; color:#496846; }
.information-summary { gap:5px; }
.information-status { margin-top:5px; padding-top:7px; border-top:1px solid var(--line); }
.information-summary>.manager-note-block { margin:3px -2px -2px; padding:8px 2px 0; }
.cdek-tracking-link { color:#28703d; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.delivery-type-field { display:grid; grid-template-columns:max-content minmax(150px,1fr); align-items:center; gap:12px; }
.pickup-code-row { display:grid; grid-template-columns:minmax(120px,1fr) auto auto; gap:7px; align-items:center; }
.pickup-address-field { min-height:42px; height:42px; }
.buyer-cell { display:grid; gap:3px; }
.buyer-city { color:#526950!important; font-weight:600; }
.messenger-phone-row { display:flex!important; align-items:center; flex-wrap:wrap; gap:5px; }
.composition-preview { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.composition-delivery { display:block; margin-top:6px; color:#526b4c; font-size:12px; font-weight:400; }
.composition-total { display:block; margin-top:4px; color:#304a35; font-size:13px; font-weight:700; }
.cdek-map-dialog { width:min(1050px,96vw); }
.official-cdek-widget-dialog { width:min(1180px,97vw); max-width:1180px; }
.official-cdek-widget-root { width:100%; height:min(720px,78vh); min-height:600px; padding:0!important; margin:0!important; border:0!important; }
.previous-orders-wrap { max-height:58vh; }
.previous-orders-table { min-width:950px; white-space:normal; }
.previous-orders-table tbody tr { cursor:pointer; }
.previous-orders-table tbody tr:hover { background:#edf4e9; }
.candidate-list { display:grid; gap:8px; margin:12px 0; }
.journal-search { display:grid; grid-template-columns:minmax(260px,1fr) auto auto; gap:8px; margin-bottom:14px; }
.journal-search input { min-width:0; }
.journal-wrap { max-height:68vh; overflow:auto; }
.journal-table { min-width:980px; }
.journal-table th { position:sticky; top:0; z-index:1; background:#eef3e9; }
.journal-table td { vertical-align:top; text-align:left; }
.journal-table td:first-child { white-space:nowrap; }
.journal-table small { display:block; margin-top:4px; color:#758071; font-size:11px; }
.journal-table details { margin-top:6px; }
.journal-table summary { color:#3f6845; cursor:pointer; font-size:12px; }
.journal-table pre { max-width:620px; max-height:260px; overflow:auto; margin:6px 0 0; padding:8px; border-radius:6px; background:#f1f4ee; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.4 Consolas,monospace; }
@media(max-width:700px){.journal-search{grid-template-columns:1fr 1fr}.journal-search input{grid-column:1/-1}.journal-wrap{max-height:58vh}}
.cdek-candidate { display:grid; grid-template-columns:auto minmax(170px,1fr) minmax(170px,1fr) auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.cdek-candidate.recommended { border-color:#6b9c68; background:#edf7ea; }
.cdek-candidate small { display:block; color:#788575; }
.cdek-candidate>b { color:#377044; font-size:12px; }
#dimensionDialog { width:min(850px,94vw); }
.dimension-row { display:grid; grid-template-columns:minmax(150px,1fr) 90px auto 90px auto 90px auto 38px; gap:7px; align-items:center; }
.dimension-row input { min-width:0; }
.dimension-select .inline-input { flex-wrap:nowrap; }

@media(max-width:1000px){
 .order-tools { grid-template-columns:1fr; }
 .bulk-notifications { grid-row:1; width:100%; overflow-x:auto; }
 .search-tools { grid-row:2; width:100%; justify-content:flex-start; flex-wrap:wrap; }
 .search-tools .search-box { flex:1; }
 .order-tools>.pagination { grid-row:3; }
 .editable-basics { grid-template-columns:1fr 1fr; }
 .order-page { padding:11px; }
 .order-page-head { align-items:flex-start; }
 .cdek-candidate { grid-template-columns:auto 1fr; }
 .cdek-candidate>b { grid-column:2; }
}

/* CDEK shipment editor. */
.cdek-shipment-form { margin-top:14px; border:1px solid #cddbc8; border-radius:11px; background:#f8faf6; overflow:hidden; }
.cdek-form-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; padding:14px 16px; border-bottom:1px solid #dce5d8; background:#edf5e9; }
.cdek-form-head h3 { margin:3px 0 0; color:#315838; font-size:20px; }
.cdek-form-table { width:100%; border-collapse:collapse; }
.cdek-form-table th { width:145px; padding:14px 13px; border-bottom:1px solid #e1e7de; background:#f1f5ee; color:#61725c; text-align:left; vertical-align:top; font-size:13px; }
.cdek-form-table td { padding:11px 13px; border-bottom:1px solid #e1e7de; background:#fff; vertical-align:top; }
.cdek-inline-fields { display:grid; grid-template-columns:repeat(3,minmax(145px,1fr)); gap:9px 11px; align-items:start; }
.cdek-inline-fields label { display:flex; min-width:0; flex-direction:column; gap:4px; color:#62715e; font-size:12px; }
.cdek-inline-fields input,.cdek-inline-fields select { width:100%; min-width:0; }
.cdek-inline-fields .wide-field { grid-column:span 2; }
.cdek-inline-fields small { color:#7c8978; line-height:1.35; }
.tariff-picker { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:9px; align-items:center; }
.tariff-picker select { width:100%; }
#tariffDescription { margin:7px 2px 0; white-space:normal; }
.cdek-goods { margin:13px; padding:13px; border:1px solid #dbe3d7; border-radius:8px; background:#fff; }
.cdek-goods h4 { margin:0 0 10px; color:#405d42; }
.cdek-submit-actions { justify-content:flex-end; padding:0 13px 14px; }
.cdek-actions #refreshCdek svg { width:18px; height:18px; }
.cdek-command-card { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:13px 14px; border:1px solid #cdddc7; border-radius:10px; background:#f2f8ef; }
.cdek-command-card .cdek-current { flex:1 1 auto; min-width:220px; margin:0; padding:0; border:0; background:transparent; }
.cdek-command-card .cdek-actions { flex:0 0 auto; justify-content:flex-end; margin:0; }
.cdek-card { margin:0 0 14px; padding:14px; border:1px solid #d9e2d5; border-radius:10px; background:#fff; }
.cdek-card>h3 { margin:0 0 12px; color:#36573a; font-size:18px; }
.cdek-history-card .timeline { margin-top:2px; }
.cdek-data-card .detail-grid { margin:0; }
.cdek-raw-card>summary { color:#49634a; font-weight:700; cursor:pointer; }
.cdek-raw-json { max-height:520px; margin:12px 0 0; padding:13px; overflow:auto; border-radius:7px; background:#202720; color:#e7eee5; white-space:pre; font:12px/1.5 Consolas,Monaco,monospace; }
@media(max-width:760px){
  .cdek-form-head { align-items:flex-start; flex-direction:column; }
  .cdek-form-table,.cdek-form-table tbody,.cdek-form-table tr,.cdek-form-table th,.cdek-form-table td { display:block; width:100%; }
  .cdek-form-table th { padding:10px 12px 5px; border-bottom:0; }
  .cdek-form-table td { padding:7px 12px 13px; }
  .cdek-inline-fields { grid-template-columns:1fr; }
  .cdek-inline-fields .wide-field { grid-column:auto; }
  .tariff-picker { grid-template-columns:1fr; }
  .cdek-command-card { align-items:stretch; flex-direction:column; }
  .cdek-command-card .cdek-actions { justify-content:flex-start; }
  .cdek-command-card .cdek-actions>* { flex:1 1 100%; justify-content:center; }
}
@media(max-width:600px){
 .orders-title-actions { width:100%; justify-content:space-between; }
 .orders-title-actions h1 { white-space:normal!important; }
 .editable-basics { grid-template-columns:1fr; }
 .order-page-head { flex-direction:column; }
 .dimension-row { grid-template-columns:1fr 65px auto 65px auto 65px; }
 .dimension-row [data-remove-dimension] { grid-column:1/-1; justify-self:end; }
 .overview-grid { grid-template-columns:1fr; }
 .order-meta-table { width:100%; }
 .orders-table col:nth-child(n+5),.orders-table th:nth-child(n+5),.orders-table td:nth-child(n+5) { display:none; }
 .orders-table { min-width:700px; }
 .orders-table .messenger-link { width:25px; height:25px; }
 .orders-table .messenger-link svg { width:16px; height:16px; }
 .official-cdek-widget-dialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px); padding:8px; }
 .official-cdek-widget-root { height:78vh; min-height:520px; }
 .pickup-code-row { grid-template-columns:1fr 1fr; }
 .pickup-code-row input { grid-column:1/-1; }
 .delivery-type-field { grid-template-columns:1fr; gap:6px; }
}
@media(max-width:750px){
 .orders-table col:nth-child(n+5),.orders-table th:nth-child(n+5),.orders-table td:nth-child(n+5) { display:none; }
 .orders-table { min-width:700px; }
}

/* Requested workspace refinements. */
.primary { background:#34723f; border-color:#34723f; }
.primary:hover:not(:disabled) { background:#285d33; border-color:#285d33; }
.primary:disabled { background:#d7dcd5; border-color:#d7dcd5; color:#8d968b; cursor:default; box-shadow:none; }
.sidebar-create { display:flex; }
.workspace:empty { display:none; }
.messenger-phone-row { flex-wrap:nowrap; white-space:nowrap; }
.messenger-phone-row .messenger-links { flex-shrink:0; }
.composition-preview { display:block; overflow:visible; -webkit-line-clamp:unset; }
.search-box { max-width:440px; }
.order-tools { grid-template-columns:minmax(520px,1fr) auto; }
.order-tools:has(.bulk-notifications:not([hidden])) { grid-template-columns:minmax(0,1fr) auto; }
.order-tools:has(.bulk-notifications:not([hidden])) .bulk-notifications { grid-column:1/-1; }
.search-tools { justify-content:flex-start; min-width:0; }
.search-tools .search-box { width:min(440px,100%); flex:1 1 440px; }
.search-box > span { top:50%; transform:translateY(-52%); line-height:1; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0; }
#closeOrderPage { background:#e7efe3; border-color:#c4d4be; }
.amount-summary .amount-breakdown { grid-template-columns:max-content max-content; gap:4px 10px; justify-content:start; }
.amount-summary .amount-breakdown > div { display:contents; }
.source-image { display:block; width:auto; max-width:min(320px,100%); max-height:260px; object-fit:contain; border:1px solid var(--line); border-radius:7px; background:#fff; }
.issue-order-link { align-self:center; white-space:nowrap; color:#2e6d3b; font-size:12px; font-weight:700; }
.order-unconfirmed { display:block; margin-top:5px; padding:4px 6px; border-radius:5px; background:#ffe3df; color:#b3262e; font-size:12px; }
.order-confirmed { display:block; margin-top:5px; color:#4e8b60; font-size:12px; font-weight:700; }
.order-confirmed time { color:#76927c; font-size:11px; font-weight:400; }
.confirmation-block { display:grid; gap:4px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
.confirmation-edit { display:flex; align-items:center; gap:6px; color:#53694e; font-size:13px; }
.confirmation-edit input { width:17px; height:17px; }
.foreign-text { color:#76548c; font-size:13px; }
.bulk-notifications[hidden] { display:none!important; }

/* Roles, users and order assignment. */
.order-id-line,.order-general-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.order-id-line .crm-order-id,.order-general-line .order-created-at { margin:0; }
.order-assignee { display:inline-block; max-width:190px; padding:2px 6px; overflow:hidden; border-radius:10px; background:#e8f1e5; color:#396340; font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.order-assignee.unassigned { background:#f0f0ed; color:#7a7f78; }
.general-badge { font-weight:800; }
.order-assignee-editor { display:grid; gap:4px; margin-top:7px; padding-top:8px; border-top:1px solid var(--line); color:#6a7866; font-size:12px; }
.order-assignee-editor select { width:100%; }
.order-assignee-view { display:grid; gap:3px; margin-top:7px; padding-top:8px; border-top:1px solid var(--line); }
.user-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px; }
.user-card { padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.user-card.state-pause { border-color:#e2c892; background:#fffdf6; }
.user-card.state-deleted { opacity:.68; background:#f4f4f2; }
.user-card header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.user-card h2 { margin:0 0 6px; font-size:19px; }
.user-card dl { display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; margin:14px 0 0; }
.user-card dl>div { min-width:0; }
.user-card dl>.wide { grid-column:1/-1; }
.user-card dt { color:#788374; font-size:11px; text-transform:uppercase; }
.user-card dd { margin:2px 0 0; overflow-wrap:anywhere; }
.user-state-active { background:#dff2e2; color:#22653a; }
.user-state-pause { background:#fff0c8; color:#855b0a; }
.user-state-deleted { background:#e7e7e4; color:#666; }
.region-chip { display:inline-block; margin:2px 2px 2px 0; padding:3px 6px; border-radius:10px; background:#e9f0e5; color:#365a3a; font-size:12px; }
.user-dialog { width:min(980px,96vw); }
.user-form { display:grid; gap:14px; }
.user-fields { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:10px; }
.user-fields label { display:grid; gap:4px; color:#667361; font-size:12px; }
.user-fields .wide { grid-column:span 2; }
.region-editor { display:grid; gap:8px; }
.region-editor h3 { margin:0; }
.yandex-region-map { display:flex; align-items:center; justify-content:center; width:100%; height:330px; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#eef3ea; color:#6d7a68; }
.region-list summary { padding:7px 0; color:#37633f; font-weight:700; cursor:pointer; }
.region-map { display:grid; grid-template-columns:repeat(9,minmax(72px,1fr)); gap:4px; max-height:40vh; padding:8px; overflow:auto; border:1px solid var(--line); border-radius:9px; background:#eef3ea; }
.region-map button { min-height:42px; padding:4px; border:1px solid #cbd6c7; border-radius:6px; background:#fff; color:#425542; font-size:10px; line-height:1.15; cursor:pointer; }
.region-map button.selected { border-color:#34723f; background:#34723f; color:#fff; box-shadow:0 2px 5px #244b2938; }
.assignment-wrap { max-height:calc(100vh - 250px); }
.assignment-table { min-width:1180px; }
.assignment-table th { position:sticky; top:0; z-index:2; }
.assignment-table td { vertical-align:top; text-align:left; }
.assignment-table td:first-child { min-width:245px; }
.assignment-table td:nth-child(2) { min-width:220px; }
.assignment-table select { min-width:220px; }
.assignment-table .order-link { width:100%; color:inherit; text-align:left; }
@media(max-width:800px){
 .user-fields { grid-template-columns:1fr; }
 .user-fields .wide { grid-column:auto; }
 .user-card dl { grid-template-columns:1fr; }
 .user-card dl>.wide { grid-column:auto; }
 .region-map { grid-template-columns:repeat(4,minmax(65px,1fr)); }
 .assignments-panel .orders-heading { align-items:stretch; flex-direction:column; }
}
@media(max-width:1000px){
  .order-tools,.order-tools:has(.bulk-notifications:not([hidden])) { grid-template-columns:1fr; }
  .order-tools:has(.bulk-notifications:not([hidden])) .bulk-notifications { grid-column:auto; }
  .orders-panel .toolbar { margin-bottom:0; padding-bottom:5px; }
  .order-tools { padding-top:0; }
}

/* Selection controls, compact messenger links and template preview. */
.system-strip { display:flex; align-items:flex-start; gap:12px; }
.system-strip #systemStatus { flex:1 1 auto; min-width:0; }
.system-strip #activeIssues { flex:0 0 auto; margin:0 0 8px; }
.system-strip #activeIssues:has(details) { flex-basis:min(560px,48%); }
.system-strip .issue-controls { padding:0 2px 7px; }
.messenger-links { gap:1px; margin-right:7px; }
.messenger-link { width:23px; height:25px; padding:1px; }
.messenger-phone-row { gap:3px; }
.sidebar-create { display:none; }
.order-tools,.order-tools:has(.bulk-notifications:not([hidden])) { display:flex; align-items:center; gap:9px; }
.order-tools:has(.bulk-notifications:not([hidden])) .bulk-notifications { grid-column:auto; }
.bulk-notifications { flex:0 0 auto; min-height:0; gap:7px; padding:3px 7px; white-space:nowrap; }
.bulk-notifications strong { display:inline-flex; align-items:baseline; gap:3px; color:#27342a; font-size:14px; font-weight:500; }
.bulk-notifications strong b { color:#111; font-size:15px; }
.bulk-notifications strong small { color:#99a194; font-size:13px; font-weight:500; }
.bulk-notifications select { width:auto; min-width:150px; padding:6px 8px; font-size:12px; }
.bulk-icon-button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:4px; border:1px solid #cad5c5; border-radius:6px; background:#f7f9f5; color:#778277; cursor:pointer; }
.bulk-icon-button svg { width:21px; height:21px; }
.bulk-icon-button.mark-notified { color:#7b847b; }
.bulk-icon-button.bulk-save { color:#aeb6ad; background:#eef1ed; }
.bulk-icon-button.bulk-save.active { color:#fff; border-color:#3474ba; background:#3474ba; }
.bulk-icon-button:disabled { cursor:default; opacity:.58; }
.order-tools .search-tools { margin-left:auto; justify-content:flex-end; }
.template-preview-button { margin-left:auto; padding:6px 9px; font-size:12px; }
.template-heading .save-state { margin-left:0; }
.template-preview-dialog { width:min(720px,94vw); }
.template-preview-dialog select { width:100%; min-height:250px; }
.template-preview-text { max-height:42dvh; margin:16px 0 0; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#f7f9f4; white-space:pre-wrap; font-family:inherit; }
@media(max-width:1000px){
  .system-strip { display:block; }
  .system-strip #activeIssues:has(details) { width:auto; }
  .sidebar-create { display:flex; }
  .order-tools,.order-tools:has(.bulk-notifications:not([hidden])) { flex-wrap:wrap; }
  .bulk-notifications { width:100%; overflow-x:auto; }
  .order-tools .search-tools { width:100%; margin-left:0; justify-content:flex-start; }
}