/* ==== THEME COLOURS ====================================================
   The seven colours the administrator sets in Components > JS Support Ticket
   > Themes. Those are stored as $color1..$color7 in include/css/color.php and
   re-emitted as these custom properties by jssupportticket.php, which loads
   after this file and therefore wins. The values below are the shipped
   defaults, so the stylesheet still renders correctly on its own.

     color1  --jsst-top-menu-bg          Top menu background
     color2  --jsst-heading-color        Heading and accent colour
     color3  --jsst-content-bg           Content background
     color4  --jsst-content-text         Content text colour
     color5  --jsst-border-color         Borders and dividers
     color6  --jsst-secondary-bg         Secondary button and badge background
     color7  --jsst-header-action-text   Header and action text
   ====================================================================== */
:root {
  --jsst-top-menu-bg: #2563eb;
  --jsst-heading-color: #1e293b;
  --jsst-content-bg: #f8fafc;
  --jsst-content-text: #334155;
  --jsst-border-color: #dbe4ef;
  --jsst-secondary-bg: #eff6ff;
  --jsst-header-action-text: #ffffff;
}

/* ==== FOLDED PER-VIEW STYLES (was include/css/inc.css/*.css) ==== */
/* These 42 per-view files were loaded individually by each layout, always
   before this file. They are concatenated here in the same cascade position,
   so ordering is unchanged. Verified: 409 selectors, none shared between the
   files and none unscoped, so loading them site-wide cannot collide. */

/* --- gdpr-adderasedatarequest.css --- */
/* Scoped for JS Support Ticket 1.3.0. */
/* GDPR page only. These selectors are all generic containers
   (#js-tk-formwrapper, .js-form-value, .js-ticket-top-search-wrp, ...), so
   loading them site-wide leaked legacy 42px/square-corner inputs and
   float-based bars onto every other form page. Scoped to the gdpr
   controller, which is where this file used to be loaded and nowhere else. */
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper{width:100%; float:left; padding-top:20px;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-form-title {padding:5px 0px;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-form-title  label{display:inline;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-form-value {float:left;width:100%;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-append-premade{width:70%; display:inline-block;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-append-premadecheck{width:30%;display:inline-block;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-append-premadecheck label{display:inline-block;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-append-premadecheck input#append{margin:0 7px;}
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-form-value input.js-form-input-field,
#jsst-site.jsst-controller-gdpr div#js-tk-formwrapper div.js-form-value textarea{width:100% !important;padding:5px 5px;margin-bottom:0;border-radius:0;box-shadow:unset !important;min-height:42px;}
#jsst-site.jsst-controller-gdpr div.js-margin-bottom{margin-bottom:10px;}
#jsst-site.jsst-controller-gdpr div.js-ticket-top-search-wrp{border:1px solid #d1d1d1;}
#jsst-site.jsst-controller-gdpr div.js-ticket-top-search-wrp.second-style{float:left;width:100%;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp.second-style{background-color:#f5f2f5;color:var(--jsst-heading-color);}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp{float:left;width:100%; padding:10px;background-color:var(--jsst-heading-color);color:#ffffff;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp div.js-ticket-heading-left{float:left;width:60%;padding:15px 10px;line-height:initial;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp div.js-ticket-heading-right{float:left;width:40%;text-align:end;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp div.js-ticket-heading-right a.js-ticket-add-download-btn{display:inline-block;padding:15px 25px;text-decoration:none;outline:0px;line-height:initial;    background:#fff;color:var(--jsst-heading-color);}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp div.js-ticket-heading-right a.js-ticket-add-download-btn span.js-ticket-add-img-wrp{display:inline-block;margin-right:5px;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp div.js-ticket-heading-right a.js-ticket-add-download-btn span.js-ticket-add-img-wrp img{vertical-align:text-bottom;}

#jsst-site.jsst-controller-gdpr div.js-ticket-top-search-wrp.second-style{margin-top:20px;margin-bottom:15px;}
#jsst-site.jsst-controller-gdpr div.js-ticket-search-heading-wrp.second-style div.js-ticket-heading-right a.js-ticket-add-download-btn{background:var(--jsst-content-text);color:#fff;}
#jsst-site.jsst-controller-gdpr div.js-form-submit-btn-wrp{float:left;width:calc(100% - 40px);margin:0px 20px;text-align:center;padding:20px 0px 25px 0px;margin-top:35px;}
#jsst-site.jsst-controller-gdpr div.js-form-submit-btn-wrp input.js-save-button{padding:14px 10px;margin-right:10px;min-width:120px;border-radius:0px;border:1px solid;font-weight:bold;}
#jsst-site.jsst-controller-gdpr div.js-form-submit-btn-wrp a.js-cancel-button{display:inline-block;padding:14px 10px;margin-right:10px;min-width:120px;border-radius:0px;text-decoration:none !important; outline:0px !important;}

/* --- mail-navigation.css --- */
/* v413 Shared mail navigation. Loaded after every legacy mail page stylesheet. */
#jsst-site .jsst-mail-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:100%;
    margin:18px 0 20px;
    box-sizing:border-box;
}
#jsst-site .jsst-mail-nav-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:0;
    min-height:54px;
    padding:12px 16px;
    border:1px solid var(--jsst-border-color);
    border-radius:14px;
    background:#fff;
    color:var(--jsst-top-menu-bg);
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    text-align:center;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
    box-sizing:border-box;
}
#jsst-site .jsst-mail-nav-item:hover{
    border-color:var(--jsst-top-menu-bg);
    background:var(--jsst-content-bg);
    color:var(--jsst-top-menu-bg);
    text-decoration:none;
}
#jsst-site .jsst-mail-nav-item-active{
    border-color:var(--jsst-top-menu-bg);
    background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
    color:var(--jsst-top-menu-bg);
    box-shadow:0 12px 25px rgba(79,102,255,.20);
}
#jsst-site .jsst-mail-nav-item-active:hover{color:#fff;}
#jsst-site .jsst-mail-nav-icon{
    display:block;
    width:18px;
    height:18px;
    flex:0 0 18px;
    object-fit:contain;
}
@media (max-width:640px){
    #jsst-site .jsst-mail-nav{grid-template-columns:1fr;}
}

/* --- reports-staffreports.css --- */
/* v413 Staff Member Reports: isolated structure; no legacy Bootstrap/float classes. */
#jsst-site .jsst-staff-report-card{
    width:100%;
    margin:0;
    border:0;
    background:#fff;
}
#jsst-site .jsst-staff-report-link{
    display:grid;
    grid-template-columns:minmax(260px,.9fr) minmax(0,2fr);
    gap:22px;
    align-items:center;
    width:100%;
    padding:22px 24px;
    color:inherit;
    text-decoration:none;
    box-sizing:border-box;
}
#jsst-site .jsst-staff-report-profile{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
#jsst-site .jsst-staff-report-avatar-wrap{
    flex:0 0 74px;
    width:74px;
    height:74px;
    border-radius:50%;
    overflow:hidden;
    background:var(--jsst-content-bg);
    border:1px solid var(--jsst-border-color);
}
#jsst-site .jsst-staff-report-avatar{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#jsst-site .jsst-staff-report-person{
    display:grid;
    gap:7px;
    min-width:0;
}
#jsst-site .jsst-staff-report-name{
    color:var(--jsst-top-menu-bg);
    font-size:17px;
    line-height:1.25;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
}
#jsst-site .jsst-staff-report-username,
#jsst-site .jsst-staff-report-email{
    min-width:0;
    color:var(--jsst-content-text);
    font-size:14px;
    line-height:1.35;
    overflow-wrap:anywhere;
}
#jsst-site .jsst-staff-report-metrics{
    display:grid;
    grid-template-columns:repeat(5,minmax(86px,1fr));
    gap:10px;
    min-width:0;
}
#jsst-site .jsst-staff-report-metric{
    --metric:var(--jsst-top-menu-bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:90px;
    padding:13px 8px 12px;
    border:1px solid var(--jsst-border-color);
    border-bottom:4px solid var(--metric);
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 18px rgba(15,23,42,.05);
    box-sizing:border-box;
}
#jsst-site .jsst-staff-report-number{
    display:block;
    color:var(--jsst-heading-color);
    font-size:24px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}
#jsst-site .jsst-staff-report-label{
    display:block;
    margin-top:8px;
    color:var(--jsst-content-text);
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    white-space:nowrap;
}
#jsst-site .jsst-metric-new{--metric:#18add3;}
#jsst-site .jsst-metric-answered{--metric:#18a35c;}
#jsst-site .jsst-metric-pending{--metric:#e59a00;}
#jsst-site .jsst-metric-overdue{--metric:#e45d4e;}
#jsst-site .jsst-metric-closed{--metric:#6840c6;}
@media (max-width:1050px){
    #jsst-site .jsst-staff-report-link{grid-template-columns:1fr;}
}
@media (max-width:720px){
    #jsst-site .jsst-staff-report-link{padding:18px;}
    #jsst-site .jsst-staff-report-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
    #jsst-site .jsst-staff-report-metric:last-child{grid-column:1 / -1;}
}

/* --- role-rolepermissions.css --- */
/* Role permissions: show the selected role name before the permission list. */
#jsst-site .js-ticket-rolepermissions-wrapper .js-role-permissions-role-card{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    margin:0 0 18px;
    padding:18px 20px;
    border:1px solid var(--jsst-border-color);
    border-radius:16px;
    background:#fff;
    box-sizing:border-box;
}
#jsst-site .js-ticket-rolepermissions-wrapper .js-role-permissions-role-label{
    color:var(--jsst-content-text);
    font-size:14px;
    font-weight:800;
    line-height:1.3;
}
#jsst-site .js-ticket-rolepermissions-wrapper .js-role-permissions-role-value{
    color:var(--jsst-top-menu-bg);
    font-size:18px;
    font-weight:900;
    line-height:1.3;
}

/* --- roles-formrole.css --- */
/* Role add/edit page: the permissions list is the main form body, so the
   role name card must not sit inside the generic full-page form card. */
#jsst-site div#js-tk-formwrapper.js-ticket-role-form-wrapper{
    display:block;
    width:100%;
    max-width:100%;
    margin:0 auto 30px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
    float:none;
}
#jsst-site div#js-tk-formwrapper.js-ticket-role-form-wrapper form#adminForm{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
}

/* Role add/edit: keep the name field as one complete card above the permissions list. */
#jsst-site div#js-tk-formwrapper .js-role-name-panel{
    display:block;
    float:none;
    clear:both;
    width:100%;
    margin:0 0 22px;
    padding:0;
    box-sizing:border-box;
}
#jsst-site div#js-tk-formwrapper .js-role-name-field{
    display:block;
    width:100%;
    padding:22px;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 36px rgba(15,23,42,.04);
    box-sizing:border-box;
}
#jsst-site div#js-tk-formwrapper .js-role-name-label{
    display:block;
    margin:0 0 10px;
    color:var(--jsst-heading-color);
    font-size:14px;
    font-weight:900;
    line-height:1.25;
}
#jsst-site div#js-tk-formwrapper .js-required-mark{
    color:#e11d48;
}
#jsst-site div#js-tk-formwrapper .js-role-name-field input.js-ticket-form-input{
    display:block;
    width:100%;
}

/* --- staff-staffprofile.css --- */
/* JS Support Ticket — Staff profile page
   Dedicated structural layout. These classes are intentionally unique to this page
   so legacy float/grid rules from other forms cannot squeeze the profile fields. */
#jsst-site .jsst-staff-profile-body{
    width:100%;
    padding:28px;
    box-sizing:border-box;
}
#jsst-site .jsst-staff-profile-form{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:28px;
    align-items:start;
    width:100%;
    min-width:0;
    margin:0;
}
#jsst-site .jsst-staff-profile-photo-card{
    min-width:0;
    padding:18px;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:var(--jsst-content-bg);
    text-align:center;
    box-sizing:border-box;
}
#jsst-site .jsst-staff-profile-photo{
    position:relative;
    width:170px;
    height:170px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid var(--jsst-border-color);
    border-radius:18px;
    background:#fff;
}
#jsst-site .jsst-staff-profile-photo img.profile-image{
    position:static;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    object-fit:cover;
}
#jsst-site .jsst-staff-profile-upload,
#jsst-site .jsst-staff-profile-upload-submit{
    width:100%;
    margin:12px 0 0;
}
#jsst-site .jsst-staff-profile-upload .js-ticket-file-upload-label,
#jsst-site .jsst-staff-profile-upload-submit .js-ticket-file-upload-label{
    display:block;
    width:100%;
    padding:11px 14px;
    border:0;
    border-radius:10px;
    background:var(--jsst-top-menu-bg);
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-sizing:border-box;
}
#jsst-site .jsst-staff-profile-upload input[type="file"]{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}
#jsst-site .jsst-staff-profile-details{
    width:100%;
    min-width:0;
}
#jsst-site .jsst-staff-profile-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    width:100%;
    min-width:0;
}
#jsst-site .jsst-staff-profile-field{
    min-width:0;
}
#jsst-site .jsst-staff-profile-field-wide{
    grid-column:1 / -1;
}
#jsst-site .jsst-staff-profile-label{
    display:block;
    width:100%;
    margin:0 0 7px;
    color:var(--jsst-content-text);
    font-size:13px;
    font-weight:800;
    line-height:1.4;
    white-space:normal;
}
#jsst-site .jsst-staff-profile-value{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
}
#jsst-site .jsst-staff-profile-value .js-ticket-form-field-input{
    display:block;
    width:100%;
    min-width:0;
    height:50px;
    margin:0;
    padding:0 46px 0 14px;
    border:1px solid var(--jsst-border-color);
    border-radius:12px;
    background:var(--jsst-content-bg);
    color:var(--jsst-content-text);
    font-size:14px;
    line-height:48px;
    box-sizing:border-box;
}
#jsst-site .jsst-staff-profile-value .js-ticket-form-field-input:disabled{
    opacity:1;
    -webkit-text-fill-color:var(--jsst-content-text);
}
#jsst-site .jsst-staff-profile-value img.js-ticket-profile-form-img{
    position:absolute;
    top:50%;
    right:12px;
    width:22px;
    height:22px;
    margin:0;
    transform:translateY(-50%);
    cursor:pointer;
}

@media (max-width:900px){
    #jsst-site .jsst-staff-profile-form{
        grid-template-columns:190px minmax(0,1fr);
        gap:20px;
    }
    #jsst-site .jsst-staff-profile-photo{
        width:145px;
        height:145px;
    }
    #jsst-site .jsst-staff-profile-grid{
        grid-template-columns:minmax(0,1fr);
    }
    #jsst-site .jsst-staff-profile-field-wide{
        grid-column:auto;
    }
}
@media (max-width:680px){
    #jsst-site .jsst-staff-profile-body{
        padding:18px;
    }
    #jsst-site .jsst-staff-profile-form{
        grid-template-columns:minmax(0,1fr);
    }
    #jsst-site .jsst-staff-profile-photo-card{
        max-width:260px;
        margin:0 auto;
    }
}

/* --- staff-users.css --- */
/* JS Support Ticket - staff user selector popup. Scoped to legacy tk_ selector ids/classes. */
#tk_detail_wraper{width:100%;max-width:980px;margin:0 auto;padding:18px;background:#fff;color:var(--jsst-heading-color);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box;}
#tk_detail_wraper *{box-sizing:border-box;}
#tk_heading{margin:0 0 16px;padding:16px 18px;border:1px solid var(--jsst-border-color);border-radius:16px;background:var(--jsst-content-bg);}
#tk_heading_text{font-size:22px;font-weight:900;color:var(--jsst-heading-color);}
.tk_sepr_hr_line,#tk_mt_tabs_bottom_line_full{display:none;}
#tk_search{margin:0 0 16px;padding:16px;border:1px solid var(--jsst-border-color);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06);}
#tk_search_data{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#tk_search_title{font-size:13px;font-weight:800;color:var(--jsst-content-text);}
.tk_staff_search{min-height:42px;padding:0 12px;border:1px solid var(--jsst-border-color);border-radius:12px;background:#fff;color:var(--jsst-heading-color);}
.tk_dft_btn{min-height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--jsst-top-menu-bg);color:var(--jsst-header-action-text);font-weight:900;cursor:pointer;}
#tk_user_wraper{border:1px solid var(--jsst-border-color);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.06);}
#tk_user_heading{display:grid;grid-template-columns:70px 70px minmax(180px,1fr) minmax(180px,1fr) 100px;background:var(--jsst-content-bg);border-bottom:1px solid var(--jsst-border-color);}
.tk_user_small_heading,.tk_user_medium_heading,.tk_user_large_heading{display:flex;align-items:center;min-height:48px;padding:10px 12px;font-size:13px;font-weight:800;color:var(--jsst-heading-color);word-break:break-word;}
.tk_user_left_border{border-left:1px solid var(--jsst-border-color);}
.tk_user_table{width:100%;border-collapse:collapse;}
.tk_user_table tr{border-bottom:1px solid var(--jsst-border-color);}
.tk_user_table td{padding:10px 12px;vertical-align:middle;color:var(--jsst-heading-color);}
.tk_user_table a{color:var(--jsst-top-menu-bg);font-weight:900;text-decoration:none;cursor:pointer;}
#ticket_paginationlinks{margin-top:14px;}
@media(max-width:720px){#tk_search_data{display:grid;grid-template-columns:1fr;}#tk_user_wraper{overflow-x:auto;}#tk_user_heading,.tk_user_table{min-width:680px;}}

/* --- ticket-myticket.css --- */
/* JS Support Ticket - Customer My Tickets rewrite v216
   Scope: only views/ticket/tmpl/mytickets.php. */

#jsst-site.jsst-site-root .jsst-user-mytickets-page,
#jsst-site .jsst-user-mytickets-page{
  --jsst-mytickets-panel:#ffffff;
  --jsst-mytickets-panel-glass:rgba(255,255,255,.88);
  --jsst-mytickets-surface:var(--jsst-content-bg);
  --jsst-mytickets-surface-2:var(--jsst-content-bg);
  --jsst-mytickets-border:var(--jsst-border-color);
  --jsst-mytickets-border-soft:var(--jsst-border-color);
  --jsst-mytickets-text:var(--jsst-heading-color);
  --jsst-mytickets-muted:var(--jsst-content-text);
  --jsst-mytickets-blue:var(--jsst-top-menu-bg);
  --jsst-mytickets-cyan:#06a9d6;
  --jsst-mytickets-indigo:var(--jsst-top-menu-bg);
  --jsst-mytickets-navy:var(--jsst-heading-color);
  --jsst-mytickets-shadow:0 26px 70px rgba(15,23,42,.075);
  --jsst-mytickets-shadow-soft:0 16px 36px rgba(15,23,42,.055);
  --jsst-mytickets-ring:var(--jsst-border-color);
  width:100%;
  box-sizing:border-box;
  color:var(--jsst-mytickets-text);
  isolation:isolate;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page *{
  box-sizing:border-box;
}

/* Breadcrumb strip */
#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-wrapper-top,
#jsst-site .jsst-user-mytickets-page #jsst-wrapper-top{
  width:100%;
  margin:0 0 24px;
  padding:0;
  clear:both;
  float:none;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-wrapper-top-left,
#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs{
  width:100%;
  float:none;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs li{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
  color:var(--jsst-mytickets-muted);
  font-size:15px;
  font-weight:800;
  line-height:1.2;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs li + li::before{
  content:"/";
  color:var(--jsst-heading-color);
  opacity:.65;
  font-weight:900;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs a{
  color:var(--jsst-mytickets-blue);
  text-decoration:none;
  font-weight:800;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs a:hover{
  color:var(--jsst-top-menu-bg);
}

/* Statistics */
#jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
#jsst-site .jsst-mytickets-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  width:100%;
  margin:0 0 22px;
  padding:0;
  clear:both;
}

#jsst-site.jsst-site-root .jsst-myticket-stat{
  --jsst-stat-soft:color-mix(in srgb,var(--jsst-stat-color) 10%,#ffffff);
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:126px;
  padding:20px 22px 28px;
  border:1px solid rgba(197,215,235,.85);
  border-radius:22px;
  background:radial-gradient(circle at 18% 8%,color-mix(in srgb,var(--jsst-stat-color) 13%,transparent),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,251,255,.92));
  color:var(--jsst-mytickets-text);
  text-decoration:none;
  box-shadow:0 18px 46px rgba(15,23,42,.055);
  overflow:hidden;
  transform:translateZ(0);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

#jsst-site.jsst-site-root .jsst-myticket-stat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.72),transparent 42%);
  pointer-events:none;
}

#jsst-site.jsst-site-root .jsst-myticket-stat::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:16px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--jsst-stat-color) 0%,var(--jsst-stat-color) var(--jsst-stat-percent),var(--jsst-border-color) var(--jsst-stat-percent),var(--jsst-border-color) 100%);
  box-shadow:0 8px 18px color-mix(in srgb,var(--jsst-stat-color) 20%,transparent);
}

#jsst-site.jsst-site-root .jsst-myticket-stat:hover,
#jsst-site.jsst-site-root .jsst-myticket-stat.is-active{
  border-color:color-mix(in srgb,var(--jsst-stat-color) 34%,var(--jsst-top-menu-bg));
  box-shadow:0 26px 58px rgba(15,23,42,.09);
  transform:translateY(-2px);
}

#jsst-site.jsst-site-root .jsst-myticket-ring{
  width:66px;
  height:66px;
  border-radius:50%;
  display:block;
  background:conic-gradient(var(--jsst-stat-color) var(--jsst-stat-percent),var(--jsst-mytickets-ring) 0);
  box-shadow:0 14px 30px rgba(15,23,42,.07);
  position:relative;
  z-index:1;
}

#jsst-site.jsst-site-root .jsst-myticket-ring::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:rgba(255,255,255,.52);
}

#jsst-site.jsst-site-root .jsst-myticket-ring::after{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(220,232,246,.65);
}

#jsst-site.jsst-site-root .jsst-myticket-stat-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:5px;
  min-width:0;
  padding-bottom:10px;
}

#jsst-site.jsst-site-root .jsst-myticket-stat-label,
#jsst-site.jsst-site-root .jsst-myticket-stat-count{
  display:inline;
  color:var(--jsst-mytickets-text);
  font-size:16px;
  font-weight:950;
  line-height:1.25;
  text-transform:none;
  white-space:normal;
  letter-spacing:-.01em;
}

/* Filter */
#jsst-site.jsst-site-root .jsst-mytickets-filter-card,
#jsst-site .jsst-mytickets-filter-card{
  position:relative;
  width:100%;
  margin:0 0 24px;
  padding:20px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.94)),
    radial-gradient(circle at 90% 0%,rgba(37,99,235,.08),transparent 34%);
  box-shadow:var(--jsst-mytickets-shadow-soft);
  clear:both;
  overflow:visible;
  z-index:4;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  width:100%;
}

#jsst-site.jsst-site-root .jsst-mytickets-advanced{
  display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-top:12px;
}

#jsst-site.jsst-site-root .jsst-mytickets-advanced.is-open{
  display:grid;
}

#jsst-site.jsst-site-root .jsst-mytickets-field,
#jsst-site.jsst-site-root .jsst-mytickets-custom-fields{
  width:100%;
  min-width:0;
  float:none;
  clear:none;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .jsst-mytickets-custom-fields{
  display:contents;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card input[type="text"],
#jsst-site.jsst-site-root .jsst-mytickets-filter-card input[type="email"],
#jsst-site.jsst-site-root .jsst-mytickets-filter-card select,
#jsst-site.jsst-site-root .jsst-mytickets-filter-card .js-ticket-input-field{
  width:100%;
  max-width:100%;
  min-height:56px;
  height:56px;
  margin:0;
  padding:0 18px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:var(--jsst-mytickets-text);
  font-size:15px;
  line-height:56px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  text-transform:none;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card input:focus,
#jsst-site.jsst-site-root .jsst-mytickets-filter-card select:focus{
  border-color:var(--jsst-top-menu-bg);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card .field-calendar,
#jsst-site.jsst-site-root .jsst-mytickets-filter-card .input-group{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  width:100%;
  margin:0;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card .field-calendar input,
#jsst-site.jsst-site-root .jsst-mytickets-filter-card .input-group input{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  border-radius:16px 0 0 16px;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card .field-calendar button:not(.js-btn),
#jsst-site.jsst-site-root .jsst-mytickets-filter-card .input-group button:not(.js-btn),
#jsst-site.jsst-site-root .jsst-mytickets-filter-card .input-group .btn:not(.js-btn){
  flex:0 0 56px;
  width:56px;
  min-width:56px;
  min-height:56px;
  height:56px;
  margin:0;
  border-radius:0 16px 16px 0;
  border:1px solid var(--jsst-top-menu-bg);
  border-left:0;
  background:linear-gradient(180deg,#ffffff,var(--jsst-content-bg));
  color:var(--jsst-mytickets-blue);
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-card .input-group-append{
  display:flex;
  margin:0;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:auto;
  min-width:max-content;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-toggle,
#jsst-site.jsst-site-root .jsst-mytickets-search-btn,
#jsst-site.jsst-site-root .jsst-mytickets-reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  min-height:56px;
  min-width:108px;
  padding:0 22px;
  border:0;
  border-radius:16px;
  font-size:14px;
  font-weight:950;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-toggle{
  background:linear-gradient(180deg,var(--jsst-content-bg),var(--jsst-content-bg));
  color:var(--jsst-top-menu-bg);
  border:1px solid var(--jsst-border-color);
}

#jsst-site.jsst-site-root .jsst-mytickets-search-btn{
  background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
  color:var(--jsst-header-action-text);
  box-shadow:0 16px 34px rgba(79,102,246,.26);
}

#jsst-site.jsst-site-root .jsst-mytickets-reset-btn{
  background:var(--jsst-mytickets-navy);
  color:#fff;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-filter-toggle:hover,
#jsst-site.jsst-site-root .jsst-mytickets-search-btn:hover,
#jsst-site.jsst-site-root .jsst-mytickets-reset-btn:hover{
  transform:translateY(-1px);
}

/* List heading and sort */
#jsst-site.jsst-site-root .jsst-mytickets-list-head,
#jsst-site .jsst-mytickets-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  margin:0 0 18px;
  padding:18px 20px 18px 28px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,252,255,.94)),
    radial-gradient(circle at 100% 0%,rgba(37,99,235,.09),transparent 32%);
  box-shadow:var(--jsst-mytickets-shadow-soft);
  overflow:hidden;
}

#jsst-site.jsst-site-root .jsst-mytickets-list-head h2{
  margin:0;
  color:var(--jsst-mytickets-text);
  font-size:24px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:-.03em;
}

#jsst-site.jsst-site-root .jsst-mytickets-sort{
  display:flex;
  align-items:center;
  gap:10px;
}

#jsst-site.jsst-site-root .jsst-mytickets-sort select{
  width:176px;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:16px;
  background:#fff;
  color:var(--jsst-mytickets-text);
  font-size:15px;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-sort-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
  box-shadow:0 14px 28px rgba(79,102,246,.25);
}

#jsst-site.jsst-site-root .jsst-mytickets-sort-btn img{
  max-width:18px;
  max-height:18px;
  filter:brightness(0) invert(1);
}

/* Ticket cards */
#jsst-site.jsst-site-root .jsst-mytickets-list,
#jsst-site .jsst-mytickets-list{
  width:100%;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .jsst-mytickets-list .jsst-pagination-form,
#jsst-site .jsst-mytickets-list .jsst-pagination-form{
    margin-top: 10px;
}
#jsst-site.jsst-site-root .jsst-mytickets-list  #jl_pagination {
    border-radius: 16px;
    border: 1px solid var(--jsst-border);
}

#jsst-site.jsst-site-root .jsst-myticket-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,440px);
  gap:24px;
  align-items:center;
  width:100%;
  margin:0 0 16px;
  padding:24px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,253,255,.96)),
    radial-gradient(circle at 8% 10%,rgba(37,99,235,.08),transparent 30%);
  box-shadow:0 18px 42px rgba(15,23,42,.055);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#jsst-site.jsst-site-root .jsst-myticket-card:hover{
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 28px 64px rgba(15,23,42,.085);
  transform:translateY(-1px);
}

#jsst-site.jsst-site-root .jsst-myticket-main{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:18px;
  align-items:center;
  min-width:0;
}

#jsst-site.jsst-site-root .jsst-myticket-avatar{
  flex:0 0 66px;
  width:66px;
  height:66px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(180deg,var(--jsst-content-bg),var(--jsst-content-bg));
  border:1px solid var(--jsst-border-color);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 28px rgba(15,23,42,.055);
}

#jsst-site.jsst-site-root .jsst-myticket-avatar img{
  width:66px;
  height:66px;
  object-fit:cover;
  border-radius:22px;
}

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

#jsst-site.jsst-site-root .jsst-myticket-name{
  margin:0 0 6px;
  color:var(--jsst-mytickets-muted);
  font-size:13px;
  font-weight:850;
  line-height:1.2;
}

#jsst-site.jsst-site-root .jsst-myticket-summary h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:950;
  line-height:1.18;
  letter-spacing:-.025em;
}

#jsst-site.jsst-site-root .jsst-myticket-summary h3 a{
  color:var(--jsst-mytickets-blue);
  text-decoration:none;
}

#jsst-site.jsst-site-root .jsst-myticket-summary h3 a:hover{
  color:var(--jsst-top-menu-bg);
  text-decoration:underline;
  text-underline-offset:3px;
}

#jsst-site.jsst-site-root .jsst-myticket-department{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  color:var(--jsst-mytickets-muted);
  font-size:14px;
  line-height:1.3;
}

#jsst-site.jsst-site-root .jsst-myticket-department strong{
  color:var(--jsst-mytickets-text);
  font-weight:950;
}

#jsst-site.jsst-site-root .jsst-myticket-side{
  display:grid;
  gap:14px;
  min-width:0;
}

#jsst-site.jsst-site-root .jsst-myticket-badges{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:center;
}

#jsst-site.jsst-site-root .jsst-myticket-status-pill,
#jsst-site.jsst-site-root .jsst-myticket-priority-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:950;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}

#jsst-site.jsst-site-root .jsst-myticket-status-pill.is-open{background:linear-gradient(135deg,#1dbb64,#0e9f50);}
#jsst-site.jsst-site-root .jsst-myticket-status-pill.is-closed{background:linear-gradient(135deg,#ff5a5a,#ef4444);}
#jsst-site.jsst-site-root .jsst-myticket-status-pill.is-replied{background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));}
#jsst-site.jsst-site-root .jsst-myticket-status-pill.is-progress{background:linear-gradient(135deg,#fb923c,#f97316);}

#jsst-site.jsst-site-root .jsst-myticket-priority-pill{
  background:linear-gradient(135deg,var(--jsst-priority-color,#16a34a),color-mix(in srgb,var(--jsst-priority-color,#16a34a) 82%,var(--jsst-heading-color)));
}

#jsst-site.jsst-site-root .jsst-myticket-mini-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--jsst-content-bg);
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:950;
  line-height:1;
}

#jsst-site.jsst-site-root .jsst-myticket-meta{
  display:grid;
  gap:8px;
}

#jsst-site.jsst-site-root .jsst-myticket-meta div{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:8px;
  color:var(--jsst-mytickets-muted);
  font-size:14px;
  line-height:1.35;
}

#jsst-site.jsst-site-root .jsst-myticket-meta strong{
  color:var(--jsst-mytickets-text);
  font-weight:950;
}

#jsst-site.jsst-site-root .jsst-myticket-meta span{
  text-align:end;
  overflow-wrap:anywhere;
}

/* Empty and pagination */
#jsst-site.jsst-site-root .jsst-mytickets-empty,
#jsst-site .jsst-mytickets-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:230px;
  width:100%;
  padding:50px 20px;
  border:1px dashed var(--jsst-top-menu-bg);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94)),
    radial-gradient(circle at 50% 0%,rgba(37,99,235,.08),transparent 38%);
  text-align:center;
  box-shadow:var(--jsst-mytickets-shadow-soft);
}

#jsst-site.jsst-site-root .jsst-mytickets-empty-icon{
  display:block;
  width:58px;
  height:58px;
  margin:0 0 16px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--jsst-content-bg),var(--jsst-border-color));
  border:1px solid var(--jsst-border-color);
  position:relative;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty-icon::before{
  content:"";
  position:absolute;
  left:17px;
  top:17px;
  width:20px;
  height:20px;
  border:3px solid var(--jsst-mytickets-blue);
  border-radius:7px;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty-icon::after{
  content:"";
  position:absolute;
  left:22px;
  top:26px;
  width:12px;
  height:3px;
  border-radius:999px;
  background:var(--jsst-mytickets-blue);
}

#jsst-site.jsst-site-root .jsst-mytickets-empty h3{
  margin:0 0 8px;
  color:var(--jsst-mytickets-text);
  font-size:24px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:-.025em;
}

#jsst-site.jsst-site-root .jsst-mytickets-empty p{
  margin:0;
  color:var(--jsst-mytickets-muted);
  font-size:15px;
}

#jsst-site.jsst-site-root .jsst-mytickets-pagination{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:18px 0 0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-pagination > div{
  margin:0;
  padding:0;
  float:none;
}

#jsst-site.jsst-site-root .jsst-mytickets-pagination select,
#jsst-site.jsst-site-root .jsst-mytickets-pagination .counter,
#jsst-site.jsst-site-root .jsst-mytickets-pagination #jl_pagination_counter{
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-mytickets-text);
  display:inline-flex;
  align-items:center;
}

@media (max-width:1180px){
  #jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
  #jsst-site .jsst-mytickets-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-mytickets-filter-main,
  #jsst-site .jsst-mytickets-filter-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-mytickets-filter-actions,
  #jsst-site .jsst-mytickets-filter-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
}

@media (max-width:980px){
  #jsst-site.jsst-site-root .jsst-mytickets-advanced,
  #jsst-site .jsst-mytickets-advanced{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-myticket-card,
  #jsst-site .jsst-myticket-card{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-myticket-meta span,
  #jsst-site .jsst-myticket-meta span{
    text-align:start;
  }
}

@media (max-width:680px){
  #jsst-site.jsst-site-root .jsst-user-mytickets-page #jsst-breadcrunbs ul,
  #jsst-site .jsst-user-mytickets-page #jsst-breadcrunbs ul{
    min-height:62px;
    padding:0 18px;
    border-radius:16px;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-stats-grid,
  #jsst-site.jsst-site-root .jsst-mytickets-filter-main,
  #jsst-site.jsst-site-root .jsst-mytickets-advanced,
  #jsst-site .jsst-mytickets-stats-grid,
  #jsst-site .jsst-mytickets-filter-main,
  #jsst-site .jsst-mytickets-advanced{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-filter-actions,
  #jsst-site .jsst-mytickets-filter-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    min-width:0;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-filter-toggle,
  #jsst-site.jsst-site-root .jsst-mytickets-search-btn,
  #jsst-site.jsst-site-root .jsst-mytickets-reset-btn,
  #jsst-site .jsst-mytickets-filter-toggle,
  #jsst-site .jsst-mytickets-search-btn,
  #jsst-site .jsst-mytickets-reset-btn{
    width:100%;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-list-head,
  #jsst-site .jsst-mytickets-list-head{
    flex-direction:column;
    align-items:stretch;
    padding:18px;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-sort,
  #jsst-site .jsst-mytickets-sort{
    width:100%;
  }
  #jsst-site.jsst-site-root .jsst-mytickets-sort select,
  #jsst-site .jsst-mytickets-sort select{
    flex:1 1 auto;
    width:auto;
  }
  #jsst-site.jsst-site-root .jsst-myticket-main,
  #jsst-site .jsst-myticket-main{
    grid-template-columns:58px minmax(0,1fr);
  }
  #jsst-site.jsst-site-root .jsst-myticket-avatar,
  #jsst-site.jsst-site-root .jsst-myticket-avatar img,
  #jsst-site .jsst-myticket-avatar,
  #jsst-site .jsst-myticket-avatar img{
    width:52px;
    height:52px;
    border-radius:18px;
  }
  #jsst-site.jsst-site-root .jsst-myticket-badges,
  #jsst-site .jsst-myticket-badges,
  #jsst-site.jsst-site-root .jsst-myticket-meta div,
  #jsst-site .jsst-myticket-meta div{
    grid-template-columns:1fr;
  }
}

