/* ApexNodes Custom Styling */
:root {
    --primary: #10b981;
    --primary-hover: #059669;
    --primary-light: #ecfdf5;
    --bg-body: #f9fafb;
    --bg-card: #ffffff;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --sidebar-width: 260px;
    --header-height: 80px;
    --radius: 16px;
    --shadow: none;
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.025);
}

body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

/* App Container Layout */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Main Sidebar */
.main-sidebar {
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1035;
    transition: transform 0.3s ease;
}

.sidebar-logo {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
    text-decoration: none;
}
.sidebar-logo:hover {
    text-decoration: none;
    color: var(--text-main);
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sidebar-nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.nav-item i {
    width: 20px;
    font-size: 1.1rem;
    text-align: center;
}

.nav-item:hover {
    background: var(--primary-light);
    color: var(--primary);
    text-decoration: none;
}

.nav-item.active {
    background: var(--primary);
    color: white;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}
.sidebar-footer .nav-item:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* Dropdown Menu in Sidebar */
.nav-item-dropdown {
    display: none;
    padding-left: 36px;
    margin-bottom: 8px;
}
.nav-item-dropdown.show {
    display: block;
}
.nav-item-dropdown a {
    display: block;
    padding: 8px 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 6px;
}
.nav-item-dropdown a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Top Header */
.top-header {
    height: var(--header-height);
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
    margin-right: 16px;
}

.search-box {
    position: relative;
    max-width: 300px;
    flex: 1;
}

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    background: var(--bg-body);
}

.search-box input:focus {
    border-color: var(--primary);
    background: white;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
}
.user-profile:hover {
    text-decoration: none;
    color: var(--primary);
}

.top-header .nav-item {
    transition: all 0.2s;
}

.top-header .nav-item:hover i {
    color: var(--primary) !important;
}

