:root{
  --bg: #f6f1f3;
  --card: rgba(255,255,255,0.82);
  --text: #1b1719;
  --muted: rgba(27,23,25,0.66);
  --border: rgba(96,97,98,0.16);
  --shadow: 0 10px 24px rgba(88,60,70,0.10);
  --shadow-soft: 0 4px 12px rgba(88,60,70,0.07);
  --radius: 20px;
  --radius-sm: 16px;
  --primary: #cc4c6e;
  --primary-hover: #b63d5d;
  --danger: #a12f4b;
  --focus: rgba(204,76,110,0.22);
  --accent-dark: #606162;
  --accent-soft: #c8a0aa;
  --accent-gold: #c89b2b;
  --blur: 0px;
  --speed: 220ms;
  --speed-slow: 340ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --max: 1200px;
  /* Чуть шире основная колонка на вкладке «Журнал» (таблица записей) */
  --max-journal: 1440px;
  /* Единая «стеклянная» поверхность как в журнале */
  --portal-surface: linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(255,248,250,0.90) 100%);
  --portal-border: rgba(204,76,110,0.14);
  --portal-inset: inset 0 1px 0 rgba(255,255,255,0.92);
  --portal-card-shadow: var(--shadow-soft), var(--portal-inset);
  /* Журнал / логирование: единая высота поиска, фильтров и кнопок панели */
  --journal-control-height: 44px;
}

*{ box-sizing:border-box; }

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Экран входа (создаётся в app.js как #login-overlay) */
#login-overlay{
  box-sizing: border-box;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
}

html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(204,76,110,0.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(200,160,170,0.22), transparent 55%),
              linear-gradient(180deg, #fbf7f8 0%, #f6f1f3 100%);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* До входа: только оверлей авторизации, без мелькания меню и «Журнал» */
body.auth-pending .topbar,
body.auth-pending .page,
body.auth-login .topbar,
body.auth-login .page{
  display: none !important;
}

/* TOPBAR */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #ffffff 0%, #fff8fa 100%);
  border-bottom: 1px solid var(--portal-border);
  box-shadow: 0 10px 28px rgba(88,60,70,0.07);
}
.topbar__inner{
  max-width: var(--max-journal);
  margin: 0 auto;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  padding-bottom: 14px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:auto;
  max-width:none;
  flex: 0 0 auto;
  gap:0;
  margin-right:20px;
}

@media (max-width: 720px){
  .brand{
    min-width:0;
    gap:0;
    margin-right:0;
  }

  .brand__logo{
    font-size:13px;
  }
}

.brand__logo{
  font-weight: 900;
  display:block;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  user-select: none;
  white-space: nowrap;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* лёгкий hover */
.brand__logo:hover{
  transform: translateY(-1px);
  opacity: 0.85;
}

.topnav{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:flex-end;
}
.topnav__spacer{ flex:1; }

.logout-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex:0 0 auto;
  min-width:0;
}
.logout-wrap .current-user-login{
  display:block;
  max-width:120px;
  padding:0 4px;
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  color:var(--muted, #8a7380);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  user-select:text;
  cursor:default;
}

/* ===========================
   FIX TOP BUTTONS ALIGNMENT
   =========================== */
.nav-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--text);
  font-weight:800;
  font-size:13px;

  /* важные фиксы */
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  border:1px solid transparent;

  transition: transform var(--speed) var(--ease),
              background var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
  user-select:none;
  cursor:pointer;
}

/* FIX: FontAwesome иногда задаёт разную ширину иконкам -> выравниваем */
.nav-item i{
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* FIX: если текст обёрнут в <span> — делаем его блочным */
.nav-item span{
  display:inline-block;
  line-height: 1;
}

.nav-item:hover{ background: rgba(0,0,0,0.04); transform: translateY(-1px); }
.nav-item.active{ background: rgba(204,76,110,0.14); border-color: rgba(204,76,110,0.28); color: var(--primary); }

.nav-toggle{
  display:none;
  width: 42px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 9px 11px;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
}
.nav-toggle span{
  display: block;
  height: 2px;
  width: 100%;
  margin: 0;
  background: rgba(29,29,31,0.88);
  border-radius: 1px;
}

/* PAGE — та же максимальная ширина, что и у журнала (десктоп) */
.page{
  max-width: var(--max-journal);
  margin: 0 auto;
  padding: 26px max(24px, env(safe-area-inset-right, 0px)) max(48px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 10px 0 18px;
}
.section-head h2{
  margin:0;
  font-size:26px;
  letter-spacing:-0.02em;
}
.section-head__text{ min-width: 0; }
.section-head__lead{
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
  max-width: 42ch;
}

.records-date-control{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  position: relative;
}

.records-date-label{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.2;
  margin-right: 2px;
  letter-spacing: 0.01em;
}

.records-date-label[hidden]{
  display: none !important;
}

.records-date-range{
  min-width: 280px;
}

.records-date-range--anchor{
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 1px;
  opacity: 0;
  pointer-events: none;
}

.records-date-open-btn,
.records-date-clear-btn,
.records-export-btn,
.records-refresh-btn,
.journal-record-open-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.journal-record-open-btn{
  padding: 0;
  font-size: 14px;
}

.records-date-open-btn:hover,
.records-date-clear-btn:hover,
.records-export-btn:hover,
.records-refresh-btn:hover,
.journal-record-open-btn:hover{
  color: var(--primary);
  border-color: rgba(204,76,110,0.34);
  background: rgba(255,255,255,0.98);
}

.records-date-open-btn:active,
.records-date-clear-btn:active,
.records-export-btn:active,
.records-refresh-btn:active,
.journal-record-open-btn:active{
  transform: scale(0.96);
}

/* Журнал: круги «пришёл» (галочка) / «не пришёл» (крест) */
.journal-status-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.journal-status-icon-btn--arrived{
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(59, 130, 246, 0.14);
  color: rgb(29, 78, 216);
}

.journal-status-icon-btn--arrived:hover{
  border-color: rgba(29, 78, 216, 0.55);
  background: rgba(59, 130, 246, 0.26);
  color: rgb(30, 64, 175);
}

.journal-status-icon-btn--no-show{
  border-color: rgba(220, 38, 38, 0.38);
  background: rgba(239, 68, 68, 0.1);
  color: rgb(185, 28, 28);
}

.journal-status-icon-btn--no-show:hover{
  border-color: rgba(185, 28, 28, 0.5);
  background: rgba(239, 68, 68, 0.2);
  color: rgb(153, 27, 27);
}

.journal-status-icon-btn:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.journal-status-icon-btn:active{
  transform: scale(0.96);
}

.journal-status-icon-btn--arrived.journal-status-icon-btn--selected{
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
  border-color: rgb(29, 78, 216);
  background: rgba(59, 130, 246, 0.28);
}

.journal-status-icon-btn--no-show.journal-status-icon-btn--selected{
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45);
  border-color: rgb(185, 28, 28);
  background: rgba(239, 68, 68, 0.22);
}

/* Проверка администратором / собственником / суперадмином — зелёный круг как статус «Проверен» */
.journal-status-icon-btn--confirm{
  border-color: rgba(46, 140, 90, 0.42);
  background: rgba(46, 140, 90, 0.12);
  color: #1f6b45;
}

.journal-status-icon-btn--confirm:hover{
  border-color: rgba(31, 107, 69, 0.55);
  background: rgba(46, 140, 90, 0.22);
  color: rgb(15, 81, 50);
}

.journal-status-icon-btn--confirm.journal-status-icon-btn--selected{
  box-shadow: 0 0 0 2px rgba(46, 140, 90, 0.45);
  border-color: rgb(31, 107, 69);
  background: rgba(46, 140, 90, 0.28);
}

/* Журнал: не показывать круги «галочка» / «крест» (в строках и в панели массовых действий). Кнопка «Подробнее» — .journal-record-open-btn — не скрывается. */
#records-list .journal-status-icon-btn,
#records-list [data-journal-attendance],
#records-list [data-journal-arrived-approve]{
  display: none !important;
}

.content-section{ display:none; animation: fadeInUp var(--speed-slow) var(--ease) both; }
.content-section.is-active{ display:block; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* CARDS */
.card{
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius);
  box-shadow: var(--portal-card-shadow);
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              background var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
  user-select:none;
}
.btn:active{ transform: scale(0.98); }

.btn i{
  width: 18px;
  flex: 0 0 18px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn--primary{
  background: linear-gradient(135deg, var(--primary), #db6f8d);
  color:#fff;
  box-shadow: 0 12px 24px rgba(204,76,110,0.28);
}

.btn--primary:hover{
  background: linear-gradient(135deg, var(--primary-hover), #c95b79);
  box-shadow: 0 14px 28px rgba(204,76,110,0.32);
}

.btn--ghost{
  background: rgba(0,0,0,0.04);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{ background: rgba(0,0,0,0.06); }

/* Пользователи: внутренние вкладки */
.settings-tabs .btn.active{
  background: rgba(204,76,110,0.12);
  border-color: rgba(204,76,110,0.24);
}

.btn--danger{
  background: rgba(214,43,43,0.10);
  border-color: rgba(214,43,43,0.22);
  color: #8b1d1d;
}

/* BRANCH GRID */
.branches-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  align-items:start;
}
.branch-card{
  padding: 22px;
  position: relative;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.branch-card:hover{
  border-color: rgba(204,76,110,0.22);
  box-shadow: var(--shadow), var(--portal-inset);
}
.branch-card h3{ margin:0 0 10px; letter-spacing:-0.02em; }
.branch-card p{ margin:7px 0; color: var(--muted); }

/* Настройки филиала: сетка 2×2 в стиле портала */
.branch-card__settings{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(204, 76, 110, 0.12);
}

.branch-settings-tile{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    background var(--speed) var(--ease);
  user-select: none;
}

.branch-settings-tile:hover{
  border-color: rgba(204, 76, 110, 0.32);
  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,248,250,0.96) 100%);
  box-shadow: var(--shadow-soft), var(--portal-inset);
  transform: translateY(-1px);
}

.branch-settings-tile:active{
  transform: translateY(0) scale(0.99);
}

.branch-settings-tile:focus-visible{
  outline: none;
  box-shadow: var(--portal-card-shadow), 0 0 0 3px var(--focus);
}

.branch-settings-tile__icon{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: rgba(204, 76, 110, 0.11);
  color: var(--primary);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.branch-settings-tile__icon i{
  width: 1em;
  text-align: center;
}

.branch-settings-tile__label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.branch-settings-tile--abonement .branch-settings-tile__icon{
  background: rgba(204, 76, 110, 0.12);
  color: #b63d5d;
}

.branch-settings-tile--goods .branch-settings-tile__icon{
  background: rgba(96, 97, 98, 0.1);
  color: #4a4b4c;
}

.branch-settings-tile--categories .branch-settings-tile__icon{
  background: rgba(200, 155, 43, 0.14);
  color: #9a7420;
}

.branch-settings-tile--motivation .branch-settings-tile__icon{
  background: rgba(200, 160, 170, 0.35);
  color: #8f4a62;
}

.branch-settings-tile:hover .branch-settings-tile__icon{
  background: rgba(204, 76, 110, 0.16);
  color: var(--primary-hover);
}

.branch-settings-tile--goods:hover .branch-settings-tile__icon{
  background: rgba(96, 97, 98, 0.14);
  color: #3a3b3c;
}

.branch-settings-tile--categories:hover .branch-settings-tile__icon{
  background: rgba(200, 155, 43, 0.2);
  color: #7d6018;
}

.branch-settings-tile--motivation:hover .branch-settings-tile__icon{
  background: rgba(204, 76, 110, 0.18);
  color: var(--primary-hover);
}

.branch-card__top-actions{
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  gap: 8px;
}

.branch-card__icon-btn{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
.branch-card__icon-btn:hover{
  border-color: rgba(204,76,110,0.35);
  color: var(--primary);
  background: #fff;
}
.branch-card__icon-btn--danger:hover{
  color: #b4233f;
  border-color: rgba(180,35,63,0.35);
}

.branch-abonement-preset{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.branch-abonement-preset__label-btn{
  margin:0;
  cursor:pointer;
  flex-shrink:0;
  font-weight:600;
  user-select:none;
}
.branch-abonement-preset__dd{
  flex:1 1 220px;
  min-width:0;
  max-width:100%;
}
.branch-abonement-preset__dd .portal-svc-dd{
  width:100%;
  max-width:100%;
}

/* Модалки настроек филиала: прокрутка только в теле, кнопки закреплены внизу */
.branch-category-modal__content,
.branch-motivation-modal__content{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(85vh, 820px);
  padding-bottom: 0;
}
.branch-settings-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 10px;
  padding-bottom: 8px;
}
.branch-settings-modal__actions{
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 -18px 0 !important;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: 0 -4px 12px rgba(88, 60, 70, 0.06);
  position: relative;
  z-index: 5;
}
.branch-settings-modal__body .branch-motivation-table-wrap{
  max-height: none;
  overflow: visible;
}

/* Модалка «Категории» (филиалы): запас сверху под абсолютный крестик */
.branch-category-modal__content{
  width: min(640px, 100%);
  padding-top: 26px;
}
.branch-category-modal__content > h2{
  margin-bottom: 12px;
}
#branch-category-modal .close-button{
  top: 24px;
  right: 14px;
}
#branch-category-modal .branch-category-table__visit-cell{
  vertical-align: middle;
  min-width: 240px;
}
#branch-category-modal .branch-category-table__visit-cell .portal-svc-dd{
  width: 100%;
  max-width: 100%;
}

.branch-motivation-modal__content{
  width: min(960px, 100%);
  padding-top: 26px;
}
.branch-motivation-modal__content > h2{
  margin-bottom: 12px;
}
#branch-motivation-modal .close-button{
  top: 24px;
  right: 14px;
}
.branch-motivation-xlsx-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
}

