/* ==========================================================================
   forum-content.css
   Styles for content generated by the forum post editor (Summernote).
   These classes are saved inside post HTML in the database, so this file
   must be loaded on every page that renders forum post content.
   ========================================================================== */

/* ------------------------------------------------------------------
   Expandable Sections
   ------------------------------------------------------------------ */

.expandable-wrapper {
    margin: 10px 0;
    border: 2px solid #4a90e2;
    border-radius: 6px;
    overflow: hidden;
    background: #2a2a2a;
}

details.forum-expandable > summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 12px;
    background: #3a3a3a;
    color: #4a90e2;
    user-select: none;
    outline: none;
    border-bottom: 2px solid #4a90e2;
    /* Override browser list-item default for <summary> */
    display: flex !important;
    list-style: none !important;
    align-items: center;
    gap: 6px;
}

/* Title span stretches to fill available space */
details.forum-expandable > summary > span:not(.exp-drag-handle) {
    flex: 1;
    text-align: left;
}

/* Remove the browser's disclosure triangle */
details.forum-expandable > summary::marker,
details.forum-expandable > summary::-webkit-details-marker {
    display: none;
    content: none;
}

/* Custom open/close arrow prepended to the title span only (not the drag handle) */
details.forum-expandable > summary > span:not(.exp-drag-handle)::before {
    content: '\25B6\00A0'; /* ▶  */
    font-size: 0.7em;
    color: #4a90e2;
    transition: transform 0.15s;
    display: inline-block;
}

details.forum-expandable[open] > summary > span:not(.exp-drag-handle)::before {
    content: '\25BC\00A0'; /* ▼  */
}

.expandable-content {
    padding: 14px;
    min-height: 40px;
    background: #2a2a2a;
    color: #e0e0e0;
}

@media screen and (max-width: 601px){
  .expandable-content{padding:8px}
}

.exp-delete-btn,
.exp-edit-btn,
.exp-add-space-btn,
.exp-drag-handle {
    display: none;
}

.note-editable .exp-delete-btn,
.note-editable .exp-edit-btn,
.note-editable .exp-add-space-btn,
.note-editable .exp-drag-handle {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}

.note-editable .exp-delete-btn {
    color: #e05555;
    font-size: 20px;
}

.note-editable .exp-edit-btn {
    color: #aaaaaa;
}

.note-editable .exp-edit-btn:hover {
    color: #4a90e2;
}

.note-editable .exp-add-space-btn {
    color: #aaaaaa;
}

.note-editable .exp-add-space-btn:hover {
    color: #4a90e2;
}

.note-editable .exp-drag-handle {
    color: #888888;
    cursor: grab;
    font-size: 18px;
    letter-spacing: -2px;
}

.note-editable .exp-drag-handle:hover {
    color: #cccccc;
}

/* Dragging state */
.note-editable .expandable-wrapper.exp-dragging {
    opacity: 0.4;
}

/* Drop indicator line */
.exp-drop-indicator {
    display: none;
}

.note-editable .exp-drop-indicator {
    display: block;
    height: 3px;
    background: #4a90e2;
    border-radius: 2px;
    margin: 2px 0;
    pointer-events: none;
}

/* Placeholder text for empty expandable sections */
.expandable-content[data-placeholder] > p:only-child > br:only-child::before,
.note-editable .expandable-content[data-placeholder] > p:only-child > br:only-child::before {
    content: attr(data-placeholder);
    color: #777;
    pointer-events: none;
    display: inline;
}

/* ------------------------------------------------------------------
   Callout Blocks
   ------------------------------------------------------------------ */

.forum-callout {
    padding: 15px;
    margin: 15px 0;
    border-left: 5px solid;
    border-radius: 4px;
}

.forum-callout strong {
    text-transform: capitalize;
    display: flex;
    align-items: center;
}

.forum-callout strong i {
    margin-right: 8px;
}

.forum-callout p {
    margin: 5px 0 0 0;
}

.callout-delete-btn {
    display: none;
}

.note-editable .callout-delete-btn {
    display: inline;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    color: #e05555;
    text-transform: none;
    flex-shrink: 0;
}

.callout-add-space-btn {
    display: none;
}

.note-editable .callout-add-space-btn {
    display: inline;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    color: rgba(0, 0, 0, 0.45);
    text-transform: none;
    flex-shrink: 0;
}

.note-editable .callout-add-space-btn:hover {
    color: rgba(0, 0, 0, 0.75);
}

.note-editable .callout-add-space-btn ~ .callout-delete-btn {
    margin-left: 0;
}

.forum-callout-info {
    background-color: #d1ecf1;
    border-left-color: #bee5eb;
    color: #0c5460;
}

.forum-callout-success {
    background-color: #d4edda;
    border-left-color: #c3e6cb;
    color: #155724;
}

.forum-callout-warning {
    background-color: #fff3cd;
    border-left-color: #ffeeba;
    color: #856404;
}

.forum-callout-danger {
    background-color: #f8d7da;
    border-left-color: #f5c6cb;
    color: #721c24;
}

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */

table.ol-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 12px 0;
}

table.ol-table th,
table.ol-table td {
    padding: 6px 10px;
    border: 1px solid #6b7686;
    vertical-align: top;
    overflow-wrap: anywhere;
}

