/* =========================
   NoReplyEmails Mobile UI
========================= */
@media (max-width: 768px) {

    /* Tabs horizontal scroll */
    .no-reply-emails .email-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .no-reply-emails .email-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .no-reply-emails .email-tabs .nav-item {
        flex: 0 0 auto;
    }

    .no-reply-emails .email-tabs .nav-link {
        font-size: 13px;
        padding: 10px 10px !important;
    }

    /* View All → icon only */
    .no-reply-emails .view-all-text {
        display: none;
    }

    .no-reply-emails .view-all-icon {
        font-size: 20px;
    }

    /* Table font smaller */
    .no-reply-emails table th,
    .no-reply-emails table td {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Table scroll */
    .no-reply-emails .table-responsive {
        overflow-x: auto;
    }

    /* Modal full width on mobile */
    .no-reply-emails .ant-modal {
        width: 95% !important;
    }

    /*-------------------------- SALES GRAPH -------------------- */
    .legend-value {
        display: none;
    }

    /*-------------------------- SKETCH OTHER VEHICLE -------------------- */
    .ov-sketch {
        justify-content: end !important;
        margin-top: 0.625rem;
        /* mt-2.5 */
    }
}

/* Mobile only */
@media (min-width: 256px) and (max-width: 576px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .header-right {
        width: 100%;
        justify-content: flex-start !important;
    }

    .header-right .gf-input {
        width: 100%;
        max-width: 100% !important;
    }
}


/* 📱 Tablet only (768px–991px) FOR INSURANCE % */
@media (min-width: 768px) and (max-width: 1400px) {
    .insurance-scroll-box {
        min-height: 328px;
        max-height: 328px;
    }
}

/* ------CLAIM COUNT CARD------- */
@media (max-width: 1700px) {
    .claim-Count>.d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .claim-Count .remove-tooltip-title {
        order: 2;
        width: 100%;
        margin: 6px 0;
    }

    /* move info icon to top-right */
    .info-mobile-top {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .info-mobile-top .tooltip-text {
        white-space: normal;
        bottom: 100%;
    }
}

@media (max-width: 520px) {

    /* move info icon to top-right */
    .info-mobile-top {
        position: absolute;
        top: -13px;
        right: -8px;
    }

    .info-mobile-top .tooltip-text {
        white-space: normal;
        bottom: 100%;
        min-width: 130px;
        max-width: 220px;
        line-height: 1.4;
        text-align: left;
        word-break: break-word;
    }
}



/* Below 1400px → 2 cards per row */
@media (max-width: 1400px) {
    .claim-Count-card {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/*------------/global filter/--------------  */

/* for title and filter button makes same row */

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* do not wrap */
}

.filter-panel {
    width: 100%;
    display: none;
    background-color: #f9fafb;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
}

/* show panel when opened */
.filter-panel.open {
    display: block;
}

/* Mobile filter button */
/* .filter-btn {
    background-color: #487fff;
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    padding-left: 24px !important;
    padding-right: 24px !important;
} */

.filter-btn {
    background: transparent; /* Remove blue background */
    border: none;
    cursor: pointer;
    padding: 0; /* Remove padding to keep icon centered */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* Ensure no shadow is inherited */
}

.filter-icon {
    height: 21px;
    width: 21px;
}

/* Filter wrapper */
@media (max-width: 1024px) {

    .page-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* flex-wrap: wrap;
        gap: 12px; */
    }

    .filter-wrapper {
        display: flex;
        align-items: center;
    }

    .filter-wrapper {
        /* margin-bottom: 1rem; */
        margin-bottom: 10px;
    }

    .filter-panel {
        width: 100%;
    }

    /* Button wrapper */
    .filter-btn-wrapper {
        display: flex;
        justify-content: flex-end;
        /* margin-bottom: 0.5rem; */
    }

    /* Filter button */
    /* .filter-btn {
        background-color: #487fff;
        color: white;
        border: none;
        cursor: pointer;
        margin-right: 13px;
        padding-left: 30px !important;
        padding-right: 30px !important;
    } */

    .filter-btn {
        margin-right: 13px;
    }

    /* Filter panel */
    .filter-panel {
        display: none;
        /* hidden by default (mobile) */
        background-color: #f9fafb;
        border-radius: 0.375rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Show panel when button clicked on mobile */
    .filter-panel.open {
        display: block;
    }

    /* Global Filter */

    /* Make wrapper full width and stack fields */
    .filter-panel .gf-wrapper {
        flex-direction: column;
        /* stack vertically */
        /* gap: 12px; */
        /* spacing between fields */
        margin-bottom: 8px !important;
    }

    .filter-panel .gf-field {
        width: 100%;
        /* each field takes full width */
    }

    /* React-select inside filter panel */
    .filter-panel .react-select__control {
        width: 100% !important;
        /* ensure react-select fills container */
        min-width: 0;
        /* remove any previous min-width */
    }

    .filter-panel .react-select__menu {
        width: 100% !important;
        /* dropdown matches full width */
    }
}

/* @media screen and (max-width : 800px) {
    .filter-btn {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
} */

/* Desktop: always show filter, hide button */
@media (min-width: 1024px) {
    .filter-btn-wrapper {
        display: none;
    }

    .filter-panel {
        display: block !important;
        position: static;
        width: auto;
        box-shadow: none;
        padding: 0;
    }

    .filter-panel .react-select__control {
        width: 220px !important;
        /* your old fixed width */
    }

    .filter-panel .react-select__menu {
        width: 220px !important;
    }

}

@media (min-width: 769px) {
    .filter-panel .gf-wrapper {
        flex-direction: row;
        /* horizontal layout */
        align-items: flex-end;
        /* align labels/inputs */
        /* gap: 16px; */
        /* spacing between fields */
    }

    .filter-panel .gf-field {
        width: auto;
        /* let fixed width take effect */
        flex: 0 0 auto;
        /* prevent stretching */
    }

    /* Optional: react-select width on desktop */
    .filter-panel .gf-field .react-select__control {
        width: 220px;
        /* your old fixed width */
    }
}

/*------------/END global filter/--------------  */


/*------------ email track------------------ */
@media (max-width: 768px) {

    .email-track-edit-page .trackemail-to-wrapper,
    .email-track-edit-page .email-tags-input {
        width: 100%;
    }

    /* CC & BCC full width on mobile */
    .email-track-edit-page .col-6.mb-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* DatePicker popup inside screen */
    .email-track-edit-page .ant-picker-dropdown {
        left: 5% !important;
        right: 5% !important;
        width: 90% !important;
    }

    .email-track-edit-page .ant-picker-panel-container {
        width: 100% !important;
    }

    .email-track-edit-page .ant-picker {
        width: 100% !important;
    }

    .email-track-edit-page .trackemail-to-wrapper .rti--input,
    .email-track-edit-page .trackemail-to-wrapper input {
        width: 90% !important;

        min-width: unset;
    }


}