.branch-motivation-percents{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.branch-motivation-percent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.branch-motivation-percent-row label{
  font-weight: 700;
  font-size: 13px;
  color: rgba(29,29,31,0.85);
  flex: 1 1 200px;
}
.branch-motivation-percent-row .record-motivation-field__input{
  flex: 0 0 120px;
  max-width: 100%;
}
.branch-motivation-table-wrap{
  max-height: min(420px, 55vh);
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
}
.branch-motivation-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.branch-motivation-table th,
.branch-motivation-table td{
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.branch-motivation-table th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,0.92);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(29,29,31,0.55);
}
.branch-motivation-table tr:last-child td{
  border-bottom: none;
}
.branch-motivation-table__svc{
  color: var(--text);
}
.branch-motivation-table .record-motivation-field__input{
  width: 100%;
  min-width: 0;
  max-width: 140px;
}

.branch-motivation-table--tiers th:nth-child(3),
.branch-motivation-table--tiers th:nth-child(4){
  width: 200px;
  min-width: 180px;
}
.branch-motivation-table__sid{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #64748b;
  font-size: 0.92em;
}
.branch-motivation-table__tier-cell{
  vertical-align: top;
  padding: 8px 10px;
}
.branch-motivation-tier{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(204, 76, 110, 0.2);
  background: linear-gradient(180deg, #fff 0%, #fffafb 100%);
}
.branch-motivation-tier--novice{
  border-color: rgba(59, 130, 246, 0.28);
  background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
}
.branch-motivation-tier--top{
  border-color: rgba(204, 76, 110, 0.32);
}
.branch-motivation-tier__label{
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(29, 29, 31, 0.55);
}
.branch-motivation-tier--novice .branch-motivation-tier__label{
  color: #1d4ed8;
}
.branch-motivation-tier--top .branch-motivation-tier__label{
  color: #9f1239;
}
.branch-motivation-tier__type{
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  width: fit-content;
}
.branch-motivation-tier__type-btn{
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(29, 29, 31, 0.55);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.branch-motivation-tier__type-btn.is-active{
  background: var(--card, #fff);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(88, 60, 70, 0.12);
}
.branch-motivation-tier--novice .branch-motivation-tier__type-btn.is-active{
  color: #1d4ed8;
}
.branch-motivation-tier--top .branch-motivation-tier__type-btn.is-active{
  color: #9f1239;
}
.branch-motivation-tier__value-wrap{
  display: flex;
  align-items: center;
  gap: 6px;
}
.branch-motivation-tier__value{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.branch-motivation-tier__unit{
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  color: rgba(29, 29, 31, 0.45);
  min-width: 1.2em;
}

/* STATUS */
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.03);
}
.status-1{
  background: rgba(204,76,110,0.12);
  border-color: rgba(204,76,110,0.24);
  color: #8f3450;
}
.status-0{
  background: rgba(214,43,43,0.10);
  border-color: rgba(214,43,43,0.22);
  color: #8b1d1d;
}

/* TABLE */
.data-table-container{ overflow-x:auto; border-radius: var(--radius); }
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
th, td{
  padding: 12px 14px;
  text-align:left;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
}
th{
  color: rgba(29,29,31,0.65);
  font-weight: 900;
  background: rgba(255,255,255,0.42);
}
tr:last-child td{ border-bottom:none; }

.page table thead th{
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page table tbody tr{
  transition: background var(--speed) var(--ease);
}

.page table tbody tr:not(.group-row):hover td{
  background: rgba(204,76,110,0.055);
}

/* Таблица внутри карточки — одна тень у карточки */
.card table{
  box-shadow: none;
}

/* LOADING / ERROR */
.loading-card, .error{
  padding: 14px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
}
.loading-card{ color: var(--primary); box-shadow: var(--portal-card-shadow); }
.error{
  color: #8b1d1d;
  background: rgba(214,43,43,0.08);
  border-color: rgba(214,43,43,0.22);
}

/* MODALS */
/* Пока открыта модалка «Подробнее» — не прокручиваем страницу под ней (журнал). */
html.record-detail-modal-open,
body.record-detail-modal-open{
  overflow: hidden;
  overscroll-behavior: none;
}
.modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: rgba(0,0,0,0.40);
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--speed-slow) var(--ease), visibility var(--speed-slow) var(--ease);
}
.modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*
  ALERT/CONFIRM должны быть всегда поверх остальных окон.
  Все модалки используют одинаковый z-index, поэтому если какая-то модалка
  расположена ниже по DOM, она может перекрыть alert/confirm.
  Явно поднимаем их выше всех.
*/
#confirm-modal,
#alert-modal,
#prompt-modal{
  z-index: 10000;
}

.prompt-modal__input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.14);
  font: inherit;
  line-height: 1.35;
}

/* Просмотр чека — поверх модалки «Запись», но под alert/confirm */
#receipt-preview-modal{
  z-index: 3500;
}

/* Выбор действия возврата — поверх карточки записи (#record-detail-modal идёт ниже по DOM при том же базовом z-index) */
#record-refund-choice-modal{
  z-index: 4000;
}

/* Сумма возврата / депозита — поверх карточки записи (иначе #record-detail-modal перекрывает из-за порядка в DOM) */
#record-refund-amount-modal{
  z-index: 4200;
}

.modal-content--receipt-preview{
  width: min(920px, 100%);
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 16px;
}

.receipt-preview-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding-right: 44px;
}

.receipt-preview-modal__title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.receipt-preview-modal__frame-wrap{
  flex: 1 1 auto;
  height: min(72vh, 640px);
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--portal-border);
  background: rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.receipt-preview-modal__img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.receipt-preview-modal__img[hidden]{
  display: none !important;
}

.receipt-preview-modal__frame{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.receipt-preview-modal__frame[hidden]{
  display: none !important;
}

.modal-content{
  position: relative;
  width: min(760px, 100%);
  max-height: min(85vh, 820px);
  overflow:auto;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 22px;
  box-shadow: var(--shadow), var(--portal-inset);
  padding: 18px 18px 14px;
  transform: translateY(10px) scale(0.98);
  transition: transform var(--speed-slow) var(--ease);
}

/* Запас под абсолютный крестик справа */
.modal-content > .confirm-head,
.modal-content > h2{
  padding-right: 48px;
}

/* Компактные модалки (например, confirm) */
.modal-content--sm{
  width: min(520px, 100%);
  max-height: min(78vh, 520px);
}

.modal-content--yclients-abonement{
  width: min(640px, 100%);
  max-height: min(86vh, 720px);
}
.yclients-abonement-pick-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height: min(52vh, 420px);
  overflow:auto;
}
.yclients-abonement-pick-service{
  border:1px solid rgba(0,0,0,0.10);
  border-radius:10px;
  padding:10px 12px;
  background: rgba(0,0,0,0.02);
}
.yclients-abonement-pick-service__title{
  font-weight:650;
  margin-bottom:8px;
}
.yclients-abonement-pick-option{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:6px 0;
  cursor:pointer;
}
.yclients-abonement-pick-option--new{
  color:#1a6b3c;
}
.yclients-abonement-pick-empty{
  padding: 14px 4px 6px;
  font-weight: 600;
  text-align: center;
}
.yclients-abonement-pick-skip{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 4px 0 10px;
  font-weight: 600;
  cursor: pointer;
}
#yclients-abonement-pick-confirm:disabled,
#yclients-abonement-pick-confirm[hidden]{
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.confirm-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.confirm-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(214,43,43,0.10);
  color: #8b1d1d;
  box-shadow: 0 10px 26px rgba(214,43,43,0.14);
  flex: 0 0 auto;
}
.confirm-icon.is-neutral{
  background: rgba(204,76,110,0.10);
  color: var(--primary);
  box-shadow: 0 10px 26px rgba(204,76,110,0.16);
}
.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 14px;
}
.confirm-actions[hidden]{
  display:none !important;
}
.btn[hidden]{
  display:none !important;
}
.record-detail-footer.record-detail-footer--split.confirm-actions{
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.record-detail-footer--split .record-detail-footer__end{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
.record-refund-choice-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.record-refund-choice-actions .record-refund-choice-btn{
  width: 100%;
  justify-content: center;
}
.modal.is-open .modal-content{
  transform: translateY(0) scale(1);
}

.close-button{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  margin: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid var(--portal-border);
  background: rgba(255,255,255,0.65);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  box-shadow: var(--shadow-soft);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.close-button:hover{
  background: rgba(204,76,110,0.08);
  border-color: rgba(204,76,110,0.22);
}

.modal-body{ padding-top: 8px; }

/* одинаковый отступ у кнопок в модалках (в т.ч. "Сохранить") */
.modal-body form .btn{ margin-top: 14px; }

/* FORMS */
label{
  display:block;
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(29,29,31,0.72);
}
input[type="text"],
input[type="password"],
input[type="number"],
textarea{
  width:100%;
  padding:10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  outline:none;
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

/* Мобильная: без зума (pinch / double-tap); поля ≥16px — без авто-зума при фокусе в iOS */
@media (max-width: 720px){
  html{
    touch-action: manipulation;
  }

  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select{
    font-size: 16px;
  }
}

textarea{
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

select{
  width:100%;
  padding:10px 40px 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23cc4c6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  box-shadow: var(--shadow-soft);
  outline:none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

select:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
textarea:hover{
  border-color: rgba(204,76,110,0.28);
  background-color: rgba(255,255,255,0.95);
}

select[multiple]{
  padding-right: 14px;
  background-image: none;
  min-height: 120px;
}

/* Выбор филиалов (чекбоксы) в модалке администратора */
.branches-picker{
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  margin-top: 8px;
  border-radius:14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.75);
}

.branch-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}
.branch-item:hover{ background: rgba(204,76,110,0.07); }
.branch-item input{ margin:0; }
.branch-item span{ font-weight:700; font-size:13px; }
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus{
  border-color: rgba(204,76,110,0.5);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}
.checkbox-container{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--shadow-soft);
}

/* RESPONSIVE */
@media (max-width: 720px){
  .records-date-control{
    width: auto;
    justify-content: flex-end;
  }
  .records-date-range{
    width: 1px;
    min-width: 1px;
  }

  .page table thead th{
    white-space: normal;
    line-height: 1.25;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .topbar__inner{
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .topnav .nav-item{
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .topnav #logout-btn{
    min-height: 44px;
    justify-content: center;
  }
  .topnav .logout-wrap{
    align-items: stretch;
  }
  .topnav .logout-wrap .current-user-login{
    max-width: none;
    text-align: center;
  }

  .topnav{
    position: fixed;
    z-index: 100;
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow), var(--portal-inset);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: min(72vh, calc(100dvh - 58px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .topnav.is-open{ display:flex; }
  .topnav__spacer{ display:none; }

  .page{
    padding: 20px max(14px, env(safe-area-inset-right, 0px)) max(44px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  }
  .section-head{ flex-direction: column; align-items: stretch; }
  .section-head .btn{ width:100%; }
  .section-head h2{
    font-size: clamp(1.25rem, 4.8vw, 1.625rem);
  }

  .branches-grid{ grid-template-columns: 1fr; gap: 14px; }

  .data-table-container{
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation:none !important; }
}

/* Отступ для кнопок сохранения в модальных окнах */
#add-branch-form > button[type="submit"],
#edit-branch-details-form > button[type="submit"],
#yclients-config-form > button[type="submit"],
#edit-user-password-form > button[type="submit"]{
  margin-top: 24px;
}

/* =========================================================
   ПОЛЬЗОВАТЕЛИ: визуальное разделение групп филиалов и строк пользователей
   - строка группы (филиал): более плотный фон + границы
   - строки пользователей: более "легкий" фон + hover
   ========================================================= */

/* Строка-заголовок группы филиала (создаётся в app.js как <tr class="group-row">) */
.group-row td{
  padding: 14px 16px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  background: rgba(0,0,0,0.04);
  border-top: 2px solid rgba(0,0,0,0.10);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

/* Строки пользователей (только таблицы в разделе «Пользователи») */
#settings-content tbody tr:not(.group-row) td{
  background: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
}

#settings-content tbody tr:not(.group-row):hover td{
  background: rgba(204,76,110,0.06);
}

/* Немного “воздуха” между группами: скругление в таблице визуально заметнее */
tbody tr.group-row:first-child td{
  border-top: 1px solid rgba(0,0,0,0.10);
}

/* =========================================================
   ✅ ДОБАВЛЕНО: АККОРДЕОН ФИЛИАЛОВ В «ПОЛЬЗОВАТЕЛИ»
   (работает с app.js: tr.group-row[data-branch][aria-expanded])
   ========================================================= */

/* Делает всю строку группы кликабельной */
tr.group-row{
  cursor: pointer;
  user-select: none;
}

/* Hover для всей строки (не только td) */
tr.group-row:hover td{
  background: rgba(0,0,0,0.055);
}

/* Фокус с клавиатуры (в app.js у строки tabindex="0") */
tr.group-row:focus{
  outline: none;
}
tr.group-row:focus td{
  box-shadow: inset 0 0 0 2px rgba(204,76,110,0.35);
}

/* Стрелка ▸ / ▾ */
.group-toggle{
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  text-align: center;
  opacity: 0.9;
  transition: transform var(--speed) var(--ease);
}

/* При сворачивании (aria-expanded="false") слегка поворачиваем стрелку */
tr.group-row[aria-expanded="false"] .group-toggle{
  transform: rotate(-90deg);
}

/* Небольшой “вложенный” отступ у пользователей внутри группы */
tr.user-row td:first-child{
  padding-left: 34px;
}

/* FIX: фиксируем ширины колонок в таблице «Пользователи» */
#settings-content table {
  table-layout: fixed;      /* не пересчитывать ширины при появлении строк */
  width: 100%;
}

#settings-content table th,
#settings-content table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Фиксируем ширины колонок */
#settings-content table th:nth-child(1),
#settings-content table td:nth-child(1) {
  width: 220px;            /* ID пользователя */
}

#settings-content table th:nth-child(2),
#settings-content table td:nth-child(2) {
  width: auto;             /* Имя занимает остаток */
}

#settings-content table th:nth-child(3),
#settings-content table td:nth-child(3) {
  width: 170px;            /* Действия (кнопка) */
}

/* Таблица мастеров: ID (БД), YCLIENTS, имя, Excel, пароль */
#settings-content table.settings-table--masters th:nth-child(1),
#settings-content table.settings-table--masters td:nth-child(1) {
  width: 88px;
  min-width: 88px;
}

#settings-content table.settings-table--masters th:nth-child(2),
#settings-content table.settings-table--masters td:nth-child(2) {
  width: 200px;
}

