@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --bg: #080808;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-soft: rgba(255, 255, 255, 0.05);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --red: #c2352b;
  --red-2: #d6463d;
  --green: rgba(54, 167, 84, 0.22);
  --yellow: rgba(214, 158, 46, 0.22);
  --red-badge: rgba(194, 53, 43, 0.22);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top center, rgba(196, 53, 43, 0.08), transparent 28%),
    linear-gradient(180deg, #080808 0%, #0b0b0b 40%, #111 100%);
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 14px;
}

body {
  overflow-x: hidden;
}

.crm-layout {
  display: block;
  min-height: 100vh;
  position: relative;
}

.crm-main {
  min-width: 0;
}

.crm-container {
  padding: 12px 10px 18px;
}

.crm-header,
.filters-section,
.attention-section {
  margin-top: 8px;
  margin-bottom: 18px;
  padding: 12px 18px;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
    rgba(10,10,10,0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.crm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.crm-header h1 {
  margin: 0;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.crm-breadcrumb {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.crm-breadcrumb a {
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}

.crm-breadcrumb span {
  margin-left: 6px;
}
.crm-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.add-btn,
.modal button:not(.step-dot):not(.cs-trigger):not(.cs-option),
.panel-action-btn,
.filter-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, var(--red-2), var(--red));
  box-shadow: 0 16px 40px rgba(194, 53, 43, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.add-btn:hover,
.modal button:not(.step-dot):not(.cs-trigger):not(.cs-option):hover,
.panel-action-btn:hover,
.filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(194, 53, 43, 0.34);
  filter: brightness(1.04);
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title-row h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  background: rgba(255,255,255,0.08);
  box-shadow: none;
}

.filter-btn.active {
  background: linear-gradient(180deg, var(--red-2), var(--red));
  box-shadow: 0 16px 40px rgba(194, 53, 43, 0.28);
}

.name-col-search {
  display: inline-block;
  width: 180px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text, #fff);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}

.name-col-search::placeholder {
  color: rgba(255,255,255,0.35);
}

.name-col-search:focus {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
}
.col-sort--name {
  justify-content: space-between;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}

.col-sort__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
}

.name-col-search--inline {
  width: 0;
  flex: 1 1 0;
  min-width: 40px;
  height: 28px;
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.07);
}

.name-col-search--inline:focus {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
}

.attention-count {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(194, 53, 43, 0.16);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
}

.attention-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.attention-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attention-group__header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  padding: 0 4px;
}

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

.attention-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  padding: 11px 16px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.attention-item:hover {
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.12);
}

.attention-item__name {
  font-size: 15px;
  font-weight: 700;
}

.attention-item__reason {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

.crm-table-wrap {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    rgba(8,8,8,0.4);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  scroll-behavior: smooth;
}
.crm-table-wrap::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.crm-table {
  width: 100%;
}
.crm-table.crm-table--lesson-mode .crm-head {
  box-shadow: inset 0 -1px 0 rgba(68, 152, 90, 0.18);
}
.crm-table.crm-table--single-mode .crm-head {
  box-shadow: inset 0 -1px 0 rgba(194, 151, 53, 0.2);
}
.crm-table.crm-table--rental-mode .crm-head {
  box-shadow: inset 0 -1px 0 rgba(212, 167, 82, 0.24);
}
.crm-table-wrap {
  cursor: grab;
}

.crm-table-wrap:active {
  cursor: grabbing;
}

.crm-row {
  display: grid;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--stroke-soft);
  transition: background 0.2s ease;
}


.crm-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(14,14,14,0.94);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.crm-row > div {
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  border-right: 1px solid rgba(255,255,255,0.04);
  word-break: break-word;
  font-size: 13px;
  line-height: 1.3;
  display: flex;
  align-items: center;
}

.col-sort {
  cursor: pointer;
  user-select: none;
  gap: 5px;
  transition: color 0.15s ease;
}

.col-sort:hover {
  color: #fff;
}

