/* ============================================================================
   ticketdesk-neo.css - the ticket desk in Core's "neo" house style.

   neo/neo.css is a verbatim copy of Core's file (tools/sync-neo.py) and only styles what sits
   inside .cp-neo. Both layouts put .cp-neo on <body>, so its tokens (--surface, --line3, --accent,
   ...) and its form controls apply on every page. This file adds what neo.css leaves to Bootstrap:
   buttons, cards, tables, modals, dropdowns, badges, tabs, pagination, alerts, and the sidebar.

   Load order: Bootstrap, the old desk CSS, neo.css, then this file last, so equal specificity wins.
   Light theme only: support.css and the views still carry fixed colours, a .dark theme would show
   them. Never edit neo/neo.css; ticket desk additions go here.
   ============================================================================ */

/* ---------- Bootstrap variables on the neo palette ---------- */
body.cp-neo {
    --td-accent-rgb: 91, 91, 214;
    --r-control: 9px;
    --r-card: 14px;
    --td-sb-width: 232px;
    --td-sb-rail: 64px;

    --bs-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--text);
    /* Bootstrap paints dropdowns, list groups, offcanvas, popovers and modals with --bs-body-bg:
       those are surfaces, so it is the surface colour. The page colour is set on body below. */
    --bs-body-bg: var(--surface);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--fill2);
    --bs-border-color: var(--line2);
    --bs-border-color-translucent: var(--line2);
    --bs-border-radius: 9px;
    --bs-border-radius-sm: 7px;
    --bs-border-radius-lg: 12px;
    --bs-primary: #5b5bd6;
    --bs-primary-rgb: var(--td-accent-rgb);
    --bs-primary-text-emphasis: var(--accentDark);
    --bs-primary-bg-subtle: var(--accentBg);
    --bs-primary-border-subtle: var(--accentLine);
    --bs-success-rgb: 30, 124, 64;
    --bs-danger-rgb: 192, 57, 43;
    --bs-warning-rgb: 163, 103, 26;
    --bs-link-color: var(--accentDark);
    --bs-link-color-rgb: 74, 74, 176;
    --bs-link-hover-color: var(--accent);
    --bs-focus-ring-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background-color: var(--mock-body);
    color: var(--text);
    font-family: var(--bs-body-font-family);
}

.cp-neo ::selection {
    background: var(--accentBg5);
}

/* No colour here: headings inherit, so a heading on a coloured band (the public knowledge base
   hero is white on purple) keeps the colour of its band. The body colour is already --text. */
.cp-neo h1, .cp-neo h2, .cp-neo h3, .cp-neo h4, .cp-neo h5, .cp-neo h6,
.cp-neo .h1, .cp-neo .h2, .cp-neo .h3, .cp-neo .h4, .cp-neo .h5, .cp-neo .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

.cp-neo .text-muted,
.cp-neo .text-secondary {
    color: var(--muted) !important;
}

.cp-neo hr {
    border-color: var(--line3);
    opacity: 1;
}

/* ---------- buttons ---------- */
.cp-neo .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--r-control);
    --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    --bs-btn-disabled-opacity: .55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.cp-neo .btn-sm {
    --bs-btn-border-radius: 7px;
}

.cp-neo .btn-primary {
    --bs-btn-bg: var(--accentBtn);
    --bs-btn-border-color: var(--accentBtn);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 88%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 80%, #000);
    --bs-btn-disabled-bg: var(--accentBtn);
    --bs-btn-disabled-border-color: var(--accentBtn);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Neutral buttons all read as Core's outline button: white, hairline, grey text */
.cp-neo .btn-secondary,
.cp-neo .btn-light,
.cp-neo .btn-outline-secondary,
.cp-neo .btn-outline-dark,
.cp-neo .btn-outline-light {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line3);
    --bs-btn-color: var(--text4);
    --bs-btn-hover-bg: var(--fill);
    --bs-btn-hover-border-color: var(--line3);
    --bs-btn-hover-color: var(--text2);
    --bs-btn-active-bg: var(--fill4);
    --bs-btn-active-border-color: var(--line3);
    --bs-btn-active-color: var(--text2);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--line2);
    --bs-btn-disabled-color: var(--muted3);
}

