/**
 * WPIS Modal Styles - Fully Isolated
 * 
 * Tieto štýly sú úplne izolované od WordPress témy pomocou:
 * - Vysokej špecificity (#wpis-modal-root)
 * - !important deklarácií pre kritické vlastnosti
 * - Resetovania zdedených štýlov
 * - BEM názvoslovia s prefixom wpis-
 */

/* ============================================
   🔒 MODAL ROOT - Portal container
   ============================================ */
#wpis-modal-root {
    /* Reset všetkých potenciálne zdedených štýlov */
    all: initial !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    box-sizing: border-box !important;

    /* Default backdrop settings (can be overridden per modal) */
    --wpis-modal-backdrop-bg: rgba(0, 0, 0, 0.6);
    --wpis-modal-backdrop-filter: blur(6px);
}

#wpis-modal-root *,
#wpis-modal-root *::before,
#wpis-modal-root *::after {
    box-sizing: border-box !important;
}

/* ============================================
   🎭 MODAL OVERLAY (Backdrop)
   ============================================ */
#wpis-modal-root .wpis-modal {
    /* Reset */
    all: unset !important;
    
    /* Positioning - Full viewport coverage */
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    
    /* Stacking */
    z-index: 999999 !important;
    
    /* Centering content */
    justify-content: center !important;
    align-items: center !important;
    
    /* Background overlay (customizable via CSS variables) */
    background-color: var(--wpis-modal-backdrop-bg, rgba(0, 0, 0, 0.6)) !important;
    background: var(--wpis-modal-backdrop-bg, rgba(0, 0, 0, 0.6)) !important;
    backdrop-filter: var(--wpis-modal-backdrop-filter, none) !important;
    -webkit-backdrop-filter: var(--wpis-modal-backdrop-filter, none) !important;
    
    /* Animation */
    opacity: 0 !important;
    transition: opacity 0.2s ease-out !important;
    
    /* 🚀 GPU Acceleration */
    will-change: opacity !important;
    transform: translateZ(0) !important;
    
    /* Interaction */
    pointer-events: auto !important;
    cursor: default !important;
    
    /* Customizable content defaults */
    --wpis-modal-content-max-width: 480px;
    --wpis-modal-content-max-height: 90vh;
    --wpis-modal-content-overflow-y: auto;
    --wpis-modal-content-overflow-x: hidden;
    
    /* Prevent inheritance issues */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 20px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Modal visible state */
#wpis-modal-root .wpis-modal.wpis-modal--show {
    display: flex !important;
    opacity: 1 !important;
}

/* ============================================
   📦 MODAL CONTENT BOX
   ============================================ */
#wpis-modal-root .wpis-modal__content {
    /* Reset */
    all: unset !important;
    display: block !important;
    
    /* Sizing */
    width: 100% !important;
    max-width: var( --wpis-modal-content-max-width, 480px ) !important;
    min-height: 120px !important;
    max-height: var( --wpis-modal-content-max-height, 90vh ) !important;
    
    /* Appearance */
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    
    /* Content handling */
    overflow: hidden !important;
    overflow-y: var( --wpis-modal-content-overflow-y, auto ) !important;
    overflow-x: var( --wpis-modal-content-overflow-x, hidden ) !important;
    
    /* Animation */
    animation: wpis-modal-fadeInUp 0.2s ease-out !important;
    
    /* 🚀 GPU Acceleration */
    will-change: transform, opacity !important;
    transform: translateZ(0) !important;
    
    /* Interaction */
    pointer-events: auto !important;
    cursor: default !important;
    
    /* Prevent click-through to backdrop */
    position: relative !important;
    z-index: 1 !important;
    
    /* Typography reset */
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    text-align: left !important;
    
    /* Spacing */
    padding: 0 !important;
    margin: 0 !important;
}

/* Large modal variant */
#wpis-modal-root .wpis-modal__content--large {
    max-width: 800px !important;
}

