/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Montserrat',sans-serif;

    background:#060b17;

    color:white;

    height:100vh;

    display:flex;

    overflow:hidden;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{

    width:260px;

    background:#09111f;

    border-right:
    1px solid rgba(255,255,255,.06);

    display:flex;
    flex-direction:column;

    padding:25px;
}

.brand{

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:35px;
}

.brand img{

    width:42px;
    height:42px;
}

.brand h2{

    font-size:18px;
}

.sidebar nav{

    display:flex;
    flex-direction:column;

    gap:8px;
}

.menu-item{

    border:none;

    background:none;

    color:white;

    text-align:left;

    padding:14px 16px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;
}

.menu-item:hover{

    background:
    rgba(255,255,255,.05);
}

.menu-item.active{

    background:
    rgba(37,99,235,.25);

    border:
    1px solid rgba(37,99,235,.4);
}

/* =====================================================
   CONTENT
===================================================== */

.admin-content{

    flex:1;

    padding:30px;

    overflow:auto;
}

/* =====================================================
   DASHBOARD
===================================================== */

.stats-grid{

    display:grid;

    margin-bottom:22px;

    grid-template-columns:
    repeat(4,1fr);

    gap:14px;
}

.stat-card{

    background:#0d1628;

    border:
    1px solid rgba(255,255,255,.06);

    border-radius:16px;

    padding:16px 20px;

    min-height:95px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stat-card span{

    display:block;

    opacity:.7;

    margin-bottom:6px;

    font-size:13px;

    font-weight:500;
}

.stat-card strong{

    font-size:22px;

    line-height:1.1;

    font-weight:700;
}

/* =====================================================
   MOTOR
===================================================== */

.hidden{
    display:none;
}

.validation-builder{

    display:grid;

    grid-template-columns:
    250px
    250px
    250px
    250px
    380px;

    gap:18px;

    margin-top:20px;

    min-height:calc(100vh - 100px);
}

.builder-column{

    background:#0d1628;

    border:
    1px solid rgba(255,255,255,.06);

    border-radius:20px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
}

.column-header{

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

    padding:18px;

    border-bottom:
    1px solid rgba(255,255,255,.06);
}

.column-header button{

    width:34px;
    height:34px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#2563eb;

    color:white;

    font-size:20px;
}

.column-list{

    flex:1;

    overflow:auto;

    padding:12px;
}

/* =====================================================
   ITEMS
===================================================== */

.list-item{

    background:#101c33;

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:12px;

    padding:12px;

    margin-bottom:10px;

    cursor:pointer;

    transition:.25s;
}

.list-item:hover{

    border-color:#2563eb;
}

/* =====================================================
   EDITOR
===================================================== */

.question-editor{

    background:#0d1628;

    border:
    1px solid rgba(255,255,255,.06);

    border-radius:20px;

    padding:24px;

    display:flex;
    flex-direction:column;

    gap:12px;
}

.question-editor textarea{

    min-height:140px;
}

.question-editor textarea,
.question-editor input,
.question-editor select{

    width:100%;

    background:#101c33;

    color:white;

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:12px;
}

.editor-actions{

    margin-top:10px;

    display:flex;

    gap:10px;
}

.editor-actions button{

    flex:1;

    border:none;

    cursor:pointer;

    border-radius:12px;

    padding:14px;
}

#saveQuestion{

    background:#2563eb;

    color:white;
}

#deleteQuestion{

    background:#dc2626;

    color:white;
}

#questionFields{

    display:flex;
    flex-direction:column;

    gap:12px;
}

.hidden-editor{
    display:none;
}

.editor-section{

    margin-bottom:24px;

    padding-bottom:20px;

    border-bottom:
    1px solid rgba(255,255,255,.06);
}

.editor-section h4{

    margin-bottom:15px;

    color:#60a5fa;
}

.question-editor{

    overflow:auto;
}

.category-stats{

    margin-top:14px;

    grid-template-columns:
    2fr
    1fr
    1fr
    1fr
    180px;

    gap:14px;
}

.export-card{

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

#exportCategoryBtn{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    background:#2563eb;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

#exportCategoryBtn:hover{

    background:#1d4ed8;
}

#documentFields{

    display:none;

    margin-top:15px;

}

#documentFields textarea{

    min-height:90px;

}

.hidden{
    display:none !important;
}

/* =====================================
   CASE MODAL
===================================== */

.modal-overlay{

    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:9999;

}

.modal-overlay.active{

    display:flex;

}

.hidden{
    display:none !important;
}

