/*
 * JS Support Ticket — complete frontend/site QA layer
 * Loaded after all legacy and view-specific styles.
 * Scope: #jsst-site only, except Joomla calendar popups while this component is active.
 */

#jsst-site.jsst-site-root {
    --jsst-bg:var(--jsst-content-bg);
    --jsst-surface:#ffffff;
    --jsst-surface-soft:var(--jsst-content-bg);
    --jsst-border:var(--jsst-border-color);
    --jsst-border-strong:#cbd8e8;
    --jsst-text:var(--jsst-heading-color);
    --jsst-muted:var(--jsst-content-text);
    --jsst-primary:var(--jsst-top-menu-bg);
    --jsst-primary-dark:var(--jsst-top-menu-bg);
    --jsst-dark:var(--jsst-heading-color);
    --jsst-success:#16a34a;
    --jsst-danger:#dc2626;
    --jsst-warning:#d97706;
    --jsst-radius:14px;
    --jsst-radius-sm:9px;
    --jsst-shadow:0 10px 30px rgba(15, 23, 42, .07);
    color:var(--jsst-text);
    line-height:1.5;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root,
#jsst-site.jsst-site-root *,
#jsst-site.jsst-site-root *::before,
#jsst-site.jsst-site-root *::after {
    box-sizing:border-box;
}

#jsst-site img,
#jsst-site svg,
#jsst-site video,
#jsst-site iframe {
    max-width:100%;
}

#jsst-site a {
    overflow-wrap:anywhere;
}

#jsst-site .js-row,
#jsst-site [class*="-wrapper"],
#jsst-site [class*="-wrp"] {
    min-width:0;
}

#jsst-site .js-null-margin {
    margin-inline:0;
}

#jsst-site .js-padding-null {
    padding-inline:0;
}

/* Page shell and headings */
#jsst-site > .js-row,
#jsst-site > form > .js-row {
    width:100%;
}

#jsst-site #jsst-wrapper-top {
    clear:both;
    width:100%;
}

#jsst-site #jsst-breadcrunbs,
#jsst-site #jsst-breadcrumbs {
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
}

#jsst-site .js-ticket-search-heading-wrp,
#jsst-site .js-ticket-search-heading-main-wrp,
#jsst-site .js-ticket-downloads-heading-wrp,
#jsst-site .js-ticket-categories-heading-wrp {
    min-width:0;
}

#jsst-site .js-ticket-heading-left,
#jsst-site .js-ticket-heading-right {
    min-width:0;
}

/* Shared inputs */
#jsst-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
#jsst-site select,
#jsst-site textarea,
#jsst-site .inputbox,
#jsst-site .js-form-input-field,
#jsst-site .js-ticket-form-field-input,
#jsst-site .js-ticket-field-input,
#jsst-site .js-ticket-select-field {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border-strong);
    border-radius:var(--jsst-radius-sm);
    box-shadow:none;
    color:var(--jsst-text);
    font:inherit;
    max-width:100%;
    min-height:44px;
    outline:0;
    padding:10px 13px;
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    width:100%;
}

#jsst-site textarea,
#jsst-site textarea.inputbox,
#jsst-site textarea.js-form-input-field {
    min-height:130px;
    resize:vertical;
}

#jsst-site input:focus,
#jsst-site select:focus,
#jsst-site textarea:focus {
    border-color:var(--jsst-primary);
    box-shadow:0 0 0 3px rgba(36, 99, 235, .12);
}

#jsst-site input[readonly],
#jsst-site input[disabled],
#jsst-site select[disabled],
#jsst-site textarea[disabled] {
    background:var(--jsst-content-bg);
    color:var(--jsst-content-text);
    cursor:not-allowed;
    opacity:1;
}

#jsst-site input[type="checkbox"],
#jsst-site input[type="radio"] {
    accent-color:var(--jsst-primary);
    flex:0 0 auto;
    height:17px;
    margin:0;
    width:17px;
}

#jsst-site label,
#jsst-site .js-form-title,
#jsst-site .js-ticket-from-field-title,
#jsst-site .js-ticket-edit-field-title {
    color:var(--jsst-text);
    font-weight:650;
}

#jsst-site .js-form-title,
#jsst-site .js-ticket-from-field-title,
#jsst-site .js-ticket-edit-field-title {
    display:block;
    line-height:1.35;
    margin:0 0 7px;
    width:100%;
}

#jsst-site .js-search-filter-btn {
    align-items:center;
    border:1px solid var(--jsst-border);
    border-radius:8px;
    color:var(--jsst-primary);
    display:inline-flex;
    min-height:40px;
    padding:8px 13px;
    text-decoration:none;
}

/* Form cards and grids */
#jsst-site #js-tk-formwrapper:not(.jsst-submit-ticket-form-shell),
#jsst-site .js-ticket-add-form-wrapper,
#jsst-site .jsticket_form {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border);
    border-radius:var(--jsst-radius);
    box-shadow:var(--jsst-shadow);
    clear:both;
    margin:0;
    min-width:0;
    padding:clamp(18px, 2.4vw, 30px);
    width:100%;
}

#jsst-site.jsst-layout-formticket #adminForm,
#jsst-site.jsst-layout-formstaff #adminForm,
#jsst-site .js-ticket-add-form-wrapper .js-ticket-form {
    min-width:0;
    width:100%;
}

#jsst-site.jsst-layout-formticket .js-form-wrapper {
    display:grid;
    float:none;
    gap:18px 22px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding:0;
    width:100%;
}

#jsst-site.jsst-layout-formticket .js-form-wrapper > [class*="js-col-"] {
    float:none;
    margin:0;
    padding:0;
    width:auto;
}

#jsst-site.jsst-layout-formticket .js-form-wrapper > .js-col-md-12,
#jsst-site.jsst-layout-formticket .js-form-wrapper > .js-col-xs-12:only-child {
    grid-column:1 / -1;
}

#jsst-site .js-margin-bottom {
    margin-bottom:0;
}

#jsst-site .js-form-value,
#jsst-site .js-ticket-from-field,
#jsst-site .js-ticket-edit-field-wrp {
    min-width:0;
    width:100%;
}

#jsst-site .js-ticket-from-field {
    align-items:stretch;
    display:flex;
    gap:10px;
}

#jsst-site .js-ticket-select-user-field {
    flex:1 1 auto;
    min-width:0;
    width:auto;
}

#jsst-site .js-ticket-select-user-btn {
    flex:0 0 auto;
    margin:0;
    width:auto;
}

#jsst-site .js-ticket-select-user-btn > a {
    height:100%;
    min-width:128px;
}

#jsst-site.jsst-layout-formstaff .js-ticket-form,
#jsst-site.jsst-layout-formdepartment .js-ticket-form,
#jsst-site.jsst-layout-formrole .js-ticket-form,
#jsst-site.jsst-layout-formannouncement .js-ticket-form,
#jsst-site.jsst-layout-formfaq .js-ticket-form,
#jsst-site.jsst-layout-formcategory .js-ticket-form,
#jsst-site.jsst-layout-formdownload .js-ticket-form,
#jsst-site.jsst-layout-formmessage .js-ticket-form {
    display:grid;
    gap:20px 24px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site .js-ticket-from-field-wrp {
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

#jsst-site .js-ticket-from-field-wrp-full-width,
#jsst-site .js-ticket-form-btn-wrp,
#jsst-site .js-ticket-form-instruction-message,
#jsst-site .js-ticket-form .js-col-md-12 {
    grid-column:1 / -1;
}

#jsst-site .js-ticket-priorty-btn-wrp {
    align-items:center;
    clear:both;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-top:8px;
    width:100%;
}

/* Checkbox/radio options */
#jsst-site .js-form-value label,
#jsst-site .js-ticket-from-field label,
#jsst-site .js-ticket-radio-button,
#jsst-site .js-ticket-checkbox-button {
    align-items:center;
    display:inline-flex;
    gap:8px;
}

#jsst-site .js-form-value > span,
#jsst-site .js-form-value > label {
    margin-block:3px;
    margin-inline-end:12px;
}

/* Upload fields */
#jsst-site .js-attachment-wrp,
#jsst-site .js-ticket-attachment-wrp,
#jsst-site .js-form-value.js-attachment-files-wrp,
#jsst-site .js-attachment-files-wrp {
    min-width:0;
    width:100%;
}

#jsst-site .js-attachment-files,
#jsst-site .jsst-attachment-dropzone {
    display:grid;
    gap:9px;
    min-width:0;
}

#jsst-site .js-attachment-file-box,
#jsst-site .js-value-text.js-attachment-file-box {
    align-items:center;
    background:var(--jsst-surface-soft);
    border:1px dashed var(--jsst-border-strong);
    border-radius:10px;
    display:flex;
    gap:10px;
    min-height:48px;
    min-width:0;
    padding:7px 10px;
    width:100%;
}

#jsst-site .js-attachment-file-box input[type="file"],
#jsst-site .js-form-input-field-attachment {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    width:100%;
}

#jsst-site .js-attachment-remove {
    align-items:center;
    border:1px solid #fecaca;
    border-radius:50%;
    color:var(--jsst-danger);
    cursor:pointer;
    display:inline-flex;
    flex:0 0 28px;
    height:28px;
    justify-content:center;
    position:static;
    width:28px;
}

#jsst-site .js-attachment-remove::before {
    content:"×";
    font-size:20px;
    line-height:1;
}

#jsst-site .jsst-attachment-file-name,
#jsst-site .js-ticket-attachment-file-name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#jsst-site .js-attachment-option {
    color:var(--jsst-muted);
    font-size:12px;
    margin-top:8px;
}

/* Search/filter cards */
#jsst-site .js-ticket-top-search-wrp,
#jsst-site .jsst-mytickets-filter-card,
#jsst-site .js-ticket-popup-search-wrp {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border);
    border-radius:var(--jsst-radius);
    min-width:0;
    padding:16px;
    width:100%;
}

#jsst-site .js-ticket-search-fields-wrp,
#jsst-site .js-ticket-fields-wrp,
#jsst-site .jsst-mytickets-filter-main {
    align-items:end;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(4, minmax(140px, 1fr));
    min-width:0;
    width:100%;
}

#jsst-site .js-ticket-search-form-btn-wrp,
#jsst-site .jsst-mytickets-filter-actions {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-start;
    margin:0;
    min-width:0;
    width:auto;
}

#jsst-site .js-ticket-search-form-btn-wrp > *,
#jsst-site .jsst-mytickets-filter-actions > * {
    margin:0;
}

#jsst-site #js-filter-wrapper-toggle-area {
    display:contents;
}

#jsst-site #js-filter-wrapper-toggle-btn {
    align-items:center;
    display:inline-flex;
}

#jsst-site #js-filter-wrapper-toggle-minus,
#jsst-site #js-filter-wrapper-toggle-plus {
    line-height:1;
}

/* Joomla calendar input groups */
#jsst-site .field-calendar,
#jsst-site .input-group,
#jsst-site .js-calendar-field {
    align-items:stretch;
    display:flex;
    min-width:0;
    width:100%;
}

#jsst-site .field-calendar > input,
#jsst-site .input-group > input {
    border-end-end-radius:0;
    border-start-end-radius:0;
    flex:1 1 auto;
    min-width:0;
}

#jsst-site .field-calendar > button:not(.js-btn),
#jsst-site .input-group > button:not(.js-btn),
#jsst-site button.btn-secondary[data-alt-value] {
    border:1px solid var(--jsst-border-strong);
    border-inline-start:0;
    border-radius:0 var(--jsst-radius-sm) var(--jsst-radius-sm) 0;
    min-width:44px;
    padding:0;
}

[dir="rtl"] #jsst-site .field-calendar > button,
[dir="rtl"] #jsst-site .input-group > button {
    border-inline-end:0;
    border-inline-start:1px solid var(--jsst-border-strong);
    border-radius:var(--jsst-radius-sm) 0 0 var(--jsst-radius-sm);
}

/* User picker popup */
#jsst-site #userpopupblack,
#jsst-site .jsst-popup-background,
#jsst-site #js-history-back,
#jsst-site #js-private-crendentials-back,
#jsst-site #agenttransferblack,
#jsst-site #departmenttransferblack,
#jsst-site #internalnoteblack {
    backdrop-filter:blur(2px);
    background:rgba(15, 23, 42, .56);
}

#jsst-site #userpopup,
#jsst-site .jsst-popup-wrapper,
#jsst-site .jsst-merge-popup-wrapper,
#jsst-site #js-history-popup,
#jsst-site #js-private-crendentials-popup,
#jsst-site #userpopupforchangepriority,
#jsst-site #popupforagenttransfer,
#jsst-site #popupfordepartmenttransfer,
#jsst-site #popupforinternalnote,
#jsst-site .js-ticket-main-popup {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:0 24px 70px rgba(15, 23, 42, .25);
    max-height:min(86vh, 760px);
    max-width:calc(100vw - 30px);
    overflow:auto;
}

#jsst-site .jsst-popup-header,
#jsst-site .js-ticket-priorty-header,
#jsst-site #js-history-head,
#jsst-site #js-private-crendentials-head {
    align-items:center;
    background:linear-gradient(110deg, var(--jsst-top-menu-bg), #13a7ce);
    border-radius:15px 15px 0 0;
    color:#fff;
    display:flex;
    font-weight:750;
    justify-content:space-between;
    min-height:58px;
    padding:13px 18px;
    margin-bottom: 20px;
}

#jsst-site .popup-header-close-img,
#jsst-site .close-history,
#jsst-site .jsst-dialog-close,
#jsst-site #js-ticket-popup-close-button {
    align-items:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.38);
    border-radius:10px;
    cursor:pointer;
    display:inline-flex;
    flex:0 0 38px;
    height:38px;
    justify-content:center;
    position:static;
    width:38px;
}

#jsst-site .popup-header-close-img::before,
#jsst-site .close-history::before,
#jsst-site .jsst-dialog-close::before {
    color:currentColor;
    content:"×";
    font-family:Arial, sans-serif;
    font-size:27px;
    font-weight:400;
    line-height:1;
}

#jsst-site .js-ticket-popup-search-wrp {
    border:0;
    border-radius:0;
    padding:16px 18px;
}

#jsst-site .js-ticket-search-top,
#jsst-site .js-ticket-search-left,
#jsst-site .js-ticket-search-fields-wrp {
    min-width:0;
    width:100%;
}

#jsst-site #userpopup .js-ticket-search-fields-wrp {
    display:grid;
    gap:10px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

#jsst-site #userpopup .js-ticket-search-btn-wrp {
    display:flex;
    gap:10px;
    margin-top:12px;
    width:100%;
}

#jsst-site #userpopup .js-ticket-search-btn,
#jsst-site #userpopup .js-ticket-reset-btn {
    flex:0 1 140px;
    width:auto;
}

#jsst-site #records,
#jsst-site #records-inner {
    min-width:0;
    overflow-x:auto;
    width:100%;
}

#jsst-site #records table,
#jsst-site #records-inner table {
    border-collapse:separate;
    border-spacing:0;
    min-width:620px;
    width:100%;
}

#jsst-site #records th,
#jsst-site #records td,
#jsst-site #records-inner th,
#jsst-site #records-inner td {
    border-bottom:1px solid var(--jsst-border);
    padding:12px 14px;
    text-align:start;
    vertical-align:middle;
}

/* Dashboard and ticket stats */
#jsst-site .jsst-mytickets-stats-grid,
#jsst-site .js-ticket-stats-grid {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    min-width:0;
}

#jsst-site .jsst-myticket-stat {
    min-width:0;
}

#jsst-site .jsst-cp-empty-icon,
#jsst-site .jsst-empty-icon {
    align-items:center;
    background:var(--jsst-content-bg);
    border-radius:50%;
    display:inline-flex;
    height:62px;
    justify-content:center;
    margin-bottom:12px;
    width:62px;
}

#jsst-site .jsst-cp-empty-icon img,
#jsst-site .jsst-empty-icon img {
    height:30px;
    object-fit:contain;
    width:30px;
}

/* Ticket cards */
#jsst-site .js-ticket-wrapper,
#jsst-site .js-ticket-data,
#jsst-site .jsst-ticket-card {
    min-width:0;
}

#jsst-site .js-ticket-wrapper {
    border:1px solid var(--jsst-border);
    border-radius:13px;
    box-shadow:0 5px 18px rgba(15, 23, 42, .04);
    margin-bottom:14px;
    overflow:hidden;
}

#jsst-site .js-ticket-wrapper * {
    overflow-wrap:anywhere;
}

/* Management tables */
#jsst-site .js-ticket-table-wrp {
    border:1px solid var(--jsst-border);
    border-radius:var(--jsst-radius);
    float:none;
    overflow-x:auto;
    padding:0;
    width:100%;
}

#jsst-site .js-ticket-table-header,
#jsst-site .js-ticket-data-row {
    align-items:stretch;
    display:flex;
    min-width:760px;
    width:100%;
}

#jsst-site .js-ticket-table-header {
    background:var(--jsst-surface-soft);
    border-bottom:1px solid var(--jsst-border);
    color:var(--jsst-content-text);
    font-size:12px;
    font-weight:750;
    text-transform:uppercase;
}

#jsst-site .js-ticket-data-row {
    background:var(--jsst-surface);
    border-bottom:1px solid var(--jsst-border);
    position:relative;
}

#jsst-site .js-ticket-data-row:last-child {
    border-bottom:0;
}

#jsst-site .js-ticket-table-header-col,
#jsst-site .js-ticket-table-body-col {
    align-items:center;
    display:flex;
    float:none;
    min-height:58px;
    min-width:0;
    padding:11px 12px;
}

#jsst-site .js-ticket-display-block {
    display:none;
}

#jsst-site .js-tk-button,
#jsst-site .js-ticket-action-button {
    align-items:center;
    border:1px solid var(--jsst-border);
    border-radius:8px;
    display:inline-flex;
    flex:0 0 36px;
    height:36px;
    justify-content:center;
    margin:2px;
    padding:7px;
    width:36px;
}

#jsst-site .js-tk-button img,
#jsst-site .js-ticket-action-button img {
    max-height:20px;
    max-width:20px;
}

#jsst-site .js-suredelete {
    align-items:center;
    background:#fff8df;
    border:1px solid #f7d46d;
    border-radius:10px;
    color:#713f12;
    display:none;
    flex-wrap:wrap;
    gap:10px;
    inset:7px;
    min-height:50px;
    padding:9px 12px;
    position:absolute;
    width:auto;
    z-index:4;
}

#jsst-site .js-suredelete .warning-icon {
    flex:0 0 24px;
    height:24px;
    width:24px;
}

#jsst-site .js-suredelete a {
    border-radius:7px;
    cursor:pointer;
    display:inline-flex;
    font-weight:700;
    min-height:34px;
    padding:7px 12px;
    position:static;
    text-decoration:none;
}

#jsst-site .js-suredelete .js-tk-suredelete-btn {
    background:var(--jsst-danger);
    color:#fff;
    margin-inline-start:auto;
}

#jsst-site .js-suredelete .js-tk-canceldelete-btn {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border-strong);
    color:var(--jsst-text);
}

/* Pagination */
#jsst-site .jsst-pagination-form,
#jsst-site #jl_pagination.pagination,
#jsst-site #jl_pagination_pageslink,
#jsst-site #jl_pagination_box,
#jsst-site #jl_pagination_counter {
    min-width:0;
}

#jsst-site #jl_pagination_pageslink ul.pagination {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin:0;
    padding:0;
}

#jsst-site #jl_pagination_pageslink li {
    list-style:none;
}

#jsst-site #jl_pagination_pageslink a,
#jsst-site #jl_pagination_pageslink span {
    align-items:center;
    border:1px solid var(--jsst-border);
    border-radius:14px;   /* was 7px — a radius used nowhere else on the site */
    display:inline-flex;
    height:44px;          /* was 34px — sits nearer the 46px button family */
    justify-content:center;
    min-width:44px;
    padding:0 12px;
    text-decoration:none;
}

#jsst-site #jl_pagination_pageslink .active > a,
#jsst-site #jl_pagination_pageslink .active > span,
#jsst-site #jl_pagination_pageslink .current,
#jsst-site #jl_pagination_pageslink [aria-current="page"] {
    background:var(--jsst-primary);
    border-color:var(--jsst-primary);
    color:#fff;
}

#jsst-site #jl_pagination_box select {
    min-height:36px;
    width:auto;
}

/* Public FAQ, KB, announcements, downloads */
#jsst-site .js-ticket-categories-content {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

#jsst-site .js-ticket-category-box {
    float:none;
    min-width:0;
    width:auto;
}

#jsst-site .js-ticket-category-title {
    align-items:center;
    background:var(--jsst-surface);
/*    border: 1px solid var(--jsst-border);*/
    border-radius:12px;
    display:flex;
    gap:12px;
    min-height:72px;
    padding:13px;
    text-decoration:none;
    width:100%;
}

#jsst-site .js-ticket-category-download-logo {
    align-items:center;
    background:var(--jsst-content-bg);
    border-radius:10px;
    display:inline-flex;
    flex:0 0 46px;
    height:46px;
    justify-content:center;
    margin:0;
    width:46px;
}

#jsst-site .js-ticket-category-download-logo img,
#jsst-site .js-ticket-download-img,
#jsst-site .js-ticket-kb-img {
    height:27px;
    object-fit:contain;
    width:27px;
}

#jsst-site .js-ticket-category-name {
    color:var(--jsst-text);
    font-weight:700;
    min-width:0;
    overflow-wrap:anywhere;
}

#jsst-site .js-ticket-downloads-content {
    display:grid;
    gap:10px;
    min-width:0;
}

#jsst-site .js-ticket-download-box {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border);
    border-radius:10px;
    float:none;
    min-width:0;
    padding:13px 15px;
    width:100%;
}

#jsst-site .js-ticket-download-title {
    align-items:center;
    display:flex;
    gap:10px;
    min-width:0;
    text-decoration:none;
}

#jsst-site .js-ticket-download-name,
#jsst-site .js-ticket-kb-title {
    min-width:0;
    overflow-wrap:anywhere;
}

