:root {
  --navy: #101828;
  --navy-2: #1d2939;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #eff6ff;
  --green: #067647;
  --green-soft: #ecfdf3;
  --red: #b42318;
  --red-soft: #fef3f2;
  --amber: #b54708;
  --amber-soft: #fffaeb;
  --text: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --surface: #ffffff;
  --background: #f6f7f9;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 254px;
  padding: 28px 18px 22px;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, rgba(37, 99, 235, .3), transparent 34%),
    var(--navy);
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 28px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-size: 23px;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 16px;
}

.brand span {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d0d5dd;
  background: transparent;
  text-align: left;
  font-weight: 600;
  transition: .15s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

.nav-item.active {
  color: #fff;
  background: var(--blue);
}

.nav-icon {
  width: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.local-note {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,.04);
}

.session-logout {
  margin-left: auto;
  border: 0;
  padding: 4px 6px;
  color: #fff;
  background: transparent;
  font-size: 12px;
  opacity: .75;
}

.session-logout:hover {
  opacity: 1;
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #32d583;
  box-shadow: 0 0 0 4px rgba(50, 213, 131, .12);
}

.local-note strong,
.local-note span {
  display: block;
}

.local-note strong {
  font-size: 12px;
}

.local-note span {
  margin-top: 3px;
  color: #98a2b3;
  font-size: 10px;
  line-height: 1.4;
}

.main {
  grid-column: 2;
  min-width: 0;
  padding: 0 38px 52px;
}

.topbar {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar h1 {
  margin: 4px 0 0;
  font-size: 30px;
  letter-spacing: -.03em;
}

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

.primary,
.secondary {
  min-height: 44px;
  border-radius: 9px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  transition: .15s ease;
}

.primary {
  border: 1px solid var(--blue);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}

.primary:hover {
  background: var(--blue-dark);
}

.primary.compact {
  min-height: 40px;
  padding: 8px 14px;
}

.primary.full {
  width: 100%;
  margin-top: 20px;
}

.secondary {
  border: 1px solid #d0d5dd;
  color: #344054;
  background: #fff;
}

.secondary:hover {
  background: #f9fafb;
}

.text-button {
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
  font-weight: 700;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fadeIn .16s ease-out;
}

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

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

.stat-card {
  min-height: 142px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

.stat-card.accent {
  border-color: transparent;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 55%),
    var(--navy);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.accent .stat-label {
  color: #d0d5dd;
}

.stat-card strong {
  display: block;
  margin-top: 16px;
  font-size: 26px;
  letter-spacing: -.03em;
}

.stat-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.accent small {
  color: #98a2b3;
}

.danger-card strong {
  color: var(--red);
}

.dashboard-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
  align-items: stretch;
  gap: 18px;
}

.panel-head-summary {
  text-align: right;
}

.panel-head-summary strong,
.panel-head-summary span {
  display: block;
}

.panel-head-summary strong {
  font-size: 18px;
}

.panel-head-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-scroll {
  scrollbar-color: #d0d5dd transparent;
  scrollbar-width: thin;
}

.dashboard-scroll::-webkit-scrollbar {
  width: 8px;
}

.dashboard-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: #d0d5dd;
  background-clip: padding-box;
}

.dashboard-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.attention-list {
  height: 350px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.attention-list .empty-state {
  min-height: 100%;
}

.attention-list .collect-item {
  padding: 15px 18px;
}

.attention-list .collect-main strong {
  font-size: 13px;
}

.attention-list .collect-actions {
  flex-direction: column;
}

.attention-list .collect-actions .small-button {
  min-width: 106px;
}

.collection-plan {
  overflow: hidden;
}

.plan-row {
  min-height: 76px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
  border-bottom: 1px solid var(--line);
}

.plan-row > span {
  color: var(--muted);
  font-size: 11px;
}

.plan-row > strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 17px;
  text-align: right;
}

.plan-row > small {
  color: var(--muted);
  font-size: 9px;
}

.plan-row.total {
  border-bottom: 0;
  background: var(--blue-soft);
}

.plan-row.total > strong {
  color: var(--blue-dark);
}

.financial-report {
  margin-top: 18px;
}

.financial-report-controls {
  display: flex;
  align-items: end;
  gap: 12px;
}

.financial-report-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.financial-report-controls input {
  width: 175px;
  height: 44px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.financial-report-controls .secondary {
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  white-space: nowrap;
}

.monthly-primary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.monthly-primary-metrics > div {
  min-height: 96px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}

.monthly-primary-metrics > div:last-child {
  border-right: 0;
}

.monthly-primary-metrics span,
.monthly-primary-metrics strong,
.monthly-primary-metrics small,
.monthly-secondary-metrics span,
.monthly-secondary-metrics strong {
  display: block;
}

.monthly-primary-metrics span,
.monthly-secondary-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.monthly-primary-metrics strong {
  margin-top: 7px;
  font-size: 20px;
}

.monthly-primary-metrics small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.monthly-secondary-metrics {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
}

.monthly-secondary-metrics > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.monthly-secondary-metrics strong {
  margin-top: 6px;
  font-size: 14px;
}

.financial-operations {
  padding: 18px 20px 20px;
}

.financial-operations-head {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.financial-operations-head h3 {
  margin: 0;
  font-size: 13px;
}

.financial-operations-head span {
  color: var(--muted);
  font-size: 10px;
}

.financial-operations-list {
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.financial-operations-list > .empty-state {
  min-height: 140px;
}

.financial-operation-row {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.financial-operation-row:last-child {
  border-bottom: 0;
}

.financial-operation-row > span,
.financial-operation-row strong,
.financial-operation-row small {
  display: block;
}

.financial-operation-row > span:first-child {
  color: var(--muted);
  font-size: 10px;
}

.financial-operation-row > span:last-child {
  text-align: right;
}

.financial-operation-row strong {
  font-size: 11px;
}

.financial-operation-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.planned-closures {
  margin-top: 18px;
}

.panel-subtitle {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.compact-select {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.compact-select select {
  min-width: 140px;
  height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.planned-closures-list {
  max-height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.planned-closures-list > .empty-state {
  min-height: 180px;
}

.closure-month {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 20px;
  border-bottom: 1px solid var(--line);
  color: #344054;
  background: #f9fafb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.closure-row {
  width: 100%;
  min-height: 66px;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(210px, auto) 20px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.closure-row:hover {
  background: #f9fafb;
}

.closure-date {
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.closure-client strong,
.closure-client small,
.closure-value strong,
.closure-value small {
  display: block;
}

.closure-client strong,
.closure-value strong {
  font-size: 12px;
}

.closure-client small,
.closure-value small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.closure-value {
  text-align: right;
}

.closure-value small {
  white-space: nowrap;
}

.closure-row .row-arrow {
  text-align: right;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

.panel-head {
  padding: 22px 24px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2,
.section-title h2,
.backup-card h2,
.privacy-panel h2 {
  margin: 5px 0 0;
  font-size: 19px;
  letter-spacing: -.02em;
}

.upcoming-list {
  min-height: 248px;
}

.upcoming-item {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.upcoming-item:last-child {
  border-bottom: 0;
}

.person {
  min-width: 0;
}

.person strong,
.person span {
  display: block;
}

.person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.due-date {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.due-date strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
}

.amount {
  min-width: 84px;
  text-align: right;
  font-size: 15px;
}

.empty-state {
  min-height: 248px;
  padding: 36px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 18px;
}

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

.form-section {
  padding: 25px;
}

.section-title {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 24px;
}

.section-title > span {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 13px;
  font-weight: 800;
}

.section-title h2 {
  margin-top: 2px;
}

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

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

.field {
  min-width: 0;
}

.field.wide {
  grid-column: 1 / -1;
}

.field > span,
.label-title {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
.deals-toolbar input,
.deals-toolbar select,
.modal input,
.modal select {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: .15s ease;
}

.field input,
.field select,
.deals-toolbar input,
.deals-toolbar select,
.modal input,
.modal select {
  height: 43px;
  padding: 0 12px;
}

.field textarea {
  padding: 11px 12px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.deals-toolbar input:focus,
.deals-toolbar select:focus,
.modal input:focus,
.modal select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.period-block {
  margin-top: 22px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.segmented.two-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label > span {
  min-height: 66px;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #344054;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}

.segmented small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.segmented input:checked + span {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 1px var(--blue);
}

.payment-options {
  margin-top: 17px;
}

.hidden {
  display: none !important;
}

.calculation-card {
  position: sticky;
  top: 20px;
  padding: 25px;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(37,99,235,.5), transparent 42%),
    var(--navy);
  box-shadow: var(--shadow);
}

/* Карточки телефонов в форме сделки */
.phone-card {
  position: relative;
  margin-bottom: 18px;
}

.phone-card .section-title {
  align-items: center;
}

.phone-card-remove {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}

.phone-card-remove:hover {
  color: var(--red, #d92d20);
  border-color: var(--red, #d92d20);
  background: var(--red-soft, #fef3f2);
}

.phone-card-calc {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--blue-soft, #eff6ff);
  border: 1px solid var(--line);
}

.phone-card-calc .pcalc-main {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.phone-card-calc .pcalc-main span {
  font-size: 11px;
  color: var(--muted);
}

.phone-card-calc .pcalc-main strong {
  font-size: 22px;
  color: var(--blue-dark, #1d4ed8);
}

.phone-card-calc .pcalc-main small {
  font-size: 11px;
  color: var(--muted);
}

.phone-card-calc .pcalc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
}

.phone-card-calc .pcalc-row span {
  color: var(--muted);
}

.phone-card-calc .pcalc-row.profit strong {
  color: var(--green, #067647);
}

.add-phone-btn {
  margin-bottom: 18px;
  border-style: dashed;
}

/* Поле «каждые N» в формах реструктуризации */
.restructure-step-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.restructure-step-field input {
  width: 58px;
}

.calculation-card h2 {
  margin: 5px 0 22px;
  font-size: 22px;
}

.calc-formula {
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #98a2b3;
  font-size: 12px;
}

.calc-formula strong {
  color: #fff;
  font-size: 14px;
}

.calc-formula.profit strong {
  color: #6ce9a6;
}

.calc-highlight {
  margin: 12px 0;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
}

.calc-highlight span,
.calc-highlight small,
.calc-highlight strong {
  display: block;
}

.calc-highlight span {
  color: #d0d5dd;
  font-size: 11px;
}

.calc-highlight strong {
  margin-top: 6px;
  font-size: 27px;
  letter-spacing: -.03em;
}

.calc-highlight small {
  margin-top: 5px;
  color: #98a2b3;
  font-size: 11px;
}

.formula-note {
  margin-top: 17px;
  padding: 11px;
  border-radius: 8px;
  color: #d0d5dd;
  background: rgba(255,255,255,.05);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.form-error {
  min-height: 16px;
  margin: 9px 0 0;
  color: #fda29b;
  font-size: 11px;
  text-align: center;
}

.deals-toolbar {
  padding: 17px 20px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.search-box {
  position: relative;
}

.search-box span {
  position: absolute;
  left: 13px;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-box input {
  padding-left: 37px;
}

.deals-list {
  min-height: 300px;
}

.clients-list {
  min-height: 300px;
}

.clients-toolbar {
  align-items: center;
  grid-template-columns: minmax(220px, 1fr) 190px 210px auto;
}

.deal-row {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(160px, 1fr) 130px 206px 96px 28px 24px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s ease;
}

.client-row {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(140px, .9fr) 112px 24px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s ease;
}

.client-row:hover {
  background: #f9fafb;
}

.client-row:last-child {
  border-bottom: 0;
}

.field-note {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.field input[readonly],
.field input:disabled {
  color: #475467;
  background: #f2f4f7;
}

.deal-row:hover {
  background: #f9fafb;
}

.deal-row:last-child {
  border-bottom: 0;
}

.deal-model strong,
.deal-model span,
.deal-value strong,
.deal-value span {
  display: block;
}

.deal-model strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-model span,
.deal-value span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.deal-value strong {
  font-size: 13px;
}

.progress {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 5px;
  background: #eaecf0;
}

.progress span {
  height: 100%;
  display: block;
  margin-top: 0;
  min-width: 2px;
  border-radius: inherit;
  background: var(--green);
  transition: width 0.3s ease;
}

.progress span[style*="width:0%"],
.progress span[style*="width: 0%"] {
  min-width: 0;
}

.status {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
}

.status.active {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.status.closed {
  color: var(--green);
  background: var(--green-soft);
}

.status.overdue {
  color: var(--red);
  background: var(--red-soft);
}

.status.written_off {
  color: #6941c6;
  background: #f4f3ff;
}

.status.terminated {
  color: #7a2e0e;
  background: #fffaeb;
}

.schedule-state.written_off {
  color: #6941c6;
  background: #f4f3ff;
}

.schedule-state.terminated {
  color: #7a2e0e;
  background: #fffaeb;
}

.row-arrow {
  color: #98a2b3;
  font-size: 21px;
}

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

.calendar-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 18px;
}

.calendar-body {
  padding: 22px 24px 24px;
}

.section-help {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.weekday-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.weekday-grid span {
  height: 42px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #475467;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.weekday-grid input:checked + span {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 1px var(--blue);
}

.skip-form {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.skip-list {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.skip-item {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.skip-item:last-child {
  border-bottom: 0;
}

.skip-item strong {
  font-size: 12px;
}

.skip-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  color: var(--red);
  background: var(--red-soft);
}

.calendar-explanation {
  margin-top: 18px;
  padding: 25px 28px;
}

.calendar-explanation h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.calendar-explanation p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.backup-card {
  padding: 30px;
}

.backup-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 24px;
  font-weight: 800;
}

.backup-card h2 {
  font-size: 20px;
}

.backup-card p,
.privacy-panel p {
  max-width: 600px;
  margin: 9px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.file-button input {
  display: none;
}

.privacy-panel {
  margin-top: 18px;
  padding: 26px 30px;
}

.privacy-panel p {
  margin-bottom: 8px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, .66);
  backdrop-filter: blur(3px);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(16,24,40,.2);
}

.modal-close {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #475467;
  background: #f2f4f7;
  font-size: 23px;
}

.deal-detail-head {
  padding: 27px 28px 23px;
  border-bottom: 1px solid var(--line);
}

.deal-detail-head h2 {
  margin: 5px 45px 0 0;
  font-size: 24px;
}

.deal-detail-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.detail-metrics {
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #f9fafb;
}

.detail-metric {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.detail-metric span,
.detail-metric strong {
  display: block;
}

.detail-metric span {
  color: var(--muted);
  font-size: 10px;
}

.detail-metric strong {
  margin-top: 5px;
  font-size: 15px;
}

.detail-grid {
  padding: 24px 28px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr);
  gap: 24px;
}

.client-modal {
  width: min(1400px, 100%);
}

.client-detail-grid {
  padding: 24px 28px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .75fr);
  gap: 30px;
}

.client-detail-grid > .detail-section {
  min-width: 0;
}

.client-section-head {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.client-section-head h3 {
  margin: 0;
}

.client-deals-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.client-report {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.client-report .client-section-head {
  align-items: flex-start;
}

.client-report .client-section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.client-report-filters {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
}

.client-report-filters label {
  min-height: 48px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}

.client-report-filters input {
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 0;
  display: grid;
  place-content: center;
  border: 1.5px solid #98a2b3;
  border-radius: 50%;
  background: #fff;
}

.client-report-filters input::before {
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform .1s ease;
}

.client-report-filters input:checked {
  border-color: var(--blue);
  background: var(--blue);
}

.client-report-filters input:checked::before {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

.client-report-filters label:has(input:checked) {
  border-color: #b2ccff;
  background: var(--blue-soft);
}

.client-report-filter-all {
  background: #fff;
}

.client-report-metrics {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.client-report-metrics > div {
  padding: 11px;
  border-right: 1px solid var(--line);
  background: #f9fafb;
}

.client-report-metrics > div:last-child {
  border-right: 0;
}

.client-report-metrics span,
.client-report-metrics strong {
  display: block;
}

.client-report-metrics span {
  color: var(--muted);
  font-size: 9px;
}

.client-report-metrics strong {
  margin-top: 4px;
  font-size: 12px;
}

.client-report-columns {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.client-report-columns h4 {
  margin: 0 0 8px;
  color: #344054;
  font-size: 11px;
}

.client-report-list {
  /* Окно на ~10 строк, дальше — прокрутка (и «Ближайшие платежи», и история). */
  max-height: 645px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.client-report-history {
  max-height: 645px;
}

.client-report-history .client-report-row {
  min-height: 64px;
}

.client-report-list .history-empty {
  padding: 12px;
}

.client-report-row {
  padding: 10px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 10px;
}

.client-report-row:last-child {
  border-bottom: 0;
}

.client-report-row > span > strong,
.client-report-row > span > small {
  display: block;
}

.client-report-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.client-report-row .status {
  margin-top: 4px;
  font-size: 8px;
}

.client-report-row > strong {
  white-space: nowrap;
}

.client-report-date {
  color: var(--muted);
  font-size: 9px;
}

.client-deal-card {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: left;
}

.client-deal-card:last-child {
  border-bottom: 0;
}

.client-deal-card:hover {
  background: #f9fafb;
}

.client-deal-card span > strong,
.client-deal-card span > small {
  display: block;
}

.client-deal-card span > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.client-merge-box {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #fecdca;
  border-radius: 11px;
  background: #fffbfa;
}

.client-merge-box > p {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.client-merge-box label {
  display: block;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.client-merge-box select {
  width: 100%;
  margin-top: 6px;
}

.client-merge-preview {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.client-merge-preview > div {
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.client-merge-preview > div:last-of-type {
  border-bottom: 0;
}

.client-merge-preview strong {
  max-width: 60%;
  text-align: right;
}

.client-merge-preview p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.client-merge-preview .merge-error {
  margin: 0;
  color: var(--red);
}

.client-merge-history {
  margin-top: 20px;
}

.client-merge-history-row {
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.client-merge-history-row:last-child {
  border-bottom: 0;
}

.client-merge-history-row strong,
.client-merge-history-row span,
.client-merge-history-row small {
  display: block;
}

.client-merge-history-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.client-merge-history-row small {
  margin-top: 5px;
  color: var(--red);
  font-size: 9px;
  line-height: 1.4;
}

.client-merge-history-row.restored {
  opacity: 0.7;
}

.client-edit-form {
  padding: 17px;
  border-radius: 11px;
  background: var(--blue-soft);
}

.client-payment-form {
  margin-bottom: 8px;
  padding: 17px;
  border-radius: 11px;
  background: #f9fafb;
}

.client-payment-form.editing {
  border: 1px solid #b2ccff;
  background: var(--blue-soft);
}

.client-payment-edit-note {
  margin: 0 0 12px;
  color: #175cd3;
  font-size: 10px;
  line-height: 1.45;
}

.client-payment-form > label {
  margin-bottom: 10px;
  display: block;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.client-payment-form input,
.client-payment-form select {
  width: 100%;
  height: 43px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
}

.client-allocation-preview {
  margin: 4px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.client-allocation-head {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.client-allocation-head strong {
  color: #344054;
  font-size: 11px;
}

.client-allocation-head span {
  color: var(--muted);
  font-size: 9px;
}

.client-allocation-row {
  padding: 7px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.client-allocation-row > span {
  min-width: 0;
}

.client-allocation-row strong,
.client-allocation-row small {
  display: block;
}

.client-allocation-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.client-allocation-row input {
  margin: 0;
  text-align: right;
}

.client-allocation-total {
  padding: 8px 0 5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--green);
  font-size: 10px;
}

.client-allocation-total small {
  text-align: right;
}

.client-allocation-total.invalid,
.client-allocation-total.invalid small {
  color: var(--red);
}

.client-allocation-reset {
  width: 100%;
  margin-top: 5px;
}

.client-allocation-preview p {
  margin: 5px 0 0;
  color: var(--red);
  font-size: 10px;
  line-height: 1.4;
}

.client-payment-history {
  margin-bottom: 20px;
}

.client-payment-group {
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.client-payment-group strong,
.client-payment-group span {
  display: block;
}

.client-payment-group span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.client-edit-form > label {
  margin-bottom: 11px;
  display: block;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.client-edit-form input,
.client-edit-form textarea {
  width: 100%;
  margin-top: 6px;
}

.client-edit-form .check-inline {
  display: flex;
}

.client-edit-form .check-inline input {
  width: auto;
  margin: 0;
}

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

.schedule-list {
  max-height: 330px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.schedule-row {
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.schedule-row:last-child {
  border-bottom: 0;
}

.schedule-row .number {
  color: #98a2b3;
}

.schedule-state {
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--muted);
  background: #f2f4f7;
  font-size: 9px;
  font-weight: 800;
}

.schedule-state.paid {
  color: var(--green);
  background: var(--green-soft);
}

.schedule-state.late {
  color: var(--red);
  background: var(--red-soft);
}

.schedule-state.deferred {
  color: var(--red);
  background: var(--red-soft);
}

.schedule-row.rescheduled {
  background: #fffaf0;
}

.schedule-row.deferred-row strong {
  color: var(--muted);
  text-decoration: line-through;
}

.reschedule-note {
  display: block;
  margin-top: 2px;
  color: #b54708;
  font-size: 9px;
  font-weight: 700;
}

.schedule-state.pause {
  color: #3538cd;
  background: #eef2ff;
}

.schedule-row.pause-row {
  background: #f5f6ff;
}

.schedule-row.pause-row strong {
  color: var(--muted);
}

.pause-note {
  display: block;
  margin-top: 2px;
  color: #3538cd;
  font-size: 9px;
  font-weight: 700;
}

.schedule-row.planned-close-current {
  box-shadow: inset 3px 0 0 #1570ef;
}

.schedule-row.planned-close-old {
  box-shadow: inset 3px 0 0 #98a2b3;
}

.planned-close-note {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 800;
}

.planned-close-note.current {
  color: #175cd3;
}

.planned-close-note.old {
  color: #667085;
}

.schedule-row.overdue-after-close {
  background: #fff4f3;
}

.overdue-after-close-note {
  display: block;
  margin-top: 3px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
}

.skip-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}

.pause-targets {
  margin-bottom: 12px;
}

.pause-target-all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.pause-client-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pause-client-list.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.pause-client {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-size: 12px;
}

.payment-box {
  padding: 17px;
  border-radius: 11px;
  background: var(--blue-soft);
}

.payment-box label {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.payment-box input {
  margin-bottom: 10px;
}

.history {
  margin-top: 20px;
}

.history-row {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

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

.history-empty {
  color: var(--muted);
  font-size: 11px;
}

.personal-skip-box {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.personal-skip-form {
  padding: 13px;
  border-radius: 10px;
  background: #f9fafb;
}

.personal-skip-form input {
  margin-bottom: 8px;
}

.small-button {
  width: 100%;
  min-height: 37px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.personal-skip-list {
  margin-top: 8px;
}

.personal-skip-item {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.personal-skip-item span {
  color: var(--muted);
}

.personal-skip-item button {
  border: 0;
  padding: 0;
  color: var(--red);
  background: transparent;
}

.danger-zone {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.danger-button {
  border: 0;
  padding: 0;
  color: var(--red);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.terminal-payment-lock p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.terminal-action-box {
  margin-top: 20px;
  padding: 17px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fcfcfd;
}

.terminal-action-box h3 {
  margin: 0 0 12px;
}

.terminal-summary > strong {
  margin: 10px 0 4px;
  display: block;
  font-size: 22px;
}

.terminal-summary > p,
.terminal-action-box > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

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

.terminal-loss-grid.preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.terminal-loss-grid span {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--muted);
  background: #f2f4f7;
  font-size: 10px;
}

.terminal-loss-grid strong {
  margin-top: 4px;
  display: block;
  color: var(--text);
  font-size: 13px;
}

.terminal-form {
  display: grid;
  gap: 8px;
}

.terminal-form label {
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.terminal-form input,
.terminal-form textarea {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.terminal-warning {
  border: 1px solid #fedf89;
  border-radius: 9px;
  padding: 10px 12px;
  color: #7a2e0e;
  background: #fffaeb;
  font-size: 11px;
  line-height: 1.5;
}

.terminal-form-actions {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.write-off-submit {
  border-color: #6941c6;
  background: #6941c6;
}

.write-off-submit:hover {
  background: #53389e;
}

.terminal-choice-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.termination-submit {
  border-color: #b54708;
  background: #b54708;
}

.termination-submit:hover {
  background: #93370d;
}

.terminal-history {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.terminal-history h4 {
  margin: 0 0 8px;
  font-size: 12px;
}

.terminal-history-row {
  padding: 9px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.terminal-history-row small {
  grid-column: 1 / -1;
  color: var(--muted);
}

@media (max-width: 600px) {
  .terminal-loss-grid,
  .terminal-loss-grid.preview,
  .terminal-form-actions,
  .terminal-choice-actions {
    grid-template-columns: 1fr;
  }
}

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

.money-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 18px;
}

.money-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.money-settings-form {
  margin: 0 16px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 11px;
  background: #f8fafc;
}

.money-settings-form p {
  align-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.money-settings-form .secondary {
  min-height: 43px;
}

.money-accounts-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.money-account-card {
  position: relative;
  min-width: 0;
  min-height: 108px;
  padding: 15px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.money-account-icon {
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
}

.money-account-icon--cash {
  color: var(--green);
  background: var(--green-soft);
}

.money-account-icon--card {
  background: transparent;
  padding: 0;
}

.money-account-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.money-account-card span > strong,
.money-account-card span > small {
  display: block;
}

.money-account-card span > strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-account-card span > small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}

.money-account-card > strong {
  grid-column: 2;
  font-size: 17px;
}

.money-account-card > strong.negative {
  color: var(--red);
}

.money-account-controls {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  gap: 6px;
}

.money-account-edit {
  color: #475467;
  background: #f2f4f7;
}

.money-account-delete {
  color: var(--red);
  background: var(--red-soft);
}

.money-account-form {
  margin: 0 16px 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 170px 170px auto;
  align-items: end;
  gap: 10px;
  border: 1px solid #b2ccff;
  border-radius: 11px;
  background: var(--blue-soft);
}

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

.money-account-actions .primary,
.money-account-actions .secondary {
  min-height: 43px;
}

.money-entry-panel {
  position: sticky;
  top: 18px;
}

.money-entry-form {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* .field — это <label> (inline), поэтому margin-bottom у него игнорируется.
   Раньше отступы «работали» только на блочном .money-entry-two. Теперь
   расстояние между полями задаёт gap самой формы — единообразно. */
.money-entry-form > .field {
  display: block;
}

.money-entry-form > .field > span {
  margin-bottom: 8px;
}

.money-entry-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.money-rule {
  margin: 0 18px 18px;
  padding: 11px;
  border-radius: 9px;
  color: #344054;
  background: #f2f4f7;
  font-size: 9px;
  line-height: 1.5;
}

.money-entry-hint {
  margin: 2px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.45;
  display: none;
}

.money-entry-hint.ok,
.money-entry-hint.danger {
  display: block;
}

.money-entry-hint.ok {
  color: #027a48;
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
}

.money-entry-hint.danger {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
}

.money-journal-head {
  align-items: end;
}

.money-filters {
  max-width: 650px;
  display: grid;
  grid-template-columns: 145px 160px 160px minmax(170px, 1fr);
  gap: 8px;
}

.money-filters input,
.money-filters select {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-size: 10px;
}

.money-legacy-notice {
  margin: 14px 18px 0;
  padding: 12px 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid #fedf89;
  border-radius: 9px;
  color: #7a2e0e;
  background: var(--amber-soft);
  font-size: 10px;
}

.money-legacy-notice span {
  color: #93370d;
  line-height: 1.45;
}

.money-journal-list {
  max-height: 560px;
  overflow-y: auto;
}

.money-journal-row {
  min-height: 68px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns:
    92px
    minmax(220px, 1fr)
    minmax(130px, .5fr)
    minmax(130px, max-content)
    120px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.money-journal-row:last-child {
  border-bottom: 0;
}

.money-journal-row.void {
  opacity: .58;
  background: #f9fafb;
}

.money-journal-row.future {
  background: #f8f9fc;
}

.money-journal-date,
.money-journal-account {
  color: var(--muted);
  font-size: 10px;
}

.money-journal-main strong,
.money-journal-main small {
  display: block;
}

.money-journal-main strong {
  font-size: 11px;
}

.money-journal-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.money-journal-amount {
  min-width: 0;
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

.money-journal-amount.income {
  color: var(--green);
}

.money-journal-amount.expense {
  color: var(--red);
}

.money-journal-amount.transfer {
  color: var(--blue-dark);
}

.money-journal-amount.void {
  color: var(--muted);
  text-decoration: line-through;
}

.money-journal-amount.future {
  color: #667085;
}

.money-journal-action {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.money-edit-entry {
  color: #475467;
  background: #f2f4f7;
}

.money-badge {
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.money-badge.legacy {
  color: var(--amber);
  background: var(--amber-soft);
}

.money-badge.void {
  color: var(--muted);
  background: #eaecf0;
}

.money-badge.future {
  color: #3538cd;
  background: #eef4ff;
}

.history-money-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.history-money-meta.legacy {
  color: var(--amber);
}

.history-edit {
  display: grid;
  grid-template-columns: 100px 130px minmax(130px, 1fr) minmax(120px, 1fr) auto;
}

.payment-box select {
  width: 100%;
  height: 43px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
}

.client-payment-form > .payment-advance-toggle,
.payment-box > .payment-advance-toggle {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 2px 0 8px;
  padding: 8px 10px;
  border: 1px solid #b2ccff;
  border-radius: 9px;
  color: #1849a9;
  background: #eff4ff;
}

.payment-mode-hint {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.payment-mode-hint.invalid {
  color: var(--red);
}

.payment-advance-badge {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  color: #1849a9;
  background: #dbeafe;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.history-edit[data-payment-edit] {
  grid-template-columns: 90px 125px 88px minmax(130px, 1fr) minmax(120px, 1fr) auto;
}

.history-advance-toggle {
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid #b2ccff;
  border-radius: 7px;
  color: #1849a9;
  background: #eff4ff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .history-edit[data-payment-edit] {
    grid-template-columns: 1fr;
  }
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: .2s ease;
  font-size: 12px;
}

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

.mobile-menu {
  display: none;
}

@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .deal-row {
    grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 196px 92px 28px 24px;
  }

  .client-row {
    grid-template-columns: minmax(180px, 1.3fr) 130px 140px 112px 24px;
  }

  .clients-toolbar {
    grid-template-columns: minmax(220px, 1fr) 180px 200px;
  }

  .clients-toolbar .primary {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .client-row > .deal-value:nth-of-type(3) {
    display: none;
  }

  .deal-row .hide-tablet {
    display: none;
  }

  .money-journal-row {
    grid-template-columns: 92px minmax(180px, 1fr) minmax(120px, .45fr) minmax(130px, max-content);
  }

  .money-journal-action {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    width: 250px;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 10px 0 40px rgba(16,24,40,.25);
  }

  .main {
    padding: 0 20px 40px;
  }

  .topbar {
    min-height: 92px;
  }

  .mobile-menu {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: block;
    background: #fff;
  }

  .topbar > div {
    margin-right: auto;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .form-layout,
  .dashboard-grid,
  .calendar-grid,
  .money-layout {
    grid-template-columns: 1fr;
  }

  .money-entry-panel {
    position: static;
  }

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

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

  .money-settings-form {
    grid-template-columns: 170px minmax(0, 1fr) auto;
  }

  .money-account-actions {
    align-self: end;
  }

  .money-journal-head {
    display: grid;
  }

  .money-filters {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculation-card {
    position: static;
  }

  .backup-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .client-detail-grid {
    grid-template-columns: 1fr;
  }

  .client-report-columns {
    grid-template-columns: 1fr;
  }

  .monthly-primary-metrics,
  .monthly-secondary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-primary-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .monthly-primary-metrics > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .main {
    padding-inline: 14px;
  }

  .topbar .primary {
    width: 40px;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    gap: 0;
  }

  .topbar .primary::first-letter {
    color: #fff;
  }

  .stat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .money-stat-grid,
  .money-accounts-list,
  .money-settings-form,
  .money-account-form,
  .money-filters,
  .money-entry-two {
    grid-template-columns: 1fr;
  }

  .money-account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .money-legacy-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-journal-list {
    max-height: none;
    overflow: visible;
  }

  .money-journal-row {
    grid-template-columns: 82px minmax(0, 1fr) auto;
  }

  .money-journal-account {
    grid-column: 2;
  }

  .money-journal-amount {
    grid-column: 3;
    grid-row: 1;
  }

  .money-journal-action {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .stat-card {
    min-height: 118px;
    padding: 18px;
  }

  .stat-card strong {
    margin-top: 12px;
  }

  .fields,
  .segmented,
  .segmented.two-options,
  .detail-metrics {
    grid-template-columns: 1fr;
  }

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

  .weekday-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-section {
    padding: 19px;
  }

  .deals-toolbar {
    grid-template-columns: 1fr;
  }

  .clients-toolbar {
    grid-template-columns: 1fr;
  }

  .clients-toolbar .primary {
    grid-column: auto;
    justify-self: stretch;
  }

  .financial-report .panel-head,
  .financial-report-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .financial-report-controls input,
  .financial-report-controls .secondary {
    width: 100%;
  }

  .monthly-primary-metrics,
  .monthly-secondary-metrics {
    grid-template-columns: 1fr;
  }

  .monthly-primary-metrics > div {
    min-height: 82px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .monthly-primary-metrics > div:last-child {
    border-bottom: 0;
  }

  .attention-list,
  .financial-operations-list,
  .planned-closures-list {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .attention-list .collect-actions {
    flex-direction: row;
  }

  .closure-row {
    grid-template-columns: 92px minmax(0, 1fr) 18px;
  }

  .closure-value {
    grid-column: 2;
    text-align: left;
  }

  .closure-row .row-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .financial-operation-row {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .financial-operation-row > span:last-child {
    grid-column: 2;
    text-align: left;
  }

  .deal-row {
    grid-template-columns: minmax(0, 1fr) 90px 26px 20px;
    gap: 10px;
  }

  .client-row {
    grid-template-columns: minmax(0, 1fr) 105px 20px;
    gap: 10px;
  }

  .client-row > .deal-value,
  .client-row > .status {
    display: none;
  }

  .deal-row .hide-mobile {
    display: none;
  }

  .upcoming-item {
    padding: 14px 17px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .upcoming-item .due-date {
    display: none;
  }

  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-height: 94vh;
    border-radius: 16px 16px 0 0;
  }

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

  .schedule-row {
    grid-template-columns: 22px 1fr auto auto;
    gap: 7px;
    padding: 11px 11px;
  }

  /* На телефоне статус платежа (ОПЛАЧЕНО / ПРОСРОЧЕНО / СЕГОДНЯ) остаётся
     виден напротив каждой даты, только в компактном виде. */
  .schedule-row .schedule-state {
    display: inline-block;
    font-size: 8px;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .client-deal-card {
    grid-template-columns: minmax(0, 1fr) auto 18px;
  }

  .client-deal-card .status {
    display: none;
  }

  .client-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-report-metrics > div:nth-child(2) {
    border-right: 0;
  }

  .client-report-metrics > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .client-report-row {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .client-report-row > strong,
  .client-report-row > span:last-child {
    grid-column: 2;
  }
}

/* Частичная оплата и подсказки */
.schedule-state.partial {
  color: var(--amber);
  background: var(--amber-soft);
}

.schedule-state.today {
  color: var(--blue);
  background: var(--blue-soft);
}

.partial-note {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
}

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

/* Экран входа по паролю */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, .55);
  backdrop-filter: blur(4px);
}

.auth-overlay.open {
  display: flex;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.auth-card h2 {
  margin: 4px 0 0;
}

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

.auth-error {
  margin: 0;
  min-height: 18px;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}

.auth-card .text-button {
  align-self: center;
}

/* ----------------------------------------------------------------------------
   Редактирование сделки и оплат
---------------------------------------------------------------------------- */

.ghost-button {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 9px 16px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ghost-button:hover {
  background: #f9fafb;
}

.ghost-button.full {
  width: 100%;
  margin-top: 10px;
}

.deal-detail-head {
  position: relative;
}

.deal-detail-actions {
  margin: -7px 42px 15px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.deal-detail-actions .edit-deal-button {
  position: static;
  padding: 7px 14px;
}

.deal-client-back-button {
  padding: 7px 13px;
  color: #1849a9;
  border-color: #b2ccff;
  background: var(--blue-soft);
}

.deal-client-back-button span {
  margin-right: 4px;
  font-size: 16px;
  line-height: 1;
}

.history-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.history-actions .icon-button {
  width: 26px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
}

.history-actions .icon-button[data-edit-payment],
.history-actions .icon-button[type="submit"] {
  color: var(--blue);
  background: var(--blue-soft);
}

.history-hint {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 10px;
}

.history-edit {
  flex-wrap: wrap;
}

.history-edit input {
  flex: 1 1 100px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  font-size: 11px;
}

.edit-banner {
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 11px;
  font-weight: 600;
}

.calc-warning {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.calc-warning.is-loss {
  color: var(--red, #d92d20);
  background: var(--red-soft, #fef3f2);
}

/* ----------------------------------------------------------------------------
   Экран «На сегодня», быстрая оплата и напоминания
---------------------------------------------------------------------------- */

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.today-total {
  text-align: right;
}

.today-total strong {
  display: block;
  font-size: 20px;
  letter-spacing: -.02em;
}

.today-total.danger strong {
  color: var(--red);
}

.today-total span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.collect-list {
  min-height: 220px;
}

.collect-item {
  padding: 14px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}

.collect-item:last-child {
  border-bottom: 0;
}

.collect-item.overdue {
  border-left-color: var(--red);
}

.collect-item.today {
  border-left-color: var(--blue);
}

.collect-main {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
}

.collect-main strong,
.collect-main span {
  display: block;
}

.collect-main .collect-breakdown {
  white-space: normal;
  line-height: 1.45;
}

.collect-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.collect-main span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.collect-main:hover strong {
  color: var(--blue);
}

.collect-meta {
  text-align: right;
}

.collect-amount {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}

.collect-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.status.today-pill {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.collect-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.collect-actions .small-button {
  width: auto;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.collect-pay {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.collect-pay:hover {
  background: var(--blue-dark);
}

.quick-pay {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-radius: 11px;
  background: var(--blue-soft);
}

.quick-pay label {
  display: block;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.quick-pay input,
.quick-pay select {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
}

.quick-pay input:focus,
.quick-pay select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.quick-pay-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

.client-payment-group.editing {
  margin: 0 -8px;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 8px;
  background: var(--blue-soft);
}

.client-payment-group[data-payment-group-refund] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  padding-top: 14px;
  padding-bottom: 14px;
}

.client-payment-group[data-payment-group-refund] > .client-payment-edit-note,
.client-payment-group[data-payment-group-refund] > .client-refund-allocation-preview,
.client-payment-group[data-payment-group-refund] > .client-payment-group-actions {
  grid-column: 1 / -1;
}

.client-payment-group[data-payment-group-refund] > label {
  color: #344054;
  font-size: 11px;
  font-weight: 700;
}

.client-payment-group[data-payment-group-refund] > label input,
.client-payment-group[data-payment-group-refund] > label select {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
}

.client-refund-allocation-preview {
  margin: 2px 0 0;
}

.client-payment-group[data-payment-group-refund] > .client-payment-group-actions {
  justify-content: stretch;
}

.client-payment-group[data-payment-group-refund] > .client-payment-group-actions button {
  flex: 1;
}

@media (max-width: 620px) {
  .client-payment-group[data-payment-group-refund] {
    grid-template-columns: 1fr;
  }

  .client-payment-group[data-payment-group-refund] > .client-payment-edit-note,
  .client-payment-group[data-payment-group-refund] > .client-refund-allocation-preview,
  .client-payment-group[data-payment-group-refund] > .client-payment-group-actions {
    grid-column: 1;
  }
}

.client-payment-group-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-pay-actions .primary {
  flex: 1;
  margin-top: 0;
}

.quick-pay-actions .ghost-button {
  margin-top: 0;
}

/* Модалка напоминания */

.reminder-modal {
  width: min(460px, 100%);
}

.refund-cancel-modal {
  width: min(500px, 100%);
}

.refund-cancel-content {
  padding: 28px;
}

.refund-cancel-content h2 {
  margin: 5px 42px 0 0;
  font-size: 22px;
}

.refund-cancel-summary {
  margin: 7px 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.refund-cancel-warning {
  margin-bottom: 18px;
  border: 1px solid #fedf89;
  border-radius: 10px;
  padding: 12px 14px;
  color: #7a2e0e;
  background: #fffaeb;
  font-size: 12px;
  line-height: 1.5;
}

.refund-cancel-error {
  min-height: 18px;
  margin: 7px 0 0;
}

.refund-cancel-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.refund-cancel-actions .primary,
.refund-cancel-actions .secondary {
  width: 100%;
}

.refund-cancel-submit {
  border-color: #b54708;
  background: #b54708;
}

.refund-cancel-submit:hover {
  background: #93370d;
}

#reminderContent {
  position: relative;
  padding: 26px 26px 24px;
}

.reminder-head {
  margin-bottom: 16px;
}

.reminder-head h2 {
  margin: 5px 40px 0 0;
  font-size: 20px;
}

.reminder-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.reminder-label {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.reminder-text {
  width: 100%;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.reminder-text:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.reminder-actions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.reminder-actions .primary.full {
  margin-top: 0;
}

.reminder-actions .secondary {
  width: 100%;
}

.reminder-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.is-disabled {
  opacity: .5;
}

@media (max-width: 860px) {
  .today-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .collect-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }

  .collect-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .quick-pay {
    grid-template-columns: 1fr;
  }
}

/* Чекбокс «WhatsApp на этом же номере» в форме сделки */
.check-inline {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: end;
  min-height: 43px;
  color: #344054;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.check-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ============================================================================
   ПОЛИРОВКА 2026 — «Кобальт»
   Слой визуального редизайна поверх базовых стилей. Меняет только оформление:
   токены, типографическую шкалу, чипы статусов, поля/кнопки, выравнивание чисел,
   плотность и состояния. Бизнес-логика, разметка, id/name/data-* не затронуты.
   ========================================================================== */

:root {
  --background: #f4f6fa;
  --line: #e7ebf1;
  --muted: #5b6473;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 30px rgba(16, 24, 40, .07);
  --ink: #101828;
  --danger-strong: #d92d20;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --ring: 0 0 0 3px rgba(37, 99, 235, .12);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 2px rgba(16, 24, 40, .03);
  --shadow-pop: 0 18px 40px rgba(16, 24, 40, .12);
}

body {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: rgba(37, 99, 235, .16);
}

.primary,
.secondary {
  border-radius: var(--radius-sm);
  letter-spacing: -.005em;
}

.primary {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 18px rgba(37, 99, 235, .22);
}

.primary:hover {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 10px 22px rgba(37, 99, 235, .28);
}

.primary:focus-visible,
.secondary:focus-visible,
.ghost-button:focus-visible,
.nav-item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.field input,
.field select,
.deals-toolbar input,
.deals-toolbar select,
.modal input,
.modal select {
  height: 44px;
  border-radius: var(--radius-sm);
}

.field input,
.field select,
.field textarea,
.deals-toolbar input,
.deals-toolbar select,
.modal input,
.modal select {
  border-color: #d4dae3;
  border-radius: var(--radius-sm);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.deals-toolbar input:focus,
.deals-toolbar select:focus,
.modal input:focus,
.modal select:focus {
  box-shadow: var(--ring);
}

.field > span,
.label-title {
  font-size: 13px;
}

.status {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .005em;
}

.panel,
.stat-card {
  box-shadow: var(--shadow-card);
}

.stat-card {
  border-radius: var(--radius-md);
}

.stat-card.accent {
  box-shadow: 0 16px 34px rgba(16, 24, 40, .22);
}

.calculation-card {
  box-shadow: var(--shadow-pop);
}

.deals-list,
.clients-list {
  max-height: 640px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #cbd2dd transparent;
  scrollbar-width: thin;
}

.deals-list::-webkit-scrollbar,
.clients-list::-webkit-scrollbar {
  width: 8px;
}

.deals-list::-webkit-scrollbar-thumb,
.clients-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: #cbd2dd;
  background-clip: padding-box;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  transition: filter .12s ease;
}

.icon-button:hover {
  filter: brightness(.96);
}

.icon-button[data-refund-payment],
.icon-button[data-refund-payment-group] {
  color: #b54708;
  background: var(--amber-soft);
}

.icon-button[data-cancel-refund-entry] {
  color: #175cd3;
  background: var(--blue-soft);
}

.history-actions .icon-button[type="submit"],
.client-payment-group-actions .icon-button[type="submit"] {
  color: #fff;
  background: var(--blue);
}

.history-actions .icon-button[data-edit-payment],
.icon-button[data-edit-payment-group] {
  color: #475467;
  background: #eef1f5;
}

.stat-label {
  font-size: 13px;
}

.stat-card strong {
  font-size: 30px;
}

.stat-card small {
  font-size: 12px;
}

.danger-card strong {
  color: var(--danger-strong);
}

.panel-head-summary strong {
  font-size: 20px;
}

.panel-head-summary span {
  font-size: 12px;
}

.plan-row > span {
  font-size: 12.5px;
}

.plan-row > strong {
  font-size: 18px;
}

.plan-row > small {
  font-size: 11.5px;
}

.plan-row.total > strong {
  color: var(--blue-dark);
}

.financial-report-controls label {
  font-size: 11px;
}

.financial-report-controls input {
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.monthly-primary-metrics span,
.monthly-secondary-metrics span {
  font-size: 12px;
}

.monthly-primary-metrics strong {
  font-size: 22px;
}

.monthly-primary-metrics small {
  font-size: 11.5px;
}

.monthly-secondary-metrics strong {
  font-size: 16px;
}

.financial-operations-head h3 {
  font-size: 14px;
}

.financial-operations-head span {
  font-size: 12px;
}

.financial-operation-row > span:first-child {
  font-size: 12px;
}

.financial-operation-row strong {
  font-size: 14px;
}

.financial-operation-row small {
  font-size: 11.5px;
}

.panel-subtitle {
  font-size: 12px;
}

.compact-select {
  font-size: 11px;
}

.compact-select select {
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.closure-date {
  font-size: 12.5px;
}

.closure-client strong,
.closure-value strong {
  font-size: 14px;
}

.closure-client small,
.closure-value small {
  font-size: 11.5px;
}

.person span {
  font-size: 12.5px;
}

.due-date strong {
  font-size: 14px;
}

.amount {
  font-size: 16.5px;
}

.empty-state strong {
  font-size: 15px;
}

.today-total strong {
  font-size: 22px;
}

.today-total span {
  font-size: 12px;
}

.today-total.danger strong {
  color: var(--danger-strong);
}

.collect-item.overdue,
.collect-item.today {
  border-left-width: 4px;
}

.collect-main strong {
  font-size: 15.5px;
}

.collect-main span {
  font-size: 12.5px;
}

.collect-amount {
  font-size: 17px;
}

.collect-date {
  font-size: 12px;
}

.deal-model span,
.deal-value span {
  font-size: 12px;
}

.deal-value strong {
  font-size: 15px;
}

.detail-metric span {
  font-size: 12px;
}

.detail-metric strong {
  font-size: 17px;
}

.schedule-row {
  font-size: 12.5px;
}

.schedule-state {
  font-size: 11px;
}

.detail-section h3 {
  font-size: 16px;
}

.history-row {
  font-size: 12.5px;
}

.client-report-metrics span {
  font-size: 11px;
}

.client-report-metrics strong {
  font-size: 14px;
}

.client-report-row {
  font-size: 12px;
}

.client-report-row small {
  font-size: 11px;
}

.client-report-row .status {
  font-size: 10.5px;
}

.client-report-date {
  font-size: 11px;
}

.client-deal-card span > small {
  font-size: 11.5px;
}

.money-account-card span > strong {
  font-size: 14px;
}

.money-account-card span > small {
  font-size: 11px;
}

.money-account-card > strong {
  font-size: 19px;
}

.money-account-card > strong.negative {
  color: var(--danger-strong);
}

.money-settings-form p {
  font-size: 11px;
}

.money-rule {
  font-size: 11px;
}

.money-filters input,
.money-filters select {
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.money-journal-date,
.money-journal-account {
  font-size: 12px;
}

.money-journal-main strong {
  font-size: 14px;
}

.money-journal-main small {
  font-size: 11px;
}

.money-journal-amount {
  font-size: 15px;
}

.money-journal-amount.expense {
  color: var(--danger-strong);
}

.money-badge {
  font-size: 9.5px;
}

.history-money-meta {
  font-size: 11px;
}

.skip-item strong {
  font-size: 12.5px;
}

.skip-item span {
  font-size: 12px;
}

.pause-client {
  font-size: 12.5px;
}

.personal-skip-item {
  font-size: 11.5px;
}

.small-button {
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.card-note {
  font-size: 12px;
}

.toast {
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.calc-highlight strong {
  font-size: 30px;
}

@media (max-width: 620px) {
  .deals-list,
  .clients-list {
    max-height: none;
    overflow: visible;
  }
}

/* ============================================================================
   КОБАЛЬТ — УСИЛЕННАЯ ВИЗУАЛЬНАЯ ИЕРАРХИЯ
   Более заметный слой редизайна после проверки владельцем.
   ========================================================================== */

body {
  background:
    radial-gradient(circle at 75% -10%, rgba(37, 99, 235, .09), transparent 32rem),
    var(--background);
}

.sidebar {
  background:
    radial-gradient(circle at 15% 0%, rgba(59, 130, 246, .22), transparent 22rem),
    linear-gradient(180deg, #14213d 0%, #0b1220 100%);
  box-shadow: 18px 0 48px rgba(16, 24, 40, .12);
}

.brand-mark {
  background: linear-gradient(145deg, #5b8cff, #315eea);
  box-shadow: 0 10px 24px rgba(49, 94, 234, .35);
}

.nav-item {
  border: 1px solid transparent;
  border-radius: 12px;
}

.nav-item.active {
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(135deg, #4775f2, #315eea);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

.main-content {
  padding-top: 32px;
}

.page-header {
  margin-bottom: 26px;
}

.page-header h1 {
  font-size: clamp(30px, 2.5vw, 38px);
  letter-spacing: -.035em;
}

.eyebrow {
  color: #3568c8;
  font-size: 11px;
  letter-spacing: .16em;
}

.stats-grid,
.money-stats-grid {
  gap: 18px;
}

.stat-card {
  min-height: 142px;
  padding: 24px;
  border-color: rgba(208, 215, 226, .82);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .07);
  backdrop-filter: blur(10px);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .35), transparent);
}

.stat-card.accent {
  border-color: rgba(73, 114, 231, .28);
  background:
    radial-gradient(circle at 90% 10%, rgba(68, 111, 231, .42), transparent 15rem),
    linear-gradient(145deg, #18233a, #0d1526);
  box-shadow: 0 18px 42px rgba(13, 21, 38, .24);
}

.stat-card.accent::before {
  background: linear-gradient(90deg, #72a0ff, #3f72ee);
}

.stat-card strong {
  margin-top: 14px;
  font-size: 32px;
  letter-spacing: -.035em;
}

.panel {
  overflow: hidden;
  border-color: rgba(208, 215, 226, .84);
  border-radius: 18px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 14px 36px rgba(16, 24, 40, .07);
  backdrop-filter: blur(10px);
}

.panel-head {
  padding-top: 22px;
  padding-bottom: 20px;
  background: linear-gradient(180deg, rgba(248, 250, 255, .95), rgba(255, 255, 255, .95));
}

.panel-head h2 {
  font-size: 21px;
  letter-spacing: -.025em;
}

.dashboard-grid,
.money-layout {
  gap: 20px;
}

.plan-row {
  min-height: 76px;
  padding-right: 22px;
  padding-left: 22px;
}

.plan-row.total {
  background: linear-gradient(135deg, #eef4ff, #f6f8ff);
}

.monthly-primary-metrics > div {
  padding: 22px;
}

.monthly-secondary-metrics {
  gap: 12px;
  padding: 14px 20px;
  background: #f7f9fc;
}

.monthly-secondary-metrics > div {
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .04);
}

.collect-item,
.deal-row,
.client-row,
.closure-row,
.financial-operation-row,
.money-journal-row {
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.collect-item:hover,
.deal-row:hover,
.client-row:hover,
.closure-row:hover,
.financial-operation-row:hover,
.money-journal-row:hover {
  position: relative;
  z-index: 1;
  background: #f7faff;
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, .45);
}

.primary {
  border-radius: 12px;
  background: linear-gradient(135deg, #4775f2, #315eea);
}

.secondary {
  border-color: #d4dbe7;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.money-entry-panel,
.deal-side-panel {
  border-color: rgba(77, 115, 220, .18);
  box-shadow: 0 18px 42px rgba(16, 24, 40, .09);
}

.money-account-card {
  border-color: #e1e7f0;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f8faff);
}

.detail-metric,
.client-report-metrics > div {
  border: 1px solid #e3e8f0;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f7f9fc);
}

.schedule-row {
  min-height: 52px;
}

.toast {
  box-shadow: 0 18px 42px rgba(16, 24, 40, .2);
}

@media (max-width: 860px) {
  .main-content {
    padding-top: 24px;
  }

  .stat-card {
    min-height: 128px;
  }
}

@media (max-width: 620px) {
  body {
    background:
      radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .1), transparent 20rem),
      var(--background);
  }

  .main-content {
    padding-top: 22px;
  }

  .page-header {
    margin-bottom: 20px;
  }

  .page-header h1 {
    font-size: 27px;
  }

  .stat-card {
    min-height: 122px;
    padding: 20px;
    border-radius: 16px;
  }

  .stat-card strong {
    font-size: 30px;
  }

  .panel {
    border-radius: 16px;
  }

  .monthly-primary-metrics > div {
    padding: 20px;
  }
}

/* Предварительный расчёт пауз и отсрочек */
.schedule-impact-preview {
  grid-column: 1 / -1;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid #c9d7f2;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7faff, #eef4ff);
}

.schedule-impact-preview:empty {
  display: none;
}

.schedule-impact-preview.compact {
  margin-top: 10px;
}

.schedule-impact-head,
.schedule-impact-summary {
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-impact-head {
  color: #1849a9;
  background: rgba(37, 99, 235, .07);
}

.schedule-impact-head strong {
  font-size: 12px;
}

.schedule-impact-head span,
.schedule-impact-summary {
  color: #475467;
  font-size: 11px;
}

.schedule-impact-summary {
  align-items: flex-start;
  border-top: 1px solid rgba(37, 99, 235, .11);
  border-bottom: 1px solid rgba(37, 99, 235, .11);
}

.schedule-impact-list {
  max-height: 250px;
  overflow-y: auto;
}

.schedule-impact-item {
  padding: 10px 13px;
  border-bottom: 1px solid rgba(37, 99, 235, .1);
}

.schedule-impact-item:last-child {
  border-bottom: 0;
}

.schedule-impact-item strong,
.schedule-impact-item span,
.schedule-impact-item small {
  display: block;
}

.schedule-impact-item strong {
  color: #101828;
  font-size: 12px;
}

.schedule-impact-item span {
  margin-top: 3px;
  color: #344054;
  font-size: 11px;
}

.schedule-impact-item small {
  margin-top: 5px;
  color: #b54708;
  font-size: 10px;
  line-height: 1.4;
}

.schedule-impact-item.warning {
  background: #fffaeb;
}

.schedule-impact-item.no-effect {
  background: #f8fafc;
}

.deal-notes-row {
  align-items: flex-start;
}

.deal-notes-row strong {
  max-width: 62%;
  line-height: 1.5;
  text-align: right;
  white-space: normal;
}

.schedule-impact-empty {
  margin: 0;
  padding: 12px 13px;
  color: var(--muted);
  font-size: 11px;
}

/* Компактный выбор телефонов для персональной паузы */
.pause-client-picker {
  display: grid;
  gap: 7px;
}

.pause-client-picker > input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
}

.pause-client-picker > input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: var(--ring);
}

.pause-client-picker > input:disabled {
  color: var(--muted);
  background: #f2f4f7;
}

.pause-client-count {
  color: var(--muted);
  font-size: 10px;
}

.pause-client-list {
  max-height: 286px;
}

.clients-toolbar {
  grid-template-columns: minmax(220px, 1fr) 175px 190px 205px auto;
}

@media (max-width: 1100px) {
  .clients-toolbar {
    grid-template-columns: minmax(220px, 1fr) 1fr;
  }

  .clients-toolbar .primary {
    grid-column: auto;
    justify-self: stretch;
  }
}

@media (max-width: 620px) {
  .schedule-impact-head,
  .schedule-impact-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .clients-toolbar {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   ТЕМА «ФИНТЕХ» 2026 — слой поверх «Кобальта».
   Меняет только оформление: шрифт Inter, индиго-фиолетовая палитра, глубина
   карточек, цветные статусы, градиентный сайдбар и кнопки. Разметка, id/name,
   data-* и логика не затронуты. Удаляется откатом этого блока.
   ========================================================================== */

:root {
  --blue: #4f46e5;
  --blue-dark: #4338ca;
  --blue-soft: #eef0ff;
  --violet: #7c3aed;
  --navy: #16132e;
  --navy-2: #221d45;
  --green: #0f9d6c;
  --green-soft: #e6f7f0;
  --red: #e5463b;
  --red-soft: #fdecea;
  --amber: #d97706;
  --amber-soft: #fdf3e3;
  --text: #16132e;
  --ink: #16132e;
  --muted: #5b6478;
  --line: #e7e9f3;
  --background: #f3f4fb;
  --radius-sm: 11px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --ring: 0 0 0 3px rgba(79, 70, 229, .18);
  --shadow: 0 1px 2px rgba(22, 19, 46, .05), 0 12px 30px rgba(22, 19, 46, .07);
  --shadow-card: 0 1px 2px rgba(22, 19, 46, .05), 0 10px 26px rgba(22, 19, 46, .06);
  --shadow-pop: 0 24px 50px rgba(22, 19, 46, .16);
  --grad-accent: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  --grad-hero: linear-gradient(150deg, #312e81 0%, #4f46e5 58%, #7c3aed 125%);
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: -.006em;
  background:
    radial-gradient(1100px 460px at 100% -8%, rgba(124, 58, 237, .07), transparent 60%),
    radial-gradient(820px 440px at -8% -4%, rgba(79, 70, 229, .07), transparent 55%),
    var(--background);
}

h1, h2 {
  letter-spacing: -.022em;
}

.eyebrow {
  color: var(--blue);
  letter-spacing: .14em;
  font-weight: 700;
}

/* Сайдбар — глубокий индиго-фиолетовый градиент со свечением */
.sidebar {
  background:
    radial-gradient(150px 150px at 34px 30px, rgba(124, 58, 237, .5), transparent 70%),
    radial-gradient(360px 220px at 0 100%, rgba(79, 70, 229, .28), transparent 72%),
    linear-gradient(180deg, #221d45 0%, #16132e 58%, #0d0a20 100%);
  border-right: 1px solid rgba(255, 255, 255, .05);
}

.nav-item {
  border-radius: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(99, 102, 241, .98), rgba(124, 58, 237, .98));
  box-shadow: 0 10px 22px rgba(79, 70, 229, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.nav-item.active .nav-icon {
  color: #fff;
}

/* Карточки-показатели — мягкая глубина и подъём при наведении */
.stat-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(22, 19, 46, .11);
}

/* Геройская карточка — насыщенный градиент */
.stat-card.accent {
  border: none;
  color: #fff;
  background: var(--grad-hero);
  box-shadow: 0 18px 40px rgba(79, 70, 229, .35);
}

.stat-card.accent .stat-label,
.stat-card.accent small {
  color: rgba(255, 255, 255, .82);
}

.stat-card.accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px rgba(79, 70, 229, .45);
}

/* Главные кнопки — градиент с цветной тенью */
.primary {
  border: none;
  background: var(--grad-accent);
  box-shadow: 0 1px 2px rgba(22, 19, 46, .1), 0 10px 22px rgba(79, 70, 229, .3);
}

.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  background: var(--grad-accent);
  box-shadow: 0 14px 28px rgba(79, 70, 229, .42);
}

.primary:active {
  transform: translateY(0);
}

/* Цветные статусы и строки графика */
.status,
.schedule-state {
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 999px;
}

.status.active { color: #4338ca; background: #eef0ff; }
.status.closed { color: #0f7a52; background: #e6f7f0; }
.status.overdue { color: #c43c2f; background: #fdecea; }
.status.written_off { color: #6d28d9; background: #f3effe; }
.status.terminated { color: #b45309; background: #fdf3e3; }

.schedule-state.paid { color: #0f7a52; background: #e6f7f0; }
.schedule-state.late { color: #c43c2f; background: #fdecea; }
.schedule-state.today { color: #b45309; background: #fdf3e3; }
.schedule-state.deferred { color: #b45309; background: #fdf3e3; }
.schedule-state.partial { color: #4338ca; background: #eef0ff; }
.schedule-state.pause { color: #6d28d9; background: #f3effe; }

/* ---- Усиление: крупные цифры, цветные карточки по смыслу, иконки-чипы ---- */
.stat-card {
  position: relative;
  padding: 22px 22px 20px;
}

.stat-card .stat-label {
  font-size: 12.5px;
  letter-spacing: .01em;
}

.stat-card > strong {
  display: block;
  margin: 8px 0 2px;
  font-size: 38px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
}

.stat-card.accent > strong {
  font-size: 44px;
}

/* Иконка-чип в углу карточки */
.stat-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background-color: #eef0ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
}

/* Геройская карточка — белая иконка-кошелёк на полупрозрачном чипе */
.stat-card.accent {
  padding: 22px 24px 22px;
}

.stat-card.accent::before {
  background-color: rgba(255, 255, 255, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Ccircle cx='16.5' cy='14' r='1'/%3E%3C/svg%3E");
}

/* Просрочено — мягкий красный фон + красная цифра + знак внимания */
.stat-card.danger-card {
  background: linear-gradient(180deg, #ffffff 0%, #fef4f3 100%);
  border-color: #f6d6d2;
}

.stat-card.danger-card > strong {
  color: var(--red);
}

.stat-card.danger-card::before {
  background-color: #fdecea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e5463b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 9v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* 3-я карточка (ожидания/неделя) — янтарный акцент, часы */
.stat-grid .stat-card:nth-child(3) {
  background: linear-gradient(180deg, #ffffff 0%, #fff8ec 100%);
  border-color: #f1e3c5;
}

.stat-grid .stat-card:nth-child(3)::before {
  background-color: #fdf3e3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* 4-я карточка (портфель/остаток) — изумрудный акцент, стопка */
.stat-grid .stat-card:nth-child(4) {
  background: linear-gradient(180deg, #ffffff 0%, #ecf7f1 100%);
  border-color: #cfe9dd;
}

.stat-grid .stat-card:nth-child(4)::before {
  background-color: #e6f7f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f9d6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
}

/* Панели — мягче и глубже, заметнее заголовок */
.panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.plan-row.total {
  background: linear-gradient(180deg, #f3f1ff 0%, #eef0ff 100%);
  border-radius: 14px;
}

/* ---- Перенос концепта (только CSS): очередь с аватарами, KPI-чипы, водяной знак ---- */

/* Подписи KPI как чипы */
.stat-card > small {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef1f7;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.stat-card.danger-card > small { background: #fdecea; color: #b42318; }
.stat-grid .stat-card:nth-child(3) > small { background: #fdf3e3; color: #8a5208; }
.stat-grid .stat-card:nth-child(4) > small { background: #e6f7f0; color: #0c7350; }
.stat-card.accent > small { background: rgba(255, 255, 255, .18); color: #fff; }

/* Водяной знак ₽ на геройской карточке */
.stat-card.accent {
  overflow: hidden;
}

.stat-card.accent::after {
  content: "₽";
  position: absolute;
  right: -8px;
  bottom: -42px;
  font-size: 158px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* Рабочая очередь «Требует внимания» — аватары, акценты, кнопки */
.collect-item {
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  border-left: 0;
  transition: background .15s ease;
}

.collect-item:hover {
  background: #f7f8fc;
}

.collect-item::before {
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 15px;
  align-self: center;
  background-color: #eef0ff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
}

.collect-item.overdue::before {
  background-color: #fdecea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e5463b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
}

.collect-amount {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.collect-item.overdue .collect-amount {
  color: var(--red);
}

.collect-pay {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  box-shadow: 0 6px 14px rgba(79, 70, 229, .28);
}

.collect-pay:hover {
  filter: brightness(1.05);
  background: linear-gradient(135deg, #6366f1, #7c3aed);
}

.collect-remind {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

/* Списки «Платят сегодня» и «Нужно связаться» стоят в две колонки
   (.today-grid), поэтому каждая панель узкая. Раскладка строки в одну линию
   (аватар · имя · бейдж · сумма · 4 кнопки) не помещалась: имя схлопывалось
   в «Асла…», а кнопки уезжали за край. Ставим аватар + имя + сумму в первую
   строку, а кнопки — отдельной строкой во всю ширину; имя показывается
   полностью и при нехватке места переносится. Действует на всех размерах,
   т.к. панель узкая и на компьютере, и на телефоне. */
.today-panel .collect-item {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 12px;
}
.today-panel .collect-main strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.today-panel .collect-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.today-panel .contact-chips {
  grid-column: 1 / -1;
}

/* Раздел «Группы»: выбор даты «оплата на дату» в шапке. */
.groups-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.groups-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.groups-date-field input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
}

/* Телефон: строка группы. Общая сетка .client-row рассчитана на список
   клиентов и на узком экране прячет метрики за краем. Для групп раскладываем
   иначе: название сверху, а показатели (в т.ч. «оплата на дату») переносятся
   рядом под ним и все видны. */
@media (max-width: 620px) {
  .client-row.group-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    padding: 16px;
  }
  .client-row.group-row .deal-model {
    flex: 1 1 100%;
    min-width: 0;
  }
  .client-row.group-row .deal-value {
    display: block;
    flex: 0 0 auto;
  }
  .client-row.group-row .row-arrow {
    display: none;
  }
}

/* Телефон: та же раскладка для прочих списков сбора вне панелей «День». */
@media (max-width: 620px) {
  .collect-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 14px 16px;
  }
  .collect-item::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
  .collect-main strong {
    white-space: normal;
    overflow: visible;
  }
  .collect-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .contact-chips {
    grid-column: 1 / -1;
  }
}

/* Строка графика, оплаченная с опозданием */
.schedule-row.paid-late {
  background: linear-gradient(180deg, #fffaf0, #fff6e8);
}

.late-note {
  display: block;
  margin-top: 3px;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
}

/* ===== Доска объявлений в «Обзоре» ======================================= */
.board-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f5fa;
}
.board-view-toggle button {
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.board-view-toggle button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(22, 25, 60, .12);
}
.board-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 8px;
  margin: 16px 24px 6px;
}
.board-form select[name="clientId"] { max-width: 190px; }
.board-form input,
.board-form select {
  height: 43px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: .15s ease;
}
.board-form input:focus,
.board-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(55, 112, 255, .14);
}
.board-list {
  padding: 0 24px 20px;
}
.board-section-title {
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.board-section-title.review { color: var(--green); }
.board-section-title.discuss { color: #6d28d9; }
.board-section-title.attention { color: var(--red); }
.board-agenda {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.board-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.board-note:last-child { border-bottom: 0; }
.board-check {
  width: 22px;
  height: 22px;
  border: 2px solid #c7cbd8;
  border-radius: 7px;
  background: #fff;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.board-note.done .board-check { border-color: var(--green); background: var(--green); }
.board-note-body { min-width: 0; cursor: text; }
.board-note-text { display: block; font-size: 13.5px; overflow-wrap: break-word; }
.board-note.done .board-note-text { color: var(--muted); text-decoration: line-through; }
.board-note-meta { display: block; margin-top: 2px; color: #b45309; font-size: 11px; font-weight: 700; }
.board-client { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.board-client .client-link { color: #534ab7; font-weight: 700; font-size: 12.5px; }
.board-note-due { color: var(--red); font-size: 11px; font-weight: 700; white-space: nowrap; }
.board-sticker .board-client { display: flex; margin: 6px 0 0; }
.board-col-card .board-client { display: flex; margin-top: 4px; }
.board-note.pinned .board-note-text { font-weight: 700; }
.board-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.board-chip-review { background: var(--green-soft); color: var(--green); }
.board-chip-discuss { background: #f4f0ff; color: #6d28d9; }
.board-chip-attention { background: var(--red-soft); color: var(--red); }
.board-note-actions { display: inline-flex; gap: 2px; }
.board-icon {
  border: 0;
  padding: 3px 6px;
  border-radius: 7px;
  background: transparent;
  color: #98a2b3;
  font-size: 13px;
  cursor: pointer;
  filter: grayscale(1);
}
.board-icon:hover { background: #f2f4f7; color: var(--ink); }
.board-icon.active { filter: none; color: var(--ink); }
.board-stickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.board-sticker {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.board-sticker.board-review { background: var(--green-soft); border-color: #bce7cf; }
.board-sticker.board-discuss { background: #f4f0ff; border-color: #d9ccfa; }
.board-sticker.board-attention { background: var(--red-soft); border-color: #f7c8c2; }
.board-sticker.pinned { outline: 2px solid #7c3aed; outline-offset: -2px; }
.board-sticker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.board-sticker.board-review .board-sticker-head { color: var(--green); }
.board-sticker.board-discuss .board-sticker-head { color: #6d28d9; }
.board-sticker.board-attention .board-sticker-head { color: var(--red); }
.board-sticker-text { margin-top: 6px; font-size: 13px; font-weight: 600; overflow-wrap: break-word; cursor: text; }
.board-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.board-column .board-section-title { margin-top: 0; }
.board-col-card {
  position: relative;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid #c7cbd8;
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}
.board-col-card.board-review { border-left-color: var(--green); }
.board-col-card.board-discuss { border-left-color: #7c3aed; }
.board-col-card.board-attention { border-left-color: var(--red); }
.board-col-text { font-size: 12.5px; overflow-wrap: break-word; cursor: text; }
.board-col-card .board-note-actions { position: absolute; top: 6px; right: 6px; opacity: 0; }
.board-col-card:hover .board-note-actions { opacity: 1; }
.board-col-empty { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .board-form { grid-template-columns: 1fr 1fr; margin: 14px 16px 6px; }
  .board-form input[name="text"] { grid-column: 1 / -1; }
  .board-form button { grid-column: 1 / -1; }
  .board-list { padding: 0 16px 16px; }
  .board-columns { grid-template-columns: 1fr; }
  .board-view-toggle { align-self: flex-start; }
  .board-col-card .board-note-actions { opacity: 1; }
}

/* Строки нового плана после реструктуризации — лёгкая фиолетовая подсветка. */
.schedule-row.restructured {
  background: #f7f5ff;
}
.schedule-row.restructured.paid-late {
  background: linear-gradient(180deg, #f7f5ff, #efeafe);
}
.restructure-note {
  display: block;
  margin-top: 3px;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 700;
}

/* Единый бейдж возврата (общий платёж и обычная история оплат) */
.group-refund-note,
.payment-refund-note {
  display: inline-block;
  margin-top: 6px;
}

/* ===================== Календарь платежей (pc-*) ===================== */
.pc-root{--pc-amber:#b54708;--pc-amber-soft:#fffaeb;--pc-violet:#7c3aed;--pc-violet-soft:#f4f0ff;}
.pc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.pc-kpi{position:relative;min-height:142px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;box-shadow:var(--shadow-card,var(--shadow));overflow:hidden;}
/* Шрифт и размеры — как в карточках «Деньги» (без иконок: полоса + число). */
.pc-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);}
/* Шрифт и размеры — ровно как в карточках «Деньги» (заголовок/число/плашка). */
.pc-kpi .pc-lab{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.01em;}
.pc-kpi .pc-val{font-size:38px;font-weight:800;line-height:1.04;letter-spacing:-.03em;margin-top:8px;}
.pc-kpi .pc-sub{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:#eef1f7;color:#475569;font-size:12px;font-weight:600;}
.pc-kpi--red::before{background:var(--red);} .pc-kpi--red .pc-val{color:var(--red);}
.pc-kpi--blue::before{background:var(--blue);} .pc-kpi--blue .pc-val{color:var(--blue-dark);}
.pc-kpi--violet::before{background:var(--pc-violet);} .pc-kpi--violet .pc-val{color:var(--pc-violet);}
.pc-kpi--green::before{background:var(--green);} .pc-kpi--green .pc-val{color:var(--green);}
.pc-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.pc-dot.pc-over{background:var(--red);} .pc-dot.pc-tod{background:var(--blue);}
.pc-dot.pc-fut{background:#98a2b3;} .pc-dot.pc-paid{background:var(--green);}
.pc-dot.pc-res{background:var(--pc-amber);} .pc-dot.pc-def{background:#98a2b3;}

.pc-progress{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-card,var(--shadow));margin-bottom:18px;}
.pc-progress .pc-ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;}
.pc-progress .pc-t{font-size:13.5px;font-weight:700;} .pc-progress .pc-s{font-size:12.5px;color:var(--muted);}
.pc-pbar{display:flex;height:13px;border-radius:7px;overflow:hidden;background:#eef0f3;}
.pc-pbar i{display:block;height:100%;} .pc-p-paid{background:var(--green);} .pc-p-over{background:var(--red);} .pc-p-fut{background:#9db7f0;}
.pc-plegend{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:var(--muted);}
.pc-plegend span{display:inline-flex;align-items:center;gap:7px;} .pc-plegend b{color:var(--text,var(--ink));}

.pc-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card,var(--shadow));margin-bottom:18px;}
.pc-fgroup{display:flex;flex-direction:column;gap:5px;}
.pc-fgroup label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.pc-fgroup select{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--text,var(--ink));min-width:160px;cursor:pointer;}
.pc-fcount{margin-left:auto;align-self:center;font-size:13px;font-weight:600;color:var(--blue-dark);}

.pc-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px;}
.pc-section-title h2{font-size:16px;margin:0;}
.pc-hint{font-size:12.5px;color:var(--muted);}
.pc-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.pc-legend span{display:inline-flex;align-items:center;gap:6px;}

.pc-grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start;}
.pc-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card,var(--shadow));}
.pc-mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.pc-mname{font-size:17px;font-weight:700;text-transform:capitalize;} .pc-mtot{font-size:13px;color:var(--muted);}
.pc-nav{display:flex;gap:6px;} .pc-nav button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:16px;color:var(--navy-2);}
.pc-nav button:hover{background:var(--background);}
.pc-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 14px 0;}
.pc-dow div{text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;padding-bottom:6px;}
.pc-bigcal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:6px 14px 16px;}
.pc-cell{min-height:74px;border:1px solid var(--line);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;background:var(--surface);position:relative;}
.pc-cell.pc-empty{background:transparent;border-color:transparent;}
.pc-cell.pc-click{cursor:pointer;}
.pc-cell .pc-d{font-size:13px;font-weight:600;color:var(--navy-2);}
.pc-cell .pc-sum{margin-top:auto;font-size:13.5px;font-weight:700;} .pc-cell .pc-sum.pc-mini{font-size:12px;color:var(--muted);}
.pc-cell .pc-cnt{font-size:11px;color:var(--muted);margin-top:2px;}
.pc-cell.pc-weekend{background:#fbfbfd;}
.pc-cell.pc-overdue{background:var(--red-soft);border-color:#f7c8c2;} .pc-cell.pc-overdue .pc-sum{color:var(--red);}
.pc-cell.pc-paid{background:var(--green-soft);border-color:#bce7cf;} .pc-cell.pc-paid .pc-sum{color:var(--green);}
.pc-cell.pc-partial{background:#fffaf0;border-color:#fbe3b3;} .pc-cell.pc-partial .pc-sum{color:var(--pc-amber);}
.pc-cell.pc-today{outline:2px solid var(--blue);outline-offset:-2px;background:var(--blue-soft);border-color:#bcd3fb;} .pc-cell.pc-today .pc-sum{color:var(--blue-dark);}
.pc-cell.pc-deferred{background:repeating-linear-gradient(45deg,#fffaf0,#fffaf0 6px,#fdf0d8 6px,#fdf0d8 12px);border:1px dashed #e6c98f;}
.pc-cell.pc-deferred .pc-sum{color:var(--pc-amber);}
.pc-cell.pc-pause{background:#f3f4f7;border-style:dashed;}
.pc-cell .pc-pill{position:absolute;top:7px;right:8px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;}
.pc-cell.pc-today .pc-pill{background:var(--blue);color:#fff;}
.pc-cell .pc-pill.pc-resched{background:var(--pc-amber);color:#fff;}
.pc-heat{display:flex;height:5px;border-radius:3px;margin-top:5px;overflow:hidden;background:#eceff3;}
.pc-heat i{display:block;height:100%;} .pc-heat .pc-f{background:var(--green);}
.pc-cell.pc-overdue .pc-heat .pc-r{background:var(--red);} .pc-cell.pc-future .pc-heat .pc-r{background:#9db7f0;}
.pc-cell.pc-today .pc-heat .pc-r{background:var(--blue);} .pc-cell.pc-paid .pc-heat .pc-r{background:var(--green);}
.pc-cell.pc-partial .pc-heat .pc-r{background:#f4b860;}

.pc-side{padding:16px 18px;} .pc-side h3{margin:0 0 12px;font-size:14px;}
.pc-pf{display:flex;gap:14px;margin:0 0 12px;font-size:12.5px;} .pc-pf b{font-weight:700;} .pc-pf .pc-fact b{color:var(--green);}
.pc-daylist{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;padding-right:4px;}
.pc-dayrow{display:flex;align-items:center;gap:11px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;}
.pc-dayrow .pc-bar{width:4px;align-self:stretch;border-radius:3px;background:#98a2b3;}
.pc-dayrow.pc-over .pc-bar{background:var(--red);} .pc-dayrow.pc-today .pc-bar{background:var(--blue);} .pc-dayrow.pc-paid .pc-bar{background:var(--green);}
.pc-dayrow.pc-rescheduled .pc-bar,.pc-dayrow .pc-bar.pc-res{background:var(--pc-amber);}
.pc-dayrow .pc-meta{flex:1;min-width:0;} .pc-dayrow .pc-nm{font-size:13.5px;font-weight:600;} .pc-dayrow .pc-ml{font-size:12px;color:var(--muted);}
.pc-dayrow .pc-amt{font-size:14px;font-weight:700;}
.pc-stag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block;margin-top:2px;}
.pc-stag.pc-overdue{background:var(--red-soft);color:var(--red);} .pc-stag.pc-today{background:var(--blue-soft);color:var(--blue-dark);}
.pc-stag.pc-future{background:#f2f4f7;color:var(--muted);} .pc-stag.pc-paid{background:var(--green-soft);color:var(--green);}
.pc-stag.pc-partial{background:#fff4e0;color:var(--pc-amber);} .pc-stag.pc-deferred{background:var(--pc-amber-soft);color:var(--pc-amber);} .pc-stag.pc-pause{background:#eef0f3;color:var(--muted);}
.pc-stag.pc-rescheduled{background:var(--pc-amber-soft);color:var(--pc-amber);}
.pc-dayrow.pc-rescheduled,.pc-dayrow.pc-deferred{border-color:#fcdfa6;background:#fffdf6;}
.pc-dayrow.pc-rescheduled .pc-bar,.pc-dayrow.pc-deferred .pc-bar{background:var(--pc-amber);}
.pc-subnote{font-size:11px;color:var(--pc-amber);font-weight:600;margin-top:2px;}
/* события (звёздочки) и доп. состояния */
.pc-star{color:#d4a017;font-size:12px;line-height:1;}
.pc-cell.pc-writeoff,.pc-cell.pc-terminated{background:#f3f4f7;border:1px dashed #cdd3db;} .pc-cell.pc-writeoff .pc-sum,.pc-cell.pc-terminated .pc-sum{color:var(--muted);}
.pc-cell.pc-pause .pc-sum{color:var(--muted);}
.pc-md.pc-writeoff,.pc-md.pc-terminated{background:#e4e7ec;}
.pc-dot.pc-pausedot{background:#fff;border:1.5px dashed #9aa3b2;box-sizing:border-box;}
.pc-yearnav{display:inline-flex;align-items:center;gap:8px;font-size:14px;}
.pc-yearnav button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--navy-2);}
.pc-yearnav button:hover{background:var(--background);}
.pc-eventrow{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px dashed #e0c98a;border-radius:10px;background:#fffdf4;margin-bottom:9px;}
.pc-eventrow .pc-evstar{font-size:15px;}
.pc-eventrow .pc-evttl{font-weight:600;font-size:13px;} .pc-eventrow .pc-evsub{font-size:12px;color:var(--muted);}
.pc-ev-discontinued{border-color:#f3c5bf;background:#fff8f7;} .pc-ev-handover{border-color:#bcd3fb;background:#f6f9ff;} .pc-ev-closing{border-color:#bce7cf;background:#f6fdf9;}

.pc-yeargrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.pc-mini{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-card,var(--shadow));cursor:pointer;transition:transform .08s;}
.pc-mini:hover{transform:translateY(-2px);} .pc-mini.pc-active{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.pc-mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;} .pc-mh .pc-nm{font-size:13.5px;font-weight:700;text-transform:capitalize;} .pc-mh .pc-tt{font-size:12px;color:var(--muted);font-weight:600;}
.pc-minigrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.pc-md{aspect-ratio:1;border-radius:4px;background:#f2f4f7;}
.pc-md.pc-overdue{background:var(--red);} .pc-md.pc-today{background:var(--blue);} .pc-md.pc-paid{background:var(--green);} .pc-md.pc-future{background:#9db7f0;} .pc-md.pc-partial{background:#f4b860;} .pc-md.pc-deferred{background:#e8b86b;} .pc-md.pc-pause{background:#e4e7ec;}
.pc-mf{margin-top:10px;display:flex;justify-content:space-between;align-items:center;} .pc-mf .pc-cnt{font-size:11.5px;color:var(--muted);} .pc-mf .pc-amt{font-size:13.5px;font-weight:700;}

.pc-heatwrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card,var(--shadow));padding:18px;overflow-x:auto;}
.pc-hm{display:flex;gap:3px;min-width:740px;} .pc-wkcol{display:flex;flex-direction:column;gap:3px;}
.pc-cellm{width:14px;height:14px;border-radius:3px;background:#eef0f3;}
.pc-cellm.pc-l1{background:#cfe0c8;} .pc-cellm.pc-l2{background:#8fc680;} .pc-cellm.pc-l3{background:#3f9b4a;} .pc-cellm.pc-l4{background:var(--green);}
.pc-cellm.pc-over{background:var(--red);} .pc-cellm.pc-resched{background:var(--pc-amber);} .pc-cellm.pc-defer{background:#fff;border:1px dashed #c0c6d0;}
.pc-cellm.pc-hm-today{outline:2px solid var(--blue);outline-offset:-2px;} .pc-cellm.pc-hm-blank{visibility:hidden;}
.pc-hm-months{display:flex;min-width:740px;margin:0 0 6px 30px;font-size:11px;color:var(--muted);}
.pc-hm-row{display:flex;gap:8px;align-items:flex-start;}
.pc-hm-days{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--muted);width:22px;} .pc-hm-days span{height:14px;line-height:14px;}
.pc-hm-legend{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:12px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.pc-hm-legend .pc-cellm{width:13px;height:13px;} .pc-hm-le{display:inline-flex;align-items:center;gap:6px;margin-left:14px;}

.pc-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.pc-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card,var(--shadow));padding:16px 18px;}
.pc-ph2{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .pc-ph2 h3{margin:0;font-size:15px;}
.pc-tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--background);color:var(--muted);}
.pc-tag.pc-tag-red{background:var(--red-soft);color:var(--red);}
.pc-odlist,.pc-rmlist{display:flex;flex-direction:column;gap:9px;max-height:320px;overflow:auto;}
.pc-odrow{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #f3d3ce;background:#fffaf9;border-radius:10px;}
.pc-odrow .pc-days{flex:none;width:46px;text-align:center;} .pc-odrow .pc-days b{display:block;font-size:18px;font-weight:800;color:var(--red);line-height:1;} .pc-odrow .pc-days span{font-size:10px;color:var(--muted);}
.pc-odrow .pc-meta{flex:1;min-width:0;} .pc-odrow .pc-nm{font-size:13.5px;font-weight:600;} .pc-odrow .pc-ml{font-size:12px;color:var(--muted);}
.pc-odamt{font-size:14px;font-weight:700;color:var(--red);}
.pc-rmrow{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:10px;}
.pc-rmrow .pc-meta{flex:1;min-width:0;} .pc-rmrow .pc-nm{font-size:13.5px;font-weight:600;} .pc-rmrow .pc-ml{font-size:12px;color:var(--muted);}
.pc-when{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--blue-soft);color:var(--blue-dark);} .pc-when.pc-when-t{background:var(--red-soft);color:var(--red);}
.pc-wa{display:inline-flex;align-items:center;gap:6px;border:1px solid #b7e4c7;background:var(--green-soft);color:var(--green);font-size:12px;font-weight:700;padding:7px 11px;border-radius:9px;cursor:pointer;white-space:nowrap;}
.pc-wa:hover{background:#dcf5e6;}
.pc-chartbox svg{width:100%;height:auto;display:block;overflow:visible;}
.pc-clegend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted);flex-wrap:wrap;} .pc-clegend span{display:inline-flex;align-items:center;gap:6px;} .pc-clegend i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.pc-empty-note{font-size:13px;color:var(--muted);padding:18px 4px;text-align:center;}

@media(max-width:980px){.pc-grid2{grid-template-columns:1fr;}.pc-duo{grid-template-columns:1fr;}.pc-kpis{grid-template-columns:repeat(2,1fr);}.pc-yeargrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.pc-kpis{grid-template-columns:1fr 1fr;}.pc-yeargrid{grid-template-columns:repeat(2,1fr);}}
/* Телефон: календарь месяца не должен распирать страницу вправо.
   .pc-card — grid-элемент с min-width:auto; из-за 7 колонок он не сжимается
   ниже своего контента и толкает страницу. min-width:0 разрешает сжатие,
   а сетка календаря нормального размера прокручивается вбок внутри своего
   контейнера (.pc-calscroll), при этом шапка месяца со стрелками остаётся
   на месте. */
@media(max-width:640px){
  .pc-grid2>.pc-card,.pc-card{min-width:0;}
  .pc-calscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pc-calscroll .pc-dow,.pc-calscroll .pc-bigcal{min-width:462px;}
  /* Крупные суммы не должны обрезаться в узких KPI-картах. */
  .pc-kpi{min-height:0;padding:16px 14px 14px;}
  .pc-kpi .pc-val{font-size:26px;margin-top:6px;overflow-wrap:break-word;}
  .pc-kpi .pc-lab{font-size:11.5px;}
}
@media print{.sidebar,.topbar,.pc-filters,.pc-nav,.pc-wa{display:none!important;}.pc-grid2,.pc-duo{grid-template-columns:1.4fr 1fr;}.pc-card,.pc-panel,.pc-kpi,.pc-mini,.pc-heatwrap{box-shadow:none;break-inside:avoid;}}

/* Итог дня + перестройка «День»/«Обзор» */
.stat-grid-single { grid-template-columns: minmax(0, 320px); }

.day-summary { display: flex; flex-direction: column; gap: 18px; }

.day-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-switcher-date { display: inline-flex; }
.day-switcher-date input {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font: inherit; color: var(--text); background: var(--surface);
}
.icon-button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: 18px; line-height: 1; color: var(--text); cursor: pointer;
}
.icon-button:hover { background: var(--background); }
.icon-button:disabled { opacity: .4; cursor: default; }

.day-hero {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between;
  padding: 18px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 55%), var(--navy);
}
.day-hero-label { display: block; font-size: 13px; font-weight: 600; color: #d0d5dd; }
.day-hero-main strong { display: block; margin-top: 6px; font-size: 30px; letter-spacing: -.03em; }
.day-hero-split { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #d0d5dd; }
.day-hero-split b { color: #fff; font-weight: 600; }
.day-hero-net { text-align: right; }
.day-hero-net span { font-size: 12px; color: #d0d5dd; }
.day-hero-net strong { display: block; margin-top: 4px; font-size: 18px; color: #fff; }

.day-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.day-period-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.day-period-button {
  border: 0; border-right: 1px solid var(--line); background: var(--surface);
  padding: 7px 16px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
}
.day-period-button:last-child { border-right: 0; }
.day-period-button.is-active { background: var(--navy); color: #fff; }
.day-range-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.day-client-filter { display: inline-flex; align-items: center; gap: 6px; }
.day-client-filter-label { font-size: 13px; color: var(--muted); }
.day-client-filter select {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; max-width: 220px;
}
.planner-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.planner-flag {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 8px 10px; font: inherit; cursor: pointer; text-align: left;
}
.planner-flag.empty { opacity: 0.55; }
.planner-flag.is-today { border-color: var(--navy); }
.planner-flag.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.planner-flag-day { font-size: 12px; color: var(--muted); }
.planner-flag.is-active .planner-flag-day { color: #cdd5e0; }
.planner-flag-sum { font-weight: 700; font-size: 14px; }
.planner-flag-count { font-size: 11px; color: var(--muted); }
.planner-flag.is-active .planner-flag-count { color: #cdd5e0; }
.planner-detail {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-color: #d0d5dd transparent;
  scrollbar-width: thin;
}
.planner-detail::-webkit-scrollbar { width: 8px; }
.planner-detail::-webkit-scrollbar-thumb { border-radius: 8px; background: #d0d5dd; }
.planner-detail-head { font-weight: 600; font-size: 13px; color: var(--muted); padding: 6px 4px 10px; }
.planner-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 12px 4px; }
.planner-detail-row:last-child { border-bottom: 0; }
.client-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.client-detail-head .deal-detail-head-main { min-width: 220px; }
.client-notes { flex: 1; min-width: 240px; max-width: 60%; max-height: 7.5em; column-width: 230px; column-gap: 16px; overflow: auto; }
.client-note { display: flex; gap: 6px; align-items: baseline; break-inside: avoid; margin-bottom: 4px; font-size: 12px; }
.client-note-date { color: var(--muted); white-space: nowrap; }
.client-note-text { flex: 1; }
.client-note.merge .client-note-text { color: var(--muted); font-style: italic; }
.client-note-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.client-note-edit { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.client-note-edit:hover { color: var(--blue); }
.client-note-del:hover { color: var(--red, #d92d20); }
.client-note.editing { gap: 4px; }
.client-note-input { flex: 1; min-width: 120px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--blue); border-radius: 6px; }
.client-note-save { border: 0; background: transparent; color: var(--green, #067647); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.client-note-cancel { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.client-notes-empty { color: var(--muted); font-size: 12px; margin: 0; }
.client-edit-contacts-button { margin-top: 8px; }
@media (max-width: 700px) { .client-notes { max-width: 100%; } }

/* Внутренние отступы тела панелей: контент был прижат к краю, выравниваем
   по горизонтали с заголовком (.panel-head = 24px). */
.day-summary > :not(.panel-head),
.collection-planner > :not(.panel-head) {
  padding-left: 24px;
  padding-right: 24px;
}
.day-summary > :last-child,
.collection-planner > :last-child {
  padding-bottom: 22px;
}
@media (max-width: 600px) {
  .day-summary > :not(.panel-head),
  .collection-planner > :not(.panel-head) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.day-section-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.day-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.day-account {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--background);
}
.day-account-name { display: block; font-size: 13px; color: var(--muted); }
.day-account-balance { display: block; margin: 6px 0 4px; font-size: 22px; letter-spacing: -.02em; }
.day-account-flow { font-size: 12px; color: var(--muted); }

.day-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.day-counters > div {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.day-counters span { display: block; font-size: 13px; color: var(--muted); }
.day-counters strong { display: block; margin-top: 6px; font-size: 20px; }

.day-journal { display: flex; flex-direction: column; gap: 10px; }
.day-journal-head { display: flex; align-items: baseline; justify-content: space-between; }
.day-journal-head h3 { margin: 0; font-size: 15px; }
.day-journal-head span { font-size: 13px; color: var(--muted); }
.day-journal-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }

.day-log-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--line);
}
.day-log-row:first-child { border-top: 0; }
.day-log-main { flex: 1; min-width: 0; }
.day-log-title { display: block; font-size: 14px; font-weight: 600; }
.day-log-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.day-log-amount { white-space: nowrap; font-size: 15px; }
.day-log-amount.pos { color: var(--green); }
.day-log-amount.neg { color: var(--red); }
.day-log-flag { font-size: 11px; color: var(--muted); }
.day-log-schedule .day-log-title { color: var(--amber); }
.day-log-deal .day-log-title { color: var(--blue-dark); }

.client-link {
  color: var(--blue); cursor: pointer; font: inherit;
  border-bottom: 1px dashed transparent; transition: border-color .12s ease;
}
.client-link:hover, .client-link:focus-visible { border-bottom-color: currentColor; outline: none; }

.day-log-contact .day-log-title { color: var(--green); }

.contact-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.contact-chip {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; background: var(--green-soft); color: var(--green);
}
.contact-chip.overdue { background: var(--red-soft); color: var(--red); }
.contact-chip.today { background: var(--blue-soft); color: var(--blue-dark); }
.contact-chip.muted { background: var(--background); color: var(--muted); }

.promises-list { display: flex; flex-direction: column; }
.promise-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 4px 14px; padding: 12px 4px; border-top: 1px solid var(--line);
}
.promise-row:first-child { border-top: 0; }
.promise-client { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 500; }
.promise-when { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--muted); }
.promise-amount { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
.promise-row .small-button { grid-column: 3; grid-row: 1 / span 2; }
.promise-row.overdue .promise-when { color: var(--red); }

.promise-modal { max-width: 640px; padding: 28px 32px 24px; }
.promise-modal .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 10px; }
.promise-modal .field.wide { grid-column: 1 / -1; }
.promise-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

@media (max-width: 760px) {
  .day-counters { grid-template-columns: 1fr; }
  .day-hero-net { text-align: left; }
}

/* Подсказки по метрикам + мягкие 3D-иконки */
.metric-badge {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 4px 10px rgba(16, 24, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.metric-badge svg { width: 19px; height: 19px; }
.mb-blue { background: linear-gradient(145deg, #5b9bf5, #1d4ed8); box-shadow: 0 5px 12px rgba(37, 99, 235, .30), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mb-green { background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 5px 12px rgba(5, 150, 105, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mb-red { background: linear-gradient(145deg, #f87171, #dc2626); box-shadow: 0 5px 12px rgba(220, 38, 38, .26), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mb-amber { background: linear-gradient(145deg, #fbbf24, #d97706); box-shadow: 0 5px 12px rgba(217, 119, 6, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mb-teal { background: linear-gradient(145deg, #2dd4bf, #0d9488); box-shadow: 0 5px 12px rgba(13, 148, 136, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mb-purple { background: linear-gradient(145deg, #a78bfa, #7c3aed); box-shadow: 0 5px 12px rgba(124, 58, 237, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }

.monthly-primary-metrics > div[data-info],
.monthly-secondary-metrics > div[data-info] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  cursor: help;
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.monthly-primary-metrics > div[data-info] .metric-badge,
.monthly-secondary-metrics > div[data-info] .metric-badge { grid-row: 1 / span 3; align-self: start; }
.monthly-secondary-metrics > div[data-info] .metric-badge { width: 32px; height: 32px; border-radius: 10px; }
.monthly-secondary-metrics > div[data-info] .metric-badge svg { width: 17px; height: 17px; }
.monthly-primary-metrics > div[data-info]:hover,
.monthly-secondary-metrics > div[data-info]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
  background-color: #f6f8fd;
}
.monthly-primary-metrics > div[data-info]:hover .metric-badge,
.monthly-secondary-metrics > div[data-info]:hover .metric-badge {
  transform: scale(1.07) translateY(-1px);
}
.stat-card[data-info], .pc-kpi[data-info] { cursor: help; }
[data-info] { outline: none; }
[data-info]:focus-visible { box-shadow: 0 0 0 2px var(--blue); border-radius: 12px; }

.metric-pop {
  position: fixed; z-index: 1000; max-width: 300px; display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 3px 8px rgba(16, 24, 40, .08);
  padding: 14px 16px; font-size: 13px; color: var(--text);
}
.metric-pop.open { display: block; animation: metricPopIn .15s ease both; }
@keyframes metricPopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.metric-pop::after {
  content: ""; position: absolute; left: var(--arrow-x, 50%); width: 12px; height: 12px;
  background: var(--surface); border: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.metric-pop--below::after { top: -7px; border-right: 0; border-bottom: 0; }
.metric-pop--above::after { bottom: -7px; border-left: 0; border-top: 0; }

/* Семантический цвет значений: потери — красным, прибыль — зелёным */
[data-info="monthlyWrittenOffDebt"] strong,
[data-info="monthlyWriteOffPrincipal"] strong,
[data-info="monthlyTerminationRefunds"] strong,
[data-info="moneyMonthExpense"] strong { color: var(--red); }
[data-info="pmRealized"] strong,
[data-info="pmExpected"] strong,
[data-info="pmProfitPerDeal"] strong,
[data-info="monthlyProfit"] strong,
[data-info="moneyMonthIncome"] strong { color: var(--green); }

/* Цветная полоска-акцент слева у карточек-метрик */
.monthly-secondary-metrics > div[data-info],
.money-stat-grid .stat-card[data-info] { position: relative; }
.monthly-secondary-metrics > div[data-info]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent, transparent);
}
/* Полоса-акцент на всю высоту карточки (как у .pc-kpi на дашборде) */
.money-stat-grid .stat-card[data-info] { overflow: hidden; }
.money-stat-grid .stat-card[data-info]:not(.accent)::before {
  content: ""; position: absolute; left: 0; right: auto; top: 0; bottom: 0;
  width: 4px; height: auto; border-radius: 0; background: var(--accent, transparent);
}

/* Стрелка роста/падения к прошлому месяцу */
.metric-trend { display: block; margin-top: 4px; }
.metric-trend:empty { display: none; }
.metric-trend-val { font-size: 11px; font-weight: 600; }
.metric-trend-val.good { color: var(--green); }
.metric-trend-val.bad { color: var(--red); }
.trend-flat { font-size: 11px; color: var(--muted); }

/* Иконки в «Итоге дня»: счётчики и касса */
.day-counters > div[data-badge] {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
}
.day-counters > div[data-badge] .metric-badge { grid-row: 1 / span 2; width: 34px; height: 34px; }
.day-account { display: flex; align-items: flex-start; gap: 12px; }
.day-account-text { flex: 1; min-width: 0; }
.day-account .metric-badge { width: 38px; height: 38px; }
.metric-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.metric-pop-head strong { font-size: 14px; }
.metric-pop p { margin: 0 0 10px; color: var(--muted); line-height: 1.55; }
.metric-pop-formula { background: var(--background); border-radius: 8px; padding: 9px 11px; }
.metric-pop-formula span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.metric-pop-formula code { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--text); }

/* ===== Кассы и группы клиентов (цветовое кодирование) ===== */
.code-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: baseline;
  flex-shrink: 0;
}
.group-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  margin-left: 7px;
  vertical-align: middle;
  color: var(--group-color, #7c3aed);
  background: color-mix(in srgb, var(--group-color, #7c3aed) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--group-color, #7c3aed) 35%, transparent);
  white-space: nowrap;
}
.money-cashbox-archived { opacity: .55; }
.money-cashbox-archived .money-account-controls { opacity: 1; }
.deal-detail-head-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 190px;
}
.group-member-row { cursor: default; }

/* Будущие обещания в блоке «Обещания» раздела «День» */
.promise-row.future { opacity: .75; }
.promise-row.future .promise-when { color: var(--muted); }

/* Отметка «обратить внимание» на сделке */
.deal-flag-toggle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
}
.deal-flag-toggle:hover { border-color: #e8830c; color: #e8830c; }
.deal-flag-toggle.on {
  background: #e8830c;
  border-color: #e8830c;
  color: #fff;
}
.deal-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e8830c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: text-bottom;
}
.deal-row.flagged { box-shadow: inset 3px 0 0 #e8830c; }

/* Значки внутри имени (точка кассы, «!», бейдж группы) должны оставаться
   в строке: правило «.deal-model span { display:block }» их не касается. */
.deal-model strong .code-dot,
.deal-model strong .group-badge {
  display: inline-block;
}
.deal-model strong .deal-flag-badge {
  display: inline-flex;
}

/* Фильтры списков сбора в разделе «День» */
.today-collect-filters {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Это просто фильтры — в одну линию, а не два поля во всю ширину. */
.today-collect-filters select {
  flex: 1 1 200px;
  width: auto;
  max-width: 320px;
}

/* Подпись телефонов в списках сбора: не больше двух строк, дальше многоточие.
   Полный список — во всплывающей подсказке (title) и в карточке клиента. */
.collect-main .collect-breakdown {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Бейдж «!» в списках сбора: правило «.collect-main span { display:block }»
   делало его блочным — кружок вставал отдельной строкой над именем. */
.collect-main strong .deal-flag-badge {
  display: inline-flex;
  vertical-align: baseline;
}

/* Отсрочка и пауза по всем телефонам — компактно, в две колонки */
.client-schedule-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.client-schedule-tools .personal-skip-box { margin-top: 0; }
.client-schedule-tools .personal-skip-form.compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.client-schedule-tools .personal-skip-form.compact-grid input[name="reason"],
.client-schedule-tools .personal-skip-form.compact-grid button {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .client-schedule-tools { grid-template-columns: 1fr; }
}

/* Кнопка «К группе» — справа, рядом с крестиком закрытия */
.client-group-back {
  position: absolute;
  top: 17px;
  right: 62px;
  z-index: 2;
}

/* Формы панели «Долги поставщикам»: вертикальная компоновка вместо
   4-колоночной сетки формы счёта */
.money-suppliers-panel .money-account-form {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.money-suppliers-panel .money-account-form .panel-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.money-suppliers-panel .money-account-form .money-entry-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.money-suppliers-panel .money-account-form .money-rule {
  margin: 0;
  padding: 0;
}
.money-suppliers-panel .money-account-actions {
  justify-content: flex-start;
}
@media (min-width: 720px) {
  .money-suppliers-panel #supplierForm {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* История поставщика: окно на ~7 записей, дальше прокрутка */
#supplierHistory {
  max-height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 16px 12px;
}

/* История оплат: основной текст получает всю ширину строки, сумма не
   переносится. Подсказка «управляется…» всегда уходит отдельной строкой ниже
   (а не в правую колонку) — иначе в узкой колонке карточки она сжимала текст,
   и он рвался по буквам. Кнопки действий остаются справа от суммы. */
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
}
.history-row > strong { white-space: nowrap; }
.history-row .history-hint {
  grid-column: 1 / -1;
  text-align: left;
  max-width: none;
  margin-top: 2px;
}

/* ——— Список сделок: колонка опорных дат ———
   Вместо «ближайшего платежа» строка показывает первый платёж, плановое (или
   фактическое) закрытие, возраст последней оплаты и накопленные паузы. Ширина
   колонки фиксированная: длинные значения обрезаются многоточием, полный текст
   остаётся в title. На узких экранах колонка скрыта правилом .hide-mobile. */
.deal-dates {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.deal-dates > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
}

.deal-dates > div > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.deal-dates > div > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.deal-dates-empty {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

/* Засечка «где клиент должен быть по графику»: полоса показывает оплаченное,
   метка — плановый уровень на сегодня. Отставание видно без чтения цифр. */
.progress {
  position: relative;
}

.progress .progress-due {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: #475467;
}

/* Просрочка суммой и днями: одинаковый бейдж «Просрочка» ничего не говорит о
   величине долга, поэтому цифра выводится прямо в строке. */
.deal-value .deal-overdue-note {
  color: var(--red);
  font-weight: 600;
}


/* Журнал операций */
.journal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.journal-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border, #e3e8f0); border-radius: 12px;
  background: var(--surface, #fff);
}
.journal-row.undone { opacity: .62; }
.journal-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.journal-main strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.journal-main span { font-size: 12px; color: var(--muted, #6b7a90); }
.journal-main small { font-size: 12px; color: var(--muted, #6b7a90); }
.journal-warning { color: #b26a00; }
.journal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.journal-note { font-size: 12px; color: var(--muted, #6b7a90); }
.journal-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #eef2f8; color: #46566d; }
.journal-tag-schedule { background: #e8f0ff; color: #2a5bb7; }
.journal-tag-payments { background: #e6f6ec; color: #1f7a44; }
.journal-tag-closing { background: #fdeaea; color: #b23b3b; }
.journal-tag-money { background: #fff3e0; color: #97640f; }
.journal-tag-undo { background: #f0e9ff; color: #5b3fb0; }
.group-notes-box { margin-top: 14px; }
@media (max-width: 720px) {
  .journal-row { flex-direction: column; align-items: stretch; }
  .journal-actions { justify-content: flex-end; }
}

/* ==========================================================================
   ТЕЛЕФОН: доводка мобильной версии (аудит 22.09.2026)

   Блок идёт последним в файле и потому перекрывает прежние правила при
   равной специфичности. Все правила — внутри медиазапросов, поэтому
   десктопная вёрстка не затрагивается.

   Что лечим:
   1) Шапка уезжала вверх вместе со страницей — кнопка меню была недоступна
      без прокрутки в самый верх.
   2) Боковое меню открывалось без подложки: промах мимо пункта не закрывал
      меню, а страница за ним продолжала прокручиваться.
   3) Safari на iPhone увеличивает страницу при фокусе в поле со шрифтом
      меньше 16px — форма «прыгала».
   4) Имена клиентов обрезались многоточием в списках и карточках.
   5) Календарь месяца не помещался в экран и прокручивался вбок.
   6) Мелкие кнопки (×, !, ✎, «Связался») были меньше 40px по высоте.
   7) Вырезы и домашняя полоса iPhone (safe area) не учитывались.
   ========================================================================== */

/* Подложка бокового меню. Правило общее (не в медиазапросе): position:fixed
   выводит элемент из сетки .app-shell, поэтому на десктопе он не занимает
   колонку и остаётся невидимым и непрожимаемым. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(16, 24, 40, .48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

@media (max-width: 860px) {
  html {
    /* Safari не должен самовольно увеличивать шрифт при повороте экрана */
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* прокрутка внутри окна не «протягивается» на страницу целиком */
    overscroll-behavior-y: contain;
  }

  /* --- Шапка всегда на виду ------------------------------------------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 18;
    min-height: 0;
    margin-inline: -20px;
    padding:
      calc(env(safe-area-inset-top, 0px) + 12px)
      max(20px, env(safe-area-inset-left, 0px))
      12px
      max(20px, env(safe-area-inset-right, 0px));
    gap: 12px;
    background: color-mix(in srgb, var(--background) 88%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .topbar h1 {
    margin: 2px 0 0;
    font-size: 21px;
  }

  .topbar .eyebrow {
    font-size: 10px;
    letter-spacing: .09em;
  }

  .main {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .mobile-menu {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 19px;
    line-height: 1;
  }

  /* --- Боковое меню: подложка, прокрутка, вырезы ----------------------- */
  .sidebar {
    width: min(86vw, 288px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 22px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-item {
    min-height: 46px;
  }

  .session-logout {
    min-height: 36px;
    padding-inline: 12px;
  }

  /* --- Поля ввода: 16px, иначе iPhone увеличивает страницу ------------- */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .field input,
  .field select,
  .field textarea,
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
    width: 22px;
    height: 22px;
  }

  /* Список выбора подстраивается под самый длинный пункт (а это ФИО клиента):
     без ограничения он распирает страницу, и Safari уменьшает её целиком. */
  select,
  input,
  textarea {
    max-width: 100%;
  }

  /* --- Тач-цели не меньше 40px ----------------------------------------- */
  .small-button,
  .ghost-button,
  .text-button,
  .day-period-button,
  .board-view-toggle button,
  .pc-wa,
  .secondary,
  .primary {
    min-height: 40px;
  }

  .icon-button,
  .money-account-edit,
  .money-account-delete {
    width: 40px;
    height: 40px;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .deal-flag-toggle {
    width: 34px;
    height: 34px;
  }

  .board-icon {
    width: 34px;
    height: 34px;
  }

  /* Опасные действия оформлены как текстовая ссылка (высота строки 12px) —
     на телефоне в них невозможно попасть пальцем. Вид сохраняем, добавляем
     только зону нажатия. */
  .danger-button {
    min-height: 40px;
    padding-block: 10px;
    text-align: left;
  }

  .client-link {
    display: inline-block;
    padding-block: 5px;
  }

  /* --- Модальные окна: лист снизу, без обрезки нижних кнопок ----------- */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-height: 94vh;
    /* 100dvh учитывает адресную строку Safari: нижние кнопки не прячутся */
    max-height: min(94dvh, 100dvh - 12px);
    border-radius: 18px 18px 0 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal > *:last-child {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* --- Заголовки панелей: в столбец, а не в две тесные колонки --------- */
  .panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .panel-head-summary {
    text-align: left;
  }

  .groups-controls {
    width: 100%;
    align-items: stretch;
  }

  .groups-controls select,
  .groups-controls input {
    width: 100%;
  }

  /* Подсказка под шапкой панели упиралась в край карточки */
  .panel > .skip-hint {
    padding-inline: 18px;
    font-size: 11px;
  }

  /* --- Имена клиентов и моделей не обрезаем многоточием ---------------- */
  .deal-row .deal-model strong,
  .client-row .deal-model strong,
  .money-account-card span > strong,
  .skip-item span,
  .personal-skip-item span {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  /* --- Суммы не переносятся по цифрам ---------------------------------- */
  .upcoming-item strong,
  .deal-value strong,
  .collect-amount,
  .pc-odamt {
    white-space: nowrap;
  }

  /* --- Доска дня: заметка занимает всю ширину, метки — строкой ниже ----- */
  .board-note {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 8px;
  }

  .board-note .board-note-body {
    grid-column: 2 / -1;
  }

  .board-note .board-chip {
    grid-column: 2;
    align-self: center;
    justify-self: start;
  }

  .board-note .board-note-actions {
    grid-column: 3;
    align-self: center;
    justify-self: end;
  }

  /* --- Доска дня: переключатель вида на своей строке -------------------- */
  .board-view-toggle {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .board-view-toggle button {
    padding-inline: 4px;
  }

  /* Кнопки, у которых высота задана более точным селектором ---------------- */
  .collect-actions .small-button,
  .attention-list .collect-actions .small-button,
  .promise-row .small-button {
    min-height: 40px;
  }

  .session-logout {
    min-height: 40px;
  }

  .pc-nav button,
  .pc-yearnav button {
    width: 36px;
    height: 36px;
    position: relative;
  }

  .pc-nav button::after,
  .pc-yearnav button::after {
    content: "";
    position: absolute;
    inset: -4px;
  }

  /* Действия в истории оплат (изменить / вернуть) стояли по 26px рядом —
     промахнуться по «вернуть» слишком легко. */
  .history-actions .icon-button,
  .client-payment-group-actions .icon-button {
    position: relative;
    width: 34px;
    height: 34px;
  }

  .history-actions .icon-button::after,
  .client-payment-group-actions .icon-button::after {
    content: "";
    position: absolute;
    inset: -3px;
  }

  /* Мелкие значки оставляем прежнего размера, но расширяем зону нажатия
     невидимым слоем — вид не меняется, палец попадает. */
  .board-check,
  .deal-flag-toggle,
  .board-icon {
    position: relative;
  }

  .board-check::after,
  .deal-flag-toggle::after,
  .board-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
  }

  .board-check::after {
    inset: -9px;
  }

  .check-inline input[type="checkbox"] {
    width: 21px;
    height: 21px;
  }

  /* Фильтры календаря платежей: в столбец, поля по ширине карточки --------- */
  .pc-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .pc-fgroup,
  .pc-panel,
  .pc-mini {
    min-width: 0;
  }

  .pc-fgroup select {
    width: 100%;
    min-width: 0;
  }

  /* Доска дня: поля формы не распирают панель на узком экране -------------- */
  .board-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-form select,
  .board-form input {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .board-form select[name="clientId"] {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .topbar {
    margin-inline: -14px;
    padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px));
  }

  .main {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  }

  /* Строка сделки: колонка под флажок шире, чтобы кнопка «!» была нажимаемой */
  .deal-row {
    grid-template-columns: minmax(0, 1fr) auto 34px 16px;
    align-items: center;
    gap: 8px;
  }

  .client-row {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    gap: 8px;
  }
}

/* --- Календарь платежей: месяц целиком помещается в экран --------------- */
@media (max-width: 520px) {
  .pc-calscroll {
    overflow-x: visible;
  }

  .pc-calscroll .pc-dow,
  .pc-calscroll .pc-bigcal {
    min-width: 0;
  }

  .pc-dow,
  .pc-bigcal {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding-inline: 10px;
  }

  .pc-bigcal {
    gap: 4px;
  }

  .pc-dow div {
    font-size: 10px;
  }

  .pc-cell {
    min-height: 58px;
    padding: 5px 4px;
    border-radius: 8px;
  }

  .pc-cell .pc-d {
    font-size: 11px;
  }

  .pc-cell .pc-sum {
    font-size: 10px;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }

  .pc-cell .pc-sum.pc-mini {
    font-size: 9.5px;
  }

  .pc-cell .pc-cnt {
    display: none;
  }

  .pc-cell .pc-pill {
    top: 3px;
    right: 3px;
    font-size: 8.5px;
    padding: 0 4px;
  }
}

/* Горизонтальная ориентация iPhone: вырез уходит влево, домашняя полоса вправо.
   env() на обычных экранах равен нулю, поэтому правило не меняет десктоп. */
@media (orientation: landscape) {
  .app-shell {
    padding-right: env(safe-area-inset-right, 0px);
  }

  .sidebar {
    padding-left: calc(18px + env(safe-area-inset-left, 0px));
  }
}

/* Телефон в горизонтальной ориентации (ширина 861–1100 px, но высота меньше
   500 px): блоки фильтров рассчитаны на широкий экран и выезжают вправо.
   Ограничение по высоте оставляет окна настольных браузеров нетронутыми. */
@media (max-width: 1100px) and (max-height: 500px) {
  .financial-report-controls {
    flex-wrap: wrap;
  }

  .money-filters {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   ПОРЯДОК СПИСКА СДЕЛОК (23.09.2026)

   В панель фильтров добавлен пятый элемент — порядок списка. При прежней
   сетке «широкая колонка + 190px» он оставался один в широкой колонке.
   Теперь поиск занимает всю ширину, а фильтры стоят равными колонками.
   Класс .deals-list-toolbar стоит только у списка сделок: такие же панели
   в «Клиентах» и «Дне» сохраняют прежнюю сетку.
   ========================================================================== */

.deals-list-toolbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.deals-list-toolbar .search-box {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .deals-list-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .deals-list-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}