/* v27.2 ticket stickybar cleanup */

/* Make the ticket action/sticky bar calmer and split left/right */
.ticket-sticky-clean,
.ticket-tabs,
.ticket-actions,
.ticket-detail-tabs,
.ticket-action-bar,
.sticky-ticket-actions,
.ticket-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Only the focus toggle should move right */
.ticket-focus-toggle {
    margin-left: auto !important;
    order: 99;
    white-space: nowrap;
}

/* Hide duplicate focus/show-more actions if they still exist from older templates */
.ticket-sticky-clean a[href*="focus_reactie"],
.ticket-sticky-clean a[href*="focus_bericht"],
.ticket-sticky-clean a[href*="reset_focus"],
.ticket-sticky-clean button[data-action*="reset-focus"],
.ticket-sticky-clean button[data-action*="focus-reply"],
.ticket-sticky-clean button[data-action*="focus-message"],
.ticket-sticky-clean .focus-reset,
.ticket-sticky-clean .focus-reply,
.ticket-sticky-clean .focus-message,
.ticket-sticky-clean .show-more-options,
.ticket-actions a[href*="focus_reactie"],
.ticket-actions a[href*="focus_bericht"],
.ticket-actions a[href*="reset_focus"],
.ticket-actions .focus-reset,
.ticket-actions .focus-reply,
.ticket-actions .focus-message,
.ticket-actions .show-more-options {
    display: none !important;
}

/* A focused/active content tab should not make the whole ticket stay in focus mode visually */
.ticket-sticky-clean .active:not(.ticket-focus-toggle),
.ticket-tabs .active:not(.ticket-focus-toggle),
.ticket-actions .active:not(.ticket-focus-toggle) {
    box-shadow: none;
}

/* On smaller screens keep the focus button readable */
@media (max-width: 900px) {
    .ticket-sticky-clean,
    .ticket-tabs,
    .ticket-actions,
    .ticket-detail-tabs,
    .ticket-action-bar,
    .sticky-ticket-actions,
    .ticket-header-actions {
        flex-wrap: wrap;
    }
    .ticket-focus-toggle {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center;
    }
}


/* v27.2a: keep old ticket stickybar style, but without duplicate actions */
.ticket-sticky-clean,
.ticket-tabs,
.ticket-actions,
.ticket-detail-tabs,
.ticket-action-bar,
.sticky-ticket-actions,
.ticket-header-actions {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    background: #f8fbfe;
}

/* Do not force a split card layout around ticket header */
.ticket-sticky-clean {
    border-radius: 0 0 14px 14px;
}

/* Content tabs stay left in original row style */
.ticket-sticky-clean [data-ticket-tab],
.ticket-tabs [data-ticket-tab],
.ticket-actions [data-ticket-tab],
.ticket-detail-tabs [data-ticket-tab],
.ticket-action-bar [data-ticket-tab],
.sticky-ticket-actions [data-ticket-tab] {
    order: 1;
}

/* Focus is the separator toward the right-side actions */
.ticket-sticky-clean [data-focus-toggle],
.ticket-tabs [data-focus-toggle],
.ticket-actions [data-focus-toggle],
.ticket-detail-tabs [data-focus-toggle],
.ticket-action-bar [data-focus-toggle],
.sticky-ticket-actions [data-focus-toggle],
.ticket-focus-toggle {
    order: 50;
    margin-left: auto !important;
    white-space: nowrap;
}

/* Useful actions stay right of focus */
.ticket-sticky-clean a,
.ticket-sticky-clean button,
.ticket-tabs a,
.ticket-tabs button,
.ticket-actions a,
.ticket-actions button,
.ticket-detail-tabs a,
.ticket-detail-tabs button,
.ticket-action-bar a,
.ticket-action-bar button,
.sticky-ticket-actions a,
.sticky-ticket-actions button {
    white-space: nowrap;
}

/* Hide only duplicate/noisy options */
.ticket-sticky-clean a,
.ticket-sticky-clean button,
.ticket-tabs a,
.ticket-tabs button,
.ticket-actions a,
.ticket-actions button,
.ticket-detail-tabs a,
.ticket-detail-tabs button,
.ticket-action-bar a,
.ticket-action-bar button,
.sticky-ticket-actions a,
.sticky-ticket-actions button {
    text-decoration: none;
}

