/**
 * DokuWiki Discussion UX Enhancement - CSS Overlay
 *
 * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author  Wolfgang van der Stille
 * @version 2026-01-11j
 *
 * This overlay provides:
 * - CSS Variables for theming
 * - Read/Unread visual indicators
 * - One-liner collapsed view enhancements
 * - Thread action button styling
 */

/* ==========================================================================
   TOC (Inhaltsverzeichnis) - Text left, arrow right
   ========================================================================== */

/* TOC header: use flexbox for layout */
#dw__toc h3.toggle,
.dokuwiki #dw__toc h3.toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Move the +/- indicator to the right */
#dw__toc h3.toggle strong,
.dokuwiki #dw__toc h3.toggle strong,
.dokuwiki .toggle strong {
    float: none !important;
    order: 99 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   CSS Variables (Theme Tokens)
   ========================================================================== */

:root {
    /* Background colors */
    --dux-bg-wrapper: #f3f3f3;
    --dux-bg-comment: #ffffff;
    --dux-bg-reply: #f9f9f9;
    --dux-bg-hover: #fafafa;

    /* Border colors */
    --dux-border-light: #e5e5e5;
    --dux-border-medium: #d0d0d0;
    --dux-border-dark: #c0c0c0;

    /* Accent colors */
    --dux-accent-primary: #0078d4;
    --dux-accent-unread: #0078d4;
    --dux-accent-success: #107c10;

    /* Text colors */
    --dux-text-primary: #333333;
    --dux-text-secondary: #5f6368;
    --dux-text-muted: #888888;

    /* Spacing */
    --dux-spacing-xs: 4px;
    --dux-spacing-sm: 8px;
    --dux-spacing-md: 12px;
    --dux-spacing-lg: 16px;

    /* Border radius */
    --dux-radius-sm: 4px;
    --dux-radius-md: 6px;
    --dux-radius-lg: 8px;
}

/* ==========================================================================
   Discussion Wrapper Override - Windows 11 Grey Theme
   Override flat template's green styling
   ========================================================================== */

/* Override green CSS variables from flat template */
:root {
    --disc-green-light: #f3f3f3 !important;
    --disc-green-medium: #e8e8e8 !important;
    --disc-green-dark: #d0d0d0 !important;
    --disc-green-darker: #5f6368 !important;
}

/* Main wrapper - override gradient with solid grey, compact padding */
.comment_wrapper,
.dokuwiki .comment_wrapper,
div.dokuwiki .comment_wrapper,
.dokuwiki div.comment_wrapper {
    background: var(--dux-bg-wrapper) !important;
    background-image: none !important;
    border: 1px solid var(--dux-border-light) !important;
    border-radius: var(--dux-radius-lg) !important;
    padding: 8px !important;
}

/* Header h2 - grey instead of green */
.comment_wrapper > h2,
.dokuwiki .comment_wrapper > h2 {
    color: var(--dux-text-primary) !important;
    border-bottom-color: var(--dux-border-light) !important;
}

.comment_wrapper > h2::before,
.dokuwiki .comment_wrapper > h2::before {
    color: var(--dux-text-secondary) !important;
}

/* Comment cards - white background, compact margins */
.comment_wrapper .hentry,
.dokuwiki .comment_wrapper .hentry {
    background: var(--dux-bg-comment) !important;
    border: 1px solid var(--dux-border-light) !important;
    margin: 4px 0 !important;
    padding: 8px !important;
}

/* Reply cards - grey accent instead of green */
.comment_wrapper .hentry.reply,
.dokuwiki .comment_wrapper .hentry.reply {
    background: var(--dux-bg-reply) !important;
    border-left: 4px solid var(--dux-border-medium) !important;
}

/* Comment header - remove green gradient */
.comment_wrapper .comment_head,
.dokuwiki .comment_wrapper .comment_head {
    background: #fafafa !important;
    background-image: none !important;
}

/* Author badge - grey instead of green pill */
.comment_wrapper .comment_head span.fn,
.comment_wrapper .comment_head .vcard .fn,
.dokuwiki .comment_wrapper .comment_head span.fn,
.dokuwiki .comment_wrapper .comment_head .vcard .fn {
    color: var(--dux-text-primary) !important;
    background: #e8e8e8 !important;
    background-image: none !important;
    border: 1px solid var(--dux-border-medium) !important;
}

.comment_wrapper .comment_head span.fn::before,
.comment_wrapper .comment_head .vcard .fn::before,
.dokuwiki .comment_wrapper .comment_head span.fn::before,
.dokuwiki .comment_wrapper .comment_head .vcard .fn::before {
    color: var(--dux-text-secondary) !important;
}

/* Buttons - grey instead of green */
.comment_wrapper .button,
.comment_wrapper input.button,
.dokuwiki .comment_wrapper .button,
.dokuwiki .comment_wrapper input.button {
    background: #f5f5f5 !important;
    background-image: none !important;
    border: 1px solid var(--dux-border-medium) !important;
    color: var(--dux-text-primary) !important;
}

.comment_wrapper .button:hover,
.comment_wrapper input.button:hover,
.dokuwiki .comment_wrapper .button:hover,
.dokuwiki .comment_wrapper input.button:hover {
    background: #e8e8e8 !important;
    border-color: var(--dux-border-dark) !important;
}

/* Reply area background */
.comment_replies,
.dokuwiki .comment_replies,
div.dokuwiki .comment_replies {
    background: var(--dux-bg-reply) !important;
    border-left-color: var(--dux-border-medium) !important;
}

/* Form inputs */
.comment_wrapper input.edit,
.comment_wrapper textarea,
.dokuwiki .comment_wrapper input.edit,
.dokuwiki .comment_wrapper textarea {
    border-color: var(--dux-border-medium) !important;
}

.comment_wrapper input.edit:focus,
.comment_wrapper textarea:focus,
.dokuwiki .comment_wrapper input.edit:focus,
.dokuwiki .comment_wrapper textarea:focus {
    border-color: var(--dux-accent-primary) !important;
    outline-color: var(--dux-accent-primary) !important;
}

/* ==========================================================================
   Read/Unread Indicators
   ========================================================================== */

/* Unread comment styling */
div.dokuwiki .hentry.comment-unread {
    border-left: 3px solid var(--dux-accent-unread);
    background-color: #f8fbff;
}

div.dokuwiki .hentry.comment-unread .comment_head {
    font-weight: 600;
}

div.dokuwiki .hentry.comment-unread .comment_head .fn {
    color: var(--dux-accent-primary);
}

/* Read indicator button - stays on left side */
div.dokuwiki .dux-read-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: var(--dux-spacing-sm);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    user-select: none;
    order: 1;
}

