:root {
  /* ── Нейтральные ── */
  --bg:           #f6f7fb;
  --surface:      #ffffff;
  --surface-alt:  #f9fafb;   /* зебра-строки */
  --text:         #1f2333;
  --muted:        #6b7385;
  --border:       #d8dce8;
  --border-strong: #c4c9d8;  /* разделитель thead/tbody */
  --card-bg:      #ffffff;   /* backward compat */

  /* ── Акцентные ── */
  --primary:       #3765ff;
  --primary-soft:  rgba(55, 101, 255, 0.12);
  --accent:        #12b76a;
  --accent-soft:   rgba(18, 183, 106, 0.14);
  --danger:        #f04438;
  --danger-soft:   rgba(240, 68, 56, 0.12);
  --warning:       #f79009;
  --warning-soft:  rgba(247, 144, 9, 0.14);
  --purple:        #7c3aed;
  --purple-soft:   rgba(124, 58, 237, 0.12);

  /* ── Сайдбар ── */
  --sidebar-bg:      #111420;
  --sidebar-text:    #c7cedd;
  --sidebar-heading: #838aa0;

  /* ── Прочее ── */
  --transition: 0.18s ease;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
  margin: 0;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, #121727 0%, #0d0f1a 100%);
  color: var(--sidebar-text);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

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

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary) 0%, #2ce6ff 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.logo-subtitle {
  font-size: 12px;
  color: var(--sidebar-heading);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-section h3 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sidebar-heading);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: inherit;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-btn .nav-badge {
  margin-left: auto;
}

.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff4d4f;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: var(--transition);
}

.nav-badge.visible {
  display: inline-flex;
  opacity: 1;
  transform: scale(1);
}

.nav-btn.active,
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.primary-action,
.secondary-action,
.link-btn {
  cursor: pointer;
  border-radius: 10px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.link-btn.link-btn-danger {
  color: var(--danger);
}

.is-disabled,
button:disabled,
button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.primary-action {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
}

.primary-action:hover {
  background: #264de0;
}

.secondary-action {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
}

.secondary-action:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.secondary-action.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.secondary-action.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  font-size: 12px;
}

.lang-toggle {
  display: flex;
  gap: 4px;
  padding-bottom: 10px;
}

.lang-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: var(--transition);
}

.lang-btn:hover,
.lang-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app-shell.sidebar-collapsed .lang-toggle {
  display: none;
}

.status-label {
  color: var(--sidebar-heading);
}

.status-indicators {
  display: grid;
  gap: 8px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot.online {
  background: #3ccf8e;
  box-shadow: 0 0 8px rgba(60, 207, 142, 0.6);
}

.dot.offline {
  background: #f97066;
  box-shadow: 0 0 8px rgba(249, 112, 102, 0.5);
}

.main-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Grid item in `.app-shell` (230px 1fr). Without min-width:0 the 1fr track
     grows to the widest child (e.g. a wide journal table), pushing the whole
     page — and the filter bar — to scroll right. Containing the overflow inside
     each table's own .*-list-wrapper keeps filters fixed in view. */
  min-width: 0;
}

/* section-bar: analytics pills + пресеты в одну строку */
.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

/* user-menu dropdown */
.user-menu {
  position: relative;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 30;
  white-space: nowrap;
}

.user-menu-dropdown .link-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.user-menu-dropdown .link-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.user-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-controls .link-btn.inline {
  color: var(--muted);
}

.user-controls .link-btn.inline:hover {
  color: var(--primary);
}

.nav-btn.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.search-field-wrapper {
  position: relative;
}

.search-field {
  position: relative;
}

.search-field input {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 5px 30px 5px 10px;
  border-radius: 8px;
  min-width: 220px;
  font-size: 13px;
  transition: var(--transition);
}

.search-field input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.search-field .search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.search-field .search-icon:hover {
  color: var(--primary);
}

.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 420px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.5);
  padding: 12px 14px;
  z-index: 20;
}

.global-search-results.hidden {
  display: none;
}

.global-search-results .search-item {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(55, 101, 255, 0.04);
}

.global-search-results .search-item:last-child {
  margin-bottom: 0;
}

.global-search-results .search-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.global-search-results .search-item p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.global-search-results .search-item footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.global-search-results .search-item footer .search-open {
  font-size: 13px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2ce6ff 0%, var(--primary) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.transport-tag.auto {
  background: rgba(54, 134, 255, 0.14);
  color: #366dff;
}

.transport-tag.consol {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.transport-tag.air {
  background: rgba(34, 209, 255, 0.16);
  color: #0d9fd1;
}

.transport-tag.rail {
  background: rgba(174, 112, 255, 0.16);
  color: #7d3fe0;
}

.transport-tag.multimodal {
  background: rgba(13, 173, 123, 0.16);
  color: #0d9f7a;
}

.section {
  display: none;
  padding: 6px 24px 32px;
}

.section.visible {
  display: block;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246, 247, 251, 0.95);
  backdrop-filter: blur(12px);
  padding: 4px 0;
}

.section-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.section-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 620px;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--transition);
}

.icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  min-width: 140px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.overview-analytics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.mini-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 12px;
  align-items: center;
}

.chart-label {
  font-size: 13px;
  color: var(--muted);
}

.chart-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(55, 101, 255, 0.12);
  overflow: hidden;
}

.chart-bar span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #00c0ff);
}

.chart-value {
  font-weight: 600;
  font-size: 14px;
}

.summary-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(17, 27, 57, 0.06);
}

.summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.summary-card h2 {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.summary-value {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.summary-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.trend {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.trend.up {
  background: rgba(18, 183, 106, 0.18);
  color: var(--accent);
}

.trend.down {
  background: rgba(240, 68, 56, 0.16);
  color: var(--danger);
}

.trend.stable {
  background: rgba(247, 144, 9, 0.18);
  color: var(--warning);
}

.split-panel {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.panel {
  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 57, 0.06);
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.5);
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.panel-header h2,
.panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.panel-caption {
  font-size: 13px;
  color: var(--muted);
}

.panel-body {
  padding: 14px 20px;
}

.tabs {
  display: inline-flex;
  gap: 8px;
  background: rgba(55, 101, 255, 0.08);
  border-radius: 999px;
  padding: 4px;
}

.tab-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #2f3a55;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn.active {
  background: #fff;
  box-shadow: 0 4px 12px rgba(55, 101, 255, 0.24);
}

.transport-status {
  display: grid;
  gap: 16px;
}

.status-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(55, 101, 255, 0.16);
  background: rgba(55, 101, 255, 0.06);
}

.status-card.auto {
  border-color: rgba(54, 109, 255, 0.18);
  background: rgba(54, 109, 255, 0.08);
}

.status-card.air {
  border-color: rgba(13, 159, 209, 0.2);
  background: rgba(13, 159, 209, 0.08);
}

.status-card.rail {
  border-color: rgba(125, 63, 224, 0.24);
  background: rgba(125, 63, 224, 0.08);
}

.status-card.multimodal {
  border-color: rgba(13, 159, 122, 0.24);
  background: rgba(13, 159, 122, 0.08);
}

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

.status-title {
  font-weight: 600;
  margin: 0;
}

.status-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.metric-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.metric-value {
  font-weight: 600;
  font-size: 20px;
}

.metric-trend {
  font-size: 12px;
  color: var(--muted);
}

.metric-trend.positive {
  color: var(--accent);
}

.metric-trend.negative {
  color: var(--danger);
}

.alerts-list {
  display: grid;
  gap: 14px;
}

.alert-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(240, 68, 56, 0.2);
  background: rgba(240, 68, 56, 0.08);
}

.alert-card.warning {
  border-color: rgba(247, 144, 9, 0.2);
  background: rgba(247, 144, 9, 0.08);
}

.alert-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
}

.alert-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.dashboard-panel {
  margin-top: 24px;
}

.map-placeholder {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 260px;
}

.map-grid {
  border-right: 1px dashed rgba(55, 101, 255, 0.2);
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: radial-gradient(circle at 40% 20%, rgba(55, 101, 255, 0.08), transparent 60%),
    linear-gradient(135deg, rgba(7, 11, 26, 0.92), rgba(7, 11, 26, 0.85));
}

.dashboard-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: #e2e8f0;
  font-size: 15px;
  background: rgba(5, 10, 24, 0.92);
  z-index: 2;
}

.map-empty-hint span {
  color: var(--muted);
  font-size: 13px;
}

.map-info {
  padding: 24px;
  display: grid;
  gap: 18px;
}

.map-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.map-region {
  margin: 8px 0;
  font-weight: 600;
  font-size: 18px;
}

.table-wrapper {
  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 57, 0.06);
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.5);
  overflow-x: auto;
  overflow-y: visible;
}

/* Запросы и Перевозки — компактная горизонтальная полоска */
.request-analytics-grid,
.shipment-analytics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.request-analytics-card,
.shipment-analytics-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(17, 27, 57, 0.1);
  background: var(--surface);
}

.request-analytics-card h4,
.shipment-analytics-card h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.request-analytics-card .value,
.shipment-analytics-card .value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.request-analytics-card .meta,
.shipment-analytics-card .meta {
  display: none;
}


.overview-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.overview-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

/* Combobox: input with substring-filtered dropdown */
.combobox { position: relative; }
.combobox input {
  width: 100%;
  padding-right: 26px;
  box-sizing: border-box;
}
.combobox-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  padding: 2px 6px;
}
.combobox-clear:hover { color: var(--primary); }
.combobox-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: auto;
  /* Расширяем дропдаун под контент: не уже инпута, но растёт по самой длинной
     опции; кап против ухода за вьюпорт. */
  min-width: 100%;
  width: max-content;
  max-width: min(420px, 95vw);
  max-height: 240px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.2);
  z-index: 30;
}
.combobox-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.combobox-option:hover,
.combobox-option.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.combobox-option.is-selected {
  font-weight: 600;
}
.combobox-option.is-empty {
  color: var(--muted);
  cursor: default;
}
.combobox-check {
  flex: 0 0 auto;
  width: 14px;
  display: inline-flex;
  justify-content: center;
  color: var(--primary);
}
.combobox-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-filters .filter-group.narrow {
  min-width: auto;
  justify-content: flex-end;
}

.overview-filters label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.overview-filters select,
.overview-filters input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}

.overview-filters .secondary-action {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.shipment-date-filters {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.shipment-date-filters.open {
  display: flex;
}

.shipment-date-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}

.shipment-date-filters .filter-group.narrow {
  min-width: auto;
  justify-content: flex-end;
}

.shipment-date-filters label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.shipment-date-filters select,
.shipment-date-filters input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}

.shipment-date-filters .secondary-action {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.request-pagination-controls,
.shipment-pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}

.request-pagination-bottom {
  margin: 10px 0 0;
  justify-content: flex-end;
}

/* Money input: text field + thousand-separator formatting + ± stepper */
.money-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
}
.money-input-wrap input[type="text"] {
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}

.pagination-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.pagination-left select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  background: #fff;
  height: 24px;
}

.request-page-actions,
.shipment-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.request-page-info,
.shipment-page-info {
  font-size: 13px;
  color: var(--muted);
}

/* MSO / Фрахт — строка фильтров */
.mso-filters-row,
.freight-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.mso-filters-row select,
.freight-filters-row select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  height: 28px;
}