.col-sort__icon {
  font-size: 10px;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.col-sort:hover .col-sort__icon,
.col-sort--active .col-sort__icon {
  opacity: 1;
}

.col-sort--active {
  color: #5de07a;
}

.col-sort--active .col-sort__icon {
  color: #5de07a;
}

.crm-row > div:last-child {
  border-right: none;
}

.tariff-col {
  position: relative;
  overflow: hidden;
}


.tariff-cell-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tariff-col .action-btn--tariff-switch {
  position: absolute;
  inset: 4px 6px;
  width: auto;
  min-width: unset;
  height: auto;
  border-radius: 12px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(18, 58, 28, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(54, 167, 84, 0.45);
  color: rgba(120, 220, 140, 0.95);
  opacity: 0;
  transition: opacity 0.15s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tariff-col:hover .action-btn--tariff-switch {
  opacity: 1;
}

.crm-head > div {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.crm-row:not(.crm-head) {
  cursor: pointer;
}

.crm-row:not(.crm-head):hover {
  background: rgba(255, 255, 255, 0.035);
}

.crm-row.active {
  background:
    linear-gradient(90deg, rgba(194,53,43,0.16), rgba(194,53,43,0.05)),
    rgba(255,255,255,0.02);
}

.crm-row--archived {
  opacity: 0.72;
}

.crm-row--product-inactive {
  opacity: 0.45;
  filter: grayscale(0.85);
  border-left-color: rgba(255,255,255,0.08) !important;
}
.crm-row--product-inactive:hover {
  opacity: 0.6;
}

.crm-row--today {
  background: linear-gradient(90deg, rgba(194,53,43,0.13), rgba(194,53,43,0.04));
  box-shadow: inset 2px 0 0 rgba(194,53,43,0.5);
}
.crm-row--today:hover {
  background: linear-gradient(90deg, rgba(194,53,43,0.18), rgba(194,53,43,0.07));
}

.crm-row:not(.crm-head) > div:first-child {
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.client-name-with-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.client-level-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(240, 240, 240, 0.9);
}

.client-level-mark--panel {
  font-size: 0.9em;
  vertical-align: middle;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
  font-weight: 700;
  white-space: nowrap;
}

.green { background: var(--green); }
.yellow { background: var(--yellow); }
.red { background: var(--red-badge); }

.action-group {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.lesson-action-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 36px;
}

.lesson-action-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
  text-align: center;
}

.lesson-action-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.lesson-action-split .action-btn--lesson-step {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: background 0.16s ease, transform 0.12s ease, filter 0.16s ease;
}

.lesson-action-split .action-btn--lesson-step:first-child {
  border-right: 1px solid rgba(255,255,255,0.08);
}

.lesson-action-split .action-btn--lesson-step:hover {
  background: rgba(255,255,255,0.08);
}

.lesson-action-split .action-btn--lesson-step:active {
  transform: scale(0.96);
  filter: brightness(1.08);
}

.lessons-hover-cell {
  position: relative;
  overflow: hidden;
}

.lessons-left-value {
  position: relative;
  z-index: 1;
  transition: opacity 0.18s ease;
}

.lessons-hover-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  background: rgba(7, 8, 11, 0.46);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.lessons-hover-overlay .action-btn--lesson-step {
  border: 0;
  border-radius: 0;
  min-height: 100%;
  background: transparent;
  font-weight: 800;
}

.lessons-hover-overlay .action-btn--lesson-step:first-child {
  border-right: 1px solid rgba(255,255,255,0.12);
}

.lessons-hover-overlay .action-btn--lesson-step:hover {
  background: rgba(255,255,255,0.09);
}

.lessons-hover-overlay .action-btn--lesson-step:active {
  transform: scale(0.98);
}

.lessons-hover-cell:hover .lessons-hover-overlay {
  opacity: 1;
  pointer-events: auto;
}

.lessons-hover-cell:hover .lessons-left-value {
  opacity: 0.42;
}

.lessons-complete-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.lessons-edit-cell {
  cursor: pointer;
}

.lessons-complete-cell .lessons-left-value {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lessons-complete-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(6px);
  color: rgba(255,255,255,0.96);
  background:
    linear-gradient(180deg, rgba(54,167,84,0.24), rgba(31,113,58,0.18)),
    rgba(8, 18, 12, 0.54);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lessons-complete-cell:hover {
  border-color: rgba(72, 210, 116, 0.48);
  box-shadow: 0 10px 30px rgba(54,167,84,0.14);
}

.lessons-complete-cell:hover .lessons-left-value {
  opacity: 0.34;
  transform: translateY(-2px) scale(1.04);
}

.lessons-complete-cell:hover .lessons-complete-overlay {
  opacity: 1;
  transform: translateY(0);
}

.action-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.action-btn--pending {
  background: linear-gradient(180deg, rgba(54, 167, 84, 0.95), rgba(35, 122, 61, 0.95));
  border-color: rgba(102, 220, 144, 0.45);
  box-shadow: 0 8px 20px rgba(54, 167, 84, 0.25);
}

.action-btn--completed {
  background: linear-gradient(180deg, rgba(214, 70, 61, 0.95), rgba(170, 45, 37, 0.95));
  border-color: rgba(255, 128, 120, 0.4);
  box-shadow: 0 8px 20px rgba(194, 53, 43, 0.25);
}

.action-btn--completed[disabled] {
  cursor: default;
  opacity: 0.95;
}

.client-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 430px;
  height: 100vh;
  padding: 22px;
  border-left: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012)),
    rgba(8,8,8,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.02),
    -20px 0 60px rgba(0,0,0,0.35);
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  z-index: 550;
}

.client-panel.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.client-panel__empty,
.client-panel__content {
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  box-shadow: var(--shadow);
}

.client-panel__empty h2,
.client-panel__content h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.client-panel__empty p {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.client-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.client-panel__header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.panel-close-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.panel-close-btn:hover {
  background: rgba(194, 53, 43, 0.18);
  border-color: rgba(194, 53, 43, 0.45);
  box-shadow: 0 0 0 1px rgba(194, 53, 43, 0.2), 0 8px 18px rgba(194, 53, 43, 0.2);
  transform: translateY(-1px);
}

.panel-close-btn:active {
  transform: translateY(0);
}

.panel-section {
  margin-bottom: 18px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--stroke-soft);
}

.panel-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.panel-section-header h3 {
  margin: 0;
}

.panel-del-product-btn {
  background: transparent;
  border: 1px solid rgba(200, 60, 50, 0.35);
  border-radius: 6px;
  color: rgba(200, 60, 50, 0.6);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.panel-del-product-btn:hover {
  background: rgba(180, 30, 20, 0.25);
  border-color: rgba(220, 70, 60, 0.7);
  color: rgba(255, 90, 80, 1);
}
.panel-del-product-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.panel-section h3 {
  margin: 0 0 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.panel-grid div {
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 66px;
}

.panel-grid span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-grid strong {
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  display: block;
  min-width: 0;
}

.panel-section--product .panel-grid div {
  padding: 0;
  border: none;
  background: transparent;
  min-width: 0;
  overflow: hidden;
}

.panel-section--product .panel-grid span {
  margin-bottom: 2px;
}

.panel-section--product .cs-trigger {
  min-height: 50px;
  min-width: 0;
  overflow: hidden;
}

.panel-section--product .cs-trigger .cs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.panel-section--product .cs-wrap {
  min-width: 0;
  overflow: hidden;
}

.panel-actions {
  margin-top: 18px;
}

.panel-actions--stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
}

.history-item__title {
  font-weight: 700;
  margin-bottom: 4px;
}

.history-item__subtitle {
  color: rgba(255,255,255,0.72);
  margin-bottom: 8px;
  font-size: 14px;
}

.history-item__meta {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

/* ─── Inline editable panel fields ─────────────────────────────────────────── */
.panel-editable {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  position: relative;
}
.panel-editable:hover {
  background: rgba(255,255,255,0.06);
}
.panel-editable::after {
  content: " ✏";
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
  color: rgba(255,255,255,0.5);
}
.panel-editable:hover::after {
  opacity: 1;
}

.panel-editable[data-editing="1"] {
  background: transparent !important;
}

.panel-editable[data-editing="1"]::after {
  display: none;
}

.panel-grid div:has(> strong[data-editing="1"]) {
  background: transparent !important;
  border-color: transparent !important;
  padding: 4px 0 !important;
  min-height: unset !important;
}

.panel-editable .cs-wrap {
  width: 100%;
}

.panel-editable .cs-trigger {
  min-height: 50px;
}
.panel-editable-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  padding: 3px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.panel-editable-input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
}

@keyframes requiredBlink {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(214, 70, 61, 0);
    border-color: rgba(255,255,255,0.16);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(214, 70, 61, 0.32);
    border-color: rgba(214, 70, 61, 0.92);
  }
}

.required-blink {
  animation: requiredBlink 0.28s ease-in-out var(--required-blink-pulses, 3);
}

/* ─── History item with delete button ──────────────────────────────────────── */
.history-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.history-item__header > div {
  flex: 1;
  min-width: 0;
}
.history-item__del-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.25);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: -2px;
}
.history-item__del-btn:hover {
  background: rgba(214,70,61,0.2);
  color: rgba(214,70,61,0.9);
}