.case-modal{

    width:min(1500px,96vw);

    max-height:92vh;

    overflow-y:auto;

    background:#07142d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:30px;

}

.modal-header{

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

    padding-bottom:20px;

    margin-bottom:24px;

    border-bottom:
    1px solid rgba(255,255,255,.08);

}

.modal-actions{

    display:flex;
    gap:12px;

}

.modal-action-btn{

    height:42px;

    padding:0 18px;

    border:none;

    border-radius:12px;

    background:#101c33;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.modal-action-btn:hover{

    background:#2563eb;

}

.modal-action-btn.danger:hover{

    background:#dc2626;

}

.documents-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(240px,1fr));

    gap:14px;

}

.document-card{

    background:#101c33;

    border:1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:14px;

}

.document-card h4{

    color:#60a5fa;

    margin-bottom:6px;

    font-size:14px;

}

.document-card p{

    font-size:13px;

    color:#cbd5e1;

    margin-bottom:12px;

}

.document-actions{

    display:flex;
    gap:8px;

}

.modal-header h2{

    margin:0;

}

.modal-header button{

    width:40px;
    height:40px;

    border:none;

    border-radius:8px;

    cursor:pointer;
}

#caseDetailContent{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:20px;

}

.case-section{

    background:#0d1628;

    border:
    1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:22px;

}

.case-section h3{

    margin-bottom:15px;

    color:#5da7ff;

}

.case-section p{

    margin-bottom:8px;

    line-height:1.5;

    word-break:break-word;
    overflow-wrap:anywhere;

}

.documents-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));

    gap:14px;

}

.document-card{

    background:#101c33;

    border:
    1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:14px;

}

.document-actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:10px;

}

.document-row{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;

}

.document-btn{

    flex:1;

    min-width:80px;

    height:36px;

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

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    cursor:pointer;

    font-size:13px;

}

.document-btn.danger{

    background:#dc2626;

}

.case-management{

    margin-top:20px;

}

.management-card{

    background:#0c1e40;

    border:1px solid rgba(255,255,255,.06);

    border-radius:16px;

    padding:20px;

}

.management-card h3{

    margin-bottom:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:16px;

}

.form-group label{

    font-weight:600;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:12px;

    border-radius:10px;

    border:1px solid #1d3f7a;

    background:#07142d;

    color:white;

    font-size:14px;

}

.primary-btn{

    background:#2563eb;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:8px;

    cursor:pointer;

}

.primary-btn{

    margin-top:15px;

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-weight:600;

    cursor:pointer;

}

.primary-btn:hover{

    background:#1d4ed8;

}

.case-section label{

    display:block;

    margin-top:10px;

    margin-bottom:5px;

    color:white;

    font-size:14px;

}

.case-section input,
.case-section select,
.case-section textarea{

    width:100%;

    padding:10px;

    border-radius:8px;

    border:1px solid #1d3f7a;

    background:#07142d;

    color:white;

    margin-bottom:10px;

}

.case-save-container{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:30px;

    margin-bottom:30px;

}

.save-all-btn{

    min-width:240px;

    height:52px;

    padding:0 30px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.save-all-btn:hover{

    background:#1d4ed8;
    transform:translateY(-2px);

}

/* =========================
   CASOS CRM
========================= */

.cases-toolbar{

    display:flex;
    gap:12px;

    margin-bottom:24px;

}

.search-case-btn{

    min-width:120px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.search-case-btn:hover{

    background:#3b82f6;

}

#caseSearch{
    width:100%;
    padding:14px 18px;

    border:none;
    border-radius:12px;

    background:#09111f;
    color:white;

    font-size:14px;
}

.cases-cards{
    display:grid;
    gap:16px;
}

.case-card{

    background:#09111f;

    border:1px solid rgba(59,130,246,.25);

    border-radius:16px;

    padding:20px;

    transition:.25s;

}

.case-card:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 20px rgba(255,255,255,.06);

    border-color:#2563eb;

}

.case-header{

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

    margin-bottom:15px;

}

.case-number{

    font-size:13px;
    color:#60a5fa;

    margin-bottom:6px;

}

.case-name{

    font-size:18px;
    font-weight:700;
    color:white;

}

.case-status{

    background:#09111f;

    color:white;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

}

.case-info{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:10px;

    color:#cbd5e1;

    margin-bottom:18px;

}

.case-actions{

    display:flex;
    justify-content:flex-end;

}

.btn-open-case{

    background:#2563eb;
    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    font-weight:600;

}

.btn-open-case:hover{

    background:#3b82f6;

}