.cp-neo .btn-outline-primary {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--accentLine);
    --bs-btn-color: var(--accentDark);
    --bs-btn-hover-bg: var(--accentBg);
    --bs-btn-hover-border-color: var(--accentLine2);
    --bs-btn-hover-color: var(--accentDark);
    --bs-btn-active-bg: var(--accentBg4);
    --bs-btn-active-border-color: var(--accentLine2);
    --bs-btn-active-color: var(--accentDark);
}

.cp-neo .btn-danger {
    --bs-btn-bg: var(--bad);
    --bs-btn-border-color: var(--bad);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bad) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bad) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bad) 78%, #000);
}

.cp-neo .btn-outline-danger {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--badLine);
    --bs-btn-color: var(--bad);
    --bs-btn-hover-bg: var(--badBg);
    --bs-btn-hover-border-color: var(--badLine);
    --bs-btn-hover-color: var(--bad);
    --bs-btn-active-bg: var(--badBg);
    --bs-btn-active-color: var(--bad);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--badLine);
    --bs-btn-disabled-color: var(--bad);
}

.cp-neo .btn-success {
    --bs-btn-bg: var(--ok2);
    --bs-btn-border-color: var(--ok2);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ok2) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ok2) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--ok2) 78%, #000);
}

.cp-neo .btn-outline-success {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--goodLine);
    --bs-btn-color: var(--good);
    --bs-btn-hover-bg: var(--goodBg);
    --bs-btn-hover-border-color: var(--goodLine);
    --bs-btn-hover-color: var(--good);
    --bs-btn-active-bg: var(--goodBg);
    --bs-btn-active-color: var(--good);
}

.cp-neo .btn-warning {
    --bs-btn-bg: var(--warnBg);
    --bs-btn-border-color: var(--warnLine);
    --bs-btn-color: var(--warn3);
    --bs-btn-hover-bg: var(--warnBg2);
    --bs-btn-hover-border-color: var(--warnLine);
    --bs-btn-hover-color: var(--warn3);
}

.cp-neo .btn-outline-warning {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--warnLine);
    --bs-btn-color: var(--warn3);
    --bs-btn-hover-bg: var(--warnBg2);
    --bs-btn-hover-border-color: var(--warnLine);
    --bs-btn-hover-color: var(--warn3);
}

.cp-neo .btn-info,
.cp-neo .btn-outline-info {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--accentLine);
    --bs-btn-color: var(--accentDark);
    --bs-btn-hover-bg: var(--accentBg);
    --bs-btn-hover-border-color: var(--accentLine2);
    --bs-btn-hover-color: var(--accentDark);
}

.cp-neo .btn-link {
    --bs-btn-color: var(--accentDark);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-font-weight: 500;
    text-decoration: none;
}