/* Unread dot */
div.dokuwiki .dux-read-indicator.unread {
    background-color: var(--dux-accent-unread);
    color: white;
}

div.dokuwiki .dux-read-indicator.unread:hover {
    background-color: #006cc1;
    transform: scale(1.1);
}

/* Read checkmark */
div.dokuwiki .dux-read-indicator.read {
    background-color: var(--dux-border-light);
    color: var(--dux-text-secondary);
}

div.dokuwiki .dux-read-indicator.read:hover {
    background-color: var(--dux-border-medium);
}

/* ==========================================================================
   Comment Head Layout - Text left, arrows right
   ========================================================================== */

/* All comment heads use flexbox for proper layout */
div.dokuwiki .comment_head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   One-Liner Collapsed View
   ========================================================================== */

/* Collapsed comment compact styling - 2-line layout (header + excerpt) */
.dokuwiki .comment_wrapper .hentry.collapsed,
div.dokuwiki .comment_wrapper .hentry.collapsed,
.comment_wrapper .hentry.collapsed {
    padding: 6px 10px !important;
    margin: 2px 0 !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
}

.dokuwiki .comment_wrapper .hentry.collapsed:hover,
div.dokuwiki .comment_wrapper .hentry.collapsed:hover {
    background-color: #f5f5f5 !important;
}

.dokuwiki .comment_wrapper .hentry.collapsed .comment_head,
div.dokuwiki .comment_wrapper .hentry.collapsed .comment_head {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    line-height: 1.3 !important;
}