/* ─── Schedule edit form extras ────────────────────────────────────────────── */
.day-modal-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-modal-edit-fields label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
  display: block;
}
.day-modal-edit-fields input,
.day-modal-edit-fields select,
.day-modal-edit-fields textarea {
  width: 100%;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

#panelProductSelect {
  width: 100%;
}

.panel-product-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.panel-product-delete-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(194, 53, 43, 0.35);
  background: rgba(194, 53, 43, 0.12);
  color: #ffd8d2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}

.panel-product-delete-btn:hover {
  background: rgba(194, 53, 43, 0.2);
  border-color: rgba(194, 53, 43, 0.5);
}

.panel-product-delete-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.panel-product-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cs-check {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(90, 215, 125, 0.95);
  font-weight: 700;
  flex-shrink: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.72);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal.show {
  display: flex;
}

/* Скрываем верхний тулбар, пока открыта модалка "Добавить клиента" — освобождает место и убирает наслоение поверх затемнения */
body:has(#modal.show) #dbToolbar { display: none; }

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-content {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    rgba(13,13,13,0.97);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow:
    0 32px 90px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  box-sizing: border-box;
}

.modal-content--wide {
  max-width: 900px;
  padding: 24px 28px;
}

/* Компактный вертикальный ритм для модалки "Добавить клиента" */
#modal .modal-content { gap: 14px; }

.action-modal-box {
  max-width: 760px;
}

.modal-content h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 20px;
}

.modal-content h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
  border-radius: 2px;
}

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

/* Единый размер всех селекторов внутри модальных форм */
.modal-content .form-grid .cs-wrap,
.modal-content .form-grid--action .cs-wrap {
  width: 100%;
}

.modal-content .form-grid .cs-trigger,
.modal-content .form-grid--action .cs-trigger {
  min-height: 54px !important;
  height: 54px;
  padding: 13px 42px 13px 14px !important;
  font-size: 14px !important;
  border-radius: 14px !important;
  box-sizing: border-box;
}

