/* ==========================================================================
   TridentNode - Monochrome (black & white) brand override
   Loaded last from includes/head.tpl so it wins over theme/custom/style CSS.
   Palette: pure black chrome, white content surfaces, neutral grey scale.
   ========================================================================== */

:root {
    /* Brand colours remapped to greyscale */
    --tn-primary: #000000;
    --tn-primary-dark: #000000;
    --tn-primary-light: #333333;
    --tn-secondary: #000000;
    --tn-accent: #000000;
    --tn-accent-hover: #333333;
    --tn-white: #ffffff;
    --tn-black: #000000;
    --tn-text: #3f3f46;
    --tn-text-light: #ffffff;
    --tn-border: #e4e4e7;
    --tn-border-light: #ededf0;
    --tn-bg-light: #f7f7f8;
    --tn-bg-dark: #000000;
    --tn-success: #1f1f1f;
    --tn-warning: #6b6b6b;
    --tn-error: #1a1a1a;

    /* Gradients flattened to neutral ink tones */
    --tn-gradient-primary: linear-gradient(96.18deg, #000000 0.44%, #2b2b2b 100.05%);
    --tn-gradient-primary-reverse: linear-gradient(96.18deg, #2b2b2b 0.44%, #000000 100.05%);
    --tn-gradient-save: linear-gradient(96.18deg, rgba(0, 0, 0, 0.06) 0.44%, rgba(0, 0, 0, 0.1) 100.05%);
    --tn-gradient-save-text: linear-gradient(96.18deg, #000000 0.44%, #333333 100.05%);
    --tn-gradient-bubble: rgba(0, 0, 0, 0.18);

    /* Softer, flatter shadows for a professional look */
    --tn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    --tn-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1);
    --tn-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.12);
    --tn-shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.18);

    --tn-radius-sm: 6px;
    --tn-radius-md: 8px;
    --tn-radius-lg: 12px;
    --tn-radius-xl: 14px;
    --tn-radius-pill: 999px;

    --grayscale-lifted: #f1f1f3;

    /* Local scale used by this file */
    --mono-ink: #000000;
    --mono-ink-soft: #1c1c1e;
    --mono-body: #3f3f46;
    --mono-muted: #71717a;
    --mono-line: #e4e4e7;
    --mono-line-strong: #d4d4d8;
    --mono-surface: #ffffff;
    --mono-surface-alt: #f7f7f8;
    --mono-surface-sunken: #f1f1f3;

    /* The only two colours allowed to break the monochrome scale: the
       destructive red on Close, and the star yellow on ticket ratings. */
    --tn-red: #dc2626;
    --tn-red-dark: #b91c1c;
    --tn-star: #f5b400;

    /* WHMCS core theme tokens (theme.min.css) */
    --primary: #000000;
    --secondary: #52525b;
    --grayscale: #000000;
    --grayscale-accented: #18181b;
    --text: #18181b;
    --text-lifted: #52525b;
    --text-accented: #27272a;
    --text-muted: #71717a;
    --bg: #ffffff;
    --bg-muted: #fafafa;
    --bg-lifted: #f4f4f5;
    --bg-accented: #ededf0;
    --bg-inverted: #000000;
    --border-muted: #ededf0;
    --border: #e4e4e7;
    --border-lifted: #d4d4d8;

    /* Width of the fixed desktop client-area rail. Content is shifted by the
       same amount, so change it here only. */
    --tn-rail-w: 108px;
}

/* ==========================================================================
   HEADER / NAVIGATION - dark chrome
   ========================================================================== */

/* Scoped to the site header on purpose: Bootstrap tab strips are
   `<ul class="nav nav-tabs">`, so a bare `.nav` selector would paint every
   tab list black as well. */
header.header .nav,
.nav__sec {
    background: #000000 !important;
    box-shadow: none !important;
}

header.header .nav {
    border-bottom: 1px solid #1c1c1e !important;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.nav__logo {
    width: auto !important;
    max-width: none !important;
    height: 38px !important;
    object-fit: contain;
}

.nav__menu {
    color: #ffffff !important;
}

.nav__menuItems,
.nav__menuItems a,
.nav__menuItems * {
    color: rgba(255, 255, 255, 0.82) !important;
}

.nav__menuItems:hover,
.nav__menuItems:hover a,
.nav__menuItems:hover * {
    color: #ffffff !important;
}

.nav__subMenu {
    background-color: #0d0d0f !important;
    border: 1px solid #26262a !important;
    border-radius: var(--tn-radius-md) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

.nav__subItems:not(:last-child) {
    border-bottom: 1px solid #26262a !important;
}

.nav__subItem {
    color: rgba(255, 255, 255, 0.82) !important;
}

.nav__subItem:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Ghost button (Login) */
.nav__btn,
.mNav__btn {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--tn-radius-md) !important;
    color: #ffffff !important;
}

.nav__btn a,
.mNav__btn a {
    color: #ffffff !important;
}

.nav__btn:active,
.nav__btn:hover,
.nav__btn--active,
.mNav__btn:active,
.mNav__btn:hover,
.mNav__btn--active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
}

.nav__btn:active a,
.nav__btn:hover a,
.nav__btn--active a,
.mNav__btn:hover a {
    color: #ffffff !important;
}

/* Solid button (Signup / Dashboard) - inverted: white on black chrome */
.nav__btn--solid,
.mNav .nav__btn--solid,
.nav__btn--solid.mNav__btn,
.client_dashboard_btn.mNav__btn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
}

.nav__btn--solid a,
.mNav .nav__btn--solid a {
    color: #000000 !important;
}

.nav__btn--solid:hover,
.mNav .nav__btn--solid:hover {
    background-color: #d4d4d8 !important;
    border-color: #d4d4d8 !important;
}

.nav__btn--solid:hover a,
.mNav .nav__btn--solid:hover a {
    color: #000000 !important;
}

/* Hamburger / close icons rendered white */
.nav__hamBurger,
.nav__close {
    filter: brightness(0) invert(1);
}

/* Mobile nav */
.mNav {
    background: #000000 !important;
}

.mNav__menuItems,
.mNav__menuItems a,
.mNav__slink {
    color: rgba(255, 255, 255, 0.85) !important;
}

.mNav__menuItems {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.mNav__menuItems:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.nav__searchBox {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.nav__search,
.nav__search::placeholder {
    color: #ffffff !important;
}

/* Breadcrumb (the logged-in topbar is no longer rendered by header.tpl) */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: var(--mono-surface-alt) !important;
}

.master-breadcrumb .breadcrumb a {
    color: var(--mono-muted) !important;
}

.master-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: var(--mono-ink) !important;
}

/* ==========================================================================
   1. BASE / TYPOGRAPHY
   ========================================================================== */

body {
    color: var(--mono-body);
    background-color: var(--mono-surface-alt);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mono-ink);
}

a {
    color: var(--mono-ink) !important;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--mono-muted) !important;
}

/* Anything sitting on a dark surface keeps white links.
   `.nav a` is scoped to the header so it does not whiten Bootstrap tab
   labels, which sit on a white panel. */
.ftr a,
.ftr a:hover,
header.header .nav a,
header.header .nav a:hover,
.mNav a,
.mNav a:hover,
.topbar a,
.topbar a:hover,
.banner--home a,
.banner--home a:hover,
.nLetter a,
.nLetter a:hover,
.plans__tab a,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff !important;
}

::selection {
    background: var(--mono-ink);
    color: #ffffff;
}