.avatar {
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Page Inner Content */
.content-inner {
    padding: 32px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

/* WHMCS Overrides */
#header { display: none !important; }
.navbar-main { display: none !important; }
.master-breadcrumb { display: none !important; }
nav[aria-label="breadcrumb"] { display: none !important; }
.breadcrumb { display: none !important; }

.card {
    background: var(--bg-card) !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
    position: relative;
}

/* Sidebar cards: override Bootstrap mb-3 for consistent spacing */
.sidebar .card.mb-3,
.card-sidebar.mb-3 {
    margin-bottom: 24px !important;
}

/* Ensure sidebar cards have complete border (not clipped at bottom) */
.sidebar .card,
.card-sidebar {
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
}

/* But allow dropdowns to overflow */
.sidebar .card .collapsable-card-body,
.card-sidebar .collapsable-card-body {
    overflow: visible !important;
}

/* Fix WHMCS Footers causing spacing/line issues */
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 16px 24px !important;
}

.card-footer:empty {
    display: none !important;
    padding: 0 !important;
    border: none !important;
}

.card > .list-group:last-child,
.card > .list-group:last-of-type {
    margin-bottom: 0 !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    overflow: visible !important;
}

/* Unified header icon styling — consistent dark color + size
   for all card/panel titles (both home panels and WHMCS sidebar cards) */
.card-header > i:not(.fa-chevron-up):not(.fa-chevron-down):not(.fa-chevron-left):not(.fa-chevron-right),
.card-title > i:first-child,
.panel-title > i:first-child {
    color: var(--text-main) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Icon sitting DIRECTLY inside .card-header (the title is a separate
   sibling element) — safe 10px margin, no leading whitespace issue. */
.card-header > i:not(.fa-chevron-up):not(.fa-chevron-down):not(.fa-chevron-left):not(.fa-chevron-right) {
    margin-right: 10px !important;
}

/* Icon INSIDE .card-title / .panel-title — WHMCS always renders the
   title as "<i></i>&nbsp;   Title Text" (nbsp + template indent), so
   the text node ALREADY starts with ~0.27em of leading space. Any
   extra margin-right on the icon stacks on top of that and creates
   the "two-space" gap before the title. Keep the icon margin at 0
   and let the HTML's own &nbsp; provide the gap. */
.card-title > i:first-child,
.panel-title > i:first-child {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Critical: kill `fa-fw` (Font Awesome Fixed Width = 1.25em) on icons
   directly inside titles. Without this, the icon glyph is drawn at
   the LEFT of a 1.25em-wide box, leaving ~5px of empty space inside
   the <i> on the right, which stacks on top of margin-right (6px) +
   nbsp (~4px) and makes the visible gap balloon to ~15px for some
   titles (Recent Support Tickets, Actions, Overview, etc.) while
   non-fa-fw titles (Shortcuts) sit at a clean ~10px. */
.card-title > i.fa-fw:first-child,
.panel-title > i.fa-fw:first-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding: 0 !important;
}

/* Modern Flex Title Layout — apply to both .card-title and WHMCS .panel-title */
.card-title,
.panel-title {
    margin: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    /* Keep title on a single line (prevents "Ваши последние / тикеты"
       wrapping under the icon). We do NOT set overflow:hidden here —
       that clipped the chevron on narrow sidebars, and text-overflow:
       ellipsis is useless anyway because the title text is an
       anonymous flex item (no wrapper to hang ellipsis on). */
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* Chevron/minimise icon: never shrink, always park at the far right
   and reserve a tiny left padding so it doesn't touch the title text */
.card-title > i.card-minimise,
.panel-title > i.card-minimise,
.card-title > i.panel-minimise,
.panel-title > i.panel-minimise,
.card-title > i.float-right,
.panel-title > i.float-right {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    float: none !important;
    padding-left: 8px !important;
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}

/* Ensure minimize chevron sticks to the right edge in any header style */
.card-title .card-minimise,
.panel-title .card-minimise,
.card-header .card-minimise,
.card-title .panel-minimise,
.panel-title .panel-minimise,
.panel-heading .panel-minimise {
    margin-left: auto !important;
    float: none !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    font-size: 0.85rem !important;
}

/* =========================================================
   Collapsible card/panel state — header border + chevron flip
   WHMCS toggles `.collapsed` / `aria-expanded="false"` on the
   trigger element but does NOT swap the chevron icon class, so
   we rotate it via CSS and drop the header separator while
   the body is hidden (otherwise a lone line floats at the
   bottom of the collapsed card).
   ========================================================= */

/* Stable chevron box + Twenty-One style rotate (client sidebar).
   See WHMCS templates-twenty-one css/theme.css:
   .sidebar .card-sidebar .card-minimise { transition: transform 200ms; }
   .sidebar .card-sidebar .card-minimise.minimised { transform: rotate(180deg); } */
.card-minimise,
.panel-minimise,
.card-minimise i,
.panel-minimise i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25em !important;
    height: 1.25em !important;
    line-height: 1 !important;
    text-align: center !important;
    transform-origin: center center !important;
}

/* Client area / secondary sidebar — match Twenty One: one icon, flip via rotate */
.sidebar .card-sidebar .card-minimise,
.sidebar .card-sidebar .panel-minimise {
    transition: transform 0.2s ease !important;
}
.sidebar .card-sidebar .card-minimise.minimised,
.sidebar .card-sidebar .panel-minimise.minimised,
.sidebar .card-header.collapsed .card-minimise,
.sidebar .card-header[aria-expanded="false"] .card-minimise,
.sidebar .panel-heading.collapsed .card-minimise,
.sidebar .panel-heading[aria-expanded="false"] .card-minimise {
    transform: rotate(180deg) !important;
}

/* Order form cart sidebar: WHMCS / our script swaps fa-chevron-up ↔ fa-chevron-down;
   do not stack rotation on top (would look wrong). */
html body #order-standard_cart .cart-sidebar .card-minimise,
html body #order-standard_cart .cart-sidebar .card-minimise.minimised,
html body #order-standard_cart .cart-sidebar .panel-minimise,
html body #order-standard_cart .cart-sidebar .panel-minimise.minimised {
    transform: none !important;
}

/* Drop the header's bottom border while the body is collapsed */
.card-header.collapsed,
.card-header[aria-expanded="false"],
.panel-heading.collapsed,
.panel-heading[aria-expanded="false"] {
    border-bottom: none !important;
}

/* When the trigger lives INSIDE the header (on .card-title /
   .panel-title / .card-minimise itself), kill the border on
   the parent header too. */
.card-header:has(.card-title.collapsed),
.card-header:has(.card-title[aria-expanded="false"]),
.card-header:has(.panel-title.collapsed),
.card-header:has(.panel-title[aria-expanded="false"]),
.card-header:has(.card-minimise.collapsed),
.card-header:has(.card-minimise[aria-expanded="false"]),
.card-header:has(.panel-minimise.collapsed),
.card-header:has(.panel-minimise[aria-expanded="false"]),
.panel-heading:has(.panel-title.collapsed),
.panel-heading:has(.panel-title[aria-expanded="false"]),
.panel-heading:has(.panel-minimise.collapsed),
.panel-heading:has(.panel-minimise[aria-expanded="false"]) {
    border-bottom: none !important;
}

/* Align buttons correctly */
.card-header .btn, 
.card-header .card-options {
    margin-left: 16px !important;
    flex-shrink: 0 !important;
}

/* ApexNodes Button Theme */
.btn-primary, .btn-outline-primary, .btn-info {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-primary:hover, .btn-outline-primary:hover, .btn-info:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

.btn i { color: inherit !important; }

.card-body {
    padding: 24px !important;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.6;
}

.card-body > p:last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   Form layout inside .card-body (Profile, Security, Contacts…)
   WHMCS renders user-area forms directly inside .card-body
   with a top <h3 class="card-title">. Normalize the grid so
   title / badge / labels / inputs / buttons align consistently.
   Scoped to direct children so it doesn't touch sidebar cards
   (their title lives in .card-header) or the cart promo form.
   ========================================================= */

/* Section title sitting at the top of a card-body */
.card-body > .card-title,
.card-body > h1.card-title,
.card-body > h2.card-title,
.card-body > h3.card-title,
.card-body > h4.card-title,
.card-body > h5.card-title,
.card-body > h6.card-title {
    display: block !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* Status badge/label right after a section title (e.g. "Email Verified")
   — lift below the separator with proper breathing room */
.card-body > .card-title + .label,
.card-body > .card-title + .badge,
.card-body > h1.card-title + .label,
.card-body > h2.card-title + .label,
.card-body > h3.card-title + .label,
.card-body > h4.card-title + .label {
    display: inline-block !important;
    margin: 0 0 18px 0 !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
}

/* Form-group spacing inside card-body forms */
.card-body form .form-group {
    margin-bottom: 18px !important;
}

/* Label typography (exclude custom checkbox/radio labels which have their own) */
.card-body form .form-group > label:not(.custom-control-label),
.card-body form > label:not(.custom-control-label) {
    display: inline-block !important;
    margin-bottom: 6px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
}

/* Bootstrap .form-row (used for First Name / Last Name columns) */
.card-body form .form-row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}
.card-body form .form-row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Last form element before action buttons gets extra breathing space */
.card-body form > .form-group:last-of-type,
.card-body form > .form-row:last-of-type {
    margin-bottom: 22px !important;
}

/* Action button row — ensure a consistent gap between Save / Cancel
   regardless of whether they're rendered as <button>, <a>, or <input> */
.card-body form > .btn + .btn,
.card-body form > .btn + a,
.card-body form > .btn + button,
.card-body form > a.btn + .btn,
.card-body form > a.btn + a,
.card-body form > a.btn + button,
.card-body form > button + .btn,
.card-body form > button + a,
.card-body form > button + button,
.card-body form > input[type="submit"] + .btn,
.card-body form > input[type="submit"] + a {
    margin-left: 8px !important;
}

/* Neutral (Cancel) button styling inside user-area forms */
.card-body form .btn-default,
.card-body form .btn-light,
.card-body form .btn-secondary {
    background: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.card-body form .btn-default:hover,
.card-body form .btn-light:hover,
.card-body form .btn-secondary:hover,
.card-body form .btn-default:focus,
.card-body form .btn-light:focus,
.card-body form .btn-secondary:focus {
    background: #f9fafb !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Help text directly under an input — subtle & compact */
.card-body form .form-group .help-block,
.card-body form .form-group small.form-text,
.card-body form .form-group small.text-muted {
    display: block !important;
    margin-top: 6px !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    line-height: 1.45 !important;
}

/* Ensure WHMCS list elements inside cards look exactly like card-body content */
.card .list-group-item {
    padding: 20px 24px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.6;
}

/* The rule above uses background: ... !important on every state, so it overrides
   Bootstrap's .list-group-item-action:hover background. Re-enable a subtle hover
   for main content cards only (not .card-sidebar — those have their own block below). */
.card:not(.card-sidebar) .list-group .list-group-item.list-group-item-action {
    transition: background-color 0.15s ease, color 0.15s ease;
}
.card:not(.card-sidebar) .list-group .list-group-item.list-group-item-action:hover:not(.active),
.card:not(.card-sidebar) .list-group .list-group-item.list-group-item-action:focus:not(.active) {
    /* Match Bootstrap .list-group-item-action default hover (#f8f9fa), not gray-100 (#f3f4f6) */
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: var(--text-main) !important;
}

/* Reduce padding on mobile for list items */
@media (max-width: 767px) {
    .card .list-group-item {
        padding: 14px 16px !important;
    }
}

/* Home panel list items: ensure text doesn't overflow on mobile */
.client-home-cards .list-group-item .d-flex > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.client-home-cards .list-group-item .font-weight-medium {
    display: block;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}
.list-group-item .label {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.card .list-group-item:last-child,
.card .list-group-item:last-of-type {
    border-bottom: none !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Neutralize WHMCS card-accent-* colored border strips */
[class*="card-accent-"] {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
}

/* Prevent list-group-flush from doubling the card's own border */
.card > .list-group-flush {
    border-top: none !important;
    border-bottom: none !important;
}
.card > .list-group-flush .list-group-item:first-child {
    border-top: none !important;
}

/* Title-only .card-body immediately followed by a list (KB “Popular”, etc.):
   default .card-body padding (24px) + form-style .card-title bottom margin/padding
   stack into a large gap before the first row. Tighten only this layout. */
.card > .card-body:has(+ .list-group),
.card > .card-body:has(+ .list-group-flush) {
    padding-bottom: 0 !important;
}
.card > .card-body:has(+ .list-group) > .card-title:last-child,
.card > .card-body:has(+ .list-group-flush) > .card-title:last-child,
.card > .card-body:has(+ .list-group) > h1.card-title:last-child,
.card > .card-body:has(+ .list-group-flush) > h1.card-title:last-child,
.card > .card-body:has(+ .list-group) > h2.card-title:last-child,
.card > .card-body:has(+ .list-group-flush) > h2.card-title:last-child,
.card > .card-body:has(+ .list-group) > h3.card-title:last-child,
.card > .card-body:has(+ .list-group-flush) > h3.card-title:last-child,
.card > .card-body:has(+ .list-group) > h4.card-title:last-child,
.card > .card-body:has(+ .list-group-flush) > h4.card-title:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}

/* WHMCS Standard Sidebars */
.sidebar .card {
    box-shadow: none !important;
    border-radius: var(--radius) !important;
}
.sidebar .card-header .card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
}

/* Sidebar list group: the parent card already has overflow:hidden +
   border-radius, so list items never need their own corner radius.
   Keep them as plain rectangles — otherwise the hover background
   picks up a rounded bottom while the top stays square, which
   looks inconsistent (and is obvious when a .card-footer sits
   below the list). */
.sidebar .card .list-group,
.card-sidebar .list-group {
    border-radius: 0 !important;
}
.sidebar .card .list-group .list-group-item,
.card-sidebar .list-group .list-group-item,
.sidebar .card .list-group .list-group-item:first-child,
.card-sidebar .list-group .list-group-item:first-child,
.sidebar .card .list-group .list-group-item:last-child,
.card-sidebar .list-group .list-group-item:last-child {
    border-radius: 0 !important;
}
.sidebar .card .list-group .list-group-item:last-child,
.card-sidebar .list-group .list-group-item:last-child {
    border-bottom: none !important;
}

/* =====================================================
   UNIFIED SIDEBAR LIST-ITEM STYLE
   Applies to every .card-sidebar / .sidebar .card across the theme:
   - Generous padding (14px 20px) — same as Actions sidebar
   - Muted default text — same as View filter sidebar
   - Hover: subtle grey bg + text-main
   - Active: mint bg + primary green text
   ===================================================== */
.sidebar .card .list-group-item,
.sidebar .card .list-group-item-action,
.card-sidebar .list-group-item,
.card-sidebar .list-group-item-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    min-height: 56px !important;
    font-size: 0.925rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-top: 1px solid var(--border-color) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .card .list-group > .list-group-item:first-child,
.sidebar .card .list-group > .list-group-item-action:first-child,
.card-sidebar .list-group > .list-group-item:first-child,
.card-sidebar .list-group > .list-group-item-action:first-child {
    border-top: none !important;
}

.sidebar .card .list-group-item:hover:not(.active),
.sidebar .card .list-group-item-action:hover:not(.active),
.card-sidebar .list-group-item:hover:not(.active),
.card-sidebar .list-group-item-action:hover:not(.active) {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    color: var(--text-main) !important;
}

.sidebar .card .list-group-item.active,
.sidebar .card .list-group-item.active:hover,
.sidebar .card .list-group-item.active:focus,
.sidebar .card .list-group-item-action.active,
.card-sidebar .list-group-item.active,
.card-sidebar .list-group-item.active:hover,
.card-sidebar .list-group-item.active:focus,
.card-sidebar .list-group-item-action.active,
.list-group-item.active {
    background: var(--primary-light) !important;
    background-color: var(--primary-light) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Sidebar item icons inherit text color so they follow hover/active states */
.sidebar .card .list-group-item > i,
.sidebar .card .list-group-item-action > i,
.card-sidebar .list-group-item > i,
.card-sidebar .list-group-item-action > i {
    width: 18px !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    color: inherit !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important;
}

/* Responsive */
@media (max-width: 991px) {
    .main-sidebar {
        transform: translateX(-100%);
    }
    .main-sidebar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
    .mobile-toggle {
        display: block;
    }
    .search-box {
        display: none;
    }
    .content-inner {
        padding: 20px;
    }
}

/* Authentication Pages (Login, Register) Styling */
.auth-main-content {
    margin-left: 0 !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
}

.auth-content-inner {
    max-width: 540px !important;
    padding: 20px;
    width: 100%;
}

.auth-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-card-body {
    padding: 3rem 2.5rem;
}

.auth-card-footer {
    padding: 1.5rem 2.5rem;
    background: #f9fafb;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-main);
    text-decoration: none;
}

.auth-logo i {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.form-control {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    border-color: var(--border-color) !important;
}

.input-group-text {
    border-radius: 12px 0 0 12px !important;
    border-color: var(--border-color) !important;
    background: #f9fafb !important;
    color: var(--text-muted) !important;
}

.input-group .form-control {
    border-radius: 0 12px 12px 0 !important;
}

/* Custom Checkbox */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Alerts Restyling */
.alert {
    border-radius: var(--radius) !important;
    padding: 16px 20px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
}


.alert .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.alert i.fa-fw {
    margin-right: 0 !important; /* Managed by gap */
    font-size: 1.15rem;
}

.alert .alert-link {
    margin-left: auto !important;
}

.alert-info {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #e0f2fe !important;
}

.alert-info a {
    color: #0284c7 !important;
    font-weight: 600 !important;
}

.alert-info i {
    color: #0ea5e9 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border-color: #fef3c7 !important;
}

.alert-warning a {
    color: #b45309 !important;
    font-weight: 600 !important;
}

.alert-warning i {
    color: #f59e0b !important;
}

.alert-success {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #d1fae5 !important;
}

.alert-success a {
    color: #047857 !important;
    font-weight: 600 !important;
}

.alert-success i {
    color: #10b981 !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fee2e2 !important;
}

.alert-danger a {
    color: #b91c1c !important;
    font-weight: 600 !important;
}

.alert-danger i {
    color: #ef4444 !important;
}

/* Table Restyling */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    background: white !important;
}

.table th, .table td {
    padding: 16px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
}

.table tr:last-child td {
    border-bottom: none !important;
}

.table thead th {
    background-color: #f9fafb !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #f9fafb !important;
}

/* Fix for table wrapped in responsive containers */
.table-responsive {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 24px;
}
.table-responsive .table {
    border: none !important;
    margin-bottom: 0 !important;
}

/* Tabs Restyling */
.nav-tabs {
    border-bottom: 2px solid var(--border-color) !important;
    gap: 8px;
    margin-bottom: 24px !important;
}

.nav-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 0 !important;
    position: relative;
    transition: color 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link:active {
    color: var(--text-main) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    color: var(--primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary);
}

/* Secondary Tabs / Pills style often used in sub-menus */
.nav-pills {
    background-color: #f3f4f6;
    border-radius: 12px;
    padding: 4px;
    display: inline-flex;
}

.nav-pills .nav-link {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    transition: all 0.2s ease;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #ffffff !important;
    color: var(--primary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.nav-pills .nav-link:hover:not(.active) {
    color: var(--text-main) !important;
}

/* Fix for icons in tabs */
.nav-link i {
    margin-right: 8px;
}

/* Pagination Fix */
.pagination {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center;
}

.pagination li {
    display: block !important;
}

.pagination li a, .pagination li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--border-color) !important;
    background: white !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: 0.9rem !important;
}

.pagination li.active a, .pagination li.active span {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.pagination li.disabled a, .pagination li.disabled span {
    opacity: 0.5 !important;
    background: #f9fafb !important;
    cursor: not-allowed !important;
}

/* DataTables length and general small select fix */
.dataTables_length select, 
.form-control-sm, 
select.form-control-sm {
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
    padding-right: 32px !important; /* Spacing for icons in small boxes */
    min-width: 70px !important; /* Ensure it fits 2 digits and an icon */
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background-color: white !important; /* Changed from background to background-color */
    font-size: 0.85rem !important;
    display: inline-block !important;
    width: auto !important;
}

/* Global Form Control & Select Fix for vertical alignment
   — exclude <textarea> so users can resize it freely (browser sets
   an inline height while dragging; an !important height here would
   overwrite that and block the resize). */
.form-control:not(textarea),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select:not(.form-control-sm) {
    height: 48px !important;
    padding: 10px 16px !important;
    line-height: normal !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
    background-color: #fff !important;
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    display: inline-block;
    vertical-align: middle;
}

/* Textarea inherits the visual style but keeps its own sizing so the
   native resize handle works. Width stays fluid (form-control makes
   it 100%), height is driven by the user. */
textarea.form-control,
textarea {
    padding: 10px 16px;
    line-height: 1.5;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--text-main);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 100px;
    resize: vertical;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
    outline: none !important;
}

/* Custom Select Arrow Fix - avoids duplicates and ensures visibility */
select, 
.dataTables_length select, 
.form-control select {
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    background-color: #fff !important;
}

/* Fix for fields with prepended icons and international phone input overlap */
.prepend-icon {
    position: relative !important;
}

.prepend-icon .form-control,
.prepend-icon input[type="text"],
.prepend-icon input[type="password"],
.prepend-icon input[type="email"],
.prepend-icon input[type="number"],
.prepend-icon input[type="tel"],
.prepend-icon select.form-control {
    padding-left: 45px !important;
}

.prepend-icon .field-icon {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 48px !important; /* Matches global input height */
    width: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-muted) !important;
    pointer-events: none;
    z-index: 4;
}

.prepend-icon .field-icon i {
    color: var(--text-muted) !important;
    font-size: 1rem;
}

/* Append-icon variant: right-side button inside the field (e.g. reveal-password) */
.prepend-icon.append-icon .form-control,
.prepend-icon.append-icon input[type="text"],
.prepend-icon.append-icon input[type="password"],
.prepend-icon.append-icon input[type="email"] {
    padding-right: 48px !important;
}

.prepend-icon .btn-reveal-pw {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 48px !important;
    width: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    z-index: 4;
    border-radius: 0 12px 12px 0 !important;
}

.prepend-icon .btn-reveal-pw:hover,
.prepend-icon .btn-reveal-pw:focus {
    color: var(--primary) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.prepend-icon .btn-reveal-pw i {
    font-size: 1rem;
    color: inherit !important;
}

.iti__tel-input, 
.iti input[type="tel"], 
.form-control.iti__tel-input,
.intl-tel-input input[type="tel"],
.intl-tel-input .form-control {
    padding-left: 90px !important;
}

.intl-tel-input .flag-container,
.iti__flag-container {
    height: 100% !important;
}

.intl-tel-input .selected-flag,
.iti__selected-flag {
    border-radius: 10px 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Hide standard phone icon when using flag dropdown to prevent overlap */
label[for="inputPhone"], 
.prepend-icon:has(.iti) .field-icon,
.prepend-icon:has(.intl-tel-input) .field-icon {
    display: none !important;
}

/* =====================================================
   DataTables — Unified Card Layout
   Actual DOM: .table-container > .dataTables_wrapper >
     .listtable (.dataTables_filter + .dataTables_info + table)
     .dataTables_paginate  (sibling)
     .dataTables_length    (sibling)
   ===================================================== */

/* Outer card */
.table-container {
    background: white;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    margin-bottom: 24px;
}

/* Wrapper: flex-column so footer siblings sit below .listtable */
.table-container .dataTables_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    background: transparent;
    border: none !important;
}

/* .listtable takes full width (row 1 of the card) */
.table-container .listtable {
    flex: 0 0 100% !important;
    order: 1;
    /* CSS Grid: info left, filter right in the header bar */
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
}

/* Card header — info (left) */
.table-container .dataTables_info {
    grid-column: 1;
    grid-row: 1;
    padding: 12px 20px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 !important;
}

/* Card header — filter/search (right) */
.table-container .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
    padding: 8px 16px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    text-align: right;
    margin: 0 !important;
}

/* Table — full width, no own card border */
.table-container table.dataTable {
    grid-column: 1 / -1;
    grid-row: 2;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    background: white;
}
.table-container table.dataTable.no-footer {
    border-bottom: none !important;
}

/* Card footer — length (left) + paginate (right) in the same row */
.table-container .dataTables_length {
    order: 2;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    background: #f9fafb !important;
    border-top: 1px solid var(--border-color) !important;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.table-container .dataTables_paginate {
    order: 3;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 10px 20px !important;
    background: #f9fafb !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Search Input */
.dataTables_filter {
    text-align: right;
    margin-bottom: 0 !important;
}
.dataTables_filter label {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
/* Hide broken WHMCS default pseudo-icons */
.dataTables_filter label::before,
.dataTables_filter label::after,
.dataTables_wrapper .dataTables_filter::before,
.dataTables_wrapper .dataTables_filter::after {
    display: none !important;
}
/* High-specificity rule to beat form-control/form-control-sm overrides */
.dataTables_filter input[type="search"],
.dataTables_filter input.form-control,
.dataTables_filter input.form-control-sm {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    /* SVG search icon as background — reliable in all contexts */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 16px !important;
    background-color: white !important;
    padding: 0 14px 0 34px !important;
    margin-left: 0 !important;
    width: 220px !important;
    max-width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
    font-size: 0.88rem !important;
    color: var(--text-main) !important;
    height: 36px !important;
    line-height: 36px !important;
    /* Hide browser's native search X/cancel button */
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dataTables_filter input[type="search"]::-webkit-search-decoration,
.dataTables_filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    display: none !important;
}
.dataTables_filter input[type="search"]:focus,
.dataTables_filter input.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
    outline: none !important;
}

/* Length select */
.dataTables_length select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 28px 4px 10px;
    margin: 0 6px;
    outline: none;
    background: white;
    height: 32px;
    font-size: 0.88rem;
}

/* Pagination */
.dataTables_paginate .pagination {
    margin: 0;
    gap: 4px;
    justify-content: flex-end;
}
.dataTables_paginate .page-item .page-link {
    border-radius: 8px !important;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 5px 12px;
    font-weight: 500;
    font-size: 0.88rem;
    transition: all 0.2s;
}
.dataTables_paginate .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.dataTables_paginate .page-item:not(.active) .page-link:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Table cell styling */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    /* Override DataTables inline style="width: 0px" — it miscalculates on hidden containers */
    width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    background: white;
}
table.dataTable thead th {
    /* Override DataTables inline style="width: 0px" on each <th> */
    width: auto !important;
    min-width: 0 !important;
    background: #f8fafc;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    /* Let header text wrap when the column is narrow instead of
       overflowing into the absolutely-positioned sort icon */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    vertical-align: middle !important;
}
/* Extra right padding for sort icon to not overlap text */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 32px !important;
    position: relative !important;
}
table.dataTable tbody td {
    padding: 14px 16px !important;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-main);
    font-size: 0.9rem;
}
table.dataTable tbody tr:last-child td {
    border-bottom: none;
}
table.dataTable.no-footer {
    border-bottom: none !important;
}
table.dataTable tbody tr:hover td {
    background: #f8fafc;
}

/* Hide DataTables responsive column toggle (ColVis/⊞) button if present */
.dt-buttons,
.dt-button,
.DTCR_clicker {
    display: none !important;
}

/* --- Mobile: Horizontal Scroll Tables --- */
@media (max-width: 991px) {
    .dataTables_filter {
        text-align: center !important;
    }
    .dataTables_filter label {
        width: 100%;
        display: block;
    }
    .dataTables_filter input[type="search"] {
        width: 100% !important;
    }

    /* Footer: length + paginate stack to full width */
    .table-container .dataTables_length,
    .table-container .dataTables_paginate {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .table-container .dataTables_length {
        justify-content: center !important;
        border-top: 1px solid var(--border-color) !important;
        border-bottom: none !important;
    }
    .table-container .dataTables_paginate {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center !important;
        padding: 10px 16px !important;
    }
    .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        justify-content: center;
    }

    /* Horizontal scroll: only the table area, pagination stays outside */
    .table-container .dataTables_wrapper {
        overflow-x: visible !important;
    }
    .table-container .listtable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.dataTable {
        min-width: 520px;
    }
}

/* =====================================================
   LIST PAGES — Status Badges, Filters, Table Polish
   ===================================================== */

/* --- Modern Status Badge Pills ---
   Covers three naming schemes WHMCS uses in different places:
   1. .label.status.status-paid (DataTables service tables, invoices)
   2. .label.label-success (legacy Bootstrap-3 labels — home panels,
      "Email Verified" badge, etc.)
   3. .badge.badge-success (Bootstrap-4 badges in newer templates) */
.label.status,
td .label.status,
span.label[class*="status-"],
.label[class*="status-"],
.label.label-default,
.label.label-primary,
.label.label-success,
.label.label-info,
.label.label-warning,
.label.label-danger,
span.label.label-default,
span.label.label-primary,
span.label.label-success,
span.label.label-info,
span.label.label-warning,
span.label.label-danger,
.badge.badge-secondary,
.badge.badge-primary,
.badge.badge-success,
.badge.badge-info,
.badge.badge-warning,
.badge.badge-danger {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    text-transform: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-shadow: none !important;
    border: none !important;
}

/* Green — active, open, paid, completed */
.status-active,
.status-open,
.status-completed,
.status-paid,
.status-accepted,
.label.label-success,
span.label.label-success,
.badge.badge-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

/* Gray — closed, cancelled, terminated */
.status-closed,
.status-cancelled,
.status-terminated,
.status-fraud,
.label.label-default,
span.label.label-default,
.badge.badge-secondary {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* Red — unpaid, pending */
.status-unpaid,
.status-pending,
.status-inprogress,
.label.label-danger,
span.label.label-danger,
.badge.badge-danger {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Orange — suspended, refunded, onhold, customer-reply */
.status-suspended,
.status-refunded,
.status-onhold,
.status-customer-reply,
.status-pending-transfer,
.label.label-warning,
span.label.label-warning,
.badge.badge-warning {
    background-color: #fff7ed !important;
    color: #c2410c !important;
}

/* Blue — info / generic informational */
.label.label-info,
span.label.label-info,
.badge.badge-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

/* Mint — primary / brand-colored */
.label.label-primary,
span.label.label-primary,
.badge.badge-primary {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* Purple — answered */
.status-answered {
    background-color: #f5f3ff !important;
    color: #7c3aed !important;
}

/* --- Clickable Table Rows --- */
table.dataTable tbody tr[onclick],
table.dataTable tbody tr[onclick] td {
    cursor: pointer;
}

/* --- Ticket Link in Table --- */
table.dataTable td a.border-left {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none !important;
    border-left: none !important;
    color: var(--text-main) !important;
    font-size: inherit;
}
table.dataTable td a.border-left:hover {
    color: var(--primary) !important;
}
table.dataTable td a.border-left .ticket-number {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex-shrink: 0;
}
table.dataTable td a.border-left .ticket-subject {
    font-weight: 500;
}
table.dataTable td a.border-left .ticket-subject.unread {
    font-weight: 700;
}

/* --- Sidebar Count Badges --- */
.sidebar-menu-item-badge .badge,
.sidebar .card .badge,
.card-sidebar .badge {
    background-color: #e5e7eb !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
    min-width: 22px !important;
    text-align: center !important;
}

/* Active item badge */
.list-group-item.active .sidebar-menu-item-badge .badge,
.list-group-item.active .badge {
    background-color: var(--primary) !important;
    color: white !important;
}

/* --- View Filter Buttons in Right Sidebar ---
   Inherits unified sidebar style above; only overrides layout bits
   that are specific to filter rows (icon width, badge placement). */
.view-filter-btns .list-group-item {
    padding: 12px 20px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.925rem !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
}
.view-filter-btns .list-group-item:last-child {
    border-bottom: none !important;
}
/* The actual content layout is inside sidebar-menu-item-wrapper */
.view-filter-btns .list-group-item .sidebar-menu-item-wrapper {
    display: flex !important;
    flex-flow: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}
.view-filter-btns .list-group-item .sidebar-menu-item-icon-wrapper {
    margin-right: 0 !important;
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-filter-btns .list-group-item .sidebar-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
}
.view-filter-btns .list-group-item .sidebar-menu-item-badge {
    margin-left: 0 !important;
}
.view-filter-btns .list-group-item i.fa-circle,
.view-filter-btns .list-group-item i.fa-dot-circle {
    color: #d1d5db !important;
    font-size: 0.8rem !important;
    transition: color 0.15s ease !important;
}
.view-filter-btns .list-group-item.active {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}
.view-filter-btns .list-group-item.active i.fa-dot-circle {
    color: var(--primary) !important;
}
.view-filter-btns .list-group-item:hover:not(.active) {
    background-color: #f9fafb !important;
    color: var(--text-main) !important;
}

/* Products/Services table: icon column — override DataTables' width:0px */
table.dataTable td[data-type="service"],
table.dataTable thead th:first-child {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
}
table.dataTable tbody td:first-child img {
    display: block;
    margin: 0 auto;
    width: 26px !important;
    height: auto !important;
    opacity: 0.7;
}

/* Table domain/subtext link */
table.dataTable tbody td a[href^="http"] {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}
table.dataTable tbody td a[href^="http"]:hover {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

/* Table amount column: pricing + cycle */
table.dataTable tbody td .text-muted {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted) !important;
    margin-top: 2px;
}

/* =====================================================
   BUGFIXES — Grid, Colours, Form Consistency
   ===================================================== */

/* Override Bootstrap green: btn-success → our primary */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}
/* Disabled state keeps the primary color but fades it */
.btn-success.disabled,
.btn-success:disabled,
a.btn-success.disabled,
a.btn-success[disabled],
.btn.btn-success.disabled,
.btn.btn-success:disabled {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Override Bootstrap badge colours */
.badge-primary,
.badge-success {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Contact chooser: vertically align label + select + button
   Use 3 classes to beat .content-inner .row (2 classes) from header.tpl */
.content-inner .alert .row,
.primary-content .alert .row {
    align-items: center !important;
}

/* Input-group append button: match input height */
.input-group-append .btn,
.input-group-prepend .btn {
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* DataTables sort icons — override the default twin ::before/::after
   arrows (which, when forced into the same vertical position, stack
   on top of each other and render like a broken square glyph).
   Use a single FontAwesome icon per state, centered vertically at
   the right edge of the header. */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_asc_disabled::before,
table.dataTable thead th.sorting_desc_disabled::before {
    content: none !important;
    display: none !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::after {
    font-family: inherit !important;
    font-weight: 700 !important;
    font-style: normal !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    font-size: 0.85em !important;
    color: var(--text-muted) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    text-shadow: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Plain Unicode arrows — render in ANY font, no icon-font dependency */
table.dataTable thead th.sorting::after {
    content: "\2195" !important; /* ↕ UP DOWN ARROW */
}
table.dataTable thead th.sorting_asc::after {
    content: "\2191" !important; /* ↑ UPWARDS ARROW */
    opacity: 1 !important;
    color: var(--primary) !important;
}
table.dataTable thead th.sorting_desc::after {
    content: "\2193" !important; /* ↓ DOWNWARDS ARROW */
    opacity: 1 !important;
    color: var(--primary) !important;
}

/* Textarea height is handled in the form-control block above
   (without !important) so native resize via the drag handle keeps
   working — the browser sets an inline height and nothing from CSS
   overrides it. */

/* =====================================================
   CART & GLOBAL — Checkbox/Radio, Cart Table, Alerts
   ===================================================== */

/* Native checkbox & radio: use our primary colour (modern browsers) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

/* Bootstrap custom-control (BS4) */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--primary) !important;
}

/* Generic table header (non-cart): neutral colours */
.table thead th,
table thead th {
    background-color: #f9fafb !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* btn-outline-success override */
.btn-outline-success {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled):active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Cart / Order alerts: ensure border-radius & clean icon layout */
.alert {
    border-radius: var(--radius) !important;
}
.alert > i.fa,
.alert > i.fas,
.alert > i.far,
.alert > i.fal,
.alert > i.fab {
    float: left !important;
    margin-right: 12px !important;
    margin-top: 2px !important;
    font-size: 1.1rem !important;
}

/* Progress bar: use our green instead of Bootstrap's green */
.progress-bar.bg-success,
.progress-bar {
    background-color: var(--primary) !important;
}

/* Invoice payment sidebar: "Balance Due" row — solid green bg + white text
   so it clearly stands out instead of being green text on green background */
.invoice-summary .alert-success,
#invoiceIdSummary .alert-success {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary-hover) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* =====================================================
   STANDARD CART (Nexus orderform) — REAL-DOM Rewrite
   Target: #order-standard_cart on cart.php?a=view
   Selectors prefixed with `html body` for max specificity
   to beat /templates/orderforms/standard_cart/css/all.min.css
   Based on actual DOM (divs, not <table>).
   ===================================================== */

/* --- Page title (h1.font-size-36 "Review & Checkout") --- */
html body #order-standard_cart .header-lined,
html body #order-standard_cart .cart-body > .header-lined {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    background: transparent !important;
}

html body #order-standard_cart h1,
html body #order-standard_cart .cart-body h1,
html body #order-standard_cart .header-lined h1,
html body #order-standard_cart h1.font-size-36 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.2 !important;
}

/* --- Cart items "table" — actually divs with rows --- */
html body #order-standard_cart .view-cart-items-header,
html body #order-standard_cart .view-cart-items {
    background: #ffffff !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #order-standard_cart .view-cart-items-header {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    background-image: none !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 20px !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
    text-shadow: none !important;
}

html body #order-standard_cart .view-cart-items-header .row {
    margin: 0 !important;
    align-items: center !important;
}

html body #order-standard_cart .view-cart-items-header .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body #order-standard_cart .view-cart-items {
    border: 1px solid var(--border-color) !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Individual cart line items */
html body #order-standard_cart .view-cart-items > .item {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: #ffffff !important;
    color: var(--text-main) !important;
}
html body #order-standard_cart .view-cart-items > .item:last-child {
    border-bottom: none !important;
}

/* "Your Shopping Cart is Empty" */
html body #order-standard_cart .view-cart-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    background: #ffffff !important;
    margin: 0 !important;
    border: none !important;
}

/* --- Promo code / Tax tabs (.view-cart-tabs) ---
   NUCLEAR OVERRIDE: Nexus ships /templates/orderforms/standard_cart/css/all.min.css
   that paints the active tab <a> with solid color. We neutralize every variant. */
html body #order-standard_cart .view-cart-tabs {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

html body #order-standard_cart .view-cart-tabs .nav.nav-tabs,
html body #order-standard_cart .view-cart-tabs > .nav-tabs,
html body #order-standard_cart .view-cart-tabs ul.nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

html body #order-standard_cart .view-cart-tabs .nav-tabs > li,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item.active {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Base <a> / .nav-link — cover every state + every selector variant */
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item > a,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a.nav-link,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a:link,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    position: relative !important;
    transition: color 0.15s ease !important;
    line-height: 1.4 !important;
}

