/* ==========================================================================
   InsNet - استایل‌های مشترک سراسری
   این فایل شامل استایل‌هایی است که در همه‌ی صفحات سایت (بازرسان، شرکت‌ها، بلاگ و ...)
   به‌صورت یکسان استفاده می‌شوند. به‌جای نوشتن این استایل‌ها در هر فایل Blade،
   همین یک فایل در layout اصلی لود می‌شود.
   ========================================================================== */

:root{
    --ins-brand: #1a56db;
    --ins-brand-dark: #123d9e;
    --ins-navy: #0f2a5c;
    --ins-steel: #64748b;
    --ins-line: #e6eaf2;
}

/* ============ پیجینیشن مدرن (روی کل سایت، هر جا ul.pagination چاپ بشه) ============ */
.pagination{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    margin:0;
}
.pagination > li{
    display:inline-block;
}
.pagination > li > a,
.pagination > li > span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 12px;
    border-radius:10px !important;
    border:1px solid var(--ins-line);
    background:#fff;
    color:var(--ins-navy);
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    transition:all .2s ease;
}
.pagination > li > a:hover{
    background:rgba(26,86,219,.07);
    border-color:var(--ins-brand);
    color:var(--ins-brand-dark);
}
.pagination > .active > span,
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus{
    background:var(--ins-brand);
    border-color:var(--ins-brand);
    color:#fff;
}
.pagination > .disabled > span,
.pagination > .disabled > a{
    opacity:.4;
    cursor:default;
    background:#fff;
}
/* والد پیجینیشن (مثلا div.paginate یا هر کلاسی که دورش گذاشتید) وسط‌چین بشه */
.paginate,
.pagination-wrap{
    display:flex;
    justify-content:center;
    width:100%;
}

/* ============ دکمه‌ی جستجوی مدرن (قابل استفاده روی هر فرم جستجویی که این کلاس رو بگیره) ============ */
.ins-btn-search{
    height:48px;
    width:100%;
    min-width:120px;
    border-radius:12px;
    background:var(--ins-brand);
    border:none;
    color:#fff !important;
    font-weight:700;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    transition:background .2s ease;
}
.ins-btn-search:hover,
.ins-btn-search:focus{
    background:var(--ins-brand-dark);
    color:#fff;
}
.ins-btn-search i,
.ins-btn-search svg{
    font-size:14px;
    line-height:1;
}

/* ============ اینپوت/سلکت مدرن (قابل استفاده روی هر فرم جستجو یا فیلتر) ============ */
.ins-form-control{
    height:48px;
    width:100%;
    border-radius:12px;
    border:1px solid var(--ins-line);
    box-shadow:none !important;
    font-size:14px;
    padding:0 16px;
    background:#fff;
    transition:border-color .2s ease;
}
.ins-form-control:hover{
    border-color:var(--ins-brand) !important;
}
.ins-form-control:focus{
    outline:none;
    border-color:var(--ins-brand) !important;
    box-shadow:none !important;
}

/* ============ دراپ‌داون سفارشی مدرن (جایگزین select پیش‌فرض مرورگر - سراسری) ============ */
.ins-select{
    position:relative;
}
.ins-select-native{
    display:none;
}
.ins-select-trigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:48px;
    border-radius:12px;
    border:1px solid var(--ins-line);
    background:#fff;
    padding:0 16px;
    font-size:14px;
    font-family:inherit;
    color:var(--ins-navy);
    cursor:pointer;
    transition:border-color .2s ease;
}
.ins-select-trigger:hover{
    border-color:var(--ins-brand);
}
.ins-select.open .ins-select-trigger,
.ins-select-trigger:focus{
    outline:none;
    border-color:var(--ins-brand);
}
.ins-select-trigger svg{
    width:13px;
    height:13px;
    color:var(--ins-steel);
    transition:transform .2s ease;
    flex:0 0 auto;
}
.ins-select.open .ins-select-trigger svg{
    transform:rotate(180deg);
}
.ins-select-list{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    left:0;
    max-height:260px;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--ins-line);
    border-radius:14px;
    box-shadow:0 16px 40px -14px rgba(15,42,92,.25);
    padding:6px;
    margin:0;
    list-style:none;
    z-index:40;
    display:none;
}
.ins-select.open .ins-select-list{
    display:block;
}
.ins-select-option{
    padding:10px 12px;
    border-radius:9px;
    font-size:13.5px;
    color:var(--ins-navy);
    cursor:pointer;
    transition:background .15s ease;
}
.ins-select-option:hover{
    background:rgba(26,86,219,.07);
}
.ins-select-option.selected{
    background:rgba(26,86,219,.1);
    color:var(--ins-brand-dark);
    font-weight:700;
}

/* ==========================================================================
   نوار ناوبری پایین صفحه (Bottom Navigation) - فقط موبایل
   شامل ۵ آیتم: خانه، بازرسان، شرکت‌ها، خدمات (Sheet)، حساب من
   ========================================================================== */

.ins-bottomnav{
    display:none;
}

@media (max-width:767px){

    .ins-bottomnav{
        display:flex;
        align-items:stretch;
        justify-content:space-around;
        position:fixed;
        bottom:0;
        right:0;
        left:0;
        height:60px;
        padding-bottom:env(safe-area-inset-bottom);
        background:#ffffff;
        border-top:1px solid var(--ins-line);
        z-index:9998;
        box-shadow:0 -4px 16px rgba(15,42,92,.06);
    }

    body{
        padding-bottom:calc(60px + env(safe-area-inset-bottom));
    }

    body.menu-open .ins-bottomnav{
        display:none;
    }
}