.form-grid--action {
  grid-template-columns: repeat(2, 1fr);
}

.rental-duration-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rental-room-select {
  grid-column: 1 / -1;
  min-height: 54px;
  padding: 13px 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.07);
  color: #fff;
  border-radius: 14px;
  font-size: 14px;
  font-family: inherit;
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
}

.rental-rate-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
}

.rental-rate-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  user-select: none;
}

.rental-rate-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════ */

.form-grid input,
.form-grid select,
.form-grid textarea {
  min-height: 54px;
  padding: 13px 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.07);
  color: #fff;
  border-radius: 14px;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
  resize: vertical;
}

/* Hide native select — the custom component takes over */
.form-grid select {
  display: none;
}

.form-grid input:hover,
.form-grid textarea:hover {
  border-color: rgba(255,255,255,0.13);
  background: rgba(0,0,0,0.6);
}

.form-grid input:focus,
.form-grid textarea:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.65);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

.form-grid textarea::placeholder,
.form-grid input::placeholder    { color: rgba(255,255,255,0.4); }

.form-grid .full-width-field { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════
   Карточная группировка полей формы (как в карточке клиента)
   ═══════════════════════════════════════════════ */
.modal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.modal-card-header h2 { margin: 0; }

.cm-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.32);
  font-weight: 600;
  margin: 12px 2px 6px;
}
.cm-section-title:first-child { margin-top: 0; }

.cm-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.cm-field--full { grid-column: 1 / -1; }
.cm-field--center { justify-content: center; }

.cm-field__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.cm-field__icon { font-size: 12px; line-height: 1; flex-shrink: 0; }

.cm-edit-control {
  width: 100%;
  min-height: 32px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  outline: none;
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cm-edit-control::placeholder { color: rgba(255,255,255,0.35); }
.cm-edit-control:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.28);
}
.cm-edit-control:focus {
  border-color: rgba(194,53,43,0.6);
  box-shadow: 0 0 0 3px rgba(194,53,43,0.12);
}
textarea.cm-edit-control { min-height: 52px; }

/* Нативный select скрыт — поверх работает custom-select */
.cm-field select { display: none; }

.cm-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  user-select: none;
}
.cm-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--red);
  cursor: pointer;
}
.cm-waitlist-wrap { display: flex; padding: 0; border: 0; background: none; }
.cm-waitlist-wrap .cm-toggle--waitlist {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-height: 0 !important;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 1;
}
.cm-waitlist-wrap .cm-toggle--waitlist span {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  transition: color 0.15s;
}
.cm-waitlist-wrap .cm-toggle--waitlist:hover span,
.cm-waitlist-wrap .cm-toggle--waitlist:has(input:checked) span { color: rgba(255,214,130,0.95); }
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"],
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:hover,
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:focus,
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex-shrink: 0;
  width: 15px !important;
  height: 15px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid rgba(214,158,46,0.55) !important;
  border-radius: 4px !important;
  background: rgba(214,158,46,0.06) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.15s, border-color 0.15s;
}
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:hover { border-color: rgba(214,158,46,0.9) !important; }
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:checked {
  background: rgba(214,158,46,0.95) !important;
  border-color: rgba(214,158,46,0.95) !important;
}
.cm-waitlist-wrap .cm-toggle--waitlist input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #1a1204;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Компактный вид custom-select внутри карточных полей модалки клиента */
.modal-content--wide .cm-field .cs-wrap { width: 100%; }
.modal-content--wide .cm-field .cs-trigger {
  width: 100%;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 30px 0 10px !important;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.92) !important;
  font: inherit !important;
  font-size: 13px !important;
}
.modal-content--wide .cm-field .cs-trigger:hover {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.28) !important;
}
.modal-content--wide .cm-field .cs-wrap--open .cs-trigger,
.modal-content--wide .cm-field .cs-trigger:focus-visible {
  border-color: rgba(194,53,43,0.6) !important;
  box-shadow: 0 0 0 3px rgba(194,53,43,0.12) !important;
}
.modal-content--wide .cm-field .cs-trigger .cs-value,
.modal-content--wide .cm-field .cs-trigger .cs-label,
.modal-content--wide .cm-field .cs-trigger .cs-placeholder {
  font-size: 13px !important;
  color: rgba(255,255,255,0.9) !important;
}
.modal-content--wide .cm-field .cs-trigger--empty .cs-placeholder {
  color: rgba(255,255,255,0.38) !important;
}
.modal-content--wide .cm-field .cs-trigger .cs-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 12px;
}
.modal-content--wide .cm-field .cs-trigger .cs-chevron { right: 10px; opacity: 0.72; }
/* ═══════════════════════════════════════════════════════════════
   CUSTOM SELECT COMPONENT
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper — takes the native select's slot in the grid */
.cs-wrap {
  position: relative;
  min-width: 0;
}

/* Trigger button */
.cs-trigger {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 13px 42px 13px 14px;
  background: rgba(0,0,0,0.5) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  transform: none !important;
  filter: none !important;
}

.cs-trigger:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(0,0,0,0.62) !important;
  box-shadow: none !important;
  transform: none !important;
}