.mso-filters-row .search-field.compact input,
.freight-filters-row .search-field.compact input {
  height: 28px;
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  min-width: 180px;
}

/* MSO / Фрахт — пагинация сверху */
.mso-pagination-controls,
.freight-pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}

.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.analytics-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.analytics-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.table-panel table {
  width: 100%;
  border-collapse: collapse;
}

.table-panel th,
.table-panel td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  font-size: 13px;
}

.table-panel th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.table-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.finance-summary div {
  background: rgba(55, 101, 255, 0.05);
  border: 1px solid rgba(55, 101, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
}

.finance-summary span {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.finance-summary strong {
  font-size: 16px;
}

.finance-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.finance-metrics strong {
  font-weight: 600;
}

.ideas-panel ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
  color: var(--muted);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

thead tr {
  border-bottom: 2px solid var(--border-strong);
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
}

th {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  white-space: nowrap;
}

/* числовые колонки */
th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* зебра-строки */
tbody tr:nth-child(even) {
  background: var(--surface-alt);
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

tbody tr:hover {
  background: var(--primary-soft);
}

/* кнопки действий: скрыты, появляются при hover на строку */
td.actions-cell {
  white-space: nowrap;
}

td.actions-cell .link-btn {
  opacity: 0;
  transition: opacity var(--transition);
}

tbody tr:hover td.actions-cell .link-btn {
  opacity: 1;
}

.tariff-cell {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

.tariff-cell strong {
  display: block;
  color: var(--text);
}

.tariff-meta {
  font-size: 12px;
  color: var(--muted);
}

.tariff-meta.warning {
  color: #c24444;
  font-weight: 600;
}

.tariff-comment {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.tariff-comment.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tariff-toggle {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tariff-toggle:hover { text-decoration: underline; }

/* Column settings gear button + popup */
.col-settings-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 10;
  background: var(--card-bg);
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  transition: color .15s, border-color .15s;
}
.col-settings-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.col-settings-popup {
  position: absolute;
  top: 34px;
  right: 8px;
  z-index: 20;
  background: var(--card-bg);
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
  padding: 10px 14px;
  min-width: 180px;
}
.col-settings-popup label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.col-settings-popup label input[type="checkbox"] {
  accent-color: var(--primary);
}
.col-settings-popup .col-settings-reset {
  display: block;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}
.col-settings-popup .col-settings-reset:hover {
  text-decoration: underline;
}

.request-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.request-list-table td.request-actions {
  border-bottom: none;
}

.request-action-menu {
  position: relative;
}

.link-btn.request-action-toggle {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
  gap: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.link-btn.request-action-toggle:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.link-btn.request-action-toggle::after {
  content: "▾";
  font-size: 10px;
  margin-left: 6px;
}

.request-action-menu .action-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 14px 30px rgba(17, 20, 32, 0.12);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 12;
}

.request-action-menu.is-open .action-menu-panel {
  display: flex;
}

.request-action-menu .action-menu-panel[hidden] {
  display: none;
}

.request-action-menu .action-menu-panel .link-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
}

.request-action-menu .action-menu-panel .link-btn:hover {
  color: var(--primary);
}

.badge-bitrix {
  display: inline-block;
  background: #0066cc;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Фильтры модуля Запросов */
.request-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

.request-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.request-filters .filter-group label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.request-filters .filter-group select,
.request-filters .filter-group input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  height: 26px;
  box-sizing: border-box;
}

.request-filters .filter-group input[type="date"] {
  padding: 3px 6px;
}

.request-filters .filter-group.narrow {
  min-width: auto;
}

.request-filter-presets,
.shipment-filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  min-height: 24px;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-subtle, #f5f5f5);
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  line-height: 1.3;
}

.preset-chip:hover {
  background: #e8f0fe;
  border-color: #c5d4f5;
}

.preset-chip.active {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

.preset-chip.active:hover {
  background: #1557b0;
  border-color: #1557b0;
}

.preset-chip-edit,
.preset-chip-delete {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.preset-chip.active .preset-chip-edit,
.preset-chip.active .preset-chip-delete {
  color: rgba(255, 255, 255, 0.7);
}

.preset-chip-edit:hover {
  color: var(--primary, #1a73e8);
}

.preset-chip.active .preset-chip-edit:hover {
  color: #fff;
}

.preset-chip-delete:hover {
  color: var(--danger, #e53935);
}

.preset-chip.active .preset-chip-delete:hover {
  color: #ffcdd2;
}


.request-filter-presets .secondary-action {
  padding: 4px 10px;
  font-size: 12px;
  height: auto;
  border-radius: 20px;
}

.preset-save-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.preset-save-form input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  height: 26px;
  outline: none;
}

.preset-save-form input:focus {
  border-color: var(--accent, #4a90e2);
}

/* Таблица Запросов */
/* Requests journal table — same model as .shipment-list-table:
   width: max-content lets the table grow with the sum of column widths so
   resizing one column moves only that column; wrapper has overflow-x: auto. */
.request-list-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.request-list-table th,
.request-list-table td {
  padding: 5px 7px;
  text-align: left;
  font-size: 12px;
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  min-width: 60px;
}

.request-list-table th {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* Cell wrapping with capped height — actual line-clamp goes on the inner
   .request-cell-clamp wrapper (display:-webkit-box on <td> would break the
   table-cell layout, same lesson as in shipments). */
.request-list-table td {
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
}
.request-cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.request-list-table.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.request-list-table tbody tr:nth-child(even) td {
  background: var(--surface-alt);
}

.request-list-table tbody tr:hover td {
  background: rgba(55, 101, 255, 0.04);
}

/* Removed nth-child(N) percentage widths — JS now applies defaultWidth×14px
   on init and lets user-resize override per column. */

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.status-new {
  background: rgba(55, 101, 255, 0.12);
  color: var(--primary);
}

.status-pending {
  background: rgba(247, 144, 9, 0.16);
  color: var(--warning);
}

.status-priced {
  background: rgba(44, 199, 183, 0.18);
  color: #089a86;
}

.status-quoted {
  background: rgba(18, 183, 106, 0.18);
  color: var(--accent);
}

.status-in-progress {
  background: rgba(55, 101, 255, 0.18);
  color: var(--primary);
}

.status-risk {
  background: rgba(240, 68, 56, 0.18);
  color: var(--danger);
}

.status-completed {
  background: rgba(18, 183, 106, 0.18);
  color: var(--accent);
}

.status-confirmed {
  background: rgba(18, 183, 106, 0.18);
  color: var(--accent);
}

.status-declined {
  background: rgba(240, 68, 56, 0.18);
  color: var(--danger);
}
.status-mmd_review {
  background: rgba(124, 58, 237, 0.18);
  color: #7c3aed;
}
.status-awaiting_confirmation {
  background: rgba(240, 68, 56, 0.14);
  color: var(--danger);
  animation: pulse-badge 2s infinite;
}
.status-deal_closed {
  background: rgba(107, 115, 133, 0.15);
  color: var(--muted);
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.status-client_rate_updated {
  background: rgba(240, 68, 56, 0.14);
  color: var(--danger);
  animation: pulse-badge 2s infinite;
}
.status-fire {
  font-size: 12px;
  vertical-align: middle;
}

/* Urgent notification highlight */
.notification-item.urgent {
  border-left: 3px solid var(--danger);
}

/* Blinking badge on notification bell when urgent unread exists */
.nav-badge.urgent-blink {
  animation: urgent-blink 1.2s ease-in-out infinite;
}
@keyframes urgent-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Highlight pending rows in request table */
tr.row-pending-action {
  background: rgba(240, 68, 56, 0.06);
}

/* ── Bitrix chat channel tabs ── */
.chat-channel-tabs { display: flex; gap: 4px; margin-bottom: 12px; padding: 0 16px; }
.chat-channel-tab {
  padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.chat-channel-tab:hover { background: var(--hover); }
.chat-channel-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-channel-tab { position: relative; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1;
  background: #f04438; color: #fff; vertical-align: middle;
}
.tab-badge:empty { display: none; }
.chat-channel-tab.active .tab-badge { background: rgba(255,255,255,0.3); color: #fff; }

/* ── Bitrix chat messages ── */
.bchat-messages-container { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.bchat-msg { margin-bottom: 4px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-break: break-word; }
.bchat-msg.inbound { background: var(--surface); align-self: flex-start; }
.bchat-msg.outbound { background: rgba(59,130,246,0.1); align-self: flex-end; }
.bchat-author { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.bchat-msg time { font-size: 10px; color: var(--muted); display: block; margin-top: 4px; text-align: right; }
.bchat-attachment {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,0.04);
  font-size: 12px; margin-top: 4px;
}
.bchat-attachment a { color: var(--primary); text-decoration: none; }
.bchat-attachment a:hover { text-decoration: underline; }

/* Bitrix chat form */
.bchat-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bchat-file-label { cursor: pointer; font-size: 18px; display: flex; align-items: center; gap: 4px; }
.bchat-file-label span { font-size: 12px; color: var(--muted); }

/* Bitrix chat unread indicators */
.bchat-unread-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; margin-left: 4px; vertical-align: middle;
  animation: bchat-pulse 1.5s ease-in-out infinite;
}
@keyframes bchat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.bchat-unread-banner {
  background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 500;
  color: #92400e; cursor: pointer; transition: background 0.15s;
}
.bchat-unread-banner:hover { background: #fde68a; }

/* Bitrix chat mini preview in shipment */
.bchat-msg-mini { font-size: 12px; padding: 2px 0; color: var(--text); }
.bchat-msg-mini .bchat-author { font-weight: 600; }
.bchat-msg-mini.outbound { text-align: right; }

/* ── Унифицированные бейджи (новая система) ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.5;
  vertical-align: middle;
}
.badge-blue   { background: var(--primary-soft);  color: var(--primary); }
.badge-green  { background: var(--accent-soft);   color: var(--accent); }
.badge-red    { background: var(--danger-soft);   color: var(--danger); }
.badge-orange { background: var(--warning-soft);  color: var(--warning); }
.badge-purple { background: var(--purple-soft);   color: var(--purple); }
.badge-gray   { background: rgba(107, 115, 133, 0.12); color: var(--muted); }
.badge-yellow { background: #fef3c7; color: #92400e; }

/* Shipment closing dialog */
.closing-dialog { padding: 4px 0; }
.closing-step-label { font-weight: 600; margin-bottom: 12px; }
.closing-units-list { display: flex; flex-direction: column; gap: 4px; }
.closing-units-header {
  display: grid; grid-template-columns: 28px 1fr 1fr 1fr 1fr;
  gap: 8px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.closing-unit-row {
  display: grid; grid-template-columns: 28px 1fr 1fr 1fr 1fr;
  gap: 8px; align-items: center; padding: 8px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.closing-unit-row:hover { background: var(--hover-bg, #f8fafc); }
.closing-unit-row input[type="checkbox"] { width: 18px; height: 18px; }
.closing-docs-options { display: flex; flex-direction: column; gap: 8px; }
.closing-radio-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.closing-radio-row:hover { background: var(--hover-bg, #f8fafc); }
.closing-radio-row input[type="radio"] { width: 18px; height: 18px; }
.closing-summary { padding: 12px; background: #f8fafc; border-radius: 6px; }
.closing-summary ul { margin: 4px 0 0 20px; }
.docs-pending-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px;
  background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 600;
}

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 57, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

  margin: 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  font-size: 12px;
  color: var(--muted);
}

  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: #fff;
  box-shadow: 0 8px 20px -16px rgba(30, 41, 59, 0.6);
}

  font-size: 13px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

  display: flex;
  justify-content: space-between;
  align-items: center;
}

  margin: 0;
  font-size: 15px;
}

.progress {
  position: relative;
  height: 8px;
  background: rgba(55, 101, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.progress span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--primary), #2ce6ff);
}

  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--danger);
}

  margin: 0;
}

.timeline-grid {
  display: grid;
  gap: 18px;
}

.timeline-card {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  display: grid;
  grid-template-columns: 1fr 220px;
}

.timeline-content {
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.timeline-progress {
  border-left: 1px dashed rgba(17, 27, 57, 0.16);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.timeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.timeline-step .dot {
  width: 12px;
  height: 12px;
}

.timeline-step.completed .dot {
  background: var(--accent);
}

.timeline-step.in-progress .dot {
  background: var(--warning);
}

.timeline-step.in-progress span {
  color: var(--warning);
}

.timeline-step.pending .dot {
  background: var(--muted);
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.directory-card {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  line-height: 1.4;
}

.directory-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.directory-card h3 {
  margin: 0;
  font-size: 17px;
}

.directory-description {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.directory-meta {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.directory-meta div {
  display: flex;
  justify-content: space-between;
}

.directories-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

.directories-nav {
  background: var(--card-bg);
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 18px;
  padding: 18px 16px;
  display: grid;
  gap: 10px;
  height: fit-content;
}

.directory-nav-btn {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
}

.directory-nav-btn:hover,
.directory-nav-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.directories-content {
  display: grid;
  gap: 16px;
}

.directories-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.directories-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.directories-actions input[type="search"] {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 220px;
}

.notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  border: 1px solid #e3e7f4;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
}

.notification-item.unread {
  border-color: rgba(55, 101, 255, 0.3);
  background: #f7f9ff;
}

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

.notification-title {
  font-weight: 600;
  color: #111b39;
}

.notification-meta {
  font-size: 12px;
  color: #6a7287;
}

.notification-message {
  color: #3a4154;
  margin: 0;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-empty {
  border: 1px dashed #d4d9e6;
  border-radius: 14px;
  padding: 16px;
  color: #6a7287;
  background: #fafbff;
}

.directories-table-wrapper {
  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.5);
  /* Bounded-height scroll area: the table scrolls internally, so the horizontal
     scrollbar stays at the bottom of the visible box (on screen) instead of far
     down at the last row. Header is sticky (below) to stay visible while scrolling. */
  overflow: auto;
  max-height: calc(100vh - 300px);
}

/* Resizable columns model (same as .request-list-table): width:max-content lets
   the table grow with the sum of column widths so resizing one column moves only
   that column; the .directories-table-wrapper (overflow-x:auto) scrolls; cells
   wrap within their column. */
.directories-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.directories-table th,
.directories-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  min-width: 60px;
}

.directories-table th {
  /* sticky (not relative) so the header stays visible while scrolling vertically;
     sticky still anchors the absolute .col-resize-handle. Background is required
     so body rows don't show through the header. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-bg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* Cells wrap within the (resizable) column width. */
.directories-table td {
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  vertical-align: top;
}

.directories-table.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.directories-table tbody tr:last-child td {
  border-bottom: none;
}

.directories-table .actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.directories-table .link-btn {
  padding: 6px 10px;
}

.directories-table tr.inactive-row {
  opacity: 0.5;
}

.agent-import-preview .status-new td:nth-child(3) { color: var(--accent, #4caf50); font-weight: 600; }
.agent-import-preview .status-update td:nth-child(3) { color: var(--warning, #ff9800); font-weight: 600; }
.agent-import-preview .status-unchanged td:nth-child(3) { color: var(--muted, #999); }

.directory-description-text {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 18, 28, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.initial-loader {
  position: fixed;
  inset: 0;
  background: rgba(14, 18, 28, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  transition: opacity 0.25s ease;
}
.initial-loader.hidden {
  display: none !important;
}
.initial-loader__card {
  background: #1e2533;
  color: #fff;
  border-radius: 14px;
  padding: 28px 36px;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}
.initial-loader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #4f8cff;
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: initial-loader-spin 0.9s linear infinite;
}
.initial-loader__text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.initial-loader__hint {
  font-size: 13px;
  color: #94a3b8;
}
@keyframes initial-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  width: min(520px, 95vw);
  box-shadow: 0 28px 60px -30px rgba(15, 23, 42, 0.6);
  display: grid;
  gap: 18px;
}

.auth-card h2 {
  margin: 0;
  font-size: 20px;
}

.auth-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-error {
  margin: 0;
  color: #d64545;
  font-size: 13px;
}

.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 10px;
  z-index: 10010;
}

.toast {
  background: #fff;
  color: #0f172a;
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 220px;
  box-shadow: 0 16px 40px -24px rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(15, 23, 42, 0.08);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 13px;
  cursor: pointer;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-warning {
  border-color: rgba(245, 158, 11, 0.4);
  background: #fff7ed;
  color: #92400e;
}

.app-shell.blurred {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.admin-layout {
  display: grid;
  gap: 20px;
}

.admin-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-panel .panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-panel .panel-actions input[type="search"] {
  min-width: 220px;
}

.admin-table th,
.admin-table td {
  vertical-align: top;
}

.admin-table .actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-table .link-btn {
  padding: 6px 10px;
}

.admin-role-name {
  font-weight: 600;
}

.admin-role-desc {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.admin-user-contacts {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.admin-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-role-tag {
  background: rgba(55, 101, 255, 0.12);
  color: #1c3fc4;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.admin-permissions {
  display: grid;
  gap: 10px;
}

.admin-permissions h4 {
  margin: 0;
  font-size: 14px;
}

.admin-permissions-table th,
.admin-permissions-table td {
  padding: 10px 12px;
  font-size: 13px;
}

.admin-permissions-table select {
  min-width: 190px;
}

.admin-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 0;
}

.admin-payers-grid {
  margin-top: 8px;
}

@media (max-width: 1080px) {
  .directories-shell {
    grid-template-columns: 1fr;
  }

  .directories-nav {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    display: grid;
    gap: 10px;
  }
}

.link-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
  font-weight: 600;
}

.link-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.link-btn.inline {
  padding: 0;
  min-height: auto;
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--primary);
}

.link-btn.inline:hover {
  background: transparent;
  border-color: transparent;
  color: #264de0;
}

.link-btn.danger {
  color: var(--danger);
  border-color: rgba(240, 68, 56, 0.35);
}

.link-btn.danger:hover {
  color: #c63025;
  border-color: rgba(240, 68, 56, 0.55);
  background: rgba(240, 68, 56, 0.12);
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.switch input {
  display: none;
}

.slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: rgba(17, 27, 57, 0.2);
  border-radius: 999px;
  transition: var(--transition);
}

.slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.3);
}

.switch input:checked + .slider {
  background: var(--primary);
}

.switch input:checked + .slider::after {
  transform: translateX(20px);
}

.analytics-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}

.kpi-list {
  display: grid;
  gap: 14px;
}

.kpi-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  background: rgba(55, 101, 255, 0.04);
}

.kpi-item strong {
  font-size: 18px;
}

.sparkline {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 48px;
}

.sparkline span {
  flex: 1;
  background: linear-gradient(180deg, rgba(55, 101, 255, 0.84), rgba(55, 101, 255, 0.22));
  border-radius: 4px 4px 0 0;
}

.trend-chart {
  height: 220px;
  position: relative;
  background: linear-gradient(180deg, rgba(55, 101, 255, 0.12), transparent);
  border-radius: 14px;
  border: 1px solid rgba(55, 101, 255, 0.16);
  overflow: hidden;
}

.trend-chart::before,
.trend-chart::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgba(55, 101, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 101, 255, 0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
}

.trend-line {
  position: absolute;
  inset: 0;
}

.trend-line path {
  fill: rgba(55, 101, 255, 0.16);
  stroke: var(--primary);
  stroke-width: 2;
}

.ai-suggestions {
  display: grid;
  gap: 16px;
}

.ai-suggestion {
  position: relative;
  padding: 16px 18px 16px 48px;
  border-radius: 16px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  background: linear-gradient(100deg, rgba(44, 255, 204, 0.08), rgba(55, 101, 255, 0.04));
}

.ai-suggestion::before {
  content: "⚙";
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 18px;
}

.ai-suggestion h4 {
  margin: 0 0 4px;
  font-size: 16px;
}

.ai-suggestion p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.modal-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
}

.modal-summary strong {
  font-size: 18px;
  color: var(--text);
}

.tariff-current-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(55, 101, 255, 0.06);
  margin-bottom: 16px;
  display: grid;
  gap: 6px;
}

.tariff-current-content {
  font-size: 13px;
  color: var(--muted);
}

.danger-action {
  background: rgba(240, 68, 56, 0.12);
  color: var(--danger);
  border: 1px solid rgba(240, 68, 56, 0.4);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.danger-action:hover {
  background: rgba(240, 68, 56, 0.18);
}

.warning-action {
  background: var(--warning);
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.warning-action:hover {
  background: #d97a08;
}

.detail-list {
  display: grid;
  gap: 10px;
}

.detail-list div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
}

.detail-list dt {
  font-weight: 600;
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.inline-select {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}

.search-results {
  display: grid;
  gap: 12px;
}

.search-item {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(55, 101, 255, 0.04);
  display: grid;
  gap: 8px;
}

.search-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.search-item footer {
  color: var(--primary);
  font-size: 13px;
}

.modal-form {
  display: grid;
  gap: 18px;
}

.modal-form.request-form {
  gap: 14px;
}

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

.modal-form.request-form .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.modal-form.request-form .form-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.cargo-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.full {
  grid-template-columns: 1fr;
}

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

.has-autocomplete {
  position: relative;
}

.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.form-field label .required {
  color: var(--danger);
  margin-left: 4px;
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  transition: var(--transition);
}

.form-field textarea {
  min-height: 84px;
  resize: vertical;
  max-height: 40vh;
}

#tariff-comment {
  max-height: 40vh;
}

.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  background: #f9fafb;
}
.attachment-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #777;
  padding: 0 2px;
  line-height: 1;
}
.attachment-chip button:hover { color: var(--danger); }
.attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  cursor: pointer;
}

.autocomplete-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 30, 60, 0.18);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.autocomplete-panel.floating {
  position: fixed;
  left: 0;
  right: auto;
  z-index: 10020;
}

.autocomplete-panel.hidden {
  display: none;
}

.autocomplete-item {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
  background: #f3f5ff;
  outline: none;
}

.autocomplete-item .primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.autocomplete-item .secondary {
  font-size: 12px;
  color: var(--muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

.form-hint {
  font-size: 12px;
  color: var(--muted);
}

.form-hint .inline {
  border: none;
  background: none;
  color: var(--primary);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.inline-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.inline-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.inline-group input[type="radio"],
.inline-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Постоянный footer-слот модалки: для длинных форм в него перемещаются
   кнопки .form-actions (см. setupNewRequestForm), чтобы быть физически
   вне скролл-области body и не накладываться на контент. */
.modal-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.modal-footer:empty { display: none; }

.tariff-form-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.3fr);
  gap: 20px;
  margin-bottom: 18px;
}

.tariff-context-card,
.tariff-response-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.tariff-context-card h4 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
}

.tariff-context-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tariff-context-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px dashed rgba(31, 35, 51, 0.12);
  padding-bottom: 6px;
}

.tariff-context-list li span:last-child {
  font-weight: 600;
  color: var(--text);
}

.tariff-quick-actions {
  margin-bottom: 16px;
}

.tariff-quick-actions header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tariff-quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-rate-btn {
  border: 1px solid rgba(55, 101, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  background: #f5f7ff;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.quick-rate-btn:hover {
  background: rgba(55, 101, 255, 0.12);
}

.tariff-response-card .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tariff-decline-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

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

.mailing-groups-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1f2333;
}

.directory-multiselect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding-top: 6px;
}

.directory-multiselect-grid .checkbox-pill {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  background: #fff;
}

.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.checkbox-pill input[type="checkbox"] {
  accent-color: var(--primary);
}

.tariff-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  width: 100%;
}

.tariff-history-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(55, 101, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.tariff-history-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.tariff-history-card strong {
  color: var(--text);
}

.tariff-history-body {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

.tariff-history-body p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.tariff-history-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.shipment-summary-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(55, 101, 255, 0.04);
  margin-bottom: 12px;
}

.shipment-meta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.shipment-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.shipment-meta-field input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.shipment-edit-table input[readonly] {
  background: #f4f5f8;
  color: #6b7280;
  cursor: not-allowed;
  border-color: #e3e5ea;
}

.shipment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.shipment-summary span strong {
  color: var(--text);
}

.shipment-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 12px;
  background: rgba(55, 101, 255, 0.03);
}

.shipment-section.card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 57, 0.1);
  padding: 18px;
}

.shipment-section header,
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.shipment-section header h3,
.section-header h3 {
  margin: 0;
  font-size: 18px;
}

.section-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.section-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.shipment-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.shipment-edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.shipment-edit-table[data-kind="expense"] {
  min-width: 1020px;
}

.shipment-edit-table th,
.shipment-edit-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.shipment-edit-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--muted);
  background: rgba(17, 27, 57, 0.03);
}

.shipment-edit-table tbody tr[data-kind="income"] td {
  background: rgba(18, 183, 106, 0.05);
}

.shipment-edit-table tbody tr[data-kind="expense"] td {
  background: rgba(240, 68, 56, 0.04);
}

.shipment-edit-table tbody tr:last-child td {
  border-bottom: none;
}

.shipment-edit-table input,
.shipment-edit-table select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 13px;
  background: #fff;
}

.shipment-edit-table .cell-amount input,
.shipment-edit-table .cell-rate input {
  text-align: right;
}

.shipment-edit-table .cell-currency,
.shipment-edit-table .cell-date,
.shipment-edit-table .cell-rate {
  min-width: 120px;
}

.shipment-edit-table .cell-amount {
  min-width: 140px;
}

.shipment-edit-table .cell-payer {
  min-width: 170px;
}

.shipment-edit-table .cell-agent {
  min-width: 200px;
}

.shipment-edit-table .cell-service {
  min-width: 180px;
}

.shipment-edit-table .cell-route {
  min-width: 200px;
}

.shipment-rows {
  display: table-row-group;
}

.shipment-row .field-hint {
  display: block;
  font-size: 11px;
  color: #c46a00;
  margin-top: 6px;
}

.agent-field-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

.agent-field-input input {
  flex: 1;
}

.agent-field-input .inline {
  white-space: nowrap;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

.remove-row-btn,
.duplicate-row-btn {
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}

.remove-row-btn {
  background: rgba(240, 68, 56, 0.12);
  color: var(--danger);
}

.duplicate-row-btn {
  background: rgba(55, 101, 255, 0.12);
  color: var(--primary);
}

.remove-row-btn:hover {
  background: rgba(240, 68, 56, 0.2);
}

.duplicate-row-btn:hover {
  background: rgba(55, 101, 255, 0.22);
}

.shipment-edit-table input:focus,
.shipment-edit-table select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

#shipment-detail {
  margin-top: 24px;
}

#shipment-detail.hidden {
  display: none;
}

.shipment-detail-card {
  background: var(--card-bg);
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.6);
  display: grid;
  gap: 20px;
}

.shipment-detail-card.is-selected {
  border-color: rgba(55, 101, 255, 0.4);
  box-shadow: 0 18px 36px -28px rgba(55, 101, 255, 0.35);
}

.shipment-detail-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.shipment-detail-header h3 {
  margin: 0;
  font-size: 22px;
}

.shipment-detail-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.shipment-detail-rate {
  text-align: right;
  min-width: 160px;
}

.shipment-detail-rate span {
  display: block;
  font-size: 20px;
  font-weight: 600;
}

.shipment-detail-rate p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.shipment-deeplink {
  font-size: 12px;
  padding: 6px 12px;
  white-space: nowrap;
}

.shipment-cancel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b42318;
  background: #fee4e2;
  border: 1px solid #fca5a5;
  text-transform: uppercase;
}

.shipment-cancel-info {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  padding: 12px 14px;
  color: #9f1239;
}

.shipment-cancel-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.shipment-cancel-reason {
  font-size: 13px;
}

.shipment-detail-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 960px) {
  .shipment-detail-grid {
    grid-template-columns: 1.3fr 1fr;
  }

  .shipment-extra.full {
    grid-column: 1 / -1;
  }
}

