/**
 * Custom Dialog System Styles
 * AWS Quiz Platform Theme
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    /* Z-index layers */
    --dialog-z-backdrop: 40;
    --dialog-z-modal: 50;
    --dialog-z-toast: 60;

    /* Colors */
    --dialog-primary: #ff9900;
    --dialog-secondary: #232f3e;
    --dialog-success: #28a745;
    --dialog-error: #dc3545;
    --dialog-warning: #ffc107;
    --dialog-info: #17a2b8;

    /* Spacing */
    --dialog-padding: 2rem;
    --dialog-padding-mobile: 1.5rem;
    --dialog-gap: 1rem;

    /* Sizing */
    --dialog-max-width: 500px;
    --dialog-border-radius: 12px;
    --dialog-border-radius-sm: 8px;

    /* Shadows */
    --dialog-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --dialog-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --dialog-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --dialog-transition-fast: 0.15s ease;
}

/* ========================================
   Backdrop Overlay
   ======================================== */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: var(--dialog-z-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: backdropFadeIn 0.3s ease;
}

.dialog-backdrop.dialog-closing {
    animation: backdropFadeOut 0.3s ease;
}

/* ========================================
   Dialog Container
   ======================================== */
.dialog-container {
    position: relative;
    z-index: var(--dialog-z-modal);
    background: white;
    border-radius: var(--dialog-border-radius);
    padding: var(--dialog-padding);
    max-width: var(--dialog-max-width);
    width: 100%;
    box-shadow: var(--dialog-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--dialog-gap);
    animation: dialogFadeIn var(--dialog-transition);
}

.dialog-container.dialog-closing {
    animation: dialogFadeOut var(--dialog-transition);
}

/* ========================================
   Dialog Icon
   ======================================== */
.dialog-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-icon svg {
    width: 100%;
    height: 100%;
}

/* Icon colors by type */
.dialog-type-success .dialog-icon {
    color: var(--dialog-success);
}

.dialog-type-error .dialog-icon {
    color: var(--dialog-error);
}

.dialog-type-warning .dialog-icon,
.dialog-type-danger .dialog-icon {
    color: var(--dialog-warning);
}

.dialog-type-info .dialog-icon {
    color: var(--dialog-info);
}

/* ========================================
   Dialog Content
   ======================================== */
.dialog-content {
    text-align: center;
}

.dialog-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dialog-secondary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.dialog-message {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* ========================================
   Dialog Actions (Buttons)
   ======================================== */
.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.dialog-btn {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: var(--dialog-border-radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--dialog-transition-fast);
    min-width: 100px;
    text-align: center;
}

.dialog-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.3);
}

.dialog-btn:active {
    transform: scale(0.98);
}

/* Primary button */
.dialog-btn-primary {
    background: linear-gradient(135deg, #ff9900 0%, #ff8000 100%);
    color: white;
}

.dialog-btn-primary:hover {
    background: linear-gradient(135deg, #ff8800 0%, #ff7000 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

/* Danger variant for confirms */
.dialog-type-danger .dialog-btn-primary {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.dialog-type-danger .dialog-btn-primary:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Outline button (cancel) */
.dialog-btn-outline {
    background: transparent;
    border: 2px solid #dee2e6;
    color: #333;
}

.dialog-btn-outline:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* ========================================
   Toast Notifications
   ======================================== */
.dialog-toast-container {
    position: fixed;
    z-index: var(--dialog-z-toast);
    pointer-events: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.dialog-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    border-radius: var(--dialog-border-radius-sm);
    padding: 1rem 1.5rem;
    box-shadow: var(--dialog-shadow-toast);
    min-width: 300px;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--dialog-transition);
}

.dialog-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Toast positioning */
.dialog-toast-bottom {
    animation: toastSlideUp var(--dialog-transition);
}

.dialog-toast-top {
    animation: toastSlideDown var(--dialog-transition);
}

/* Position container based on toast position */
.dialog-toast-container:has(.dialog-toast-bottom) {
    bottom: 0;
    align-items: center;
}

.dialog-toast-container:has(.dialog-toast-top) {
    top: 0;
    align-items: flex-end;
    padding-right: 1rem;
}

/* Toast icon */
.dialog-toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-toast-icon svg {
    width: 100%;
    height: 100%;
}

/* Toast message */
.dialog-toast-message {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #333;
}

/* Toast close button */
.dialog-toast-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--dialog-transition-fast);
}

.dialog-toast-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Toast type colors */
.dialog-toast-success {
    border-left: 4px solid var(--dialog-success);
}

.dialog-toast-success .dialog-toast-icon {
    color: var(--dialog-success);
}

.dialog-toast-error {
    border-left: 4px solid var(--dialog-error);
}

.dialog-toast-error .dialog-toast-icon {
    color: var(--dialog-error);
}

.dialog-toast-warning {
    border-left: 4px solid var(--dialog-warning);
}

.dialog-toast-warning .dialog-toast-icon {
    color: var(--dialog-warning);
}

.dialog-toast-info {
    border-left: 4px solid var(--dialog-info);
}

.dialog-toast-info .dialog-toast-icon {
    color: var(--dialog-info);
}

/* ========================================
   Animations
   ======================================== */

/* Backdrop animations */
@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes backdropFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Dialog animations (Fade + Scale) */
@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes dialogFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
}

/* Toast animations */
@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Responsive Design
   ======================================== */

/* Mobile (<640px) */
@media (max-width: 640px) {
    .dialog-container {
        padding: var(--dialog-padding-mobile);
        max-width: calc(100% - 2rem);
    }

    .dialog-title {
        font-size: 1.125rem;
    }

    .dialog-message {
        font-size: 0.9375rem;
    }

    .dialog-actions {
        flex-direction: column;
    }

    .dialog-btn {
        width: 100%;
        min-width: auto;
    }

    .dialog-toast {
        min-width: auto;
        width: calc(100% - 2rem);
        max-width: none;
    }

    .dialog-icon {
        width: 40px;
        height: 40px;
    }
}

/* Tablet (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    .dialog-container {
        max-width: 90%;
    }
}

/* Large screens (>1024px) */
@media (min-width: 1025px) {
    .dialog-toast-container:has(.dialog-toast-top) {
        align-items: flex-end;
        padding-right: 2rem;
    }
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dialog-btn-outline {
        border-width: 3px;
    }

    .dialog-toast {
        border: 2px solid #dee2e6;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dialog-backdrop,
    .dialog-container,
    .dialog-toast,
    .dialog-btn {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible (keyboard navigation) */
.dialog-btn:focus-visible {
    outline: 3px solid var(--dialog-primary);
    outline-offset: 2px;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .dialog-backdrop,
    .dialog-toast-container {
        display: none !important;
    }
}