.ins-bottomnav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:none;
    background:transparent;
    color:var(--ins-steel);
    font-size:11px;
    font-family:inherit;
    cursor:pointer;
    padding:6px 2px 0;
}

.ins-bottomnav-item i{
    font-size:19px;
}

.ins-bottomnav-item.active{
    color:var(--ins-brand);
}

.ins-bottomnav-overlay{
    display:none;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background:rgba(15,23,42,.4);
    z-index:9999;
}

.ins-bottomnav-overlay.open{
    display:block;
}

.ins-bottomnav-sheet{
    position:fixed;
    right:0;
    left:0;
    bottom:0;
    background:#ffffff;
    border-radius:18px 18px 0 0;
    padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    z-index:10000;
    transform:translateY(100%);
    transition:transform .25s ease;
}

.ins-bottomnav-sheet.open{
    transform:translateY(0);
}

.ins-bottomnav-sheet-handle{
    width:40px;
    height:4px;
    background:var(--ins-line);
    border-radius:4px;
    margin:6px auto 14px;
}

.ins-bottomnav-sheet-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 6px;
    font-size:14px;
    color:var(--ins-navy);
    border-bottom:1px solid var(--ins-line);
}

.ins-bottomnav-sheet-item:last-child{
    border-bottom:none;
}

.ins-bottomnav-sheet-item i{
    width:22px;
    text-align:center;
    color:var(--ins-brand);
    font-size:16px;
}

@media (min-width:768px){
    .ins-bottomnav-overlay,
    .ins-bottomnav-sheet{
        display:none !important;
    }
}

/* ==========================================================================
   زنگوله (بج + دکمه) — سراسری
   ========================================================================== */

.ins-notif-badge{
    position:absolute; top:2px; left:2px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:999px; background:#e23a3a; color:#fff;
    font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
}

.header-account-icons{
    display:flex;
    align-items:center;
    gap:8px;
}

/* آیکون زنگوله/پروفایل خودشون position:relative بگیرن تا badge و dropdown-menu
   نسبت به خودشون جابه‌جا بشن */
.header-account-icons .nav-icon-link{
    position: relative;
}

/* ارتفاع خودِ .dropdown (پروفایل، تنها چیزی که هنوز از دراپ‌داون Bootstrap استفاده می‌کنه)
   رو به اندازه‌ی واقعی آیکون (40px) محدود می‌کنیم، وگرنه چون dropdown-menu داخلش
   با display:block (نه none) مخفی می‌شه، فضای اون لیست پنهان باعث کش‌اومدن ارتفاع والد می‌شه */
.header-account-icons .dropdown{
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
}
.header-account-icons .dropdown-menu{
    position: absolute !important;
}

/* ==========================================================================
   چیدمان هدر موبایل: همبرگر راست، لوگو دقیقاً وسط، آیکون‌ها چپ
   پروفایل روی موبایل مخفیه (از تب «حساب من» در نوار پایین در دسترس است)
   ========================================================================== */
@media (max-width:767px){
    .header-flex{
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .navbar-toggle{
        order: 1;
        flex: 0 0 auto;
        margin: 0 !important;
        float: none !important;
    }
    .brand-area{
        order: 2;
        flex: 1 1 auto;
        text-align: center;
    }
    .header-account-icons{
        order: 3;
        flex: 0 0 auto;
    }
    .mobile-auth-links{
        display: none !important;
    }
    .profile-dropdown-header{
        display: none !important;
    }
}

/* ==========================================================================
   پنل تمام‌عرض پیام‌ها (جایگزین دراپ‌داون کوچیک قبلی زنگوله)
   موبایل: پنل تمام‌عرض که از زیر هدر باز می‌شود
   دسکتاپ: یک پنل محدودشده در گوشه‌ی بالا-چپ صفحه
   ========================================================================== */

.ins-msg-overlay{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.35);
    display: none;
    z-index: 9995;
}
.ins-msg-overlay.open{
    display: block;
}

.ins-msg-sheet{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 50px -18px rgba(15,42,92,.35);
    transform: translateY(-100%);
    transition: transform .22s ease;
    z-index: 9996;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ins-msg-sheet.open{
    transform: translateY(0);
}

.ins-msg-sheet-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--ins-line);
    flex: 0 0 auto;
}
.ins-msg-see-all{
    font-size: 13px;
    font-weight: 700;
    color: var(--ins-brand);
    text-decoration: none;
}
.ins-msg-sheet-head h3{
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ins-navy);
}
@media (min-width:768px){
    .header-account-icons{
        order: 3;
    }
}
.ins-msg-close{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f4f7fc;
    color: #5b6474;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ins-msg-sheet-list{
    overflow-y: auto;
    padding: 4px 0 10px;
}
.ins-msg-row{
    display: block;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ins-line);
    text-decoration: none;
    color: inherit;
}
.ins-msg-row:last-child{
    border-bottom: none;
}
.ins-msg-row:hover{
    background: #f8f9fc;
}
.ins-msg-txt{
    font-size: 14px;
    line-height: 1.9;
    color: #1b1f27;
    margin: 0 0 6px;
        white-space: pre-line;

}
.ins-msg-row.unread .ins-msg-txt{
    font-weight: 700;
}
.ins-msg-time{
    font-size: 11.5px;
    color: #8a92a3;
    direction: ltr;
    display: block;
    text-align: right;
}
.ins-msg-empty{
    padding: 40px 18px;
    text-align: center;
    color: var(--ins-steel);
    font-size: 13.5px;
}