/* 1. Hide the CSS anchor item */
.tox-menu [title="TM5_GRID_MARKER"] {
    display: none !important;
}

/* 2. Target the specific menu popup */
.tox-menu:has([title="TM5_GRID_MARKER"]) {
    min-width: 140px !important;
    padding: 4px !important;
    background-color: #ffffff !important;
}

/* 3. Turn the internal list into a grid */
.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__group {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr); /* 3 columns */
    gap: 2px;
}

/* 4. Style the menu items as grid squares */
.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__item:not([title="TM5_GRID_MARKER"]) {
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid transparent;
    position: relative; /* Essential for tooltip positioning */
    overflow: visible !important; /* Allow tooltip to pop out of the square */
}

/* 5. Handle Hover state (Active item) */
.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__item--active {
    background-color: #e3f2fd !important; /* Light blue hover */
    border-color: #2196f3 !important;
    border-radius: 4px;
}

/* 6. Center the SVG Icon and hide text/caret containers */
.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__item-icon {
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}

.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__item-label,
.tox-menu:has([title="TM5_GRID_MARKER"]) .tox-collection__item-caret {
    display: none !important;
}
/* 2. Create the tooltip using the aria-label */
.tox-menu:has([aria-label="TM5_GRID_MARKER"]) .tox-collection__item:hover::after {
    content: attr(aria-label); /* Pulls the 'name' from JS */
    position: absolute;
    bottom: 110%; /* Place it above the square */
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 3px;
    z-index: 1000;
    pointer-events: none; /* Don't interfere with clicking */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 3. Add a small arrow under the tooltip */
.tox-menu:has([aria-label="TM5_GRID_MARKER"]) .tox-collection__item:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1000;
}

/* 4. Ensure the original text label remains hidden */
.tox-menu:has([aria-label="TM5_GRID_MARKER"]) .tox-collection__item-label {
    display: none !important;
}