.cases-cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(420px,1fr));

    gap:18px;

}

.section-title{

    margin-top:30px;
    margin-bottom:16px;

    font-size:20px;
    font-weight:700;

    color:#ffffff;

}

.recent-clients-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fill,
        minmax(320px,1fr)
    );

    gap:20px;

}

.client-card{

    background:#081d47;

    border:1px solid
    rgba(255,255,255,.08);

    border-radius:18px;

    padding:20px;

}

.client-name{

    font-size:18px;
    font-weight:700;

    color:white;

    margin-bottom:8px;

}

.client-info{

    color:#9fb3d9;

    font-size:14px;

    margin-bottom:14px;

}

.clients-list{

    display:flex;
    flex-direction:column;
    gap:14px;

    margin-top:20px;

}

.client-row{

    background:#081d47;

    border-radius:18px;

    border:1px solid
    rgba(255,255,255,.08);

    padding:18px 20px;

    display:flex;

    justify-content:space-between;
    align-items:center;

}

.client-modal{

    width:95%;
    max-width:1400px;
}

.client-status{

    display:inline-flex;

    padding:6px 12px;

    border-radius:999px;

    background:#2455d8;

    color:white;

    font-size:12px;

    font-weight:600;

}

/* =========================================
CLIENT MODAL
========================================= */

.client-modal-overlay{

    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:99999;
}

.client-modal-overlay.active{
    display:flex;
}

.client-modal{

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

    height:90vh;

    overflow:auto;

    background:#07142d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:28px;
}

.client-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    border-bottom:1px solid rgba(255,255,255,.08);

    padding-bottom:18px;
}

.client-modal-header h2{

    color:white;

    font-size:34px;

    font-weight:700;
}

.client-close-btn{

    width:46px;
    height:46px;

    border:none;

    border-radius:12px;

    background:#3468f0;

    color:white;

    font-size:22px;

    cursor:pointer;
}

.client-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
}

.client-card{

    background:#0d234d;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:20px;
}

.client-card h3{

    color:#56a0ff;

    margin-bottom:18px;

    font-size:24px;
}

.client-field{

    margin-bottom:14px;
}

.client-field label{

    display:block;

    color:white;

    margin-bottom:6px;
}

.client-field input{

    width:100%;

    height:44px;

    background:#07142d;

    border:1px solid #1f4e97;

    border-radius:10px;

    color:white;

    padding:0 12px;
}

.client-section{

    margin-top:25px;
}

.client-section-title{

    color:white;

    font-size:26px;

    font-weight:700;

    margin-bottom:15px;
}

.client-case-card{

    background:#0d234d;

    border-radius:18px;

    padding:18px;

    margin-bottom:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.client-action-btn{

    background:#3468f0;

    border:none;

    color:white;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;
}

.client-accordion-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:28px;
}

.client-accordion-card{
    background:#0b1d3d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:18px;
}

.client-accordion-card summary{
    cursor:pointer;
    color:#56a0ff;
    font-size:18px;
    font-weight:700;
}

.client-accordion-body{
    margin-top:16px;
    color:white;
    font-size:14px;
    line-height:1.7;
}

.client-cases-container{
    background:#0b1d3d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:22px;
}

.client-cases-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.client-search-box{
    display:flex;
    gap:12px;
    width:60%;
}

.client-search-box input{
    width:100%;
    height:44px;
    border-radius:12px;
    border:1px solid #1f4e97;
    background:#07142d;
    color:white;
    padding:0 14px;
}

.client-case-row{
    background:#07142d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.client-case-row span{
    display:block;
    color:#9fb3d9;
    margin-top:5px;
}

.client-case-detail{
    margin-top:24px;
}

.client-case-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.client-detail-card{
    background:#07142d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:18px;
    color:white;
}

.client-detail-card h3{
    color:#56a0ff;
    margin-bottom:14px;
}

.client-shortcut-card{

    height:90px;

    background:#102955;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}
.client-shortcut-card:hover{

    transform:translateY(-4px);

    border-color:#3b82f6;

}

/* =========================
   CLIENT SEARCH
========================= */

.cases-search{

    display:flex;
    gap:14px;
    margin-bottom:25px;

}

#clientSearch{

    flex:1;

    height:48px;

    border:none;

    border-radius:12px;

    padding:0 16px;

    background:#09111f;

    color:white;

    border:1px solid rgba(255,255,255,.08);

}

#clientSearch::placeholder{

    color:#7b8db1;

}

.search-btn{

    min-width:160px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.search-btn:hover{

    background:#3b82f6;

}