/* ==========================================
   MODALS & OFFCANVAS
   Стилі для модальних вікон та offcanvas
   ========================================== */

/* ==========================================
   OFFCANVAS - LIGHT
   ========================================== */
.offcanvas {
  background-color: var(--bg-card);
}

.offcanvas-backdrop {
  background-color: rgba(var(--rgb-black), 0.5);
  backdrop-filter: blur(4px);
}

.offcanvas-header {
  border-bottom: 1px solid var(--border);
}

.offcanvas-body {
  padding: 1rem;
}

/* ==========================================
   MODAL - LIGHT
   ========================================== */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

.modal-title {
  font-weight: 600;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

/* ==========================================
   DARK MODE - OFFCANVAS
   ========================================== */
body.dark-mode .offcanvas {
  background-color: var(--dark-surface);
}

body.dark-mode .offcanvas-backdrop {
  background-color: rgba(var(--rgb-black), 0.7);
}

body.dark-mode .offcanvas-header {
  border-bottom-color: rgba(var(--rgb-white), 0.1);
}

/* ==========================================
   DARK MODE - MODAL
   ========================================== */
body.dark-mode .modal-content {
  background-color: var(--dark-surface);
  color: var(--light);
  border: 1px solid rgba(var(--rgb-white), 0.1);
  box-shadow: 0 4px 20px rgba(var(--rgb-black), 0.3);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: var(--dark-hover);
  border-color: rgba(var(--rgb-white), 0.1);
}

body.dark-mode .modal-title {
  color: var(--light);
}

body.dark-mode .modal-body {
  color: var(--text-dark);
}

/* Dark modal class for JS toggle */
.dark-modal .modal-content {
  background-color: var(--dark-surface);
  color: var(--light);
  border: 1px solid rgba(var(--rgb-white), 0.1);
}

.dark-modal .modal-header,
.dark-modal .modal-footer {
  background-color: var(--dark-hover);
  border-color: rgba(var(--rgb-white), 0.1);
}

/* ==========================================
   MODAL CLOSE BUTTON
   ========================================== */
.btn-close {
  transition: var(--transition);
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* ==========================================
   MODAL Z-INDEX STACKING
   For proper modal behavior
   ========================================== */
.modal-backdrop {
  z-index: 1040 !important;
}

.modal-dialog {
  z-index: 1050 !important;
}

.modal {
  z-index: 1045 !important;
}

/* Prevent body scroll under modal */
body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}