/* Mobile-only overrides (applies only when max-width <= 768px) */
.e-dialog .e-dlg-content { max-height: 85vh; overflow: auto }







/* Hide elements on mobile (<= 768px) */
@media (max-width: 768px) {
    .hide-on-mobile,
    button.hide-on-mobile,
    .e-btn.hide-on-mobile {
        display: none !important;
    }

    /* Stack company detail grids */
    .company-details-container {
        grid-template-columns: 1fr !important;
        height: unset !important;
    }

    .company-info {
        grid-template-columns: 1fr !important
    }

    .company-info-detail {
        grid-template-columns: 1fr !important
    }

    .grid-action-buttons {
        display: grid !important;
        gap: 8px; /* space between buttons */
        align-items: center;
        white-space: nowrap; /* keep buttons on one line */
    }

}

/* Show elements only on mobile (<= 768px) */
.show-on-mobile {
    display: none !important; /* hidden by default (desktop/tablet) */
}

@media (max-width: 768px) {
    .show-on-mobile,
    button.show-on-mobile,
    .e-btn.show-on-mobile {
        /* pick one that fits your element; inline-flex works well for buttons */
        display: inline-flex !important;
        align-items: center;
    }
}

/* Default: desktop/tablet */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Mobile: only show CRM menu wrapper */
@media (max-width: 640px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

@media (max-width: 640px) {
  /* Hide KPI links in the left sidebar on mobile */
  #app-sidebar a[href^="/KPI"],
  #app-sidebar a[href^="KPI"] {
    display: none !important;
  }

  /* Add more as needed */
  /* #app-sidebar a[href^="/Reports"], #app-sidebar a[href^="Reports"] { display: none !important; } */
  /* #app-sidebar a[href^="/Admin"],   #app-sidebar a[href^="Admin"]   { display: none !important; } */
}

/* Reduce padding/margins on mobile */
.company-card { min-height: auto; padding: 12px }

/* Tables: wrapping + horizontal scroll when needed */
.table-responsive { overflow-x: auto; width: 100% }
table.table { table-layout: auto }
table.table td, table.table th { white-space: normal; word-break: break-word }

/* Make the main content span the full viewport width on mobile */
/*.page .content,
.content {
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box;
}*/

/* Optional: reduce padding so the grid gets more room */
/*@media (max-width: 576px) {
    .content.px-4 {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}*/

/* Show hamburger and enable off-canvas drawer on mobile */
.hamburger {
    display: none;
}

    .hamburger svg {
        width: 24px;
        height: 24px;
    }

@media (max-width: 768px) {
    .hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        background: none;
        border: none;
        color: inherit;
        padding: .25rem .5rem;
        margin-right: .5rem;
        z-index: 1050;
    }

    /* Off-canvas sidebar (closed by default) */
    #app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80vw !important; /* drawer width */
        max-width: 320px;
        transform: translateX(-100%); /* hidden by default */
        transition: transform .25s ease-in-out;
        z-index: 1040;
        overflow-y: auto;
        background-color: #fff; /* ensure it's visible */
    }

        #app-sidebar.open {
            transform: translateX(0); /* slide in */
            box-shadow: 2px 0 12px rgba(0,0,0,.25);
        }

    /* Prevent horizontal scroll and let content use the full width */
    .page {
        overflow-x: hidden;
    }

        .page .content, .content {
            max-width: 100vw !important;
            width: 100vw !important;
            box-sizing: border-box;
        }

}