.cp-neo .btn-close:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ---------- form controls (neo.css sets background + hairline; focus and checks here) ---------- */
.cp-neo .form-control:focus,
.cp-neo .form-select:focus,
.cp-neo textarea:focus {
    border-color: var(--accentLine2) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.cp-neo .form-control::placeholder,
.cp-neo textarea::placeholder {
    color: var(--muted3);
}

.cp-neo .form-label,
.cp-neo .col-form-label {
    color: var(--text4);
    font-weight: 500;
}

.cp-neo .form-text {
    color: var(--muted);
}

.cp-neo .form-check-input {
    border-color: var(--muted4);
}

.cp-neo .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.cp-neo .form-check-input:focus {
    border-color: var(--accentLine2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* neo.css makes every checkbox a 17px square, Bootstrap switches included: give switches their
   track back (more specific than neo's .cp-neo .form-check-input[type="checkbox"]) */
.cp-neo .form-switch .form-check-input[type="checkbox"] {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background-color: var(--fill4);
    border-color: var(--fill4);
    background-position: left center;
}

.cp-neo .form-switch .form-check-input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-position: right center;
}

.cp-neo .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b6bcc6'/%3e%3c/svg%3e");
}

.cp-neo .input-group-text {
    background: var(--fill2);
    border-color: var(--line3);
    color: var(--muted);
}

/* ---------- cards ---------- */
.cp-neo .card {
    --bs-card-border-color: var(--line2);
    --bs-card-border-radius: var(--r-card);
    --bs-card-inner-border-radius: calc(var(--r-card) - 1px);
    --bs-card-cap-bg: var(--surface);
    --bs-card-bg: var(--surface);
    box-shadow: 0 1px 2px rgba(23, 25, 28, .04);
}

.cp-neo .card-header,
.cp-neo .card-footer {
    border-color: var(--line);
}

.cp-neo .card-header {
    font-weight: 600;
    color: var(--text2);
}

/* ---------- tables ---------- */
.cp-neo .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text2);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--surface2);
    --bs-table-hover-bg: var(--hover);
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: var(--accentBg2);
}

.cp-neo .table > thead > tr > th,
.cp-neo .table > thead > tr > td {
    background: var(--fill2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--line2);
    white-space: nowrap;
}

.cp-neo .table-light {
    --bs-table-bg: var(--fill2);
    --bs-table-color: var(--muted);
    --bs-table-border-color: var(--line2);
}

/* DataTables (bootstrap5 skin): search, length and paging in the same quiet tone */
.cp-neo .dataTables_wrapper .dataTables_info,
.cp-neo .dataTables_wrapper .dataTables_length,
.cp-neo .dataTables_wrapper .dataTables_filter {
    color: var(--muted);
}

/* ---------- pagination ---------- */
.cp-neo .pagination {
    --bs-pagination-color: var(--text4);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-hover-bg: var(--fill);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    --bs-pagination-active-bg: var(--accentBg4);
    --bs-pagination-active-color: var(--accentDark);
    --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-color: var(--muted4);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 2px;
}

.cp-neo .page-link {
    border-radius: 8px !important;
    font-weight: 500;
}

/* ---------- modals ---------- */
.cp-neo .modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 16px;
    --bs-modal-box-shadow: var(--elev-modal);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-modal-bg: var(--surface);
}

.cp-neo .modal-content {
    box-shadow: var(--elev-modal);
}

.cp-neo .modal-title {
    font-weight: 600;
    color: var(--text);
}

.cp-neo .modal-footer {
    background: var(--surface2);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modal-backdrop {
    --bs-backdrop-bg: #0f1216;
    --bs-backdrop-opacity: .38;
}

.cp-neo .offcanvas {
    --bs-offcanvas-border-color: var(--line2);
    box-shadow: var(--elev-modal);
}

/* ---------- dropdowns ---------- */
.cp-neo .dropdown-menu {
    --bs-dropdown-border-color: var(--line2);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-box-shadow: var(--elev-menu);
    --bs-dropdown-padding-x: 4px;
    --bs-dropdown-padding-y: 4px;
    --bs-dropdown-link-color: var(--text2);
    --bs-dropdown-link-hover-bg: var(--hover);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--accentBg);
    --bs-dropdown-link-active-color: var(--accentDark);
    --bs-dropdown-header-color: var(--muted);
    --bs-dropdown-divider-bg: var(--line);
    box-shadow: var(--elev-menu);
}

.cp-neo .dropdown-item {
    border-radius: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ---------- badges ---------- */
.cp-neo .badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    --bs-badge-padding-x: .6em;
}

.cp-neo .badge.bg-primary,
.cp-neo .badge.text-bg-primary {
    background-color: var(--accentBg4) !important;
    color: var(--accentDark) !important;
}

.cp-neo .badge.bg-secondary,
.cp-neo .badge.text-bg-secondary,
.cp-neo .badge.bg-light,
.cp-neo .badge.text-bg-light {
    background-color: var(--fill4) !important;
    color: var(--text4) !important;
}