.shipment-info h4,
.shipment-extra h4,
.shipment-plan-preview h4 {
  margin: 0 0 12px;
  font-size: 16px;
}

.shipment-info dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.shipment-info dl div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  font-size: 13px;
}

.shipment-plan-preview {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}

.shipment-tracking {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 18px;
  background: #fff;
  display: grid;
  gap: 14px;
}
.tracking-layout-inline {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: stretch;
}
.tracking-layout-inline .tracking-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tracking-group {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 14px;
  padding: 12px;
  background: #f8f9fd;
  display: grid;
  gap: 8px;
}

.tracking-group + .tracking-group {
  margin-top: 12px;
}

.tracking-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.tracking-mini-map {
  min-height: 260px;
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #f4f6fb;
  height: 100%;
}

.shipment-tracking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tracking-group .shipment-tracking-list {
  gap: 8px;
}

.shipment-tracking-list li {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
}

.tracking-group .shipment-tracking-list li {
  border-left-color: #c9d3f7;
}

.shipment-tracking-list p {
  margin: 2px 0;
  font-weight: 600;
  color: var(--text);
}

.shipment-tracking-list span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.tracking-entry-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

/* Tracking entry row — flex layout. Delete × sits on the LEFT in a fixed
   column so the row never shifts; the button is hidden (opacity:0) by
   default and fades in on row hover. Layout stays clean in the resting
   state and the affordance appears only when needed. */