/* Animation keyframes */
@keyframes wpis-modal-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 🚀 Loading spinner animation */
@keyframes wpis-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading modal variant - 🚀 OPTIMIZED FOR INSTANT DISPLAY */
#wpis-modal-root .wpis-modal--loading .wpis-modal__content {
    border-top: 4px solid var(--wpis-primary-color) !important;
    /* Faster animation for loading states */
    animation: wpis-modal-fadeInFast 0.1s ease-out !important;
}

/* 🚀 Fast animation for loading/status modals */
@keyframes wpis-modal-fadeInFast {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Loading modal overlay - faster fade */
#wpis-modal-root .wpis-modal--loading {
    transition: opacity 0.1s ease-out !important;
}

#wpis-modal-root .wpis-spinner {
    display: block !important;
    margin: 0 auto 16px auto !important;
}

/* ============================================
   🏷️ MODAL HEADER
   ============================================ */
#wpis-modal-root .wpis-modal__header {
    all: unset !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background-color: #fafafa !important;
    margin: 0 !important;
}

#wpis-modal-root .wpis-modal__title {
    all: unset !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

#wpis-modal-root .wpis-modal__close {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #666666 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#wpis-modal-root .wpis-modal__close:hover {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

/* ============================================
   📝 MODAL BODY
   ============================================ */
#wpis-modal-root .wpis-modal__body {
    all: unset !important;
    display: block !important;
    padding: 20px !important;
    margin: 0 !important;
    color: #333333 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

#wpis-modal-root .wpis-modal__body p {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

#wpis-modal-root .wpis-modal__body p:last-child {
    margin-bottom: 0 !important;
}

/* Two column layout for forms */
#wpis-modal-root .wpis-modal__body--two-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

@media screen and (max-width: 600px) {
    #wpis-modal-root .wpis-modal__body--two-columns {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   🎨 STATUS MODAL SPECIFICS
   ============================================ */
#wpis-modal-root .wpis-modal--status .wpis-modal__body {
    text-align: center !important;
    padding: 30px 20px !important;
}

#wpis-modal-root .wpis-modal__icon {
    all: unset !important;
    display: block !important;
    font-size: 48px !important;
    margin-bottom: 16px !important;
    line-height: 1 !important;
}

#wpis-modal-root .wpis-modal__message {
    all: unset !important;
    display: block !important;
    font-size: 15px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Status variants - border colors */
#wpis-modal-root .wpis-modal--success .wpis-modal__content {
    border-top: 4px solid #22c55e !important;
}

#wpis-modal-root .wpis-modal--error .wpis-modal__content {
    border-top: 4px solid #ef4444 !important;
}

#wpis-modal-root .wpis-modal--warning .wpis-modal__content {
    border-top: 4px solid #f59e0b !important;
}

#wpis-modal-root .wpis-modal--info .wpis-modal__content {
    border-top: 4px solid var(--wpis-primary-color) !important;
}

/* ============================================
   🔘 MODAL ACTIONS (Footer buttons)
   ============================================ */
#wpis-modal-root .wpis-modal__actions {
    all: unset !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e5e5e5 !important;
    background-color: #fafafa !important;
    margin: 0 !important;
}

/* Center actions for status modal */
#wpis-modal-root .wpis-modal--status .wpis-modal__actions {
    justify-content: center !important;
}

/* Base button styles */
#wpis-modal-root .wpis-modal__btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    /* Fix pre mobile - zabráni pretečeniu */
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* SVG icons inside modal buttons */
#wpis-modal-root .wpis-modal__btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* Cancel / Secondary button - unified with profile */
#wpis-modal-root .wpis-modal__btn--cancel {
    background-color: #f5f5f5 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}

#wpis-modal-root .wpis-modal__btn--cancel:hover {
    background-color: #e8e8e8 !important;
    border-color: #b0b0b0 !important;
    transform: translateY(-1px) !important;
}