.cs-trigger:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05) !important;
}

.cs-wrap--open .cs-trigger {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.68) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) !important;
}

.cs-trigger--empty .cs-placeholder {
  color: rgba(255,255,255,0.38);
}

.cs-trigger--disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

/* Search input — overlays the trigger; revealed via double-click (see .cs-wrap--searching) */
.cs-search-input {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 13px 14px;
  background: rgba(0,0,0,0.68) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04) !important;
}

.cs-search-input::placeholder {
  color: rgba(255,255,255,0.38);
}

.cs-search-input:focus {
  outline: none;
}

.cs-wrap--searching .cs-trigger {
  visibility: hidden;
}

.cs-wrap--searching .cs-search-input {
  visibility: visible;
  pointer-events: auto;
}

/* "Nothing found" state inside the dropdown portal while searching */
.cs-empty-state {
  padding: 14px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  text-align: center;
}

/* Chevron icon inside trigger */
.cs-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.18s ease;
  pointer-events: none;
}

.cs-wrap--open .cs-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* Option icon badge */
.cs-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.cs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-multi-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.cs-multi-badges .cs-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 12px;
}

/* ─── Portal dropdown ────────────────────────────────────────── */
.cs-dropdown-portal {
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
    rgba(18,18,18,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;

  /* animate in */
  transform-origin: top center;
  animation: none;
}

.cs-dropdown-portal--open {
  display: block;
  animation: csDropIn 0.18s ease forwards;
}

@keyframes csDropIn {
  from { opacity: 0; transform: scaleY(0.92) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1)    translateY(0);    }
}

/* ─── Option buttons ─────────────────────────────────────────── */
.cs-option {
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.13s ease, color 0.13s ease;
}

.cs-option .cs-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-option:last-child { border-bottom: none; }

.cs-option:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.cs-option--active {
  background: rgba(194,53,43,0.12);
  color: #fff;
}

.cs-option--active .cs-label {
  font-weight: 600;
}

.cs-option--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: transparent !important;
  color: rgba(255,255,255,0.5);
}

/* Advance amount field — appears dynamically when Аванс is selected */
.advance-field {
  border-color: rgba(214, 158, 46, 0.28) !important;
}
.advance-field:focus {
  border-color: rgba(214, 158, 46, 0.5) !important;
}

/* Debt clear button */
.panel-action-btn--debt {
  background: linear-gradient(180deg, rgba(54, 167, 84, 0.28), rgba(40, 130, 65, 0.22)) !important;
  border: 1px solid rgba(54, 167, 84, 0.35);
  box-shadow: none !important;
  color: rgba(100, 220, 130, 0.95);
}

.panel-action-btn--debt:hover {
  background: linear-gradient(180deg, rgba(54, 167, 84, 0.38), rgba(40, 130, 65, 0.30)) !important;
  border-color: rgba(54, 167, 84, 0.5);
  filter: none !important;
  transform: translateY(-1px);
}

.panel-section--product .panel-product-select-wrap .cs-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.panel-section--product .panel-product-select-wrap .cs-trigger {
  width: 100%;
  min-height: 52px;
  padding-right: 52px;
  border-radius: 16px;
}

input[readonly] {
  opacity: 0.9;
}
.comment-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-label {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  padding-left: 4px;
}

.comment-field textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  background: #000;
  color: #fff;
  font: inherit;
  padding: 18px 20px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.comment-field textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
.paired-field {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 12px;
}

.paired-field--full {
  grid-column: 1 / -1;
}

.paired-label {
  color: rgba(255,255,255,0.55);
  cursor: default;
}

.hidden-field {
  display: none !important;
}

.add-extra-product-btn {
  padding: 11px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  box-shadow: none;
  margin-left: auto;
}

.add-extra-product-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.22);
}

.extra-product-card {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
}

.extra-product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.extra-product-title {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ep-remove-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 7px;
  border-radius: 8px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.ep-remove-btn:hover {
  color: #fff;
  background: rgba(194,53,43,0.35);
}
.action-rental-queue {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}

.action-rental-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.action-rental-queue__head span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.action-rental-month-hint {
  margin-left: auto;
  margin-right: 10px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.72) !important;
}

.action-rental-queue__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.action-rental-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.action-rental-item__text {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
}
.modal-inline-hint {
  margin: 8px 2px 0;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.modal-actions__left {
  display: flex;
  gap: 10px;
  align-items: center;
}
.modal-actions__right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.secondary-btn {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.secondary-btn:hover {
  background: rgba(255,255,255,0.12) !important;
}

.secondary-btn--schedule {
  background: rgba(76, 175, 130, 0.15) !important;
  border: 1px solid rgba(76, 175, 130, 0.35) !important;
  color: #6fcfa0 !important;
}
.secondary-btn--schedule:hover {
  background: rgba(76, 175, 130, 0.24) !important;
}

.rc-client-row {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}
.rc-client-row:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.rc-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-size: 14px;
}
.rc-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}

.danger-btn {
  background: rgba(194, 53, 43, 0.14) !important;
  border: 1px solid rgba(194, 53, 43, 0.35);
  box-shadow: none !important;
}

