/* Client portal — modern theme (login-branding plugin) */

body.lb-client-modern {
    --lb-brand: #1a5276;
    --lb-brand-hover: #154360;
    --lb-brand-light: #e8f4fc;
    --lb-surface: #ffffff;
    --lb-radius: 12px;
    --lb-radius-sm: 8px;
    --lb-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --lb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --lb-text: #1a1a2e;
    --lb-muted: #6b7280;
    --lb-border: rgba(0, 0, 0, 0.1);
    --lb-success: #059669;
    --lb-warning: #d97706;
    --lb-danger: #dc2626;
    --lb-max-width: 960px;

    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lb-text);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Background injected via PHP (clientPortalBackgroundCss) */

body.lb-client-modern #container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--lb-max-width);
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    padding: 0 16px 16px;
    box-sizing: border-box;
}

/* Header */
body.lb-client-modern #header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 0;
    padding: 16px 20px;
    margin-bottom: 12px;
    border-bottom: none;
    gap: 12px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow);
    box-sizing: border-box;
}

body.lb-client-modern #header #logo {
    float: none;
    width: auto;
    height: auto;
    order: 1;
}

body.lb-client-modern #header #logo img {
    max-height: 56px;
    max-width: 220px;
    width: auto;
    height: auto;
}

body.lb-client-modern #header .pull-right {
    float: none;
    order: 2;
    flex: 1 1 auto;
    text-align: right;
}

body.lb-client-modern #header .pull-right p {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--lb-muted);
    line-height: 1.6;
}

body.lb-client-modern #header .pull-right a {
    color: var(--lb-brand);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 4px;
}

body.lb-client-modern #header .pull-right a:hover {
    color: var(--lb-brand-hover);
    text-decoration: underline;
}

/* Mobile nav toggle — lives in #container before #nav (do not set flex order) */
body.lb-client-modern #lb-nav-toggle {
    display: none;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-brand);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

body.lb-client-modern #lb-nav-toggle::before {
    content: "☰ ";
}

body.lb-client-modern.lb-nav-open #lb-nav-toggle::before {
    content: "✕ ";
}

/* Navigation */
body.lb-client-modern #nav {
    float: none;
    clear: both;
    width: 100%;
    margin: 0 0 20px;
    padding: 6px;
    height: auto;
    list-style: none;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow);
    background-image: none;
    box-sizing: border-box;
}

body.lb-client-modern #container > .clear {
    display: none;
}

body.lb-client-modern #nav li {
    display: inline-block;
    margin: 2px;
}

body.lb-client-modern #nav li a {
    float: none;
    display: inline-block;
    height: auto;
    line-height: 1.4;
    padding: 8px 16px 8px 36px;
    margin: 0;
    border-radius: 999px;
    color: var(--lb-text);
    font-size: 0.9rem;
    font-weight: 500;
    background-position: 12px 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.lb-client-modern #nav li a:hover {
    background-color: var(--lb-brand-light);
    color: var(--lb-brand);
}

body.lb-client-modern #nav li a.active {
    background-color: var(--lb-brand);
    color: #fff;
    background-blend-mode: luminosity;
}

body.lb-client-modern #nav li a.active:hover {
    background-color: var(--lb-brand-hover);
    color: #fff;
}

/* Content card */
body.lb-client-modern #content {
    flex: 1 0 auto;
    background: var(--lb-surface);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-lg);
    padding: 28px 32px;
    margin: 0;
    min-height: 200px;
    box-sizing: border-box;
}

body.lb-client-modern #content h1 {
    color: var(--lb-text);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 8px;
    border-bottom: none;
}

body.lb-client-modern #content h1::after {
    content: "";
    display: table;
    clear: both;
}

body.lb-client-modern #content h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--lb-text);
    margin: 1.5em 0 0.75em;
}

body.lb-client-modern #content > p {
    color: var(--lb-muted);
    margin-bottom: 1.25em;
}