.cp-neo .badge.bg-success,
.cp-neo .badge.text-bg-success {
    background-color: var(--goodBg) !important;
    color: var(--good) !important;
}

.cp-neo .badge.bg-danger,
.cp-neo .badge.text-bg-danger {
    background-color: var(--badBg) !important;
    color: var(--bad) !important;
}

.cp-neo .badge.bg-warning,
.cp-neo .badge.text-bg-warning {
    background-color: var(--warnBg) !important;
    color: var(--warn3) !important;
}

.cp-neo .badge.bg-info,
.cp-neo .badge.text-bg-info {
    background-color: var(--accentBg2) !important;
    color: var(--accentDark) !important;
}

/* ---------- tabs and pills ---------- */
.cp-neo .nav-tabs {
    --bs-nav-tabs-border-color: var(--line2);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--text);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: 4px;
}

.cp-neo .nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.cp-neo .nav-tabs .nav-link:hover {
    color: var(--text2);
}

.cp-neo .nav-tabs .nav-link.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

.cp-neo .nav-pills {
    --bs-nav-pills-border-radius: 8px;
    --bs-nav-pills-link-active-bg: var(--accentBg4);
    --bs-nav-pills-link-active-color: var(--accentDark);
}

.cp-neo .nav-pills .nav-link {
    color: var(--muted);
    font-weight: 500;
}

/* ---------- alerts, list groups, progress ---------- */
.cp-neo .alert {
    --bs-alert-border-radius: 12px;
    border-width: 1px;
}

.cp-neo .alert-info,
.cp-neo .alert-primary {
    --bs-alert-bg: var(--accentBg2);
    --bs-alert-border-color: var(--accentLine);
    --bs-alert-color: var(--text2);
}

.cp-neo .alert-success {
    --bs-alert-bg: var(--goodBg);
    --bs-alert-border-color: var(--goodLine);
    --bs-alert-color: var(--good);
}

.cp-neo .alert-warning {
    --bs-alert-bg: var(--warnBg2);
    --bs-alert-border-color: var(--warnLine);
    --bs-alert-color: var(--warn3);
}

.cp-neo .alert-danger {
    --bs-alert-bg: var(--badBg);
    --bs-alert-border-color: var(--badLine);
    --bs-alert-color: var(--bad);
}

.cp-neo .alert-secondary,
.cp-neo .alert-light {
    --bs-alert-bg: var(--fill2);
    --bs-alert-border-color: var(--line2);
    --bs-alert-color: var(--text4);
}

.cp-neo .list-group {
    --bs-list-group-border-color: var(--line2);
    --bs-list-group-border-radius: 12px;
    --bs-list-group-action-hover-bg: var(--hover);
    --bs-list-group-active-bg: var(--accentBg);
    --bs-list-group-active-color: var(--accentDark);
    --bs-list-group-active-border-color: var(--accentLine);
}

.cp-neo .progress {
    --bs-progress-bg: var(--fill4);
    --bs-progress-bar-bg: var(--accent);
    --bs-progress-border-radius: 999px;
}

.cp-neo .tooltip {
    --bs-tooltip-bg: var(--inverse);
    --bs-tooltip-border-radius: 8px;
}

/* ---------- old desk accents (Bootstrap blue) on the neo accent ---------- */
.cp-neo .text-primary {
    color: var(--accentDark) !important;
}

.cp-neo .bg-primary {
    background-color: var(--accent) !important;
}

.cp-neo .border-primary {
    border-color: var(--accentLine2) !important;
}

/* ============================================================================
   Sidebar (desktop): Core's sidebar look - labelled rows in groups, collapsible to an icon
   rail (html.td-rail, remembered per browser). Phones keep the bottom bar from support.css:
   every rule below that changes the layout sits in the min-width: 769px block.
   ============================================================================ */
.support_sidebar.td_sb {
    background: #f9fafb;
    border-color: var(--line2);
    font-family: var(--bs-body-font-family);
}

.support_sidebar.td_sb > a {
    color: #7a818c;
}