.danger-btn:hover {
  background: rgba(194, 53, 43, 0.22) !important;
}

.panel-section--danger {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 6px;
}

.panel-section--danger .panel-action-btn {
  width: 100%;
}

@media (max-width: 1300px) {
  .crm-table-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .client-panel {
    width: 100%;
    border-left: none;
  }
}

@media (max-width: 700px) {
  .crm-container,
  .client-panel {
    padding: 18px;
  }

  .crm-header {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-header h1 {
    font-size: 34px;
  }

  .form-grid,
  .form-grid--action,
  .paired-field {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column;
  }

  .attention-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-bar {
    flex-direction: column;
  }
}
.full-history-modal-box {
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}
#fullHistoryList {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 6px;
}
#fullHistoryList .history-item {
  padding: 16px 18px;
}
.crm-row > div {
  padding: 6px 8px;
  font-size: 12px;
}

.status {
  min-height: 24px;
  padding: 3px 6px;
}

.action-btn {
  min-height: 24px;
  font-size: 11px;
}
.filters-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.filters-toggle-icon {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .filters-header-mobile {
    margin-bottom: 0;
  }

  .filters-header-mobile h2 {
    display: none;
  }

  .filters-toggle-btn {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
  }

  .filters-bar {
    margin-top: 12px;
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar--collapsed {
    display: none;
  }

  .filters-bar--expanded {
    display: flex;
  }

  .filters-bar .filter-btn {
    width: 100%;
    justify-content: center;
  }
}
.attention-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.attention-header__left h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attention-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attention-toggle-icon {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
}

.attention-body {
  margin-top: 14px;
}

.attention-body.hidden {
  display: none;
}
.crm-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   TABLE: убрана колонка ID, обновлены ширины
   ═══════════════════════════════════════════════ */
.crm-client-group + .crm-client-group {
  border-top: 2px solid rgba(255,255,255,0.18);
  margin-top: 1px;
}

.crm-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 12px;
  opacity: 0.5;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  user-select: none;
  transition: opacity 0.15s;
}
.crm-group-toggle:hover { opacity: 1; }
.crm-group-toggle--empty { cursor: default; visibility: hidden; }

.crm-collapse-all-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  margin-right: auto;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.crm-collapse-all-btn:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
}

.crm-last-cell {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.crm-row-del-product {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(200, 60, 50, 0.4);
  font-size: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.crm-row-del-product:hover {
  color: rgba(255, 80, 70, 1);
  background: rgba(180, 30, 20, 0.4);
}

.crm-row--continuation {
  min-height: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 11px;
  opacity: 0.75;
}

.crm-row--continuation > div {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
}

.crm-row--continuation > div:nth-child(1),
.crm-row--continuation > div:nth-child(2),
.crm-row--continuation > div:nth-child(3) {
  visibility: hidden;
}

.crm-row--continuation .status {
  min-height: 0 !important;
  padding: 2px 8px !important;
  font-size: 11px;
  border-radius: 6px;
}

.crm-row--product-subscription { box-shadow: inset 3px 0 0 rgba(60,200,100,0.7); }
.crm-row--product-rental        { box-shadow: inset 3px 0 0 rgba(80,140,255,0.7); }
.crm-row--product-single        { box-shadow: inset 3px 0 0 rgba(220,170,40,0.7); }

.crm-row--continuation.crm-row--product-subscription {
  background: rgba(60,200,100,0.05);
  border-top: 1px solid rgba(60,200,100,0.25);
}
.crm-row--continuation.crm-row--product-rental {
  background: rgba(80,140,255,0.05);
  border-top: 1px solid rgba(80,140,255,0.25);
}
.crm-row--continuation.crm-row--product-single {
  background: rgba(220,170,40,0.05);
  border-top: 1px solid rgba(220,170,40,0.25);
}

.crm-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding: 6px 16px 4px;
}

.crm-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.6;
}

.crm-legend__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.crm-legend__item--subscription::before { background: rgba(60,200,100,0.8); }
.crm-legend__item--rental::before       { background: rgba(80,140,255,0.8); }
.crm-legend__item--single::before       { background: rgba(220,170,40,0.8); }

/* Responsive grid: гибкие колонки, влезают без горизонтального скролла от ~1280px */
.crm-row--main {
  grid-template-columns:
    minmax(140px, 1.2fr)  /* Имя */
    minmax(110px, 0.9fr)  /* Телефон */
    minmax(65px,  0.5fr)  /* Язык */
    minmax(110px, 0.9fr)  /* Направление */
    minmax(130px, 1fr)    /* Преподаватель */
    minmax(200px, 1.8fr)  /* Тариф */
    minmax(95px,  0.75fr) /* Дата */
    minmax(65px,  0.55fr) /* Осталось */
    minmax(80px,  0.65fr) /* Сумма */
    minmax(110px, 0.9fr); /* Оплата */
}
.crm-row--single {
  grid-template-columns:
    minmax(140px, 1.2fr)
    minmax(110px, 0.9fr)
    minmax(65px,  0.5fr)
    minmax(110px, 0.9fr)
    minmax(130px, 1fr)
    minmax(190px, 1.7fr)
    minmax(95px,  0.75fr)
    minmax(95px,  0.75fr)
    minmax(110px, 0.9fr);
}
.crm-row--rental {
  grid-template-columns:
    minmax(140px, 1.2fr)
    minmax(110px, 0.9fr)
    minmax(65px,  0.5fr)
    minmax(110px, 0.9fr)
    minmax(130px, 1fr)
    minmax(190px, 1.7fr)
    minmax(95px,  0.75fr)
    minmax(95px,  0.75fr)
    minmax(95px,  0.75fr)
    minmax(110px, 0.9fr);
}