.shipment-tracking-list .tracking-entry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tracking-entry-body {
  flex: 1;
  min-width: 0;
}
.tracking-entry-delete {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: none;
  background: transparent;
  color: var(--muted, #888);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.shipment-tracking-list .tracking-entry:hover .tracking-entry-delete {
  opacity: 1;
}
.tracking-entry-delete:hover {
  background: rgba(229, 57, 53, 0.12);
  color: var(--danger, #e53935);
}
.tracking-entry-delete:focus-visible {
  opacity: 1;
  outline: 2px solid var(--primary, #1a73e8);
  outline-offset: 1px;
}

.tracking-entry-time {
  font-weight: 600;
  color: var(--text);
}

.tracking-entry-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.tracking-entry-description {
  margin: 4px 0 6px;
  font-weight: 600;
  color: var(--text);
}

.tracking-entry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.shipment-documents {
  margin-top: 24px;
}

.document-manager {
  display: grid;
  gap: 16px;
}

.document-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #f9fbff;
}

.document-toolbar .selection-hint {
  font-size: 13px;
  color: #6b7385;
}

.document-toolbar .secondary-action {
  margin-left: auto;
}

.document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.document-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  background: #fff;
  gap: 12px;
}

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

.document-select input {
  width: 16px;
  height: 16px;
}

.document-meta span {
  display: block;
  font-size: 13px;
  color: #6b7385;
}

.document-meta strong {
  font-size: 14px;
  color: #1f2333;
}

.document-meta-sub {
  font-size: 12px;
  color: #8a92a6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.document-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-actions button {
  border: none;
  background: #f0f2f8;
  color: #3765ff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.document-actions .link-btn.muted {
  color: #6b7385;
  background: transparent;
}

.document-upload-form {
  border: 1px dashed #cfd5e6;
  border-radius: 12px;
  padding: 16px;
  background: rgba(55, 101, 255, 0.03);
}

.document-preview-wrapper {
  display: grid;
  gap: 16px;
}

.document-preview {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7ff;
  border-radius: 16px;
  overflow: hidden;
  padding: 8px;
}

.document-preview img,
.document-preview video,
.document-preview iframe {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  background: #000;
}

.document-preview iframe {
  width: 100%;
  height: 480px;
  border: none;
}

.document-preview-meta p {
  margin: 0;
  color: var(--muted);
}

.chat-toolbar {
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.chat-filter-grid {
  flex: 1 1 640px;
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.chat-filter-grid .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
}

.chat-filter-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.chat-filter-actions .checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #1f2333;
}

.chat-pagination-controls {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-pagination-controls label {
  font-size: 13px;
  color: #6b7385;
}

.chat-page-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

#chat-page-info {
  font-size: 13px;
  color: #6b7385;
}

.chat-module {
  display: flex;
  gap: 24px;
  min-height: 420px;
}

.chat-sidebar {
  width: 320px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e0e4f0;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.chat-conversation-list {
  flex: 1;
  overflow-y: auto;
}

.chat-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}

.chat-item.active {
  border-color: #3765ff;
  background: rgba(55, 101, 255, 0.08);
  border-left: 3px solid #3765ff;
}

.chat-item h4 {
  margin: 0;
  font-size: 14px;
  color: #1f2333;
}

.chat-item p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7385;
}

.chat-item .badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f2f8;
  color: #4a4f63;
}

.chat-item.unread .badge {
  background: #ffeed8;
  color: #c46a00;
}

.chat-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}

.chat-assignee {
  font-size: 11px;
  font-weight: 500;
  color: #7b61ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.chat-window {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e0e4f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

.chat-window-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-thread-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eceff7;
}

.chat-thread-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mark-unread-btn {
  font-size: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}

.chat-thread-header h3 {
  margin: 0;
  font-size: 18px;
}

.chat-thread-header p {
  margin: 4px 0 0;
  color: #6b7385;
  font-size: 13px;
}

.chat-thread-header .chat-agent {
  font-weight: 500;
  color: #1f2333;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fd;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  max-width: 70%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(31, 35, 51, 0.08);
  font-size: 14px;
  line-height: 1.4;
}

.chat-message.agent {
  background: #fff;
  align-self: flex-start;
}

.chat-message.manager {
  background: #3765ff;
  color: #fff;
  align-self: flex-end;
}