@supports not (color:color-mix(in srgb,#000,#fff)){
  #jsst-site.jsst-site-root .jsst-myticket-stat,
  #jsst-site .jsst-myticket-stat{
    background:linear-gradient(145deg,#ffffff,var(--jsst-content-bg));
  }
  #jsst-site.jsst-site-root .jsst-myticket-priority-pill,
  #jsst-site .jsst-myticket-priority-pill{
    background:var(--jsst-priority-color,#16a34a);
  }
}

/* --- ticket-myticketstaff.css --- */
/* JS Support Ticket - Staff My Tickets polish v218
   Uses the customer My Tickets layout CSS as the base. This file only contains staff-only overrides. */

#jsst-site.jsst-site-root .jsst-staff-mytickets-page,
#jsst-site .jsst-staff-mytickets-page{
  --jsst-staff-gold:#f97316;
  --jsst-staff-lock:var(--jsst-heading-color);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-stats-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat{
  grid-template-columns:58px minmax(0,1fr);
  min-height:112px;
  padding:17px 16px 24px;
  border-radius:20px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-ring{
  width:56px;
  height:56px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat-copy{
  flex-wrap:nowrap;
  gap:5px;
  white-space:nowrap;
  padding-bottom:8px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat-label,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat-count{
  font-size:14px;
  line-height:1.2;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-saved-view-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto minmax(220px,1.15fr) auto;
  gap:12px;
  align-items:center;
  width:100%;
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

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

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-filter-actions{
  grid-column:1 / -1;
  justify-content:flex-end;
}

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

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-saved-view-row select,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-saved-view-row input{
  width:100%;
  max-width:100%;
  min-height:52px;
  height:52px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:15px;
  background:#fff;
  color:var(--jsst-mytickets-text);
  font-size:14px;
  line-height:52px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-apply-view,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-save-view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  height:52px;
  padding:0 18px;
  border:0;
  border-radius:15px;
  color:#fff;
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-apply-view{
  background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
  box-shadow:0 14px 28px rgba(79,102,246,.22);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-save-view{
  background:linear-gradient(135deg,#20b86a,#10984f);
  box-shadow:0 14px 28px rgba(16,152,79,.18);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-list-head p{
  margin:6px 0 0;
  color:var(--jsst-mytickets-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-ticket-card{
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:28px;
  padding:26px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-main{
  align-items:flex-start;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-name{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  margin:0 0 7px;
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-name span{
  display:block;
  max-width:100%;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:800;
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-ticket-side{
  gap:13px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-ticket-badges{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-status-pill.is-locked{
  background:linear-gradient(135deg,var(--jsst-content-text),var(--jsst-heading-color));
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-mini-badge.is-overdue{
  background:#fff7ed;
  color:#c2410c;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-meta-grid{
  padding:2px 0 0;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:42px;
  padding:0 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-top-menu-bg);
  font-size:13px;
  font-weight:950;
  line-height:1;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.045);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-action.is-primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
  color:var(--jsst-header-action-text);
  box-shadow:0 14px 28px rgba(79,102,246,.22);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-action:hover{
  transform:translateY(-1px);
}

@media (max-width:1380px){
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-stats-grid,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-stats-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat,
  #jsst-site .jsst-staff-mytickets-page .jsst-myticket-stat{
    grid-template-columns:52px minmax(0,1fr);
    padding-left:14px;
    padding-right:14px;
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-ring,
  #jsst-site .jsst-staff-mytickets-page .jsst-myticket-ring{
    width:50px;
    height:50px;
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat-label,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-myticket-stat-count,
  #jsst-site .jsst-staff-mytickets-page .jsst-myticket-stat-label,
  #jsst-site .jsst-staff-mytickets-page .jsst-myticket-stat-count{
    font-size:13px;
  }
}

@media (max-width:1280px){
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-stats-grid,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-filter-main,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-filter-main,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-advanced,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-advanced{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

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

@media (max-width:680px){
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-stats-grid,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-filter-main,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-saved-view-row,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-advanced,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-stats-grid,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-filter-main,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-saved-view-row,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-advanced{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-filter-actions,
  #jsst-site .jsst-staff-mytickets-page .jsst-staff-filter-actions,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-actions,
  #jsst-site .jsst-staff-mytickets-page .jsst-ticket-actions{
    display:grid;
    grid-template-columns:1fr;
    justify-content:stretch;
  }
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-action,
  #jsst-site .jsst-staff-mytickets-page .jsst-ticket-action{
    width:100%;
  }
}

/* Staff ticket filters: keep Joomla calendars above the list and style option fields as compact controls. */
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-advanced,
#jsst-site .jsst-staff-mytickets-page .jsst-staff-advanced{
  position:relative;
  z-index:5;
  overflow:visible;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-date-filter-field,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-date{
  position:relative;
  z-index:6;
  overflow:visible;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-staff-list-head{
  position:relative;
  z-index:1;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-checkbox .js-ticket-signature-radio-box-wrp,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-radio .js-ticket-signature-radio-box-wrp{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  height:auto;
  min-height:56px;
  padding:7px;
  border:1px solid var(--jsst-mytickets-border);
  border-radius:16px;
  background:rgba(255,255,255,.92);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-checkbox .js-ticket-radio-box,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-radio .js-ticket-radio-box{
  align-items:center;
  display:inline-flex;
  gap:7px;
  margin:0;
  min-height:38px;
  min-width:0;
  padding:7px 10px;
  border:1px solid var(--jsst-border-color);
  border-radius:11px;
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-checkbox .js-ticket-radio-box input,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-radio .js-ticket-radio-box input{
  float:none;
  height:17px;
  margin:0;
  width:17px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-checkbox .js-ticket-radio-box label,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-custom-filter-radio .js-ticket-radio-box label{
  line-height:1.25;
  margin:0;
  overflow-wrap:anywhere;
}

/* Ticket cards: show a short custom-field preview and keep the remaining values collapsible. */
#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-preview,
#jsst-site .jsst-staff-mytickets-page .jsst-ticket-custom-preview{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:12px;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-preview-item{
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--jsst-border-color);
  border-radius:11px;
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-preview-item span{
  display:block;
  margin-bottom:3px;
  color:var(--jsst-content-text);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-preview-item strong{
  display:-webkit-box;
  overflow:hidden;
  color:var(--jsst-heading-color);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more{
  grid-column:1 / -1;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more summary{
  align-items:center;
  display:flex;
  gap:8px;
  justify-content:flex-start;
  width:max-content;
  padding:7px 10px;
  border:1px solid var(--jsst-border-color);
  border-radius:10px;
  background:#fff;
  color:var(--jsst-top-menu-bg);
  cursor:pointer;
  font-size:12px;
  font-weight:850;
  list-style:none;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more summary::-webkit-details-marker{
  display:none;
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more summary b{
  align-items:center;
  display:inline-flex;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more-grid{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:8px;
}

@media (max-width:680px){
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-preview,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page .jsst-ticket-custom-more-grid,
  #jsst-site .jsst-staff-mytickets-page .jsst-ticket-custom-preview,
  #jsst-site .jsst-staff-mytickets-page .jsst-ticket-custom-more-grid{
    grid-template-columns:1fr;
  }
}



/* Customer My Tickets now shares the staff ticket-card design while keeping customer-only data/workflow. */
#jsst-site.jsst-site-root .jsst-customer-mytickets-modern .jsst-myticket-name,
#jsst-site .jsst-customer-mytickets-modern .jsst-myticket-name{
  cursor:default;
}

#jsst-site.jsst-site-root .jsst-customer-mytickets-modern .jsst-customer-ticket-card{
  min-height:0;
}

#jsst-site.jsst-site-root .jsst-customer-mytickets-modern .jsst-customer-filter-card .jsst-staff-filter-main{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:1280px){
  #jsst-site.jsst-site-root .jsst-customer-mytickets-modern .jsst-customer-filter-card .jsst-staff-filter-main,
  #jsst-site .jsst-customer-mytickets-modern .jsst-customer-filter-card .jsst-staff-filter-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  #jsst-site.jsst-site-root .jsst-customer-mytickets-modern .jsst-customer-filter-card .jsst-staff-filter-main,
  #jsst-site .jsst-customer-mytickets-modern .jsst-customer-filter-card .jsst-staff-filter-main{
    grid-template-columns:1fr;
  }
}

/* --- ticket-ticketdetail.css --- */
/* 1.7.1 frontend staff feature panels */
.jsst-frontend-feature-panel{margin-top:14px;border:1px solid var(--jsst-border-color);background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.jsst-frontend-feature-panel .jsst-frontend-feature-head{background:var(--jsst-heading-color);color:#fff;padding:10px 14px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:8px}
.jsst-frontend-feature-panel .jsst-frontend-feature-body{padding:12px 14px;color:var(--jsst-heading-color)}
.jsst-frontend-feature-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--jsst-border-color);padding:7px 0;font-size:13px}
.jsst-frontend-feature-row:last-child{border-bottom:0}
.jsst-frontend-feature-muted{color:var(--jsst-content-text);font-size:12px}
.jsst-frontend-tag-pill,.jsst-frontend-watcher-pill{display:inline-flex;align-items:center;gap:6px;margin:0 6px 8px 0;padding:5px 9px;border-radius:999px;background:var(--jsst-content-bg);border:1px solid var(--jsst-border-color);font-size:12px}
.jsst-frontend-tag-pill .dot{width:9px;height:9px;border-radius:999px;display:inline-block}
.jsst-frontend-feature-panel select,.jsst-frontend-feature-panel input{width:100%;height:34px;border:1px solid var(--jsst-border-color);border-radius:7px;padding:0 9px;background:#fff;box-sizing:border-box;margin-bottom:8px}
.jsst-frontend-feature-btn{display:inline-block;border:0;border-radius:7px;background:var(--jsst-top-menu-bg);color:var(--jsst-header-action-text)!important;padding:8px 12px;text-decoration:none!important;font-weight:700;cursor:pointer;text-align:center}
.jsst-frontend-feature-btn.is-light{background:var(--jsst-content-bg);color:var(--jsst-top-menu-bg)!important;border:1px solid var(--jsst-border-color)}
.jsst-frontend-feature-remove{color:#dc2626!important;text-decoration:none!important;font-weight:700}
.jsst-frontend-timeline{margin:14px 0;background:#fff;border:1px solid var(--jsst-border-color);border-radius:10px;padding:10px 14px}
.jsst-frontend-timeline-item{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--jsst-border-color)}
.jsst-frontend-timeline-item:last-child{border-bottom:0}
.jsst-frontend-timeline-item:before{content:'';position:absolute;left:4px;top:16px;width:9px;height:9px;border-radius:999px;background:var(--jsst-top-menu-bg)}
.jsst-frontend-timeline-title{font-weight:800;color:var(--jsst-heading-color)}
.jsst-frontend-timeline-meta{font-size:12px;color:var(--jsst-content-text);margin-top:2px}
.jsst-frontend-timeline-detail{font-size:12px;color:var(--jsst-content-text);margin-top:4px}

/* ==== END FOLDED PER-VIEW STYLES ==== */

/*
 * JS Support Ticket - Modern Site Late Overrides v282
 * Loaded after per-view legacy CSS. CSS/JS polish only: no workflow, ACL, database, or controller changes.
 */

#jsst-site.jsst-site-root{
  --jsst-site-brand:var(--jsst-top-menu-bg);
  --jsst-site-blue:var(--jsst-top-menu-bg);
  --jsst-site-cyan:#06a9d6;
  --jsst-site-green:#08a84f;
  --jsst-site-navy:var(--jsst-heading-color);
  --jsst-site-text:var(--jsst-heading-color);
  --jsst-site-muted:var(--jsst-content-text);
  --jsst-site-border:var(--jsst-border-color);
  --jsst-site-soft:var(--jsst-content-bg);
}

/* Reset old floats/absolute positioning on staff/customer utility pages. */
#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{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}

/* Search/filter bar: fixes Search/Reset floating outside the card on Categories/Departments. */
#jsst-site.jsst-site-root .js-ticket-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-top-search-wrp{
  position:relative;
  display:flex;
  width:100%;
  max-width:100%;
  min-height:auto;
  margin:0 0 26px;
  padding:20px;
  border:1px solid var(--jsst-site-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 46px rgba(15,23,42,.06);
  overflow:visible;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-search-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-search-fields-wrp form,
#jsst-site.jsst-site-root form.js-filter-form,
#jsst-site.jsst-site-root .js-ticket-fields-wrp{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  width:100%;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:0;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  transform:none;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#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 > .js-ticket-form-field-download-search{
  display:block;
  grid-column:auto;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  clear:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp-download{
  position:static;
  display:flex;
  grid-column:auto;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  transform:none;
  float:none;
  clear:none;
  box-sizing:border-box;
}
#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 .js-ticket-field-input,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp select{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-site-text);
  font-size:15px;
  box-shadow:none;
  box-sizing:border-box;
  float:none;
}
#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 input[type="submit"],
#jsst-site.jsst-site-root .js-ticket-top-search-wrp button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  font-size:15px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  float:none;
  clear:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-search-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp input.js-search-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp button.js-search-button{
  background:var(--jsst-site-brand);
  color:#fff;
  box-shadow:0 14px 30px rgba(79,102,246,.20);
}
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-reset-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp input.js-reset-button,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp button.js-reset-button{
  background:var(--jsst-site-navy);
  color:#fff;
  box-shadow:none;
}

/* Shared content cards and table lists: prevents title/email wrapping into one-letter columns. */
#jsst-site.jsst-site-root .js-ticket-download-content-wrp,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 28px;
  padding:0;
  border:1px solid var(--jsst-site-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.06);
  overflow:hidden;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-search-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-downloads-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-search-heading-main-wrp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  max-width:100%;
  min-height:78px;
  margin:0;
  padding:20px 28px;
  border:0;
  border-bottom:1px solid var(--jsst-site-border);
  background:linear-gradient(180deg,#fbfafc,var(--jsst-content-bg));
  box-sizing:border-box;
  float:none;
  clear:both;
}
#jsst-site.jsst-site-root .js-ticket-heading-left{
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;white-space:normal;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-heading-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:auto;
  margin-left:auto;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-add-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-height:50px;
  margin:0;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 16px 34px rgba(79,102,246,.22);
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-add-download-btn img{max-width:18px;max-height:18px;}
#jsst-site.jsst-site-root .js-ticket-table-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:#fff;
  box-sizing:border-box;
  float:none;
  clear:both;
}
#jsst-site.jsst-site-root .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-table-body > .js-ticket-data-row{
  display:grid;
  grid-template-columns:minmax(190px,2fr) minmax(130px,1fr) minmax(120px,.75fr) minmax(120px,.8fr) minmax(110px,.75fr);
  align-items:center;
  gap:0;
  width:100%;
  max-width:100%;
  min-height:70px;
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--jsst-site-border);
  background:#fff;
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root .jsst-downloads-management-page .js-ticket-table-header,
#jsst-site.jsst-site-root .jsst-downloads-management-page .js-ticket-table-body > .js-ticket-data-row{
  grid-template-columns:minmax(220px,2fr) minmax(150px,1.2fr) minmax(70px,.5fr) minmax(90px,.6fr) minmax(130px,.9fr) minmax(120px,.75fr);
}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-table-body > .js-ticket-data-row{
  grid-template-columns:minmax(220px,2.2fr) minmax(120px,.8fr) minmax(160px,1fr) minmax(120px,.8fr);
}
#jsst-site.jsst-site-root .js-ticket-roles-wrapper .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-roles-wrapper .js-ticket-table-body > .js-ticket-data-row{
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) minmax(150px,.7fr);
}
#jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-table-body > .js-ticket-data-row{
  grid-template-columns:minmax(200px,1.5fr) minmax(240px,1.3fr) minmax(120px,.7fr) minmax(160px,.9fr) minmax(120px,.7fr);
}
#jsst-site.jsst-site-root .js-ticket-table-header{background:var(--jsst-content-bg);}
#jsst-site.jsst-site-root .js-ticket-table-header-col,
#jsst-site.jsst-site-root .js-ticket-table-body-col,
#jsst-site.jsst-site-root .js-ticket-table-body-col[class*="js-col-md-"],
#jsst-site.jsst-site-root .js-ticket-table-header-col[class*="js-col-md-"]{
  display:flex;
  align-items:center;
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:18px 22px;
  border:0;
  background:transparent;
  box-sizing:border-box;
  float:none;
  flex:none;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
#jsst-site.jsst-site-root .js-ticket-table-header-col{
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:900;
}
#jsst-site.jsst-site-root .js-ticket-table-body-col{
  color:var(--jsst-content-text);
  font-size:15px;
  font-weight:500;
  line-height:1.4;
}
#jsst-site.jsst-site-root .js-ticket-table-body-col .js-ticket-title,
#jsst-site.jsst-site-root .js-ticket-table-body-col .js-ticket-title-anchor{
  display:inline;
  max-width:100%;
  color:var(--jsst-top-menu-bg);
  font-weight:900;
  line-height:1.35;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
#jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-table-body-col:nth-child(2){
  overflow-wrap:anywhere;
  word-break:normal;
}
#jsst-site.jsst-site-root .js-ticket-display-block{display:none;}
#jsst-site.jsst-site-root .js-ticket-table-body-col a.js-tk-button,
#jsst-site.jsst-site-root .js-ticket-table-body-col a.tk_set_edit_text,
#jsst-site.jsst-site-root .js-tk-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;margin:0 4px;
  padding:0;
  border:1px solid var(--jsst-site-border);  background:#fff;
  box-sizing:border-box;
  text-decoration:none;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-table-body-col a.js-tk-button img,
#jsst-site.jsst-site-root .js-ticket-table-body-col a.tk_set_edit_text img,
#jsst-site.jsst-site-root .js-ticket-actions-col{
  justify-content:center;
  text-align:center;
}
#jsst-site.jsst-site-root .js-ticket-action-buttons{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
}

/* Form pages: add/edit Category/Department/Submit Ticket consistency.
   flex-direction:column is required, not cosmetic: this is a generic card shell
   and several pages put more than one block inside it (the GDPR
   "datacomplianceactions" page has two heading cards plus the form). Row
   direction turned those into side-by-side columns and stretched each one to
   the tallest sibling. Pages with a single <form> child render identically
   either way, and the max-width:640px rule below already stacks them. */
#jsst-site.jsst-site-root #js-tk-formwrapper:not(.js-ticket-role-form-wrapper):not(.jsst-submit-ticket-form-shell),
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  margin:0 auto 30px;
  padding:26px;
  border:1px solid var(--jsst-site-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.06);
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper form,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper form{width:100%;max-width:100%;}
/* The heading cards carry width:100% plus 18px side margins from their normal
   standalone use; inside this padded shell that overflows the content box by
   18px. Let the flex stretch size them instead. */
#jsst-site.jsst-site-root #js-tk-formwrapper > .js-ticket-top-search-wrp{
  width:auto;
  margin-left:0;
  margin-right:0;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-wrapper{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  width:100%;
  max-width:100%;
  margin:0 0 10px;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-12,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-6,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-col-xs-12{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-12{grid-column:1 / -1;}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-title{
  display:block;
  width:100%;
  margin:0 0 8px;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  float:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="text"],
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="email"],
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="password"],
#jsst-site.jsst-site-root #js-tk-formwrapper select,
#jsst-site.jsst-site-root #js-tk-formwrapper textarea,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-input-field,
#jsst-site.jsst-site-root #js-tk-formwrapper .inputbox{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:54px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-heading-color);
  font-size:15px;
  box-shadow:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper textarea{padding:14px 16px;min-height:140px;}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-select-user-field{display:block;width:calc(100% - 150px);float:left;}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-select-user-btn{display:block;width:142px;margin-left:8px;float:left;}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-select-user-btn a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  border-radius: 0 14px 14px 0;
  background:var(--jsst-site-brand);
  color:#fff;
  font-weight:900;
  text-decoration:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value .tox,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value .mce-tinymce,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value iframe,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value textarea#message,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value textarea#internalnote,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value textarea#signature{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value .tox,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value .mce-tinymce{
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-append-premadecheck,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value:has(.js-append-premade){
  display:flex;
  align-items:center;
  gap:10px;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-append-premadecheck{
  min-height:54px;
  padding:0 14px;
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  background:#fff;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files-wrp,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border:1px dashed var(--jsst-top-menu-bg);
  border-radius:14px;
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-message{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:76px;
  margin:0;
  padding:16px;
  border:1px dashed var(--jsst-border-color);
  border-radius:12px;
  background:#fff;
  color:var(--jsst-heading-color);
  text-align:center;
  cursor:pointer;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--jsst-content-bg);color:var(--jsst-top-menu-bg);font-weight:900;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-copy{display:flex;flex-direction:column;gap:3px;line-height:1.2;}
#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-copy strong{font-size:14px;font-weight:900;color:var(--jsst-heading-color);}
#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-copy small{font-size:12px;font-weight:700;color:var(--jsst-content-text);}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.is-dragover,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled.is-dragover{
  border-color:var(--jsst-top-menu-bg);
  background:var(--jsst-secondary-bg);
  box-shadow:0 0 0 4px rgba(96,165,250,.14);
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-file-box{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--jsst-site-border);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper input.js-form-input-field-attachment,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-input-field-attachment{
  flex:1 1 auto;
  width:100%;
  min-height:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:13px;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  cursor:pointer;
  background:transparent;
  position:relative;
  right:auto;
  top:auto;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-remove:before{
  content:"×";
  color:#e11d48;
  font-size:26px;
  font-weight:400;
  line-height:1;
}
#jsst-site.jsst-site-root #js-tk-formwrapper #js-attachment-option{
  margin:10px 0 0;
  color:var(--jsst-content-text);
  font-size:12px;
  line-height:1.45;
}
#jsst-site.jsst-site-root #js-tk-formwrapper #js-attachment-add,
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="submit"],
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="button"],
#jsst-site.jsst-site-root #js-tk-formwrapper button:not(.js-btn),
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-save-button,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-button,
/* The cancel variants below only override colour; without the box metrics here
   an <a> cancel link rendered as bare 17px text next to a 46px Submit button
   (visible on Submit Ticket). Desktop had no rule at all for it — only the
   max-width media queries styled it. */
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-cancel-button,
#jsst-site.jsst-site-root #js-tk-formwrapper a.js-ticket-cancel-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:46px;
  margin:12px 8px 0 0;
  padding:0 22px;
  border:0;
  border-radius:12px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(79,102,246,.18);
}
#jsst-site.jsst-site-root #js-tk-formwrapper input[value="Cancel"],
#jsst-site.jsst-site-root #js-tk-formwrapper .js-form-cancel-button,
#jsst-site.jsst-site-root #js-tk-formwrapper a.js-ticket-cancel-button{
  background:var(--jsst-site-navy);
  color:#fff;
  box-shadow:none;
}

@media (max-width:980px){
  #jsst-site.jsst-site-root .js-ticket-search-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-fields-wrp form,
  #jsst-site.jsst-site-root form.js-filter-form,
  #jsst-site.jsst-site-root .js-ticket-fields-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp-download{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-form-wrapper{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-select-user-field,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-select-user-btn{
    width:100%;
    margin:0 0 8px;
    float:none;
  }
}
@media (max-width:760px){
  #jsst-site.jsst-site-root .js-ticket-table-header{display:none;}
  #jsst-site.jsst-site-root .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-table-body > .js-ticket-data-row{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    margin:0;
    /* The desktop rule (jsst-site-complete.css `.jsst-site-root .js-ticket-data-row`)
       sets `min-width:760px` to hold the column grid together. Stacking above
       makes that width meaningless, but it still applied - so every listing
       forced its wrapper to 760px and scrolled sideways on a phone. This
       selector carries one more class than the desktop one, so it wins on
       specificity alone; no !important needed. */
    min-width:0;
    padding:12px;
    border-bottom:1px solid var(--jsst-site-border);
  }
  #jsst-site.jsst-site-root .js-ticket-table-body-col,
  #jsst-site.jsst-site-root .js-ticket-table-body-col[class*="js-col-md-"]{
    display:flex;
    justify-content:space-between;
    gap:14px;
    width:100%;
    max-width:100%;
    padding:10px 8px;
    border-bottom:1px solid var(--jsst-content-bg);
  }
  #jsst-site.jsst-site-root .js-ticket-display-block{
    display:inline-flex;
    min-width:98px;
    color:var(--jsst-content-text);
    font-size:12px;
    font-weight:900;
  }
  #jsst-site.jsst-site-root .js-ticket-search-heading-wrp,
  #jsst-site.jsst-site-root .js-ticket-downloads-heading-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-heading-main-wrp{
    align-items:flex-start;
    flex-direction:column;
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-heading-right{width:100%;margin-left:0;justify-content:flex-start;}
}
@media (max-width:560px){
  #jsst-site.jsst-site-root .js-ticket-top-search-wrp{padding:14px;border-radius:16px;}
  #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 input[type="submit"],
  #jsst-site.jsst-site-root .js-ticket-top-search-wrp button,
  #jsst-site.jsst-site-root .js-ticket-add-download-btn,
  #jsst-site.jsst-site-root #js-tk-formwrapper #js-attachment-add{
    width:100%;
    min-width:0;
  }
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp-download{width:100%;}
  #jsst-site.jsst-site-root #js-tk-formwrapper:not(.js-ticket-role-form-wrapper):not(.jsst-submit-ticket-form-shell),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper{padding:18px;border-radius:18px;}
}

#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .mce-tinymce{
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox-editor-header,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox-editor-header{
  background:#fff;
  border-bottom:1px solid var(--jsst-border-color);
  box-shadow:none;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox-edit-area,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox-edit-area{
  background:#fff;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width textarea,
#jsst-site.jsst-site-root #js-tk-formwrapper textarea#message,
#jsst-site.jsst-site-root #js-tk-formwrapper textarea#internalnote{
  min-height:170px;
}

/* Keep Joomla/TinyMCE Toggle Editor controls below editors, never floating over the form. */
#jsst-site.jsst-site-root .toggle-editor,
#jsst-site.jsst-site-root .js-editor-tinymce .toggle-editor,
#jsst-site.jsst-site-root .editor .toggle-editor,
#jsst-site.jsst-site-root .js-form-value .toggle-editor,
#jsst-site.jsst-site-root .js-ticket-from-field .toggle-editor{
  position:static;
  display:flex;
  justify-content:flex-end;
  width:100%;
  max-width:100%;
  margin:8px 0 0;
  padding:0;
  transform:none;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .toggle-editor button,
#jsst-site.jsst-site-root .toggle-editor .btn,
#jsst-site.jsst-site-root .js-editor-tinymce .toggle-editor button,
#jsst-site.jsst-site-root .js-editor-tinymce .toggle-editor .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(79,102,246,.16);
}

/* Submit ticket form: make the staff user picker and premade row feel intentional. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field{
  min-width:0;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field){width:100%;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-field,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn{
  width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn a#userpopup{
  display:inline-flex;
  align-items:center;
  justify-content:center;margin:0;
  padding:0 18px;
  border:0;  background:var(--jsst-site-brand);
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(79,102,246,.20);
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(.js-append-premade){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premade,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premade select{
  width:100%;
  max-width:100%;
  min-width:0;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premadecheck{
  min-width:132px;
  margin:0;
}

/* User selection popup: clean grid, table spacing, and responsive behavior. */
#jsst-site.jsst-site-root div#userpopup{  max-width:92vw;
  max-height:82vh;
  border-radius:18px;
  overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
#jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
  padding:0 24px;
  border-radius:18px 18px 0 0;
}
#jsst-site.jsst-site-root div#userpopup .popup-header-text{
  font-size:20px;
  font-weight:900;
}
#jsst-site.jsst-site-root div#userpopup .popup-header-close-img,
#jsst-site.jsst-site-root div#userpopup span.close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:50%;
  cursor:pointer;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
  width:100%;  border-bottom:1px solid var(--jsst-site-border);
  background:#fff;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root form#userpopupsearch,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-left,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-right,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  clear:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-input-fields{border:1px solid var(--jsst-site-border);  background:#fff;
  font-size:14px;}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
#jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;border:0;  font-size:14px;
  font-weight:900;
  line-height:1;
  float:none;
  cursor:pointer;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn{background:var(--jsst-site-brand);color:#fff;}
#jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{background:var(--jsst-site-navy);color:#fff;}
#jsst-site.jsst-site-root div#userpopup #records{  background:#fff;
}
#jsst-site.jsst-site-root div#userpopup table,
#jsst-site.jsst-site-root div#userpopup th,
#jsst-site.jsst-site-root div#userpopup td{
  padding:16px 18px;
  border-bottom:1px solid var(--jsst-site-border);}
#jsst-site.jsst-site-root div#userpopup a{
  word-break:normal;
  overflow-wrap:anywhere;
}

/* Category add form: make checkbox options feel like selectable chips. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-ticket-sub-fields{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  margin:0 10px 10px 0;
  padding:0 14px;
  border:1px solid var(--jsst-site-border);
  border-radius:12px;
  background:#fff;
  color:var(--jsst-content-text);
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-ticket-sub-fields label{
  margin:0;
  font-weight:700;
  color:var(--jsst-content-text);
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-ticket-checkbox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper input[type="checkbox"],
#jsst-site.jsst-site-root #js-tk-formwrapper input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0 6px 0 0;
  vertical-align:middle;
  accent-color:var(--jsst-site-brand);
}

/* Keep list titles/status badges from breaking awkwardly on frontend tables/cards. */
#jsst-site.jsst-site-root .js-ticket-table-body-col,
#jsst-site.jsst-site-root .js-ticket-table-body-col a,
#jsst-site.jsst-site-root .js-ticket-wrapper a,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-subject{
  word-break:normal;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-status,
#jsst-site.jsst-site-root #js-tk-wrapper .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-second-left .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-priority,
#jsst-site.jsst-site-root .js-ticket-priority span{
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.02em;
}

@media (max-width:980px){
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
    justify-content:stretch;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
    flex:1 1 0;
    min-width:0;
  }
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(.js-append-premade),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn a#userpopup,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premadecheck{
    width:100%;
    min-width:0;
  }
}
@media (max-width:640px){
  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
    min-height:58px;
    padding:0 16px;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp,
  #jsst-site.jsst-site-root div#userpopup #records{
    padding:12px;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-ticket-sub-fields{
    width:100%;
    margin-right:0;
  }
  #jsst-site.jsst-site-root .toggle-editor,
  #jsst-site.jsst-site-root .js-editor-tinymce .toggle-editor{
    justify-content:stretch;
  }
  #jsst-site.jsst-site-root .toggle-editor button,
  #jsst-site.jsst-site-root .toggle-editor .btn{
    width:100%;
  }
}


/* =========================================================
   JS Support Ticket - Site v199 final form/popup polish
   CSS-only: submit-ticket user picker, select-user popup table,
   and editor wrappers on add/edit forms.
   ========================================================= */

/* Submit Ticket: keep the user picker compact and intentional. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-wrapper:has(.js-ticket-select-user-field){
  align-items:end;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-field{
  min-width:0;
  width:100%;
}
/* Match the shared field metrics (54px / 14px) used by every other input and
   select in this form; the 52px/12px values here were an outlier, and this
   rule's own max-width:560px override below already used 14px. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-field input#username-text{
  width:100%;
  height:54px;
  border-radius:14px 0 0 14px;
  box-shadow:none;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn{
  width:auto;
  min-width:126px;
  flex:0 0 auto;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn a#userpopup{
  width:126px;
  min-width:126px;
  height:52px;
  border-radius:12px;
  white-space:nowrap;
}

/* Submit Ticket: do not let Toggle Editor look detached from the editor. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-editor-tinymce .toggle-editor{
  justify-content:flex-end;}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor button,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor .btn{
  min-width:118px;
}

/* Select User popup: prevent email/name overlap and make long usernames readable. */
#jsst-site.jsst-site-root div#userpopup table,
#jsst-site.jsst-site-root div#userpopup th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup th,
#jsst-site.jsst-site-root div#userpopup td{
  min-width:0;
  line-height:1.35;
  text-align:start;  text-overflow:clip;}
#jsst-site.jsst-site-root div#userpopup td,
#jsst-site.jsst-site-root div#userpopup td a,
#jsst-site.jsst-site-root div#userpopup a.js-userpopup-link{
  display:block;
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  white-space:normal;
}
#jsst-site.jsst-site-root div#userpopup th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup th:nth-child(4){
  text-align:start;
}

/* Add/Edit Department and similar forms: editors should fill the form card, not stay at the legacy 550px width. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-ticket-from-field,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .editor,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .js-editor-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .joomla-editor,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .mce-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width table.mceLayout,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width iframe{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .tox-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width .mce-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width table.mceLayout{
  min-height:300px;
}

@media (max-width:980px){
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn a#userpopup{
    width:100%;
    min-width:0;
  }
}
@media (max-width:640px){
  #jsst-site.jsst-site-root div#userpopup table,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table{
    min-width:760px;
  }
  #jsst-site.jsst-site-root div#userpopup th,
  #jsst-site.jsst-site-root div#userpopup td{
    padding:12px 14px;
  }
}

/* =========================================================
   JS Support Ticket - Site v200 select-user popup + editor toolbar polish
   CSS-only. Keeps workflow/upload/controller logic unchanged.
   ========================================================= */

/* Select User popup: v199 accidentally allowed table cells to behave like blocks in some browsers.
   Restore real table cells and keep only links/text wrapped inside their own column. */