html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link:focus-visible {
    color: var(--text-main) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* ACTIVE state — the culprit. Cover <li.active>, <a.active>, aria-expanded. */
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item.active > a,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item.active > a:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item.active > a:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a.active,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a.active:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a.active:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active:hover,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active:focus,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link[aria-expanded="true"],
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link[aria-selected="true"] {
    color: var(--primary) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Active underline (2px primary bar) */
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a::after,
html body #order-standard_cart .view-cart-tabs .nav-tabs > li.nav-item.active > a::after,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;
    height: 2px !important;
    width: auto !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Kill any ::before that Nexus might add */
html body #order-standard_cart .view-cart-tabs .nav-tabs > li > a::before,
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* Tab content panel */
html body #order-standard_cart .view-cart-tabs > .tab-content {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
    padding: 20px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

html body #order-standard_cart .view-cart-tabs > .tab-content > .tab-pane {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Promo code form: input on the left, button on the right, same row */
html body #order-standard_cart #applyPromo form,
html body #order-standard_cart .tab-pane.promo form {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

@media (max-width: 575.98px) {
    html body #order-standard_cart #applyPromo form,
    html body #order-standard_cart .tab-pane.promo form {
        flex-wrap: wrap !important;
    }
}

/* Promo code input sits inside .form-group.prepend-icon — override prepend-icon
   defaults scoped to this form only so the ticket icon + input render properly */
html body #order-standard_cart #applyPromo .form-group.prepend-icon,
html body #order-standard_cart .tab-pane.promo .form-group.prepend-icon {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    order: 1 !important;
}