/* Alerts */
body.lb-client-modern #msg_error,
body.lb-client-modern #msg_notice,
body.lb-client-modern #msg_warning,
body.lb-client-modern .error_bar,
body.lb-client-modern .notice_bar,
body.lb-client-modern .warning_bar {
    border-radius: var(--lb-radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    border: none;
}

body.lb-client-modern #msg_error,
body.lb-client-modern .error_bar {
    background: #fef2f2;
    color: var(--lb-danger);
}

body.lb-client-modern #msg_notice,
body.lb-client-modern .notice_bar {
    background: #ecfdf5;
    color: var(--lb-success);
}

body.lb-client-modern #msg_warning,
body.lb-client-modern .warning_bar {
    background: #fffbeb;
    color: var(--lb-warning);
}

/* Forms — desktop keeps osTicket table layout; mobile stacks below */
body.lb-client-modern #ticketForm,
body.lb-client-modern table[width="800"],
body.lb-client-modern table.padded {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
}

body.lb-client-modern #ticketForm th,
body.lb-client-modern #ticketForm td,
body.lb-client-modern table[width="800"] th,
body.lb-client-modern table[width="800"] td {
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
}

body.lb-client-modern #ticketForm th,
body.lb-client-modern table[width="800"] th,
body.lb-client-modern table.padded th {
    width: 30%;
    font-weight: 500;
    color: var(--lb-text);
}

body.lb-client-modern #ticketForm,
body.lb-client-modern #reply,
body.lb-client-modern form[name="register"] {
    max-width: 100%;
}

body.lb-client-modern #ticketForm div,
body.lb-client-modern #reply div,
body.lb-client-modern form[name="register"] div {
    overflow: visible;
    margin-bottom: 0.5em;
}

body.lb-client-modern #ticketForm div label,
body.lb-client-modern #reply div label,
body.lb-client-modern form[name="register"] div label {
    float: none;
    display: block;
    font-weight: 500;
    color: var(--lb-text);
    margin-bottom: 6px;
    text-align: left;
}

body.lb-client-modern #ticketForm input[type="text"],
body.lb-client-modern #ticketForm input[type="email"],
body.lb-client-modern #ticketForm input[type="tel"],
body.lb-client-modern #ticketForm input[type="password"],
body.lb-client-modern #ticketForm textarea,
body.lb-client-modern #ticketForm select,
body.lb-client-modern #reply textarea,
body.lb-client-modern #reply input[type="text"],
body.lb-client-modern form[name="register"] input,
body.lb-client-modern form[name="register"] textarea,
body.lb-client-modern form[name="register"] select,
body.lb-client-modern table.padded input,
body.lb-client-modern table.padded textarea,
body.lb-client-modern table.padded select {
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.lb-client-modern #ticketForm td input[type="text"],
body.lb-client-modern #ticketForm td input[type="email"],
body.lb-client-modern #ticketForm td input[type="tel"],
body.lb-client-modern #ticketForm td input[type="password"],
body.lb-client-modern #ticketForm td textarea,
body.lb-client-modern #ticketForm td select,
body.lb-client-modern table[width="800"] td input,
body.lb-client-modern table[width="800"] td textarea,
body.lb-client-modern table[width="800"] td select {
    width: 100%;
}

body.lb-client-modern #reply textarea {
    width: 100%;
    min-height: 140px;
}

body.lb-client-modern #ticketForm input:focus,
body.lb-client-modern #ticketForm textarea:focus,
body.lb-client-modern #ticketForm select:focus,
body.lb-client-modern #reply textarea:focus {
    outline: none;
    border-color: var(--lb-brand);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

body.lb-client-modern #ticketForm td textarea,
body.lb-client-modern #ticketForm div textarea {
    width: 100% !important;
    min-height: 120px;
}

body.lb-client-modern #topicId,
body.lb-client-modern .select2-container {
    width: 100% !important;
    max-width: 100%;
}

body.lb-client-modern label.required,
body.lb-client-modern th.required {
    font-weight: 600;
}

body.lb-client-modern font.error,
body.lb-client-modern .error {
    color: var(--lb-danger);
    font-size: 0.875rem;
}

body.lb-client-modern hr {
    border: none;
    border-top: 1px solid var(--lb-border);
    margin: 1.5em 0;
}

/* Buttons */
body.lb-client-modern input.btn,
body.lb-client-modern input[type="submit"],
body.lb-client-modern .buttons input[type="submit"],
body.lb-client-modern p.buttons input[type="submit"],
body.lb-client-modern #reply input[type="submit"] {
    background: var(--lb-brand);
    color: #fff;
    border: none;
    border-radius: var(--lb-radius-sm);
    padding: 11px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
}

body.lb-client-modern input.btn:hover,
body.lb-client-modern input[type="submit"]:hover {
    background: var(--lb-brand-hover);
}

body.lb-client-modern input[type="reset"],
body.lb-client-modern input[type="button"],
body.lb-client-modern .buttons input[type="reset"],
body.lb-client-modern #reply input[type="reset"],
body.lb-client-modern #reply input[type="button"] {
    background: var(--lb-surface);
    color: var(--lb-text);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-left: 8px;
}

body.lb-client-modern .buttons,
body.lb-client-modern p.buttons,
body.lb-client-modern #reply p[style*="text-align:center"] {
    text-align: center;
    margin-top: 1.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Redactor editor */
body.lb-client-modern .redactor-box {
    border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border);
    overflow: visible;
}

body.lb-client-modern .redactor-in img,
body.lb-client-modern .redactor-box img,
body.lb-client-modern .thread-body img {
    max-width: 100%;
    height: auto !important;
    display: inline-block;
    vertical-align: middle;
}

body.lb-client-modern .redactor-in figure,
body.lb-client-modern .redactor-box figure {
    max-width: 100%;
    margin: 0.5em 0;
}

body.lb-client-modern .redactor-toolbar {
    background: #f9fafb;
    border-bottom: 1px solid var(--lb-border);
    flex-wrap: wrap;
}

/* File drop */
body.lb-client-modern .filedrop .dropzone,
body.lb-client-modern .dropzone {
    border: 2px dashed var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 24px;
    text-align: center;
    color: var(--lb-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}

body.lb-client-modern .filedrop .dropzone:hover,
body.lb-client-modern .dropzone:hover {
    border-color: var(--lb-brand);
    background: var(--lb-brand-light);
}

body.lb-client-modern .filedrop {
    max-width: 100%;
    box-sizing: border-box;
}

body.lb-client-modern .filedrop .files:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
}

/* Core filedrop.css sets height: 25px — long names then overlap the next file */
body.lb-client-modern .filedrop .files .file {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    height: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 12px !important;
    overflow: hidden;
    box-sizing: border-box;
}

body.lb-client-modern .filedrop .files .file + .file {
    border-top: 1px solid var(--lb-border);
}

body.lb-client-modern .filedrop .files .file > span {
    display: flex !important;
    padding: 0 !important;
    min-width: 0;
}

body.lb-client-modern .filedrop .files .file .pull-right {
    float: none !important;
}

body.lb-client-modern .filedrop .files .file .preview {
    float: none !important;
    flex: 0 0 auto;
    order: 1;
    width: auto;
    max-width: 40px;
    max-height: 40px;
    padding: 0 0 0 0;
}

body.lb-client-modern .filedrop .files .file .filetype:empty {
    display: none;
}

body.lb-client-modern .filedrop .files .file .filename {
    flex: 1 1 0;
    order: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

body.lb-client-modern .filedrop .files .file .filename a,
body.lb-client-modern .filedrop .files .file .filename > span:not(.filesize) {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--lb-text);
}

