/* =============================================
   Global Modal Styles & Animations
   ============================================= */

/* Light theme tokens */
:root {
    --modal-backdrop-bg: rgba(0,0,0,0.55);
    --modal-radius: 18px;
    --modal-shadow: 0 8px 28px rgba(0,0,0,0.18);
    --modal-border-color: #dee2e6;
    --modal-border: 1px solid var(--modal-border-color);
    --modal-header-bg: #f8f9fa; /* flattened for consistency with site light surfaces */
    --modal-header-color: #212529;
    --modal-surface: #ffffff;
    --modal-surface-alt: #f8f9fa;
    --modal-text: #212529;
    --modal-input-bg: #ffffff;
    --modal-input-border: #ced4da;
    --modal-input-text: #212529;
    --modal-transition: cubic-bezier(.16,.68,.5,.99);
    --modal-max-height: calc(100vh - 4rem);
}

/* Backdrop */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop-bg);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center; /* center vertically to avoid partial overlap under navbar */
    justify-content: center;
    padding: 2rem 1rem; /* symmetric padding */
    z-index: 2050; /* raised above navbar & other fixed headers */
    opacity: 0;
    animation: backdropFade .35s var(--modal-transition) forwards;
}

@keyframes backdropFade {
    to { opacity: 1; }
}

/* Modal container */
.app-modal {
    width: 100%;
    max-width: 640px;
    background: var(--modal-surface);
    color: var(--modal-text);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    max-height: var(--modal-max-height);
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    animation: modalEnter .45s var(--modal-transition) forwards;
    position: relative;
    overflow: hidden;
}

.app-modal.modal-sm { max-width: 480px; }
.app-modal.modal-lg { max-width: 860px; }
.app-modal.modal-xl { max-width: 1100px; }

@keyframes modalEnter {
    50% { opacity: 1; }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scrollable content wrapper */
.app-modal.scrollable { overflow: hidden; }
.app-modal.scrollable .app-modal-body { overflow-y: auto; }

/* Header */
.app-modal-header {
    padding: 1.15rem 1.25rem .75rem;
    background: var(--modal-header-bg);
    border-bottom: 1px solid var(--modal-border-color);
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.app-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--modal-header-color);
    line-height: 1.4;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.app-modal-title i { font-size: 1.1rem; opacity: .8; }

/* Close button */
.app-modal-close {
    appearance: none;
    border: none;
    background: transparent;
    color: #6c757d;
    padding: .25rem .5rem;
    border-radius: 6px;
    line-height: 1;
    font-size: 1.25rem;
    transition: background .2s ease, color .2s ease;
}
.app-modal-close:hover { background: rgba(0,0,0,0.075); color: #343a40; }
.app-modal-close:focus { outline: 3px solid rgba(13,110,253,.35); outline-offset: 2px; }

/* Body */
.app-modal-body { padding: .75rem 1.25rem 1.25rem; flex: 1; overflow-y: auto; }

/* Footer */
.app-modal-footer {
    padding: .75rem 1.25rem 1.25rem;
    background: var(--modal-surface-alt);
    border-top: 1px solid var(--modal-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

/* Divider subtle fade top edge */
.app-modal-body:before, .app-modal-footer:before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 14px;
    pointer-events: none;
}
.app-modal-body:before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0)); opacity: .06; }
.app-modal-footer:before { top: -14px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.04)); }

/* Form elements within modal */
.app-modal input[type=text],
.app-modal input[type=password],
.app-modal input[type=email],
.app-modal input[type=number],
.app-modal textarea,
.app-modal select {
    width: 100%;
    border: 1px solid var(--modal-input-border);
    background: var(--modal-input-bg);
    color: var(--modal-input-text);
    padding: .55rem .75rem;
    border-radius: 8px;
    font-size: .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.app-modal select {
    appearance: none;
    /* Reset any previous layered backgrounds and set a single arrow */
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right .9rem center / 1rem;
    padding-right: 2.2rem; /* space for arrow */
}
[dir="rtl"] .app-modal select {
    background-position: left .9rem center;
    padding-left: 2.2rem;
    padding-right: .75rem;
}
/* Hide legacy IE arrow */
.app-modal select::-ms-expand { display: none; }
.app-modal input:focus,
.app-modal textarea:focus,
.app-modal select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    outline: none;
}