/* Confirm / Primary button */
#wpis-modal-root .wpis-modal__btn--confirm {
    background-color: var(--wpis-primary-color) !important;
    color: #ffffff !important;
}

#wpis-modal-root .wpis-modal__btn--confirm:hover {
    background-color: var(--wpis-primary-color-hover) !important;
}

/* Danger button */
#wpis-modal-root .wpis-modal__btn--danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

#wpis-modal-root .wpis-modal__btn--danger:hover {
    background-color: #dc2626 !important;
}

/* Save / Primary button - unified blue gradient */
#wpis-modal-root .wpis-modal__btn--save {
    background: linear-gradient(135deg, var(--wpis-primary-color) 0%, var(--wpis-primary-color-hover) 100%) !important;
    color: #ffffff !important;
}

#wpis-modal-root .wpis-modal__btn--save:hover {
    background: linear-gradient(135deg, var(--wpis-primary-color-hover) 0%, var(--wpis-primary-color-active) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(var(--wpis-primary-color-rgb), 0.3) !important;
}

/* ============================================
   📱 FORM ELEMENTS IN MODALS
   ============================================ */
#wpis-modal-root .wpis-form-group {
    all: unset !important;
    display: block !important;
    margin-bottom: 16px !important;
}

#wpis-modal-root .wpis-form-group--full-width {
    grid-column: 1 / -1 !important;
}

#wpis-modal-root .wpis-form-group label {
    all: unset !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
}

#wpis-modal-root .wpis-form-group input,
#wpis-modal-root .wpis-form-group select,
#wpis-modal-root .wpis-form-group textarea {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #1f2937 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box !important;
}

#wpis-modal-root .wpis-form-group input:focus,
#wpis-modal-root .wpis-form-group select:focus,
#wpis-modal-root .wpis-form-group textarea:focus {
    outline: none !important;
    border-color: var(--wpis-primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--wpis-primary-color-rgb), 0.1) !important;
}

#wpis-modal-root .wpis-form-group textarea {
    min-height: 80px !important;
    resize: vertical !important;
}

/* ============================================
   📱 MOBILE RESPONSIVE
   ============================================ */
@media screen and (max-width: 600px) {
    #wpis-modal-root .wpis-modal {
        padding: 0 !important;
        /* Centrovanie na mobile - nie flex-end */
        align-items: center !important;
        justify-content: center !important;
    }
    
    #wpis-modal-root .wpis-modal__content {
        max-width: calc(100% - 20px) !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
        margin: 10px !important;
        /* Zabezpeč že obsah je viditeľný */
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        /* Zabráň horizontálnemu pretečeniu */
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        width: calc(100% - 20px) !important;
    }
    
    #wpis-modal-root .wpis-modal__content--large {
        max-width: calc(100% - 20px) !important;
        max-height: 85vh !important;
    }
    
    #wpis-modal-root .wpis-modal__body {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    
    #wpis-modal-root .wpis-modal__body--two-columns {
        grid-template-columns: 1fr !important;
    }
    
    #wpis-modal-root .wpis-modal__actions {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        /* Sticky footer pre lepšiu UX */
        position: sticky !important;
        bottom: 0 !important;
        background-color: #fafafa !important;
        /* Fix pre pretečenie */
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #wpis-modal-root .wpis-modal__btn {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        /* Povoľ zalamovanie textu ak je príliš dlhý */
        white-space: normal !important;
        text-align: center !important;
    }
    
    #wpis-modal-root .wpis-modal__header {
        padding: 14px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
    }
    
    #wpis-modal-root .wpis-modal__title {
        font-size: 16px !important;
    }
}

/* ============================================
   🔒 BODY SCROLL LOCK V2 - Zero jumping approach
   ============================================ */
/* 
 * 🚀 NOVÝ PRÍSTUP: Scroll lock je riadený cez inline JS štýly
 * CSS trieda slúži len ako marker pre prípadné ďalšie štýlovanie.
 * Výhody:
 * - Žiadny position:fixed = žiadne skákanie stránky
 * - Scroll pozícia sa automaticky zachováva
 * - Padding-right kompenzácia zabraňuje layout shiftu
 */