html body #order-standard_cart #inputPromotionCode,
html body #order-standard_cart input[name="promocode"] {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 14px 10px 44px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}

html body #order-standard_cart #inputPromotionCode:focus,
html body #order-standard_cart input[name="promocode"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

html body #order-standard_cart #applyPromo .field-icon,
html body #order-standard_cart .tab-pane.promo .field-icon {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 44px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
}

html body #order-standard_cart #applyPromo .field-icon i,
html body #order-standard_cart .tab-pane.promo .field-icon i {
    color: var(--text-muted) !important;
    font-size: 1rem !important;
}

/* Validate Code button — compact primary, kill btn-block full-width */
html body #order-standard_cart button[name="validatepromo"],
html body #order-standard_cart button[name="validatepromo"].btn-block,
html body #order-standard_cart .tab-pane.promo button[type="submit"],
html body #order-standard_cart .tab-pane.promo .btn-block,
html body #order-standard_cart #applyPromo button[type="submit"],
html body #order-standard_cart #applyPromo .btn-block {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 24px !important;
    border-radius: 10px !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-shadow: none !important;
    transition: background-color 0.15s ease;
}

html body #order-standard_cart button[name="validatepromo"]:hover,
html body #order-standard_cart button[name="validatepromo"]:focus,
html body #order-standard_cart .tab-pane.promo button[type="submit"]:hover,
html body #order-standard_cart #applyPromo button[type="submit"]:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

