@media (min-width:251px) and (max-width:768px) {
    .tile-image a img.img_product {
        object-fit: contain;
        min-height: 100px !important;
        width: 155px !important;
    }

    .app .row.row-table > div[class^=col-] {
        border-bottom: 1px solid #DBE0E4;
        border-right: 0;
        margin-bottom: 0;
    }
    .app .mainblock .app-heading {
        padding: 0.75rem 1rem !important;
        background: #0f2714 !important;
        border-block-end: 3px solid #ee8c23 !important;
        display: flex;
        align-items: stretch;
        position: relative;
        gap: 0.25rem;
        justify-content: space-between;
        flex-direction: column;
    }

    .new-login-inner .container {
        width: 100%;
    }

    .side-banner{
        display:none;
    }

    /* ===== Company Dashboard - Mobile Responsive ===== */

    /* Tab Navigation - horizontal scroll on mobile */
    .scroll-images {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .about-tabs .tab-btns .tab-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    .about-tabs .tab-btns .tab-btn a {
        font-size: 13px !important;
    }

    .about-tabs .tab-btns {
        flex-wrap: nowrap !important;
    }

    /* Left/Right scroll buttons */
    .scroll-images + .right.btn,
    .left.btn {
        min-width: 30px;
        padding: 4px 6px !important;
        font-size: 14px !important;
    }

    /* Tab Content - reduce padding */
    .about-tabs .tabs-content .tab.active-tab {
        padding: 10px !important;
    }

    /* About tabs spacing */
    .about-tabs {
        margin: 5px 0 !important;
    }

    /* Cards - reduce padding for mobile */
    .card.custom-card .card-body {
        padding: 0.75rem !important;
    }

    .card.custom-card .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    .card.custom-card .card-title {
        font-size: 14px !important;
    }

    /* Dashboard stat cards */
    .main-card-item .card-body {
        padding: 0.75rem !important;
    }

    .main-card-item .card-body h6 {
        font-size: 14px !important;
    }

    .main-card-item .card-body .fw-medium span {
        font-size: 12px !important;
    }

    .main-card-item .card-body .avatar-md {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* App widget tiles for shortcut buttons */
    .app-widget-tile {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .app-widget-tile .title {
        font-size: 11px !important;
    }

    /* Referral Links section */
    .input-group .form-control {
        font-size: 13px !important;
    }

    .input-group .btn {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    /* Trial Popup */
    .popup-box {
        padding: 20px !important;
        width: 92% !important;
        margin: 0 auto;
    }

    .popup-box h2 {
        font-size: 1.4rem !important;
    }

    .popup-box p {
        font-size: 0.875rem !important;
        margin-bottom: 18px !important;
    }

    .popup-box button {
        padding: 8px 20px !important;
        font-size: 0.875rem !important;
    }

    /* Chart containers - full width */
    .canvasjs-chart-container {
        width: 100% !important;
    }

    /* Modal adjustments */
    .modal-dialog.modal-lg {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    .modal-body .row .col-md-3,
    .modal-body .row .col-md-4,
    .modal-body .row .col-md-6 {
        margin-bottom: 8px;
    }

    /* Service items grid */
    .service-item {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }

    .service-item i {
        font-size: 28px !important;
    }

    /* Features card */
    .features-card {
        padding: 8px !important;
    }

    .card-main {
        height: auto !important;
    }

    /* Subscription dashboard cards */
    .Subcustom-card .card-body,
    .card.Subcustom-card .card-body {
        padding: 0.75rem !important;
    }

    .Subcard-body {
        padding: 3% !important;
    }

    /* ===== Quick Actions - wrap buttons on mobile ===== */
    .quick-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .qa-btn {
        flex: 0 0 auto !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    .section-label {
        font-size: 12px !important;
    }

    /* ===== Notifications & News - stack on mobile ===== */

    /* Producer Dashboard - grid layout */
    .info2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .info-card {
        width: 100% !important;
    }

    .ic-head {
        padding: 10px 14px 8px !important;
    }

    .ic-t {
        font-size: 13px !important;
    }

    .ic-body {
        padding: 10px 14px !important;
        max-height: 160px !important;
    }

    .nt {
        font-size: 12px !important;
    }

    /* Other Dashboards - Notification & News columns stack */
    .carddraggable .col-xxl-6,
    .carddraggable .col-xl-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .notifyLink,
    .newsLink {
        font-size: 13px !important;
    }

    /* ===== Key Metrics - 2 cards per row on mobile ===== */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .kc {
        padding: 12px 10px !important;
    }

    .ki {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        margin-bottom: 8px !important;
        border-radius: 9px !important;
    }

    .kl {
        font-size: 10.5px !important;
    }

    .kv {
        font-size: 13px !important;
    }

    .ks {
        font-size: 10px !important;
    }

    .kt {
        font-size: 9px !important;
    }

    /* ===== Farm Management - compact on mobile ===== */
    .farm-section {
        padding: 16px 14px !important;
        margin-bottom: 18px !important;
    }

    .farm-header {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .farm-title {
        font-size: 15px !important;
    }

    .farm-subtitle {
        font-size: 11px !important;
    }

    .farm-link-btn {
        font-size: 12px !important;
        padding: 7px 14px !important;
        align-self: flex-start !important;
    }

    .farm-section::before {
        font-size: 50px !important;
        right: 10px !important;
    }

    .farm-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ===== Analytics - Top Customers & Most Sold full row each ===== */
    .two-col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .ac {
        width: 100% !important;
    }

    .ac-head {
        padding: 12px 14px 10px !important;
    }

    .ac-t {
        font-size: 13px !important;
    }

    .ac-body {
        padding: 10px 14px !important;
    }

    /* Rank list items compact */
    .ri {
        padding: 7px 8px !important;
        gap: 8px !important;
    }

    .rn {
        font-size: 11px !important;
    }

    .rd {
        font-size: 11px !important;
    }

    .rv {
        font-size: 12px !important;
    }

    /* ===== Sales & Purchase Trends - single column, date fix ===== */
    .charts-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .chart-card {
        width: 100% !important;
        overflow: visible !important;
    }

    .ch-head {
        flex-wrap: wrap !important;
        padding: 12px 14px 10px !important;
        gap: 8px !important;
    }

    .ch-t {
        font-size: 13px !important;
    }

    .ch-filt {
        width: 100% !important;
    }

    .ch-filt .heading-elements {
        width: 100% !important;
    }

    .ch-filt .heading-elements > a {
        width: 100% !important;
        text-align: left !important;
    }

    /* Date picker dropdown - fit within screen */
    .dropdown-menu.dropdown-form {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }

    .dropdown-menu.dropdown-form > li {
        padding: 10px !important;
    }

    .dropdown-menu.dropdown-form .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dropdown-menu.dropdown-form .col-md-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .dropdown-menu.dropdown-form .form-control {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }

    .dropdown-menu.dropdown-form .input-group-addon {
        padding: 0 4px !important;
    }

    .ch-body {
        padding: 10px !important;
    }

    /* ===== Highest Pending Payments - fix broken inline media queries ===== */
    .pgrid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .pi {
        padding: 9px 10px !important;
        gap: 8px !important;
    }

    .pav {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .pi-name {
        font-size: 11.5px !important;
    }

    .pi-days {
        font-size: 10px !important;
    }

    .pi-amt {
        font-size: 12px !important;
    }

    .risk-tag {
        font-size: 8.5px !important;
        padding: 1px 5px !important;
    }
}

/* ===== Small Phone Styles (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* Tab buttons - even smaller on phones */
    .about-tabs .tab-btns .tab-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .about-tabs .tab-btns .tab-btn a {
        font-size: 12px !important;
    }

    /* Tab content - minimal padding */
    .about-tabs .tabs-content .tab.active-tab {
        padding: 8px !important;
    }

    /* Cards - compact */
    .card.custom-card .card-body {
        padding: 0.5rem !important;
    }

    .card.custom-card .card-header {
        padding: 0.4rem 0.5rem !important;
    }

    /* Stat cards compact */
    .main-card-item .card-body {
        padding: 0.5rem !important;
    }

    .main-card-item .card-body h6 {
        font-size: 13px !important;
    }

    .main-card-item .card-body .avatar-md {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Referral link - stack input and button */
    .input-group {
        flex-wrap: wrap !important;
    }

    .input-group .form-control {
        width: 100% !important;
        border-radius: 0.375rem !important;
        margin-bottom: 6px !important;
    }

    .input-group .btn {
        width: 100% !important;
        border-radius: 0.375rem !important;
    }

    /* Widget tiles compact */
    .app-widget-tile {
        padding: 6px !important;
    }

    .app-widget-tile .title {
        font-size: 10px !important;
    }

    /* Popup - compact for small phones */
    .popup-box {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .popup-box h2 {
        font-size: 1.2rem !important;
    }

    .popup-box p {
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
    }

    /* Modal full width */
    .modal-dialog.modal-lg {
        max-width: 100% !important;
        margin: 5px !important;
    }

    .modal-body {
        padding: 10px !important;
    }

    /* Service items smaller */
    .service-item {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .service-item i {
        font-size: 24px !important;
    }

    /* Quick Actions - 2 per row on small phones */
    .quick-actions {
        gap: 5px !important;
    }

    .qa-btn {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        padding: 7px 8px !important;
        font-size: 10px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .qa-btn i {
        font-size: 12px !important;
    }

    .section-label {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    /* Notifications & News - compact */
    .info2 {
        gap: 10px !important;
    }

    .ic-head {
        padding: 8px 12px 6px !important;
    }

    .ic-t {
        font-size: 12px !important;
    }

    .ic-body {
        padding: 8px 12px !important;
        max-height: 140px !important;
    }

    .nt {
        font-size: 11px !important;
    }

    .ntm {
        font-size: 9.5px !important;
    }

    /* ===== Key Metrics - 2 per row, no gaps on small phones ===== */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .kc {
        padding: 10px 8px !important;
    }

    .ki {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .kl {
        font-size: 9.5px !important;
        margin-bottom: 2px !important;
    }

    .kv {
        font-size: 12px !important;
    }

    .ks {
        font-size: 9px !important;
    }

    .kt {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }

    /* Farm Management - compact for small phones */
    .farm-section {
        padding: 12px 10px !important;
        margin-bottom: 14px !important;
    }

    .farm-title {
        font-size: 14px !important;
    }

    .farm-link-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .farm-section::before {
        font-size: 36px !important;
        right: 6px !important;
    }

    .farm-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Analytics - compact */
    .two-col {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .ac-head {
        padding: 10px 12px 8px !important;
    }

    .ac-t {
        font-size: 12px !important;
    }

    .ac-body {
        padding: 8px 12px !important;
    }

    .ri {
        padding: 6px 6px !important;
        gap: 6px !important;
    }

    .rn {
        font-size: 10px !important;
    }

    .rd {
        font-size: 10px !important;
    }

    .rv {
        font-size: 11px !important;
    }

    .badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
    }

    /* ===== Sales & Purchase Trends - compact for small phones ===== */
    .charts-2 {
        gap: 10px !important;
    }

    .ch-head {
        padding: 10px 10px 8px !important;
    }

    .ch-t {
        font-size: 12px !important;
    }

    .ch-body {
        padding: 8px !important;
    }

    /* Date picker - stack From/To vertically */
    .dropdown-menu.dropdown-form .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 6px !important;
    }

    .dropdown-menu.dropdown-form > li {
        padding: 8px !important;
    }

    /* ===== Highest Pending Payments - single column on small phones ===== */
    .pgrid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .pi {
        padding: 8px 8px !important;
        gap: 6px !important;
    }

    .pav {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .pi-name {
        font-size: 11px !important;
    }

    .pi-days {
        font-size: 9.5px !important;
    }

    .pi-amt {
        font-size: 11px !important;
    }
}