/* Shared customer interface. Brand colors remain available for actions and links. */
:root,
html[data-ui-theme="light"] {
    color-scheme: light;
    --ui-canvas: #f6f8fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-sidebar: #ffffff;
    --ui-topbar: rgba(255,255,255,.96);
    --ui-ink: #182338;
    --ui-muted: #64748b;
    --ui-line: #e4eaf1;
    --ui-hover: #f0f5fb;
    --ui-active: #eaf1fb;
    --ui-shadow: 0 8px 28px rgba(31,46,71,.045);
    --ui-focus: #4f8cf7;
}

html[data-ui-theme="dark"] {
    color-scheme: dark;
    --ui-canvas: #0b1019;
    --ui-surface: #141b26;
    --ui-surface-soft: #192230;
    --ui-sidebar: #101721;
    --ui-topbar: rgba(16,23,33,.97);
    --ui-ink: #edf2f9;
    --ui-muted: #a0aec0;
    --ui-line: #2b3747;
    --ui-hover: #1d2938;
    --ui-active: #22354c;
    --ui-shadow: 0 14px 36px rgba(0,0,0,.13);
    --ui-focus: #91b9ff;
}

@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] {
        color-scheme: dark;
        --ui-canvas: #0b1019;
        --ui-surface: #141b26;
        --ui-surface-soft: #192230;
        --ui-sidebar: #101721;
        --ui-topbar: rgba(16,23,33,.97);
        --ui-ink: #edf2f9;
        --ui-muted: #a0aec0;
        --ui-line: #2b3747;
        --ui-hover: #1d2938;
        --ui-active: #22354c;
        --ui-shadow: 0 14px 36px rgba(0,0,0,.13);
        --ui-focus: #91b9ff;
    }
}

html { min-height: 100%; }
body.ui-shell {
    min-height: 100vh;
    background: var(--ui-canvas);
    color: var(--ui-ink);
    font: 14px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ui-shell .wrapper { min-height: 100vh; }
.ui-shell h1, .ui-shell h2, .ui-shell h3, .ui-shell h4, .ui-shell h5, .ui-shell h6 {
    color: var(--ui-ink);
    font-family: inherit;
    letter-spacing: -.025em;
    font-weight: 650;
}
.ui-shell .text-muted, .ui-shell small, .ui-shell label { color: var(--ui-muted) !important; }
.ui-shell a:not(.btn):focus-visible, .ui-shell button:focus-visible, .ui-shell select:focus-visible,
.ui-shell input:focus-visible, .ui-shell textarea:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Clear, fixed navigation with a compact account control. */
.ui-shell .main-header-navbar {
    height: 68px;
    padding: 0 28px;
    background: var(--ui-topbar);
    color: var(--ui-ink);
    border-bottom: 1px solid var(--ui-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ui-shell .navbar-brand {
    width: 250px;
    min-width: 0;
    height: 68px;
    justify-content: flex-start;
}
.ui-shell .main-header-navbar .navbar-brand img { max-width: 180px; max-height: 42px; }
.ui-shell .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 0 4px;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface);
    color: var(--ui-muted);
    cursor: pointer;
}
.ui-shell .sidebar-toggle:hover { background: var(--ui-hover); color: var(--ui-ink); }
.ui-shell .nav-icons { gap: 14px; }
.ui-shell .theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    min-height: 36px;
    border: 1px solid var(--ui-line);
    border-radius: 9px;
    color: var(--ui-muted);
    background: var(--ui-surface);
}
.ui-shell .theme-switcher i { font-size: 14px; }
.ui-shell .theme-switcher select {
    max-width: 94px;
    padding: 0 18px 0 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ui-ink);
    font-size: 13px;
    cursor: pointer;
}
.ui-shell .theme-switcher select:focus { box-shadow: none; }
.ui-shell .user-menu > img {
    width: 36px;
    height: 36px;
    margin-right: 0 !important;
    border: 2px solid var(--ui-line);
}
.ui-shell .user-menu .dropdown-menu {
    top: 44px;
    right: 0;
    transform: none;
    min-width: 190px;
    background: var(--ui-surface);
    border-color: var(--ui-line);
    box-shadow: var(--ui-shadow);
}
.ui-shell .user-menu .dropdown-menu a, .ui-shell .user-menu-logout {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--ui-ink);
    font-size: 13px;
    cursor: pointer;
}
.ui-shell .user-menu .dropdown-menu a:hover, .ui-shell .user-menu-logout:hover {
    background: var(--ui-hover);
    color: var(--ui-ink);
}

/* Sidebar hierarchy matches the structure of the existing feature menu. */
.ui-shell .main-sidebar {
    top: 68px;
    height: calc(100vh - 68px);
    background: var(--ui-sidebar);
    border-right: 1px solid var(--ui-line);
    padding: 12px 10px 18px;
}
.ui-shell .main-sidebar .sidebar { padding: 0; }
.ui-shell .main-sidebar .metismenu li { padding: 1px 0; }
.ui-shell .main-sidebar .metismenu > li.sidebar-section-label {
    padding: 17px 13px 7px;
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.ui-shell .main-sidebar .metismenu a {
    min-height: 37px;
    padding: 8px 11px;
    border-radius: 8px;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 500;
}
.ui-shell .main-sidebar .metismenu a i { width: 19px; min-width: 19px; font-size: 14px; }
.ui-shell .main-sidebar .metismenu a:hover,
.ui-shell .main-sidebar .metismenu li.mm-active > a,
.ui-shell .main-sidebar .metismenu a.active {
    background: var(--ui-hover);
    color: var(--ui-ink);
}
.ui-shell .main-sidebar .metismenu li.mm-active > a,
.ui-shell .main-sidebar .metismenu a.active { background: var(--ui-active); font-weight: 650; }
.ui-shell .main-sidebar .metismenu ul {
    margin: 3px 0 6px 12px;
    padding-left: 8px;
    background: transparent;
    border-left: 1px solid var(--ui-line);
}
.ui-shell .main-sidebar .metismenu ul li a { padding: 7px 9px; font-size: 12.5px; }
.ui-shell .main-sidebar .metismenu ul li a::before { display: none; }
.ui-shell .main-sidebar .sidebar-footer {
    background: var(--ui-surface-soft);
    border-color: var(--ui-line);
    box-shadow: none;
}
.ui-shell .main-sidebar .version-info, .ui-shell .main-sidebar .version-text,
.ui-shell .main-sidebar .version-text strong { color: var(--ui-muted); }
.ui-shell .main-sidebar .changelog-link { color: var(--branding-link); }
.ui-shell .main-sidebar.collapsed .sidebar-section-label { display: none; }

/* More space for work, with one visual language for shared components. */
.ui-shell .content-wrapper { min-height: 100vh; padding: 98px 30px 44px; }
.ui-shell .content-wrapper .container-fluid { max-width: 1680px; margin: 0 auto; }
.ui-shell.ui-customer .page-context-line {
    margin: 0 0 18px;
    color: var(--ui-muted);
    font-size: 13px;
}
.ui-shell .page-header {
    padding-bottom: 16px;
    margin-bottom: 24px !important;
    border-color: var(--ui-line);
    gap: 10px;
}
.ui-shell .page-header h2 { color: var(--ui-ink); font-size: clamp(1.5rem, 2.5vw, 1.85rem); font-weight: 700; }
.ui-shell .page-header .breadcrumb { padding: 0; margin: 0; color: var(--ui-muted); }
.ui-shell .breadcrumb-item.active { color: var(--ui-muted); }
.ui-shell .breadcrumb-item + .breadcrumb-item::before { color: var(--ui-muted); }
.ui-shell .card, .ui-shell .panel, .ui-shell .modal-content,
.ui-shell .dropdown-menu:not(.user-menu .dropdown-menu) {
    background: var(--ui-surface);
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
}
.ui-shell .card-header, .ui-shell .card-footer, .ui-shell .modal-header, .ui-shell .modal-footer {
    background: transparent;
    border-color: var(--ui-line);
    color: var(--ui-ink);
}
.ui-shell .card-header {
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 680;
    letter-spacing: .01em;
}
.ui-shell .card-body, .ui-shell .panel-body { color: var(--ui-ink); }
.ui-shell .card-footer { padding: 12px 20px; font-size: 12px; }
.ui-shell .btn {
    border-radius: 9px;
    font-weight: 600;
    padding: 7px 13px;
    box-shadow: none;
}
.ui-shell .btn:hover { transform: translateY(-1px); }
.ui-shell .btn-primary { background: var(--branding-nav-bg); border-color: var(--branding-nav-bg); color: var(--branding-nav-text); }
.ui-shell .btn-light, .ui-shell .btn-secondary, .ui-shell .btn-outline-secondary {
    background: var(--ui-surface-soft);
    border-color: var(--ui-line);
    color: var(--ui-ink);
}
.ui-shell .form-control, .ui-shell .custom-select, .ui-shell input[type="date"],
.ui-shell .select2-container--default .select2-selection--single,
.ui-shell .select2-container--default .select2-selection--multiple {
    background: var(--ui-surface);
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    border-radius: 9px;
    box-shadow: none;
}
.ui-shell .form-control::placeholder { color: var(--ui-muted); opacity: .8; }
.ui-shell .form-control:focus, .ui-shell .custom-select:focus {
    border-color: var(--ui-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent);
}
.ui-shell .table, .ui-shell table.dataTable, .ui-shell .custom-table,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable {
    background: var(--ui-surface) !important;
    color: var(--ui-ink);
    border-color: var(--ui-line) !important;
    font-family: inherit;
}
.ui-shell .table th, .ui-shell .table td { border-color: var(--ui-line); }
.ui-shell .table thead th, .ui-shell .custom-table thead th,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable thead th,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable.custom-table thead th {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-line) !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.ui-shell .table tbody td, .ui-shell .custom-table tbody td,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable tbody > tr:not(.child) > td {
    color: var(--ui-ink) !important;
    background: var(--ui-surface);
    border-color: var(--ui-line) !important;
    font-family: inherit;
}
.ui-shell .table-hover tbody tr:hover td,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable tbody > tr:not(.child):hover > td {
    background: var(--ui-hover) !important;
}
.ui-shell .dataTables_wrapper.interface-datatable,
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_info,
.ui-shell .dataTables_wrapper.interface-datatable label { color: var(--ui-muted) !important; }
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_filter input,
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_length select,
.ui-shell .dataTables_wrapper.interface-datatable .page-link,
.ui-shell .page-link {
    background: var(--ui-surface);
    border-color: var(--ui-line);
    border-radius: 8px !important;
    color: var(--ui-ink);
}
.ui-shell .dataTables_wrapper.interface-datatable .page-item.disabled .page-link { background: var(--ui-surface-soft); color: var(--ui-muted); }
.ui-shell .dataTables_wrapper.interface-datatable .page-item.active .page-link { background: var(--branding-nav-bg); color: var(--branding-nav-text); }
.ui-shell .nav-tabs { border-color: var(--ui-line); }
.ui-shell .nav-tabs .nav-link { border-radius: 9px 9px 0 0; }
.ui-shell .nav-tabs .nav-link.active { border-color: var(--ui-line); }
.ui-shell .alert { border-radius: 10px; }
.ui-shell .border, .ui-shell .border-bottom, .ui-shell hr { border-color: var(--ui-line) !important; }

@media (max-width: 991.98px) {
    .ui-shell .main-header-navbar { padding: 0 16px; }
    .ui-shell .navbar-brand { width: auto; max-width: 170px; height: 68px; }
    .ui-shell .main-sidebar { top: 68px; height: calc(100vh - 68px); }
    .ui-shell .content-wrapper { padding: 92px 18px 30px; }
    .ui-shell #sidebarOverlay { top: 68px; }
}
@media (max-width: 575.98px) {
    .ui-shell .navbar-brand { max-width: 125px; }
    .ui-shell .main-header-navbar .navbar-brand img { max-width: 125px; }
    .ui-shell .theme-switcher { padding: 0 7px; }
    .ui-shell .theme-switcher i { display: none; }
    .ui-shell .nav-icons { gap: 8px; }
    .ui-shell .content-wrapper { padding: 88px 14px 24px; }
    .ui-shell .page-header { align-items: flex-start; }
}

/* The brand now lives with the navigation, as in the reference layout. */
body.ui-shell { --sidebar-width: 244px; --navbar-height: 64px; }
.ui-shell .main-header-navbar {
    left: var(--sidebar-width);
    right: 0;
    width: calc(100% - var(--sidebar-width));
    height: 64px;
    padding: 0 24px;
}
.ui-shell.no-sidebar .main-header-navbar { left: 0; width: 100%; }
.ui-shell .main-header-navbar .navbar-brand { display: none !important; }
.ui-shell .navbar-context { margin-left: 14px; color: var(--ui-ink); font-size: 13px; font-weight: 650; }
.ui-shell .main-sidebar { top: 0; height: 100vh; padding: 0 10px 18px; }
.ui-shell .main-sidebar .sidebar { padding: 0; }
.ui-shell .main-sidebar nav.mt-2 { margin-top: 0 !important; }
.ui-shell .sidebar-brand {
    display: flex;
    align-items: center;
    height: 64px;
    margin: 0 -10px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ui-line);
}
.ui-shell .sidebar-brand img {
    display: block;
    max-width: 100%;
    max-height: 40px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--branding-topbar-bg);
    object-fit: contain;
}
.ui-shell .content-wrapper { padding-top: 92px; }
.ui-shell .card-header { text-transform: capitalize; }
.ui-shell .main-sidebar.collapsed .sidebar-brand { justify-content: center; padding: 10px 5px; }
.ui-shell .main-sidebar.collapsed .sidebar-brand img { width: 46px; max-width: 46px; object-position: left center; }
.ui-shell:has(.main-sidebar.collapsed) .main-header-navbar { left: var(--sidebar-width-collapsed); width: calc(100% - var(--sidebar-width-collapsed)); }

