/* ══════════════════════════════════════════════════════════ */
/* ★ MICROSOFT WORD STYLE LISTS ★ */
/* ══════════════════════════════════════════════════════════ */

/* Force visibility and alignment for all lists in editor and prose */
.note-editor .note-editable ul,
.note-editable ul,
.prose ul {
    list-style-type: disc !important;
    padding-left: 2rem !important;
    margin-left: 0.5rem !important;
    margin-bottom: 1rem !important;
    list-style-position: outside !important;
    display: block !important;
}

.note-editor .note-editable ol,
.note-editable ol,
.prose ol {
    list-style-type: decimal !important;
    padding-left: 2rem !important;
    margin-left: 0.5rem !important;
    margin-bottom: 1rem !important;
    list-style-position: outside !important;
    display: block !important;
}

/* Multi-level Word-like Indentation and Markers */

/* Level 1 */
.note-editable ul, .prose ul { list-style-type: disc !important; }
.note-editable ol, .prose ol { list-style-type: decimal !important; }

/* Level 2 */
.note-editable ul ul, .note-editable ol ul,
.prose ul ul, .prose ol ul { 
    list-style-type: circle !important;
    margin-top: 0.25rem !important;
    padding-left: 1.5rem !important;
}
.note-editable ol ol, .note-editable ul ol,
.prose ol ol, .prose ul ol { 
    list-style-type: lower-alpha !important;
    margin-top: 0.25rem !important;
    padding-left: 1.5rem !important;
}

/* Level 3 */
.note-editable ul ul ul, .note-editable ol ul ul, .note-editable ul ol ul,
.prose ul ul ul, .prose ol ul ul, .prose ul ol ul { 
    list-style-type: square !important;
    padding-left: 1.5rem !important;
}
.note-editable ol ol ol, .note-editable ul ol ol, .note-editable ol ul ol,
.prose ol ol ol, .prose ul ol ol, .prose ol ul ol { 
    list-style-type: lower-roman !important;
    padding-left: 1.5rem !important;
}

/* List Item Alignment (Hanging Indent) */
.note-editable li, .prose li {
    display: list-item !important;
    margin-bottom: 0.25rem !important;
    padding-left: 0.25rem !important;
    line-height: 1.6 !important;
}

/* Custom Library Applied Styles (Maintain Indent) */
.note-editable ul.list-library-applied,
.note-editable ol.list-library-applied,
.prose ul.list-library-applied,
.prose ol.list-library-applied {
    padding-left: 2.5rem !important;
}

/* --- Basic Custom Bullets --- */
.note-editable ul.list-library-applied.bullet-round,
.prose ul.list-library-applied.bullet-round { list-style-type: disc !important; }
.note-editable ul.list-library-applied.bullet-square,
.prose ul.list-library-applied.bullet-square { list-style-type: square !important; }
.note-editable ul.list-library-applied.bullet-star,
.prose ul.list-library-applied.bullet-star { list-style-type: "★ " !important; }
.note-editable ul.list-library-applied.bullet-dash,
.prose ul.list-library-applied.bullet-dash { list-style-type: "— " !important; }
.note-editable ul.list-library-applied.bullet-asterisk,
.prose ul.list-library-applied.bullet-asterisk { list-style-type: "∗ " !important; }
.note-editable ul.list-library-applied.bullet-arrow,
.prose ul.list-library-applied.bullet-arrow { list-style-type: "▸ " !important; }
.note-editable ul.list-library-applied.bullet-check,
.prose ul.list-library-applied.bullet-check { list-style-type: "✓ " !important; }

/* --- Multi-level Patterns --- */

/* Pattern: Standard (● ○ ■) */
.note-editable ul.multi-bullets, .prose ul.multi-bullets { list-style-type: disc !important; }
.note-editable ul.multi-bullets ul, .prose ul.multi-bullets ul { list-style-type: circle !important; }
.note-editable ul.multi-bullets ul ul, .prose ul.multi-bullets ul ul { list-style-type: square !important; }

/* Pattern: Dash & Star (— ∗ ●) */
.note-editable ul.multi-dash-star, .prose ul.multi-dash-star { list-style-type: "— " !important; }
.note-editable ul.multi-dash-star ul, .prose ul.multi-dash-star ul { list-style-type: "∗ " !important; }
.note-editable ul.multi-dash-star ul ul, .prose ul.multi-dash-star ul ul { list-style-type: disc !important; }