/* JS also hides by text; these catch class/href leftovers */
.ticket-sticky-clean a[href*="reset_focus"],
.ticket-sticky-clean a[href*="focus_reactie"],
.ticket-sticky-clean a[href*="focus_bericht"],
.ticket-sticky-clean a[href*="show_more"],
.ticket-actions a[href*="reset_focus"],
.ticket-actions a[href*="focus_reactie"],
.ticket-actions a[href*="focus_bericht"],
.ticket-actions a[href*="show_more"],
.ticket-detail-tabs a[href*="reset_focus"],
.ticket-detail-tabs a[href*="focus_reactie"],
.ticket-detail-tabs a[href*="focus_bericht"],
.ticket-detail-tabs a[href*="show_more"],
.ticket-sticky-clean .focus-reset,
.ticket-sticky-clean .focus-reply,
.ticket-sticky-clean .focus-message,
.ticket-sticky-clean .show-more-options {
    display: none !important;
}

.ticket-section-anchor {
    scroll-margin-top: 150px;
}

@media (max-width: 1000px) {
    .ticket-sticky-clean,
    .ticket-tabs,
    .ticket-actions,
    .ticket-detail-tabs,
    .ticket-action-bar,
    .sticky-ticket-actions,
    .ticket-header-actions {
        flex-wrap: wrap !important;
    }
    .ticket-sticky-clean [data-focus-toggle],
    .ticket-tabs [data-focus-toggle],
    .ticket-actions [data-focus-toggle],
    .ticket-detail-tabs [data-focus-toggle],
    .ticket-action-bar [data-focus-toggle],
    .sticky-ticket-actions [data-focus-toggle],
    .ticket-focus-toggle {
        margin-left: 0 !important;
    }
}


/* v27.2b: restore old two-row ticket header style */
.ticket-detail-sticky-shell.ticket-sticky-clean {
    display: block !important;
    width: auto !important;
    background: rgba(255,255,255,.96) !important;
}

/* Top title row stays full width */
.ticket-detail-sticky-shell .ticket-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Only the action row is a flex toolbar */
.ticket-detail-sticky-shell .ticket-actions-row.ticket-sticky-clean,
.ticket-detail-sticky-shell .ticket-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: rgba(247,249,252,.95) !important;
}

/* Keep old ordering: tabs left, spacer, focus/actions right */
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab] {
    order: 1;
}

.ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
    order: 20;
    flex: 1 1 auto !important;
    display: block !important;
}

.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-focus-toggle] {
    order: 30;
    margin-left: 0 !important;
    white-space: nowrap;
}

.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button {
    order: 40;
}

/* Top show-more button should not return in stickybar */
#ticket-toggle-advanced-top {
    display: none !important;
}

/* Hide legacy duplicate focus buttons in case old markup is cached */
.ticket-detail-sticky-shell .ticket-actions-row a,
.ticket-detail-sticky-shell .ticket-actions-row button {
    white-space: nowrap;
}

/* Focus off means secondary/right column visible again */
body:not(.ticket-focus-active) .ticket-focus-secondary {
    display: block !important;
}

@media (max-width: 1100px) {
    .ticket-detail-sticky-shell .ticket-actions-row {
        flex-wrap: wrap !important;
    }
    .ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
        flex-basis: 100%;
        height: 0;
    }
}


/* v27.2d: logical ticket tab order and focus-safe group */
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="message"] { order: 1 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="reply"] { order: 2 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="history"] { order: 3 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="details"] { order: 4 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="task"] { order: 5 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="ai"] { order: 6 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="time"] { order: 7 !important; }

/* Small visual pause after the focus-safe communication group */
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="history"] {
    margin-right: 12px;
}

/* Keep focus button/actions at the right */
.ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
    order: 20 !important;
}
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-focus-toggle] {
    order: 30 !important;
}
.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button {
    order: 40 !important;
}


