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

/* 2. Target the specific menu popup */
.tox-menu:has([aria-label="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([aria-label="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([aria-label="TM5_GRID_MARKER"]) .tox-collection__item:not([aria-label="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([aria-label="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([aria-label="TM5_GRID_MARKER"]) .tox-collection__item-icon {
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}

.tox-menu:has([aria-label="TM5_GRID_MARKER"]) .tox-collection__item-label,
.tox-menu:has([aria-label="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;
}

/* Hide the button when the editor has the 'hide-my-button' class */
.hide-stroke-button .tox-tbtn[aria-label="Set Text Stroke Color"] {
    opacity: 0.4 !important; /* Greys it out */
    pointer-events: none !important; /* Prevents clicks */
    cursor: not-allowed !important; /* Shows "blocked" cursor */
    filter: grayscale(1); /* Optional: removes color */
    display: none;
}

.hide-highlight-buttons .tox-tbtn[aria-label="Highlight drop shadow background color"],
.hide-highlight-buttons .tox-tbtn[aria-label="Highlight background color"] {
    opacity: 0.4 !important; /* Greys it out */
    pointer-events: none !important; /* Prevents clicks */
    cursor: not-allowed !important; /* Shows "blocked" cursor */
    filter: grayscale(1); /* Optional: removes color */
    display: none;
}


.tox [aria-label="COLUMN HEADER WITH BLUE BG"] .tox-collection__item-label p {
    -webkit-text-stroke: 3px #354b70 !important;
    paint-order: stroke fill;
    background-color: #6A7EB8;
    padding: 0 5px 0 5px;
}


.nohover .mce-item-table:not([border]),
.nohover .mce-item-table:not([border]) caption,
.nohover .mce-item-table:not([border]) td,
.nohover .mce-item-table:not([border]) th,
.nohover .mce-item-table[border="0"],
.nohover .mce-item-table[border="0"] caption,
.nohover .mce-item-table[border="0"] td,
.nohover .mce-item-table[border="0"] th,
.nohover table[style*="border-width: 0px"],
.nohover table[style*="border-width: 0px"] caption,
.nohover table[style*="border-width: 0px"] td,
.nohover table[style*="border-width: 0px"] th {
    border: none !important;
    outline: none !important;
}


.nohover .mce-content-body td[data-mce-selected]::after, .nohover .mce-content-body th[data-mce-selected]::after {
    border: none !important;
    background-color: none !important;
    
}

.mce-item-table:not([border]), .mce-item-table:not([border]) caption, .mce-item-table:not([border]) td, .mce-item-table:not([border]) th, .mce-item-table[border="0"], .mce-item-table[border="0"] caption, .mce-item-table[border="0"] td, .mce-item-table[border="0"] th, table[style*="border-width: 0px"], table[style*="border-width: 0px"] caption, table[style*="border-width: 0px"] td, table[style*="border-width: 0px"] th {
    border: none !important;
    outline: 1px dashed gray;
}