#jsst-site.jsst-site-root div#userpopup table,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table{
  table-layout:fixed;
  width:100%;
  min-width:860px;
  border-collapse:collapse;
}
#jsst-site.jsst-site-root div#userpopup th,
#jsst-site.jsst-site-root div#userpopup td{
  display:table-cell;
  box-sizing:border-box;
  overflow:hidden;
  vertical-align:middle;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root div#userpopup th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup td:nth-child(1){
  width:90px;
  max-width:90px;
  white-space:nowrap;
}
#jsst-site.jsst-site-root div#userpopup th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup td:nth-child(2){
  width:280px;
  max-width:280px;
}
#jsst-site.jsst-site-root div#userpopup th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup td:nth-child(3){
  width:320px;
  max-width:320px;
}
#jsst-site.jsst-site-root div#userpopup th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup td:nth-child(4){
  width:170px;
  max-width:170px;
}
#jsst-site.jsst-site-root div#userpopup td a,
#jsst-site.jsst-site-root div#userpopup td span,
#jsst-site.jsst-site-root div#userpopup td div,
#jsst-site.jsst-site-root div#userpopup a.js-userpopup-link{
  display:block;
  max-width:100%;
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
/* TinyMCE/Joomla editor toolbar: keep editor controls neutral, not large blue app buttons. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .tox,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .tox-tinymce,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .mce-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .mce-tinymce{
  border:1px solid var(--jsst-site-border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:none;
}
#jsst-site.jsst-site-root .tox .tox-editor-header,
#jsst-site.jsst-site-root .tox .tox-toolbar-overlord,
#jsst-site.jsst-site-root .tox .tox-toolbar,
#jsst-site.jsst-site-root .tox .tox-toolbar__primary,
#jsst-site.jsst-site-root .tox .tox-toolbar__overflow,
#jsst-site.jsst-site-root .mce-panel,
#jsst-site.jsst-site-root .mce-toolbar-grp{
  background:#fff;
  border-color:var(--jsst-border-color);
  box-shadow:none;
}
#jsst-site.jsst-site-root .tox .tox-mbtn,
#jsst-site.jsst-site-root .tox .tox-tbtn,
#jsst-site.jsst-site-root .tox .tox-split-button,
#jsst-site.jsst-site-root .tox .tox-toolbar__group button,
#jsst-site.jsst-site-root .mce-btn,
#jsst-site.jsst-site-root .mce-btn button,
#jsst-site.jsst-site-root .mce-menubtn button{
  width:auto;
  min-width:0;
  min-height:32px;
  height:32px;
  margin:2px;
  padding:0 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:500;
  line-height:32px;
  box-shadow:none;
  text-shadow:none;
}
#jsst-site.jsst-site-root .tox .tox-tbtn svg,
#jsst-site.jsst-site-root .tox .tox-mbtn svg,
#jsst-site.jsst-site-root .mce-ico{
  color:var(--jsst-heading-color);
  fill:var(--jsst-heading-color);
}
#jsst-site.jsst-site-root .tox .tox-mbtn:hover,
#jsst-site.jsst-site-root .tox .tox-tbtn:hover,
#jsst-site.jsst-site-root .tox .tox-tbtn--enabled,
#jsst-site.jsst-site-root .tox .tox-tbtn--enabled:hover,
#jsst-site.jsst-site-root .mce-btn:hover,
#jsst-site.jsst-site-root .mce-btn.mce-active{
  background:var(--jsst-content-bg);
  color:var(--jsst-heading-color);
  box-shadow:none;
}
#jsst-site.jsst-site-root .tox .tox-tbtn__select-label,
#jsst-site.jsst-site-root .tox .tox-mbtn__select-label{
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:500;
}
#jsst-site.jsst-site-root .tox .tox-edit-area,
#jsst-site.jsst-site-root .tox .tox-edit-area__iframe,
#jsst-site.jsst-site-root .mce-edit-area,
#jsst-site.jsst-site-root .mce-edit-area iframe{
  background:#fff;
}

/* Submit Ticket: reduce the visual weight of the editor header and keep toggle near the field. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-editor-tinymce,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .editor{
  width:100%;
  max-width:100%;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-editor-tinymce .toggle-editor{
  margin-top:6px;
  margin-bottom:14px;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor button,
#jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .toggle-editor .btn{
  min-height:38px;
  height:38px;
  padding:0 14px;
  border-radius:10px;
  font-size:12px;
}

@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup table,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table{
    min-width:780px;
  }
  #jsst-site.jsst-site-root .tox .tox-mbtn,
  #jsst-site.jsst-site-root .tox .tox-tbtn,
  #jsst-site.jsst-site-root .tox .tox-split-button,
  #jsst-site.jsst-site-root .tox .tox-toolbar__group button,
  #jsst-site.jsst-site-root .mce-btn,
  #jsst-site.jsst-site-root .mce-btn button,
  #jsst-site.jsst-site-root .mce-menubtn button{
    min-height:30px;
    height:30px;
    padding:0 6px;
    font-size:12px;
    line-height:30px;
  }
}

/* =========================================================
   JS Support Ticket - Site v201 popup columns + editor toolbar final
   UI-only polish. Keeps ticket workflow/upload validation untouched.
   ========================================================= */

/* Submit Ticket TinyMCE/Joomla editor: override generic form button styles with equal/higher specificity. */
#jsst-site.jsst-site-root #js-tk-formwrapper .tox button,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-mbtn,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-split-button,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar__group button,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-btn,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-btn button,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-menubtn button,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-toolbar button{
  width:auto;
  min-width:0;
  max-width:none;
  min-height:30px;
  height:30px;
  margin:2px;
  padding:0 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  background-image:none;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:500;
  line-height:30px;
  box-shadow:none;
  text-shadow:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .tox button:hover,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-mbtn:hover,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn:hover,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn--enabled,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn--enabled:hover,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-btn:hover,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-btn.mce-active,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-btn.mce-active button{
  background:var(--jsst-content-bg);
  background-image:none;
  color:var(--jsst-heading-color);
  box-shadow:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-editor-header,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar-overlord,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar__primary,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar__overflow,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-panel,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-toolbar-grp{
  background:#fff;
  background-image:none;
  border-color:var(--jsst-border-color);
  box-shadow:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn svg,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-mbtn svg,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-ico{
  color:var(--jsst-heading-color);
  fill:var(--jsst-heading-color);
}
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-tbtn__select-label,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-mbtn__select-label{
  color:var(--jsst-heading-color);
  font-size:13px;
}

/* Select User popup: protect columns from touching/overlapping. */
#jsst-site.jsst-site-root div#userpopup{
  max-width:min(1120px, calc(100vw - 40px));
}
#jsst-site.jsst-site-root div#userpopup div#records,
#jsst-site.jsst-site-root div#userpopup div#records-inner{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td,
#jsst-site.jsst-site-root div#userpopup table th,
#jsst-site.jsst-site-root div#userpopup table td{padding:20px 22px;}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#jsst-site.jsst-site-root div#userpopup td:nth-child(2) .jsst-popup-cell-inner{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner a,
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner span,
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner div{
  display:inline;
  max-width:100%;
  white-space:inherit;
  overflow-wrap:inherit;
  word-break:inherit;
}
@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
}


/* =========================================================
   JS Support Ticket - Site v202 popup overlap hard fix
   UI-only polish: prevents Select User email/name overlap and
   reduces browser autofill interference on submit ticket fields.
   ========================================================= */
#jsst-site.jsst-site-root div#userpopup{  max-width:min(1080px, calc(100vw - 48px));
}
#jsst-site.jsst-site-root div#userpopup #records-inner{
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#fff;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
#jsst-site.jsst-site-root div#userpopup table{  width:100%;  border-collapse:collapse;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td,
#jsst-site.jsst-site-root div#userpopup table th,
#jsst-site.jsst-site-root div#userpopup table td{
  display:table-cell;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
  box-sizing:border-box;
  white-space:nowrap;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner a,
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner span,
#jsst-site.jsst-site-root div#userpopup .jsst-popup-cell-inner div{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup td:nth-child(2) .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup td:nth-child(2) .jsst-popup-cell-inner a{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root div#userpopup td.jsst-popup-email-cell,
#jsst-site.jsst-site-root div#userpopup td.jsst-popup-name-cell{
  padding-left:24px;
  padding-right:24px;
}
#jsst-site.jsst-site-root #js-tk-formwrapper input#email,
#jsst-site.jsst-site-root #js-tk-formwrapper input#username-text,
#jsst-site.jsst-site-root #js-tk-formwrapper input#username,
#jsst-site.jsst-site-root #js-tk-formwrapper input#name,
#jsst-site.jsst-site-root #js-tk-formwrapper input#emailaddress{
  -webkit-text-security:none;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar__primary,
#jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-toolbar,
#jsst-site.jsst-site-root #js-tk-formwrapper .mce-toolbar-grp{
  min-height:34px;
}
@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
  }
  #jsst-site.jsst-site-root div#userpopup #records{
    padding:0 10px 12px;
  }
  #jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
}

/* =========================================================
   JS Support Ticket - Site v203 select-user popup hard stop
   UI-only: guarantee visual separation between Email Address
   and Name columns after AJAX content loads.
   ========================================================= */
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
#jsst-site.jsst-site-root div#userpopup table{
  table-layout:fixed;
  min-width:980px;
}
#jsst-site.jsst-site-root div#userpopup col:nth-child(1){width:88px;}
#jsst-site.jsst-site-root div#userpopup col:nth-child(2){width:300px;}
#jsst-site.jsst-site-root div#userpopup col:nth-child(3){width:300px;}
#jsst-site.jsst-site-root div#userpopup col:nth-child(4){width:292px;}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(1),
#jsst-site.jsst-site-root div#userpopup table td:nth-child(1){width:88px;max-width:88px;}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(2),
#jsst-site.jsst-site-root div#userpopup table td:nth-child(2){width:300px;max-width:300px;}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(3),
#jsst-site.jsst-site-root div#userpopup table td:nth-child(3){
  width:300px;
  max-width:300px;
  padding-left:28px;
  padding-right:54px;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table th:nth-child(4),
#jsst-site.jsst-site-root div#userpopup table td:nth-child(4){
  width:292px;
  max-width:292px;
  padding-left:54px;
  padding-right:28px;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(3) .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup table td:nth-child(3) .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(3) a,
#jsst-site.jsst-site-root div#userpopup table td:nth-child(3) a{
  max-width:218px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table td:nth-child(4) .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup table td:nth-child(4) .jsst-popup-cell-inner{
  max-width:210px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-table,
  #jsst-site.jsst-site-root div#userpopup table{
    min-width:980px;
  }
}


/* =========================================================
   JS Support Ticket - Site v204 select-user popup grid fix
   UI-only: abandon fragile table column auto-sizing inside
   the AJAX popup and force a 4-column grid with real gaps.
   ========================================================= */
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table{
  display:block;
  width:100%;
  min-width:860px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table thead,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table tbody{
  display:block;
  width:100%;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table tr.jsst-user-popup-grid-row{
  display:grid;
  grid-template-columns:80px 260px 240px 180px;
  column-gap:44px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table tr.jsst-user-popup-grid-row th,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table tr.jsst-user-popup-grid-row td{
  display:block;
  min-width:0;
  max-width:100%;
  width:auto;
  box-sizing:border-box;
  overflow:hidden;
  padding-left:0;
  padding-right:0;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table .jsst-popup-cell-inner a{
  display:block;
  min-width:0;
  max-width:100%;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table td.jsst-popup-email-cell .jsst-popup-cell-inner,
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table td.jsst-popup-email-cell .jsst-popup-cell-inner a{
  white-space:nowrap;
}
#jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table td.jsst-popup-name-cell .jsst-popup-cell-inner{
  white-space:nowrap;
}
@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup #records{
    overflow-x:auto;
  }
  #jsst-site.jsst-site-root div#userpopup table.jsst-user-popup-grid-table{
    min-width:860px;
  }
}

/* =========================================================
   JS Support Ticket - Site v205 select-user popup div-grid fix
   UI-only: the Select User AJAX results are div/flex columns, not
   a real table. Override the broad list rule only inside this popup
   so Email Address can wrap safely and cannot touch the Name column.
   ========================================================= */
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-wrp{
  width:100%;
  max-width:100%;
  overflow:visible;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
#jsst-site.jsst-site-root div#userpopup .js-ticket-data-row{
  display:grid;
  grid-template-columns:minmax(70px,.55fr) minmax(230px,1.75fr) minmax(230px,1.6fr) minmax(150px,1fr);
  column-gap:38px;
  align-items:center;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  flex-wrap:initial;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header-col,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header-col[class*="js-col-"],
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"]{
  display:block;
  width:auto;
  max-width:100%;
  min-width:0;
  flex:none;
  margin:0;
  padding:18px 0;
  box-sizing:border-box;
  text-align:start;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:normal;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header-col:nth-child(1),
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(1){
  padding-left:6px;
  white-space:nowrap;
  overflow-wrap:normal;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header-col:nth-child(3),
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(3){
  overflow-wrap:anywhere;
  word-break:break-word;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-header-col:nth-child(4),
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(4){
  padding-left:8px;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
#jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div{
  max-width:100%;
  white-space:inherit;
  overflow-wrap:inherit;
  word-break:inherit;
}
@media (max-width:760px){
  #jsst-site.jsst-site-root div#userpopup #records,
  #jsst-site.jsst-site-root div#userpopup #records-inner{
    overflow-x:auto;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-wrp{
    min-width:780px;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-header,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row{
    grid-template-columns:70px 230px 230px 150px;
    column-gap:30px;
  }
}


/* =========================================================
   JS Support Ticket - Site v206 My Tickets card alignment
   UI-only: align status/priority badges and ticket metadata
   inside My Tickets cards without changing ticket data/links.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{grid-template-areas:"jsstStatus jsstPriority"
    "jsstMeta jsstMeta";
  column-gap:18px;align-self:center;
  width:100%;
  max-width:100%;
  min-width:0;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-status{
  grid-area:jsstStatus;
  justify-self:stretch;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--jsst-top-menu-bg);
  color:#fff;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.02em;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-status > span{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  color:inherit;
  line-height:1;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-wrapper-textcolor{
  grid-area:jsstPriority;
  justify-self:stretch;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  line-height:1;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data2{
  grid-area:jsstMeta;max-width:100%;
  min-width:0;}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-row{  grid-template-columns:max-content minmax(0,1fr);
  align-items:center;max-width:100%;
  min-width:0;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-tit{
  min-width:0;
  text-align:start;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-val{
  min-width:0;word-break:normal;
}
@media (max-width:900px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width:520px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
    grid-template-columns:1fr;
    grid-template-areas:"jsstStatus"
      "jsstPriority"
      "jsstMeta";
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-row{
    grid-template-columns:1fr;
    gap:3px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-val{
    text-align:start;
  }
}


/* =========================================================
   JS Support Ticket - Site v207 My Tickets badge alignment
   UI-only: remove legacy ticket status top margin/min-height in
   My Tickets cards and make status/priority badges equal size.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-status{
  margin:0;
  margin-top:0;
  margin-right:0;
  position:static;
  top:auto;
  right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-height:0;
  max-height:36px;
  padding:0 16px;
  box-sizing:border-box;
  line-height:1;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-wrapper-textcolor,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 span.js-ticket-wrapper-textcolor{
  margin:0;
  margin-top:0;
  position:static;
  top:auto;
  right:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-height:0;
  max-height:36px;
  padding:0 16px;
  box-sizing:border-box;
  line-height:1;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-wrapper-textcolor > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  line-height:1;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data2{
  margin-top:0;
}

/* =========================================================
   JS Support Ticket - Site v208 My Tickets final badge row fix
   Cause: legacy per-view CSS added margin-top to span.js-ticket-status,
   while the visual Replied badge is an inner span. Keep the fix scoped
   to ticket list cards only.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{  grid-template-rows:auto auto;
  row-gap:14px;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span){
  grid-column:auto;
  align-self:start;
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;
  min-height:38px;
  max-height:38px;
  margin:0;
  margin-top:0;
  margin-right:0;
  padding:0;
  line-height:1;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span){color:inherit;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor{
  align-self:start;
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;
  min-height:38px;
  max-height:38px;
  margin:0;
  margin-top:0;
  padding:0 16px;
  line-height:1;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > .js-ticket-data2{
  grid-column:1 / -1;
  margin-top:0;
  padding-top:0;
}
@media (max-width:520px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor{
    height:34px;
    min-height:34px;
    max-height:34px;
  }
}


/* =========================================================
   JS Support Ticket - Site v209 My Tickets exact badge height
   UI-only: normalize the final visual badge boxes after legacy
   per-page ticket CSS loads.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor > span{
  height:36px;
  min-height:36px;
  max-height:36px;
  padding-top:0;
  padding-bottom:0;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor{
  margin:0;
  align-self:start;
  justify-self:stretch;
  width:100%;
}
@media (max-width:520px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor{
    height:34px;
    min-height:34px;
    max-height:34px;
  }
}


/* =========================================================
   JS Support Ticket - Site v210 My Tickets agent/user unity
   UI-only: keep customer My Tickets and staff/agent My Tickets
   using the same badge row and metadata rhythm.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right{  grid-template-columns:minmax(130px,1fr) minmax(130px,1fr);}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-priorty-box{margin-top:0;
  margin-right:0;}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span){
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span{min-width:0;border-radius:999px;
  box-sizing:border-box;white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="#507DE4"],
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="#9ACC00"],
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="orange"],
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="#FF7F50"],
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="#CB5355"],
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status[style*="darkred"]{
  color:#fff;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > .js-ticket-data2,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > .js-ticket-right-data{
  grid-column:1 / -1;}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-row,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-ticket-data-row{justify-content:stretch;
  gap:16px;}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-tit,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-val,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-tk-value{overflow-wrap:anywhere;
  word-break:normal;
}
@media (max-width:720px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right{
    grid-template-columns:1fr 1fr;
    column-gap:10px;
  }
}
@media (max-width:520px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-row,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-ticket-data-row{    gap:3px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-val,
}


/* =========================================================
   JS Support Ticket - Site v211 My Tickets agent/user final rhythm
   UI-only: make customer and staff ticket cards share one right-side
   layout. Keeps badge height equal and metadata aligned without
   changing ticket links, data, status, priority, or workflow.
   ========================================================= */
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea,
#jsst-site.jsst-site-root .jsst-staff-mytickets-page #js-tk-wrapper{
  grid-template-columns:72px minmax(0,1fr) minmax(340px,390px);
  align-items:center;
  column-gap:22px;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"jsstStatus jsstPriority"
    "jsstMeta jsstMeta";
  column-gap:18px;
  row-gap:11px;
  align-items:start;
  align-content:start;
  justify-content:stretch;
  width:100%;
  max-width:390px;
  min-width:0;
  margin:0;
  padding:0;
  justify-self:end;
  align-self:center;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status{
  grid-area:jsstStatus;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-priorty-box{
  grid-area:jsstPriority;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-priorty-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:34px;
  min-height:34px;
  max-height:34px;
  margin:0;
  padding:0 16px;
  border-radius:999px;
  box-sizing:border-box;
  line-height:1;
  font-size:13px;
  font-weight:900;
  text-align:center;
  text-transform:none;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  float:none;
  position:static;
  top:auto;
  right:auto;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status{
  background:var(--jsst-top-menu-bg);
  color:#fff;
  border:0;
  box-shadow:inset 0 -1px 0 rgba(15,23,42,.12);
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:34px;
  min-height:34px;
  max-height:34px;
  margin:0;
  padding:0;
  line-height:1;
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > .js-ticket-data2,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > .js-ticket-right-data{
  grid-area:jsstMeta;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-row,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-ticket-data-row{
  display:grid;
  grid-template-columns:minmax(105px,max-content) minmax(0,1fr);
  align-items:center;
  column-gap:18px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  border:0;
  background:transparent;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-tit,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-tk-title{
  min-width:0;
  margin:0;
  padding:0;
  text-align:start;
  white-space:nowrap;
  color:var(--jsst-heading-color);
  font-weight:900;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-val,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-tk-value{
  min-width:0;
  margin:0;
  padding:0;
  text-align:end;
  color:var(--jsst-content-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:900px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page #js-tk-wrapper{
    grid-template-columns:72px minmax(0,1fr);
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right{
    grid-column:1 / -1;
    max-width:none;
    justify-self:stretch;
  }
}
@media (max-width:520px){
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page #js-tk-wrapper{
    grid-template-columns:56px minmax(0,1fr);
    gap:12px;
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right{
    grid-template-columns:1fr;
    grid-template-areas:"jsstStatus"
      "jsstPriority"
      "jsstMeta";
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-row,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-ticket-data-row{
    grid-template-columns:1fr;
    row-gap:3px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-val,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-tk-value{
    text-align:start;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* =========================================================
   JS Support Ticket - Site v212 My Tickets mobile polish
   UI-only: improves agent/customer My Tickets mobile layout,
   filter stacking, badge rendering, and pagination spacing.
   ========================================================= */
@media (max-width:720px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
    gap:14px;
    align-items:stretch;
    justify-items:stretch;
    width:100%;
    max-width:100%;
    padding:18px;
    margin:0 0 20px;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > .js-myticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > .js-ticket-link{
    display:block;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-myticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-ticket-link > a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:132px;
    margin:0;
    padding:14px 10px;
    border:1px solid var(--jsst-border-color);
    border-radius:16px;
    background:#fff;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .js-ticket-search-wrp,
  #jsst-site.jsst-site-root .js-combine-search-wrapper.jsst-staff-ticket-filter-card{
    margin-bottom:22px;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-wrapper,
  #jsst-site.jsst-site-root .js-combine-search-wrapper .js-filter-wrapper,
  #jsst-site.jsst-site-root .jsst-staff-filter-wrapper,
  #jsst-site.jsst-site-root .jsst-staff-filter-row,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-area{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-field-wrp,
  #jsst-site.jsst-site-root .js-combine-search-wrapper .js-filter-field-wrp,
  #jsst-site.jsst-site-root .jsst-staff-filter-field,
  #jsst-site.jsst-site-root .js-filter-button-wrp,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp input,
  #jsst-site.jsst-site-root .js-ticket-search-wrp select,
  #jsst-site.jsst-site-root .js-combine-search-wrapper input,
  #jsst-site.jsst-site-root .js-combine-search-wrapper select{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-search-filter-btn,
  #jsst-site.jsst-site-root .js-ticket-filter-button,
  #jsst-site.jsst-site-root .jsst-staff-apply-view,
  #jsst-site.jsst-site-root .jsst-staff-save-view{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    min-height:46px;
    margin:0;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-filter-button-wrp > .js-filter-button-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-ticket-wrapper,
  #jsst-site.jsst-site-root #js-tk-wrapper{
    width:100%;
    max-width:100%;
    margin:0 0 18px;
    padding:0;
    box-sizing:border-box;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea,
  #jsst-site.jsst-site-root .jsst-staff-mytickets-page #js-tk-wrapper{
    grid-template-columns:54px minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right{
    grid-column:1 / -1;
    grid-template-columns:1fr;
    grid-template-areas:"jsstStatus"
      "jsstPriority"
      "jsstMeta";
    gap:10px;
    width:100%;
    max-width:100%;
    margin-top:6px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-priorty-box{
    width:100%;
    height:32px;
    min-height:32px;
    max-height:32px;
    margin:0;
    padding:0 14px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-sizing:border-box;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-wrapper-textcolor > span{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    outline:0;
    line-height:1;
    text-align:center;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > .js-ticket-data2,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right > .js-ticket-right-data{
    gap:7px;
    margin-top:2px;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-row,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-ticket-data-row{
    display:grid;
    grid-template-columns:1fr;
    row-gap:3px;
    width:100%;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 .js-ticket-data-val,
  #jsst-site.jsst-site-root #js-tk-wrapper .js-right .js-tk-value{
    text-align:start;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  #jsst-site.jsst-site-root #jl_pagination.pagination,
  #jsst-site.jsst-site-root .pagination{
    display:grid;
    grid-template-columns:minmax(64px,80px) minmax(0,1fr);
    gap:10px;
    align-items:center;
    width:100%;
    max-width:100%;
    margin-top:16px;
  }
  #jsst-site.jsst-site-root #jl_pagination_box,
  #jsst-site.jsst-site-root #jl_pagination_counter,
  #jsst-site.jsst-site-root #jl_pagination_pageslink{
    width:100%;
    margin:0;
    padding:0;
    float:none;
  }
  #jsst-site.jsst-site-root #jl_pagination_counter{
    grid-column:auto;
  }
}


/* =========================================================
   JS Support Ticket - Site v213 My Tickets mobile finish
   UI-only: fixes mobile stat-card ordering, compact filter buttons,
   and consistent ticket-card badge casing on agent/user My Tickets.
   ========================================================= */
@media (min-width:360px) and (max-width: 720px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    justify-content:center;
    justify-items:stretch;
    align-items:stretch;
    padding:18px;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"]{
    display:block;
    grid-column:auto;
    width:auto;
    max-width:none;
    min-width:0;
    margin:0;
    padding:0;
    float:none;
    clear:none;
    left:auto;
    right:auto;
    transform:none;
    position:relative;
    flex:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"] > a{
    width:100%;
    max-width:none;
    min-width:0;
    min-height:142px;
    margin:0;
  }
}

@media (max-width:359px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"]{
    width:100%;
    max-width:172px;
    margin:0 auto;
    padding:0;
    float:none;
    clear:none;
    left:auto;
    right:auto;
    transform:none;
    position:relative;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"] > a{
    width:100%;
    max-width:172px;
    margin:0 auto;
  }
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-button-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-button-wrp > span,
  #jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-area,
  #jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-btn{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-search-filter-btn,
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-filter-button,
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-search-btn,
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-reset-btn{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }
  #jsst-site.jsst-site-root .js-ticket-sorting{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  #jsst-site.jsst-site-root .js-ticket-sorting-left,
  #jsst-site.jsst-site-root .js-ticket-sorting-right,
  #jsst-site.jsst-site-root .js-ticket-sort{
    width:100%;
    max-width:100%;
    float:none;
    margin:0;
  }
  #jsst-site.jsst-site-root .js-ticket-sort{
    display:flex;
    align-items:center;
    gap:10px;
  }
  #jsst-site.jsst-site-root .js-ticket-sort select{
    flex:1 1 auto;
    min-width:0;
  }
}

#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status > span,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span),
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1 > span.js-ticket-status:has(> span) > span,
#jsst-site.jsst-site-root #js-tk-wrapper .js-right > span.js-ticket-status{
  text-transform:uppercase;
}

/* =========================================================
   JS Support Ticket - Site v214 My Tickets mobile stats/filter finish
   UI-only: makes agent/user My Tickets mobile stat cards and filters
   use a predictable one-column layout on phone widths.
   ========================================================= */
@media (max-width:480px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    justify-content:center;
    align-items:stretch;
    gap:14px;
    width:100%;
    max-width:100%;
    padding:18px 14px;
    margin:0 0 18px;
    overflow:visible;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"]{
    display:block;
    grid-column:1 / -1;
    width:100%;
    max-width:176px;
    min-width:0;
    margin:0 auto;
    padding:0;
    float:none;
    clear:none;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    position:relative;
    flex:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link > a,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"] > a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:176px;
    min-width:0;
    min-height:138px;
    margin:0 auto;
    padding:16px 10px;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div.js-ticket-search-wrp,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch{
    width:100%;
    max-width:100%;
    float:none;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-wrapper,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-form-fields-wrp,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-button-wrp.js-col-md-3{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    float:none;
    clear:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-field-wrp,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-button-wrp.js-col-md-3 > span,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp div.js-ticket-form-wrp form.js-tk-combinesearch div.js-filter-button-wrp.js-col-md-3 > span.js-filter-button-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root div.js-ticket-search-wrp input,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp select,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-search-filter-btn,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-filter-button,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-search-btn,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-reset-btn{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    float:none;
    border-radius:12px;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-search-filter-btn,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-filter-button,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-search-btn,
  #jsst-site.jsst-site-root div.js-ticket-search-wrp .js-ticket-reset-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 14px;
  }
}

@media (min-width:481px) and (max-width: 720px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    justify-items:stretch;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > [class*="js-col-"]{
    grid-column:auto;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    float:none;
  }
}

/* =========================================================
   JS Support Ticket - Site v215 dashboard polish
   UI-only: aligns agent/user frontend dashboard sections,
   makes chart/recent-ticket/list blocks cleaner and mobile-safe.
   ========================================================= */
#jsst-site.jsst-site-root .js-cp-left,
#jsst-site.jsst-site-root .js-cp-right{
  display:block;
  width:100%;
  max-width:100%;
  float:none;
  clear:both;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root #js-dash-menu-link-wrp,
#jsst-site.jsst-site-root #js-pm-graphtitle-wrp,
#jsst-site.jsst-site-root .js-ticket-latest-ticket-wrapper,
#jsst-site.jsst-site-root .js-ticket-data-list-wrp{
  width:100%;
  max-width:100%;
  margin:0 0 18px;
  border:1px solid var(--jsst-site-border, var(--jsst-border-color));
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  overflow:hidden;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-section-heading,
#jsst-site.jsst-site-root .js-ticket-haeder,
#jsst-site.jsst-site-root #js-pm-graphtitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  padding:18px 22px;
  margin:0;
  border-bottom:1px solid var(--jsst-site-border, var(--jsst-border-color));
  background:linear-gradient(180deg,#fff,var(--jsst-content-bg));
  color:var(--jsst-heading-color);
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-header-txt{
  color:var(--jsst-heading-color);
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}

#jsst-site.jsst-site-root .js-ticket-header-link{font-size:14px;white-space:nowrap;}

#jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));  width:100%;  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu{border:1px solid var(--jsst-site-border, var(--jsst-border-color));
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.035);}

#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-icon{
  width:46px;
  height:46px;
  margin:0 auto 10px;
  border-radius:14px;
  background:var(--jsst-content-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}

#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-img{
  width:26px;
  height:26px;
  max-width:26px;
  max-height:26px;
  object-fit:contain;
}

#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-text{
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:800;}

#jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));  width:100%;
  margin:0 0 0;  border:1px solid var(--jsst-site-border, var(--jsst-border-color));
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > [class*="js-col-"]{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > [class*="js-col-"] > a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;  width:100%;  border:1px solid var(--jsst-site-border, var(--jsst-border-color));
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.035);
  text-decoration:none;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root #js-pm-grapharea{
  width:100%;box-sizing:border-box;
}

#jsst-site.jsst-site-root #stack_chart_horizontal{
  width:100%;}
#jsst-site.jsst-site-root #stack_chart_horizontal > div,
#jsst-site.jsst-site-root #stack_chart_horizontal svg{
  max-width:100%;}

#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp,
#jsst-site.jsst-site-root .js-ticket-data-list{
  padding:0;
  background:#fff;
}

#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
  display:grid;align-items:center;
  width:100%;margin:0;
  border:0;
  border-bottom:1px solid var(--jsst-site-border, var(--jsst-border-color));
  background:#fff;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row:last-child{
  border-bottom:0;
}

#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-first-left{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-user-img-wrp{
  width:48px;
  height:48px;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-user-img-wrp img{
  width:48px;
  height:48px;
  border-radius:50%;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-ticket-subject{
  min-width:0;
  width:100%;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-row,
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-row.name{
  width:100%;
  margin:0 0 4px;
  padding:0;
  color:var(--jsst-content-text);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-link{
  color:var(--jsst-top-menu-bg);
  font-size:16px;
  font-weight:800;
  text-decoration:none;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-title{
  color:var(--jsst-heading-color);
  font-weight:800;
}

#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-second-left,
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-third-left,
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-fourth-left{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  text-align:center;
  color:var(--jsst-content-text);
  font-size:13px;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{
  display:inline-flex;
  align-items:center;
  justify-content:center;padding:0 14px;  font-size:11px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  border:1px solid rgba(37,99,235,.16);
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{
  background:#09a84f;
  border-color:#09a84f;
  color:#fff;
}

#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data{
  display:flex;
  align-items:center;
  gap:14px;margin:0;
  border-bottom:1px solid var(--jsst-site-border, var(--jsst-border-color));
  background:#fff;
}
#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data:last-child{
  border-bottom:0;
}
#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data-image{
  width:46px;
  height:46px;
  flex:0 0 46px;
  margin:0;
}
#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data-img{
  width:46px;
  height:46px;
  object-fit:contain;
}
#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data-tit{
  color:var(--jsst-top-menu-bg);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    padding:14px;
  }
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    padding:14px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{text-align:start;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-second-left,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-third-left,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-fourth-left{
    text-align:start;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{    min-width:0;
  }
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-section-heading,
  #jsst-site.jsst-site-root .js-ticket-haeder,
  #jsst-site.jsst-site-root #js-pm-graphtitle{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:16px;
    font-size:18px;
  }
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
  #jsst-site.jsst-site-root #stack_chart_horizontal > div,
}


/* v216 dashboard final desktop/mobile polish
   Scope: frontend control panel only. No workflow or data logic changes. */
#jsst-site.jsst-site-root .js-cp-left,
#jsst-site.jsst-site-root .js-cp-right,
#jsst-site.jsst-site-root .js-ticket-latest-ticket-wrapper,
#jsst-site.jsst-site-root .js-ticket-data-list-wrp{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.045);
}

#jsst-site.jsst-site-root .js-cp-left .js-section-heading,
#jsst-site.jsst-site-root #js-pm-graphtitle,
#jsst-site.jsst-site-root .js-ticket-haeder{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 22px;
  background:linear-gradient(180deg,#ffffff 0%,var(--jsst-content-bg) 100%);
  border-bottom:1px solid var(--jsst-site-border,var(--jsst-border-color));
  color:var(--jsst-heading-color);
  font-size:18px;
  font-weight:900;
  line-height:1.25;
}

#jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp{
  padding:16px 18px 20px;
  gap:14px;
}
#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu{
  min-height:88px;
  padding:16px 12px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu:hover{
  transform:translateY(-2px);
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 16px 30px rgba(37,99,235,.08);
}
#jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-text{
  text-align:center;
  line-height:1.25;
}

#jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
  padding:16px;
  gap:16px;
}
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
#jsst-site.jsst-site-root .js-cp-right .js-ticket-count > [class*="js-col-"] > a{
  min-height:118px;
  padding:14px 10px;
}

/* Keep the agent statistics useful without consuming half the dashboard. */
#jsst-site.jsst-site-root #js-pm-grapharea{
  padding:12px 18px 18px;
  background:#fff;
}
#jsst-site.jsst-site-root #stack_chart_horizontal{
  height:330px;
  max-height:330px;
  min-width:560px;
}
#jsst-site.jsst-site-root #stack_chart_horizontal > div,
#jsst-site.jsst-site-root #stack_chart_horizontal svg{
  height:330px;
  max-height:330px;
}

/* Dashboard latest rows: compact card/list rhythm for agent and user dashboards. */
#jsst-site.jsst-site-root .js-ticket-latest-ticket-wrapper,
#jsst-site.jsst-site-root .js-ticket-data-list-wrp{
  margin-top:18px;
  background:#fff;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
  grid-template-columns:minmax(260px, 1.55fr) minmax(120px,.48fr) minmax(132px,.52fr) minmax(118px,.45fr);
  min-height:78px;
  padding:16px 22px;
  gap:16px;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-link{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{
  height:30px;
  min-height:30px;
  min-width:104px;
  border-radius:999px;
}
#jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-third-left{
  white-space:nowrap;
}
#jsst-site.jsst-site-root .js-ticket-header-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border:1px solid var(--jsst-border-color);
  border-radius:8px;
  background:#fff;
  color:var(--jsst-top-menu-bg);
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}

#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data{
  min-height:70px;
  padding:16px 22px;
}
#jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data-tit{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:900px){
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-link{
    white-space:normal;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{
    width:100%;
    max-width:100%;
  }
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-cp-left .js-section-heading,
  #jsst-site.jsst-site-root #js-pm-graphtitle,
  #jsst-site.jsst-site-root .js-ticket-haeder{align-items:flex-start;
    flex-direction:column;
  }
  #jsst-site.jsst-site-root .js-ticket-header-link{
    width:100%;
  }
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp,
  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
  #jsst-site.jsst-site-root #stack_chart_horizontal > div,
}

/* v217 dashboard mobile polish
   Scope: frontend dashboard/control panel only. No workflow or data logic changes. */