#jsst-site .js-ticket-main-popup #js-ticket-main-content {
    overflow-wrap:anywhere;
    padding:18px;
}

/* Ticket detail */
#jsst-site.jsst-layout-ticketdetail .js-ticket-detail-wrapper,
#jsst-site.jsst-layout-ticketdetail #tk-detail-wraper,
#jsst-site.jsst-layout-ticketdetail #tk_detail_content_wraper {
    min-width:0;
    width:100%;
}

#jsst-site.jsst-layout-ticketdetail .js-ticket-detail-content-wrp,
#jsst-site.jsst-layout-ticketdetail .jsst-ticket-detail-grid {
    display:grid;
    gap:16px;
    grid-template-columns:minmax(0, 1fr) minmax(240px, 340px);
}

#jsst-site .js-ticket-actions-wrp,
#jsst-site #tk-more-actions {
    display:grid;
    gap:8px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    min-width:0;
}

#jsst-site .js-button,
#jsst-site .js-tkt-det-hdg-btn,
#jsst-site .js-ticket-thread-add-btn-link {
    align-items:center;
    border:1px solid var(--jsst-border);
    border-radius:9px;
    display:inline-flex;
    gap:8px;
    min-height:40px;
    min-width:0;
    padding:8px 10px;
    text-decoration:none;
}

#jsst-site .js-button-icon,
#jsst-site .js-tkt-det-hdg-btn img,
#jsst-site .js-ticket-thread-add-btn-link img {
    flex:0 0 18px;
    height:18px;
    object-fit:contain;
    width:18px;
}

#jsst-site .js-ticket-thread-wrapper,
#jsst-site .js-ticket-thread-data,
#jsst-site .js-ticket-thread-body {
    min-width:0;
    overflow-wrap:anywhere;
}

#jsst-site .js-ticket-thread-data img,
#jsst-site .js-ticket-thread-body img {
    height:auto;
}

#jsst-site .js-ticket-history-table-wrp {
    overflow-x:auto;
}

#jsst-site .js-ticket-history-table-wrp table {
    min-width:680px;
}

#jsst-site .js-ticket-edit-form-wrp {
    padding:18px;
}

#jsst-site .js-ticket-edit-field-wrp iframe,
#jsst-site .js-ticket-form-field-wrp iframe,
#jsst-site .tox,
#jsst-site .mce-tinymce,
#jsst-site .js-editor-tinymce {
    max-width:100%;
    min-width:0;
    width:100%;
}

/* Mail */
#jsst-site .js-ticket-mails-btn-wrp {    flex-wrap:wrap;    min-width:0;
}

#jsst-site .js-ticket-mail-btn,
#jsst-site .js-add-link.button {
    float:none;
    margin:0;
}

#jsst-site .js-ticket-mail-img {
    height:18px;
    object-fit:contain;
    width:18px;
}

/* Reports */
#jsst-site .js-ticket-staff-report-wrapper .js-ticket-fields-wrp,
#jsst-site .js-ticket-department-report-wrapper .js-ticket-fields-wrp {
    grid-template-columns:repeat(2, minmax(170px, 1fr)) auto;
}

#jsst-site .js-ticket-pie-chart-wrapper,
#jsst-site #curve_chart,
#jsst-site [id*="chart"] {
    max-width:100%;
    min-width:0;
    overflow-x:auto;
}

#jsst-site .js-admin-staff-wrapper,
#jsst-site .js-departmentlist {
    min-width:0;
}

/* Feedback */
#jsst-site .js-ticket-feedback-wrapper .js-ticket-fields-wrp {
    grid-template-columns:repeat(5, minmax(140px, 1fr));
}

/* GDPR and long-action tables */
#jsst-site.jsst-controller-gdpr .js-ticket-table-wrp,
#jsst-site.jsst-controller-gdpr table {
    overflow-x:auto;
}

#jsst-site.jsst-controller-gdpr .js-ticket-action-button,
#jsst-site.jsst-controller-gdpr td:last-child a {
    align-items:center;
    display:inline-flex;
    justify-content:center;
    line-height:1.25;
    margin:3px;
    min-width:96px;
    overflow-wrap:normal;
    padding:7px 10px;
    white-space:normal;
    word-break:normal;
}

/* Empty states */
#jsst-site .js-ticket-record-not-found,
#jsst-site .js-ticket-no-record-found,
#jsst-site .jsst-empty-state,
#jsst-site .jsst-merge-empty-state {
    align-items:center;
    background:var(--jsst-surface);
    border:1px dashed var(--jsst-border-strong);
    border-radius:var(--jsst-radius);
    color:var(--jsst-muted);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:190px;
    padding:30px 18px;
    text-align:center;
    width:100%;
}

/* Joomla calendar popup while a JS Support Ticket page is active.
   Keep Joomla's calendar structure intact and style only the popup shell/footer. */
body.jsst-site-active .js-calendar,
body.jsst-site-active .calendar-container {
    z-index:100000 !important;
    max-height:calc(100vh - 20px);
    max-width:calc(100vw - 20px);
    overflow:auto;
    background:#fff;
    border:1px solid var(--jsst-content-text);
    border-radius:12px;
    box-shadow:0 18px 50px rgba(15, 23, 42, .30);
}

body.jsst-site-active .calendar-container .buttons-wrapper {
    align-items:center;
    display:flex;
    gap:6px;
    width:100%;
    padding:8px;
    margin:0;
    background:#fff;
    border-top:1px solid var(--jsst-border-color);
}

body.jsst-site-active .calendar-container .buttons-wrapper .btn {
    flex:1 1 0;
    min-width:0;
    min-height:36px;
    padding:7px 10px;
    margin:0;
    color:var(--jsst-top-menu-bg);
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border-color);
    border-radius:9px;
    box-shadow:none;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
}

body.jsst-site-active .calendar-container .buttons-wrapper .btn:hover,
body.jsst-site-active .calendar-container .buttons-wrapper .btn:focus {
    color:var(--jsst-top-menu-bg);
    background:var(--jsst-content-bg);
    border-color:var(--jsst-top-menu-bg);
}

body.jsst-site-active .calendar-container .buttons-wrapper .btn-exit {
    color:#fff;
    background:var(--jsst-top-menu-bg);
    border-color:var(--jsst-top-menu-bg);
}

body.jsst-site-active .calendar-container .buttons-wrapper .btn-exit:hover,
body.jsst-site-active .calendar-container .buttons-wrapper .btn-exit:focus {
    color:#fff;
    background:var(--jsst-top-menu-bg);
    border-color:var(--jsst-top-menu-bg);
}

/* RTL */
[dir="rtl"] #jsst-site,
#jsst-site[dir="rtl"] {
    direction:rtl;
    text-align:right;
}

[dir="rtl"] #jsst-site .js-ticket-table-header-col,
[dir="rtl"] #jsst-site .js-ticket-table-body-col,
[dir="rtl"] #jsst-site #records th,
[dir="rtl"] #jsst-site #records td {
    text-align:right;
}

[dir="rtl"] #jsst-site .js-suredelete .js-tk-suredelete-btn {
    margin-inline-end:auto;
    margin-inline-start:0;
}

/* Responsive */
@media (max-width:1180px) {
    #jsst-site .js-ticket-search-fields-wrp,
    #jsst-site .js-ticket-fields-wrp,
    #jsst-site .jsst-mytickets-filter-main {
        grid-template-columns:repeat(3, minmax(145px, 1fr));
    }

    #jsst-site .js-ticket-feedback-wrapper .js-ticket-fields-wrp {
        grid-template-columns:repeat(3, minmax(145px, 1fr));
    }

    #jsst-site .jsst-mytickets-stats-grid,
    #jsst-site .js-ticket-stats-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    #jsst-site .js-ticket-actions-wrp,
    #jsst-site #tk-more-actions {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:980px) {
    #jsst-site.jsst-layout-formticket .js-form-wrapper,
    #jsst-site.jsst-layout-formstaff .js-ticket-form,
    #jsst-site.jsst-layout-formdepartment .js-ticket-form,
    #jsst-site.jsst-layout-formrole .js-ticket-form,
    #jsst-site.jsst-layout-formannouncement .js-ticket-form,
    #jsst-site.jsst-layout-formfaq .js-ticket-form,
    #jsst-site.jsst-layout-formcategory .js-ticket-form,
    #jsst-site.jsst-layout-formdownload .js-ticket-form,
    #jsst-site.jsst-layout-formmessage .js-ticket-form {
        grid-template-columns:1fr;
    }

    #jsst-site .js-ticket-from-field-wrp-full-width,
    #jsst-site .js-ticket-form-btn-wrp {
        grid-column:auto;
    }

    #jsst-site .js-ticket-search-fields-wrp,
    #jsst-site .js-ticket-fields-wrp,
    #jsst-site .jsst-mytickets-filter-main,
    #jsst-site .js-ticket-feedback-wrapper .js-ticket-fields-wrp {
        grid-template-columns:repeat(2, minmax(145px, 1fr));
    }

    #jsst-site .js-ticket-categories-content {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #jsst-site.jsst-layout-ticketdetail .js-ticket-detail-content-wrp,
    #jsst-site.jsst-layout-ticketdetail .jsst-ticket-detail-grid {
        grid-template-columns:1fr;
    }

    #jsst-site #userpopup,
    #jsst-site .jsst-popup-wrapper,
    #jsst-site .jsst-merge-popup-wrapper {
        width:min(720px, calc(100vw - 24px));
    }
}

@media (max-width:760px) {
    #jsst-site #js-tk-formwrapper:not(.jsst-submit-ticket-form-shell),
    #jsst-site .js-ticket-add-form-wrapper,
    #jsst-site .jsticket_form {
        border-radius:11px;
        padding:16px;
    }

    #jsst-site.jsst-layout-formticket .js-form-wrapper,
    #jsst-site .js-ticket-search-fields-wrp,
    #jsst-site .js-ticket-fields-wrp,
    #jsst-site .jsst-mytickets-filter-main,
    #jsst-site .js-ticket-feedback-wrapper .js-ticket-fields-wrp,
    #jsst-site .js-ticket-staff-report-wrapper .js-ticket-fields-wrp,
    #jsst-site .js-ticket-department-report-wrapper .js-ticket-fields-wrp {
        grid-template-columns:1fr;
    }

    #jsst-site .js-ticket-search-form-btn-wrp,
    #jsst-site .jsst-mytickets-filter-actions {
        grid-column:1;
        width:100%;
    }

    #jsst-site .js-ticket-search-form-btn-wrp > .js-search-button,
    #jsst-site .js-ticket-search-form-btn-wrp > .js-reset-button,
    #jsst-site .jsst-mytickets-filter-actions > button {
        flex:1 1 120px;
    }

    #jsst-site .jsst-mytickets-stats-grid,
    #jsst-site .js-ticket-stats-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #jsst-site .js-ticket-categories-content {
        grid-template-columns:1fr;
    }

    #jsst-site #userpopup .js-ticket-search-fields-wrp {
        grid-template-columns:1fr;
    }

    #jsst-site #userpopup .js-ticket-search-btn-wrp {
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    #jsst-site #userpopup .js-ticket-search-btn,
    #jsst-site #userpopup .js-ticket-reset-btn {
        width:100%;
    }

    #jsst-site .js-ticket-actions-wrp,
    #jsst-site #tk-more-actions {
        grid-template-columns:1fr;
    }

    #jsst-site .js-ticket-table-header {
        display:none;
    }

    #jsst-site .js-ticket-table-wrp {
        border:0;
        overflow:visible;
    }

    #jsst-site .js-ticket-data-row {
        border:1px solid var(--jsst-border);
        border-radius:12px;
        display:grid;
        gap:0;
        margin-bottom:12px;
        min-width:0;
        overflow:hidden;
    }

    #jsst-site .js-ticket-table-body-col {
        align-items:flex-start;
        border-bottom:1px solid var(--jsst-border);
        display:grid;
        gap:4px;
        grid-template-columns:minmax(95px, 34%) minmax(0, 1fr);
        min-height:0;
        padding:10px 12px;
        width:100%;
    }

    #jsst-site .js-ticket-table-body-col:last-child {
        border-bottom:0;
    }

    #jsst-site .js-ticket-display-block {
        color:var(--jsst-muted);
        display:block;
        font-size:12px;
        font-weight:700;
    }

    #jsst-site .js-suredelete {
        inset:6px;
    }

    #jsst-site #jl_pagination.pagination {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site #jl_pagination_pageslink,
    #jsst-site #jl_pagination_box,
    #jsst-site #jl_pagination_counter {
        width:100%;
    }
}

@media (max-width:520px) {
    #jsst-site .js-ticket-from-field {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site .js-ticket-select-user-btn,
    #jsst-site .js-ticket-select-user-btn > a {
        width:100%;
    }

    #jsst-site .js-ticket-form-btn-wrp,
    #jsst-site .js-ticket-priorty-btn-wrp {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site .js-ticket-form-btn-wrp > *,
    #jsst-site .js-ticket-priorty-btn-wrp > * {
        width:100%;
    }

    #jsst-site .jsst-mytickets-stats-grid,
    #jsst-site .js-ticket-stats-grid {
        grid-template-columns:1fr;
    }

    #jsst-site #userpopup .js-ticket-search-btn-wrp {
        grid-template-columns:1fr;
    }

    #jsst-site .js-attachment-file-box {
        align-items:stretch;
        flex-wrap:wrap;
    }

    #jsst-site .js-attachment-file-box input[type="file"] {
        flex-basis:calc(100% - 40px);
    }

    #jsst-site .js-suredelete .js-tk-suredelete-btn {
        margin-inline-start:0;
    }
}

/* High-specificity resets for legacy view styles */
#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp,
#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp.js-ticket-from-field-wrp-full-width {
    float:none;
    margin:0;
    width:auto;
}

#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field-title,
#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field {
    float:none;
    margin-inline:0;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field input.js-ticket-form-field-input,
#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field select,
#jsst-site.jsst-site-root div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field textarea {
    border-radius:var(--jsst-radius-sm);
    float:none;
    margin:0;
    min-height:44px;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-search-fields-wrp,
#jsst-site.jsst-site-root div.js-ticket-table-wrp {
    float:none;
    padding-inline:0;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-table-wrp div.js-ticket-table-header,
#jsst-site.jsst-site-root div.js-ticket-table-wrp div.js-ticket-data-row {
    float:none;
    margin-bottom:0;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content {
    display:grid;
    float:none;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box {
    float:none;
    margin:0;
    width:auto;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title {
    align-items:center;
    display:flex;
    float:none;
    width:100%;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title span.js-ticket-category-download-logo,
#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title span.js-ticket-category-kb-logo {
    align-items:center;
    display:inline-flex;
    float:none;
    height:46px;
    justify-content:center;
    margin:0;
    padding:8px;
    position:static;
    width:46px;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title span.js-ticket-category-download-logo img,
#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title span.js-ticket-category-kb-logo img {
    inset:auto;
    margin:0;
    max-height:28px;
    max-width:28px;
    position:static;
}

#jsst-site.jsst-site-root div.js-ticket-categories-content div.js-ticket-category-box a.js-ticket-category-title span.js-ticket-category-name {
    float:none;
    padding:0;
    text-align:start;
    width:auto;
}

/* Ticket detail's real two-column shell */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-wrapper,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-box:not(.js-ticket-post-reply-box) {
    float:none;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page > #tk-detail-wraper form#adminForm > #tk_detail_content_wraper > .js-ticket-detail-wrapper > .js-ticket-detail-box {
    align-items:start;
    display:grid;
    gap:16px;
    grid-template-columns:minmax(0, 1fr) minmax(245px, 340px);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-box > .js-ticket-detail-left,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-box > .js-ticket-detail-right {
    float:none;
    margin:0;
    min-width:0;
    width:auto;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-btn-box {
    display:grid;
    float:none;
    gap:8px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    margin:14px 0;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-btn-box > .js-button {
    float:none;
    margin:0;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread-cnt,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-post-reply-box,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-post-reply-wrapper {
    float:none;
    min-width:0;
    width:100%;
}

/* Permission and GDPR form actions */
#jsst-site.jsst-site-root .js-ticket-role-form-wrapper .js-ticket-form-btn-wrp,
#jsst-site.jsst-site-root .jsticket_form .js-form-submit-btn-wrp {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-top:20px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-role-form-wrapper .js-role-name-panel,
#jsst-site.jsst-site-root .js-ticket-role-form-wrapper .js-per-wrapper {
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-role-form-wrapper .js-per-subheading,
#jsst-site.jsst-site-root .js-ticket-role-form-wrapper .js-per-data {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
}

/* Report list cards */
#jsst-site.jsst-site-root .js-departmentlist,
#jsst-site.jsst-site-root .js-admin-staff-wrapper {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site.jsst-site-root .js-departmentlist > *,
#jsst-site.jsst-site-root .js-admin-staff-wrapper > * {
    float:none;
    min-width:0;
    width:auto;
}

@media (max-width:980px) {
    #jsst-site.jsst-site-root .jsst-ticket-detail-page > #tk-detail-wraper form#adminForm > #tk_detail_content_wraper > .js-ticket-detail-wrapper > .js-ticket-detail-box {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-btn-box {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:760px) {
    #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-btn-box,
    #jsst-site.jsst-site-root .js-departmentlist,
    #jsst-site.jsst-site-root .js-admin-staff-wrapper {
        grid-template-columns:1fr;
    }
}

/* Consistent message / no-record states on every site page */
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper {
    align-items:center;
    background:var(--jsst-surface);
    border:1px dashed var(--jsst-border-strong);
    border-radius:var(--jsst-radius);
    box-shadow:none;
    clear:both;
    display:flex;
    flex-direction:column;
    float:none;
    justify-content:center;
    margin:16px 0;
    min-height:210px;
    padding:30px 20px;
    text-align:center;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-message-image-wrapper {
    align-items:center;
    border-radius:50%;
    display:inline-flex;
    float:none;
    justify-content:center;
    margin:0 0 14px;
    padding:15px;
}

#jsst-site.jsst-site-root .js-ticket-message-image-wrapper img.js-ticket-message-image {
    margin:0;
    object-fit:contain;
}

#jsst-site.jsst-site-root .js-ticket-messages-data-wrapper {
    align-items:center;
    display:flex;
    flex-direction:column;
    float:none;
    gap:5px;
    max-width:540px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-messages-main-text {
    color:var(--jsst-text);
    display:block;
    font-size:20px;
    font-weight:750;
}

#jsst-site.jsst-site-root .js-ticket-messages-block_text {
    color:var(--jsst-muted);
    display:block;
}

#jsst-site.jsst-site-root .js-ticket-user-login-btn-wrp {
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:12px;
}

#jsst-site.jsst-site-root .js-ticket-login-btn,
#jsst-site.jsst-site-root .js-ticket-register-btn {
    background:var(--jsst-primary);
    border-radius:var(--jsst-radius-sm);
    color:#fff;
    display:inline-flex;
    font-weight:700;
    min-height:42px;
    padding:10px 17px;
    text-decoration:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-field,
#jsst-site.jsst-site-root .jsst-staff-saved-view-row > * {
    margin:0;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-mytickets-list-head {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    margin:16px 0 12px;
}

#jsst-site.jsst-site-root .jsst-mytickets-sort {
    align-items:center;
    display:flex;
    gap:8px;
    margin-inline-start:auto;
}

#jsst-site.jsst-site-root .jsst-myticket-card {
    align-items:stretch;margin-bottom:14px;}

#jsst-site.jsst-site-root .jsst-myticket-main {
    align-items:flex-start;
    display:flex;
    gap:14px;
    min-width:0;
    padding:18px;
}

#jsst-site.jsst-site-root .jsst-myticket-summary {
    flex:1 1 auto;
    min-width:0;
}

#jsst-site.jsst-site-root .jsst-myticket-name > span {
    display:block;
    margin-top:2px;
}

#jsst-site.jsst-site-root .jsst-myticket-summary h3 {
    font-size:17px;
    line-height:1.35;
    margin:0 0 8px;
    overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root .jsst-myticket-department {
    align-items:baseline;
    color:var(--jsst-muted);
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:8px;
}

#jsst-site.jsst-site-root .jsst-myticket-side {
    background:var(--jsst-surface-soft);
    border-inline-start:1px solid var(--jsst-border);
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:16px;
}

#jsst-site.jsst-site-root .jsst-myticket-badges {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

#jsst-site.jsst-site-root .jsst-myticket-status-pill,
#jsst-site.jsst-site-root .jsst-myticket-priority-pill,
#jsst-site.jsst-site-root .jsst-myticket-mini-badge {
    border-radius:999px;
    display:inline-flex;
    font-size:11px;
    font-weight:750;
    line-height:1;
    padding:7px 9px;
    white-space:nowrap;
}

#jsst-site.jsst-site-root .jsst-myticket-priority-pill {
    background:color-mix(in srgb, var(--jsst-priority-color, #16a34a) 14%, white);
    color:var(--jsst-priority-color, #16a34a);
}

#jsst-site.jsst-site-root .jsst-myticket-meta,
#jsst-site.jsst-site-root .jsst-ticket-meta-grid {
    display:grid;
    gap:7px;
    min-width:0;
}

#jsst-site.jsst-site-root .jsst-myticket-meta > div {
    display:grid;
    gap:5px;
    grid-template-columns:minmax(82px, auto) minmax(0, 1fr);
}

#jsst-site.jsst-site-root .jsst-myticket-meta strong {
    color:var(--jsst-content-text);
    font-size:12px;
}

#jsst-site.jsst-site-root .jsst-myticket-meta span {
    color:var(--jsst-muted);
    min-width:0;
    overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root .jsst-ticket-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
}

#jsst-site.jsst-site-root .jsst-ticket-action {
    align-items:center;
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border-strong);
    border-radius:7px;
    color:var(--jsst-text);
    display:inline-flex;
    font-size:12px;
    font-weight:700;
    justify-content:center;
    min-height:34px;
    padding:7px 11px;
    text-decoration:none;
}