.chat-message time {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
}

.chat-input-form {
  padding: 16px;
  border-top: 1px solid #eceff7;
  display: flex;
  gap: 12px;
}

.chat-input-form textarea {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #d9deea;
  padding: 10px 12px;
  resize: none;
  min-height: 56px;
}

.chat-input-form button {
  width: 160px;
}

.tracking-entry-location::before {
  content: "📍";
  margin-right: 4px;
}

.tracking-entry-tps::before {
  content: "🚚";
  margin-right: 4px;
}

.tracking-entry-coords::before {
  content: "⇢";
  margin-right: 4px;
}

.tracking-entry-coords.approx {
  color: #b45309;
  font-style: italic;
  opacity: 0.85;
}

.shipment-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shipment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.shipment-modal-route {
  margin: 4px 0 0;
  color: var(--muted);
}

.shipment-modal-rate {
  text-align: right;
}

.shipment-modal-rate strong {
  display: block;
  font-size: 22px;
  color: var(--text);
}

.shipment-modal-rate span {
  font-size: 13px;
  color: var(--muted);
}

.shipment-modal-actions {
  margin-left: auto;
}

.shipment-modal-actions .secondary-action {
  white-space: nowrap;
}

.shipment-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 16px;
}

.shipment-modal .modal-card {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  background: #fff;
}

.shipment-modal .modal-card.full {
  grid-column: span 2;
}

.shipment-modal .modal-card h4 {
  margin: 0 0 10px;
}

.modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.modal-card-header h4 {
  margin: 0;
}

.shipment-modal .modal-card dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.shipment-modal .modal-card dl div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  font-size: 13px;
}

.shipment-info-card .modal-card-header {
  align-items: center;
}

.shipment-info-card.is-collapsed {
  padding-bottom: 12px;
}

.shipment-info-card.is-collapsed dl {
  display: none;
}

@media (max-width: 960px) {
  .shipment-modal {
    grid-template-columns: 1fr;
  }
  .shipment-modal .modal-card.full {
    grid-column: span 1;
  }
  .shipment-modal-grid {
    grid-template-columns: 1fr;
  }
}

.shipment-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.shipment-plan-table-wrap {
  overflow-x: auto;
}

.shipment-units-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.shipment-units-table-wrap {
  overflow-x: auto;
}

.shipment-units-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 980px;
}

.shipment-units-table-wrap.is-coords-hidden .tps-coords-col {
  display: none;
}

.shipment-units-table th,
.shipment-units-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Date cell: text input (DD.MM.YYYY) + hidden native picker + 📅 button.
   Text input gives standard select-all/copy/paste; clicking 📅 opens the
   native browser date picker via showPicker(). */
.date-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.date-cell .date-text-input {
  width: 110px;
  padding: 4px 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.date-cell .date-picker-hidden {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.date-cell .date-picker-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}
.date-cell .date-picker-btn:hover {
  color: var(--primary);
}

.shipment-units-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--muted);
}

.shipment-plan-table th,
.shipment-plan-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.shipment-plan-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--muted);
}

.shipment-plan-table tbody tr.income td {
  background: rgba(18, 183, 106, 0.08);
}

.shipment-plan-table tbody tr.expense td {
  background: rgba(240, 68, 56, 0.06);
}

.alert-banner {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(247, 144, 9, 0.4);
  background: rgba(247, 144, 9, 0.12);
  color: #b54708;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.alert-banner.warning {
  border-color: rgba(247, 144, 9, 0.5);
  background: rgba(247, 144, 9, 0.15);
  color: #b54708;
}

.alert-banner.info {
  border-color: rgba(56, 116, 213, 0.4);
  background: rgba(56, 116, 213, 0.10);
  color: #1f4ea8;
}

.unit-coords-warn {
  display: inline-block;
  margin-left: 6px;
  color: #b54708;
  cursor: help;
  font-size: 13px;
}

.shipment-plan-table tbody tr:last-child td {
  border-bottom: none;
}

.form-actions.align-start {
  justify-content: flex-start;
}

.shipment-extra .form-grid {
  gap: 12px;
}

.form-status {
  font-size: 12px;
  color: var(--muted);
}

.shipment-list-wrapper {
  margin-bottom: 24px;
  overflow-x: auto;
}

.shipment-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

.shipment-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.shipment-filters .filter-group label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.shipment-filters .filter-group select,
.shipment-filters .filter-group input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  height: 26px;
  box-sizing: border-box;
}

.shipment-filters .filter-group.wide {
  grid-column: span 2;
}

.shipment-list-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(17, 27, 57, 0.06);
}

.shipment-list-table th,
.shipment-list-table td {
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  white-space: nowrap;
}

.shipment-list-table th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-size: 11px;
}

.shipment-list-table tbody tr:last-child td {
  border-bottom: none;
}

.shipment-list-table tbody tr {
  cursor: pointer;
}

.shipment-list-table tbody tr.is-selected td {
  background: rgba(55, 101, 255, 0.08);
}

/* Обрезка длинных маршрутов */
.shipment-list-table .cell-route {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Цвет прибыли */
.profit-pos { color: var(--accent); font-weight: 600; }
.profit-neg { color: var(--danger); font-weight: 600; }

.shipment-list-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.shipment-list-table tbody tr:hover .shipment-list-actions {
  opacity: 1;
}

/* Кнопки-иконки в таблице */
.icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}

.icon-btn svg {
  width: 14px;
  height: 14px;
}

.icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.shipment-tracking-panel {
  margin-top: 12px;
  background: var(--card-bg);
  border-radius: 20px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  box-shadow: 0 28px 48px -32px rgba(15, 23, 42, 0.4);
  padding: 14px 20px 16px;
  display: grid;
  gap: 8px;
}

.shipment-tracking-panel header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.shipment-tracking-panel h3 {
  margin: 0 0 4px;
}

.shipment-tracking-panel .panel-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.tracking-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Filter groups carry a caption above the control; align bottoms so the
     controls line up with the (caption-less) date-field boxes. */
  align-items: flex-end;
  margin: 0;
}

.tracking-controls select,
.tracking-controls input {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  min-width: 0;
}

.tracking-controls .search-field {
  flex: 0 1 260px;
  width: 260px;
}

.tracking-controls .tracking-date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  font-size: 12px;
  color: #6b7280;
}
.tracking-controls .tracking-date-field > span {
  white-space: nowrap;
}
.tracking-controls .tracking-date-field > input {
  border: none;
  padding: 2px 0;
  font-size: 13px;
  color: var(--text);
  outline: none;
  background: transparent;
}

.tracking-controls select {
  flex: 0 1 180px;
  width: 180px;
}

/* Labeled filter groups: small caption above the control (matches Запросы/Перевозки). */
.tracking-controls .tracking-filter-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 180px;
  width: 180px;
}
.tracking-controls .tracking-filter-field.tracking-filter-search {
  flex: 0 1 260px;
  width: 260px;
}
.tracking-filter-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* Inside a labeled group the wrapper owns the width; the control fills it. */
.tracking-controls .tracking-filter-field .combobox,
.tracking-controls .tracking-filter-field select,
.tracking-controls .tracking-filter-field .search-field {
  flex: initial;
  width: 100%;
}
.tracking-controls .combobox input {
  width: 100%;
  border-radius: 12px;
}

/* Hide native search field × clear button — it overlaps with our icon */
.tracking-controls input[type="search"]::-webkit-search-cancel-button,
.tracking-controls input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-field.compact input {
  min-width: 0;
  width: 100%;
}

.form-info-banner {
  border: 1px solid rgba(55, 101, 255, 0.2);
  background: rgba(55, 101, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 16px;
}

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

.tracking-table-wrapper {
  margin-top: 0;
  border: 1px solid rgba(17, 27, 57, 0.1);
  border-radius: 16px;
  background: #fff;
  overflow: visible;
}

.tracking-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(17, 27, 57, 0.1);
  margin: 0;
}

.tracking-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}

.tracking-tab:hover {
  color: var(--text);
}

.tracking-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tracking-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: rgba(17, 27, 57, 0.08);
  color: var(--text);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.tracking-tab.active .tracking-tab-count {
  background: var(--primary);
  color: #fff;
}

.tracking-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

.tracking-table {
  min-width: 1600px;
  table-layout: fixed;
}

.tracking-table th,
.tracking-table td {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-table-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 0;
}

.tracking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tracking-table-toolbar.edit-mode-toolbar {
  justify-content: space-between;
}

.tracking-table-toolbar.edit-mode-toolbar .edit-mode-counter {
  font-weight: 600;
  color: #1a365d;
}

.tracking-table-toolbar.edit-mode-toolbar .edit-mode-actions {
  display: flex;
  gap: 10px;
}

.tracking-journal-row-dimmed {
  opacity: 0.4;
}

.tracking-map-collapsible {
  margin-bottom: 0;
}

.tracking-map-summary {
  cursor: pointer;
  padding: 10px 14px;
  background: #f5f6fb;
  border: 1px solid rgba(17, 27, 57, 0.1);
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  color: #1a365d;
  user-select: none;
  list-style: none;
}

.tracking-map-summary::-webkit-details-marker {
  display: none;
}

.tracking-map-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
}

.tracking-map-collapsible[open] .tracking-map-summary::before {
  transform: rotate(90deg);
}

.tracking-map-collapsible[open] .tracking-layout {
  margin-top: 12px;
}

.tracking-table thead {
  background: #f5f6fb;
}

.tracking-table th,
.tracking-table td {
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  padding: 10px 14px;
  text-align: left;
}

.tracking-table tbody tr:last-child td {
  border-bottom: none;
}

.tracking-table td:nth-child(2),
.tracking-table td:nth-child(3) {
  white-space: nowrap;
}

.tracking-table td:last-child {
  color: var(--muted);
}

.tracking-map {
  height: 320px;
  border-radius: 16px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  overflow: hidden;
}

.tracking-feed {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
}

.tracking-feed .tracking-entry {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
}

.tracking-feed .tracking-entry h5 {
  margin: 0 0 4px;
  font-size: 14px;
}

.tracking-feed .tracking-entry p {
  margin: 0 0 6px;
  font-size: 13px;
}

.tracking-feed .tracking-entry span {
  font-size: 12px;
  color: var(--muted);
}

.mso-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.mso-list,
.mso-detail {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
}

.mso-list .mso-card {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}

.mso-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mso-card-head span {
  font-size: 12px;
  color: var(--muted);
}

.mso-card.dirty {
  border-color: rgba(245, 130, 36, 0.6);
}

.mso-card.dirty .mso-card-head span {
  color: #f58224;
}

.mso-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.freight-modal {
  display: grid;
  gap: 16px;
  color: var(--text);
}

.freight-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}

.freight-card-header-main,
.freight-card-header-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

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

.freight-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.freight-value {
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  min-height: 30px;
  display: flex;
  align-items: center;
}