body.lb-client-modern .filedrop .files .file .filesize {
    margin: 0;
    font-size: 0.85em;
}

body.lb-client-modern .filedrop .files .file .trash {
    flex: 0 0 auto;
    order: 3;
    margin-left: auto;
    padding: 6px;
    cursor: pointer;
}

body.lb-client-modern .filedrop .files .file .progress {
    flex: 1 1 100%;
    order: 4;
    width: 100%;
}

/* CAPTCHA */
body.lb-client-modern .captchaRow .captcha {
    float: none;
    border-radius: var(--lb-radius-sm);
    margin-bottom: 8px;
}

/* Ticket list page (tickets.php) */
body.lb-client-modern .search.well {
    float: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: #f9fafb;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    box-shadow: none;
}

body.lb-client-modern .search.well .flush-left {
    float: none;
    width: 100%;
}

body.lb-client-modern #ticketSearchForm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    float: none;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

body.lb-client-modern #ticketSearchForm input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

body.lb-client-modern #ticketSearchForm input[type="text"]:focus {
    outline: none;
    border-color: var(--lb-brand);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

body.lb-client-modern #ticketSearchForm input[type="submit"] {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: var(--lb-brand);
    color: #fff;
    border: none;
    border-radius: var(--lb-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

body.lb-client-modern #ticketSearchForm input[type="submit"]:hover {
    background: var(--lb-brand-hover);
}

body.lb-client-modern #ticketSearchForm .pull-right {
    float: none;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--lb-muted);
}

body.lb-client-modern #ticketSearchForm select[name="topic_id"] {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--lb-surface);
    box-sizing: border-box;
}

body.lb-client-modern .search.well > div[style*="margin-top"] {
    margin-top: 12px !important;
}

body.lb-client-modern .search.well > div[style*="margin-top"] a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--lb-muted);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--lb-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

body.lb-client-modern .search.well > div[style*="margin-top"] a:hover {
    background: var(--lb-brand-light);
    color: var(--lb-brand);
}

body.lb-client-modern #content > h1[style*="margin"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lb-border);
}

body.lb-client-modern #content > h1[style*="margin"] > a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lb-text);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 600;
}

body.lb-client-modern #content > h1[style*="margin"] > a:first-child:hover {
    color: var(--lb-brand);
}

body.lb-client-modern #content > h1 .refresh {
    float: none;
    display: inline-block;
    width: auto;
    padding-left: 0;
    background: none;
    color: var(--lb-muted);
    font-size: 1rem;
}

body.lb-client-modern #content > h1 .refresh:hover {
    color: var(--lb-brand);
    text-decoration: none;
}

body.lb-client-modern h1 .states {
    float: none;
    margin: 0;
}

body.lb-client-modern h1 .states small {
    font-size: inherit;
}

body.lb-client-modern h1 .states small span[style*="lightgray"] {
    display: none;
}

body.lb-client-modern h1 .states .state {
    display: inline-block;
    padding: 6px 14px;
    margin: 2px 4px 2px 0;
    border-radius: 999px;
    text-decoration: none;
    color: var(--lb-muted);
    font-weight: 500;
    background: #f3f4f6;
    transition: all 0.15s ease;
}

body.lb-client-modern h1 .states .state.active {
    background: var(--lb-brand);
    color: #fff;
}

body.lb-client-modern h1 .states .state:hover:not(.active) {
    background: var(--lb-brand-light);
    color: var(--lb-brand);
}

body.lb-client-modern #ticketTable {
    width: 100% !important;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    border-collapse: collapse;
    margin-top: 0;
    overflow: hidden;
    background: var(--lb-surface);
}

body.lb-client-modern #ticketTable caption {
    text-align: left;
    color: var(--lb-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 12px 14px;
    background: #f9fafb;
    border-bottom: 1px solid var(--lb-border);
    caption-side: top;
}

body.lb-client-modern #ticketTable thead th {
    text-align: left;
    padding: 10px 12px;
    color: var(--lb-muted);
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-bottom: 1px solid var(--lb-border);
    background: #f9fafb;
    height: auto;
    line-height: 1.4;
}

body.lb-client-modern #ticketTable thead th a {
    color: var(--lb-text);
    text-decoration: none;
}

body.lb-client-modern #ticketTable thead th a:hover {
    color: var(--lb-brand);
}

body.lb-client-modern #ticketTable tbody td {
    padding: 12px;
    border: none;
    border-bottom: 1px solid var(--lb-border);
    vertical-align: middle;
}

body.lb-client-modern #ticketTable tbody tr:last-child td {
    border-bottom: none;
}

body.lb-client-modern #ticketTable tbody tr:hover {
    background: var(--lb-brand-light);
}

body.lb-client-modern #ticketTable tbody td a.Icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lb-brand);
    font-weight: 600;
    text-decoration: none;
    padding-left: 20px;
}

body.lb-client-modern #ticketTable tbody td a.Icon:hover {
    text-decoration: underline;
}

body.lb-client-modern #ticketTable tbody td:nth-child(3) {
    font-weight: 600;
    font-size: 0.875rem;
}

body.lb-client-modern #ticketTable tbody td:nth-child(4) .link,
body.lb-client-modern #ticketTable tbody td:nth-child(4) .truncate {
    color: var(--lb-text);
    max-width: 100% !important;
}

body.lb-client-modern #ticketTable tbody td:nth-child(4) .icon-group {
    color: var(--lb-muted);
    margin-right: 4px;
}

body.lb-client-modern #ticketTable tbody tr:only-child td[colspan="5"] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--lb-muted);
    background: #f9fafb;
    border: none;
    font-size: 0.95rem;
}