/* ═══════════════════════════════════════════════
   TABLE: hover строки — более заметный
   ═══════════════════════════════════════════════ */
.crm-row:not(.crm-head):hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 3px 0 0 rgba(194, 53, 43, 0.5);
}
.crm-row:not(.crm-head) {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lang-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-inline__flag {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.lang-sep {
  opacity: 0.7;
}

.lang-flag-only {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════
   ФОРМА: поле Сумма (только чтение) — отличается визуально
   ═══════════════════════════════════════════════ */
#price,
#actionPrice {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: default !important;
  font-style: italic;
}
#price::placeholder,
#actionPrice::placeholder {
  color: rgba(255,255,255,0.3);
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   ФОРМА: 3-шаговый индикатор
   ═══════════════════════════════════════════════ */
.form-step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 14px 0 22px;
}
.step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.step-dot:hover {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.05);
}
.step-dot__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.step-dot__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.step-dot.active {
  color: #fff;
}
.step-dot.active .step-dot__num {
  background: rgba(27,94,32,0.85);
  border-color: rgba(46,125,50,0.95);
  color: #fff;
}
.step-dot.done {
  color: rgba(255,255,255,0.55);
}
.step-dot.done .step-dot__num {
  background: rgba(54,167,84,0.3);
  border-color: rgba(54,167,84,0.5);
  color: rgba(255,255,255,0.75);
}
.step-connector {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
}

/* ═══════════════════════════════════════════════
   ФОРМА: шаг-контейнер
   ═══════════════════════════════════════════════ */
.form-step.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   TABLE: пустое состояние
   ═══════════════════════════════════════════════ */
.crm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 52px 20px;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.crm-empty-icon {
  font-size: 36px;
  opacity: 0.55;
}
.crm-empty-text {
  font-size: 15px;
  margin: 0;
}
.crm-empty-state .add-btn {
  margin-top: 4px;
  font-size: 13px;
  padding: 9px 18px;
}

.add-btn--ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke);
  box-shadow: none;
}

.add-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.add-btn--quick-save,
.modal button.add-btn--quick-save {
  background: linear-gradient(180deg, #3dbf57, #2da047) !important;
  box-shadow: 0 16px 40px rgba(45, 160, 71, 0.32) !important;
}

.add-btn--quick-save:hover,
.modal button.add-btn--quick-save:hover {
  background: linear-gradient(180deg, #48d063, #35b854) !important;
}

/* ─── Scheduled slots summary (CRM modal step 2, returned from planning) ─── */

.scheduled-slots-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(67, 171, 85, 0.35);
  border-radius: 12px;
  background: rgba(38, 125, 60, 0.12);
  grid-column: 1 / -1;
}

.scheduled-slots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(120, 210, 130, 0.95);
  margin-bottom: 8px;
  gap: 8px;
}

.scheduled-slots-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scheduled-slot-row {
  font-size: 13px;
  color: var(--text);
  padding: 3px 0;
  opacity: 0.88;
}

.waiting-added-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 165, 46, 0.35);
  border-radius: 12px;
  background: rgba(140, 105, 20, 0.12);
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(214, 165, 46, 0.95);
  gap: 8px;
}

/* ═══════════════════════════════════════════════
   WAITING LIST — кнопка в модале + drag-drop
   ═══════════════════════════════════════════════ */
