/**
 * Orbis Froala Editor + elFinder Integration CSS
 * Complete styles for Froala Editor + elFinder integration
 */

/* ==========================================================================
   Modal Z-Index Management (matching CKEditor pattern)
   ========================================================================== */

/* Froala Editor modals */
.fr-modal, .fr-overlay {
    z-index: 2000000000 !important;
}

/* elFinder modal styles */
.elfinder-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000000000;
}

/* Additional elFinder modal z-index rules */
.elfinder-modal .ui-dialog {
    z-index: 2000000000 !important;
}

#elfinder-modal {
    z-index: 2000000000 !important;
}

.ui-dialog.elfinder-dialog {
    z-index: 2000000000 !important;
}

/* jQuery UI dialog overlays */
.ui-widget-overlay.elfinder-overlay {
    z-index: 1999999999 !important;
}

.elfinder-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    height: 85%;
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid #d0d0d0;
}

.elfinder-modal-header {
    background: #f8f8f8 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 8px 15px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.elfinder-modal-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.elfinder-modal-close {
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    color: #666 !important;
    padding: 5px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
}

.elfinder-modal-close:hover {
    color: #333 !important;
}

.elfinder-modal-body {
    height: calc(100% - 40px);
    padding: 0;
}

#elfinder-container {
    height: 100%;
    width: 100%;
}

/* ==========================================================================
   Froala Editor Enhancements
   ========================================================================== */