body.lb-client-modern #ticketTable + div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding: 12px;
    font-size: 0.9rem;
    color: var(--lb-muted);
}

body.lb-client-modern #ticketTable + div a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    color: var(--lb-brand);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border);
    background: var(--lb-surface);
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.lb-client-modern #ticketTable + div a:hover {
    background: var(--lb-brand-light);
    border-color: var(--lb-brand);
}

body.lb-client-modern #ticketTable + div b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    color: #fff;
    font-weight: 600;
    border-radius: var(--lb-radius-sm);
    background: var(--lb-brand);
    border: 1px solid var(--lb-brand);
}

body.lb-client-modern #ticketTable + div b a,
body.lb-client-modern #ticketTable + div a b {
    color: inherit;
    border: none;
    background: transparent;
    padding: 0;
    min-width: 0;
    min-height: 0;
}


/* Ticket view summary */
body.lb-client-modern #ticketInfo {
    width: 100% !important;
    background: #f9fafb;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 16px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

body.lb-client-modern #ticketInfo h1 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.lb-client-modern #ticketInfo h1 .pull-right {
    float: none;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.lb-client-modern #ticketInfo .action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    background: var(--lb-surface);
    color: var(--lb-brand);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

body.lb-client-modern #ticketInfo .action-button:hover {
    background: var(--lb-brand-light);
    border-color: var(--lb-brand);
}

body.lb-client-modern #ticketInfo > tbody > tr > td {
    vertical-align: top;
}

body.lb-client-modern #ticketInfo .infoTable,
body.lb-client-modern #ticketInfo .custom-data {
    width: 100%;
    margin-top: 12px;
    border-radius: var(--lb-radius-sm);
    overflow: hidden;
}

body.lb-client-modern #ticketInfo .infoTable th,
body.lb-client-modern #ticketInfo .custom-data th {
    color: var(--lb-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 0;
}

body.lb-client-modern #ticketInfo .infoTable td,
body.lb-client-modern #ticketInfo .custom-data td {
    padding-bottom: 10px;
}

body.lb-client-modern #ticketInfo .headline {
    background: var(--lb-brand-light);
    color: var(--lb-brand);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--lb-radius-sm);
}

/* Thread messages */
body.lb-client-modern #ticketThread {
    margin: 20px 0;
}

body.lb-client-modern .thread-entry {
    margin-bottom: 16px;
    border-radius: var(--lb-radius-sm);
    overflow: hidden;
}

body.lb-client-modern .thread-entry .header {
    border-radius: var(--lb-radius-sm) var(--lb-radius-sm) 0 0;
    border: 1px solid var(--lb-border);
    background: #f3f4f6;
}

body.lb-client-modern .thread-entry.message .header {
    background: var(--lb-brand-light);
    border-color: rgba(26, 82, 118, 0.2);
}

body.lb-client-modern .thread-entry.response .header {
    background: #f3f4f6;
}

body.lb-client-modern .thread-entry .thread-body {
    border: 1px solid var(--lb-border);
    border-top: none;
    border-radius: 0 0 var(--lb-radius-sm) var(--lb-radius-sm);
    padding: 14px 16px;
    background: var(--lb-surface);
}

body.lb-client-modern .thread-entry.avatar .header:before,
body.lb-client-modern .thread-entry.avatar .header:after {
    display: none;
}

body.lb-client-modern .thread-entry.avatar {
    margin-left: 0;
}

body.lb-client-modern .thread-entry.response.avatar {
    margin-right: 0;
}

body.lb-client-modern .thread-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Reply form */
body.lb-client-modern #reply {
    background: #f9fafb;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    padding: 20px;
    margin-top: 24px;
}

body.lb-client-modern #reply h2 {
    margin-top: 0;
}

body.lb-client-modern #reply p[style*="text-align:center"],
body.lb-client-modern #reply p[style*="text-align: center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 1.25em 0 0;
}

body.lb-client-modern #reply p[style*="text-align:center"] input,
body.lb-client-modern #reply p[style*="text-align: center"] input {
    width: auto;
    min-width: 110px;
    margin: 0;
}

body.lb-client-modern .warning-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--lb-radius-sm);
    padding: 10px 14px;
    margin: 12px 0;
    color: var(--lb-warning);
}

/* Profile / register tables */
body.lb-client-modern table.padded {
    width: 100% !important;
}

body.lb-client-modern table.padded th {
    font-weight: 500;
    height: auto !important;
}

body.lb-client-modern table.padded td {
    padding: 8px 12px;
    height: auto !important;
}

/* Profile & account forms — structured tables + dynamic fields */
body.lb-client-modern form[action*="profile.php"] table.padded,
body.lb-client-modern form[action*="account.php"] table.padded {
    border-collapse: separate;
    border-spacing: 0;
}

body.lb-client-modern form[action*="profile.php"] .form-header,
body.lb-client-modern form[action*="account.php"] .form-header {
    margin: 0;
}

body.lb-client-modern form[action*="profile.php"] .form-header h3,
body.lb-client-modern form[action*="account.php"] .form-header h3,
body.lb-client-modern form[action*="profile.php"] td[colspan="2"] h3,
body.lb-client-modern form[action*="account.php"] td[colspan="2"] h3 {
    margin: 0 0 0.35em;
    font-size: 1.1em;
    color: var(--lb-text);
}

body.lb-client-modern form[action*="profile.php"] table.padded hr,
body.lb-client-modern form[action*="account.php"] table.padded hr {
    display: none;
}

body.lb-client-modern form[action*="profile.php"] > hr,
body.lb-client-modern form[action*="account.php"] > hr {
    display: none;
}