/* Taxes tab country/state form rows */
html body #order-standard_cart #calcTaxes .form-group.row {
    margin-bottom: 12px !important;
}

html body #order-standard_cart #calcTaxes .btn-default {
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
}

html body #order-standard_cart #calcTaxes .btn-default:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

/* --- Order Summary (right sidebar) — not a .panel, bare .order-summary --- */
html body #order-standard_cart .secondary-cart-sidebar {
    padding: 0 !important;
}

html body #order-standard_cart .order-summary,
html body #order-standard_cart #orderSummary {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    position: relative !important;
}

/* Order Summary title (<h2 class="font-size-30">Order Summary</h2>) */
html body #order-standard_cart .order-summary > h2,
html body #order-standard_cart .order-summary > h2.font-size-30,
html body #order-standard_cart #orderSummary > h2 {
    margin: 0 !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

/* Summary body wrapper */
html body #order-standard_cart .order-summary .summary-container {
    padding: 20px !important;
    background: #ffffff !important;
}

/* Subtotal / Totals rows */
html body #order-standard_cart .order-summary .subtotal,
html body #order-standard_cart .order-summary .recurring-totals,
html body #order-standard_cart .order-summary .summary-container > .clearfix {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
}

/* Reset float only on DIRECT label/value children, NOT nested hidden spans.
   Nested #recurringMonthly/#recurringQuarterly/etc have inline style="display:none"
   and must stay hidden until WHMCS JS reveals the relevant period. */
html body #order-standard_cart .order-summary .subtotal > .pull-left,
html body #order-standard_cart .order-summary .subtotal > .pull-right,
html body #order-standard_cart .order-summary .subtotal > .float-left,
html body #order-standard_cart .order-summary .subtotal > .float-right,
html body #order-standard_cart .order-summary .recurring-totals > .pull-left,
html body #order-standard_cart .order-summary .recurring-totals > .pull-right,
html body #order-standard_cart .order-summary .recurring-totals > .float-left,
html body #order-standard_cart .order-summary .recurring-totals > .float-right {
    float: none !important;
}

html body #order-standard_cart .order-summary .subtotal > .pull-left,
html body #order-standard_cart .order-summary .subtotal > .float-left,
html body #order-standard_cart .order-summary .recurring-totals > .pull-left,
html body #order-standard_cart .order-summary .recurring-totals > .float-left {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

html body #order-standard_cart .order-summary .subtotal > .pull-right,
html body #order-standard_cart .order-summary .subtotal > .float-right,
html body #order-standard_cart .order-summary .recurring-totals > .pull-right,
html body #order-standard_cart .order-summary .recurring-totals > .float-right {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    text-align: right !important;
}

html body #order-standard_cart .order-summary .recurring-charges {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    text-align: right !important;
    font-weight: 600 !important;
}

/* Each recurring-period span is toggled by WHMCS JS via inline display:none.
   Keep them hidden until JS sets display:inline, then render as block line. */
html body #order-standard_cart .order-summary .recurring-charges > span[id^="recurring"] {
    display: block !important;
    text-align: right !important;
}

/* Don't reveal ones still marked with display:none inline — Nexus JS
   unsets this via $.show() which removes the style. */
html body #order-standard_cart .order-summary .recurring-charges > span[id^="recurring"][style*="display: none"],
html body #order-standard_cart .order-summary .recurring-charges > span[id^="recurring"][style*="display:none"] {
    display: none !important;
}

/* Remove the <br> inside recurring spans — each span already renders as block */
html body #order-standard_cart .order-summary .recurring-charges > span[id^="recurring"] br {
    display: none !important;
}

/* Total Due Today — highlighted mint box */
html body #order-standard_cart .order-summary .total-due-today,
html body #order-standard_cart .order-summary .total-due-today-padded {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 14px 16px !important;
    background: var(--primary-light) !important;
    background-color: var(--primary-light) !important;
    color: var(--primary-hover) !important;
    border: none !important;
    border-radius: 12px !important;
    margin: 14px 0 16px 0 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

html body #order-standard_cart .order-summary .total-due-today .amt,
html body #order-standard_cart .order-summary .total-due-today #totalDueToday {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-hover) !important;
    line-height: 1.2 !important;
    display: block !important;
}

html body #order-standard_cart .order-summary .total-due-today > span:not(.amt):not(#totalDueToday) {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: block !important;
}

/* Express-checkout wrapper (PayPal Express / Apple Pay etc.) */
html body #order-standard_cart .order-summary .express-checkout-buttons {
    margin: 0 0 12px 0 !important;
}

html body #order-standard_cart .order-summary .express-checkout-buttons:empty {
    display: none !important;
    margin: 0 !important;
}

/* Checkout button (.btn-checkout) — always green, faded when .disabled */
html body #order-standard_cart .order-summary .text-right {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

html body #order-standard_cart .btn-checkout,
html body #order-standard_cart a#checkout,
html body #order-standard_cart .order-summary .btn-success,
html body #order-standard_cart .order-summary a.btn-lg[href*="checkout"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 20px !important;
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

html body #order-standard_cart .btn-checkout:hover,
html body #order-standard_cart a#checkout:hover,
html body #order-standard_cart .order-summary .btn-success:hover {
    background: var(--primary-hover) !important;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

/* Disabled state: KEEP the green color, just fade opacity + no pointer */
html body #order-standard_cart .btn-checkout.disabled,
html body #order-standard_cart a#checkout.disabled,
html body #order-standard_cart .order-summary .btn-success.disabled,
html body #order-standard_cart .btn-checkout[disabled],
html body #order-standard_cart a#checkout[disabled] {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Continue Shopping text link below Checkout */
html body #order-standard_cart .btn-continue-shopping,
html body #order-standard_cart a#continueShopping,
html body #order-standard_cart .order-summary .btn-link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 0 0 !important;
    margin: 4px 0 0 0 !important;
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    height: auto !important;
}

html body #order-standard_cart .btn-continue-shopping:hover,
html body #order-standard_cart a#continueShopping:hover {
    color: var(--primary) !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* Kill <br> inside .text-right (spacing handled by flex/gap) */
html body #order-standard_cart .order-summary .text-right > br {
    display: none !important;
}

/* Loader spinner */
html body #order-standard_cart .order-summary .loader {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    color: var(--primary) !important;
    z-index: 5 !important;
}

/* --- Cart Sidebar (left: Categories + Actions panels) --- */
html body #order-standard_cart .cart-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Cart sidebar panels — panel shell only.
   List-item look/feel inherits the global .card-sidebar rules above. */
html body #order-standard_cart .cart-sidebar .panel.card.card-sidebar,
html body #order-standard_cart .cart-sidebar .panel.card {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

html body #order-standard_cart .cart-sidebar .panel-heading.card-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 20px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    text-shadow: none !important;
}

html body #order-standard_cart .cart-sidebar .panel-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

html body #order-standard_cart .cart-sidebar .panel-title > i:first-child {
    color: var(--text-main) !important;
    margin-right: 8px !important;
    font-size: 0.9rem !important;
}

html body #order-standard_cart .cart-sidebar .panel-title .card-minimise,
html body #order-standard_cart .cart-sidebar .panel-title .panel-minimise {
    margin-left: auto !important;
    float: none !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25em !important;
    height: 1.25em !important;
    line-height: 1 !important;
    text-align: center !important;
    transition: transform 0.2s ease !important;
    transform-origin: center !important;
}

