/* --- Legacy compatibility and enhancements merged from modals_old.css --- */

/* Prevent body scroll when modal is open */
.pretext-modal-open {
  overflow: hidden;
}

/* Modal Dialog: max-height for scrollable content */
.pretext-modal-dialog {
  max-height: 95vh;
  margin: auto;
  position: relative;
}

/* Modal transition for visibility (legacy support) */
.pretext-modal {
  visibility: hidden;
}
.pretext-modal.active {
  visibility: visible;
}

/* Modal dialog slide-in effect (legacy support) */
.pretext-modal-dialog {
  transform: translateY(-20px);
  transition: transform 0.3s cubic-bezier(.4,1.4,.6,1);
}
.pretext-modal.active .pretext-modal-dialog {
  transform: translateY(0);
}

/* Modal size classes for explicit width/height (legacy support) */
.pretext-modal-small .pretext-modal-dialog { width: 350px; max-width: 95vw; }
.pretext-modal-medium .pretext-modal-dialog { width: 500px; max-width: 95vw; }
.pretext-modal-large .pretext-modal-dialog { width: 800px; max-width: 98vw; }
.pretext-modal-full .pretext-modal-dialog { width: 98vw; height: 90vh; max-width: 1200px; min-height: 90vh; }

/* Toast/Notification close button (legacy style) */
.pretext-toast-close {
  background: none;
  border: none;
  color: var(--modal-close-fg, rgba(34,34,34,0.7));
  cursor: pointer;
  padding: 0 0 0 10px;
  font-size: 1.1em;
  transition: color 0.2s;
}
.pretext-toast-close:hover { color: var(--modal-close-hover, #222); }

/* Toast/Notification icon color by type (legacy style, now using variables) */
.pretext-toast.type-success .pretext-toast-icon { color: var(--modal-success); }
.pretext-toast.type-error .pretext-toast-icon { color: var(--modal-danger); }
.pretext-toast.type-warning .pretext-toast-icon { color: var(--modal-warning); }
.pretext-toast.type-info .pretext-toast-icon { color: var(--modal-info); }

.pretext-notification.type-success .pretext-notification-icon { color: var(--modal-success); }
.pretext-notification.type-error .pretext-notification-icon { color: var(--modal-danger); }
.pretext-notification.type-warning .pretext-notification-icon { color: var(--modal-warning); }
.pretext-notification.type-info .pretext-notification-icon { color: var(--modal-info); }

/* Notification progress bar (legacy style, now using variables) */
.pretext-notification-progress {
  background: var(--modal-accent);
}

/* Responsive toast/notification container positions (legacy support) */
.pretext-toast-container.position-top-right {
  top: 2em;
  right: 2em;
  align-items: flex-end;
}
.pretext-toast-container.position-top-left {
  top: 2em;
  left: 2em;
  align-items: flex-start;
}
.pretext-toast-container.position-bottom-right {
  bottom: 2em;
  right: 2em;
  align-items: flex-end;
}
.pretext-toast-container.position-bottom-left {
  bottom: 2em;
  left: 2em;
  align-items: flex-start;
}
.pretext-toast-container.position-top-center {
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.pretext-notification-container.position-top-left {
  top: 2em;
  left: 2em;
}
.pretext-notification-container.position-bottom-right {
  bottom: 2em;
  right: 2em;
}
.pretext-notification-container.position-bottom-left {
  bottom: 2em;
  left: 2em;
}

/* Notification content for legacy style (padding, font) */
.pretext-notification-content {
  flex: 1;
  padding: 1em 0;
}
.pretext-notification-message {
  font-size: 1.05em;
  color: var(--notification-fg);
}

/* Button hover/active states for legacy/modern blend */
.pretext-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 3px 12px rgba(47,127,194,0.12);
}
.pretext-btn:focus {
  outline: 2px solid var(--modal-accent);
  outline-offset: 2px;
}

/* Modal dialog accessibility: focus ring for close button */
.pretext-modal-close:focus {
  outline: 2px solid var(--modal-accent);
  outline-offset: 2px;
}

/* Alert/Prompt icon color by type (legacy style, now using variables) */
.pretext-alert-icon .text-success { color: var(--modal-success); }
.pretext-alert-icon .text-error { color: var(--modal-danger); }
.pretext-alert-icon .text-warning { color: var(--modal-warning); }
.pretext-alert-icon .text-info { color: var(--modal-info); }
/* PretextUI Modals, Toasts, Notifications CSS */

:root {
  --modal-bg: #fff;
  --modal-fg: #222;
  --modal-border: #e0e0e0;
  --modal-radius: 14px;
  --modal-shadow: 0 8px 40px rgba(0,0,0,0.18);
  --modal-header-bg: #f8f8f8;
  --modal-header-fg: #222;
  --modal-footer-bg: #f8f8f8;
  --modal-footer-fg: #444;
  --modal-close-fg: #888;
  --modal-close-hover: #222;
  --modal-z: 20000;
  --modal-accent: #2f7fc2;
  --modal-danger: #e74c3c;
  --modal-success: #27ae60;
  --modal-warning: #f39c12;
  --modal-info: #3498db;
  --toast-bg: #23272e;
  --toast-fg: #fff;
  --toast-radius: 10px;
  --toast-shadow: 0 4px 24px rgba(0,0,0,0.18);
  --notification-bg: #fff;
  --notification-fg: #222;
  --notification-radius: 10px;
  --notification-shadow: 0 4px 24px rgba(0,0,0,0.18);
  --notification-success: #27ae60;
  --notification-error: #e74c3c;
  --notification-warning: #f39c12;
  --notification-info: #3498db;
  --modal-mobile-padding: 1.2em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --modal-bg: #23272e;
    --modal-fg: #f5f5f5;
    --modal-border: #333a44;
    --modal-header-bg: #23272e;
    --modal-header-fg: #f5f5f5;
    --modal-footer-bg: #23272e;
    --modal-footer-fg: #bbb;
    --modal-close-fg: #aaa;
    --modal-close-hover: #fff;
    --toast-bg: #23272e;
    --toast-fg: #f5f5f5;
    --notification-bg: #23272e;
    --notification-fg: #f5f5f5;
    --notification-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }
}

/* Modal Backdrop */
.pretext-modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: calc(var(--modal-z) - 1);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.pretext-modal.active ~ .pretext-modal-backdrop,
.pretext-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Container */
.pretext-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--modal-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.pretext-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.pretext-modal-dialog {
  background: var(--modal-bg);
  color: var(--modal-fg);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border);
  min-width: 320px;
  max-width: 95vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop 0.3s cubic-bezier(.4,1.4,.6,1) both;
  transition: box-shadow 0.2s, border 0.2s;
}
@keyframes modal-pop {
  0% { transform: scale(0.96) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Modal Sizes */
.pretext-modal-small .pretext-modal-dialog { max-width: 350px; }
.pretext-modal-medium .pretext-modal-dialog { max-width: 500px; }
.pretext-modal-large .pretext-modal-dialog { max-width: 800px; }
.pretext-modal-full .pretext-modal-dialog { max-width: 98vw; min-height: 90vh; }

/* Modal Header */
.pretext-modal-header {
  background: var(--modal-header-bg);
  color: var(--modal-header-fg);
  padding: 1.1em 2em 1em 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--modal-border);
}
.pretext-modal-title {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0;
}
.pretext-modal-close {
  background: none;
  border: none;
  color: var(--modal-close-fg);
  font-size: 1.5em;
  cursor: pointer;
  transition: color 0.2s;
}
.pretext-modal-close:hover {
  color: var(--modal-close-hover);
}

/* Modal Body */
.pretext-modal-body {
  padding: 2em;
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 1.08em;
  line-height: 1.7;
}

/* Modal Footer */
.pretext-modal-footer {
  background: var(--modal-footer-bg);
  color: var(--modal-footer-fg);
  padding: 1.2em 2em;
  border-top: 1px solid var(--modal-border);
  display: flex;
  gap: 0.7em;
  justify-content: flex-end;
}

/* Buttons */
.pretext-btn {
  padding: 0.6em 1.4em;
  border-radius: 6px;
  border: none;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  background: var(--modal-accent);
  color: #fff;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(47,127,194,0.08);
}
.pretext-btn-secondary {
  background: #e0e0e0;
  color: #222;
}
.pretext-btn-danger {
  background: var(--modal-danger);
  color: #fff;
}
.pretext-btn-success {
  background: var(--modal-success);
  color: #fff;
}
.pretext-btn-warning {
  background: var(--modal-warning);
  color: #fff;
}
.pretext-btn-info {
  background: var(--modal-info);
  color: #fff;
}
.pretext-btn:active {
  filter: brightness(0.97);
  box-shadow: 0 1px 4px rgba(47,127,194,0.06);
}

/* Toasts */
.pretext-toast-container {
  position: fixed;
  z-index: calc(var(--modal-z) + 100);
  width: 100vw;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.pretext-toast-container.position-bottom-center {
  bottom: 2em;
  left: 0;
  right: 0;
}
.pretext-toast {
  background: var(--toast-bg);
  color: var(--toast-fg);
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  padding: 1em 2em;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}
.pretext-toast.active {
  opacity: 1;
  transform: translateY(0);
}
.pretext-toast-icon {
  font-size: 1.3em;
  margin-right: 0.5em;
}

/* Notifications */
.pretext-notification-container {
  position: fixed;
  z-index: calc(var(--modal-z) + 200);
  width: 340px;
  max-width: 95vw;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.pretext-notification-container.position-top-right {
  top: 2em;
  right: 2em;
  align-items: flex-end;
}
.pretext-notification {
  background: var(--notification-bg);
  color: var(--notification-fg);
  border-radius: var(--notification-radius);
  box-shadow: var(--notification-shadow);
  padding: 1.1em 2em;
  font-size: 1.05em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  border-left: 5px solid var(--notification-info);
}
.pretext-notification.type-success { border-left-color: var(--notification-success); }
.pretext-notification.type-error { border-left-color: var(--notification-error); }
.pretext-notification.type-warning { border-left-color: var(--notification-warning); }
.pretext-notification.type-info { border-left-color: var(--notification-info); }
.pretext-notification.active {
  opacity: 1;
  transform: translateY(0);
}
.pretext-notification-icon {
  font-size: 1.3em;
  margin-right: 0.5em;
}
.pretext-notification-close {
  background: none;
  border: none;
  color: var(--modal-close-fg);
  font-size: 1.2em;
  margin-left: 0.5em;
  cursor: pointer;
  transition: color 0.2s;
}
.pretext-notification-close:hover {
  color: var(--modal-close-hover);
}
.pretext-notification-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: var(--modal-accent);
  width: 100%;
  animation: notification-progress 5s linear forwards;
}
@keyframes notification-progress {
  from { width: 100%; }
  to { width: 0; }
}

/* Alert/Confirm/Prompt Content */
.pretext-alert-content, .pretext-prompt-content {
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
}
.pretext-alert-icon {
  font-size: 2em;
  margin-top: 0.1em;
}
.pretext-alert-message {
  font-size: 1.1em;
  line-height: 1.5;
}
.pretext-prompt-label {
  font-weight: 500;
  margin-bottom: 0.5em;
  display: block;
}
.pretext-prompt-input {
  width: 100%;
  padding: 0.7em;
  font-size: 1.05em;
  border: 1.5px solid var(--modal-border);
  border-radius: 6px;
  background: var(--modal-bg);
  color: var(--modal-fg);
  transition: border 0.18s;
}
.pretext-prompt-input:focus {
  border-color: var(--modal-accent);
  outline: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .pretext-modal-dialog {
    min-width: 0;
    width: 99vw;
    max-width: 99vw;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .pretext-modal-header,
  .pretext-modal-body,
  .pretext-modal-footer {
    padding-left: var(--modal-mobile-padding);
    padding-right: var(--modal-mobile-padding);
  }
  .pretext-notification-container {
    width: 99vw;
    right: 0.5vw;
    left: 0.5vw;
  }
  .pretext-toast-container {
    width: 99vw;
    left: 0.5vw;
    right: 0.5vw;
  }
}