/* Buttons inside footer keep consistent sizing */
.app-modal-footer .btn { min-width: 110px; }

/* Accessibility helpers */
.app-modal[aria-hidden="true"] { display: none; }

/* RTL adjustments */
[dir="rtl"] .app-modal-header { flex-direction: row-reverse; }
[dir="rtl"] .app-modal-title { flex-direction: row-reverse; }
[dir="rtl"] .app-modal-footer { justify-content: flex-start; }
[dir="rtl"] .app-modal-close { margin-left: .25rem; }

/* Dark mode - keyed to explicit .dark-mode class on <html> set by ThemeService */
html.dark-mode,
html[data-theme="dark"] {
    --modal-header-bg: #2b2f33;
    --modal-header-color: #e7e9ea;
    --modal-border-color: rgba(255,255,255,0.08);
    --modal-border: 1px solid var(--modal-border-color);
    --modal-shadow: 0 8px 30px rgba(0,0,0,0.55);
    --modal-surface: #222527;
    --modal-surface-alt: #2b2f33;
    --modal-text: #d7d9da;
    --modal-input-bg: #2b2f33;
    --modal-input-border: #444b52;
    --modal-input-text: #e7e9ea;
}
html.dark-mode .app-modal,
html[data-theme="dark"] .app-modal { background: var(--modal-surface); color: var(--modal-text); }
html.dark-mode .app-modal-body,
html[data-theme="dark"] .app-modal-body { color:#d7d9da; }
html.dark-mode .app-modal-footer,
html[data-theme="dark"] .app-modal-footer { background: var(--modal-surface-alt); border-top-color: var(--modal-border-color); }
html.dark-mode .app-modal-close,
html[data-theme="dark"] .app-modal-close { color:#adb5bd; }
html.dark-mode .app-modal-close:hover,
html[data-theme="dark"] .app-modal-close:hover { background: rgba(255,255,255,0.08); color:#fff; }
html.dark-mode .app-modal input[type=text],
html.dark-mode .app-modal input[type=password],
html.dark-mode .app-modal input[type=email],
html.dark-mode .app-modal input[type=number],
html.dark-mode .app-modal textarea,
html.dark-mode .app-modal select,
html[data-theme="dark"] .app-modal input[type=text],
html[data-theme="dark"] .app-modal input[type=password],
html[data-theme="dark"] .app-modal input[type=email],
html[data-theme="dark"] .app-modal input[type=number],
html[data-theme="dark"] .app-modal textarea,
html[data-theme="dark"] .app-modal select { background: var(--modal-input-bg); border-color: var(--modal-input-border); color: var(--modal-input-text); }
html.dark-mode .app-modal input:focus,
html.dark-mode .app-modal textarea:focus,
html.dark-mode .app-modal select:focus,
html[data-theme="dark"] .app-modal input:focus,
html[data-theme="dark"] .app-modal textarea:focus,
html[data-theme="dark"] .app-modal select:focus { border-color:#4095ff; box-shadow:0 0 0 .2rem rgba(64,149,255,.25); }
html.dark-mode .app-modal select option,
html[data-theme="dark"] .app-modal select option { background:#2b2f33; }
html.dark-mode .app-modal select,
html[data-theme="dark"] .app-modal select {
    /* Light arrow for dark backgrounds */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bbb'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1rem;
}

/* Exit animation utility (add class .closing then remove from DOM) */
.app-modal.closing { animation: modalExit .35s var(--modal-transition) forwards; }
@keyframes modalExit {
    to { opacity:0; transform: translateY(16px) scale(.94); }
}
.app-modal-backdrop.closing { animation: backdropExit .3s var(--modal-transition) forwards; }
@keyframes backdropExit { to { opacity:0; } }

/* Size adaptive for very small screens */
@media (max-width: 576px) {
    .app-modal { max-width: 100%; padding-bottom: .5rem; }
    .app-modal-header { padding: .85rem 1rem .6rem; }
    .app-modal-body { padding: .6rem 1rem 1rem; }
    .app-modal-footer { padding: .6rem 1rem 1rem; }
}