/* Basic Froala Editor styling */
/* Only apply to standalone fr-box, not those inside resizable containers */
.fr-box:not(.froala-resize-container .fr-box) {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.fr-box.fr-focused {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fr-element {
    border: 0 !important;
    outline: none !important;
    border-radius: 0 0 4px 4px !important; /* Bottom corners only */
    min-height: 240px !important;
    cursor: text !important;
    padding: 10px !important;
    flex: 1 !important;
    height: auto !important;
}

/* Fix toolbar and content separation */
.fr-toolbar {
    border-radius: 4px 4px 0 0 !important; /* Top corners only */
    border-bottom: 1px solid #ddd !important; /* Add separator line */
    background: #f8f9fa !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Ensure proper border separation for second toolbar */
.fr-box .fr-toolbar + .fr-second-toolbar {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

.fr-box .fr-toolbar + .fr-wrapper,
.fr-box .fr-second-toolbar + .fr-wrapper {
    border-top: 1px solid #ddd !important;
}

/* Remove any duplicate borders that might cause double lines */
.fr-wrapper {
    border: none !important;
    padding: 0 !important; /* Remove wrapper padding to avoid height conflicts */
}

.fr-box.fr-basic .fr-element {
    min-height: 240px;
}

.fr-box.fr-code-view .fr-code {
    width: 100%;
    height: 100% !important;
    min-height: 240px !important;
    box-sizing: border-box;
}

/* Fix bottom corner double lines for standard editors */
.fr-box:not(.froala-resize-container .fr-box) .fr-element {
    border-radius: 0 0 4px 4px !important; /* Bottom corners only for standard editors */
}

/* Ensure wrapper doesn't add conflicting radius in standard editors */
.fr-box:not(.froala-resize-container .fr-box) .fr-wrapper {
    border-radius: 0 !important; /* No radius on wrapper for standard editors */
}

/* Additional fix for any nested containers that might cause conflicts */
.fr-element {
    border-radius: 0 !important; /* Nested elements should not have radius */
}

/* For standalone editors (not in resizable containers) */
.fr-box:not(.froala-resize-container .fr-box) {
    position: relative;
}

.fr-box:not(.froala-resize-container .fr-box) > .fr-toolbar:first-child {
    border-radius: 4px 4px 0 0 !important;
}

.fr-box:not(.froala-resize-container .fr-box) > .fr-wrapper:last-child,
.fr-box:not(.froala-resize-container .fr-box) > .fr-wrapper:last-child .fr-element {
    border-radius: 0 0 4px 4px !important;
}

/* For resizable containers - the outer container handles all corners */
.froala-resize-container {
    /*position: relative;*/
}

/* Override any conflicting styles from parent elements */
.fr-box *,
.froala-resize-container * {
    box-sizing: border-box !important;
}

/* Specific fix for bottom corners - only for standalone editors */
.fr-box:not(.froala-resize-container .fr-box) .fr-wrapper .fr-element {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Hide Filestack icons from Froala file upload menus */
.fr-modal .fr-file-upload-layer .fr-file-upload-wrapper .fr-file-upload-filestack {
    display: none !important;
}

.fr-modal .fr-video-upload-layer .fr-video-upload-wrapper .fr-video-upload-filestack {
    display: none !important;
}


/* Clean, focused approach - no conflicting rules */

/* elFinder UI cleanup (from working demo) */
/* Remove network drive mount button - multiple selectors for better coverage */
.elfinder-button-netmount,
.elfinder-toolbar .elfinder-button-netmount,
.ui-widget .elfinder-button-netmount,
.elfinder .elfinder-button-netmount,
button[title*="Network mount"],
button[title*="network mount"],
.elfinder-toolbar button[class*="netmount"] {
    display: none !important;
    visibility: hidden !important;
}

/* Clean up elFinder toolbar appearance */
.elfinder-toolbar {
    background: #f8f8f8 !important;
}

/* Remove search outline */
.elfinder-quicklook-navbar input {
    border: none !important;
    outline: none !important;
}

/* Video element styles for inserted videos */
.fr-element video {
    width: 600px;
    max-width: 100%;
    height: auto;
}

/* File link styles for non-image/video files
.fr-element .file-link {
    display: inline-block;
    padding: 4px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.fr-element .file-link:hover {
    background: #e0e0e0;
    text-decoration: none;
}
*/

/* ==========================================================================
   Character Counter Styles
   ========================================================================== */

.fr-counter {
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}

.fr-counter.fr-counter-exceeded {
    color: #dc3545;
    font-weight: bold;
}

/* Visually separate groups even if Froala omits .fr-separator elements */
.fr-toolbar .fr-btn-grp + .fr-btn-grp {
  border-left: 1px solid #ddd !important;
  margin-left: 8px !important;
  padding-left: 8px !important;
}
/* Do not draw a border on the first group */
.fr-toolbar .fr-btn-grp:first-child { border-left: none !important; padding-left: 0 !important; }

/* Toolbar button group spacing and dropdown caret proximity */
.fr-toolbar .fr-btn-grp { gap: 2px !important; }
/* Ensure dropdown caret button sits right next to its icon */
.fr-toolbar .fr-btn.fr-dropdown { margin-left: 0 !important; }

.fr-toolbar .fr-btn-grp {
    margin: 0 2px !important; /* Reduced from 20px to 2px for normal spacing */
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* Remove any accidental separators within a button group (we draw group borders instead) */
.fr-toolbar .fr-btn-grp .fr-separator { display: none !important; }
/* Tighten space when a caret button follows an icon in the same group */
.fr-toolbar .fr-btn-grp .fr-btn + .fr-dropdown { margin-left: 2px !important; }


/* Reduce toolbar height and button spacing */
.fr-toolbar {
    min-height: 32px !important; /* Reduced from default ~40px */
    padding: 2px 4px 6px 4px !important; /* Add bottom padding for visual separation */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.fr-toolbar .fr-btn {
    height: 28px !important; /* Reduced button height */
    width: 28px !important; /* Reduced button width */
    line-height: 26px !important; /* Adjust line height to match */
    margin: 1px !important; /* Reduced margin between buttons */
    font-size: 13px !important; /* Slightly smaller icons */
    flex-shrink: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}

/* Fix hover state alignment for toolbar buttons */
.fr-toolbar .fr-btn:hover,
.fr-toolbar .fr-btn:focus,
.fr-toolbar .fr-btn.fr-btn-hover {
    /* Ensure hover background covers the entire button area properly */
    background-position: center !important;
    background-size: 100% 100% !important;
}

/* Ensure button icons are properly centered within the button */
.fr-toolbar .fr-btn > i,
.fr-toolbar .fr-btn > svg {
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Reduce second toolbar (footer/word count) height */
.fr-second-toolbar {
    min-height: 24px !important; /* Much smaller footer */
    padding: 2px 8px !important; /* Reduced padding */
    font-size: 11px !important; /* Smaller text */
    line-height: 20px !important; /* Tighter line height */
}

/* Reduce dropdown button heights in toolbar */
.fr-toolbar .fr-btn-grp .fr-dropdown {
    height: 28px !important;
    line-height: 26px !important;
}

/* Adjust separator lines between button groups */
.fr-separator {
    height: 24px !important; /* Shorter separators */
    margin: 2px 6px !important;
    width: 1px !important;
    background: #ddd !important; /* Visible divider */
    display: inline-block !important;
    align-self: stretch !important;
}
/* Make sure separators inside flex toolbar don’t collapse */
.fr-toolbar .fr-separator { flex: 0 0 1px !important; }

/* Character count display for Orbis editors - more compact */
.charCountDiv {
    text-align: right;
    font-size: 10px !important; /* Smaller font */
    color: #666;
    margin-top: 2px !important; /* Less margin */
    padding: 2px 0 !important; /* Less padding */
    line-height: 1.2 !important; /* Tighter line height */
}

.charCountDiv.over-limit {
    color: #dc3545;
    font-weight: bold;
}

/* Make Froala's built-in counter more compact too */
.fr-counter {
    color: #999;
    font-size: 10px !important; /* Smaller font */
    margin-top: 2px !important; /* Less margin */
    padding: 2px 0 !important; /* Less padding */
    line-height: 1.2 !important; /* Tighter line height */
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Simple responsive drag-drop area - only make dashed area fit popup width */
.fr-drag-helper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Smart popup positioning - container-aware with scrollbar support */
.fr-popup {
    box-sizing: border-box !important;
    position: absolute !important;
    /* Let Froala handle its own z-index to avoid conflicts with other page elements */
    /* Width and max-width will be set dynamically by JavaScript */
    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, width 0.2s ease !important;
}

/* Scrollbar styling for popups when content is too wide */
.fr-popup {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f9f9f9;
}

.fr-popup::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fr-popup::-webkit-scrollbar-track {
    background: #f9f9f9;
    border-radius: 4px;
}

.fr-popup::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.fr-popup::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Ensure popup content can scroll horizontally when needed */
.fr-popup .fr-layer {
    box-sizing: border-box !important;
}

/* Prevent popup content from breaking layout when scrolling */
.fr-popup.fr-scrollable-popup .fr-layer {
    white-space: nowrap;
    overflow-x: auto;
}

.fr-popup.fr-scrollable-popup .fr-layer > * {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .fr-modal,
    .elfinder-modal,
    .elfinder-modal-container {
        display: none !important;
    }
}

/* ==========================================================================
   Resizable Height Plugin - Outer Container Approach
   ========================================================================== */

/* Outer resize container - this handles the resize functionality */
.froala-resize-container {
    position: relative;
    /*display: block;*/
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

/* Focused state for outer container */
.froala-resize-container:has(.fr-box.fr-focused) {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Resizable mode - applied to outer container */
.froala-resize-container.orbis-resizable-mode {
    resize: vertical !important;
    overflow: auto !important;
    min-height: 100px;
    max-height: 550px;
}

/* Height mode - applied to outer container */
.froala-resize-container.orbis-height-mode {
    /* Height is set via JavaScript - force it to stay fixed */
    box-sizing: border-box !important;
}

/* Content-based height classes (like CKEditor) - NO !important to allow resize */
/* These represent CONTENT height, total container height is calculated in JS */

.froala-resize-container.orbis-content-200 {
    /* Total height = 200px content + 32px toolbar + 24px footer + 2px borders + 8px padding = 266px */
    height: 266px;
    min-height: 266px;
}

.froala-resize-container.orbis-content-300 {
    /* Total height = 300px content + 32px toolbar + 24px footer + 2px borders + 8px padding = 366px */
    height: 366px;
    min-height: 366px;
}

.froala-resize-container.orbis-content-400 {
    /* Total height = 400px content + 32px toolbar + 24px footer + 2px borders + 8px padding = 466px */
    height: 466px;
    min-height: 466px;
}

/* fr-box should fill the outer container */
.froala-resize-container .fr-box {
    height: 100% !important;
    width: 100% !important;
    border: none !important; /* Remove border since outer container has it */
    border-radius: 0 !important; /* Remove border radius since outer container has it */
    box-shadow: none !important; /* Remove box shadow since outer container handles focus */
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Allow toolbar separator to show */
}

/* Ensure toolbar separator is visible in resizable containers */
.froala-resize-container .fr-toolbar {
    border-bottom: 1px solid #ddd !important; /* Maintain separator line */
    border-radius: 4px 4px 0 0 !important; /* Top corners only */
    padding: 2px 4px 6px 4px !important; /* Add bottom padding for visual separation */
}

/* Fix bottom corner double lines in resizable containers */
/* The issue is that both froala-resize-container and fr-box have border-radius */

/* Outer resize container should have the border radius */
.froala-resize-container {
    border-radius: 4px !important;
}

/* Inner fr-box should NOT have border radius to avoid conflicts */
.froala-resize-container .fr-box {
    border-radius: 0 !important;
    border: none !important; /* Remove border since outer container has it */
}

/* Toolbar should only have top corners if it's the first element */
.froala-resize-container .fr-toolbar {
    border-radius: 4px 4px 0 0 !important;
    border-bottom: 1px solid #ddd !important;
    padding: 2px 4px 6px 4px !important; /* Add bottom padding for visual separation */
}

/* Content elements should have no radius */
.froala-resize-container .fr-element,
.froala-resize-container .fr-wrapper {
    border-radius: 0 !important;
}

/* Add footer bar styling similar to toolbar */
.fr-second-toolbar,
.fr-counter,
.fr-status-bar {
    background: #f8f9fa !important;
    border-top: 1px solid #ddd !important;
    border-radius: 0 0 4px 4px !important;
    -webkit-border-radius: 0 0 4px 4px !important; /* Override webkit prefix */
    -moz-border-radius: 0 0 4px 4px !important;    /* Override moz prefix */
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: #6c757d !important;
}

/* Ensure footer bar is visible and properly styled */
.froala-resize-container .fr-second-toolbar,
.froala-resize-container .fr-counter,
.froala-resize-container .fr-status-bar {
    background: #f8f9fa !important;
    border: none !important;
    margin: 0 !important;
}

/* Specific fix for fr-second-toolbar border-radius conflict */
.fr-second-toolbar {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Only apply bottom corners to fr-second-toolbar in standalone editors */
.fr-box:not(.froala-resize-container .fr-box) .fr-second-toolbar:last-child {
    border-radius: 0 0 4px 4px !important;
    -webkit-border-radius: 0 0 4px 4px !important;
    -moz-border-radius: 0 0 4px 4px !important;
}

/* Style the word counter specifically */
.fr-counter {
    text-align: right !important;
    min-height: 24px !important;
    line-height: 24px !important;
}

/* ==========================================================================
   Froala Popup Input Label Fixes
   Prevent floating labels from blocking typing in URL fields
   ========================================================================== */
/* Ensure clicking anywhere focuses input; labels shouldn’t intercept clicks */
.fr-popup .fr-input-line label {
    pointer-events: none !important;
}
/* Specifically safeguard video/link insert popups */
.fr-popup .fr-video-insert-layer .fr-input-line label,
.fr-popup .fr-link-insert-layer .fr-input-line label {
    pointer-events: none !important;
}
/* Keep input above any label decorations */
.fr-popup .fr-input-line input,
.fr-popup .fr-input-line textarea {
    position: relative !important;
    z-index: 1 !important;
}


/* ==========================================================================
   Froala Popup Checkbox Alignment Fixes
   ========================================================================== */

/* Fix checkbox and label alignment in Froala popups (link insert, video insert, etc.) */
.fr-popup .fr-checkbox-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    flex-direction: row !important;
}

.fr-popup .fr-checkbox-line .fr-checkbox {
    order: 1 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    align-items: center;
    position: relative;
    gap: 6px;
}

.fr-popup .fr-checkbox-line label {
    order: 2 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    cursor: pointer !important;
    padding: 0 !important;
}

/* Specific targeting for link and video insert popups */
.fr-popup .fr-link-insert-layer .fr-checkbox-line,
.fr-popup .fr-video-insert-layer .fr-checkbox-line,
.fr-popup .fr-video-upload-layer .fr-checkbox-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
}

.fr-popup .fr-video-upload-layer .fr-checkbox-line label,
.fr-popup .fr-video-insert-layer .fr-checkbox-line label {
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: baseline !important;
}

.fr-popup .fr-checkbox {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important; /* Prevent checkbox from shrinking */
    margin: 0 !important; /* Ensure no extra margin on checkbox */
    overflow: visible !important; /* Ensure content stays within bounds */
    line-height: 1 !important;
}

/* Ensure the actual input checkbox element is properly positioned */
.fr-popup .fr-checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important; /* Hide the default checkbox */
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 1 !important;
    inset: 0 !important;
}

/* Style the SVG checkmark container span */
.fr-popup .fr-checkbox > span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    pointer-events: none !important;
    aspect-ratio: 1 / 1 !important;
}

/* Style the SVG checkmark when checkbox is checked */
.fr-popup .fr-checkbox input[type="checkbox"]:checked + span {
    background-color: #1e88e5 !important;
    border-color: #1e88e5 !important;
}

/* Ensure SVG checkmark is properly contained */
.fr-popup .fr-checkbox > span svg {
    width: 10px !important;
    height: 10px !important;
    display: block !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* Show SVG checkmark when checkbox is checked */
.fr-popup .fr-checkbox input[type="checkbox"]:checked + span svg {
    opacity: 1 !important;
}

/* Additional containment rules to prevent overflow */
.fr-popup .fr-checkbox-line {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure label text is properly positioned next to checkbox */
.fr-popup .fr-checkbox-line label {
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Fix for video insert popup specifically */
.fr-popup[data-name="video.insert"] .fr-checkbox-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    min-height: 40px !important;
}

.fr-popup[data-name="video.insert"] .fr-checkbox {
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
}

/* High specificity override for stubborn link insert checkboxes */
.fr-popup.fr-desktop .fr-checkbox-line,
.fr-popup.fr-active .fr-checkbox-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-direction: row !important;
}

.fr-popup.fr-desktop .fr-checkbox-line label,
.fr-popup.fr-active .fr-checkbox-line label {
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    order: 2 !important; /* Ensure label comes after checkbox */
}

.fr-popup.fr-desktop.orbis-froala-link-insert-popup .fr-checkbox-line label,
.fr-popup.fr-active.orbis-froala-link-insert-popup .fr-checkbox-line label {
    padding: 0 0 0 8px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.fr-popup.fr-desktop.orbis-froala-video-insert-popup .fr-checkbox-line label,
.fr-popup.fr-active.orbis-froala-video-insert-popup .fr-checkbox-line label {
    padding: 0 0 0 8px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.fr-popup.fr-desktop .fr-checkbox,
.fr-popup.fr-active .fr-checkbox {
    order: 1 !important; /* Ensure checkbox comes first */
    margin: 0 !important;
    flex-shrink: 0 !important;
}


/* Create visual separation between content and footer */
.fr-element {
    border-bottom: 1px solid #ddd !important;
}

/* Alternative approach: Force bottom corners on the last visible element */
.froala-resize-container > *:last-child,
.fr-box > *:last-child {
    border-radius: 0 0 4px 4px !important;
}

/* Ensure the footer/status bar gets the bottom corners */
.fr-second-toolbar:last-child,
.fr-counter:last-child,
.fr-status-bar:last-child {
    border-radius: 0 0 4px 4px !important;
}

/* For resizable containers, the outer container should handle corners */
.froala-resize-container .fr-second-toolbar:last-child,
.froala-resize-container .fr-counter:last-child,
.froala-resize-container .fr-status-bar:last-child {
    border-radius: 0 !important; /* Let outer container handle corners */
}

/* Force the outer container to have proper corners and hide overflow */
.froala-resize-container {
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
}

.froala-resize-container:not(.orbis-resizable-mode) {
    overflow: visible !important;
}

/* Remove any conflicting borders from inner elements */
.froala-resize-container .fr-box,
.froala-resize-container .fr-wrapper,
.froala-resize-container .fr-element {
    border: none !important;
    border-radius: 0 !important;
}

/* Ensure fr-wrapper fills available space and shows scrollbars when needed */
.froala-resize-container .fr-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    height: auto !important; /* Let it flex instead of fixed height */
    padding: 0 !important; /* Remove any extra padding */
}

/* Ensure bottom toolbar is visible and compact */
.froala-resize-container .fr-second-toolbar {
    display: block !important;
    position: relative !important; /* Not absolute */
    bottom: auto !important;
    z-index: auto !important;
    min-height: 24px !important; /* Compact height */
    padding: 2px 8px !important; /* Minimal padding */
}

/* Make the editable content area more compact */
.froala-resize-container .fr-element {
    padding: 8px 12px !important; /* Reduced from default padding */
    margin: 0 !important; /* Remove any margins */
}

/* Custom resize handle that looks like native browser handle */
.froala-resize-container.orbis-resizable-mode::after {
    content: '';
    position: absolute;
    bottom: 1px; /* Account for border */
    right: 1px; /* Account for border */
    width: 14px;
    height: 14px;
    z-index: 1000; /* Ensure it's above Froala editor */
    cursor: nw-resize;
    pointer-events: none; /* Don't interfere with actual resize */

    /* Create diagonal grip lines pattern like native browser handle (long to short) */
    background-image: /* Third set of diagonal lines (shortest) */ linear-gradient(315deg, transparent 0px, transparent 10px, #aaa 10px, #aaa 11px, transparent 11px, transparent 13px),
        /* Second set of diagonal lines (medium) */ linear-gradient(315deg, transparent 0px, transparent 6px, #aaa 6px, #aaa 7px, transparent 7px, transparent 9px),
        /* First set of diagonal lines (longest) */ linear-gradient(315deg, transparent 0px, transparent 2px, #aaa 2px, #aaa 3px, transparent 3px, transparent 5px);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* Hide native webkit resizer since we're using custom one */
.froala-resize-container.orbis-resizable-mode::-webkit-resizer {
    display: none;
}

#fr-logo>svg {
    margin: 10px 0 !important;
}

/* ==========================================================================
   Video (figure.media) sizing and alignment to mirror images
   ========================================================================== */
/* Keep YouTube iframes at their intrinsic width (don’t stretch to container) */
.fr-element figure.media > .fr-video iframe,
.fr-view    figure.media > .fr-video iframe {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Make the video wrapper alignable like images */
.fr-element figure.media > .fr-video,
.fr-view    figure.media > .fr-video {
    display: inline-block !important;
}

/* Center alignment - using correct video classes */
.fr-element figure.media > .fr-video.fr-fvc,
.fr-view    figure.media > .fr-video.fr-fvc,
.fr-element figure.media > .fr-video.fr-dvi:not(.fr-fvl):not(.fr-fvr),
.fr-view    figure.media > .fr-video.fr-dvi:not(.fr-fvl):not(.fr-fvr),
.fr-element figure.media > .fr-video.fr-dvd:not(.fr-fvl):not(.fr-fvr),
.fr-view    figure.media > .fr-video.fr-dvd:not(.fr-fvl):not(.fr-fvr) {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}

/* Left alignment - using correct video classes */
.fr-element figure.media > .fr-video.fr-fvl,
.fr-view    figure.media > .fr-video.fr-fvl {
    float: left !important;
    margin: 0.25em 1em 0.25em 0 !important;
}

/* Right alignment - using correct video classes */
.fr-element figure.media > .fr-video.fr-fvr,
.fr-view    figure.media > .fr-video.fr-fvr {
    float: right !important;
    margin: 0.25em 0 0.25em 1em !important;
}

/* Clear floats inside figure for stable layout */
.fr-element figure.media::after,
.fr-view    figure.media::after {
    content: "";
    display: table;
    clear: both;
}

.fr-toolbar .fr-command.fr-btn.fr-dropdown:after {
    right: 12px !important;
}

.fr-toolbar .fr-tabs .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-popup .fr-tabs .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path {
    fill: #0098f7 !important;
}

/* ==========================================================================
   elFinder Dialog Close Button Visibility Fixes
   ========================================================================== */

/* Make elFinder dialog close buttons always visible */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure close button is visible on hover and focus */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
    opacity: 1 !important;
    background-color: #f0f0f0 !important;
}

/* Make the X darker on hover */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover .ui-icon:before,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus .ui-icon:before {
    color: #000 !important;
}

/* Make sure the close icon (X) is visible and black */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    opacity: 1 !important;
    visibility: visible !important;
    /* Override jQuery UI sprite with a black X */
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
}

/* Add a black X character as content */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon:before {
    content: "×" !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
}

/* Specific styling for elFinder upload dialogs */
.elfinder-upload-dialog-wrapper .ui-dialog-titlebar-close {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
}

.elfinder-upload-dialog-wrapper .ui-dialog-titlebar-close:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: #999 !important;
}

/* ========================================
   elFinder List View Column Header Fixes
   ======================================== */

/* Fix column headers in list view - prevent wrapping and ensure proper spacing */
.elfinder-cwd-view-list .elfinder-cwd-view-th {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 4px 8px !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    height: 24px !important;          /* Fixed height to match content rows */
    min-height: 24px !important;
    max-height: 24px !important;      /* Prevent expansion beyond fixed height */
}

/* Ensure header row has consistent height */
.elfinder-cwd-view-list .elfinder-cwd-view-thead {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ddd !important;
}

/* Fix specific column widths to prevent wrapping */
.elfinder-cwd-view-list .elfinder-cwd-view-th.elfinder-cwd-view-th-name {
    min-width: 150px !important;
    width: auto !important;
}

.elfinder-cwd-view-list .elfinder-cwd-view-th.elfinder-cwd-view-th-date {
    min-width: 120px !important;
    width: 140px !important;
}

.elfinder-cwd-view-list .elfinder-cwd-view-th.elfinder-cwd-view-th-size {
    min-width: 80px !important;
    width: 100px !important;
    text-align: right !important;
}

.elfinder-cwd-view-list .elfinder-cwd-view-th.elfinder-cwd-view-th-kind {
    min-width: 80px !important;
    width: 100px !important;
}

/* Fix header text styling - force single line like content rows */
.elfinder-cwd-view-list .elfinder-cwd-view-th span {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 20px) !important;  /* Leave space for sort arrow */
    line-height: 20px !important;            /* Match content row line height */
    height: 20px !important;                 /* Fixed height for text */
}

/* Ensure sort arrows don't cause wrapping */
.elfinder-cwd-view-list .elfinder-cwd-view-th .ui-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
}

/* Option: Disable column resizing to prevent header wrapping */
.elfinder-cwd-view-list .elfinder-cwd-view-th {
    resize: none !important;                    /* Disable CSS resize */
}

/* Hide column resize handles/cursors */
.elfinder-cwd-view-list .elfinder-cwd-view-th:hover {
    cursor: default !important;                /* Remove resize cursor */
}

/* Disable jQuery UI resizable if applied */
.elfinder-cwd-view-list .ui-resizable-handle {
    display: none !important;                  /* Hide resize handles */
}

/* Alternative: Make columns non-resizable by removing resize cursor and interactions */
.elfinder-cwd-view-list .elfinder-cwd-view-th {
    user-select: none !important;              /* Prevent text selection during drag */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Make sure nothing globally collapses images/handles in dialogs */
/*.elfinder-dialog img { max-width: 100%; height: auto; width: auto; }   normal */
.elfinder-resize-handle.ui-resizable:not(.ui-draggable) { width: auto !important; }  /* guardrail */

/* ==========================================================================
   elFinder Upload Dialog - Hide "Select folder" Button
   ========================================================================== */

/* Hide "Select folder" button in upload dialog (CSS fallback if JS doesn't load) */
/* Target the folder selection button by various selectors */
.elfinder-upload-dialog-wrapper .elfinder-upload-dirselect,
.elfinder-upload-dialog .elfinder-upload-dirselect,
.ui-dialog .elfinder-upload-dirselect,
.elfinder .elfinder-upload-dirselect,
.elfinder-dialog-upload .elfinder-upload-dirselect {
    display: none !important;
    visibility: hidden !important;
}

/* Hide folder upload input elements */
input[type="file"][webkitdirectory],
input[type="file"][directory],
input[type="file"][mozdirectory] {
    display: none !important;
}

/* Hide any button with folder-related text or attributes */
.elfinder-upload-dialog button[title*="folder" i],
.elfinder-upload-dialog button[title*="Folder" i],
.ui-dialog-buttonpane button[title*="folder" i],
.ui-dialog-buttonpane button[title*="Folder" i] {
    display: none !important;
}

/* Ensure the upload dialog layout still looks good with one button */
.elfinder-upload-dialog .ui-dialog-buttonpane {
    text-align: center !important;
}

.elfinder-upload-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none !important;
    text-align: center !important;
}

/* Visual indicator that folder upload is disabled (optional) */
.elfinder-upload-dropbox::before {
    /* You can add a visual indicator here if needed */
}

/* Ensure single file upload button is centered */
.elfinder-upload-dialog .ui-dialog-buttonpane button {
    margin: 0 auto !important;
}

/* Additional specific targeting for folder button based on dev tools inspection */
/* Target the wrapper div that contains the folder button */
.elfinder-dialog-upload .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.elfinder-tabstop.elfinder-focus[tabindex="-1"]:last-child,
.elfinder-upload-dialog-wrapper .ui-button[tabindex="-1"]:last-child {
    /* Will be removed by JavaScript - this is a fallback */
}

/* Hide buttons containing "Select folder" text via attribute selector */
.ui-dialog .ui-button[aria-label*="folder" i],
.ui-dialog .ui-button[aria-label*="Folder" i],
.elfinder-dialog-upload .ui-button[aria-label*="folder" i] {
    display: none !important;
}

/* Target buttons by their position if they contain folder-related content */
.elfinder-upload-dialog-or ~ .ui-button:last-of-type,
.elfinder-dialog-upload .elfinder-upload-dialog-or ~ .ui-button:last-of-type {
    /* This targets the last button after "or" text - handled by JS for safety */
}

/* Make header + body cells use the same model (content-box) */
.elfinder .elfinder-cwd-view-list .elfinder-cwd-head td,
.elfinder .elfinder-cwd-view-list .elfinder-cwd-table td {
    box-sizing: content-box;
}

.elfinder .elfinder-cwd-view-list .elfinder-cwd-head td,
.elfinder .elfinder-cwd-view-list .elfinder-cwd-table td {
    padding-left: 8px;
    padding-right: 8px;
    border-width: 0; /* or match the body exactly */
}

/* Ensure the list-view file area is the scroller */
.elfinder .elfinder-cwd-view-list .elfinder-cwd-wrapper { overflow: auto; }

/* Flex safety without touching grid */
.elfinder .elfinder-cwd-view-list .elfinder-cwd-wrapper,
.elfinder .elfinder-cwd-view-list .elfinder-cwd-table { min-width: 0; }

/* Stop the stuck grey-out only in list view */
.elfinder .elfinder-cwd.elfinder-cwd-view-list.ui-state-disabled,
.elfinder .elfinder-cwd.elfinder-cwd-view-list.ui-selectable-disabled {
    opacity: 1 !important;
    filter: none !important;
    -ms-filter: none !important;
    background-image: initial !important;
    pointer-events: auto !important;
}

/* If an overlay element is used in list view, hide it as a fallback */
.elfinder .elfinder-cwd-view-list .elfinder-cwd-overlay,
.elfinder .elfinder-cwd-view-list .elfinder-cwd-fade {
    display: none !important;
}