.support_sidebar.td_sb > a:hover {
    background: #f1f3f6;
    color: var(--text);
}

.support_sidebar.td_sb > a.active {
    background: var(--accentBg);
    color: var(--accentDark);
}

.td_sb_text,
.td_sb_group,
.td_sb_head,
.td_sb_profile_name {
    display: none;
}

@media (min-width: 769px) {
    .support_sidebar.td_sb {
        width: var(--td-sb-width);
        align-items: stretch;
        gap: 1px;
        padding: 12px 10px 12px;
        overflow-y: auto;
        overflow-x: hidden;
        transition: width 240ms cubic-bezier(.4, 0, .2, 1);
    }

    .td_sb_head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px 2px 12px 4px;
    }

    .td_sb_brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
        padding: 4px;
        border-radius: 10px;
        color: var(--text);
        text-decoration: none;
    }

    .td_sb_brand:hover {
        background: #f1f3f6;
        color: var(--text);
    }

    .td_sb_brand img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        flex: none;
    }

    .td_sb_brand span {
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .td_sb_collapse {
        flex: none;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #8b929c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .td_sb_collapse:hover {
        background: #f1f3f6;
        color: var(--text);
    }

    .td_sb_group {
        display: block;
        padding: 14px 10px 6px;
        font-size: 11px;
        font-weight: 600;
        color: #8b929c;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .support_sidebar.td_sb > a {
        width: auto;
        height: 36px;
        justify-content: flex-start;
        gap: 11px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 15px;
        flex: none;
    }

    .support_sidebar.td_sb > a > i {
        width: 18px;
        text-align: center;
        flex: none;
    }

    .td_sb_text {
        display: inline;
        font-size: 13px;
        font-weight: 500;
        color: #4a505a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .support_sidebar.td_sb > a:hover .td_sb_text {
        color: var(--text);
    }

    .support_sidebar.td_sb > a.active .td_sb_text {
        color: var(--accentDark);
        font-weight: 600;
    }

    /* Everything from the first bottom item on sticks to the foot of the sidebar */
    .support_sidebar.td_sb > .td_sb_bottom {
        margin-top: auto;
    }

    .support_sidebar.td_sb .sidebar_profile {
        margin: 8px 0 0;
        padding-top: 8px;
        border-top: 1px solid var(--line2);
    }

    .support_sidebar.td_sb .sidebar_profile > .btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 6px 6px !important;
        border-radius: 10px;
        text-align: left;
    }

    .support_sidebar.td_sb .sidebar_profile > .btn:hover {
        background: #f1f3f6;
    }

    .support_sidebar.td_sb .sidebar_avatar {
        width: 32px;
        height: 32px;
        border-width: 1px;
        border-color: var(--line3);
        flex: none;
    }

    .td_sb_profile_name {
        display: block;
        min-width: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--text2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member_layout {
        margin-left: var(--td-sb-width);
        transition: margin-left 240ms cubic-bezier(.4, 0, .2, 1);
    }

    .member_footer {
        left: var(--td-sb-width);
        width: calc(100% - var(--td-sb-width));
    }

    /* ---- rail: icons only ---- */
    html.td-rail .support_sidebar.td_sb {
        width: var(--td-sb-rail);
        padding-left: 10px;
        padding-right: 10px;
    }

    html.td-rail .td_sb_brand span,
    html.td-rail .td_sb_text,
    html.td-rail .td_sb_group,
    html.td-rail .td_sb_profile_name {
        display: none;
    }

    html.td-rail .td_sb_head {
        flex-direction: column;
        padding: 2px 0 10px;
        gap: 6px;
    }

    html.td-rail .td_sb_brand {
        flex: none;
        padding: 3px;
    }

    html.td-rail .support_sidebar.td_sb > a {
        justify-content: center;
        padding: 0;
        height: 40px;
    }

    html.td-rail .support_sidebar.td_sb > .td_sb_sep {
        display: block;
        height: 1px;
        margin: 8px 6px;
        background: var(--line2);
    }

    html.td-rail .support_sidebar.td_sb .sidebar_profile > .btn {
        justify-content: center;
        padding: 4px !important;
    }

    html.td-rail .td_sb_collapse i {
        transform: rotate(180deg);
    }

    html.td-rail .member_layout {
        margin-left: var(--td-sb-rail);
    }

    html.td-rail .member_footer {
        left: var(--td-sb-rail);
        width: calc(100% - var(--td-sb-rail));
    }
}