#jsst-site.jsst-site-root .jsst-ticket-action.is-primary {
    background:var(--jsst-primary);
    border-color:var(--jsst-primary);
    color:#fff;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty {
    align-items:center;
    border:1px dashed var(--jsst-border-strong);
    border-radius:var(--jsst-radius);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:210px;
    padding:28px;
    text-align:center;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty-icon {
    align-items:center;
    background:var(--jsst-content-bg);
    border-radius:50%;
    display:inline-flex;
    height:60px;
    justify-content:center;
    margin-bottom:12px;
    width:60px;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty-icon::before,
#jsst-site.jsst-site-root .jsst-image-fallback::before {
    color:var(--jsst-primary);
    content:"−";
    font-size:30px;
    font-weight:700;
    line-height:1;
}

/* Ticket detail timeline and reply panels */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread-heading,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-forms-heading {
    background:var(--jsst-dark);
    border-radius:20px 20px 0 0;
    color:#fff;
    font-weight:750;
    margin-top:0px;
    padding:10px 13px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-post-reply-box {
    background:var(--jsst-surface);
    border:1px solid var(--jsst-border);
    border-radius:0 0 20px 20px;
    margin-bottom:12px;
    overflow:hidden;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread-cnt,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-post-reply-wrapper {
    padding:0px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread-add-btn {
    display:flex;
    margin:9px 0 14px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-thread-add-btn-link {
    background:var(--jsst-primary);
    border-color:var(--jsst-primary);
    color:#fff;
}

#jsst-site.jsst-site-root .jsst-frontend-timeline {
    display:grid;
    gap:8px;
    padding:12px;
}

#jsst-site.jsst-site-root .jsst-frontend-timeline-item {
    border-inline-start:3px solid var(--jsst-border-color);
    padding:8px 12px;
}

#jsst-site.jsst-site-root .js-ticket-reply-form-button-wrp {
    display:flex;
    justify-content:center;
    margin-top:16px;
}

@media (max-width:980px) {
    #jsst-site.jsst-site-root .jsst-mytickets-advanced,
    #jsst-site.jsst-site-root .jsst-staff-saved-view-row {
        grid-template-columns:repeat(2, minmax(145px, 1fr));
    }

    #jsst-site.jsst-site-root .jsst-myticket-side {
        border-inline-start:0;
        border-top:1px solid var(--jsst-border);
    }
}

@media (max-width:620px) {
    #jsst-site.jsst-site-root .jsst-mytickets-advanced,
    #jsst-site.jsst-site-root .jsst-staff-saved-view-row {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root .jsst-myticket-main {
        flex-direction:column;
    }

    #jsst-site.jsst-site-root .jsst-myticket-meta > div {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root .jsst-ticket-actions > * {
        flex:1 1 110px;
    }
}

/* Component site navigation */
#jsst-site.jsst-site-root #jsst-header-main-wrapper,
#jsst-site.jsst-site-root #jsst-header,
#jsst-site.jsst-site-root #jsst-tabs-wrp {
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root #jsst-header-main-wrapper {
    margin-bottom:18px;
}

#jsst-site.jsst-site-root #jsst-header {
    background:var(--jsst-top-menu-bg);
    border-radius:14px;
    box-shadow:0 8px 22px rgba(36, 99, 235, .16);
    padding:8px;
}

#jsst-site.jsst-site-root #jsst-tabs-wrp {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

#jsst-site.jsst-site-root .jsst-header-tab {
    display:inline-flex;
    float:none;
    margin:0;
}

#jsst-site.jsst-site-root .jsst-header-tab-right {
    margin-inline-start:auto;
}

#jsst-site.jsst-site-root .js-cp-menu-link {
    align-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:9px;
    color:#fff;
    display:inline-flex;
    font-weight:700;
    min-height:40px;
    padding:8px 14px;
    text-decoration:none;
}

#jsst-site.jsst-site-root .js-cp-menu-link:hover,
#jsst-site.jsst-site-root .js-cp-menu-link.selected {
    background:rgba(6, 37, 91, .28);
    border-color:rgba(255,255,255,.35);
    color:#fff;
}

#jsst-site.jsst-site-root #tk_header_bottom {
    min-width:0;
    overflow-x:auto;
    width:100%;
}

#jsst-site.jsst-site-root #tk_header_bottom_menu {
    align-items:center;
    display:flex;
    gap:7px;
    list-style:none;
    margin:0;
    min-width:max-content;
    padding:0;
}

#jsst-site.jsst-site-root .tk_header_bottom_menu_link {
    float:none;
    margin:0;
}

#jsst-site.jsst-site-root .tk_header_bottom_menu_link a {
    border:1px solid var(--jsst-border);
    border-radius:8px;
    display:inline-flex;
    padding:8px 12px;
    text-decoration:none;
}

#jsst-site.jsst-site-root .tk_header_bottom_menu_link a.selected {
    background:var(--jsst-primary);
    border-color:var(--jsst-primary);
    color:#fff;
}

@media (max-width:620px) {
    #jsst-site.jsst-site-root #jsst-tabs-wrp {
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:thin;
    }

    #jsst-site.jsst-site-root .jsst-header-tab,
    #jsst-site.jsst-site-root .jsst-header-tab-right {
        flex:0 0 auto;
        margin-inline-start:0;
    }
}

/* File/logo fields and option groups */
#jsst-site.jsst-site-root .jsst-logo-upload-field {flex-wrap:wrap;}

#jsst-site.jsst-site-root .jsst-current-logo {
    align-items:center;
    background:var(--jsst-surface-soft);
    border:1px solid var(--jsst-border);
    border-radius:10px;
    display:inline-flex;
    flex:0 0 auto;
    gap:9px;
    padding:8px 11px;
}

#jsst-site.jsst-site-root .jsst-current-logo img {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:8px;
    height:48px;
    object-fit:contain;
    padding:4px;
    width:48px;
}

#jsst-site.jsst-site-root .jsst-current-logo span,
#jsst-site.jsst-site-root #js-form-choose-logo-inst {
    color:var(--jsst-muted);
    font-size:12px;
}

#jsst-site.jsst-site-root .js-ticket-radio-box,
#jsst-site.jsst-site-root .js-ticket-sub-fields,
#jsst-site.jsst-site-root .jsst-formfield-radio-button-wrap,
#jsst-site.jsst-site-root .js-ticket-signature-radio-box {
    align-items:center;
    background:var(--jsst-surface-soft);
    border:1px solid var(--jsst-border);
    border-radius:8px;
    display:inline-flex;
    gap:7px;
    margin:3px 8px 3px 0;
    padding:8px 11px;
}

[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-sub-fields,
[dir="rtl"] #jsst-site.jsst-site-root .jsst-formfield-radio-button-wrap,
[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-signature-radio-box {
    margin:3px 0 3px 8px;
}

#jsst-site.jsst-site-root .js-ticket-append-signature-wrp {
    grid-column:1 / -1;
    min-width:0;
}

#jsst-site.jsst-site-root .jsst-dropzone-message {
    align-items:center;
    background:var(--jsst-content-bg);
    border:1px dashed var(--jsst-top-menu-bg);
    border-radius:11px;
    color:var(--jsst-text);
    display:flex;
    gap:12px;
    justify-content:center;
    margin-bottom:10px;
    min-height:88px;
    padding:15px;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-dropzone-icon {
    align-items:center;
    background:var(--jsst-border-color);
    border-radius:50%;
    color:var(--jsst-primary);
    display:inline-flex;
    flex:0 0 40px;
    font-size:22px;
    height:40px;
    justify-content:center;
    width:40px;
}

#jsst-site.jsst-site-root .jsst-dropzone-copy {
    display:flex;
    flex-direction:column;
    min-width:0;
    text-align:start;
}

#jsst-site.jsst-site-root .jsst-dropzone-copy small {
    color:var(--jsst-muted);
}

/* ======================================================================
   FINAL FRONTEND CONVERGENCE — screenshot-led site audit
   These selectors intentionally carry enough specificity to neutralize
   the legacy per-view rules that are loaded before this file.
   ====================================================================== */

/* Universal site page containment */
#jsst-site.jsst-site-root > .js-row,
#jsst-site.jsst-site-root .js-ticket-department-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper,
#jsst-site.jsst-site-root .js-ticket-download-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper,
#jsst-site.jsst-site-root .js-ticket-roles-wrapper,
#jsst-site.jsst-site-root .js-ticket-mail-wrapper,
#jsst-site.jsst-site-root .js-ticket-feedback-wrapper,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper,
#jsst-site.jsst-site-root .js-ticket-department-report-wrapper {
    float:none;
    margin-inline:auto;
    max-width:100%;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-top-search-wrp {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:0 12px 34px rgba(15, 23, 42, .055);
    clear:both;
    float:none;
    margin:0 0 22px;
    overflow:visible;
    padding:18px;
    position:relative;
    width:100%;
}

/* Shared filter architecture: fields and actions stay inside their card. */
#jsst-site.jsst-site-root .js-ticket-search-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-search-fields-wrp > form.js-filter-form,
#jsst-site.jsst-site-root form.js-filter-form {
    display:block;
    float:none;
    margin:0;
    max-width:100%;
    min-width:0;
    padding:0;
    position:static;
    width:100%;
}

#jsst-site.jsst-site-root form.js-filter-form > .js-ticket-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-ticket-fields-wrp {
    align-items:end;
    display:grid;
    float:none;
    gap:12px;
    grid-template-columns:repeat(2, minmax(170px, 1fr)) auto;
    margin:0;
    max-width:100%;
    min-width:0;
    padding:0;
    position:static;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-form-field,
#jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-form-field-select,
#jsst-site.jsst-site-root .js-ticket-fields-wrp > [class*="js-ticket-form-field"] {
    align-self:end;
    clear:none;
    float:none;
    grid-column:auto;
    margin:0;
    max-width:100%;
    min-width:0;
    padding:0;
    width:100% !important;
}

#jsst-site.jsst-site-root .js-ticket-top-search-wrp input[type="text"],
#jsst-site.jsst-site-root .js-ticket-top-search-wrp input[type="email"],
#jsst-site.jsst-site-root .js-ticket-top-search-wrp input[type="date"],
#jsst-site.jsst-site-root .js-ticket-top-search-wrp select,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-ticket-field-input,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .inputbox {
    float:none;
    height:46px;
    margin:0;
    min-height:46px;
    min-width:0;
    padding:9px 13px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root .js-search-form-feedback-btn-wrp {
    align-items:center;
    align-self:end;
    clear:none;
    display:flex;
    flex-wrap:wrap;
    float:none;
    gap:9px;
    grid-column:auto;
    justify-content:flex-start;
    margin:0;
    min-width:0;
    padding:0;
    position:static;
    width:auto;
}

#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-search-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-reset-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-search-filter-btn,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp button {
    margin:0;
    min-width:104px;
    position:static;
    width:auto;
}

/* Public FAQ / KB / announcements / downloads */
#jsst-site.jsst-site-root .js-ticket-categories-wrp,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp,
#jsst-site.jsst-site-root .js-ticket-download-content-wrp {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:0 12px 34px rgba(15, 23, 42, .05);
    clear:both;
    float:none;
    margin:0 0 22px;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-categories-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-downloads-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-search-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-search-heading-main-wrp {
    align-items:center;
    background:linear-gradient(180deg, #fff, var(--jsst-content-bg));
    border:0;
    border-bottom:1px solid var(--jsst-border);
    display:flex;
    float:none;
    gap:14px;
    justify-content:space-between;
    margin:0;
    min-height:68px;
    padding:17px 22px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-categories-content {
    display:grid;
    float:none;
    gap:13px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    margin:0;
    padding:18px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-category-box {
    clear:none;
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

#jsst-site.jsst-site-root .js-ticket-category-title {
    align-items:center;
    background:#fff;
/*    border: 1px solid var(--jsst-border);*/
    border-radius:12px;
    box-shadow:0 7px 20px rgba(15, 23, 42, .035);
    display:flex;
    gap:12px;
    min-height:76px;
    padding:13px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-category-box:hover .js-ticket-category-title,
#jsst-site.jsst-site-root .js-ticket-category-box:focus-within .js-ticket-category-title,
#jsst-site.jsst-site-root .js-ticket-border-box-kb-jsenabled .js-ticket-category-title {
    border-color:var(--jsst-top-menu-bg);
    box-shadow:0 10px 24px rgba(36, 99, 235, .10);
    transform:translateY(-1px);
}

#jsst-site.jsst-site-root .js-ticket-category-download-logo,
#jsst-site.jsst-site-root .js-ticket-category-kb-logo {
    align-items:center;
    background:var(--jsst-content-bg);
    border-radius:11px;
    display:inline-flex;
    flex:0 0 48px;
    height:48px;
    justify-content:center;
    margin:0;
    width:48px;
}

#jsst-site.jsst-site-root .js-ticket-category-download-logo img,
#jsst-site.jsst-site-root .js-ticket-category-kb-logo img {
    height:28px;
    margin:0;
    object-fit:contain;
    width:28px;
}

#jsst-site.jsst-site-root .js-ticket-subcat-data {
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border);
    border-radius:11px;
    grid-column:1 / -1;
    margin:-4px 0 4px;
    overflow:hidden;
    padding:12px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-downloads-content {
    display:grid;
    float:none;
    gap:10px;
    margin:0;
    padding:18px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-download-box {
    align-items:center;
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:11px;
    display:flex;
    float:none;
    gap:14px;
    justify-content:space-between;
    margin:0;
    min-width:0;
    padding:13px 15px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-download-left {
    flex:1 1 auto;
    min-width:0;
}

#jsst-site.jsst-site-root button.js-ticket-download-title,
#jsst-site.jsst-site-root a.js-ticket-download-title,
#jsst-site.jsst-site-root span.js-ticket-download-title {
    align-items:center;
    background:transparent;
    border:0;
    box-shadow:none;
    color:var(--jsst-text);
    display:inline-flex;
    gap:10px;
    justify-content:flex-start;
    margin:0;
    min-height:36px;
    min-width:0;
    padding:0;
    text-align:start;
    width:auto;
}

#jsst-site.jsst-site-root .js-ticket-download-icon {
    flex:0 0 28px;
    object-fit:contain;
}

/* Public download modal */
#jsst-site.jsst-site-root #js-ticket-main-black-background {
    background:rgba(15, 23, 42, .62);
    inset:0;
    position:fixed;
    z-index:99980;
}

#jsst-site.jsst-site-root #js-ticket-main-popup {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:0 24px 70px rgba(15, 23, 42, .28);
    inset:50% auto auto 50%;
    margin:0;
    max-height:min(78vh, 680px);
    max-width:calc(100vw - 24px);
    overflow:auto;
    padding:0;
    position:fixed;
    transform:translate(-50%, -50%);
    width:min(680px, calc(100vw - 24px));
    z-index:99990;
}

#jsst-site.jsst-site-root #js-ticket-popup-title {
    background:linear-gradient(100deg, var(--jsst-top-menu-bg), #08a8ce);
    color:#fff;
    display:block;
    font-size:20px;
    font-weight:800;
    min-height:62px;
    padding:17px 66px 17px 20px;
    width:100%;
}

#jsst-site.jsst-site-root #js-ticket-popup-close-button {
    align-items:center;
    background:rgba(255, 255, 255, .16);
    border:1px solid rgba(255, 255, 255, .4);
    border-radius:10px;
    display:inline-flex;
    height:38px;
    inset:12px 12px auto auto;
    justify-content:center;
    min-height:38px;
    min-width:38px;
    padding:0;
    position:absolute;
    width:38px;
}

[dir="rtl"] #jsst-site.jsst-site-root #js-ticket-popup-title {
    padding:17px 20px 17px 66px;
}

[dir="rtl"] #jsst-site.jsst-site-root #js-ticket-popup-close-button {
    inset:12px auto auto 12px;
}

#jsst-site.jsst-site-root #js-ticket-main-content,
#jsst-site.jsst-site-root #js-ticket-main-downloadallbtn {
    padding:18px;
}

/* Submit ticket — core rows and generated custom fields
   The template uses .jsst-form-row for layout rows. Generated custom fields
   keep .js-form-wrapper as their own field container, avoiding nested grids. */
