/* ════════════════════════════════════════════════════
   Design Tokens — Monolit LK v2
   Warm palette • Soft rose brand accent
   ════════════════════════════════════════════════════ */

:root {
  /* Brand: company red, softened to deep rose (elegant, not aggressive) */
  --accent:        #c2185b;
  --accent-dk:     #880e4f;
  --accent-lt:     #fce4ec;
  --accent-muted:  rgba(194, 24, 91, .09);
  --accent-ring:   rgba(194, 24, 91, .20);

  /* Page background: warm off-white — replaces cold #e5ecf6 */
  --bg:            #f2eeea;
  --bg-alt:        #ebe7e2;

  /* Surfaces */
  --surface:       #faf8f6;
  --surface-2:     #f5f2ee;
  --surface-3:     #eeebe6;
  --surface-hover: #e8e4de;

  /* Borders */
  --border:        #e8e3dc;
  --border-lt:     #edeae5;

  /* Typography */
  --text:          #1c1917;
  --text-2:        #44403c;
  --text-muted:    #78716c;
  --text-light:    #a8a29e;

  /* Navigation */
  --nav-bg:        #faf8f6;
  --nav-shadow:    0 1px 0 #e8e3dc, 0 2px 8px rgba(0, 0, 0, .06);
  --nav-text:      #1c1917;
  --nav-icon:      #78716c;
  --nav-hover-bg:  #f4f1ed;
  --nav-hover-txt: #c2185b;

  /* Semantic colours */
  --clr-green:     #166534;
  --clr-green-bg:  #f0fdf4;
  --clr-green-br:  #bbf7d0;
  --clr-red:       #991b1b;
  --clr-red-bg:    #fef2f2;
  --clr-red-br:    #fecaca;
  --clr-amber:     #92400e;
  --clr-amber-bg:  #fffbeb;
  --clr-amber-br:  #fde68a;
  --clr-blue:      #1e40af;
  --clr-blue-bg:   #eff6ff;
  --clr-blue-br:   #bfdbfe;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, .07);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .07);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);

  /* Border radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;

  /* Layout */
  --lk-header-offset: 100px;
}

/* ════════════════════════════════════════════════════
   Global base overrides — apply to ALL pages
   ════════════════════════════════════════════════════ */

body {
  background-color: var(--bg) !important;
  color: var(--text);
}

/* ── Common card / panel components ── */
.box,
.modal-window,
.profile-page .section,
.section {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* ── SweetAlert2 global milky override ── */
.swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* ── Модалка «Выход» ── */
.swal-logout-popup.swal2-popup {
  border-radius: var(--r-md, 12px) !important;
  padding: 0 0 1.25rem !important;
  max-width: 22rem;
}

.swal-logout-popup .swal2-title {
  text-align: center !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--text, #1c1917) !important;
  padding: 1.25rem 1.5rem 0.5rem !important;
  margin: 0 !important;
}

.swal-logout-popup .swal2-html-container {
  text-align: center !important;
  color: var(--text-muted, #78716c) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 1.5rem 0.75rem !important;
  padding: 0 !important;
}

.swal-logout-popup .swal2-icon {
  margin: 0.75rem auto 0.5rem !important;
  transform: scale(0.85);
}

.swal-logout-popup .swal2-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0.75rem 0 0 !important;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

.swal-logout-popup .swal2-styled {
  margin: 0 !important;
  min-width: 7.5rem;
  padding: 10px 16px !important;
  border-radius: var(--r-sm, 8px) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

.swal-logout-confirm {
  background-color: #b95e54 !important;
  color: #fff !important;
}

.swal-logout-confirm:hover {
  background-color: #a04a41 !important;
}

.swal-logout-cancel {
  background-color: #3a5f73 !important;
  color: #fff !important;
}

.swal-logout-cancel:hover {
  background-color: #2e4d5f !important;
}

/* ── Custom modals ── */
.modal-dialog-custom,
.modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
}