body.lb-client-modern form[action*="profile.php"] table.padded tr > td:first-child:not([colspan]),
body.lb-client-modern form[action*="account.php"] table.padded tr > td:first-child:not([colspan]) {
    width: 180px;
    max-width: 32%;
    font-weight: 500;
    color: var(--lb-muted);
    vertical-align: top;
}

body.lb-client-modern form[action*="profile.php"] table.padded tr > td[colspan="2"] > label,
body.lb-client-modern form[action*="account.php"] table.padded tr > td[colspan="2"] > label {
    display: block;
}

body.lb-client-modern form[action*="profile.php"] table.padded input[type="text"],
body.lb-client-modern form[action*="profile.php"] table.padded input[type="email"],
body.lb-client-modern form[action*="profile.php"] table.padded input[type="tel"],
body.lb-client-modern form[action*="profile.php"] table.padded input[type="password"],
body.lb-client-modern form[action*="account.php"] table.padded input[type="text"],
body.lb-client-modern form[action*="account.php"] table.padded input[type="email"],
body.lb-client-modern form[action*="account.php"] table.padded input[type="tel"],
body.lb-client-modern form[action*="account.php"] table.padded input[type="password"] {
    width: 100% !important;
    max-width: 100%;
}

body.lb-client-modern form[action*="profile.php"] table.padded tr > td[colspan="2"] label > span:first-child,
body.lb-client-modern form[action*="account.php"] table.padded tr > td[colspan="2"] label > span:first-child {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

body.lb-client-modern form[action*="profile.php"] table.padded tr > td[colspan="2"] label em,
body.lb-client-modern form[action*="account.php"] table.padded tr > td[colspan="2"] label em {
    display: block;
    margin: 4px 0 8px;
    font-style: normal;
    color: var(--lb-muted);
    font-size: 0.9em;
}

body.lb-client-modern form[action*="profile.php"] .select2-container,
body.lb-client-modern form[action*="account.php"] .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

body.lb-client-modern form[action*="profile.php"] .action-button,
body.lb-client-modern form[action*="account.php"] .action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    background: #f9fafb;
    color: var(--lb-brand);
    font-size: 0.9rem;
    cursor: pointer;
}

body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"],
body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 1.75em 0 0;
    padding-top: 1.25em;
    border-top: 1px solid var(--lb-border);
}

body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"] input,
body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] input {
    width: auto;
    min-width: 110px;
    flex: 0 1 auto;
    margin: 0;
}

body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"] input[type="reset"],
body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"] input[type="button"],
body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] input[type="reset"],
body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] input[type="button"] {
    background: #fff;
    color: var(--lb-text);
    border: 1px solid var(--lb-border);
}

/* Ticket edit (dynamic forms, table without .padded) */
body.lb-client-modern form[action="tickets.php"]:not(#reply) table,
body.lb-client-modern form[action="tickets.php"]:not(#reply) #dynamic-form {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) .form-header h3,
body.lb-client-modern form[action="tickets.php"]:not(#reply) td[colspan="2"] h3 {
    margin: 0 0 0.35em;
    font-size: 1.1em;
    color: var(--lb-text);
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) table hr {
    border: none;
    border-top: 1px solid var(--lb-border);
    margin: 0 0 0.75em;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) > hr {
    display: none;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) td[colspan="2"] > label {
    display: block;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) td[colspan="2"] label > span:first-child {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) td[colspan="2"] label em {
    display: block;
    margin: 4px 0 8px;
    font-style: normal;
    color: var(--lb-muted);
    font-size: 0.9em;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) input[type="text"],
body.lb-client-modern form[action="tickets.php"]:not(#reply) input[type="email"],
body.lb-client-modern form[action="tickets.php"]:not(#reply) input[type="tel"],
body.lb-client-modern form[action="tickets.php"]:not(#reply) textarea,
body.lb-client-modern form[action="tickets.php"]:not(#reply) select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 1rem;
    font-family: inherit;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) .select2-container {
    width: 100% !important;
    max-width: 100%;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 1.75em 0 0;
    padding-top: 1.25em;
    border-top: 1px solid var(--lb-border);
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] input {
    width: auto;
    min-width: 110px;
    flex: 0 1 auto;
    margin: 0;
}

body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] input[type="reset"],
body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] input[type="button"] {
    background: #fff;
    color: var(--lb-text);
    border: 1px solid var(--lb-border);
}

/* Validation errors */
body.lb-client-modern .lb-field-error,
body.lb-auth-page .lb-field-error {
    color: var(--lb-danger, #dc2626);
    font-size: 0.85rem;
    margin: 4px 0 10px;
    font-weight: 500;
}

body.lb-client-modern .lb-field-invalid,
body.lb-auth-page .lb-field-invalid {
    border-color: var(--lb-danger, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Knowledge base */
body.lb-client-modern .row,
body.lb-client-modern .row .span8,
body.lb-client-modern .row .span4 {
    width: 100% !important;
    float: none;
    margin: 0;
}

body.lb-client-modern #kb li {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

body.lb-client-modern #kb li > div,
body.lb-client-modern #kb > div {
    background: #f9fafb;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 16px 18px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body.lb-client-modern #kb li:hover > div {
    border-color: var(--lb-brand);
    box-shadow: var(--lb-shadow);
}

body.lb-client-modern #kb h4 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

body.lb-client-modern #kb h4 a {
    color: var(--lb-brand);
    text-decoration: none;
    font-weight: 600;
}

body.lb-client-modern #kb h4 a:hover {
    text-decoration: underline;
}

body.lb-client-modern .searchbar input.search,
body.lb-client-modern input.search,
body.lb-client-modern #kbSearch input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 1rem;
    margin-bottom: 16px;
}

body.lb-client-modern .searchbar input.search:focus,
body.lb-client-modern input.search:focus {
    outline: none;
    border-color: var(--lb-brand);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

body.lb-client-modern .sidebar {
    margin-top: 24px;
    padding: 16px;
    background: #f9fafb;
    border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border);
}

body.lb-client-modern .sidebar .header {
    font-weight: 600;
    color: var(--lb-text);
    margin-bottom: 8px;
}

body.lb-client-modern .sidebar a {
    color: var(--lb-brand);
}

body.lb-client-modern .faq-content {
    line-height: 1.7;
}

body.lb-client-modern .article-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--lb-text);
    margin-bottom: 8px;
}

