. That -21px hauls the
divider — and the grid/content below it — UP into the header row, so the hr sliced
straight through each title (the real "smushed header" cause, in every section).
Cancel it here so the divider sits below the header where it belongs. */
body.ts-app .ts-main #setupContainer .line-break { margin-top: 0; }
body.ts-app .ts-main #setupContainer .line-break hr { border-top: 1px solid var(--line); margin: 6px 0 0; }
body.ts-app .ts-main #setupContainer .btn[data-role="msave"] { border-radius: 11px; }
/* ---- Issue / Complaints Configurations (Areas/Admin/Issue/Configurations) ----
Body was unstyled rows on the page background with raw h3/h4 headings and
unstyled user-assignment boxes. Sectioned into pg-cards in the view; this
styles the headings, labels, recipient boxes and the column separator.
Scoped to .pg-issueconfig. */
body.ts-app .ts-main .pg-issueconfig .pg-card { padding: 20px 24px; margin-bottom: 18px; }
body.ts-app .ts-main .pg-issueconfig h3 {
font-size: 16px; font-weight: 700; color: var(--head); letter-spacing: -0.2px;
margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
body.ts-app .ts-main .pg-issueconfig h4 { font-size: 14px; font-weight: 700; color: var(--head); margin: 0 0 10px; }
body.ts-app .ts-main .pg-issueconfig label { color: var(--text); font-weight: 600; }
body.ts-app .ts-main .pg-issueconfig .user-lbl {
display: block; margin-bottom: 8px; color: var(--muted); font-weight: 600; font-size: 12.5px;
}
body.ts-app .ts-main .pg-issueconfig .user-section {
border: 1px solid var(--line); border-radius: 10px; background: var(--inset);
min-height: 220px; max-height: 340px; overflow-y: auto; padding: 8px;
}
body.ts-app .ts-main .pg-issueconfig .UserAssigntemplateCSS {
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
padding: 8px 11px; margin-bottom: 8px; cursor: grab;
}
body.ts-app .ts-main .pg-issueconfig .UserAssigntemplateCSS p { margin: 0; font-size: 12.5px; color: var(--text); }
body.ts-app .ts-main .pg-issueconfig .UserAssigntemplateCSS strong { color: var(--head); }
/* vertical divider between the two notification columns; becomes horizontal on stack */
body.ts-app .ts-main .pg-issueconfig .separator-left { border-left: 1px solid var(--line); }
@media (max-width: 991px) {
body.ts-app .ts-main .pg-issueconfig .separator-left {
border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px;
}
}
/* ---- Staff employee-member lists (Areas/Admin/Staff Index "edit employees"
+ DepartmentAssignStaff "assign employees") ----
The Kendo .k-block list items were content-box sized, so their padding/border
added on top of width:100% and the items overflowed (right edge clipped) their
column. border-box + full width makes them fit; also gives them a clean,
consistent card look on both pages. */
body.ts-app .ts-main .move.k-block {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 0 6px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--card);
color: var(--text);
line-height: 1.35;
cursor: move;
}
/* keep the normal pointer on the action buttons in the right-hand list */
body.ts-app .ts-main .move.k-block .btn { cursor: pointer; }
body.ts-app .ts-main .move.k-block b { color: var(--head); }
body.ts-app .ts-main .move.k-block .user-details { color: var(--muted); font-size: 12px; word-break: break-word; }
/* the listview wrappers shouldn't add a border/padding that eats into the items */
body.ts-app .ts-main #allStaff_listview .k-listview,
body.ts-app .ts-main #selectedStaff_listview .k-listview,
body.ts-app .ts-main #allusers_listview .k-listview,
body.ts-app .ts-main #selectedusers_listview .k-listview {
border: 0; padding: 0; background: transparent;
}
/* ---- Admin SMTP + SMS settings (Areas/Admin/Smtp + Areas/Admin/SMS) ----
Both share the same tabbed fieldset/legend form (.pg-smtp hook). Card each
fieldset, turn legends into section titles, and normalise label/field styling
(several fields use a plain `w-100` input and missed the redesign field look). */
/* the tab container carries `tab-content wrapper p pg-formtabs` all on one
element, so the descendant `.pg-formtabs .tab-content` rule never matches and
the legacy `.wrapper` panel (straight edges) shows behind the rounded cards.
Flatten it here so the cards sit on the page background like other pages. */
body.ts-app .ts-main .pg-smtp .tab-content {
background: transparent !important; border: 0 !important; box-shadow: none !important;
padding: 0 !important; margin: 0;
}
body.ts-app .ts-main .pg-smtp fieldset {
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
padding: 16px 20px 20px; margin: 0 0 16px;
}
/* A