/* ЭлектроХод — шаг 3: одно окно, одна всплывашка, одно кольцо фокуса.
   ДИЗАЙН-СИСТЕМА.md 2.8 / 2.11 / 3.3. Только токены из tokens.css. Новых имён нет.
   Подключается последним из HtmlLayout, поверх породных стилей. Шторку меню шапки не трогает. */

/* 3.3 Кольцо фокуса одно */
:focus-visible{
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* 2.11 Всплывашка одна: .eh-toast и .toast — одно правило */
.eh-toast, .toast{
  position: fixed;
  left: 50%;
  bottom: var(--toast-bottom);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-regular);
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--ok);
  box-shadow: var(--sh-toast);
  max-width: var(--toast-maxw);
  width: max-content;
  opacity: 0;
  transition: opacity var(--t-drawer);
  pointer-events: none;
  box-sizing: border-box;
}
.eh-toast.show, .toast.show{ opacity: 1; }
.eh-toast--ok, .toast--ok{ border-color: var(--ok); }
.eh-toast--err, .toast--err{ border-color: var(--err); }
.eh-toast--warn, .toast--warn{ border-color: var(--warn); }
.eh-toast--info, .toast--info{ border-color: var(--info); }

@keyframes ehWinIn{
  from{ opacity: 0; transform: translateY(var(--win-shift)); }
  to{ opacity: 1; transform: none; }
}

/* 2.8 Кнопка закрытия одна. margin не сбрасываем: у .cd-close/.lg-close
   штатный margin-left:auto. В углу окна — absolute + --close-inset. */
.modal__close,
.eh-modal__x,
.lightbox__close,
.cat-lightbox__close,
.srch-close,
.cd-close,
.lg-close,
.close-drawer{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--close-size);
  height: var(--close-size);
  min-width: var(--close-size);
  min-height: var(--close-size);
  padding: 0;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-md);
  background: var(--card-2);
  color: var(--text);
  font-size: var(--close-glyph);
  line-height: 1;
  cursor: pointer;
}
.modal__close,
.eh-modal__x,
.lightbox__close,
.cat-lightbox__close,
.cd-close,
.lg-close,
.close-drawer{
  position: absolute;
  top: var(--close-inset);
  right: var(--close-inset);
  margin: 0;
  z-index: 2;
}
.cd-head,
.lg-dhead,
.drawer-heading{
  padding-right: calc(var(--close-inset) + var(--close-size) + 8px);
}