body.lb-client-modern #breadcrumbs {
    font-size: 0.9rem;
    color: var(--lb-muted);
    margin-bottom: 16px;
}

body.lb-client-modern #breadcrumbs a {
    color: var(--lb-brand);
}

body.lb-client-modern #faq ol {
    padding-left: 1.25em;
}

body.lb-client-modern #faq ol li {
    margin-bottom: 10px;
}

body.lb-client-modern #faq ol a {
    color: var(--lb-brand);
    font-weight: 500;
}

/* Footer — sticks to bottom on short pages */
body.lb-client-modern #footer {
    flex-shrink: 0;
    width: calc(100% - 32px);
    max-width: var(--lb-max-width);
    margin: 16px auto 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    border-top: none;
    color: var(--lb-text);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow);
    box-sizing: border-box;
}

body.lb-client-modern #footer p {
    margin: 0;
    color: var(--lb-text);
}

body.lb-client-modern #footer #poweredBy {
    display: none;
}

/* Support center landing (index.php) */
body.lb-client-modern #landing_page .search-form {
    margin-bottom: 1.5em;
}

body.lb-client-modern #landing_page .search-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

body.lb-client-modern #landing_page .search-form input.search {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    font-size: 1rem;
    box-sizing: border-box;
}

body.lb-client-modern #landing_page .search-form input.search:focus {
    outline: none;
    border-color: var(--lb-brand);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

body.lb-client-modern #landing_page .search-form .button,
body.lb-client-modern #landing_page .search-form button {
    padding: 12px 20px;
    background: var(--lb-brand);
    color: #fff;
    border: none;
    border-radius: var(--lb-radius-sm);
    font-weight: 600;
    cursor: pointer;
}

body.lb-client-modern #landing_page .search-form .button:hover,
body.lb-client-modern #landing_page .search-form button:hover {
    background: var(--lb-brand-hover);
}

body.lb-client-modern #landing_page .featured-category {
    background: #f9fafb;
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    padding: 16px 18px;
    margin-bottom: 16px;
}

body.lb-client-modern #landing_page .featured-category .category-name {
    font-weight: 600;
    color: var(--lb-text);
    margin-bottom: 10px;
}

body.lb-client-modern #landing_page .article-headline {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--lb-border);
}

body.lb-client-modern #landing_page .article-headline:first-of-type {
    border-top: none;
    padding-top: 0;
}

body.lb-client-modern #landing_page .article-title a {
    color: var(--lb-brand);
    font-weight: 600;
    text-decoration: none;
}

body.lb-client-modern #landing_page .article-title a:hover {
    text-decoration: underline;
}

body.lb-client-modern #landing_page .article-teaser {
    color: var(--lb-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

body.lb-client-modern #landing_page .main-content .thread-body {
    line-height: 1.7;
}

/* Login page — harmonize with modern tokens when both active */
body.lb-client-modern.lb-auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 16px;
}

body.lb-client-modern.lb-auth-page #container {
    flex: 0 1 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: min(400px, 100%) !important;
    max-width: 400px !important;
    min-width: 0 !important;
    padding: 28px 28px 22px !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 16px !important;
}

body.lb-client-modern.lb-auth-page #header {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    margin-bottom: 0;
    padding: 0 0 8px;
    justify-content: center;
}

body.lb-client-modern.lb-auth-page #content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.lb-client-modern.lb-auth-page #footer {
    width: min(400px, calc(100% - 32px)) !important;
    max-width: 400px !important;
    margin: 16px auto 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.lb-client-modern.lb-auth-page form#clientLogin > div[style*="table-row"] {
    display: block;
}

body.lb-client-modern.lb-auth-page form#clientLogin .login-box + div,
body.lb-client-modern.lb-auth-page form#clientLogin div[style*="table-cell"],
body.lb-client-modern.lb-auth-page form#clientLogin a[href*="scp/"],
body.lb-client-modern.lb-auth-page #login-branding-client-agent {
    display: none !important;
}

body.lb-client-modern.lb-auth-page form#clientLogin + br,
body.lb-client-modern.lb-auth-page form#clientLogin + br + p,
body.lb-client-modern.lb-auth-page #content > br {
    display: none;
}

body.lb-client-modern.lb-auth-page .login-box {
    width: 100%;
}

body.lb-client-modern.lb-auth-page .login-box input[type="text"],
body.lb-client-modern.lb-auth-page .login-box input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

body.lb-client-modern.lb-auth-page #header .pull-right,
body.lb-client-modern.lb-auth-page #nav {
    display: none !important;
}

body.lb-client-modern.lb-auth-page #header #logo {
    text-align: center;
}

body.lb-client-modern.lb-auth-page .login-box input[type="text"],
body.lb-client-modern.lb-auth-page .login-box input[type="password"] {
    border-radius: var(--lb-radius-sm);
    border-color: var(--lb-border);
}

body.lb-client-modern.lb-auth-page .login-box .btn,
body.lb-client-modern.lb-auth-page #content input.btn[type="submit"] {
    background: var(--lb-brand);
    border-radius: var(--lb-radius-sm);
}

