/* M360 Override Styles - Fix global CSS conflicts */
@import url('tailwind.css');
@import url('m360app.css');
@import url('inv-engagement-grid.css');

/*
   Responsive grid utilities — declared outside @layer so they win the cascade
   against the layered non-responsive `.grid-cols-*` rules from later-loaded
   Tailwind builds (Common, Communication, Shared). Without this, pages like
   MemberProfile render as 2 columns even at 2000px because the unprefixed
   `.grid-cols-2` from another RCL's tailwind.css outranks `.lg:grid-cols-3`
   via @layer priority. Same pattern used in CSI.UI.Common/_override.css for
   the login page `md:grid-cols-2` / `md:hidden` fix.
*/
@media (min-width: 640px) {
    .sm\:gap-6 { gap: 1.5rem; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Grid wrapper - must be outside #page */
.inv-grid-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    overflow-x: auto;
}

.data-table-container .inv-grid-wrapper {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

/* Remove unwanted borders from table text and tabs */
.data-table-cell,
.data-table-tab,
.data-table-tab-active,
.data-table-tab-inactive {
    border: none !important;
}

/* Ensure tab buttons don't get button styling */
.data-table-tab {
    background: transparent !important;
    padding: 0 !important;
    padding-bottom: 0.25rem !important;
}

/* Remove button styling from action menu ellipsis */
.data-table-cell button {
    border: none !important;
    background: transparent !important;
    padding: 0.25rem !important;
}

/* Remove any inherited borders*/
.data-table button,
.data-table-row button {
    border: none !important;
    background: transparent !important;
}

/* Override inv-input.css button styling in ALL tables */
table button,
table td button,
table tbody button,
tbody button {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Engagement activity table */
table tr td button {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#page .e-grid[cssclass="m360-engagement-grid"] .e-headercell.e-leftalign {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Fix filter icon positioning */
#page .e-grid[cssclass="m360-engagement-grid"] .e-headercell.e-leftalign .e-headercelldiv {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
}

#page .e-grid[cssclass="m360-engagement-grid"] .e-headercell.e-leftalign .e-headertext {
    white-space: nowrap !important;
}

/* Sort icon - what a pain */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-headercell.e-leftalign .e-sortfilterdiv {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    position: static !important;
    float: none !important;
    color: #605E5C !important;
    font-size: 12px !important;
}

    /* Filter icon - what a bigger pain*/
    #page .e-grid[cssclass="m360-engagement-grid"] .e-headercell.e-leftalign .e-filtermenudiv {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0 !important;
    position: static !important;
    float: none !important;
    color: #605E5C !important;
    font-size: 12px !important;
}
    #page .e-grid[cssclass="m360-engagement-grid"] .e-gridheader {
        border-bottom: 1px solid #DEE2E6 !important;
    }

    /* M360 grid header background */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-headercell:hover {
        background-color: #F3F3F6 !important;
    }
    /* Header cell — bottom border + vertical alignment for all content */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-headercell {
        vertical-align: middle !important;
        background: #F3F3F6 !important;
        height: 44px !important;
    }
    /* Row cell — bottom border consistent with header */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-rowcell {
        border-bottom: 1px solid #DEE2E6 !important;
    }
    /* Remove borders from all expansion/icon buttons */
    .bg-white button[type="button"] svg {
        border: none !important;
    }

    .bg-white button.bg-transparent,
    .data-table-container button.bg-transparent,
    button.text-gray-400 {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    /* Remove borders from engagement rating emoji buttons */
    .engagement-rating-selector button,
    .engagement-rating-selector .rating-emoji {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    /* Allow action menu popups to overflow grid cells - only for action menu column (last column) */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-rowcell:last-child {
        overflow: visible !important;
    }

    #page .e-grid[cssclass="m360-engagement-grid"] .e-gridcontent {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #page .e-grid[cssclass="m360-engagement-grid"] tbody {
        overflow: visible !important;
    }

    #page .e-grid[cssclass="m360-engagement-grid"] tr {
        overflow: visible !important;
    }
    /* Text wrapping for all cells except action menu column */
    #page .e-grid[cssclass="m360-engagement-grid"] .e-rowcell:not(:last-child) {
        overflow: hidden !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

/* ── Action menu: fixed positioning so the popup never expands the grid ──── */
.action-menu-popup {
    position: fixed !important;
    min-width: 200px !important;
    width: auto !important;
    top: auto;
    right: auto;
    margin-top: 0;
}

/* Suppress horizontal scrollbar on the grid inside the member-profile cards */
.data-table-container .inv-grid-wrapper {
    overflow-x: hidden;
}