/* «Статус» — 4-я колонка */
#settings-content table.settings-table--masters th:nth-child(4),
#settings-content table.settings-table--masters td:nth-child(4) {
  width: 160px;
  min-width: 160px;
  max-width: none;
}

#settings-content table.settings-table--masters td.settings-master-tier-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 10px 14px;
  vertical-align: middle;
}

#settings-content .portal-svc-dd--master-tier {
  width: 100%;
  max-width: 172px;
  margin: 0 auto;
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__trigger {
  min-height: 38px;
  padding: 7px 12px 7px 13px;
  font-size: 13px;
  font-weight: 600;
}

#settings-content .portal-svc-dd--master-tier.portal-svc-dd--tier-novice .portal-svc-dd__trigger {
  border-color: rgba(59, 130, 246, 0.42);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  color: #1e40af;
}

#settings-content .portal-svc-dd--master-tier.portal-svc-dd--tier-novice .portal-svc-dd__value-icon {
  color: #3b82f6;
}

#settings-content .portal-svc-dd--master-tier.portal-svc-dd--tier-top .portal-svc-dd__trigger {
  border-color: rgba(204, 76, 110, 0.48);
  background: linear-gradient(180deg, #ffffff 0%, #fff6f9 100%);
  color: #9f1239;
}

#settings-content .portal-svc-dd--master-tier.portal-svc-dd--tier-top .portal-svc-dd__value-icon {
  color: rgba(204, 76, 110, 0.95);
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__opt--tier-novice .portal-svc-dd__opt-icon {
  color: #3b82f6;
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__opt--tier-top .portal-svc-dd__opt-icon {
  color: rgba(204, 76, 110, 0.9);
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__opt-txt--muted {
  color: var(--muted);
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__panel {
  min-width: 100%;
}

#settings-content .portal-svc-dd--master-tier .portal-svc-dd__trigger:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* «Выгрузка в Excel» — 5-я колонка */
#settings-content table.settings-table--masters th:nth-child(5),
#settings-content table.settings-table--masters td:nth-child(5) {
  width: 230px;
  min-width: 230px;
  max-width: none;
}

#settings-content table.settings-table--masters th:nth-child(5) {
  white-space: normal;
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
}

/* Администраторы / собственники: колонка ID (БД) */
#settings-content table.settings-table--accounts th:nth-child(1),
#settings-content table.settings-table--accounts td:nth-child(1) {
  width: 88px;
  min-width: 88px;
}

#settings-content table.settings-table{
  table-layout: fixed;
  width: 100%;
}
#settings-content table.settings-table th,
#settings-content table.settings-table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* В колонке "Действия" не режем кнопки многоточием */
#settings-content table.settings-table td.actions-cell{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#settings-content table.settings-table td.actions-cell .actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.faq-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.faq-card{
  padding: 22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.faq-card__icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(204,76,110,0.14), rgba(200,160,170,0.18));
  color: var(--primary);
  flex:0 0 54px;
  font-size: 20px;
}
.faq-card__body h3{
  margin: 2px 0 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.faq-card__body p{
  margin:0;
  color: var(--muted);
  line-height:1.5;
}
.faq-video-placeholder{
  margin-top:16px;
  min-height: 132px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(204,76,110,0.35);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: var(--primary);
  font-weight:800;
  text-align:center;
  padding:18px;
}
.faq-video-placeholder i{
  font-size: 26px;
}

.faq-page-card{
  padding: 18px;
}

.faq-page-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.faq-page-tabs--areas{
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--portal-border);
}

.faq-handbook-toolbar{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.faq-handbook-list{
  display: grid;
  gap: 12px;
}

.faq-handbook-item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 18px !important;
  box-sizing: border-box;
}

.faq-handbook-item__title{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 8rem;
  line-height: 1.35;
}

.faq-handbook-item__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.faq-handbook-reader,
.faq-handbook-editor{
  display: grid;
  gap: 14px;
}

.faq-handbook-reader__title{
  margin: 0;
  font-size: 20px;
}

.faq-handbook-reader__body{
  display: grid;
  gap: 16px;
}

.faq-handbook-read-block--text{
  line-height: 1.55;
  white-space: normal;
}

.faq-handbook-read-block--image img,
.faq-handbook-block__img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--portal-border);
}