/* Pattern: Custom - * + o (— ∗ ┼ ◦) */
.note-editable ul.multi-dash-plus, .prose ul.multi-dash-plus { list-style-type: "— " !important; }
.note-editable ul.multi-dash-plus ul, .prose ul.multi-dash-plus ul { list-style-type: "∗ " !important; }
.note-editable ul.multi-dash-plus ul ul, .prose ul.multi-dash-plus ul ul { list-style-type: "┼ " !important; }
.note-editable ul.multi-dash-plus ul ul ul, .prose ul.multi-dash-plus ul ul ul { list-style-type: "◦ " !important; }

/* Pattern: 1. a. i. */
.note-editable ol.multi-numbers, .prose ol.multi-numbers { list-style-type: decimal !important; }
.note-editable ol.multi-numbers ol, .prose ol.multi-numbers ol { list-style-type: lower-alpha !important; }
.note-editable ol.multi-numbers ol ol, .prose ol.multi-numbers ol ol { list-style-type: lower-roman !important; }

/* Pattern: Hierarchical (1. 1.1 1.1.1) */
.note-editable ol.multi-decimal, .prose ol.multi-decimal,
.note-editable ol.multi-legal, .prose ol.multi-decimal {
    counter-reset: item;
    list-style-type: none !important;
    padding-left: 0 !important;
}
.note-editable ol.multi-decimal li, .prose ol.multi-decimal li,
.note-editable ol.multi-legal li, .prose ol.multi-decimal li {
    display: block !important;
    position: relative !important;
    padding-left: 3rem !important;
}
.note-editable ol.multi-decimal li::before, .prose ol.multi-decimal li::before {
    content: counters(item, ".") ". " !important;
    counter-increment: item !important;
    position: absolute !important;
    left: 0 !important;
    font-weight: bold !important;
    color: #0078d4 !important;
}
.note-editable ol.multi-legal li::before, .prose ol.multi-decimal li::before {
    content: counters(item, ".") " " !important;
    counter-increment: item !important;
    position: absolute !important;
    left: 0 !important;
    font-weight: bold !important;
}
.note-editable ol.multi-decimal li ol, .prose ol.multi-decimal li ol,
.note-editable ol.multi-legal li ol {
    counter-reset: item !important;
    margin-left: 0 !important;
}

/* ══════════════════════════════════════════════════════════ */
/* ★ DROPDOWN PANEL STYLES (Word-like Panels) ★ */
/* ══════════════════════════════════════════════════════════ */

.bullet-library-panel, .wrap-library-panel, .arrange-library-panel {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    min-width: 320px;
    padding: 0;
    user-select: none;
    z-index: 1050;
}

