/* ============================================================
   SDME SETTINGS MODULE
   ============================================================ */

/* =========================
   Overlay
========================= */

.settings-overlay{
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .30s ease,
        visibility .30s ease;

    z-index: 9999;
}

/* Open State */

.settings-overlay.show{
    opacity: 1;
    visibility: visible;
}


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

.settings-modal{

    width: 90%;
    max-width: 1500px;

    height: 88vh;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    transform: scale(.96);

    opacity: 0;

    transition:
        transform .30s ease,
        opacity .30s ease;

}


/* Modal Animation */

.settings-overlay.show .settings-modal{

    transform: scale(1);

    opacity: 1;

}


/* =========================
   Header
========================= */

.settings-header{

    height: 78px;

    padding: 0 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid #ececec;

    flex-shrink: 0;

}


.settings-title h2{

    margin: 0;

    font-size: 20px;

    font-weight: 500;

    color: #1f2937;

}


.settings-title p{

    margin-top: 5px;

    color: #6b7280;

    font-size: 12px;

}


/* =========================
   Close Button
========================= */

.close-settings-btn{

    width: 30px;

    height: 30px;

    border: none;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    font-size: 20px;

    transition: .25s;

}

.close-settings-btn:hover{

    background: #f2f2f2;

}


/* =========================
   Body
========================= */

.settings-body{

    flex: 1;

    display: flex;

    overflow: hidden;

}


/* =========================
   Sidebar
========================= */

.settings-sidebar{

    width: 280px;

    border-right: 1px solid #ececec;

    background: #fafafa;

    overflow-y: auto;

}


/* =========================
   Menu
========================= */

.settings-menu{

    list-style: none;

    margin: 0;

    padding: 18px;

}


.settings-menu li{

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 13px 16px;

    margin-bottom: 6px;

    border-radius: 12px;

    cursor: pointer;

    transition: .25s;

    color: #374151;

    font-size: 15px;

    font-weight: 500;

}


.settings-menu li i{

    width: 22px;

    text-align: center;

    font-size: 16px;

}


/* Hover */

.settings-menu li:hover{

    background: #eef4ff;

}


/* Active */

.settings-menu li.active{

    background: #1d4ed8;

    color: white;

}


/* =========================
   Content
========================= */

.settings-content{

    flex: 1;

    overflow-y: auto;

    padding: 35px;

    background: white;

}


/* =========================
   Footer
========================= */

.settings-footer{

    height: 78px;

    border-top: 1px solid #ececec;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 14px;

    padding: 0 30px;

    flex-shrink: 0;

}


/* =========================
   Buttons
========================= */

.btn-secondary{

    border: none;

    background: #e5e7eb;

    color: #374151;

    padding: 12px 24px;

    border-radius: 10px;

    cursor: pointer;

    transition: .25s;

}

.btn-secondary:hover{

    background: #d1d5db;

}


.btn-primary{

    border: none;

    background: #1d4ed8;

    color: white;

    padding: 12px 26px;

    border-radius: 10px;

    cursor: pointer;

    transition: .25s;

}

.btn-primary:hover{

    background: #1e40af;

}


/* =========================
   Scrollbar
========================= */

.settings-sidebar::-webkit-scrollbar,
.settings-content::-webkit-scrollbar{

    width: 8px;

}

.settings-sidebar::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb{

    background: #c9ced6;

    border-radius: 20px;

}

.settings-sidebar::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover{

    background: #9ca3af;

}


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

@media(max-width:992px){

    .settings-modal{

        width:95%;
        height:92vh;

    }

    .settings-sidebar{

        width:240px;

    }

}

@media(max-width:768px){

    .settings-modal{

        width:100%;
        height:100vh;
        border-radius:0;

    }

    .settings-sidebar{

        width:220px;

    }

}

@media(max-width:600px){

    .settings-body{

        flex-direction:column;

    }

    .settings-sidebar{

        width:100%;
        height:240px;

        border-right:none;

        border-bottom:1px solid #ececec;

    }

}

.settings-loading{

    height:100%;

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:15px;

    color:#64748b;

}


.settings-confirm-overlay{


    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:100000;


}



.settings-confirm-overlay.show{

    display:flex;

}



.settings-confirm-box{


    background:white;

    width:400px;

    padding:30px;

    border-radius:14px;

    box-shadow:0 20px 50px rgba(0,0,0,.2);


}



.settings-confirm-actions{


    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:25px;


}


.permission-disabled{

    background:#f1f5f9;

    cursor:not-allowed;

    opacity:.65;

}


.btn-danger{


    background:#dc2626;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;

}

.btn-primary:disabled{

    opacity:0.5;

    cursor:not-allowed;

}


.btn-primary.active{

    opacity:1;

}


.permission-hidden{

    display:none !important;

}

.permission-disabled{

    opacity:0.5;
    cursor:not-allowed;

}

.settings-spinner{

    width:35px;

    height:35px;

    border:4px solid #e2e8f0;

    border-top-color:#2563eb;

    border-radius:50%;

    animation:sdmeSpin .8s linear infinite;

}



@keyframes sdmeSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}