#jsst-site.jsst-site-root.jsst-layout-formticket #js-tk-formwrapper {
    overflow:visible;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row {
    align-items:start;
    display:grid;
    float:none;
    gap:18px 22px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin:0 0 18px;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > * {
    clear:none;
    float:none;
    margin:0;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    width:auto;
}

/* Generated custom fields are fields, not another form row. */
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-wrapper {
    display:block;
    grid-template-columns:none;
    margin:0;
    min-width:0;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-col-md-12,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-wrapper.fullwidth,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-button-wrapper,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-attachment-wrp,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-ticket-attachment-wrp,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-ticket-form-instruction-message,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) {
    grid-column:1 / -1;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row .js-form-title {
    display:block;
    float:none;
    margin:0 0 7px;
    min-height:0;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row .js-form-value,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row .js-ticket-from-field {
    float:none;
    margin:0;
    max-width:100%;
    min-width:0;
    padding:0;
    width:100%;
}

/* Staff user picker: input consumes all remaining space without a dead gap. */
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell .js-ticket-from-field {
    align-items:stretch;
    display:grid;
    gap:0px;
    grid-template-columns:minmax(0, 1fr) 128px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell .js-ticket-select-user-field,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell .js-ticket-select-user-btn {
    float:none;
    inset:auto;
    margin:0;
    max-width:none;
    min-width:0;
    padding:0;
    position:static;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell #username-text,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell .js-ticket-select-user-btn > a {
    box-sizing:border-box;
    height:54px;
    margin:0;
    max-width:none;
    min-height:54px;
    width:100%;
}

/* Joomla 5/6 calendar markup may place the input/button directly in
   .field-calendar or inside a nested .input-group. Support both structures. */
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar {
    display:grid;
    gap:0;
    grid-template-columns:minmax(0, 1fr) 54px;
    margin:0;
    max-width:100%;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar > .input-group {
    display:grid;
    gap:0;
    grid-column:1 / -1;
    grid-template-columns:minmax(0, 1fr) 54px;
    margin:0;
    max-width:100%;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar .input-group-append {
    display:contents;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar input {
    border-radius:14px 0 0 14px;
    grid-column:1;
    margin:0;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar button:not(.js-btn),
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar .btn:not(.js-btn) {
    align-items:center;
    background:var(--jsst-primary, var(--jsst-top-menu-bg));
    border:1px solid var(--jsst-primary, var(--jsst-top-menu-bg));
    border-radius:0 14px 14px 0;
    color:#fff;
    display:inline-flex;
    grid-column:2;
    height:54px;
    justify-content:center;
    margin:0;
    max-width:54px;
    min-height:54px;
    min-width:54px;
    padding:0;
    position:static;
    width:54px;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar button:not(.js-btn):hover,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar .btn:not(.js-btn):hover,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar button:not(.js-btn):focus,
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .field-calendar .btn:not(.js-btn):focus {
    background:var(--jsst-primary-dark, var(--jsst-top-menu-bg));
    border-color:var(--jsst-primary-dark, var(--jsst-top-menu-bg));
    color:#fff;
}

/* Multi-option checkbox fields must size to their content. The legacy base
   stylesheet fixed the option wrapper at 50px, which made later options overlap
   the following custom field. */
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-signature-radio-box-wrp:has(> .js-ticket-signature-radio-box) {
    align-items:stretch;
    border:1px solid var(--jsst-border-strong, var(--jsst-border-color));
    border-radius:14px;
    box-sizing:border-box;
    display:grid;
    float:none;
    gap:8px;
    grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
    height:auto;
    margin:0;
    min-height:54px;
    overflow:visible;
    padding:8px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-signature-radio-box-wrp:has(> .js-ticket-signature-radio-box) > .js-ticket-signature-radio-box {
    align-items:center;
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border, var(--jsst-border-color));
    border-radius:10px;
    box-sizing:border-box;
    display:flex;
    float:none;
    gap:8px;
    height:auto;
    margin:0;
    min-height:42px;
    min-width:0;
    padding:9px 11px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-signature-radio-box-wrp:has(> .js-ticket-signature-radio-box) > .js-ticket-signature-radio-box input[type="checkbox"] {
    flex:0 0 18px;
    height:18px;
    margin:0;
    min-height:18px;
    min-width:18px;
    width:18px;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-signature-radio-box-wrp:has(> .js-ticket-signature-radio-box) > .js-ticket-signature-radio-box label {
    flex:1 1 auto;
    line-height:1.35;
    margin:0;
    min-width:0;
    overflow-wrap:anywhere;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-sub-fields,
#jsst-site.jsst-site-root.jsst-layout-formticket .jsst-formfield-radio-button-wrap,
#jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-checkbox-button,
#jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-radio-button {
    align-items:center;
    display:inline-flex;
    float:none;
    gap:7px;
    height:auto;
    margin:4px 7px 4px 0;
    max-width:100%;
    min-height:38px;
    padding:8px 10px;
    width:auto;
}

/* Terms and conditions is a full-width form row. Keep its text readable and
   allow the agreement panel to use the remaining horizontal space. */
#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) {
    align-items:start;
    display:grid;
    gap:18px;
    grid-template-columns:minmax(180px, 230px) minmax(0, 1fr);
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) > .js-form-title {
    margin:13px 0 0;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) > .js-form-value {
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-custom-terms-and-condition-box {
    align-items:flex-start;
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border-strong);
    border-radius:14px;
    box-sizing:border-box;
    display:flex;
    gap:10px;
    margin:0;
    min-height:56px;
    padding:14px 16px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-custom-terms-and-condition-box input[type="checkbox"] {
    flex:0 0 auto;
    margin:4px 0 0;
}

#jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-custom-terms-and-condition-box label {
    flex:1 1 auto;
    line-height:1.5;
    margin:0;
    max-width:none;
    min-width:0;
    overflow-wrap:anywhere;
    width:auto;
}

[dir="rtl"] #jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-sub-fields,
[dir="rtl"] #jsst-site.jsst-site-root.jsst-layout-formticket .jsst-formfield-radio-button-wrap {
    margin:4px 0 4px 7px;
}

#jsst-site.jsst-site-root .jsst-dropzone-message,
#jsst-site.jsst-site-root .jsst-attachment-dropzone {
    float:none;
    max-width:100%;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-attachment-file-box,
#jsst-site.jsst-site-root .js-value-text.js-attachment-file-box {
    align-items:center;
    display:flex;
    float:none;
    gap:9px;
    min-width:0;
    width:100%;
}

@media (max-width:980px) {
    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .jsst-user-picker-cell .js-ticket-from-field {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-ticket-signature-radio-box-wrp:has(> .js-ticket-signature-radio-box) {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row > .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) {
        gap:8px;
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm .js-form-wrapper:has(.js-ticket-custom-terms-and-condition-box) > .js-form-title {
        margin-top:0;
    }
}

/* User picker shared by Submit Ticket and Add Staff */
#jsst-site.jsst-site-root #userpopupblack {
    background:rgba(15, 23, 42, .64);
    inset:0;
    position:fixed;
    z-index:99980;
}

#jsst-site.jsst-site-root #userpopup {
    background:#fff;
    border:1px solid #cbd8e8;
    border-radius:16px;
    box-shadow:0 24px 70px rgba(15, 23, 42, .30);
    inset:50% auto auto 50%;
    margin:0;
    max-height:min(82vh, 720px);
    max-width:calc(100vw - 24px);
    overflow:auto;
    padding:0;
    position:fixed;
    transform:translate(-50%, -50%);
    width:min(900px, calc(100vw - 24px));
    z-index:99990;
}

#jsst-site.jsst-site-root #userpopup .jsst-popup-header {
    align-items:center;
    background:linear-gradient(100deg, var(--jsst-top-menu-bg), #08a8ce);
    color:#fff;
    display:flex;
    gap:12px;
    justify-content:space-between;
    margin:0;
    min-height:62px;
    padding:12px 14px 12px 20px;
    position:sticky;
    top:0;
    z-index:3;
}

#jsst-site.jsst-site-root #userpopup .popup-header-close-img {
    align-items:center;
    background:rgba(255, 255, 255, .14);
    border:1px solid rgba(255, 255, 255, .45);
    border-radius:10px;
    display:inline-flex;
    flex:0 0 38px;
    height:38px;
    inset:auto;
    justify-content:center;
    margin:0;
    padding:7px;
    position:static;
    width:38px;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-popup-search-wrp,
#jsst-site.jsst-site-root #userpopup #records {
    padding:16px 18px;
}

#jsst-site.jsst-site-root #userpopup #userpopupsearch .js-ticket-search-top {
    align-items:end;
    display:grid;
    gap:10px;
    grid-template-columns:repeat(3, minmax(130px, 1fr)) auto;
    margin:0;
    width:100%;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-search-left {
    display:contents;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-search-input-fields {
    float:none;
    margin:0;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-search-right,
#jsst-site.jsst-site-root #userpopup .js-ticket-search-btn-wrp {
    align-items:center;
    display:flex;
    float:none;
    gap:8px;
    justify-content:flex-end;
    margin:0;
    min-width:0;
    width:auto;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-search-btn,
#jsst-site.jsst-site-root #userpopup .js-ticket-reset-btn {
    height:46px;
    margin:0;
    min-height:46px;
    min-width:96px;
    padding:9px 15px;
    width:auto;
}

#jsst-site.jsst-site-root #userpopup #records-inner {
    border:1px solid var(--jsst-border);
    border-radius:12px;
    min-width:680px;
    overflow:hidden;
    width:100%;
}

#jsst-site.jsst-site-root #userpopup #records {
    overflow-x:auto;
}

/* Staff form and profile */
#jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-add-form-wrapper {
    overflow:visible;
}

#jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-form {
    align-items:start;
    display:grid;
    gap:18px 22px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-from-field-wrp {
/*    clear: none;*/
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-layout-formstaff #rolepermissionedit,
#jsst-site.jsst-site-root.jsst-layout-formstaff #rolepermission,
#jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-form-btn-wrp {
    grid-column:1 / -1;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-wrp {
    align-items:start;
    display:grid;
    gap:22px;
    grid-template-columns:minmax(190px, 260px) minmax(0, 1fr);
    padding:20px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile #jsst-myprofileimageform {
    display:contents;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-left,
#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-right {
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-user-img-wrp {
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border);
    border-radius:16px;
    padding:16px;
    text-align:center;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile img.profile-image {
    border-radius:14px;
    height:170px;
    object-fit:cover;
    width:170px;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-add-form-wrapper {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding:18px;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-from-field-wrp-full-width {
    grid-column:auto;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .editable {
    align-items:center;
    display:flex;
    gap:8px;
}

#jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-form-img {
    cursor:pointer;
    flex:0 0 34px;
    height:34px;
    object-fit:contain;
    padding:7px;
    width:34px;
}

/* Management list pages */
#jsst-site.jsst-site-root .js-ticket-table-wrp {
    background:#fff;
    border-radius:13px;
    clear:both;
    display:block;
    float:none;
    margin:0;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-data-row {
    align-items:center;
    display:grid;
    float:none;
    gap:0;
    margin:0;
    min-width:760px;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-table-header-col,
#jsst-site.jsst-site-root .js-ticket-table-body-col {
    align-items:center;
    display:flex;
    float:none;
    min-height:58px;
    min-width:0;
    overflow-wrap:anywhere;
    padding:11px 13px;
    width:auto;
}

#jsst-site.jsst-site-root .js-ticket-table-header-col {
    color:var(--jsst-content-text);
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
}

#jsst-site.jsst-site-root .js-ticket-data-row {
    border-top:1px solid var(--jsst-border-color);
    position:relative;
}

#jsst-site.jsst-site-root .js-ticket-table-body-col:last-child,
#jsst-site.jsst-site-root .js-ticket-action-col {
    gap:6px;
    justify-content:flex-end;
    white-space:normal;
}

#jsst-site.jsst-site-root .js-tk-button,
#jsst-site.jsst-site-root .js-ticket-action-button,
#jsst-site.jsst-site-root .js-ticket-table-body-col:last-child > a {
    align-items:center;
    border:1px solid var(--jsst-border);
    border-radius:9px;
    display:inline-flex;
    flex:0 0 36px;
    height:36px;
    justify-content:center;
    margin:0;
    min-height:36px;
    min-width:36px;
    overflow:hidden;
    padding:7px;
    text-decoration:none;
    width:36px;
}

#jsst-site.jsst-site-root .js-tk-button img,
#jsst-site.jsst-site-root .js-ticket-action-button img,
#jsst-site.jsst-site-root .js-ticket-table-body-col:last-child > a img {
    height:18px;
    margin:0;
    object-fit:contain;
    width:18px;
}

#jsst-site.jsst-site-root .js-suredelete {
    align-items:center;
    background:rgba(255, 255, 255, .98);
    border:1px solid #fecaca;
    border-radius:10px;
    display:none;
    gap:10px;
    inset:7px;
    justify-content:flex-end;
    padding:8px 10px;
    position:absolute;
    z-index:4;
}

#jsst-site.jsst-site-root .js-suredelete[style*="block"],
#jsst-site.jsst-site-root .js-suredelete[style*="flex"] {
    display:flex;
}

/* Pagination is always a full-width footer, never a floating column. */
#jsst-site.jsst-site-root .jsst-pagination-form,
#jsst-site.jsst-site-root #jl_pagination {
    clear:both;
    float:none;
    max-width:100%;
    width:100%;
}
#jsst-site.jsst-site-root .js-ticket-download-wrapper:not(.jsst-downloads-management-page):not(.jsst-article-management-page) .jsst-pagination-form {
    margin-top: -45px;
    border-radius: 16px;
    border: 1px solid var(--jsst-border);
    border-top: 0;
}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper:not(.jsst-downloads-management-page):not(.jsst-article-management-page) .jsst-pagination-form {
    margin-top: -45px;
    border-radius: 16px;
    border: 1px solid var(--jsst-border);
    border-top: 0;
}

#jsst-site.jsst-site-root #jl_pagination {
    align-items:center;
    background:#fff;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:space-between;
    margin:0;
    padding:20px;
    border-radius: 0 0 16px 16px;
}

#jsst-site.jsst-site-root #jl_pagination select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:25px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:17px 17px;
}

/* My Tickets cards and filters */
#jsst-site.jsst-site-root .jsst-mytickets-stats-grid {
    display:grid;
    float:none;
    gap:12px;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    margin:0 0 18px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid) {
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

#jsst-site.jsst-site-root .jsst-myticket-stat {
    min-width:0;
    overflow:hidden;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:15px;
    box-shadow:0 10px 28px rgba(15, 23, 42, .05);
    margin:0 0 18px;
    padding:16px;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-main {
    align-items:end;
    display:grid;
    gap:11px;
    grid-template-columns:repeat(3, minmax(145px, 1fr)) auto;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-mytickets-advanced > *,
#jsst-site.jsst-site-root .jsst-mytickets-filter-main > * {
    float:none;
    margin:0;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-myticket-card {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:15px;
    box-shadow:0 8px 24px rgba(15, 23, 42, .045);
    display:grid;
    gap:0;
    grid-template-columns:minmax(0, 1fr) minmax(190px, 250px);
    margin:0 0 13px;
    min-width:0;
    overflow:hidden;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-myticket-main,
#jsst-site.jsst-site-root .jsst-myticket-side {
    min-width:0;
}

/* Ticket detail and all staff actions/popups */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #tk-detail-wraper,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #tk_detail_content_wraper,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-wrapper {
    clear:both;
    float:none;
    max-width:100%;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-content-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-ticket-detail-grid {
    align-items:start;
    display:grid;
    gap:16px;
    grid-template-columns:minmax(0, 1fr) minmax(250px, 320px);
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-left,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-right {
    clear:none;
    float:none;
    margin:0;
    max-width:100%;
    min-width:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-btn-box,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-actions-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #tk-more-actions {
    display:grid;
    float:none;
    gap:8px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-button,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg-btn,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-thread-add-btn-link {
    align-items:center;
    display:inline-flex;
    gap:8px;
    justify-content:flex-start;
    min-height:42px;
    min-width:0;
    overflow:hidden;
    padding:9px 11px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-button img,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg-btn img,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-thread-add-btn-link img {
    flex:0 0 23px;
    height:23px;
    object-fit:contain;
    width:23px;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-thread-wrapper,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-post-reply-wrapper,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-box {
    clear:both;
    float:none;
    max-width:100%;
    min-width:0;
    overflow:visible;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-thread-body,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-thread-data,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-row,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-field-value {
    min-width:0;
    overflow-wrap:anywhere;
    white-space:normal;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-history-back,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-private-crendentials-back,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-popup-background,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-popup-backdrop {
    background:rgba(15, 23, 42, .64);
    inset:0;
    position:fixed;
    z-index:99970;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-history-popup,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-private-crendentials-popup,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-edit-form-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-merge-popup-wrapper,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .private-crendentials-add-new-popup {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:0 24px 70px rgba(15, 23, 42, .28);
    max-height:calc(100vh - 30px);
    max-width:calc(100vw - 24px);
    min-width:0;
    overflow:auto;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-history-head,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail #js-private-crendentials-head,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-popup-header {
    align-items:center;
    background:linear-gradient(100deg, var(--jsst-top-menu-bg), #08a8ce);
    color:#fff;
    display:flex;
    gap:12px;
    justify-content:space-between;
    min-height:60px;
    padding:12px 14px 12px 20px;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-dialog-close,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .popup-header-close-img,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .close-history {
    align-items:center;
    background:rgba(255, 255, 255, .14);
    border:1px solid rgba(255, 255, 255, .42);
    border-radius:9px;
    display:inline-flex;
    flex:0 0 38px;
    height:38px;
    inset:auto;
    justify-content:center;
    margin:0;
    padding:7px;
    position:static;
    width:38px;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-edit-form-wrp {
    display:grid;
    gap:14px;
    padding:18px;
    width:min(720px, calc(100vw - 24px));
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-priorty-btn-wrp{
    gap: 0 !important;
}
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-edit-field-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-priorty-btn-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-form-button-wrapper {
    clear:both;
    float:none;
    margin:0;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-priorty-btn-wrp,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-form-button-wrapper {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    justify-content:flex-end;
}

/* Mail */
#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp {flex-wrap:wrap;}

#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mail-btn,
#jsst-site.jsst-site-root.jsst-controller-mail .js-add-link.button {
    float:none;
    margin:0;
}

#jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-form {
    display:grid;
    gap:18px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-from-field-wrp-full-width,
#jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-form-btn-wrp {
    grid-column:1 / -1;
}

/* Reports */
#jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-search-fields-wrp > form.js-filter-form {
    align-items:end;
    display:grid;
    gap:12px;
    grid-template-columns:minmax(0, 1fr) auto;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports form.js-filter-form > .js-ticket-fields-wrp {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2, minmax(170px, 1fr));
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-search-form-btn-wrp {
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field .field-calendar,
#jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field .input-group {
    align-items:stretch;
    display:flex;
    float:none;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field input {
    border-radius:10px 0 0 10px;
    flex:1 1 auto;
    min-width:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field button:not(.js-btn),
#jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field .btn:not(.js-btn) {
    border:1px solid var(--jsst-border-strong);
    border-inline-start:0;
    border-radius:0 10px 10px 0;
    flex:0 0 46px;
    height:46px;
    min-height:46px;
    min-width:46px;
    padding:0;
    width:46px;
}

[dir="rtl"] #jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field input {
    border-radius:0 10px 10px 0;
}

[dir="rtl"] #jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field button:not(.js-btn),
[dir="rtl"] #jsst-site.jsst-site-root.jsst-controller-reports .jsst-report-date-field .btn:not(.js-btn) {
    border-inline-end:0;
    border-inline-start:1px solid var(--jsst-border-strong);
    border-radius:10px 0 0 10px;
}

#jsst-site.jsst-site-root.jsst-controller-reports #curve_chart,
#jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-pie-chart-wrapper,
#jsst-site.jsst-site-root.jsst-controller-reports [id^="pie3d_chart"] {
    clear:both;
    float:none;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports .js-admin-report-box-wrapper {
    display:grid;
    float:none;
    gap:12px;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    padding:18px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports .js-admin-box,
#jsst-site.jsst-site-root.jsst-controller-reports .js-admin-report-box {
    clear:none;
    float:none;
    margin:0;
    min-width:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-controller-reports .js-admin-staff-wrapper,
#jsst-site.jsst-site-root.jsst-controller-reports .js-departmentlist {
    align-items:center;
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:13px;
    display:grid;
    float:none;
    gap:16px;
    grid-template-columns:minmax(220px, .9fr) minmax(0, 1.4fr);
    margin:0 0 12px;
    min-width:0;
    padding:15px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-reports .jsticket-left,
#jsst-site.jsst-site-root.jsst-controller-reports .jsticket-right {
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-controller-reports .jsticket-right {
    display:grid;
    gap:8px;
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

/* Feedback */
#jsst-site.jsst-site-root.jsst-controller-feedback .js-ticket-fields-wrp {
    align-items:end;
    display:grid;
    gap:11px;
    grid-template-columns:repeat(2, minmax(150px, 1fr)) auto;
}

#jsst-site.jsst-site-root.jsst-controller-feedback #js-filter-wrapper-toggle-area {
    display:grid;
    gap:11px;
    grid-column:1 / -1;
    grid-template-columns:repeat(3, minmax(150px, 1fr));
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-feedback #js-filter-wrapper-toggle-area[style*="none"] {
    display:none;
}

#jsst-site.jsst-site-root.jsst-controller-feedback .js-search-form-feedback-btn-wrp {
    align-self:end;
    grid-column:auto;
}

#jsst-site.jsst-site-root.jsst-controller-feedback .js-ticket-feedback-list-wrapper {
    float:none;
    margin:0;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-feedback .jsst-feedback-det-list-top {
    align-items:start;
    display:grid;
    gap:14px;
    grid-template-columns:64px minmax(0, 1fr);
}

#jsst-site.jsst-site-root.jsst-controller-feedback .jsst-feedback-det-list-data-wrp {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    min-width:0;
}

/* GDPR and permission/action forms */
#jsst-site.jsst-site-root.jsst-controller-gdpr .jsticket_form,
#jsst-site.jsst-site-root.jsst-controller-rolepermissions form,
#jsst-site.jsst-site-root.jsst-controller-userpermissions form {
    display:grid;
    gap:17px;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-controller-gdpr .js-ticket-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-controller-rolepermissions .js-ticket-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-controller-userpermissions .js-ticket-form-btn-wrp {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    width:100%;
}

/* Empty/message states */
#jsst-site.jsst-site-root .js-ticket-record-not-found,
#jsst-site.jsst-site-root .js-ticket-no-record-found,
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .jsst-empty-state {
    clear:both;
    float:none;
    margin:0;
    max-width:100%;
    min-height:180px;
    min-width:0;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-no-record-found img,
#jsst-site.jsst-site-root .js-ticket-record-not-found img {
    height:64px;
    object-fit:contain;
    width:64px;
}

/* RTL logical alignment */
[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-table-body-col:last-child,
[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-action-col,
[dir="rtl"] #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-priorty-btn-wrp {
    justify-content:flex-start;
}

[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-download-title,
[dir="rtl"] #jsst-site.jsst-site-root .js-ticket-category-title,
[dir="rtl"] #jsst-site.jsst-site-root .js-button {
    text-align:right;
}

/* Intermediate/narrow layouts */
@media (max-width:1180px) {
    #jsst-site.jsst-site-root .js-ticket-categories-content {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
    #jsst-site.jsst-site-root.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid) {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    #jsst-site.jsst-site-root.jsst-controller-reports .js-admin-report-box-wrapper,
    #jsst-site.jsst-site-root.jsst-controller-reports .jsticket-right {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:980px) {
    #jsst-site.jsst-site-root form.js-filter-form > .js-ticket-fields-wrp,
    #jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-ticket-fields-wrp {
        grid-template-columns:repeat(2, minmax(145px, 1fr));
    }

    #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
    #jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp {
        grid-column:1 / -1;
        justify-content:flex-end;
        width:100%;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket #adminForm > .jsst-form-row,
    #jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-form,
    #jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-form,
    #jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-add-form-wrapper {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-formstaff #rolepermissionedit,
    #jsst-site.jsst-site-root.jsst-layout-formstaff #rolepermission,
    #jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-form-btn-wrp,
    #jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-from-field-wrp-full-width,
    #jsst-site.jsst-site-root.jsst-layout-formmessage .js-ticket-form-btn-wrp {
        grid-column:auto;
    }

    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-detail-content-wrp,
    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .jsst-ticket-detail-grid {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-btn-box,
    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-actions-wrp,
    #jsst-site.jsst-site-root.jsst-layout-ticketdetail #tk-more-actions {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #jsst-site.jsst-site-root .jsst-mytickets-filter-main,
    #jsst-site.jsst-site-root .jsst-mytickets-advanced {
        grid-template-columns:repeat(2, minmax(145px, 1fr));
    }

    #jsst-site.jsst-site-root .jsst-myticket-card {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-search-fields-wrp > form.js-filter-form,
    #jsst-site.jsst-site-root.jsst-controller-reports .js-admin-staff-wrapper,
    #jsst-site.jsst-site-root.jsst-controller-reports .js-departmentlist {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-wrp {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-staffprofile .js-ticket-profile-left {
        max-width:320px;
        width:100%;
    }
}

@media (max-width:760px) {
    #jsst-site.jsst-site-root .js-ticket-top-search-wrp {
        border-radius:12px;
        padding:14px;
    }

    #jsst-site.jsst-site-root form.js-filter-form > .js-ticket-fields-wrp,
    #jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-ticket-fields-wrp,
    #jsst-site.jsst-site-root .js-ticket-categories-content,
    #jsst-site.jsst-site-root .jsst-mytickets-filter-main,
    #jsst-site.jsst-site-root .jsst-mytickets-advanced,
    #jsst-site.jsst-site-root.jsst-controller-reports form.js-filter-form > .js-ticket-fields-wrp,
    #jsst-site.jsst-site-root.jsst-controller-feedback .js-ticket-fields-wrp,
    #jsst-site.jsst-site-root.jsst-controller-feedback #js-filter-wrapper-toggle-area,
    #jsst-site.jsst-site-root.jsst-controller-feedback .jsst-feedback-det-list-data-wrp {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
    #jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp,
    #jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-search-form-btn-wrp,
    #jsst-site.jsst-site-root.jsst-controller-feedback .js-search-form-feedback-btn-wrp {
        grid-column:1;
        justify-content:stretch;
        width:100%;
    }

    #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp > *,
    #jsst-site.jsst-site-root.jsst-controller-reports .js-ticket-search-form-btn-wrp > *,
    #jsst-site.jsst-site-root.jsst-controller-feedback .js-search-form-feedback-btn-wrp > * {
        flex:1 1 120px;
        width:auto;
    }

    #jsst-site.jsst-site-root #userpopup #userpopupsearch .js-ticket-search-top {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root #userpopup .js-ticket-search-left {
        display:grid;
        gap:9px;
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root #userpopup .js-ticket-search-right,
    #jsst-site.jsst-site-root #userpopup .js-ticket-search-btn-wrp {
        justify-content:stretch;
        width:100%;
    }

    #jsst-site.jsst-site-root #userpopup .js-ticket-search-btn,
    #jsst-site.jsst-site-root #userpopup .js-ticket-reset-btn {
        flex:1 1 0;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-from-field,
    #jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-from-field:has(.js-ticket-select-user-field) {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-select-user-btn,
    #jsst-site.jsst-site-root.jsst-layout-formticket .js-ticket-select-user-btn > a,
    #jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-select-user-btn,
    #jsst-site.jsst-site-root.jsst-layout-formstaff .js-ticket-select-user-btn > a {
        width:100%;
    }

    #jsst-site.jsst-site-root .js-ticket-download-box {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site.jsst-site-root .js-ticket-download-right,
    #jsst-site.jsst-site-root .js-ticket-download-btn,
    #jsst-site.jsst-site-root .js-ticket-download-btn button {
        width:100%;
    }

    #jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
    #jsst-site.jsst-site-root.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid),
    #jsst-site.jsst-site-root.jsst-controller-reports .js-admin-report-box-wrapper,
    #jsst-site.jsst-site-root.jsst-controller-reports .jsticket-right {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    #jsst-site.jsst-site-root.jsst-controller-feedback .jsst-feedback-det-list-top {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-controller-feedback .jsst-feedback-det-list-img-wrp {
        max-width:72px;
    }
}

