/* Modal enhancements: accents, shadows, spacing, and log toolbar */

.modal-content {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
}


/* Slim colored top accent per modal type using Bootstrap variables (Option A)
  Falls back to sensible hex values if variables aren't defined. */
.modal[data-modal-type="alert"] .modal-content { border-top: 4px solid var(--bs-danger, #dc3545); }
.modal[data-modal-type="confirm"] .modal-content { border-top: 4px solid var(--bs-primary, #0d6efd); }
.modal[data-modal-type="info"] .modal-content { border-top: 4px solid var(--bs-info, #0dcaf0); }
.modal[data-modal-type="log"] .modal-content { border-top: 4px solid var(--bs-secondary, #6c757d); }
.modal[data-modal-type="loading"] .modal-content { border-top: 4px solid var(--bs-purple, #6f42c1); }

.modal-header { align-items: center; gap: 0.5rem; }
.modal-icon { font-size: 1.15rem; color: inherit; }

/* Color modal icons to match the accent */
.modal[data-modal-type="alert"] .modal-icon { color: var(--bs-danger, #dc3545); }
.modal[data-modal-type="confirm"] .modal-icon { color: var(--bs-primary, #0d6efd); }
.modal[data-modal-type="info"] .modal-icon { color: var(--bs-info, #0dcaf0); }
.modal[data-modal-type="log"] .modal-icon { color: var(--bs-secondary, #6c757d); }
.modal[data-modal-type="loading"] .modal-icon { color: var(--bs-purple, #6f42c1); }

/* Log viewer specifics */
.log-toolbar .btn { min-width: 36px; }
.pre-wrapable { white-space: pre; }
.pre-wrapable.wrap { white-space: pre-wrap; }

/* Rounded buttons inside modals to follow theme */
.modal .btn, .modal .btn-primary, .modal .btn-secondary { border-radius: 12px; }

/* slightly larger modal titles for presence */
.modal-title { font-weight: 600; }

/* subtle show transition (composite with Bootstrap fade) */
.modal.fade .modal-dialog { transform: translateY(-6px); transition: transform .18s ease-out; }
.modal.show .modal-dialog { transform: translateY(0); }

/* ensure .btn-outline-light visible on light backgrounds */
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover, .btn-outline-light:focus { color: #fff; background: rgba(255,255,255,0.06); }

/* small responsive tweaks */
@media (max-width: 576px) {
  .modal-dialog { margin: 1rem; }
  .modal-title { font-size: 1rem; }
}