/* Remove bottom border from heading when the panel body is collapsed.
   WHMCS on cart.php toggles via inline display:none on .collapsable-card-body
   and adds .minimised / swaps fa-chevron-up ↔ fa-chevron-down on the chevron.
   Our JS also sets .panel-collapsed on the parent .panel.card. */
html body #order-standard_cart .cart-sidebar .panel.card.panel-collapsed .panel-heading.card-header,
html body #order-standard_cart .cart-sidebar .panel.card:has(> .collapsable-card-body[style*="display: none"]) .panel-heading.card-header,
html body #order-standard_cart .cart-sidebar .panel.card:has(> .collapsable-card-body[style*="display:none"]) .panel-heading.card-header,
html body #order-standard_cart .cart-sidebar .panel.card:has(.card-minimise.minimised) .panel-heading.card-header,
html body #order-standard_cart .cart-sidebar .panel.card:has(.card-minimise.fa-chevron-down) .panel-heading.card-header,
html body #order-standard_cart .cart-sidebar .panel.card:has(.panel-minimise.fa-chevron-down) .panel-heading.card-header {
    border-bottom: none !important;
}

html body #order-standard_cart .cart-sidebar .list-group.collapsable-card-body,
html body #order-standard_cart .cart-sidebar .list-group {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Mobile collapsed category/action selects (.sidebar-collapsed) */
html body #order-standard_cart .sidebar-collapsed .panel.card {
    margin-bottom: 12px !important;
}

html body #order-standard_cart .sidebar-collapsed .panel-body {
    padding: 14px 16px !important;
}

html body #order-standard_cart .sidebar-collapsed select.form-control {
    height: 44px !important;
}

/* Kill Bootstrap 3 panel gradients/text-shadows everywhere in cart */
html body #order-standard_cart .panel-default,
html body #order-standard_cart .panel-primary,
html body #order-standard_cart .panel-heading {
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Remove Modal's Bootstrap 3 primary gradient in cart remove/empty modals */
html body #order-standard_cart .modal-content {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important;
}

/* =========================================================
   Generic sidebar menu item layout
   WHMCS wraps every sidebar link as
     .list-group-item > .sidebar-menu-item-wrapper >
         .sidebar-menu-item-icon-wrapper + .sidebar-menu-item-label
   We already flex .list-group-item, but the wrapper defaults to
   `display: block`, so icon+label stack vertically on sidebars
   that aren't .view-filter-btns (e.g. Support, Recent Tickets on
   submitticket.php). Flex the wrapper for every sidebar context.
   ========================================================= */