.td_sb_sep {
    display: none;
}

/* ---------- page canvas and footer ---------- */
.cp-neo .member_layout,
.cp-neo .member_layout_body {
    background: var(--mock-body);
}

/* The footer is position:fixed over the page: it needs the page colour, or the content shows through */
.cp-neo .member_footer {
    background: var(--mock-body);
    border-top: 1px solid var(--line);
    color: var(--muted3);
}

.cp-neo .member_footer p,
.cp-neo .member_footer span {
    color: var(--muted3);
}

/* ============================================================================
   Old desk rules that outrank the skin. custom.css, MemberLayout.css and support.css predate
   neo and style by selector (body .btn.btn-primary, .member_layout .form-control) or with fixed
   Bootstrap colours. Overridden here rather than edited there, so a later neo sync stays a
   matter of this file alone.
   ============================================================================ */

/* custom.css paints its buttons, badges and links with its own hue (hsl 234 100% 67%, #5768ff):
   point those variables at the neo accent so every user of them follows */
body.cp-neo {
    --bs-code-color: var(--accentDark);
    --primary_color: var(--accentBtn);
    --primary_text: var(--accent);
    --primary_color_hover: color-mix(in srgb, var(--accent) 88%, #000);
    --primary_light: var(--accentBg);
    --primary_img_bg: var(--accentLine);
    --link_bg_color: var(--accent);
}

/* "body .btn.btn-primary" and friends (custom.css) also set display:flex and their own padding,
   radius and size, so they do not line up with the other buttons */
body.cp-neo .btn.btn-primary,
body.cp-neo .btn.btn-outline-primary,
body.cp-neo .btn.btn-secondary,
body.cp-neo .btn.btn-outline-secondary {
    display: inline-flex;
    border-radius: var(--r-control);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
}

/* The same rules also hard-code their colours (border, background, text, a hover fill of their
   own), which beats Bootstrap's variables: hand them back so the skin's variants above apply */
body.cp-neo .btn.btn-primary,
body.cp-neo .btn.btn-outline-primary,
body.cp-neo .btn.btn-secondary,
body.cp-neo .btn.btn-outline-secondary {
    margin: 0;
    font-weight: var(--bs-btn-font-weight);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

body.cp-neo .btn.btn-primary:hover,
body.cp-neo .btn.btn-outline-primary:hover,
body.cp-neo .btn.btn-secondary:hover,
body.cp-neo .btn.btn-outline-secondary:hover {
    border-color: var(--bs-btn-hover-border-color);
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

body.cp-neo .btn.btn-primary:active,
body.cp-neo .btn.btn-outline-primary:active,
body.cp-neo .btn.btn-secondary:active,
body.cp-neo .btn.btn-outline-secondary:active,
body.cp-neo .btn.btn-outline-primary.active,
body.cp-neo .btn.btn-outline-secondary.active,
body.cp-neo .btn-check:checked + .btn.btn-outline-primary,
body.cp-neo .btn-check:checked + .btn.btn-outline-secondary {
    border-color: var(--bs-btn-active-border-color);
    background-color: var(--bs-btn-active-bg);
    color: var(--bs-btn-active-color);
}

body.cp-neo .btn.btn-primary:disabled,
body.cp-neo .btn.btn-outline-primary:disabled,
body.cp-neo .btn.btn-secondary:disabled,
body.cp-neo .btn.btn-outline-secondary:disabled,
body.cp-neo .btn.btn-primary.disabled,
body.cp-neo .btn.btn-outline-primary.disabled,
body.cp-neo .btn.btn-secondary.disabled,
body.cp-neo .btn.btn-outline-secondary.disabled {
    border-color: var(--bs-btn-disabled-border-color);
    background-color: var(--bs-btn-disabled-bg);
    color: var(--bs-btn-disabled-color);
}

/* custom.css animates "all" over half a second: hover and the focus ring lagged behind */
body.cp-neo .btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* The primary button's resting shadow (buttons, above) outranks Bootstrap's .btn:focus-visible:
   without this a keyboard user saw no focus on it at all */
body.cp-neo .btn.btn-primary:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Links and sidebar rows had the browser's own focus outline */
.cp-neo a:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* MemberLayout.css gives every text field 10px padding and medium weight: 42px high next to a
   29px select in the same row. Same selector weight as MemberLayout.css on purpose, so the
   fields that set their own padding on top of it (.support-search, view styles) keep it */
.member_layout .form-control {
    padding: .375rem .75rem;
    font-weight: 400;
    color: var(--text);
}

.member_layout .form-control-sm {
    padding: .25rem .5rem;
}

.member_layout .form-control-lg {
    padding: .5rem 1rem;
}

/* neo.css gives the group the border and strips it from text fields and addons inside; a select
   or a button in a group kept its own frame, which read as a box in a box */
.cp-neo .input-group > .form-select {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

body.cp-neo .input-group > .btn {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-left-color: var(--line2);
    border-radius: 0;
}

/* ---------- ticket list ---------- */

/* A 4-6px status stripe on a 14px corner bends into a crescent: the tiles take the control radius */
.cp-neo .status-tile {
    border-radius: var(--r-control);
}

/* .cp-neo .card's resting shadow outranked the focus ring support.css gives the tiles */
.cp-neo .status-tile:focus-visible,
.cp-neo .scope-chip:focus-visible {
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.cp-neo .scope-chip.active {
    background: var(--accentBg);
    border-color: var(--accentLine2);
    color: var(--accentDark);
}

.cp-neo .scope-chip.active:hover {
    background: var(--accentBg4);
    border-color: var(--accentLine2);
    color: var(--accentDark);
}

.cp-neo .support-table-card {
    border-radius: var(--r-card);
    border-color: var(--line2);
}

/* ---------- Bootstrap blue and pastels left in support.css ---------- */
.cp-neo .ta-avatar-initials,
.cp-neo .te-avatar-initials {
    background: var(--accent);
}

.cp-neo .te-badge-customer,
.cp-neo .rn-type-improved {
    background: var(--accentBg4);
    color: var(--accentDark);
}

.cp-neo .te-badge-mailed,
.cp-neo .rn-type-new {
    background: var(--goodBg);
    color: var(--good);
}

.cp-neo .te-badge-internal,
.cp-neo .te-badge-system {
    background: var(--warnBg);
    color: var(--warn3);
}

.cp-neo .rn-pill-improved.active {
    background: var(--accentDark);
    border-color: var(--accentDark);
}

.cp-neo .rn-pill-new.active {
    background: var(--good);
    border-color: var(--good);
}

.cp-neo .sidebar_profile .btn:hover .sidebar_avatar {
    border-color: var(--accent);
}

.cp-neo .assist-row.is-sender {
    background: var(--accentBg2);
    box-shadow: inset 3px 0 0 var(--accent);
}

.cp-neo .assist-sender {
    color: var(--accent);
}

.cp-neo .viewer-cursor {
    background: var(--accent);
}

@media (max-width: 768px) {
    .cp-neo .sidebar_more_btn.active,
    .cp-neo .sidebar_more_btn.has_active {
        background: var(--accentBg);
        color: var(--accentDark);
    }
}

/* Grey help text in #9aa0a6 / #adb5bd read at about 2.6:1 on white */
.cp-neo .ta-sla-done,
.cp-neo .sp-subtitle,
.cp-neo .sp-latency,
.cp-neo .ai-cost {
    color: var(--muted);
}

.cp-neo .tk-label {
    color: var(--muted2);
}

/* ---------- knowledge base and wiki articles ---------- */

/* The article title is 24px (support.css .kb-article-card h1): Bootstrap's h2/h3 in the body were
   bigger than the title they sit under */
.cp-neo .kb-article-content h2 {
    font-size: 21px;
}

.cp-neo .kb-article-content h3 {
    font-size: 18px;
}

.cp-neo .kb-article-content h4 {
    font-size: 15px;
}

/* ---------- ticket detail ---------- */

/* From lg up the "unanswered reply" notice floats over the bottom of the conversation as a pill
   (support.css): leave room under the last message so the pill does not cover it */
@media (min-width: 992px) {
    #awaitingBanner:not(.d-none) ~ .ticket-scroll {
        padding-bottom: 52px;
    }
}

/* support.css evens out the header actions at the old theme's 9px 11px; with the theme rules
   handed back to Bootstrap (above) the strip takes the small control size, icon-only buttons too */
body.cp-neo .ticket-actions .btn {
    min-height: 32px;
    padding: 0 .65rem;
    font-size: 13px;
    border-radius: var(--r-control);
}

/* On the phone the strip wraps into full-width rows: a thumb-sized target */
@media (max-width: 768px) {
    body.cp-neo .ticket-actions .btn {
        min-height: 40px;
    }
}

/* Below 1600px the header actions wrapped onto a row of their own and took the conversation's
   height: the hand-over buttons keep their icon and title (Detail.cshtml), the label goes */
@media (min-width: 769px) and (max-width: 1599.98px) {
    .ticket-actions .ta-label {
        display: none;
    }

    /* A long cause name made the select wide enough to push the actions down on its own */
    #ticketHeader #ddlCause {
        max-width: 240px;
    }
}

/* Survey question when closing by hand (Detail.cshtml #surveyModal): three buttons, of which the
   suggested one flips between "send" and "skip" (detail.js). The suggestion always takes the far
   right, Annuleren stands apart on the left; on a phone they stack, suggestion on top and
   Annuleren at the bottom */
#surveyModal .modal-footer > .btn {
    white-space: nowrap;
}

#surveyModal .modal-footer > .btn-primary {
    order: 2;
}

@media (max-width: 575.98px) {
    #surveyModal .modal-footer > .btn {
        flex: 1 1 100%;
        margin-left: 0;
        margin-right: 0 !important;
    }

    #surveyModal .modal-footer > .btn-primary {
        order: -1;
    }

    #surveyModal .modal-footer > [data-bs-dismiss] {
        order: 3;
    }
}

