@font-face {

    font-family: Vazirmatn;

    src: url('../fonts/Vazirmatn-Regular.ttf');

}


* {

    box-sizing: border-box;

}


body {

    margin: 0;

    font-family: Vazirmatn, Tahoma;

    background: #f1f5f9;

    color: #334155;

}



/* =====================
هدر
===================== */


.home-header {

    background: linear-gradient(135deg, #0284c7, #06b6d4);

    padding: 18px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: white;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);

    border-radius: 0 0 30px 30px;

}



.header-right,
.header-left {

    display: flex;

    align-items: center;

    gap: 15px;

}



.water-logo {

    width: 65px;

    height: 65px;

    background: white;

    color: #0284c7;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 32px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);

}



.system-name h4 {

    margin: 0;

    font-size: 20px;

    font-weight: bold;

}



.system-name span {

    font-size: 14px;

}



.weather-box,
.clock-box {

    background: rgba(255, 255, 255, .2);

    padding: 10px 15px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.search-btn,
.menu-btn {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: white;

    color: #0284c7;

    font-size: 18px;

}



.menu-btn {

    display: none;

}



/* =====================
تمام کارت ها
===================== */


.status-card:hover,
.info-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .15);

}




.status-card i,
.info-card i {

    font-size: 30px;

    margin-bottom: 8px;

}



.status-card h5,
.info-card h5 {

    font-size: 15px;

    font-weight: bold;

    margin: 0;

}



.status-card p,
.info-card p {

    font-size: 12px;

    margin: 5px 0;

    color: #475569;

    line-height: 1.6;

}




/* =====================
کارت وضعیت آب
===================== */


