/*
──────────────────────────────────────────────────────────────────
Copyright (c) 2026 Ilhom Abdullayev (@aib81).
Proyekt: AT MEDSERT — sertifikatsiya tizimi (ISO 13485).
Email: ilhom8108@gmail.com · Telegram: @aib81 (id: 834760045)

Mualliflik huquqi muallifga tegishli. Without written permission —
no copying, forking, or commercial use is allowed.
──────────────────────────────────────────────────────────────────
*/
/* ============================================================
   AT MEDSERT - modal.css
   Shared modal/dialog component. Supports both the pre-existing
   [hidden]-based confirmation modals (devices delete) AND the new
   <dialog> element based DPO erase modal.

   All modals obey the theme tokens from base.css — no hard-coded
   colors. Focus trap + Esc are handled in JS (clients.js /
   devices.js) — this file only owns layout + color.
   ============================================================ */

/* ---------- <dialog> element ---------- */
/* Modern browsers: dialog[open] is the displayed state.
   ::backdrop provides the dim overlay; keep it separate from the
   card so theme tokens stay on the card where aria/focus live.
   Explicit :not([open]) rule — some browsers/themes override UA
   default and show the dialog inline, so we force display:none
   everywhere to keep modal strictly controlled by JS.              */
dialog:not([open]) {
  display: none !important;
}

dialog.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0;
  max-width: 36rem;
  width: 92%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* Some older engines render dialog without the form padding; the
   inner .modal__body owns all edge spacing so layout is identical
   regardless of the browser's dialog default UA styles. */
dialog.modal > form,
dialog.modal > .modal__body {
  margin: 0;
}

.modal__body {
  padding: var(--space-4);
}

.modal__title {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-header);
  font-size: var(--font-size-xl);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
}

.modal__warning {
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-secondary));
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

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

.modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.modal__field label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.modal__field textarea {
  min-height: 7rem;
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-alternate);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.modal__field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-alternate));
}

.modal__hint {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.modal__counter {
  align-self: flex-end;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.modal__result {
  margin-top: var(--space-3);
  min-height: 1em;
}

.modal__result--error {
  color: var(--danger);
}

.modal__result--success {
  color: var(--success);
}

.required {
  color: var(--danger);
  margin-left: 2px;
}

/* ---------- Danger variant (erase PDn / hard delete) ---------- */
dialog.modal--danger {
  border-color: var(--danger);
  border-top: 4px solid var(--danger);
}

dialog.modal--danger .modal__title {
  color: var(--danger);
}

/* ---------- Inline-dimmed modal (pre-existing [hidden] pattern) ---------- */
/* Kept for backward compatibility with devices detail page. */
.modal[hidden] {
  display: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  dialog.modal {
    transition: none;
  }
}

/* ---------- Body text — force inherit color so dark theme is legible.
   Some browsers reset color inside <dialog>; belt-and-braces. ---------- */
dialog.modal .modal__body,
dialog.modal .modal__body p,
dialog.modal .modal__body span,
dialog.modal .modal__body strong,
dialog.modal .modal__body li,
dialog.modal .modal__body dd,
dialog.modal .modal__body dt {
  color: var(--text-primary);
}

dialog.modal .modal__body strong,
dialog.modal .modal__body b {
  color: var(--text-header);
}

dialog.modal .modal__title,
dialog.modal h1, dialog.modal h2, dialog.modal h3, dialog.modal h4 {
  color: var(--text-header);
}

dialog.modal label,
dialog.modal .modal__hint,
dialog.modal .modal__counter {
  color: var(--text-secondary);
}

dialog.modal input,
dialog.modal select,
dialog.modal textarea {
  color: var(--text-primary);
  background: var(--bg-alternate);
}

dialog.modal .btn--ghost {
  color: var(--text-primary);
  background: transparent;
}

/* ---------- Просмотр вложений (web 056) ----------
   Базовое окно ограничено 36rem — для документа А4 это узкая колонка.
   Просмотрщику отдаём почти весь экран. */
dialog.modal.file-viewer {
  width: 96vw;
  max-width: 96vw;
  height: 94vh;
  max-height: 94vh;
  padding: 0;
}

/* ── Окна, созданные скриптом (web 099) ──────────────────────────────
   Чат и другие разделы создают <dialog> прямо в скрипте и задают
   только размеры. Цвета должны приходить из темы, иначе на тёмной теме
   получается белый фон при светлом тексте — надписей не видно.

   Здесь же — поля и кнопки внутри таких окон: у них тот же расчёт. */
dialog {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

dialog input[type="text"],
dialog input[type="number"],
dialog input[type="date"],
dialog input[type="search"],
dialog select,
dialog textarea {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 8px;
}

dialog label {
  color: var(--text-primary);
}

/* Заголовок и пояснения внутри окна. */
dialog h3 {
  color: var(--text-header);
}

dialog .detail-list__value--muted,
dialog small {
  color: var(--text-secondary);
}

/* Строки списка (выбор сотрудника, состав группы, куда переслать). */
dialog li {
  color: var(--text-primary);
}