.freight-card-sections {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.freight-card-panel {
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 12px;
  padding: 10px;
  background: #f9faff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.freight-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.freight-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.freight-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  background: #fff;
  display: grid;
}

.freight-table-title {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid rgba(17, 27, 57, 0.08);
  background: #f9faff;
}

.freight-table {
  min-width: 1700px;
  font-size: 12px;
  margin-top: 0;
}

.freight-table th,
.freight-table td {
  white-space: nowrap;
}

.freight-table .tps-stack {
  padding-top: 4px;
  padding-bottom: 4px;
}

.freight-table .tps-stack .tps-main {
  min-height: 16px;
  line-height: 1.2;
  font-weight: 600;
}

.freight-table .tps-stack .tps-sub {
  line-height: 1.2;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.freight-table thead tr:first-child th {
  background: #eef1f7;
  text-align: center;
  font-size: 11px;
}

.freight-table thead tr:last-child th {
  background: #f5f6fb;
}

@media (max-width: 1100px) {
  .freight-card-header {
    grid-template-columns: 1fr;
  }
  .freight-card-sections {
    grid-template-columns: 1fr;
  }
}

.mso-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

/* Click-on-row open MSO modal */
.mso-table tbody tr.is-clickable { cursor: pointer; }
.mso-table tbody tr.is-clickable:hover { background: rgba(79, 110, 247, 0.06); }

/* Column resize handle for MSO journal + entries table */
.mso-table th { position: relative; }
.mso-table .col-resize-handle {
  position: absolute; right: 0; top: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none;
  background: transparent;
}
.mso-table .col-resize-handle:hover,
.mso-table .col-resize-handle.is-resizing {
  background: rgba(79, 110, 247, 0.4);
}
.mso-table.is-resizing { user-select: none; }
.mso-table .sort-arrow { opacity: 0.5; margin-left: 4px; font-size: 10px; }
.mso-table .sort-arrow.active { opacity: 1; color: var(--primary); }

.mso-table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}

.mso-table-scroll .mso-table {
  min-width: 1200px;
  font-size: 12px;
}

.mso-table-scroll .mso-table th,
.mso-table-scroll .mso-table td {
  padding: 5px 7px;
}

/* Truncate long-text columns: Agent(4), Service(5), Description(6), Invoice comment(14) */
.mso-table-scroll .mso-table td:nth-child(4),
.mso-table-scroll .mso-table td:nth-child(5),
.mso-table-scroll .mso-table td:nth-child(6),
.mso-table-scroll .mso-table td:nth-child(14) {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mso-table th,
.mso-table td {
  border: 1px solid rgba(17, 27, 57, 0.08);
  padding: 8px 10px;
  text-align: left;
}

.mso-table thead {
  background: #f5f6fb;
}

.mso-table tr.mso-currency-row td {
  background: #f9faff;
  font-size: 12px;
}

.mso-table .currency-label {
  color: var(--muted);
  font-style: italic;
}

.mso-table-wrapper {
  margin-bottom: 4px;
}

/* Summary table: compact, no horizontal scroll */
.mso-summary-table {
  min-width: 0;
  margin-top: 0;
}

/* Currency rows hidden by default; shown by JS switcher */
.mso-table-wrapper .mso-currency-row {
  display: none;
}

/* Total row at the bottom of the summary table */
.mso-summary-table .mso-total-row td {
  border-top: 2px solid #c6d9f1;
  background: #eef4fb;
}

.mso-currency-switcher,
.shipment-currency-switcher {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  align-items: center;
}

.mso-currency-switcher button,
.shipment-currency-switcher button {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #f5f6fb;
  color: #555;
  line-height: 1.6;
}

.mso-currency-switcher button.active,
.shipment-currency-switcher button.active {
  background: #3b5bdb;
  color: #fff;
  border-color: #3b5bdb;
}

.mso-currency-sub-name {
  display: none;
  font-weight: 500;
}

.currency-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #f5f6fb;
  color: #555;
  user-select: none;
}

.radio-label input[type="radio"] {
  accent-color: #3b5bdb;
  cursor: pointer;
}

/* MSO status badges — теперь используют .badge.badge-* */
.mso-status-badge {
  /* backward compat: наследует от .badge */
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.5;
  vertical-align: middle;
}
.mso-status-pending          { background: var(--warning-soft); color: var(--warning); }
.mso-status-calculated       { background: var(--primary-soft); color: var(--primary); }
.mso-status-posted           { background: var(--accent-soft);  color: var(--accent); }
.mso-status-cancelled        { background: rgba(107, 115, 133, 0.12); color: var(--muted); }
.mso-status-pending_approval { background: var(--purple-soft);  color: var(--purple); }
.mso-status-rejected         { background: var(--danger-soft);  color: var(--danger); }

.mso-approval-pending {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 13px;
  margin-bottom: 10px;
}
.mso-approval-rejected {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 10px;
}
.mso-return-banner {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.mso-return-dialog { padding: 4px 0; }
.mso-return-dialog textarea:focus { outline: 2px solid var(--primary); }

/* MSO correction — highlight changed/new entries.
   Expenses: up=bad (red), down=good (green).
   Income:   up=good (green), down=bad (red).
   New entries always red. */
tr.mso-entry-new > td,
tr.mso-entry-up-bad > td,
tr.mso-entry-down-bad > td {
  background: #fff5f5;
  color: #b71c1c;
}
tr.mso-entry-up-good > td,
tr.mso-entry-down-good > td {
  background: #f0fdf4;
  color: #166534;
}
tr.mso-entry-other > td {
  background: #fefce8;
  color: #854d0e;
}
tr.mso-entry-up-bad > td:first-child::before,
tr.mso-entry-up-good > td:first-child::before {
  content: "▲ ";
}
tr.mso-entry-down-bad > td:first-child::before,
tr.mso-entry-down-good > td:first-child::before {
  content: "▼ ";
}
tr.mso-entry-up-bad > td:first-child::before,
tr.mso-entry-down-bad > td:first-child::before {
  color: #e53935;
}
tr.mso-entry-up-good > td:first-child::before,
tr.mso-entry-down-good > td:first-child::before {
  color: #16a34a;
}

/* Inline row editing */
tr.mso-entry-editing > td {
  padding: 4px 3px;
  vertical-align: middle;
  background: rgba(79, 110, 247, 0.05);
  border-top: 2px solid rgba(79, 110, 247, 0.4);
  border-bottom: 2px solid rgba(79, 110, 247, 0.4);
}
tr.mso-entry-editing input,
tr.mso-entry-editing select {
  font-size: 12px;
  padding: 3px 5px;
  border: 1px solid var(--border, #d0d4e8);
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
tr.mso-entry-editing input:focus,
tr.mso-entry-editing select:focus {
  outline: none;
  border-color: var(--accent, #4f6ef7);
}
tr.mso-entry-editing input[readonly] {
  background: #f5f6fa;
  color: var(--text-secondary, #888);
  border-color: transparent;
}
tr.mso-entry-editing td:nth-child(2) select  { min-width: 70px; }
tr.mso-entry-editing td:nth-child(3) select  { min-width: 110px; }
tr.mso-entry-editing td:nth-child(4) input[name="agentName"] { min-width: 90px; }
tr.mso-entry-editing td:nth-child(5) select  { min-width: 90px; }
tr.mso-entry-editing td:nth-child(6) input   { min-width: 80px; }
tr.mso-entry-editing td:nth-child(7) input,
tr.mso-entry-editing td:nth-child(8) input   { min-width: 60px; }
tr.mso-entry-editing td:nth-child(9) input[name="amount"] { min-width: 70px; }
tr.mso-entry-editing td:nth-child(10) input,
tr.mso-entry-editing td:nth-child(13) input  { min-width: 120px; }
.inline-currency-select { min-width: 58px !important; width: auto !important; margin-top: 3px; }

.freight-edit-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(17, 27, 57, 0.08);
  border-radius: 16px;
  background: #f9faff;
}

.freight-edit-panel h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.freight-edit-table input {
  width: 100%;
  box-sizing: border-box;
}

.freight-edit-table select {
  width: 100%;
  box-sizing: border-box;
}

.freight-edit-table input[type="number"] {
  text-align: right;
}

.freight-edit-description {
  font-size: 13px;
}

.freight-split-modal {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}

.freight-split-panel {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
  display: grid;
  gap: 12px;
}

.freight-split-panel h4 {
  margin: 0;
  font-size: 18px;
}

.freight-split-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.freight-split-toggle {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.freight-split-row {
  display: grid;
  gap: 8px;
}

.freight-split-desc {
  font-size: 13px;
  color: var(--muted);
}

.freight-split-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.freight-split-field input {
  width: 140px;
}

.freight-split-preview,
.freight-split-summary {
  font-size: 13px;
  color: var(--muted);
}

.freight-split-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mso-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mso-expense-form {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.mso-expense-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

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

.mso-share-modal {
  width: min(860px, calc(100vw - 60px));
  max-width: 860px;
}

.mso-share-modal .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

.mso-share-modal .form-grid .form-field {
  height: auto;
  align-self: stretch;
}

@media (max-width: 960px) {
  .tracking-layout {
    grid-template-columns: 1fr;
  }
  .tracking-table td:nth-child(2),
  .tracking-table td:nth-child(3) {
    white-space: normal;
  }
  .tracking-map {
    height: 260px;
  }
  .tracking-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .mso-layout {
    grid-template-columns: 1fr;
  }
  .overview-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .overview-filters .filter-group {
    min-width: 100%;
  }
  .overview-analytics {
    grid-template-columns: 1fr;
  }
  .chart-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .chart-value {
    justify-self: flex-start;
  }
  .analytics-layout {
    grid-template-columns: 1fr;
  }
  .analytics-filters .filter-group {
    min-width: 100%;
  }
  .analytics-detail-grid {
    grid-template-columns: 1fr;
  }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity var(--transition);
  z-index: 10000;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.modal-content {
  background: #fff;
  border-radius: 18px;
  max-width: min(1120px, 95vw);
  width: min(1120px, calc(100vw - 40px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 26px 42px -24px rgba(15, 23, 42, 0.6);
  animation: modalIn 0.3s ease;
}

.modal-content.modal-expanded {
  max-width: min(1900px, 99vw);
  width: min(1900px, calc(100vw - 16px));
  max-height: 95vh;
}

.modal.modal-is-fullscreen {
  padding: 12px 16px;
  align-items: center;
}
.modal.modal-is-fullscreen .modal-content {
  max-width: calc(100vw - 32px);
  width: calc(100vw - 32px);
  max-height: calc(100vh - 24px);
  height: calc(100vh - 24px);
  border-radius: 12px;
}
.modal.modal-is-fullscreen .modal-body {
  max-height: calc(100vh - 80px);
}

.modal-content.modal-wide {
  max-width: min(1240px, 96vw);
  width: min(1240px, calc(100vw - 36px));
}

.modal-header-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin-right: 8px;
  white-space: nowrap;
}
.modal-header-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
}

.modal-body {
  padding: 20px 24px 28px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  color: var(--muted);
  font-size: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: calc(90vh - 96px);
  flex: 0 1 auto;
  position: relative;
  min-height: 0;
  min-width: 0;
}

.modal-content.modal-expanded .modal-body {
  max-height: calc(95vh - 96px);
}
.modal-body .modal-form.wide {
  width: 100%;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.modal-close-confirm {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}

.modal-close-confirm-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
}

.modal-close-confirm-panel h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 18px;
}

.modal-close-confirm-panel p {
  margin: 0 0 18px;
}

.modal-close-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.city-inline-modal {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  z-index: 45;
}

.city-inline-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  width: min(720px, 100%);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.2);
}

@keyframes modalIn {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 1240px) {
  .app-shell {
    grid-template-columns: 240px 1fr;
  }

  .summary-grid,
    .analytics-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

      grid-auto-rows: minmax(0, 1fr);
  }

      min-height: 240px;
  }
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 82px 1fr;
  }

  .sidebar {
    padding: 24px 16px;
    gap: 24px;
  }

  .logo-text,
  .nav-btn-text,
  .sidebar-section h3,
  .sidebar-footer {
    display: none;
  }

  .nav-btn {
    padding: 12px;
    justify-content: center;
    border-radius: 14px;
  }

  .section {
    padding: 20px;
  }

  .split-panel {
    grid-template-columns: 1fr;
  }

  .map-placeholder {
    grid-template-columns: 1fr;
  }

  .analytics-layout {
    grid-template-columns: 1fr;
  }

  .chat-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-pagination-controls {
    width: 100%;
  }

  .chat-page-nav {
    justify-content: space-between;
  }

  .chat-module {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
  }

  .chat-window {
    position: static;
    align-self: stretch;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .sidebar-section:nth-of-type(2),
  .sidebar-section:nth-of-type(3) {
    display: none;
  }

  .main-view {
    margin-top: 0;
  }

  .section-header {
    flex-wrap: wrap;
  }

  .section-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .controls {
    flex-wrap: wrap;
  }

      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .timeline-card {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid.three {
    grid-template-columns: 1fr;
  }

  .characteristics-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {
  .search-field input {
    min-width: 100%;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  table {
    min-width: 720px;
  }
}

/* ── Пустое состояние ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  gap: 8px;
}

.empty-state__icon {
  width: 40px;
  height: 40px;
  color: var(--border);
  margin-bottom: 6px;
}

.empty-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.empty-state__subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ── Пагинация ── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.pagination-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Focus-стили (доступность) ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   Сворачиваемый сайдбар
   ══════════════════════════════════════════════════════════════ */

/* Иконка в nav-btn */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Кнопка сворачивания */
.sidebar-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  transition: var(--transition);
}

/* Текст nav-btn — не переносить */
.nav-btn-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Иконка разворота при свёрнутом состоянии */
.app-shell.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Анимация боковой панели */
.sidebar {
  transition: padding var(--transition);
}

/* ── Свёрнутое состояние ── */
.app-shell.sidebar-collapsed {
  grid-template-columns: 60px 1fr;
}

.app-shell.sidebar-collapsed .sidebar {
  padding: 14px 10px;
  align-items: center;
}

/* Скрытые текстовые элементы */
.app-shell.sidebar-collapsed .logo-text,
.app-shell.sidebar-collapsed .nav-btn-text,
.app-shell.sidebar-collapsed .sidebar-section-title,
.app-shell.sidebar-collapsed .sidebar-footer {
  display: none;
}

/* В свёрнутом виде логотип — вертикально (лого-марка над toggle) */
.app-shell.sidebar-collapsed .logo {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.app-shell.sidebar-collapsed .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
  padding: 4px;
}

/* Кнопка «Новый запрос» — только иконка + */
.app-shell.sidebar-collapsed .sidebar-new-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  min-width: unset;
  border-radius: 12px;
  justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-new-btn .nav-btn-text {
  display: none;
}

/* Nav-кнопки — квадратные, только иконка */
.app-shell.sidebar-collapsed .nav-btn {
  padding: 10px;
  justify-content: center;
  border-radius: 12px;
  position: relative;
}

/* Бейдж — абсолютный в углу иконки */
.app-shell.sidebar-collapsed .nav-btn .nav-badge {
  margin-left: 0;
}

.app-shell.sidebar-collapsed .nav-badge.visible {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  padding: 0 3px;
  line-height: 14px;
}

/* Иконки крупнее в свёрнутом состоянии */
.app-shell.sidebar-collapsed .nav-icon {
  width: 20px;
  height: 20px;
}

/* ── Аудит: шапка и вкладка «История» ── */

.doc-audit-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.doc-audit-header strong {
  color: var(--text);
  font-weight: 600;
}
.doc-audit-header .audit-sep {
  opacity: 0.4;
}

/* Вкладки внутри модала */
.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.modal-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover {
  color: var(--text);
}
.modal-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.modal-tab-panel { display: none; min-width: 0; overflow-x: auto; }
.modal-tab-panel.active { display: block; }

/* Таймлайн событий */
.audit-timeline {
  display: flex;
  flex-direction: column;
}
.audit-event {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 27, 57, 0.06);
  font-size: 13px;
}
.audit-event:last-child {
  border-bottom: none;
}
.audit-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 5px;
  flex-shrink: 0;
}
.audit-event-body {
  flex: 1;
}
.audit-event-action {
  font-weight: 500;
  color: var(--text);
}
.audit-event-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.audit-event-comment {
  font-size: 12px;
  color: var(--text);
  background: var(--surface-alt);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 4px;
}
.audit-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 16px 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   MMD Rates tab + KP Generator
--------------------------------------------------------------------------- */

.mmd-rates-table th,
.mmd-rates-table td {
  white-space: nowrap;
  font-size: 13px;
  padding: 6px 8px;
}

.mmd-row-incomplete {
  background: rgba(255, 200, 0, 0.08);
}

.mmd-comment-cell {
  max-width: 200px;
  white-space: normal !important;
  word-break: break-word;
}
.mmd-comment-truncated {
  cursor: pointer;
}
.mmd-comment-cell.is-expanded .mmd-comment-short {
  display: none;
}
.mmd-comment-cell.is-expanded .mmd-comment-full {
  display: inline !important;
}

.mmd-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}

/* MMD add-rate inline form */
.mmd-add-rate-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mmd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 12px;
}
.mmd-form-grid label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #64748b;
  gap: 3px;
}
.mmd-form-grid label .req { color: #ef4444; }
.mmd-form-grid input,
.mmd-form-grid select,
.mmd-form-grid textarea {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}
.mmd-form-full { grid-column: 1 / -1; }

/* MMD source badges */
.mmd-source-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 500;
}
.mmd-src-messenger { background: #dcfce7; color: #166534; }
.mmd-src-email { background: #dbeafe; color: #1e40af; }
.mmd-src-telegram { background: #ede9fe; color: #5b21b6; }
.mmd-src-other { background: #f1f5f9; color: #475569; }

/* KP Generator two-panel layout */
.modal-body.kp-modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(90vh - 96px);
  padding: 16px 20px 16px;
  gap: 0;
}

.kp-generator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.kp-left-panel {
  overflow-y: auto;
  padding-right: 8px;
  min-height: 0;
}

.kp-left-panel h4,
.kp-right-panel h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.kp-rates-summary {
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp-rate-block {
  background: var(--surface-alt, #f5f6fa);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

.kp-rate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.kp-rate-cost {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.kp-rate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.kp-rate-grid .form-field,
.kp-rate-sell-row .form-field {
  margin: 0;
}

.kp-rate-grid .form-field label,
.kp-rate-sell-row .form-field label {
  font-size: 11px;
  color: var(--muted);
}

.kp-rate-grid .form-field input,
.kp-rate-sell-row .form-field input {
  font-size: 12px;
  padding: 5px 8px;
}

.kp-rate-sell-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.kp-rate-sell-row .kp-rate-sell {
  font-weight: 600;
}

.kp-rate-sell.is-empty {
  border-color: #e53935;
  background: #fff5f5;
}

.kp-needs-choice {
  border-color: #e53935;
  background: #fff5f5;
}

.kp-history-block {
  margin-top: 16px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}
.kp-history-header {
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  padding: 0 0 6px;
}
.kp-history-block .kp-sent-history {
  margin-top: 0;
  border-top: none;
  padding-top: 6px;
}
.kp-sent-history {
  margin-top: 16px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}
.kp-sent-history summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: #475569;
}
.kp-sent-text {
  white-space: pre-wrap;
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  font-family: inherit;
}
.kp-badge {
  font-size: 11px;
  color: #64748b;
  text-align: right;
  padding: 4px 0 8px;
}

.kp-presets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-alt, #f5f6fa);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.kp-presets-row .form-field {
  margin: 0;
}

.kp-presets-row .form-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.kp-presets-row .form-field select {
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
}

.kp-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
}

.kp-fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 4px;
}

/* Two-column checkbox grid for "Ставка включает" / "В ставку не включено" */
.kp-fieldset--grid > .mmd-check-label {
  display: inline-flex;
  width: calc(50% - 4px);
  box-sizing: border-box;
  vertical-align: top;
  padding: 3px 6px 3px 0;
}
@media (max-width: 720px) {
  .kp-fieldset--grid > .mmd-check-label {
    width: 100%;
  }
}

.kp-right-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.kp-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.kp-right-header h4 {
  margin: 0;
}

.kp-edit-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

#kp-reset-btn.kp-reset-needed {
  background: #fff4d6;
  border-color: #d6a800;
  color: #6b4d00;
  animation: kp-reset-pulse 1.6s ease-in-out infinite;
}

@keyframes kp-reset-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 168, 0, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(214, 168, 0, 0); }
}