body.lb-client-modern.lb-auth-page .login-branding-pwreset,
body.lb-client-modern.lb-auth-page .login-branding-back-login a {
    color: var(--lb-brand);
}

body.lb-client-modern.lb-pwreset-page form#clientLogin > div[style*="width"] {
    width: 100% !important;
    display: block !important;
}

body.lb-client-modern.lb-pwreset-page #content > p:first-of-type {
    display: block;
    text-align: center;
    color: var(--lb-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.35em;
}

/* Mobile layout */
@media (max-width: 768px) {
    body.lb-client-modern #lb-nav-toggle {
        display: block;
    }

    body.lb-client-modern:not(.lb-nav-open) #nav {
        display: none;
    }

    body.lb-client-modern #header .pull-right {
        width: 100%;
        text-align: center;
        order: 2;
    }

    body.lb-client-modern #header #logo {
        width: 100%;
        text-align: center;
    }

    body.lb-client-modern #content {
        padding: 20px 16px;
    }

    body.lb-client-modern h1 .states {
        float: none;
        display: block;
        margin-top: 12px;
    }

    /* Stack open-ticket form rows on small screens (not profile/account tables) */
    body.lb-client-modern #ticketForm tr {
        display: block;
        margin-bottom: 0.5em;
    }

    body.lb-client-modern #ticketForm th,
    body.lb-client-modern #ticketForm td {
        display: block;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    body.lb-client-modern #ticketForm th {
        padding-bottom: 4px;
    }

    /* Profile & account — leave table-layout or iOS stacks rows on top of each other */
    body.lb-client-modern form[action*="profile.php"] table.padded,
    body.lb-client-modern form[action*="account.php"] table.padded {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded > tbody,
    body.lb-client-modern form[action*="account.php"] table.padded > tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr,
    body.lb-client-modern form[action*="profile.php"] table.padded > tr,
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr,
    body.lb-client-modern form[action*="account.php"] table.padded > tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
        padding: 14px 0;
        border-bottom: 1px solid var(--lb-border);
    }

    body.lb-client-modern form[action*="profile.php"] table.padded td,
    body.lb-client-modern form[action*="profile.php"] table.padded th,
    body.lb-client-modern form[action*="account.php"] table.padded td,
    body.lb-client-modern form[action*="account.php"] table.padded th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        position: static !important;
        overflow: visible !important;
        padding: 4px 0;
        box-sizing: border-box;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded label,
    body.lb-client-modern form[action*="account.php"] table.padded label {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded label > br,
    body.lb-client-modern form[action*="account.php"] table.padded label > br {
        display: none !important;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded input[type="text"],
    body.lb-client-modern form[action*="profile.php"] table.padded input[type="email"],
    body.lb-client-modern form[action*="profile.php"] table.padded input[type="tel"],
    body.lb-client-modern form[action*="profile.php"] table.padded input[type="password"],
    body.lb-client-modern form[action*="profile.php"] table.padded select,
    body.lb-client-modern form[action*="profile.php"] table.padded textarea,
    body.lb-client-modern form[action*="account.php"] table.padded input[type="text"],
    body.lb-client-modern form[action*="account.php"] table.padded input[type="email"],
    body.lb-client-modern form[action*="account.php"] table.padded input[type="tel"],
    body.lb-client-modern form[action*="account.php"] table.padded input[type="password"],
    body.lb-client-modern form[action*="account.php"] table.padded select,
    body.lb-client-modern form[action*="account.php"] table.padded textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        height: auto !important;
        min-height: 44px;
        box-sizing: border-box !important;
    }

    body.lb-client-modern form[action*="profile.php"] .select2-container,
    body.lb-client-modern form[action*="account.php"] .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr > td:first-child:not([colspan]),
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr > td:first-child:not([colspan]) {
        max-width: none;
        padding-bottom: 6px;
        color: var(--lb-text);
    }

    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr > td[colspan="2"]:has(.form-header),
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr > td[colspan="2"]:has(.form-header),
    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr > td[colspan="2"]:has(h3),
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr > td[colspan="2"]:has(h3) {
        padding-top: 8px;
        border-bottom: none;
    }

    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr:has(.form-header),
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr:has(.form-header),
    body.lb-client-modern form[action*="profile.php"] table.padded > tbody > tr:has(h3),
    body.lb-client-modern form[action*="account.php"] table.padded > tbody > tr:has(h3) {
        border-bottom: none;
        padding-bottom: 4px;
    }

    body.lb-client-modern form[action*="profile.php"] .action-button,
    body.lb-client-modern form[action*="account.php"] .action-button {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"],
    body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern form[action*="profile.php"] p[style*="text-align: center"] input,
    body.lb-client-modern form[action*="account.php"] p[style*="text-align: center"] input {
        width: 100%;
        min-height: 44px;
    }

    body.lb-client-modern form[action="tickets.php"]:not(#reply) table > tbody > tr,
    body.lb-client-modern form[action="tickets.php"]:not(#reply) #dynamic-form > tr {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--lb-border);
    }

    body.lb-client-modern form[action="tickets.php"]:not(#reply) table > tbody > tr > td,
    body.lb-client-modern form[action="tickets.php"]:not(#reply) #dynamic-form > tr > td {
        display: block;
        width: 100% !important;
        padding: 4px 0;
        box-sizing: border-box;
    }

    body.lb-client-modern form[action="tickets.php"]:not(#reply) table > tbody > tr:has(.form-header),
    body.lb-client-modern form[action="tickets.php"]:not(#reply) table > tbody > tr:has(h3),
    body.lb-client-modern form[action="tickets.php"]:not(#reply) #dynamic-form > tr:has(.form-header),
    body.lb-client-modern form[action="tickets.php"]:not(#reply) #dynamic-form > tr:has(h3) {
        border-bottom: none;
        padding-bottom: 4px;
    }

    body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern form[action="tickets.php"]:not(#reply) p[style*="text-align: center"] input {
        width: 100%;
        min-height: 44px;
    }

    body.lb-client-modern #ticketInfo h1 {
        flex-direction: column;
        align-items: flex-start;
    }

    body.lb-client-modern #ticketInfo h1 .pull-right {
        width: 100%;
        margin-left: 0;
    }

    body.lb-client-modern #ticketInfo .action-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    body.lb-client-modern #ticketInfo > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    body.lb-client-modern #reply p[style*="text-align:center"],
    body.lb-client-modern #reply p[style*="text-align: center"] {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern #reply p[style*="text-align:center"] input,
    body.lb-client-modern #reply p[style*="text-align: center"] input {
        width: 100%;
        min-height: 44px;
    }

    /* Ticket list cards on mobile */
    body.lb-client-modern #ticketTable {
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    body.lb-client-modern #ticketTable thead {
        display: none;
    }

    body.lb-client-modern #ticketTable tbody tr {
        display: block;
        background: #f9fafb;
        border: 1px solid var(--lb-border);
        border-radius: var(--lb-radius-sm);
        padding: 14px 16px;
    }

    body.lb-client-modern #ticketTable tbody td {
        display: block;
        width: 100% !important;
        padding: 3px 0;
        border: 0;
    }

    body.lb-client-modern #ticketTable tbody td::before {
        display: inline-block;
        font-weight: 600;
        min-width: 6.5em;
        margin-right: 0.5em;
        color: var(--lb-muted);
        font-size: 0.85rem;
    }

    body.lb-client-modern #ticketTable tbody td:nth-child(1)::before { content: "Ticket #:"; }
    body.lb-client-modern #ticketTable tbody td:nth-child(2)::before { content: "Date:"; }
    body.lb-client-modern #ticketTable tbody td:nth-child(3)::before { content: "Status:"; }
    body.lb-client-modern #ticketTable tbody td:nth-child(4)::before { content: "Subject:"; }
    body.lb-client-modern #ticketTable tbody td:nth-child(5)::before { content: "Dept:"; }

    body.lb-client-modern #ticketTable tbody tr:only-child td[colspan="5"] {
        display: block;
        text-align: center;
        padding: 2rem 1rem;
    }

    body.lb-client-modern #ticketTable tbody tr:only-child td[colspan="5"]::before {
        display: none;
    }

    body.lb-client-modern #ticketSearchForm {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern #ticketSearchForm input[type="text"],
    body.lb-client-modern #ticketSearchForm input[type="submit"],
    body.lb-client-modern #ticketSearchForm select[name="topic_id"] {
        width: 100%;
    }

    body.lb-client-modern #ticketSearchForm .pull-right {
        flex-direction: column;
        align-items: stretch;
    }

    body.lb-client-modern #content > h1[style*="margin"] {
        flex-direction: column;
        align-items: flex-start;
    }

    body.lb-client-modern #nav li {
        display: block;
        margin: 4px 0;
    }

    body.lb-client-modern #nav li a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        line-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: var(--lb-radius-sm);
    }

    body.lb-client-modern .buttons input[type="reset"],
    body.lb-client-modern .buttons input[type="button"],
    body.lb-client-modern #reply input[type="reset"],
    body.lb-client-modern #reply input[type="button"] {
        margin-left: 0;
        width: 100%;
    }

    body.lb-client-modern input[type="submit"],
    body.lb-client-modern input.btn {
        width: 100%;
    }

    body.lb-client-modern #ticketForm input,
    body.lb-client-modern #ticketForm textarea,
    body.lb-client-modern #ticketForm select,
    body.lb-client-modern .login-box input[type="text"],
    body.lb-client-modern .login-box input[type="password"],
    body.lb-client-modern form[action*="profile.php"] input,
    body.lb-client-modern form[action*="profile.php"] textarea,
    body.lb-client-modern form[action*="profile.php"] select,
    body.lb-client-modern form[action*="account.php"] input,
    body.lb-client-modern form[action*="account.php"] textarea,
    body.lb-client-modern form[action*="account.php"] select,
    body.lb-client-modern form[action="tickets.php"]:not(#reply) input,
    body.lb-client-modern form[action="tickets.php"]:not(#reply) textarea,
    body.lb-client-modern form[action="tickets.php"]:not(#reply) select {
        font-size: 16px;
    }

    body.lb-client-modern #footer {
        width: calc(100% - 20px);
        margin-top: 12px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        font-size: 0.85rem;
    }

    body.lb-client-modern.lb-auth-page #container {
        justify-content: flex-start;
        padding: 22px 18px 18px !important;
        width: min(400px, 100%) !important;
        max-width: 400px !important;
    }

    body.lb-client-modern.lb-auth-page #content {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    body.lb-client-modern.lb-auth-page #header {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    body.lb-client-modern #container {
        padding: 0 10px 24px;
    }

    body.lb-client-modern #content {
        padding: 16px 14px;
    }

    body.lb-client-modern #header #logo img {
        max-height: 48px;
    }
}

/* --- frontend enhancements --- */

body.lb-client-modern :focus-visible {
    outline: 2px solid var(--lb-brand);
    outline-offset: 2px;
}

body.lb-client-modern .lb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--lb-brand);
    color: #fff;
    border-radius: var(--lb-radius-sm);
    text-decoration: none;
    font-weight: 600;
}

body.lb-client-modern .lb-skip-link:focus {
    left: 12px;
    top: 12px;
}

body.lb-client-modern .lb-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--lb-muted);
    background: #f9fafb;
    border: 1px dashed var(--lb-border);
    border-radius: var(--lb-radius);
    margin-top: 1rem;
}