/*
 * TipTap editor dark mode fixes for Filament admin panel.
 * Addresses: white borders on toolbar, cramped buttons, blue focus rings.
 */

/* --- Toolbar: remove harsh dividers, add breathing room --- */
.tiptap-toolbar {
    gap: 0.25rem !important;
    padding: 0.375rem !important;
    border-bottom-width: 1px !important;
}

.dark .tiptap-toolbar {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    divide-color: transparent !important;
}

/* Remove the divide-x borders between toolbar sections in dark mode */
.dark .tiptap-toolbar > * + * {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Toolbar buttons: bigger hit targets, no focus ring --- */
.tiptap-toolbar .tiptap-tool {
    padding: 0.375rem !important;
    ring: none !important;
    --tw-ring-shadow: none !important;
    --tw-ring-color: transparent !important;
    outline: none !important;
    border-radius: 0.375rem !important;
}

.tiptap-toolbar .tiptap-tool:hover {
    --tw-ring-shadow: none !important;
    --tw-ring-color: transparent !important;
}

.tiptap-toolbar .tiptap-tool:focus {
    --tw-ring-shadow: none !important;
    --tw-ring-color: transparent !important;
}

/* --- Outer wrapper ring in dark mode --- */
.dark .tiptap-editor {
    --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Inner wrapper focus ring: use subtle primary instead of bright blue --- */
.dark .tiptap-wrapper:focus-within {
    --tw-ring-color: rgba(59, 130, 246, 0.3) !important;
}

/* --- Toolbar button icons: slightly larger --- */
.tiptap-toolbar .tiptap-tool svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* --- Toolbar left/right sections: more gap --- */
.tiptap-toolbar-left,
.tiptap-toolbar-right {
    gap: 0.125rem !important;
}

/* --- Dropdown buttons in toolbar also need the fix --- */
.tiptap-toolbar [x-data] button {
    --tw-ring-shadow: none !important;
    --tw-ring-color: transparent !important;
    outline: none !important;
}