.add-btn--save-waiting,
.modal button.add-btn--save-waiting {
  background: linear-gradient(180deg, #1e4a30, #152e1e) !important;
  box-shadow: 0 8px 20px rgba(20, 60, 35, 0.35) !important;
  color: rgba(180, 220, 195, 0.85) !important;
}
.add-btn--save-waiting:hover,
.modal button.add-btn--save-waiting:hover {
  background: linear-gradient(180deg, #26593a, #1a3826) !important;
  box-shadow: 0 10px 24px rgba(20, 60, 35, 0.45) !important;
  filter: none !important;
}
.filter-btn--waiting {
  background: rgba(80, 170, 120, 0.18);
}
.filter-btn--waiting.active {
  background: linear-gradient(180deg, #2f8a5c, #1d6641);
  box-shadow: 0 16px 40px rgba(40, 140, 80, 0.35);
}
.filter-btn--drag-over {
  background: linear-gradient(180deg, #2f8a5c, #1d6641) !important;
  box-shadow: 0 0 0 2px rgba(80, 220, 130, 0.7), 0 8px 24px rgba(0,0,0,0.35) !important;
  transform: translateY(-3px) scale(1.06) !important;
  transition: all 0.1s ease !important;
}

.crm-client-group--dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.crm-client-group {
  position: relative;
}

.waiting-remove-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,20,28,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  pointer-events: none;
}
.crm-client-group--waiting:hover .waiting-remove-btn {
  opacity: 1;
  pointer-events: auto;
}
.waiting-remove-btn:hover {
  background: rgba(180,40,40,0.72);
  color: #fff;
  border-color: rgba(200,50,50,0.5);
}

/* ═══════════════════════════════════════════════
   LEADS SECTION
   ═══════════════════════════════════════════════ */

.leads-section {
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 10px 32px;
}

.leads-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.leads-header__left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.leads-header__left h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leads-header__sub {
  display: none;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
}

.leads-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leads-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255,200,60,0.18);
  color: rgba(255,200,60,0.9);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.leads-toggle-icon {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  transition: transform 0.2s;
}

.leads-body {
  margin-top: 16px;
}

.leads-body.hidden {
  display: none;
}

/* Toolbar */
.leads-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.leads-search {
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  padding: 7px 12px;
  outline: none;
}

.leads-search::placeholder { color: rgba(255,255,255,0.35); }
.leads-search:focus { border-color: rgba(255,255,255,0.28); }

.leads-toolbar select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}

.leads-toolbar select option { background: #1a1a1a; }

.add-btn--leads {
  white-space: nowrap;
}

/* Table */
.leads-table-wrap {
  overflow-x: auto;
}

.leads-table {
  width: 100%;
  min-width: 600px;
}

.leads-row {
  display: grid;
  grid-template-columns: 28px 1.8fr 1.2fr 1fr 1fr 1fr 120px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.12s;
}

.leads-row--head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: default;
}

.leads-row--body {
  cursor: pointer;
  padding: 2px 0;
}

.leads-row--body:hover {
  background: rgba(255,255,255,0.04);
}

.leads-row--body.is-selected {
  background: rgba(255,200,60,0.07);
}

.leads-col {
  padding: 9px 10px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-col--drag {
  cursor: grab;
  color: rgba(255,255,255,0.25);
  font-size: 16px;
  padding: 9px 4px 9px 8px;
  user-select: none;
}

.leads-col--drag:active { cursor: grabbing; }

.leads-row--body[draggable="true"].is-dragging {
  opacity: 0.4;
}

/* Status badges */
.lead-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
}

.lead-status-badge--new        { background: rgba(60,120,220,0.18); color: rgba(120,180,255,0.9); }
.lead-status-badge--in_progress{ background: rgba(220,160,0,0.18);  color: rgba(255,200,60,0.9);  }
.lead-status-badge--rejected   { background: rgba(200,50,50,0.18);  color: rgba(255,100,90,0.9);  }
.lead-status-badge--converted  { background: rgba(40,160,80,0.18);  color: rgba(80,220,120,0.9);  }

/* Empty state */
.leads-empty {
  text-align: center;
  padding: 28px;
  color: rgba(255,255,255,0.35);
  font-size: 14px;
}

/* Convert drop zones */
.clients-drop-zone,
.leads-convert-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255,200,60,0.45);
  border-radius: 10px;
  padding: 16px;
  font-size: 14px;
  color: rgba(255,200,60,0.75);
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 12px;
}

.clients-drop-zone.hidden,
.leads-convert-zone { display: none; }

.clients-drop-zone:not(.hidden) { display: flex; }
.leads-convert-zone.drag-active { display: flex; }

.clients-drop-zone.drag-over,
.leads-convert-zone.drag-over {
  background: rgba(255,200,60,0.08);
  border-color: rgba(255,200,60,0.8);
  color: rgba(255,220,100,1);
}

/* Lead panel content (inside the shared aside.client-panel) */
.lead-panel__content {
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;
}

.lead-panel__content.hidden {
  display: none;
}

.lead-panel__status-line {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 2px 0 0;
}

.lead-panel-input,
.lead-panel-select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  margin-top: 4px;
  outline: none;
  box-sizing: border-box;
}

.lead-panel-input:focus,
.lead-panel-select:focus {
  border-color: rgba(255,255,255,0.3);
}

.lead-panel-select option { background: #1a1a1a; }

.lead-panel-notes {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  min-height: 80px;
  font-family: inherit;
}

.lead-panel-notes:focus {
  border-color: rgba(255,255,255,0.3);
}

/* Lead modal */
#leadModal .modal-content {
  max-width: 720px;
}

#leadRejectionBlock {
  grid-column: 1 / -1;
}

#leadRejectionBlock select,
#leadRejectionBlock input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

#leadPanelRejectionReasonCustom {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Clients section collapsible header ─────────────────────────── */
.clients-section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0 12px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  margin-bottom: 0;
}

.clients-section-header__left {
  display: flex;
  align-items: center;
}

.clients-section-header__left h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.9);
  transition: opacity 0.15s;
}

.clients-section-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clients-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

.clients-section-toggle-icon {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: transform 0.2s ease;
  display: inline-block;
}

.clients-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.clients-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}