.status-active {

    background: linear-gradient(135deg,
            #dcfce7,
            #f0fdf4);

}


.status-active i {

    color: #16a34a;

}


.status-active h5 {

    color: #15803d;

}





/* =====================
برق شهری قطع
===================== */


.status-warning {

    background: linear-gradient(135deg,
            #fee2e2,
            #fff7ed);

}


.status-warning i {

    color: #dc2626;

}


.status-warning h5 {

    color: #b91c1c;

}




/* =====================
سیستم سولر
===================== */


.status-solar {

    background: linear-gradient(135deg,
            #fef3c7,
            #fffbeb);

}


.status-solar i {

    color: #d97706;

}


.status-solar h5 {

    color: #92400e;

}




/* =====================
چاه فعال
===================== */


.status-water {

    background: linear-gradient(135deg,
            #dbeafe,
            #eff6ff);

}


.status-water i {

    color: #0284c7;

}


.status-water h5 {

    color: #0369a1;

}





/* =====================
کارت تعداد مشترکین
===================== */


.subscriber-card {

    background: linear-gradient(135deg,
            #ede9fe,
            #faf5ff);

}


.subscriber-card i {

    color: #7c3aed;

}




/* =====================
کارت مناطق
===================== */


.zone-card {

    background: linear-gradient(135deg,
            #cffafe,
            #ecfeff);

}


.zone-card i {

    color: #0891b2;

}





/* =====================
مصرف آب
===================== */


.consume-card {

    background: linear-gradient(135deg,
            #dbeafe,
            #eff6ff);

}


.consume-card i {

    color: #2563eb;

}




/* =====================
اطلاعیه ها
===================== */


.news-card {

    background: linear-gradient(135deg,
            #fce7f3,
            #fdf2f8);

}


.news-card i {

    color: #db2777;

}

/* =====================
کارت چک کردن کنتور
===================== */


.water-check-box {

    background: linear-gradient(135deg,
            #e0f2fe,
            #ffffff);

    border-radius: 22px;

    padding: 20px;

    margin-top: 20px;

    min-height: 150px;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    transition: .3s;

}



.water-check-box:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .15);

}



.water-check-box i {

    font-size: 38px;

    color: #0284c7;

    margin-bottom: 8px;

}



.check-title h4 {

    font-size: 18px;

    font-weight: bold;

    color: #075985;

    margin: 8px 0;

}



.check-title p {

    font-size: 12px;

    color: #64748b;

}





/* =====================
استعلام قبض
===================== */


.lookup-box {

    background: white;

    border-radius: 22px;

    padding: 22px;

    margin-top: 25px;

    box-shadow:

        0 8px 25px rgba(15, 23, 42, .10);

}



.lookup-box h4 {

    color: #0284c7;

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 18px;

}



.form-control,
.form-select {

    height: 50px;

    border-radius: 15px;

    border: 1px solid #cbd5e1;

    font-family: inherit;

}



.form-control:focus,
.form-select:focus {

    border-color: #0284c7;

    box-shadow: 0 0 0 .2rem rgba(2, 132, 199, .15);

}



.btn-search {

    height: 50px;

    border-radius: 15px;

    background: #0284c7;

    color: white;

    border: none;

    font-weight: bold;

}



.btn-search:hover {

    background: #0369a1;

}




/* =====================
سایدبار
===================== */


.home-sidebar {

    position: fixed;

    top: 0;

    right: -320px;

    width: 300px;

    height: 100%;

    background: white;

    z-index: 999;

    transition: .4s;

    padding: 25px;

    box-shadow:

        -10px 0 30px rgba(0, 0, 0, .15);

}



.home-sidebar.active {

    right: 0;

}



.home-sidebar a {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 14px;

    margin-bottom: 5px;

    border-radius: 15px;

    text-decoration: none;

    color: #334155;

}



.home-sidebar a:hover {

    background: #e0f2fe;

    color: #0284c7;

}



.overlay {

    position: fixed;

    inset: 0;

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

    display: none;

    z-index: 998;

}



.overlay.active {

    display: block;

}





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


.home-footer {

    margin-top: 30px;

    background: white;

    padding: 20px;

    text-align: center;

    border-radius: 25px 25px 0 0;

    color: #64748b;

    box-shadow:

        0 -5px 20px rgba(0, 0, 0, .05);

}


/* =====================
موبایل و تبلت
===================== */


@media(max-width:768px) {



    /* هدر */

    .home-header {

        padding: 12px;

        border-radius: 0 0 22px 22px;

    }



    .water-logo {

        width: 48px;

        height: 48px;

        font-size: 22px;

    }



    .system-name h4 {

        font-size: 15px;

    }



    .system-name span {

        font-size: 11px;

    }



    .weather-box {

        display: none;

    }



    .clock-box {

        font-size: 11px;

        padding: 7px 10px;

    }



    .search-btn,
    .menu-btn {

        width: 38px;

        height: 38px;

        font-size: 15px;

    }



    .menu-btn {

        display: block;

    }





    /* کارت های اصلی */

    .status-card,
    .info-card {

        height: 110px;

        padding: 12px;

        border-radius: 18px;

    }




    .status-card i,
    .info-card i {

        font-size: 24px;

        margin-bottom: 5px;

    }




    .status-card h5,
    .info-card h5 {

        font-size: 14px;

    }




    .status-card p,
    .info-card p {

        font-size: 11px;

        line-height: 1.5;

    }






    /* کارت چک کنتور */

    .water-check-box {

        min-height: 135px;

        padding: 15px;

        margin-top: 15px;

        border-radius: 18px;

    }



    .water-check-box i {

        font-size: 32px;

    }



    .check-title h4 {

        font-size: 16px;

    }



    .check-title p {

        font-size: 11px;

    }






    /* استعلام */

    .lookup-box {

        padding: 18px;

        border-radius: 18px;

    }



    .lookup-box h4 {

        font-size: 16px;

    }



    .form-control,
    .form-select {

        height: 45px;

        font-size: 13px;

    }



    .btn-search {

        height: 45px;

        font-size: 14px;

    }





    /* سایدبار */

    .home-sidebar {

        width: 270px;

    }



}




/* =====================
صفحه های کوچک موبایل
===================== */


@media(max-width:420px) {



    .header-right,
    .header-left {

        gap: 8px;

    }



    .system-name h4 {

        font-size: 14px;

    }



    .clock-box {

        display: none;

    }



    .status-card,
    .info-card {

        height: 105px;

    }



    .status-card i,
    .info-card i {

        font-size: 22px;

    }



    .status-card h5,
    .info-card h5 {

        font-size: 13px;

    }



    .status-card p,
    .info-card p {

        font-size: 10px;

    }



}



/* =====================
فونت و فاصله عمومی
===================== */


.container-fluid {

    padding-right: 18px;

    padding-left: 18px;

}



@media(max-width:768px) {


    .container-fluid {

        padding-right: 10px;

        padding-left: 10px;

    }


}

/* ==========================
 رنگ نهایی کارت های Home
========================== */


/* تعداد مشترکین */

.info-card.subscriber-card {

    background: linear-gradient(135deg, #ede9fe, #ffffff) !important;

}


.info-card.subscriber-card i {

    color: #7c3aed !important;

}



/* مناطق تحت پوشش */

.info-card.zone-card {

    background: linear-gradient(135deg, #cffafe, #ffffff) !important;

}


.info-card.zone-card i {

    color: #0891b2 !important;

}



/* مصرف آب */

.info-card.consume-card {

    background: linear-gradient(135deg, #dbeafe, #ffffff) !important;

}


.info-card.consume-card i {

    color: #2563eb !important;

}



/* اطلاعیه ها */

.info-card.news-card {

    background: linear-gradient(135deg, #fce7f3, #ffffff) !important;

}


.info-card.news-card i {

    color: #db2777 !important;

}



/* کارت چک کنتور */

.water-check-box {

    background: linear-gradient(135deg, #e0f2fe, #ffffff) !important;

}


/* سایه نرم همه کارت ها */

.status-card,
.info-card,
.water-check-box {

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .12) !important;

}

.network-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 18px;
    margin: 20px auto;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.network-status i {
    font-size: 20px;
}

.network-status.success {
    background: #dcfce7;
    color: #166534;
    border-right: 6px solid #22c55e;
}

.network-status.warning {
    background: #fef3c7;
    color: #92400e;
    border-right: 6px solid #f59e0b;
}

.network-status.danger {
    background: #fee2e2;
    color: #991b1b;
    border-right: 6px solid #ef4444;
}

@media(max-width:768px) {
    .network-status {
        font-size: 13px;
        padding: 12px 15px;
    }
}