/* Brand, organization, navigation and account form a single sidebar shell. */
.ui-shell .main-sidebar {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0 9px 10px;
}
.ui-shell .sidebar-brand {
    flex: none;
    height: 64px;
    margin: 0 -9px 4px;
    padding: 8px 19px;
    border-bottom: 0;
}
.ui-shell .sidebar-brand img { max-height: 37px; padding: 5px 0; }
.ui-shell .sidebar-organization {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    min-height: 57px;
    margin: 2px 0 10px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ui-ink) !important;
    text-decoration: none !important;
}
.ui-shell .sidebar-organization:hover { background: var(--ui-hover); border-color: var(--ui-line); }
.ui-shell .sidebar-organization-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    background: var(--ui-surface-soft);
    color: var(--ui-ink);
    font-size: 14px;
}
.ui-shell .sidebar-organization-copy, .ui-shell .sidebar-account-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.ui-shell .sidebar-organization-copy strong, .ui-shell .sidebar-account-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-ink); font-size: 12px; font-weight: 650; }
.ui-shell .sidebar-organization-copy small, .ui-shell .sidebar-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted) !important; font-size: 10px; }
.ui-shell .sidebar-organization-chevron { flex: none; color: var(--ui-muted); font-size: 9px; }
.ui-shell .main-sidebar > .sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.ui-shell .main-sidebar .metismenu > li.sidebar-section-label { padding: 17px 13px 7px; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ui-shell .main-sidebar .metismenu > li.sidebar-section-label:first-child { padding-top: 7px; }
.ui-shell .main-sidebar .metismenu a { position: relative; min-height: 37px; padding: 8px 11px; color: var(--ui-ink); }
.ui-shell .main-sidebar .metismenu a i:not(.arrow) { color: var(--ui-muted); }
.ui-shell .main-sidebar .metismenu a.active,
.ui-shell .main-sidebar .metismenu li.mm-active > a { background: var(--ui-hover); }
.ui-shell.ui-default-brand .main-sidebar .metismenu a.active::before,
.ui-shell.ui-default-brand .main-sidebar .metismenu li.mm-active > a::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -9px;
    width: 3px;
    border-radius: 4px;
    background: #5bd994;
}
.ui-shell .sidebar-account-area { flex: none; position: relative; padding-top: 7px; border-top: 1px solid var(--ui-line); }
.ui-shell .sidebar-account-menu > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 45px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}
.ui-shell .sidebar-account-menu > summary::-webkit-details-marker { display: none; }
.ui-shell .sidebar-account-menu > summary:hover,
.ui-shell .sidebar-account-menu[open] > summary { background: var(--ui-hover); }
.ui-shell .sidebar-account-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--ui-surface-soft); color: var(--ui-ink); font-size: 10px; font-weight: 700; }
.ui-shell .sidebar-account-menu > summary > i { color: var(--ui-muted); font-size: 10px; }
.ui-shell .sidebar-account-panel { position: absolute; right: 0; bottom: 56px; left: 0; z-index: 1060; overflow: hidden; padding: 5px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); box-shadow: 0 14px 35px rgba(0,0,0,.15); }
.ui-shell .sidebar-account-identity { display: flex; flex-direction: column; min-width: 0; padding: 8px 9px 10px; border-bottom: 1px solid var(--ui-line); }
.ui-shell .sidebar-account-identity strong, .ui-shell .sidebar-account-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-shell .sidebar-account-identity strong { color: var(--ui-ink); font-size: 12px; }
.ui-shell .sidebar-account-identity small { color: var(--ui-muted); font-size: 10px; }
.ui-shell .sidebar-account-panel > a,
.ui-shell .sidebar-account-logout { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-ink) !important; text-align: left; text-decoration: none; font-size: 12px; cursor: pointer; }
.ui-shell .sidebar-account-panel > a:hover,
.ui-shell .sidebar-account-logout:hover { background: var(--ui-hover); }
.ui-shell .sidebar-account-panel > a i,
.ui-shell .sidebar-account-logout i { width: 16px; color: var(--ui-muted); }
.ui-shell .sidebar-theme-label { padding: 10px 9px 6px; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: 10px; }
.ui-shell .sidebar-theme-options { display: flex; gap: 2px; width: max-content; margin: 0 9px 10px; padding: 3px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface-soft); }
.ui-shell .sidebar-theme-options button { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-shell .sidebar-theme-options button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-ink); box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.ui-shell .sidebar-account-logout { border-top: 1px solid var(--ui-line); border-radius: 0; }
.ui-shell .header-breadcrumb { display: flex; align-items: center; gap: 10px; margin-left: 14px; color: var(--ui-ink); font-size: 12px; font-weight: 600; }
.ui-shell .header-breadcrumb a { color: var(--ui-muted); text-decoration: none; }
.ui-shell .header-breadcrumb a:hover { color: var(--ui-ink); }
.ui-shell .header-breadcrumb i { color: var(--ui-muted); font-size: 9px; }
.ui-shell .header-status-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 7px; color: var(--ui-muted); text-decoration: none; font-size: 11px; }
.ui-shell .header-status-link:hover { background: var(--ui-hover); color: var(--ui-ink); text-decoration: none; }
.ui-shell .header-help-link { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ui-muted); text-decoration: none; }
.ui-shell .header-help-link:hover { color: var(--ui-ink); }
.ui-shell .main-header-navbar .nav-icons .header-status-link i,
.ui-shell .main-header-navbar .nav-icons .header-help-link i { margin: 0; color: inherit; font-size: 14px; }
@media (min-width: 992px) {
    .ui-shell .main-sidebar.collapsed .sidebar-organization { justify-content: center; padding: 8px 0; }
    .ui-shell .main-sidebar.collapsed .sidebar-organization-copy,
    .ui-shell .main-sidebar.collapsed .sidebar-organization-chevron,
    .ui-shell .main-sidebar.collapsed .sidebar-account-copy,
    .ui-shell .main-sidebar.collapsed .sidebar-account-menu > summary > i { display: none; }
    .ui-shell .main-sidebar.collapsed .sidebar-account-menu > summary { justify-content: center; }
    .ui-shell .main-sidebar.collapsed .sidebar-account-panel { right: auto; left: 58px; bottom: 0; width: 220px; }
}
@media (max-width: 991.98px) {
    .ui-shell .main-sidebar { top: 0; height: 100vh; }
    .ui-shell .main-header-navbar { left: 0; width: 100%; }
    .ui-shell .main-header-navbar .navbar-brand { display: none !important; }
    .ui-shell .header-status-link span { display: none; }
}

/* Existing announcements keep their wording while following the selected theme. */
.ui-shell .system-announcement {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-left: 4px solid #d45d60 !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow) !important;
}
.ui-shell .system-announcement-title { color: #cb575b !important; font-size: 15px !important; }
.ui-shell .system-announcement-text, .ui-shell .system-alert-body { color: var(--ui-ink) !important; }
.ui-shell .alert-info { background: var(--ui-surface-soft); border-color: var(--ui-line); color: var(--ui-muted); }
.ui-shell .dashboard-alerts-title, .ui-shell .system-alert-summary-title { color: var(--ui-ink) !important; }
.ui-shell .dashboard-alerts-subtitle, .ui-shell .system-alert-summary-meta { color: var(--ui-muted) !important; }

@media (max-width: 991.98px) {
    .ui-shell .main-header-navbar,
    .ui-shell.no-sidebar .main-header-navbar,
    .ui-shell:has(.main-sidebar.collapsed) .main-header-navbar { left: 0; width: 100%; padding: 0 16px; }
    .ui-shell .main-header-navbar .navbar-brand {
        display: flex !important;
        width: auto;
        max-width: 170px;
        height: 42px;
        padding: 5px 8px;
        border-radius: 8px;
        background: var(--branding-topbar-bg);
    }
    .ui-shell .main-header-navbar .navbar-brand img { max-height: 30px; max-width: 150px; }
    .ui-shell .navbar-context, .ui-shell .sidebar-brand { display: none; }
    .ui-shell .main-sidebar { top: 64px; height: calc(100vh - 64px); }
    .ui-shell #sidebarOverlay { top: 64px; }
}

/* Quiet surfaces and compact controls shared by the customer pages. */
:root, html[data-ui-theme="light"] {
    --ui-canvas: #fff;
    --ui-sidebar: #fafafa;
    --ui-surface-soft: #fafbfc;
    --ui-line: #e9e9ec;
    --ui-hover: #f2f3f4;
    --ui-active: #eceeef;
    --ui-ink: #20242b;
    --ui-muted: #727983;
    --ui-shadow: none;
    --ui-link: #245eaa;
}
html[data-ui-theme="dark"] {
    --ui-canvas: #101316;
    --ui-sidebar: #15191d;
    --ui-surface: #1b2025;
    --ui-surface-soft: #20262b;
    --ui-line: #30383f;
    --ui-hover: #252d33;
    --ui-active: #2a343a;
    --ui-ink: #edf0f2;
    --ui-muted: #a1abb2;
    --ui-shadow: none;
    --ui-link: #88b9ff;
}
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] {
        --ui-canvas: #101316;
        --ui-sidebar: #15191d;
        --ui-surface: #1b2025;
        --ui-surface-soft: #20262b;
        --ui-line: #30383f;
        --ui-hover: #252d33;
        --ui-active: #2a343a;
        --ui-ink: #edf0f2;
        --ui-muted: #a1abb2;
        --ui-shadow: none;
        --ui-link: #88b9ff;
    }
}
.ui-shell .main-header-navbar { background: var(--ui-surface); }
.ui-shell .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut) { color: var(--ui-link); }
.ui-shell .main-sidebar .changelog-link { color: var(--ui-link); }
.ui-shell.ui-default-brand .btn-primary,
.ui-shell.ui-default-brand .dataTables_wrapper.interface-datatable .page-item.active .page-link {
    background: #5bd994;
    border-color: #5bd994;
    color: #12331f;
}
.ui-shell.ui-default-brand .btn-primary:hover,
.ui-shell.ui-default-brand .btn-primary:focus {
    background: #48c981;
    border-color: #48c981;
    color: #102c1b;
}
.ui-shell.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
.ui-shell.ui-default-brand .main-sidebar .changelog-link { color: #21845a; }
html[data-ui-theme="dark"] .ui-shell.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
html[data-ui-theme="dark"] .ui-shell.ui-default-brand .main-sidebar .changelog-link { color: #7be0ad; }
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
    html[data-ui-theme="system"] .ui-shell.ui-default-brand .main-sidebar .changelog-link { color: #7be0ad; }
}
.ui-shell .sidebar-brand--monochrome img,
.ui-shell .navbar-brand--monochrome img {
    background: transparent;
    filter: invert(1);
}
.ui-shell .main-header-navbar .navbar-brand--monochrome { background: transparent; }
html[data-ui-theme="dark"] .ui-shell .sidebar-brand--monochrome img,
html[data-ui-theme="dark"] .ui-shell .navbar-brand--monochrome img { filter: none; }
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell .sidebar-brand--monochrome img,
    html[data-ui-theme="system"] .ui-shell .navbar-brand--monochrome img { filter: none; }
}
.ui-shell .sidebar-brand { margin-bottom: 10px; }
.ui-shell .main-sidebar .metismenu a { border-radius: 7px; }
.ui-shell .main-sidebar .metismenu a.active,
.ui-shell .main-sidebar .metismenu li.mm-active > a {
    position: relative;
    background: var(--ui-active);
}
.ui-shell .main-sidebar .metismenu > li > a.active::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 3px;
    background: #56d796;
}
.ui-shell .content-wrapper { padding-top: 94px; }
.ui-shell .content-wrapper .container-fluid { max-width: 1440px; }
.ui-shell .page-header { border: 0; padding-bottom: 0; margin-bottom: 24px !important; }
.ui-shell .page-header h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.ui-shell .page-subtitle { margin-top: 3px; color: var(--ui-muted); font-size: 13px; }
.ui-shell .page-header .breadcrumb { font-size: 12px; }
.ui-shell .card, .ui-shell .panel, .ui-shell .modal-content,
.ui-shell .dropdown-menu:not(.user-menu .dropdown-menu) { border-radius: 12px; box-shadow: none; }
.ui-shell .card { overflow: hidden; }
.ui-shell .card-header {
    padding: 18px 20px 12px;
    border-bottom: 0;
    font-size: 14px;
    letter-spacing: -.015em;
}
.ui-shell .card-header.bg-light { background: var(--ui-surface) !important; }
.ui-shell .card-body, .ui-shell .panel-body { padding: 18px 20px; }
.ui-shell .card-footer { background: var(--ui-surface-soft); }
.ui-shell .card-header .btn { margin: -4px 0; }
.ui-shell .btn { border-radius: 8px; transition: background-color .15s, border-color .15s; }
.ui-shell .btn:hover { transform: none; }
.ui-shell .btn-xs { font-size: 12px; padding: 6px 10px; }
.ui-shell .form-control, .ui-shell .custom-select { min-height: 38px; }
.ui-shell .form-group label { font-size: 12px; font-weight: 600; }
.ui-shell .modal-header { padding: 18px 22px; }
.ui-shell .modal-title { font-size: 18px; }
.ui-shell .modal-body { padding: 22px; }
.ui-shell #createTicketModal .modal-dialog,
.ui-shell #createTicketModal .form-group,
.ui-shell #createTicketModal .form-group:last-child,
.ui-shell .close { color: var(--ui-muted); text-shadow: none; opacity: 1; }
.ui-shell .alert-info { border-radius: 8px; }
.ui-shell .dataTables_wrapper.interface-datatable > .row:first-child { margin-bottom: 14px; }
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_length select,
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_filter input {
    height: 36px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-ink);
}
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_filter input { min-width: 190px; }
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable.custom-table {
    border-radius: 8px;
    overflow: hidden;
}
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable thead th,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable.custom-table thead th {
    padding: 12px 13px !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-muted) !important;
    font-size: 11px;
}
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable tbody > tr:not(.child) > td,
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable.custom-table tbody > tr:not(.child) > td {
    height: 45px !important;
    padding: 9px 13px !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
}
.ui-shell .dataTables_wrapper.interface-datatable table.dataTable tbody > tr.child > td.child {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-ink) !important;
}
.ui-shell .dataTables_wrapper.interface-datatable .dataTables_info { line-height: 1.5; }
.ui-shell .label, .ui-shell .badge { border-radius: 6px; font-weight: 600; }