@media (max-width:560px){
  /* Keep dashboard sections compact on phones without breaking very narrow screens. */
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
    align-items:stretch;
    gap:12px;
    padding:14px;
  }

  #jsst-site.jsst-site-root .js-cp-left .js-ticket-menu-links-row{
    display:contents;
  }

  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > [class*="js-col-"] > a{
    min-height:104px;
    height:auto;
    padding:13px 8px;
  }

  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-icon,
  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-icon img{
    margin-bottom:8px;
  }

  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu-text,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-link-text{
    font-size:12px;
    line-height:1.25;
  }

  /* Dashboard chart: allow horizontal scroll instead of squeezing labels/bars. */
  #jsst-site.jsst-site-root #js-pm-grapharea{-webkit-overflow-scrolling:touch;  }
  #jsst-site.jsst-site-root #stack_chart_horizontal > div,
  /* Latest ticket rows on dashboard should read like compact cards on phones. */
  #jsst-site.jsst-site-root .js-ticket-latest-ticket-wrapper{
    border-radius:14px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
    display:grid;
    grid-template-columns:1fr;border-bottom:1px solid var(--jsst-border-color);
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row:last-child{
    border-bottom:0;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-first-left{
    display:flex;    justify-content:flex-start;
    gap:12px;
    text-align:start;
    width:100%;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-user-img-wrp{
    flex:0 0 44px;
    width:44px;
    height:44px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-user-img-wrp img{
    width:44px;
    height:44px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-ticket-subject{
    min-width:0;
    flex:1 1 auto;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-second-left,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-third-left,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-fourth-left{
    width:100%;
    max-width:100%;
    min-width:0;
    text-align:start;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-third-left{
    color:var(--jsst-content-text);
    font-size:12px;
    padding:0;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-status,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-tk-priorty{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:28px;
    min-height:28px;
    line-height:28px;
    border-radius:999px;
    margin:0;
    padding:0 12px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
  }

  /* Latest announcements / knowledge base rows: keep them compact and readable. */
  #jsst-site.jsst-site-root .js-ticket-data-list-wrp .js-ticket-data{
    min-height:64px;
    padding:14px 16px;
  }
}

@media (max-width:340px){
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
    grid-template-columns:1fr;
  }
}

/* v218 dashboard mobile final safety polish
   Scope: frontend dashboard/control panel only. UI-only; no workflow/data changes. */
@media (max-width:560px){
  /* Add a little breathing room on dashboard/control-panel mobile screens. */
  #jsst-site.jsst-site-root .js-cp-left{
    margin-top:24px;
  }

  /* Keep dashboard card titles clear and readable on narrow widths. */
  #jsst-site.jsst-site-root .js-cp-left .js-section-heading,
  #jsst-site.jsst-site-root #js-pm-graphtitle,
  #jsst-site.jsst-site-root .js-ticket-haeder{
    position:relative;
    z-index:1;
    min-height:52px;
    padding:15px 16px;
    overflow:visible;
  }

  /* Make dashboard latest cards use a little less vertical space while preserving readability. */
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
    gap:8px;  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-first-left{
    align-items:center;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-row,
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-data-row.name{
    text-align:start;
  }

  /* Keep the chart scroll area contained inside the dashboard card. */
  #jsst-site.jsst-site-root #js-pm-grapharea{
    max-width:100%;
    border-radius:0 0 14px 14px;
  }
  #jsst-site.jsst-site-root #stack_chart_horizontal{    max-width:none;
  }
}

@media (max-width:380px){
  #jsst-site.jsst-site-root .js-cp-left{
    margin-top:28px;
  }
  #jsst-site.jsst-site-root .js-cp-left .js-menu-links-wrp,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count{
    gap:10px;
  }
  #jsst-site.jsst-site-root .js-cp-left .js-ticket-dash-menu,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count a.js-ticket-link,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-ticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > .js-myticket-link > a,
  #jsst-site.jsst-site-root .js-cp-right .js-ticket-count > [class*="js-col-"] > a{
    min-height:98px;
  }
}

/* v219 dashboard mobile overflow/support safety
   Scope: frontend dashboard/control panel only. UI-only; no workflow/data changes. */
@media (max-width:560px){
  /* The latest-ticket wrapper had an old max-height/overflow rule, which caused
     a nested scrollbar and clipped rows on agent mobile dashboards. */
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp{
    max-height:none;
    height:auto;
    overflow:visible;
    overflow-x:hidden;
    overflow-y:visible;
  }

  #jsst-site.jsst-site-root .js-ticket-latest-ticket-wrapper{
    overflow:visible;
  }

  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
    overflow:visible;
    min-height:0;
    padding:15px 16px;
    border-radius:0;
  }

  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row + .js-ticket-row{
    border-top:1px solid var(--jsst-border-color);
  }

  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-fourth-left{
    margin-top:0;
    padding-bottom:2px;
  }

  /* Keep the agent chart readable without forcing a large nested scroll area on phones. */
  #jsst-site.jsst-site-root #js-pm-grapharea{
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px 10px 12px;
  }
  #jsst-site.jsst-site-root #stack_chart_horizontal{
    min-width:360px;
    height:250px;
    max-height:250px;
  }
  #jsst-site.jsst-site-root #stack_chart_horizontal > div,
  #jsst-site.jsst-site-root #stack_chart_horizontal svg{
    height:250px;
    max-height:250px;
  }

}

@media (max-width:380px){
  #jsst-site.jsst-site-root #stack_chart_horizontal{
    min-width:340px;
  }
  #jsst-site.jsst-site-root .js-ticket-latest-tickets-wrp .js-ticket-row{
    padding:14px 14px;
  }
}


/* v220 dashboard mobile component spacing
   Scope: frontend site component only. Do not target Joomla template widgets. */
@media (max-width:560px){
  #jsst-site.jsst-site-root .js-cp-left .js-section-heading{
    padding-left:18px;
    padding-top:18px;
  }
}


/* v222 Submit Ticket mobile polish
   Scope: frontend Submit Ticket form only. UI-only; no workflow/data/controller/model/upload-validation changes. */
@media (max-width:560px){
  /* Keep the submit-ticket form narrow-phone friendly without changing desktop pages. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper{
    padding:16px;
    border-radius:18px;
    overflow:visible;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper form#adminForm,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-wrapper{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-col-md-12,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-col-md-6,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-col-xs-12,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-margin-bottom,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-padding-null{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-title{
    display:block;
    width:100%;
    min-height:0;
    margin:0 0 8px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--jsst-heading-color);
    line-height:1.25;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-title label{
    display:inline;
    margin:0;
    padding:0;
    font-size:12px;
    font-weight:900;
    line-height:1.25;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }

  /* Staff submit-ticket user picker: keep the Select User control intentional on phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-field,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn{
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
    padding:0;
    float:none;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-field input#username-text{
    width:100%;
    height:52px;
    min-height:52px;
    border-radius:14px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-ticket-select-user-btn a#userpopup{
    width:100%;
    min-width:0;
    height:52px;
    min-height:52px;
    border-radius:14px;
  }

  /* Premade + append should not create an uneven row on phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(.js-append-premade){
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premade,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premade select,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premadecheck{
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-append-premadecheck{
    min-height:52px;
    justify-content:flex-start;
    border-radius:14px;
  }

  /* Joomla calendar field: keep the date input and calendar button on one line. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.input-append,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.field-calendar.input-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px;
    align-items:stretch;
    gap:0;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.input-append input,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.field-calendar.input-group input,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar input,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #ticket_duedate{
    grid-column:1;
    width:100%;
    min-width:0;
    height:54px;
    margin:0;
    border-radius:14px 0 0 14px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.input-append button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper div.field-calendar.input-group button:not(.js-btn),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar button:not(.js-btn),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #ticket_duedate_btn{
    grid-column:2;
    width:52px;
    min-width:52px;
    max-width:52px;
    height:54px;
    min-height:54px;
    margin:0;
    padding:0;
    border-radius:0 14px 14px 0;
    box-shadow:none;
  }

  /* The informational message on user submit-ticket should look like a message card, not a raw alert. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-message,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-error-message,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-warning-message,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .alert,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .message{
    width:100%;
    max-width:100%;
    margin:0 0 18px;
    padding:16px 18px;
    border:1px solid var(--jsst-border-color);
    border-left:4px solid var(--jsst-top-menu-bg);
    border-radius:16px;
    background:#fff;
    color:var(--jsst-content-text);
    box-shadow:0 12px 28px rgba(15,23,42,.05);
    box-sizing:border-box;
  }

  /* Editors: keep TinyMCE toolbar and content area inside the phone-width card. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-tinymce,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-tinymce,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper table.mceLayout{
    width:100%;
    max-width:100%;
    min-width:0;
    border-radius:14px;
    overflow:hidden;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mceToolbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mceToolbarRow1,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mceToolbarRow2{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper textarea#message,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper textarea#internalnote,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper textarea#signature{
    min-height:132px;
  }

  /* Attachment dropzone: use full width on phones and keep the file row readable. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled{
    padding:10px;
    gap:10px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .jsst-dropzone-message{
    min-height:72px;
    padding:14px 12px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-attachment-file-box{
    padding:10px;
    gap:8px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #js-attachment-option{
    line-height:1.45;
  }

  /* Submit/cancel buttons remain side-by-side when possible and stack only on very small screens. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    width:100%;
    margin:18px 0 0;
    padding:18px 0 0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp input.js-save-button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp a.js-ticket-cancel-button{
    flex:1 1 0;
    min-width:0;
    max-width:150px;
    height:50px;
    margin:0;
    padding:0 12px;
  }
}

@media (max-width:360px){
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp input.js-save-button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp a.js-ticket-cancel-button{
    max-width:none;
    width:100%;
  }
}


/* v223 Submit Ticket mobile final safety
   Scope: frontend Submit Ticket form only. UI-only; no workflow/data/controller/model/upload-validation changes. */
@media (max-width:560px){
  /* Prevent long labels / floating utility button from covering form labels on phone. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-title,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-title label{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    max-width:100%;
    margin:0 0 7px;
    padding:0;
    line-height:1.25;
  }

  /* Joomla calendar markup varies by version. Force every possible date wrapper into one row. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]){
    display:block;
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .field-calendar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .field-calendar .input-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .input-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .input-append,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .field-calendar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .field-calendar .input-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .input-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .input-append{
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px;
    align-items:stretch;
    gap:0;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    float:none;
    clear:both;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #ticket_duedate,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper input[name="duedate"]{
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    max-width:100%;
    height:54px;
    min-height:54px;
    margin:0;
    border-radius:14px 0 0 14px;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .input-group-append,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .input-group-append{
    grid-column:2;
    grid-row:1;
    display:block;
    width:52px;
    min-width:52px;
    max-width:52px;
    height:54px;
    min-height:54px;
    margin:0;
    padding:0;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #ticket_duedate_btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper button[id*="duedate"],
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate) .input-group-append > button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]) .input-group-append > button{
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    min-width:52px;
    max-width:52px;
    height:54px;
    min-height:54px;
    margin:0;
    padding:0;
    float:none;
    border-radius:0 14px 14px 0;
    background:var(--jsst-primary, var(--jsst-top-menu-bg));
    border:1px solid var(--jsst-primary, var(--jsst-top-menu-bg));
    color:#fff;
    box-shadow:none;
    box-sizing:border-box;
  }

  /* TinyMCE/legacy editor: do not clip the last toolbar icons on small phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-tinymce,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-tinymce,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper table.mceLayout{
    overflow:visible;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-container-body,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-stack-layout,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-flow-layout,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-container-body::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary::-webkit-scrollbar{
    display:none;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__group{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* Better phone rhythm for attachment help text and bottom buttons. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper #js-attachment-option,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-attachment-size,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-attachment-ext{
    display:block;
    width:100%;
    font-size:12px;
    line-height:1.45;
    color:var(--jsst-content-text);
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-submit-btn-wrp{
    border-top:1px solid var(--jsst-heading-color);
  }
}

/* v224 Submit Ticket mobile final edge/editor polish
   Scope: frontend mobile UI only. No workflow/data/controller/model/upload-validation changes. */
@media (max-width:560px){
  /* Keep Submit Ticket labels above surrounding visual effects. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-title,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper label{
    z-index:2;
  }

  /* Date input + Joomla calendar button: keep one clean row. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(#ticket_duedate),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(input[name="duedate"]),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value:has(.field-calendar){
    display:grid;
    grid-template-columns:minmax(0,1fr) 54px;
    align-items:stretch;
    gap:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 54px;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar input,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper input[id*="duedate"],
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper input[name="duedate"]{
    grid-column:1;
    width:100%;
    min-width:0;
    height:54px;
    border-radius:14px 0 0 14px;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar button:not(.js-btn),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .field-calendar .btn:not(.js-btn),
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper button[id*="duedate"],
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper a[id*="duedate"]{
    grid-column:2;
    width:54px;
    min-width:54px;
    max-width:54px;
    height:54px;
    min-height:54px;
    margin:0;
    border-radius:0 14px 14px 0;
  }

  /* TinyMCE/legacy editor: make toolbar buttons compact enough for narrow phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-container-body,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary{
    overflow:hidden;
    max-width:100%;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-ico,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-icon{
    font-size:15px;
    transform:scale(.9);
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-toolbar__group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn-group{
    padding:0 2px;
    margin:0;
  }

  /* Prevent editor/attachment content from reaching the page edge on very narrow phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-wrapper,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .js-form-value{
    min-width:0;
  }
}

@media (max-width:380px){
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-tbtn{
    width:28px;
    min-width:28px;
    max-width:28px;
  }
}

/* v225 Submit Ticket mobile popup/editor finish
   Scope: frontend mobile UI only. No workflow/data/controller/model/upload-validation changes. */
@media (max-width:560px){
  /* Select User popup: turn narrow-phone results into readable cards instead of a squeezed table. */
  #jsst-site.jsst-site-root div#userpopup,
  #jsst-site.jsst-site-root div#userpopup{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:82vh;
    overflow:auto;
    border-radius:16px;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header,
  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
    min-height:54px;
    padding:0 14px;
  }

  #jsst-site.jsst-site-root div#userpopup .popup-header-text,
  #jsst-site.jsst-site-root div#userpopup .popup-header-text{
    font-size:18px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
    padding:12px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-input-fields,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-input-fields{
    height:44px;
    min-height:44px;
    border-radius:12px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
    width:100%;
    min-width:0;
    height:44px;
    min-height:44px;
    border-radius:12px;
    padding:0 10px;
  }

  #jsst-site.jsst-site-root div#userpopup #records,
  #jsst-site.jsst-site-root div#userpopup #records-inner,
  #jsst-site.jsst-site-root div#userpopup #records,
  #jsst-site.jsst-site-root div#userpopup #records-inner{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    padding:0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-wrp{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    padding:10px 12px 0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-header,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-header{
    display:none;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row{    grid-template-columns:1fr;
    gap:0;}

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"],
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"]{    grid-template-columns:86px minmax(0,1fr);
    align-items:start;
    gap:8px;}

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(1)::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(1)::before{content:"User ID";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(2)::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(2)::before{content:"Username";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(3)::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(3)::before{content:"Email";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(4)::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(4)::before{content:"Name";}

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col::before{    color:var(--jsst-heading-color);
    font-size:11px;
    font-weight:900;
    line-height:1.25;
    text-transform:uppercase;
    letter-spacing:.02em;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col > *,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col > *,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div{
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst_userpages,
  #jsst-site.jsst-site-root div#userpopup .jsst_userpages * ,
  #jsst-site.jsst-site-root div#userpopup .jsst_userpages,
  #jsst-site.jsst-site-root div#userpopup .jsst_userpages *{
    max-width:100%;
    box-sizing:border-box;
  }

  /* Submit Ticket editors: keep the toolbar readable; allow sideways scroll only for toolbar buttons. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-flow-layout,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary{
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    padding-right:8px;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-tbtn{margin:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn-group,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-toolbar__group{
    display:inline-flex;
    flex-wrap:nowrap;
    width:auto;
    min-width:auto;
  }
}


/* v226 Submit Ticket mobile popup/card/editor final safety
   Scope: frontend mobile presentation only. No workflow/data/controller/model/upload-validation changes. */
@media (max-width:560px){
  /* Select User popup: previous mobile card mode could duplicate responsive labels.
     Let the popup's own labels show once and keep every result field readable. */
  #jsst-site.jsst-site-root div#userpopup{
    left:8px;
    right:8px;
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:84vh;
    overflow-x:hidden;
    overflow-y:auto;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 10px;
    padding:0;
    border:1px solid var(--jsst-border-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 26px rgba(15,23,42,.06);
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col::before,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col::before{
    content:none;
    display:none;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"],
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"]{
    display:block;
    float:none;
    clear:both;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    margin:0;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid var(--jsst-border-color);
    text-align:start;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
    color:var(--jsst-content-text);
    font-size:13px;
    line-height:1.45;
    box-sizing:border-box;
  }

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

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a{
    display:inline;
    color:var(--jsst-top-menu-bg);
    font-weight:900;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Many legacy responsive tables inject their own label spans. Make those labels compact, not duplicated/broken. */
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span:first-child:not(:only-child),
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div:first-child:not(:only-child),
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span:first-child:not(:only-child),
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div:first-child:not(:only-child){
    display:block;
    margin:0 0 4px;
    color:var(--jsst-heading-color);
    font-size:10px;
    font-weight:900;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst_userpages,
  #jsst-site.jsst-site-root div#userpopup .jsst_userpages{
    margin:8px 12px 12px;
    width:calc(100% - 24px);
    max-width:calc(100% - 24px);
    overflow:hidden;
  }

  /* Submit Ticket editor: guarantee the toolbar stays inside the editor on very narrow phones. */
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-tinymce,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper table.mceLayout,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-tinymce{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-flow-layout,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-editor-header,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-flow-layout::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-editor-header::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar-overlord::-webkit-scrollbar,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox-toolbar__primary::-webkit-scrollbar{
    display:none;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-tbtn{
    width:24px;
    min-width:24px;
    max-width:24px;
    height:34px;
    min-height:34px;
    padding:0;
  }

  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-listbox,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .mce-listbox button,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page #js-tk-formwrapper .tox .tox-tbtn--select{
    width:42px;
    min-width:42px;
    max-width:42px;
  }
}

/* v227 Submit Ticket select-user popup hard mobile fix
   Scope: frontend Select User popup presentation only. No workflow/data/controller/model/upload-validation changes. */
@media (max-width:640px){
  /* The legacy popup is centered with translate(-50%, -50%). Earlier mobile rules set left:8px,
     so the translate could still pull the popup off the left edge on narrow phones. */
  #jsst-site.jsst-site-root div#userpopup{
    position:fixed;
    top:16px;
    left:50%;
    right:auto;
    bottom:auto;
    transform:translateX(-50%);
    margin:0;
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    min-width:0;
    max-height:calc(100vh - 32px);
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:16px;
    box-sizing:border-box;
    z-index:99999;
  }

  #jsst-site.jsst-site-root div#userpopupblack{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:9989;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
    min-height:52px;
    padding:0 12px;
    border-radius:16px 16px 0 0;
  }

  #jsst-site.jsst-site-root div#userpopup .popup-header-text{
    font-size:17px;
    line-height:1.2;
  }

  #jsst-site.jsst-site-root div#userpopup .popup-header-close-img,
  #jsst-site.jsst-site-root div#userpopup span.close{
    width:32px;
    min-width:32px;
    height:32px;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
    padding:10px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-left,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-right,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    min-width:0;
    float:none;
    clear:both;
    gap:8px;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }

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

  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-input-fields,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
    width:100%;
    max-width:100%;
    min-width:0;
    height:42px;
    min-height:42px;
    margin:0;
    border-radius:12px;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup #records,
  #jsst-site.jsst-site-root div#userpopup #records-inner,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup #records{
    padding:10px;
    background:#fff;
  }

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

  #jsst-site.jsst-site-root /* Div-based AJAX results. */
  div#userpopup .js-ticket-table-body > .js-ticket-data-row,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-data-row{
    display:block;
    grid-template-columns:none;
    column-gap:0;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 10px;
    padding:0;
    border:1px solid var(--jsst-border-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"],
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[style]{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    align-items:start;
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    height:auto;
    float:none;
    clear:both;
    margin:0;
    padding:9px 10px;
    border:0;
    border-bottom:1px solid var(--jsst-border-color);
    text-align:start;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
    color:var(--jsst-content-text);
    font-size:12px;
    line-height:1.35;
    box-sizing:border-box;
  }

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

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(1)::before{content:"User ID";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(2)::before{content:"Username";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(3)::before{content:"Email";}
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col:nth-child(4)::before{content:"Name";}

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col::before{
    display:block;
    color:var(--jsst-heading-color);
    font-size:10px;
    font-weight:900;
    line-height:1.25;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col > span:first-child:not(:only-child),
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col > div:first-child:not(:only-child){
    display:none;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col > *,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col span,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col div{
    display:block;
    max-width:100%;
    min-width:0;
    width:auto;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col a,
  #jsst-site.jsst-site-root div#userpopup a.js-userpopup-link{
    color:var(--jsst-top-menu-bg);
    font-weight:900;
  }

  /* Table-based AJAX results used on some Joomla/user-search branches. */
  #jsst-site.jsst-site-root div#userpopup table,
  #jsst-site.jsst-site-root div#userpopup table[style],
  #jsst-site.jsst-site-root div#userpopup thead,
  #jsst-site.jsst-site-root div#userpopup tbody,
  #jsst-site.jsst-site-root div#userpopup tr,
  #jsst-site.jsst-site-root div#userpopup tr[style],
  #jsst-site.jsst-site-root div#userpopup th,
  #jsst-site.jsst-site-root div#userpopup td,
  #jsst-site.jsst-site-root div#userpopup td[style]{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    height:auto;
    float:none;
    clear:both;
    grid-template-columns:none;
    column-gap:0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup table,
  #jsst-site.jsst-site-root div#userpopup table[style]{
    border-collapse:separate;
    border-spacing:0;
    overflow:visible;
  }

  #jsst-site.jsst-site-root div#userpopup thead,
  #jsst-site.jsst-site-root div#userpopup th{
    display:none;
  }

  #jsst-site.jsst-site-root div#userpopup tbody tr,
  #jsst-site.jsst-site-root div#userpopup tr.jsst-user-popup-grid-row{
    margin:0 0 10px;
    border:1px solid var(--jsst-border-color);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    overflow:hidden;
  }

  #jsst-site.jsst-site-root div#userpopup td,
  #jsst-site.jsst-site-root div#userpopup td[style]{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:9px 10px;
    border:0;
    border-bottom:1px solid var(--jsst-border-color);
    color:var(--jsst-content-text);
    font-size:12px;
    line-height:1.35;
    text-align:start;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #jsst-site.jsst-site-root div#userpopup td:last-child{
    border-bottom:0;
  }

  #jsst-site.jsst-site-root div#userpopup td:nth-child(1)::before{content:"User ID";}
  #jsst-site.jsst-site-root div#userpopup td:nth-child(2)::before{content:"Username";}
  #jsst-site.jsst-site-root div#userpopup td:nth-child(3)::before{content:"Email";}
  #jsst-site.jsst-site-root div#userpopup td:nth-child(4)::before{content:"Name";}

  #jsst-site.jsst-site-root div#userpopup td::before{
    display:block;
    color:var(--jsst-heading-color);
    font-size:10px;
    font-weight:900;
    line-height:1.25;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  #jsst-site.jsst-site-root div#userpopup td > .jsst-popup-cell-inner,
  #jsst-site.jsst-site-root div#userpopup td > *{
    display:block;
    width:auto;
    max-width:100%;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst_userpages{
    margin:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--jsst-border-color);
    box-sizing:border-box;
  }
}

@media (max-width:360px){
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-table-body-col[class*="js-col-"],
  #jsst-site.jsst-site-root div#userpopup td,
  #jsst-site.jsst-site-root div#userpopup td[style]{
    grid-template-columns:72px minmax(0,1fr);
    gap:6px;
    padding:8px;
    font-size:11px;
  }
}

/* =========================================================
   JS Support Ticket - Site v228 select-user popup viewport clamp
   UI-only: force the Select User popup to stay inside the phone viewport.
   ========================================================= */
@media (max-width:640px){

  #jsst-site.jsst-site-root div#userpopup,
  #jsst-site div#userpopup,
  #jsst-site.jsst-site-root div#userpopup{
    position:fixed;bottom:auto;min-width:0;
    margin:0;
    transform:none;
    -webkit-transform:none;
    translate:none;    overflow-x:hidden;
    overflow-y:auto;
    border-radius:14px;    z-index:999999;
  }

  @supports (left:max(0px)){
    #jsst-site.jsst-site-root div#userpopup,
    #jsst-site div#userpopup,
    #jsst-site.jsst-site-root div#userpopup{
      left:max(8px, env(safe-area-inset-left));
      right:max(8px, env(safe-area-inset-right));
      width:auto;
    }
  }

  #jsst-site.jsst-site-root div#userpopup > *,
  #jsst-site div#userpopup > *,
  #jsst-site.jsst-site-root div#userpopup > *{
    max-width:100%;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header,
  #jsst-site div#userpopup .jsst-popup-header,
  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
    width:100%;
    max-width:100%;
    min-height:52px;
    padding:0 12px;
    border-radius:14px 14px 0 0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopupblack,
  #jsst-site div#userpopupblack,
  #jsst-site.jsst-site-root div#userpopupblack{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    overflow:hidden;
    z-index:999998;
  }
}

@media (max-width:390px){
  #jsst-site.jsst-site-root div#userpopup,
  #jsst-site div#userpopup,
  #jsst-site.jsst-site-root div#userpopup{
    top:8px;
    left:6px;
    right:6px;
    max-height:calc(100dvh - 16px);
  }
}

/* =========================================================
   JS Support Ticket - Site v229 mobile Select User popup cards
   UI-only: render AJAX user results as clean mobile cards, keep the
   popup inside viewport, and prevent label/value overlap on phones.
   ========================================================= */
@media (max-width:640px){
  #jsst-site.jsst-site-root div#userpopup,
  #jsst-site div#userpopup,
  #jsst-site.jsst-site-root div#userpopup{
    top:8px;
    left:8px;
    right:8px;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - 16px);
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp,
  #jsst-site div#userpopup .js-ticket-popup-search-wrp,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
    width:100%;
    max-width:100%;
    padding:10px;
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup #records,
  #jsst-site div#userpopup #records,
  #jsst-site.jsst-site-root div#userpopup #records{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 235px);
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:8px 10px 10px;
    background:var(--jsst-content-bg);
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup #records-inner,
  #jsst-site div#userpopup #records-inner,
  #jsst-site.jsst-site-root div#userpopup #records-inner{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    padding:0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-list,
  #jsst-site div#userpopup .jsst-user-popup-card-list,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-list{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card,
  #jsst-site div#userpopup .jsst-user-popup-card,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    border:1px solid var(--jsst-border-color);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-row,
  #jsst-site div#userpopup .jsst-user-popup-card-row,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-row{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    margin:0;
    padding:9px 10px;
    border-bottom:1px solid var(--jsst-border-color);
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-row:last-child,
  #jsst-site div#userpopup .jsst-user-popup-card-row:last-child,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-row:last-child{
    border-bottom:0;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-label,
  #jsst-site div#userpopup .jsst-user-popup-card-label,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-label{
    display:block;
    width:76px;
    max-width:76px;
    color:var(--jsst-heading-color);
    font-size:10px;
    font-weight:900;
    line-height:1.25;
    text-transform:uppercase;
    letter-spacing:.03em;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-value,
  #jsst-site div#userpopup .jsst-user-popup-card-value,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-value{
    display:block;
    min-width:0;
    max-width:100%;
    color:var(--jsst-content-text);
    font-size:12px;
    font-weight:500;
    line-height:1.35;
    text-align:start;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-value a,
  #jsst-site div#userpopup .jsst-user-popup-card-value a,
  #jsst-site.jsst-site-root div#userpopup .jsst-user-popup-card-value a{
    display:inline;
    width:auto;
    max-width:100%;
    color:var(--jsst-top-menu-bg);
    font-weight:900;
    text-decoration:none;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #jsst-site.jsst-site-root div#userpopup .jsst_userpages,
  #jsst-site div#userpopup .jsst_userpages,
  #jsst-site.jsst-site-root div#userpopup .jsst_userpages{
    margin:10px 0 0;
    width:100%;
    max-width:100%;
    min-height:42px;
    padding:6px;
    background:#fff;
    border:1px solid var(--jsst-border-color);
    border-radius:10px;
    overflow:hidden;
    box-sizing:border-box;
  }
}

/* =========================================================
   JS Support Ticket - Site v230 Select User modal viewport fix
   UI-only: keep the popup fixed inside the phone viewport.
   Scoped to #jsst-site only; no html/body scroll-lock or template changes.
   ========================================================= */
@media (max-width:640px){
  #jsst-site.jsst-site-root div#userpopup{
    position:fixed;
    top:max(8px, env(safe-area-inset-top));
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    bottom:auto;
    width:auto;
    max-width:none;
    min-width:0;
    max-height:calc(100dvh - 16px);
    margin:0;
    transform:none;
    -webkit-transform:none;
    overflow:hidden;
    border-radius:14px;
    box-sizing:border-box;
    z-index:999999;
  }

  #jsst-site.jsst-site-root div#userpopupblack{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    background:rgba(15,23,42,.72);
    z-index:999998;
  }

  #jsst-site.jsst-site-root div#userpopup #records{
    max-height:calc(100dvh - 228px);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp,
  #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
    flex:0 0 auto;
  }
}

/* =========================================================
   JS Support Ticket - Site v231 ticket detail status header fix
   UI-only: keep the ticket detail "Open / Closed / In Progress" label
   as a real card header, not a floating pill. Scoped only to ticket detail
   sidebar so My Tickets / dashboard status badges are not affected.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt{
  display:block;
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:18px;
  background:#ffffff;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt > .js-tkt-det-status,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt > .js-tkt-det-status{
  position:relative;
  inset:auto;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  float:none;
  clear:both;
  transform:none;
  -webkit-transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:38px;
  height:38px;
  margin:0;
  padding:0 14px;
  border:0;
  border-radius:18px 18px 0 0;
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:38px;
  text-align:center;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  box-shadow:none;
  box-sizing:border-box;
  z-index:1;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt > .js-tkt-det-status > *,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt > .js-tkt-det-status > *{
  line-height:1.2;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt > .js-ticket-status-note,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt > .js-ticket-status-note,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt .js-tkt-det-status .js-ticket-status-note,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt .js-tkt-det-status .js-ticket-status-note{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:0;
  height:auto;
  margin:0;
  padding:0;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:1.2;
  text-align:center;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt > .js-tkt-det-info-cnt{
  clear:both;
  margin:0;
  padding:16px 18px 18px;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt > .js-tkt-det-info-cnt{
    overflow: hidden;
    background: var(--td-card);
    box-shadow: unset !important;
    border: 1px solid var(--td-line);
    border-radius: 15px;
    clear:both;
    margin:0;
    padding:16px 18px 18px;
    box-sizing:border-box;
}

@media (max-width:520px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-detail-cnt > .js-tkt-det-status,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-ticket-rows-wrp.js-tkt-detail-cnt > .js-tkt-det-status{
    min-height:36px;
    height:36px;
    line-height:36px;
    font-size:13px;
    border-radius:16px 16px 0 0;
  }
}

/* =========================================================
   v232 Frontend desktop polish
   Scope: frontend site presentation only. No workflow, ACL,
   database, controller, upload-validation, or permission changes.
   ========================================================= */

/* Submit Ticket message / Joomla alert: soften the old hard outline. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page > .js-ticket-form-instruction-message,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-message,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-error-message,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-warning-message{
  width:100%;
  max-width:100%;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid var(--jsst-border-color);
  border-left:5px solid var(--jsst-site-brand);
  border-radius:18px;
  outline:0;
  background:#fff;
  color:var(--jsst-content-text);
  box-shadow:0 16px 38px rgba(15,23,42,.07);
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message *{
  border-color:var(--jsst-border-color);
  color:inherit;
}

/* Downloads / Announcements / FAQs / Knowledge Base category blocks: use the same soft card language. */
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-categories-wrp,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-categories-wrp,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-categories-wrp,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-categories-wrp,
#jsst-site.jsst-site-root .js-ticket-categories-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 28px;
  padding:0;
  border:1px solid var(--jsst-site-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.06);
  overflow:hidden;
  box-sizing:border-box;
  float:none;
  clear:both;
}

#jsst-site.jsst-site-root .js-ticket-categories-heading-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  min-height:68px;
  margin:0;
  padding:20px 28px;
  border:0;
  border-bottom:1px solid var(--jsst-site-border);
  border-radius:0;
  background:linear-gradient(180deg,#fbfafc,var(--jsst-content-bg));
  color:var(--jsst-site-text);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:0;
  box-shadow:none;
  box-sizing:border-box;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-categories-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  width:100%;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:18px;
  background:#fff;
  box-sizing:border-box;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-category-box{
  display:block;
  width:100%;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-category-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  width:100%;
  min-height:92px;
  margin:0;
  padding:18px 22px;
/*  border:1px solid var(--jsst-site-border);*/
  border-radius:16px;
  background:#fff;
  color:var(--jsst-site-text);
  text-decoration:none;
  box-shadow:0 10px 26px rgba(15,23,42,.035);
  box-sizing:border-box;
  overflow:hidden;
}

#jsst-site.jsst-site-root .js-ticket-category-title:hover{
  border-color:var(--jsst-border-color);
  box-shadow:0 16px 34px rgba(79,102,246,.11);
  transform:none;
}

#jsst-site.jsst-site-root .js-ticket-category-download-logo,
#jsst-site.jsst-site-root .js-ticket-category-kb-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  width:56px;
  height:56px;
  min-width:56px;
  margin:0;
  padding:0;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
  box-shadow:none;
  float:none;
  box-sizing:border-box;
}

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

#jsst-site.jsst-site-root .js-ticket-category-name{
  display:block;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--jsst-site-text);
  font-size:16px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Empty states: reduce the old oversized no-record area on Downloads / FAQs. */
#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  min-height:260px;
  margin:0;
  padding:42px 24px;
  border:0;
  background:#fff;
  box-shadow:none;
  box-sizing:border-box;
  float:none;
  clear:both;
}

#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper .js-ticket-message-image-wrapper{
  display:flex;
  justify-content:center;
  width:100%;
  margin:0 0 16px;
  padding:0;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper img.js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper img.js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image{
  width:132px;
  max-width:132px;
  height:auto;
  margin:0 auto;
}

#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-data-wrapper{
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text{
  display:block;
  margin:0 0 6px;
  color:var(--jsst-heading-color);
  font-size:30px;
  font-weight:900;
  line-height:1.15;
}

#jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper .js-ticket-messages-block_text,
#jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper .js-ticket-messages-block_text,
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-block_text,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-block_text,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-block_text,
#jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-block_text{
  display:block;
  margin:0;
  color:var(--jsst-content-text);
  font-size:17px;
  font-weight:500;
  line-height:1.4;
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-ticket-categories-heading-wrp{
    min-height:54px;
    padding:14px 16px;
    font-size:18px;
  }

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

  #jsst-site.jsst-site-root .js-ticket-category-title{
    flex-direction:column;
    justify-content:center;
    gap:9px;
    min-height:112px;
    padding:14px 10px;
    text-align:center;
  }

  #jsst-site.jsst-site-root .js-ticket-category-name{
    font-size:12px;
    text-align:center;
  }

  #jsst-site.jsst-site-root .js-ticket-category-download-logo,
  #jsst-site.jsst-site-root .js-ticket-category-kb-logo{
    flex-basis:44px;
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:13px;
  }

  #jsst-site.jsst-site-root .js-ticket-category-download-logo img,
  #jsst-site.jsst-site-root .js-ticket-category-kb-logo img,
  #jsst-site.jsst-site-root img.js-ticket-download-img,
  #jsst-site.jsst-site-root img.js-ticket-kb-img{
    width:24px;
    max-width:24px;
    height:24px;
    max-height:24px;
  }

  #jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper{
    min-height:210px;
    padding:30px 18px;
  }

  #jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper img.js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper img.js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper img.js-ticket-message-image{
    width:96px;
    max-width:96px;
  }

  #jsst-site.jsst-site-root .js-ticket-downloads-wrp > .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
  #jsst-site.jsst-site-root .js-ticket-downloads-content > .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
  #jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
  #jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text,
  #jsst-site.jsst-site-root .js-ticket-faq-wrapper .js-ticket-error-message-wrapper .js-ticket-messages-main-text{
    font-size:24px;
  }
}

/* =========================================================
   JS Support Ticket - Site v233 mobile final fixes
   Scope: frontend site presentation only. No workflow, model,
   controller, permissions, upload validation, or data changes.
   Fixes:
   1) Stack Ticket Status fields on mobile.
   2) Keep TinyMCE/Joomla editor toolbars inside viewport.
   3) Remove nested input-style box from Submit Ticket alert content.
   ========================================================= */

/* Submit Ticket / Joomla message alert: keep one soft alert card only. */
#jsst-site.jsst-site-root .jsst-submit-ticket-page .alert-message,
#jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-form-instruction-message .alert-message{
  display:block;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  color:var(--jsst-content-text);
  font-size:15px;
  font-weight:500;
  line-height:1.55;
}

/* Ticket Status page: polished desktop/mobile card and guaranteed full-width mobile fields. */
#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp{
  width:100%;
  max-width:100%;
  margin:0 auto 24px;
  padding:18px;
  border:1px solid var(--jsst-site-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.055);
  box-sizing:border-box;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp form.js-ticket-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 32px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-checkstatus-field-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-field-title{
  width:100%;
  margin:0 0 10px;
  padding:0;
  color:var(--jsst-site-text);
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-field-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-field-wrp input.js-ticket-form-input-field{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:56px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  color:var(--jsst-heading-color);
  font-size:16px;
  line-height:56px;
  box-sizing:border-box;
  float:none;
}

#jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-form-btn-wrp{
  grid-column:1 / -1;
  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.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-form-btn-wrp input.js-ticket-save-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:170px;
  height:56px;
  min-height:56px;
  margin:0;
  padding:0 28px;
  border:0;
  border-radius:12px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-size:16px;
  font-weight:900;
  line-height:56px;
  box-shadow:0 14px 30px rgba(79,102,246,.20);
}

/* Generic frontend editor containment for Submit Ticket, Ticket Detail reply, and GDPR/User Data. */
#jsst-site.jsst-site-root .mce-tinymce,
#jsst-site.jsst-site-root table.mceLayout,
#jsst-site.jsst-site-root .tox-tinymce,
#jsst-site.jsst-site-root .js-editor-tinymce,
#jsst-site.jsst-site-root .joomla-editor,
#jsst-site.jsst-site-root .editor{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root iframe[id^="message_ifr"],
#jsst-site.jsst-site-root iframe[id$="_ifr"],
#jsst-site.jsst-site-root .mce-edit-area iframe,
#jsst-site.jsst-site-root .tox-edit-area iframe{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

@media (max-width:640px){
  /* Ticket Status mobile: no side-by-side fields, no clipped email. */
  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp{
    padding:18px;
    border-radius:18px;
  }

  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp form.js-ticket-form{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-checkstatus-field-wrp{
    grid-column:1;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }

  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-field-wrp input.js-ticket-form-input-field{
    width:100%;
    max-width:100%;
    min-width:0;
    height:58px;
    line-height:58px;
    font-size:16px;
  }

  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-form-btn-wrp{
    grid-column:1;
    padding-top:20px;
  }

  #jsst-site.jsst-site-root .js-ticket-checkstatus-wrp .js-ticket-form-btn-wrp input.js-ticket-save-button{
    width:100%;
    min-width:0;
    max-width:100%;
    height:58px;
    line-height:58px;
    border-radius:14px;
  }

  /* All frontend editor toolbars: stay inside the phone viewport, scroll sideways when needed. */
  #jsst-site.jsst-site-root .mce-tinymce,
  #jsst-site.jsst-site-root table.mceLayout,
  #jsst-site.jsst-site-root .tox-tinymce,
  #jsst-site.jsst-site-root .js-editor-tinymce,
  #jsst-site.jsst-site-root .joomla-editor,
  #jsst-site.jsst-site-root .editor,
  #jsst-site.jsst-site-root .mce-container,
  #jsst-site.jsst-site-root .mce-container-body,
  #jsst-site.jsst-site-root .tox,
  #jsst-site.jsst-site-root .tox-editor-container{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .mce-toolbar-grp,
  #jsst-site.jsst-site-root .mce-flow-layout,
  #jsst-site.jsst-site-root .mce-menubar,
  #jsst-site.jsst-site-root .tox-editor-header,
  #jsst-site.jsst-site-root .tox-menubar,
  #jsst-site.jsst-site-root .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .tox-toolbar,
  #jsst-site.jsst-site-root .tox-toolbar__primary,
  #jsst-site.jsst-site-root .tox-toolbar__overflow{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .mce-toolbar-grp::-webkit-scrollbar,
  #jsst-site.jsst-site-root .mce-flow-layout::-webkit-scrollbar,
  #jsst-site.jsst-site-root .mce-menubar::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-editor-header::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-menubar::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-toolbar-overlord::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-toolbar::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-toolbar__primary::-webkit-scrollbar,
  #jsst-site.jsst-site-root .tox-toolbar__overflow::-webkit-scrollbar{
    display:none;
  }

  #jsst-site.jsst-site-root .mce-btn-group,
  #jsst-site.jsst-site-root .mce-btn,
  #jsst-site.jsst-site-root .tox-toolbar__group,
  #jsst-site.jsst-site-root .tox-tbtn{
    display:inline-flex;
    flex:0 0 auto;
    width:auto;
    max-width:none;
    min-width:0;
    float:none;
    white-space:nowrap;
    vertical-align:top;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .tox .tox-tbtn{
    min-width:28px;
    max-width:none;
  }
}

@media (max-width:380px){
  #jsst-site.jsst-site-root .mce-toolbar-grp .mce-btn,
  #jsst-site.jsst-site-root .mce-toolbar-grp .mce-btn button,
  #jsst-site.jsst-site-root .tox .tox-tbtn{
    min-width:26px;
    padding-left:4px;
    padding-right:4px;
  }
}


/* =========================================================
   JS Support Ticket - Site v234 agent mobile fixes
   Scope: frontend site presentation only. No workflow, ACL,
   database, upload validation, or controller logic changes.
   Fixes:
   1) Mobile role-permission page usable card rows.
   2) Select dropdown icon repeat on mobile/desktop forms.
   3) Agent dashboard chart uses horizontal scroll instead of squeezing.
   4) Extra safety for floating Support tab overlap on mobile.
   ========================================================= */

html[dir="rtl"] #jsst-site.jsst-site-root select,
html[dir="rtl"] #jsst-site.jsst-site-root select.inputbox,
html[dir="rtl"] #jsst-site.jsst-site-root select.js-ticket-select-field,
html[dir="rtl"] #jsst-site.jsst-site-root select.js-form-select-field,
html[dir="rtl"] #jsst-site.jsst-site-root select.js-ticket-form-field-select{
  background-position:left 16px center;
  padding-right:16px;
  padding-left:44px;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-subheading{
  margin:0;
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--jsst-site-border,var(--jsst-border-color));
  background:var(--jsst-heading-color);
  color:#fff;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-subheading .head-text{
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data{
  box-sizing:border-box;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data label{
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:800;
  line-height:1.28;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data input[type="checkbox"]{
  accent-color:var(--jsst-site-brand,var(--jsst-top-menu-bg));
}

/* Agent dashboard chart: do not squeeze bars/labels into unreadable columns. */
#jsst-site.jsst-site-root #js-pm-grapharea{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
#jsst-site.jsst-site-root #stack_chart_horizontal,
#jsst-site.jsst-site-root #stack_chart_horizontal > div,
#jsst-site.jsst-site-root #stack_chart_horizontal svg{
  min-width:560px;
}

@media (max-width:640px){
  /* Role permissions: full-width readable rows instead of tiny checkbox tiles. */
  #jsst-site.jsst-site-root #js-tk-formwrapper{
    display:block;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    float:none;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper{
    display:block;
    width:100%;
    max-width:100%;
    margin:0 0 16px;
    padding:0;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    float:none;
    clear:both;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-subheading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px;
    margin:0;
    padding:12px 14px;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:10px;
    width:100%;
    max-width:100%;
    min-height:44px;
    margin:0;
    padding:10px 14px;
    border:0;
    border-bottom:1px solid var(--jsst-border-color);
    background:#fff;
    float:none;
    clear:both;
    box-shadow:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data:last-child{
    border-bottom:0;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data input[type="checkbox"]{
    display:block;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    margin:0;
    padding:0;
    float:none;
    vertical-align:middle;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data label{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    text-align:start;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    float:none;
    box-sizing:border-box;
  }

  /* A narrow-card variant prevents one-letter words in ultra-small widths. */
  @supports (container-type:inline-size){
    #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper{
      container-type:inline-size;
    }
  }

  /* Chart gets a real scroll area instead of a squeezed graphic. */
  #jsst-site.jsst-site-root #js-pm-grapharea{
    max-width:100%;
    padding:10px 10px 14px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  #jsst-site.jsst-site-root #stack_chart_horizontal,
  #jsst-site.jsst-site-root #stack_chart_horizontal > div,
  #jsst-site.jsst-site-root #stack_chart_horizontal svg{
    min-width:560px;
    width:560px;
    height:280px;
    max-height:280px;
  }
}

@media (max-width:420px){
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data{
    grid-template-columns:20px minmax(0,1fr);
    gap:8px;
    padding:9px 12px;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-per-wrapper .js-per-data label{
    font-size:11px;
  }
}

/* =========================================================
   JS Support Ticket - Site v235 agent/customer mobile polish
   Scope: CSS-only presentation fixes for frontend site pages.
   No workflow, ACL, permission, database, upload validation, or controller logic changes.
   ========================================================= */

/* Keep date/calendar controls and list filters inside their cards. */
#jsst-site.jsst-site-root .field-calendar,
#jsst-site.jsst-site-root .input-append,
#jsst-site.jsst-site-root .input-group{
  max-width:100%;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .field-calendar input,
#jsst-site.jsst-site-root .input-append input,
#jsst-site.jsst-site-root .input-group input{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Permission cards: also covers Add/Edit Role and Staff permission forms, not only the Role Permissions page. */
#jsst-site.jsst-site-root div.js-per-wrapper,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper{
  width:100%;
  max-width:100%;
  margin:0 0 18px;
  padding:0;
  border:1px solid var(--jsst-site-border,var(--jsst-border-color));
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.045);
  overflow:hidden;
  float:none;
  clear:both;
  box-sizing:border-box;
  display: flex;
  flex-wrap: wrap;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-datawrapper,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-datawrapper,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-datawrapper,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-datawrapper{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-subheading{
  width:100%;
  margin:0;
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--jsst-site-border,var(--jsst-border-color));
  background:var(--jsst-heading-color);
  color:#fff;
  float:none;
  clear:both;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-text,
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox label{
  color:#fff;
  font-weight:900;
  line-height:1.25;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-data{
  width:50%;
  max-width:50%;
  margin:0;
  padding:11px 16px;
  border:0;
  border-bottom:1px solid var(--jsst-border-color);
  background:#fff;
  box-shadow:none;
  float:none;
  clear:both;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data:last-child,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data:last-child{
  border-bottom:0;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data input[type="checkbox"],
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data input[type="checkbox"]{
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  margin:0 8px 0 0;
  padding:0;
  vertical-align:middle;
  accent-color:var(--jsst-site-brand,var(--jsst-top-menu-bg));
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data label,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data label{
  width:auto;
  max-width:calc(100% - 32px);
  margin:0;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  text-align:start;
  text-transform:none;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  vertical-align:middle;
  box-sizing:border-box;
}

/* Soften feedback and message/list section headers that still used old dark bars. */
#jsst-site.jsst-site-root .js-ticket-feedback-list-wrapper{
  width:100%;
  max-width:100%;
  margin:24px 0 0;
  border:1px solid var(--jsst-site-border,var(--jsst-border-color));
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.06);
  overflow:hidden;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-feedback-heading{
  margin:0;
  padding:22px 28px;
  min-height:68px;
  border:0;
  border-bottom:1px solid var(--jsst-site-border,var(--jsst-border-color));
  background:linear-gradient(180deg,#fbfafc,var(--jsst-content-bg));
  color:var(--jsst-site-text,var(--jsst-heading-color));
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  box-sizing:border-box;
}

/* Reduce giant empty states on user-facing list pages while keeping them visible. */
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper{
  width:100%;
  max-width:100%;
  min-height:0;
  margin:0 auto;
  padding:56px 24px;
  border:0;
  background:#fff;
  box-shadow:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-message-image-wrapper{
  margin:0 auto 18px;
}
#jsst-site.jsst-site-root .js-ticket-message-image{
  width:128px;
  max-width:128px;
  height:auto;
  opacity:.76;
}

/* GDPR/User Data heading cards: keep content compact on phones and remove old form looseness. */
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  margin:0;
  padding:22px 28px;
  border:0;
  background:#fbfafc;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-wrapper-gdpr #js-tk-formwrapper .js-ticket-search-heading-main-wrp{
    padding: 0;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-left{
  float:none;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:24px;
  font-weight:900;
  line-height:1.18;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-right{
  float:none;
  width:auto;
  margin:0;
  padding:0;
}

/* Report pages: avoid squeezed charts and overflowing statistic boxes. */
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp{
  max-width:100%;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #curve_chart,
#jsst-site.jsst-site-root #pie3d_chart1,
#jsst-site.jsst-site-root .js-ticket-pie-chart-wrapper{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root #pie3d_chart1 svg,
#jsst-site.jsst-site-root .js-ticket-pie-chart-wrapper svg{
  max-width:100%;
  height:auto;
}

@media (max-width:640px){
  /* General mobile form rhythm: labels are labels, not bordered pills. */
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-form-title,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-form-title,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-form-title,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-from-field-title{
    display:block;
    width:100%;
    max-width:100%;
    min-height:0;
    height:auto;
    margin:0 0 7px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--jsst-heading-color);
    font-size:13px;
    font-weight:900;
    line-height:1.25;
    text-align:start;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-form-title label,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title label,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-form-title label,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-from-field-title label{
    display:inline;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--jsst-heading-color);
    font-size:13px;
    font-weight:900;
    line-height:1.25;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-form-value,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-form-value,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-form-value,
  #jsst-site.jsst-site-root .jsst-submit-ticket-page .js-ticket-from-field{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 15px;
    padding:0;
    float:none;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-1,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-2,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-3,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-4,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-5,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-6,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-7,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-8,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-9,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-10,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-11,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-col-md-12,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-1,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-2,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-3,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-4,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-5,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-6,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-7,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-8,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-9,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-10,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-11,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-col-md-12{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding-left:0;
    padding-right:0;
    float:none;
    box-sizing:border-box;
  }

  /* Search/filter cards on mobile, including mail/feedback/reports. */
  #jsst-site.jsst-site-root .js-ticket-top-search-wrp{
    padding:18px;
    border-radius:18px;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-ticket-search-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-fields-wrp form,
  #jsst-site.jsst-site-root form.js-filter-form,
  #jsst-site.jsst-site-root .js-ticket-fields-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-fields-wrp > *,
  #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-filter-wrapper-toggle-area,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-area > *{
    grid-column:1;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding-left:0;
    padding-right:0;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp-download,
  #jsst-site.jsst-site-root .js-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-staff-search-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-mail-search-btn-wrp,
  #jsst-site.jsst-site-root .js-search-form-feedback-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn > span,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn a,
  #jsst-site.jsst-site-root .js-search-filter-btn,
  #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 button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:54px;
    margin:0;
    box-sizing:border-box;
  }

  /* Calendar helper buttons should sit inside the input, not on a separate line. */
  #jsst-site.jsst-site-root .field-calendar,
  #jsst-site.jsst-site-root .input-append,
  #jsst-site.jsst-site-root .input-group{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }
  #jsst-site.jsst-site-root .field-calendar input,
  #jsst-site.jsst-site-root .input-append input,
  #jsst-site.jsst-site-root .input-group input,
  #jsst-site.jsst-site-root input.hasTooltip[type="text"]{
    width:100%;
    max-width:100%;
    min-width:0;
    height:56px;
    padding-right:58px;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .field-calendar button:not(.js-btn),
  #jsst-site.jsst-site-root .field-calendar .btn:not(.js-btn),
  #jsst-site.jsst-site-root .input-append button:not(.js-btn),
  #jsst-site.jsst-site-root .input-append .btn:not(.js-btn),
  #jsst-site.jsst-site-root .input-group button:not(.js-btn),
  #jsst-site.jsst-site-root .input-group .btn:not(.js-btn),
  #jsst-site.jsst-site-root button[id$="_btn"],
  #jsst-site.jsst-site-root button.calendar{
    position:absolute;
    top:7px;
    right:7px;
    left:auto;
    bottom:auto;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    max-width:42px;
    max-height:42px;
    margin:0;
    padding:0;
    border-radius:12px;
    float:none;
    z-index:2;
  }

  /* Mail inbox/outbox tabs on mobile. */
  #jsst-site.jsst-site-root .js-ticket-mails-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    margin:22px 0;
    padding:0;
    border:0;
    text-align:start;
    box-sizing:border-box;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-ticket-mail-btn,
  #jsst-site.jsst-site-root .js-ticket-mail-btn a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:52px;
    margin:0;
    padding:0 14px;
    border-radius:14px;
    box-sizing:border-box;
    float:none;
    text-align:center;
    white-space:normal;
  }
  #jsst-site.jsst-site-root .js-ticket-mail-btn img.js-ticket-mail-img{
    width:18px;
    height:18px;
    max-width:18px;
    max-height:18px;
    margin:0;
  }

  /* Permission mobile rows: one readable line per permission. */
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading,
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    min-height:42px;
    padding:11px 12px;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    max-width:110px;
    overflow:hidden;
    font-size:10px;
    line-height:1.15;
    text-align:end;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox label{
    font-size:10px;
    line-height:1.15;
    white-space:normal;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data,
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data,
  #jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-data,
  #jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-data{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:9px 12px;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data input[type="checkbox"],
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data input[type="checkbox"]{
    grid-column:1;
    margin:0;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data label,
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data label{
    grid-column:2;
    max-width:100%;
    font-size:11px;
    line-height:1.25;
  }

  /* Feedback list mobile. */
  #jsst-site.jsst-site-root .js-ticket-feedback-heading{
    padding:18px 20px;
    min-height:58px;
    font-size:20px;
  }

  /* Empty states: compact on mobile. */
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper{
    padding:38px 18px;
    min-height:260px;
  }
  #jsst-site.jsst-site-root .js-ticket-message-image{
    width:104px;
    max-width:104px;
  }
  #jsst-site.jsst-site-root .js-ticket-messages-main-text{
    font-size:26px;
    line-height:1.15;
  }
  #jsst-site.jsst-site-root .js-ticket-messages-block_text{
    font-size:16px;
    line-height:1.35;
  }

  /* GDPR/User Data compact mobile cards. */
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:22px;
    border-radius:16px;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-left{
    font-size:26px;
    line-height:1.15;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-right,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-right .js-ticket-add-download-btn{
    width:100%;
    max-width:100%;
  }
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-search-heading-main-wrp .js-ticket-heading-right .js-ticket-add-download-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    border-radius:14px;
  }

  /* Reports: make charts scroll cleanly and keep cards readable. */
  #jsst-site.jsst-site-root #curve_chart{
    height:320px;
    min-height:320px;
    overflow-x:auto;
  }
  #jsst-site.jsst-site-root #curve_chart > div,
  #jsst-site.jsst-site-root #curve_chart svg{
    min-width:520px;
  }
  #jsst-site.jsst-site-root #pie3d_chart1{
    height:300px;
    min-height:300px;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-admin-report-box-wrapper,
  #jsst-site.jsst-site-root .js-festaffreport-data,
  #jsst-site.jsst-site-root .js-admin-staff-wrapper .js-festaffreport-data{
    display:grid;
    grid-template-columns:repeat(5,minmax(54px,1fr));
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:12px;
    box-sizing:border-box;
    overflow-x:auto;
    float:none;
  }
  #jsst-site.jsst-site-root .js-admin-box,
  #jsst-site.jsst-site-root .js-admin-report-box,
  #jsst-site.jsst-site-root .jsreportfixwidth.js-admin-box,
  #jsst-site.jsst-site-root .jsreportfixwidth.js-admin-report-box{
    width:100%;
    min-width:54px;
    max-width:none;
    min-height:88px;
    margin:0;
    padding:8px 4px;
    border-radius:14px;
    text-align:center;
    box-sizing:border-box;
    float:none;
  }
  #jsst-site.jsst-site-root .js-admin-box-image img,
  #jsst-site.jsst-site-root .js-admin-report-box img{
    width:30px;
    max-width:30px;
    height:auto;
  }
  #jsst-site.jsst-site-root .js-admin-box-content-number,
  #jsst-site.jsst-site-root .js-report-box-number{
    font-size:20px;
    line-height:1.15;
  }
  #jsst-site.jsst-site-root .js-admin-box-content-label,
  #jsst-site.jsst-site-root .js-report-box-title{
    display:block;
    width:100%;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    line-height:1.2;
  }
  #jsst-site.jsst-site-root .js-admin-staff-wrapper,
  #jsst-site.jsst-site-root .js-departmentlist{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:18px;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-festaffreport-img,
  #jsst-site.jsst-site-root .js-festaffreport-data{
    width:100%;
    max-width:100%;
    float:none;
    box-sizing:border-box;
  }
}

@media (max-width:380px){
  #jsst-site.jsst-site-root .js-ticket-top-search-wrp{
    padding:16px;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data label,
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data label{
    font-size:10.5px;
  }
  #jsst-site.jsst-site-root #curve_chart > div,
  #jsst-site.jsst-site-root #curve_chart svg{
    min-width:480px;
  }
}

/* =========================================================
   JS Support Ticket - Site Agent/User Mobile Form Polish v236
   UI/CSS only. No controller/model/workflow/upload/security logic changed.
   Fixes: mail tabs/editor, add staff user selector, department signature form,
   compact empty states, soft filter/action cards, and report card overflow.
   ========================================================= */

/* Mail navigation tabs: replace old hard table buttons with soft modern cards. */
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp{clear:both;}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a,
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.button,
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.js-add-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  margin:0;
  padding:0 18px;
  border:1px solid var(--jsst-site-border);
  border-radius:16px;
  background:#fbfafc;
  color:var(--jsst-top-menu-bg);
  font-size:17px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  box-shadow:0 12px 28px rgba(15,23,42,.04);
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.active,
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.is-active{
  border-color:var(--jsst-top-menu-bg);
  background:linear-gradient(135deg,var(--jsst-site-brand),var(--jsst-top-menu-bg));
  color:#fff;
  box-shadow:0 16px 34px rgba(79,102,246,.22);
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp img.js-ticket-mail-img{
  display:inline-block;
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  margin:0;
  object-fit:contain;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a img.js-ticket-mail-img:nth-of-type(2){
  display:none;
}

/* Mail compose form: soft container and editor that behaves like Submit Ticket. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper{
  border:1px solid var(--jsst-site-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 50px rgba(15,23,42,.055);
  overflow:visible;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0px;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width{
  width:100%;
  max-width:100%;
  margin:0 0 18px;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title label{
  display:block;
  width:100%;
  margin:0 0 8px;
  padding:0;
  color:var(--jsst-heading-color);
  font-weight:900;
  line-height:1.25;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper select,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper textarea,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form-field-input,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .inputbox{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:56px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-site-border);
  border-radius:15px;
  background:#fff;
  color:var(--jsst-heading-color);
  font-size:16px;
  box-shadow:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper textarea{
  min-height:180px;
  padding:14px 16px;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .mce-tinymce,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper table.mceLayout{
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--jsst-site-border);
  border-radius:15px;
  overflow:hidden;
  box-shadow:none;
  box-sizing:border-box;
}

/* Staff form username chooser: prevent Select User from overlapping the input. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
  display:grid;
  grid-template-columns:minmax(0,1fr) 152px;
  gap:0;
  align-items:stretch;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-select-user-field,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-select-user-btn{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-select-user-btn a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  height:50px;
  padding:0 13px;
  border-radius:15px;
  background:var(--jsst-site-brand);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  box-sizing:border-box;
}

/* Add Department / Add Staff signature block: remove legacy overlap and box model issues. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-append-signature-wrp,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-append-signature-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:4px 0 20px;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-append-field-title,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-append-field-title{
  display:block;
  width:100%;
  margin:0 0 10px;
  padding:0;
  color:var(--jsst-heading-color);
  font-weight:900;
  line-height:1.25;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-append-field-wrp,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-append-field-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:100%;
  min-height:58px;
  margin:0;
  padding:14px 16px;
  border:1px solid var(--jsst-site-border);
  border-radius:15px;
  background:#fff;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box input[type="checkbox"],
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box input[type="checkbox"]{
  flex:0 0 18px;
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  margin:0;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box label,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box label,
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tk_form_chkbox_label{
  display:block;
  flex:1 1 auto;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  color:var(--jsst-content-text);
  font-size:16px;
  line-height:1.35;
  white-space:normal;
  float:none;
  box-sizing:border-box;
}

/* Main action buttons: keep long labels readable. */
#jsst-site.jsst-site-root .js-ticket-form-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  margin:24px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--jsst-site-border);
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-form-btn-wrp .js-ticket-save-button,
#jsst-site.jsst-site-root .js-ticket-form-btn-wrp .js-ticket-cancel-button{
  white-space:normal;
  line-height:1.15;
  text-align:center;
}

/* Softer section headers and compact empty states. */
#jsst-site.jsst-site-root .js-ticket-feedback-heading,
#jsst-site.jsst-site-root .js-ticket-search-heading,
#jsst-site.jsst-site-root .js-ticket-downloads-heading-main,
#jsst-site.jsst-site-root .js-ticket-search-heading-main,
#jsst-site.jsst-site-root .js-ticket-section-heading{
  background:var(--jsst-content-bg);
  color:var(--jsst-heading-color);
  border:0;
  border-bottom:1px solid var(--jsst-site-border);
  border-radius:18px 18px 0 0;
  box-shadow:none;
}
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper.js-ticket-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:300px;
  padding:48px 20px;  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-image,
#jsst-site.jsst-site-root .js-ticket-message-image{
  width:120px;
  max-width:120px;
  height:auto;
  margin:0 auto 18px;
}
#jsst-site.jsst-site-root .js-ticket-messages-main-text{
  font-size:30px;  margin:0 0 8px;
}
#jsst-site.jsst-site-root .js-ticket-messages-block_text{margin:0;
}

/* Report/chart sections: never let charts/cards push outside the phone viewport. */
#jsst-site.jsst-site-root #curve_chart,
#jsst-site.jsst-site-root #pie3d_chart1{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-admin-report-box-wrapper,
#jsst-site.jsst-site-root .js-festaffreport-data{
  box-sizing:border-box;
}

@media (max-width:760px){
}

@media (max-width:560px){
  /* Mail compose: hide text menubar, keep icon toolbar scrollable. */
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox .tox-menubar,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-menubar,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .mce-menubar,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .mce-menubtn,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox .tox-menubar,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox-menubar,
  #jsst-site.jsst-site-root #js-tk-formwrapper .mce-menubar,
  #jsst-site.jsst-site-root #js-tk-formwrapper .mce-menubtn{
    display:none;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-toolbar,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-toolbar__primary,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .mceToolbar,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox-toolbar-overlord,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox-toolbar,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox-toolbar__primary,
  #jsst-site.jsst-site-root #js-tk-formwrapper .mceToolbar{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    flex-wrap:nowrap;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tox-toolbar__group,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tox-toolbar__group{
    flex-wrap:nowrap;
  }

  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper,
  #jsst-site.jsst-site-root .js-ticket-top-search-wrp,
  #jsst-site.jsst-site-root .js-ticket-roles-wrapper,
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper,
  #jsst-site.jsst-site-root .js-ticket-department-wrapper,
  #jsst-site.jsst-site-root .js-ticket-mail-wrapper{
    border-radius:18px;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form{
    padding:20px;
  }

  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field:has(.js-ticket-select-user-field){
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-select-user-btn a{
    min-height:54px;
  }

  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper select,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper textarea,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form-field-input,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .inputbox{
    min-height:56px;
    font-size:16px;
  }

  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-append-signature-wrp,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-append-signature-wrp{
    margin:8px 0 22px;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box{
    align-items:flex-start;
    min-height:64px;
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box input[type="checkbox"],
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box input[type="checkbox"]{
    margin-top:3px;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(textarea#signature),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(textarea[name="signature"]),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(textarea[name="departmentsignature"]),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(#departmentsignature){
    margin-top:4px;
    clear:both;
  }

  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding-top:22px;
  }
  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp .js-ticket-save-button,
  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp .js-ticket-cancel-button,
  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp input[type="submit"],
  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp a{
    width:100%;
    min-width:0;
    max-width:none;
    min-height:54px;
    margin:0;
    padding:0 10px;
    font-size:15px;
    white-space:normal;
    box-sizing:border-box;
  }

  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper.js-ticket-empty-state{
    min-height:240px;
    padding:34px 16px;
  }
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-message-image{
    width:86px;
    max-width:86px;
    margin-bottom:14px;
  }
  #jsst-site.jsst-site-root .js-ticket-messages-main-text{
    font-size:26px;
  }
  #jsst-site.jsst-site-root .js-ticket-messages-block_text{
    font-size:16px;
  }

  /* Feedback / mail filter toggle buttons should not use old squared borders. */
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn > span,
  #jsst-site.jsst-site-root #js-filter-wrapper-toggle-btn a{
    border-radius:12px;
    border:1px solid var(--jsst-site-border);
    background:var(--jsst-content-bg);
    color:var(--jsst-top-menu-bg);
  }

  #jsst-site.jsst-site-root #curve_chart{
    height:300px;
    min-height:300px;
    padding-bottom:8px;
  }
  #jsst-site.jsst-site-root #curve_chart > div,
  #jsst-site.jsst-site-root #curve_chart svg{
    min-width:500px;
  }
  #jsst-site.jsst-site-root #pie3d_chart1{
    height:300px;
    min-height:300px;
  }
  #jsst-site.jsst-site-root .js-admin-report-box-wrapper,
  #jsst-site.jsst-site-root .js-festaffreport-data{
    display:grid;
    grid-template-columns:repeat(5,minmax(64px,1fr));
    gap:10px;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    padding:12px;
  }
}

@media (max-width:380px){
  #jsst-site.jsst-site-root .js-ticket-form-btn-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form{
    padding:18px;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box label,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box label,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tk_form_chkbox_label{
    font-size:15px;
  }
}

/* =========================================================
   JS Support Ticket - Site Agent/User Final Mobile/Desktop Polish v237
   UI/CSS only. No controller/model/workflow/upload/security logic changed.
   Focus: remaining agent mobile forms, report charts/cards, mail tabs, and editor overflow.
   ========================================================= */

/* Keep rich text editor toolbars inside their card on all frontend pages. */
#jsst-site.jsst-site-root .tox,
#jsst-site.jsst-site-root .mce-tinymce,
#jsst-site.jsst-site-root .mce-container,
#jsst-site.jsst-site-root .mce-panel{
  max-width:100%;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .tox .tox-toolbar-overlord,
#jsst-site.jsst-site-root .tox .tox-toolbar,
#jsst-site.jsst-site-root .tox .tox-toolbar__primary,
#jsst-site.jsst-site-root .mce-toolbar-grp,
#jsst-site.jsst-site-root .mce-toolbar,
#jsst-site.jsst-site-root .mce-flow-layout{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  flex-wrap:nowrap;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .tox .tox-toolbar__group,
#jsst-site.jsst-site-root .mce-container-body,
#jsst-site.jsst-site-root .mce-flow-layout-item{
  flex-wrap:nowrap;
}

/* Mail tabs: make inbox/outbox/compose consistent soft buttons, not old squared blocks. */
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  width:100%;
  max-width:100%;
  margin:24px 0;
  padding:0;
  border:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn,
#jsst-site.jsst-site-root div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  text-align:center;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.js-add-link,
#jsst-site.jsst-site-root div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:58px;
  margin:0;
  padding:0 18px;
  border:1px solid var(--jsst-site-border);
  border-radius:16px;
  background:#fbfafc;
  color:var(--jsst-top-menu-bg);
  font-size:17px;
  font-weight:900;
  line-height:1.15;
  text-decoration:none;
  box-shadow:0 14px 32px rgba(15,23,42,.045);
  box-sizing:border-box;
  float:none;
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.js-add-link.active,
#jsst-site.jsst-site-root div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link.active{
  border-color:var(--jsst-top-menu-bg);
  background:linear-gradient(135deg,var(--jsst-top-menu-bg),var(--jsst-top-menu-bg));
  color:#fff;
  box-shadow:0 18px 36px rgba(79,102,246,.22);
}
#jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.js-add-link img{
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  margin:0;
  object-fit:contain;
}

/* Report cards: remove hard overflow and let mobile wrap stats instead of clipping. */
#jsst-site.jsst-site-root .js-ticket-pie-chart-wrapper,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp,
#jsst-site.jsst-site-root .js-admin-staff-wrapper,
#jsst-site.jsst-site-root .js-departmentlist{
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
#jsst-site.jsst-site-root #pie3d_chart1,
#jsst-site.jsst-site-root #pie3d_chart1 > div,
#jsst-site.jsst-site-root #pie3d_chart1 svg{
  max-width:100%;
  box-sizing:border-box;
}