.sidebar .card .list-group-item .sidebar-menu-item-wrapper,
.card-sidebar .list-group-item .sidebar-menu-item-wrapper {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.sidebar .card .list-group-item .sidebar-menu-item-icon-wrapper,
.card-sidebar .list-group-item .sidebar-menu-item-icon-wrapper {
    flex: 0 0 18px !important;
    width: 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
}

.sidebar .card .list-group-item .sidebar-menu-item-icon,
.card-sidebar .list-group-item .sidebar-menu-item-icon {
    font-size: 0.9rem !important;
    color: inherit !important;
}

.sidebar .card .list-group-item .sidebar-menu-item-label,
.card-sidebar .list-group-item .sidebar-menu-item-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Recent tickets block inside the sidebar-menu-item-label:
   two-line layout (title + closed/time footer). Keep it neat. */
.sidebar .card .list-group-item .recent-ticket,
.card-sidebar .list-group-item .recent-ticket {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.sidebar .card .list-group-item .recent-ticket .truncate,
.card-sidebar .list-group-item .recent-ticket .truncate {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
}

.sidebar .card .list-group-item .recent-ticket small,
.card-sidebar .list-group-item .recent-ticket small {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    line-height: 1.3 !important;
}

.sidebar .card .list-group-item .recent-ticket small .pull-right,
.sidebar .card .list-group-item .recent-ticket small .float-right,
.card-sidebar .list-group-item .recent-ticket small .pull-right,
.card-sidebar .list-group-item .recent-ticket small .float-right {
    float: none !important;
    margin-left: auto !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

/* =========================================================
   Button size normalization
   Bootstrap/WHMCS ship .btn-sm/.btn-lg with different border-
   radii than our 8px .btn, which leads to visibly mismatched
   corners within the same toolbar (e.g. ticket markdown editor).
   Snap every size variant to the same rounded family.
   ========================================================= */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}

.btn-lg,
.btn-group-lg > .btn {
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
}

/* Markdown editor toolbar — unified square/round buttons, even gaps.
   WHMCS renders the toolbar as a <ul class="nav nav-pills nav-editor">
   with <li class="btn-group"> items, where the Preview button uses
   .btn-primary (not .btn-default) and the help link sits inside
   .md-guide with extra default margin. Target every button in the
   toolbar so they all render at the same size/radius/spacing. */
.md-header,
.md-header .btn-toolbar,
.md-header ul.nav,
.md-header ul.nav-pills,
.md-header ul.nav-editor {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.md-header .btn-group,
.md-header .btn-toolbar > .btn-group,
.md-header ul.nav > li,
.md-header ul.nav > li.btn-group,
.md-header ul.nav > li.md-guide {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
}

/* Every button inside the toolbar — icon-only, preview, and help */
.md-header .btn,
.md-header .btn-group > .btn,
.md-header .btn-toolbar .btn,
.md-header ul.nav .btn,
.md-header ul.nav > li > a.btn,
.md-header .md-guide .btn,
.md-header .md-guide > a {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.md-header .btn-default,
.md-header ul.nav > li > a.btn-default {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.md-header .btn-default:hover,
.md-header ul.nav > li > a.btn-default:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: var(--text-main) !important;
}

/* Preview button inherits size/radius from the generic rule above */
.md-header .btn-primary,
.md-header ul.nav > li > a.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.md-header .btn > i,
.md-header .btn > span {
    line-height: 1 !important;
}

/* Kill any float/margin WHMCS applies to the help ( ? ) button */
.md-header .md-guide,
.md-header ul.nav > li.md-guide {
    margin-left: 0 !important;
    float: none !important;
}

/* Markdown editor container: clean borders so it lives inside
   .form-group consistently with other inputs */
.md-editor {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}
.md-editor .md-header {
    padding: 10px 12px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.md-editor textarea.markdown-editor {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 180px !important;
}
.md-editor textarea.markdown-editor:focus {
    box-shadow: none !important;
    border: none !important;
}
.md-editor .md-footer {
    padding: 6px 12px !important;
    background: #f9fafb !important;
    border-top: 1px solid var(--border-color) !important;
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
}

/* =========================================================
   Submit Ticket form — normalize the column grid
   WHMCS template uses col-md-4/5 + col-md-10 + col-md-3/5/3,
   leaving awkward empty space on the right of each row and
   making field widths look random. Distribute each row's
   form-groups equally so they fill their .row container.
   ========================================================= */
form[action*="submitticket"] .card-body .row,
form[action*="submitticket.php"] .card-body .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

form[action*="submitticket"] .card-body .row > .form-group[class*="col-"],
form[action*="submitticket.php"] .card-body .row > .form-group[class*="col-"] {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Keep labels/inputs in this form consistent */
form[action*="submitticket"] .card-body .form-group > label,
form[action*="submitticket.php"] .card-body .form-group > label {
    display: inline-block !important;
    margin-bottom: 6px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
}

/* Submit/Cancel button row — centered, proper gap, unified radius */
form[action*="submitticket"] p.text-center:last-child,
form[action*="submitticket.php"] p.text-center:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

form[action*="submitticket"] p.text-center:last-child .btn,
form[action*="submitticket.php"] p.text-center:last-child .btn {
    min-width: 120px !important;
    padding: 10px 24px !important;
}

/* =============================================================
   Product Details / Module Tabs — make them look like cart tabs
   WHMCS injects .responsive-tabs-sm-connector with .channel +
   .bottom-border that create a duplicate/ugly separator under
   the tab row. We neutralize that and re-use the clean cart-tab
   pattern: tabs with 1px bottom border, content panel as a
   seamless white card continuing from the border.
   ============================================================= */

.responsive-tabs-sm-connector,
.responsive-tabs-sm-connector .channel,
.responsive-tabs-sm-connector .bottom-border {
    display: none !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-tabs.responsive-tabs-sm {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

.nav-tabs.responsive-tabs-sm > li,
.nav-tabs.responsive-tabs-sm > li.nav-item,
.nav-tabs.responsive-tabs-sm > li.active,
.nav-tabs.responsive-tabs-sm > li.nav-item.active {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-tabs.responsive-tabs-sm > li > a,
.nav-tabs.responsive-tabs-sm > li.nav-item > a,
.nav-tabs.responsive-tabs-sm .nav-link,
.nav-tabs.responsive-tabs-sm > li > a.nav-link,
.nav-tabs.responsive-tabs-sm > li > a:link,
.nav-tabs.responsive-tabs-sm > li > a:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    position: relative !important;
    transition: color 0.15s ease !important;
    line-height: 1.4 !important;
}

.nav-tabs.responsive-tabs-sm > li > a:hover,
.nav-tabs.responsive-tabs-sm > li > a:focus,
.nav-tabs.responsive-tabs-sm .nav-link:hover,
.nav-tabs.responsive-tabs-sm .nav-link:focus,
.nav-tabs.responsive-tabs-sm .nav-link:focus-visible {
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.nav-tabs.responsive-tabs-sm > li.active > a,
.nav-tabs.responsive-tabs-sm > li.active > a:hover,
.nav-tabs.responsive-tabs-sm > li.active > a:focus,
.nav-tabs.responsive-tabs-sm > li.nav-item.active > a,
.nav-tabs.responsive-tabs-sm > li > a.active,
.nav-tabs.responsive-tabs-sm .nav-link.active,
.nav-tabs.responsive-tabs-sm .nav-link.active:hover,
.nav-tabs.responsive-tabs-sm .nav-link.active:focus,
.nav-tabs.responsive-tabs-sm .nav-link[aria-selected="true"] {
    color: var(--primary) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.nav-tabs.responsive-tabs-sm > li.active > a::after,
.nav-tabs.responsive-tabs-sm > li.nav-item.active > a::after,
.nav-tabs.responsive-tabs-sm .nav-link.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;
    height: 2px !important;
    width: auto !important;
    background: var(--primary) !important;
    background-image: none !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.nav-tabs.responsive-tabs-sm > li > a::before,
.nav-tabs.responsive-tabs-sm .nav-link::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* Tab content panel for product details — seamless white card
   continuing below the tab row */
.tab-content.product-details-tab-container {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 24px !important;
    margin: 0 0 24px 0 !important;
    box-shadow: none !important;
}

.tab-content.product-details-tab-container > .tab-pane {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Normalize Bootstrap 3 col-xs-* (which WHMCS modules still emit)
   inside the module tab content so buttons don't stretch awkwardly */
.tab-content.product-details-tab-container .module-client-area .row {
    justify-content: center !important;
    margin: 0 !important;
}
.tab-content.product-details-tab-container .module-client-area [class*="col-xs-"] {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 0 !important;
}
.tab-content.product-details-tab-container .module-client-area .btn.btn-block {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 160px !important;
    padding: 10px 24px !important;
}

/* =============================================================
   Attachments — rounded corners on EVERY upload row, not just the
   first one. WHMCS emits a primary row wrapped in .attachment-group
   and extra rows as plain .input-group > .custom-file +
   .input-group-append, so the radius rules must cover both.
   ============================================================= */
form[action*="submitticket"] .custom-file,
form[action*="submitticket.php"] .custom-file,
.attachment-group .custom-file,
.input-group > .custom-file {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    height: 48px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

form[action*="submitticket"] .custom-file .custom-file-label,
form[action*="submitticket.php"] .custom-file .custom-file-label,
.attachment-group .custom-file .custom-file-label,
.input-group > .custom-file .custom-file-label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    /* Left side always rounded, right side square because Browse sits there */
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

form[action*="submitticket"] .custom-file .custom-file-label::after,
form[action*="submitticket.php"] .custom-file .custom-file-label::after,
.attachment-group .custom-file .custom-file-label::after,
.input-group > .custom-file .custom-file-label::after {
    content: "Browse" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 20px !important;
    background: #f3f4f6 !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
}

/* Primary row WITH "+ Add More" button — Browse stays square, the
   Add More button gets the right-side rounding. */
form[action*="submitticket"] .attachment-group .custom-file .custom-file-label,
form[action*="submitticket.php"] .attachment-group .custom-file .custom-file-label,
.attachment-group .custom-file .custom-file-label {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

form[action*="submitticket"] .attachment-group .input-group-append .btn,
form[action*="submitticket.php"] .attachment-group .input-group-append .btn,
.attachment-group .input-group-append .btn {
    height: 48px !important;
    margin: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

form[action*="submitticket"] .attachment-group .input-group-append .btn:last-child,
form[action*="submitticket.php"] .attachment-group .input-group-append .btn:last-child,
.attachment-group .input-group-append .btn:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Secondary rows (no Add More) — Browse is the ONLY button on the
   right, so it needs the right-side rounding baked directly into
   its ::after pseudo-element via Browse label OR via the append btn
   if the template uses one. */
form[action*="submitticket"] .custom-file:not(.attachment-group .custom-file) .custom-file-label::after,
form[action*="submitticket.php"] .custom-file:not(.attachment-group .custom-file) .custom-file-label::after,
form[action*="submitticket"] > .custom-file .custom-file-label::after,
form[action*="submitticket.php"] > .custom-file .custom-file-label::after,
.form-group > .custom-file:not(.attachment-group .custom-file) .custom-file-label::after {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Uploaded/extra attachment rows render as .custom-file at the root
   of a .form-group (no .attachment-group wrapper, no Add More btn),
   so the Browse ::after is the rightmost element and must round. */
form[action*="submitticket"] .form-group > .custom-file .custom-file-label::after,
form[action*="submitticket.php"] .form-group > .custom-file .custom-file-label::after {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* =============================================================
   Submit Ticket — sidebar column alignment
   The sidebar column's first child was visually offset below the
   main form card. Force both columns to start flush at the top and
   strip any padding/margin that gets applied above the sidebar
   wrapper or its first card.
   ============================================================= */
.content-inner .container-fluid > .row,
.content-inner > .row {
    align-items: flex-start !important;
}

.content-inner .row > [class*="col-"] {
    padding-top: 0 !important;
}

.content-inner .row > [class*="col-"] > .sidebar,
.content-inner .row > [class*="col-"] > .sidebar.mb-4,
.content-inner .row > [class*="col-"] > form,
.content-inner .row > [class*="col-"] > .primary-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.content-inner .row > [class*="col-"] > .sidebar > *:first-child,
.content-inner .row > [class*="col-"] > .sidebar > .card:first-child,
.content-inner .row > [class*="col-"] > form > *:first-child,
.content-inner .row > [class*="col-"] > form > .card:first-child,
.content-inner .row > [class*="col-"] > .primary-content > *:first-child {
    margin-top: 0 !important;
}

/* Open Ticket / Submit Ticket specifically: the form wraps the main
   card, and its column sits next to a sidebar column. Some WHMCS
   builds render a silent spacer or hidden alert above the sidebar —
   this strips any residual offset. */
form[action*="submitticket"],
form[action*="submitticket.php"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* Collapse empty sidebar wrappers
   WHMCS frequently emits an extra <div class="sidebar mb-4"></div> (or
   with only whitespace / hidden children) in the sidebar column above
   the real content. Its `mb-4` / our `.content-inner .sidebar
   { margin-bottom }` bleed 24px of whitespace below it and push the
   visible sidebar down, breaking alignment with the primary column.
   Hide any such empty/whitespace-only wrapper entirely. */
.content-inner .sidebar:empty,
.content-inner .row > [class*="col-"] > .sidebar:empty,
.content-inner .row > [class*="col-"] > .sidebar.mb-4:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Same treatment when the wrapper has no rendered children — only
   whitespace text nodes — via :has(). All modern browsers support it. */
.content-inner .sidebar:not(:has(> *)),
.content-inner .row > [class*="col-"] > .sidebar:not(:has(> *)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* And when it contains children but they are ALL hidden (e.g. only
   template/cloneRow nodes with .w-hidden or .hidden), kill its margin
   so it doesn't push siblings down. */
.content-inner .sidebar:not(:has(> *:not(.w-hidden):not(.hidden))),
.content-inner .row > [class*="col-"] > .sidebar:not(:has(> *:not(.w-hidden):not(.hidden))) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================
   HIDDEN utility classes in SIDEBAR contexts only
   The core issue: our global sidebar rule flexes every
   `.list-group-item` with `display: flex !important`, which was
   defeating `.w-hidden`/`.hidden` on template clones (e.g.
   #ccCloneRow, emptyTicketCCRow) and leaking hidden template HTML
   into the UI.

   We MUST NOT set a global `.w-hidden { display: none !important }`
   — WHMCS uses `.w-hidden` on DataTables-backed tables
   (`<table class="table table-list w-hidden">`), whose JS removes
   the class / calls `.show()` at runtime. A global `!important`
   on `.w-hidden` freezes those tables hidden forever.

   Only force-hide `.w-hidden`/`.hidden` inside sidebar list-group
   items where our own `display: flex !important` would otherwise
   override the hide. Table rows and other contexts are untouched.
   ============================================================= */
.sidebar .card .list-group-item.w-hidden,
.sidebar .card .list-group-item.hidden,
.card-sidebar .list-group-item.w-hidden,
.card-sidebar .list-group-item.hidden,
#sidebarTicketCc .list-group-item.w-hidden,
#sidebarTicketCc .list-group-item.hidden,
#sidebarTicketCc #ccCloneRow,
#sidebarTicketCc .ticket-cc-item.w-hidden,
#sidebarTicketCc .ticket-cc-item:empty {
    display: none !important;
}

/* =============================================================
   Ticket Information (viewticket.php right sidebar)
   Each <.list-group-item.ticket-details-children> has the shape
     <span class="title">Label</span><br>Value [optional badge]
   Our global sidebar rule turned every item into a single-line
   flex row with gap:10px and min-height:56px, which dropped the
   <br> and squished the badge ("O...", "Clos..."). These rows
   are NOT links — they need a block layout, stacked title over
   value, no hover/active styling.
   ============================================================= */
.sidebar .card .list-group-item.ticket-details-children,
.card-sidebar .list-group-item.ticket-details-children {
    display: block !important;
    min-height: 0 !important;
    padding: 12px 20px !important;
    line-height: 1.5 !important;
    cursor: default !important;
    font-size: 0.875rem !important;
    color: var(--text-main) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    text-align: left !important;
}

.sidebar .card .list-group-item.ticket-details-children:hover,
.sidebar .card .list-group-item.ticket-details-children:focus,
.card-sidebar .list-group-item.ticket-details-children:hover,
.card-sidebar .list-group-item.ticket-details-children:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--text-main) !important;
}

.sidebar .card .list-group-item.ticket-details-children .title,
.card-sidebar .list-group-item.ticket-details-children .title {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.sidebar .card .list-group-item.ticket-details-children .ticket-requestor-name,
.card-sidebar .list-group-item.ticket-details-children .ticket-requestor-name {
    display: inline !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    margin-right: 6px !important;
    word-break: break-word !important;
}

/* Labels/badges inside ticket-details — let them use their natural
   width and wrap under the value text if tight */
.sidebar .card .list-group-item.ticket-details-children .label,
.card-sidebar .list-group-item.ticket-details-children .label {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    text-shadow: none !important;
    border: none !important;
    margin: 2px 4px 2px 0 !important;
}

/* Requestor-type badges — Owner / Operator pills */
.label.requestor-type-owner,
.label.requestor-badge.requestor-type-owner {
    background: #e0f2fe !important;
    color: #075985 !important;
}
.label.requestor-type-operator,
.label.requestor-badge.requestor-type-operator {
    background: #dcfce7 !important;
    color: #166534 !important;
}

/* Priority label that comes with an inline background-color (e.g.
   style="background-color:#888888;") — keep the inline bg but
   normalize shape/typography to match the other pills */
.ticket-details-children .label[style*="background-color"] {
    color: #ffffff !important;
    text-shadow: none !important;
    border: none !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
}

/* =============================================================
   CC Recipients sidebar
   Card-body holds only empty/hidden placeholder rows, real UI
   lives in card-footer (add-CC form). Make the footer breathe and
   keep the input-group clean with our rounded radii.
   ============================================================= */
#sidebarTicketCc .collapsable-card-body {
    padding: 0 !important;
}

/* If the list-group is empty (only hidden placeholders), hide the
   whole body so the footer sits directly under the header */
#sidebarTicketCc .collapsable-card-body:has(> .list-group > .list-group-item:not(.w-hidden):not(.hidden)) {
    display: block !important;
}
#sidebarTicketCc .collapsable-card-body .list-group {
    margin: 0 !important;
}
#sidebarTicketCc .collapsable-card-body .list-group:not(:has(> .list-group-item:not(.w-hidden):not(.hidden))) {
    display: none !important;
}

#sidebarTicketCc .card-footer {
    padding: 14px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid var(--border-color) !important;
}

#sidebarTicketCc #frmAddCcEmail {
    margin: 0 !important;
}

#sidebarTicketCc #containerAddCcEmail {
    margin: 0 !important;
    width: 100% !important;
}

#sidebarTicketCc #inputAddCcEmail {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

#sidebarTicketCc .input-group-append,
#sidebarTicketCc .input-group-btn {
    display: flex !important;
    margin-left: 0 !important;
}

#sidebarTicketCc .input-group-append .btn,
#sidebarTicketCc .input-group-btn .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    padding: 0 16px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

/* Existing CC email rows (when JS clones ccCloneRow) */
.ticket-cc-email {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
.ticket-cc-email .email.truncate {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.ticket-cc-email .delete-cc-email {
    flex: 0 0 auto !important;
    color: #ef4444 !important;
    float: none !important;
}
.ticket-cc-email .delete-cc-email i {
    font-size: 1rem !important;
    color: #ef4444 !important;
}

/* =============================================================
   Ticket Information card-footer — Reply + Closed button row.
   The two .btn-block buttons sit in col-6 columns with a negative
   row gutter; give them proper spacing and a normal radius.
   ============================================================= */
.card-sidebar .card-footer {
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid var(--border-color) !important;
}

.card-sidebar .card-footer .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
}
.card-sidebar .card-footer .row > [class*="col-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.card-sidebar .card-footer .btn-block {
    margin: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* =============================================================
   View-ticket reply form — same grid normalization as the
   submitticket form. WHMCS emits col-md-4 + col-md-5 which
   leaves uneven widths; make them share the row equally.
   ============================================================= */
form[action*="viewticket"] .card-body .row,
form[action*="viewticket.php"] .card-body .row,
#ticketReplyContainer form .row,
#frmReply .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

form[action*="viewticket"] .card-body .row > .form-group[class*="col-"],
form[action*="viewticket.php"] .card-body .row > .form-group[class*="col-"],
#ticketReplyContainer form .row > .form-group[class*="col-"],
#frmReply .row > .form-group[class*="col-"] {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Submit/Cancel row on reply form — match the submitticket styling */
#ticketReplyContainer form .form-group.text-center,
#frmReply .form-group.text-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
}
#ticketReplyContainer form .form-group.text-center .btn,
#frmReply .form-group.text-center .btn {
    min-width: 120px !important;
    padding: 10px 24px !important;
    margin: 0 !important;
}

/* =============================================================
   View-ticket: messenger-style chat thread
   Keeps WHMCS's existing DOM (.ticket-reply / .ticket-reply.staff /
   .posted-by / .message), uses `text-align` + `inline-block` for
   bubble alignment (NOT flex-column + align-self, which caused the
   bubbles to collapse to 1-char-wide strips on Chrome).
   ============================================================= */

/* Outer shell: acts as scroll viewport. Uses flex-direction: column-reverse
   so that (a) WHMCS's DOM order "newest first" renders visually "newest last",
   giving a natural chat feel, and (b) the browser initial scroll position
   sits at the bottom (main-start of a column-reverse flex) without any JS.
   Each card-body pins with flex: none so theme's min-height:1px can't
   shrink them to 12px slivers. */
.card.view-ticket {
    display: flex !important;
    flex-direction: column-reverse !important;
    background: #f9fafb !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
    padding: 0 !important;
}

.card.view-ticket > .card-body {
    flex: none !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
}

/* Title card-body (DOM first-child) must stay visually on TOP.
   In column-reverse, higher `order` = closer to main-end = TOP. */
.card.view-ticket > .card-body:first-child {
    order: 9999 !important;
}

/* All reply card-bodies share the same order so column-reverse flips
   them: WHMCS outputs newest-first → they now appear newest-LAST
   (at the bottom, right above the Reply form). */
.card.view-ticket > .card-body:not(:first-child) {
    order: 0 !important;
}
.card.view-ticket::-webkit-scrollbar { width: 8px; }
.card.view-ticket::-webkit-scrollbar-track { background: transparent; }
.card.view-ticket::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Title card-body (first) — sticky chat header with Reply/Closed buttons */
.card.view-ticket > .card-body:first-child {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-color) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.card.view-ticket .card-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 1rem !important;
    margin: 0 !important;
    white-space: normal !important;
}
.card.view-ticket .card-title .ticket-actions {
    margin-left: auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
}
.card.view-ticket > .card-body:first-child > p {
    margin: 8px 0 0 0 !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
}

/* Each reply card-body: plain block wrapping a single bubble that uses
   margin-left/right: auto to stick left (staff) or right (client). */
.card.view-ticket > .card-body:not(:first-child) {
    display: block !important;
    padding: 6px 20px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

/* Edge paddings are flipped because column-reverse flips the visual order:
   DOM :last-child = oldest msg = VISUAL top edge (needs top breathing room)
   DOM :nth-of-type(2) = newest msg = VISUAL bottom edge */
.card.view-ticket > .card-body:last-child {
    padding-top: 20px !important;
}
.card.view-ticket > .card-body:not(:first-child):nth-of-type(2) {
    padding-bottom: 20px !important;
}

/* Bubble wrapper: block + width: fit-content + margin auto.
   Avoids inline-block quirks and WHMCS theme floats that collapse
   ticket-reply to zero height. Hard-reset float/overflow/width. */
.card.view-ticket .ticket-reply {
    display: block !important;
    width: fit-content !important;
    max-width: 72% !important;
    min-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}
/* Staff sticks to the left */
.card.view-ticket .ticket-reply.staff {
    margin-right: auto !important;
    margin-left: 0 !important;
}
/* Client sticks to the right */
.card.view-ticket .ticket-reply:not(.staff) {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* .posted-by = meta line above the bubble. Reset float from theme. */
.card.view-ticket .ticket-reply .posted-by {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    padding: 0 6px !important;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    line-height: 1.3 !important;
    text-align: left !important;
    overflow: visible !important;
}

/* Client posted-by meta aligns right, next to right-stuck bubble */
.card.view-ticket .ticket-reply:not(.staff) .posted-by {
    text-align: right !important;
}

.card.view-ticket .ticket-reply .posted-by .posted-by-name {
    font-weight: 600 !important;
    color: var(--text-main) !important;
    font-size: 0.78rem !important;
}

.card.view-ticket .ticket-reply .posted-by .posted-on {
    color: var(--text-muted) !important;
    font-size: 0.72rem !important;
}

/* Role badge — tiny pill, no float (theme uses float-md-right on it) */
.card.view-ticket .ticket-reply .posted-by .requestor-badge,
.card.view-ticket .ticket-reply .posted-by .label.requestor-badge,
.card.view-ticket .ticket-reply .posted-by .float-md-right {
    margin-left: 4px !important;
    float: none !important;
    font-size: 0.6rem !important;
    padding: 1px 7px !important;
    line-height: 1.5 !important;
    border-radius: 99px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Bubble = .message — reset theme's floats/widths, force block */
.card.view-ticket .ticket-reply .message {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    border: 1px solid transparent !important;
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Staff bubble: mint green, corner "tail" pointing bottom-left */
.card.view-ticket .ticket-reply.staff .message {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
    color: #064e3b !important;
    border-bottom-left-radius: 4px !important;
}

/* Client bubble: white, corner "tail" pointing bottom-right */
.card.view-ticket .ticket-reply:not(.staff) .message {
    background: #ffffff !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    border-bottom-right-radius: 4px !important;
}

/* Markdown content inside bubbles */
.card.view-ticket .ticket-reply .message p {
    margin: 0 0 6px 0 !important;
}
.card.view-ticket .ticket-reply .message p:last-child {
    margin-bottom: 0 !important;
}
.card.view-ticket .ticket-reply .message hr {
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin: 8px 0 !important;
}

/* Rating stars: subtle footer under staff messages */
.card.view-ticket .ticket-reply .rating {
    margin-top: 6px !important;
    opacity: 0.55 !important;
    transition: opacity 0.2s ease !important;
    display: inline-flex !important;
    gap: 1px !important;
}
.card.view-ticket .ticket-reply .rating:hover {
    opacity: 1 !important;
}

/* Mobile: wider bubbles, tighter gutters */
@media (max-width: 767px) {
    .card.view-ticket .ticket-reply {
        max-width: 88% !important;
    }
    .card.view-ticket > .card-body:not(:first-child) {
        padding: 6px 12px !important;
    }
    .card.view-ticket {
        max-height: 70vh !important;
    }
}

/* Unified button interactions: no jumps, lifts or hover shadows */
.btn,
.btn-read-more,
.btn-back,
.btn-hero,
.btn-support,
.product-btn,
.btn-panel-action,
.pagination .page-link,
.card-footer .btn,
.input-group-append .btn,
.input-group-prepend .btn {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn-read-more:hover,
.btn-read-more:focus,
.btn-read-more:active,
.btn-back:hover,
.btn-back:focus,
.btn-back:active,
.btn-hero:hover,
.btn-hero:focus,
.btn-hero:active,
.btn-support:hover,
.btn-support:focus,
.btn-support:active,
.product-btn:hover,
.product-btn:focus,
.product-btn:active,
.btn-panel-action:hover,
.btn-panel-action:focus,
.btn-panel-action:active,
.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-link:active,
.card-footer .btn:hover,
.card-footer .btn:focus,
.card-footer .btn:active,
.input-group-append .btn:hover,
.input-group-append .btn:focus,
.input-group-append .btn:active,
.input-group-prepend .btn:hover,
.input-group-prepend .btn:focus,
.input-group-prepend .btn:active {
    transform: none !important;
    box-shadow: none !important;
}