.bl-section { padding: 12px; }
.bl-section:not(:last-child) { border-bottom: 1px solid #f3f4f6; }
.bl-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.bl-grid { display: grid; gap: 8px; }
.bl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bl-grid-2 { grid-template-columns: repeat(2, 1fr); }

.bl-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.1s;
    cursor: pointer;
}
.bl-cell:hover { background-color: #f3f4f6; border-color: #d1d5db; }
.bl-cell-active { background-color: #eff6ff !important; border-color: #3b82f6 !important; }

.bl-cell-wide { flex-direction: row; padding: 10px; align-items: center; }
.bl-cell-wide .bl-label { text-align: left; padding-left: 12px; font-size: 11px; }

/* Visual Previews */
.bl-preview {
    width: 100%;
    height: 48px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 6px;
    position: relative;
}
.bl-symbol { font-size: 18px; font-weight: bold; margin-right: 8px; color: #111827; }
.bl-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bl-line { height: 3px; background: #d1d5db; border-radius: 1px; }
.bl-line-full { width: 100%; }
.bl-line-long { width: 85%; }
.bl-line-short { width: 60%; }

.bl-preview-multi { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 6px; }
.bl-multi-row { display: flex; align-items: center; width: 100%; }
.bl-symbol-sm { font-size: 11px; font-weight: bold; margin-right: 4px; width: 14px; text-align: center; }
.bl-lines-sm { flex: 1; height: 2px; background: #e5e7eb; }

.bl-label { font-size: 10px; color: #4b5563; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.bl-footer { padding: 8px; background: #f9fafb; border-top: 1px solid #f3f4f6; display: flex; flex-direction: column; }
.bl-footer-link { font-size: 11px; color: #2563eb; text-decoration: none !important; padding: 4px 8px; border-radius: 3px; }
.bl-footer-link:hover { background: #eff6ff; }

/* ══════════════════════════════════════════════════════════ */
/* ★ IMAGE WRAPPING & POSITIONING VISUALS ★ */
/* ══════════════════════════════════════════════════════════ */

.wc-preview { width: 44px; height: 36px; background: #fff; border: 1px solid #d1d5db; position: relative; margin-bottom: 4px; padding: 3px; overflow: hidden; }
.wc-img-block { width: 12px; height: 12px; background: #3b82f6; border: 1px solid #2563eb; }
.wc-text-blocks { flex: 1; display: flex; flex-direction: column; gap: 2px; margin-left: 4px; }
.wc-line { height: 2px; background: #e5e7eb; width: 100%; }
.wc-line-long { width: 90%; }
.wc-line-short { width: 60%; }

/* Wrap Layouts */
.wc-layout-wrap-left { display: flex; align-items: flex-start; }
.wc-layout-wrap-right { display: flex; align-items: flex-start; }
.wc-layout-wrap-right .wc-text-blocks { margin-left: 0; margin-right: 4px; }

.wc-layout-behind { position: relative; }
.wc-img-bg { position: absolute; top: 6px; left: 8px; width: 24px; height: 20px; background: #dbeafe; opacity: 0.6; border: 1px dashed #3b82f6; }

/* Positioning */
.wc-pos-preview { width: 44px; height: 36px; background: #f9fafb; border: 1px solid #e5e7eb; position: relative; margin-bottom: 4px; }
.wc-pos-img { position: absolute; width: 10px; height: 10px; background: #3b82f6; border-radius: 1px; }
.wc-pos-tl { top: 4px; left: 4px; }
.wc-pos-tr { top: 4px; right: 4px; }
.wc-pos-c { top: 13px; left: 17px; }
.wc-pos-bc { bottom: 4px; left: 17px; }
.wc-pos-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; }
.wc-pos-dots span { width: 4px; height: 4px; background: #e5e7eb; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════ */
/* ★ ARRANGE COLUMNS VISUALS ★ */
/* ══════════════════════════════════════════════════════════ */

.ac-preview { width: 50px; height: 36px; background: #fff; border: 1px solid #d1d5db; display: flex; gap: 2px; padding: 3px; margin-bottom: 4px; align-items: center; justify-content: center; }
.ac-rect { flex: 1; height: 100%; background: #93c5fd; border: 1px solid #3b82f6; border-radius: 1px; }
.ac-rect-tall { height: 100%; }
.ac-rect-wide { flex: 2; }
.ac-preview-auto { flex-wrap: wrap; }
.ac-preview-auto .ac-rect { width: 12px; flex: none; height: 12px; }

.ac-rect-labeled { position: relative; }
.ac-rect-caption { position: absolute; bottom: 1px; left: 1px; right: 1px; height: 3px; background: #fff; opacity: 0.8; }

.ac-preview-ungroup { position: relative; border-style: dashed; }
.ac-preview-ungroup .ac-rect { position: absolute; width: 14px; height: 18px; }

/* ══════════════════════════════════════════════════════════ */
/* ★ ACTUAL EDITOR CONTENT LAYOUTS ★ */
/* ══════════════════════════════════════════════════════════ */

.note-editable hr.full-hr, .prose hr.full-hr {
    border: 0;
    border-top: 1px solid #334155;
    margin: 2rem 0;
    width: 100%;
    display: block;
    clear: both;
}

.note-editable hr.dot-hr, .prose hr.dot-hr {
    border: 0;
    border-top: 2px dotted #334155;
    margin: 1.5rem 0;
    width: 100%;
}

.note-editable hr.single-hr, .prose hr.single-hr {
    border: 0;
    border-top: 1px solid #94a3b8;
    margin: 1.5rem 0;
    width: 100%;
}

.note-editable hr.double-hr, .prose hr.double-hr {
    border: 0;
    border-top: 3px double #334155;
    margin: 1.5rem 0;
    width: 100%;
}

.note-editable .inline-image-group, .prose .inline-image-group {
    display: grid;
    gap: 10px;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    width: 100%;
    clear: both;
}

.note-editable .inline-image-group.has-gap, .prose .inline-image-group.has-gap { gap: 20px; }

.note-editable .inline-image-group.layout-auto, .prose .inline-image-group.layout-auto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.note-editable .inline-image-group.columns-1, .prose .inline-image-group.columns-1 { grid-template-columns: repeat(1, 1fr); }
.note-editable .inline-image-group.columns-2, .prose .inline-image-group.columns-2 { grid-template-columns: repeat(2, 1fr); }
.note-editable .inline-image-group.columns-3, .prose .inline-image-group.columns-3 { grid-template-columns: repeat(3, 1fr); }
.note-editable .inline-image-group.columns-4, .prose .inline-image-group.columns-4 { grid-template-columns: repeat(4, 1fr); }
.note-editable .inline-image-group.columns-5, .prose .inline-image-group.columns-5 { grid-template-columns: repeat(5, 1fr); }
.note-editable .inline-image-group.columns-6, .prose .inline-image-group.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* --- Partner Layout Specific Styles --- */
.note-editable .partner-layout, .prose .partner-layout {
    gap: 15px !important;
}

.note-editable .partner-layout figure, .prose .partner-layout figure {
    border: 1px solid #e2e8f0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    align-items: center !important;
    text-align: center !important;
}

.note-editable .partner-layout figure h3, .prose .partner-layout figure h3 {
    font-size: 0.95rem !important;
    margin-bottom: 5px !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.note-editable .partner-layout img, .prose .partner-layout img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto 12px auto !important;
    border-radius: 0 !important;
}

.note-editable .partner-item, .prose .partner-item {
    position: relative !important;
    padding: 15px !important;
}

.note-editable .media-container, .prose .media-container {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* --- Item Toolbar --- */
.item-actions {
    display: none !important;
}

.note-editable .item-actions {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    display: none !important;
    gap: 4px !important;
    z-index: 50 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 4px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e2e8f0 !important;
    flex-direction: row !important;
}

.note-editable .media-container:hover .item-actions,
.note-editable .media-container.actions-visible .item-actions {
    display: flex !important;
}

.note-editable .action-btn {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-size: 0.85rem !important;
    border: none !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.note-editable .action-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.1);
}

.note-editable .action-btn.btn-replace {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.note-editable .action-btn.btn-replace:hover {
    background: #bfdbfe !important;
}

.note-editable .action-btn.btn-link {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.note-editable .action-btn.btn-link:hover {
    background: #dcfce7 !important;
}

.note-editable .action-btn.btn-delete {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.note-editable .action-btn.btn-delete:hover {
    background: #fecaca !important;
}

.logo-placeholder {
    display: none !important;
}

.note-editable .logo-placeholder, .prose .logo-placeholder {
    width: 100% !important;
    height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 6px !important;
    color: #64748b !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-bottom: 12px !important;
}

.note-editable .logo-placeholder:hover, .prose .logo-placeholder:hover {
    background: #f1f5f9 !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.note-editable .logo-placeholder i, .prose .logo-placeholder i {
    font-size: 1.2rem !important;
    margin-bottom: 4px !important;
}

.note-editable img.partner-logo, .prose img.partner-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
}

.note-editable .inline-image-group figure h3, .prose .inline-image-group figure h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

.note-editable .inline-image-group figure, .prose .inline-image-group figure { 
    margin: 0; 
    position: relative; 
    display: flex;
    flex-direction: column;
}

.note-editable .inline-image-group img, .prose .inline-image-group img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important;
    margin: 0 !important; 
    display: block; 
    border-radius: 4px;
}

.note-editable .inline-image-group figcaption, .prose .inline-image-group figcaption {
    font-size: 0.85rem;
    color: #475569;
    text-align: center;
    padding: 6px 8px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    line-height: 1.5;
    flex-grow: 1;
}

/* Image Alignment (relative to paragraph) */
.note-editable img.align-left, .prose img.align-left {
    float: left !important;
    margin-right: 16px !important;
    margin-bottom: 10px !important;
    max-width: 50% !important;
    clear: left !important;
    display: block !important;
}
.note-editable img.align-right, .prose img.align-right {
    float: right !important;
    margin-left: 16px !important;
    margin-bottom: 10px !important;
    max-width: 50% !important;
    clear: right !important;
    display: block !important;
}
.note-editable img.align-center, .prose img.align-center {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    clear: both !important;
}
.note-editable img.align-above, .prose img.align-above {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    clear: both !important;
}
.note-editable img.align-below, .prose img.align-below {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    clear: both !important;
}

/* Wrapping Behaviors */
.note-editable img.wrap-none, .prose img.wrap-none { display: block; float: none; margin: 1em auto; }
.note-editable img.wrap-before, .prose img.wrap-before { float: left; margin-right: 12px; margin-bottom: 8px; max-width: 50%; padding: 4px; }
.note-editable img.wrap-after, .prose img.wrap-after { float: right; margin-left: 12px; margin-bottom: 8px; max-width: 50%; padding: 4px; }
.note-editable img.wrap-behind, .prose img.wrap-behind { position: absolute; z-index: -1; opacity: 0.8; pointer-events: none; }

/* Positioning Behaviors (When floating/wrapping) */
.note-editable img.pos-top-left, .prose img.pos-top-left { float: left; clear: left; margin-right: 12px; margin-bottom: 8px; padding: 4px; }
.note-editable img.pos-top-right, .prose img.pos-top-right { float: right; clear: right; margin-left: 12px; margin-bottom: 8px; padding: 4px; }
.note-editable img.pos-center, .prose img.pos-center { display: block; margin-left: auto; margin-right: auto; float: none; padding: 4px; }
.note-editable img.pos-bottom-center, .prose img.pos-bottom-center { display: block; margin: 2em auto 0; float: none; padding: 4px; }

/* Target standard Summernote float styles as well */
.note-editable img[style*="float:left"], 
.note-editable img[style*="float: left"],
.prose img[style*="float:left"],
.prose img[style*="float: left"] {
    margin-right: 12px !important;
    margin-bottom: 8px !important;
    padding: 4px !important;
}

.note-editable img[style*="float:right"], 
.note-editable img[style*="float: right"],
.prose img[style*="float:right"],
.prose img[style*="float: right"] {
    margin-left: 12px !important;
    margin-bottom: 8px !important;
    padding: 4px !important;
}

/* ══════════════════════════════════════════════════════════ */
/* ★ TOOLBAR & UI TWEAKS ★ */
/* ══════════════════════════════════════════════════════════ */

/* Fix for FontAwesome icons in Summernote toolbar */
.note-editor .note-btn i.fas,
.note-editor .note-btn i.far,
.note-editor .note-btn i.fab,
.note-editor .note-btn span.fas,
.note-editor .note-btn span.far,
.note-editor .note-btn span.fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", sans-san !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.note-toolbar {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 6px !important;
}

.note-btn:not(.note-color-btn) {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #475569 !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}

.note-btn:not(.note-color-btn):hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.note-btn:not(.note-color-btn).active {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

.note-dropdown-menu {
    border-radius: 6px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
}

.note-current-fontname {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Font Dropdown Faces */
.note-dropdown-fontname [data-value="Dangrek"] { font-family: 'Dangrek' !important; }
.note-dropdown-fontname [data-value="Hanuman"] { font-family: 'Hanuman' !important; }
.note-dropdown-fontname [data-value="KhmerOS_battambang"] { font-family: 'KhmerOS_battambang' !important; }
.note-dropdown-fontname [data-value="KhmerOS_bokor"] { font-family: 'KhmerOS_bokor' !important; }
.note-dropdown-fontname [data-value="KhmerOS_freehand"] { font-family: 'KhmerOS_freehand' !important; }
.note-dropdown-fontname [data-value="KhmerOS_muollight"] { font-family: 'KhmerOS_muollight' !important; }
.note-dropdown-fontname [data-value="KhmerOS_muolpali"] { font-family: 'KhmerOS_muolpali' !important; }
.note-dropdown-fontname [data-value="KhmerOSNew-Regular"] { font-family: 'KhmerOSNew-Regular' !important; }
.note-dropdown-fontname [data-value="Suwannaphum"] { font-family: 'Suwannaphum' !important; }
.note-dropdown-fontname [data-value="VC-Bold"] { font-family: 'VC Bold' !important; }
.note-dropdown-fontname [data-value="VC-Regular"] { font-family: 'VC Regular' !important; }
.note-current-fontname [data-value="VC-Light"] { font-family: 'VC Light' !important; }

/* ══════════════════════════════════════════════════════════ */
/* ★ TABLE STYLING ★ */
/* ══════════════════════════════════════════════════════════ */

.note-editable table, .prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1rem !important;
    border: 1px solid #e2e8f0 !important;
}

.note-editable table td, .note-editable table th,
.prose table td, .prose table th {
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    min-width: 25px !important;
}

.note-editable table th, .prose table th {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.note-editable table tr:nth-child(even), .prose table tr:nth-child(even) {
    background-color: #f1f5f9 !important;
}

/* Remove long spaces between paragraphs in editor and prose */
.note-editor .note-editable p,
.prose p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
}

/* ══════════════════════════════════════════════════════════ */
/* ★ COLUMN LAYOUT GRID STYLES ★ */
/* ══════════════════════════════════════════════════════════ */

.note-editable .col-layout-grid, .prose .col-layout-grid {
    display: grid !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

.note-editable .col-layout-grid.cols-2, .prose .col-layout-grid.cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
.note-editable .col-layout-grid.cols-3, .prose .col-layout-grid.cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; }
.note-editable .col-layout-grid.cols-4, .prose .col-layout-grid.cols-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
.note-editable .col-layout-grid.cols-5, .prose .col-layout-grid.cols-5 { grid-template-columns: repeat(5, 1fr) !important; gap: 0.75rem !important; }
.note-editable .col-layout-grid.cols-6, .prose .col-layout-grid.cols-6 { grid-template-columns: repeat(6, 1fr) !important; gap: 0.5rem !important; }

.note-editable .col-img-text-item, .prose .col-img-text-item {
    position: relative !important;
    display: flex !important;
}

.note-editable .col-img-text-item.align-left, .prose .col-img-text-item.align-left {
    flex-direction: row !important;
    align-items: flex-start !important;
}

.note-editable .col-img-text-item.align-right, .prose .col-img-text-item.align-right {
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
}

.note-editable .col-img-text-item.align-top, .prose .col-img-text-item.align-top {
    flex-direction: column !important;
    align-items: stretch !important;
}

.note-editable .col-img-text-item .media-container, .prose .col-img-text-item .media-container {
    position: relative !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.note-editable .col-img-text-item.align-left .media-container,
.note-editable .col-img-text-item.align-right .media-container,
.prose .col-img-text-item.align-left .media-container,
.prose .col-img-text-item.align-right .media-container {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box !important;
}

.note-editable .col-img-text-item.align-top .media-container,
.prose .col-img-text-item.align-top .media-container {
    flex: none !important;
    width: 100% !important;
}

.note-editable .col-img-text-item.align-left .text-container,
.note-editable .col-img-text-item.align-right .text-container,
.prose .col-img-text-item.align-left .text-container,
.prose .col-img-text-item.align-right .text-container {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 0.75rem !important;
    word-break: break-word !important;
}

.note-editable .col-img-text-item.align-top .text-container,
.prose .col-img-text-item.align-top .text-container {
    flex: none !important;
    width: 100% !important;
}

.note-editable .col-img-text-item.size-sm.align-left .media-container,
.note-editable .col-img-text-item.size-sm.align-right .media-container,
.prose .col-img-text-item.size-sm.align-left .media-container,
.prose .col-img-text-item.size-sm.align-right .media-container {
    flex: 0 0 30% !important;
    width: 30% !important;
    box-sizing: border-box !important;
}
.note-editable .col-img-text-item.size-sm.align-left .text-container,
.note-editable .col-img-text-item.size-sm.align-right .text-container,
.prose .col-img-text-item.size-sm.align-left .text-container,
.prose .col-img-text-item.size-sm.align-right .text-container {
    flex: 0 0 70% !important;
    width: 70% !important;
    box-sizing: border-box !important;
    padding: 0 0.75rem !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

/* Medium Image Ratio: 50% Image / 50% Paragraph */
.note-editable .col-img-text-item.size-md.align-left .media-container,
.note-editable .col-img-text-item.size-md.align-right .media-container,
.prose .col-img-text-item.size-md.align-left .media-container,
.prose .col-img-text-item.size-md.align-right .media-container {
    flex: 0 0 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
}
.note-editable .col-img-text-item.size-md.align-left .text-container,
.note-editable .col-img-text-item.size-md.align-right .text-container,
.prose .col-img-text-item.size-md.align-left .text-container,
.prose .col-img-text-item.size-md.align-right .text-container {
    flex: 0 0 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding: 0 0.75rem !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

/* Large Image Ratio: 70% Image / 30% Paragraph */
.note-editable .col-img-text-item.size-lg.align-left .media-container,
.note-editable .col-img-text-item.size-lg.align-right .media-container,
.prose .col-img-text-item.size-lg.align-left .media-container,
.prose .col-img-text-item.size-lg.align-right .media-container {
    flex: 0 0 70% !important;
    width: 70% !important;
    box-sizing: border-box !important;
}
.note-editable .col-img-text-item.size-lg.align-left .text-container,
.note-editable .col-img-text-item.size-lg.align-right .text-container,
.prose .col-img-text-item.size-lg.align-left .text-container,
.prose .col-img-text-item.size-lg.align-right .text-container {
    flex: 0 0 30% !important;
    width: 30% !important;
    box-sizing: border-box !important;
    padding: 0 0.75rem !important;
    overflow: hidden !important;
    word-break: break-word !important;
}