@media (max-width:760px){
  /* Mail tabs become full-width stacked pills on phone. */
  #jsst-site.jsst-site-root .js-ticket-mails-btn-wrp{
    grid-template-columns:1fr;
    gap:12px;
    margin:22px 0;
  }
  #jsst-site.jsst-site-root .js-ticket-mails-btn-wrp .js-ticket-mail-btn a.js-add-link,
  #jsst-site.jsst-site-root div.js-ticket-mails-btn-wrp div.js-ticket-mail-btn a.js-add-link{
    min-height:64px;
    border-radius:18px;
    font-size:20px;
  }

  /* Add/edit form cards: prevent controls from touching card edge. */
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper,
  #jsst-site.jsst-site-root #js-tk-formwrapper{
    max-width:100%;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-form,
  #jsst-site.jsst-site-root #js-tk-formwrapper form{
    max-width:100%;
    box-sizing:border-box;
  }

  /* Staff user selector: keep the button under the username field and never cropped. */
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field:has(.js-ticket-select-user-field),
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field:has(.js-ticket-select-user-field),
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-form-field:has(.js-ticket-select-user-field),
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-form-field:has(.js-ticket-select-user-field){
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow:visible;
  }
  #jsst-site.jsst-site-root .js-ticket-select-user-btn,
  #jsst-site.jsst-site-root .js-ticket-select-user-btn a,
  #jsst-site.jsst-site-root a.js-ticket-select-user-btn,
  #jsst-site.jsst-site-root input.js-ticket-select-user-btn{
    width:100%;
    max-width:100%;
    min-height:56px;
    margin:0;
    border-radius:14px;
    float:none;
    box-sizing:border-box;
  }

  /* Department/signature forms: keep checkbox label and editor in a clean vertical flow. */
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-append-signature-wrp,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-append-signature-wrp,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tk_form_chkbox_main,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tk_form_chkbox_main{
    display:block;
    width:100%;
    max-width:100%;
    margin:8px 0 22px;
    padding:0;
    clear:both;
    float:none;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tk_form_chkbox,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tk_form_chkbox{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:64px;
    margin:0;
    padding:16px 18px;
    border:1px solid var(--jsst-site-border);
    border-radius:14px;
    background:#fff;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-signature-radio-box label,
  #jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-signature-radio-box label,
  #jsst-site.jsst-site-root .js-ticket-add-form-wrapper .tk_form_chkbox label,
  #jsst-site.jsst-site-root #js-tk-formwrapper .tk_form_chkbox label{
    margin:0;
    font-size:16px;
    line-height:1.35;
    color:var(--jsst-content-text);
  }

  /* Editors on phone: keep only the icon toolbar and make it horizontally scrollable when needed. */
  #jsst-site.jsst-site-root .tox .tox-menubar,
  #jsst-site.jsst-site-root .mce-menubar,
  #jsst-site.jsst-site-root .mce-menu,
  #jsst-site.jsst-site-root .mce-menubtn{
    display:none;
  }
  #jsst-site.jsst-site-root .tox .tox-toolbar-overlord,
  #jsst-site.jsst-site-root .tox .tox-toolbar,
  #jsst-site.jsst-site-root .tox .tox-toolbar__primary,
  #jsst-site.jsst-site-root .mce-toolbar-grp,
  #jsst-site.jsst-site-root .mce-toolbar,
  #jsst-site.jsst-site-root .mce-flow-layout{
    display:flex;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    white-space:nowrap;
    min-height:48px;
  }
  #jsst-site.jsst-site-root .tox .tox-toolbar__group,
  #jsst-site.jsst-site-root .mce-toolbar .mce-btn-group,
  #jsst-site.jsst-site-root .mce-flow-layout-item{
    flex:0 0 auto;
  }

  /* Department report mobile: keep pie chart and summary cards inside the card. */
  #jsst-site.jsst-site-root .js-ticket-pie-chart-wrapper,
  #jsst-site.jsst-site-root .js-col-md-12.js-ticket-pie-chart-wrapper{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px;
    overflow:hidden;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root #pie3d_chart1{
    display:block;
    width:100%;
    max-width:100%;
    height:260px;
    min-height:260px;
    overflow:hidden;
  }
  #jsst-site.jsst-site-root #pie3d_chart1 > div,
  #jsst-site.jsst-site-root #pie3d_chart1 svg{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
  }
  #jsst-site.jsst-site-root .js-departmentlist .js-festaffreport-data{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
    overflow:visible;
  }
  #jsst-site.jsst-site-root .js-departmentlist .js-festaffreport-data .js-admin-report-box{
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:94px;
    margin:0;
    padding:12px 8px;
  }
  #jsst-site.jsst-site-root .js-departmentlist .js-festaffreport-data .js-admin-report-box.box5{
    grid-column:1 / -1;
  }
  #jsst-site.jsst-site-root .js-departmentlist .departmentname{
    font-size:22px;
    line-height:1.25;
    margin:0 0 10px;
  }

  /* Staff report mobile: stack stats cleanly and avoid tiny clipped labels. */
  #jsst-site.jsst-site-root .js-admin-staff-wrapper:not(.js-departmentlist) .js-festaffreport-data{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:14px;
    overflow:visible;
  }
  #jsst-site.jsst-site-root .js-admin-staff-wrapper:not(.js-departmentlist) .js-festaffreport-data .js-admin-report-box{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:86px;
    margin:0;
  }
  #jsst-site.jsst-site-root .js-admin-report-box .js-report-box-title,
  #jsst-site.jsst-site-root .js-admin-box .js-admin-box-content-label{
    white-space:normal;
    text-overflow:clip;
    overflow:visible;
  }

  /* Compact empty states on phone, especially Feedback/FAQs/Downloads. */
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper,
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper.js-ticket-empty-state{
    min-height:250px;
    padding:38px 18px;
  }
  #jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-image,
  #jsst-site.jsst-site-root .js-ticket-message-image{
    width:82px;
    max-width:82px;
    margin-bottom:14px;
  }

  /* Role permission pages: keep section headers readable and prevent tiny overflow. */
  #jsst-site.jsst-site-root div.js-per-wrapper,
  #jsst-site.jsst-site-root #rolepermission,
  #jsst-site.jsst-site-root #rolepermissionedit{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading,
  #jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading{
    min-height:44px;
    border-radius:12px 12px 0 0;
    overflow:hidden;
  }
}

@media (min-width:761px){
  /* Desktop report cards should keep a single clean row without mobile clipping rules. */
  #jsst-site.jsst-site-root .js-admin-staff-wrapper .js-festaffreport-data,
  #jsst-site.jsst-site-root .js-departmentlist .js-festaffreport-data{
    overflow:visible;
  }
}

/* v247 frontend CSS cleanup
   Consolidated safe layer.
   Keep current stable design. Only handle text wrapping, auth empty states,
   and button/link contrast where old per-page CSS can still interfere. */
#jsst-site.jsst-site-root,
#jsst-site.jsst-site-root *{
  box-sizing:border-box;
  overflow-wrap:break-word;
}

#jsst-site.jsst-site-root .js-ticket-search-heading-main,
#jsst-site.jsst-site-root .js-ticket-heading-text,
#jsst-site.jsst-site-root .js-ticket-heading-title,
#jsst-site.jsst-site-root .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-table-data,
#jsst-site.jsst-site-root .js-ticket-action-button,
#jsst-site.jsst-site-root .js-ticket-detail-wrapper,
#jsst-site.jsst-site-root .js-ticket-data-row,
#jsst-site.jsst-site-root .js-ticket-dash-menu-text{
  min-width:0;
  max-width:100%;
}

#jsst-site.jsst-site-root .js-ticket-login-button,
#jsst-site.jsst-site-root a.js-ticket-login-button,
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper a,
#jsst-site.jsst-site-root .js-ticket-message-button{
  color:#fff;
  text-decoration:none;
}

#jsst-site.jsst-site-root .js-ticket-error-message-wrapper,
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper.js-ticket-empty-state{
  text-align:center;
}

#jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-text,
#jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-subtext{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.45;
}

#jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-text{
  color:var(--jsst-heading-color);
  font-weight:900;
}

#jsst-site.jsst-site-root .js-ticket-error-message-wrapper .js-ticket-message-subtext{
  color:var(--jsst-content-text);
  font-weight:500;
}


/* v248 frontend screenshot polish
   Fixes from Submit Ticket and Ticket Detail screenshots:
   - cleaner Select User modal close button
   - readable modal overlay
   - better popup field/table alignment
   - stable canned-response and attachment button wording area */
#jsst-site.jsst-site-root #userpopupblack{
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(2px);
}

#jsst-site.jsst-site-root #userpopup{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.42);
}

#jsst-site.jsst-site-root #userpopup .jsst-popup-header{
  min-height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--jsst-top-menu-bg);
}

#jsst-site.jsst-site-root #userpopup .popup-header-text{
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
}

#jsst-site.jsst-site-root #userpopup button.popup-header-close-img{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

#jsst-site.jsst-site-root #userpopup button.popup-header-close-img::before,
#jsst-site.jsst-site-root #userpopup button.popup-header-close-img::after{
  content:none;
  display:none;
}

#jsst-site.jsst-site-root #userpopup .jsst-popup-close-symbol{
  display:block;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:30px;
  font-weight:300;
  line-height:1;
  transform:translateY(-1px);
  pointer-events:none;
}

#jsst-site.jsst-site-root #userpopup button.popup-header-close-img:hover,
#jsst-site.jsst-site-root #userpopup button.popup-header-close-img:focus-visible{
  background:rgba(255,255,255,.26);
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

#jsst-site.jsst-site-root #userpopup .js-ticket-search-input-fields{
  text-transform:none;
}

#jsst-site.jsst-site-root .js-append-premade select,
#jsst-site.jsst-site-root .js-ticket-premade-field-wrp select{
  min-width:0;
  max-width:100%;
}

#jsst-site.jsst-site-root #js-attachment-add{
  white-space:nowrap;
}


/* v249 frontend popup overlay fix
   Keep the page dimmed, but never dim the Select User popup itself.
   The overlay must sit below #userpopup and must not inherit opacity from old CSS. */
#jsst-site.jsst-site-root #userpopupblack,
body #jsst-site.jsst-site-root #userpopupblack,
#jsst-site.jsst-site-root #userpopupblack{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:99998;
  opacity:1;
  background:rgba(15,23,42,.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#jsst-site.jsst-site-root div#userpopup,
body #jsst-site.jsst-site-root div#userpopup,
#jsst-site.jsst-site-root div#userpopup{
  position:fixed;
  z-index:100001;
  opacity:1;
  filter:none;
  background:#fff;
  color:var(--jsst-heading-color);
  isolation:isolate;
}

#jsst-site.jsst-site-root div#userpopup *,
body #jsst-site.jsst-site-root div#userpopup *{
  opacity:1;
  filter:none;
}

#jsst-site.jsst-site-root div#userpopup .jsst-popup-header,
body #jsst-site.jsst-site-root div#userpopup .jsst-popup-header{
  opacity:1;
  color:var(--jsst-header-action-text);
  background:var(--jsst-top-menu-bg);
}

#jsst-site.jsst-site-root div#userpopup .popup-header-text,
body #jsst-site.jsst-site-root div#userpopup .popup-header-text{
  color:#fff;
  opacity:1;
}

#jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp,
#jsst-site.jsst-site-root div#userpopup #records,
#jsst-site.jsst-site-root div#userpopup #records-inner{
  background:#fff;
  color:var(--jsst-heading-color);
  opacity:1;
}


/* v250 frontend small page polish
   Targeted fixes from final frontend screenshots. */

/* Empty state: remove duplicate harsh message feel and keep the helper line soft. */
#jsst-site.jsst-site-root .js-ticket-messages-main-text{
  display:block;
  color:var(--jsst-heading-color);
  font-weight:900;
  line-height:1.2;
}

#jsst-site.jsst-site-root .js-ticket-messages-block_text{
  display:block;
  margin-top:8px;
  color:var(--jsst-content-text);
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}

/* Search bars: make Show All / Show Less match the product UI instead of a plain browser button. */
#jsst-site.jsst-site-root .js-search-filter-btn,
#jsst-site.jsst-site-root a.js-search-filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  font-weight:900;
  text-decoration:none;
  box-shadow:none;
  white-space:nowrap;
}

#jsst-site.jsst-site-root .js-search-filter-btn:hover,
#jsst-site.jsst-site-root a.js-search-filter-btn:hover{
  background:var(--jsst-content-bg);
  border-color:var(--jsst-top-menu-bg);
  color:var(--jsst-top-menu-bg);
}
#jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-fields-wrp .js-ticket-form-field-select input{
    width: calc(100% - 56px) !important;
    max-width: calc(100% - 56px) !important;
}
#jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-fields-wrp .js-ticket-form-field-select button{
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
}
/* Mail and feedback search rows: keep advanced toggle/search/reset aligned in one clean control group. */
#jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  clear:none;
}

#jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}

/* Staff Members table: six columns were using a five-column grid, causing the Action header to drop. */
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-body > .js-ticket-data-row{
  display:grid;
  grid-template-columns:minmax(180px,1.5fr) minmax(120px,.9fr) minmax(90px,.55fr) minmax(135px,.85fr) minmax(150px,1fr) minmax(115px,.7fr);
  align-items:center;
}

#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-header-col,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-body-col{
  min-width:0;
  /* `start`, not `left`: identical in LTR, but this selector carries one more
     class than the `[dir="rtl"] #jsst-site .js-ticket-table-body-col` override
     in jsst-site-complete.css, so a physical `left` here silently won and left
     the whole Arabic staff listing aligned the wrong way. */
  text-align:start;
}

#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-body-col img{
  max-width:28px;
  max-height:28px;
}

#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-tk-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0 6px 0 0;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#fff;
}

/* Staff profile: soften the default avatar area. */
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-staff-image-wrp,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-profile-image-wrp,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-profile-pic{
  border-radius:18px;
  background:var(--jsst-content-bg);
  border:1px solid var(--jsst-border-color);
  box-shadow:0 16px 42px rgba(15,23,42,.06);
}

#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-staff-image-wrp img,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-profile-image-wrp img,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-profile-pic img{
  max-width:140px;
  max-height:140px;
  object-fit:contain;
}

/* Role permissions: convert the long permission list into clean readable rows. */
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper{
  width:100%;
  max-width:980px;
  margin:0 auto 32px;
  padding:24px;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 60px rgba(15,23,42,.08);
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-wrapper{
  margin:0 0 18px;
  padding:0;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 16px;
  background:var(--jsst-heading-color);
  color:#fff;
  border-radius:0;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading .head-text{
  color:#fff;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:10px 16px;
  border-bottom:1px solid var(--jsst-border-color);
  background:#fff;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data:last-child{
  border-bottom:0;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data label{
  margin:0;
  color:var(--jsst-heading-color);
  font-weight:800;
  line-height:1.35;
}

/* Category and simple table cards: keep action buttons vertically centered. */
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-table-body-col,
#jsst-site.jsst-site-root .js-ticket-department-wrapper .js-ticket-table-body-col,
#jsst-site.jsst-site-root .js-ticket-roles-wrapper .js-ticket-table-body-col{
  align-self:center;
}

/* Mobile guard for new table/permission fixes. */
@media (max-width:760px){
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-header{
    display:none;
  }

  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .js-ticket-table-body > .js-ticket-data-row{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }

  #jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-mail-wrapper .js-ticket-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  #jsst-site.jsst-site-root .js-search-filter-btn,
  #jsst-site.jsst-site-root a.js-search-filter-btn{
    width:100%;
  }

  #jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper{
    padding:14px;
    border-radius:16px;
  }
}


/* v251 frontend fine tuning
   Fixes from screenshots after v250:
   1) Feedback search filters should stay in one row on desktop.
   2) Profile labels need breathing room above fields.
   3) Permission section headings must not crop. */

/* Feedback filter: subject + ticket id + actions in one desktop row. */
#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(170px,220px) auto;
  gap:14px;
  align-items:center;
}

#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-fields-wrp > .js-ticket-form-field{
  margin:0;
  min-width:0;
}

#jsst-site.jsst-site-root .js-ticket-feedback-wrapper #js-filter-wrapper-toggle-area{
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-form-feedback-btn-wrp,
#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp{
  grid-column:3;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  width:auto;
  min-width:max-content;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-filter-btn{
  min-width:104px;
}

/* Profile page: labels were too close to the previous field. */
#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-add-form-wrapper,
#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-add-form-wrapper *{
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-from-field-wrp{
  display:block;
  width:100%;
  margin:0 0 18px;
  padding:0;
  clear:both;
}

#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-from-field-title{
  display:block;
  margin:0 0 9px;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  clear:both;
}

#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-from-field,
#jsst-site.jsst-site-root .js-ticket-profile-right .editable{
  display:block;
  width:100%;
  min-height:52px;
  margin:0;
  padding:0;
  position:relative;
}

#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-form-field-input{
  min-height:52px;
  line-height:1.45;
}

#jsst-site.jsst-site-root .js-ticket-profile-right .js-ticket-profile-form-img{
  top:50%;
  right:16px;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  opacity:.65;
}

/* Permission headings: stop clipping/cropping on Role/Staff permission pages. */
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-subheading,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  height:auto;
  padding:13px 16px;
  line-height:1.4;
  overflow:visible;
  white-space:normal;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-text,
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox label,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading .head-text{
  display:block;
  float:none;
  position:static;
  top:auto;
  bottom:auto;
  transform:none;
  margin:0;
  padding:0;
  max-height:none;
  min-height:0;
  height:auto;
  line-height:1.35;
  overflow:visible;
  white-space:normal;
  color:#fff;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-data,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-data{
  min-height:44px;
  display:flex;
  align-items:center;
}

@media (max-width:900px){
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-fields-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-form-feedback-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp{
    grid-column:1;
    grid-row:auto;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-form-feedback-btn-wrp > *,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp > *,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-filter-btn{
    width:100%;
    min-width:0;
  }
}

@media (max-width:560px){
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-search-form-feedback-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-feedback-wrapper .js-ticket-search-form-btn-wrp{
    grid-template-columns:1fr;
  }
}


/* v255 frontend precision fixes
   Root cause fixed: older form CSS uses floated field wrappers and floated child fields.
   Some wrappers did not reserve the real height of the input/editor, so the next label
   appeared too close to the previous field. This version contains floats correctly instead
   of adding large artificial gaps. */

/* ---------- Add/Edit forms: compact, correct label rhythm ---------- */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper form.js-ticket-form,
#jsst-site.jsst-site-root #js-tk-formwrapper form.js-ticket-form{
  display:block;
  width:100%;
  overflow:visible;
}

/* Make every field wrapper contain its floated children. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-wrp,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field-wrp{
  overflow:visible;
  box-sizing:border-box;
  margin-bottom:22px;
}

#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp::after,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-wrp::after,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field-wrp::after{
  content:"";
  display:block;
  clear:both;
}

/* Labels stay close to their own field, but not glued to the previous field. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field-title,
#jsst-site.jsst-site-root form.js-ticket-form .js-form-title{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  margin:0 0 9px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  line-height:1.45;
  overflow:visible;
  color:var(--jsst-heading-color);
  font-weight:900;
  position:relative;
  z-index:2;
}

#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-title label,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-title label,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field-title label,
#jsst-site.jsst-site-root form.js-ticket-form .js-form-title label{
  display:inline-block;
  margin:0;
  padding:0;
  line-height:1.45;
}

#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field,
#jsst-site.jsst-site-root form.js-ticket-form .js-form-value{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:visible;
  box-sizing:border-box;
}

/* Full-width/editor fields should not create a huge blank area, but need room for editor footer/buttons. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp-full-width,
#jsst-site.jsst-site-root form.js-ticket-form .js-ticket-from-field-wrp-full-width{
  margin-bottom:30px;
}

#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(.tox),
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(.tox-tinymce),
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field-wrp:has(.mce-tinymce),
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-wrp:has(.tox),
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-wrp:has(.tox-tinymce),
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field-wrp:has(.mce-tinymce){
  margin-bottom:36px;
}

/* Prevent toggle editor button from overlapping the next label/field. */
#jsst-site.jsst-site-root .js-ticket-add-form-wrapper .js-ticket-from-field .btn,
#jsst-site.jsst-site-root #js-tk-formwrapper .js-ticket-from-field .btn{
  position:relative;
  z-index:3;
}

/* ---------- Staff report date fields ---------- */
#jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-fields-wrp form.js-filter-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  width:100%;
}
#jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-fields-wrp form.js-filter-form .field-calendar .js-ticket-field-input{
    width: calc(100% - 46px) !important;
}

#jsst-site .js-ticket-staff-report-wrapper .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  width:100%;
  float:none;
  margin:0;
  padding:0;
  align-items:start;
}

#jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-form-btn-wrp{
  display:flex;
  align-items:center;
  gap:14px;
  width:auto;
  min-width:240px;
  float:none;
  margin:0;
  padding:0;
}

#jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-form-btn-wrp button{
  width:110px;
  min-width:110px;
  height:54px;
  min-height:54px;
  margin:0;
  border-radius:14px;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field{
  display:block;
  width:100%;
  height:54px;
  min-height:54px;
  max-height:54px;
  position:relative;
  float:none;
  margin:0;
  padding:0;
  overflow:visible;
  box-sizing:border-box;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .field-calendar,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-append{
  display:block;
  width:100%;
  height:54px;
  min-height:54px;
  position:relative;
  margin:0;
  padding:0;
  float:none;
  overflow:visible;
  box-sizing:border-box;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field input,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field input[type="text"],
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .js-ticket-field-input,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .inputbox{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0 66px 0 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  box-sizing:border-box;
  line-height:54px;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field button:not(.js-btn),
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn),
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-append,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text{
  position:absolute;
  top:0;
  right:0;
  left:auto;
  bottom:auto;width:54px;
  min-width:54px;
  max-width:54px;
  height:54px;
  min-height:54px;
  max-height:54px;
  margin:0;
  padding:0;
  border:1px solid var(--jsst-border-color);
  border-left:0;
  border-radius:0 14px 14px 0;
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  box-shadow:none;
  z-index:5;
  box-sizing:border-box;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-append button:not(.js-btn),
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text button:not(.js-btn){
  position:static;
  border:0;
  border-radius:0;
  background:transparent;
}

/* ---------- Knowledgebase Categories list full width ---------- */
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-wrp{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}

#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body > .js-ticket-data-row{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(110px,.7fr) minmax(150px,.9fr) minmax(130px,.8fr);
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  align-items:center;
  box-sizing:border-box;
}

#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col{
  display:block;
  width:auto;
  max-width:none;
  min-width:0;
  float:none;
  margin:0;
  padding:24px 22px;
  text-align:start;
  box-sizing:border-box;
}

#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col:first-child,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:first-child{
  padding-left:28px;
}

/* Permission headings: keep all section headings visible. */
#jsst-site div.js-per-wrapper div.js-per-subheading,
#jsst-site .js-ticket-rolepermissions-wrapper .js-per-subheading{
  min-height:54px;
  height:auto;
  padding:15px 16px;
  line-height:1.45;
  overflow:visible;
  box-sizing:border-box;
}

@media (max-width:900px){
  #jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-fields-wrp form.js-filter-form{
    grid-template-columns:1fr;
  }

  #jsst-site .js-ticket-staff-report-wrapper .js-ticket-fields-wrp{
    grid-template-columns:1fr;
  }

  #jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-form-btn-wrp{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    min-width:0;
  }

  #jsst-site .js-ticket-staff-report-wrapper .js-ticket-search-form-btn-wrp button{
    width:100%;
    min-width:0;
  }
}

@media (max-width:760px){
  #jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header{
    display:none;
  }

  #jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body > .js-ticket-data-row{
    grid-template-columns:1fr;
  }

  #jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col{
    padding:18px;
  }
}


/* v256 frontend minor alignment fixes
   Calendar trigger icons are centered inside date inputs.
   Action columns on compact frontend list tables align to the left like the column heading. */

/* Staff report calendar icon centering */
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field button:not(.js-btn),
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn),
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-append,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field button:not(.js-btn)::before,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn)::before,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field button:not(.js-btn)::after,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn)::after{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1;
  vertical-align:middle;
  position:static;
  transform:none;
}

#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field button > *,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .btn > *,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text > *,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field .icon-calendar,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="icon-calendar"],
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="fa-calendar"],
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field svg,
#jsst-site .js-ticket-staff-report-wrapper .jsst-report-date-field img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:0;
  line-height:1;
  vertical-align:middle;
  position:static;
  inset:auto;
  transform:none;
}

/* List table action columns: left aligned instead of visually floating in the middle. */
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col:last-child,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child{
  text-align:start;
}

#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
}

#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child a,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child button,
#jsst-site .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child .js-ticket-action-btn{
  margin-left:0;
  margin-right:8px;
}


/* v257 frontend final report/category alignment
   - Staff Report Details uses the same single-row calendar treatment as Staff Reports.
   - Joomla calendar icon is centered inside the appended button.
   - Category action header and row actions start from the left edge of the action column. */

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .js-ticket-form-field.jsst-report-date-field,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field{
  display:block;
  position:relative;
  width:100%;
  height:54px;
  min-height:54px;
  max-height:54px;
  margin:0;
  padding:0;
  overflow:visible;
  float:none;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .field-calendar,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .field-calendar > .input-group,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-append{
  display:block;
  position:relative;
  width:100%;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0;
  overflow:visible;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field input,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field input[type="text"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .js-ticket-field-input,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .inputbox{
  display:block;
  width:100%;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0 62px 0 18px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  line-height:54px;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-append,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button:not(.js-btn),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar:not(.js-btn){
  position:absolute;
  top:50%;
  right:0;
  left:auto;
  bottom:auto;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  min-width:54px;
  max-width:54px;
  height:54px;
  min-height:54px;
  max-height:54px;
  margin:0;
  padding:0;
  border:1px solid var(--jsst-border-color);
  border-left:0;
  border-radius:0 14px 14px 0;
  background:var(--jsst-content-bg);
  color:var(--jsst-content-text);
  line-height:1;
  text-align:center;
  box-shadow:none;
  box-sizing:border-box;
  z-index:8;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-append > button:not(.js-btn),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .input-group-text > button:not(.js-btn){
  position:static;
  top:auto;
  right:auto;
  transform:none;
  width:54px;
  height:54px;
  border:0;
  border-radius:0;
  background:transparent;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button > *,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn > *,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .icon-calendar,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="icon-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="fa-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field svg,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field img{
  display:block;
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  margin:auto;
  padding:0;
  line-height:18px;
  position:static;
  inset:auto;
  transform:none;
  vertical-align:middle;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col:last-child,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col:nth-child(4),
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4){
  text-align:start;
  justify-self:stretch;
  justify-content:flex-start;
  padding-left:18px;
  padding-right:18px;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:last-child > *,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4) > *{
  margin-left:0;
  margin-right:8px;
}

/* v258 frontend final micro alignment
   - Hide Joomla calendar accessibility text that was leaking beside the icon.
   - Keep the calendar trigger icon perfectly centered.
   - Start category row actions from the left side of the action column. */
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar:not(.js-btn),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield]:not(.js-btn),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn){
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:0;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar:not(.js-btn)::before,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield]:not(.js-btn)::before,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn:not(.js-btn)::before,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .icon-calendar::before,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="icon-calendar"]::before,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field [class*="fa-calendar"]::before{
  display:block;
  width:18px;
  height:18px;
  margin:0 auto;
  color:var(--jsst-content-text);
  font-size:18px;
  line-height:18px;
  text-align:center;
  text-indent:0;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar .icon-calendar,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] .icon-calendar,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn .icon-calendar,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar [class*="icon-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] [class*="icon-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn [class*="icon-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar [class*="fa-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] [class*="fa-calendar"],
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn [class*="fa-calendar"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin:0 auto;
  color:var(--jsst-content-text);
  font-size:18px;
  line-height:18px;
  text-indent:0;
}

#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar .visually-hidden,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar .sr-only,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] .visually-hidden,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] .sr-only,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn .visually-hidden,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field .btn .sr-only,
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button.calendar > span:not([class*="icon"]):not([class*="fa-"]),
#jsst-site.jsst-site-root .js-ticket-staff-report-wrapper .jsst-report-date-field button[data-inputfield] > span:not([class*="icon"]):not([class*="fa-"]){
  display:none;
  width:0;
  height:0;
  max-width:0;
  max-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  font-size:0;
  line-height:0;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body > .js-ticket-data-row{
  grid-template-columns:minmax(0,1.9fr) minmax(95px,.55fr) minmax(145px,.75fr) minmax(210px,1.15fr);
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-header-col:nth-child(4),
#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4){
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-left:0;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4) .js-ticket-display-block{
  display:none;
}

#jsst-site.jsst-site-root .js-ticket-knowledgebase-categories-wrapper .js-ticket-table-body-col:nth-child(4) a.js-tk-button{
  margin:0 4px;
}

/* v259 frontend attachment upload polish
   Keep the real file input for Joomla/browser compatibility, but hide the native Browse control.
   The visible drop area handles click, drag/drop, selected-file names, and max attachment feedback. */
#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled .js-attachment-file-box,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled .js-attachment-file-box,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled .js-value-text{
  position:relative;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#fff;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled .js-attachment-file-box:not(.is-file-attached),
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled .js-attachment-file-box:not(.is-file-attached),
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled .js-value-text:not(.is-file-attached){
  display:none;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .js-attachment-files.jsst-dragdrop-enabled input[type="file"].js-form-input-field-attachment,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled input[type="file"].js-form-input-field-attachment,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled input[type="file"].js-attachment-inputbox{
  position:absolute;
  width:1px;
  height:1px;
  min-width:1px;
  min-height:1px;
  padding:0;
  margin:0;
  border:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-attachment-file-name,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .jsst-attachment-file-name{
  display:block;
  flex:1 1 auto;
  min-width:0;
  padding:0 36px 0 0;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-attachment-counter,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .jsst-attachment-counter{
  display:block;
  margin:0 0 4px;
  color:var(--jsst-heading-color);
  font-size:12px;
  font-weight:900;
  line-height:1.4;
}

#jsst-site.jsst-site-root #js-tk-formwrapper .jsst-dropzone-copy small,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .jsst-dropzone-copy small{
  text-transform:none;
}

#jsst-site.jsst-site-root #js-tk-formwrapper #js-attachment-add,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-attachment-add{
  margin-top:10px;
}

/* v61: dropzone is the file picker; hide legacy add-file button */
#jsst-site.jsst-site-root #js-tk-formwrapper #js-attachment-add,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-attachment-add{
  display:none;
}

/* JS Support Ticket - Frontend dashboard rewrite v261.
   Scoped to the control panel markup only. Keeps existing page CSS untouched. */
#jsst-site.jsst-site-root .jsst-cp-modern{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 0 28px;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-cp-modern *{box-sizing:border-box;}
#jsst-site.jsst-site-root .jsst-cp-breadcrumb-card{
  display:none;
}
#jsst-site.jsst-site-root .jsst-cp-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  min-height:150px;
  margin:0 0 20px;
  padding:28px 32px;
  border:1px solid rgba(79,102,246,.16);
  border-radius:24px;
  background:radial-gradient(circle at top right,rgba(6,169,214,.16),transparent 32%),
    linear-gradient(135deg,#ffffff 0%,var(--jsst-content-bg) 55%,var(--jsst-content-bg) 100%);
  box-shadow:0 24px 60px rgba(15,23,42,.08);
  overflow:hidden;
}
#jsst-site.jsst-site-root .jsst-cp-hero:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg,var(--jsst-site-brand),var(--jsst-site-cyan));
}
#jsst-site.jsst-site-root .jsst-cp-hero-content,
#jsst-site.jsst-site-root .jsst-cp-hero-actions{
  position:relative;
  z-index:1;
}
#jsst-site.jsst-site-root .jsst-cp-eyebrow,
#jsst-site.jsst-site-root .jsst-cp-mini-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin:0 0 10px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}
#jsst-site.jsst-site-root .jsst-cp-hero h1{
  margin:0 0 10px;
  padding:0;
  color:var(--jsst-site-text);
  font-size:34px;
  font-weight:950;
  line-height:1.06;
}
#jsst-site.jsst-site-root .jsst-cp-hero p{
  max-width:720px;
  margin:0;
  color:var(--jsst-site-muted);
  font-size:16px;
  font-weight:600;
  line-height:1.7;
}
#jsst-site.jsst-site-root .jsst-cp-hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:0 0 auto;
}
#jsst-site.jsst-site-root .jsst-cp-primary-btn,
#jsst-site.jsst-site-root .jsst-cp-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .jsst-cp-primary-btn{
  background:var(--jsst-site-blue);
  color:#fff;
  box-shadow:0 18px 36px rgba(37,99,235,.24);
}
#jsst-site.jsst-site-root .jsst-cp-secondary-btn{
  background:#fff;
  color:var(--jsst-site-text);
  border:1px solid var(--jsst-site-border);
}
#jsst-site.jsst-site-root .jsst-cp-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:0 0 20px;
}
#jsst-site.jsst-site-root .jsst-cp-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:132px;
  padding:18px;
  border:1px solid var(--jsst-site-border);
  border-radius:22px;
  background:#fff;
  color:var(--jsst-site-text);
  text-decoration:none;
  box-shadow:0 16px 44px rgba(15,23,42,.06);
  overflow:hidden;
}
#jsst-site.jsst-site-root .jsst-cp-stat:hover{
  transform:translateY(-2px);
  border-color:rgba(79,102,246,.34);
  box-shadow:0 20px 52px rgba(15,23,42,.09);
}
#jsst-site.jsst-site-root .jsst-cp-stat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:14px;
  background:var(--jsst-border-color);
  color:var(--jsst-site-blue);
  font-size:14px;
  font-weight:950;
}
#jsst-site.jsst-site-root .jsst-cp-stat-label{
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#jsst-site.jsst-site-root .jsst-cp-stat strong{
  display:block;
  margin:auto 0 4px;
  color:var(--jsst-site-text);
  font-size:30px;
  font-weight:950;
  line-height:1;
}
#jsst-site.jsst-site-root .jsst-cp-stat-bar{
  display:block;
  width:100%;
  height:8px;
  border-radius:999px;
  background:var(--jsst-border-color);
  overflow:hidden;
}
#jsst-site.jsst-site-root .jsst-cp-stat-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--jsst-site-blue);
}
#jsst-site.jsst-site-root .jsst-cp-stat-open .jsst-cp-stat-icon,
#jsst-site.jsst-site-root .jsst-cp-stat-open .jsst-cp-stat-bar span{background:#12b76a;color:#fff;}
#jsst-site.jsst-site-root .jsst-cp-stat-closed .jsst-cp-stat-icon,
#jsst-site.jsst-site-root .jsst-cp-stat-closed .jsst-cp-stat-bar span{background:#ef4444;color:#fff;}
#jsst-site.jsst-site-root .jsst-cp-stat-answered .jsst-cp-stat-icon,
#jsst-site.jsst-site-root .jsst-cp-stat-answered .jsst-cp-stat-bar span{background:#8b5cf6;color:#fff;}
#jsst-site.jsst-site-root .jsst-cp-stat-all .jsst-cp-stat-icon,
#jsst-site.jsst-site-root .jsst-cp-stat-all .jsst-cp-stat-bar span{background:#06a9d6;color:#fff;}
#jsst-site.jsst-site-root .jsst-cp-section,
#jsst-site.jsst-site-root .jsst-cp-panel{
  width:100%;
  margin:0 0 20px;
  border:1px solid var(--jsst-site-border);
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,23,42,.06);
  overflow:hidden;
}
#jsst-site.jsst-site-root .jsst-cp-section-head,
#jsst-site.jsst-site-root .jsst-cp-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--jsst-site-border);
  background:linear-gradient(180deg,#fff,var(--jsst-content-bg));
}
#jsst-site.jsst-site-root .jsst-cp-section-head h2,
#jsst-site.jsst-site-root .jsst-cp-panel-head h3{
  margin:0;
  color:var(--jsst-site-text);
  font-weight:950;
  line-height:1.18;
}
#jsst-site.jsst-site-root .jsst-cp-section-head h2{font-size:22px;}
#jsst-site.jsst-site-root .jsst-cp-panel-head h3{font-size:18px;}
#jsst-site.jsst-site-root .jsst-cp-panel-head a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .jsst-cp-action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  padding:20px;
}
#jsst-site.jsst-site-root .jsst-cp-action-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:88px;
  padding:16px;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:var(--jsst-content-bg);
  color:var(--jsst-site-text);
  text-decoration:none;
  box-shadow:none;
}
#jsst-site.jsst-site-root .jsst-cp-action-card:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:rgba(79,102,246,.45);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}
#jsst-site.jsst-site-root .jsst-cp-action-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:18px;
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-site-root .jsst-cp-action-icon img{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
}
#jsst-site.jsst-site-root .jsst-cp-action-icon img[src$="logout.png"],
#jsst-site.jsst-site-root .jsst-cp-action-icon img[src$="login.png"],
#jsst-site.jsst-site-root .jsst-cp-action-icon img[src$="user-data.png"]{
  filter:saturate(1.1) contrast(1.15);
}
#jsst-site.jsst-site-root .jsst-cp-action-copy{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
#jsst-site.jsst-site-root .jsst-cp-action-copy strong{
  color:var(--jsst-site-text);
  font-size:15px;
  font-weight:950;
  line-height:1.2;
}
#jsst-site.jsst-site-root .jsst-cp-action-copy small{
  color:var(--jsst-site-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}