/* Existing ticket conversation and information, using the same theme surfaces. */
.ui-shell .message-box {
    width: min(100%, 620px);
    max-width: 620px;
    padding: 16px 18px;
    background: var(--ui-surface-soft);
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    border-radius: 11px;
}
.ui-shell .reseller-message .message-box { background: var(--ui-hover); }
.ui-shell .message-text { color: var(--ui-ink); margin-bottom: 12px; line-height: 1.6; }
.ui-shell .message-meta, .ui-shell .activity-text, .ui-shell .activity-date { color: var(--ui-muted); }
.ui-shell .message-meta { gap: 12px; border-top: 1px solid var(--ui-line); padding-top: 10px; }
.ui-shell .user-avatar { flex: none; margin-right: 10px; border: 1px solid var(--ui-line); }
.ui-shell .activity-line { background: var(--ui-line); }
.ui-shell .ticket-info p {
    display: grid;
    grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 10px 0;
    line-height: 1.45;
    border-bottom: 1px solid var(--ui-line);
}
.ui-shell .ticket-info p:last-child { border-bottom: 0; }
.ui-shell .ticket-info p strong { color: var(--ui-muted); font-weight: 600; }
.ui-shell .ticket-info p > span { float: none !important; justify-self: end; text-align: right; overflow-wrap: anywhere; }
.ui-shell .ticket-info .label { line-height: 1.3; }
@media (max-width: 575.98px) {
    .ui-shell .dataTables_wrapper.interface-datatable .dataTables_filter input { min-width: 0; }
    .ui-shell .ticket-info p { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr); }
}

/* Support starts with a ticket inbox. Existing ticket data and actions stay intact. */
.ui-shell .ticket-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
    min-height: min(650px, calc(100vh - 175px));
    height: calc(100vh - 130px);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    overflow: hidden;
}
.ui-shell.ui-customer .content-wrapper:has(.ticket-workspace) { min-height: 100vh; padding: 64px 0 0; }
.ui-shell.ui-customer .content-wrapper:has(.ticket-workspace) .container-fluid { max-width: none; padding: 0; }
.ui-shell.ui-customer .ticket-workspace {
    height: calc(100vh - 64px);
    min-height: 500px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ui-shell .ticket-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--ui-line); }