.faq-handbook-editor__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-handbook-editor__top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.faq-handbook-editor__hint{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.faq-handbook-blocks{
  display: grid;
  gap: 12px;
}

.faq-handbook-block{
  padding: 12px 14px;
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: var(--portal-surface);
  display: grid;
  gap: 10px;
}

.faq-handbook-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.faq-handbook-block__tools{
  display: flex;
  gap: 4px;
}

.faq-handbook-block__text{
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

.faq-loading{
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.faq-upload-panels{
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  box-shadow: var(--portal-card-shadow);
}

.faq-upload-modes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.faq-upload-modes .btn.active{
  border-color: rgba(204, 76, 110, 0.45);
  background: rgba(204, 76, 110, 0.08);
  color: var(--primary);
}

.faq-upload-panel,
.faq-register-panel{
  padding: 0;
}

.faq-register-panel[hidden]{
  display: none !important;
}

.faq-storage-select{
  width: 100%;
  max-width: 100%;
}

.faq-storage-files-status{
  margin: 0 0 10px;
  font-size: 12px;
}

.faq-upload-panel{
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.faq-upload-panel__title{
  margin: 0 0 12px;
  font-size: 16px;
}

.faq-upload-panel__fields{
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.faq-upload-panel__label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.faq-upload-panel__label input[type="text"],
.faq-upload-panel__label input[type="file"]{
  font-weight: 400;
}

.faq-upload-panel__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-upload-panel__hint{
  margin: 10px 0 0;
  font-size: 12px;
}

.faq-upload-panel__server-limit{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  background: rgba(204, 76, 110, 0.06);
  border: 1px solid rgba(204, 76, 110, 0.18);
}

.faq-upload-panel__server-limit--warn{
  background: rgba(220, 80, 60, 0.08);
  border-color: rgba(220, 80, 60, 0.35);
  color: #9a3b32;
  font-weight: 600;
}

.faq-upload-progress{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--portal-border);
}

.faq-upload-progress__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.faq-upload-progress__pct{
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.faq-upload-progress__track{
  height: 8px;
  border-radius: 999px;
  background: rgba(204, 76, 110, 0.12);
  overflow: hidden;
}

.faq-upload-progress__bar{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #e88aa6);
  transition: width 0.15s ease;
}

.faq-upload-progress__bar--indeterminate{
  animation: faq-upload-indeterminate 1.1s ease-in-out infinite;
}

@keyframes faq-upload-indeterminate{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(320%); }
}

.faq-upload-progress__detail{
  margin: 8px 0 0;
  font-size: 12px;
}

.faq-video-list{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.faq-empty-text{
  margin: 8px 0 0;
  font-size: 14px;
}

.faq-video-item--view .faq-video-item__title{
  margin: 0 0 12px;
}

.faq-video-item__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.faq-video-item__warn{
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  background: rgba(220, 140, 40, 0.1);
  border: 1px solid rgba(220, 140, 40, 0.35);
  color: #8a5a12;
}

.faq-upload-panel__mov-warn{
  margin: 8px 0 0;
  font-size: 12px;
  color: #8a5a12;
}

.faq-video-item__player{
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 520px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #111;
  box-shadow: var(--portal-card-shadow);
}

.faq-video-item__player video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.faq-video-item__admin{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}

.faq-video-item__admin-tools{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.faq-video-item__meta{
  margin-left: auto;
  font-size: 12px;
}

.faq-video-item__delete-btn{
  align-self: flex-start;
  font-weight: 700;
}

@media (max-width: 640px){
  .faq-video-item__meta{
    margin-left: 0;
    width: 100%;
  }
  .faq-video-item__delete-btn{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   ЖУРНАЛ ЗАПИСЕЙ
   ========================================================= */

.journal-page .section-head{
  align-items: flex-start;
  margin: 0 0 0;
}

.journal-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* Мастер в «Залогах»: поиск + календарь в одну строку */
.journal-toolbar--master-compact{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.journal-toolbar--master-compact .journal-toolbar__filters{
  flex: 1 1 auto;
  min-width: 0;
}

.journal-toolbar--master-compact .journal-search{
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.journal-toolbar--master-compact .journal-toolbar__actions{
  justify-self: end;
  margin-left: 0;
}

/* Мастер в «Журнале»: та же сетка, что у админа; под панелью — счётчик корректировок */
.journal-toolbar--master-journal .journal-master-correction-count{
  display: inline-flex;
  align-items: center;
}

.journal-master-correction-count .portal-badge{
  font-size: 12px;
}

#deposits.journal-page--toolbar-compact .section-head{
  margin-bottom: 10px;
}

#deposits.journal-page--toolbar-compact #deposits-list > .journal-table-card,
#deposits.journal-page--toolbar-compact #deposits-list > .card.journal-empty{
  margin-top: 0;
}

.journal-toolbar__filters{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.journal-toolbar__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  justify-self: end;
  flex: 0 0 auto;
  margin-left: 0;
  margin-top: 0;
}

.journal-toolbar__bulk{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  width: 100%;
}

.journal-toolbar__badges{
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/*
  Десктоп: фильтры в ряд с переносом.
  Нельзя ставить overflow-x: auto на этом контейнере: в большинстве браузеров тогда
  overflow-y перестаёт быть visible и обрезаются выпадающие списки .journal-dd__list.
*/
@media (min-width: 900px){
  .journal-toolbar__filters{
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    overflow: visible;
    row-gap: 10px;
  }
}

.journal-search{
  flex: 1 1 200px;
  min-width: 140px;
  max-width: 300px;
}

.journal-toolbar input.journal-search{
  height: var(--journal-control-height);
  min-height: var(--journal-control-height);
  box-sizing: border-box;
  font-size: 12px;
}

.journal-date-input{
  flex: 1 1 190px;
  min-width: 170px;
  max-width: 240px;
}

.journal-date-range{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 360px;
  min-width: 260px;
}

.journal-date-range .journal-date-input{
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.journal-date-sep{
  color: var(--muted);
  font-weight: 700;
  user-select: none;
}

/* Кастомные выпадающие списки журнала (панель пунктов стилизуется целиком) */
.journal-dd{
  position: relative;
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 280px;
  z-index: 1;
}

.journal-dd.is-open{
  z-index: 100;
}

.journal-toolbar .journal-dd__trigger{
  padding: 8px 10px 8px 12px;
  font-size: 12px;
  gap: 8px;
}

.journal-dd__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--journal-control-height);
  padding: 10px 14px 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--text);
  cursor: pointer;
  outline: none;
  text-align: left;
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    background-color var(--speed) var(--ease);
}

.journal-dd__value{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-dd__chev{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.journal-dd__chev .fa-chevron-down{
  font-size: 11px;
  color: rgba(204, 76, 110, 0.95);
  transition: transform var(--speed) var(--ease);
}

.journal-dd.is-open .journal-dd__chev .fa-chevron-down{
  transform: rotate(180deg);
}

.journal-dd__trigger:hover{
  border-color: rgba(204,76,110,0.32);
  box-shadow: 0 12px 28px rgba(88,60,70,0.12);
  background-color: rgba(255,255,255,0.95);
}

.journal-dd__trigger:focus{
  border-color: rgba(204,76,110,0.5);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}

.journal-dd__trigger:active{
  transform: scale(0.995);
}

.journal-dd.is-open .journal-dd__trigger{
  border-color: rgba(204,76,110,0.4);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}

.journal-dd__list{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 101;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.98);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: rgba(204,76,110,0.35) transparent;
}

.journal-dd__list::-webkit-scrollbar{
  width: 8px;
}
.journal-dd__list::-webkit-scrollbar-thumb{
  background: rgba(204,76,110,0.28);
  border-radius: 999px;
}

.journal-dd.is-open .journal-dd__list{
  display: block;
  animation: none;
}

@keyframes journalDdIn{
  from{
    opacity: 0;
    transform: translateY(-6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.journal-dd__opt{
  margin: 0;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.journal-dd__opt:hover{
  background: rgba(204,76,110,0.09);
  color: var(--primary-hover);
}

.journal-dd__opt--selected,
.journal-dd__opt[aria-selected="true"]{
  background: rgba(204,76,110,0.14);
  color: #8f3450;
  font-weight: 800;
}

.journal-dd__opt + .journal-dd__opt{
  margin-top: 2px;
}

/* Отчёты: неактивные «заглушки» вместо филиала/мастера (роль мастер) — тот же вид, без выпадающего списка */
.journal-dd--readonly{
  pointer-events: none;
}
.journal-dd--readonly .journal-dd__trigger{
  cursor: default;
  opacity: 0.78;
}
.journal-dd--readonly .journal-dd__chev{
  opacity: 0.45;
}

.journal-table-card{
  padding: 0;
  overflow: hidden;
}

.journal-mobile-list{
  display: none;
  padding: 10px;
  gap: 10px;
}

.journal-mobile-card{
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
  box-shadow: var(--shadow-soft);
  padding: 10px 12px;
}

.journal-mobile-card__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.journal-mobile-card__cb{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.journal-mobile-card__cb input{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.journal-mobile-card__line{
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 5px;
}

.journal-mobile-card__line b{
  font-weight: 800;
}

.journal-mobile-card__actions{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.journal-table-scroll{
  border-radius: inherit;
  margin: 0;
  max-width: 100%;
}

.journal-table-scroll > .journal-table{
  box-sizing: border-box;
  width: 100%;
}

.journal-table{
  font-size: 13px;
}

.journal-table thead th{
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 14px;
}

.journal-table tfoot td{
  padding: 12px 14px;
  border-top: 1px solid var(--portal-border);
  background: rgba(204,76,110,0.06);
  font-size: 13px;
  font-weight: 650;
  vertical-align: middle;
}

.journal-table-footer .journal-footer-mid{
  text-align: right;
}

.journal-table-footer .journal-footer-sum{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal-summary-mobile{
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--portal-border);
  background: rgba(204,76,110,0.06);
  font-size: 13px;
  font-weight: 650;
}

.journal-summary-mobile__sep{
  color: var(--muted);
  font-weight: 700;
}

#history-list .journal-table-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--portal-border);
  background: rgba(204,76,110,0.04);
}

#history-list .journal-table-footer__meta{
  font-size: 13px;
  color: var(--portal-muted);
}

#history-list .journal-table-footer__pager{
  display: flex;
  align-items: center;
  gap: 10px;
}

#records-list .journal-records-pager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--portal-border);
  background: rgba(204,76,110,0.04);
}

#records-list .journal-records-pager .journal-table-footer__meta{
  font-size: 13px;
  color: var(--portal-muted);
}

#records-list .journal-records-pager .journal-table-footer__pager{
  display: flex;
  align-items: center;
  gap: 10px;
}

.journal-sort-btn{
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.journal-sort-btn:hover{
  color: var(--primary);
}

.journal-table tbody td{
  vertical-align: middle;
}

.journal-table tbody tr{
  transition: background var(--speed) var(--ease);
}

.journal-table tbody tr:hover td{
  background: rgba(204,76,110,0.055);
}

.journal-table .col-cb{
  width: 1%;
  text-align: center;
  vertical-align: middle;
  padding: 8px 6px;
}

.journal-table .col-cb input{
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.journal-bulk-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--portal-border);
  background: rgba(204,76,110,0.04);
}

.journal-bulk-bar--toolbar{
  padding: 0;
  border-bottom: 0;
  background: transparent;
  flex-wrap: nowrap;
  gap: 8px;
}

.journal-toolbar .journal-bulk-bar--toolbar{
  flex-shrink: 0;
}

.journal-bulk-bar__count{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-right: auto;
}

.journal-toolbar .journal-bulk-bar--toolbar .journal-status-icon-btn{
  width: var(--journal-control-height);
  height: var(--journal-control-height);
}

/* Календарь / очистка / выгрузка — как кружки подтверждения в той же панели */
.journal-toolbar .records-date-control .records-date-open-btn,
.journal-toolbar .records-date-control .records-date-clear-btn,
.journal-toolbar .records-date-control .records-export-btn,
.journal-toolbar .records-date-control .records-refresh-btn{
  width: var(--journal-control-height);
  height: var(--journal-control-height);
  font-size: 14px;
}

/* Скрытый якорь flatpickr: без полос прокрутки и лишних элементов ввода */
.journal-toolbar .records-date-control input.flatpickr-input.records-date-range--anchor,
.journal-toolbar .records-date-control .records-date-range--anchor.flatpickr-input{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
}

.journal-toolbar .journal-bulk-bar--toolbar .btn.btn--sm{
  min-height: var(--journal-control-height);
  height: var(--journal-control-height);
  padding: 0 14px;
  font-size: 13px;
}

.journal-table .col-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal-table .col-actions{
  width: 1%;
  /* Одна кнопка «Подробнее»; 220px давали лишнюю ширину и горизонтальную полосу прокрутки */
  min-width: 0;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
  overflow: visible;
}

.journal-table-scroll .journal-table th.col-actions,
.journal-table-scroll .journal-table td.col-actions{
  position: sticky;
  right: 0;
  z-index: 2;
  background: transparent;
  box-shadow: -6px 0 10px -8px rgba(30, 20, 24, 0.1);
}

.journal-table-scroll .journal-table thead th.col-actions{
  z-index: 3;
  background: var(--card);
}

.journal-table-scroll .journal-table tbody tr:hover td.col-actions{
  background: rgba(204,76,110,0.055);
}

.journal-table .col-master{
  width: 118px;
  max-width: 132px;
  vertical-align: middle;
}

.journal-table thead th.col-actions{
  text-align: left;
}

.journal-table td.col-actions .journal-inline-actions{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
}

.journal-table .col-actions .journal-record-open-btn{
  flex-shrink: 0;
}

.journal-inline-actions{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: none;
  min-width: min-content;
  flex-shrink: 0;
}

.journal-record-open-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto;
  order: 1;
}

.journal-inline-actions__quick,
.journal-inline-actions__review{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  order: 2;
}

.journal-inline-actions__change{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.journal-inline-actions__change-expanded{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.journal-mobile-card__actions{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.journal-mobile-card__actions .journal-inline-actions{
  max-width: none;
  width: max-content;
  margin-left: auto;
  margin-right: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.journal-mobile-card .journal-record-open-btn{
  width: 48px;
  height: 48px;
  font-size: 18px;
  border-radius: 14px;
}

.audit-details-cell{
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.audit-details-link{
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-details-link:hover{
  color: var(--primary-hover);
}

.journal-cell-datetime{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}

.journal-cell-datetime__date{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.journal-cell-datetime__time{
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

.journal-cell-client{
  font-weight: 750;
}

.journal-cell-phone{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.journal-cell-branch{
  color: var(--muted);
  font-weight: 650;
  max-width: 200px;
}

.journal-cell-master{
  font-weight: 700;
  display: block;
  max-width: 132px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.journal-cell-service{
  max-width: 260px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-cell-service.journal-cell-service--multi{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  max-width: 100%;
}

.journal-cell-service--multi .journal-cell-service__line{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.journal-cell-service--multi .journal-cell-service__line::before{
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(204, 76, 110, 0.18);
}

.journal-mobile-card__line--services .journal-cell-service--multi{
  margin-top: 4px;
  width: 100%;
  max-width: none;
}

.portal-badge{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.portal-badge--awaiting{
  background: rgba(200, 155, 60, 0.14);
  border-color: rgba(200, 155, 60, 0.35);
  color: #7a5a12;
}

.portal-badge--correction{
  background: rgba(124, 90, 188, 0.12);
  border-color: rgba(124, 90, 188, 0.32);
  color: #5a3d8a;
}

.portal-badge--arrived{
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
  color: #1d4ed8;
}

.portal-badge--confirmed{
  background: rgba(46, 140, 90, 0.12);
  border-color: rgba(46, 140, 90, 0.28);
  color: #1f6b45;
}

.portal-badge--rejected{
  background: rgba(214, 43, 43, 0.10);
  border-color: rgba(214, 43, 43, 0.24);
  color: #8b1d1d;
}

.portal-badge--neutral{
  background: rgba(0,0,0,0.05);
  border-color: var(--border);
  color: var(--muted);
}

.portal-badge--empty{
  color: var(--muted);
  font-weight: 800;
  background: transparent;
  border: none;
  padding: 0;
}

/* Колонка «Статус» в журнале: только подпись статуса в цветном бейдже, без иконок */
.journal-col-status .portal-badge i,
.journal-col-status .portal-badge svg,
.journal-col-status .portal-badge img{
  display: none !important;
}

.journal-empty,
.portal-empty{
  padding: 36px 28px;
  text-align: center;
}

.journal-empty__icon,
.portal-empty__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary);
  background: linear-gradient(135deg, rgba(204,76,110,0.12), rgba(200,160,170,0.16));
  border: 1px solid rgba(204,76,110,0.18);
}

.journal-empty__title,
.portal-empty__title{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.journal-empty__hint,
.portal-empty__hint{
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.journal-loading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  font-weight: 750;
  color: var(--primary);
}

.btn--sm{
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 999px;
}

.btn--sm i{
  width: 14px;
  flex-basis: 14px;
  font-size: 12px;
}

/* Модалка записи */
.modal-content--record{
  width: min(1420px, 100%);
  /* только layout: paint обрезал бы отрисовку выпадающего списка услуг (position:fixed) */
  contain: layout;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 18px 16px;
}

.modal-body--record{
  --record-modal-scrollbar-inset: 0px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.modal-body--record__scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* «Сохранить» по услугам/абонементу: над футером, без отдельной плашки — только кнопка; правый край как у карточек; --record-modal-scrollbar-inset выставляет app.js при видимой полосе прокрутки */
.record-detail-save-bar{
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0;
  padding-bottom: 4px;
  padding-left: 0;
  padding-right: var(--record-modal-scrollbar-inset, 0px);
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 10px;
}

.record-detail-save-bar[hidden]{
  display: none !important;
}

/* Подробнее: слева поля записи и комментарии, справа услуги и абонемент */
.record-detail-layout{
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(440px, 1fr);
  gap: 12px 18px;
  align-items: start;
}

/* «Залоги»: три колонки; flex + flex-start — верх «Доплата за абонемент» совпадает с блоком записи и «Способ оплаты» */
.record-detail-layout.record-detail-layout--deposits{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px 14px;
}

.record-detail-layout.record-detail-layout--deposits > .record-detail-layout__main{
  flex: 1 1 minmax(240px, 1.05fr);
  min-width: 0;
}

.record-detail-layout.record-detail-layout--deposits > .record-detail-deposits-supplement{
  flex: 0 1 320px;
  width: min(100%, 320px);
  min-width: min(100%, 200px);
}

.record-detail-layout.record-detail-layout--deposits > .record-detail-layout__aside{
  flex: 0 1 280px;
  width: min(100%, 280px);
  min-width: min(100%, 168px);
}

.record-detail-layout__main{
  min-width: 0;
}

/* Компактнее блок полей записи — больше ширины под абонемент */
.record-detail-layout__main .record-detail-yc-services{
  margin: 0 0 12px;
  padding: 10px 12px;
}

.record-detail-layout__main .record-detail-yc-services__title{
  margin-bottom: 8px;
  font-size: 12px;
}

.record-detail-layout__main .record-detail-yc-card{
  padding: 8px 10px;
  margin-bottom: 6px;
}

.record-detail-layout__main .record-detail-yc-card__meta{
  margin-bottom: 4px;
  font-size: 11px;
}

.record-detail-layout__main .record-detail-yc-card__title{
  font-size: 13px;
}

.record-detail-layout__main .record-detail-yc-card__price{
  font-size: 13px;
}

.record-detail-layout__main .kv-list{
  padding: 8px 10px 10px;
}

.record-detail-layout__main .kv-row{
  padding: 5px 0;
  gap: 6px 12px;
  grid-template-columns: minmax(104px, 34%) 1fr;
}

.record-detail-layout__main .kv-row:first-child{
  padding-top: 3px;
}

.record-detail-layout__main .kv-row dt{
  line-height: 1.38;
}

.record-detail-layout__main .kv-row dd{
  font-size: 12.5px;
  line-height: 1.38;
}

/* Депозит (счёт клиента): левая колонка, между kv и комментариями; сумма в формате «N ₽» */
.record-detail-layout__main .record-detail-deposit{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

.record-detail-layout__main .record-detail-deposit .journal-subsection__title{
  margin: 0 0 8px;
}

.record-detail-deposit__value{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

/* Комментарии: одна лента на запись; в левой колонке сразу под блоком подробностей (та же ширина, что и kv) */
.record-detail-body-stack{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.record-detail-comments--shared{
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

.record-detail-layout__aside{
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 0;
  align-self: start;
}

.record-detail-layout__aside > .journal-subsection{
  margin-top: 0;
}

/* Сайдбар модалки: слева «Услуги» и «Продажа абонемента»; справа колонка «Способ оплаты» + кнопки под ним */
.record-detail-layout__aside .record-detail-aside-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 260px);
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.record-detail-layout__aside .record-detail-aside-left-col{
  grid-column: 1;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width:0;
}

.record-detail-layout__aside .record-detail-aside-grid > .record-detail-aside-right-col{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  min-width: 0;
}

.record-detail-deposits-supplement{
  align-self: flex-start;
  position: relative;
  min-width: 0;
}

.record-detail-deposits-supplement__fields{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-detail-deposits-supplement__row--cash{
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--portal-border);
}

.record-detail-deposits-supplement__cash-input{
  width: 100%;
  box-sizing: border-box;
}

.record-detail-deposits-supplement__lbl{
  display: block;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Поля сумм внутри карточки — как «Касса» / поля портала */
.record-detail-deposits-supplement .record-abonement-subscription-deposit{
  width: 100%;
  border-color: var(--portal-border);
  background: rgba(27, 23, 25, 0.04);
}

.record-detail-layout__aside .record-detail-aside-right-col .record-portal-abonement-toolbar{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.record-detail-layout__aside .record-detail-aside-grid > .journal-subsection{
  margin-top: 0;
}

@media (max-width: 720px){
  .record-detail-layout__aside .record-detail-aside-grid{
    grid-template-columns: 1fr;
  }
  .record-detail-layout__aside .record-detail-aside-grid > .record-detail-aside-left-col,
  .record-detail-layout__aside .record-detail-aside-grid > .record-detail-aside-right-col{
    grid-column: 1;
  }
}

/* Визуально отдельные карточки: «Услуги», «Продажа абонемента», «Способ оплаты», «Касса», «Мотивация», «Доплата за абонемент» (вкладка «Залоги»: «Касса» под «Чек», значение = «Сумма» в доплате) */
.record-detail-layout__aside .record-portal-addons,
.record-detail-layout__aside .record-detail-portal-goods,
.record-detail-layout__aside .record-detail-abonement-subscription,
.record-detail-layout__aside .record-detail-abonement-supplement,
.record-detail-layout__aside .record-detail-payment-method,
.record-detail-layout__aside .record-detail-receipts,
.record-detail-layout__aside .record-detail-cash-register,
.record-detail-layout__aside .record-detail-motivation,
.record-detail-deposits-supplement{
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

/* Выполнен возврат: не очищаем блоки, только лёгкая пометка */
.record-detail-layout__aside .record-detail-portal-goods.record-detail-block--refunded,
.record-detail-layout__aside .record-detail-abonement-subscription.record-detail-block--refunded,
.record-detail-layout__aside .record-detail-abonement-supplement.record-detail-block--refunded,
.record-detail-layout__main .record-detail-deposit.record-detail-block--refunded,
.record-detail-deposits-supplement.record-detail-block--refunded{
  border-color: rgba(200, 80, 80, 0.42);
  background: rgba(220, 100, 100, 0.07);
}

#record-receipts-wrap{
  position: relative;
}

.record-receipts-upload-overlay{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.record-receipts-upload-overlay[hidden]{
  display: none !important;
}

.record-receipts-upload-overlay__inner{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  font-size: 14px;
  color: var(--primary);
}

.record-receipts-upload-overlay__inner .fa-spinner{
  font-size: 1.15em;
}

.record-receipts-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}

.record-receipts-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.record-receipts-item{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
}

.record-receipts-item__actions{
  margin-top:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
  justify-content:flex-start;
}

.record-receipts-item__actions .record-receipts-item__icon-btn{
  width:2.25rem;
  height:2.25rem;
  min-width:2.25rem;
  padding:0;
  border-radius:50%;
  justify-content:center;
  background:rgba(0,0,0,0.04);
  border:1px solid var(--border);
  box-shadow:none;
}
.record-receipts-item__actions .record-receipts-item__icon-btn:hover{
  background:rgba(0,0,0,0.08);
  border-color:var(--border);
}

.record-motivation-field,
.record-cash-register-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.record-motivation-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}

.record-abonement-subscription-head{
  align-items: center;
}

.record-abonement-subscription-head .journal-subsection__title{
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.record-abonement-motivation-share{
  margin-top: 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e8e8ec);
}

.record-abonement-subscription-head .record-motivation-share-toggle{
  flex: 0 1 auto;
  max-width: min(100%, 220px);
  text-align: right;
  line-height: 1.25;
  white-space: normal;
}

.record-motivation-head .journal-subsection__title{
  margin-bottom: 0;
}

.record-motivation-share-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.record-motivation-share-toggle input{
  margin: 0;
  accent-color: var(--accent, #cc4c6e);
}

.record-motivation-share{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.record-motivation-share[hidden],
#record-abonement-motivation-share-toggle-wrap[hidden]{
  display: none !important;
}

.record-motivation-share-partner-dd{
  width: 100%;
}

.record-motivation-share-partner-dd .portal-svc-dd{
  width: 100%;
}

.record-motivation-field__select{
  cursor: pointer;
  background: #fff;
}

.record-motivation-share-pct{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.record-motivation-share-range{
  width: 100%;
  accent-color: var(--accent, #cc4c6e);
}

.record-motivation-share-pct-hint{
  font-size: 12px;
  color: var(--muted);
}

.record-motivation-share-sums{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-motivation-share-abonement-total{
  font-size: 13px;
  color: var(--muted);
}

.record-motivation-share-split-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

@media (max-width: 520px){
  .record-motivation-share-split-grid{
    grid-template-columns: 1fr;
  }
}

.record-motivation-field__label{
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.record-motivation-field__input{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: rgba(27, 23, 25, 0.04);
  color: inherit;
  cursor: default;
}

.record-motivation-field__input:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(204, 76, 110, 0.2);
}

/* Заголовки подсекций «Подробнее» (услуги / абонемент / доплата в Залогах); комментарии — как общий .journal-subsection__title */
.record-detail-layout__aside .journal-subsection__title,
.record-detail-deposits-supplement .journal-subsection__title{
  margin-bottom: 6px;
  font-size: 14px;
  gap: 7px;
}

/* Плотнее блок «Услуги» в сайдбаре модалки */
.record-detail-layout__aside .record-portal-services-rows{
  gap: 6px;
  margin-bottom: 0;
}

.record-detail-layout__aside .record-abonement-head{
  margin-bottom: 6px;
}

.record-detail-layout__aside .record-portal-global-pay{
  margin: 6px 0 4px;
}

.record-detail-layout__aside .record-portal-global-pay--standalone{
  margin: 4px 0 0;
  padding-top: 2px;
}

.record-detail-layout__aside .record-abonement-total{
  margin: 0 0 6px;
  padding-top: 0;
  border-top: none;
  font-size: 15px;
}

/* «Итого» в карточках «Услуги» / «Товары» — серая полоса над строкой (как на десктопе) */
.record-detail-layout__aside .record-portal-addons > .record-abonement-total,
.record-detail-layout__aside .record-detail-portal-goods .record-portal-goods-total{
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

@media (max-width: 900px){
  .modal-content--record{
    width: 100%;
    max-width: 100%;
    contain: none;
    box-sizing: border-box;
  }

  .modal-body--record,
  .modal-body--record__scroll,
  .record-detail-body,
  .record-detail-body-stack{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Журнал: плоский grid (minmax(0,1fr) — без «выпирания» шире экрана), комментарии в конце */
  .record-detail-layout:not(.record-detail-layout--deposits){
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-items: stretch;
  }

  .record-detail-layout:not(.record-detail-layout--deposits) .record-detail-layout__main,
  .record-detail-layout:not(.record-detail-layout--deposits) .record-detail-layout__aside,
  .record-detail-layout:not(.record-detail-layout--deposits) .record-detail-aside-grid,
  .record-detail-layout:not(.record-detail-layout--deposits) .record-detail-aside-left-col,
  .record-detail-layout:not(.record-detail-layout--deposits) .record-detail-aside-right-col{
    display: contents;
  }

  .record-detail-layout:not(.record-detail-layout--deposits) > .kv-list{
    order: 1;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-deposit{
    order: 2;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-portal-addons{
    order: 10;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-abonement-subscription{
    order: 11;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-abonement-supplement{
    order: 12;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-payment-method{
    order: 20;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-receipts{
    order: 21;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-cash-register{
    order: 22;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-motivation{
    order: 23;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-portal-abonement-toolbar{
    order: 24;
  }
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-detail-comments--shared{
    order: 100;
  }

  .record-detail-layout:not(.record-detail-layout--deposits) > .kv-list,
  .record-detail-layout:not(.record-detail-layout--deposits) > .journal-subsection,
  .record-detail-layout:not(.record-detail-layout--deposits) > .record-portal-abonement-toolbar{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Залоги: без display:contents — обычная колонка */
  .record-detail-layout.record-detail-layout--deposits{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .record-detail-layout.record-detail-layout--deposits > .record-detail-layout__main,
  .record-detail-layout.record-detail-layout--deposits > .record-detail-deposits-supplement,
  .record-detail-layout.record-detail-layout--deposits > .record-detail-layout__aside{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .record-detail-layout.record-detail-layout--deposits .record-detail-aside-grid{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }
  .record-detail-layout.record-detail-layout--deposits .record-detail-aside-left-col,
  .record-detail-layout.record-detail-layout--deposits .record-detail-aside-right-col{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .record-detail-layout__aside{
    position: static;
    padding: 0;
  }
}

@media (max-width: 720px){
  .modal{
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .modal-content--record{
    width: 100%;
    max-width: 100%;
    max-height: min(96dvh, 100vh);
    padding: 22px 12px 12px;
    border-radius: 16px;
  }
  .record-detail-modal__title{
    padding-right: 40px;
    font-size: 1rem;
    word-break: break-word;
  }
  .modal-content--record > .close-button{
    top: 18px;
    right: 10px;
  }
}

.modal-content--record > .record-detail-modal__title{
  flex-shrink: 0;
}

.record-detail-modal__title{
  margin: 0 0 14px;
  padding-top: 2px;
  padding-bottom: 2px;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}

.journal-yclients-record-link,
.record-detail-yclients-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(178, 43, 87, 0.32);
  text-underline-offset: 3px;
}

.journal-yclients-record-link:hover,
.record-detail-yclients-link:hover{
  color: var(--accent);
  text-decoration-color: currentColor;
}

.record-detail-body{
  border-radius: var(--radius-sm);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
}

.record-detail-body.loading-card,
.record-detail-body .error{
  padding: 14px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

.record-detail-body .error{
  background: rgba(214,43,43,0.08);
}

.record-detail-body table tbody tr{
  transition: none;
}

.record-detail-yc-services{
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

.record-detail-yc-services__title{
  margin-bottom: 12px;
}

.record-detail-yc-card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--card, #fff);
}

.record-detail-yc-card:last-child{
  margin-bottom: 0;
}

.record-detail-yc-card__meta{
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.35;
}

.record-detail-yc-card__row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.record-detail-yc-card__title{
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  word-break: break-word;
}

.record-detail-yc-card__price{
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.record-detail-yc-card__abonement{
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}

.record-detail-yc-card__abonement-visit{
  font-size: 11px;
  font-weight: 650;
  color: rgba(204, 76, 110, 0.9);
}

.record-portal-addons{
  margin-top: 18px;
}

.record-portal-addons__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 6px;
}

.record-portal-addons__head .record-portal-addons__title{
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.record-portal-addons--readonly .record-portal-svc-remove{
  visibility: hidden !important;
  pointer-events: none;
}

.record-portal-addons--readonly .portal-svc-dd__trigger:disabled{
  cursor: default;
  opacity: 0.92;
}

.record-portal-services-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Колонки: услуга (до 435px) | сумма | вид посещения (фикс.) | удалить */
.record-abonement-head,
.record-portal-svc-row{
  grid-template-columns: minmax(152px, 435px) minmax(72px, 88px) minmax(100px, 128px) 44px;
}

.record-abonement-head{
  display: grid;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.record-abonement-head span{
  text-align: start;
  min-width: 0;
}

.record-abonement-head span:nth-child(3){
  text-align: start;
}

.record-portal-svc-row{
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Высота как у выпадающего списка и полей (min-height триггера 40px) */
.record-portal-svc-row .record-portal-svc-remove{
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  max-width: 100%;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: 14px;
}

.record-portal-svc-row .record-portal-svc-remove i{
  width: 1em;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

/* Блок «Продажа абонемента»: десктоп — одна строка (тип | суммы | залог | удалить); мобильная вёрстка — в @media (max-width: 720px) */
.record-abonement-types-head,
.record-abonement-tier-row{
  display: grid;
  grid-template-columns: minmax(132px, 1.75fr) repeat(3, minmax(72px, 1fr)) 44px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.record-abonement-types-head > :nth-child(1),
.record-abonement-tier-row > :nth-child(1){
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.record-abonement-types-head > :nth-child(2),
.record-abonement-tier-row > :nth-child(2){
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.record-abonement-types-head > :nth-child(3),
.record-abonement-tier-row > :nth-child(3){
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.record-abonement-types-head > :nth-child(4),
.record-abonement-tier-row > :nth-child(4){
  grid-column: 4;
  grid-row: 1;
  min-width: 0;
}

.record-abonement-types-head > :nth-child(5),
.record-abonement-tier-row > :nth-child(5){
  grid-column: 5;
  grid-row: 1;
  min-width: 0;
}

.record-abonement-types-head{
  margin-bottom: 8px;
  padding: 0 2px;
  row-gap: 10px;
  column-gap: 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.record-abonement-types-head__type span{
  display: block;
  text-align: start;
  min-width: 0;
}

.record-abonement-types-head > span:not(.record-abonement-types-head__del){
  min-width: 0;
  text-align: start;
}

.record-abonement-types-head__del{
  display: block;
}

.record-abonement-tiers-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
  min-width: 0;
}

.record-abonement-tier-add-toolbar{
  display: flex;
  align-items: center;
  margin: 8px 0 0;
}

.record-abonement-tier-row .portal-svc-dd{
  min-width: 0;
}

.record-abonement-tier-cell--type{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.record-abonement-tier-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.record-abonement-tier-field--action{
  gap: 4px;
}

.record-abonement-tier-field__lbl{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.2;
}

/* Десктоп: подписи в шапке таблицы; в строках скрыты */
@media (min-width: 721px){
  .record-abonement-tier-field__lbl{
    display: none !important;
  }

  /* «Продажа абонемента»: тип растягивается, три суммы и залог — фиксированная ширина */
  .record-detail-abonement-subscription .record-abonement-types-head,
  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row{
    grid-template-columns: minmax(132px, 1fr) minmax(72px, 88px) minmax(72px, 88px) minmax(72px, 88px) 44px;
    width: 100%;
    box-sizing: border-box;
  }

  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row:only-child{
    grid-template-columns: minmax(132px, 1fr) minmax(72px, 88px) minmax(72px, 88px) minmax(72px, 88px);
  }

  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row:only-child .record-abonement-tier-field--action,
  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row:only-child .record-abonement-grid-action{
    display: none;
  }

  .record-detail-abonement-subscription .record-abonement-types-head:has(+ .record-abonement-tiers-rows > .record-abonement-tier-row:only-child){
    grid-template-columns: minmax(132px, 1fr) minmax(72px, 88px) minmax(72px, 88px) minmax(72px, 88px);
  }

  .record-detail-abonement-subscription .record-abonement-types-head:has(+ .record-abonement-tiers-rows > .record-abonement-tier-row:only-child) .record-abonement-types-head__del,
  .record-detail-abonement-subscription .record-abonement-types-head:has(+ .record-abonement-tiers-rows > .record-abonement-tier-row:only-child) .record-abonement-grid-action{
    display: none;
  }

  .record-detail-abonement-subscription .record-abonement-tier-cell--type .portal-svc-dd{
    width: 100%;
    max-width: none;
  }

  /*
   * Слоты сетки по классам/структуре — не :nth-child.
   * Скрытые input в DOM сдвигают nth-child, но не занимают ячейки → тип оказывался в узкой колонке.
   */
  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-grid-type,
  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-types-head__type,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-cell--type,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-type{
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-grid-sale,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-sale,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-sale){
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-grid-paid,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-paid,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-paid){
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-grid-deposit,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-deposit,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-deposit){
    grid-column: 4 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-grid-action,
  .record-detail-abonement-subscription .record-abonement-types-head > .record-abonement-types-head__del,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-action,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field--action{
    grid-column: 5 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > input[type="hidden"]{
    display: none !important;
  }
}

.record-abonement-subscription-sale,
.record-abonement-subscription-paid{
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
  min-width: 0;
  box-sizing: border-box;
}

.record-abonement-subscription-deposit{
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.03);
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  min-width: 0;
  box-sizing: border-box;
}

.record-abonement-tier-field .record-abonement-subscription-deposit{
  width: 100%;
}

/* Одна высота полей сумм и залога в строке (в т.ч. когда подписи скрыты в десктопной шапке). */
.record-abonement-tier-row .record-abonement-subscription-sale,
.record-abonement-tier-row .record-abonement-subscription-paid,
.record-abonement-tier-row .record-abonement-subscription-deposit{
  min-height: 42px;
  line-height: 1.25;
  box-sizing: border-box;
}

.record-abonement-tier-row .record-abonement-tier-remove{
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: 14px;
}

.record-abonement-tier-row .record-abonement-tier-remove i{
  font-size: 14px;
  line-height: 1;
}

.record-portal-svc-cell--service{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-portal-svc-cell--service > .portal-svc-dd{
  min-width: 0;
}

.record-portal-svc-row > .record-abonement-tier-field .record-portal-svc-row__visit{
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.record-portal-svc-row__visit .portal-svc-dd{
  width: 100%;
  min-width: 0;
}

.record-portal-svc-row > .record-abonement-tier-field:nth-child(3){
  min-width: 0;
  max-width: 128px;
}

.record-portal-services-rows .record-portal-svc-row:only-child{
  grid-template-columns: minmax(152px, 435px) minmax(72px, 88px) minmax(100px, 128px);
}

.record-portal-services-rows .record-portal-svc-row:only-child .record-abonement-tier-field--action{
  display: none;
}

.record-portal-addons > .record-abonement-head:has(+ .record-portal-services-rows > .record-portal-svc-row:only-child){
  grid-template-columns: minmax(152px, 435px) minmax(72px, 88px) minmax(100px, 128px);
}

.record-portal-addons > .record-abonement-head:has(+ .record-portal-services-rows > .record-portal-svc-row:only-child) span:nth-child(4){
  display: none;
}

/* Способ оплаты / вид посещения: те же классы, что у услуги (portal-svc-dd--simple), без поиска */
.portal-svc-dd--simple .portal-svc-dd__panel{
  max-height: min(280px, 48vh);
}

/* Тип абонемента: длинные названия + поиск */
.portal-svc-dd--subscription .portal-svc-dd__panel{
  max-height: min(420px, 55vh);
}
.portal-svc-dd--subscription .portal-svc-dd__opt{
  white-space: normal;
  line-height: 1.35;
}

.record-abonement-total{
  margin: 4px 0 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 15px;
  font-weight: 750;
  text-align: right;
  color: var(--text);
}

/* Блок «Товары»: товар (до 560px) | сумма | удалить */
.record-detail-portal-goods .record-portal-goods-head,
.record-detail-portal-goods .record-portal-goods-row{
  display: grid;
  grid-template-columns: minmax(152px, 560px) minmax(72px, 88px) 44px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.record-portal-goods-rows .record-portal-goods-row:only-child{
  grid-template-columns: minmax(152px, 560px) minmax(72px, 88px);
}

.record-portal-goods-rows .record-portal-goods-row:only-child .record-abonement-tier-field--action{
  display: none;
}

.record-detail-portal-goods .record-portal-goods-head:has(+ .record-portal-goods-rows > .record-portal-goods-row:only-child){
  grid-template-columns: minmax(152px, 560px) minmax(72px, 88px);
}

.record-detail-portal-goods .record-portal-goods-head:has(+ .record-portal-goods-rows > .record-portal-goods-row:only-child) .record-abonement-types-head__del{
  display: none;
}

.record-portal-goods-row .record-portal-goods-remove{
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: 100%;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: 14px;
}

.record-portal-goods-row .record-portal-goods-remove i{
  font-size: 14px;
  line-height: 1;
}

.record-portal-goods-add-toolbar{
  display: flex;
  align-items: center;
  margin: 8px 0 8px;
}

.record-detail-portal-goods .record-portal-goods-head > *,
.record-detail-portal-goods .record-portal-goods-row > *{
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
}

.record-detail-portal-goods .record-portal-goods-head{
  margin-bottom: 8px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.record-detail-portal-goods .record-portal-goods-rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.record-detail-portal-goods .record-portal-goods-total{
  display: block;
  margin: 6px 0 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 15px;
  font-weight: 750;
  text-align: right;
  color: var(--text);
}

.record-detail-portal-goods--readonly .portal-svc-dd__trigger:disabled{
  cursor: default;
  opacity: 0.92;
}

/* Залог: та же сетка, что «Продажа абонемента»; последняя колонка — поле «Сумма оплаты» (шире, чем колонка «Удалить») */
.record-detail-abonement-supplement .record-abonement-types-head,
.record-detail-abonement-supplement .record-abonement-tier-row{
  grid-template-columns: minmax(132px, 1.75fr) repeat(3, minmax(72px, 1fr)) minmax(80px, 1.15fr);
}

.record-detail-abonement-supplement .record-abonement-tier-cell--type .record-abonement-subscription-deposit{
  white-space: normal;
  line-height: 1.35;
}

.record-abonement-subscription-total{
  margin: 6px 0 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 15px;
  font-weight: 750;
  text-align: right;
  color: var(--text);
}

.record-portal-global-pay{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 6px;
}

.record-portal-global-pay__label{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
  color: var(--text);
}

.record-portal-global-pay__slot{
  flex: 1 1 auto;
  width: min(360px, 100%);
  min-width: 0;
}

.record-portal-payment-split{
  width: 100%;
}

.record-portal-pay-split__method{
  display: grid;
  gap: 6px;
}

.record-portal-payment-split__target{
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.38;
  color: var(--text);
}

.record-portal-payment-split__picked{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.38;
  color: var(--text);
}

.record-portal-payment-split__balance{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.38;
  color: var(--muted);
}

.record-portal-pay-split__deposit-toggle{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.record-portal-pay-split__rows{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-portal-pay-split__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 112px);
  gap: 8px 12px;
  align-items: center;
}

.record-portal-pay-split__lbl{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.record-portal-pay-split__lbl-inner{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.record-portal-pay-split__row--disabled{
  opacity: 0.72;
}

.record-pay-split-enable{
  flex-shrink: 0;
}

.record-pay-split-rub:not(:disabled){
  max-width: 100%;
  background: #fff;
  border-color: rgba(27, 23, 25, 0.22);
  color: var(--text);
}

.record-pay-split-rub{
  color: var(--text);
}

.record-pay-split-rub::placeholder{
  color: rgba(27, 23, 25, 0.55);
}

/* Узкий экран: сетка услуг/абонемента без горизонтального скролла */
@media (max-width: 720px){
  .record-detail-body{
    min-width: 0;
  }

  .record-portal-services-rows{
    overflow-x: clip;
    overflow-y: visible;
    gap: 0;
    margin-bottom: 4px;
  }

  .record-detail-layout__aside .record-portal-services-rows{
    gap: 0;
    margin-bottom: 4px;
  }

  /* Разделители как у «Итого»; без отрицательных margin — иначе обрезает overflow у прокрутки модалки */
  .record-portal-services-rows .record-portal-svc-row:not(:first-child),
  .record-portal-goods-rows .record-portal-goods-row:not(:first-child){
    margin-top: 12px;
    padding-top: 12px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  .record-abonement-tiers-rows{
    gap: 0;
  }

  .record-abonement-tiers-rows .record-abonement-tier-row{
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Продажа абонемента: строка 1 — тип; строка 2 — продажа/оплата + удалить; строка 3 — залог */
  .record-abonement-types-head,
  .record-abonement-tier-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap: 6px;
    row-gap: 10px;
  }

  .record-abonement-types-head{
    align-items: start;
  }

  /* stretch + margin-top: auto у контролов — одна линия по нижнему краю при разной высоте подписей (iPhone SE и т.п.) */
  .record-abonement-tier-row{
    align-items: stretch;
  }

  .record-abonement-types-head > :nth-child(1),
  .record-abonement-tier-row > :nth-child(1){
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .record-abonement-types-head > :nth-child(2),
  .record-abonement-tier-row > :nth-child(2){
    grid-column: 1;
    grid-row: 2;
  }

  .record-abonement-types-head > :nth-child(3),
  .record-abonement-tier-row > :nth-child(3){
    grid-column: 2;
    grid-row: 2;
  }

  .record-abonement-types-head > :nth-child(4),
  .record-abonement-tier-row > :nth-child(4){
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .record-abonement-types-head > :nth-child(5),
  .record-abonement-tier-row > :nth-child(5){
    grid-column: 3;
    grid-row: 2;
  }

  /* «Продажа абонемента»: тип на всю ширину, суммы — три колонки (без :nth-child) */
  .record-detail-abonement-subscription .record-abonement-tier-row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    row-gap: 10px;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-cell--type,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-type{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-sale,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-sale){
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-paid,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-paid){
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-deposit,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field:has(.record-abonement-subscription-deposit){
    grid-column: 3 !important;
    grid-row: 2 !important;
    max-width: none;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-grid-action,
  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field--action{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
  }

  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row:only-child > .record-abonement-grid-action,
  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-row:only-child > .record-abonement-tier-field--action{
    display: none !important;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > input[type="hidden"]{
    display: none !important;
  }

  .record-detail-abonement-subscription .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-tier-field__lbl{
    font-size: 9px;
    letter-spacing: 0.02em;
    line-height: 1.15;
    hyphens: auto;
  }

  /* Подписи в шапке скрыты на мобильной — они внутри каждой колонки строки */
  .record-detail-abonement-subscription .record-abonement-types-head,
  .record-detail-abonement-supplement .record-abonement-types-head,
  .record-detail-portal-goods .record-portal-goods-head{
    display: none;
  }

  .record-detail-portal-goods .record-portal-goods-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap: 6px;
    row-gap: 10px;
    align-items: stretch;
    padding-bottom: 4px;
    overflow: visible;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-cell--type{
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    padding-left: 14px;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-cell--type::before{
    content: '';
    position: absolute;
    left: 2px;
    top: 40px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px rgba(204, 76, 110, 0.25);
    pointer-events: none;
    z-index: 1;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-field:nth-child(2){
    grid-column: 1;
    grid-row: 2;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-field--action{
    grid-column: 3;
    grid-row: 2;
  }

  .record-portal-goods-rows .record-portal-goods-row:only-child{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .record-portal-goods-rows .record-portal-goods-row:only-child > .record-abonement-tier-field--action{
    display: none;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-field > .record-abonement-tier-field__lbl{
    display: block !important;
    width: 100%;
    flex-shrink: 0;
  }

  .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-field--action .record-portal-goods-remove{
    margin-top: auto;
  }

  .record-portal-addons .record-portal-goods-add-toolbar{
    margin-top: 12px;
    padding-top: 2px;
  }

  /* Залог на мобилке: пять полей — тип на всю ширину, остальное сеткой 2×2 */
  .record-detail-abonement-supplement .record-abonement-tier-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    row-gap: 10px;
    align-items: stretch;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-cell--type{
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field:nth-child(2){
    grid-column: 1;
    grid-row: 2;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field:nth-child(3){
    grid-column: 2;
    grid-row: 2;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field:nth-child(4){
    grid-column: 1;
    grid-row: 3;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field:nth-child(5){
    grid-column: 2;
    grid-row: 3;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-tier-field__lbl{
    display: block !important;
    width: 100%;
    flex-shrink: 0;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field .record-abonement-subscription-deposit,
  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-field .record-abonement-supplement-amount{
    margin-top: auto;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-cell--type .record-abonement-tier-field__lbl{
    display: block !important;
    width: 100%;
  }

  .record-detail-abonement-supplement .record-abonement-tier-row > .record-abonement-tier-cell--type .record-abonement-subscription-deposit{
    margin-top: auto;
  }

  .record-detail-abonement-supplement .record-abonement-tiers-rows .record-abonement-tier-row:not(:first-child){
    margin-top: 12px;
    padding-top: 12px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  /* Розовая точка у ячейки «Тип абонемента» */
  .record-abonement-tier-cell--type{
    position: relative;
    padding-left: 14px;
  }

  .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-cell--type::before{
    content: '';
    position: absolute;
    left: 2px;
    /* По вертикали вровень с триггером выпадающего списка (как у 2-й и следующих строк) */
    top: 40px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px rgba(204, 76, 110, 0.25);
    pointer-events: none;
    z-index: 1;
  }

  .record-abonement-tiers-rows .record-abonement-tier-row:not(:first-child){
    margin-top: 12px;
    padding-top: 12px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }

  .record-abonement-tier-row > .record-abonement-tier-field{
    min-height: 0;
    height: 100%;
  }

  .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-tier-field__lbl{
    display: block;
    width: 100%;
    flex-shrink: 0;
  }

  .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-subscription-sale,
  .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-subscription-paid,
  .record-abonement-tier-row > .record-abonement-tier-field > .record-abonement-subscription-deposit{
    margin-top: auto;
  }

  .record-abonement-tier-row > .record-abonement-tier-field--action .record-abonement-tier-remove{
    margin-top: auto;
  }

  .record-abonement-tier-field--action .record-abonement-tier-field__lbl--action{
    visibility: hidden;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
  }

  .modal-body--record__scroll{
    overflow-x: hidden;
  }

  /* Услуги: как абонемент — подписи в строках; шапка колонок скрыта */
  .record-portal-addons > .record-abonement-head{
    display: none;
  }

  .record-portal-svc-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    gap: 6px;
    row-gap: 10px;
    align-items: stretch;
    padding-bottom: 4px;
    overflow: visible;
  }

  .record-portal-svc-row > :nth-child(1){
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .record-portal-svc-row > :nth-child(2){
    grid-column: 1;
    grid-row: 2;
  }

  .record-portal-svc-row > :nth-child(3){
    grid-column: 2;
    grid-row: 2;
  }

  .record-portal-svc-row > :nth-child(4){
    grid-column: 3;
    grid-row: 2;
  }

  .record-portal-services-rows .record-portal-svc-row:only-child{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .record-portal-services-rows .record-portal-svc-row:only-child > :nth-child(4){
    display: none;
  }

  .record-portal-svc-row > .record-abonement-tier-field{
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .record-portal-svc-row > .record-portal-svc-cell--service{
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .record-portal-svc-row > .record-portal-svc-cell--service > .record-abonement-tier-field__lbl,
  .record-portal-svc-row > .record-abonement-tier-field > .record-abonement-tier-field__lbl{
    display: block;
    width: 100%;
    flex-shrink: 0;
  }

  .record-portal-svc-row > .record-abonement-tier-field > .record-portal-svc-price,
  .record-portal-svc-row > .record-abonement-tier-field > .record-portal-svc-row__visit,
  .record-portal-svc-row > .record-abonement-tier-field > .record-portal-svc-row__visit .portal-svc-dd__trigger{
    margin-top: auto;
  }

  .record-portal-svc-row > .record-abonement-tier-field > .record-portal-svc-price,
  .record-portal-svc-row > .record-abonement-tier-field > .record-portal-svc-row__visit .portal-svc-dd{
    margin-bottom: 1px;
  }

  .record-portal-svc-row > .record-abonement-tier-field--action .record-portal-svc-remove{
    margin-top: auto;
  }

  /* Розовая точка у «Услуга», как у «Тип абонемента» */
  .record-portal-services-rows .record-portal-svc-cell--service{
    position: relative;
    padding-left: 14px;
  }

  .record-portal-services-rows .record-portal-svc-cell--service::before{
    content: '';
    position: absolute;
    left: 2px;
    top: 40px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px rgba(204, 76, 110, 0.25);
    pointer-events: none;
    z-index: 1;
  }

  .record-portal-svc-row__visit{
    max-width: none;
  }

  .record-portal-svc-price{
    min-width: 0;
    box-sizing: border-box;
  }

  /* Карточка записи: без розовых точек у полей (в списке журнала — без изменений) */
  .modal-content--record .record-portal-services-rows .record-portal-svc-cell--service,
  .modal-content--record .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-cell--type,
  .modal-content--record .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-cell--type{
    padding-left: 0;
  }

  .modal-content--record .record-portal-services-rows .record-portal-svc-cell--service::before,
  .modal-content--record .record-detail-portal-goods .record-portal-goods-row > .record-abonement-tier-cell--type::before,
  .modal-content--record .record-detail-abonement-subscription .record-abonement-tiers-rows .record-abonement-tier-cell--type::before{
    display: none;
    content: none;
  }

  /* «Сумма» и «Вид посещения» в одной строке; сумма — как была (1-я колонка), вид — до кнопки удаления */
  .modal-content--record .record-portal-svc-row > :nth-child(3){
    grid-column: 2;
    grid-row: 2;
    max-width: none;
  }

  .modal-content--record .record-portal-svc-row > .record-abonement-tier-field:nth-child(3) .record-portal-svc-row__visit,
  .modal-content--record .record-portal-svc-row > .record-abonement-tier-field:nth-child(3) .portal-svc-dd{
    width: 100%;
    max-width: none;
  }

  .modal-content--record .record-detail-footer.record-detail-footer--split.confirm-actions{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .modal-content--record .record-detail-footer--split .record-detail-footer__start,
  .modal-content--record .record-detail-footer--split .record-detail-footer__end{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    gap: 10px;
  }

  .modal-content--record .record-detail-footer--split .btn{
    width: min(100%, 360px);
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Услуга: поиск + список (модалка записи) */
.portal-svc-dd{
  position: relative;
  width: 100%;
  max-width: 100%;
  z-index: 1;
}

.portal-svc-dd.is-open{
  z-index: 200;
}

.portal-svc-dd__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(204, 76, 110, 0.35);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text);
  cursor: pointer;
  outline: none;
  text-align: left;
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.portal-svc-dd--empty .portal-svc-dd__trigger{
  border-color: var(--border);
  color: var(--muted);
}

.portal-svc-dd__value{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-svc-dd__value--with-icon{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.portal-svc-dd__value-icon{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  font-size: 13px;
  color: rgba(204, 76, 110, 0.88);
}

.portal-svc-dd__value-txt{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-svc-dd__opt-icon{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  font-size: 14px;
  color: rgba(204, 76, 110, 0.78);
}

.portal-svc-dd__opt-txt{
  flex: 1 1 auto;
  min-width: 0;
}

/* Строка YCLIENTS в триггере комбо (как выбранная услуга) */
.portal-svc-dd--yc-value .portal-svc-dd__trigger{
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
}

.portal-svc-dd__value--yc-record{
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  font-weight: 650;
  color: var(--text);
}

.portal-svc-dd__yc-meta{
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.35;
}

.portal-svc-dd__yc-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.portal-svc-dd__yc-title{
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
  min-width: 0;
}

.portal-svc-dd__yc-price{
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.portal-svc-dd--yc-value .portal-svc-dd__chev{
  align-self: flex-start;
  margin-top: 2px;
}

.portal-svc-dd__chev{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.portal-svc-dd__chev .fa-chevron-down{
  font-size: 11px;
  color: rgba(204, 76, 110, 0.95);
  transition: transform var(--speed) var(--ease);
}

.portal-svc-dd.is-open .portal-svc-dd__chev .fa-chevron-down{
  transform: rotate(180deg);
}

.portal-svc-dd__trigger:hover{
  border-color: rgba(204, 76, 110, 0.45);
  box-shadow: 0 10px 26px rgba(88, 60, 70, 0.1);
}

.portal-svc-dd__trigger:focus{
  border-color: rgba(204, 76, 110, 0.55);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}

.portal-svc-dd.is-open .portal-svc-dd__trigger{
  border-color: rgba(204, 76, 110, 0.5);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}

.portal-svc-dd__panel{
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(204, 76, 110, 0.22);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 18px 48px rgba(60, 40, 50, 0.16);
  /* не hidden: иначе в flex-колонке дочерний overflow-y иногда не получает события прокрутки */
  overflow: visible;
  max-height: min(70vh, 420px);
  min-height: 0;
  overscroll-behavior: contain;
}

.portal-svc-dd.is-open .portal-svc-dd__panel{
  display: flex;
}

.portal-svc-dd__search-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(204, 76, 110, 0.04);
  flex: 0 0 auto;
}

.portal-svc-dd__search-wrap .fa-magnifying-glass{
  font-size: 13px;
  color: rgba(204, 76, 110, 0.75);
  flex-shrink: 0;
}

.portal-svc-dd__search{
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  outline: none;
}

.portal-svc-dd__search::placeholder{
  color: var(--muted);
  font-weight: 500;
}

.portal-svc-dd__list{
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* flex-колонка: без min-height:0 список растягивается под весь контент и скролл «ломается» */
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(204, 76, 110, 0.35) transparent;
}

.portal-svc-dd__list::-webkit-scrollbar{
  width: 8px;
}
.portal-svc-dd__list::-webkit-scrollbar-thumb{
  background: rgba(204, 76, 110, 0.28);
  border-radius: 999px;
}

.portal-svc-dd__opt{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.portal-svc-dd__opt[hidden]{
  display: none !important;
}

.portal-svc-dd__opt:hover{
  background: rgba(204, 76, 110, 0.09);
  color: var(--primary-hover);
}

.portal-svc-dd__opt--selected,
.portal-svc-dd__opt[aria-selected="true"]{
  background: rgba(204, 76, 110, 0.14);
  color: #8f3450;
  font-weight: 800;
}

.portal-svc-dd__opt--disabled{
  cursor: default;
  pointer-events: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
  background: transparent;
}

.portal-svc-dd__opt--disabled:hover{
  background: transparent;
  color: #9a9a9a;
}

.portal-svc-dd__opt + .portal-svc-dd__opt{
  margin-top: 2px;
}

.record-portal-svc-price{
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
}

.record-detail-actions .btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.record-portal-svc-add-toolbar{
  display: flex;
  align-items: center;
  margin: 8px 0 8px;
}

@media (max-width: 720px){
  .record-portal-addons .record-portal-svc-add-toolbar{
    margin-top: 12px;
    padding-top: 2px;
  }
}

.record-portal-abonement-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.kv-list{
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
}

.kv-row{
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 10px 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  align-items: start;
}

.kv-row:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.record-detail-status{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  line-height: 1.35;
}

.record-detail-status__yc{
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95em;
}

.kv-row:first-child{
  padding-top: 0;
}

.kv-row dt{
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.35;
}

.kv-row dd{
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  word-break: break-word;
}

.journal-subsection{
  margin-top: 18px;
}

/* Карточка в сетке «Залоги»: не тянуть верхний отступ от глобального .journal-subsection */
.record-detail-layout--deposits > .record-detail-deposits-supplement.journal-subsection{
  margin-top: 0;
}

.journal-subsection__title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-subsection__title i{
  color: var(--primary);
  opacity: 0.9;
}

.record-detail-body .data-table-container{
  border-radius: var(--radius-sm);
}

.record-detail-comment-label{
  display: block;
  margin-top: 16px;
}

.record-detail-comment{
  width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.record-detail-comment:focus{
  outline: none;
  border-color: rgba(204,76,110,0.5);
  box-shadow: 0 0 0 4px var(--focus), var(--shadow-soft);
}

.record-comments-add{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.record-comments-add .record-detail-comment{
  align-self: stretch;
}

.record-comments-feed{
  margin-top: 10px;
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding-right: 2px;
}

.record-comment-item{
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
  box-shadow: var(--shadow-soft);
  padding: 8px 10px;
}

.record-comment-item__meta{
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.record-comment-item__role{
  display: inline-block;
  margin-left: 4px;
}

.record-comment-item__text{
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
}

.modal-content--audit{
  width: min(880px, 96vw);
}

.audit-details-text{
  margin: 0;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow-soft);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 14px;
  color: var(--text);
  max-height: min(56vh, 460px);
  overflow: auto;
}

.record-detail-actions{
  margin-top: 0;
  position: static;
  z-index: 3;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  background: var(--portal-surface);
  border-top: 1px solid var(--portal-border);
  box-shadow: 0 -6px 14px rgba(0,0,0,0.06);
}

/* Футер модалки «Подробнее»: плашка с кнопками, вне прокрутки контента */
.record-detail-footer.record-detail-actions{
  flex-shrink: 0;
  margin-top: auto;
}

.modal-body--record .record-detail-footer.record-detail-actions{
  padding-right: calc(14px + var(--record-modal-scrollbar-inset, 0px));
}

/* Модалка записи: кнопки без «стеклянной» прозрачности */
.modal-content--record .record-detail-actions .btn--ghost{
  background: var(--portal-surface);
  border-color: var(--portal-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.modal-content--record .record-detail-actions .btn--ghost:hover{
  background: rgba(204,76,110,0.10);
  border-color: rgba(204,76,110,0.28);
}

.modal-content--record .record-detail-actions .btn--danger{
  background: rgba(214,43,43,0.16);
  border-color: rgba(214,43,43,0.38);
}

.modal-content--record .record-detail-actions .btn--danger:hover{
  background: rgba(214,43,43,0.24);
  border-color: rgba(214,43,43,0.45);
}

.modal-content--record > .close-button{
  top: 28px;
  right: 14px;
  background: var(--portal-surface);
}

.modal-content--record > .close-button:hover{
  background: rgba(204,76,110,0.12);
  border-color: rgba(204,76,110,0.28);
}

@media (max-width: 720px){
  .kv-row{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 640px){
  .journal-page .section-head{
    margin: 4px 0 10px;
  }
  .journal-page .section-head h2{
    font-size: 1.25rem;
  }

  .journal-toolbar{
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .journal-toolbar__filters{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .journal-toolbar__filters > .journal-search{
    grid-column: 1 / -1;
  }
  .journal-toolbar__actions{
    width: 100%;
    justify-content: stretch;
    margin-left: 0;
    justify-self: stretch;
    grid-column: 1 / -1;
  }
  .journal-toolbar .records-date-control{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .journal-toolbar .records-date-label{
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
    text-align: left;
  }
  .journal-dd{
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .journal-search{
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .journal-toolbar input.journal-search{
    height: var(--journal-control-height);
    min-height: var(--journal-control-height);
    max-height: var(--journal-control-height);
  }
  .journal-toolbar .journal-dd__trigger{
    min-height: var(--journal-control-height);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .journal-date-input{
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .journal-date-range{
    width: 1px;
    min-width: 1px;
    flex: 0 0 1px;
  }

  .journal-toolbar__badges,
  .journal-toolbar__bulk{
    grid-column: 1 / -1;
  }

  /* На мобильных показываем карточки вместо широких таблиц журнала и логирования */
  #records-list .journal-table-scroll{
    display: none;
  }
  #records-list .journal-mobile-list{
    display: grid;
  }
  #history-list .journal-table-scroll{
    display: none;
  }
  #history-list .journal-mobile-list{
    display: grid;
  }

  #records-list .journal-summary-mobile{
    display: flex;
  }
}

@media (max-width: 480px){
  .confirm-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .confirm-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* Карточка записи: пояснение для мастера, когда отметка посещения недоступна */
.record-detail-master-note{
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.6rem;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.22);
  color: var(--text, #1e293b);
  font-size: 0.8125rem;
  line-height: 1.38;
}
.record-detail-master-note i{
  margin-top: 0.1rem;
  color: #2563eb;
  flex-shrink: 0;
  font-size: 0.95em;
}

/* Мастер: чекбокс только для записей в «Ожидание» */
.journal-row .col-cb input[data-journal-record-cb]:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}
.journal-mobile-card__cb--locked{
  opacity: 0.45;
  pointer-events: none;
}

/* Настройки (суперадминистратор): списки абонементов */
.app-settings-layout{
  max-width: 960px;
}
.abonement-preset-card{
  margin-bottom: 20px;
  padding: 16px 18px;
}
.abonement-preset-card--collapsed .abonement-preset-card__head{
  margin-bottom: 0;
}
.abonement-preset-card__head{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
}
.abonement-preset-card__toggle{
  flex: 0 0 auto;
  align-self: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 0 2px 0;
  border: 1px solid rgba(204,76,110,0.35);
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  color: #b84466;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.abonement-preset-card__toggle:hover{
  background: rgba(204,76,110,0.08);
  border-color: rgba(204,76,110,0.5);
}
.abonement-preset-card__toggle:focus-visible{
  outline: 2px solid rgba(204,76,110,0.45);
  outline-offset: 2px;
}
.abonement-preset-card--collapsed .abonement-preset-card__body{
  display: none;
}
.abonement-preset-card__body{
  padding-top: 2px;
}
.abonement-preset-card__name-label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  font-weight: 600;
  font-size: 0.875rem;
}
.abonement-preset-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.abonement-preset-table-wrap{
  overflow-x: auto;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}
.abonement-preset-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.abonement-preset-table th,
.abonement-preset-table td{
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}
.abonement-preset-table th{
  background: rgba(0,0,0,0.03);
  font-weight: 600;
  white-space: nowrap;
}
.abonement-preset-col--drag{
  width: 36px;
  text-align: center;
  cursor: grab;
}
.abonement-preset-col--chk{
  width: 72px;
  text-align: center;
}
.abonement-preset-drag{
  color: rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.abonement-preset-row--dragging{
  opacity: 0.65;
  background: rgba(204,76,110,0.08);
}
.abonement-preset-table .record-motivation-field__input{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.abonement-preset-table input[type="number"]{
  max-width: 100px;
}
@media (max-width: 720px){
  .abonement-preset-card__head{
    flex-direction: column;
    align-items: stretch;
  }
  .abonement-preset-card__actions{
    justify-content: flex-start;
  }
}

/* Отчёты */
.reports-dashboard{
  max-width: var(--max-journal);
  margin: 0 auto;
  padding: 0 4px 24px;
}
.reports-dashboard .card.journal-toolbar{
  margin-bottom: 14px;
}
.reports-dashboard__lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.reports-subnav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 0 4px;
  max-width: var(--max-journal);
}
.reports-subnav__btn{
  appearance: none;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--portal-card-shadow);
}
.reports-subnav__btn:hover{
  border-color: rgba(204, 76, 110, 0.35);
}
.reports-subnav__btn.is-active{
  border-color: rgb(204, 76, 110);
  color: rgb(150, 45, 75);
  background: rgba(204, 76, 110, 0.08);
}
.reports-subpanel[hidden]{
  display: none !important;
}
.reports-period-hint{
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.reports-toolbar__badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.reports-toolbar-compare{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.reports-compare-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.reports-compare-toggle input{
  width: 16px;
  height: 16px;
  accent-color: rgb(204, 76, 110);
  cursor: pointer;
}
.reports-compare-period-hint{
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.journal-toolbar .records-date-control--compare{
  margin: 0;
}
.reports-compare{
  display: inline;
  white-space: normal;
  line-height: 1.35;
}
.reports-compare__prev{
  color: #111;
  font-weight: 650;
}
.reports-compare__sep{
  color: var(--muted);
  font-weight: 500;
  padding: 0 2px;
}
.reports-compare__curr{
  font-weight: 700;
}
.reports-compare__curr--up{
  color: rgb(21, 128, 61);
}
.reports-compare__curr--down{
  color: rgb(192, 57, 43);
}
.reports-table__num .reports-compare{
  font-size: 0.92em;
}
.reports-kpi-card__value .reports-compare{
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
}
.reports-kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .reports-kpi-grid--six{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.reports-kpi-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  box-shadow: var(--portal-card-shadow);
  box-sizing: border-box;
}
.reports-kpi-card__head{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.reports-kpi-card__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 14px rgba(15, 23, 42, 0.12);
}
.reports-kpi-card__icon--series-total{
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
}
.reports-kpi-card__icon--series-new{
  background: linear-gradient(145deg, #22c55e 0%, #15803d 100%);
}
.reports-kpi-card__icon--series-repeat{
  background: linear-gradient(145deg, #eab308 0%, #ca8a04 100%);
}
.reports-kpi-card__label{
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0;
  flex-shrink: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.reports-kpi-card__head .reports-kpi-card__label{
  margin-bottom: 0;
}
.reports-kpi-card__meta{
  font-size: 0.75rem;
  color: var(--muted);
  margin: 6px 0 0;
  opacity: 0.92;
  flex-shrink: 0;
  line-height: 1.3;
}
.reports-kpi-card__value{
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: auto;
  padding-top: 8px;
  line-height: 1.15;
}
.reports-charts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.reports-chart-card{
  padding: 16px 18px 20px;
}
.reports-chart-card__title{
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
}
.reports-chart-card__title--with-dd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.reports-chart-card__title--with-dd .reports-chart-card__title-text{
  flex-shrink: 0;
}
.reports-chart-card__title--with-dd .journal-dd{
  flex-shrink: 0;
}
.reports-chart-card__title--with-dd .journal-dd__trigger{
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.9375rem;
}
.reports-chart-card__body{
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 0;
}
.reports-chart-card__canvas-wrap{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 400px;
}
.reports-chart-metrics-panel{
  flex: 0 0 240px;
  width: 240px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(74, 63, 66, 0.12);
  padding-left: 12px;
}
.reports-chart-metrics-panel__title{
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 8px;
  flex-shrink: 0;
}
.reports-chart-metrics-list{
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  flex: 1 1 auto;
  min-height: 0;
}
.reports-chart-metric{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.25;
  user-select: none;
}
.reports-chart-metric:hover{
  background: rgba(204, 76, 110, 0.06);
}
.reports-chart-metric__input{
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: rgb(204, 76, 110);
}
.reports-chart-metric__swatch{
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-top: 3px;
  flex-shrink: 0;
  background: rgb(149, 165, 166);
}
.reports-chart-metric__label{
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 900px){
  .reports-chart-card__body{
    flex-direction: column;
  }
  .reports-chart-metrics-panel{
    flex: 0 0 auto;
    width: 100%;
    max-height: 220px;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(74, 63, 66, 0.12);
    padding-top: 12px;
  }
  .reports-chart-card__canvas-wrap{
    height: 320px;
  }
}
.reports-chart-card__canvas-wrap--branch{
  height: min(420px, 52vh);
}
.reports-chart-empty{
  margin: 0;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}
.reports-tables-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.reports-table-card{
  padding: 16px 18px;
  overflow: hidden;
}
.reports-table-card--span-full{
  grid-column: 1 / -1;
}
.reports-table-card__title{
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
}
.reports-table-wrap{
  overflow-x: auto;
  margin: 0 -4px;
}
.reports-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.reports-table th,
.reports-table td{
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.reports-table th{
  background: rgba(0,0,0,0.03);
  font-weight: 600;
  white-space: nowrap;
}
.reports-table--wide .reports-table__th--multiline{
  white-space: normal;
  line-height: 1.3;
  max-width: 7.5rem;
  vertical-align: bottom;
}
.reports-table__th-note{
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.reports-table thead th .reports-sort-btn--multiline{
  display: block;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
  font-weight: inherit;
}
.reports-table thead th .journal-sort-btn{
  max-width: 100%;
}
.reports-table__num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reports-table--detail th,
.reports-table--detail td{
  white-space: nowrap;
}

.reports-table--detail td:nth-child(6){
  white-space: normal;
  min-width: 120px;
  max-width: 220px;
}
.reports-table__empty{
  color: var(--muted);
  text-align: center;
  padding: 20px 12px !important;
}