#jsst-site.jsst-site-root .jsst-cp-chart-wrap{
  min-height:310px;
  padding:22px;
  background:#fff;
}
#jsst-site.jsst-site-root #jsst-cp-ticket-chart{
  width:100%;
  min-height:300px;
}
#jsst-site.jsst-site-root .jsst-cp-latest-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
  gap:18px;
  padding:20px;
}
#jsst-site.jsst-site-root .jsst-cp-latest-grid.jsst-cp-latest-grid-full{
  grid-template-columns:1fr;
}
/*
 * Collapse to a single full-width column when the CONTAINER is narrow, not
 * just when the window is. The control panel is rendered into whatever column
 * the site template gives it, and that can be a small fraction of the page -
 * with sidebar modules published, the component gets roughly 610px of a
 * 1500px window. A viewport media query cannot see that, so the two-column
 * split survived at container widths where the side panels held their 320px
 * minimum and squeezed Latest Tickets down to ~230px.
 *
 * 900px is the width below which the split stops paying for itself: the side
 * column floor (320px) plus the gap and padding (58px) leaves under 520px for
 * a ticket row that has to fit an avatar, subject, department, status,
 * priority and date.
 */
#jsst-site.jsst-site-root .jsst-cp-latest-section{
  container-type:inline-size;
}
@container (max-width:900px){
  #jsst-site.jsst-site-root .jsst-cp-latest-grid{
    grid-template-columns:1fr;
  }
}
#jsst-site.jsst-site-root .jsst-cp-latest-grid .jsst-cp-panel{margin:0;}
#jsst-site.jsst-site-root .jsst-cp-side-panels{
  display:flex;
  flex-direction:column;
  gap:18px;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  min-height:92px;
  padding:14px;
  border:1px solid var(--jsst-site-border);
  border-radius:18px;
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-avatar{
  display:flex;
  width:54px;
  height:54px;
  border-radius:18px;
  background:var(--jsst-content-bg);
  overflow:hidden;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-title{
  color:var(--jsst-site-brand);
  font-size:15px;
  font-weight:950;
  line-height:1.25;
  text-decoration:none;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-body span,
#jsst-site.jsst-site-root .jsst-cp-ticket-meta small{
  color:var(--jsst-site-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
#jsst-site.jsst-site-root .jsst-cp-ticket-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
#jsst-site.jsst-site-root .jsst-cp-status,
#jsst-site.jsst-site-root .jsst-cp-priority{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .jsst-cp-status-new{background:#dcfce7;color:#166534;}
#jsst-site.jsst-site-root .jsst-cp-status-waiting{background:#fff7ed;color:#9a3412;}
#jsst-site.jsst-site-root .jsst-cp-status-progress{background:var(--jsst-secondary-bg);color:var(--jsst-top-menu-bg);}
#jsst-site.jsst-site-root .jsst-cp-status-replied{background:var(--jsst-content-bg);color:var(--jsst-content-text);}
#jsst-site.jsst-site-root .jsst-cp-status-closed{background:#fee2e2;color:#991b1b;}
#jsst-site.jsst-site-root .jsst-cp-priority{
  background:var(--jsst-priority-color,var(--jsst-top-menu-bg));
  color:var(--jsst-header-action-text);
}
#jsst-site.jsst-site-root .jsst-cp-link-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
}
#jsst-site.jsst-site-root .jsst-cp-link-list a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:12px 14px;
  border:1px solid var(--jsst-site-border);
  border-radius:14px;
  background:var(--jsst-content-bg);
  color:var(--jsst-site-text);
  font-size:13px;
  font-weight:850;
  line-height:1.35;
  text-decoration:none;
}
#jsst-site.jsst-site-root .jsst-cp-link-list a:hover{
  background:#fff;
  border-color:rgba(79,102,246,.45);
  color:var(--jsst-site-brand);
}
#jsst-site.jsst-site-root .jsst-cp-help-panel p{
  margin:0;
  padding:18px;
  color:var(--jsst-site-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.7;
}
#jsst-site.jsst-site-root .jsst-cp-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:170px;
  padding:30px;
  text-align:center;
}
#jsst-site.jsst-site-root .jsst-cp-empty span{
  display:block;
  width:54px;
  height:54px;
  margin:0 0 14px;
  border:1px solid var(--jsst-top-menu-bg);
  border-radius:18px;
  background:var(--jsst-secondary-bg);
  position: relative;
}
#jsst-site.jsst-site-root .jsst-cp-empty span img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
#jsst-site.jsst-site-root .jsst-cp-empty strong{
  display:block;
  color:var(--jsst-site-text);
  font-size:18px;
  font-weight:950;
}
#jsst-site.jsst-site-root .jsst-cp-empty p{
  margin:6px 0 0;
  color:var(--jsst-site-muted);
  font-size:13px;
  font-weight:700;
}
@media (max-width:980px){
  #jsst-site.jsst-site-root .jsst-cp-hero{
    flex-direction:column;
    align-items:flex-start;
    min-height:0;
  }
  #jsst-site.jsst-site-root .jsst-cp-hero-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  #jsst-site.jsst-site-root .jsst-cp-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-cp-latest-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:680px){
  #jsst-site.jsst-site-root .jsst-cp-modern{padding-bottom:18px;}
  #jsst-site.jsst-site-root .jsst-cp-hero{padding:24px 18px;border-radius:22px;}
  #jsst-site.jsst-site-root .jsst-cp-hero h1{font-size:30px;}
  #jsst-site.jsst-site-root .jsst-cp-hero p{font-size:14px;}
  #jsst-site.jsst-site-root .jsst-cp-primary-btn,
  #jsst-site.jsst-site-root .jsst-cp-secondary-btn{width:100%;}
  #jsst-site.jsst-site-root .jsst-cp-stats{grid-template-columns:1fr;}
  #jsst-site.jsst-site-root .jsst-cp-action-grid{grid-template-columns:1fr;padding:16px;}
  #jsst-site.jsst-site-root .jsst-cp-latest-grid{padding:16px;}
  #jsst-site.jsst-site-root .jsst-cp-ticket-item{grid-template-columns:44px minmax(0,1fr);}
  #jsst-site.jsst-site-root .jsst-cp-ticket-meta{grid-column:1 / -1;align-items:flex-start;flex-direction:row;flex-wrap:wrap;}
}

/* =========================================================
   JS Support Ticket - Frontend User Pages Finish v262
   Scope: customer/user frontend tickets, FAQ, downloads,
   knowledge base and announcement pages only.
   CSS-only: no controller, ACL, database or workflow changes.
   ========================================================= */

#jsst-site.jsst-site-root{
  --jsst-user-panel:#ffffff;
  --jsst-user-page:var(--jsst-content-bg);
  --jsst-user-border:var(--jsst-border-color);
  --jsst-user-border-soft:var(--jsst-border-color);
  --jsst-user-text:var(--jsst-heading-color);
  --jsst-user-muted:var(--jsst-content-text);
  --jsst-user-blue:var(--jsst-top-menu-bg);
  --jsst-user-indigo:var(--jsst-top-menu-bg);
  --jsst-user-cyan:#06a9d6;
  --jsst-user-green:#16a34a;
  --jsst-user-red:#ef4444;
  --jsst-user-navy:var(--jsst-heading-color);
  --jsst-user-radius:18px;
  --jsst-user-shadow:0 20px 52px rgba(15,23,42,.07);
  --jsst-user-shadow-soft:0 10px 28px rgba(15,23,42,.045);
}

/* Public user page spacing. */
#jsst-site.jsst-site-root .js-ticket-download-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper,
#jsst-site.jsst-site-root .jsst-ticket-detail-page,
#jsst-site.jsst-site-root .js-ticket-search-wrp,
#jsst-site.jsst-site-root .js-ticket-sorting,
#jsst-site.jsst-site-root .js-ticket-wrapper{
  float:none;
  clear:both;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* My Tickets: status cards should feel like the dashboard cards, not an old floating grid. */
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  width:100%;
  max-width:100%;
  margin:0 0 22px;
  padding:0;
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > .js-myticket-link,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > .js-ticket-link,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count > div[class*="js-col-"]{
  display:block;
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-ticket-link,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-myticket-link{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:14px;
  width:100%;
  min-height:118px;
  margin:0;
  padding:18px;
  border:1px solid var(--jsst-user-border);
  border-radius:18px;
  background:#fff;
  color:var(--jsst-user-text);
  box-shadow:var(--jsst-user-shadow-soft);
  text-decoration:none;
  overflow:hidden;
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-ticket-link::after,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-myticket-link::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  height:6px;
  border-radius:999px;
  background:var(--jsst-border-color);
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-ticket-open a::after{background:linear-gradient(90deg,var(--jsst-user-green),var(--jsst-user-green));opacity:.95;}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-ticket-close a::after{background:linear-gradient(90deg,var(--jsst-user-red),var(--jsst-user-red));opacity:.95;}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-ticket-answer a::after{background:linear-gradient(90deg,#8b5cf6,#8b5cf6);opacity:.95;}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count .js-ticket-allticket a::after{background:linear-gradient(90deg,var(--jsst-user-cyan),var(--jsst-user-cyan));opacity:.95;}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.active,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a:hover{
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 22px 48px rgba(37,99,235,.12);
  transform:translateY(-1px);
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .js-ticket-cricle-wrp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  min-width:64px;
  margin:0;
  padding:0;
  float:none;
  border-radius:18px;
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .circlebar,
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .circlebar canvas{
  width:58px;
  height:58px;
  max-width:58px;
  max-height:58px;
}
#jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .js-ticket-link-text{
  display:block;
  width:auto;
  margin:0;
  padding:0 0 12px;
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
  text-transform:none;
  white-space:normal;
}

/* My Tickets: filter and sorting cards. */
#jsst-site.jsst-site-root .js-ticket-search-wrp{
  margin:0 0 22px;
  padding:22px;
  border:1px solid var(--jsst-user-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
  overflow:hidden;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-heading-wrp{
  display:none;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-form-wrp,
#jsst-site.jsst-site-root .js-ticket-search-wrp form#jssupportticketform,
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-wrapper,
#jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  float:none;
  clear:both;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-wrapper,
#jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:end;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
  grid-column:1 / -1;
  margin-top:16px;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-field-wrp,
#jsst-site.jsst-site-root .js-ticket-search-wrp div[class*="js-col-md-"]{
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp input[type="text"],
#jsst-site.jsst-site-root .js-ticket-search-wrp input[type="email"],
#jsst-site.jsst-site-root .js-ticket-search-wrp select,
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-input-field{
  width:100%;
  min-height:54px;
  margin:0;
  padding:0 16px;
  border:1px solid var(--jsst-user-border);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-user-text);
  font-size:15px;
  box-shadow:none;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-button-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-btn,
#jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-btn a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  color:var(--jsst-user-blue);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-filter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:96px;
  min-height:48px;
  margin:0;
  padding:0 20px;
  border:0;
  border-radius:13px;
  font-size:14px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-search-btn{background:var(--jsst-user-indigo);color:#fff;box-shadow:0 14px 30px rgba(79,102,246,.2);}
#jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-reset-btn{background:var(--jsst-user-navy);color:#fff;box-shadow:none;}
#jsst-site.jsst-site-root .js-ticket-sorting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid var(--jsst-user-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
}
#jsst-site.jsst-site-root .js-ticket-sorting-heading{
  color:var(--jsst-user-text);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}
#jsst-site.jsst-site-root .js-ticket-sort{
  display:flex;
  align-items:center;
  gap:10px;
}
#jsst-site.jsst-site-root .js-ticket-sorting-select{
  width:170px;
  min-height:48px;
  border:1px solid var(--jsst-user-border);
  border-radius:13px;
  background:#fff;
}
#jsst-site.jsst-site-root a#jssortbtn,
#jsst-site.jsst-site-root .js-admin-sort-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  background:var(--jsst-user-indigo);
  box-shadow:0 12px 26px rgba(79,102,246,.18);
}
#jsst-site.jsst-site-root a#jssortbtn img,
#jsst-site.jsst-site-root .js-admin-sort-btn img{max-width:18px;max-height:18px;filter:brightness(0) invert(1);}

/* My Tickets: readable ticket cards. */
#jsst-site.jsst-site-root .js-ticket-wrapper{
  margin:0 0 18px;
  padding:0;
  border:1px solid var(--jsst-user-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
  overflow:hidden;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) minmax(260px,340px);
  align-items:center;
  gap:18px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:10px;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-pic,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-pic img,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-icon-img,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-staff-img{
  float:none;
  width:58px;
  height:58px;
  max-width:58px;
  max-height:58px;
  border-radius:999px;
  object-fit:cover;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-pic{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff7ed;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-value{
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:800;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .subject,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-title-anchor{
  color:var(--jsst-user-blue);
  font-size:18px;
  font-weight:900;
  line-height:1.25;
  text-decoration:none;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-field-title{
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:start;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-status,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-wrapper-textcolor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  min-width:92px;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:normal;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-wrapper-textcolor{color:#fff;}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data2{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  width:100%;
  margin:8px 0 0;
  padding:0;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-tit,
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-val{
  width:auto;
  margin:0;
  padding:0;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:800;
}
#jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data-val{color:var(--jsst-content-text);font-weight:700;text-align:end;overflow-wrap:anywhere;}

/* Public FAQ / Downloads / Knowledge Base / Announcements list cards. */
#jsst-site.jsst-site-root .js-ticket-download-wrapper,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper{
  display:block;
  margin:0 auto;
  padding:0;
}
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-top-search-wrp{
  margin:0 0 24px;
  padding:20px;
  border:1px solid var(--jsst-user-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
}
#jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-fields-wrp,
#jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(210px,1fr) auto;
  gap:14px;
  align-items:center;
}
#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-knowledgebase-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-announcement-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-faqsdetail-top-search-wrp{
  width:100%;
  max-width:100%;
  margin:0 0 24px;
  padding:0;
  border:1px solid var(--jsst-user-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
  overflow:hidden;
  float:none;
  clear:both;
}
#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-knowledgebase-categories-heading-wrp,
#jsst-site.jsst-site-root .js-ticket-heading-wrp{
  display:flex;
  align-items:center;
  width:100%;
  min-height:72px;
  margin:0;
  padding:20px 28px;
  border:0;
  border-bottom:1px solid var(--jsst-user-border-soft);
  border-radius:0;
  background:linear-gradient(180deg,var(--jsst-content-bg),var(--jsst-content-bg));
  color:var(--jsst-user-text);
  font-size:26px;
  font-weight:900;
  line-height:1.2;
}
#jsst-site.jsst-site-root .js-ticket-heading-left{
  color:var(--jsst-user-text);
  font-size:26px;
  font-weight:900;
  line-height:1.2;
}
#jsst-site.jsst-site-root .js-ticket-categories-content,
#jsst-site.jsst-site-root .js-ticket-downloads-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(363px,1fr));
  gap:16px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:22px;
  background:#fff;
}
#jsst-site.jsst-site-root .js-ticket-category-box,
#jsst-site.jsst-site-root .js-ticket-download-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  min-height:86px;
  width:100%;
  max-width:100%;
  margin:0;
  padding:18px;
  border:1px solid var(--jsst-user-border);
  border-radius:17px;
  background:var(--jsst-content-bg);
  box-shadow:none;
  float:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#jsst-site.jsst-site-root .js-ticket-category-box:hover,
#jsst-site.jsst-site-root .js-ticket-download-box:hover{
  transform:translateY(-1px);
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 18px 38px rgba(37,99,235,.08);
}
#jsst-site.jsst-site-root .js-ticket-category-title,
#jsst-site.jsst-site-root .js-ticket-download-title{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  width:auto;
  max-width:100%;
  color:var(--jsst-user-text);
  text-decoration:none;
  cursor:pointer;
}
#jsst-site.jsst-site-root .js-ticket-category-download-logo,
#jsst-site.jsst-site-root .js-ticket-category-kb-logo,
#jsst-site.jsst-site-root .js-ticket-download-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  min-width:56px;
  margin:0;
  padding:12px;
  border-radius:16px;
  background:var(--jsst-content-bg);
  border:1px solid var(--jsst-border-color);
  box-shadow:none;
  object-fit:contain;
}
#jsst-site.jsst-site-root .js-ticket-download-icon,
#jsst-site.jsst-site-root .js-ticket-download-img,
#jsst-site.jsst-site-root .js-ticket-kb-dtl-img{
  width:54px;
  height:54px;
  max-width:54px;
  max-height:54px;
  object-fit:contain;
}
#jsst-site.jsst-site-root .js-ticket-category-download-logo img,
#jsst-site.jsst-site-root .js-ticket-category-kb-logo img{
  width:32px;
  height:32px;
  max-width:32px;
  max-height:32px;
  object-fit:contain;
}
#jsst-site.jsst-site-root .js-ticket-category-name,
#jsst-site.jsst-site-root .js-ticket-download-name{
  min-width:0;
  color:var(--jsst-user-text);
  font-size:16px;
  font-weight:900;
  line-height:1.3;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root .js-ticket-download-right{
  flex:0 0 auto;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .js-ticket-download-btn-style,
#jsst-site.jsst-site-root .js-ticket-download-btn button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:13px;
  background:var(--jsst-user-indigo);
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 14px 28px rgba(79,102,246,.18);
}

/* Article / announcement details should look like a finished reading surface. */
#jsst-site.jsst-site-root .js-ticket-knowledgebase-top-search-wrp,
#jsst-site.jsst-site-root .js-ticket-announcement-top-search-wrp{
  background:#fff;
}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-details{
  width:100%;
  max-width:100%;
  margin:0;
  padding:26px 28px 32px;
  color:var(--jsst-content-text);
  font-size:17px;
  line-height:1.78;
  background:#fff;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-details:empty::before{
  content:"No details available.";
  color:var(--jsst-content-text);
  font-weight:700;
}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-details p:first-child{margin-top:0;}
#jsst-site.jsst-site-root .js-ticket-knowledgebase-details p:last-child{margin-bottom:0;}
#jsst-site.jsst-site-root .js-ticket-categories-wrp.js-ticket-margin-bottom{
  margin-bottom:18px;
}

/* Empty state inside list cards: center it and keep it compact. */
#jsst-site.jsst-site-root .js-ticket-downloads-wrp .js-ticket-error,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp .js-ticket-empty,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp .js-ticket-message,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp .js-record-not-found,
#jsst-site.jsst-site-root .js-ticket-downloads-wrp [class*="record-not"],
#jsst-site.jsst-site-root .js-ticket-downloads-wrp [class*="RecordNot"],
#jsst-site.jsst-site-root .js-ticket-categories-wrp .js-ticket-error,
#jsst-site.jsst-site-root .js-ticket-categories-wrp .js-record-not-found{
  grid-column:1 / -1;
  width:100%;
  min-height:170px;
  margin:0;
  border:1px dashed var(--jsst-border-color);
  border-radius:18px;
  background:var(--jsst-content-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Ticket detail final user polish: make the reply area and side cards balanced. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-wrapper .js-ticket-detail-box{
  border-radius:20px;
  border-color:var(--jsst-user-border);
  box-shadow:var(--jsst-user-shadow);
}
#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,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-tabs-wrapper,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-detail-right .js-tkt-det-info-wrp{
  border-color:var(--jsst-user-border);
  box-shadow:var(--jsst-user-shadow-soft);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-field-wrp,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-post-reply-wrp{
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files{
  border-radius:16px;
}

/* Download popup: match the finished frontend cards. */
#jsst-site.jsst-site-root #js-ticket-main-popup{
  border-radius:22px;
  border:1px solid var(--jsst-user-border);
  box-shadow:0 30px 90px rgba(15,23,42,.22);
  overflow:hidden;
}
#jsst-site.jsst-site-root #js-ticket-popup-title{
  display:block;
  padding:18px 22px;
  background:var(--jsst-user-navy);
  color:#fff;
  font-weight:900;
}
#jsst-site.jsst-site-root #js-ticket-main-content{
  padding:20px 22px;
}

@media (max-width:980px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-wrapper,
  #jsst-site.jsst-site-root .js-ticket-search-wrp #js-filter-wrapper-toggle-area,
  #jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-fields-wrp,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-button-wrp{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}
@media (max-width:640px){
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count,
  #jsst-site.jsst-site-root .js-ticket-categories-content,
  #jsst-site.jsst-site-root .js-ticket-downloads-content,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-data1{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-ticket-link,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp.js-ticket-count a.js-myticket-link{
    grid-template-columns:58px minmax(0,1fr);
    min-height:96px;
    padding:14px;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .js-ticket-cricle-wrp{
    width:52px;
    height:52px;
    min-width:52px;
  }
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .circlebar,
  #jsst-site.jsst-site-root .js-ticket-top-cirlce-count-wrp .circlebar canvas{
    width:48px;
    height:48px;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp,
  #jsst-site.jsst-site-root .js-ticket-download-wrapper .js-ticket-top-search-wrp,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-wrapper .js-ticket-top-search-wrp,
  #jsst-site.jsst-site-root .js-ticket-announcement-wrapper .js-ticket-top-search-wrp,
  #jsst-site.jsst-site-root .js-ticket-wrapper .js-ticket-toparea,
  #jsst-site.jsst-site-root .js-ticket-categories-content,
  #jsst-site.jsst-site-root .js-ticket-downloads-content,
  #jsst-site.jsst-site-root .js-ticket-knowledgebase-details{
    padding:16px;
  }
  #jsst-site.jsst-site-root .js-ticket-sorting{
    align-items:flex-start;
    flex-direction:column;
  }
  #jsst-site.jsst-site-root .js-ticket-sort,
  #jsst-site.jsst-site-root .js-ticket-sorting-select{
    width:100%;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-filter-button-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp,
  #jsst-site.jsst-site-root .js-ticket-search-form-btn-wrp-download{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  #jsst-site.jsst-site-root .js-ticket-search-wrp .js-ticket-filter-button,
  #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-download-btn-style{
    width:100%;
    min-width:0;
  }
}