/* ==========================================================================
   2. DARK HERO FIXES (banner sits on black gradient)
   ========================================================================== */

/* theme.min.css puts `padding: 20px 0` on #main-body, which leaves a white
   strip between the black header and the hero. Kill it only on pages that
   actually contain the hero so inner pages keep their spacing. */
#main-body:has(.banner--home) {
    padding-top: 0 !important;
}

/* Headings + copy on the dark hero must be white, not --mono-ink */
.banner--home .banner__title,
.banner--home .banner__desc,
.banner--home h1,
.banner--home h2,
.banner--home h3,
.banner--home p,
.banner--home span {
    color: #ffffff !important;
}

/* White pill button on the hero keeps black label (the .banner--home a
   white-link rule above would otherwise make it white-on-white) */
.banner--home a.deal-btn,
.banner--home a.deal-btn span,
.banner--home a.deal-btn:hover span,
.deal-btn,
.deal-btn span {
    color: #000000 !important;
}

.banner--home a.deal-btn,
.deal-btn {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.banner--home a.deal-btn:hover,
.deal-btn:hover {
    background: #d4d4d8 !important;
    border-color: #d4d4d8 !important;
}

/* Solid nav button (Signup / Dashboard): black label on white pill.
   Must come after the `.nav a` white-link rule to win. */
.nav .nav__btn--solid a,
.nav li.nav__btn--solid a,
.mNav .nav__btn--solid a,
.mNav li.nav__btn--solid a,
.nav .nav__btn--solid:hover a,
.mNav .nav__btn--solid:hover a,
.client_dashboard_btn.mNav__btn a {
    color: #000000 !important;
}

/* ==========================================================================
   3. REMAINING BLUE ELEMENTS (buttons, tabs, pills)
   ========================================================================== */

/* Footer newsletter Subscribe button is styled in section 4 below. */

/* Feature tabs (24/7 Support, Money-Back, 1-Click Apps, Domains & SSL) */
.feature__dataCenter__tabs__items {
    background: #ffffff !important;
    border: 1px solid var(--mono-line) !important;
    color: var(--mono-ink) !important;
}

.feature__dataCenter__tabs__items:hover,
.feature__dataCenter__tabs__items.show {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Generic blue CTAs and pills elsewhere in the theme */
.banr__btn,
.bnnr__cta,
.btn--lightBlue,
.cust__btn,
.cust__btn--active,
#verificationModal .modal-button,
.btn-primary,
.btn-success {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.banr__btn:hover,
.bnnr__cta:hover,
.btn--lightBlue:hover,
.cust__btn:hover,
#verificationModal .modal-button:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: #333333 !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* Blue headings / accent text */
.banr__title,
.banr.full-width .banr__heading,
.choose__cardText,
.cloud .text-blue,
.bvps.boxView .bvps__title,
.content--default h3,
.content--default .h3,
.content--default h4,
.content--default .h4,
.content--default h5,
.content--default .h5,
.content--default h6,
.content--default .h6,
.content--default a,
.tmonial__menuItems.active {
    color: var(--mono-ink) !important;
}

.content--default a:hover {
    color: var(--mono-muted, #71717a) !important;
}

/* Gradient-clipped blue text (price/code callouts) */
.bnnr__code,
.bnnr__subHeading span {
    background: linear-gradient(96.18deg, #000000 0.44%, #333333 100.05%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

/* ==========================================================================
   4. FOOTER - pure black surface, white text, white Subscribe button
   Comes after section 3 so it overrides the generic .ftr__sbs rules above.
   ========================================================================== */

.ftr,
.ftr__sec,
.ftr__topSec,
.ftr__menuSec,
.ftr__btmSec,
.ftr__crSec,
.ftr__logoSec,
footer#footer {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* All footer copy white */
.ftr,
.ftr__text,
.ftr__menu,
.ftr__menuItems,
.ftr__menuItems a,
.ftr__menuItems a:hover,
.ftr__crContent,
.ftr__home,
.ftr__home:hover,
.ftr__link,
.ftr__logo-text,
.ftr__logo-text:hover,
.ftr h1,
.ftr h2,
.ftr h3,
.ftr h4,
.ftr h5,
.ftr h6,
.ftr p,
.ftr span,
.ftr li,
.ftr a,
.ftr a:hover {
    color: #ffffff !important;
}

/* Divider lines stay subtle on black */
.ftr__hr {
    border-color: rgba(255, 255, 255, 0.15) !important;
    opacity: 1 !important;
}

/* Email field: white box with black text so it reads on black */
.ftr__email {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
}

.ftr__email::placeholder {
    color: #71717a !important;
}

/* Subscribe button: white pill, black label */
.ftr__sbs,
.ftr .ftr__sbs,
.inbox .ftr__sbs,
.ftr__sbs.g-recaptcha,
.ftr__sbs.subscribe-now,
#footer-subscriber-form .ftr__sbs {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: #000000 !important;
}

.ftr__sbs:hover,
.ftr .ftr__sbs:hover,
.inbox .ftr__sbs:hover,
.ftr__sbs.subscribe-now:hover,
#footer-subscriber-form .ftr__sbs:hover {
    background: #d4d4d8 !important;
    background-color: #d4d4d8 !important;
    border-color: #d4d4d8 !important;
    color: #000000 !important;
}

/* Social icon chips: white circle, invert to black on hover */
.ftr__logoBg {
    background-color: #ffffff !important;
}

.ftr__logoBg:hover {
    background-color: #000000 !important;
    box-shadow: 0 0 0 1px #ffffff !important;
}

/* Subscribe form status messages must stay legible on black */
#footer-subscriber-form .successMessage {
    color: #ffffff !important;
}

#footer-subscriber-form .errorMessage {
    color: #d4d4d8 !important;
}

/* ==========================================================================
   5. HERO BACKGROUND VIDEO (replaces the old .banner__logo image)
   ========================================================================== */

.banner--home {
    position: relative !important;
    overflow: hidden !important;
    background: #000000 !important;
}

.banner--home .banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    border: 0;
}

/* Dark scrim so the white hero copy stays readable over the footage */
.banner--home .banner__videoOverlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Text column now spans the full width since the right image is gone */
.banner--home .banner__cont {
    position: relative;
    z-index: 2;
}

.banner--home .banner__left {
    width: 100% !important;
}

/* Users who prefer reduced motion get a still black hero */
@media (prefers-reduced-motion: reduce) {
    .banner--home .banner__video {
        display: none;
    }
}

/* ==========================================================================
   6. NAV DROPDOWN ARROW (Products / More) - white, rotates on hover
   ========================================================================== */

/* dropdown.svg is painted with fill="currentColor", so loading it through
   <img> renders it black. brightness(0) flattens it, invert(1) makes it pure
   white against the black nav.

   Specificity note: custom.css has `body:not(.darkMode) .nav__dropDown` with
   an !important blue hue-rotate filter (0,2,1). Plain `.nav__dropDown` (0,1,0)
   loses to it even with !important, which left a dark blue arrow that was
   invisible on black. These selectors are deliberately heavier. */
body .header .nav .nav__subMenus .nav__dropDown,
body .nav .nav__subMenus .nav__dropDown,
body:not(.darkMode) .nav .nav__subMenus .nav__dropDown,
body.darkMode .nav .nav__subMenus .nav__dropDown,
body .mNav .nav__subMenus .nav__dropDown {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 12px !important;
    height: 7px !important;
    padding: 0 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform 0.25s ease !important;
}

/* Rotate whether the pointer is on the item or on the arrow itself */
body .nav .nav__subMenus:hover .nav__dropDown,
body .nav .nav__subMenus:focus-within .nav__dropDown,
body .nav .nav__subMenus .nav__dropDown:hover,
body:not(.darkMode) .nav .nav__subMenus:hover .nav__dropDown,
body .mNav .nav__subMenus:hover .nav__dropDown {
    transform: rotate(180deg) !important;
}

/* custom.css tints the arrow's hit area blue on hover */
body .nav .nav__subMenus .nav__dropDown:hover {
    background: transparent !important;
}

/* ==========================================================================
   7. SOFT ROUNDED CORNERS (status labels, list tables, pagination)
   ========================================================================== */

/* Status pills (Active / Paid / Unpaid ...). theme.min.css uses
   var(--rounding-sm|lg), which is never defined anywhere in this theme, so the
   radius silently resolved to 0 and the pills rendered as sharp rectangles. */
body .label,
body .label.status,
body .label.status > span,
body .label-success,
body .label-default,
body .label-info,
body .label-warning,
body .label-danger,
body span.label[class*="status-"] {
    border-radius: 999px !important;
    padding: 0.35em 0.8em !important;
}

/* List tables: border-collapse:collapse discards border-radius, so switch to
   separate borders (spacing 0 keeps the same visual density) and clip the
   corners with overflow. */
body table.table-list,
body .table-list {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid var(--mono-line) !important;
}

/* With separate borders each cell draws its own line, so only keep the
   horizontal rule between rows. */
body table.table-list thead th {
    border-bottom: 1px solid var(--mono-line) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

body table.table-list tbody td {
    border-bottom: 1px solid var(--mono-line) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

body table.table-list tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Corner cells follow the table radius (overflow:hidden alone is unreliable
   on tables across browsers). */
body table.table-list thead th:first-child {
    border-top-left-radius: 12px !important;
}

body table.table-list thead th:last-child {
    border-top-right-radius: 12px !important;
}

body table.table-list tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px !important;
}

body table.table-list tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px !important;
}

/* The scroll wrapper must not clip the rounded table edges */
body .dataTables_wrapper {
    border-radius: 12px !important;
}

/* Pagination: soft pill group */
body .dataTables_paginate .pagination,
body .pagination {
    border-radius: 10px !important;
    overflow: hidden !important;
}

body .pagination .page-item .page-link {
    border-radius: 8px !important;
    margin: 0 2px !important;
}

body .pagination .page-item:first-child .page-link {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

body .pagination .page-item:last-child .page-link {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* ==========================================================================
   8. PRODUCT DETAILS PAGE (status card, tabs)
   ========================================================================== */

/* Status card. `--rounding-md` is undefined in this theme so the radius
   resolved to 0, and the status colours were still green/blue. */
body .product-status {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--mono-line) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

body .product-status .product-icon {
    background-color: var(--mono-surface-alt) !important;
    border-radius: 0 !important;
    padding: 44px 24px !important;
    color: var(--mono-ink) !important;
}

body .product-status .product-icon h3 {
    margin: 20px 0 4px !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--mono-ink) !important;
}

body .product-status .product-icon h4 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--mono-muted) !important;
}