/* ---------- site check report ---------- */

/* When and who, next to the address and club buttons: information, not a button (it used to be
   a disabled .btn, which neo fades to half strength) */
.cp-neo .sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 31px;
    padding: .25rem .6rem;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text2);
    background: var(--fill2);
    border: 1px solid var(--line2);
    border-radius: var(--r-control);
}

/* ---------- Stock ---------- */

/* The order and count buttons stay on one line in the narrow action column */
.cp-neo .c_action {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}

/* ---------- toastr notifications (assets/css/toastr.min.css) ---------- */

/* toastr draws at 80% opacity with its own colours and a 3px corner, on top of the footer */
.cp-neo #toast-container > .toast {
    opacity: 1;
    border-radius: 12px;
    box-shadow: var(--elev-toast);
    color: var(--onInverse);
    font-size: 13px;
    padding: 12px 14px 12px 46px;
    background-position: 16px center;
}

.cp-neo #toast-container > .toast:hover {
    box-shadow: var(--elev-toast);
}

.cp-neo #toast-container > .toast-success {
    background-color: var(--good);
}

.cp-neo #toast-container > .toast-error {
    background-color: var(--bad);
}

.cp-neo #toast-container > .toast-warning {
    background-color: var(--warn);
}

.cp-neo #toast-container > .toast-info {
    background-color: var(--accentDark);
}

.cp-neo #toast-container.toast-bottom-center {
    bottom: 48px;
}