/**
 * @file
 * WDSB Modal System - CSS
 * 
 * Version: 2025.11.08.164500
 * Autor: Willi da Silva Borges - WDSB-Webdesign
 * 
 * Zentrales Modal-Styling mit einheitlichem Header/Body/Footer-Layout
 * 
 * Changelog:
 * - 2025.11.08.164500: Content-Modal Support hinzugefügt
 * - 2025.11.05.110000: Initial version
 */

/* ============================================================================
   CSS Variables
   ============================================================================ */
:root {
  --wdsb-modal-overlay-bg: rgba(0, 0, 0, 0.6);
  --wdsb-modal-bg: #ffffff;
  --wdsb-modal-border-radius: 8px;
  --wdsb-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  --wdsb-modal-max-width: 600px;
  --wdsb-modal-padding: 20px;
  
  /* Header */
  --wdsb-modal-header-bg: #f8f9fa;
  --wdsb-modal-header-border: #dee2e6;
  --wdsb-modal-header-color: #212529;
  
  /* Body */
  --wdsb-modal-body-bg: #ffffff;
  --wdsb-modal-body-color: #495057;
  
  /* Footer */
  --wdsb-modal-footer-bg: #f8f9fa;
  --wdsb-modal-footer-border: #dee2e6;
  
  /* Buttons */
  --wdsb-modal-btn-padding: 10px 20px;
  --wdsb-modal-btn-border-radius: 4px;
  --wdsb-modal-btn-font-size: 14px;
  
  /* Type Colors */
  --wdsb-modal-success-color: #28a745;
  --wdsb-modal-error-color: #dc3545;
  --wdsb-modal-warning-color: #ffc107;
  --wdsb-modal-info-color: #17a2b8;
  --wdsb-modal-confirm-color: #007bff;
}

/* ============================================================================
   Overlay (alle Modals haben diese Klasse)
   ============================================================================ */
.wdsb-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--wdsb-modal-overlay-bg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wdsb-modal-overlay.wdsb-modal-active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.wdsb-modal-overlay.wdsb-modal-active .wdsb-modal-container {
  transform: scale(1);
}

/* Legacy Support: Alte ID-basierte Selektoren */
#wdsb-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--wdsb-modal-overlay-bg);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#wdsb-modal-overlay.wdsb-modal-active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

/* ============================================================================
   Container (alle Modals haben diese Klasse)
   ============================================================================ */
.wdsb-modal-container {
  background: var(--wdsb-modal-bg);
  border-radius: var(--wdsb-modal-border-radius);
  box-shadow: var(--wdsb-modal-shadow);
  max-width: var(--wdsb-modal-max-width);
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

#wdsb-modal-overlay.wdsb-modal-active #wdsb-modal-container {
  transform: scale(1);
}

/* ============================================================================
   Header (Klassen und IDs)
   ============================================================================ */
.wdsb-modal-header,
#wdsb-modal-header {
  background: var(--wdsb-modal-header-bg);
  border-bottom: 1px solid var(--wdsb-modal-header-border);
  padding: var(--wdsb-modal-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wdsb-modal-title,
#wdsb-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--wdsb-modal-header-color);
}

.wdsb-modal-close-btn,
#wdsb-modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wdsb-modal-close-btn:hover,
#wdsb-modal-close-btn:hover {
  background-color: #e9ecef;
  color: #212529;
}

/* ============================================================================
   Body (Klassen und IDs)
   ============================================================================ */
.wdsb-modal-body,
#wdsb-modal-body {
  background: var(--wdsb-modal-body-bg);
  padding: var(--wdsb-modal-padding);
  color: var(--wdsb-modal-body-color);
  overflow-y: auto;
  flex: 1;
  display: flex;
  gap: 15px;
}

.wdsb-modal-icon,
#wdsb-modal-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

#wdsb-modal-icon svg {
  width: 100%;
  height: 100%;
}

.wdsb-modal-message,
#wdsb-modal-message {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 4px;
}

/* ============================================================================
   Footer (Klassen und IDs)
   ============================================================================ */
.wdsb-modal-footer,
#wdsb-modal-footer {
  background: var(--wdsb-modal-footer-bg);
  border-top: 1px solid var(--wdsb-modal-footer-border);
  padding: var(--wdsb-modal-padding);
}

#wdsb-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.wdsb-modal-btn {
  padding: var(--wdsb-modal-btn-padding);
  border-radius: var(--wdsb-modal-btn-border-radius);
  font-size: var(--wdsb-modal-btn-font-size);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.wdsb-modal-btn-cancel {
  background: #6c757d;
  color: #ffffff;
  border-color: #6c757d;
}

.wdsb-modal-btn-cancel:hover {
  background: #5a6268;
  border-color: #545b62;
}

.wdsb-modal-btn-confirm {
  background: #007bff;
  color: #ffffff;
  border-color: #007bff;
}

.wdsb-modal-btn-confirm:hover {
  background: #0056b3;
  border-color: #004085;
}

/* ============================================================================
   Type-Specific Styling
   ============================================================================ */

/* Success */
.wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-icon,
.wdsb-modal-container.wdsb-modal-type-success #wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-success #wdsb-modal-icon {
  color: var(--wdsb-modal-success-color);
}

.wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-btn-confirm,
#wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-btn-confirm {
  background: var(--wdsb-modal-success-color);
  border-color: var(--wdsb-modal-success-color);
}

.wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-btn-confirm:hover,
#wdsb-modal-container.wdsb-modal-type-success .wdsb-modal-btn-confirm:hover {
  background: #218838;
  border-color: #1e7e34;
}

/* Error */
.wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-icon,
.wdsb-modal-container.wdsb-modal-type-error #wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-error #wdsb-modal-icon {
  color: var(--wdsb-modal-error-color);
}

.wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-btn-confirm,
#wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-btn-confirm {
  background: var(--wdsb-modal-error-color);
  border-color: var(--wdsb-modal-error-color);
}

.wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-btn-confirm:hover,
#wdsb-modal-container.wdsb-modal-type-error .wdsb-modal-btn-confirm:hover {
  background: #c82333;
  border-color: #bd2130;
}

/* Warning */
.wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-icon,
.wdsb-modal-container.wdsb-modal-type-warning #wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-warning #wdsb-modal-icon {
  color: var(--wdsb-modal-warning-color);
}

.wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-btn-confirm,
#wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-btn-confirm {
  background: var(--wdsb-modal-warning-color);
  border-color: var(--wdsb-modal-warning-color);
  color: #212529;
}

.wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-btn-confirm:hover,
#wdsb-modal-container.wdsb-modal-type-warning .wdsb-modal-btn-confirm:hover {
  background: #e0a800;
  border-color: #d39e00;
}

/* Info */
.wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-icon,
.wdsb-modal-container.wdsb-modal-type-info #wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-icon,
#wdsb-modal-container.wdsb-modal-type-info #wdsb-modal-icon {
  color: var(--wdsb-modal-info-color);
}

.wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-btn-confirm,
#wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-btn-confirm {
  background: var(--wdsb-modal-info-color);
  border-color: var(--wdsb-modal-info-color);
}

.wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-btn-confirm:hover,
#wdsb-modal-container.wdsb-modal-type-info .wdsb-modal-btn-confirm:hover {
  background: #138496;
  border-color: #117a8b;
}

/* Confirm */
#wdsb-modal-container.wdsb-modal-type-confirm #wdsb-modal-icon {
  color: var(--wdsb-modal-confirm-color);
}

/* ============================================================================
   Password Modal
   ============================================================================ */

/* Password Type Icon */
#wdsb-modal-container.wdsb-modal-type-password #wdsb-modal-icon {
  color: #6c757d;
}

/* Password Input Wrapper */
.wdsb-modal-password-wrapper {
  position: relative;
  margin-top: 15px;
}

/* Password Input Field */
.wdsb-modal-password-input {
  width: 100%;
  padding: 12px 45px 12px 12px;
  font-size: 14px;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.wdsb-modal-password-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.wdsb-modal-password-input::placeholder {
  color: #adb5bd;
}

/* Error State */
.wdsb-modal-password-input.wdsb-modal-input-error {
  border-color: #dc3545;
  animation: shake 0.3s ease;
}

.wdsb-modal-password-input.wdsb-modal-input-error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Password Toggle Button */
.wdsb-modal-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.wdsb-modal-password-toggle:hover {
  background-color: #f8f9fa;
}

.wdsb-modal-password-toggle:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.wdsb-modal-password-toggle svg {
  width: 20px;
  height: 20px;
  color: #6c757d;
}

/* Password Message Styling */
#wdsb-modal-container.wdsb-modal-type-password #wdsb-modal-message p {
  margin: 0 0 10px 0;
  color: #495057;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 768px) {
  #wdsb-modal-container {
    width: 95%;
    max-width: none;
  }
  
  #wdsb-modal-body {
    flex-direction: column;
  }
  
  #wdsb-modal-icon {
    width: 40px;
    height: 40px;
  }
  
  #wdsb-modal-buttons {
    flex-direction: column-reverse;
  }
  
  .wdsb-modal-btn {
    width: 100%;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */
.wdsb-modal-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.wdsb-modal-close-btn:focus,
#wdsb-modal-close-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #wdsb-modal-overlay,
  #wdsb-modal-container {
    transition: none;
  }
}


/* ============================================================================
   Content Modal (Neu: 2025.11.08.164500)
   ============================================================================ */

/* Content Modal Container */
#wdsb-modal-container.wdsb-modal-type-content {
  max-width: 90%;
  width: 90%;
  height: 90vh;
  max-height: 90vh;
}

/* Fullscreen Mode */
#wdsb-modal-container.wdsb-modal-fullscreen {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
}

/* Content Body - Fill verfügbaren Raum */
#wdsb-modal-container.wdsb-modal-type-content #wdsb-modal-body {
  flex: 1;
  padding: 0;
  overflow: hidden;
  display: block;
}

/* Content Wrapper */
.wdsb-modal-content-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* Content für PDFs, iframes */
.wdsb-modal-content-wrapper embed,
.wdsb-modal-content-wrapper iframe,
.wdsb-modal-content-wrapper object {
  width: 100%;
  height: 100%;
  border: none;
}

/* Content Footer (falls Buttons vorhanden) */
#wdsb-modal-container.wdsb-modal-type-content #wdsb-modal-footer:empty {
  display: none;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  #wdsb-modal-container.wdsb-modal-type-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}