@media (max-width:520px) {
    #jsst-site.jsst-site-root .js-ticket-categories-heading-wrp,
    #jsst-site.jsst-site-root .js-ticket-downloads-heading-wrp,
    #jsst-site.jsst-site-root .js-ticket-search-heading-wrp,
    #jsst-site.jsst-site-root .js-ticket-search-heading-main-wrp {
        align-items:stretch;
        flex-direction:column;
        padding:15px;
    }

    #jsst-site.jsst-site-root .js-ticket-heading-right,
    #jsst-site.jsst-site-root .js-ticket-add-download-btn {
        width:100%;
    }

    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-btn-box,
    #jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-ticket-actions-wrp,
    #jsst-site.jsst-site-root.jsst-layout-ticketdetail #tk-more-actions,
    #jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
    #jsst-site.jsst-site-root.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid),
    #jsst-site.jsst-site-root.jsst-controller-reports .js-admin-report-box-wrapper,
    #jsst-site.jsst-site-root.jsst-controller-reports .jsticket-right {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root #jl_pagination {
        align-items:stretch;
        flex-direction:column;
    }

    #jsst-site.jsst-site-root #jl_pagination_pageslink,
    #jsst-site.jsst-site-root #jl_pagination_box,
    #jsst-site.jsst-site-root #jl_pagination_counter {
        justify-content:center;
        text-align:center;
        width:100%;
    }
}

/* Permission summaries */
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper,
#jsst-site.jsst-site-root.jsst-controller-userpermissions #js-tk-formwrapper {
    display:grid;
    gap:16px;
    padding:clamp(16px, 2vw, 24px);
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-wrapper,
#jsst-site.jsst-site-root.jsst-controller-userpermissions .js-per-wrapper {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:13px;
    display:grid;
    gap:9px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    overflow:hidden;
    padding:0 14px 14px;
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading,
#jsst-site.jsst-site-root.jsst-controller-userpermissions .js-per-subheading {
    background:var(--jsst-content-bg);
    border-bottom:1px solid var(--jsst-border);
    display:block;
    grid-column:1 / -1;
    margin:0 -14px 5px;
    padding:13px 15px;
    width:auto;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data,
#jsst-site.jsst-site-root.jsst-controller-userpermissions .js-per-data {
    align-items:center;
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border-color);
    border-radius:9px;
    display:flex;
    gap:8px;
    min-height:44px;
    min-width:0;
    padding:9px 11px;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data label,
#jsst-site.jsst-site-root.jsst-controller-userpermissions .js-per-data label {
    margin:0;
    min-width:0;
    overflow-wrap:anywhere;
}

/* Feedback rating */
#jsst-site.jsst-site-root.jsst-layout-formfeedback .jsst-rating-div {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    min-height:52px;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-formfeedback img.rating_image {
    background:var(--jsst-content-bg);
    border:2px solid transparent;
    border-radius:12px;
    cursor:pointer;
    height:48px;
    object-fit:contain;
    padding:5px;
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    width:48px;
}

#jsst-site.jsst-site-root.jsst-layout-formfeedback img.rating_image:hover,
#jsst-site.jsst-site-root.jsst-layout-formfeedback img.rating_image:focus,
#jsst-site.jsst-site-root.jsst-layout-formfeedback img.rating_image.selected {
    border-color:var(--jsst-primary);
    box-shadow:0 0 0 3px rgba(36, 99, 235, .11);
    outline:0;
    transform:translateY(-1px);
}

/* Standalone Select User page */
#jsst-site.jsst-site-root .jsst-standalone-user-picker {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:15px;
    box-shadow:var(--jsst-shadow);
    margin:0 auto;
    max-width:100%;
    overflow:hidden;
    width:min(980px, 100%);
}

#jsst-site.jsst-site-root .jsst-standalone-user-picker form {
    align-items:end;
    display:grid;
    gap:10px;
    grid-template-columns:repeat(3, minmax(150px, 1fr)) auto;
    padding:16px;
}

#jsst-site.jsst-site-root .jsst-standalone-user-picker form > * {
    min-width:0;
}

/* Visitor status and success pages */
#jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-checkstatus-wrp,
#jsst-site.jsst-site-root.jsst-layout-visitorsuccessmessage .jsst-visitor-message-wrapper {
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:16px;
    box-shadow:var(--jsst-shadow);
    margin:0 auto;
    max-width:720px;
    padding:clamp(20px, 4vw, 36px);
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-form {
    display:grid;
    gap:17px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
}

#jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-form-btn-wrp {
    grid-column:1 / -1;
}

@media (max-width:760px) {
    #jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-wrapper,
    #jsst-site.jsst-site-root.jsst-controller-userpermissions .js-per-wrapper,
    #jsst-site.jsst-site-root .jsst-standalone-user-picker form,
    #jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-form {
        grid-template-columns:1fr;
    }

    #jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-form-btn-wrp {
        grid-column:auto;
    }
}

/* ========================================================================== 
   COMPONENT-WIDTH RESPONSIVENESS
   Joomla templates can render the component in a narrow main column even on a
   wide monitor. These classes are maintained by jsst-site-complete.js using a
   ResizeObserver, so layouts respond to the space actually available to JSST.
   ========================================================================== */
#jsst-site.jsst-site-root.jsst-cq-compact .js-ticket-categories-content {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-compact .jsst-mytickets-stats-grid,
#jsst-site.jsst-site-root.jsst-cq-compact.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid) {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-compact.jsst-controller-reports .js-admin-report-box-wrapper,
#jsst-site.jsst-site-root.jsst-cq-compact.jsst-controller-reports .jsticket-right {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-tablet form.js-filter-form > .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-top-search-wrp .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet .jsst-mytickets-filter-main,
#jsst-site.jsst-site-root.jsst-cq-tablet .jsst-mytickets-advanced {
    grid-template-columns:repeat(2, minmax(145px, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp {
    grid-column:1 / -1;
    justify-content:flex-end;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formticket #adminForm > .jsst-form-row,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formstaff .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formmessage .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formdepartment .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formrole .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formannouncement .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formfaq .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formcategory .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formdownload .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formarticle .js-ticket-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-staffprofile .js-ticket-add-form-wrapper {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formstaff #rolepermissionedit,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formstaff #rolepermission,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formstaff .js-ticket-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formmessage .js-ticket-from-field-wrp-full-width,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formmessage .js-ticket-form-btn-wrp {
    grid-column:auto;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-ticketdetail .js-ticket-detail-content-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-ticketdetail .jsst-ticket-detail-grid,
#jsst-site.jsst-site-root.jsst-cq-tablet .jsst-ticket-detail-page > #tk-detail-wraper form#adminForm > #tk_detail_content_wraper > .js-ticket-detail-wrapper > .js-ticket-detail-box {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-ticketdetail .js-ticket-btn-box,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-ticketdetail .js-ticket-actions-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-ticketdetail #tk-more-actions {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-tablet .jsst-myticket-card {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-controller-reports .js-ticket-search-fields-wrp > form.js-filter-form,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-controller-reports .js-admin-staff-wrapper,
#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-controller-reports .js-departmentlist {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-staffprofile .js-ticket-profile-wrp {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-staffprofile .js-ticket-profile-left {
    max-width:320px;
    width:100%;
}

/* Keep data-heavy frontend tables usable inside side-module layouts. */
#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-table-wrp,
#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-table-responsive,
#jsst-site.jsst-site-root.jsst-cq-tablet .jsst-table-scroll,
#jsst-site.jsst-site-root.jsst-cq-tablet .js-ticket-list-table-wrp {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-top-search-wrp {
    border-radius:12px;
    padding:14px;
}

#jsst-site.jsst-site-root.jsst-cq-narrow form.js-filter-form > .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-top-search-wrp .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-categories-content,
#jsst-site.jsst-site-root.jsst-cq-narrow .jsst-mytickets-filter-main,
#jsst-site.jsst-site-root.jsst-cq-narrow .jsst-mytickets-advanced,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-reports form.js-filter-form > .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .js-ticket-fields-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback #js-filter-wrapper-toggle-area,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .jsst-feedback-det-list-data-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-rolepermissions-wrapper .js-per-wrapper,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-userpermissions .js-per-wrapper,
#jsst-site.jsst-site-root.jsst-cq-narrow .jsst-standalone-user-picker form,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-ticketstatus .js-ticket-form {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-reports .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .js-search-form-feedback-btn-wrp {
    grid-column:1;
    justify-content:stretch;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-search-form-btn-wrp > *,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-reports .js-ticket-search-form-btn-wrp > *,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .js-search-form-feedback-btn-wrp > * {
    flex:1 1 120px;
    width:auto;
}

#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup #userpopupsearch .js-ticket-search-top,
#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup .js-ticket-search-left {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup .js-ticket-search-right,
#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup .js-ticket-search-btn-wrp {
    justify-content:stretch;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup .js-ticket-search-btn,
#jsst-site.jsst-site-root.jsst-cq-narrow #userpopup .js-ticket-reset-btn {
    flex:1 1 0;
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formticket .js-ticket-from-field,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formstaff .js-ticket-from-field:has(.js-ticket-select-user-field) {
    align-items:stretch;
    flex-direction:column;
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formticket .js-ticket-select-user-btn,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formticket .js-ticket-select-user-btn > a,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formstaff .js-ticket-select-user-btn,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-layout-formstaff .js-ticket-select-user-btn > a {
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-download-box {
    align-items:stretch;
    flex-direction:column;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-download-right,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-download-btn,
#jsst-site.jsst-site-root.jsst-cq-narrow .js-ticket-download-btn button {
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-narrow .jsst-mytickets-stats-grid,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid),
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-reports .js-admin-report-box-wrapper,
#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-reports .jsticket-right {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .jsst-feedback-det-list-top {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback .jsst-feedback-det-list-img-wrp {
    max-width:72px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-categories-heading-wrp,
#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-downloads-heading-wrp,
#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-search-heading-wrp,
#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-search-heading-main-wrp {
    align-items:stretch;
    flex-direction:column;
    padding:15px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-heading-right,
#jsst-site.jsst-site-root.jsst-cq-mobile .js-ticket-add-download-btn {
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-layout-ticketdetail .js-ticket-btn-box,
#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-layout-ticketdetail .js-ticket-actions-wrp,
#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-layout-ticketdetail #tk-more-actions,
#jsst-site.jsst-site-root.jsst-cq-mobile .jsst-mytickets-stats-grid,
#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-user-mytickets-page .jsst-mytickets-stats-grid:not(.jsst-staff-stats-grid),
#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports .js-admin-report-box-wrapper,
#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports .jsticket-right {
    grid-template-columns:1fr;
}

#jsst-site.jsst-site-root.jsst-cq-mobile #jl_pagination {
    align-items:stretch;
    flex-direction:column;
}

#jsst-site.jsst-site-root.jsst-cq-mobile #jl_pagination_pageslink,
#jsst-site.jsst-site-root.jsst-cq-mobile #jl_pagination_box,
#jsst-site.jsst-site-root.jsst-cq-mobile #jl_pagination_counter {
    justify-content:center;
    text-align:center;
    width:100%;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-layout-ticketstatus .js-ticket-form-btn-wrp {
    grid-column:auto;
}

/* Knowledge base/download form attachments (legacy markup, modern behavior) */
#jsst-site.jsst-site-root.jsst-layout-formarticle .js-ticket-form {
    display:grid;
    gap:20px 24px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
}

#jsst-site.jsst-site-root .js-ticket-reply-attachments {
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border);
    border-radius:13px;
    display:grid;
    gap:12px;
    grid-column:1 / -1;
    min-width:0;
    padding:15px;
    width:100%;
}

#jsst-site.jsst-site-root .js-attachment-field-title,
#jsst-site.jsst-site-root .js-attachment-field {
    float:none;
    margin:0;
    min-width:0;
    padding:0;
    width:100%;
}

#jsst-site.jsst-site-root .tk_attachment_value_wrapperform {
    display:grid;
    gap:9px;
    margin:0;
    width:100%;
}

#jsst-site.jsst-site-root .tk_attachment_value_wrapperform.tk_attachment_user_reply_wrapper {
    align-items:center;
    background:#fff;
    border:1px dashed var(--jsst-border-strong);
    border-radius:10px;
    display:flex;
    flex-wrap: wrap;
    gap:9px;
    min-height:50px;
    min-width:0;
    padding:15px;
    width:100%;
}

#jsst-site.jsst-site-root .tk_attachment_value_text {
    align-items:center;
    background:#fff;
    display:flex;
    min-height:50px;
    width:calc(100% / 3 - 7px);
    padding:8px 10px;
    height: auto;
    border:1px solid var(--jsst-border-strong);
    border-radius:10px;
}

#jsst-site.jsst-site-root .tk_attachment_value_text input[type="file"],
#jsst-site.jsst-site-root .js-attachment-inputbox {
    flex:1 1 auto;
    margin:0;
    min-width:0;
    width:100%;
    height: auto;
    border: unset !important;
    padding: 0 !important;
}

#jsst-site.jsst-site-root .tk_attachment_remove {
    align-items:center;
    border:1px solid #fecaca;
    border-radius:50%;
    color:var(--jsst-danger);
    cursor:pointer;
    display:inline-flex;
    flex:0 0 28px;
    height:28px;
    justify-content:center;
    position:static;
    width:28px;
}

#jsst-site.jsst-site-root .tk_attachment_remove::before {
    content:"×";
    font-size:20px;
    line-height:1;
}

#jsst-site.jsst-site-root .tk_attachments_configform {
    color:var(--jsst-muted);
    display:block;
    font-size:12px;
    line-height:1.55;
    margin:9px 0 0;
}

#jsst-site.jsst-site-root .tk_attachments_addform {
    align-items:center;
    background:var(--jsst-primary);
    border:1px solid var(--jsst-primary);
    border-radius:9px;
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    font-weight:700;
    justify-content:center;
    margin:10px 0 0;
    min-height:40px;
    min-width:112px;
    padding:8px 14px;
    position:static;
    text-align:center;
}

#jsst-site.jsst-site-root .tk_attachments_addform:focus {
    box-shadow:0 0 0 3px rgba(36, 99, 235, .18);
    outline:0;
}

#jsst-site.jsst-site-root .js-ticket-attached-files-wrp {
    align-items:center;
    background:#fff;
    border:1px solid var(--jsst-border);
    border-radius:9px;
    display:flex;
    gap:10px;
    justify-content:space-between;
    min-width:0;
    padding:9px 11px;
    width:100%;
}

#jsst-site.jsst-site-root .js_ticketattachment {
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#jsst-site.jsst-site-root .js-ticket-delete-attachment {
    color:var(--jsst-danger);
    flex:0 0 auto;
    font-weight:700;
    text-decoration:none;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-download-left {
    flex:1 1 auto;
    min-width:0;
}

#jsst-site.jsst-site-root .js-ticket-download-name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#jsst-site.jsst-site-root.jsst-cq-tablet.jsst-layout-formarticle .js-ticket-form {
    grid-template-columns:1fr;
}

/* Keyboard focus and reduced-motion support */
#jsst-site.jsst-site-root:where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline:3px solid rgba(36, 99, 235, .28);
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce) {
    #jsst-site.jsst-site-root *,
    #jsst-site.jsst-site-root *::before,
    #jsst-site.jsst-site-root *::after {
        animation-duration:.01ms;
        animation-iteration-count:1;
        scroll-behavior:auto;
        transition-duration:.01ms;
    }
}

@media print {
    #jsst-site.jsst-site-root {
        background:#fff;
        color:#000;
        font-size:11pt;
    }

    #jsst-site.jsst-site-root #jsst-wrapper-top,
    #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
    #jsst-site.jsst-site-root .js-ticket-form-btn-wrp,
    #jsst-site.jsst-site-root .js-ticket-btn-box,
    #jsst-site.jsst-site-root .js-ticket-actions-wrp,
    #jsst-site.jsst-site-root #tk-more-actions,
    #jsst-site.jsst-site-root #jl_pagination,
    #jsst-site.jsst-site-root .js-ticket-main-popup,
    #jsst-site.jsst-site-root #js-ticket-main-popup,
    #jsst-site.jsst-site-root .js-ticket-popup-background,
    #jsst-site.jsst-site-root .jsst-popup-backdrop {
        display:none;
    }

    #jsst-site.jsst-site-root:where(.js-ticket-detail-box, .js-ticket-thread, .js-ticket-download-box, .jsst-myticket-card) {
        break-inside:avoid;
        box-shadow:none;
    }

    #jsst-site.jsst-site-root a {
        color:#000;
        text-decoration:none;
    }
}

/* --------------------------------------------------------------------------
   Site icon system + category logo uploader (vector refresh)
   -------------------------------------------------------------------------- */
#jsst-site.jsst-site-root .jsst-status-icon{
    display:inline-block;
    width:28px;
    height:28px;
    max-width:28px;
    max-height:28px;
    object-fit:contain;
    vertical-align:middle;
}

#jsst-site.jsst-site-root .js-tk-button.jsst-action-edit,
#jsst-site.jsst-site-root .js-tk-button:has(img[src*="/icons/action-edit.svg"]){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    min-width:42px;
    border:1px solid var(--jsst-border-color);
    border-radius:12px;
    background:var(--jsst-content-bg);
    box-shadow:none;
}

#jsst-site.jsst-site-root .js-tk-button.jsst-action-delete,
#jsst-site.jsst-site-root .js-tk-button:has(img[src*="/icons/action-delete.svg"]){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    min-width:42px;
    border:1px solid #fee2e2;
    border-radius:12px;
    background:#fff7f7;
    box-shadow:none;
}

#jsst-site.jsst-site-root .js-tk-button.jsst-action-edit img,
#jsst-site.jsst-site-root .js-tk-button.jsst-action-delete img,
#jsst-site.jsst-site-root .js-tk-button img[src*="/icons/action-edit.svg"],
#jsst-site.jsst-site-root .js-tk-button img[src*="/icons/action-delete.svg"]{
    width:21px;
    height:21px;
    max-width:21px;
    max-height:21px;
}

#jsst-site.jsst-site-root .js-tk-button.jsst-action-edit:hover,
#jsst-site.jsst-site-root .js-tk-button:has(img[src*="/icons/action-edit.svg"]):hover{
    border-color:var(--jsst-top-menu-bg);
    background:var(--jsst-border-color);
    transform:translateY(-1px);
}

#jsst-site.jsst-site-root .js-tk-button.jsst-action-delete:hover,
#jsst-site.jsst-site-root .js-tk-button:has(img[src*="/icons/action-delete.svg"]):hover{
    border-color:#fecaca;
    background:#fff0f0;
    transform:translateY(-1px);
}

#jsst-site.jsst-site-root .js-ticket-add-img-wrp img[src*="/icons/action-add.svg"]{
    width:20px;
    height:20px;
    max-width:20px;
    max-height:20px;
}

/* Category logo uploader: replace the native browser row with a purposeful control. */
#jsst-site.jsst-site-root .jsst-logo-upload-field{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-logo-upload-shell{
    position:relative;
    width:100%;
}

#jsst-site.jsst-site-root .jsst-logo-upload-input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
}

#jsst-site.jsst-site-root .jsst-logo-upload-control{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:82px;
    padding:14px 16px;
    border:1px dashed #c7d5ea;
    border-radius:15px;
    background:linear-gradient(135deg,var(--jsst-content-bg) 0%,var(--jsst-content-bg) 100%);
    cursor:pointer;
    transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

#jsst-site.jsst-site-root .jsst-logo-upload-control:hover,
#jsst-site.jsst-site-root .jsst-logo-upload-shell:focus-within .jsst-logo-upload-control{
    border-color:var(--jsst-top-menu-bg);
    background:linear-gradient(135deg,var(--jsst-content-bg) 0%,var(--jsst-content-bg) 100%);
    box-shadow:0 12px 28px rgba(79,102,255,.10);
    transform:translateY(-1px);
}

#jsst-site.jsst-site-root .jsst-logo-upload-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
}

#jsst-site.jsst-site-root .jsst-logo-upload-icon img{
    display:block;
    width:40px;
    height:40px;
}

#jsst-site.jsst-site-root .jsst-logo-upload-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:4px;
}

#jsst-site.jsst-site-root .jsst-logo-upload-copy strong{
    color:var(--jsst-heading-color);
    font-size:14px;
    font-weight:750;
    line-height:1.3;
}

#jsst-site.jsst-site-root #jsst-category-logo-file-name{
    display:block;
    overflow:hidden;
    color:var(--jsst-content-text);
    font-size:13px;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#jsst-site.jsst-site-root .jsst-logo-upload-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    border:1px solid var(--jsst-border-color);
    border-radius:11px;
    background:#fff;
    color:var(--jsst-top-menu-bg);
    font-size:13px;
    font-weight:750;
    box-shadow:0 8px 18px rgba(79,102,255,.08);
}

#jsst-site.jsst-site-root .jsst-current-logo{
    width:max-content;
    max-width:100%;
}

#jsst-site.jsst-site-root #js-form-choose-logo-inst{
    display:block;
    margin-top:9px;
    color:var(--jsst-content-text);
    font-size:12px;
    line-height:1.55;
}

@media (max-width:640px){
    #jsst-site.jsst-site-root .jsst-logo-upload-control{
        grid-template-columns:42px minmax(0,1fr);
    }
    #jsst-site.jsst-site-root .jsst-logo-upload-button{
        grid-column:1 / -1;
        width:100%;
    }
}

/* ========================================================================== 
   v409 — Exact fixes from staff QA: Feedback filter order, GDPR field labels,
   and Mail navigation in one desktop row.
   ========================================================================== */