/* ---- породы окон ---- */
.modal{
  z-index: var(--z-window);
  padding: 20px;
}
.modal__overlay{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.modal__dialog{
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  max-width: var(--win-md);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
  padding: var(--form-pad);
  padding-top: calc(var(--close-inset) + var(--close-size));
}

.eh-modal{ z-index: var(--z-window); }
.eh-modal.open{
  display: flex;
  align-items: center;
  justify-content: center;
}
.eh-modal__backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.eh-modal__box{
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  max-width: var(--win-sm);
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: var(--form-pad);
  padding-top: calc(var(--close-inset) + var(--close-size));
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
  max-height: 84vh;
  overflow-y: auto;
}

.rm, .dpm{ z-index: var(--z-window); }
.rm-back, .dpm-back{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.rm-box, .dpm-box{
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
.rm-box{ max-width: var(--win-sm); }
.dpm-box{ max-width: var(--win-sm); }

.cpk-overlay{
  z-index: var(--z-window);
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.cpk-card{
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  max-width: var(--win-sm);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}

dialog.cd-dialog{
  background: var(--card);
  color: var(--text);
  border: 0;
  border-left: var(--bw) solid var(--border);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  width: min(var(--win-lg), 100%);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
dialog.cd-dialog::backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

dialog.cat-quick-dialog{
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  max-width: var(--win-sm);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
dialog.cat-quick-dialog::backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

#catFormCard.cat-drawer{
  z-index: var(--z-window);
  width: min(860px, 100%);
  background: var(--card);
  border-left: var(--bw) solid var(--border);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
.cat-drawer-shade{
  z-index: calc(var(--z-window) - 1);
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

/* Lightbox: только затемнение, blur и крестик. Без 90dvh, фото во весь экран. */
.lightbox,
.cat-lightbox{
  z-index: var(--z-window);
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

/* Поиск — окно, не шторка меню. */
.srch-panel{
  z-index: var(--z-window);
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.srch-results.has{
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
}
.srch-close{ flex: none; }

dialog.invoice-drawer{
  background: var(--card);
  color: var(--text);
  border: 0;
  border-left: var(--bw) solid var(--border);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  width: min(920px, 100%);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
dialog.invoice-drawer::backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}
.drawer-heading .close-drawer{
  font-size: var(--close-glyph);
}

dialog.rt-dialog{
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-lg);
  max-width: min(520px, calc(100% - 24px));
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
dialog.rt-dialog::backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

dialog.lg-dialog{
  background: var(--card);
  color: var(--text);
  border: 0;
  border-left: var(--bw) solid var(--border);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  width: min(640px, 100%);
  box-shadow: var(--sh-window);
  animation: ehWinIn var(--t-btn) ease;
}
dialog.lg-dialog::backdrop{
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  backdrop-filter: blur(var(--backdrop-blur));
}

/* Телефон: окно снизу, не больше 90dvh. Lightbox — исключение. Шторка меню — не здесь. */
@media (max-width: 640px){
  .modal{
    align-items: flex-end;
    padding: 0;
  }
  .modal__dialog{
    max-width: none;
    width: 100%;
    max-height: var(--sheet-maxh);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .eh-modal.open,
  #loginModal.open{ align-items: flex-end; }
  .eh-modal__box,
  #loginModal .eh-modal__box{
    width: 100%;
    max-width: none;
    max-height: var(--sheet-maxh);
    margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .rm.open, .dpm.open{
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .cpk-overlay:not([hidden]){
    align-items: flex-end;
    justify-content: center;
  }
  .rm-box, .dpm-box, .cpk-card{
    width: 100%;
    max-width: none;
    margin: 0;
    max-height: var(--sheet-maxh);
    overflow: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  dialog.cd-dialog,
  dialog.lg-dialog,
  dialog.invoice-drawer,
  #catFormCard.cat-drawer{
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: var(--sheet-maxh);
    border-left: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  dialog.cat-quick-dialog,
  dialog.rt-dialog{
    width: 100%;
    max-width: none;
    max-height: var(--sheet-maxh);
    margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .srch-panel{
    justify-content: flex-end;
    padding: 0;
  }
  .srch-bar{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--close-inset);
    background: var(--card);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .srch-results{
    width: 100%;
    max-width: none;
    max-height: calc(var(--sheet-maxh) - 80px);
    margin: 0;
    background: var(--card);
  }
}

/* 2.9 Заголовок страницы, вариант B (ТГ10761). HtmlLayout грузит этот файл
   на КАЖДОЙ экранной странице и последним — в том числе кабинет и клиентские
   счета, где admin-workspace.css нет ($screenNavigation === ''). */
h1.adm-page-title{
  font-size:var(--fs-win);
  line-height:var(--lh-win);
  font-weight:var(--fw-bold);
  color:var(--accent);
  background-image:linear-gradient(180deg, var(--accent) 0%, var(--bg) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  margin:0 0 var(--sp-16);
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  h1.adm-page-title{
    font-size:var(--fs-win);
    line-height:var(--lh-win);
    font-weight:var(--fw-bold);
    color:var(--accent);
    background-image:linear-gradient(180deg, var(--accent) 0%, var(--bg) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .modal__dialog, .eh-modal__box, .rm-box, .dpm-box, .cpk-card,
  dialog.cd-dialog, dialog.cat-quick-dialog, #catFormCard.cat-drawer,
  dialog.invoice-drawer, dialog.rt-dialog, dialog.lg-dialog,
  .eh-toast, .toast{
    animation: none !important;
    transition: none !important;
  }
}