.kp-preview-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--surface-alt, #f5f6fa);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-y: auto;
  font-family: monospace;
  resize: none;
  color: var(--text);
}

.kp-preview-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.kp-footer {
  display: flex;
  align-items: center;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .kp-generator-layout {
    grid-template-columns: 1fr;
  }
  .kp-rate-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Loadings Analytics (Аналитика погрузок) ──────────────────────────── */

/* View toggle */
.loadings-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.loadings-view-btn {
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.loadings-view-btn.active {
  background: var(--primary);
  color: #fff;
}
.loadings-view-btn:not(.active):hover {
  background: var(--surface-alt);
}

/* Scoreboard (Табло) */
.loadings-scoreboard {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 300px;
}
.loadings-scoreboard-filters {
  flex-shrink: 0;
}
.loadings-scoreboard-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}
.loadings-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  padding: 32px;
}
.loadings-card--requests {
  background: rgba(240, 68, 56, 0.07);
  border: 2px solid rgba(240, 68, 56, 0.18);
}
.loadings-card--requests .loadings-card-value {
  color: #dc2626;
}
.loadings-card--shipments {
  background: rgba(22, 163, 74, 0.07);
  border: 2px solid rgba(22, 163, 74, 0.18);
}
.loadings-card--shipments .loadings-card-value {
  color: #16a34a;
}
.loadings-card-value {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.1;
}
.loadings-card-label {
  font-size: 18px;
  color: var(--muted);
  margin-top: 12px;
}

/* Filters */
.loadings-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
}

