/* Custom Trix Editor Styling */
/* This file contains custom Trix styles that cannot use Tailwind @apply directives */

/* Trix Editor Sticky Toolbar */
trix-toolbar {
    position: sticky !important;
    top: 4rem !important;
    z-index: 20 !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
    transition: all 0.2s ease !important;
}

@media (max-width: 1024px) {
    trix-toolbar {
        top: 3.5rem !important;
        padding: 0.5rem !important;
    }
}

/* Toolbar Buttons - Consistent Design */
trix-toolbar .trix-button {
    background-color: #f9fafb !important;
    /* gray-50 */
    border: 1px solid #e5e7eb !important;
    /* gray-200 */
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    padding: 0.5rem !important;
}

trix-toolbar .trix-button:hover {
    background-color: #f3f4f6 !important;
    /* gray-100 */
    border-color: #d1d5db !important;
    /* gray-300 */
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

trix-toolbar .trix-button:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

trix-toolbar .trix-button.trix-active {
    background-color: #10b981 !important;
    /* brand-500 */
    border-color: #059669 !important;
    /* brand-600 */
    color: white !important;
}

trix-toolbar .trix-button.trix-active::before {
    filter: brightness(0) invert(1) !important;
    /* Make icons white */
}

/* Trix Toolbar - Dark Mode (Subtle like Light Mode) */
.dark trix-toolbar {
    background-color: #1f2937 !important;
    /* gray-800 */
    border-color: #374151 !important;
    /* gray-700 */
}

.dark trix-toolbar .trix-button {
    background-color: rgba(55, 65, 81, 0.3) !important;
    /* gray-700 with 30% opacity - subtle */
    border: 1px solid rgba(75, 85, 99, 0.4) !important;
    /* gray-600 with 40% opacity */
    color: #f3f4f6 !important;
}

.dark trix-toolbar .trix-button::before {
    filter: invert(1) brightness(1.8) !important;
    /* Light icons on dark background */
}

.dark trix-toolbar .trix-button:hover {
    background-color: rgba(75, 85, 99, 0.5) !important;
    /* gray-600 with 50% opacity */
    border-color: rgba(107, 114, 128, 0.6) !important;
    /* gray-500 with 60% opacity */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark trix-toolbar .trix-button.trix-active {
    background-color: #10b981 !important;
    /* brand-500 - green in both modes */
    border-color: #059669 !important;
    /* brand-600 */
    color: white !important;
}

.dark trix-toolbar .trix-button.trix-active::before {
    filter: brightness(0) invert(1) !important;
    /* White icons on brand color */
}

.dark trix-editor {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* ==========================================================================
   Public Content RTL Support (Mirrors Trix Editor Styles)
   ========================================================================== */

/* Default Reset: Force LTR/Left alignment initially */
.trix-content,
.trix-content * {
    text-align: left;
    direction: ltr;
}

/* Standard RTL blocks */
.trix-content *[dir="rtl"] {
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

/* Smart Block Alignment via :has() for Preview Page */
/* When a block contains RTL text, align the whole block right */
.trix-content *:has(span[style*="direction: rtl"]),
.trix-content *:has(span[style*="direction:rtl"]),
.trix-content *:has(span[style*="direction: rtl;"]),
.trix-content *:has([dir="rtl"]) {
    text-align: right !important;
    direction: rtl !important;
    font-family: 'Amiri', 'Noto Naskh Arabic', 'Arial', sans-serif;
}

/* LTR fallback - FORCE Left if user manually selects LTR */
.trix-content *:has(span[style*="direction: ltr"]),
.trix-content *:has(span[style*="direction:ltr"]) {
    text-align: left !important;
    direction: ltr !important;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}