body.wpis-modal-open {
    /* Overflow je nastavený inline v JS, tu len pre fallback */
    /* Nepoužívame position:fixed - to spôsobovalo skákanie! */
    overscroll-behavior: none !important;
}

/* Touch zariadenia - doplnkové štýly */
body.wpis-touch-device {
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
}

/* Prevent pull-to-refresh on mobile while modal is open */
body.wpis-modal-open,
body.wpis-modal-open * {
    overscroll-behavior: contain !important;
}

/* ============================================
   🔍 ICO LOOKUP - Company search by IČO
   ============================================ */

/* ICO form group - contains label, input row, and messages */
#wpis-modal-root .wpis-form-group--ico {
    display: flex !important;
    flex-direction: column !important;
}

/* Row containing input and button */
#wpis-modal-root .wpis-ico-input-row {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
}

#wpis-modal-root .wpis-ico-input-row input[name="ico"] {
    flex: 1 !important;
    min-width: 150px !important;
}

/* Error messages appear after input row */
#wpis-modal-root .wpis-form-group--ico .error-message {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    color: #dc2626 !important;
}

#wpis-modal-root .wpis-ico-lookup-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: linear-gradient(135deg, var(--wpis-primary-color) 0%, var(--wpis-primary-color-hover) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    flex-shrink: 0 !important;
}

#wpis-modal-root .wpis-ico-lookup-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--wpis-primary-color-hover) 0%, var(--wpis-primary-color-active) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(var(--wpis-primary-color-rgb), 0.3) !important;
}

#wpis-modal-root .wpis-ico-lookup-btn:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#wpis-modal-root .wpis-ico-lookup-btn .btn-text {
    display: inline !important;
}

#wpis-modal-root .wpis-ico-lookup-btn .btn-spinner {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#wpis-modal-root .wpis-ico-lookup-btn .wpis-spinner {
    animation: wpis-spin 1s linear infinite !important;
}

@keyframes wpis-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#wpis-modal-root .wpis-ico-status {
    width: 100% !important;
    flex-basis: 100% !important;
    font-size: 13px !important;
    padding: 0 !important;
    min-height: 18px !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

#wpis-modal-root .wpis-ico-status:empty {
    display: none !important;
}

#wpis-modal-root .wpis-ico-status.loading {
    color: #6b7280 !important;
    font-style: italic !important;
}

#wpis-modal-root .wpis-ico-status.success {
    color: #059669 !important;
    font-weight: 500 !important;
}

#wpis-modal-root .wpis-ico-status.warning {
    color: #d97706 !important;
}

#wpis-modal-root .wpis-ico-status.error {
    color: #dc2626 !important;
}

#wpis-modal-root .wpis-ico-status.info {
    color: var(--wpis-primary-color) !important;
}

/* =============================================================================
   Attachment Preview Modal
   ========================================================================== */

#wpis-modal-root .wpis-modal--attachment .wpis-modal__content {
    max-width: 90vw !important;
    width: 90vw !important;
    max-height: 90vh !important;
    padding: 0 !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-modal__header {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-modal__body {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
    background: #1f2937 !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__preview {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__image {
    max-width: 100% !important;
    max-height: 70vh !important;
    object-fit: contain !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__pdf {
    width: 100% !important;
    height: 70vh !important;
    border: none !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__loading {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 3rem !important;
}

#wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__actions {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #wpis-modal-root .wpis-modal--attachment .wpis-modal__content {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    #wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__image,
    #wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__pdf {
        max-height: 60vh !important;
        height: 60vh !important;
    }

    #wpis-modal-root .wpis-modal--attachment .wpis-modal__header,
    #wpis-modal-root .wpis-modal--attachment .wpis-attachment-modal__actions {
        padding: 1rem !important;
    }
}