/* Matrix table */
.loadings-details {
  margin-top: 4px;
}
.loadings-matrix-wrapper {
  margin-top: 8px;
}
.loadings-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.loadings-table {
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
  min-width: 100%;
}
.loadings-table th,
.loadings-table td {
  padding: 6px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.loadings-table th {
  background: var(--surface-alt);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.loadings-name-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left !important;
  min-width: 180px;
  font-weight: 500;
  border-right: 2px solid var(--border-strong);
}
thead .loadings-name-col {
  z-index: 3;
  background: var(--surface-alt);
}
.loadings-holiday {
  background: rgba(240, 68, 56, 0.07);
}
.loadings-weekend {
  background: rgba(107, 115, 133, 0.05);
}
.loadings-nodate-col {
  background: var(--warning-soft);
  border-left: 2px solid var(--border-strong);
}
.loadings-total-col {
  border-left: 2px solid var(--border-strong);
  background: var(--primary-soft);
}
.loadings-totals-row td {
  border-top: 2px solid var(--border-strong);
  background: var(--surface-alt);
}
.loadings-totals-row .loadings-holiday,
.loadings-totals-row .loadings-weekend {
  background: var(--surface-alt);
}
.loadings-totals-row .loadings-nodate-col {
  background: var(--surface-alt);
}
.loadings-totals-row .loadings-total-col {
  background: var(--surface-alt);
}

/* Clickable cells */
.loadings-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.loadings-clickable:hover {
  background: var(--primary-soft) !important;
  text-decoration: underline;
}

/* Cell details panel */
.loadings-cell-details {
  margin-top: 12px;
}
.loadings-details-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  font-size: 14px;
}
.loadings-details-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.loadings-details-close:hover {
  color: var(--text);
}
.loadings-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.loadings-details-table th,
.loadings-details-table td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.loadings-details-table th {
  background: var(--surface);
  font-weight: 600;
}
.loadings-details-table tr:last-child td {
  border-bottom: none;
}

/* Multi-select employee filter */
.loadings-multiselect {
  position: relative;
}
.loadings-ms-btn {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-width: 160px;
  text-align: left;
}
.loadings-ms-btn:hover {
  border-color: var(--primary);
}
.loadings-ms-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  margin-top: 4px;
}
.loadings-ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.loadings-ms-item:hover {
  background: var(--surface-alt);
}
.loadings-ms-all {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  padding-bottom: 8px;
}

@media (max-width: 768px) {
  .loadings-scoreboard {
    height: auto;
  }
  .loadings-scoreboard-cards {
    grid-template-columns: 1fr;
  }
  .loadings-card {
    min-height: 200px;
  }
}

/* ── Analytics Period Buttons ─────────────────────────────────────────── */

.analytics-period-btns {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.period-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.period-btn:last-child { border-right: none; }
.period-btn:hover { background: var(--surface-alt); }
.period-btn.active {
  background: var(--accent);
  color: #fff;
}
#analytics-date-from,
#analytics-date-to {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  max-width: 150px;
}

#ignored-drilldown {
  margin-bottom: 16px;
}
.ignored-drilldown-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
}
#ignored-drilldown .analytics-table {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#ignored-by-route .chart-row:hover {
  background: var(--surface-alt);
}

/* ── Advanced Analytics Tabs ──────────────────────────────────────────── */

.analytics-tab-bar {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.analytics-tab {
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.analytics-tab.active {
  background: var(--primary);
  color: #fff;
}
.analytics-tab:not(.active):hover {
  background: var(--surface-alt);
}
.analytics-tab-content {
  display: none;
}
.analytics-tab-content.active {
  display: block;
}

/* Sortable analytics table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.analytics-table th,
.analytics-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.analytics-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.analytics-table th:hover {
  color: var(--text);
}
.analytics-table th .sort-arrow {
  margin-left: 4px;
  opacity: 0.4;
}
.analytics-table th .sort-arrow.active {
  opacity: 1;
  color: var(--primary);
}
.analytics-table th.col-odd,
.analytics-table td.col-odd {
  background: rgba(0, 0, 0, 0.025);
}
.analytics-table tbody tr:hover td {
  background: var(--surface-alt);
}
.analytics-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.analytics-table th[title] {
  cursor: help;
}

/* Funnel chart */
.funnel-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.funnel-bar .funnel-label {
  width: 160px;
  font-size: 13px;
  flex-shrink: 0;
}
.funnel-bar .funnel-track {
  flex: 1;
  height: 28px;
  background: var(--surface-alt);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.funnel-bar .funnel-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 6px;
  transition: width 0.3s ease;
  min-width: 2px;
}
.funnel-bar .funnel-value {
  width: 100px;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  padding-left: 12px;
}
.funnel-bar .funnel-pct {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Analytics empty state */
.analytics-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 768px) {
  .analytics-tab-bar {
    flex-wrap: wrap;
  }
  .analytics-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Transit-time in-progress indicator (gray + clock icon) — shown when the shipment is still en route. */
.transit-in-progress {
  color: var(--muted);
  font-style: italic;
}
.transit-in-progress::before {
  content: "⏱ ";
  font-style: normal;
}

/* Shipment journal table — fixed layout so user-set column widths are honored.
   width: max-content lets the table grow with the sum of column widths (rather
   than stretching to 100% of the wrapper), so resizing one column moves only
   that column. The wrapper provides horizontal scrolling when needed. */
.shipment-list-wrapper {
  overflow-x: auto;
}
.shipment-list-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}
.shipment-list-table th {
  position: relative;
  overflow: hidden;
  /* Allow header labels to wrap onto multiple lines so columns can be
     resized below the single-line text width. */
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  vertical-align: bottom;
  min-width: 60px;
}
.shipment-list-table th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.shipment-list-table th.is-sortable:hover {
  color: var(--primary);
}
.shipment-list-table th .sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.35;
}
.shipment-list-table th .sort-arrow.active {
  opacity: 1;
  color: var(--primary);
}
/* Cell wrapper — display:-webkit-box must go on an INNER div, not on the
   <td> itself (overriding display on <td> breaks the table layout). */
.shipment-list-table td {
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  min-width: 60px;
  vertical-align: top;
}
.shipment-cell-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Column resize handle — narrow strip on the right edge of each <th>; drag to resize. */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
}
.col-resize-handle:hover,
.col-resize-handle.is-resizing {
  background: rgba(99, 102, 241, 0.3);
}
.shipment-list-table.is-resizing {
  cursor: col-resize;
  user-select: none;
}

/* — Phase 1: invoice number in shipment modal header — */
.shipment-modal-invoice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.shipment-modal-invoice input {
  flex: 1;
  min-width: 100px;
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 4px;
}

/* — Phase 1: tracking section — MRN required toggle + input — */
.tracking-options {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-radius: 6px;
  flex-wrap: wrap;
}
.tracking-mrn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.tracking-mrn-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}
.tracking-mrn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.tracking-mrn input {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 4px;
}

/* — Phase 1: relay rendering for shipment units table — */
.relay-leg-label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.relay-arrival-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  vertical-align: middle;
  cursor: help;
}
.shipment-unit-row.is-relay-leg td {
  border-left: 2px solid rgba(99, 102, 241, 0.2);
}
.shipment-unit-row.is-relay-leg:not(:last-child) td {
  border-bottom: 1px dashed rgba(99, 102, 241, 0.25);
}

/* Inline number input — same look as inline-select */
.inline-input {
  padding: 3px 6px;
  font-size: 13px;
  border: 1px solid rgba(17, 27, 57, 0.12);
  border-radius: 4px;
  width: 80px;
}

/* MRN customs declaration number — 18 chars; fit them all + monospace for legibility. */
.inline-input--mrn {
  width: 210px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

/* MRN-required toggle inside Details dl (replaces .switch from tracking section) */
.dl-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.dl-inline-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--primary);
}

/* Read-only derived status badge for each shipment unit row */
.unit-derived-status {
  display: inline-block;
  font-size: 11px;
  white-space: nowrap;
}

/* Per-TPS comment surfaced in tracking feed group header (fallback when no entries) */
.tracking-group-comment {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: var(--surface-alt);
  border-left: 3px solid var(--primary);
  font-size: 12px;
  color: var(--text);
  border-radius: 4px;
}

/* Operation text — the headline of a tracking entry (user-typed event like
   "выгрузка", "перегруз"). Replaces the older "Обновление" placeholder. */
.tracking-entry-operation {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-alt);
  border-left: 3px solid var(--primary);
  border-radius: 3px;
  display: inline-block;
}

/* Per-entry comment under the latest location update — tied to the location, not standalone */
.tracking-entry-comment {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--text);
  background: var(--surface-alt);
  border-left: 2px solid var(--primary);
  border-radius: 3px;
  display: inline-block;
}

/* Bottom-of-entry meta row (source/origin), small and de-emphasized */
.tracking-entry-bottom {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(17, 27, 57, 0.08);
  font-size: 11px;
  color: var(--muted);
}
.tracking-entry-bottom .tracking-entry-source {
  font-size: 11px;
  color: var(--muted);
}

/* ─── Shipment tags ─────────────────────────────────────────────────────── */
/* Always-visible strip between header and details grid */
.shipment-modal-tags-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.shipment-modal-tags-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shipment-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.shipment-tags-empty {
  color: var(--muted);
}
.shipment-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
  width: max-content;
  max-width: 160px;
  min-width: 0;
}
.shipment-tag-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
.shipment-tag-system {
  font-style: italic;
}
.shipment-tag-remove {
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shipment-tag-remove:hover {
  background: rgba(255, 255, 255, 0.45);
}
.shipment-tag-add {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  cursor: pointer;
}
.shipment-tag-add:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* In-table chip variant — tighter and limited width */
.shipment-tags-cell {
  gap: 3px;
}
.shipment-tags-cell .shipment-tag {
  max-width: 90px;
  font-size: 10px;
  padding: 0 5px 0 7px;
  line-height: 1.4;
}
.shipment-tag-more {
  background: var(--surface-alt) !important;
  color: var(--muted) !important;
  font-weight: 600;
  cursor: default;
}

/* Popover picker */
.shipment-tag-picker {
  width: 260px;
  max-height: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(17, 27, 57, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shipment-tag-picker-search {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}
.shipment-tag-picker-list {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
}
.shipment-tag-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.shipment-tag-picker-item:hover {
  background: var(--surface-alt);
}
.shipment-tag-picker-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shipment-tag-picker-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 8px;
  text-align: center;
}

/* ── Client card (directory «Клиенты» view) ─────────────────────────────── */
.client-name-link {
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.client-name-link:hover { color: var(--accent); }

.client-card-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.client-card-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .client-card-cols { grid-template-columns: 1fr; }
}
.client-card-h {
  font-size: 15px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.client-card-history { margin-top: 20px; }

/* Documents */
.client-doc-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--surface-alt);
  border-radius: 8px;
}
.client-doc-upload input[type="text"] { flex: 1 1 180px; }
.client-docs-subh {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 0 6px;
}
.client-doc-list { list-style: none; margin: 0; padding: 0; }
.client-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.client-doc-name { font-weight: 600; text-decoration: none; }
.client-doc-name:hover { text-decoration: underline; }
.client-doc-desc { font-size: 13px; color: var(--text); margin: 2px 0; }
.client-doc-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* History */
.client-history-list { list-style: none; margin: 0; padding: 0; }
.client-history-item {
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  margin-bottom: 6px;
}
.client-history-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.client-history-who { font-weight: 600; color: var(--text); }
.client-history-desc { font-size: 13px; margin-top: 2px; }
.hist-old { color: var(--danger); text-decoration: line-through; }
.hist-new { color: var(--accent); font-weight: 600; }

/* Sales mismatch warning banner (request details) */
.sales-mismatch-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
  padding: 8px 12px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: 8px;
  font-size: 13px;
}
.sales-mismatch-actions { display: flex; gap: 10px; }