/* Product icon image (replaced the stacked Font Awesome circle) */
body .product-status .product-icon__img {
    display: block !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* Status strip at the bottom of the card - monochrome for every state */
body .product-status-active,
body .product-status-pending,
body .product-status-suspended,
body .product-status-terminated,
body .product-status-fraud {
    background-color: #ffffff !important;
}

body .product-status .product-status-text {
    padding: 16px 12px !important;
    background-color: var(--mono-ink) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

body .product-status-suspended .product-status-text,
body .product-status-terminated .product-status-text {
    background-color: var(--mono-muted) !important;
}

/* Action buttons under the card */
body .product-actions-wrapper {
    margin-top: 4px !important;
}

body .product-actions-wrapper .btn {
    border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   Tabs (Server Information ...)
   theme.min.css sets `.nav-link { color:#fff; background-color:#007bff }`,
   so the active tab rendered white text on a white panel - unreadable. It
   also draws a hard 1px line under the strip. Both are replaced here.
   -------------------------------------------------------------------------- */
body .nav-tabs {
    border-bottom: 1px solid var(--mono-line) !important;
    gap: 4px !important;
}

body .nav-tabs .nav-item {
    margin-bottom: -1px !important;
}

body .nav-tabs .nav-link {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px 10px 0 0 !important;
    color: var(--mono-muted) !important;
    font-weight: 600 !important;
}

body .nav-tabs .nav-link:hover {
    background-color: var(--mono-surface-alt) !important;
    border-color: transparent !important;
    color: var(--mono-ink) !important;
}

/* Active tab: dark readable label on white, joined to the panel below */
body .nav-tabs .nav-link.active,
body .nav-tabs .nav-link[aria-expanded="true"],
body .nav-tabs .nav-item.show .nav-link {
    background-color: #ffffff !important;
    border-color: var(--mono-line) var(--mono-line) #ffffff !important;
    border-radius: 10px 10px 0 0 !important;
    color: var(--mono-ink) !important;
}

body .nav-tabs .nav-link.active i,
body .nav-tabs .nav-link i {
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   Tab panes must be able to contain wide module output on mobile. Without
   min-width:0 a flex/grid child refuses to shrink below its content, which
   let the tridentnodes server-control card overflow its column and slide
   under the neighbouring blocks.
   -------------------------------------------------------------------------- */
body .product-details-tab-container,
body .tab-content,
body .tab-pane {
    min-width: 0 !important;
    max-width: 100% !important;
}

body .module-client-area {
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
}

@media (max-width: 767px) {
    /* theme.min.css pads this container 20px on each side; on small screens
       that is width the card cannot afford. */
    body .product-details-tab-container {
        padding: 14px !important;
    }

    body .product-details .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .product-details .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ==========================================================================
   9. ORDER FORM SIDEBAR PANELS + DOMAIN SEARCH
   ========================================================================== */

/* custom.css paints .card-header with var(--tn-primary) (now black) and white
   text, but it only recolours `.card-title`. The order form sidebar uses
   `.panel-title`, which theme.min.css leaves at `color: var(--text)` (#18181b)
   - black text on a black bar, which is why "Categories" and "Actions" looked
   like empty dark strips. */
body .panel-heading.card-header,
body .card-sidebar > .card-header,
body .panel-sidebar > .panel-heading {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: var(--mono-ink) !important;
    background-color: var(--mono-ink) !important;
    border: 0 !important;
    border-radius: 12px 12px 0 0 !important;
}

body .panel-heading .panel-title,
body .card-header .panel-title,
body .card-header .card-title,
body .panel-heading h3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}

/* theme.min.css hides the leading glyph with
   `.panel-title .fas:first-child { display:none }` (and the same for
   .card-header), which stripped the cart and plus icons. Put them back. */
body .panel-heading .panel-title .fas,
body .panel-heading .panel-title .fas:first-child,
body .panel-heading .panel-title .far,
body .panel-heading .panel-title .fad,
body .card-header .card-title .fas,
body .card-header .card-title .fas:first-child,
body .card-header .panel-title .fas:first-child {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

/* The collapse chevron sits at the far end of the flex row */
body .panel-heading .panel-title .card-minimise,
body .panel-heading .panel-title .panel-minimise,
body .card-header .card-title .card-minimise {
    margin-left: auto !important;
    float: none !important;
    font-size: 12px !important;
    opacity: 0.75 !important;
}

body .panel-heading .panel-title .badge,
body .card-header .card-title .badge {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    color: var(--mono-ink) !important;
    float: none !important;
}

/* Panel body squared off against the rounded header. The order form uses
   `.panel.card` (not `.card-sidebar`) for the mobile category selector, so
   both are covered or the header corners bleed past the card edge. */
body .card-sidebar,
body .panel.card-sidebar,
body .panel.card {
    overflow: hidden !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 12px !important;
}

/* `m-0` on the heading plus the card's own padding left the black bar looking
   like a narrow strip that did not reach the card edges. */
body .panel-heading.card-header.m-0,
body .panel > .panel-heading,
body .card > .card-header {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body .card-sidebar .list-group-item {
    border-left: 0 !important;
    border-right: 0 !important;
    color: var(--mono-body) !important;
}

body .card-sidebar .list-group-item.active {
    background: var(--mono-surface-alt) !important;
    border-color: var(--mono-line) !important;
    color: var(--mono-ink) !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Domain search button: the markup is text-only ("Search"), so the lens is
   added here with the Font Awesome glyph the theme already loads.
   -------------------------------------------------------------------------- */
body #btnCheckAvailability,
body .domain-check-availability {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 22px !important;
    background: var(--mono-ink) !important;
    background-color: var(--mono-ink) !important;
    border: 1px solid var(--mono-ink) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

body #btnCheckAvailability::before,
body .domain-check-availability::before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    /* Purely decorative next to the visible "Search" label */
    speak: never;
}

body #btnCheckAvailability:hover,
body .domain-check-availability:hover {
    background: #333333 !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* "Choose Another Category" dropdown toggle. theme.min.css gives .btn-default
   `border-radius: var(--rounding-md)`, another undefined variable, so the
   corners resolved to square. */
body .btn-default,
body .btn-default.dropdown-toggle,
body .btn.btn-light.dropdown-toggle,
body .dropdown .btn-default,
body .btn-group > .btn-default {
    border-radius: 10px !important;
}

body .btn-default + .dropdown-menu,
body .dropdown-menu {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   10. PANEL / DROPDOWN MOTION
   ========================================================================== */

@keyframes tnPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tnFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown panels. Bootstrap toggles `display:none` -> `.show`, and a
   transition cannot run from display:none, so the open state is driven by a
   keyframe animation instead. Closing is instant: Bootstrap removes the class
   and the element is hidden in the same frame, which CSS alone cannot defer. */
body .dropdown-menu.show {
    animation: tnPanelIn 0.18s ease-out;
    transform-origin: top center;
}

body .dropdown-menu.dropup.show,
body .dropup .dropdown-menu.show {
    transform-origin: bottom center;
}

body .dropdown-menu .dropdown-item {
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

body .dropdown-menu .dropdown-item:hover {
    padding-left: 1.75rem;
}

/* The collapse chevron flips as the sidebar panel opens and closes. The body
   itself is animated by jQuery slideUp/slideDown in scripts.js. */
body .card-minimise,
body .panel-minimise {
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body .card-minimise.minimised,
body .panel-minimise.minimised {
    transform: rotate(180deg);
}

/* Sidebar rows get a subtle slide on hover */
body .card-sidebar .list-group-item {
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

body .card-sidebar .list-group-item:hover {
    background: var(--mono-surface-alt) !important;
    padding-left: 1.5rem !important;
}

/* Tab panes fade in. theme.min.css ships `.fade{transition:opacity .15s}` but
   the panes carry `.show` immediately, so an animation reads more clearly. */
body .tab-content > .tab-pane.active.show {
    animation: tnFadeIn 0.22s ease-out;
}

/* Cards lift slightly on hover, panels included */
body .card-sidebar,
body .panel.card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body .card-sidebar:hover,
body .panel.card:hover {
    border-color: var(--mono-line-strong) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.07) !important;
}

/* Buttons: theme.min.css only disables its own transition under
   prefers-reduced-motion, so this is safe to re-enable broadly. */
body .btn,
body .btn-default,
body .tn-btn {
    transition: background-color 0.16s ease, border-color 0.16s ease,
        color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease !important;
}

body .btn:active,
body .btn-default:active {
    transform: translateY(1px);
}

/* Alerts and status messages ease in rather than snapping */
body .alert {
    animation: tnFadeIn 0.24s ease-out;
}

/* Respect the OS setting: no motion, no animations. */
@media (prefers-reduced-motion: reduce) {
    body .dropdown-menu.show,
    body .tab-content > .tab-pane.active.show,
    body .alert {
        animation: none !important;
    }

    body .card-minimise,
    body .panel-minimise,
    body .card-sidebar,
    body .panel.card,
    body .btn,
    body .card-sidebar .list-group-item,
    body .dropdown-menu .dropdown-item {
        transition: none !important;
    }

    body .btn:active {
        transform: none;
    }

    body .dropdown-menu .dropdown-item:hover,
    body .card-sidebar .list-group-item:hover {
        padding-left: inherit;
    }
}

/* ==========================================================================
   11. LOADING INDICATORS (branded GIF)
   ========================================================================== */

.tn-loader-gif {
    display: inline-block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    /* The GIF is transparent, so nothing else is needed to sit it on the
       overlay's dark scrim. */
}

.tn-loader-gif--sm {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* The overlay is a dark scrim; keep the branded mark centred in it. */
body #fullpage-overlay .inner-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body #fullpage-overlay .tn-loader-gif {
    margin: 0 auto;
}

/* Replace Font Awesome spinners elsewhere with the branded GIF. The glyph is
   hidden and the mark is drawn as a background on the same element, so no
   template changes are needed for module or core spinners. */
body .fa-spin.fa-circle-notch,
body .loader > .fa-spin,
body .fa-spinner.fa-spin {
    position: relative;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    color: transparent !important;
    background-image: url("../images/tn-loading.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Kill the FA rotation: the GIF animates itself. */
    animation: none !important;
}

body .fa-spin.fa-circle-notch::before,
body .loader > .fa-spin::before,
body .fa-spinner.fa-spin::before {
    content: "" !important;
}

@media (prefers-reduced-motion: reduce) {
    /* An animated GIF cannot be paused with CSS, so swap in the static
       wordmark for users who ask for reduced motion. */
    body .tn-loader-gif {
        content: url("../images/tn-logo-white.svg");
    }
}

/* ==========================================================================
   12. LOGIN LOGO + MODAL HEADERS
   ========================================================================== */

/* Only the logo is styled here; the rest of the login card keeps the base
   theme's own appearance. */
body .tn-login__logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Login page background video.
   Both layers sit at z-index -1 behind the page. An earlier version put the
   scrim at z-index 1, which painted over the footer (making it look missing)
   and swallowed the end of the page.
   -------------------------------------------------------------------------- */
.tn-loginBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    border: 0;
}

/* Dark scrim so the white card and its black text stay readable over moving
   footage. */
.tn-loginBg__scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: block;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
}

/* html/body must be transparent for a negative z-index layer to show through,
   and the page needs a black base so nothing flashes white while the video
   loads or if it fails. custom.css sets `#main-body` AND `.primary-content`
   to `background:#fff !important` (lines 4576-4581), which is the white slab
   that covered the video - both have to be cleared, plus the container that
   custom.css stretches to full width. */
body:has(.tn-loginBg),
body:has(.tn-loginBg) #main-body,
body:has(.tn-loginBg) #main-body > .container,
body:has(.tn-loginBg) #main-body .row,
body:has(.tn-loginBg) .primary-content,
body:has(.tn-loginBg) #main-body .primary-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html:has(.tn-loginBg) {
    background: #000000 !important;
}

/* Vertical breathing room via padding rather than min-height + flex: the
   earlier flex centring stretched the section and left the page scrolling
   past its content. */
body #main-body:has(.tn-loginBg) {
    position: relative !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

/* custom.css removes the container's own padding site-wide; restore some here
   so the card is not flush against the viewport edges. */
body:has(.tn-loginBg) #main-body > .container {
    padding-inline: 16px !important;
}

/* Frosted card: translucent white over the video, blurred so the dark text
   stays readable. custom.css paints .card, .card-body and .card-footer with
   solid white !important, so each one has to be cleared or the opacity has no
   visible effect. */
body .login-form .card.mw-540 {
    position: relative !important;
    margin-inline: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
    backdrop-filter: blur(6px) saturate(115%) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
}

body .login-form .card.mw-540 .card-body,
body .login-form .card.mw-540 .card-footer {
    background: transparent !important;
    background-color: transparent !important;
}

body .login-form .card.mw-540 .card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Inputs and the icon prefix stay lighter than the card so typed text and
   placeholders remain legible against the moving footage. */
body .login-form .card.mw-540 .form-control,
body .login-form .card.mw-540 .input-group-text,
body .login-form .card.mw-540 .btn-reveal-pw {
    background: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Every piece of text in the card is forced to solid black with a light halo,
   so it stays readable whatever frame is showing through. */
body .login-form .card.mw-540,
body .login-form .card.mw-540 .h3,
body .login-form .card.mw-540 h6,
body .login-form .card.mw-540 p,
body .login-form .card.mw-540 small,
body .login-form .card.mw-540 label,
body .login-form .card.mw-540 .form-control-label,
body .login-form .card.mw-540 .card-footer,
body .login-form .card.mw-540 .card-footer small,
body .login-form .card.mw-540 .card-footer a,
body .login-form .card.mw-540 .text-muted,
body .login-form .card.mw-540 a.text-muted,
body .login-form .card.mw-540 .small {
    color: #000000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
}

body .login-form .card.mw-540 .h3,
body .login-form .card.mw-540 h6 {
    font-weight: 700 !important;
}

/* Placeholders and the input glyphs also need to read as dark, not grey. */
body .login-form .card.mw-540 .form-control {
    color: #000000 !important;
}

body .login-form .card.mw-540 .form-control::placeholder {
    color: #52525b !important;
    opacity: 1 !important;
}

body .login-form .card.mw-540 .input-group-text i,
body .login-form .card.mw-540 .btn-reveal-pw i {
    color: #000000 !important;
}

/* Browsers without backdrop-filter (older Firefox) get a more opaque card so
   text never sits directly on moving footage. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .login-form .card.mw-540 {
        background: rgba(255, 255, 255, 0.8) !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* Footer stays opaque and above the background layers. */
body:has(.tn-loginBg) .footer,
body:has(.tn-loginBg) .ftr,
body:has(.tn-loginBg) .ftr__crSec {
    position: relative !important;
    z-index: 1 !important;
    background: #000000 !important;
    background-color: #000000 !important;
}

/* The breadcrumb bar would otherwise cut a light strip across the video. */
body:has(.tn-loginBg) .master-breadcrumb,
body:has(.tn-loginBg) .master-breadcrumb .breadcrumb {
    background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
    .tn-loginBg {
        display: none;
    }

    .tn-loginBg__scrim {
        background: #000000;
    }
}

/* --------------------------------------------------------------------------
   Modal headers (Generate Password and friends).
   The markup is `<div class="modal-header bg-primary text-white">`, so
   `.text-white` pins the title and close button to #fff !important. If the
   background does not resolve to a dark colour the whole header goes
   white-on-white and reads as an empty strip. Literal colours are used here
   rather than custom properties so this cannot fail if a var is missing.
   -------------------------------------------------------------------------- */
body .modal .modal-header,
body .modal .modal-header.bg-primary,
body .modal-header.bg-primary,
body .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    text-align: left !important;
}

body .modal .modal-header .modal-title,
body .modal-header.bg-primary .modal-title,
body .modal-header .modal-title,
body .modal-header h4,
body .modal-header h5,
body .modal-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

/* `.close` ships as color:#000 with a white text-shadow at 50% opacity, which
   is invisible on black. The span inside carries the glyph. */
body .modal .modal-header .close,
body .modal-header.bg-primary .close,
body .modal-header .close,
body .modal-header .close span,
body .modal-header button.close,
body .modal-header button.close span {
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transition: opacity 0.15s ease !important;
}

body .modal-header .close:hover,
body .modal-header .close:hover span,
body .modal-header .close:focus,
body .modal-header .close:focus span {
    color: #ffffff !important;
    opacity: 1 !important;
}

body .modal-content {
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Modal footer buttons keep the monochrome treatment */
body .modal-footer {
    border-top: 1px solid var(--mono-line) !important;
}

/* ==========================================================================
   13. ACCOUNT DROPDOWN (logged-in header)
   ========================================================================== */

/* Hairline groups inside the Account menu: details block, profile block,
   then Logout on its own. */
body .nav__subItems--sep {
    border-top: 1px solid #26262a !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
}

body .nav__subItem--logout {
    font-weight: 600 !important;
}

/* The Account menu carries more entries than the others, so give it room. */
body .nav__subMenus .nav__subMenu {
    min-width: 210px !important;
}

/* ==========================================================================
   14. DESKTOP CLIENT-AREA RAIL
   Fixed vertical icon nav on the left, shown only when logged in at >=992px.
   Monochrome reading of the reference layout: black rail, white active notch.
   ========================================================================== */

@media (min-width: 992px) {
    /* !important throughout: the theme has broad `nav`/`.nav` rules that paint
       white, and this rail must never inherit them.
       The rail itself never scrolls - only .tn-rail__menu does - so the brand
       stays put. No border-right: the active white notch has to run flush into
       the white page. */
    .tn-rail {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 1040 !important;
        display: flex !important;
        flex-direction: column !important;
        width: var(--tn-rail-w) !important;
        padding: 20px 0 22px !important;
        overflow: hidden !important;
        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .tn-rail__brand {
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0 6px 18px;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .tn-rail__brandText {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-align: center;
    }

    /* Only the item list scrolls, and its scrollbar is hidden. The list also
       takes the leftover height so items sit at the top of the rail. */
    .tn-rail__menu {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 4px;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tn-rail__menu::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .tn-rail__item {
        background: transparent !important;
        list-style: none !important;
    }

    .tn-rail__link {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 14px 4px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        transition: color 0.16s ease, background-color 0.16s ease;
    }

    .tn-rail__link i {
        font-size: 21px;
        line-height: 1;
        color: inherit !important;
    }

    .tn-rail__item:not(.is-active) .tn-rail__link:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }

    /* Active item: white panel notched into the rail. It reaches the rail's
       right edge exactly - the rail has no border there - so the notch flows
       straight into the white page with no dark seam. */
    .tn-rail__item.is-active .tn-rail__link {
        position: relative;
        margin-left: 10px;
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        border-radius: 16px 0 0 16px !important;
    }

    .tn-rail__item.is-active .tn-rail__link i {
        color: #000000 !important;
    }

    /* Order: an action, not a destination - a bordered pill inset from both
       edges so it reads differently from the nav items around it. */
    .tn-rail__item--order {
        margin: 6px 9px 10px;
    }

    .tn-rail__item--order .tn-rail__link {
        padding: 12px 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }

    /* Matches the specificity of the generic hover rule above and comes later,
       so it wins the cascade. */
    .tn-rail__item--order:not(.is-active) .tn-rail__link:hover {
        background: #ffffff !important;
        border-color: #ffffff !important;
        color: #000000 !important;
    }

    /* When the cart is the current page, fill it solid instead of using the
       notch - the pill is inset, so a notch would look detached. */
    .tn-rail__item--order.is-active .tn-rail__link {
        margin-left: 0;
        background: #ffffff !important;
        border-color: #ffffff !important;
        border-radius: 12px !important;
        color: #000000 !important;
    }

    /* Shift the whole page across so the fixed rail never overlaps content.
       Scoped to :has() so pages without the rail are untouched. */
    body:has(.tn-rail) .header,
    body:has(.tn-rail) #main-body,
    body:has(.tn-rail) .master-breadcrumb,
    body:has(.tn-rail) .tn-greet,
    body:has(.tn-rail) .footer {
        margin-left: var(--tn-rail-w) !important;
    }

    /* The full-bleed hero uses 100vw + negative margins, which would spill
       under the rail. The rail is suppressed on the homepage, but keep this
       as a guard for any other 100vw section inside the client area. */
    body:has(.tn-rail) .banner--home {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Below the rail breakpoint the original hamburger header is the only nav,
   so the rail and the greeting bar must be fully out of the way. Belt and
   braces alongside the markup's `d-none d-lg-flex`. */
@media (max-width: 991.98px) {
    .tn-rail,
    .tn-greet {
        display: none !important;
    }
}

/* ============================================================
   15. CLIENT-AREA GREETING BAR (replaces the top header on desktop)
   The reference layout has no top navigation bar - the rail is the only
   nav - so on desktop client-area pages the black header is hidden and
   this greeting bar takes its place, keeping Account + Logout reachable.
   ============================================================ */
@media (min-width: 992px) {
    body:has(.tn-rail) .header {
        display: none !important;
    }

    /* .header carried the page's top offset; the greeting bar replaces it. */
    body:has(.tn-rail) #main-body {
        padding-top: 0 !important;
    }
}

/* No border-bottom: the bar has to read as part of the white page. */
.tn-greet {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.tn-greet__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 28px;
}

.tn-greet__text {
    margin: 0;
    flex: 0 0 auto;
    color: var(--mono-ink) !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

/* Centred alert pill. Monochrome reading of the reference's blue notice. */
.tn-greet__notice {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid var(--mono-line);
    border-radius: 8px;
    background: var(--mono-surface-alt);
    color: var(--mono-ink) !important;
    font-size: 13.5px;
    text-decoration: none !important;
}

.tn-greet__notice:hover {
    border-color: var(--mono-line-strong);
    background: #f0f0f2;
}

.tn-greet__notice i {
    flex: 0 0 auto;
    font-size: 15px;
}

.tn-greet__notice span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keeps the icon cluster pinned right when there is no alert. */
.tn-greet__spacer {
    flex: 1 1 auto;
}

.tn-greet__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Bell / cart / avatar buttons. */
.tn-greet__icon {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--mono-ink) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.16s ease;
}

.tn-greet__icon:hover,
.tn-greet__icon:focus {
    background: var(--mono-surface-alt) !important;
    color: var(--mono-ink) !important;
    outline: none;
}

.tn-greet__icon i {
    font-size: 20px;
    line-height: 1;
    color: inherit !important;
}

.tn-greet__icon--avatar i {
    font-size: 27px;
}

/* Count bubble, top-right of the icon. */
.tn-greet__badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mono-ink) !important;
    color: #ffffff !important;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Account dropdown, opened on hover/focus - no JS needed. */
.tn-greet__account {
    position: relative;
}

.tn-greet__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border: 1px solid var(--mono-line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.tn-greet__account:hover .tn-greet__menu,
.tn-greet__account:focus-within .tn-greet__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tn-greet__menuHead {
    padding: 8px 16px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mono-line);
    color: var(--mono-muted) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tn-greet__menu a {
    display: block;
    padding: 9px 16px;
    color: var(--mono-ink) !important;
    font-size: 13.5px;
    text-decoration: none !important;
}

.tn-greet__menu a:hover {
    background: var(--mono-surface-alt);
}

.tn-greet__menuSep {
    margin-top: 4px;
    border-top: 1px solid var(--mono-line);
}

.tn-greet__menuSep a {
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .tn-greet__menu {
        transition: none;
    }
}

/* ============================================================
   16. WORLDWIDE LOCATIONS
   style.css hides every card past the sixth
   (`.maps--desktop .maps__card:nth-child(n+7) { display: none }`) because the
   original design had a "show more" button that no longer exists. Undo it so
   all 15 locations render.
   ============================================================ */
.maps--desktop .maps__card:nth-child(n + 7) {
    display: block !important;
}

/* ============================================================
   17. ORDER FORM (legacy_modern) - GLASS CARDS OVER PHOTO
   Same treatment as the login screen: a fixed background image behind the
   page with a dark scrim, and translucent frosted cards on top. All layers
   sit at negative z-index, so every ancestor that paints white has to be
   cleared - `.primary-content` in particular (custom.css L4579).
   Scoped with :has(#order-modern) so no other page is touched.
   ============================================================ */
body:has(#order-modern)::before {
    content: "";
    position: fixed;
    /* Bleed past the viewport: `filter: blur()` samples transparent pixels at
       the element's edges, which would otherwise show as faded borders. */
    inset: -30px;
    z-index: -2;
    background-image: url("../images/tn-datacenter-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Softens the photo's compression artefacts. */
    filter: blur(7px) saturate(105%);
    transform: scale(1.04);
    pointer-events: none;
}

body:has(#order-modern)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

html:has(#order-modern) {
    background: #000000 !important;
}

body:has(#order-modern),
body:has(#order-modern) #main-body,
body:has(#order-modern) #main-body > .container,
body:has(#order-modern) #main-body .row,
body:has(#order-modern) .primary-content,
body:has(#order-modern) #main-body .primary-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body:has(#order-modern) #main-body {
    position: relative !important;
    padding-top: 32px !important;
    padding-bottom: 48px !important;
}

body:has(#order-modern) #main-body > .container {
    padding-inline: 16px !important;
}

/* The order form's own wrappers must not paint white either, or they show as
   bands between the cards. */
body #order-modern,
body #order-modern .row,
body #order-modern [class^="col-"],
body #order-modern .title-bar,
body #order-modern .clear,
body:has(#order-modern) .clearfix {
    background: transparent !important;
    background-color: transparent !important;
}

/* Page heading sits on the photo, so it stays white. */
body #order-modern .title-bar h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Frosted product cards.
   `background-clip: padding-box` plus a non-white border kills the 1px light
   seam Chrome leaves where a backdrop-filtered box meets its own border.
   `isolation: isolate` + `translateZ(0)` pin the card to its own compositing
   layer so the blur doesn't flicker or band while scrolling. */
body #order-modern .product {
    background: rgba(255, 255, 255, 0.62) !important;
    background-color: rgba(255, 255, 255, 0.62) !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
    isolation: isolate;
    transform: translateZ(0);
    transition: background-color 0.18s ease;
}

body #order-modern .product:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    background-color: rgba(255, 255, 255, 0.78) !important;
}

/* Product descriptions are admin-entered HTML and often carry pasted white
   backgrounds from a word processor, which show up as white blocks and strips
   over the glass. Strip them all. */
body #order-modern .product *,
body #order-modern .product .description *,
body #order-modern .product .prodfeature,
body #order-modern .product hr {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ...except the Order button, which is re-filled below. */
body #order-modern .product .btn {
    background-clip: padding-box !important;
}

/* Force every scrap of card text black - product descriptions are admin HTML
   with inline colours, hence the wildcard. */
body #order-modern .product,
body #order-modern .product *,
body #order-modern .product .name,
body #order-modern .product .pricing,
body #order-modern .product .pricing span,
body #order-modern .product .description,
body #order-modern .product .description *,
body #order-modern .product .qty,
body #order-modern .product .prodfeature,
body #order-modern .product .prodfeature .feature {
    color: #000000 !important;
}

body #order-modern .product .name {
    font-weight: 700 !important;
}

body #order-modern .product .qty {
    color: #3f3f46 !important;
}

/* Order Now: solid black pill on the translucent card. */
body #order-modern .product .btn-success {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border: 1px solid #000000 !important;
    border-radius: 9px !important;
    color: #ffffff !important;
}

body #order-modern .product .btn-success:hover,
body #order-modern .product .btn-success:focus {
    background: #27272a !important;
    background-color: #27272a !important;
    border-color: #27272a !important;
    color: #ffffff !important;
}

body #order-modern .product .btn-success i,
body #order-modern .product .btn-success * {
    color: #ffffff !important;
}

/* Category switcher, also sitting on the photo. */
body #order-modern .choosecat .btn {
    background: rgba(255, 255, 255, 0.88) !important;
    background-color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 9px !important;
    color: #000000 !important;
}

body #order-modern .choosecat .btn:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Browsers without backdrop-filter get a more opaque card instead. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    body #order-modern .product {
        background: rgba(255, 255, 255, 0.85) !important;
        background-color: rgba(255, 255, 255, 0.85) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body #order-modern .product {
        transition: none;
    }
}

/* ============================================================
   18. DASHBOARD STAT TILES - TRANSPARENT
   custom.css paints these solid white with a border, a drop shadow and a
   coloured accent bar. Strip all of that so they read as part of the page,
   keeping only a hairline divider between them and a subtle hover wash.
   ============================================================ */
body .tiles,
body .tiles .row,
body .tiles [class^="col-"] {
    background: transparent !important;
    background-color: transparent !important;
}

body .tiles .tile {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.18s ease !important;
}

body .tiles .row > div:hover .tile,
body .tiles .tile:hover {
    background: rgba(0, 0, 0, 0.035) !important;
    background-color: rgba(0, 0, 0, 0.035) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Monochrome: the accent bars were blue/green/red/gold. */
body .tiles .tile .highlight,
body .tiles .tile .highlight.bg-color-blue,
body .tiles .tile .highlight.bg-color-green,
body .tiles .tile .highlight.bg-color-red,
body .tiles .tile .highlight.bg-color-gold {
    background: transparent !important;
    background-color: transparent !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Icons and figures in ink, labels muted - no coloured hover state. */
body .tiles .tile i,
body .tiles .tile:hover i,
body .tiles .row > div:hover .tile i {
    color: var(--mono-ink) !important;
    transform: none !important;
}

body .tiles .tile .stat {
    color: var(--mono-ink) !important;
}

body .tiles .tile .title {
    color: var(--mono-muted) !important;
}

/* ============================================================
   19. CLIENT AREA SERVICES - SPEC CARDS
   Replaces the DataTable list. Auto-fit grid: multi-column on desktop,
   single column on phones, with no breakpoint juggling.
   ============================================================ */
.tn-svc__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.tn-svc__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 340px;
    margin: 0;
}

.tn-svc__search i {
    position: absolute;
    left: 14px;
    color: var(--mono-muted);
    font-size: 13px;
    pointer-events: none;
}

.tn-svc__search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--mono-line-strong);
    border-radius: 10px;
    background: #ffffff;
    color: var(--mono-ink);
    font-size: 14px;
}

.tn-svc__search input:focus {
    border-color: var(--mono-ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.tn-svc__count {
    flex: 0 0 auto;
    color: var(--mono-muted);
    font-size: 13px;
    font-weight: 600;
}

.tn-svc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px;
}

.tn-svc__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 16px;
    border: 1px solid var(--mono-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--mono-ink) !important;
    text-decoration: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tn-svc__card:hover {
    border-color: var(--mono-ink);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
    color: var(--mono-ink) !important;
}

.tn-svc__card[hidden] {
    display: none;
}

.tn-svc__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tn-svc__titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tn-svc__name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.tn-svc__host {
    color: var(--mono-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-svc__status {
    flex: 0 0 auto;
}

/* Spec chips. */
.tn-svc__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tn-svc__spec {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--mono-line);
    border-radius: 8px;
    background: var(--mono-surface-alt);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.tn-svc__spec i {
    color: var(--mono-muted);
    font-size: 12px;
}

.tn-svc__meta {
    display: flex;
    gap: 22px;
    padding-top: 12px;
    border-top: 1px solid var(--mono-line);
}

.tn-svc__metaItem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tn-svc__metaLabel {
    color: var(--mono-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tn-svc__metaValue {
    font-size: 14px;
    font-weight: 600;
}

.tn-svc__metaValue small {
    color: var(--mono-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.tn-svc__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
}

.tn-svc__cta i {
    font-size: 10px;
    transition: transform 0.16s ease;
}

.tn-svc__card:hover .tn-svc__cta i {
    transform: translateX(3px);
}

.tn-svc__empty {
    margin: 0;
    padding: 34px 0;
    color: var(--mono-muted);
    text-align: center;
}

@media (max-width: 575px) {
    .tn-svc__grid {
        grid-template-columns: 1fr;
    }

    .tn-svc__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tn-svc__search {
        max-width: none;
    }

    .tn-svc__count {
        text-align: right;
    }

    .tn-svc__meta {
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-svc__card,
    .tn-svc__cta i {
        transition: none;
    }

    .tn-svc__card:hover .tn-svc__cta i {
        transform: none;
    }
}

/* ============================================================
   20. SUPPORT TICKET VIEW
   theme.min.css gives the posted-by strip a grey slab with square corners
   (its border-radius uses the undeclared --rounding-md, so it resolves to
   nothing), and the ticket cards run edge to edge with no separation.
   Rebuild the thread as distinct messages: client replies plain, staff
   replies inset with a black rail on the left.
   ============================================================ */

/* Card shell + header actions. */
body .card.view-ticket {
    border: 1px solid var(--mono-line) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

body .view-ticket .card-title {
    color: var(--mono-ink) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body .view-ticket .card-body > p {
    margin-bottom: 0 !important;
    color: var(--mono-muted) !important;
    font-size: 14.5px !important;
}

body .view-ticket .card-body > p strong {
    color: var(--mono-ink) !important;
    font-size: 16px !important;
}

/* Ticket action buttons: Reply and Close are rendered twice - once in the card
   header (`#ticketReply` / `#closeTicket`) and once in the sidebar as
   `.btn.btn-success.btn-sm.btn-block` / `.btn.btn-danger.btn-sm.btn-block`.
   The sidebar pair looked mismatched because custom.css pads only
   `.card-sidebar .card-footer .btn-success` (12px) while Close was left on
   Bootstrap's `.btn-sm` padding, so force one shared geometry on both. */
body .view-ticket .ticket-actions .btn,
body #ticketReply,
body #closeTicket,
body #closedTicket {
    border-radius: 9px !important;
    font-weight: 600 !important;
}

body:has(.view-ticket) .card-sidebar .btn-block,
body:has(.view-ticket) .sidebar .btn-block,
body:has(.view-ticket) .card-sidebar .card-footer .btn,
body:has(.view-ticket) .sidebar .card-footer .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 0 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body:has(.view-ticket) .card-sidebar .btn-block:last-child,
body:has(.view-ticket) .sidebar .btn-block:last-child,
body:has(.view-ticket) .card-sidebar .card-footer .btn:last-child,
body:has(.view-ticket) .sidebar .card-footer .btn:last-child {
    margin-bottom: 0 !important;
}

body:has(.view-ticket) .card-sidebar .btn-block i,
body:has(.view-ticket) .sidebar .btn-block i {
    margin-right: 8px !important;
}

/* Reply keeps the black primary fill. custom.css paints
   `.card-sidebar .card-footer .btn-success` blue, so restate it here. */
body:has(.view-ticket) .card-sidebar .btn-success,
body:has(.view-ticket) .sidebar .btn-success {
    background: var(--mono-ink) !important;
    background-color: var(--mono-ink) !important;
    background-image: none !important;
    border: 1px solid var(--mono-ink) !important;
    color: #ffffff !important;
}

body:has(.view-ticket) .card-sidebar .btn-success:hover,
body:has(.view-ticket) .card-sidebar .btn-success:focus,
body:has(.view-ticket) .sidebar .btn-success:hover,
body:has(.view-ticket) .sidebar .btn-success:focus {
    background: #27272a !important;
    background-color: #27272a !important;
    border-color: #27272a !important;
    color: #ffffff !important;
}

/* Close is the one destructive action in the client area, so it keeps a solid
   red fill instead of the monochrome outline. */
body:has(.view-ticket) .btn-danger,
body #closeTicket {
    background: var(--tn-red) !important;
    background-color: var(--tn-red) !important;
    background-image: none !important;
    border: 1px solid var(--tn-red) !important;
    color: #ffffff !important;
}

body:has(.view-ticket) .btn-danger:hover,
body:has(.view-ticket) .btn-danger:focus,
body #closeTicket:hover,
body #closeTicket:focus {
    background: var(--tn-red-dark) !important;
    background-color: var(--tn-red-dark) !important;
    border-color: var(--tn-red-dark) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Already-closed tickets show a disabled button; keep that one neutral. */
body #closedTicket,
body #closedTicket[disabled] {
    background: var(--mono-surface-alt) !important;
    background-color: var(--mono-surface-alt) !important;
    background-image: none !important;
    border: 1px solid var(--mono-line-strong) !important;
    color: var(--mono-muted) !important;
    opacity: 1 !important;
}

body #ticketReply {
    background: var(--mono-ink) !important;
    background-color: var(--mono-ink) !important;
    border: 1px solid var(--mono-ink) !important;
    color: #ffffff !important;
}

body #ticketReply:hover,
body #ticketReply:focus {
    background: #27272a !important;
    background-color: #27272a !important;
    border-color: #27272a !important;
    color: #ffffff !important;
}

/* Each reply becomes its own bordered message block. */
body .view-ticket .card-body {
    padding: 16px 18px !important;
}

body .view-ticket .ticket-reply {
    border: 1px solid var(--mono-line) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Staff replies: tinted, with a black rail marking them apart. */
body .view-ticket .ticket-reply.staff {
    border-left: 3px solid var(--mono-ink) !important;
    background: var(--mono-surface-alt) !important;
}

/* Author line: no grey slab, just a hairline rule under the name. */
body .card.view-ticket .posted-by,
body .view-ticket .posted-by {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 14px 18px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mono-line) !important;
    border-radius: 0 !important;
    color: var(--mono-muted) !important;
    font-size: 13.5px !important;
}

body .view-ticket .posted-by .posted-by-name {
    color: var(--mono-ink) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
}

body .view-ticket .posted-by .posted-on {
    color: var(--mono-muted) !important;
}

/* Role badge: monochrome pill. `float-md-right` is in the markup, so push it
   right with margin instead of fighting the float. */
body .view-ticket .requestor-badge,
body .view-ticket .label.requestor-badge {
    float: none !important;
    margin-left: auto !important;
    padding: 0.3em 0.75em !important;
    border: 1px solid var(--mono-line-strong) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--mono-ink) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

/* Staff/operator/owner badges invert so they read as "us". */
body .view-ticket .requestor-type-operator,
body .view-ticket .requestor-type-owner {
    background: var(--mono-ink) !important;
    background-color: var(--mono-ink) !important;
    border-color: var(--mono-ink) !important;
    color: #ffffff !important;
}

/* Message body. */
body .view-ticket .message {
    padding: 18px !important;
    color: var(--mono-ink) !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}

body .view-ticket .message p {
    margin-bottom: 0.9rem !important;
}

body .view-ticket .message p:last-child {
    margin-bottom: 0 !important;
}

body .view-ticket .message a {
    color: var(--mono-ink) !important;
    text-decoration: underline !important;
}

body .view-ticket .message hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--mono-line) !important;
}

body .view-ticket .message pre,
body .view-ticket .message code {
    border-radius: 8px !important;
    background: var(--mono-surface-alt) !important;
    color: var(--mono-ink) !important;
}

/* Rating stars: grey outline, yellow when earned. theme.min.css paints the
   `:before` glyph (#999 / #f2de88), so both states must be re-declared. */
body .ticket-reply .rating-done,
body .ticket-reply .rating {
    padding: 8px 0 0 !important;
    font-size: 18px !important;
}

body .ticket-reply .rating span.star:before,
body .ticket-reply .rating-done span.star:before {
    color: var(--mono-line-strong) !important;
}

body .ticket-reply .rating span.star:hover:before,
body .ticket-reply .rating span.star:hover ~ span.star:before,
body .ticket-reply .rating-done span.star.active:before {
    color: var(--tn-star) !important;
}

body .ticket-reply .rating-done .rated {
    margin-left: 6px !important;
    color: var(--mono-muted) !important;
    font-size: 11.5px !important;
}

/* Attachments. */
body .view-ticket .attachments {
    padding: 14px 16px !important;
    border-top: 1px solid var(--mono-line) !important;
    font-size: 12.5px !important;
}

body .view-ticket .attachment-list li span {
    border: 1px solid var(--mono-line) !important;
    border-radius: 8px !important;
}

body .view-ticket .attachment-list li figure {
    background-color: var(--mono-surface-alt) !important;
    color: var(--mono-muted) !important;
}

/* Reply form below the thread. */
body #ticketReplyContainer {
    border: 1px solid var(--mono-line) !important;
    border-radius: 14px !important;
}

@media (max-width: 575px) {
    body .view-ticket .card-body {
        padding: 12px !important;
    }

    body .view-ticket .posted-by {
        padding: 10px 12px !important;
    }

    body .view-ticket .requestor-badge,
    body .view-ticket .label.requestor-badge {
        margin-left: 0 !important;
    }

    body .view-ticket .message {
        padding: 12px !important;
    }
}

/* END-TN-MONO */