/*
* 3by400 client support area v3 (JoomHelpdesk 6.4.1 front end) -- managed by deploy-support-v3.php (STAGING).
* Loaded only by the com_joomhelpdesk wrapper overrides (templates/yootheme/html/com_joomhelpdesk/ticket/*.php)
* and the com_users profile override (templates/yootheme/html/com_users/profile/edit.php, deploy-support-profile-v1d).
* Every rule is scoped to .tb4-sp (wrapper root) or body:has(.tb4-sp), so nothing leaks to other pages.
* Built from Mockup Bot's deploy-support-v3 (page-support-*-v3.css), re-targeted at the real JoomHelpdesk markup.
* Brand: green #3DB54A, lime #9FCC45, yellow #D7DF28, ink #231F20. Fonts: /images/home-v4/fonts.
* deploy-kb-icons-v1b: also linked on the KB view (view=kb) by templates/yootheme/html/com_joomhelpdesk/kb/snippet_cat.php;
* only the .kb-catcard .kb-cat-ic rules at the end apply there (no .tb4-sp wrapper on that page).
* deploy-kbsearch-depticons-v1: also linked on every KB view with a search box (kb/snippet_search.php, incl. the results
* page); the self-contained .tb4-kbsearch / .tb4-sr-only / .tb4-kb-results rules at the end apply there.
* deploy-support-copy-v1: approved copy elements (empty state, waiting / reopen / close helpers, urgent card, subject /
* upload helpers, department one-liners) at the end. deploy-guest-track-off-v1: the guest Track box is gone from the HTML,
* so its two .tb4-track-txt rules were removed; the login field icon rules are appended at the very end.
* PENDING COPY: html:not(.annot) hides .pm-pend-copy / .pm-pend (?annot shows them), as on the rest of staging.
*/
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/images/home-v4/fonts/Lato-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/images/home-v4/fonts/LibreBaskerville-VariableFont_wght.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* ---------- page level (support views only) ---------- */
html:has(.tb4-sp), body:has(.tb4-sp) { overflow-x: clip; }
body:has(.tb4-sp) #tm-main.uk-section { padding-top: 0 !important; padding-bottom: 0 !important; }
/* ---------- root ---------- */
.tb4-sp {
--green: #3DB54A; --green-dk: #2f8f3a; --green-ink: #1f6f2a; --lime: #9FCC45; --yellow: #D7DF28;
--ink: #231F20; --ink-soft: #3a3637; --muted: #5c5856; --line: #e6e4e1; --tint: #F3F8E6; --white: #fff;
--serif: "Libre Baskerville", Georgia, serif; --sans: "Lato", "Helvetica Neue", Arial, sans-serif;
--gut: max(40px, calc((100vw - 1200px) / 2));
display: block; margin: 0; padding: 0; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5;
-webkit-font-smoothing: antialiased; box-sizing: border-box;
}
.tb4-sp *, .tb4-sp *::before, .tb4-sp *::after { box-sizing: border-box; }
.tb4-sp > section { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: var(--gut); padding-right: var(--gut); }
/* YOOtheme uses condensed UPPERCASE type: reset inside the support views */
.tb4-sp :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, b, em, li, label, th, td, button, .btn, legend, small, input, select, textarea, .nav-link, .dropdown-item) {
text-transform: none !important; letter-spacing: normal; font-family: var(--sans) !important;
}
.tb4-sp :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); font-weight: 700 !important; font-style: normal; line-height: 1.2; }
.tb4-sp :is(.sp-h1, .sp-h2, .spt-h2, .snt-h2, .lp-cta-h, .snt-time-h) { font-family: var(--serif) !important; }
.tb4-sp a { color: var(--green-dk); }
.tb4-sp a:hover { color: var(--green-ink); }
.tb4-sp img { max-width: 100%; }
/* ---------- PENDING COPY (hidden unless ?annot) ---------- */
html:not(.annot) .tb4-sp .pm-pend-copy, html:not(.annot) .tb4-sp .pm-pend { display: none !important; }
html.annot .tb4-sp .pm-pend-copy { outline: 2px dashed rgba(255,120,80,.8); outline-offset: 3px; }
html.annot .tb4-sp .pm-pend { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 7px; border-radius: 4px; background: #ff7850; color: #fff; font: 900 10px/1.2 var(--sans); letter-spacing: .06em; font-style: normal; }
/* ---------- buttons (site style) ---------- */
.tb4-sp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 700; line-height: 1.1; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; box-shadow: none; }
.tb4-sp .btn-primary, .tb4-sp .btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.tb4-sp .btn-primary:hover, .tb4-sp .btn-success:hover { background: var(--green-dk); border-color: var(--green-dk); color: #fff; }
.tb4-sp .btn-secondary, .tb4-sp .btn-light, .tb4-sp .btn-info, .tb4-sp .btn-danger, .tb4-sp .btn-outline-secondary, .tb4-sp .sp-btn-light { background: #fff; color: var(--ink); border-color: #b7b3ae; }
.tb4-sp .btn-secondary:hover, .tb4-sp .btn-light:hover, .tb4-sp .btn-info:hover, .tb4-sp .btn-danger:hover, .tb4-sp .btn-outline-secondary:hover, .tb4-sp .sp-btn-light:hover { background: #F4F4F2; color: var(--ink); border-color: #8a8582; }
.tb4-sp .btn-outline-primary { background: #fff; color: var(--green-ink); border-color: var(--green); }
.tb4-sp .btn-outline-primary:hover { background: var(--tint); color: var(--green-ink); }
.tb4-sp > section .btn-primary, .tb4-sp > section .btn-secondary { min-height: 48px; padding: 13px 20px; font-size: 15px; }
.tb4-sp .btn-link { color: var(--muted); }
/* BEGIN btn-focus-fix (same fix as pages-v8b.css, scoped to the support views) */
.tb4-sp .btn.btn-primary:focus,
.tb4-sp .btn.btn-primary:focus-visible,
.tb4-sp .btn.btn-primary.focus,
.tb4-sp .btn.btn-primary:active,
.tb4-sp .btn.btn-primary.active,
.tb4-sp .btn.btn-primary:not(:disabled):not(.disabled):active,
.tb4-sp .btn.btn-primary:not(:disabled):not(.disabled).active,
.tb4-sp .show > .btn.btn-primary.dropdown-toggle {
background-color: var(--green) !important;
background-image: none !important;
color: #fff !important;
border-color: var(--green) !important;
}
.tb4-sp .btn.btn-primary:focus,
.tb4-sp .btn.btn-primary:focus-visible,
.tb4-sp .btn.btn-primary.focus {
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(61,181,74,.35) !important;
}
.tb4-sp .btn.btn-primary:focus-visible {
outline: 2px solid var(--green) !important;
outline-offset: 2px;
}
/* END btn-focus-fix */
.tb4-sp .btn:not(.btn-primary):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; box-shadow: none; }
/* ---------- header band (logged in) ---------- */
.tb4-sp .sp-top { background: #fff; padding-top: 34px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.tb4-sp .crumbs { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.tb4-sp .crumbs a { color: var(--green-dk); font-weight: 700; text-decoration: none; }
.tb4-sp .crumbs span { margin: 0 6px; color: #b7b3ae; }
.tb4-sp .sp-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tb4-sp .sp-top-copy { min-width: 0; flex: 1 1 420px; }
.tb4-sp .sp-top .sp-h1 { margin: 0 0 8px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.015em; overflow-wrap: anywhere; }
.tb4-sp .sp-who { margin: 0; font-size: 15px; color: var(--muted); }
.tb4-sp .sp-who b { color: var(--ink); }
.tb4-sp .sp-who a { font-weight: 700; margin-left: 10px; white-space: nowrap; }
.tb4-sp .snt-sub { margin: 0 0 8px; font-size: 17px; color: var(--ink-soft); }
.tb4-sp .sp-subnav { display: flex; gap: 4px; margin-top: 26px; overflow-x: auto; }
.tb4-sp .sp-subnav a { display: inline-flex; align-items: center; padding: 14px 16px 13px; font: 700 15px/1 var(--sans); color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.tb4-sp .sp-subnav a.is-active { color: var(--ink); border-bottom-color: var(--green); }
.tb4-sp .spt-newbtn { font-size: 17px !important; padding: 16px 26px !important; min-height: 56px !important; margin-bottom: 6px; box-shadow: 0 12px 24px -12px rgba(61,181,74,.7); }
.tb4-sp .sp-top-row > .btn { margin-bottom: 6px; }
/* ---------- tinted work band + cards ---------- */
.tb4-sp .sp-work { background: var(--tint); padding-top: 40px; padding-bottom: 72px; }
.tb4-sp .sp-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp .sp-approved { color: var(--ink-soft); font-weight: 700; }
/* ---------- help strip ---------- */
.tb4-sp .sp-helpstrip { background: #fff; padding-top: 44px; padding-bottom: 44px; border-top: 1px solid var(--line); }
.tb4-sp .sp-helpstrip-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.tb4-sp .sp-hs { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 12px; background: #FAFAF8; border: 1px solid #ececec; }
.tb4-sp .sp-hs-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--tint); flex: 0 0 auto; position: relative; }
.tb4-sp .sp-hs-ic::after { content: ""; position: absolute; inset: 14px; border-radius: 3px; background: var(--green); }
.tb4-sp .sp-hs b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.tb4-sp .sp-hs p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tb4-sp .sp-hs a { font-weight: 700; }
/* ---------- login (logged out) ---------- */
.tb4-sp .spl-hero { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: start; padding-top: 56px; padding-bottom: 72px; background: #fff; }
.tb4-sp .eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--green-dk); }
.tb4-sp .spl-hero .sp-h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; margin: 0 0 18px; letter-spacing: -.015em; }
.tb4-sp .spl-hero .subhead { max-width: 42ch; font-size: 18px; line-height: 1.55; margin: 0 0 24px; color: var(--ink-soft); }
.tb4-sp .spl-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 640px; }
.tb4-sp .spl-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 14px; border-radius: 12px; background: #fff; border: 1px solid #ececec; }
.tb4-sp .spl-steps i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 900 14px/1 var(--sans); font-style: normal; }
.tb4-sp .spl-steps b { display: block; font-size: 15.5px; margin: 4px 0 3px; }
.tb4-sp .spl-steps span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.tb4-sp .spl-reply { margin: 0 0 14px; font-size: 18px; }
.tb4-sp .spl-contact, .tb4-sp .spl-noacct { margin: 0 0 12px; max-width: 600px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid #ececec; border-left: 5px solid var(--lime); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.tb4-sp .spl-contact a, .tb4-sp .spl-noacct a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tb4-sp .spl-side { min-width: 0; }
/* the component's login card */
.tb4-sp-login .sp-jhd .row { display: block; margin: 0 0 18px; }
.tb4-sp-login .sp-jhd .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin: 0; padding: 0; }
.tb4-sp-login .sp-jhd .card { border: 0; border-top: 6px solid var(--green); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-login .sp-jhd .card-body { padding: 28px 28px 22px; }
.tb4-sp-login .sp-jhd .card h3 { font-family: var(--serif) !important; font-size: 24px; margin: 0; }
.tb4-sp-login .sp-jhd .rounded-circle { background: #231F20 !important; color: #fff !important; border-radius: 12px !important; width: 48px !important; height: 48px !important; }
.tb4-sp-login .sp-jhd .card.bg-light { border-top: 0; border: 1.5px dashed #b7c98f; box-shadow: none; }
.tb4-sp-login .sp-jhd .card.bg-light .card-body { padding: 18px 20px; }
.tb4-sp-login .sp-jhd .border-top { border-top: 1px solid var(--line) !important; }
.tb4-sp-login .sp-jhd #com-form-login .btn-primary { width: 100%; min-height: 50px; font-size: 16px; }
.tb4-sp-login .sp-jhd .form-label { font-size: 14px; font-weight: 700; color: var(--ink); }
/* KB band */
.tb4-sp .spl-kbband { background: var(--tint); padding-top: 64px; padding-bottom: 76px; border-top: 6px solid var(--green); }
.tb4-sp .spl-kb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.tb4-sp .sp-h2 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; position: relative; padding-top: 18px; }
.tb4-sp .sp-h2::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #D7DF28, #9FCC45, #3DB54A); }
.tb4-sp .sp-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.tb4-sp .spl-kb-note { margin: 0 0 16px; padding-left: 18px; }
.tb4-sp .spl-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.tb4-sp .spl-kb { display: flex; flex-direction: column; padding: 24px 22px 20px; border-radius: 14px; background: #fff; border-top: 4px solid var(--green); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp .spl-kb:nth-child(4n+2) { border-top-color: var(--lime); } .tb4-sp .spl-kb:nth-child(4n+3) { border-top-color: var(--yellow); } .tb4-sp .spl-kb:nth-child(4n+4) { border-top-color: var(--green-dk); }
.tb4-sp .spl-kb-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--tint); margin-bottom: 16px; display: grid; place-items: center; color: var(--green); }
.tb4-sp .spl-kb-ic svg { width: 30px; height: 30px; display: block; }
.tb4-sp .spl-kb:hover .spl-kb-ic { background: #fff; box-shadow: inset 0 0 0 2px #cfe5b5; }
.tb4-sp .spl-kb h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.tb4-sp .spl-kb small { font: 800 14px/1 var(--sans); color: var(--green-dk); margin-top: auto; }
/* dark contact band */
.tb4-sp .lp-cta { background: #231F20; padding-top: 64px; padding-bottom: 64px; overflow: hidden; border-top: 6px solid var(--green); }
.tb4-sp .lp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.tb4-sp .lp-cta p { margin: 0 0 6px; font-size: 17px; line-height: 1.5; color: #c9c6c3; max-width: 56ch; }
.tb4-sp .lp-cta .sp-approved { color: #fff; }
.tb4-sp .lp-cta-h { margin: 0 0 12px; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; color: #fff !important; }
.tb4-sp .lp-cta-reach { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 15px !important; font-weight: 700; }
.tb4-sp .lp-cta-reach a { color: #9FCC45; }
.tb4-sp .lp-cta-reach span { color: #6b6764; }
.tb4-sp .lp-cta .btn-primary { font-size: 17px; padding: 17px 30px; }
/* ---------- My tickets ---------- */
.tb4-sp .spt-card { padding: 26px 28px 18px; }
.tb4-sp .spt-h2, .tb4-sp .snt-h2 { margin: 0 0 18px; font-size: 24px; line-height: 1.2; }
.tb4-sp .spt-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 6px; }
.tb4-sp .spt-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #F4F4F2; }
.tb4-sp .spt-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font: 800 15px/1 var(--sans); color: var(--muted); text-decoration: none; }
.tb4-sp .spt-tabs a i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e1dfdc; color: var(--ink-soft); display: grid; place-items: center; font-size: 12.5px; }
.tb4-sp .spt-tabs a.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(35,31,32,.15); }
.tb4-sp .spt-tabs a.is-active i { background: var(--green); color: #fff; }
.tb4-sp .spt-lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 30px; align-items: start; }
.tb4-sp .spt-legend { padding: 22px 24px; border-radius: 14px; background: #fff; border: 1px solid #e3ecd0; }
.tb4-sp .spt-legend ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.tb4-sp .st { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; font: 800 13px/1 var(--sans); white-space: nowrap; margin-right: 8px; }
.tb4-sp .st-new { background: #EEEDEB; color: #3a3637; } .tb4-sp .st-open { background: #E3F4E5; color: #1f6f2a; } .tb4-sp .st-wait { background: #F4F7C9; color: #4a4d0c; } .tb4-sp .st-closed { background: #fff; color: #5c5856; box-shadow: inset 0 0 0 1.5px #cfccc8; }
/* the component's filter bar + table */
.tb4-sp-list .sp-jhd #joomhelpdeskFormTS { margin-top: 12px !important; }
.tb4-sp-list .sp-jhd .rounded-3.border { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.tb4-sp-list .sp-jhd table.table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; }
.tb4-sp-list .sp-jhd table.table thead th { background: #fff !important; font: 900 11.5px/1 var(--sans) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #8a8582 !important; border-bottom: 1px solid var(--line); padding: 14px 12px !important; }
.tb4-sp-list .sp-jhd table.table td { padding: 16px 12px !important; border-top: 1px solid #efedea; vertical-align: middle; font-size: 15px; color: var(--ink-soft); }
.tb4-sp-list .sp-jhd table.table tbody tr:hover td { background: #FAFCF5; }
.tb4-sp-list .sp-jhd table.table td a { color: var(--ink) !important; font-weight: 700; font-size: 16.5px; }
.tb4-sp-list .sp-jhd .pagination__wrapper { font-size: 14px; color: var(--muted); padding-top: 12px; border-top: 1px solid #efedea; }
/* ---------- status / priority pills from the component (list + detail) ---------- */
.tb4-sp .sp-jhd .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font: 800 13px/1 var(--sans); }
.tb4-sp .sp-jhd .badge.bg-success { background: #E3F4E5 !important; color: #1f6f2a !important; }
.tb4-sp .sp-jhd .badge.bg-warning { background: #F4F7C9 !important; color: #4a4d0c !important; }
.tb4-sp .sp-jhd .badge.bg-primary { background: var(--green) !important; color: #fff !important; }
.tb4-sp .sp-jhd .badge.bg-info { background: #EEEDEB !important; color: #3a3637 !important; }
.tb4-sp .sp-jhd .badge.bg-secondary { background: #e1dfdc !important; color: var(--ink-soft) !important; }
/* ---------- component chrome inside the wrapper ---------- */
.tb4-sp .sp-jhd .form-control, .tb4-sp .sp-jhd .form-select, .tb4-sp .sp-jhd input[type="text"], .tb4-sp .sp-jhd input[type="password"] {
font: 500 16px/1.4 var(--sans); color: var(--ink); background-color: #fff; border: 1.5px solid #cfccc8; border-radius: 8px; min-height: 46px; padding: 10px 12px; box-shadow: none; max-width: 100%;
}
.tb4-sp .sp-jhd .form-select-sm { min-height: 40px; padding: 6px 34px 6px 10px; font-size: 15px; }
.tb4-sp .sp-jhd .form-control:focus, .tb4-sp .sp-jhd .form-select:focus, .tb4-sp .sp-jhd input:focus { outline: 3px solid rgba(61,181,74,.35); border-color: var(--green); box-shadow: none; }
.tb4-sp .sp-jhd .input-group-text { background: #F4F4F2; border: 1.5px solid #cfccc8; border-right: 0; border-radius: 8px 0 0 8px; color: var(--muted); }
.tb4-sp .sp-jhd .input-group > .form-control { border-radius: 0 8px 8px 0; }
.tb4-sp .sp-jhd label, .tb4-sp .sp-jhd .form-label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; display: inline-block; }
.tb4-sp .sp-jhd .form-check-label { font-weight: 400; color: var(--ink-soft); font-size: 15px; }
.tb4-sp .sp-jhd .form-group { margin: 0 0 18px; }
.tb4-sp .sp-jhd h2 { font-size: 20px; margin: 22px 0 14px; }
.tb4-sp .sp-jhd h5, .tb4-sp .sp-jhd h6 { font-size: 16px; }
.tb4-sp .sp-jhd .text-muted { color: var(--muted) !important; }
.tb4-sp .sp-jhd .dropdown-menu { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(35,31,32,.4); }
.tb4-sp .sp-jhd .dropdown-item.active, .tb4-sp .sp-jhd .dropdown-item:active { background: var(--tint); color: var(--ink); }
/* SCEditor (message editor): full width, site border */
.tb4-sp .sp-jhd .sceditor-container { width: 100% !important; max-width: 100%; border: 1.5px solid #cfccc8 !important; border-radius: 8px !important; overflow: hidden; }
.tb4-sp .sp-jhd .sceditor-container iframe, .tb4-sp .sp-jhd .sceditor-container textarea { width: 100% !important; }
.tb4-sp .sp-jhd .sceditor-toolbar { background: #FAFAF8; border-bottom: 1px solid var(--line); }
/* attachment upload */
.tb4-sp .sp-jhd .attach-dropzone { border: 2px dashed #b7c98f !important; border-radius: 12px !important; background: #FAFCF5 !important; padding: 22px !important; text-align: center; }
.tb4-sp .sp-jhd .attach-dropzone i { color: var(--green); }
/* ---------- new ticket ---------- */
.tb4-sp .snt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.tb4-sp .snt-form { padding: 28px 30px 24px; min-width: 0; }
.tb4-sp-open .sp-jhd #newticket > h2, .tb4-sp-open .sp-jhd .joomhelpdesk_message_details_header h2 { font-size: 13px; font-weight: 900 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #8a8582; margin: 18px 0 12px; }
.tb4-sp-open .sp-jhd .cg-product, .tb4-sp-open .sp-jhd .cg-department { display: inline-block; vertical-align: top; margin-right: 12px; }
.tb4-sp-open .sp-jhd #jhd_product_display, .tb4-sp-open .sp-jhd #jhd_department_display { background: var(--tint); border-color: #dfe9c8; font-weight: 700; min-width: 220px; }
.tb4-sp-open .sp-jhd .input-group-text img { width: 24px; height: 24px; }
/* department / product pickers the component shows when more than one is available (markup varies: style links + cards generically) */
.tb4-sp-open .sp-jhd :is(.product, .department, .joomhelpdesk_department, .joomhelpdesk_product) { display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin: 0 0 12px; border: 1.5px solid #e1dfdc; border-radius: 12px; background: #fff; }
.tb4-sp-open .sp-jhd :is(.product, .department, .joomhelpdesk_department, .joomhelpdesk_product):hover { border-color: var(--green); background: #FAFCF5; }
.tb4-sp-open .sp-jhd :is(.product, .department) a { color: var(--ink); font-weight: 800; font-size: 17px; }
.tb4-sp-open .sp-jhd .backprod { margin-right: 8px; }
.tb4-sp-open .sp-jhd #addcomment { min-height: 50px; padding: 14px 24px; font-size: 16px; }
.tb4-sp .snt-submitnote { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.tb4-sp .snt-deptnote { margin: 0 0 12px; padding-left: 18px; font-size: 14px; }
.tb4-sp .snt-side { display: flex; flex-direction: column; gap: 18px; }
.tb4-sp .snt-time { padding: 20px 22px; background: #231F20; color: #fff; border-top: 5px solid var(--lime); }
.tb4-sp .snt-time-h { margin: 0 0 8px; font-size: 19px; color: #fff !important; }
.tb4-sp .snt-time p { margin: 0; color: #e8e6e3; }
.tb4-sp .snt-tips, .tb4-sp .snt-kbp { padding: 20px 22px; }
.tb4-sp .snt-tips h3, .tb4-sp .snt-kbp h3 { margin: 0 0 10px; font-size: 16px; }
.tb4-sp .snt-tips ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--muted); }
.tb4-sp .snt-kbp p { margin: 0; font-weight: 700; }
/* ---------- ticket detail ---------- */
.tb4-sp .sdt-waiting { display: block; padding: 14px 18px; border-radius: 12px; background: #F4F7C9; border: 1px solid #e3e79a; color: #3d400a; margin-bottom: 22px; }
.tb4-sp-detail .sp-jhd > #jb-template, .tb4-sp-detail .sp-jhd #jb-template { height: auto !important; }
.tb4-sp-detail .sp-jhd .my-4 { margin: 0 0 12px !important; }
.tb4-sp-detail .sp-jhd .text-muted.small.mb-4 { font-size: 14px; margin-bottom: 18px !important; }
.tb4-sp-detail .sp-jhd .row { row-gap: 20px; }
.tb4-sp-detail .sp-jhd .col-md-8 > h2 { font-size: 22px; font-family: var(--serif) !important; margin: 0 0 14px; }
.tb4-sp-detail .sp-jhd #inlinereply { background: #fff; border: 0 !important; border-radius: 14px !important; padding: 22px !important; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-detail .sp-jhd #inlinereply .btn { min-height: 44px; padding: 11px 18px; margin: 6px 6px 0 0; }
.tb4-sp-detail .sp-jhd .sdt-note { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.tb4-sp-detail .sp-jhd .jhd-message-card { border: 0; border-left: 4px solid var(--green); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 10px 24px -18px rgba(35,31,32,.3); overflow: hidden; }
.tb4-sp-detail .sp-jhd .jhd-message-card.jhd-type-warning { border-left-color: var(--lime); }
.tb4-sp-detail .sp-jhd .jhd-message-card.jhd-type-info { border-left-color: var(--yellow); }
.tb4-sp-detail .sp-jhd .jhd-message-card .card-header { background: #fff !important; border-bottom: 1px solid #efedea; }
.tb4-sp-detail .sp-jhd .jhd-message-body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }
.tb4-sp-detail .sp-jhd .jhd-attachment { border-radius: 10px !important; background: #FAFAF8 !important; }
.tb4-sp-detail .sp-jhd .messages_key_container .card { border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.tb4-sp-detail .sp-jhd .jhd-attachments-section h5 { font-family: var(--serif) !important; font-size: 20px; }
.tb4-sp-detail .sp-jhd .jhd-attachment-card { border-radius: 12px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.tb4-sp-detail .sp-jhd .col-md-4 .card { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); overflow: hidden; }
.tb4-sp-detail .sp-jhd .col-md-4 .card-header { background: #fff; border-bottom: 1px solid #efedea; padding: 14px 16px !important; }
.tb4-sp-detail .sp-jhd .col-md-4 .card-title { font-size: 15px; font-weight: 900 !important; }
.tb4-sp-detail .sp-jhd .col-md-4 th { font-size: 13px; font-weight: 700; color: var(--muted); padding: 10px 8px 10px 16px !important; }
.tb4-sp-detail .sp-jhd .col-md-4 td { font-size: 15px; color: var(--ink); padding: 10px 16px 10px 8px !important; }
.tb4-sp .sdt-pend { margin-top: 12px; }
/* ---------- responsive ---------- */
@media (max-width: 1100px) {
.tb4-sp .spl-hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
.tb4-sp .spl-steps { grid-template-columns: 1fr; }
.tb4-sp .snt-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
.tb4-sp .spt-lower { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.tb4-sp { --gut: 20px; }
.tb4-sp .sp-top { padding-top: 22px; }
.tb4-sp .sp-top-row { flex-direction: column; align-items: stretch; gap: 16px; }
.tb4-sp .sp-top-row > .btn { width: 100%; }
.tb4-sp .sp-top-copy { flex: 1 1 auto; }
.tb4-sp .sp-subnav { margin: 18px calc(var(--gut) * -1) 0; padding: 0 var(--gut); }
.tb4-sp .sp-subnav a { padding: 13px 12px 12px; font-size: 14.5px; }
.tb4-sp .sp-work { padding-top: 24px; padding-bottom: 52px; }
.tb4-sp .spl-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; padding-bottom: 44px; }
.tb4-sp .spl-hero .sp-h1 { font-size: 36px; }
.tb4-sp-login .sp-jhd .card-body { padding: 22px 18px 18px; }
.tb4-sp .spl-kbband { padding-top: 44px; padding-bottom: 52px; }
.tb4-sp .lp-cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.tb4-sp .lp-cta .btn-primary { width: 100%; }
.tb4-sp .lp-cta-actions { width: 100%; }
.tb4-sp .spt-card, .tb4-sp .snt-form { padding: 18px 14px 12px; }
.tb4-sp .spt-tabs { display: flex; border-radius: 14px; }
.tb4-sp .spt-tabs a { flex: 1 1 40%; justify-content: center; padding: 10px 6px; font-size: 14px; }
.tb4-sp .snt-grid { grid-template-columns: 1fr; }
.tb4-sp .snt-side .snt-time { order: -1; }
/* ticket table -> stacked rows (no horizontal overflow at 390px) */
.tb4-sp-list .sp-jhd table.table thead { display: none; }
.tb4-sp-list .sp-jhd table.table, .tb4-sp-list .sp-jhd table.table tbody, .tb4-sp-list .sp-jhd table.table tr, .tb4-sp-list .sp-jhd table.table td { display: block; width: 100% !important; }
.tb4-sp-list .sp-jhd table.table tr { padding: 12px 0; border-top: 1px solid #efedea; }
.tb4-sp-list .sp-jhd table.table td { border: 0; padding: 4px 4px !important; text-align: left !important; }
.tb4-sp-open .sp-jhd .cg-product, .tb4-sp-open .sp-jhd .cg-department { display: block; margin-right: 0; }
.tb4-sp-open .sp-jhd #jhd_product_display, .tb4-sp-open .sp-jhd #jhd_department_display { min-width: 0; }
.tb4-sp .sp-jhd .d-flex { flex-wrap: wrap; }
}
/* ======================================================================================================
* deploy-support-profile-v1d additions: department tiles (JoomHelpdesk department step) and the
* Email & password page (com_users profile override, root .tb4-sp.tb4-sp-profile). Legacy markup is not
* hidden with CSS any more: the old hero / intro / sidebar modules are unassigned from these pages and the component
* tab bar + login header block are removed from the HTML by the helper.
* ====================================================================================================== */
/* ---------- department step: name-only tiles, 3 x 2 desktop, 2 across mobile ---------- */
.tb4-sp-dept .sp-jhd .proddept-card-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; margin: 10px 0 20px; }
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile { display: flex; align-items: center; min-height: 86px; margin: 0; padding: 18px 18px 18px 20px; border: 1.5px solid #cfccc8; border-left: 5px solid var(--lime); border-radius: 12px; background: #fff; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile:hover { border-color: var(--green); background: var(--tint); }
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; border-color: var(--green); }
.tb4-sp-dept .sp-jhd .tb4-dtile-name { font: 700 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.tb4-sp-dept .sp-jhd .backprod { margin-top: 4px; }
/* ---------- Email & password (com_users profile edit) ---------- */
.tb4-sp-profile .spp-grid { display: grid; grid-template-columns: minmax(0, 760px) 340px; gap: 32px; align-items: start; justify-content: start; }
.tb4-sp-profile .spp-form { padding: 30px 32px 28px; border-top: 6px solid var(--green); min-width: 0; }
.tb4-sp-profile .spp-form .spp-h2 { margin: 0 0 18px; }
.tb4-sp-profile .spp-form form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.tb4-sp-profile .spp-sec { border: 0; margin: 0 0 8px; padding: 20px 0 6px; border-top: 1px solid #efedea; min-width: 0; }
.tb4-sp-profile .spp-sec legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font: 900 12px/1.2 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase !important; color: #6b8a3a; }
.tb4-sp-profile .spp-sec legend + * { clear: both; }
.tb4-sp-profile .spp-sec > p { clear: both; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.tb4-sp-profile .spp-form .control-group { display: block; margin: 0 0 18px; }
.tb4-sp-profile .spp-form .control-label { width: auto; float: none; padding: 0; text-align: left; margin: 0 0 7px; }
.tb4-sp-profile .spp-form .control-label label { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.tb4-sp-profile .spp-form .control-label .star, .tb4-sp-profile .spp-form .control-label .required { color: #b3261e; }
.tb4-sp-profile .spp-form .controls { margin: 0; max-width: 520px; }
.tb4-sp-profile .spp-form .form-control { font: 500 16px/1.4 var(--sans); color: var(--ink); background-color: #fff; border: 1.5px solid #cfccc8; border-radius: 8px; min-height: 46px; padding: 10px 12px; box-shadow: none; width: 100%; max-width: 100%; }
.tb4-sp-profile .spp-form .form-control:focus { outline: 3px solid rgba(61,181,74,.35); border-color: var(--green); box-shadow: none; }
.tb4-sp-profile .spp-form .form-control[readonly] { background: #F4F4F2; color: #6b6764; border-style: dashed; cursor: not-allowed; }
.tb4-sp-profile .spp-form .form-control.invalid, .tb4-sp-profile .spp-form .form-control:invalid.form-control-danger { border-color: #b3261e; }
.tb4-sp-profile .spp-form label.invalid, .tb4-sp-profile .spp-form .form-control-feedback { color: #b3261e; }
.tb4-sp-profile .spp-form .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
.tb4-sp-profile .spp-form .input-group > .form-control { border-radius: 8px 0 0 8px; }
.tb4-sp-profile .spp-form .input-password-toggle { min-height: 46px; padding: 0 14px; border-radius: 0 8px 8px 0; border: 1.5px solid #cfccc8; border-left: 0; background: #fff; color: var(--ink); }
.tb4-sp-profile .spp-form .input-password-toggle:hover { background: #F4F4F2; }
.tb4-sp-profile .spp-form meter { width: 100%; max-width: 520px; height: 8px; margin: 8px 0 2px; }
.tb4-sp-profile .spp-form small.form-text, .tb4-sp-profile .spp-form .form-text, .tb4-sp-profile .spp-form [id$="-desc"] { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tb4-sp-profile .spp-rules { list-style: none; margin: -4px 0 18px; padding: 12px 14px; max-width: 520px; border-radius: 10px; background: #FAFCF5; border: 1px solid #e3ecd0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tb4-sp-profile .spp-rules li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--muted); }
.tb4-sp-profile .spp-rules li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: 0 0 auto; }
.tb4-sp-profile .spp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid #efedea; }
.tb4-sp-profile .spp-actions .btn { min-height: 48px; padding: 13px 22px; font-size: 15px; }
.tb4-sp-profile .spp-side { display: flex; flex-direction: column; gap: 18px; }
.tb4-sp-profile .spp-panel { padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid #e3ecd0; }
.tb4-sp-profile .spp-panel h2 { margin: 10px 0 4px; font: 900 12px/1.2 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase !important; color: #8a8582; }
.tb4-sp-profile .spp-panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 900 !important; color: var(--ink); }
.tb4-sp-profile .spp-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tint); }
.tb4-sp-profile .spp-ic::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--green-dk); }
.tb4-sp-profile .spp-who { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tb4-sp-profile .spp-who b { font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.tb4-sp-profile .spp-who span { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.tb4-sp-profile .spp-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.tb4-sp-profile .spp-help2 { background: #F7FBEF; }
.tb4-sp-profile .spp-help2 p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.tb4-sp-profile .spp-help2 a { font-weight: 800; color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
.tb4-sp-profile .spp-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
}
@media (max-width: 860px) {
.tb4-sp-dept .sp-jhd .proddept-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile { min-height: 72px; padding: 14px 12px 14px 14px; }
.tb4-sp-dept .sp-jhd .tb4-dtile-name { font-size: 15px; }
.tb4-sp-profile .spp-grid { grid-template-columns: 1fr; gap: 24px; }
.tb4-sp-profile .spp-form { padding: 20px 16px; }
.tb4-sp-profile .spp-actions .btn { flex: 1 1 100%; }
}
/* deploy-kb-icons-v1b: KB view (view=kb) category cards. The component's category thumbnail ![]()
(404) is replaced
in the HTML by span.kb-cat-ic with an inline line icon (kb/snippet_cat.php). No .tb4-sp root here, so no var(). */
.kb-catcard .kb-cat-ic { width: 42px; height: 42px; border-radius: 10px; background: #F3F8E6; color: #3DB54A; display: grid; place-items: center; }
.kb-catcard .kb-cat-ic svg { width: 24px; height: 24px; display: block; }
/* deploy-kbsearch-depticons-v1 (design: Mockup Bot deploy-support-kbsearch-depticons-v1 snippets/kb-search.css + dept-icons.css).
1) KB search box .tb4-kbsearch (_tb4sp/kb-search.php): KB view (no .tb4-sp root, so literal colours) + login page band. */
.tb4-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.tb4-kbsearch { margin: 0; max-width: 640px; width: 100%; font-family: "Lato", "Helvetica Neue", Arial, sans-serif; }
.tb4-kbsearch-field { display: flex; align-items: center; gap: 0; height: 56px; padding: 0 6px 0 0; background: #fff; border: 1.5px solid #cfccc8; border-radius: 12px; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.tb4-kbsearch-field:focus-within { border-color: #3DB54A; box-shadow: 0 0 0 3px rgba(61,181,74,.18); }
.tb4-kbsearch-ic { flex: 0 0 48px; display: grid; place-items: center; color: #5c5856; line-height: 0; }
.tb4-kbsearch-ic svg { width: 20px; height: 20px; display: block; }
.tb4-kbsearch .tb4-kbsearch-input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 10px 0 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: 0; font-family: inherit; font-weight: 400; font-size: 17px; line-height: 1.3; color: #231F20; -webkit-appearance: none; appearance: none; }
.tb4-kbsearch .tb4-kbsearch-input::placeholder { color: #8a8582; opacity: 1; }
.tb4-kbsearch .tb4-kbsearch-input::-webkit-search-cancel-button { cursor: pointer; }
.tb4-kbsearch .tb4-kbsearch-btn { flex: 0 0 auto; height: 44px; margin: 0; padding: 0 22px; border: 0; border-radius: 9px; background: #3DB54A; color: #fff; font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important; font-weight: 700; font-size: 16px; line-height: 1; text-transform: none !important; letter-spacing: normal !important; cursor: pointer; transition: background-color .15s; }
.tb4-kbsearch .tb4-kbsearch-btn:hover { background: #2f8f3a; color: #fff; }
.tb4-kbsearch .tb4-kbsearch-btn:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
@media (max-width: 640px) {
.tb4-kbsearch-field { height: 52px; padding-right: 5px; }
.tb4-kbsearch-ic { flex-basis: 42px; }
.tb4-kbsearch .tb4-kbsearch-input { font-size: 16px; } /* 16px: no iOS zoom on focus */
.tb4-kbsearch .tb4-kbsearch-btn { height: 42px; padding: 0 16px; font-size: 15px; }
}
/* login page KB band: search box right of the heading, "Browse all articles" under it (stacks on mobile) */
.tb4-sp .spl-kb-head .tb4-kbsearch-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 1 520px; }
.tb4-sp .spl-kb-head .tb4-kbsearch-wrap .tb4-kbsearch { flex: none; }
.tb4-sp .spl-kb-browse { font: 700 14px/1.2 var(--sans); color: var(--green-dk); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
.tb4-sp .spl-kb-head .tb4-kbsearch-wrap { align-items: stretch; flex: 1 1 100%; width: 100%; }
}
/* KB view hero + results page (kb/default_kbsearch.php adds .tb4-kb-results / .tb4-kb-count): heading not uppercase */
.joomhelpdesk_kb_main .kb-hero-search .tb4-kbsearch { margin: 6px 0 28px; }
.tb4-kb-results .kb-hero .page-header h1 { text-transform: none !important; letter-spacing: normal !important; }
.tb4-kb-results .tb4-kb-count { font: 700 15px/1.4 "Lato", Arial, sans-serif; color: #5c5856; margin: 0 0 16px; }
/* 2) department step tiles (_tb4sp/dept-icons.php): 42px #F3F8E6 box, 24px green line icon left of the name;
at <=860px (2 across) the icon sits above the name, centred. */
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile { gap: 14px; }
.tb4-sp-dept .sp-jhd .tb4-dtile-ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; background: #F3F8E6; color: #3DB54A; display: grid; place-items: center; transition: background-color .15s, box-shadow .15s; }
.tb4-sp-dept .sp-jhd .tb4-dtile-ic svg { width: 24px; height: 24px; display: block; }
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile:hover .tb4-dtile-ic,
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile:focus-visible .tb4-dtile-ic { background: #fff; box-shadow: inset 0 0 0 2px #cfe5b5; }
@media (max-width: 860px) {
.tb4-sp-dept .sp-jhd .proddept-card.tb4-dtile { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.tb4-sp-dept .sp-jhd .tb4-dtile-name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.tb4-sp-dept .sp-jhd .tb4-dtile-ic { flex-basis: 36px; width: 36px; height: 36px; border-radius: 9px; }
.tb4-sp-dept .sp-jhd .tb4-dtile-ic svg { width: 21px; height: 21px; }
}
/* ---------- support-copy-v1 (Bridgette's support copy review, 2026-09-28): approved copy elements (nothing hidden) ---------- */
.tb4-sp .spt-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 20px 22px; border-radius: 14px; background: #fff; border: 1.5px dashed #cfccc8; }
.tb4-sp .spt-empty .spt-empty-btn { flex: 0 0 auto; }
.tb4-sp .spt-empty h3 { margin: 0 0 6px; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.tb4-sp .spt-empty p { margin: 0; font-size: 15px; color: var(--muted); }
.tb4-sp .sdt-waiting a { margin-left: 6px; font-weight: 700; color: var(--green-ink); text-decoration: underline; }
.tb4-sp .sdt-reopen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 12px; background: var(--tint); }
.tb4-sp .sdt-reopen p { margin: 0; font-weight: 700; color: var(--ink); }
.tb4-sp .sdt-unas, .tb4-sp .sdt-closehelp { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.tb4-sp .snt-urgent { padding: 18px 22px; border-left: 5px solid var(--yellow); }
.tb4-sp .snt-urgent p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.tb4-sp .snt-urgent a { font-weight: 700; color: var(--green-ink); white-space: nowrap; }
.tb4-sp .snt-subjhelp, .tb4-sp .tb4-upload-help { margin: 6px 0 0; font: 400 14px/1.45 var(--sans); color: var(--muted); }
.tb4-sp-dept .sp-jhd .tb4-dtile-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb4-sp-dept .sp-jhd .tb4-dtile-desc { font: 400 14px/1.4 var(--sans); color: var(--muted); }
@media (max-width: 860px) {
.tb4-sp-dept .sp-jhd .tb4-dtile-txt { align-items: center; }
.tb4-sp-dept .sp-jhd .tb4-dtile-desc { font-size: 13px; }
}
/* ---------- deploy-guest-track-off-v1: login field icons (Bridgette, 2026-09-28; from Mockup Bot's deploy-login-icons-v1) ----------
1. The type reset above (.tb4-sp :is(... span ...) { font-family: var(--sans) !important }) also hit the component's Font Awesome
icons, so their glyphs were drawn in Lato (empty box). Icon-font elements get their icon font back
(same specificity, later + !important, so this wins over the reset). The reset itself is unchanged.
2. The helper swaps the username / password field icon spans for inline SVGs (.tb4-field-ic) that sit inside the field. */
.tb4-sp :is(.fas, .far, .fa, .fa-solid, .fa-regular, [class^="icon-"], [class*=" icon-"]) { font-family: var(--fa-style-family, "Font Awesome 6 Free") !important; }
.tb4-sp :is(.fab, .fa-brands) { font-family: "Font Awesome 6 Brands" !important; }
.tb4-sp .sp-jhd .input-group:has(> .tb4-field-ic) { position: relative; flex-wrap: nowrap; }
.tb4-sp .sp-jhd .tb4-field-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.tb4-sp .sp-jhd .tb4-field-ic svg { display: block; width: 20px; height: 20px; }
.tb4-sp .sp-jhd .tb4-field-ic + .form-control { width: 100%; min-width: 0; margin-left: 0 !important; padding-left: 44px !important; border-radius: 8px !important; }
.tb4-sp .sp-jhd .input-group:focus-within > .tb4-field-ic { color: var(--green-dk); }
@media (max-width: 640px) {
.tb4-sp .sp-jhd .tb4-field-ic { left: 12px; }
.tb4-sp .sp-jhd .tb4-field-ic + .form-control { padding-left: 42px !important; font-size: 16px; } /* 16px: no iOS zoom */
}
/* ===== deploy-support-polish-v1 BEGIN (Bridgette approved 2026-10-17; append-only, nothing above changed) ===== */
/* 1) Department step search (JHD form#searchDept .search-compact): JHD collapses the input to width 0 / opacity 0,
leaving a lone search icon right-aligned with an empty gap. Show it as a real field + attached green icon button. */
.tb4-sp .sp-jhd .search-form-compact { display: flex; justify-content: flex-start; margin: 0 0 18px; }
.tb4-sp .sp-jhd .search-form-compact .search-compact { width: 100%; max-width: 440px; }
.tb4-sp .sp-jhd .search-compact .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.tb4-sp .sp-jhd .search-compact .input-group > .form-control { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 10px 14px; opacity: 1; border: 1.5px solid #cfccc8; border-right: 0; border-radius: 8px 0 0 8px; background-color: #fff; }
.tb4-sp .sp-jhd .search-compact .input-group > .form-control::placeholder { color: #8a8582; opacity: 1; }
.tb4-sp .sp-jhd .search-compact .input-group > .btn-search-toggle { flex: 0 0 46px; width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--green); border: 1.5px solid var(--green); border-radius: 0 8px 8px 0; color: #fff; }
.tb4-sp .sp-jhd .search-compact .input-group > .btn-search-toggle:hover { background: var(--green-dk); border-color: var(--green-dk); color: #fff; }
.tb4-sp .sp-jhd .search-compact .input-group > .btn-search-toggle:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
.tb4-sp .sp-jhd .search-compact .input-group > .btn-search-toggle i { font-size: 16px; line-height: 1; color: inherit; }
.tb4-sp .sp-jhd .search-compact:is(.expanded, .has-value) .input-group > .btn-search-toggle { border-radius: 0; }
.tb4-sp .sp-jhd .search-compact:is(.expanded, .has-value) .input-group > .btn-search-reset { flex: 0 0 46px; width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0; justify-content: center; background: #fff; color: var(--muted); border: 1.5px solid #cfccc8; border-left: 0; border-radius: 0 8px 8px 0; }
.tb4-sp .sp-jhd .search-compact:is(.expanded, .has-value) .input-group > .btn-search-reset:hover { background: #F4F4F2; color: var(--ink); }
/* 2) Intro flush with the card heading: the department-step intro (p.snt-deptnote, after h2.snt-h2) had padding-left 18px. */
.tb4-sp .snt-deptnote { padding-left: 0; }
/* 3a) 'Display #' list-limit select (nav.pagination__wrapper .limit select#limit_base): site form-control look, aligned row. */
.tb4-sp .sp-jhd .pagination__wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 14px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.tb4-sp .sp-jhd .pagination__wrapper > .text-end { margin: 0 !important; text-align: left !important; }
.tb4-sp .sp-jhd .pagination__wrapper .pagination-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 0 auto !important; padding: 0; }
.tb4-sp .sp-jhd .pagination__wrapper .limit { float: none !important; display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.tb4-sp .sp-jhd .pagination__wrapper .limit .form-select { width: auto; min-width: 92px; height: 42px; min-height: 42px; margin: 0; padding: 6px 38px 6px 12px; font: 500 15px/1.2 var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235c5856' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px; border: 1.5px solid #cfccc8; border-radius: 8px; cursor: pointer; }
.tb4-sp .sp-jhd .pagination__wrapper .limit .form-select:hover { border-color: #8a8582; }
/* 3b) 'Back' (a.btn.btn-light.border.backprod): same size/look as the site secondary button (.sp-btn-light, e.g. 'Back to My tickets').
!important on border only because Bootstrap's .border utility is !important. */
.tb4-sp .sp-jhd a.btn.backprod { min-height: 48px; padding: 13px 20px; font: 700 15px/1.1 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #b7b3ae !important; border-radius: 6px; text-decoration: none !important; }
.tb4-sp .sp-jhd a.btn.backprod:hover { background: #F4F4F2; color: var(--ink); border-color: #8a8582 !important; }
.tb4-sp .sp-jhd a.btn.backprod:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
.tb4-sp-open .sp-jhd a.btn.backprod { min-height: 50px; padding: 14px 22px; vertical-align: middle; }
@media (max-width: 640px) {
.tb4-sp .sp-jhd .search-form-compact .search-compact { max-width: none; }
.tb4-sp .sp-jhd .search-compact .input-group > .form-control { font-size: 16px; } /* 16px: no iOS zoom */
.tb4-sp .sp-jhd .pagination__wrapper .pagination-toolbar { margin-left: 0 !important; }
.tb4-sp .sp-jhd .pagination__wrapper .limit .form-select { font-size: 16px; }
}
/* ===== deploy-support-polish-v1 END ===== */
/* ===== deploy-support-polish-v2 BEGIN (append-only, nothing above changed) ===== */
/* Email & password page (com_users profile, root .tb4-sp.tb4-sp-profile): deploy-support-profile-v1d capped the form
column at minmax(0, 760px) with justify-content:start, so form + 340px sidebar stopped ~46px short of the support
container edge at desktop widths. Let the form column take the remaining space so the sidebar's right edge lines up
with the container (same edge as the header/tabs and the green Contact button). Profile page only. */
.tb4-sp.tb4-sp-profile .spp-grid { grid-template-columns: minmax(0, 1fr) 340px; justify-content: stretch; width: 100%; max-width: none; }
@media (max-width: 1100px) {
.tb4-sp.tb4-sp-profile .spp-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
.tb4-sp.tb4-sp-profile .spp-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ===== deploy-support-polish-v2 END ===== */
/* ===== deploy-kb-fix-v1 BEGIN (append-only, nothing above changed) ===== */
/* KB landing / results search (JoomHelpdesk core form.kb-search > .input-group: icon chip + input + Search button).
The theme gave the input 40px height inside a 56px group and Bootstrap/UIkit widths fought each other. One joined row:
icon chip + input fill the width, the button is sized to its label; same look as the polish-v1 ticket search
(1.5px #cfccc8 border, 8px outer radius, green attached button). No .tb4-sp root here, so literal colours. */
.joomhelpdesk_kb_main .kb-search { max-width: 720px; margin: 6px 0 28px; }
.joomhelpdesk_kb_main .kb-search .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; height: auto; }
.joomhelpdesk_kb_main .kb-search .input-group > .input-group-text { flex: 0 0 48px; width: 48px; height: 52px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: #5c5856; border: 1.5px solid #cfccc8; border-right: 0; border-radius: 8px 0 0 8px; box-sizing: border-box; }
.joomhelpdesk_kb_main .kb-search .input-group > .input-group-text i { font-size: 17px; line-height: 1; color: inherit !important; }
.joomhelpdesk_kb_main .kb-search .input-group > .form-control { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: 52px; min-height: 52px; margin: 0; padding: 0 12px 0 0 !important; border: 1.5px solid #cfccc8; border-left: 0 !important; border-right: 0; border-radius: 0; background: #fff; box-shadow: none; font: 400 17px/1.3 "Lato", "Helvetica Neue", Arial, sans-serif; color: #231F20; box-sizing: border-box; }
.joomhelpdesk_kb_main .kb-search .input-group > .form-control::placeholder { color: #8a8582; opacity: 1; }
.joomhelpdesk_kb_main .kb-search .input-group > .btn { flex: 0 0 auto; width: auto; height: 52px; min-height: 52px; margin: 0; padding: 0 22px; background: #3DB54A; border: 1.5px solid #3DB54A; border-radius: 0 8px 8px 0; color: #fff; font: 700 16px/1 "Lato", "Helvetica Neue", Arial, sans-serif !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; box-sizing: border-box; }
.joomhelpdesk_kb_main .kb-search .input-group > .btn:hover { background: #2f8f3a; border-color: #2f8f3a; color: #fff; }
.joomhelpdesk_kb_main .kb-search .input-group > .btn:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
.joomhelpdesk_kb_main .kb-search .input-group:focus-within > :is(.input-group-text, .form-control, .btn) { border-color: #3DB54A; }
/* KB category card icon box next to the title (kb/default.php puts span.kb-cat-ic there) */
.kb-catcard .kb-cat-ic { flex: 0 0 42px; color: #3DB54A; }
@media (max-width: 640px) {
.joomhelpdesk_kb_main .kb-search .input-group > .input-group-text { flex-basis: 42px; width: 42px; height: 48px; }
.joomhelpdesk_kb_main .kb-search .input-group > .form-control { height: 48px; min-height: 48px; font-size: 16px; } /* 16px: no iOS zoom */
.joomhelpdesk_kb_main .kb-search .input-group > .btn { height: 48px; min-height: 48px; padding: 0 16px; font-size: 15px !important; }
}
/* ===== deploy-kb-fix-v1 END ===== */
/* ===== deploy-kb-search-v1 BEGIN (append-only, nothing above changed) ===== */
/* (A) KB search row on EVERY KB view (landing, category catid=N, search results). Staging markup is the same
form.kb-search > .input-group (span.input-group-text + input.form-control + button.btn) on all of them; kb-fix-v1 scoped it
to .joomhelpdesk_kb_main. This re-states the same joined look under the JoomHelpdesk view root .joomhelpdesk_view_kb too,
so the row stays identical if a view prints without the kb_main wrapper. Same values as kb-fix-v1. */
.joomhelpdesk_view_kb form.kb-search { max-width: 720px; margin: 6px 0 28px; }
.joomhelpdesk_view_kb form.kb-search .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; height: auto; }
.joomhelpdesk_view_kb form.kb-search .input-group > .input-group-text { flex: 0 0 48px; width: 48px; height: 52px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: #5c5856; border: 1.5px solid #cfccc8; border-right: 0; border-radius: 8px 0 0 8px; box-sizing: border-box; }
.joomhelpdesk_view_kb form.kb-search .input-group > .input-group-text i { font-size: 17px; line-height: 1; color: inherit !important; }
.joomhelpdesk_view_kb form.kb-search .input-group > .form-control { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: 52px; min-height: 52px; margin: 0; padding: 0 12px 0 0 !important; border: 1.5px solid #cfccc8; border-left: 0 !important; border-right: 0; border-radius: 0; background: #fff; box-shadow: none; font: 400 17px/1.3 "Lato", "Helvetica Neue", Arial, sans-serif; color: #231F20; box-sizing: border-box; }
.joomhelpdesk_view_kb form.kb-search .input-group > .form-control::placeholder { color: #8a8582; opacity: 1; }
.joomhelpdesk_view_kb form.kb-search .input-group > .btn { flex: 0 0 auto; width: auto; height: 52px; min-height: 52px; margin: 0; padding: 0 22px; background: #3DB54A; border: 1.5px solid #3DB54A; border-radius: 0 8px 8px 0; color: #fff; font: 700 16px/1 "Lato", "Helvetica Neue", Arial, sans-serif !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; box-sizing: border-box; }
.joomhelpdesk_view_kb form.kb-search .input-group > .btn:hover { background: #2f8f3a; border-color: #2f8f3a; color: #fff; }
.joomhelpdesk_view_kb form.kb-search .input-group > .btn:focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
.joomhelpdesk_view_kb form.kb-search .input-group:focus-within > :is(.input-group-text, .form-control, .btn) { border-color: #3DB54A; }
.tb4-kb-results form.kb-search { margin-bottom: 20px; }
@media (max-width: 640px) {
.joomhelpdesk_view_kb form.kb-search .input-group > .input-group-text { flex-basis: 42px; width: 42px; height: 48px; }
.joomhelpdesk_view_kb form.kb-search .input-group > .form-control { height: 48px; min-height: 48px; font-size: 16px; }
.joomhelpdesk_view_kb form.kb-search .input-group > .btn { height: 48px; min-height: 48px; padding: 0 16px; font-size: 15px !important; }
}
/* (B) Sidebar "Ticket Administration" module (.tm-sidebar .joomhelpdesk_main.joomhelpdesk_module.mod_joomhelpdesk_support_admin).
Even 14px rhythm, no bullets/indent, full-width matching green outline buttons, pencil clear of the title, badge row
spacing, caret aligned. Everything is scoped to this module (or the sidebar box that contains it). Nothing is hidden. */
.tm-sidebar .mod_joomhelpdesk_support_admin { --tb4-gap: 14px; }
.tm-sidebar .mod_joomhelpdesk_support_admin > *,
.tm-sidebar .mod_joomhelpdesk_support_admin :is(h3, h4, ul, ol, p, .list-group) { margin-top: 0; margin-bottom: 0; }
.tm-sidebar .mod_joomhelpdesk_support_admin .margin-small { margin: 0 !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin * + :is(h3, h4, ul, ol, p, div, form, .list-group, .btn, a.btn),
.tm-sidebar .mod_joomhelpdesk_support_admin > * + * { margin-top: var(--tb4-gap) !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin :is(li, .list-group-item) + :is(li, .list-group-item),
.tm-sidebar .mod_joomhelpdesk_support_admin li > *:first-child { margin-top: 0 !important; }
/* title: room for the frontend-edit pencil (a.jmodedit) */
.tm-sidebar .mod_joomhelpdesk_support_admin h3,
.tm-sidebar :has(> .mod_joomhelpdesk_support_admin) > h3,
.tm-sidebar :has(> .mod_joomhelpdesk_support_admin) > :is(.uk-card-title, .uk-panel-title) { position: relative; padding-right: 36px; margin-bottom: var(--tb4-gap, 14px); }
.tm-sidebar :has(.mod_joomhelpdesk_support_admin) a.jmodedit { z-index: 2; }
.tm-sidebar .mod_joomhelpdesk_support_admin h4 { line-height: 1.3; }
/* lists: flush with the headings, no bullets, tap-friendly links */
.tm-sidebar .mod_joomhelpdesk_support_admin :is(ul, ol) { list-style: none; padding-left: 0 !important; margin-left: 0 !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin :is(ul, ol) > li { list-style: none; margin-left: 0; padding-left: 0; }
.tm-sidebar .mod_joomhelpdesk_support_admin :is(ul, ol) > li::before { content: none; }
.tm-sidebar .mod_joomhelpdesk_support_admin li > a:not(.btn) { display: inline-block; padding: 6px 0; line-height: 1.35; }
.tm-sidebar .mod_joomhelpdesk_support_admin .list-group { padding-left: 0 !important; margin-left: 0 !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .list-group-item { margin-left: 0; padding: 8px 12px; }
.tm-sidebar .mod_joomhelpdesk_support_admin .list-group-item > a:not(.btn) { padding: 4px 0; }
/* badge row (.joomhelpdeskTip counts) + inline top:5px caret */
.tm-sidebar .mod_joomhelpdesk_support_admin :has(> .joomhelpdeskTip) { margin-bottom: var(--tb4-gap); line-height: 1.6; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip { vertical-align: middle; }
.tm-sidebar .mod_joomhelpdesk_support_admin :is([style*="top:5px"], [style*="top: 5px"]) { top: 0 !important; vertical-align: middle; }
/* both buttons: full width, same green outline */
.tm-sidebar .mod_joomhelpdesk_support_admin a.btn:is(.btn-outline-success, .btn-secondary) { display: block; width: 100%; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding: 10px 14px; text-align: center; white-space: normal; background: #fff; border: 1.5px solid #3DB54A; border-radius: 8px; color: #2f8f3a; font: 700 15px/1.2 "Lato", "Helvetica Neue", Arial, sans-serif !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none; box-shadow: none; }
.tm-sidebar .mod_joomhelpdesk_support_admin a.btn:is(.btn-outline-success, .btn-secondary):hover { background: #3DB54A; border-color: #3DB54A; color: #fff; }
.tm-sidebar .mod_joomhelpdesk_support_admin a.btn:is(.btn-outline-success, .btn-secondary):focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
/* ===== deploy-kb-search-v1 END ===== */
/* ===== deploy-kb-search-v2 BEGIN (append-only, nothing above changed) ===== */
/* Ticket Administration sidebar: the "My Tickets" count (.joomhelpdeskTip > span.badge.bg-success, a Bootstrap dropdown
toggle, + caret) shown as a full-width button matching Open New Ticket / Registered User (kb-search-v1): 1.5px #3DB54A
outline, #2f8f3a text, 8px radius, Lato 700 15px, green fill on hover. Label left, count + caret right. The dropdown
menu stays a normal Bootstrap/Popper menu, full width under the toggle. Scoped to this module. Nothing is hidden. */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip { display: block; position: relative; width: 100%; box-sizing: border-box; vertical-align: baseline; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle) { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 40px; box-sizing: border-box; margin: 0 !important; padding: 10px 14px !important; background: #fff !important; background-color: #fff !important; border: 1.5px solid #3DB54A !important; border-radius: 8px !important; color: #2f8f3a !important; font: 700 15px/1.2 "Lato", "Helvetica Neue", Arial, sans-serif !important; text-align: left; text-transform: none !important; letter-spacing: normal !important; white-space: normal; text-decoration: none; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle):is(:hover, :focus, .show, [aria-expanded="true"]) { background: #3DB54A !important; background-color: #3DB54A !important; border-color: #3DB54A !important; color: #fff !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle):focus-visible { outline: 3px solid rgba(61,181,74,.45); outline-offset: 2px; }
/* children of the toggle (count, caret icon) inherit the button colour; caret pushed right, inline top offset removed */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle) * { color: inherit !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip :is(.caret, [class*="fa-caret"], [class*="fa-chevron"], [class*="icon-caret"], [style*="top:5px"], [style*="top: 5px"]) { position: static !important; top: auto !important; margin-left: auto; vertical-align: middle; line-height: 1; flex: 0 0 auto; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle)::after { margin-left: 0; vertical-align: middle; }
/* caret printed as a sibling of the badge (outside it): keep it on the button row at the right edge */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.caret, [class*="fa-caret"], [style*="top:5px"], [style*="top: 5px"]) { position: absolute !important; top: 50% !important; right: 14px; transform: translateY(-50%); color: #2f8f3a; pointer-events: none; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip:hover > :is(.caret, [class*="fa-caret"], [style*="top:5px"], [style*="top: 5px"]) { color: #fff; }
/* count (first child element of the toggle) and caret grouped on the right; one caret only */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle) > :not(i):first-of-type { margin-left: auto; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip:has(> :is(.caret, [class*="fa-caret"], [style*="top:5px"], [style*="top: 5px"])) > :is(.badge, [data-bs-toggle="dropdown"], .dropdown-toggle) { padding-right: 36px !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip:has(> :is(.caret, [class*="fa-caret"], [style*="top:5px"], [style*="top: 5px"])) > .dropdown-toggle::after,
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-toggle:has(:is(.caret, [class*="fa-caret"]))::after { content: none; border: 0; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip:has(> .dropdown-toggle.show, > [aria-expanded="true"]) > :is(.caret, [class*="fa-caret"], [style*="top:5px"], [style*="top: 5px"]) { color: #fff; }
/* the dropdown menu: full width of the button, directly under it (Popper still sets the open position) */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-menu { width: 100%; min-width: 100%; box-sizing: border-box; margin-top: 4px !important; padding: 6px 0; border: 1.5px solid #cfccc8; border-radius: 8px; font: 400 15px/1.35 "Lato", "Helvetica Neue", Arial, sans-serif; z-index: 1000; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-menu:not([data-popper-placement]) { left: 0; right: auto; top: 100%; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-menu :is(li, .dropdown-item) { margin: 0 !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-item { padding: 8px 14px; color: #231F20; white-space: normal; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip .dropdown-item:is(:hover, :focus) { background: #eef8ef; color: #2f8f3a; }
/* the row that holds the button: no extra gap below beyond the module rhythm */
.tm-sidebar .mod_joomhelpdesk_support_admin :has(> .joomhelpdeskTip) { line-height: normal; }
/* ===== deploy-kb-search-v2 END ===== */
/* ===== deploy-kb-search-v3 BEGIN (append-only, nothing above changed) ===== */
/* My Tickets, real staging markup: div.center.btn-group.joomhelpdeskTip > a.dropdown-toggle > span.badge.bg-success
("My Tickets" + span.caret style="top:5px") + ul.dropdown-menu. The is the button (same look as Open New Ticket:
white, 1.5px #3DB54A, 8px radius, #2f8f3a Lato 700 15px, centred); the inner badge is reset to plain text. Nothing hidden. */
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip.btn-group { display: block !important; position: relative; width: 100%; margin: 0; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; box-sizing: border-box; margin: 0 !important; padding: 10px 14px !important; background: #fff !important; border: 1.5px solid #3DB54A !important; border-radius: 8px !important; color: #2f8f3a !important; font: 700 15px/1.2 "Lato", "Helvetica Neue", Arial, sans-serif !important; text-align: center; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle:is(:hover, :focus, .show, [aria-expanded="true"]) { background: #3DB54A !important; border-color: #3DB54A !important; color: #fff !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle::after { content: none !important; border: 0 !important; margin: 0 !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle > .badge,
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle > .badge.bg-success { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; font: inherit !important; line-height: inherit !important; text-transform: none !important; letter-spacing: normal !important; white-space: normal; vertical-align: middle; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > a.dropdown-toggle .caret { position: static !important; top: auto !important; display: inline-block; flex: 0 0 auto; width: 0; height: 0; margin: 0 !important; padding: 0; border-top: 5px solid currentColor; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 0; vertical-align: middle; color: inherit !important; }
.tm-sidebar .mod_joomhelpdesk_support_admin .joomhelpdeskTip > .dropdown-menu { width: 100%; min-width: 100%; box-sizing: border-box; }
/* ===== deploy-kb-search-v3 END ===== */
/* ===== deploy-kb-restyle-v1 BEGIN (com_tb4kbrestyle1) =====
Knowledge base view in the shared client support shell (div.tb4-sp.tb4-sp-kb from _tb4sp/kb-shell.php):
section.sp-top (crumbs, serif H1, tab bar with Knowledge base active) + section.sp-work tinted band holding the
component's own KB output (search, category cards, dept icons, article lists). The Ticket Administration module is
not rendered on this view (left out of the module list by plg_system_tb4kbicons 2.2.0). Nothing is hidden here. */
.tb4-sp-kb .kbs-lede { margin: 0 0 6px; }
.tb4-sp-kb .kbs-work > .joomhelpdesk_kb_main { max-width: 1200px; margin: 0 auto; }
/* component hero: no own band/heading space inside the shell */
.tb4-sp-kb .kb-hero { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; min-height: 0; }
.tb4-sp-kb .kb-hero-search { margin: 0; padding: 0; }
.tb4-sp-kb .joomhelpdesk_view_kb form.kb-search { max-width: 720px; margin: 0 0 28px; }
/* category cards: support card look */
.tb4-sp-kb .kb-section { margin: 0; padding: 0; }
.tb4-sp-kb .kb-cat-grid { margin-top: 0; }
.tb4-sp-kb .kb-card { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-kb .kb-card .card-body { padding: 22px 22px 18px; }
.tb4-sp-kb .kb-card .card-title { font-size: 18px; line-height: 1.3; margin: 0; }
.tb4-sp-kb .kb-card .card-title a { color: var(--ink); text-decoration: none; }
.tb4-sp-kb .kb-card .card-title a:hover { color: var(--green-ink); text-decoration: underline; }
.tb4-sp-kb .kb-cat-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); color: var(--green-ink); }
.tb4-sp-kb .kb-art-links { list-style: none; margin: 8px 0 0; padding: 0; }
.tb4-sp-kb .kb-art-links li { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.tb4-sp-kb .kb-art-links li::before { content: none; }
.tb4-sp-kb .kb-art-links a { color: var(--green-dk); text-decoration: none; }
.tb4-sp-kb .kb-art-links a:hover { color: var(--green-ink); text-decoration: underline; }
/* article / category / results pages: readable body inside a white card */
.tb4-sp-kb:not(.tb4-sp-kb-home) .kb-section { background: #fff; border-radius: 14px; padding: 28px 30px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-kb:not(.tb4-sp-kb-home) .kb-section :is(p, li) { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.tb4-sp-kb .kb-section img { max-width: 100%; height: auto; }
@media (max-width: 860px) {
.tb4-sp-kb .joomhelpdesk_view_kb form.kb-search { margin-bottom: 20px; }
.tb4-sp-kb .kb-card .card-body { padding: 18px 18px 14px; }
.tb4-sp-kb:not(.tb4-sp-kb-home) .kb-section { padding: 20px 18px; }
}
/* ===== deploy-kb-restyle-v1 END ===== */
/* ===== deploy-kb-restyle-v2 BEGIN (com_tb4kbrestyle2) =====
(1) KB article (kbartid) + search results inside the shared shell; helpful bar and actions in the support look.
(2) Staff sidebar (Ticket Administration, moved into the shell by kb-shell.php v2): KB left, sidebar right; stacked
below the KB content at phone widths. Fallback tb4-sp-incol: bands stay inside the column.
(3) Tab bar at phone widths on every support page: 2 x 2 grid, all four tabs visible, underline per tab.
(4) /my-profile "Signed in as" circle: user icon. Nothing is hidden here. */
/* (2) */
.tb4-sp-kb .kbs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; max-width: 1200px; margin: 0 auto; }
.tb4-sp-kb .kbs-main { min-width: 0; }
.tb4-sp-kb .kbs-grid > .joomhelpdesk_kb_main, .tb4-sp-kb .kbs-main > .joomhelpdesk_kb_main { max-width: none; margin: 0; }
.tb4-sp-kb .kbs-grid > .tm-sidebar { width: auto; max-width: none; min-width: 0; margin: 0; padding: 20px 20px 22px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-kb .kbs-grid > .tm-sidebar > .uk-grid { margin-left: 0; }
.tb4-sp-kb .kbs-grid > .tm-sidebar > .uk-grid > * { padding-left: 0; }
.tb4-sp-kb .kbs-grid > .tm-sidebar :is(h3, .uk-card-title, .uk-panel-title) { margin: 0 0 14px; font: 700 18px/1.3 var(--serif) !important; color: var(--ink); text-transform: none !important; letter-spacing: normal !important; }
.tb4-sp-kb .kbs-grid > .tm-sidebar a:not(.btn):not(.dropdown-toggle) { color: var(--green-dk); }
.tb4-sp-kb .kbs-grid > .tm-sidebar :is(.badge) { font-family: var(--sans); }
.tb4-sp-kb-article .kbs-main > .joomhelpdesk_kb_main { background: #fff; border-radius: 14px; padding: 30px 34px 28px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
@media (max-width: 960px) {
.tb4-sp-kb .kbs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.tb4-sp.tb4-sp-incol > section { width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
/* (1) article */
.tb4-sp-kb-article .kbs-work > .joomhelpdesk_kb_main { background: #fff; border-radius: 14px; padding: 30px 34px 28px; box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -18px rgba(35,31,32,.28); }
.tb4-sp-kb-article .kb-article-head > .d-flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tb4-sp-kb-article .kb-article-head > .d-flex > .flex-grow-1 { flex: 0 1 auto; min-width: 0; }
.tb4-sp-kb-article .kb-article-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tb4-sp-kb-article .kb-article-sub i { color: var(--green-dk); }
.tb4-sp-kb-article .kb-article-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.tb4-sp-kb-article .kb-article-head > .d-flex { order: 2; }
.tb4-sp-kb-article .kb-article-head > .kb-article-sub { order: 1; flex: 1 1 260px; }
.tb4-sp-kb-article .kb-article-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb4-sp-kb .kb-article-actions .btn { width: 40px; height: 40px; min-height: 40px; padding: 0 !important; border-radius: 8px; background: #fff; border: 1.5px solid #cfccc8 !important; color: var(--ink-soft); font-size: 15px !important; }
.tb4-sp-kb .kb-article-actions .btn:hover { background: var(--tint); border-color: var(--green) !important; color: var(--green-ink); }
.tb4-sp-kb .kb-article-actions .btn i { color: inherit; }
.tb4-sp-kb-article .kb-article-body { max-width: 75ch; font-size: 16px; line-height: 1.7; color: var(--ink-soft); overflow-wrap: anywhere; }
.tb4-sp-kb-article .kb-article-body :is(h2, h3, h4) { margin: 26px 0 8px; font-size: 19px; line-height: 1.3; color: var(--ink); }
.tb4-sp-kb-article .kb-article-body a { color: var(--green-dk); }
.tb4-sp-kb-article .kb-article-meta { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.tb4-sp-kb-article .kb-meta-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tb4-sp-kb-article .kb-meta-label { font-weight: 700; color: var(--ink-soft); }
/* helpful bar */
.tb4-sp-kb .kb-helpful { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 0; padding: 14px 18px; border-radius: 10px; background: var(--tint); border: 1px solid #e3ecd0; }
.tb4-sp-kb .kb-helpful-q { font: 700 16px/1.3 var(--sans); color: var(--ink); }
.tb4-sp-kb .kb-helpful-btns { display: flex; gap: 8px; }
.tb4-sp-kb .kb-helpful-btns .btn { width: 44px; height: 40px; min-height: 40px; padding: 0 !important; border-radius: 8px; background: #fff; border: 1.5px solid #b7b3ae !important; color: var(--ink-soft); font-size: 15px !important; }
.tb4-sp-kb .kb-helpful-btns .btn:hover, .tb4-sp-kb .kb-helpful-btns .btn:focus-visible { background: var(--green); border-color: var(--green) !important; color: #fff; }
.tb4-sp-kb .kb-helpful .alert { margin: 0; padding: 0; background: none; border: 0; color: var(--green-ink); font-weight: 700; }
.tb4-sp-kb .kb-help-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--line); font-size: 15px; }
.tb4-sp-kb .kb-help-cta .btn { min-height: 40px; padding: 9px 16px !important; font-size: 15px !important; }
.tb4-sp-kb .kb-article-comments { margin-top: 18px; padding-top: 0; border-top: 0; }
/* results */
.tb4-sp-kb-results .kb-hero { margin: 0 0 8px; }
/* (3) tab bar at phone widths (all support pages: kb, tickets, new ticket, my-profile) */
@media (max-width: 600px) {
.tb4-sp .sp-subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; margin: 16px 0 0; padding: 0; overflow: visible; }
.tb4-sp .sp-subnav a { justify-content: center; min-width: 0; padding: 12px 6px 10px; font-size: 14.5px; white-space: normal; text-align: center; line-height: 1.2; }
.tb4-sp.tb4-sp-incol > section { padding-left: 16px; padding-right: 16px; }
.tb4-sp-kb-article :is(.kbs-work, .kbs-main) > .joomhelpdesk_kb_main { padding: 20px 18px; }
.tb4-sp-kb .kbs-grid > .tm-sidebar { padding: 16px; }
.tb4-sp-kb-article .kb-article-head { flex-direction: column; align-items: flex-start; }
.tb4-sp-kb-article .kb-article-head > .kb-article-sub { flex: 0 0 auto; }
.tb4-sp-kb .kb-helpful { flex-direction: column; align-items: flex-start; }
}
/* (4) /my-profile signed-in circle: user icon */
.tb4-sp-profile .spp-ic { background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.tb4-sp-profile .spp-ic::before { content: none; }
/* ===== deploy-kb-restyle-v2 END ===== */
/* ===== deploy-kb-restyle-v3 BEGIN (com_tb4kbrestyle3) =====
KB staff sidebar now really inside the shell (kb-shell v3 moves