/* v27.2e: Reply/Historie selected while focus mode is active must stay visible */
body.ticket-focus-active .ticket-focus-temp-visible,
body.focus-layout-active .ticket-focus-temp-visible,
body.ticket-focus-active .ticket-focus-current,
body.focus-layout-active .ticket-focus-current,
.ticket-focus-active .ticket-focus-temp-visible,
.focus-layout-active .ticket-focus-temp-visible,
.ticket-focus-active .ticket-focus-current,
.focus-layout-active .ticket-focus-current {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* If the layout uses secondary blocks hidden in focus mode, selected one overrides it */
body.ticket-focus-active .ticket-focus-secondary.ticket-focus-temp-visible,
body.focus-layout-active .ticket-focus-secondary.ticket-focus-temp-visible,
body.ticket-focus-active .ticket-focus-secondary.ticket-focus-current,
body.focus-layout-active .ticket-focus-secondary.ticket-focus-current {
    display: block !important;
}


/* v27.2h: remove duplicated task/AI jump buttons in ticketbar */
.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button[data-target*="task"],
.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button[data-target*="taak"],
.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button[data-target*="ai"] {
    display: none !important;
}

/* Desktop: keep the old calm wide bar */
.ticket-detail-sticky-shell .ticket-actions-row {
    overflow: visible;
}

/* Tablet: wrap in a controlled way, not through the ticket title */
@media (max-width: 1100px) {
    .ticket-detail-sticky-shell .ticket-title-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ticket-detail-sticky-shell .ticket-actions-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-bottom: 8px;
    }

    .ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
        flex: 1 1 100% !important;
        height: 0;
        min-height: 0;
    }

    .ticket-detail-sticky-shell .ticket-actions-row [data-ticket-focus-toggle] {
        margin-left: 0 !important;
    }
}

/* Mobile: use a horizontal action rail so buttons stay readable */
@media (max-width: 720px) {
    .ticket-detail-sticky-shell {
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 14px !important;
    }

    .ticket-detail-sticky-shell .ticket-title-row {
        align-items: flex-start !important;
    }

    .ticket-detail-sticky-shell .ticket-actions-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding: 8px 10px !important;
        scrollbar-width: thin;
    }

    .ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
        display: none !important;
    }

    .ticket-detail-sticky-shell .ticket-actions-row a,
    .ticket-detail-sticky-shell .ticket-actions-row button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-height: 38px;
    }

    .ticket-detail-sticky-shell .ticket-actions-row [data-ticket-focus-toggle] {
        margin-left: 0 !important;
        order: 20 !important;
    }
}

/* Very small screens: slightly smaller text and padding */
@media (max-width: 430px) {
    .ticket-detail-sticky-shell .ticket-actions-row a,
    .ticket-detail-sticky-shell .ticket-actions-row button {
        font-size: 13px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* v27.2j: restored ticket detail, stable ticketbar */
.ticket-detail-sticky-shell.ticket-sticky-clean {
    display: block !important;
    width: auto !important;
    background: rgba(255,255,255,.96) !important;
}

.ticket-detail-sticky-shell .ticket-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.ticket-detail-sticky-shell .ticket-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background: rgba(247,249,252,.95) !important;
}

.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="message"] { order: 1 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="reply"] { order: 2 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="history"] { order: 3 !important; margin-right: 12px; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="details"] { order: 4 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="task"] { order: 5 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="ai"] { order: 6 !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-tab="time"] { order: 7 !important; }
.ticket-detail-sticky-shell .ticket-actions-row .nav-spacer { order: 20 !important; flex: 1 1 auto !important; }
.ticket-detail-sticky-shell .ticket-actions-row [data-ticket-focus-toggle] { order: 30 !important; white-space: nowrap; }

.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button[data-target="ticket-task-card"],
.ticket-detail-sticky-shell .ticket-actions-row .ticket-jump-button[data-target="ticket-ai-card"] {
    display: none !important;
}

/* Focus-safe communication blocks must be visible while focus mode stays on */
body.ticket-focus-active .ticket-focus-temp-visible,
body.focus-layout-active .ticket-focus-temp-visible,
body.ticket-focus-active .ticket-focus-current,
body.focus-layout-active .ticket-focus-current,
.ticket-focus-active .ticket-focus-temp-visible,
.focus-layout-active .ticket-focus-temp-visible,
.ticket-focus-active .ticket-focus-current,
.focus-layout-active .ticket-focus-current {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive ticketbar */
@media (max-width: 1100px) {
    .ticket-detail-sticky-shell .ticket-title-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .ticket-detail-sticky-shell .ticket-actions-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
        flex-basis: 100%;
        height: 0;
        min-height: 0;
    }
}
@media (max-width: 720px) {
    .ticket-detail-sticky-shell {
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 14px !important;
    }
    .ticket-detail-sticky-shell .ticket-actions-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px 10px !important;
        scrollbar-width: thin;
    }
    .ticket-detail-sticky-shell .ticket-actions-row .nav-spacer {
        display: none !important;
    }
    .ticket-detail-sticky-shell .ticket-actions-row a,
    .ticket-detail-sticky-shell .ticket-actions-row button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-height: 38px;
    }
}