/* Feedback: explicit primary row prevents grid auto-placement from moving the
   buttons before Subject and Ticket ID. */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-form{
    display:grid;
    gap:12px;
    width:100%;
}
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(190px,230px) auto;
    gap:12px;
    align-items:center;
    width:100%;
}
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary > .js-ticket-form-field,
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-advanced > .js-ticket-form-field{
    float:none;
    width:auto;
    min-width:0;
    margin:0;
}
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary .js-search-form-feedback-btn-wrp{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    width:auto;
    margin:0;
    padding:0;
    white-space:nowrap;
}
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-advanced{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:100%;
}
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-advanced[style*="none"]{
    display:none;
}

/* Mail: Inbox, Outbox and Compose are one balanced navigation row on desktop. */
#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:12px;
    width:100%;
    margin:18px 0 20px;
}
#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp .js-ticket-mail-btn{
    float:none;
    width:auto;
    min-width:0;
    margin:0;
}
#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link,
#jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link.button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:54px;
    margin:0;
}

/* GDPR: labels belong above their controls, never inside the field border. */
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm.jsticket_form{
    display:grid;
    gap:18px;
    padding:0 18px 20px;
    width:100%;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-ticket-from-field-wrp,
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-ticket-from-field-wrp-full-width{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    float:none;
    clear:both;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-ticket-from-field-title{
    position:static;
    display:block;
    float:none;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    line-height:1.4;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-ticket-from-field-title label{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin:0;
    font-weight:800;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-ticket-from-field{
    display:block;
    float:none;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm input#subject{
    display:block;
    width:100%;
    min-height:52px;
    margin:0;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .tox,
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .mce-tinymce,
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm .js-editor-tinymce,
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm textarea{
    width:100%;
    max-width:100%;
    min-width:0;
}

@media (max-width:980px){
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary .js-search-form-feedback-btn-wrp{
        grid-column:1/-1;
        justify-content:flex-start;
    }
}

@media (max-width:760px){
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary,
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-advanced,
    #jsst-site.jsst-site-root.jsst-controller-mail .js-ticket-mails-btn-wrp{
        grid-template-columns:minmax(0,1fr);
    }
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary .js-search-form-feedback-btn-wrp{
        width:100%;
        flex-wrap:wrap;
    }
    #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-filter-primary .js-search-form-feedback-btn-wrp > *{
        flex:1 1 120px;
    }
}

/* ========================================================================== 
   v410 — Structural QA fixes: staff reports, feedback filter order, profile.
   These rules intentionally avoid relying on legacy float widths.
   ========================================================================== */

/* Feedback: Subject and Ticket ID first, actions last. */
#jsst-site .jsst-feedback-filter-primary{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(190px,230px) auto;
    grid-template-areas:"subject ticket actions";
    gap:12px;
    align-items:center;
    width:100%;
}
#jsst-site .jsst-feedback-filter-primary > .js-ticket-form-field:nth-child(1){
    grid-area:subject;
}
#jsst-site .jsst-feedback-filter-primary > .js-ticket-form-field:nth-child(2){
    grid-area:ticket;
}
#jsst-site .jsst-feedback-filter-primary > .js-search-form-feedback-btn-wrp{
    grid-area:actions;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    float:none;
    width:auto;
    margin:0;
    padding:0;
}
#jsst-site .jsst-feedback-filter-primary > .js-ticket-form-field{
    float:none;
    width:auto;
    min-width:0;
    margin:0;
}
#jsst-site .jsst-feedback-filter-advanced{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:100%;
}
#jsst-site .jsst-feedback-filter-advanced[style*="none"]{
    display:none;
}

/* My Profile: the form itself owns the layout. This removes the legacy
   calc()/float squeeze that caused text to render one character per line. */
#jsst-site .js-ticket-profile-wrp{
    display:block;
    float:none;
    width:100%;
    min-width:0;
    margin:0;
    padding:28px;
    box-sizing:border-box;
}
#jsst-site form#jsst-myprofileimageform{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:28px;
    align-items:start;
    width:100%;
    min-width:0;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-profile-left,
#jsst-site form#jsst-myprofileimageform .js-ticket-profile-right{
    display:block;
    float:none;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    padding:0;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-profile-left{
    padding:18px;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:var(--jsst-content-bg);
    text-align:center;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-user-img-wrp{
    position:relative;
    float:none;
    width:170px;
    height:170px;
    margin:0 auto 14px;
    overflow:hidden;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:#fff;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-user-img-wrp img.profile-image{
    position:static;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    object-fit:cover;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-add-form-wrapper{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 18px;
    float:none;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-from-field-wrp,
#jsst-site form#jsst-myprofileimageform .js-ticket-from-field-wrp-full-width{
    display:block;
    float:none;
    width:auto;
    min-width:0;
    max-width:none;
    margin:0;
    padding:0;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-from-field-title{
    display:block;
    float:none;
    width:100%;
    min-width:0;
    margin:0 0 7px;
    color:var(--jsst-content-text);
    font-size:13px;
    font-weight:800;
    line-height:1.35;
    white-space:normal;
    word-break:normal;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-from-field,
#jsst-site form#jsst-myprofileimageform .editable{
    position:relative;
    display:block;
    float:none;
    width:100%;
    min-width:0;
    margin:0;
}
#jsst-site form#jsst-myprofileimageform .js-ticket-form-field-input{
    display:block;
    float:none;
    width:100%;
    min-width:0;
    height:50px;
    margin:0;
    padding:0 14px;
    border:1px solid var(--jsst-border-color);
    border-radius:12px;
    background:var(--jsst-content-bg);
    color:var(--jsst-content-text);
    line-height:48px;
    white-space:normal;
    word-break:normal;
    overflow-wrap:anywhere;
    box-sizing:border-box;
}
#jsst-site form#jsst-myprofileimageform #showhidemouseover,
#jsst-site form#jsst-myprofileimageform .js-ticket-submit-btn{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    margin:10px 0 0;
}

/* Staff Member Reports: expose the statistics in a stable five-card grid. */
#jsst-site.jsst-layout-staffreports .js-ticket-downloads-wrp{
    float:none;
    width:100%;
    margin:18px 0 0;
    overflow:hidden;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 32px rgba(15,23,42,.06);
}
#jsst-site.jsst-layout-staffreports .js-admin-staff-wrapper{
    display:block;
    float:none;
    width:auto;
    min-width:0;
    margin:16px 20px;
    padding:0;
    border:1px solid var(--jsst-border-color);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}
#jsst-site.jsst-layout-staffreports .js-admin-staff-anchor-wrapper{
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(0,1fr);
    gap:18px;
    align-items:center;
    width:100%;
    min-width:0;
    padding:18px;
    color:inherit;
    text-decoration:none;
    box-sizing:border-box;
}
#jsst-site.jsst-layout-staffreports .jsticket-left{
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    gap:14px;
    align-items:center;
    float:none;
    width:auto;
    min-width:0;
    padding:0;
}
#jsst-site.jsst-layout-staffreports .js-report-staff-image-wrapper,
#jsst-site.jsst-layout-staffreports .js-report-staff-cnt-wrapper{
    float:none;
    width:auto;
    min-width:0;
    padding:0;
}
#jsst-site.jsst-layout-staffreports .js-report-staff-pic{
    display:block;
    width:78px;
    height:78px;
    border-radius:50%;
    object-fit:cover;
}
#jsst-site.jsst-layout-staffreports .js-report-staff-name{
    color:var(--jsst-top-menu-bg);
    font-size:17px;
    font-weight:800;
    line-height:1.3;
}
#jsst-site.jsst-layout-staffreports .js-report-staff-username,
#jsst-site.jsst-layout-staffreports .js-report-staff-email{
    margin-top:5px;
    color:var(--jsst-content-text);
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    overflow-wrap:anywhere;
}
#jsst-site.jsst-layout-staffreports .jsticket-right{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    float:none;
    width:auto;
    min-width:0;
    padding:0;
    border:0;
}
#jsst-site.jsst-layout-staffreports .jsticket-right .js-admin-report-box{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    float:none;
    width:auto;
    min-width:0;
    min-height:82px;
    margin:0;
    padding:12px 8px 15px;
    border:1px solid var(--jsst-border-color);
    border-radius:13px;
    background:var(--jsst-content-bg);
    overflow:hidden;
    box-sizing:border-box;
}
#jsst-site.jsst-layout-staffreports .jsticket-right .js-report-box-number{
    display:block;
    color:var(--jsst-heading-color);
    font-size:21px;
    font-weight:800;
    line-height:1.1;
}
#jsst-site.jsst-layout-staffreports .jsticket-right .js-report-box-title{
    display:block;
    margin-top:6px;
    color:var(--jsst-content-text);
    font-size:11px;
    font-weight:700;
    line-height:1.2;
}
#jsst-site.jsst-layout-staffreports .jsticket-right .js-report-box-color{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
}

@media (max-width:980px){
    #jsst-site .jsst-feedback-filter-primary{
        grid-template-columns:1fr 220px;
        grid-template-areas:"subject ticket" "actions actions";
    }
    #jsst-site .jsst-feedback-filter-primary > .js-search-form-feedback-btn-wrp{
        justify-content:flex-start;
    }
    #jsst-site form#jsst-myprofileimageform{
        grid-template-columns:210px minmax(0,1fr);
    }
    #jsst-site form#jsst-myprofileimageform .js-ticket-add-form-wrapper{
        grid-template-columns:1fr;
    }
    #jsst-site.jsst-layout-staffreports .js-admin-staff-anchor-wrapper{
        grid-template-columns:1fr;
    }
}
@media (max-width:700px){
    #jsst-site .jsst-feedback-filter-primary,
    #jsst-site .jsst-feedback-filter-advanced{
        grid-template-columns:1fr;
        grid-template-areas:"subject" "ticket" "actions";
    }
    #jsst-site form#jsst-myprofileimageform{
        grid-template-columns:1fr;
    }
    #jsst-site.jsst-layout-staffreports .jsticket-right{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:430px){
    #jsst-site.jsst-layout-staffreports .jsticket-right{
        grid-template-columns:1fr;
    }
}

/* v412 Staff Member Reports — dedicated markup, independent of legacy Bootstrap widths. */
#jsst-site .jsst-staff-report-card{
    display:block;
    width:auto;
    margin:16px 20px;
    border:1px solid var(--jsst-border-color);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}
#jsst-site .jsst-staff-report-link{
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(0,1fr);
    gap:24px;
    align-items:center;
    width:100%;
    padding:20px;
    box-sizing:border-box;
    text-decoration:none;
    color:inherit;
}
#jsst-site .jsst-staff-report-identity{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:16px;
    align-items:center;
    float:none;
    width:auto;
    min-width:0;
}
#jsst-site .jsst-staff-report-identity .js-report-staff-image-wrapper,
#jsst-site .jsst-staff-report-identity .js-report-staff-cnt-wrapper{
    float:none;
    width:auto;
    min-width:0;
    padding:0;
}
#jsst-site .jsst-staff-report-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(105px,1fr));
    gap:12px;
    float:none;
    width:auto;
    min-width:0;
    padding:0;
}
#jsst-site .jsst-staff-stat-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:96px;
    padding:14px 10px 10px;
    border:1px solid var(--jsst-border-color);
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
    position:relative;
}
#jsst-site .jsst-staff-stat-card .js-report-box-number{
    display:block;
    width:auto;
    font-size:24px;
    line-height:1;
    font-weight:800;
    color:var(--jsst-heading-color);
    white-space:nowrap;
}
#jsst-site .jsst-staff-stat-card .js-report-box-title{
    display:block;
    width:auto;
    margin-top:8px;
    font-size:12px;
    line-height:1.25;
    font-weight:700;
    color:var(--jsst-content-text);
    white-space:nowrap;
}
#jsst-site .jsst-staff-stat-card .js-report-box-color{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
}
@media (max-width:1100px){
    #jsst-site .jsst-staff-report-link{grid-template-columns:1fr;}
    #jsst-site .jsst-staff-report-stats{grid-template-columns:repeat(5,minmax(90px,1fr));}
}
@media (max-width:760px){
    #jsst-site .jsst-staff-report-card{margin:12px;}
    #jsst-site .jsst-staff-report-link{padding:16px;}
    #jsst-site .jsst-staff-report-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
    #jsst-site .jsst-staff-stat-card:last-child{grid-column:1 / -1;}
}

/* v412 Mail navigation — one row on every desktop mail view. */
#jsst-site .js-ticket-mails-btn-wrp{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:100%;
    margin:18px 0 20px;
    clear:both;
}
#jsst-site .js-ticket-mails-btn-wrp .js-ticket-mail-btn{
    display:block;
    float:none;
    width:auto;
    min-width:0;
    margin:0;
}
#jsst-site .js-ticket-mails-btn-wrp .js-add-link,
#jsst-site .js-ticket-mails-btn-wrp .js-add-link.button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:54px;
    margin:0;
    box-sizing:border-box;
}
@media (max-width:640px){
    #jsst-site .js-ticket-mails-btn-wrp{grid-template-columns:1fr;}
}


/* v413 GDPR request form — dedicated field structure, isolated from legacy field wrappers. */
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm.jsst-gdpr-request-form{
    display:block;
    width:100%;
    padding:20px 18px 22px;
    box-sizing:border-box;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-gdpr-form-field{
    display:block;
    width:100%;
    min-width:0;
    margin:0 0 22px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-gdpr-form-label{
    display:flex;
    align-items:center;
    gap:4px;
    width:max-content;
    max-width:100%;
    margin:0 0 10px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--jsst-heading-color);
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    position:static;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-required-mark{
    color:#ef4444;
    font-weight:900;
    line-height:1;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-gdpr-form-control{
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-sizing:border-box;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest input#subject.jsst-gdpr-subject-input{
    display:block;
    width:100%;
    max-width:100%;
    min-height:54px;
    margin:0;
    padding:12px 16px;
    border:1px solid var(--jsst-border-color);
    border-radius:14px; /* match the shared 54px/14px field metrics */
    background:#fff;
    color:var(--jsst-heading-color);
    box-shadow:none;
    box-sizing:border-box;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest input#subject.jsst-gdpr-subject-input:focus{
    border-color:var(--jsst-top-menu-bg);
    box-shadow:0 0 0 3px rgba(79,102,255,.12);
    outline:0;
}
#jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-gdpr-request-form > .js-form-submit-btn-wrp{
    float:none;
    clear:both;
    width:100%;
    margin:4px 0 0;
    padding:20px 0 0;
    border-top:1px solid var(--jsst-border-color);
    box-sizing:border-box;
}
@media (max-width:760px){
    #jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm.jsst-gdpr-request-form{
        padding:2px 12px 18px;
    }
    #jsst-site.jsst-site-root.jsst-controller-gdpr.jsst-layout-adderasedatarequest .jsst-gdpr-form-field{
        margin-bottom:18px;
    }
}

/* =====================================================================
   CANONICAL CONTROL METRICS  (added 2026-07-31)
   One field/button/card size for every page. Before this, the site had four
   field heights (46/52/54/56) and six radii (9/10/12/14/15/16) depending on
   whether a page used the legacy search bar, the newer my-tickets filter card,
   #js-tk-formwrapper, or .js-ticket-add-form-wrapper.
   This block lives at the END of the LAST-loaded stylesheet, so it wins on
   source order at equal specificity and needs no !important.
   Canonical: fields 54px / 14px radius / 0 16px / 14px text;
              cards 20px radius / 20px padding; controls 14px radius.
   Selectors use #jsst-site[id].jsst-root.jsst-site-root deliberately. Several
   legacy rules scope the same elements through a page wrapper (e.g.
   ".js-ticket-department-wrapper .js-ticket-top-search-wrp"), reaching (0,1,3,0)
   and outranking a plain (0,1,2,0) selector no matter how late it loads. The
   [id] attribute plus both root classes lifts this block to (0,1,4,0) so it wins
   on specificity everywhere, still without !important.
   ===================================================================== */

/* Textareas share the metrics but need vertical padding and free height. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp textarea,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card textarea,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper textarea,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper textarea{
  min-height:54px;
  padding:14px 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  font-size:15px  /* match Create Ticket */;
  box-sizing:border-box;
}

/* Calendar fields sit in an input-group: keep the split radius, match the rest. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp input.js-ticket-calender,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card input.js-ticket-calender,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input.js-ticket-calender,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper input.js-ticket-calender{
  min-height:54px;
  padding:0 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px 0 0 14px;
  font-size:15px  /* match Create Ticket */;
  box-sizing:border-box;
}

/* --- filter/search buttons: align with the 54px fields they sit beside --- */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp .js-search-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp .js-reset-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp button,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .jsst-mytickets-search-btn,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .jsst-mytickets-reset-btn,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .jsst-mytickets-search-btn,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .jsst-mytickets-reset-btn{
  min-height:54px;
  height:54px;
  padding:0 22px;
  border-radius:14px;
  font-size:14px;
  box-sizing:border-box;
}

/* --- form action buttons (Submit/Cancel): one radius everywhere --- */
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-submit-btn-wrp input.js-save-button,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-submit-btn-wrp a.js-ticket-cancel-button,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-submit-btn-wrp .js-form-cancel-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper a.js-ticket-cancel-button{
  border-radius:14px;
}

/* --- containers: one card treatment for filter bars and form shells --- */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card{
  padding:20px;
  border:1px solid var(--jsst-border-color);
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 38px rgba(15,23,42,.055);
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper:not(.js-ticket-role-form-wrapper):not(.jsst-submit-ticket-form-shell),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper{
  border-radius:20px;
}

/* --- field grids: one gutter --- */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-fields-wrp,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-main,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-filter-main{
  gap:14px;
}

/* --- action buttons on .js-ticket-add-form-wrapper pages ---
   The base button rule in jsst-modern-site-late.css only ever listed
   #js-tk-formwrapper, so Save/Cancel on the nine add/edit forms (department,
   category, article, faq, download, announcement, role, staff, message)
   rendered as raw browser defaults: a 24px #efefef UA button and an 18px
   bootstrap-blue text link. Same treatment as the #js-tk-formwrapper pages. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input[type="button"],
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper button[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-save-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper a.js-ticket-cancel-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-cancel-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  height:46px;
  margin:12px 8px 0 0;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow:0 14px 30px rgba(79,102,246,.18);
}
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper a.js-ticket-cancel-button,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-cancel-button{
  background:var(--jsst-site-navy);
  box-shadow:none;
}

/* --- residual outliers found by sweeping the rendered pages --- */

/* Bootstrap input-groups (date pickers, search-with-button): the field and its
   attached button must share the row height and split the corner radius, or the
   pair reads as two mismatched controls. */
/* Each :not() above contributes class-level specificity, putting the generic
   field rule at (0,1,10,1); these must carry the same chain to outrank it. */
#jsst-site[id].jsst-root.jsst-site-root .input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
#jsst-site[id].jsst-root.jsst-site-root .field-calendar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]){
  min-height:54px;
  height:54px;
  border-radius:14px 0 0 14px;
}
#jsst-site[id].jsst-root.jsst-site-root .input-group > .btn:not(.js-btn),
#jsst-site[id].jsst-root.jsst-site-root .input-group > button:not(.js-btn),
#jsst-site[id].jsst-root.jsst-site-root .input-group-append > .btn:not(.js-btn),
#jsst-site[id].jsst-root.jsst-site-root .field-calendar button:not(.js-btn){
  min-height:54px;
  height:54px;
  border-radius:0 14px 14px 0;
}

/* Saved-view controls sit in the same filter card as the search/reset pair. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-apply-view,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-save-view{
  min-height:54px;
  height:54px;
  padding:0 22px;
  border-radius:14px;
  font-size:14px;
  box-sizing:border-box;
}

/* =====================================================================
   SURFACE + ELEVATION  (added 2026-07-31)
   The site read flat because white cards sat on a white page — no
   figure/ground separation anywhere. This introduces one light page surface
   and a three-step shadow scale, applied to the card classes already in use
   rather than inventing new ones.
   ===================================================================== */
/* Defined on #jsst-site, not :root: the component already declares its token
   block on #jsst-site.jsst-site-root (see top of this file), which outranks
   :root for every element inside it. Names are deliberately distinct from the
   existing --jsst-surface/--jsst-card tokens, which mean "white card". */
#jsst-site.jsst-site-root{
  --jsst-page-surface:#f6f8fb;          /* page behind the cards */
  --jsst-card-surface:#ffffff;             /* the cards themselves */
  --jsst-shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.045);
  --jsst-shadow-md:0 2px 4px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.06);
  --jsst-shadow-lg:0 4px 10px rgba(15,23,42,.05), 0 20px 44px rgba(15,23,42,.08);
  --jsst-shadow-hover:0 8px 16px rgba(15,23,42,.07), 0 26px 54px rgba(15,23,42,.11);
}

/* Page surface. Vertical padding only — horizontal padding would reflow every
   grid on the site, and the content already insets itself. */
#jsst-site[id].jsst-root.jsst-site-root{
  background:var(--jsst-page-surface);
  border-radius:26px;
  padding:22px 20px 30px;
}

/* --- level 2: primary panels, form shells, filter cards, data wrappers --- */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper:not(.js-ticket-role-form-wrapper),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper,
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-section,
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-panel,
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-hero,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-profile-body,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-table-wrp{
  background:var(--jsst-card-surface);
  box-shadow:var(--jsst-shadow-md);
}

/* --- level 1: repeated tiles and rows --- */
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-stat,
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-action-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-myticket-stat,
#jsst-site[id].jsst-root.jsst-site-root .jsst-myticket-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-ticket-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-ticket-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-report-card,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mail-nav-item{
  background:var(--jsst-card-surface);
  box-shadow:var(--jsst-shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}

/* --- hover lift on the cards that are actually clickable --- */
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-action-card:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-myticket-card:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-ticket-card:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-ticket-card:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-staff-report-card:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mail-nav-item:hover,
#jsst-site[id].jsst-root.jsst-site-root .jsst-myticket-stat:hover{
  box-shadow:var(--jsst-shadow-hover);
  transform:translateY(-2px);
}