.ui-shell .ticket-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-ink);
}
.ui-shell .ticket-list-heading strong { font-size: 14px; }
.ui-shell .ticket-list-item {
    display: block;
    min-height: 105px;
    padding: 16px 18px;
    color: var(--ui-ink);
    text-decoration: none;
}
.ui-shell .ticket-list-item:hover { color: var(--ui-ink); text-decoration: none; background: var(--ui-hover); }
.ui-shell .ticket-list-item-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.ui-shell .ticket-list-item-top strong { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.4; }
.ui-shell .ticket-list-item-top time { flex: none; color: var(--ui-muted); font-size: 11px; }
.ui-shell .ticket-list-item-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--ui-muted); font-size: 11px; }
.ui-shell .ticket-list-dot { width: 3px; height: 3px; background: var(--ui-muted); border-radius: 50%; }
.ui-shell .ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 2px 8px;
    background: var(--ui-surface-soft);
    color: var(--ui-muted);
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.ui-shell .ticket-status i { font-size: 10px; }
.ui-shell .ticket-status--new { color: #366b91; background: #eaf4fb; border-color: #cee5f4; }
.ui-shell .ticket-status--progress { color: #8b650b; background: #fff6db; border-color: #f0dea2; }
.ui-shell .ticket-status--customer { color: #44668f; background: #ebf2fb; border-color: #cadcf0; }
.ui-shell .ticket-status--support { color: #7451a0; background: #f2ebfa; border-color: #dac9ed; }
.ui-shell .ticket-status--solved { color: #506477; background: #edf1f4; border-color: #d4dfe7; }
html[data-ui-theme="dark"] .ui-shell .ticket-status--new { color: #a8d6f3; background: #1f3548; border-color: #365973; }
html[data-ui-theme="dark"] .ui-shell .ticket-status--progress { color: #f5d282; background: #423719; border-color: #665529; }
html[data-ui-theme="dark"] .ui-shell .ticket-status--customer { color: #a9c9f0; background: #23374e; border-color: #3a5675; }
html[data-ui-theme="dark"] .ui-shell .ticket-status--support { color: #d1b7f0; background: #372a49; border-color: #58436f; }
html[data-ui-theme="dark"] .ui-shell .ticket-status--solved { color: #c2d0dd; background: #29343d; border-color: #48545f; }
html[data-ui-theme="dark"] .ui-customer .text-success { color: #7ad7a1 !important; }
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell .ticket-status--new { color: #a8d6f3; background: #1f3548; border-color: #365973; }
    html[data-ui-theme="system"] .ui-shell .ticket-status--progress { color: #f5d282; background: #423719; border-color: #665529; }
    html[data-ui-theme="system"] .ui-shell .ticket-status--customer { color: #a9c9f0; background: #23374e; border-color: #3a5675; }
    html[data-ui-theme="system"] .ui-shell .ticket-status--support { color: #d1b7f0; background: #372a49; border-color: #58436f; }
    html[data-ui-theme="system"] .ui-shell .ticket-status--solved { color: #c2d0dd; background: #29343d; border-color: #48545f; }
    html[data-ui-theme="system"] .ui-customer .text-success { color: #7ad7a1 !important; }
}
.ui-shell .ticket-preview-pane { display: grid; place-items: center; padding: 36px 24px; }
.ui-shell .ticket-preview-empty { width: min(100%, 340px); text-align: center; }
.ui-shell .ticket-preview-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ui-surface-soft);
    color: var(--ui-muted);
    font-size: 20px;
}
.ui-shell .ticket-preview-empty h3 { font-size: 19px; margin-bottom: 8px; }
.ui-shell .ticket-preview-empty p { color: var(--ui-muted); margin-bottom: 22px; }
.ui-shell .ticket-preview-empty .btn { display: block; width: 100%; margin: 8px 0; }
@media (max-width: 767.98px) {
    .ui-shell .ticket-workspace { display: block; height: auto; min-height: 0; }
    .ui-shell .ticket-list-pane { border-right: 0; }
    .ui-shell .ticket-preview-pane { display: none; }
}

/* Ticket inbox without a data table. */
.ui-shell .ticket-list-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-muted);
}
.ui-shell .ticket-list-search .form-control { min-width: 0; height: 38px; margin: 0; }
.ui-shell .ticket-list-items { flex: 1; min-height: 0; overflow-y: auto; }
.ui-shell .ticket-list-items .ticket-list-item {
    border-bottom: 1px solid var(--ui-line);
}
.ui-shell .ticket-list-item.is-active,
.ui-shell .ticket-list-item.is-active:hover { background: var(--ui-hover); }
.ui-shell .ticket-list-item { min-height: 88px; }
.ui-shell .ticket-list-item-bottom { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.ui-shell .ticket-list-item .ticket-status { margin-top: 0; }
.ui-shell .ticket-reference { color: var(--ui-muted); font-size: 10px; }
.ui-shell .ticket-list-feedback,
.ui-shell .dashboard-ticket-feedback { padding: 28px 18px; color: var(--ui-muted); text-align: center; }
.ui-shell .ticket-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: var(--ui-muted);
    font-size: 11px;
}
.ui-shell .ticket-list-pagination > div { display: flex; gap: 6px; }
.ui-shell .ticket-list-pagination .btn { font-size: 11px; padding: 5px 9px; }
.ui-shell .ticket-workspace--detail { grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); }
.ui-shell .ticket-detail-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; }
.ui-shell .ticket-detail-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ui-line);
}
.ui-shell .ticket-detail-kicker { display: block; color: var(--ui-muted); font-size: 11px; }
.ui-shell .ticket-detail-heading h3 { margin: 0; font-size: 14px; font-weight: 650; }
.ui-shell .ticket-detail-heading .ticket-status { flex: none; margin: 0; }
.ui-shell .ticket-detail-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.ui-shell .ticket-detail-actions form { margin: 0; }
.ui-shell .ticket-detail-pane > .row { flex: 1; min-height: 0; margin: 0; flex-wrap: nowrap; align-items: stretch; overflow: hidden; }
.ui-shell .ticket-detail-pane > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
.ui-shell .ticket-detail-pane .card { border: 0; border-radius: 0; }
.ui-shell .ticket-detail-pane .card-body { padding: 0; }
.ui-shell .ticket-detail-pane .ticket-info { padding: 4px 0; }
.ui-shell .ticket-detail-pane .message-container { padding: 0 0 18px; }
.ui-shell .ticket-detail-pane .btn-group { margin-bottom: 10px; }
.ui-shell .ticket-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 0 20px 20px !important; }
.ui-shell .ticket-thread > .card { flex: 1 1 0; min-height: 0; margin-bottom: 0; overflow: hidden; }
.ui-shell .ticket-conversation > .card-body { flex: 1 1 auto; min-height: 0; padding: 22px 0 !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
.ui-shell .ticket-thread > .card > .card-header,
.ui-shell .ticket-aside .card-header {
    padding: 12px 0;
    background: transparent;
    color: var(--ui-ink);
    border-bottom: 1px solid var(--ui-line);
    font-size: 13px;
}
.ui-shell .ticket-thread .message-box { max-width: min(620px, 88%); }
.ui-shell .ticket-thread .message-container { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 22px; }
.ui-shell .ticket-thread .reseller-message { align-items: flex-end; }
.ui-shell .ticket-thread .ticket-message-author { margin: 0 0 6px; color: var(--ui-muted); font-size: 11px; }
.ui-shell .ticket-thread .message-box {
    background: var(--ui-surface-soft);
    color: var(--ui-ink);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
}
.ui-shell .ticket-thread .message-box .message-text { color: inherit; }
.ui-shell .ticket-thread .reseller-message .message-box {
    background: #eaf8f0;
    border-color: #d1e9db;
    color: #173b2b;
}
.ui-shell .ticket-thread .reseller-message .ticket-message-time { color: #527766; }
html[data-ui-theme="dark"] .ui-shell .ticket-thread .reseller-message .message-box {
    background: #1a392b;
    border-color: #315642;
    color: #e7f5eb;
}
html[data-ui-theme="dark"] .ui-shell .ticket-thread .reseller-message .ticket-message-time { color: #b5d0bf; }
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell .ticket-thread .reseller-message .message-box {
        background: #1a392b;
        border-color: #315642;
        color: #e7f5eb;
    }
    html[data-ui-theme="system"] .ui-shell .ticket-thread .reseller-message .ticket-message-time { color: #b5d0bf; }
}
.ui-shell .ticket-thread .message-text { margin-bottom: 4px; }
.ui-shell .ticket-thread .ticket-message-time { display: block; margin-top: 8px; color: var(--ui-muted); text-align: right; font-size: 10px; }
.ui-shell .ticket-thread .activity-section { margin: 14px 0; }
.ui-shell .ticket-thread .activity-text { color: var(--ui-muted); }
.ui-shell .ticket-aside { min-height: 0; padding: 4px 18px !important; overflow-y: auto; }
.ui-shell .ticket-aside .card { margin-bottom: 18px; }
.ui-shell .ticket-aside .card-header { color: var(--ui-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ui-shell .ticket-aside .ticket-info p { grid-template-columns: minmax(66px, 38%) minmax(0, 1fr); padding: 8px 0; border-bottom: 0; font-size: 12px; }
.ui-shell .ticket-aside .ticket-status { white-space: nowrap; font-size: 10px; }
.ui-shell .ticket-aside .ticket-info p strong { font-size: 11px; }
.ui-shell .ticket-composer {
    flex: none;
    margin-top: 0;
    padding: 16px;
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
}
.ui-shell .ticket-composer > label { display: block; margin-bottom: 8px; color: var(--ui-ink); font-size: 13px; font-weight: 650; }
.ui-shell .ticket-composer textarea { min-height: 66px; resize: vertical; background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line); }
.ui-shell .ticket-composer-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ui-shell .ticket-attach-button { margin: 0; color: var(--ui-muted); cursor: pointer; font-size: 12px; }
.ui-shell .ticket-attach-button:hover { color: var(--ui-ink); }
.ui-shell .ticket-composer input[type="file"] { display: none; }
.ui-shell .ticket-attachment-names { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); font-size: 11px; }
.ui-shell .ticket-composer-footer .btn { flex: none; }
.ui-shell .ticket-composer-hint { display: block; margin-top: 10px; color: var(--ui-muted); font-size: 10px; }

/* Shared customer tables follow the compact search-and-grid pattern. */
.ui-shell.ui-customer .card.datatable-card { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.ui-shell.ui-customer .card.datatable-card > .card-body { padding: 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable { color: var(--ui-ink); }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable > .row:first-child { align-items: center; margin: 0 0 14px; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable > .row:first-child > div { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_length { display: none; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_filter { float: none; text-align: left; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_filter label { position: relative; display: inline-flex; align-items: center; margin: 0; font-size: 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_filter label::before { position: absolute; left: 12px; z-index: 1; color: var(--ui-muted); content: '\f002'; font: 12px 'Font Awesome 6 Free'; font-weight: 900; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_filter input {
    width: min(380px, calc(100vw - 40px));
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 7px 12px 7px 34px;
    border: 1px solid var(--ui-line);
    border-radius: 7px !important;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: 12px;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_filter input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_scroll,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_scrollBody { border-color: var(--ui-line); }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable.custom-table {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--ui-line) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 8px;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable thead th,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable.custom-table thead th {
    position: relative;
    height: 39px;
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable thead th.sorting::before,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable thead th.sorting::after { color: var(--ui-muted); opacity: .42; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable thead th.sorting_asc::before,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable thead th.sorting_desc::after { color: var(--ui-ink); opacity: .9; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable tbody > tr:not(.child) > td,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable.custom-table tbody > tr:not(.child) > td {
    height: 48px !important;
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    font-size: 12px;
    box-shadow: none !important;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable table.dataTable tbody tr:hover td { background: var(--ui-hover) !important; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable > .row:last-child { align-items: center; margin: 14px 0 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_info { display: none; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable.datatable-single-page > .row:last-child { display: none; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable.datatable-no-results table.dataTable tbody > tr > td.dataTables_empty {
    height: 172px !important;
    padding: 36px 16px !important;
    color: var(--ui-muted) !important;
    text-align: center;
    font-size: 13px;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable.datatable-no-results td.dataTables_empty::before {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--ui-surface-soft);
    color: var(--ui-muted);
    content: '\f1da';
    font: 16px/42px 'Font Awesome 6 Free';
    font-weight: 900;
}
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .dataTables_paginate { padding-top: 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .pagination { gap: 6px; margin: 0; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .page-link { padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 7px !important; background: var(--ui-surface); color: var(--ui-ink); font-size: 11px; }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .page-item.disabled .page-link { background: var(--ui-surface-soft); color: var(--ui-muted); }
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .page-item.active .page-link { background: var(--ui-active); border-color: var(--ui-line); color: var(--ui-ink); }
.ui-shell.ui-customer .downloads-layout { align-items: stretch; }
.ui-shell.ui-customer .downloads-layout > div { margin-bottom: 0 !important; }
.ui-shell.ui-customer .downloads-layout .card { height: 100%; margin-bottom: 0 !important; border: 1px solid var(--ui-line); border-radius: 9px; box-shadow: none; }
.ui-shell.ui-customer .downloads-layout .card-header { padding: 17px 18px 10px; border: 0; background: transparent !important; color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.ui-shell.ui-customer .downloads-layout .card-body { padding: 8px 12px 16px; }
.ui-shell.ui-customer .downloads-folders .nav-pills { gap: 3px; }
.ui-shell.ui-customer .downloads-folders .nav-pills .nav-link { padding: 10px 12px; border-radius: 7px; background: transparent; color: var(--ui-ink); font-size: 12px; text-align: left; }
.ui-shell.ui-customer .downloads-folders .nav-pills .nav-link i { width: 17px; margin-right: 5px; color: var(--ui-muted) !important; }
.ui-shell.ui-customer .downloads-folders .nav-pills .nav-link:hover { background: var(--ui-hover); }
.ui-shell.ui-customer .downloads-folders .nav-pills .nav-link.active { background: var(--ui-active); color: var(--ui-ink); box-shadow: inset 3px 0 0 var(--branding-nav-bg); }
.ui-shell.ui-customer .downloads-folders .nav-pills .nav-link.active i { color: var(--branding-nav-bg) !important; }
.ui-shell.ui-customer.ui-default-brand .downloads-folders .nav-pills .nav-link.active { box-shadow: inset 3px 0 0 #5bd994; }
.ui-shell.ui-customer.ui-default-brand .downloads-folders .nav-pills .nav-link.active i { color: #21845a !important; }
.ui-shell.ui-customer .downloads-legend { padding: 14px 6px 0; line-height: 1.6; text-align: left !important; }
.ui-shell.ui-customer .downloads-files .card-body { padding: 8px 18px 18px; }
.ui-shell.ui-customer .downloads-files .dataTables_wrapper.interface-datatable > .row:first-child { margin-top: 2px; }
.ui-shell.ui-customer .webspace-order-intro { margin: -13px 0 22px; color: var(--ui-muted); font-size: 13px; }
.ui-shell.ui-customer .webspace-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ui-shell.ui-customer .webspace-package { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); }
.ui-shell.ui-customer .webspace-package-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface-soft); color: var(--ui-ink); }
.ui-shell.ui-customer .webspace-package-top h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ui-shell.ui-customer .webspace-package-top p { margin: 5px 0 0; color: var(--ui-muted); font-size: 12px; }
.ui-shell.ui-customer .webspace-package-price { display: flex; align-items: baseline; gap: 7px; margin: 20px 0; padding-bottom: 18px; border-bottom: 1px solid var(--ui-line); }
.ui-shell.ui-customer .webspace-package-price strong { color: var(--ui-ink); font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.ui-shell.ui-customer .webspace-package-price span { color: var(--ui-muted); font-size: 11px; }
.ui-shell.ui-customer .webspace-package-features { display: grid; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none; }
.ui-shell.ui-customer .webspace-package-features li { display: flex; align-items: start; gap: 10px; color: var(--ui-ink); font-size: 12px; line-height: 1.4; }
.ui-shell.ui-customer .webspace-package-features i { flex: none; margin-top: 3px; color: #26865b; font-size: 10px; }
.ui-shell.ui-customer .webspace-package-action { margin-top: auto; }
.ui-shell.ui-customer .webspace-package-action .btn { width: 100%; }
.ui-shell.ui-customer .webspace-order-note { margin: 22px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.7; }
@media (max-width: 991px) { .ui-shell.ui-customer .webspace-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .ui-shell.ui-customer .webspace-package-grid { grid-template-columns: 1fr; } }

/* Customer dialogs share the same quiet surface and compact controls. */
body.ui-shell.ui-customer .modal-backdrop.show { opacity: .6; }
.ui-shell.ui-customer .modal .modal-content {
    border: 1px solid var(--ui-line) !important;
    border-radius: 9px !important;
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .18) !important;
}
.ui-shell.ui-customer .modal .modal-header { align-items: flex-start; padding: 20px 24px 8px; border-bottom: 0; }
.ui-shell.ui-customer .modal .modal-title { margin: 0; color: var(--ui-ink); font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.ui-shell.ui-customer .modal .modal-body { padding: 16px 24px; }
.ui-shell.ui-customer .modal .modal-footer { padding: 10px 24px 22px; border-top: 0; }
.ui-shell.ui-customer .modal .close { margin: -4px -7px 0 10px; padding: 4px 7px; color: var(--ui-muted); font-size: 22px; font-weight: 400; opacity: 1; }
.ui-shell.ui-customer .modal .close:hover { color: var(--ui-ink); }
.ui-shell.ui-customer .modal .form-group { margin-bottom: 16px; }
.ui-shell.ui-customer .modal .form-group label { display: block; margin-bottom: 7px; color: var(--ui-ink) !important; font-size: 12px; font-weight: 650; }
.ui-shell.ui-customer .modal .form-control,
.ui-shell.ui-customer .modal .custom-select { min-height: 38px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-surface); color: var(--ui-ink); font-size: 13px; box-shadow: none; }
.ui-shell.ui-customer .modal .form-control:focus,
.ui-shell.ui-customer .modal .custom-select:focus { border-color: #68cfa0; box-shadow: 0 0 0 3px rgba(91, 217, 148, .13); }
.ui-shell.ui-customer .modal .form-control::placeholder { color: var(--ui-muted); opacity: .8; }
.ui-shell.ui-customer .modal .btn { min-height: 36px; padding: 7px 14px; font-size: 12px; }
.ui-shell.ui-customer .modal .btn-outline-secondary { background: var(--ui-surface); }
.ui-shell.ui-customer .modal .customer-compact-dialog { width: calc(100% - 28px); max-width: 560px; margin: 14px auto; }
.ui-shell.ui-customer .modal .customer-dialog-description { margin: 5px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.ui-shell.ui-customer .modal .customer-dialog-notice { gap: 2px; margin: 0 0 18px; padding: 13px 14px; border: 1px solid #f1dfa8; border-radius: 7px; background: #fff9e9; color: #574822; font-size: 12px; line-height: 1.55; box-shadow: none; }
.ui-shell.ui-customer .modal .customer-dialog-notice h5 { margin: 0 0 4px !important; color: inherit; font-size: 12px; font-weight: 700; }
.ui-shell.ui-customer .modal .customer-dialog-notice p { margin: 0 0 3px !important; }
.ui-shell.ui-customer .modal .customer-dialog-notice-icon { margin-right: 7px !important; color: #9c7419; font-size: 15px; }
html[data-ui-theme="dark"] .ui-shell.ui-customer .modal .customer-dialog-notice { border-color: #665733; background: #342e21; color: #f2e3bc; }
.ui-shell.ui-customer #createTicketModal .ticket-create-dialog { width: calc(100% - 28px); max-width: 560px; margin: 14px auto; }
.ui-shell.ui-customer #createTicketModal .modal-content { max-height: calc(100vh - 28px); overflow: hidden; }
.ui-shell.ui-customer #createTicketModal form { display: flex; flex-direction: column; min-height: 0; }
.ui-shell.ui-customer #createTicketModal .modal-body { overflow-y: auto; padding-top: 12px; padding-bottom: 2px; }
.ui-shell.ui-customer #createTicketModal .modal-footer { flex: none; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-description { margin: 5px 0 0; color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ui-shell.ui-customer #createTicketModal textarea { min-height: 120px; resize: vertical; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-attachments { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 8px; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-attachments input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-attachments label { flex: none; margin: 0; padding: 7px 10px; border: 1px solid var(--ui-line); border-radius: 6px; color: var(--ui-ink) !important; cursor: pointer; font-size: 12px; font-weight: 600; }
.ui-shell.ui-customer #createTicketModal .ticket-modal-attachments label:hover { background: var(--ui-hover); }
.ui-shell.ui-customer #createTicketModal .ticket-modal-attachments input:focus-visible + label { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-shell.ui-customer #createTicketModal #ticketFileNames { overflow: hidden; color: var(--ui-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575px) {
    .ui-shell.ui-customer #createTicketModal .ticket-modal-options { grid-template-columns: 1fr; gap: 0; }
}
.ui-shell .ticket-composer-error { margin: 10px 0 0; color: #d34e4e; font-size: 12px; }
.ui-shell .ticket-closed-note { margin-top: 20px; padding: 14px 16px; color: var(--ui-muted); background: var(--ui-surface-soft); border: 1px solid var(--ui-line); border-radius: 9px; font-size: 13px; }
@media (min-width: 1500px) {
    .ui-shell .ticket-workspace--detail { grid-template-columns: minmax(310px, 27%) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
    .ui-shell .ticket-detail-pane > .row > .ticket-thread { flex: 0 0 68%; max-width: 68%; }
    .ui-shell .ticket-detail-pane > .row > .ticket-aside { flex: 0 0 32%; max-width: 32%; border-left: 1px solid var(--ui-line); }
}
@media (max-width: 1199.98px) {
    .ui-shell.ui-customer .ticket-workspace--detail { height: auto; min-height: calc(100vh - 64px); }
    .ui-shell .ticket-detail-pane > .row { display: block; overflow: visible; }
    .ui-shell .ticket-thread { height: auto; min-height: 450px; overflow: visible; }
    .ui-shell .ticket-thread > .card { flex: auto; max-height: 420px; overflow-y: auto; }
    .ui-shell .ticket-conversation > .card-body { overflow: visible; }
    .ui-shell .ticket-aside { overflow: visible; }
}
@media (max-width: 575.98px) {
    .ui-shell .ticket-detail-actions { justify-content: flex-start; }
    .ui-shell .ticket-composer-footer { flex-wrap: wrap; }
    .ui-shell .ticket-composer-footer .btn { width: 100%; }
}

/* Dashboard keeps news and shows open tickets as a short list. */
.ui-shell .dashboard-news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 156px;
    padding: 24px;
    color: var(--ui-muted);
    text-align: center;
}
.ui-shell .dashboard-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-shell .dashboard-card-heading strong { font-size: 14px; }
.ui-shell .dashboard-card-heading small { font-size: 11px; font-weight: 400; }
.ui-shell .dashboard-ticket-list + .card-footer a,
.ui-shell .dashboard-card-heading + .panel-body + .card-footer a { font-weight: 600; }
.ui-shell .dashboard-news-empty i { color: var(--ui-muted); font-size: 26px; opacity: .65; }
.ui-shell .dashboard-ticket-body { padding: 2px 0 0; }
.ui-shell .dashboard-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 63px;
    padding: 12px 20px;
    border-top: 1px solid var(--ui-line);
    color: var(--ui-ink);
}
.ui-shell .dashboard-ticket-item:hover { background: var(--ui-hover); color: var(--ui-ink); text-decoration: none; }
.ui-shell .dashboard-ticket-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-shell .dashboard-ticket-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.ui-shell .dashboard-ticket-main small { color: var(--ui-muted); font-size: 11px; }
.ui-shell .dashboard-ticket-item .ticket-status { flex: none; margin: 0; }
.ui-shell .dashboard-shortcuts { margin: 8px 0 30px; }
.ui-shell .dashboard-shortcuts h3 { margin: 0 0 14px; font-size: 15px; }
.ui-shell .dashboard-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ui-shell .dashboard-shortcut-grid a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 16px 18px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    color: var(--ui-ink);
    font-weight: 600;
}
.ui-shell .dashboard-shortcut-grid a:hover { background: var(--ui-hover); color: var(--ui-ink); text-decoration: none; }
.ui-shell .dashboard-shortcut-grid a i:first-child { color: var(--ui-muted); font-size: 16px; }
.ui-shell .dashboard-shortcut-grid a i:last-child { margin-left: auto; color: var(--ui-muted); font-size: 12px; }
.ui-shell .appearance-nav-item,
.ui-shell .appearance-section,
.ui-shell .appearance-upload-card,
.ui-shell .appearance-color-row {
    background: var(--ui-surface);
    color: var(--ui-ink);
    border-color: var(--ui-line);
    border-radius: 10px;
}
.ui-shell .appearance-nav-item:hover,
.ui-shell .appearance-color-row { background: var(--ui-surface-soft); }
.ui-shell .appearance-nav-item.active,
.ui-shell.ui-default-brand .appearance-nav-item.active {
    background: var(--ui-active);
    color: var(--ui-ink);
    border-color: var(--ui-line);
    border-left: 3px solid var(--branding-nav-bg);
    box-shadow: none;
}
.ui-shell.ui-default-brand .appearance-nav-item.active { border-left-color: #5bd994; }
.ui-shell .appearance-nav-icon { background: var(--ui-surface-soft); }
.ui-shell .appearance-nav-item.active .appearance-nav-icon { background: var(--ui-surface); }
.ui-shell .appearance-section-title,
.ui-shell .appearance-upload-title,
.ui-shell .appearance-color-label { color: var(--ui-ink); }
.ui-shell .appearance-section-subtitle,
.ui-shell .appearance-upload-text,
.ui-shell .appearance-color-subtitle { color: var(--ui-muted); }
.ui-shell .appearance-upload-head { background: var(--ui-surface); border-color: var(--ui-line); }
.ui-shell .appearance-color-picker,
.ui-shell .appearance-color-preview { border-color: var(--ui-line); }
.ui-shell .appearance-note { background: var(--ui-surface-soft); border-color: var(--ui-line); color: var(--ui-ink); }
.ui-shell .appearance-note-icon { color: var(--ui-muted); }
/* Compact customer notifications with a consistent light and dark appearance. */
.ui-shell .ui-notifications {
    position: fixed;
    top: 82px;
    right: 20px;
    z-index: 2000;
    display: grid;
    gap: 10px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}
.ui-shell .ui-notification {
    --notice-accent: #4f8cf7;
    --notice-tint: #edf5ff;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: start;
    gap: 10px;
    padding: 14px 14px 14px 13px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    box-shadow: 0 16px 38px rgba(22, 38, 62, .15);
    color: var(--ui-ink);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}
.ui-shell .ui-notification.is-visible { opacity: 1; transform: translateY(0); }
.ui-shell .ui-notification--success { --notice-accent: #128a60; --notice-tint: #eaf8f1; }
.ui-shell .ui-notification--error { --notice-accent: #cf4655; --notice-tint: #fff0f1; }
.ui-shell .ui-notification--warning { --notice-accent: #b87713; --notice-tint: #fff6e7; }
.ui-shell .ui-notification-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--notice-tint);
    color: var(--notice-accent);
    font-size: 15px;
}
.ui-shell .ui-notification-content { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.ui-shell .ui-notification-content strong { color: var(--ui-ink); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ui-shell .ui-notification-content > span { color: var(--ui-muted); font-size: 12px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ui-shell .ui-notification-close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-muted);
    cursor: pointer;
}
.ui-shell .ui-notification-close:hover { background: var(--ui-hover); color: var(--ui-ink); }
html[data-ui-theme="dark"] .ui-notification,
html[data-ui-theme="system"] .ui-notification { --notice-tint: var(--ui-surface-soft); }
/* Native customer tables replace the DataTables controls and client-side markup. */
.ui-shell .portal-table-shell { width: 100%; }
.ui-shell .card:has(.portal-table-shell) { border: 0; background: transparent; box-shadow: none; }
.ui-shell .card:has(.portal-table-shell) > .card-body { padding: 0; }
.ui-shell .portal-table-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; }
.ui-shell .portal-table-toolbar:empty { display: none; }
.ui-shell .portal-table-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(360px, 100%);
    height: 38px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-muted);
}
.ui-shell .portal-table-search:focus-within { border-color: var(--ui-focus); }
.ui-shell .portal-table-search input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ui-ink); font: inherit; }
.ui-shell .portal-table-search input::placeholder { color: var(--ui-muted); }
.ui-shell .portal-table-scroll { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); }
.ui-shell table.portal-table { width: 100%; margin: 0; border-collapse: collapse; background: transparent; color: var(--ui-ink); }
.ui-shell table.portal-table thead th {
    height: 39px;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface-soft);
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .015em;
    text-transform: none;
    white-space: nowrap;
}
.ui-shell .portal-table-sort { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-shell .portal-table-sort i { margin-left: auto; color: var(--ui-muted); font-size: 10px; opacity: .65; }
.ui-shell .portal-table-sort.is-active, .ui-shell .portal-table-sort.is-active i { color: var(--ui-ink); opacity: 1; }
.ui-shell table.portal-table tbody td { padding: 12px 14px; border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; color: var(--ui-ink); font-size: 12px; vertical-align: middle; }
.ui-shell table.portal-table tbody tr:last-child td { border-bottom: 0; }
.ui-shell table.portal-table tbody tr:hover { background: var(--ui-hover); }
.ui-shell table.portal-table tbody td a:not(.btn) { font-weight: 600; }
.ui-shell .portal-table-message td { padding: 34px 18px !important; text-align: center; color: var(--ui-muted); }
.ui-shell .portal-table-empty { display: inline-flex; align-items: center; gap: 13px; max-width: 100%; text-align: left; }
.ui-shell .portal-table-empty-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--ui-surface-soft); color: var(--ui-muted); font-size: 16px; }
.ui-shell .portal-table-empty-copy { display: grid; gap: 2px; }
.ui-shell .portal-table-empty-copy strong { color: var(--ui-ink); font-size: 13px; font-weight: 650; }
.ui-shell .portal-table-empty-copy > span { color: var(--ui-muted); font-size: 12px; }
.ui-shell .portal-table-loading { color: var(--ui-muted); }
.ui-shell .portal-table-loading i { margin-right: 7px; }
.ui-shell .portal-table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 10px; color: var(--ui-muted); font-size: 12px; }
.ui-shell .portal-table-footer:empty { display: none; }
.ui-shell .portal-table-pager { display: flex; align-items: center; gap: 10px; }
.ui-shell .portal-table-pager button, .ui-shell .portal-table-footer > button { padding: 6px 11px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface); color: var(--ui-ink); font-size: 12px; cursor: pointer; }
.ui-shell .portal-table-pager button:hover:not(:disabled), .ui-shell .portal-table-footer > button:hover { background: var(--ui-hover); }
.ui-shell .portal-table-pager button:disabled { opacity: .45; cursor: default; }
@media (max-width: 767.98px) {
    .ui-shell .ui-notifications { top: 70px; right: 16px; }
}
@media (max-width: 767.98px) {
    .ui-shell .dashboard-shortcut-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .ui-shell .ticket-workspace--detail .ticket-list-pane { display: none; }
    .ui-shell .ticket-detail-pane { padding: 0; }
    .ui-shell .ticket-detail-heading { flex-wrap: wrap; }
}

/* Customer accent. Operational status colors keep their own meaning. */
.ui-shell.ui-customer {
    --ui-accent: #a5d6f7;
    --ui-accent-hover: #8cc7ef;
    --ui-accent-ink: #153d60;
    --ui-accent-line: #79b8e4;
}
.ui-shell.ui-customer.ui-default-brand .btn-primary,
.ui-shell.ui-customer .btn-success,
.ui-shell.ui-customer .dataTables_wrapper.interface-datatable .page-item.active .page-link {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-accent-ink);
}
.ui-shell.ui-customer.ui-default-brand .btn-primary:hover,
.ui-shell.ui-customer.ui-default-brand .btn-primary:focus,
.ui-shell.ui-customer .btn-success:hover,
.ui-shell.ui-customer .btn-success:focus {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--ui-accent-ink);
}
.ui-shell.ui-customer .btn-outline-success {
    border-color: var(--ui-accent-line);
    color: var(--ui-accent-ink);
}
.ui-shell.ui-customer .btn-outline-success:hover {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-accent-ink);
}
.ui-shell.ui-customer.ui-default-brand .main-sidebar .metismenu a.active::before,
.ui-shell.ui-customer.ui-default-brand .main-sidebar .metismenu li.mm-active > a::before,
.ui-shell.ui-customer .main-sidebar .metismenu > li > a.active::after {
    background: var(--ui-accent-line);
}
.ui-shell.ui-customer.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
.ui-shell.ui-customer.ui-default-brand .main-sidebar .changelog-link {
    color: #286fa6;
}
html[data-ui-theme="dark"] .ui-shell.ui-customer.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
html[data-ui-theme="dark"] .ui-shell.ui-customer.ui-default-brand .main-sidebar .changelog-link {
    color: #93cbf2;
}
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell.ui-customer.ui-default-brand .content-wrapper a:not(.btn):not(.ticket-list-item):not(.dashboard-ticket-item):not(.dashboard-shortcut),
    html[data-ui-theme="system"] .ui-shell.ui-customer.ui-default-brand .main-sidebar .changelog-link { color: #93cbf2; }
}
.ui-shell.ui-customer.ui-default-brand .downloads-folders .nav-pills .nav-link.active { box-shadow: inset 3px 0 0 var(--ui-accent-line); }
.ui-shell.ui-customer.ui-default-brand .downloads-folders .nav-pills .nav-link.active i { color: #286fa6 !important; }
.ui-shell.ui-customer.ui-default-brand .appearance-nav-item.active { border-left-color: var(--ui-accent-line); }

/* Shared status badges for the customer interface. */
.ui-shell.ui-customer {
    --ui-badge-neutral-bg: #f1f4f8;
    --ui-badge-neutral-text: #536579;
    --ui-badge-neutral-border: #e0e7ef;
    --ui-badge-info-bg: #eaf4fb;
    --ui-badge-info-text: #286f9e;
    --ui-badge-info-border: #cfe5f4;
    --ui-badge-success-bg: #eaf7f0;
    --ui-badge-success-text: #287451;
    --ui-badge-success-border: #cce9d9;
    --ui-badge-warning-bg: #fff5e2;
    --ui-badge-warning-text: #86611f;
    --ui-badge-warning-border: #f1dfb6;
    --ui-badge-danger-bg: #fceef0;
    --ui-badge-danger-text: #a34150;
    --ui-badge-danger-border: #f0d2d8;
}
html[data-ui-theme="dark"] .ui-shell.ui-customer {
    --ui-badge-neutral-bg: #263341;
    --ui-badge-neutral-text: #c4d0dd;
    --ui-badge-neutral-border: #3d4d5e;
    --ui-badge-info-bg: #20384d;
    --ui-badge-info-text: #a9d5f1;
    --ui-badge-info-border: #395c75;
    --ui-badge-success-bg: #213d33;
    --ui-badge-success-text: #a6dfc2;
    --ui-badge-success-border: #3b6552;
    --ui-badge-warning-bg: #40351f;
    --ui-badge-warning-text: #f1d28c;
    --ui-badge-warning-border: #62512d;
    --ui-badge-danger-bg: #432a35;
    --ui-badge-danger-text: #f1b9c3;
    --ui-badge-danger-border: #68404c;
}
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .ui-shell.ui-customer {
        --ui-badge-neutral-bg: #263341; --ui-badge-neutral-text: #c4d0dd; --ui-badge-neutral-border: #3d4d5e;
        --ui-badge-info-bg: #20384d; --ui-badge-info-text: #a9d5f1; --ui-badge-info-border: #395c75;
        --ui-badge-success-bg: #213d33; --ui-badge-success-text: #a6dfc2; --ui-badge-success-border: #3b6552;
        --ui-badge-warning-bg: #40351f; --ui-badge-warning-text: #f1d28c; --ui-badge-warning-border: #62512d;
        --ui-badge-danger-bg: #432a35; --ui-badge-danger-text: #f1b9c3; --ui-badge-danger-border: #68404c;
    }
}
.ui-shell.ui-customer :is(.badge, .label, .label-invoice, .label-contract, .label-customer, .label-art, .badge-beta, .status-label, .network-beta-badge, .system-alert-badge, .backup-status-label, .software-status, .stats-promo-badge, .status-text) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--ui-badge-neutral-border);
    border-radius: 999px;
    background: var(--ui-badge-neutral-bg);
    color: var(--ui-badge-neutral-text);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    vertical-align: middle;
    white-space: normal;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
}
.ui-shell.ui-customer :is(.badge, .label, .label-invoice, .label-contract, .label-customer, .label-art, .badge-beta, .status-label, .network-beta-badge, .system-alert-badge)::before {
    flex: none;
    font-family: 'Font Awesome 6 Free';
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.ui-shell.ui-customer :is(.badge-success, .badge.bg-success, .label-success, .label-contract-success, .label-customer-success, .status-label.active, .status-online, .software-status.is-success, .system-alert-badge--success, .backup-status-label--complete) {
    background: var(--ui-badge-success-bg) !important;
    color: var(--ui-badge-success-text) !important;
    border-color: var(--ui-badge-success-border) !important;
}
.ui-shell.ui-customer :is(.badge-success, .badge.bg-success, .label-success, .label-contract-success, .label-customer-success, .status-label.active, .system-alert-badge--success)::before { content: '\f058'; }
.ui-shell.ui-customer :is(.badge-warning, .label-warning, .label-contract-warning, .label-customer-warning, .status-installing, .software-status.is-running, .software-status.is-pending, .system-alert-badge--warning) {
    background: var(--ui-badge-warning-bg) !important;
    color: var(--ui-badge-warning-text) !important;
    border-color: var(--ui-badge-warning-border) !important;
}
.ui-shell.ui-customer :is(.badge-warning, .label-warning, .label-contract-warning, .label-customer-warning, .system-alert-badge--warning)::before { content: '\f06a'; }
.ui-shell.ui-customer :is(.badge-danger, .label-danger, .label-contract-danger, .label-customer-danger, .status-offline, .software-status.is-failed) {
    background: var(--ui-badge-danger-bg) !important;
    color: var(--ui-badge-danger-text) !important;
    border-color: var(--ui-badge-danger-border) !important;
}
.ui-shell.ui-customer :is(.badge-danger, .label-danger, .label-contract-danger, .label-customer-danger)::before { content: '\f057'; }
.ui-shell.ui-customer :is(.badge-info, .badge.bg-info, .label-info, .label-primary, .label-art-haupt, .badge-beta, .network-beta-badge, .system-alert-badge--notice, .stats-promo-badge) {
    background: var(--ui-badge-info-bg) !important;
    color: var(--ui-badge-info-text) !important;
    border-color: var(--ui-badge-info-border) !important;
}
.ui-shell.ui-customer :is(.badge-info, .badge.bg-info, .label-info, .label-primary, .label-art-haupt, .badge-beta, .network-beta-badge, .system-alert-badge--notice)::before { content: '\f05a'; }
.ui-shell.ui-customer .badge-tag {
    margin: 0;
    background: var(--ui-badge-info-bg) !important;
    color: var(--ui-badge-info-text) !important;
    border-color: var(--ui-badge-info-border) !important;
}
.ui-shell.ui-customer .badge-tag::before { content: '\f02b'; }
.ui-shell.ui-customer .status-label.inactive { background: var(--ui-badge-neutral-bg) !important; color: var(--ui-badge-neutral-text) !important; border-color: var(--ui-badge-neutral-border) !important; }
.ui-shell.ui-customer .status-label.inactive::before { content: '\f111'; font-size: 7px; }
.ui-shell.ui-customer :is(.badge, .label, .label-invoice):has(> i)::before { content: none; }
.ui-shell.ui-customer .status-text::before { content: '\f111'; display: inline-block; flex: none; font: 900 7px 'Font Awesome 6 Free'; }
.ui-shell.ui-customer .status-text { font-size: 11px; font-weight: 650; }
.ui-shell.ui-customer .stats-promo-badge i { color: inherit; }
.ui-shell.ui-customer .backup-status-label:has(.fa-ban) { background: var(--ui-badge-warning-bg); color: var(--ui-badge-warning-text); border-color: var(--ui-badge-warning-border); }
.ui-shell.ui-customer .backup-status-label:has(.fa-circle-exclamation, .fa-triangle-exclamation) { background: var(--ui-badge-danger-bg); color: var(--ui-badge-danger-text); border-color: var(--ui-badge-danger-border); }
.ui-shell.ui-customer .backup-status-label:has(.spinner-border) { background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); border-color: var(--ui-badge-info-border); }

/* The dashboard and archive use the same news feed. */
.ui-shell.ui-customer .dashboard-news-card .dashboard-news-feed { padding: 0; max-height: 420px; overflow-y: auto; }
.ui-shell.ui-customer .news-archive { width: 100%; max-width: 1100px; margin: 0 auto; }
.ui-shell.ui-customer .news-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 13px; color: var(--ui-muted); font-size: 12px; }
.ui-shell.ui-customer .news-archive-count { padding: 5px 9px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface); color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-shell.ui-customer .news-archive-list { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-shell.ui-customer .news-feed-item { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: 17px 18px; border-bottom: 1px solid var(--ui-line); }
.ui-shell.ui-customer .news-feed-item:last-child { border-bottom: 0; }
.ui-shell.ui-customer .news-feed-icon { display: inline-flex; flex: 0 0 35px; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 9px; background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); font-size: 14px; }
.ui-shell.ui-customer .news-feed-content { min-width: 0; flex: 1; }
.ui-shell.ui-customer .news-feed-meta { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 7px; }
.ui-shell.ui-customer .news-feed-meta time { margin-left: auto; color: var(--ui-muted); font-size: 11px; white-space: nowrap; }
.ui-shell.ui-customer .news-feed-title { margin: 0 0 5px; color: var(--ui-ink); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ui-shell.ui-customer .news-feed-description { color: var(--ui-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ui-shell.ui-customer .news-archive-list .news-feed-item { padding: 22px 24px; }
.ui-shell.ui-customer .news-archive-list .news-feed-icon { flex-basis: 40px; width: 40px; height: 40px; font-size: 16px; }
.ui-shell.ui-customer .news-archive-list .news-feed-title { font-size: 16px; margin-bottom: 8px; }
.ui-shell.ui-customer .news-archive-list .news-feed-description { color: var(--ui-ink); font-size: 13px; }
.ui-shell.ui-customer .news-archive-empty { display: flex; align-items: center; gap: 14px; padding: 28px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.ui-shell.ui-customer .news-archive-empty strong { color: var(--ui-ink); font-size: 13px; }
.ui-shell.ui-customer .news-archive-empty p { margin: 3px 0 0; color: var(--ui-muted); font-size: 12px; }
@media (max-width: 575.98px) {
    .ui-shell.ui-customer .news-archive-list .news-feed-item { padding: 18px 14px; }
    .ui-shell.ui-customer .news-feed-item { gap: 10px; }
    .ui-shell.ui-customer .news-feed-meta { flex-wrap: wrap; }
    .ui-shell.ui-customer .news-feed-meta time { margin-left: 0; }
}

/* Reseller detail: one calm surface language across figures, tabs and content. */
.ui-shell.ui-customer .reseller-detail { width: 100%; }
.ui-shell.ui-customer .reseller-identity { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; }
.ui-shell.ui-customer .reseller-identity-icon,
.ui-shell.ui-customer .reseller-card-heading-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid var(--ui-badge-info-border); border-radius: 10px; background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); font-size: 16px; }
.ui-shell.ui-customer .reseller-identity-kicker,
.ui-shell.ui-customer .reseller-card-kicker { display: block; margin-bottom: 3px; color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.ui-shell.ui-customer .reseller-identity h2 { margin: 0; color: var(--ui-ink); font-size: 20px; font-weight: 750; line-height: 1.25; }
.ui-shell.ui-customer .reseller-identity p { margin: 3px 0 0; color: var(--ui-muted); font-size: 12px; }
.ui-shell.ui-customer .reseller-finance-grid { margin-right: -7px; margin-left: -7px; }
.ui-shell.ui-customer .reseller-finance-grid > div { padding-right: 7px; padding-left: 7px; }
.ui-shell.ui-customer .reseller-finance-grid .finance-card { display: flex; flex-direction: column; min-height: 119px; height: 100%; padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-shell.ui-customer .reseller-finance-grid .finance-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; margin-bottom: 11px; border-radius: 7px; background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); font-size: 12px; }
.ui-shell.ui-customer .reseller-finance-grid .finance-label { margin-bottom: 4px; color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-shell.ui-customer .reseller-finance-grid .finance-value { color: var(--ui-ink); font-size: 19px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.ui-shell.ui-customer .reseller-finance-grid .finance-value.text-danger { color: var(--ui-badge-danger-text) !important; }
.ui-shell.ui-customer .reseller-finance-grid .finance-value.text-success { color: var(--ui-badge-success-text) !important; }
.ui-shell.ui-customer .reseller-tabs.nav-tabs { display: flex; justify-content: flex-start; width: fit-content; max-width: 100%; padding: 4px; gap: 2px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface-soft); }
.ui-shell.ui-customer .reseller-tabs .nav-item { flex: none; }
.ui-shell.ui-customer .reseller-tabs .nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 35px; padding: 7px 14px; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--ui-muted) !important; font-size: 12px; font-weight: 650; white-space: nowrap; }
.ui-shell.ui-customer .reseller-tabs .nav-link:hover { background: var(--ui-hover) !important; color: var(--ui-ink) !important; }
.ui-shell.ui-customer .reseller-tabs .nav-link.active { background: var(--ui-surface) !important; color: var(--ui-ink) !important; box-shadow: 0 1px 4px rgba(20,39,64,.12); }
.ui-shell.ui-customer .reseller-tabs .nav-link.active i { color: var(--ui-badge-info-text); }
.ui-shell.ui-customer .reseller-overview-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.9fr); gap: 14px; align-items: start; }
.ui-shell.ui-customer .reseller-overview-side { display: grid; gap: 14px; }
.ui-shell.ui-customer .reseller-detail-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-shell.ui-customer .reseller-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 39px; margin-bottom: 15px; }
.ui-shell.ui-customer .reseller-card-heading h3 { margin: 0; color: var(--ui-ink); font-size: 15px; font-weight: 720; }
.ui-shell.ui-customer .reseller-card-heading-icon { width: 31px; height: 31px; border-radius: 8px; font-size: 13px; }
.ui-shell.ui-customer .reseller-facts { margin: 0; }
.ui-shell.ui-customer .reseller-facts > div { display: grid; grid-template-columns: minmax(110px,35%) minmax(0,1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--ui-line); }
.ui-shell.ui-customer .reseller-facts dt { margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-shell.ui-customer .reseller-facts dd { min-width: 0; margin: 0; color: var(--ui-ink); font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ui-shell.ui-customer .reseller-products-card .section-header { color: var(--ui-ink); font-size: 15px; }
.ui-shell.ui-customer .reseller-product-grid { margin-top: 14px !important; row-gap: 16px; }
.ui-shell.ui-customer .reseller-product-grid label { display: block; margin-bottom: 6px; color: var(--ui-muted) !important; font-size: 11px; font-weight: 650; }
.ui-shell.ui-customer .reseller-products-actions { display: flex; justify-content: flex-end; margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.ui-shell.ui-customer .reseller-detail #accounting { overflow-x: auto; }
.ui-shell.ui-customer .reseller-detail #accounting .table { margin-bottom: 0; }
.ui-shell.ui-customer .reseller-detail #files .card { border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); overflow: hidden; }
.ui-shell.ui-customer .reseller-detail #files .card-header { min-height: 56px; padding: 13px 17px; border-bottom: 1px solid var(--ui-line); background: var(--ui-surface) !important; color: var(--ui-ink); font-size: 13px; letter-spacing: 0; text-transform: none !important; }
.ui-shell.ui-customer .reseller-detail #files .card-body { padding: 17px; }
.ui-shell.ui-customer .reseller-detail #files .nav-pills .nav-link { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 7px; color: var(--ui-muted) !important; font-size: 12px; cursor: pointer; }
.ui-shell.ui-customer .reseller-detail #files .nav-pills .nav-link.active { background: var(--ui-badge-info-bg) !important; color: var(--ui-badge-info-text) !important; box-shadow: inset 2px 0 0 var(--ui-badge-info-text); }
.ui-shell.ui-customer .reseller-detail #files .progress { background: var(--ui-surface-soft); border-radius: 99px; }
.ui-shell.ui-customer .reseller-detail #files .progress-bar { background: var(--ui-badge-info-text) !important; }
@media (max-width: 900px) { .ui-shell.ui-customer .reseller-overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
    .ui-shell.ui-customer .reseller-tabs.nav-tabs { width: 100%; overflow-x: auto; }
    .ui-shell.ui-customer .reseller-tabs .nav-link { padding: 7px 10px; }
    .ui-shell.ui-customer .reseller-detail-card { padding: 17px; }
    .ui-shell.ui-customer .reseller-facts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* A dialog dims the entire application, including the fixed header. */
body.ui-shell.ui-customer.modal-open .main-header-navbar { z-index: 1030; }

/* Customer activity in the header. */
.ui-shell.ui-customer .header-notifications { position: relative; }
.ui-shell.ui-customer .header-notifications-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-shell.ui-customer .header-notifications-toggle:hover,
.ui-shell.ui-customer .header-notifications-toggle[aria-expanded="true"] { border-color: var(--ui-line); background: var(--ui-hover); color: var(--ui-ink); }
.ui-shell.ui-customer .main-header-navbar .nav-icons .header-notifications-toggle i { margin: 0; color: inherit; font-size: 15px; }
.ui-shell.ui-customer .header-notifications-count { position: absolute; top: -5px; right: -5px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 3px; border: 2px solid var(--ui-surface); border-radius: 99px; background: #4b9acb; color: #fff; font-size: 9px; font-weight: 750; line-height: 1; }
.ui-shell.ui-customer .header-notifications-panel { position: absolute; top: calc(100% + 13px); right: -41px; width: min(390px, calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); box-shadow: 0 18px 50px rgba(21,37,58,.18); color: var(--ui-ink); }
.ui-shell.ui-customer .header-notifications-panel[hidden],
.ui-shell.ui-customer .header-notifications-count[hidden],
.ui-shell.ui-customer .header-notifications-mark-all[hidden] { display: none !important; }
.ui-shell.ui-customer .header-notifications-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 13px; border-bottom: 1px solid var(--ui-line); }
.ui-shell.ui-customer .header-notifications-heading strong { display: block; font-size: 15px; font-weight: 720; }
.ui-shell.ui-customer .header-notifications-heading-actions { display: inline-flex; align-items: center; gap: 10px; }
.ui-shell.ui-customer .header-notifications-mark-all { padding: 0; border: 0; background: transparent; color: var(--ui-badge-info-text); font-size: 11px; font-weight: 650; cursor: pointer; }
.ui-shell.ui-customer .header-notifications-mark-all:hover { text-decoration: underline; }
.ui-shell.ui-customer .header-notifications-kicker { display: block; margin-bottom: 2px; color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ui-shell.ui-customer .header-notifications-refresh { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 0; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface); color: var(--ui-muted); cursor: pointer; }
.ui-shell.ui-customer .header-notifications-refresh:hover { background: var(--ui-hover); color: var(--ui-ink); }
.ui-shell.ui-customer .main-header-navbar .nav-icons .header-notifications-refresh i { margin: 0; color: inherit; font-size: 11px; }
.ui-shell.ui-customer .header-notifications-list { max-height: 400px; overflow-y: auto; }
.ui-shell.ui-customer .header-notifications-message { margin: 0; padding: 24px 18px; color: var(--ui-muted); font-size: 12px; text-align: center; }
.ui-shell.ui-customer .header-notification-row { border-bottom: 1px solid var(--ui-line); background: var(--ui-surface); }
.ui-shell.ui-customer .header-notification-row:last-child { border-bottom: 0; }
.ui-shell.ui-customer .header-notification-row:not(.is-read) { background: var(--ui-surface-soft); }
.ui-shell.ui-customer .header-notification-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 18px 3px; color: var(--ui-ink) !important; text-decoration: none !important; }
.ui-shell.ui-customer .header-notification-row.is-read .header-notification-item { padding-bottom: 13px; }
.ui-shell.ui-customer .header-notification-row:hover { background: var(--ui-hover); }
.ui-shell.ui-customer .header-notification-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--ui-badge-info-border); border-radius: 8px; background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); }
.ui-shell.ui-customer .header-notification-item--dunning .header-notification-icon { border-color: var(--ui-badge-warning-border); background: var(--ui-badge-warning-bg); color: var(--ui-badge-warning-text); }
.ui-shell.ui-customer .main-header-navbar .nav-icons .header-notification-icon i { margin: 0; color: inherit; font-size: 12px; }
.ui-shell.ui-customer .header-notification-content { display: grid; min-width: 0; flex: 1; gap: 3px; }
.ui-shell.ui-customer .header-notification-content strong { color: var(--ui-ink); font-size: 12px; font-weight: 680; line-height: 1.4; }
.ui-shell.ui-customer .header-notification-content > span { color: var(--ui-muted); font-size: 11px; }
.ui-shell.ui-customer .header-notification-item time { flex: none; padding-top: 2px; color: var(--ui-muted); font-size: 10px; }
.ui-shell.ui-customer .header-notification-read { display: block; margin: 0 18px 11px 61px; padding: 0; border: 0; background: transparent; color: var(--ui-badge-info-text); font-size: 10px; font-weight: 650; cursor: pointer; }
.ui-shell.ui-customer .header-notification-read:hover { text-decoration: underline; }
.ui-shell.ui-customer .header-notification-read:disabled,
.ui-shell.ui-customer .header-notifications-mark-all:disabled { opacity: .5; cursor: wait; }
@media (max-width: 575.98px) { .ui-shell.ui-customer .header-notifications-panel { position: fixed; top: 62px; right: 12px; } }

/* TeamSpeak actions fit the narrow detail column without squeezed buttons. */
.ui-shell.ui-customer .teamspeak-action-panel { padding: 12px; }
.ui-shell.ui-customer .teamspeak-action-list { display: grid; gap: 7px; }
.ui-shell.ui-customer .teamspeak-action-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.ui-shell.ui-customer .teamspeak-action-button:hover { border-color: var(--ui-badge-info-border); background: var(--ui-hover); transform: translateY(-1px); }
.ui-shell.ui-customer .teamspeak-action-button:disabled { cursor: wait; opacity: .55; transform: none; }
.ui-shell.ui-customer .teamspeak-action-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 7px; background: var(--ui-badge-neutral-bg); color: var(--ui-badge-neutral-text); font-size: 11px; }
.ui-shell.ui-customer .teamspeak-action-button--start .teamspeak-action-icon { background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); }
.ui-shell.ui-customer .teamspeak-action-button--stop .teamspeak-action-icon { background: var(--ui-badge-danger-bg); color: var(--ui-badge-danger-text); }
.ui-shell.ui-customer .teamspeak-action-button--reset { margin-top: 5px; border-top-color: var(--ui-line); }
.ui-shell.ui-customer .teamspeak-action-button--reset .teamspeak-action-icon { background: var(--ui-badge-warning-bg); color: var(--ui-badge-warning-text); }
.ui-shell.ui-customer .teamspeak-action-chevron { flex: none; margin-left: auto; color: var(--ui-muted); font-size: 9px; }

/* Contact options use the same compact, readable card language as the portal. */
.ui-shell.ui-customer .contact-page { width: 100%; }
.ui-shell.ui-customer .contact-intro { margin: 0 0 20px; color: var(--ui-muted); font-size: 13px; }
.ui-shell.ui-customer .contact-options { margin-right: -8px; margin-left: -8px; }
.ui-shell.ui-customer .contact-options > div { padding-right: 8px; padding-left: 8px; }
.ui-shell.ui-customer .contact-option { display: flex; flex-direction: column; min-height: 225px; padding: 22px 23px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-shell.ui-customer .contact-option--ticket { border-color: var(--ui-badge-info-border); }
.ui-shell.ui-customer .contact-option-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ui-shell.ui-customer .contact-option-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 39px; height: 39px; border: 1px solid var(--ui-badge-info-border); border-radius: 9px; background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); font-size: 15px; }
.ui-shell.ui-customer .contact-option--emergency .contact-option-icon { border-color: var(--ui-badge-warning-border); background: var(--ui-badge-warning-bg); color: var(--ui-badge-warning-text); }
.ui-shell.ui-customer .contact-option-kicker { display: block; margin-bottom: 3px; color: var(--ui-muted); font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.ui-shell.ui-customer .contact-option h2,
.ui-shell.ui-customer .contact-social h2 { margin: 0; color: var(--ui-ink); font-size: 16px; font-weight: 720; line-height: 1.3; }
.ui-shell.ui-customer .contact-option p { margin: 0 0 18px; color: var(--ui-muted); font-size: 12px; line-height: 1.65; }
.ui-shell.ui-customer .contact-option-action { margin-top: auto; }
.ui-shell.ui-customer .contact-option-action .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 37px; padding: 8px 13px; font-size: 12px; font-weight: 650; }
.ui-shell.ui-customer .contact-option-action .btn i { font-size: 10px; }
.ui-shell.ui-customer .contact-direct-link { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 37px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface-soft); color: var(--ui-ink) !important; font-size: 12px; font-weight: 700; text-decoration: none !important; overflow-wrap: anywhere; }
.ui-shell.ui-customer .contact-direct-link:hover { border-color: var(--ui-badge-info-border); background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text) !important; }
.ui-shell.ui-customer .contact-direct-link i { flex: none; color: var(--ui-muted); font-size: 9px; }
.ui-shell.ui-customer .contact-option-note { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--ui-badge-warning-border); border-radius: 7px; background: var(--ui-badge-warning-bg); color: var(--ui-badge-warning-text); font-size: 11px; line-height: 1.5; }
.ui-shell.ui-customer .contact-option-note i { flex: none; margin-top: 2px; }
.ui-shell.ui-customer .contact-social { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 1px; padding: 20px 23px; border: 1px solid var(--ui-line); border-radius: 11px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.ui-shell.ui-customer .contact-social p { margin: 5px 0 0; color: var(--ui-muted); font-size: 11px; }
.ui-shell.ui-customer .contact-social-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ui-shell.ui-customer .contact-social-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface-soft); color: var(--ui-muted) !important; font-size: 11px; font-weight: 650; text-decoration: none !important; }
.ui-shell.ui-customer .contact-social-links a:hover { border-color: var(--ui-badge-info-border); color: var(--ui-badge-info-text) !important; }
@media (max-width: 900px) { .ui-shell.ui-customer .contact-social { align-items: flex-start; flex-direction: column; } .ui-shell.ui-customer .contact-social-links { justify-content: flex-start; } }
@media (max-width: 575.98px) { .ui-shell.ui-customer .contact-option { min-height: 0; padding: 19px; } .ui-shell.ui-customer .contact-social { padding: 19px; } }

/* Invoice details keep payment history readable in both appearance modes. */
.ui-shell.ui-customer .invoice-detail .list-group-item { border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); }
.ui-shell.ui-customer .invoice-detail .list-group-item:hover { background: var(--ui-hover); }
.ui-shell.ui-customer .invoice-detail .list-group-item small.text-muted { color: var(--ui-muted) !important; }
.ui-shell.ui-customer .invoice-detail .card-footer.bg-light { border-top: 1px solid var(--ui-line); background: var(--ui-surface-soft) !important; color: var(--ui-muted) !important; }
.ui-shell.ui-customer .invoice-detail .payment-amount { color: var(--ui-badge-success-text); text-shadow: none; }
.ui-shell.ui-customer .invoice-detail .payment-btn-transfer { border-color: var(--ui-line); background: var(--ui-surface-soft); color: var(--ui-ink); }
.ui-shell.ui-customer .invoice-detail .payment-btn-transfer:hover { border-color: var(--ui-badge-info-border); background: var(--ui-badge-info-bg); color: var(--ui-badge-info-text); }
.ui-shell.ui-customer .invoice-detail .payment-btn-disabled { border: 1px solid var(--ui-line); background: var(--ui-surface-soft); color: var(--ui-muted); opacity: .7; }

/* Customer branding supplies logos while the interface owns its theme colors. */
.ui-shell.ui-customer {
    --branding-primary: var(--ui-accent);
    --branding-secondary: var(--ui-accent-ink);
    --branding-topbar-bg: var(--ui-surface);
    --branding-topbar-text: var(--ui-ink);
    --branding-sidebar-bg: var(--ui-sidebar);
    --branding-sidebar-link: var(--ui-ink);
    --branding-sidebar-link-hover: var(--ui-ink);
    --branding-link: var(--ui-link);
    --branding-link-hover: var(--ui-link);
    --branding-tab-bg: var(--ui-accent);
    --branding-tab-text: var(--ui-accent-ink);
    --branding-nav-bg: var(--ui-accent);
    --branding-nav-text: var(--ui-accent-ink);
}
.ui-shell.ui-customer .sidebar-brand { justify-content: center; }
.ui-shell.ui-customer .sidebar-brand img { width: auto; max-width: 100%; background: transparent; }
.ui-shell.ui-customer.branding-logo-size-small .sidebar-brand img { max-height: 30px; }
.ui-shell.ui-customer.branding-logo-size-large .sidebar-brand img { max-height: 46px; }
.ui-shell.ui-customer .main-header-navbar .navbar-brand { background: var(--ui-surface); }
.theme-logo--dark { display: none !important; }
html[data-ui-theme="dark"] .theme-logo--light { display: none !important; }
html[data-ui-theme="dark"] .theme-logo--dark { display: block !important; }
@media (prefers-color-scheme: dark) {
    html[data-ui-theme="system"] .theme-logo--light { display: none !important; }
    html[data-ui-theme="system"] .theme-logo--dark { display: block !important; }
}

.ui-shell.ui-customer .appearance-logo-preview { display: flex; align-items: center; justify-content: center; min-height: 104px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 9px; }
.ui-shell.ui-customer .appearance-logo-preview--light { background: #fff; }
.ui-shell.ui-customer .appearance-logo-preview--dark { background: #15191d; }
.ui-shell.ui-customer .appearance-logo-preview img { display: block; width: auto; max-width: 100%; max-height: 62px; object-fit: contain; }
.ui-shell.ui-customer .appearance-upload-body input[type="file"] { display: block; width: 100%; color: var(--ui-muted); font-size: 12px; }
.ui-shell.ui-customer .appearance-upload-body input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface-soft); color: var(--ui-ink); font: inherit; font-weight: 650; cursor: pointer; }
.ui-shell.ui-customer .appearance-upload-body input[type="file"]::file-selector-button:hover { border-color: var(--ui-badge-info-border); background: var(--ui-hover); }
.ui-shell.ui-customer .appearance-logo-size { margin: 20px 0 0; padding: 0; border: 0; }
.ui-shell.ui-customer .appearance-logo-size legend { display: block; width: 100%; margin-bottom: 9px; color: var(--ui-ink); font-size: 12px; font-weight: 700; }
.ui-shell.ui-customer .appearance-size-options { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.ui-shell.ui-customer .appearance-size-option { position: relative; margin: 0; cursor: pointer; }
.ui-shell.ui-customer .appearance-size-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-shell.ui-customer .appearance-size-option span { display: inline-flex; justify-content: center; min-width: 75px; padding: 8px 13px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface-soft); color: var(--ui-muted); font-size: 12px; font-weight: 650; }
.ui-shell.ui-customer .appearance-size-option input:checked + span { border-color: var(--ui-accent-line); background: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-shell.ui-customer .appearance-size-option input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-shell.ui-customer .appearance-page:has(.appearance-size-option input[value="small"]:checked) .appearance-logo-preview img { max-height: 48px; }
.ui-shell.ui-customer .appearance-page:has(.appearance-size-option input[value="large"]:checked) .appearance-logo-preview img { max-height: 78px; }

/* Keep the customer shell usable at phone widths. */
@media (max-width: 767.98px) {
    .ui-shell.ui-customer .content-wrapper:has(.ticket-workspace) {
        min-height: 100dvh;
        overflow-x: hidden;
    }
    .ui-shell.ui-customer .ticket-workspace,
    .ui-shell.ui-customer .ticket-workspace--detail {
        display: block;
        height: auto;
        min-height: calc(100dvh - 64px);
        overflow: visible;
    }
    .ui-shell .ticket-list-pane,
    .ui-shell .ticket-detail-pane,
    .ui-shell .ticket-thread {
        width: 100%;
        min-width: 0;
    }
    .ui-shell .ticket-detail-pane > .row { margin: 0; }
    .ui-shell .ticket-thread .message-box { max-width: 100%; overflow-wrap: anywhere; }
    .ui-shell .portal-table-shell,
    .ui-shell .portal-table-scroll { min-width: 0; max-width: 100%; }
    .ui-shell .portal-table-toolbar,
    .ui-shell .portal-table-footer { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
    .ui-shell .main-header-navbar { gap: 8px; padding-inline: 12px !important; }
    .ui-shell .main-header-navbar .navbar-left { flex: 1 1 auto; min-width: 0; }
    .ui-shell .main-header-navbar .navbar-brand { display: none !important; }
    .ui-shell .sidebar-toggle { flex: none; margin-left: 0; }
    .ui-shell .header-breadcrumb { min-width: 0; margin-left: 8px; overflow: hidden; }
    .ui-shell .header-breadcrumb [role="heading"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-shell .nav-icons { flex: none; gap: 3px; }
    .ui-shell .header-status-link { display: none; }
    .ui-shell .portal-table-search { width: 100%; }
    .ui-shell .portal-table-footer { align-items: flex-start; }
}

/* Keep customer branding in the full-width header when the sidebar collapses. */
.ui-shell.ui-customer .main-header-navbar,
.ui-shell.ui-customer:has(.main-sidebar.collapsed) .main-header-navbar {
    left: 0;
    width: 100%;
    padding-left: 0;
}
.ui-shell.ui-customer .main-header-navbar .navbar-brand {
    display: flex !important;
    flex: 0 0 var(--sidebar-width);
    justify-content: center;
    width: var(--sidebar-width);
    max-width: none;
    height: 64px;
    margin-right: 16px;
    padding: 6px 18px;
    border-right: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
}
.ui-shell.ui-customer .main-header-navbar .navbar-brand img {
    width: auto;
    max-width: 100%;
    max-height: 37px;
    object-fit: contain;
}
.ui-shell.ui-customer.branding-logo-size-small .main-header-navbar .navbar-brand img { max-height: 30px; }
.ui-shell.ui-customer.branding-logo-size-large .main-header-navbar .navbar-brand img { max-height: 46px; }
.ui-shell.ui-customer .main-sidebar {
    top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    min-height: 0;
}
.ui-shell.ui-customer .header-account-toggle { display: none; }
@media (max-width: 991.98px) {
    .ui-shell.ui-customer .main-header-navbar,
    .ui-shell.ui-customer:has(.main-sidebar.collapsed) .main-header-navbar { padding-left: 12px; }
    .ui-shell.ui-customer .main-header-navbar .navbar-brand {
        flex: 0 1 140px;
        width: 140px;
        max-width: 140px;
        margin-right: 8px;
        padding: 5px 0;
        border-right: 0;
        background: transparent;
    }
    .ui-shell.ui-customer .main-header-navbar .navbar-brand img { max-height: 34px; }
}
@media (max-width: 575.98px) {
    .ui-shell.ui-customer .main-header-navbar .navbar-left { flex: 1 1 auto; min-width: 0; }
    .ui-shell.ui-customer .main-header-navbar .navbar-brand {
        display: flex !important;
        flex: 0 1 180px;
        width: 180px;
        min-width: 0;
        max-width: 180px;
        margin-right: 6px;
        padding: 5px 3px;
    }
    .ui-shell.ui-customer .main-header-navbar .navbar-brand img { max-height: 36px; }
    .ui-shell.ui-customer .header-breadcrumb,
    .ui-shell.ui-customer .header-help-link { display: none; }
    .ui-shell.ui-customer .header-account-toggle {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--ui-line);
        border-radius: 8px;
        background: var(--ui-surface-soft);
        color: var(--ui-ink);
        cursor: pointer;
    }
    .ui-shell.ui-customer .header-account-toggle[aria-expanded="true"] { background: var(--ui-hover); }
    .ui-shell.ui-customer .main-header-navbar .nav-icons .header-account-toggle i { margin: 0; color: inherit; font-size: 14px; }
}

/* The narrow desktop rail shows one clear icon per destination. */
@media (min-width: 992px) {
    .ui-shell.ui-customer .main-sidebar.collapsed { padding-inline: 8px; }
    .ui-shell.ui-customer .main-sidebar.collapsed .sidebar-organization,
    .ui-shell.ui-customer .main-sidebar.collapsed .sidebar-account-menu > summary {
        justify-content: center;
        width: 46px;
        min-height: 44px;
        margin-inline: auto;
        padding: 5px;
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .sidebar-organization-icon { width: 34px; height: 34px; }
    .ui-shell.ui-customer .main-sidebar.collapsed .sidebar-account-area { padding-top: 8px; }
    .ui-shell.ui-customer .main-sidebar.collapsed > .sidebar { scrollbar-width: none; }
    .ui-shell.ui-customer .main-sidebar.collapsed > .sidebar::-webkit-scrollbar { display: none; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li { padding: 2px 0; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.sidebar-section-label { display: block; height: 15px; padding: 0; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.sidebar-section-label:first-child { height: 5px; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.sidebar-section-label span { display: none; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.sidebar-section-label:not(:first-child)::before {
        display: block;
        width: 28px;
        height: 1px;
        margin: 7px auto 0;
        background: var(--ui-line);
        content: "";
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 44px;
        min-height: 44px;
        margin: 0 auto;
        padding: 0;
        border-radius: 9px;
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a i:not(.arrow) {
        flex: 0 0 20px;
        width: 20px;
        min-width: 20px;
        margin: 0;
        font-size: 16px;
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a .arrow,
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > ul { display: none !important; }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a.active,
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active:has(a[aria-current="page"]) > a {
        background: var(--ui-accent);
        color: var(--ui-accent-ink);
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a.active i:not(.arrow),
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active:has(a[aria-current="page"]) > a i:not(.arrow) { color: var(--ui-accent-ink); }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active:not(:has(a[aria-current="page"])) > a {
        background: transparent;
        color: var(--ui-muted);
    }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active:not(:has(a[aria-current="page"])) > a:hover { background: var(--ui-hover); }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active:not(:has(a[aria-current="page"])) > a i:not(.arrow) { color: var(--ui-muted); }
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a.active::before,
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li > a.active::after,
    .ui-shell.ui-customer .main-sidebar.collapsed .metismenu > li.mm-active > a::before { display: none; }
}

/* Webhook switches retain the green and red states in the current visual style. */
.ui-shell.ui-customer .webhook-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.ui-shell.ui-customer .webhook-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.ui-shell.ui-customer .webhook-switch-track {
    position: relative;
    display: block;
    flex: none;
    width: 38px;
    height: 22px;
    border: 1px solid #b6525a;
    border-radius: 20px;
    background: #b6525a;
    transition: background-color .18s ease, border-color .18s ease;
}
.ui-shell.ui-customer .webhook-switch-track::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform .18s ease, background-color .18s ease;
}
.ui-shell.ui-customer .webhook-switch-input:checked + .webhook-switch-track {
    border-color: #2d986a;
    background: #2d986a;
}
.ui-shell.ui-customer .webhook-switch-input:checked + .webhook-switch-track::after {
    transform: translateX(16px);
    background: #fff;
}
.ui-shell.ui-customer .webhook-switch-input:focus-visible + .webhook-switch-track {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}
.ui-shell.ui-customer .webhook-switch-input:disabled + .webhook-switch-track { opacity: .5; }

/* Domain overview filters sit above the server-side table. */
.ui-shell.ui-customer .domain-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 19px;
}
.ui-shell.ui-customer .domain-filter-label {
    margin-right: 3px;
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 700;
}
.ui-shell.ui-customer .domain-filter {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ui-shell.ui-customer .domain-filter:hover { border-color: var(--ui-accent-line); color: var(--ui-ink); }
.ui-shell.ui-customer .domain-filter.is-active {
    border-color: var(--ui-accent-line);
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}
.ui-shell.ui-customer .domain-filter:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Select2 is shared by domain, Plesk and network forms. The menu is appended to body. */
body.ui-customer .select2-container { max-width: 100%; font: inherit; }
body.ui-customer .select2-container--default .select2-selection--single,
body.ui-customer .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    height: auto;
    border: 1px solid var(--ui-line) !important;
    border-radius: 9px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    box-shadow: none;
    font: inherit;
}
body.ui-customer .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 36px 0 12px;
}
body.ui-customer .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0;
    line-height: 38px;
    color: var(--ui-ink) !important;
    font-size: 13px;
}
body.ui-customer .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.ui-customer .select2-container--default .select2-search__field::placeholder { color: var(--ui-muted) !important; }
body.ui-customer .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 9px;
    height: 100%;
    width: 22px;
}
body.ui-customer .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ui-muted) transparent transparent;
}
body.ui-customer .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent var(--ui-muted);
}
body.ui-customer .select2-container--default.select2-container--focus .select2-selection,
body.ui-customer .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--ui-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent);
}
body.ui-customer .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--ui-line) !important;
    border-radius: 9px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    box-shadow: var(--ui-shadow);
    z-index: 1060;
}
body.ui-customer .select2-search--dropdown { padding: 9px; }
body.ui-customer .select2-search--dropdown .select2-search__field {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--ui-line) !important;
    border-radius: 7px;
    outline: none;
    background: var(--ui-surface-soft) !important;
    color: var(--ui-ink) !important;
}
body.ui-customer .select2-search--dropdown .select2-search__field:focus { border-color: var(--ui-focus) !important; }
body.ui-customer .select2-results__options { padding: 5px; }
body.ui-customer .select2-results__option {
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ui-ink) !important;
    font-size: 13px;
}
body.ui-customer .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--ui-active) !important;
    color: var(--ui-ink) !important;
}
body.ui-customer .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--ui-accent) !important;
    color: var(--ui-accent-ink) !important;
}
body.ui-customer .select2-container--default .select2-results__option--highlighted[aria-selected] .option-title,
body.ui-customer .select2-container--default .select2-results__option--highlighted[aria-selected] .option-desc {
    color: var(--ui-accent-ink) !important;
}
body.ui-customer .select2-results__option .option-title { color: var(--ui-ink); }
body.ui-customer .select2-results__option .option-desc { color: var(--ui-muted); }
body.ui-customer .select2-container--default .select2-selection--multiple { padding: 3px 6px; }
body.ui-customer .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 3px;
    padding: 3px 8px;
    border: 1px solid var(--ui-accent-line);
    border-radius: 6px;
    background: var(--ui-active);
    color: var(--ui-ink);
}
body.ui-customer .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ui-muted); }
body.ui-customer .select2-container--default .select2-selection--multiple .select2-search__field { color: var(--ui-ink); }
body.ui-customer .select2-container--default.select2-container--disabled .select2-selection {
    opacity: .65;
    background: var(--ui-surface-soft) !important;
}

