/* ==========================================================
   MODAL OVERLAY
========================================================== */

.modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    z-index:9999;

    padding:30px;

    animation:modalFade .2s ease;

}

.modal.show{

    display:flex;

}

/* ==========================================================
   WINDOW
========================================================== */

.modal-dialog{

    /* Bootstrap CSS (зареден глобално за bundle.js-а на select-ите) дефинира
       .modal-dialog{pointer-events:none} и очаква вложен .modal-content,
       за да го върне на auto - тази система няма такъв wrapper, затова без
       това кликовете вътре в модала пропадат до фона и той се затваря. */
    pointer-events:auto;

    width:100%;

    max-width:560px;

    background:var(--card);

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(15,23,42,.25);

    animation:modalSlide .2s ease;

}

.modal-sm{

    max-width:420px;

}

.modal-lg{

    max-width:900px;

}

.modal-xl{

    max-width:1200px;

}

/* ==========================================================
   HEADER
========================================================== */

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border-bottom:1px solid var(--border-alt);

}

.modal-title{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:var(--text-strong);

}

.modal-close{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:var(--text);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.18s;

}

.modal-close:hover{

    background:var(--surface-alt);

}

/* ==========================================================
   BODY
========================================================== */

.modal-body{

    padding:24px;

}

.modal-body p{

    margin:0;

    line-height:1.6;

    color:var(--text-muted);

}

/* ==========================================================
   FOOTER
========================================================== */

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:1px solid var(--border-alt);

    background:var(--surface-alt);

}

/* ==========================================================
   ICON
========================================================== */

.modal-icon{

    width:72px;

    height:72px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.modal-icon.success{

    background:#DCFCE7;

    color:#16A34A;

}

.modal-icon.warning{

    background:#FEF3C7;

    color:#D97706;

}

.modal-icon.danger{

    background:#FEE2E2;

    color:#DC2626;

}

.modal-icon.info{

    background:#DBEAFE;

    color:#2563EB;

}

/* ==========================================================
   IMAGE PREVIEW
========================================================== */

.modal-image{

    width:100%;

    border-radius:12px;

    display:block;

}

/* ==========================================================
   SCROLL
========================================================== */

.modal-scroll{

    max-height:70vh;

    overflow:auto;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes modalFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes modalSlide{

    from{

        opacity:0;

        transform:translateY(-20px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ==========================================================
   WHERE-USED LIST
========================================================== */

.where-used-list{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.where-used-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border:1px solid var(--border-alt);

    border-radius:10px;

    text-decoration:none;

    color:var(--text-strong);

    font-weight:500;

    transition:.15s;

}

.where-used-item:hover{

    background:var(--surface-alt);

    border-color:var(--gold);

}

.where-used-item i,
.where-used-item svg{

    width:16px;

    height:16px;

    color:var(--text-muted);

    flex-shrink:0;

}

.where-used-empty{

    padding:20px 4px;

    text-align:center;

    color:var(--text-faint);

}

/* ==========================================================
   CATEGORY TREE MODAL (папки/подпапки, дървовидно управление)
========================================================== */

.category-tree-toolbar{

    display:flex;

    gap:10px;

    margin-bottom:14px;

}

.category-tree-add-row{

    display:flex;

    gap:8px;

    align-items:center;

    margin-bottom:14px;

    padding:10px;

    background:var(--surface-alt);

    border-radius:10px;

}

.category-tree-add-row input{

    flex:1;

}

.category-tree-add-hint{

    font-size:12px;

    color:var(--text-muted);

    white-space:nowrap;

}

.category-tree{

    max-height:50vh;

    overflow:auto;

}

.category-tree-list{

    list-style:none;

    margin:0;

    padding-left:0;

}

.category-tree-list .category-tree-list{

    margin:2px 0 2px 14px;

    padding-left:12px;

    border-left:2px solid var(--border-alt);

}

.category-tree-row{

    display:flex;

    align-items:center;

    gap:6px;

    padding:6px 8px;

    border-radius:8px;

    cursor:pointer;

    user-select:none;

}

.category-tree-row:hover{

    background:var(--surface-alt);

}

.category-tree-row.selected{

    background:var(--primary);

    color:#fff;

}

.category-tree-row.selected .category-tree-name,
.category-tree-row.selected .category-tree-icon{

    color:#fff;

}

.category-tree-toggle{

    width:20px;

    height:20px;

    min-width:20px;

    padding:0;

    border:1px solid var(--border-alt);

    border-radius:5px;

    background:var(--card);

    font-size:9px;

    line-height:1;

    cursor:pointer;

    color:var(--text-muted);

}

.category-tree-toggle:hover{

    background:var(--surface-alt);

}

.category-tree-spacer{

    display:inline-block;

    width:20px;

    min-width:20px;

}

.category-tree-icon{

    width:16px;

    height:16px;

    color:var(--text-muted);

    flex-shrink:0;

}

.category-tree-name{

    font-size:14px;

    color:var(--text-strong);

}

.category-tree-prefix{

    font-size:11px;

    font-weight:600;

    color:var(--text-muted);

}

.category-tree-row.selected .category-tree-prefix{

    color:#fff;

}

.category-tree-empty{

    padding:20px 4px;

    text-align:center;

    color:var(--text-faint);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .modal{

        padding:15px;

    }

    .modal-dialog{

        max-width:100%;

    }

    .modal-header,
    .modal-body,
    .modal-footer{

        padding:18px;

    }

    .modal-footer{

        flex-direction:column;

    }

    .modal-footer .btn{

        width:100%;

    }

}

/* ==========================================================
   ИЗБОР НА ВАРИАНТ (модал) - виж customer_requests.js/
   production_requests.js - списък с по-големи, лесни за докосване бутони
   вместо падащо меню в тесен списък с резултати от търсене.
========================================================== */

.variant-modal-options{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.variant-modal-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border-alt);

    border-radius:10px;

    background:var(--surface-alt);

    color:var(--text);

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    text-align:left;

    transition:.15s;

}

.variant-modal-option:hover{

    border-color:#C9A227;

    background:var(--card);

}

.variant-modal-empty{

    color:var(--text-muted);

    padding:8px 0;

}