/* The header bar is the one deliberately heavy element; give it real depth. */
#jsst-site[id].jsst-root.jsst-site-root #jsst-header{
  box-shadow:var(--jsst-shadow-lg);
}

/* Fields sit on white cards, so they need a hairline lift, not a shadow. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp input:focus,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-top-search-wrp select:focus,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card input:focus,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card select:focus,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper input:focus,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper select:focus,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper textarea:focus,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input:focus,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper select:focus{
  outline:none;
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

@media (prefers-reduced-motion:reduce){
  #jsst-site[id].jsst-root.jsst-site-root *{transition:none !important;}
}

/* =====================================================================
   SWEEP FIXES  (added 2026-07-31, after auditing every page family)
   ===================================================================== */

/* Ticket detail: the grid track is 310px but this column carried a hard
   width:340px, so it overflowed its track and pushed 13px past the page. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-detail-right{
  width:auto;
  max-width:100%;
  min-width:0;
}

/* Canonical field metrics for the pages that build their own form markup and
   so fell outside the container-scoped rules above: staff profile (50px),
   staff/user lists and reports (46px), ticket detail (40/34/44px).
   Scoped out: TinyMCE chrome, input-groups (handled above with split radius)
   and multi-selects, which size themselves. */
#jsst-site[id].jsst-root.jsst-site-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not(.js-ticket-calender):not(.tox *):not(.input-group *),
#jsst-site[id].jsst-root.jsst-site-root select:not([multiple]):not(.tox *):not(.input-group *){
  min-height:54px;
  height:54px;
  padding:0 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  font-size:15px  /* match Create Ticket */;
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root select:not([multiple]):not(.tox *):not(.input-group *) {
    appearance:none;
    -webkit-appearance:none;
    padding-right:25px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:17px 17px;
}

/* Track max raised 310px -> 340px at the two grid rules above (lines ~931 /
   ~1483) to match .js-ticket-detail-right's own min-width:340px, which was
   overflowing the track and pushing 13px past the page edge. Fixed at source
   rather than by adding a higher-specificity override. */

/* Dashboard content was capped at max-width:1180px with margin:0 70px while the
   header bar above it spans the full 1320px root width, leaving the content
   visibly inset 70px each side. Match the header. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-cp-modern{
  max-width:none;
  margin-left:0;
  margin-right:0;
}

/* --- pagination: bring it into the card + control system ---
   It was the last hold-out: the bar was a 12px-radius white block with no
   shadow while every other card is 20px + shadow, the page links were 34px
   pills at 7px radius (a radius used nowhere else), and the counter rendered
   48px/14px on my-tickets but 24px/0px on the staff list. */
#jsst-site[id].jsst-root.jsst-site-root .pagination{
  box-shadow:var(--jsst-shadow-md);
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root .pagination a,
#jsst-site[id].jsst-root.jsst-site-root .pagination__wrapper a,
#jsst-site[id].jsst-root.jsst-site-root .jl_pagination_pageslink a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 12px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  font-size:14px;
  text-decoration:none;
  box-sizing:border-box;
  transition:box-shadow .18s ease, transform .18s ease;
}
#jsst-site[id].jsst-root.jsst-site-root .pagination a:hover,
#jsst-site[id].jsst-root.jsst-site-root .jl_pagination_pageslink a:hover{
  box-shadow:var(--jsst-shadow-sm);
  transform:translateY(-1px);
}
#jsst-site[id].jsst-root.jsst-site-root .jl_pagination_counter{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:var(--jsst-card-surface);
  font-size:14px;
  box-sizing:border-box;
}

/* --- breadcrumbs ---
   These originally rendered as a raw bulleted list on every page (ul kept the
   UA list-style:disc + padding-left:32px, each li was display:list-item at full
   width, so the crumbs stacked as bullets on separate lines).
   Now a self-contained pill that matches the card system: home icon, real hover
   targets, and a current page at full strength rather than faded out.
   (The id is misspelled "breadcrunbs" in all 44 templates; matched as-is.) */
#jsst-site[id].jsst-root.jsst-site-root #jsst-wrapper-top,
#jsst-site[id].jsst-root.jsst-site-root #jsst-wrapper-top-left,
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root #jsst-wrapper-top{margin-bottom:16px;}

#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs ul{
  display:inline-flex;
  flex-wrap:wrap;
  width: 100%;
  align-items:center;
  gap:2px;
  margin:0;
  padding:6px 10px;
  list-style:none;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:var(--jsst-card-surface);
  box-shadow:var(--jsst-shadow-sm);
}
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li{
  display:inline-flex;
  align-items:center;
  width:auto;
  margin:0;
  padding:0;
  font-size:14px;
  line-height:1.4;
  list-style:none;
}
/* clickable crumbs get a real hover target, not just underlined text */
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  border-radius:9px;
  color:var(--jsst-top-menu-bg);
  font-weight:600;
  text-decoration:none;
  transition:background-color .15s ease;
}
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li a:hover,
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li a:focus-visible{
  background:rgba(37,99,235,.09);
  text-decoration:none;
}
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li a:focus-visible{
  outline:2px solid var(--jsst-top-menu-bg);
  outline-offset:1px;
}
/* current page: the destination, so full strength and not a link */
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li:last-child{
  padding:5px 0px;
  color:var(--jsst-content-text);
  font-weight:700;
  opacity:1;
}
/* chevron separator */
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li + li::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  margin:0 10px 0 0;
  border-right:1.5px solid var(--jsst-content-text);
  border-bottom:1.5px solid var(--jsst-content-text);
  transform:rotate(-45deg);
}
/* home glyph on the first crumb. Drawn with mask-image so it inherits the link
   colour; inlined as a data URI, so no extra request and nothing to ship. */
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li:first-child a::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background-color:currentColor;
  -webkit-mask:var(--jsst-home-glyph) center/contain no-repeat;
  mask:var(--jsst-home-glyph) center/contain no-repeat;
}
#jsst-site.jsst-site-root{
  --jsst-home-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3C/svg%3E");
}
/* The current crumb was still inheriting the blue link colour, which made it
   read as clickable. Force the neutral heading colour on it and any inline
   child, so only the real links look like links. */
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li:last-child,
#jsst-site[id].jsst-root.jsst-site-root #jsst-breadcrunbs li:last-child *{
  /* --jsst-content-text, not --jsst-heading-color: the heading token is the
     admin-configurable $color2 and is currently a blue (#2460c2), which put the
     current crumb in the same colour family as the links. The neutral body
     token keeps "you are here" visually distinct whatever theme is set. */
  color:var(--jsst-content-text);
  font-weight:700;
  text-decoration:none;
  cursor:default;
}

/* --- pagination, multi-page state ---
   Seen on Departments at 5-per-page. Problems fixed here:
   1. Arrows were a bordered 70px <a.page-link> wrapping an icon <span> that was
      itself given a border+radius, so every arrow rendered as a pill inside a
      pill. The glyph is now plain and only the anchor is the box.
   2. Arrows (70px) and numbers (44px) were different widths.
   3. The bar was 112px tall with its three groups at 70/54/24px and not
      vertically centred.
   4. Links used bootstrap blue (#428bca) instead of the theme colour.
   These use #jl_pagination ID selectors because the class-based block earlier in
   this file loses to the ID rules above. */
#jsst-site.jsst-site-root #jl_pagination > div{
  display:flex;
  align-items:center;
  min-height:0;
}
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink{
  flex:1 1 auto;
}
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink ul.pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  list-style:none;
}
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink li{
  margin:0;
  padding:0;
  list-style:none;
}
/* every control is the same 44px box */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink a,
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink > ul > li > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 10px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:var(--jsst-card-surface);
  color:var(--jsst-top-menu-bg);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
/* the icon glyph inside an anchor is NOT a second box */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink a span,
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink a i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:inherit;
  font-size:13px;
}
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink a:hover{
  background:rgba(37,99,235,.08);
  border-color:var(--jsst-top-menu-bg);
}
/* current page */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink .active > a,
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink .active > span,
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink [aria-current="page"]{
  background:var(--jsst-top-menu-bg);
  border-color:var(--jsst-top-menu-bg);
  color:#fff;
  font-weight:700;
}
/* disabled arrows at the ends of the range */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink .disabled > a,
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink .disabled > span{
  opacity:.4;
  pointer-events:none;
}
/* result counter reads as a label, not a control */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_counter{
  display:flex;
  align-items:center;
  height:44px;
  padding:0;
  border:0;
  background:none;
  color:var(--jsst-content-text);
  font-size:14px;
  white-space:nowrap;
}
/* Joomla's pagination layout puts .mb-4 on this <ul>, and the template defines
   .mb-4{margin-bottom:1.5rem !important}. That 24px was inflating the pageslink
   block to 68px and the whole bar to 110px. !important is unavoidable here —
   nothing else outranks another !important — and it is scoped to this one
   element rather than the .pagination class generally. */
#jsst-site.jsst-site-root #jl_pagination #jl_pagination_pageslink ul.pagination{
  margin-bottom:0 !important;
}

/* --- one card around each list + its pagination ---
   The three list layouts nested differently: Departments had js-ticket-table-wrp
   (a card, from the elevation block above) inside js-ticket-download-content-wrp
   (already a card) = two stacked borders/shadows above the pagination;
   Announcements had one; Downloads had none.
   Flattening the inner wrapper when it sits inside the outer one leaves exactly
   one card everywhere, and lets the general table-wrp card rule supply the card
   on layouts like Downloads that have no content wrapper. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-download-content-wrp .js-ticket-table-wrp{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* --- form typography: Create Ticket is the reference ---
   Create Ticket used 13px/650 labels with a 7px gap and 15px field text; the
   add/edit forms (.js-ticket-add-form-wrapper) used 16px/900 labels at full row
   width with a 9px gap and 14px field text, so the two families read as
   different designs. Geometry (54px/14px radius) was already unified. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper label,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-form-title,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-title{
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  color:var(--jsst-heading-color);
}
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper .js-form-title,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-title{
  margin:0 0 7px;
}
/* labels hug their text rather than spanning the row, as on Create Ticket */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper label{
  display:inline-block;
  width:auto;
  margin:0;
}
/* field text: 15px, matching Create Ticket */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper select:not([multiple]),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper textarea,
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper select:not([multiple]),
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper textarea{
  font-size:15px;
}

/* --- two-column field layout on the add/edit forms ---
   Create Ticket lays fields out via a grid on .js-form-wrapper
   (repeat(2,minmax(0,1fr)), 18px gap). The add/edit forms stacked every
   .js-ticket-from-field-wrp full width instead. Same grid, applied to the form. */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
  align-items:start;
}
/* empty spacer divs would otherwise consume a grid cell and knock the
   left/right rhythm out by one */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:empty{
  display:none;
}
/* things that must keep the full width */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > .js-form-submit-btn-wrp {
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--jsst-site-border);
    text-align: center;
    box-sizing: border-box;
    float: none;
}
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > .js-form-submit-btn-wrp,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > .js-ticket-form-submit-wrp,
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:has(textarea),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:has(.tox),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:has(iframe),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:has(input[type="file"]){
  grid-column:1 / -1;
}
/* fields fill their column */
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div{
  min-width:0;
}
@media (max-width:760px){
  #jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form{
    grid-template-columns:minmax(0,1fr);
  }
}

/* --- editors always fill their row ---
   The templates call $editor->display(..., '550', '300', ...) and TinyMCE writes
   that 550px as an INLINE width on .tox-tinymce, so the widget sat at 550px
   inside a 1226px container. An inline style can only be beaten by !important —
   that is the reason for it here, and it is scoped to the editor widget alone.
   The wrapping field also spans the full grid so the editor gets the whole row. */
#jsst-site[id].jsst-root.jsst-site-root .js-editor-tinymce,
#jsst-site[id].jsst-root.jsst-site-root .js-form-value:has(.tox-tinymce),
#jsst-site[id].jsst-root.jsst-site-root .js-form-value:has(textarea){
  width:100%;
  max-width:100%;
}
#jsst-site[id].jsst-root.jsst-site-root .tox-tinymce{
  width:100% !important;
  max-width:100%;
}
/* a field holding an editor takes the whole row in either form family */
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper .js-form-wrapper > div:has(.tox-tinymce),
#jsst-site[id].jsst-root.jsst-site-root #js-tk-formwrapper > div:has(.tox-tinymce),
#jsst-site[id].jsst-root.jsst-site-root .js-ticket-add-form-wrapper form > div:has(.tox-tinymce){
  grid-column:1 / -1;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-radio-box input[type="checkbox"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-radio-box input[type="radio"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-signature-radio-box input[type="checkbox"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-signature-radio-box input[type="radio"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-radio-box input[type="checkbox"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-radio-box input[type="radio"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-signature-radio-box input[type="checkbox"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-signature-radio-box input[type="radio"]{
  flex:0 0 auto;
  width:17px;
  height:17px;
  min-height:0;          /* the canonical field rule does not reach these, but be explicit */
  margin:0;
  padding:0;
  accent-color:var(--jsst-top-menu-bg);
  vertical-align:middle;
  cursor:pointer;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-radio-box label,
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-signature-radio-box label,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-radio-box label,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-signature-radio-box label{
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  color:var(--jsst-content-text);
  cursor:pointer;
  white-space:nowrap;
}
/* the group wrapper keeps the options on one flowing row */
#jsst-site[id].jsst-root.jsst-site-root .jsst-mytickets-filter-card .js-ticket-signature-radio-box-wrp,
#jsst-site[id].jsst-root.jsst-site-root .jsst-customer-filter-card .js-ticket-signature-radio-box-wrp{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}

/* --- ticket-detail popups: change priority / assign agent / department
   transfer / internal note / edit time ---
   Merge Ticket and Private Credentials render correctly because they carry
   position:fixed + a high z-index. These five had only box-sizing, so they were
   position:static and laid out inline in the document flow instead of as a
   centred overlay. Same treatment as .jsst-merge-popup-wrapper, at a narrower
   max width since these are small dialogs.
   display is deliberately NOT set here — the templates' JS owns open/close. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #userpopupforchangepriority,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforagenttransfer,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupfordepartmenttransfer,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 48px));
  max-height:calc(100vh - 60px);
  overflow:auto;
  z-index:99999;
  background:#fff;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  box-shadow:0 30px 82px rgba(15,23,42,.34);
  text-align:start;
  box-sizing:border-box;
}
/* internal note carries an editor, so it needs more room */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote{
  width:min(760px,calc(100vw - 48px));
}

/* --- staff report stat boxes ---
   The five .js-admin-box items inside .js-admin-report-box-wrapper had no
   border, so they read as loose text on the card. Border only, plus the
   matching 14px radius so they sit with the rest of the design. */
#jsst-site[id].jsst-root.jsst-site-root .js-admin-report-box-wrapper > .js-admin-box{
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  padding: 15px 0;
}
#jsst-site.jsst-site-root .jsst-wrapper-staff-detail-report .js-admin-staff-wrapper{
    margin: 20px;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
}
#jsst-site.jsst-site-root .jsst-wrapper-staff-detail-report .js-ticket-download-content-wrp{
    margin: 20px;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
}
#jsst-site.jsst-site-root .jsst-wrapper-staff-detail-report .js-ticket-download-content-wrp .js-ticket-priority{
    color: #FFF;
    padding: 2px 5px;
    border-radius: 4px;
}

/* --- ticket-detail popup interiors ---
   The header already has 13px 18px, but the field and button rows had padding:0,
   so controls ran to the popup edge. The action buttons were raw UA defaults
   (30px, #efefef, square) like the add-form buttons were. Padding + buttons only. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #userpopupforchangepriority > *:not(.js-ticket-priorty-header),
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforagenttransfer > *:not(.js-ticket-priorty-header),
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupfordepartmenttransfer > *:not(.js-ticket-priorty-header),
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote > *:not(.js-ticket-priorty-header){
  padding-left:18px;
  padding-right:18px;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #userpopupforchangepriority > *:last-child,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforagenttransfer > *:last-child,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupfordepartmenttransfer > *:last-child,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote > *:last-child{
  padding-bottom:18px;
}
/* action buttons, matching the form buttons elsewhere */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #userpopupforchangepriority input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #userpopupforchangepriority input[type="button"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforagenttransfer input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforagenttransfer input[type="button"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupfordepartmenttransfer input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupfordepartmenttransfer input[type="button"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote input[type="submit"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page #popupforinternalnote input[type="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  height:46px;
  margin:0 8px 0 0;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:var(--jsst-site-brand,var(--jsst-top-menu-bg));
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-cancel,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .js-ticket-priorty-cancel{
  background:var(--jsst-site-navy,var(--jsst-content-text));
  box-shadow:none;
}
/* Change Priority's save control is not an input[type=submit|button] like the
   other popups' — target the action classes directly so all four match. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .js-ticket-priorty-save,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-save,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-cancel,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .js-ticket-priorty-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  height:46px;
  margin:0 8px 0 0;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:var(--jsst-site-brand,var(--jsst-top-menu-bg));
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-cancel {
    min-width: auto;
}
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-cancel,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .js-ticket-priorty-cancel{
  background:var(--jsst-site-navy,var(--jsst-content-text));
}

/* NOTE: this lives here rather than in jsst-modern-site-late.css because,
   despite the name, jsst-site-complete.css is added *after* that sheet
   (jssupportticket.php loads late at line 106, complete at 107). The
   desktop `display:flex` rule below has identical specificity, so only a
   later sheet wins without resorting to !important. */

/* =========================================================
   Site header tabs on small screens.
   #jsst-tabs-wrp is a nowrap flex row with overflow-x:auto, so on a phone the
   four tabs (~470px) turned into a sideways-scrolling strip inside a ~250px
   box - the second horizontal scrollbar on every front-end page. Four short
   nav links fit fine as a 2x2 grid, so wrap them instead of scrolling.
   ========================================================= */
@media (max-width:640px){
  #jsst-site.jsst-site-root #jsst-tabs-wrp{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    overflow-x:visible;
  }

  #jsst-site.jsst-site-root #jsst-tabs-wrp .jsst-header-tab{
    width:100%;
    min-width:0;
  }

  #jsst-site.jsst-site-root #jsst-tabs-wrp .jsst-header-tab > a{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  /* pushed to the end by margin-inline-start:auto in the flex row; pointless in
     a grid. Must be reset with the same logical property - margin-left would
     miss it entirely under RTL, where inline-start maps to the right. */
  #jsst-site.jsst-site-root #jsst-tabs-wrp .jsst-header-tab-right{
    margin-inline-start:0;
  }
}

/* --- ticket detail: Edit Timer panel ---
   .edit-time-popup was grouped with the four standalone detail popups and given
   `position:fixed; top/left:50%; transform:translate(-50%,-50%)`. But unlike
   those four it is a CHILD of .jsst-popup-wrapper, so parent and child were both
   centred as independent overlays: the "Edit Timer" title bar rendered in one
   place and the form floated over it in another, which reads as an empty popup.
   It is an inner panel - keep it in flow and let the wrapper do the overlaying.
   The sibling forms (#jsst-reply-form etc.) were always in flow; this matches. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .edit-time-popup{
  position:static;
  top:auto;
  left:auto;
  transform:none;
  width:auto;
  max-width:100%;
  max-height:none;
  overflow:visible;
  z-index:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

/* The reason textarea carries cols="60" and an inline height:300px, so it forced
   the dialog wider than its own box (horizontal scrollbar) and overshot the
   max-height (vertical one). Make every control in these panels fluid instead. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper input[type="text"],
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper textarea,
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper select{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper #ttt_desc{
  height:150px;
  min-height:120px;
  resize:vertical;
}

/* .js-ticket-edit-form-wrp is sized `min(720px, 100vw - 24px)` for the standalone
   detail popups. Inside .jsst-popup-wrapper it is a nested panel, so a viewport
   width made it wider than its own dialog (365px in a 322px box) - that was the
   horizontal scrollbar on Edit Timer / edit reply / edit note. Fill the parent. */
#jsst-site[id].jsst-root.jsst-site-root .jsst-ticket-detail-page .jsst-popup-wrapper .js-ticket-edit-form-wrp{
  width:100%;
  max-width:100%;
}

/* --- merge-ticket popup: pagination ---
   The merge popup's page links (built in models/ticket.php as .jsst_userpages /
   .jsst_userlink) had no styling on the site at all: bare inline anchors, no
   padding, no border, default browser-blue, 9x17px tap targets, and the current
   page distinguishable only by text colour. The existing .jsst_userpages rules
   are scoped to div#userpopup (site) and div#records / div#mergeticketselection
   (admin), so the merge popup matched none of them. Styled here to match the
   rest of the site; logical properties throughout so it mirrors under RTL. */
#jsst-site[id].jsst-root.jsst-site-root #js-ticket-merge-ticket-wrp .jsst_userpages{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  margin:16px 0 4px;
  padding:14px 0 0;
  border-top:1px solid var(--jsst-border-color);
  text-align:center;
}

#jsst-site[id].jsst-root.jsst-site-root #js-ticket-merge-ticket-wrp .jsst_userpages .jsst_userlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  min-height:34px;
  padding:6px 12px;
  border:1px solid var(--jsst-border-color);
  border-radius:9px;
  background:#fff;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}

#jsst-site[id].jsst-root.jsst-site-root #js-ticket-merge-ticket-wrp .jsst_userpages a.jsst_userlink:hover{
  background:var(--jsst-primary);
  border-color:var(--jsst-primary);
  color:#fff;
}

/* current page - a span, so it must read as active without being clickable */
#jsst-site[id].jsst-root.jsst-site-root #js-ticket-merge-ticket-wrp .jsst_userpages span.jsst_userlink.selected{
  background:var(--jsst-primary);
  border-color:var(--jsst-primary);
  color:#fff;
  cursor:default;
}

/* Previous/Next carry a physical text-align helper class; in a flex row it only
   fights the centring, and it would point the wrong way under RTL. */
#jsst-site[id].jsst-root.jsst-site-root #js-ticket-merge-ticket-wrp .jsst_userpages .jsst_userlink.js-text-align-right{
  text-align:center;
}