table.ol-table th {
    background: rgba(127, 127, 127, 0.2);
    text-align: left;
    font-weight: bold;
}

/* ------------------------------------------------------------------
   Code Blocks
   ------------------------------------------------------------------ */

.ol-code-block-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 15px 0;
    border: 1px solid #3b4a5c;
    border-radius: 6px;
    overflow: hidden;
    background: #1e232b;
}

.ol-code-block {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px 14px 0;
    overflow-x: auto;
    background: #1e232b;
    color: #e6edf3;
    font-family: "Courier New", Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4;
}

.ol-code-block code {
    display: block;
    min-width: max-content;
    padding-right: 54px;
    counter-reset: ol-code-line;
}

.ol-code-block code > .ol-code-line {
    display: block;
    min-height: 1.6em;
    padding-left: 52px;
    position: relative;
    white-space: pre;
}

.ol-code-block code > .ol-code-line::before {
    position: absolute;
    left: 0;
    width: 36px;
    padding-right: 12px;
    color: #718096;
    content: counter(ol-code-line);
    counter-increment: ol-code-line;
    text-align: right;
    user-select: none;
}

.ol-code-block-wrapper {
    display: block;
    /* Stops long lines from widening ancestors (flex/grid/table/list items) */
    contain: inline-size;
}

.ol-code-block {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 600px) {
    .ol-code-block {
        font-size: 12px;
        padding: 10px 8px 10px 0;
    }

    .ol-code-block code {
        padding-right: 16px;
    }

    .ol-code-block code > .ol-code-line {
        padding-left: 40px;
    }

    .ol-code-block code > .ol-code-line::before {
        width: 28px;
        padding-right: 8px;
    }

    .ol-code-copy {
        padding: 3px 6px;
        font-size: 11px;
    }
}

.ol-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 5px 9px;
    border: 1px solid #506176;
    border-radius: 4px;
    background: #293241;
    color: #e6edf3;
    cursor: pointer;
    font-size: 12px;
}

.ol-code-copy:hover,
.ol-code-copy:focus {
    background: #364458;
    color: #fff;
}

.ol-code-delete-btn {
    display: none;
}

.note-editable .ol-code-delete-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e05555;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
}

.ol-code-edit-btn {
    display: none;
}

.note-editable .ol-code-edit-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 40px;
    z-index: 1;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9fb3c8;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
}

.note-editable .ol-code-edit-btn:hover,
.note-editable .ol-code-edit-btn:focus {
    color: #fff;
}

.ol-code-add-space-btn {
    display: none;
}

.note-editable .ol-code-add-space-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 72px;
    z-index: 1;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9fb3c8;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
}

.note-editable .ol-code-add-space-btn:hover,
.note-editable .ol-code-add-space-btn:focus {
    color: #fff;
}

.note-editable .ol-code-delete-btn:hover,
.note-editable .ol-code-delete-btn:focus {
    color: #ff7b7b;
}

.note-editable .ol-code-block {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.note-editable .ol-code-block-wrapper {
    margin: 4px 0;
}

.note-editable li.ol-code-list-item {
    display: list-item;
    padding-left: 0;
    list-style-position: outside;
    list-style-type: inherit;
}

.note-editable li.ol-code-list-item::before {
    display: none;
}

.note-editable li.ol-code-list-item .ol-code-block-wrapper {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.ol-code-block-wrapper + p:has(> br:only-child) {
    height: 4px;
    min-height: 0;
    margin: 0;
    line-height: 4px;
}

.ol-code-block-wrapper + p:not(:has(> br:only-child)) {
    margin-top: 12px;
}

.code-block-modal-dialog {
    width: min(900px, 96vw);
    max-width: 900px;
}

#codeBlockEditor {
    min-height: 360px;
    resize: vertical;
    background: #1e232b;
    color: #e6edf3;
    font-family: "Courier New", Consolas, monospace;
    line-height: 1.5;
    tab-size: 4;
}

#codeBlockModal {
    z-index: 2000 !important;
}

.code-block-modal-backdrop {
    z-index: 1999 !important;
}

/* ------------------------------------------------------------------
   Editor UI – Format Block dropdown items (Summernote toolbar)
   ------------------------------------------------------------------ */

.dropdown-style h1,
.dropdown-style h2,
.dropdown-style h3,
.dropdown-style h4,
.dropdown-style h5,
.dropdown-style h6,
.dropdown-style p,
.dropdown-style pre,
.dropdown-style blockquote {
    margin: 0;
    padding: 5px 10px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Editor UI – Callout dropdown items (Summernote toolbar)
   ------------------------------------------------------------------ */

.callout-option {
    padding: 8px 15px;
    cursor: pointer;
    margin: 2px;
}

.callout-option:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------
   Pasted content clean-up
   Text pasted from outside sources (Word, Google Docs, etc.) often
   carries inline font-size styles baked into the saved post HTML.
   Normalize inline sizes to the forum base size on small screens in
   both the editor and posted content, so nested headings cannot make
   inline-sized text unexpectedly larger in one view.
   ------------------------------------------------------------------ */

@media screen and (max-width: 775px) {
    #forumPostDetails [style*="font-size"],
    .note-editable [style*="font-size"] {
        font-size: 1rem !important;
    }
}