/* =========================================================
   JS Support Ticket - Frontend User My Tickets Hotfix v263
   Scope: customer My Tickets only. Keeps FAQ/KB/Downloads pages stable and
   prevents older responsive/grid rules from breaking the stats and filters.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  width:100%;
  max-width:100%;
  margin:0 0 22px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  float:none;
  clear:both;
  align-items:stretch;
  justify-content:stretch;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-myticket-link,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count > div.js-ticket-link,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count > div[class*="js-col-"]{
  display:block;
  grid-column:auto;
  grid-row:auto;
  float:none;
  clear:none;
  width:100%;
  max-width:none;
  min-width:0;
  height:auto;
  margin:0;
  padding:0;
  flex:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count > div > a.js-ticket-link,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count > div > a.js-myticket-link{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  justify-content:stretch;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:118px;
  height:100%;
  margin:0;
  padding:18px;
  border:1px solid var(--jsst-user-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--jsst-user-shadow-soft);
  color:var(--jsst-user-text);
  text-decoration:none;
  overflow:hidden;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp .js-ticket-cricle-wrp{
  grid-column:1;
  grid-row:1;
  width:62px;
  height:62px;
  min-width:62px;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp .circlebar,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp .circlebar canvas{
  width:56px;
  height:56px;
  max-width:56px;
  max-height:56px;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp .js-ticket-link-text{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 0 12px;
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.28;
  text-align:start;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}

#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp{
  padding:20px;
  overflow:visible;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-wrapper{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:14px;
  align-items:end;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-wrapper > .js-filter-field-wrp{
  grid-column:auto;
  width:100%;
  max-width:100%;
  min-width:0;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
  display:none;
  grid-column:1 / -1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  max-width:100%;
  margin:0;
  padding-top:2px;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area[style*="display:block"],
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area[style*="display:block"]{
  display:grid;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area[style*="display:none"],
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area[style*="display:none"]{
  display:none;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area > .js-filter-field-wrp,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area > div[class*="js-col-"]{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp{
  grid-column:4;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:auto;
  max-width:none;
  min-width:max-content;
  margin:0;
  padding:0;
  float:none;
  clear:none;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp > span,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp > span.js-filter-button-wrp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:auto;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  white-space:nowrap;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-search-filter-btn,
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-ticket-filter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:98px;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 18px;
  border-radius:13px;
  line-height:1;
  white-space:nowrap;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-search-filter-btn{
  background:var(--jsst-content-bg);
  color:var(--jsst-top-menu-bg);
  box-shadow:none;
}

@media (max-width:980px){
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-wrapper{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp{
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:620px){
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-top-cirlce-count-wrp.js-ticket-count,
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-wrapper,
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp #js-filter-wrapper-toggle-area{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp,
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-filter-button-wrp > span.js-filter-button-wrp{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    justify-content:stretch;
  }
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-search-filter-btn,
  #jsst-site.jsst-site-root .jsst-user-mytickets-page .js-ticket-search-wrp .js-ticket-filter-button{
    width:100%;
    min-width:0;
  }
}


/* v265 frontend ticket detail final spacing polish
   - aligns the attachment title and attachment counter with the dropzone body.
   - gives the reply action proper bottom breathing room.
   - keeps Normal priority green when legacy theme colors are inconsistent. */
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-wrp,
#jsst-site .jsst-ticket-detail-page .js-attachment-wrp{
  float:none;
  width:100%;
  max-width:100%;
  margin:18px 0 0;
  padding:0 20px;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-wrp > .js-form-title{
  float:none;
  display:block;
  width:100%;
  margin:0 0 8px;
  padding:0 0 0 2px;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files-wrp{
  float:none;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-files.jsst-dragdrop-enabled{
  min-height:132px;
  margin:0;
  padding:14px;
  border-radius:16px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .jsst-dropzone-message{
  min-height:74px;
  border-radius:14px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-attachment-option{
  float:none;
  display:block;
  width:100%;
  margin:10px 0 0;
  padding:0 0 0 2px;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  text-align:start;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .jsst-attachment-counter{
  display:block;
  margin:0 0 5px;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp{
  float:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:18px 0 0;
  padding:22px 20px 30px;
  border-top:1px solid var(--jsst-border-color);
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp .js-ticket-save-button,
#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp input.js-ticket-save-button{
  min-width:128px;
  min-height:46px;
  margin:0;
  padding:12px 24px;
  border-radius:13px;
  background:#16a34a;
  color:#ffffff;
  box-shadow:0 16px 34px rgba(22,163,74,.24);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-priorty{
  color:#ffffff;
}

@media (max-width:760px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-attachment-wrp,
  #jsst-site .jsst-ticket-detail-page .js-attachment-wrp{
    padding:0 12px;
  }
  #jsst-site.jsst-site-root .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp,
  #jsst-site .jsst-ticket-detail-page .js-ticket-reply-form-button-wrp{
    padding:18px 12px 24px;
  }
}


/* =========================================================
   JS Support Ticket - Site Ticket Detail Modal Polish v266
   Scope: ticket detail popups only.
   Notes:
   - No broad wrapper float resets.
   - Keeps the page/menu clickable after popups close.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-back,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-back,
#jsst-site .jsst-ticket-detail-page #js-history-back{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  background:rgba(15,23,42,.66);
  backdrop-filter:blur(3px);
  z-index:99980;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup{
  position:fixed;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%);
  width:min(920px,calc(100vw - 44px));
  max-width:calc(100vw - 44px);
  max-height:calc(100vh - 56px);
  min-width:0;
  margin:0;
  padding:0;
  background:#ffffff;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  box-shadow:0 32px 90px rgba(15,23,42,.34);  z-index:99990;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup *,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup *{
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head{gap:16px;
  width:100%;  margin:0;  background:linear-gradient(135deg,var(--jsst-top-menu-bg) 0%,var(--jsst-top-menu-bg) 100%);
  color:var(--jsst-header-action-text);
  border:0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-title,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-title{
  display:block;
  min-width:0;
  color:#ffffff;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image::before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image::before{
  content:"×";
  display:block;
  color:#ffffff;
  font-size:38px;
  font-weight:400;
  line-height:1;}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image:hover,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image:hover,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-history-table-wrp{
  display:block;
  width:100%;
  max-height:calc(100vh - 150px);
  margin:0;
  padding:24px;
  overflow:auto;
  background:linear-gradient(180deg,#ffffff 0%,var(--jsst-content-bg) 100%);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup table{
  width:100%;
  min-width:620px;
  margin:0;
  border:1px solid var(--jsst-border-color);
  border-collapse:separate;
  border-spacing:0;
  border-radius:14px;
  background:#ffffff;
  overflow:hidden;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup th{
  padding:15px 18px;
  background:var(--jsst-content-bg);
  border:0;
  border-bottom:1px solid var(--jsst-border-color);
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
  white-space:nowrap;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup th.js-ticket-textalign-center{
  text-align:center;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup td{
  padding:16px 18px;
  border:0;
  border-bottom:1px solid var(--jsst-border-color);
  color:var(--jsst-content-text);
  font-size:14px;
  line-height:1.5;
  vertical-align:middle;
  background:#ffffff;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup tbody tr:last-child td{
  border-bottom:0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-textalign-center{
  text-align:center;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  margin:20px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--jsst-border-color);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:132px;
  min-height:44px;
  margin:0;
  padding:12px 22px;
  border:0;
  border-radius:12px;
  background:var(--jsst-heading-color);
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:1;
  box-shadow:0 12px 26px rgba(15,23,42,.16);
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup{
  width:min(820px,calc(100vw - 44px));
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap{
  display:block;
  width:100%;
  max-height:calc(100vh - 190px);
  margin:0;
  padding:22px;
  overflow:auto;
  background:#ffffff;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp:empty{
  display:none;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp > *,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap > form{
  width:100%;
  max-width:100%;
  margin:0 0 16px;
  padding:18px;
  background:var(--jsst-content-bg);
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.055);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup label,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-form-title{
  display:block;
  width:100%;
  margin:0 0 8px;
  color:var(--jsst-heading-color);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="text"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="password"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup select,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-height:48px;
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#ffffff;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:650;
  line-height:1.45;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup textarea{
  min-height:108px;
  resize:vertical;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input:focus,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup select:focus,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup textarea:focus{
  outline:0;
  border-color:var(--jsst-top-menu-bg);
  box-shadow:0 0 0 4px rgba(79,102,245,.12);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-edit-form-wrp{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin:0;
  padding:0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="button"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="submit"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:118px;
  min-height:42px;
  margin:6px 8px 0 0;
  padding:11px 18px;
  border:0;
  border-radius:12px;
  background:var(--jsst-top-menu-bg);
  color:#ffffff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(79,102,245,.20);
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[value="Delete"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup button[value="Delete"]{
  background:var(--jsst-heading-color);
  box-shadow:0 12px 26px rgba(15,23,42,.14);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp > *:last-child,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap > *:last-child{
  margin-bottom:0;
}

@media (max-width:700px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup,
  #jsst-site .jsst-ticket-detail-page #js-history-popup,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
    border-radius:16px;
  }

  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head,
  #jsst-site .jsst-ticket-detail-page #js-history-head,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-history-table-wrp,
  #jsst-site .jsst-ticket-detail-page #js-history-popup .js-ticket-history-table-wrp,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap{
    padding:16px;
  }

  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup{
    padding:14px 16px 16px;
  }

  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-btn-wrp,
  #jsst-site .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-btn-wrp,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-edit-form-wrp,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-edit-form-wrp{
    justify-content:stretch;
  }

  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-cancel,
  #jsst-site .jsst-ticket-detail-page #js-history-popup .js-ticket-priorty-cancel,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="button"],
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup input[type="submit"],
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup button,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup input[type="button"],
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup input[type="submit"],
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup button{
    width:100%;
    margin:6px 0 0;
  }
}


/* =========================================================
   JS Support Ticket - Ticket Detail Modal Final Polish v267
   Scope: ticket detail modals only.
   Notes:
   - Fixes close icon rendering.
   - Keeps private credentials detail/list/add form in clean vertical layout.
   - No broad wrapper float reset,
so top navigation links remain clickable.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-popup,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup,
#jsst-site .jsst-ticket-detail-page #js-history-popup{
  overflow:hidden;
  isolation:isolate;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:18px 26px;
  overflow:hidden;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  max-width:44px;
  max-height:44px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(255,255,255,.14);
  background-image:none;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  opacity:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image::before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image::after,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image::before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:24px;
  height:3px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#ffffff;
  opacity:1;
  transform-origin:center center;
  text-indent:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image::before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image::after,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image:hover,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image:hover{
  background:rgba(255,255,255,.22);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp{
  display:block;
  width:100%;
  padding:22px 24px;
  overflow:auto;
  background:#ffffff;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-detail-popup{
  display:block;
  width:100%;
  margin:0 0 18px;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-detail-popup .js-ticket-edit-form-wrp{
  display:block;
  width:100%;
  margin:0;
  padding:18px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 14px 32px rgba(15,23,42,.06);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-crendential-detail-wrp{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-crendential-detail-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 12px;
  padding:0;
  border:0;
  color:var(--jsst-heading-color);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-crendential-detail-head .js-ticket-title{
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.35;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-crendential-detail-head .js-ticket-value,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-rows-wrp{
  color:var(--jsst-content-text);
  font-size:14px;
  line-height:1.55;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-rows-wrp{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:4px 8px;
  width:100%;
  margin:2px 0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-rows-wrp .js-ticket-title{
  color:var(--jsst-content-text);
  font-weight:700;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-rows-wrp .js-ticket-value{
  color:var(--jsst-content-text);
  overflow-wrap:anywhere;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-crendential-detail-footer{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 0;
  padding:0;
  border:0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup{
  display:block;
  width:100%;
  margin:0;
  padding:18px 24px 24px;
  border-top:1px solid var(--jsst-border-color);
  background:var(--jsst-content-bg);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup > .js-ticket-edit-form-wrp{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap{
  display:block;
  width:100%;
  max-height:calc(100vh - 150px);  overflow:auto;
  background:#ffffff;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup #js-ticket-usercredentails-form{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup > .js-ticket-edit-form-wrp{
  display:block;
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-edit-field-title{
  display:block;
  float:none;
  width:100%;
  max-width:100%;
  margin:0 0 7px;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:900;
  line-height:1.35;
  text-align:start;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-edit-field-wrp{
  display:block;
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 16px;
  padding:0;
  clear:both;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-edit-field-input,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup input[type="text"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup input[type="password"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup select,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup textarea{
  display:block;
  float:none;
  width:100%;
  max-width:100%;
  min-height:48px;
  margin:0;
  padding:11px 14px;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#ffffff;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:650;
  line-height:1.45;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup iframe,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .tox-tinymce,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .mce-tinymce{
  display:block;
  width:100%;
  max-width:100%;
  min-height:150px;
  border-radius:12px;
  box-sizing:border-box;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp{
  display:flex;
  flex-wrap:wrap;  align-items:center;
  gap:10px;
  width:100%;}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-save,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:118px;
  min-height:44px;
  margin:0;
  padding:12px 20px;
  border:0;
  border-radius:12px;
  color:#ffffff;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-align:center;
  cursor:pointer;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-save{
  background:var(--jsst-top-menu-bg);
  box-shadow:0 14px 28px rgba(79,102,245,.20);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel{
  background:var(--jsst-heading-color);
  box-shadow:0 14px 28px rgba(15,23,42,.14);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup .js-ticket-priorty-cancel{
  background:var(--jsst-top-menu-bg);
  box-shadow:0 14px 28px rgba(79,102,245,.20);
}

@media (max-width:700px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head,
  #jsst-site .jsst-ticket-detail-page #js-history-head,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-head{
    min-height:64px;
    padding:14px 16px;
  }
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-history-head .js-image,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-head .js-image,
  #jsst-site .jsst-ticket-detail-page #js-history-head .js-image,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-head .js-image{
    flex-basis:40px;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    max-width:40px;
    max-height:40px;
  }
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup{
    padding-left:16px;
    padding-right:16px;
  }
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp{
    justify-content:stretch;
  }
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-save,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-save,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-priorty-cancel{
    flex:1 1 100%;
    width:100%;
  }
}

/* =========================================================
   JS Support Ticket - Ticket Detail Modal Visibility Fix v268
   Scope: private credentials modal only.
   Reason: allow JavaScript .hide()/.show() to control the list,
add button,
and edit form. Earlier forced display:block made the form appear under the
   credential list and pushed Save/Cancel below the visible modal area.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp[style*="display:none"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp[style*="display: none"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap[style*="display:none"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap[style*="display: none"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup[style*="display:none"],
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-add-new-popup[style*="display: none"],
#jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-credentails-wrp[style*="display:none"]{
  display:none;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .js-ticket-usercredentails-form-wrap{
  padding:22px 24px 0;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup textarea{
  min-height:110px;
  max-height:150px;
  resize:vertical;
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp{
  position:sticky;
  bottom:0;
  z-index:8;
  margin:10px -24px 0;
  padding:14px 24px 18px;
  justify-content:flex-end;
  background:linear-gradient(180deg,rgba(255,255,255,.88),#ffffff 42%);
  border-top:1px solid var(--jsst-border-color);
  box-shadow:0 -18px 38px rgba(15,23,42,.07);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-save{
  background:#16a34a;
  box-shadow:0 14px 28px rgba(22,163,74,.22);
}

@media (max-width:700px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp,
  #jsst-site .jsst-ticket-detail-page #js-private-crendentials-popup .private-crendentials-form-popup .js-ticket-priorty-btn-wrp{
    margin-left:-16px;
    margin-right:-16px;
    padding-left:16px;
    padding-right:16px;
  }
}
/* =========================================================
   JS Support Ticket - Merge Ticket modal cleanup v279
   Existing component CSS only. Keep this scoped to ticket detail.
   ========================================================= */
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection.jsst-merge-popup-wrapper{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(1000px,calc(100vw - 48px));
  max-height:calc(100vh - 60px);
  overflow:hidden;
  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;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp{
  max-height:calc(100vh - 60px);
  overflow:auto;
  background:#fff;
  scrollbar-gutter:stable;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-popup-header{
  float:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
  width:100%;
  padding:16px 24px;
  background:linear-gradient(135deg,var(--jsst-top-menu-bg) 0%,var(--jsst-top-menu-bg) 100%);
  color:var(--jsst-header-action-text);
  position:sticky;
  top:0;
  z-index:5;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-text{
  float:none;
  margin:0;
  padding:0;
  color:#fff;
  font-size:21px;
  font-weight:900;
  line-height:1.2;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-close-img{
  position:relative;
  top:auto;
  right:auto;
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:13px;
  background:rgba(255,255,255,.14);
  background-image:none;
  cursor:pointer;
  font-size:0;
  text-indent:-9999px;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-close-img:before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-close-img:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:23px;
  height:3px;
  border-radius:999px;
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-close-img:before{transform:translate(-50%,-50%) rotate(45deg);}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .popup-header-close-img:after{transform:translate(-50%,-50%) rotate(-45deg);}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-merge-ticket-wrapper{
  float:none;
  display:block;
  width:100%;
  padding:24px 26px 5px;
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-merge-white-bg{
  float:none;
  display:block;
  width:100%;
  margin:0 0 18px;
  padding:0;
  background:transparent;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-section-title{
  display:block;
  margin:0 0 12px;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.3;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-section-title:before{
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-section-title + .js-ticket-merge-white-bg{
  margin-top:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-merge-ticket-wrapper > hr{
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection hr{
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-view-tickets.jsst-merge-destination-container,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .jsst-merge-destination-shell{
  clear:both;
  float:none;
  display:block;
  width:100%;
  margin:0 0 16px;
  padding:16px 18px;
  border:1px solid var(--jsst-border-color);
  border-top:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
  box-shadow:0 10px 24px rgba(15,23,42,.035);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-view-tickets.jsst-merge-destination-container:before,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .jsst-merge-destination-shell:before{
  content:none;
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-view-tickets.jsst-merge-destination-container:after{
  content:none;
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .jsst-merge-destination-title{
  display:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .jsst-merge-destination-card{
  clear:both;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-ticket-merge-white-bg:not(.jsst-merge-destination-card){
  margin:0 0 16px;
  padding:16px 18px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
  box-shadow:0 10px 24px rgba(15,23,42,.035);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-ticket-merge-white-bg .js-ticket-wrapper{
  margin:0;
  box-shadow:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-ticket-wrapper:hover{
  border-color:var(--jsst-border-color);
  box-shadow:0 12px 28px rgba(15,23,42,.04);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-ticket-wrapper:hover .js-ticket-data1{
  border-top-color:transparent;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-wrapper{
  float:none;
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  min-height:116px;
  margin:0 0 18px;
  padding:20px 24px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.04);
  overflow:visible;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-pic{
  float:none;
  flex:0 0 76px;
  width:76px;
  height:76px;
  min-width:76px;
  margin:0;
  padding:0;
  position:relative;
  text-align:center;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-pic img,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-pic img.js-ticket-staff-img{
  position:absolute;
  inset:0;
  width:68px;
  height:68px;
  max-width:68px;
  max-height:68px;
  margin:auto;
  border-radius:50%;
  object-fit:cover;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data{
  float:none;
  display:block;
  flex:1 1 auto;
  width:auto;
  min-width:300px;
  max-width:none;
  margin:0;
  padding:0;
  color:var(--jsst-content-text);
  font-size:14px;
  line-height:1.55;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data > div,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data > span,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data .name,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data .subject{
  float:none;
  display:block;
  width:auto;
  min-width:0;
  margin:0 0 5px;
  padding:0;
  line-height:1.5;
  white-space:normal;
  word-break:normal;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data .js-bold-text,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-bold-text{
  display:block;
  margin:0 0 8px;
  color:var(--jsst-content-text);
  font-size:17px;
  font-weight:900;
  line-height:1.3;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data a{
  color:var(--jsst-top-menu-bg);
  font-weight:900;
  text-decoration:none;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1{
  float:none;
  display:block;
  flex:0 0 300px;
  width:300px;
  max-width:300px;
  min-width:260px;
  margin:0;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:14px;
  line-height:1.35;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-data2{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-data-row{
  float:none;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-data-tit,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-field-title{
  float:none;
  width:auto;
  margin:0;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  word-break:normal;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-data-val,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-field-value{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--jsst-heading-color);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  text-align:start;
  word-break:normal;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-wrapper-textcolor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:84px;
  min-height:32px;
  padding:8px 15px;
  border-radius:999px;
  background:#16a34a;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(22,163,74,.18);
}

#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection form#ticketpopupsearch{
  float:none;
  display:block;
  width:100%;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
  box-shadow:0 10px 24px rgba(15,23,42,.035);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection form#ticketpopupsearch .js-form-wrapper{
  float:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:10px 18px;
  align-items:end;
  width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-title,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-form-help{
  grid-column:1 / -1;
  float:none;
  width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-title{
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
  line-height:1.3;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-form-help{
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:650;
  line-height:1.4;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-wrp,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-btn-wrp{
  float:none;
  display:grid;
  gap:10px;
  width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-wrp{grid-template-columns:1fr 1fr;}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-btn-wrp{grid-template-columns:1fr 1fr;}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-value,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection span.js-merge-btn{
  float:none;
  display:block;
  width:100%;
  margin:0;
  padding:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-value input.inputbox,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection span.js-merge-btn input{
  width:100%;
  min-height:46px;
  margin:0;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:650;
  line-height:1.2;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-value input.inputbox{
  border:1px solid var(--jsst-border-color);
  background:#fff;
  color:var(--jsst-heading-color);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection span.js-merge-btn input{
  cursor:pointer;
  font-weight:900;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection span.js-merge-btn input.js-search{
  background:var(--jsst-top-menu-bg);
  color:#fff;
  border:1px solid var(--jsst-top-menu-bg);
  box-shadow:0 16px 34px rgba(79,102,245,.22);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection span.js-merge-btn input.js-cancel{
  background:#fff;
  color:var(--jsst-top-menu-bg);
  border:1px solid var(--jsst-top-menu-bg);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-view-tickets,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp{
  float:none;
  width:100%;
  margin:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-view-tickets{
  border-top:0;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp{
  padding: 5px 26px 26px;
  border-radius:16px;
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp .js-view-tickets{
  min-height:148px;
  max-height:300px;
  border:1px solid var(--jsst-border-color);
  padding:18px;
  border-radius:16px;
  background:#fff;
  overflow:auto;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp.jsst-merge-empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp > img,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-no-record-found img{
  width:62px;
  max-width:62px;
  height:auto;
  margin:0 auto 8px;
  opacity:.48;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-empty-title{
  margin:2px 0 4px;
  color:var(--jsst-content-text);
  font-size:15px;
  font-weight:850;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .jsst-merge-empty-help{
  margin:0;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:650;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-ticket-overlay{position:relative;border-radius:14px;overflow:hidden;}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-ticket-overlay .js-over-lay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.58);
  opacity:0;
  transition:opacity .18s ease;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-ticket-overlay:hover .js-over-lay{opacity:1;}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection a.js-merge-btn{
  position:static;
  transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:132px;
  min-height:42px;
  padding:11px 18px;
  border-radius:12px;
  background:var(--jsst-top-menu-bg);
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  box-shadow:0 16px 34px rgba(79,102,245,.24);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-edit-msg-field-wrp{
  float:none;
  display:block;
  width:100%;
  margin:0 0 16px;
  padding:18px 20px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-edit-msg-heading{
  display:block;
  width:100%;
  margin:0 0 10px;
  color:var(--jsst-heading-color);
  font-size:15px;
  font-weight:900;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection textarea.js-merge-field{
  width:100%;
  min-height:110px;
  padding:14px 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:12px;
  background:#fff;
  resize:vertical;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-form-button-wrapper,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-form-button-wrapper-merge{
  float:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  width:100%;
  margin:0;
  padding:14px 26px 22px;
  border-top:1px solid var(--jsst-border-color);
  background:#fff;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-save-btn,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-cancel-btn{
  min-width:132px;
  min-height:46px;
  padding:12px 22px;
  border:0;
  border-radius:13px;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-save-btn{background:var(--jsst-top-menu-bg);box-shadow:0 14px 28px rgba(79,102,245,.24);}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-cancel-btn{background:var(--jsst-heading-color);box-shadow:0 14px 28px rgba(15,23,42,.14);}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-edit-msg-field-wrp{
  margin:0 0 16px;
  padding:16px 18px;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view textarea.js-merge-field{
  min-height:88px;
}
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-form-button-wrapper,
#jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp.jsst-merge-confirm-view .js-form-button-wrapper-merge{
  border-top:0;
  padding:6px 20px 22px;
}

@media (max-width:900px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-wrapper{flex-wrap:wrap;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data{min-width:calc(100% - 96px);}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1{flex:1 1 100%;width:100%;max-width:100%;margin-left:96px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection form#ticketpopupsearch .js-form-wrapper{grid-template-columns:1fr;}
}
@media (max-width:640px){
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection.jsst-merge-popup-wrapper{width:calc(100vw - 22px);max-height:calc(100vh - 28px);border-radius:16px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #js-ticket-merge-ticket-wrp{max-height:calc(100vh - 28px);}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-merge-ticket-wrapper{padding:16px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-wrapper{display:block;padding:16px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-pic{margin:0 auto 10px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data{min-width:0;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1{margin:12px 0 0;min-width:0;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-ticket-data1 .js-ticket-data-row{grid-template-columns:92px minmax(0,1fr);}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-wrp,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-merge-form-btn-wrp{grid-template-columns:1fr;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-tickets-list-wrp{max-height:260px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-form-button-wrapper,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection .js-form-button-wrapper-merge{flex-direction:column;align-items:stretch;padding:14px 16px 18px;}
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-save-btn,
  #jsst-site.jsst-site-root .jsst-ticket-detail-page #mergeticketselection input.js-merge-cancel-btn{width:100%;}
}

/* Role permissions: selected role name summary. */
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-role-permissions-role-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin:0 0 18px;
  padding:18px 20px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:#fff;
  box-sizing:border-box;
  box-shadow:0 12px 32px rgba(15,23,42,.04);
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-role-permissions-role-label{
  color:var(--jsst-content-text);
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}

#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-role-permissions-role-value{
  color:var(--jsst-top-menu-bg);
  font-size:18px;
  font-weight:900;
  line-height:1.3;
}

/*
   JS Support Ticket - Site v287 Select User popup search layout
   Scope: frontend Submit Ticket user-picker popup only.
   Keep all three search fields visible and place actions immediately after them.
*/
#jsst-site.jsst-site-root div#userpopup{
  width:min(1180px,94vw);
  max-width:94vw;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
  padding:20px 24px 18px;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) max-content;
  gap:12px;
  align-items:center;
  width:100%;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-left,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-right,
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-fields-wrp{
  display:contents;
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  float:none;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-input-fields{
  display:block;
  width:100%;
  min-width:0;
  height:54px;
  margin:0;
  padding:0 16px;
  border-radius:16px;
  box-sizing:border-box;
}
#jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
#jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
  min-width:138px;
  height:54px;
  margin:0;
  padding:0 20px;
  border-radius:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}
#jsst-site.jsst-site-root div#userpopup #records{
  padding:0 24px 18px;
}

@media (max-width:1100px){
  #jsst-site.jsst-site-root div#userpopup{
    width:min(1040px,95vw);
    max-width:95vw;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
    width:100%;
  }
}

@media (max-width:700px){
  #jsst-site.jsst-site-root div#userpopup .js-ticket-popup-search-wrp{
    padding:16px;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-top{
    grid-template-columns:minmax(0,1fr);
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn-wrp{
    width:100%;
  }
  #jsst-site.jsst-site-root div#userpopup .js-ticket-search-btn,
  #jsst-site.jsst-site-root div#userpopup .js-ticket-reset-btn{
    flex:1 1 0;
    min-width:0;
  }
  #jsst-site.jsst-site-root div#userpopup #records{
    padding:0 16px 16px;
  }
}

/* v289 content-list filter select vertical alignment
   UI-only: keep list-page category selects vertically centered in the shared search bar. */
#jsst-site.jsst-site-root .js-ticket-top-search-wrp select,
#jsst-site.jsst-site-root .js-ticket-top-search-wrp .js-ticket-form-field-select select,
#jsst-site.jsst-site-root .js-ticket-search-fields-wrp select,
#jsst-site.jsst-site-root form.js-filter-form select{
  height:54px;
  min-height:54px;
  line-height:54px;
  padding-top:0;
  padding-bottom:0;
  vertical-align:middle;
}

/* v290 shared site icon polish
   - modernize legacy action/status icon assets through shared sizing
   - improve native file input button styling across the site */
#jsst-site.jsst-site-root input[type="file"]{
  color:var(--jsst-content-text);
  font-size:13px;
  line-height:1.4;
}
#jsst-site.jsst-site-root input[type="file"]::file-selector-button,
#jsst-site.jsst-site-root input[type="file"]::-webkit-file-upload-button{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--jsst-border-color);
  background:linear-gradient(135deg,var(--jsst-content-bg) 0%, var(--jsst-content-bg) 100%);
  color:var(--jsst-heading-color);
  border-radius:10px;
  padding:10px 16px;
  margin-right:12px;
  font-weight:700;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(79,102,255,.10);
}
#jsst-site.jsst-site-root input[type="file"]::file-selector-button:hover,
#jsst-site.jsst-site-root input[type="file"]::-webkit-file-upload-button:hover{
  border-color:#bfd0ea;
  background:linear-gradient(135deg,var(--jsst-content-bg) 0%, #ffffff 100%);
}
#jsst-site.jsst-site-root .js-ticket-action-btn img,
#jsst-site.jsst-site-root .js-ticket-action-btn .js-button-icon,
#jsst-site.jsst-site-root .js-ticket-action-btn .js-ticket-action-icon,
#jsst-site.jsst-site-root .js-ticket-add-img-wrp img,
#jsst-site.jsst-site-root .js-ticket-action-wrapper img,
#jsst-site.jsst-site-root .js-ticket-action-img{
  image-rendering:auto;
}

/* v291 attachment and shared action/status icon refinement
   Keeps existing workflows and markup while correcting alignment and contrast. */
#jsst-site.jsst-site-root .tk_attachment_value_text{
  padding:7px 9px;
}
#jsst-site.jsst-site-root .tk_attachment_value_text input[type="file"],
#jsst-site.jsst-site-root .js-attachment-inputbox{
  display:block;
  height:42px;
  min-height:42px;
  line-height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--jsst-content-text);
}
#jsst-site.jsst-site-root .tk_attachment_value_text input[type="file"]::file-selector-button,
#jsst-site.jsst-site-root .js-attachment-inputbox::file-selector-button,
#jsst-site.jsst-site-root .tk_attachment_value_text input[type="file"]::-webkit-file-upload-button,
#jsst-site.jsst-site-root .js-attachment-inputbox::-webkit-file-upload-button{
  height:40px;
  min-height:40px;
  margin:1px 14px 1px 0;
  padding:0 17px;
  border:1px solid #cbd8ea;
  border-radius:10px;
  background:var(--jsst-content-bg);
  color:var(--jsst-heading-color);
  font-weight:700;
  line-height:38px;
  vertical-align:middle;
  box-shadow:none;
}
#jsst-site.jsst-site-root .tk_attachment_remove{
  flex-basis:30px;
  width:30px;
  height:30px;
  background:#fff5f5;
  border-color:#fecaca;
}
#jsst-site.jsst-site-root .tk_attachment_remove::before{
  color:#ef4444;
  font-size:19px;
  font-weight:700;
}
#jsst-site.jsst-site-root .js-ticket-attached-files-wrp{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:8px 9px;
  background:#fff;
  border-color:var(--jsst-border-color);
}
#jsst-site.jsst-site-root .js_ticketattachment{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid var(--jsst-border-color);
  border-radius:8px;
  background:var(--jsst-content-bg);
  color:var(--jsst-content-text);
  margin: 5px 0;
  justify-content: space-between;
}
#jsst-site.jsst-site-root a.js-ticket-delete-attachment{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:112px;
  height:42px;
  padding:0 18px;
  border:1px solid #fecaca;
  border-radius:8px;
  background:#fff1f2;
  color:#dc2626;
  font-size:13px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
}
#jsst-site.jsst-site-root a.js-ticket-delete-attachment:hover,
#jsst-site.jsst-site-root a.js-ticket-delete-attachment:focus{
  background:#ffe4e6;
  border-color:#fda4af;
  color:#b91c1c;
}

/* List status: use a clean check/cross without the old badge-like circle. */
#jsst-site.jsst-site-root .js-ticket-table-body-col img[src*="tick-icon.png"],
#jsst-site.jsst-site-root .js-ticket-table-body-col img[src*="close-icon.png"]{
  width:26px;
  height:26px;
  object-fit:contain;
}

/* Shared list action controls: clearer icon size, subtle hover treatment. */
#jsst-site.jsst-site-root .js-ticket-table-body-col a.js-tk-button,
#jsst-site.jsst-site-root .js-ticket-table-body-col a.tk_set_edit_text,
#jsst-site.jsst-site-root .js-tk-button{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:10px;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
#jsst-site.jsst-site-root .js-ticket-table-body-col a.js-tk-button img,
#jsst-site.jsst-site-root .js-ticket-table-body-col a.tk_set_edit_text img,
#jsst-site.jsst-site-root .js-tk-button img{
  width:20px;
  height:20px;
  max-width:20px;
  max-height:20px;
}
#jsst-site.jsst-site-root .js-ticket-table-body-col a.js-tk-button:hover,
#jsst-site.jsst-site-root .js-ticket-table-body-col a.tk_set_edit_text:hover,
#jsst-site.jsst-site-root .js-tk-button:hover{
  background:var(--jsst-content-bg);
  border-color:#cbd8ef;
  transform:translateY(-1px);
}

@media (max-width:640px){
  #jsst-site.jsst-site-root .js-ticket-attached-files-wrp{
    grid-template-columns:minmax(0,1fr);
  }
  #jsst-site.jsst-site-root a.js-ticket-delete-attachment{
    width:100%;
  }
}

/* v292 staff filter + permission section controls
   Fixes the desktop Staff Members filter wrapping and replaces the oversized
   section-wide permission selector with a compact, consistent control. */
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(230px,1.45fr) minmax(205px,1.1fr) minmax(190px,1fr) auto;
  gap:12px;
  align-items:center;
}
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp > .js-ticket-form-field,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp > .js-ticket-form-field-select,
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp > .js-ticket-search-form-btn-wrp{
  grid-column:auto;
  width:100%;
  min-width:0;
  margin:0;
}
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-search-form-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:10px;
  width:auto;
}
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-search-form-btn-wrp .js-manage-btn{
  min-width:108px;
  height:52px;
  margin:0;
}
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-margin-top-select{
  margin-top:0;
}
#jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:46px;
  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;
}

#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-subheading .head-checkbox,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading .head-checkbox{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  min-width:0;
  min-height:32px;
  padding:5px 10px;
  margin:0;
  gap:7px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-sizing:border-box;
  white-space:nowrap;
}
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox input,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading .head-checkbox input,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-subheading .head-checkbox input,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-subheading .head-checkbox input,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading .head-checkbox input{
  appearance:auto;
  width:17px;
  height:17px;
  min-width:17px;
  margin:0;
  padding:0;
  accent-color:var(--jsst-top-menu-bg);
  cursor:pointer;
}
#jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading .head-checkbox label,
#jsst-site.jsst-site-root #js-tk-formwrapper div.js-per-wrapper div.js-per-subheading .head-checkbox label,
#jsst-site.jsst-site-root #rolepermissionedit div.js-per-wrapper div.js-per-subheading .head-checkbox label,
#jsst-site.jsst-site-root #rolepermission div.js-per-wrapper div.js-per-subheading .head-checkbox label,
#jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading .head-checkbox label{
  display:inline-flex;
  align-items:center;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--jsst-content-bg);
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
}

@media (max-width:1050px){
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp{
    grid-template-columns:minmax(220px,1.3fr) minmax(190px,1fr);
  }
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-search-form-btn-wrp{
    width:100%;
  }
}
@media (max-width:680px){
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-fields-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-search-form-btn-wrp{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #jsst-site.jsst-site-root .js-ticket-staff-wrapper .jsst-staff-filter-form .js-ticket-search-form-btn-wrp .js-manage-btn{
    width:100%;
    min-width:0;
  }
  #jsst-site.jsst-site-root div.js-per-wrapper div.js-per-subheading,
  #jsst-site.jsst-site-root .js-ticket-rolepermissions-wrapper .js-per-subheading{
    gap:12px;
  }
}

/* ========================================================================== 
   v293 — Staff workflow polish: mail, profile, department reports, feedback
   Scoped by controller/layout to avoid affecting Joomla template or other pages.
   ========================================================================== */

/* Shared mail navigation */
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:18px 0 20px;
  padding:0;
}
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-ticket-mail-btn{
  width:auto;
  margin:0;
  float:none;
}
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  width:100%;
  padding:12px 16px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  background:#fff;
  color:var(--jsst-top-menu-bg);
  font-weight:800;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link:hover,
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--jsst-top-menu-bg) 0%,#1da9d4 100%);
  box-shadow:0 14px 30px rgba(79,102,255,.22);
}
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-ticket-mail-img{
  width:18px;
  height:18px;
  object-fit:contain;
  margin:0;
  vertical-align:middle;
}
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link.active .js-ticket-mail-img,
#jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp .js-add-link:hover .js-ticket-mail-img{
  filter:brightness(0) invert(1);
}

/* Inbox / outbox filter and table polish */
#jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-top-search-wrp,
#jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-top-search-wrp{
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
  overflow:visible;
}
#jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-fields-wrp,
#jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(220px,.95fr) auto;
  gap:12px;
  align-items:center;
}
#jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-form-field,
#jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-form-field,
#jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-search-form-btn-wrp,
#jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-search-form-btn-wrp{
  float:none;
  width:auto;
  margin:0;
  padding:0;
}
#jsst-site.jsst-controller-mail.jsst-layout-inbox #js-filter-wrapper-toggle-area,
#jsst-site.jsst-controller-mail.jsst-layout-outbox #js-filter-wrapper-toggle-area{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-mail-search-btn-wrp,
#jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-mail-search-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap;
}
#jsst-site.jsst-controller-mail .jsst-status-icon{
  width:24px;
  height:24px;
  object-fit:contain;
}

/* Message detail */
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-post-reply-wrapper{
  width:100%;
  margin:0 0 20px;
  padding:0;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-thread-heading{
  display:flex;
  align-items:center;
  width:100%;
  min-height:50px;
  margin:0;
  padding:13px 18px;
  border:1px solid var(--jsst-border-color);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:var(--jsst-heading-color);
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-box.js-ticket-post-reply-box{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  width:100%;
  margin:0 0 18px;
  border:1px solid var(--jsst-border-color);
  border-radius:0 0 16px 16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-box.js-ticket-post-reply-box:has(.js-ticket-detail-right-null-border){
  display:block;
  border-radius:0 0 16px 16px;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-left,
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-right{
  float:none;
  width:auto;
  min-width:0;
  min-height:0;
  margin:0;
  border:0;
  background:#fff;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-left{
  padding:24px 18px;
  text-align:center;
  border-right:1px solid var(--jsst-border-color);
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-right{
  padding:24px;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-right-null-border{
  padding:18px 20px;
  font-size:16px;
  font-weight:700;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-user-img-wrp{
  width:72px;
  height:72px;
  margin:0 auto 12px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--jsst-border-color);
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-staff-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-user-name-wrp{
  margin-bottom:6px;
  color:var(--jsst-top-menu-bg);
  font-weight:800;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-user-email-wrp{
  color:var(--jsst-content-text);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-rows-wrp,
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-row,
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-field-value{
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  box-shadow:none;
  overflow-wrap:anywhere;
}
#jsst-site.jsst-controller-mail.jsst-layout-message form#adminForm{
  padding:18px;
  border:1px solid var(--jsst-border-color);
  border-radius:0 0 16px 16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}
/* The generic .js-ticket-form-btn-wrp rule pairs its `border-top` divider with
   `padding:22px 0 0`. This block kept the border but zeroed the padding, so the
   Send button sat directly on the divider line (1px gap) and its bottom edge was
   flush with the wrapper. Restore a padding-top so the rule the border belongs
   to still reads as a separated footer, and pad the bottom to match the 18px
   rhythm of the surrounding form#adminForm. */
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-form-btn-wrp{
  width:100%;
  margin:18px 0 0;
  padding:18px 0 4px;
  text-align:end;
}
#jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-save-button{
  min-width:130px;
}

/* My Profile */
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-downloads-wrp{
  float:none;
  width:100%;
  margin:18px 0 0;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.06);
  overflow:hidden;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-downloads-heading-wrp{
  float:none;
  width:100%;
  padding:20px 24px;
  border-bottom:1px solid var(--jsst-border-color);
  font-size:24px;
  font-weight:800;
  color:var(--jsst-heading-color);
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-profile-wrp{
  float:none;
  width:100%;
  margin:0;
  padding:28px;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile form#jsst-myprofileimageform{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:28px;
  align-items:start;
  width:100%;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-profile-left,
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-profile-right{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-profile-left{
  padding:20px;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:var(--jsst-content-bg);
  text-align:center;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-user-img-wrp{
  float:none;
  width:160px;
  height:160px;
  margin:0 auto 16px;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--jsst-border-color);
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .profile-image{
  position:static;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile #showhidemouseover,
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-submit-btn{
  width:100%;
  min-width:0;
  margin:10px 0 0;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-add-form-wrapper{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  float:none;
  width:100%;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-from-field-wrp,
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-from-field-wrp-full-width{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-from-field-title{
  float:none;
  width:100%;
  margin:0 0 7px;
  color:var(--jsst-content-text);
  font-size:13px;
  font-weight:800;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-from-field{
  float:none;
  width:100%;
  min-width:0;
}
#jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-form-field-input{
  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);
  overflow-wrap:normal;
  word-break:normal;
}

/* Department Reports */
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-ticket-downloads-wrp{
  float:none;
  width:100%;
  margin:18px 0 0;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.06);
  overflow:hidden;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-ticket-downloads-heading-wrp{
  float:none;
  width:100%;
  padding:20px 24px;
  border-bottom:1px solid var(--jsst-border-color);
  font-size:24px;
  font-weight:800;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-ticket-pie-chart-wrapper{
  float:none;
  width:100%;
  margin:0;
  padding:24px;
  border-bottom:1px solid var(--jsst-border-color);
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports #pie3d_chart1{
  min-height:340px;
  max-height:420px;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-admin-staff-wrapper.js-departmentlist{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:18px;
  align-items:center;
  width:calc(100% - 48px);
  margin:18px 24px;
  padding:18px;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-festaffreport-img,
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-festaffreport-data{
  float:none;
  width:auto;
  min-width:0;
  padding:0;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .jsposition-reletive{
  padding:0;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .departmentname{
  display:flex;
  align-items:center;
  min-height:84px;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--jsst-content-bg) 0%,var(--jsst-content-bg) 100%);
  color:var(--jsst-heading-color);
  font-size:20px;
  font-weight:800;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-festaffreport-data{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-admin-report-box{
  position:relative;
  float:none;
  width:auto;
  min-width:0;
  min-height:92px;
  margin:0;
  padding:16px 10px 13px;
  border:1px solid var(--jsst-border-color);
  border-radius:14px;
  text-align:center;
  background:#fff;
  overflow:hidden;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-report-box-number,
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-report-box-title{
  display:block;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-report-box-number{
  color:var(--jsst-heading-color);
  font-size:22px;
  font-weight:800;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-report-box-title{
  margin-top:5px;
  color:var(--jsst-content-text);
  font-size:12px;
  font-weight:700;
}
#jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-report-box-color{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
}

/* Feedback filters */
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-top-search-wrp{
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
  overflow:visible;
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-fields-wrp{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 220px auto;
  gap:12px;
  align-items:center;
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-fields-wrp > .js-ticket-form-field{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks #js-filter-wrapper-toggle-area{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-search-form-feedback-btn-wrp{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  float:none;
  width:auto;
  margin:0;
  padding:0;
  white-space:nowrap;
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-feedback-list-wrapper{
  margin-top:20px;
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(15,23,42,.06);
}
#jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-feedback-heading{
  padding:20px 24px;
  border-bottom:1px solid var(--jsst-border-color);
  font-size:24px;
  font-weight:800;
}

/* GDPR request page — compact, consistent cards */
#jsst-site.jsst-controller-gdpr.jsst-layout-adderasedatarequest #js-tk-formwrapper{
  border:1px solid var(--jsst-border-color);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.06);
  overflow:hidden;
}
#jsst-site.jsst-controller-gdpr.jsst-layout-adderasedatarequest .js-ticket-top-search-wrp{
  margin:0;
  border:1px solid var(--jsst-border-color);
  border-radius:16px;
  background:var(--jsst-content-bg);
}
#jsst-site.jsst-controller-gdpr.jsst-layout-adderasedatarequest form#adminForm{
  padding:0 18px 20px;
}
#jsst-site.jsst-controller-gdpr.jsst-layout-adderasedatarequest .js-ticket-from-field-wrp{
  margin-bottom:18px;
}
#jsst-site.jsst-controller-gdpr.jsst-layout-adderasedatarequest .js-form-submit-btn-wrp{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--jsst-border-color);
  text-align:center;
}

@media (max-width:980px){
  #jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-fields-wrp,
  #jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-fields-wrp,
  #jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-fields-wrp{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-mail-search-btn-wrp,
  #jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-mail-search-btn-wrp,
  #jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-search-form-feedback-btn-wrp{
    grid-column:1/-1;
    justify-content:flex-start;
  }
  #jsst-site.jsst-controller-staff.jsst-layout-staffprofile form#jsst-myprofileimageform{
    grid-template-columns:180px minmax(0,1fr);
  }
  #jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-admin-staff-wrapper.js-departmentlist{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-controller-reports.jsst-layout-departmentreports .departmentname{
    min-height:0;
  }
}

@media (max-width:760px){
  #jsst-site.jsst-controller-mail .js-ticket-mails-btn-wrp{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-box.js-ticket-post-reply-box{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-controller-mail.jsst-layout-message .js-ticket-detail-left{
    border-right:0;
    border-bottom:1px solid var(--jsst-border-color);
  }
  #jsst-site.jsst-controller-staff.jsst-layout-staffprofile form#jsst-myprofileimageform{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-controller-staff.jsst-layout-staffprofile .js-ticket-add-form-wrapper{
    grid-template-columns:1fr;
  }
  #jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-festaffreport-data{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #jsst-site.jsst-controller-feedback.jsst-layout-feedbacks .js-ticket-fields-wrp,
  #jsst-site.jsst-controller-feedback.jsst-layout-feedbacks #js-filter-wrapper-toggle-area,
  #jsst-site.jsst-controller-mail.jsst-layout-inbox .js-ticket-fields-wrp,
  #jsst-site.jsst-controller-mail.jsst-layout-outbox .js-ticket-fields-wrp,
  #jsst-site.jsst-controller-mail.jsst-layout-inbox #js-filter-wrapper-toggle-area,
  #jsst-site.jsst-controller-mail.jsst-layout-outbox #js-filter-wrapper-toggle-area{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  #jsst-site.jsst-controller-reports.jsst-layout-departmentreports .js-festaffreport-data{
    grid-template-columns:1fr;
  }
}