/* Product forms still contain old inline styles; use the shared theme tokens. */
body.ui-customer .section-box,
body.ui-customer.ui-domain .tab-content,
body.ui-customer.ui-domain .panel.panel-card {
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    box-shadow: var(--ui-shadow);
}
body.ui-customer .section-box { padding: 20px 22px; }
body.ui-customer .handle-form .section-box .row.g-3 > [class*="col-"] { margin-bottom: 12px; }
body.ui-customer .handle-form .section-box .row.g-3 > [class*="col-"] > label { display: block; margin-bottom: 5px; }
body.ui-customer .section-box .section-title { color: var(--ui-ink); font-size: 14px; }
body.ui-customer .section-box label { color: var(--ui-muted) !important; }
body.ui-customer .handle-form .btn-submit {
    border-radius: 9px;
    background: var(--ui-accent);
    color: var(--ui-accent-ink);
}
body.ui-customer.ui-domain .nav-tabs { background: var(--ui-surface-soft); border: 1px solid var(--ui-line); }
body.ui-customer.ui-domain .nav-tabs .nav-link { color: var(--ui-muted); }
body.ui-customer.ui-domain .nav-tabs .nav-link:hover { background: var(--ui-hover); color: var(--ui-ink); }
body.ui-customer.ui-domain .nav-tabs .nav-link.active { background: var(--ui-surface); color: var(--ui-link); }
body.ui-customer.ui-domain .zone-item label,
body.ui-customer.ui-domain .dnssec-label { color: var(--ui-muted) !important; }
body.ui-customer.ui-domain .zone-item input.form-control,
body.ui-customer.ui-domain .zone-item input[disabled],
body.ui-customer.ui-domain .zone-item input[readonly] {
    border-color: var(--ui-line) !important;
    border-radius: 9px;
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
}
body.ui-customer.ui-domain .alert-default { border-color: var(--ui-line); background: var(--ui-surface-soft); color: var(--ui-ink); }
body.ui-customer.ui-domain #cancelModal .form-control { color: var(--ui-ink); border-color: var(--ui-line); }
body.ui-customer.ui-domain .panel.panel-card .card-header { color: var(--ui-ink); }
body.ui-customer.ui-domain .panel.panel-card .form-control[readonly] { color: var(--ui-muted); }
body.ui-customer.ui-domain .panel.panel-card .input-group-append .btn { color: var(--ui-muted); border-color: var(--ui-line); }
body.ui-customer.ui-domain .panel.panel-card .input-group-append .btn:hover { color: var(--ui-link); }
body.ui-customer.ui-domain .verification-banner {
    border: 1px solid color-mix(in srgb, #d6a64f 40%, var(--ui-line));
    background: color-mix(in srgb, #d6a64f 14%, var(--ui-surface));
    color: var(--ui-ink);
    box-shadow: var(--ui-shadow);
}
body.ui-customer.ui-domain .verification-banner__title,
body.ui-customer.ui-domain .verification-banner__text { color: var(--ui-ink); }
body.ui-customer.ui-domain .form-control-plaintext { color: var(--ui-ink); }