/* CRITICAL: Hide body and buttons when collapsed */
.dokuwiki .comment_wrapper .hentry.collapsed .comment_body,
.dokuwiki .comment_wrapper .hentry.collapsed .comment_buttons,
div.dokuwiki .comment_wrapper .hentry.collapsed .comment_body,
div.dokuwiki .comment_wrapper .hentry.collapsed .comment_buttons,
.comment_wrapper .hentry.collapsed .comment_body,
.comment_wrapper .hentry.collapsed .comment_buttons,
.hentry.collapsed .comment_body,
.hentry.collapsed .comment_buttons {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Toggle icon styling - MUST be visible */
.dokuwiki .comment_wrapper .comment_toggle,
div.dokuwiki .comment_wrapper .comment_toggle,
.comment_wrapper .comment_toggle,
.comment_head .comment_toggle,
span.comment_toggle {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    color: #5f6368 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.2s ease !important;
    order: 99 !important;
    background-color: #e8e8e8 !important;
    border-radius: 4px !important;
}

/* Toggle icon is set via JS textContent - no CSS :before needed */
.dokuwiki .comment_toggle:before,
div.dokuwiki .comment_toggle:before,
.comment_toggle:before,
span.comment_toggle:before {
    content: none !important;
    display: none !important;
}

.comment_toggle:hover {
    background-color: #d0d0d0 !important;
}

/* Preview text in collapsed view - on its own line */
.dokuwiki .comment_wrapper .comment_preview_text,
div.dokuwiki .comment_wrapper .comment_preview_text,
.comment_wrapper .comment_preview_text,
.comment_head .comment_preview_text,
span.comment_preview_text {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    order: 100 !important;
    flex-basis: 100% !important;
    color: #666666 !important;
    font-size: 12px !important;
    font-style: normal !important;
    margin: 2px 0 0 0 !important;
    padding-left: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.dokuwiki .hentry:not(.collapsed) .comment_preview_text,
div.dokuwiki .hentry:not(.collapsed) .comment_preview_text,
.hentry:not(.collapsed) .comment_preview_text {
    display: none !important;
}

/* Reply count badge - moved to right side before toggle */
div.dokuwiki .dux-reply-count {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 6px;
    background-color: var(--dux-border-light);
    border-radius: 10px;
    font-size: 11px;
    color: var(--dux-text-secondary);
    order: 98;
}

div.dokuwiki .dux-reply-count:before {
    content: "\21B3"; /* Reply arrow */
    margin-right: 3px;
}

/* Reply count with unread replies - highlight */
div.dokuwiki .dux-reply-count.has-unread {
    background-color: #e3f2fd;
    color: var(--dux-accent-primary);
    font-weight: 600;
    border: 1px solid var(--dux-accent-primary);
}

/* ==========================================================================
   Thread Actions
   ========================================================================== */

/* Thread controls container */
div.dokuwiki #discussion__thread_controls {
    display: flex;
    gap: var(--dux-spacing-sm);
    margin-bottom: var(--dux-spacing-md);
    padding: var(--dux-spacing-sm) 0;
    border-bottom: 1px solid var(--dux-border-light);
}

/* Mark all as read button */
div.dokuwiki .dux-mark-all-read {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--dux-spacing-xs) var(--dux-spacing-sm);
    background-color: var(--dux-bg-comment);
    border: 1px solid var(--dux-border-medium);
    border-radius: var(--dux-radius-sm);
    color: var(--dux-text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

div.dokuwiki .dux-mark-all-read:hover {
    background-color: var(--dux-bg-hover);
    border-color: var(--dux-border-dark);
}

div.dokuwiki .dux-mark-all-read:before {
    content: "\2713"; /* Checkmark */
}

/* New thread button */
div.dokuwiki .dux-new-thread {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--dux-spacing-xs) var(--dux-spacing-md);
    background-color: var(--dux-accent-primary);
    border: 1px solid var(--dux-accent-primary);
    border-radius: var(--dux-radius-sm);
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

div.dokuwiki .dux-new-thread:hover {
    background-color: #006cc1;
}

div.dokuwiki .dux-new-thread:before {
    content: "+";
    font-weight: bold;
}

/* ==========================================================================
   Indentation and Threading Visual
   ========================================================================== */

/* Thread depth indicators - compact indent */
div.dokuwiki div.comment_replies {
    position: relative;
    margin-left: 16px;
    padding-left: 8px;
    padding-top: 2px;
    border-left: 2px solid var(--dux-border-medium);
}

div.dokuwiki div.comment_replies::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    height: 20px;
    width: 10px;
    border-bottom: 2px solid var(--dux-border-medium);
    border-left: 2px solid var(--dux-border-medium);
    border-bottom-left-radius: 6px;
}

/* Nested reply styling */
div.dokuwiki div.comment_replies div.comment_replies {
    border-left-color: #e0e0e0;
}

div.dokuwiki div.comment_replies div.comment_replies div.comment_replies {
    border-left-color: #ebebeb;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus states */
div.dokuwiki .dux-read-indicator:focus,
div.dokuwiki .comment_toggle:focus,
div.dokuwiki .dux-mark-all-read:focus,
div.dokuwiki .dux-new-thread:focus {
    outline: 2px solid var(--dux-accent-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    div.dokuwiki .comment_toggle,
    div.dokuwiki .dux-read-indicator,
    div.dokuwiki .comment_replies {
        transition: none;
    }
}

/* ==========================================================================
   Reply vs New Thread UX
   ========================================================================== */

/* Form label for new thread distinction */
div.dokuwiki .dux-form-label {
    margin-bottom: var(--dux-spacing-sm);
    padding: var(--dux-spacing-xs) 0;
    border-bottom: 1px solid var(--dux-border-light);
    font-size: 14px;
}

div.dokuwiki .dux-form-label strong {
    color: var(--dux-text-primary);
}

div.dokuwiki .dux-form-label span {
    color: var(--dux-text-muted);
    font-size: 12px;
}

/* Enhanced reply button */
div.dokuwiki .comment_buttons form.discussion__reply input.button[data-dux-enhanced] {
    background: var(--dux-bg-reply) !important;
    border-color: var(--dux-accent-primary) !important;
    color: var(--dux-accent-primary) !important;
}

div.dokuwiki .comment_buttons form.discussion__reply input.button[data-dux-enhanced]:hover {
    background: #e8f4fd !important;
}

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

@media print {
    div.dokuwiki .dux-read-indicator,
    div.dokuwiki .dux-mark-all-read,
    div.dokuwiki .dux-new-thread,
    div.dokuwiki #discussion__thread_controls {
        display: none;
    }

    div.dokuwiki .hentry.collapsed .comment_body {
        display: block;
    }
}