/* --- mail section: Send button ---
   .js-ticket-save-button only ever received *appearance* rules inside the
   ticket-detail page, .js-ticket-add-form-wrapper and #js-tk-formwrapper. The
   mail templates (message.php, formmessage.php) put it in .js-ticket-form-btn-wrp
   instead, which is styled for layout only - `white-space`/`line-height` in
   jsst-modern-site-late.css and `min-width:130px` for this layout. With nothing
   setting a background or border, Send fell through to the UA default: #efefef
   with a 2px outset 3D border and square corners. Match the site primary button. */
#jsst-site[id].jsst-root.jsst-site-root.jsst-controller-mail .js-ticket-form-btn-wrp input.js-ticket-save-button,
#jsst-site[id].jsst-root.jsst-site-root.jsst-controller-mail .js-ticket-form-btn-wrp .js-ticket-save-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  height:46px;
  padding:0 26px;
  border:0;
  border-radius:14px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow:0 14px 30px rgba(79,102,246,.18);
  transition:filter .15s ease, box-shadow .15s ease;
}

#jsst-site[id].jsst-root.jsst-site-root.jsst-controller-mail .js-ticket-form-btn-wrp input.js-ticket-save-button:hover,
#jsst-site[id].jsst-root.jsst-site-root.jsst-controller-mail .js-ticket-form-btn-wrp .js-ticket-save-button:hover{
  filter:brightness(.94);
  box-shadow:0 16px 34px rgba(79,102,246,.26);
}

/* --- ticket detail, right rail: "Ticket assigned to" panel ---
   Two separate problems, both from rules written for other elements.

   (1) `.js-tkt-det-hdg-btn` is grouped with `.js-button` in the ticket-detail
   action-grid block above (width:100%; min-height:42px; padding:9px 11px;
   justify-content:flex-start). That is right for the big "Merge Ticket" /
   "Print" tiles, but the three "Change" links on this page are inline actions
   in a header bar or a card row. As full-width 42px boxes they squeezed the
   panel title to 79px - wrapping "Ticket assigned to" onto two lines - and the
   department "Change" became a 338px row with its label stranded at the far
   left edge. Scoped by parent so the action tiles keep their own sizing.

   (2) `.js-tkt-det-trsfer-dep` had no rules at all: no padding while the user
   block above it carries 18px 20px, and `text-align:end` inherited from
   `.js-ticket-field-value`, so "Department : Support" sat flush against the
   card's right border with the Change link orphaned below it. */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg > .js-tkt-det-hdg-txt{
  flex:1 1 auto;
  min-width:0;
  text-align:start;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg > .js-tkt-det-hdg-btn{
  flex:0 0 auto;
  width:auto;
  min-height:22px;
  padding:5px 10px;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#7dd3fc;
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg > a.js-tkt-det-hdg-btn:hover,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-hdg > a.js-tkt-det-hdg-btn:focus{
  background:rgba(255,255,255,.26);
  color:#fff;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  margin:0;
  padding:12px 20px 14px;
  border-top:1px solid var(--td-line);
  text-align:start;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep-txt{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  margin:0;
  color:var(--td-text);
  font-size:12px;
  font-weight:850;
  line-height:1.35;
  text-align:start;
  overflow-wrap:anywhere;
}

/* the label half of "Department : Support" - muted, so the value reads first */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep-txt-tit{
  display:inline-block;
  margin-inline-end:5px;
  color:var(--td-muted);
  font-size:12px;
  font-weight:900;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep > .js-tkt-det-hdg-btn{
  flex:0 0 auto;
  width:auto;
  min-height:28px;
  padding:5px 12px;
  justify-content:center;
  border:1px solid #d8e5ff;
  border-radius:999px;
  background:#f1f6ff;
  color:var(--td-blue);
  font-size:11px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep > a.js-tkt-det-hdg-btn:hover,
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .js-tkt-det-trsfer-dep > a.js-tkt-det-hdg-btn:focus{
  border-color:var(--td-blue);
  background:var(--td-blue);
  color:#fff;
}

/* --- ticket detail, right rail: Time Tracking panel ---
   The readout is a `.timer_1` div sitting inside `.js-tkt-det-user`, which is
   the avatar+text grid (`58px minmax(0,1fr)`) shared with the assigned-to card.
   So the timer became a grid item in the 58px avatar column - its `width:100%`
   resolved to 58px - and "00:00:00" wrapped inside a 58x58 box while the 226px
   text column next to it stayed empty. On top of that the three numbers carried
   no units at all.

   Layout is switched to a single column here, and the markup now gives each
   segment its own label (see ticketdetail.php). Labels are not uppercased:
   `text-transform:uppercase` strips the accents from Greek words like
   "Δευτερόλεπτα", and this string is translated. */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .js-tkt-det-user{
  display:block;
  width:100%;
  padding:18px 20px 16px;
}

/* stretch, not flex-start: a longer translated unit label can wrap to a second
   line, and the three chips must still read as one row of equal cards */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .timer_1{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:0;
  margin:0;
  letter-spacing:normal;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .jsst-timer-seg{
  display:inline-flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  max-width:92px;
  padding:9px 6px 8px;
  border:1px solid var(--td-line);
  border-radius:12px;
  background:var(--td-soft);
  color:var(--td-text);
  font-size:25px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .jsst-timer-seg small{
  display:block;
  color:var(--td-muted);
  font-size:9.5px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.02em;
  text-align:center;
  overflow-wrap:anywhere;
}

/* pinned to the digits' baseline row rather than centred on the whole chip,
   which would drop it level with the labels */
#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .jsst-timer-sep{
  flex:0 0 auto;
  align-self:flex-start;
  padding-top:12px;
  color:#cbd5e1;
  font-size:20px;
  font-weight:900;
  line-height:1;
}

#jsst-site.jsst-site-root.jsst-layout-ticketdetail .timer-wrp .jsst-timer-caption{
  margin:12px 0 0;
  color:var(--td-muted);
  font-size:11px;
  font-weight:900;
  line-height:1.3;
  text-align:center;
}

/* --- Ticket Status: card must span the same width as the header bar ---
   The "Visitor status and success pages" rule above caps this wrapper at
   max-width:720px and centres it. On a full-width page that leaves the form
   card visibly narrower than the top menu and breadcrumb stacked directly
   above it (720 against 1280), which reads as a layout bug rather than a
   choice. Every other frontend view fills the component column, so this one
   does too. The visitor success message keeps the 720 cap - it is a single
   line of confirmation text, not a form. */
#jsst-site.jsst-site-root.jsst-layout-ticketstatus .js-ticket-checkstatus-wrp{
  width:100%;
  max-width:100%;
  margin:0 0 24px;
}

/* --- Submit Ticket: the admin-configured message above the form ---
   `config['new_ticket_message']` is admin-entered HTML dropped into
   .js-ticket-form-instruction-message, and it was styled as a second white
   card: same #fff background and 1px border as the form shell right below it,
   18px vs 20px radius, and a *heavier* shadow than that shell - so the notice
   floated above the primary content and read as an orphaned card rather than
   an instruction. Three concrete problems fixed here:

   1. The pasted HTML's own block margins were left standing. A trailing <p>
      with margin-bottom:16px made the box bottom-heavy (18px of padding on
      top, 34px underneath) and the text sat visibly high in the card.
   2. Body copy rendered at the browser default 16px - larger than anything
      else on the page (13px field labels, 15px inputs).
   3. White-on-white with only a 5px left edge to tell the two cards apart.

   Now a tinted notice: soft brand-tinted surface, no competing elevation,
   text at the site's own size, and padding that stays even whatever markup
   the admin pastes in. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message{
  padding:16px 20px;
  border-color:#d6e4fb;
  border-left-color:var(--jsst-site-brand,#2563eb);
  background:var(--jsst-secondary-bg,#eff6ff);
  color:var(--jsst-content-text);
  font-size:14px;
  line-height:1.6;
  box-shadow:none;
}

/* the pasted markup owns the inner spacing; keep the card's own padding even */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message > *{
  font-size:inherit;
  line-height:inherit;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message > *:first-child{
  margin-top:0;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message > *:last-child{
  margin-bottom:0;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message p{
  margin:0 0 10px;
}

/* an admin can paste headings and lists in here too */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message h1,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message h2,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message h3,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message h4{
  margin:0 0 8px;
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.35;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message ul,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message ol{
  margin:0 0 10px;
  padding-inline-start:20px;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message li{
  margin:0 0 4px;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message a{
  color:var(--jsst-site-brand,#2563eb);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ============================================================================
   FEEDBACK LIST PAGE  (controller=feedback, layout=feedbacks)  — v461
   ----------------------------------------------------------------------------
   Additive only. Every selector below is pinned to
   `#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks`,
   the root classes `jssupportticket.php` emits for this one layout, so nothing
   here can reach any other page (the feedback *form*, layout=formfeedback, is
   excluded too). No existing rule is edited; ties resolve here on source order.

   The card internals (`.jsst-feedback-det-*`) had no coverage in any modern
   sheet — verified live: every one of them computed as a bare `display:block`,
   16px/400, label and value on separate lines. Only the outer list wrapper,
   the heading bar, the `-list-top` / `-list-data-wrp` grids and the filter form
   were already styled; those are left exactly as they are.

   Direction-neutral by construction: all offsets use logical properties
   (`margin-inline-*`, `border-block-*`, `padding-inline-*`) and flex/grid flow,
   so RTL mirrors without a single `[dir="rtl"]` override.
   ========================================================================== */

/* --- row shell ----------------------------------------------------------- */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp{
  box-sizing:border-box;
  padding:20px 24px;
  border-block-start:1px solid var(--jsst-border-color);
  transition:background-color .18s ease;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp:hover{
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list{
  min-width:0;
}

/* --- rating face --------------------------------------------------------- */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border:1px solid var(--jsst-border-color);
  border-radius:50%;
  background:var(--jsst-secondary-bg);
  overflow:hidden;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp img{
  display:block;
  width:38px;
  height:38px;
  max-width:100%;
  object-fit:contain;
}

/* --- the two data columns ------------------------------------------------ */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-left,
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-right{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-btm{
  min-width:0;
}

/* label + value on one line (they were stacking as two blocks) */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-datea-btm-rec{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 6px;
  min-width:0;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-btm-title{
  flex:none;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.5;
  text-transform:uppercase;
  opacity:.65;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-btm-val{
  min-width:0;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* the submitter's name is the first row and carries no label */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-btm-val.name{
  font-size:15px;
  font-weight:800;
}

/* --- subject link -------------------------------------------------------- */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val{
  min-width:0;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt{
  display:inline-block;
  max-width:100%;
  color:var(--jsst-top-menu-bg);
  font-size:17px;
  font-weight:800;
  line-height:1.3;
  text-decoration:none;
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt:hover,
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt:focus{
  text-decoration:underline;
  text-underline-offset:3px;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt:focus-visible{
  border-radius:6px;
  outline:2px solid var(--jsst-top-menu-bg);
  outline-offset:2px;
}

/* --- the remarks panel --------------------------------------------------- */
/* indented to line up with the data column (64px face + the 14px grid gap) */
#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm{
  box-sizing:border-box;
  margin-block-start:14px;
  margin-inline-start:78px;
  padding:12px 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm-title{
  margin-block-end:4px;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.5;
  text-transform:uppercase;
  opacity:.65;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm-val{
  color:var(--jsst-content-text);
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm-val > :first-child{
  margin-block-start:0;
}

#jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm-val > :last-child{
  margin-block-end:0;
}

/* --- responsive ---------------------------------------------------------- */
/* Two tracks, because the site runs both: real viewport media queries and the
   `jsst-cq-*` width classes jsst-site-complete.js stamps on the root for
   module-position embedding. Same breakpoints as the rest of the sheet. */

@media (max-width:760px){
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp{
    padding:16px 16px;
  }
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm{
    margin-inline-start:0;
  }
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp{
  padding:16px 16px;
}

#jsst-site.jsst-site-root.jsst-cq-narrow.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-btm{
  margin-inline-start:0;
}

@media (max-width:520px){
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp{
    padding:14px 14px;
  }
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp{
    width:56px;
    height:56px;
  }
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp img{
    width:32px;
    height:32px;
  }
  #jsst-site.jsst-site-root.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt{
    font-size:16px;
  }
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-wrp{
  padding:14px 14px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp{
  width:56px;
  height:56px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-img-wrp img{
  width:32px;
  height:32px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-feedback.jsst-layout-feedbacks .jsst-feedback-det-list-data-top-val-txt{
  font-size:16px;
}

/* ============================================================================
   STAFF DETAIL REPORT — agent info + stat boxes  (layout=staffdetailreport)
   ----------------------------------------------------------------------------
   Additive only. Scoped to
   `#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport`,
   so the sibling report layouts (staffreports, departmentreports) are untouched.

   What was missing, measured live on this page: the outer `.js-admin-staff-wrapper`
   card already existed (white, 1px border, r13, 2-col grid) but everything inside
   it was legacy. `.jsticket-left` was still float-based, `.js-report-staff-pic` a
   raw 86px square, and name / username / email all computed identically at
   16px/400. The five `.js-admin-report-box` items were bare `display:block`
   138x24 strips — number and label running inline on one line, no card, and
   `.js-report-box-color` sitting at height:0 with no background at all.

   Deliberately NOT restated here: `grid-template-columns` on `.jsticket-right`
   and on `.js-admin-staff-wrapper`. Both already have a full responsive collapse
   (5>3>2>1 and 2>1) driven by rules one class less specific than these; redeclaring
   the columns at this specificity would pin them open at every width.

   Direction-neutral: logical properties + grid/flex flow only, no `[dir="rtl"]`.
   ========================================================================== */

/* --- agent identity ------------------------------------------------------ */
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-left{
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  min-width:0;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-image-wrapper,
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-cnt-wrapper{
  float:none;
  width:auto;
  min-width:0;
  padding:0;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-pic{
  display:block;
  box-sizing:border-box;
  width:86px;
  height:86px;
  border:1px solid var(--jsst-border-color);
  border-radius:50%;
  background:var(--jsst-secondary-bg);
  object-fit:cover;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-name{
  color:var(--jsst-heading-color);
  font-size:18px;
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-username{
  margin-block-start:4px;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-email{
  margin-block-start:3px;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  opacity:.8;
  overflow-wrap:anywhere;
}

/* --- stat boxes ---------------------------------------------------------- */
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right{
  gap:10px;
  align-items:stretch;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-admin-report-box{
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:88px;
  margin:0;
  padding:14px 8px 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  text-align:center;
  overflow:hidden;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-report-box-number{
  display:block;
  width:auto;
  color:var(--jsst-heading-color);
  font-size:24px;
  font-weight:800;
  line-height:1.05;
}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-report-box-title{
  display:block;
  width:auto;
  margin-block-start:7px;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  text-transform:uppercase;
  opacity:.75;
}

/* the strip was rendering at height:0 with no colour, so it never showed */
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-report-box-color{
  position:absolute;
  inset-inline-start:0;
  inset-inline-end:0;
  bottom:0;
  height:4px;
  background:var(--jsst-border-color);
}

/* one status colour per box, on the strip and on the count */
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box1 .js-report-box-color{background:#2563eb;}
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box1 .js-report-box-number{color:#2563eb;}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box2 .js-report-box-color{background:#059669;}
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box2 .js-report-box-number{color:#059669;}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box3 .js-report-box-color{background:#d97706;}
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box3 .js-report-box-number{color:#d97706;}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box4 .js-report-box-color{background:#dc2626;}
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box4 .js-report-box-number{color:#dc2626;}

#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box5 .js-report-box-color{background:#64748b;}
#jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .box5 .js-report-box-number{color:#64748b;}

/* --- responsive ---------------------------------------------------------- */
/* Column counts are inherited from the existing report rules (see the note at
   the top of this block); only the intrinsic sizes are adjusted here. */

@media (max-width:520px){
  #jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-left{
    grid-template-columns:64px minmax(0, 1fr);
    gap:12px;
  }
  #jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-pic{
    width:64px;
    height:64px;
  }
  #jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-name{
    font-size:16px;
  }
  #jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-admin-report-box{
    min-height:76px;
    padding:12px 8px 15px;
  }
  #jsst-site.jsst-site-root.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-report-box-number{
    font-size:21px;
  }
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-left{
  grid-template-columns:64px minmax(0, 1fr);
  gap:12px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-pic{
  width:64px;
  height:64px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports.jsst-layout-staffdetailreport .js-report-staff-name{
  font-size:16px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-admin-report-box{
  min-height:76px;
  padding:12px 8px 15px;
}

#jsst-site.jsst-site-root.jsst-cq-mobile.jsst-controller-reports.jsst-layout-staffdetailreport .jsticket-right .js-report-box-number{
  font-size:21px;
}

/* ============================================================================
   SUBMIT TICKET — the "remaining tickets" message above the form
   ----------------------------------------------------------------------------
   Additive only, scoped to `.jsst-submit-ticket-page`.

   Root cause, measured live: the admin-configured instruction block
   (`.js-ticket-form-instruction-message`) is a direct child of the page wrapper,
   outside `#adminForm`, so the `grid-column:1 / -1` rules never reach it and it
   keeps `float:left` from the legacy `.js-col-md-12` grid. The alert that follows
   had no `clear`, so its border-box started at the *same* y as the float while its
   text was pushed below it: a 198px-tall box with ~85px of dead space at the top,
   its background drawn behind the instruction block. Un-floating the instruction
   block fixes the cause (it is full-width either way, so it renders identically);
   `clear:both` on the alert covers the case where anything else floats above it.

   The alert itself was raw Bootstrap-2: 4px radius, olive `#dae6da`, a 24px <h4>
   reading "Message", and a bare `×` sitting inline *before* the heading. The
   markup comes from `administrator/.../models/ticket.php::4293` and is not
   changed here — only its presentation.

   Direction-neutral: the close button is placed with `inset-inline-end`.
   ========================================================================== */

#jsst-site.jsst-site-root .jsst-submit-ticket-page > .js-ticket-form-instruction-message{
  float:none;
  width:100%;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap{
  position:relative;
  clear:both;
  box-sizing:border-box;
  width:100%;
  margin:0 0 18px;
  padding:16px 20px;
  padding-inline-end:56px;
  border:1px solid #a7f3d0;
  border-radius:18px;
  background:#ecfdf5;
  color:#065f46;
  box-shadow:none;
}

/* was inline, so it rendered as a stray glyph on the line above the heading */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap > .close{
  position:absolute;
  inset-block-start:12px;
  inset-inline-end:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
  background:transparent;
  color:#065f46;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  text-shadow:none;
  opacity:.6;
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap > .close:hover,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap > .close:focus{
  background:rgba(6, 95, 70, .10);
  opacity:1;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap .alert-heading{
  margin:0 0 4px;
  color:#065f46;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.4;
  text-transform:uppercase;
  opacity:.75;
}

#jsst-site.jsst-site-root .jsst-submit-ticket-page .jsticket-remaining-ticket-wrap .alert-message{
  color:#065f46;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* =====================================================================
   Ticket detail - reply form footer
   =====================================================================
   Ticket Status, Append Signature and Post Reply had no vertical rhythm
   between them: the section titles sat flush against their own controls and
   the sections flush against each other, so the whole footer read as one
   run-on block. The radio rows already had `gap`, but nothing separated the
   groups. */

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-closeonreply-wrp,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-append-signature-wrp,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-assigntome-wrp{
  margin: 18px 0 0;
  padding: 0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-closeonreply-title,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-append-field-title,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-assigntome-field-title{
  display: block;
  margin: 0 0 8px;
  color: var(--jsst-ink, #0f172a);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

/* The signature options read as selectable pills rather than bare radios. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-signature-radio-box{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--jsst-border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-signature-radio-box label{
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-signature-radio-box:has(input:checked){
  border-color: var(--jsst-primary, #2563eb);
  background: #eff6ff;
}

/* Close-on-reply is a single checkbox, so it gets the same pill treatment
   for consistency with the row below it. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .replyFormStatus{
  gap: 10px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-closeonreply-wrp label,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-assigntome-wrp label{
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Give the submit its own breathing room and a rule to sit under. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp{
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--jsst-border, #e2e8f0);
}

/* =====================================================================
   TinyMCE inside the ticket-detail dialogs
   ===================================================================== */

/* 1. Toolbar buttons overlapping each other.
   jsst-modern-site-late.css sets `min-width:0` on every .tox-tbtn / .tox-mbtn.
   TinyMCE lays its toolbar groups out with flexbox, and a flex item defaults to
   `min-width:auto`, which is what stops it shrinking below its own content.
   Forcing it to 0 removes that floor, so as soon as the toolbar is wider than
   the space available every button shrinks past its icon and they overlap -
   "U" drawn over "S", the "Paragraph" label over the alignment icons.

   Restoring the automatic minimum, and telling the buttons not to shrink, lets
   TinyMCE do what it already knows how to do: move the overflow into the "..."
   menu instead of squashing everything. */
#jsst-site.jsst-site-root .tox .tox-tbtn,
#jsst-site.jsst-site-root .tox .tox-mbtn,
#jsst-site.jsst-site-root .tox .tox-split-button,
#jsst-site.jsst-site-root .tox .tox-toolbar__group button{
  min-width: auto;
  flex: 0 0 auto;
}

/* The format picker carries a text label, so it needs room for the word. */
#jsst-site.jsst-site-root .tox .tox-tbtn--select{
  padding: 0 10px;
  white-space: nowrap;
}

/* 2. Editor collapsing to no height in the popups.
   `min-height:170px` on .tox-edit-area is scoped to #js-tk-formwrapper and
   .js-ticket-add-form-wrapper - the Submit Ticket form. The dialogs on this page
   match neither, so their edit area had no floor at all and rendered as a bare
   strip showing only "p" and the word count. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox-tinymce{
  min-height: 240px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox-edit-area,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox-edit-area__iframe,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox-edit-area iframe{
  min-height: 170px;
}

/* Toolbar wrapping needs room to breathe once buttons stop overlapping. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox .tox-toolbar__primary,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .tox .tox-toolbar__overflow{
  flex-wrap: wrap;
}