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

body {

    direction: rtl;
    font-family: "Segoe UI";
    background: #f5f7fb;

}

.wrapper{

    display:flex;
    min-height:100vh;

}

.sidebar{

    width:260px;
    background:#1F3A63;
    color:white;

}

.logo{

    font-size:28px;
    font-weight:bold;
    padding:30px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.15);

}

.menu{

    list-style:none;

}

.menu li{

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

}

.menu li a{

    display:block;
    color:white;
    text-decoration:none;
    padding:18px 25px;
    transition:.25s;

}

.menu li a:hover{

    background:#2D4E80;

}

.mainContent{

    flex:1;

}

.topBar{

    height:70px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.pageTitle{

    font-size:22px;
    font-weight:bold;

}

.userInfo{

    font-size:15px;

}

.contentArea{

    padding:30px;

}


.pageHeader{
    font-size:32px;
    margin-bottom:25px;
}

.cards{
    display:flex;
    gap:20px;
    margin-bottom:30px;
}

.card{
    flex:1;
    background:white;
    border-radius:14px;
    padding:25px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.cardNumber{
    display:block;
    font-size:36px;
    color:#1F3A63;
    font-weight:bold;
}

.cardTitle{
    color:#666;
}

.tableBox{
    background:white;
    border-radius:14px;
    padding:20px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.tableHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.btnPrimary{
    background:#1F3A63;
    color:white;
    border:none;
    padding:12px 24px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
}

.btnPrimary:hover{
    background:#2b4f85;
}

.surveyTable{
    width:100%;
    border-collapse:collapse;
}

.surveyTable th{
    background:#f2f5fa;
    padding:15px;
    text-align:right;
}

.surveyTable td{
    padding:15px;
    border-top:1px solid #ececec;
}

.status{
    padding:6px 12px;
    border-radius:20px;
    color:white;
    font-size:13px;
}

.done{
    background:#28a745;
}

.open{
    background:#ff9800;
}

.wait{
    background:#2196f3;
}


.pageHeaderArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.pageSubTitle {
    color: #777;
    margin-top: 5px;
}

.searchBox {
    margin-bottom: 20px;
}

.txtSearch {
    width: 350px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

.surveyTable tbody tr:hover {
    background: #f5f9ff;
}






/* ==========================================
   SmartSurvey Wizard
   ========================================== */

.wizardPage {
    width: 100%;
    direction: rtl;
}

.wizardHeader {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.wizardTitle h1 {
    margin: 0;
    color: #1b3b6f;
    font-size: 28px;
}

.wizardTitle span {
    color: #777;
    font-size: 15px;
}

.wizardInfo {
    display: flex;
    gap: 15px;
}

.infoBox {
    background: #f5f8fc;
    padding: 12px 18px;
    border-radius: 10px;
    min-width: 120px;
    text-align: center;
}

.infoTitle {
    display: block;
    color: #888;
    font-size: 13px;
}

.infoValue {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    font-size: 18px;
}

.draft {
    color: #ff9800;
}

.wizardBody {
    display: flex;
    gap: 25px;
}

.wizardMenu {
    width: 240px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 15px;
}

.menuItem {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: .25s;
    font-weight: 600;
}

.menuItem:hover {
    background: #edf4ff;
}

.menuItem.active {
    background: #1b6ec2;
    color: white;
}

.wizardContent {
    flex: 1;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.card h2 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #1b3b6f;
}

.row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.field {
    flex: 1;
}

.fieldFull {
    width: 100%;
}

.field label,
.fieldFull label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #444;
}

.txtField {
    width: 100%;
    padding: 12px;
    border: 1px solid #d6dce5;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}

.txtField:focus,
.txtArea:focus {
    outline: none;
    border-color: #1b6ec2;
}

.txtArea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d6dce5;
    border-radius: 8px;
    resize: vertical;
    font-size: 15px;
    box-sizing: border-box;
}

.wizardFooter {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.btnGray,
.btnBlue,
.btnGreen {
    border: 0;
    border-radius: 8px;
    padding: 12px 28px;
    color: white;
    font-size: 15px;
    cursor: pointer;
}

.btnGray {
    background: #777;
}

.btnBlue {
    background: #1b6ec2;
}

.btnGreen {
    background: #2eaf4a;
}

.btnGray:hover,
.btnBlue:hover,
.btnGreen:hover {
    opacity: .9;
}







/* ==========================================
   SmartSurvey Controls
   ========================================== */

.ss-page {
    width:100%;
    direction:rtl;
}

.ss-container {
    width:100%;
    max-width:1200px;
    margin:auto;
}


.ss-card {
    background:white;
    border-radius:12px;
    padding:25px;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}


.ss-card-title {
    color:#1b3b6f;
    margin-bottom:15px;
}


.ss-card-subtitle {
    color:#777;
}


.ss-row {
    display:flex;
    gap:20px;
    margin-bottom:15px;
}


.ss-col-2 {
    width:50%;
}


.ss-col-3 {
    width:33.33%;
}


.ss-label {
    display:block;
    font-weight:bold;
    margin-bottom:8px;
}


.ss-input,
.ss-select,
.ss-textarea {

    width:100%;
    padding:12px;
    border:1px solid #d6dce5;
    border-radius:8px;
    font-size:15px;

}


.ss-textarea {
    resize:vertical;
}


.ss-btn {

    border:none;
    border-radius:8px;
    padding:12px 25px;
    color:white;
    cursor:pointer;

}


.ss-btn-primary {
    background:#1b6ec2;
}


.ss-btn-success {
    background:#2eaf4a;
}


.ss-flex {

    display:flex;

}


.ss-between {

    justify-content:space-between;

}





/* ==========================================
   SmartSurvey Mobile
   ========================================== */

@media screen and (max-width: 768px) {


    body {
        font-size: 14px;
    }


    /* ביטול תפריט צד במובייל */

    .sidebar,
    .wizardMenu {
        display: none;
    }


    .mainContent {
        width: 100%;
    }


    .contentArea {
        padding: 15px;
    }


    /* כותרת */

    .wizardHeader {
        display: block;
        padding: 15px;
    }


    .wizardTitle h1 {
        font-size: 22px;
    }


    .wizardInfo {
        margin-top: 15px;
        display: block;
    }


    .infoBox {
        margin-bottom: 10px;
        width: 100%;
    }



    /* אזור הסקר */

    .wizardBody {
        display: block;
    }


    .wizardContent {
        width: 100%;
    }


    .card {
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
    }


    .card h2 {
        font-size: 20px;
    }



    /* שורות טופס */

    .row {
        display: block;
        margin-bottom: 15px;
    }


    .field {
        width: 100%;
        margin-bottom: 15px;
    }


    .fieldFull {
        width: 100%;
    }


    .txtField,
    .txtArea,
    .ss-input,
    .ss-select {
        width: 100%;
        font-size: 16px;
        min-height: 42px;
    }



    /* טבלאות */

    .surveyTable,
    .ss-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }


    .surveyTable th,
    .surveyTable td,
    .ss-table th,
    .ss-table td {
        padding: 8px;
        font-size: 13px;
    }



    /* כפתורים */

    .wizardFooter {
        display: block;
    }


    .btnGray,
    .btnBlue,
    .btnGreen,
    .ss-btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 14px;
    }


    /* כרטיסי מערכת */

    .cards {
        display: block;
    }


    .cards .card {
        margin-bottom: 15px;
    }


    /* חיפוש */

    .txtSearch {
        width: 100%;
    }


    .ss-container {
    width: 96%;
    margin:auto;
}


.ss-card {
    padding:15px;
    margin-bottom:15px;
}


.ss-row {
    display:block;
}


.ss-col-2,
.ss-col-3 {
    width:100%;
    display:block;
    margin-bottom:15px;
}


.ss-flex {
    display:block;
}


.ss-table {
    width:100%;
    overflow-x:auto;
}


.ss-btn {
    width:100%;
    margin-top:10px;
}
}




/* ==================================
   Mobile Master
   ================================== */


.mobileHeader {

    height:60px;
    background:#1F3A63;
    color:white;

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

    padding:0 15px;

}


.mobileLogo {

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

}



.menuButton {

    background:none;
    border:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}




.mobileMenu {

    display:none;

    background:white;

    box-shadow:0 3px 10px rgba(0,0,0,.2);

}



.mobileMenu a {

    display:block;

    padding:15px;

    color:#333;

    text-decoration:none;

    border-bottom:1px solid #ddd;

    font-size:16px;

}



.mobileMenu a:hover {

    background:#edf4ff;

}