/* ==========================================================================
   QaziHost WHMCS theme - CLIENT AREA SHELL (logged-in pages)
   Header / nav / drawer / sidebars / dashboard + a dark skin for the twenty-one (Bootstrap 4) markup that the
   not-yet-restyled pages still use. Loaded after qazihost.css; tokens come from there (--qh-*).
   ========================================================================== */

/* ---------------------------------------------------------------- base */
:root { --qh-side-w: 256px; --qh-side-w-min: 72px; --qh-top-h: 58px; }
.qh-shell-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--qh-bg);
    color: var(--qh-text);
    font-size: 14px;
    line-height: 1.55;
}
.qh-shell-body::-webkit-scrollbar { width: 11px; height: 11px; }
.qh-shell-body::-webkit-scrollbar-track { background: var(--qh-bg); }
.qh-shell-body::-webkit-scrollbar-thumb { background: rgba(var(--qh-fg-rgb), 0.14); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; min-height: 48px; }
/* twenty-one sets html/body height:100%, which turns the flex body into a fixed-height box and lets
   long pages overflow behind the footer. The shell must grow with its content. */
html { height: auto; }
body.qh-shell-body { height: auto; min-height: 100vh; min-height: 100dvh; }
.qh-shell-body a { color: var(--qh-accent-text); text-decoration: none; transition: color 0.2s; }
.qh-shell-body a:hover { color: var(--qh-accent-text); text-decoration: none; }
.qh-shell-body h1, .qh-shell-body h2, .qh-shell-body h3, .qh-shell-body h4, .qh-shell-body h5, .qh-shell-body h6 { color: var(--qh-white); font-weight: 600; letter-spacing: -0.015em; }
.qh-shell-body p { color: var(--qh-text); }
.qh-shell-body .text-muted, .qh-shell-body small, .qh-shell-body .small { color: var(--qh-muted) !important; }
.qh-shell-body hr { border-top-color: var(--qh-border); }
.qh-shell-body .bg-light, .qh-shell-body .bg-white { background: var(--qh-surface) !important; }
.qh-shell-body .border, .qh-shell-body .border-top, .qh-shell-body .border-bottom { border-color: var(--qh-border) !important; }
.qh-hide-xs { display: inline-flex; }
.qh-measure { height: 0; padding: 0; margin: 0 auto; max-width: 1240px; visibility: hidden; }
/* .qh-btn variants must win over the generic ".qh-shell-body a" colour */
.qh-shell-body a.qh-btn-primary, .qh-shell-body .qh-btn-primary, .qh-shell-body a.qh-btn-primary:hover { color: var(--qh-on-accent); }
.qh-shell-body a.qh-btn-ghost, .qh-shell-body .qh-btn-ghost { color: var(--qh-text); }
.qh-shell-body a.qh-btn-ghost:hover { color: var(--qh-white); }
.qh-shell-body a.qh-btn-wa, .qh-shell-body a.qh-btn-wa:hover { color: var(--qh-on-accent); }
.qh-dropdown a.is-current { background: var(--qh-accent-soft); color: var(--qh-white); }

/* ---------------------------------------------------------------- app frame (sidebar + content column) */
.qh-app { display: flex; min-height: 100vh; min-height: 100dvh; }
.qh-frame { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qh-container { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 28px; }
.qh-container-fluid { width: 100%; padding: 0 28px; }
.qh-main { flex: 1 0 auto; padding: 26px 0 48px; }
.qh-footer { flex-shrink: 0; }

/* ---------------------------------------------------------------- side navigation */
.qh-side {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 var(--qh-side-w);
    width: var(--qh-side-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--qh-surface) 0%, var(--qh-bg-2) 100%);
    border-right: 1px solid var(--qh-border);
    box-shadow: 1px 0 0 rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k)));
    z-index: 1000;
}
.qh-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--qh-top-h); padding: 0 18px; border-bottom: 1px solid var(--qh-border); flex: none; }
.qh-brand { display: inline-flex; align-items: center; min-width: 0; }
.qh-brand img { display: block; height: 28px; width: auto; }
.qh-brand-mark { display: none; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: var(--qh-accent); color: var(--qh-on-accent); font-family: var(--qh-font-display); font-weight: 650; font-size: 1rem; box-shadow: 0 1px 0 rgba(var(--qh-fg-rgb), 0.12) inset, 0 2px 8px rgba(var(--qh-shade-rgb), calc(0.4 * var(--qh-shade-k))); }
.qh-side .qh-side-close { display: none; }
.qh-side-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--qh-border); flex: none; min-width: 0; }
.qh-side-user-text { min-width: 0; line-height: 1.25; }
.qh-side-user-text strong { display: block; color: var(--qh-white); font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-side-user-text small { display: block; color: var(--qh-faint); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; scrollbar-width: thin; scrollbar-color: transparent transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.qh-side-scroll:hover, .qh-side-scroll:focus-within { scrollbar-color: rgba(var(--qh-fg-rgb), 0.16) transparent; }
.qh-side-scroll::-webkit-scrollbar { width: 8px; }
.qh-side-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.qh-side-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--qh-fg-rgb), 0.16); }
.qh-side-group { margin-bottom: 6px; }
.qh-side-group-title { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 0 10px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--qh-faint); }
.qh-side-group-title i { display: none; }
.qh-side-group:first-child .qh-side-group-title { margin-top: 6px; }
.qh-side-divider { height: 1px; margin: 6px 10px; background: var(--qh-border); }
.qh-side-link {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    margin: 1px 0;
    border: 0;
    border-radius: var(--qh-radius-sm);
    background: transparent;
    color: var(--qh-muted);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.qh-shell-body a.qh-side-link { color: var(--qh-muted); }
.qh-side-link i { width: 18px; flex: none; text-align: center; font-size: 0.95rem; color: var(--qh-faint); transition: color 0.15s; }
.qh-side-link i.fa-angle-right, .qh-side-link i.fa-circle { font-size: 0.5rem; }
.qh-side-link i.fa-angle-right::before { content: '\f111'; font-weight: 400; }
.qh-side-link span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qh-shell-body .qh-side-link:hover, .qh-side-link:focus-visible { background: rgba(var(--qh-fg-rgb), 0.05); color: var(--qh-white); outline: none; }
.qh-side-link:hover i { color: var(--qh-muted); }
.qh-shell-body .qh-side-link.is-active { background: var(--qh-accent-soft); color: var(--qh-white); font-weight: 600; }
.qh-side-link.is-active i { color: var(--qh-accent-text); }
.qh-side-link.is-active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--qh-accent); }
.qh-shell-body .qh-side-link.qh-logout { color: var(--qh-red-2); }
.qh-shell-body .qh-side-link.qh-logout:hover { background: rgba(var(--qh-red-rgb), 0.10); color: var(--qh-red-2); }
.qh-side-link.qh-logout i { color: var(--qh-red-2); }
.qh-side-badge { flex: none !important; margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.10); color: var(--qh-white); font-size: 0.68rem; font-weight: 600; line-height: 20px; text-align: center; }
.qh-side-badge.is-zero { display: none; }
.qh-side-foot { flex: none; padding: 8px 12px 12px; border-top: 1px solid var(--qh-border); }
.qh-shell-body .qh-side-wa { color: var(--qh-wa); }
.qh-side-wa i { color: var(--qh-wa) !important; }
.qh-shell-body .qh-side-wa:hover { background: rgba(37, 211, 102, 0.10); color: var(--qh-wa); }


/* ---------------------------------------------------------------- top bar */
.qh-top {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--qh-top-h);
    padding: 0 28px;
    background: rgba(var(--qh-bg-rgb), 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--qh-border);
    transition: box-shadow 0.3s;
}
.qh-top.is-scrolled { box-shadow: 0 6px 24px rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); }
.qh-top-brand { display: none; align-items: center; }
.qh-top-brand img { display: block; height: 24px; width: auto; }
.qh-top-crumb { min-width: 0; flex: 1 1 auto; }
.qh-shell-body .qh-top-crumb .breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; background: transparent; padding: 0; margin: 0; font-size: 0.82rem; white-space: nowrap; overflow: hidden; }
.qh-shell-body .qh-top-crumb .breadcrumb-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qh-shell-body .breadcrumb-item, .qh-shell-body .breadcrumb-item a { color: var(--qh-muted); }
.qh-shell-body .breadcrumb-item a:hover { color: var(--qh-white); }
.qh-shell-body .breadcrumb-item.active { color: var(--qh-white); font-weight: 600; }
.qh-shell-body .breadcrumb-item + .breadcrumb-item::before { color: var(--qh-faint); content: '/'; padding: 0 8px; }
.qh-shell-body .qh-top-crumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.qh-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.qh-top-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--qh-radius-sm); border: 1px solid var(--qh-border-2); background: rgba(var(--qh-fg-rgb), 0.04); color: var(--qh-text); font-size: 0.82rem; font-weight: 600; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.qh-shell-body .qh-top-btn { color: var(--qh-text); }
.qh-shell-body .qh-top-btn:hover { background: rgba(var(--qh-fg-rgb), 0.08); border-color: rgba(var(--qh-fg-rgb), 0.22); color: var(--qh-white); }
.qh-top-btn i { color: var(--qh-accent-text); font-size: 0.8rem; }
.qh-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--qh-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--qh-muted);
    font-size: 0.98rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.qh-shell-body a.qh-icon-btn { color: var(--qh-muted); }
.qh-icon-btn:hover, .qh-icon-btn:focus-visible, .qh-shell-body a.qh-icon-btn:hover { background: rgba(var(--qh-fg-rgb), 0.06); border-color: var(--qh-border); color: var(--qh-white); outline: none; }
.qh-shell-body .qh-wa-btn, .qh-shell-body .qh-wa-btn:hover { color: var(--qh-wa); }
.qh-shell-body .qh-wa-btn:hover { background: rgba(37, 211, 102, 0.12); }
.qh-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--qh-accent);
    color: var(--qh-on-accent);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--qh-bg);
}
.qh-count.is-zero { display: none; }
.qh-bell .qh-count { background: var(--qh-red); }
.qh-burger { display: none; }

/* user menu */
.qh-user { position: relative; margin-left: 4px; }
.qh-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 8px 0 3px;
    border-radius: var(--qh-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--qh-text);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.qh-user-btn:hover, .qh-user.is-open .qh-user-btn { border-color: var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.04); }
.qh-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--qh-accent);
    color: var(--qh-on-accent);
    font-family: var(--qh-font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1px rgba(var(--qh-fg-rgb), 0.10) inset;
}
.qh-avatar-lg { flex-basis: 40px; width: 40px; height: 40px; font-size: 1rem; }
.qh-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-caret { font-size: 0.6rem !important; color: var(--qh-faint); transition: transform 0.25s; }
.qh-user.is-open .qh-caret { transform: rotate(180deg); }

/* dropdown (custom, no Popper) */
.qh-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--qh-surface-2);
    border: 1px solid var(--qh-border-2);
    border-radius: var(--qh-radius);
    box-shadow: var(--qh-shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 0.15s var(--qh-ease), transform 0.15s var(--qh-ease-out), visibility 0.15s;
    z-index: 950;
}
.qh-dropdown-right { left: auto; right: 0; }
.qh-has-dropdown.is-open > .qh-dropdown, .qh-user.is-open > .qh-dropdown { opacity: 1; visibility: visible; transform: none; }
.qh-dropdown li { list-style: none; }
.qh-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--qh-text);
    font-size: 0.84rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.qh-dropdown a i { width: 18px; text-align: center; color: var(--qh-faint); font-size: 0.85rem; }
.qh-dropdown a:hover { background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-white); }
.qh-dropdown a:hover i { color: var(--qh-muted); }
.qh-dropdown a.qh-logout { color: var(--qh-red-2); }
.qh-dropdown a.qh-logout:hover { background: rgba(var(--qh-red-rgb), 0.12); color: var(--qh-red-2); }
.qh-dropdown-divider { height: 1px; margin: 5px 4px; background: var(--qh-border); }
.qh-badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.10); color: var(--qh-white); font-size: 0.68rem; font-weight: 600; }
.qh-user-menu { min-width: 260px; padding: 0; overflow: hidden; }
.qh-user-menu-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-user-menu-head strong { display: block; color: var(--qh-white); font-size: 0.88rem; line-height: 1.3; }
.qh-user-menu-head small { display: block; color: var(--qh-muted); font-size: 0.74rem; }
.qh-user-menu ul { list-style: none; margin: 0; padding: 6px; }
.qh-btn-wa { background: var(--qh-wa); color: var(--qh-on-accent); }
.qh-btn-wa:hover { background: var(--qh-wa-2); color: var(--qh-on-accent); }
.qh-btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.qh-btn-xs { padding: 6px 11px; font-size: 0.76rem; border-radius: 8px; }

/* off-canvas drawer (< 992px) */
.qh-side-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(var(--qh-shade-rgb), calc(0.6 * var(--qh-shade-k))); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }

/* ---------------------------------------------------------------- page head */
.qh-page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.qh-page-title { font-family: var(--qh-font-display); font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.qh-shell-body .qh-breadcrumb { display: none; }

/* ---------------------------------------------------------------- sidebars (twenty-one markup) + cards */
.qh-sidebar .card-sidebar,
.qh-shell-body .card {
    background: var(--qh-card-bg);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    box-shadow: var(--qh-shadow-card);
    color: var(--qh-text);
}
.qh-shell-body .card-header { background: rgba(var(--qh-fg-rgb), 0.02); border-bottom: 1px solid var(--qh-border); padding: 12px 16px; border-radius: var(--qh-radius-lg) var(--qh-radius-lg) 0 0 !important; }
.qh-shell-body .card-header .card-title, .qh-shell-body .card-title { font-size: 0.92rem; font-weight: 600; color: var(--qh-white); }
.qh-shell-body .card-body { padding: 16px; color: var(--qh-text); }
.qh-shell-body .card-footer { background: rgba(var(--qh-fg-rgb), 0.02); border-top: 1px solid var(--qh-border); padding: 12px 16px; border-radius: 0 0 var(--qh-radius-lg) var(--qh-radius-lg) !important; }
.qh-shell-body .card-minimise { color: var(--qh-faint); cursor: pointer; transition: transform 0.25s, color 0.2s; font-size: 0.75rem; margin-top: 4px; }
.qh-shell-body .card-minimise:hover { color: var(--qh-text); }
.qh-shell-body .card-minimise.minimised { transform: rotate(180deg); }
.qh-shell-body .list-group-item {
    background: transparent;
    border-color: var(--qh-border);
    color: var(--qh-text);
    padding: 11px 16px;
    font-size: 0.88rem;
    transition: background 0.2s, color 0.2s;
}
.qh-shell-body a.list-group-item:hover, .qh-shell-body .list-group-item-action:hover { background: rgba(var(--qh-fg-rgb), 0.04); color: var(--qh-white); }
.qh-shell-body .list-group-item.active { background: var(--qh-accent-soft); border-color: var(--qh-border); color: var(--qh-white); box-shadow: inset 3px 0 0 var(--qh-accent); }
.qh-shell-body .list-group-item.disabled { color: var(--qh-faint); background: transparent; }
.qh-shell-body .list-group-item { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.qh-shell-body .list-group-item .small, .qh-shell-body .list-group-item small { color: var(--qh-faint); }
.qh-shell-body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.qh-shell-body .sidebar-menu-item-icon-wrapper { width: 20px; text-align: center; color: var(--qh-muted); }
.qh-shell-body .list-group-item.active .sidebar-menu-item-icon { color: var(--qh-accent-text); }
.qh-shell-body .sidebar-menu-item-label { flex: 1; }
.qh-shell-body .sidebar-menu-item-badge .badge, .qh-shell-body .list-group-item .badge { background: var(--qh-white); color: var(--qh-ink); border-radius: 999px; padding: 3px 8px; font-size: 0.68rem; }
.qh-shell-body .card-sidebar .card-body { font-size: 0.88rem; color: var(--qh-muted); }
.qh-shell-body .card-sidebar .card-body strong, .qh-shell-body .card-sidebar .card-body b { color: var(--qh-text); }
.qh-shell-body .card-sidebar .card-body .btn { margin-top: 8px; }
.qh-shell-body .card-sidebar .list-group-flush .list-group-item:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- dashboard */
.qh-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.qh-dash-title { font-family: var(--qh-font-display); font-size: 1.75rem; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.02em; }
.qh-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.qh-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: var(--qh-radius-lg);
    border: 1px solid var(--qh-border);
    background: var(--qh-card-bg);
    box-shadow: var(--qh-shadow-card);
    color: var(--qh-text);
    overflow: hidden;
    transition: border-color var(--qh-t-smooth), background var(--qh-t-smooth);
}
.qh-tile:hover { border-color: rgba(var(--qh-fg-rgb), 0.2); background: var(--qh-surface-2); color: var(--qh-text); }
.qh-tile-ico { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.06); border: 1px solid var(--qh-border); color: var(--qh-muted); font-size: 0.85rem; }
.qh-tile-num { order: 2; font-family: var(--qh-font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--qh-white); font-variant-numeric: tabular-nums; }
.qh-tile-label { order: 1; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qh-faint); padding-right: 40px; }
.qh-tile-label em { font-style: normal; color: var(--qh-amber); }
.qh-tile.is-attention { border-color: rgba(var(--qh-amber-rgb), 0.45); }
.qh-addon-html { margin-bottom: 18px; }
.qh-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.qh-dash-panel-wide { margin-bottom: 16px; }
.qh-panel {
    background: var(--qh-card-bg);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    box-shadow: var(--qh-shadow-card);
    overflow: hidden;
}
.qh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-panel-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--qh-white); }
.qh-panel-title i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 0.8rem; }
.qh-panel-body { padding: 14px 16px; font-size: 0.88rem; color: var(--qh-text); }
.qh-panel-body p:last-child { margin-bottom: 0; }
.qh-panel-list .list-group-item:first-child { border-top: 0; }
.qh-panel-foot { padding: 10px 16px; border-top: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.02); font-size: 0.82rem; color: var(--qh-muted); }
.qh-panel-foot:empty { display: none; }

/* active products list (WHMCS markup inside the panel body) */
.qh-shell-body .div-service-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--qh-border); cursor: pointer; }
.qh-shell-body .div-service-item:last-child { border-bottom: 0; }
.qh-shell-body .div-service-status { flex: 0 0 auto; }
.qh-shell-body .div-service-status .label-placeholder { display: none; }
.qh-shell-body .div-service-status .label { width: auto; max-width: none; overflow: visible; text-overflow: clip; }
.qh-shell-body .div-service-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qh-shell-body .div-service-name .text-domain { color: var(--qh-muted); font-size: 0.8rem; }
.qh-shell-body .div-service-buttons { flex: 0 0 auto; display: flex; gap: 6px; }
.qh-shell-body .label, .qh-shell-body .status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(var(--qh-fg-rgb), 0.08);
    color: var(--qh-text);
}
.qh-shell-body .label-success, .qh-shell-body .status-active, .qh-shell-body .label-active, .qh-shell-body .label-paid, .qh-shell-body .status-paid, .qh-shell-body .status-completed, .qh-shell-body .label-completed { background: rgba(var(--qh-green-rgb), 0.12); color: var(--qh-green-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-green-rgb), 0.35); }
.qh-shell-body .label-warning, .qh-shell-body .status-pending, .qh-shell-body .label-pending, .qh-shell-body .status-suspended, .qh-shell-body .label-suspended { background: rgba(var(--qh-amber-rgb), 0.12); color: var(--qh-amber-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-amber-rgb), 0.35); }
.qh-shell-body .label-danger, .qh-shell-body .status-terminated, .qh-shell-body .status-cancelled, .qh-shell-body .label-terminated, .qh-shell-body .label-cancelled, .qh-shell-body .status-unpaid, .qh-shell-body .label-unpaid, .qh-shell-body .status-fraud { background: rgba(var(--qh-red-rgb), 0.12); color: var(--qh-red-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-red-rgb), 0.35); }
.qh-shell-body .label-info, .qh-shell-body .label-default { background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-text); box-shadow: inset 0 0 0 1px rgba(var(--qh-fg-rgb), 0.14); }
/* WHMCS ticket-status labels carry an inline admin colour (e.g. #000000) - neutralise to a soft chip */
.qh-shell-body .label[style*="background-color"] { background-color: rgba(var(--qh-fg-rgb), 0.08) !important; color: var(--qh-text); box-shadow: inset 0 0 0 1px rgba(var(--qh-fg-rgb), 0.14); }

/* ---------------------------------------------------------------- Bootstrap 4 dark skin (scoped) */
.qh-shell-body .btn { border-radius: var(--qh-radius-sm); font-weight: 600; font-size: 0.86rem; padding: 8px 16px; transition: transform var(--qh-t-smooth), box-shadow var(--qh-t-smooth), background var(--qh-t-smooth), border-color var(--qh-t-smooth), color var(--qh-t-smooth); }
.qh-shell-body .btn:focus { box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .btn-sm, .qh-shell-body .btn-group-sm > .btn { padding: 5px 11px; font-size: 0.78rem; }
.qh-shell-body .btn-xs { padding: 3px 9px; font-size: 0.74rem; }
.qh-shell-body .btn-lg { padding: 12px 22px; font-size: 0.95rem; }
.qh-shell-body .btn-primary, .qh-shell-body .btn-primary:not(:disabled):not(.disabled):active { background: var(--qh-accent); border-color: transparent; color: var(--qh-on-accent); box-shadow: 0 4px 14px var(--qh-glow); }
.qh-shell-body .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--qh-accent-rgb), 0.35); color: var(--qh-on-accent); }
.qh-shell-body .btn-default, .qh-shell-body .btn-secondary, .qh-shell-body .btn-light, .qh-shell-body .btn-outline-primary, .qh-shell-body .btn-outline-secondary { background: rgba(var(--qh-fg-rgb), 0.05); border: 1px solid rgba(var(--qh-fg-rgb), 0.14); color: var(--qh-text); }
.qh-shell-body .btn-default:hover, .qh-shell-body .btn-secondary:hover, .qh-shell-body .btn-light:hover, .qh-shell-body .btn-outline-primary:hover, .qh-shell-body .btn-outline-secondary:hover { background: rgba(var(--qh-fg-rgb), 0.1); border-color: rgba(var(--qh-fg-rgb), 0.28); color: var(--qh-white); }
.qh-shell-body .btn-success { background: var(--qh-accent); border-color: transparent; color: var(--qh-on-accent); box-shadow: 0 4px 14px rgba(var(--qh-accent-rgb), 0.25); }
.qh-shell-body .btn-success:hover, .qh-shell-body .btn-success:focus { transform: translateY(-1px); background: var(--qh-accent-3); color: var(--qh-on-accent); box-shadow: 0 10px 24px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .btn-danger { background: rgba(var(--qh-red-rgb), 0.14); border-color: rgba(var(--qh-red-rgb), 0.35); color: var(--qh-red-2); }
.qh-shell-body .btn-danger:hover { background: var(--qh-red); border-color: var(--qh-red); color: var(--qh-on-accent); }
.qh-shell-body .btn-info { background: rgba(var(--qh-fg-rgb), 0.08); border-color: rgba(var(--qh-fg-rgb), 0.28); color: var(--qh-white); }
.qh-shell-body .btn-info:hover { background: var(--qh-white); color: var(--qh-ink); }
.qh-shell-body .btn-warning { background: rgba(var(--qh-amber-rgb), 0.14); border-color: rgba(var(--qh-amber-rgb), 0.35); color: var(--qh-amber-2); }
.qh-shell-body .btn-warning:hover { background: var(--qh-amber); color: var(--qh-ink); }
.qh-shell-body .btn-link { color: var(--qh-accent-text); }
.qh-shell-body .btn.disabled, .qh-shell-body .btn:disabled { opacity: 0.45; transform: none; box-shadow: none; }
.qh-shell-body .btn-group > .btn { border-radius: var(--qh-radius-sm); }
.qh-shell-body .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.qh-shell-body .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.qh-shell-body .form-control, .qh-shell-body .custom-select, .qh-shell-body select.form-control, .qh-shell-body textarea.form-control {
    background: rgba(var(--qh-fg-rgb), 0.03);
    border: 1px solid rgba(var(--qh-fg-rgb), 0.12);
    border-radius: var(--qh-radius-sm);
    color: var(--qh-white);
    height: auto;
    padding: 9px 13px;
    font-size: 0.9rem;
    box-shadow: none;
}
.qh-shell-body .form-control::placeholder { color: var(--qh-faint); }
.qh-shell-body .form-control:focus, .qh-shell-body .custom-select:focus { background: rgba(var(--qh-fg-rgb), 0.045); border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-fg-rgb), 0.10); color: var(--qh-white); }
.qh-shell-body .form-control:disabled, .qh-shell-body .form-control[readonly] { background: rgba(var(--qh-fg-rgb), 0.02); color: var(--qh-muted); }
.qh-shell-body select.form-control option, .qh-shell-body .custom-select option { background: var(--qh-surface-2); color: var(--qh-text); }
.qh-shell-body .form-control-sm { padding: 6px 10px; font-size: 0.82rem; }
.qh-shell-body label, .qh-shell-body .col-form-label, .qh-shell-body .control-label { color: var(--qh-text); font-weight: 600; font-size: 0.85rem; }
.qh-shell-body .form-text, .qh-shell-body .help-block { color: var(--qh-muted); }
.qh-shell-body .input-group-text { background: rgba(var(--qh-fg-rgb), 0.05); border: 1px solid rgba(var(--qh-fg-rgb), 0.12); color: var(--qh-muted); border-radius: var(--qh-radius-sm); }
.qh-shell-body .custom-control-label::before { background: rgba(var(--qh-fg-rgb), 0.05); border-color: rgba(var(--qh-fg-rgb), 0.25); }
.qh-shell-body .custom-control-input:checked ~ .custom-control-label::before { background: var(--qh-accent); border-color: var(--qh-accent); }
.qh-shell-body input[type="checkbox"], .qh-shell-body input[type="radio"] { accent-color: var(--qh-accent); }

.qh-shell-body .table { color: var(--qh-text); border-color: var(--qh-border); margin-bottom: 0; }
.qh-shell-body .table th, .qh-shell-body .table td { border-top: 1px solid var(--qh-border); padding: 11px 12px; vertical-align: middle; font-size: 0.88rem; }
.qh-shell-body .table thead th { border-bottom: 1px solid var(--qh-border-2); border-top: 0; color: var(--qh-muted); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-shell-body .table td, .qh-shell-body .table th, .qh-shell-body .table-list > tbody > tr > td, .qh-shell-body table.table-list thead th { background-color: transparent; }
.qh-shell-body .dataTables_wrapper table.table-list thead th.sorting_asc, .qh-shell-body .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: rgba(var(--qh-fg-rgb), 0.04); }
.qh-shell-body .table-striped tbody tr:nth-of-type(odd) { background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-shell-body .table-hover tbody tr:hover { background: rgba(var(--qh-fg-rgb), 0.04); color: var(--qh-text); }
.qh-shell-body .table-bordered, .qh-shell-body .table-bordered th, .qh-shell-body .table-bordered td { border-color: var(--qh-border); }
.qh-shell-body .table .thead-light th { background: rgba(var(--qh-fg-rgb), 0.03); color: var(--qh-muted); border-color: var(--qh-border); }
.qh-shell-body table.dataTable thead .sorting::after, .qh-shell-body table.dataTable thead .sorting_asc::after, .qh-shell-body table.dataTable thead .sorting_desc::after { color: var(--qh-accent-text); opacity: 0.8; }
.qh-shell-body .dataTables_wrapper .dataTables_filter input, .qh-shell-body .dataTables_wrapper .dataTables_length select { background: rgba(var(--qh-fg-rgb), 0.03); border: 1px solid rgba(var(--qh-fg-rgb), 0.12); border-radius: var(--qh-radius-sm); color: var(--qh-white); padding: 6px 10px; margin: 0 6px 10px 0; }
.qh-shell-body .dataTables_wrapper .dataTables_info, .qh-shell-body .dataTables_wrapper .dataTables_length label, .qh-shell-body .dataTables_wrapper .dataTables_filter label { color: var(--qh-muted); font-size: 0.82rem; font-weight: 500; }
.qh-shell-body .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--qh-muted) !important; border: 1px solid transparent; border-radius: 8px; padding: 4px 10px; }
.qh-shell-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--qh-fg-rgb), 0.06) !important; color: var(--qh-white) !important; border-color: transparent; }
.qh-shell-body .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--qh-accent-soft) !important; color: var(--qh-white) !important; border-color: rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .table-container, .qh-shell-body .listtable { background: transparent; }

.qh-shell-body .alert { border-radius: var(--qh-radius); border: 1px solid transparent; font-size: 0.9rem; }
.qh-shell-body .alert-danger { background: rgba(var(--qh-red-rgb), 0.10); border-color: rgba(var(--qh-red-rgb), 0.35); color: var(--qh-red-2); }
.qh-shell-body .alert-info { background: rgba(var(--qh-fg-rgb), 0.06); border-color: rgba(var(--qh-fg-rgb), 0.28); color: var(--qh-white); }
.qh-shell-body .alert-success { background: rgba(var(--qh-green-rgb), 0.10); border-color: rgba(var(--qh-green-rgb), 0.35); color: var(--qh-green-2); }
.qh-shell-body .alert-warning { background: rgba(var(--qh-amber-rgb), 0.10); border-color: rgba(var(--qh-amber-rgb), 0.35); color: var(--qh-amber-2); }
.qh-shell-body .alert .alert-link { color: inherit; text-decoration: underline; }
.qh-shell-body .network-issue-alert { border-radius: 0; border-width: 0 0 1px; margin: 0; }
.qh-shell-body .verification-banner { background: rgba(var(--qh-amber-rgb), 0.10); border-bottom: 1px solid rgba(var(--qh-amber-rgb), 0.3); color: var(--qh-amber-2); padding: 10px 0; }
.qh-shell-body .verification-banner .btn { padding: 5px 12px; font-size: 0.8rem; }

.qh-shell-body .badge { font-weight: 600; border-radius: 999px; padding: 3px 8px; }
.qh-shell-body .badge-info, .qh-shell-body .badge-primary { background: var(--qh-white); color: var(--qh-ink); }
.qh-shell-body .badge-success { background: rgba(var(--qh-green-rgb), 0.2); color: var(--qh-green-2); }
.qh-shell-body .badge-danger { background: rgba(var(--qh-red-rgb), 0.2); color: var(--qh-red-2); }
.qh-shell-body .badge-warning { background: rgba(var(--qh-amber-rgb), 0.2); color: var(--qh-amber-2); }
.qh-shell-body .badge-secondary, .qh-shell-body .badge-light { background: rgba(var(--qh-fg-rgb), 0.1); color: var(--qh-text); }

.qh-shell-body .nav-tabs { border-bottom: 1px solid var(--qh-border); }
.qh-shell-body .nav-tabs .nav-link { color: var(--qh-muted); border: 0; border-bottom: 2px solid transparent; font-weight: 600; font-size: 0.88rem; }
.qh-shell-body .nav-tabs .nav-link:hover { color: var(--qh-white); border-color: transparent; }
.qh-shell-body .nav-tabs .nav-link.active { color: var(--qh-white); background: transparent; border-bottom-color: var(--qh-accent); }
.qh-shell-body .nav-pills .nav-link { color: var(--qh-muted); border-radius: 10px; font-weight: 600; }
.qh-shell-body .nav-pills .nav-link.active { background: var(--qh-accent-soft); color: var(--qh-white); }
.qh-shell-body .tab-content { color: var(--qh-text); }

.qh-shell-body .pagination .page-link { background: transparent; border-color: var(--qh-border); color: var(--qh-muted); }
.qh-shell-body .pagination .page-item.active .page-link { background: var(--qh-accent); border-color: var(--qh-accent); color: var(--qh-on-accent); }
.qh-shell-body .pagination .page-link:hover { background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-white); }

.qh-shell-body .dropdown-menu { background: var(--qh-surface-2); border: 1px solid var(--qh-border-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(var(--qh-shade-rgb), calc(0.5 * var(--qh-shade-k))); padding: 6px; }
.qh-shell-body .dropdown-item { color: var(--qh-text); border-radius: 8px; font-size: 0.86rem; padding: 8px 12px; }
.qh-shell-body .dropdown-item:hover, .qh-shell-body .dropdown-item:focus { background: var(--qh-accent-soft); color: var(--qh-white); }
.qh-shell-body .dropdown-item.disabled { color: var(--qh-faint); }
.qh-shell-body .dropdown-divider { border-top-color: var(--qh-border); }

.qh-shell-body .modal-content { background: var(--qh-surface); color: var(--qh-text); border: 1px solid var(--qh-border-2); border-radius: var(--qh-radius-lg); box-shadow: 0 24px 64px rgba(var(--qh-shade-rgb), calc(0.6 * var(--qh-shade-k))); }
.qh-shell-body .modal-header, .qh-shell-body .modal-footer { border-color: var(--qh-border); }
.qh-shell-body .modal-header.bg-primary { background: var(--qh-accent) !important; }
.qh-shell-body .modal .close { color: var(--qh-white); opacity: 0.8; text-shadow: none; }
.qh-shell-body .modal-backdrop { background: var(--qh-overlay-solid); }
.qh-shell-body .modal-backdrop.show { opacity: 0.75; }
.qh-shell-body .modal-localisation .item { color: var(--qh-text); border: 1px solid var(--qh-border); border-radius: 10px; padding: 8px; display: block; text-align: center; }
.qh-shell-body .modal-localisation .item.active { border-color: var(--qh-accent); background: var(--qh-accent-soft); }

.qh-shell-body .popover { background: var(--qh-surface-2); border: 1px solid var(--qh-border-2); border-radius: 12px; box-shadow: 0 16px 40px rgba(var(--qh-shade-rgb), calc(0.5 * var(--qh-shade-k))); color: var(--qh-text); max-width: 320px; }
.qh-shell-body .popover-header { background: rgba(var(--qh-fg-rgb), 0.03); border-bottom-color: var(--qh-border); color: var(--qh-white); font-weight: 600; font-size: 0.85rem; }
.qh-shell-body .popover-body { color: var(--qh-text); }
.qh-shell-body .popover .arrow::before { border-bottom-color: var(--qh-border-2); border-top-color: var(--qh-border-2); }
.qh-shell-body .popover .arrow::after { border-bottom-color: var(--qh-surface-2); border-top-color: var(--qh-surface-2); }
.qh-shell-body .client-alerts { list-style: none; margin: 0; padding: 0; }
.qh-shell-body .client-alerts li a { display: flex; gap: 8px; align-items: flex-start; padding: 8px 4px; color: var(--qh-text); border-bottom: 1px solid var(--qh-border); font-size: 0.85rem; }
.qh-shell-body .client-alerts li:last-child a { border-bottom: 0; }
.qh-shell-body .client-alerts li.none { color: var(--qh-muted); font-size: 0.85rem; padding: 4px; }
.qh-shell-body .tooltip-inner { background: var(--qh-surface-3); color: var(--qh-white); border-radius: 8px; }
.qh-shell-body .progress { background: rgba(var(--qh-fg-rgb), 0.07); border-radius: 999px; height: 8px; }
.qh-shell-body .progress-bar { background: var(--qh-accent); }
.qh-shell-body .progress-bar.bg-success { background: var(--qh-green) !important; }
.qh-shell-body .progress-bar.bg-warning { background: var(--qh-amber) !important; }
.qh-shell-body .progress-bar.bg-danger { background: var(--qh-red) !important; }
.qh-shell-body #fullpage-overlay { background: rgba(var(--qh-bg-rgb), 0.85); }
.qh-shell-body .btn-return-to-admin { position: fixed; right: 16px; bottom: 16px; z-index: 950; }
/* Bootstrap 3 leftovers from third-party addon pages */
.qh-shell-body .panel { background: var(--qh-surface); border: 1px solid var(--qh-border); border-radius: var(--qh-radius-lg); box-shadow: none; color: var(--qh-text); }
.qh-shell-body .panel-heading { background: rgba(var(--qh-fg-rgb), 0.02); border-bottom: 1px solid var(--qh-border); color: var(--qh-white); font-weight: 600; border-radius: var(--qh-radius-lg) var(--qh-radius-lg) 0 0; }
.qh-shell-body .panel-body { color: var(--qh-text); }
.qh-shell-body .panel-footer { background: rgba(var(--qh-fg-rgb), 0.02); border-top: 1px solid var(--qh-border); }
.qh-shell-body .well { background: rgba(var(--qh-fg-rgb), 0.03); border: 1px solid var(--qh-border); color: var(--qh-text); border-radius: var(--qh-radius); }

/* ---------------------------------------------------------------- footer */
.qh-footer { border-top: 1px solid var(--qh-border); padding: 16px 0 18px; }
.qh-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; font-size: 0.78rem; color: var(--qh-faint); }
.qh-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.qh-footer-links a, .qh-footer-btn { color: var(--qh-muted); background: none; border: 0; padding: 0; font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: color 0.2s; }
.qh-footer-links a:hover, .qh-footer-btn:hover { color: var(--qh-white); }
.qh-footer-social { display: flex; gap: 6px; }
.qh-footer-social a { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--qh-muted); border: 1px solid var(--qh-border); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.qh-footer-social a:hover { color: var(--qh-white); border-color: rgba(var(--qh-fg-rgb), 0.3); background: rgba(var(--qh-fg-rgb), 0.05); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199.98px) {
    .qh-container, .qh-container-fluid, .qh-top { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 991.98px) {
    :root { --qh-top-h: 56px; }
    .qh-container, .qh-container-fluid, .qh-top { padding-left: 16px; padding-right: 16px; }
    .qh-main { padding: 18px 0 36px; }
    /* sidebar becomes an off-canvas drawer */
    .qh-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: min(300px, 86vw);
        flex-basis: auto;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-104%);
        transition: transform 0.25s var(--qh-ease-out);
        box-shadow: var(--qh-shadow-pop);
        border-right-color: var(--qh-border-2);
    }
    .qh-drawer-open .qh-side { transform: none; }
    .qh-drawer-open .qh-side-backdrop { opacity: 1; visibility: visible; }
    .qh-drawer-open { overflow: hidden; }
    .qh-side .qh-side-close { display: inline-flex; }
    .qh-burger { display: inline-flex; }
    .qh-top-brand { display: inline-flex; }
    .qh-top-crumb { display: none; }
    .qh-top-order span { display: none; }
    .qh-top-order { padding: 0 9px; }
    .qh-top-order i { color: var(--qh-text); }
    .qh-user-name, .qh-user-btn .qh-caret { display: none; }
    .qh-user-btn { padding: 0 2px; }
    .qh-hide-xs { display: none; }
    .qh-page-head { margin-bottom: 14px; }
    .qh-page-title { font-size: 1.2rem; }
    .qh-dash-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
    .qh-dash-title { font-size: 1.35rem; }
    .qh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .qh-tile { padding: 14px 14px 12px; gap: 8px; }
    .qh-tile-num { font-size: 1.45rem; }
    .qh-dash-grid { grid-template-columns: 1fr; }
    .qh-layout-side { order: 2; margin-top: 18px; }
    .qh-content { order: 1; }
    .qh-footer-inner { flex-direction: column; text-align: center; }
    .qh-shell-body .table th, .qh-shell-body .table td { padding: 9px 10px; font-size: 0.84rem; }
}
@media (max-width: 575.98px) {
    .qh-top-actions { gap: 2px; }
    .qh-wa-btn { display: none; }
    .qh-top-brand img { height: 22px; }
    .qh-dash-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
    .qh-dash-actions .qh-btn { justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-size: 0.82rem; min-height: 40px; }
    .qh-tile-label { font-size: 0.76rem; }
    .qh-shell-body .div-service-item { flex-wrap: wrap; }
    .qh-shell-body .div-service-buttons { width: 100%; justify-content: flex-end; }
}

/* ==========================================================================
   SERVICE DETAILS PAGE (clientareaproductdetails.tpl + modules/servers/cpanel/overview.tpl override)
   ========================================================================== */
/* the sidebar "Actions" / "Overview" cards are rendered inline on this page */
.qh-page-clientareaproductdetails .qh-sidebar [menuitemname="Service Details Actions"],
.qh-page-clientareaproductdetails .qh-sidebar [menuitemname="Service Details Overview"] { display: none !important; }

/* generic cards used by the service page */
.qh-card {
    background: var(--qh-card-bg);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    box-shadow: var(--qh-shadow-card);
    overflow: hidden;
    margin-bottom: 16px;
}
.qh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-card-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--qh-white); }
.qh-card-head h3 i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 0.8rem; }
.qh-card-head small { color: var(--qh-faint); font-size: 0.76rem; }
.qh-card-body { padding: 16px; font-size: 0.9rem; }
.qh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.02); }
.qh-card-wide { grid-column: 1 / -1; }
.qh-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.qh-svc-grid > .qh-card { margin-bottom: 0; }
.qh-kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; margin: 0; }
.qh-kv dt, .qh-kv dd { padding: 10px 16px; margin: 0; border-top: 1px solid var(--qh-border); font-size: 0.86rem; }
.qh-kv dt:first-of-type, .qh-kv dd:first-of-type { border-top: 0; }
.qh-kv dt { color: var(--qh-muted); font-weight: 600; }
.qh-kv dd { color: var(--qh-text); word-break: break-word; }
.qh-kv dd small { color: var(--qh-faint); }
.qh-svc-empty { text-align: center; padding: 34px 16px; color: var(--qh-muted); }
.qh-svc-empty i { font-size: 1.8rem; color: var(--qh-faint); display: block; margin-bottom: 10px; }
.qh-svc-empty p { margin: 0; }
.qh-svc-hook { margin-bottom: 16px; }
.qh-svc-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qh-svc-alert-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.qh-svc-alert-inline span { flex: 1; }

/* hero */
.qh-svc-hero {
    position: relative;
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-xl);
    background: var(--qh-card-bg); box-shadow: var(--qh-shadow-card);
    padding: 22px 24px 20px;
    margin-bottom: 14px;
    overflow: hidden;
}
.qh-svc-hero-top { display: flex; align-items: flex-start; gap: 18px; position: relative; z-index: 1; }
.qh-svc-ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--qh-white); color: var(--qh-ink); font-size: 1.35rem; }
.qh-svc-titles { flex: 1; min-width: 0; }
.qh-svc-titles .qh-eyebrow { margin-bottom: 4px; }
.qh-svc-name { font-family: var(--qh-font-display); font-size: 1.55rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
/* primary domain right under the plan name */
.qh-shell-body a.qh-svc-domain { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: var(--qh-text); font-size: 0.92rem; font-weight: 600; }
.qh-svc-domain > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-svc-domain i { color: var(--qh-muted); font-size: 0.82rem; transition: color 0.2s, transform 0.2s; }
.qh-svc-domain .qh-svc-domain-go { font-size: 0.72rem; opacity: 0.7; }
.qh-shell-body a.qh-svc-domain:hover { color: var(--qh-accent-text); }
.qh-shell-body a.qh-svc-domain:hover i { color: var(--qh-accent-text); }
.qh-shell-body a.qh-svc-domain:hover .qh-svc-domain-go { opacity: 1; transform: translate(2px, -2px); }
/* right column: status + what the customer actually needs to know next */
.qh-svc-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; flex: 0 0 auto; }
.qh-svc-state small { color: var(--qh-muted); font-size: 0.76rem; max-width: 260px; }
.qh-svc-renew span { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); margin-bottom: 2px; }
.qh-svc-renew strong { font-size: 0.9rem; font-weight: 600; color: var(--qh-white); white-space: nowrap; }
/* fact chips (username / server / IP) with copy buttons */
.qh-svc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.qh-fact { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--qh-border); border-radius: var(--qh-radius); background: rgba(var(--qh-fg-rgb), 0.025); }
.qh-fact > i { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 0.82rem; background: rgba(var(--qh-accent-rgb), 0.12); color: var(--qh-accent-text); }
.qh-fact-body { flex: 1; min-width: 0; }
.qh-fact-body span { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); }
.qh-fact-body strong { display: block; font-size: 0.86rem; font-weight: 600; color: var(--qh-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-copy { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--qh-border); border-radius: 8px; background: transparent; color: var(--qh-muted); font-size: 0.78rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.qh-copy:hover { color: var(--qh-white); border-color: var(--qh-border-2); background: rgba(var(--qh-fg-rgb), 0.05); }
.qh-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); }
.qh-copy.is-copied { color: var(--qh-green-2); border-color: rgba(var(--qh-green-rgb), 0.45); background: rgba(var(--qh-green-rgb), 0.12); }
.qh-fact-body a { color: var(--qh-text); }
.qh-shell-body .qh-fact-body a:hover { color: var(--qh-accent-text); }
/* service password: blurred until the eye is clicked */
.qh-reveal { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--qh-border); border-radius: 8px; background: transparent; color: var(--qh-muted); font-size: 0.78rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.qh-reveal:hover { color: var(--qh-white); border-color: var(--qh-border-2); background: rgba(var(--qh-fg-rgb), 0.05); }
.qh-reveal:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); }
.qh-fact-secret .qh-secret { filter: blur(5px); user-select: none; transition: filter 0.15s ease; font-family: var(--qh-font); letter-spacing: 0.02em; }
.qh-fact-secret.is-revealed .qh-secret { filter: none; user-select: text; }
.qh-fact-secret.is-revealed .qh-reveal { color: var(--qh-accent-text); border-color: rgba(var(--qh-accent-rgb), 0.45); background: rgba(var(--qh-accent-rgb), 0.12); }
.qh-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-text); white-space: nowrap; }
.qh-status-pill i { font-size: 0.45rem; }
.qh-status-pill { box-shadow: inset 0 0 0 1px rgba(var(--qh-fg-rgb), 0.14); }
.qh-status-pill.is-active, .qh-status-pill.is-completed { background: rgba(var(--qh-green-rgb), 0.12); color: var(--qh-green-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-green-rgb), 0.35); }
.qh-status-pill.is-active i { animation: qhPulseDot 2s ease-in-out infinite; }
.qh-status-pill.is-pending, .qh-status-pill.is-suspended { background: rgba(var(--qh-amber-rgb), 0.12); color: var(--qh-amber-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-amber-rgb), 0.35); }
.qh-status-pill.is-terminated, .qh-status-pill.is-cancelled, .qh-status-pill.is-fraud { background: rgba(var(--qh-red-rgb), 0.12); color: var(--qh-red-2); box-shadow: inset 0 0 0 1px rgba(var(--qh-red-rgb), 0.35); }
@keyframes qhPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.qh-svc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.03); color: var(--qh-text) !important; font-size: 0.8rem; font-weight: 500; }
.qh-svc-chip i { color: var(--qh-muted); font-size: 0.75rem; }
.qh-shell-body a.qh-svc-chip:hover { border-color: var(--qh-border-2); color: var(--qh-white) !important; }
.qh-svc-sub { display: flex; flex-wrap: wrap; gap: 6px 8px; }

.qh-svc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--qh-border); position: relative; z-index: 1; }
.qh-svc-btn { position: relative; padding: 10px 16px; font-size: 0.85rem; }
.qh-svc-btn i.sidebar-menu-item-icon { font-size: 0.85rem; }
.qh-svc-btn .loading { display: inline-flex; }
.qh-svc-btn.is-inactive, .qh-svc-btn.disabled { opacity: 0.45; pointer-events: none; }
.qh-svc-btn.qh-btn-danger, .qh-shell-body a.qh-btn-danger { background: rgba(var(--qh-red-rgb), 0.10); border: 1px solid rgba(var(--qh-red-rgb), 0.35); color: var(--qh-red-2); }
.qh-svc-btn.qh-btn-danger:hover, .qh-shell-body a.qh-btn-danger:hover { background: rgba(var(--qh-red-rgb), 0.2); color: var(--qh-red-2); transform: translateY(-2px); }
.qh-shell-body a.qh-btn-ghost.qh-svc-btn { color: var(--qh-text); background: rgba(var(--qh-fg-rgb), 0.04); border: 1px solid var(--qh-border-2); }
.qh-shell-body a.qh-btn-ghost.qh-svc-btn:hover { color: var(--qh-white); background: rgba(var(--qh-accent-rgb), 0.12); border-color: rgba(var(--qh-accent-rgb), 0.45); }

/* billing strip */
.qh-svc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.qh-svc-meta-item { padding: 12px 14px; border-radius: var(--qh-radius); border: 1px solid var(--qh-border); background: rgba(var(--qh-fg-rgb), 0.025); }
.qh-svc-meta-item span { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); margin-bottom: 4px; }
.qh-svc-meta-item strong { display: block; font-size: 0.92rem; color: var(--qh-white); font-weight: 600; overflow-wrap: anywhere; }
.qh-svc-meta-item { min-width: 0; }

/* tabs */
.qh-shell-body .qh-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--qh-border); border-radius: 14px; background: rgba(var(--qh-fg-rgb), 0.025); list-style: none; }
.qh-shell-body .qh-tabs .nav-item { flex: 0 0 auto; }
.qh-shell-body .qh-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 10px; color: var(--qh-muted); font-weight: 600; font-size: 0.86rem; transition: background 0.2s, color 0.2s; }
.qh-shell-body .qh-tabs .nav-link i { color: var(--qh-faint); transition: color 0.2s; }
.qh-shell-body .qh-tabs .nav-link:hover { background: rgba(var(--qh-fg-rgb), 0.05); color: var(--qh-white); }
.qh-shell-body .qh-tabs .nav-link.active { background: var(--qh-accent-soft); color: var(--qh-white); box-shadow: inset 0 0 0 1px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .qh-tabs .nav-link.active i, .qh-shell-body .qh-tabs .nav-link:hover i { color: var(--qh-accent-text); }
.qh-tab-count { padding: 1px 7px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.08); font-size: 0.7rem; }
.qh-tab-content > .tab-pane { animation: qhTabIn 0.35s var(--qh-ease-out); }
@keyframes qhTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* notice (suspended / pending) */
.qh-svc-notice { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--qh-radius-lg); border: 1px solid rgba(var(--qh-amber-rgb), 0.35); background: rgba(var(--qh-amber-rgb), 0.08); color: var(--qh-amber-2); margin-bottom: 16px; }
.qh-svc-notice-suspended { border-color: rgba(var(--qh-red-rgb), 0.35); background: rgba(var(--qh-red-rgb), 0.08); color: var(--qh-red-2); }
.qh-svc-notice > i { font-size: 1.4rem; margin-top: 2px; }
.qh-svc-notice strong { display: block; color: inherit; margin-bottom: 2px; }
.qh-svc-notice p { margin: 0; color: inherit; opacity: 0.85; font-size: 0.88rem; }

/* usage rings (CSS only) */
.qh-rings { display: flex; justify-content: space-around; gap: 16px; padding: 22px 16px 18px; }
.qh-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.qh-ring-wrap strong { font-size: 0.86rem; color: var(--qh-white); margin-top: 4px; }
.qh-ring-wrap small { color: var(--qh-muted); font-size: 0.78rem; }
.qh-ring {
    --p: 0;
    --ring: 255, 255, 255;
    position: relative;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: conic-gradient(rgb(var(--ring)) calc(var(--p) * 1%), rgba(var(--qh-fg-rgb), 0.07) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px var(--qh-border);
}
.qh-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--qh-surface); }
.qh-ring span { position: relative; font-family: var(--qh-font-display); font-weight: 600; font-size: 1.25rem; color: var(--qh-white); }
.qh-ring-disk, .qh-ring-bw { --ring: 255, 255, 255; }
.qh-ring.is-warn { --ring: var(--qh-amber-rgb); }
.qh-ring.is-over { --ring: var(--qh-red-rgb); }
.qh-usage-warn { color: var(--qh-amber-2); font-size: 0.84rem; }

/* package card */
.qh-pkg .cpanel-package-details em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-muted); }
.qh-pkg .cpanel-package-details h4 { margin: 4px 0 2px; font-size: 1.1rem; font-family: var(--qh-font-display); }
.qh-pkg .cpanel-package-details a { color: var(--qh-muted); font-size: 0.88rem; }
.qh-pkg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qh-pkg-extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--qh-border); }
.qh-pkg-extras-row { display: flex; gap: 8px; }
.qh-pkg-extras-row .qh-input { padding: 9px 12px; font-size: 0.86rem; }

/* quick shortcuts */
.qh-shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.qh-shortcut-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 10px 14px;
    border-radius: var(--qh-radius);
    border: 1px solid var(--qh-border);
    background: rgba(var(--qh-fg-rgb), 0.025);
    color: var(--qh-text) !important;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    transition: transform var(--qh-t-smooth), border-color var(--qh-t-smooth), background var(--qh-t-smooth), box-shadow var(--qh-t-smooth);
}
.qh-shortcut-grid a i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--qh-accent-soft); color: var(--qh-accent-text); font-size: 1.05rem; transition: transform var(--qh-t-premium); }
.qh-shortcut-grid a:hover { transform: translateY(-3px); border-color: rgba(var(--qh-shade-rgb), calc(0.5 * var(--qh-shade-k))); background: rgba(var(--qh-fg-rgb), 0.04); box-shadow: 0 12px 28px rgba(var(--qh-shade-rgb), calc(0.3 * var(--qh-shade-k))); color: var(--qh-white) !important; }
.qh-shortcut-grid a:hover i { transform: scale(1.08); }

/* create email */
.qh-email-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: stretch; }
.qh-email-user { display: flex; }
.qh-email-user .qh-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qh-email-domain { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(var(--qh-fg-rgb), 0.12); border-left: 0; border-radius: 0 var(--qh-radius) var(--qh-radius) 0; background: rgba(var(--qh-fg-rgb), 0.05); color: var(--qh-muted); font-size: 0.82rem; white-space: nowrap; }
.qh-shell-body .qh-input, .qh-shell-body .qh-input.form-control { padding: 11px 14px; border-radius: var(--qh-radius); background: rgba(var(--qh-fg-rgb), 0.03); border: 1px solid rgba(var(--qh-fg-rgb), 0.12); color: var(--qh-white); font-size: 0.9rem; height: auto; }
.qh-shell-body .qh-input:focus { border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-fg-rgb), 0.10); background: rgba(var(--qh-fg-rgb), 0.045); }
.qh-shell-body .qh-input-wrap { position: relative; }
.qh-shell-body .qh-input-wrap .qh-input-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--qh-faint); font-size: 0.88rem; pointer-events: none; z-index: 2; }
.qh-shell-body .qh-input-wrap .qh-input-ico + .qh-input { padding-left: 40px; }
.qh-shell-body .qh-input-wrap:has(.qh-reveal-pw) .qh-input { padding-right: 46px; }
.qh-shell-body .qh-reveal-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--qh-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.qh-shell-body .qh-reveal-pw:hover { color: var(--qh-text); background: rgba(var(--qh-fg-rgb), 0.06); }
.qh-shell-body .qh-field { margin-bottom: 12px; }
.qh-shell-body .qh-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--qh-text); margin-bottom: 6px; }
.qh-shell-body .qh-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qh-shell-body .qh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.qh-shell-body .qh-linkbtn { background: none; border: 0; color: var(--qh-muted); cursor: pointer; font-family: inherit; }
.qh-shell-body .qh-linkbtn:hover { color: var(--qh-accent-text); }
.qh-shell-body .qh-select { -webkit-appearance: none; appearance: none; }
.qh-shell-body .qh-select { padding-right: 38px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='none' stroke='%239ca3af' stroke-width='1.6' d='M1 1l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.qh-shell-body .qh-select option { color: var(--qh-white); background: var(--qh-surface-3); }
.qh-form-actions { display: flex; gap: 8px; margin-top: 8px; }
.qh-pw-strength { margin: -2px 0 10px; }
.qh-pw-strength .progress { height: 6px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.07); }
.qh-pw-strength br { display: none; }
.qh-pw-strength .alert { padding: 8px 12px; font-size: 0.8rem; margin: 8px 0 0; }
.qh-shell-body .qh-btn-primary.disabled, .qh-shell-body input.qh-btn[disabled] { opacity: 0.5; pointer-events: none; }
.qh-h5 { color: var(--qh-white); font-size: 0.95rem; margin: 6px 0 2px; }

/* addons / downloads */
.qh-addon-card .qh-card-head .qh-status-pill { padding: 4px 10px; font-size: 0.68rem; }
.qh-addon-actions .btn { margin: 2px 4px 2px 0; }
.qh-login-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qh-inline-form { display: inline; }

@media (max-width: 991.98px) {
    .qh-svc-grid { grid-template-columns: 1fr; }
    .qh-shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qh-svc-hero { padding: 18px 16px 16px; }
    .qh-svc-hero-top { flex-wrap: wrap; position: relative; }
    /* status pill opposite the plan name, same line (owner) */
    .qh-svc-state { position: absolute; top: 8px; right: 0; width: auto; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; }
    .qh-svc-titles .qh-eyebrow, .qh-svc-name { padding-right: 104px; }
    .qh-svc-state small { max-width: 160px; }
    /* the pill sits next to the plan name; the renew line moves below the identity block */
    .qh-svc-state { gap: 4px; }
    .qh-svc-renew { position: absolute; top: 34px; right: 0; text-align: right; }
    .qh-svc-renew strong { font-size: 0.82rem; }
    .qh-svc-facts { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
}
@media (max-width: 575.98px) {
    .qh-svc-ico { flex-basis: 46px; width: 46px; height: 46px; font-size: 1.1rem; border-radius: 13px; }
    .qh-svc-name { font-size: 1.25rem; }
    .qh-svc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .qh-svc-btn { justify-content: center; padding: 9px 8px; font-size: 0.78rem; white-space: normal; text-align: center; line-height: 1.2; }
    .qh-svc-btn i.sidebar-menu-item-icon { display: none; }
    .qh-svc-btn.qh-btn-danger { grid-column: 1 / -1; margin-left: 0; }
    .qh-svc-meta { grid-template-columns: 1fr 1fr; }
    /* phones: the status pill sits on the plan-name line (owner 2026-09-23), the renew line goes below, full width */
    .qh-svc-hero-top { position: relative; }
    .qh-svc-state { position: static; display: block; width: 100%; margin-top: 12px; text-align: left; }
    .qh-svc-state .qh-status-pill { position: absolute; top: -5px; right: 0; }   /* centred on the product-group line (owner) */
    .qh-svc-state small { max-width: none; display: block; margin-top: 6px; }
    .qh-svc-renew { position: static; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; text-align: left; }
    .qh-svc-renew span { margin-bottom: 0; }
    .qh-svc-renew strong { white-space: normal; }
    .qh-svc-titles .qh-eyebrow, .qh-svc-name { padding-right: 96px; }
    .qh-svc-titles .qh-svc-domain { padding-right: 0; }
    .qh-shell-body .qh-tabs .nav-link { padding: 8px 10px; font-size: 0.8rem; }
    .qh-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
    .qh-rings { gap: 8px; padding: 18px 8px 14px; }
    .qh-ring { width: 100px; height: 100px; }
    .qh-email-row { grid-template-columns: 1fr; }
    .qh-shell-body .qh-grid-2 { grid-template-columns: 1fr; }
    .qh-kv { grid-template-columns: 1fr; }
    .qh-kv dt { padding-bottom: 2px; border-top: 1px solid var(--qh-border); }
    .qh-kv dd { padding-top: 0; border-top: 0; }
}


/* ==========================================================================
   LIST PAGES (services / invoices / domains / tickets) - DataTables in a card,
   rows stack into cards on small screens via td[data-label] (set in includes/tablelist.tpl)
   ========================================================================== */
.qh-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.qh-list-head .qh-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-faint); }
.qh-eyebrow-warn { font-style: normal; color: var(--qh-red-2); }
.qh-bulk-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qh-bulk-group .btn { font-size: 0.78rem; }

.qh-list-card { padding: 0; overflow: hidden; }
.qh-list-card .table-container { padding: 0; }
.qh-list-card table.dataTable, .qh-shell-body .qh-list-card table.dataTable { margin: 0 !important; border-collapse: collapse !important; width: 100% !important; }
.qh-shell-body .qh-list-card table.dataTable, .qh-shell-body .qh-table { border: 0 !important; }
.qh-shell-body .qh-table th, .qh-shell-body .qh-table td { padding: 13px 16px; border-top: 1px solid var(--qh-border); }
.qh-shell-body .qh-table thead th { border-top: 0; padding: 12px 16px; white-space: nowrap; }
.qh-shell-body .qh-table tbody tr { cursor: pointer; transition: background 0.15s; }
.qh-shell-body .qh-table tbody tr:hover, .qh-shell-body .table-list tbody tr:hover { background: rgba(var(--qh-fg-rgb), 0.03); }
.qh-shell-body .qh-table tbody tr.qh-row-unpaid, .qh-shell-body .qh-table tbody tr.qh-row-overdue { background: rgba(var(--qh-red-rgb), 0.04); }
.qh-shell-body .qh-table tbody tr.qh-row-unpaid:hover, .qh-shell-body .qh-table tbody tr.qh-row-overdue:hover { background: rgba(var(--qh-red-rgb), 0.08); }
.qh-shell-body .qh-table td small.text-muted { color: var(--qh-faint) !important; }
.qh-shell-body table.dataTable thead .sorting:before, .qh-shell-body table.dataTable thead .sorting:after, .qh-shell-body table.dataTable thead .sorting_asc:before, .qh-shell-body table.dataTable thead .sorting_asc:after, .qh-shell-body table.dataTable thead .sorting_desc:before, .qh-shell-body table.dataTable thead .sorting_desc:after { color: var(--qh-faint); opacity: 0.4; bottom: 0.7em; }
.qh-shell-body table.dataTable thead .sorting_asc:before, .qh-shell-body table.dataTable thead .sorting_desc:after { opacity: 1; color: var(--qh-accent-text); }
.qh-shell-body table.dataTable thead > tr > th.sorting_asc, .qh-shell-body table.dataTable thead > tr > th.sorting_desc, .qh-shell-body table.dataTable thead > tr > th.sorting { padding-right: 26px; }
.qh-col-ssl { width: 44px; padding-right: 0 !important; }
.qh-col-check { width: 36px; }
.qh-col-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--qh-accent); cursor: pointer; }
.qh-col-action { width: 1%; text-align: right; white-space: nowrap; }
.qh-col-action .qh-btn { vertical-align: middle; }
.qh-col-product { min-width: 220px; }
.qh-col-product > * { vertical-align: middle; }
.qh-list-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; margin-right: 12px; background: rgba(var(--qh-fg-rgb), 0.05); border: 1px solid var(--qh-border); color: var(--qh-white); font-size: 0.95rem; flex: none; }
.qh-list-ico-unread { background: var(--qh-white); color: var(--qh-ink); border-color: var(--qh-white); }
.qh-list-ico-unpaid, .qh-list-ico-overdue { color: var(--qh-red-2); background: rgba(var(--qh-red-rgb), 0.1); border-color: rgba(var(--qh-red-rgb), 0.3); }
.qh-list-ico-paid { color: var(--qh-green-2); background: rgba(var(--qh-green-rgb), 0.1); border-color: rgba(var(--qh-green-rgb), 0.3); }
.qh-list-ico-cancelled, .qh-list-ico-refunded, .qh-list-ico-draft { color: var(--qh-muted); }
.qh-list-main { display: inline-flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.qh-list-main strong { color: var(--qh-white); font-weight: 600; }
.qh-list-main strong.unread { color: var(--qh-white); }
.qh-list-main strong.unread::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--qh-accent); margin-left: 8px; vertical-align: middle; }
.qh-list-sub { display: block; color: var(--qh-muted); font-size: 0.78rem; margin-top: 2px; }
a.qh-list-sub:hover, .qh-shell-body a.qh-list-sub:hover { color: var(--qh-accent-text); }
.qh-shell-body .qh-list-main a { color: inherit; }
.qh-shell-body .qh-list-main a.qh-list-sub { color: var(--qh-muted); }
.qh-shell-body .qh-list-main a.qh-list-sub:hover { color: var(--qh-accent-text); }
.qh-shell-body .qh-list-main a:hover strong { color: var(--qh-accent-text); }
.qh-table-loading { padding: 34px 16px; color: var(--qh-muted); font-size: 0.86rem; }
.qh-table-loading p { margin: 0; }
.qh-shell-body td.dataTables_empty { text-align: center; color: var(--qh-faint); padding: 34px 16px; }

/* DataTables controls (dom: top search / bottom info + length + pagination) */
.qh-dt-top { padding: 12px 16px; border-bottom: 1px solid var(--qh-border); }
.qh-dt-top .dataTables_filter { float: none; text-align: left; }
.qh-dt-top .dataTables_filter label { display: block; margin: 0; max-width: 340px; position: relative; }
.qh-dt-top .dataTables_filter label::before { content: "\f002"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 400; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--qh-faint); font-size: 0.82rem; pointer-events: none; }
.qh-shell-body .qh-dt-top .dataTables_filter input { width: 100%; margin: 0; padding: 9px 12px 9px 36px; border-radius: var(--qh-radius-sm); font-family: inherit; font-size: 0.86rem; transition: border-color 0.2s, box-shadow 0.2s; }
.qh-shell-body .qh-dt-top .dataTables_filter input:focus { outline: 0; border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-fg-rgb), 0.10); }
.qh-dt-table { overflow-x: auto; }
.qh-dt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--qh-border); }
.qh-dt-bottom .dataTables_info { padding: 0; flex: 1 1 auto; }
.qh-dt-bottom .dataTables_length { order: 1; }
.qh-dt-bottom .dataTables_length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.qh-shell-body .qh-dt-bottom .dataTables_length select { margin: 0; padding: 5px 8px; font-family: inherit; font-size: 0.82rem; }
.qh-shell-body .qh-dt-bottom .dataTables_length select option { color: var(--qh-white); background: var(--qh-surface-3); }
.qh-dt-bottom .dataTables_paginate { order: 2; padding: 0; margin: 0; }
.qh-shell-body .qh-dt-bottom .dataTables_paginate .paginate_button { font-size: 0.8rem; margin: 0 1px; }
.qh-shell-body .qh-dt-bottom .dataTables_paginate .paginate_button.disabled { opacity: 0.4; }
.qh-shell-body .dataTables_wrapper .dataTables_processing { background: var(--qh-surface-2); color: var(--qh-text); border: 1px solid var(--qh-border); }

/* ==========================================================================
   SUPPORT TICKETS - department cards, open form, thread
   ========================================================================== */
.qh-ticket-intro { margin-bottom: 16px; }
.qh-ticket-intro .qh-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-faint); }
.qh-ticket-intro-text { margin: 4px 0 0; color: var(--qh-muted); max-width: 600px; font-size: 0.92rem; }
.qh-dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qh-shell-body a.qh-dept-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--qh-radius-lg); background: var(--qh-surface); border: 1px solid var(--qh-border); color: var(--qh-text); transition: transform var(--qh-t-smooth), border-color var(--qh-t-smooth), box-shadow var(--qh-t-smooth); }
.qh-shell-body a.qh-dept-card:hover { transform: translateY(-3px); border-color: rgba(var(--qh-shade-rgb), calc(0.5 * var(--qh-shade-k))); box-shadow: 0 16px 40px rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); color: var(--qh-text); }
.qh-dept-ico { width: 46px; height: 46px; border-radius: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 1.1rem; transition: transform var(--qh-t-premium); }
.qh-dept-card:hover .qh-dept-ico { transform: scale(1.08); }
.qh-dept-body { display: flex; flex-direction: column; min-width: 0; }
.qh-dept-body strong { color: var(--qh-white); font-family: var(--qh-font-display); font-weight: 600; font-size: 0.98rem; }
.qh-dept-body small { color: var(--qh-muted); font-size: 0.8rem; margin-top: 2px; }
.qh-dept-arrow { margin-left: auto; color: var(--qh-faint); font-size: 0.9rem; transition: transform var(--qh-t-smooth), color var(--qh-t-smooth); }
.qh-dept-card:hover .qh-dept-arrow { transform: translateX(4px); color: var(--qh-accent-text); }
.qh-ticket-wa { margin: 18px 0 0; color: var(--qh-muted); font-size: 0.86rem; }
.qh-shell-body .qh-ticket-wa a { color: var(--qh-wa); font-weight: 600; }
.qh-link-small { margin-left: auto; font-size: 0.8rem; color: var(--qh-muted); }
.qh-shell-body .qh-card-head a.qh-link-small:hover { color: var(--qh-accent-text); }
.qh-shell-body .qh-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.qh-help { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--qh-faint); }
.qh-customfields .form-group.row { margin-left: 0; margin-right: 0; }
.qh-customfields .form-group.row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.qh-customfields .form-group.row > label { text-align: left !important; flex: 0 0 100%; max-width: 100%; }
.qh-captcha { margin: 6px 0 12px; }
.qh-captcha:empty { display: none; }
.qh-kb-suggest { margin-bottom: 12px; }

/* ticket hero */
.qh-ticket-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; padding: 22px 24px; border-radius: var(--qh-radius-lg); background: var(--qh-card-bg); box-shadow: var(--qh-shadow-card); border: 1px solid var(--qh-border); }
.qh-ticket-hero-main { min-width: 0; flex: 1 1 320px; }
.qh-ticket-hero-main .qh-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-faint); }
.qh-ticket-subject { margin: 4px 0 10px; font-family: var(--qh-font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--qh-white); overflow-wrap: anywhere; }
.qh-ticket-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qh-ticket-priority { color: var(--qh-muted); font-size: 0.8rem; font-weight: 600; }
.qh-ticket-priority i { margin-right: 4px; color: var(--qh-faint); }
.qh-ticket-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qh-shell-body .qh-ticket-actions .qh-btn-danger, .qh-shell-body button.qh-btn-danger { margin-left: 0; background: rgba(var(--qh-red-rgb), 0.10); border: 1px solid rgba(var(--qh-red-rgb), 0.35); color: var(--qh-red-2); }
.qh-shell-body .qh-ticket-actions .qh-btn-danger:hover, .qh-shell-body button.qh-btn-danger:hover { background: rgba(var(--qh-red-rgb), 0.2); color: var(--qh-red-2); transform: translateY(-2px); }

/* thread */
.qh-thread { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; }
.qh-msg { display: flex; gap: 12px; max-width: 92%; }
.qh-msg.is-client { flex-direction: row-reverse; margin-left: auto; }
.qh-msg-avatar { width: 38px; height: 38px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; background: rgba(var(--qh-fg-rgb), 0.06); border: 1px solid var(--qh-border); color: var(--qh-text); }
.qh-msg.is-staff .qh-msg-avatar { background: var(--qh-accent-soft); border-color: rgba(var(--qh-fg-rgb), 0.22); color: var(--qh-accent-text); }
.qh-msg-body { min-width: 0; flex: 1; }
.qh-msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.78rem; color: var(--qh-muted); }
.qh-msg.is-client .qh-msg-head { justify-content: flex-end; }
.qh-msg-head strong { color: var(--qh-white); font-size: 0.86rem; }
.qh-shell-body .view-ticket .posted-by { background: transparent; color: var(--qh-muted); padding: 0; border: 0; }
.qh-msg-tag { padding: 2px 8px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.06); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qh-muted); }
.qh-msg-tag:empty { display: none; }
.qh-msg.is-staff .qh-msg-tag { background: var(--qh-white); color: var(--qh-ink); }
.qh-msg-head time { color: var(--qh-faint); }
.qh-msg-bubble { background: var(--qh-surface); border: 1px solid var(--qh-border); border-radius: 16px; border-top-left-radius: 4px; padding: 14px 16px; color: var(--qh-text); font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.qh-msg.is-client .qh-msg-bubble { border-top-left-radius: 16px; border-top-right-radius: 4px; background: rgba(var(--qh-accent-rgb), 0.07); border-color: rgba(var(--qh-accent-rgb), 0.22); }
.qh-msg-bubble p:last-child { margin-bottom: 0; }
.qh-msg-bubble img { max-width: 100%; height: auto; border-radius: 8px; }
.qh-msg-bubble pre { background: rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); border: 1px solid var(--qh-border); border-radius: 8px; padding: 10px 12px; color: var(--qh-text); font-size: 0.82rem; }
.qh-msg-bubble code { color: var(--qh-white); background: rgba(var(--qh-fg-rgb), 0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.84em; }
.qh-msg-bubble pre code { background: none; color: inherit; padding: 0; }
.qh-msg-bubble blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid rgba(var(--qh-fg-rgb), 0.18); color: var(--qh-muted); }
.qh-msg-bubble table { width: 100%; margin: 8px 0; }
.qh-msg-bubble th, .qh-msg-bubble td { border: 1px solid var(--qh-border); padding: 6px 8px; }
.qh-msg-ip { margin-top: 8px; font-size: 0.7rem; color: var(--qh-faint); }
.qh-msg-rating { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--qh-border); }
.qh-msg-rating .rating, .qh-msg-rating .rating-done { float: none; display: inline-block; }
.qh-msg-rating .rated { display: inline-block; margin-left: 8px; font-size: 0.74rem; color: var(--qh-faint); }
.qh-msg-attachments { margin-top: 8px; font-size: 0.78rem; color: var(--qh-muted); }
.qh-msg-attachments strong { font-weight: 600; }
.qh-msg-attachments .attachment-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qh-msg.is-client .qh-msg-attachments { text-align: right; }
.qh-msg.is-client .attachment-list { justify-content: flex-end; }
.qh-attach, .qh-shell-body a.qh-attach { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(var(--qh-fg-rgb), 0.05); border: 1px solid var(--qh-border); color: var(--qh-text); font-size: 0.78rem; max-width: 100%; }
.qh-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-shell-body a.qh-attach:hover { border-color: rgba(var(--qh-shade-rgb), calc(0.5 * var(--qh-shade-k))); color: var(--qh-white); }
.qh-attach.is-removed { opacity: 0.6; text-decoration: line-through; }
.qh-reply-card { margin-top: 6px; }

/* markdown editor (WHMCS bootstrap-markdown) + file inputs, dark */
.qh-shell-body .md-editor { display: block; border: 1px solid rgba(var(--qh-fg-rgb), 0.12); border-radius: var(--qh-radius); overflow: hidden; background: rgba(var(--qh-fg-rgb), 0.03); }
.qh-shell-body .md-editor.active { border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-fg-rgb), 0.10); }
.qh-shell-body .md-editor > .md-header, .qh-shell-body .md-editor .md-header, .qh-shell-body .md-editor .btn-toolbar { background: rgba(var(--qh-fg-rgb), 0.04) !important; border-bottom: 1px solid var(--qh-border); padding: 6px 8px; margin: 0; }
.qh-shell-body .md-editor .md-header .btn-group { background: transparent !important; }
.qh-shell-body .md-editor .md-header .btn, .qh-shell-body .md-editor .md-header .btn-default { background: transparent; border-color: transparent; color: var(--qh-muted); box-shadow: none; padding: 4px 8px; }
.qh-shell-body .md-editor .md-header .btn:hover { background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); }
.qh-shell-body .md-editor .md-header .btn-group { margin-right: 4px; }
.qh-shell-body .md-editor > .md-input, .qh-shell-body .md-editor textarea.md-input, .qh-shell-body .md-editor > .md-preview { background: transparent !important; color: var(--qh-white); border: 0 !important; box-shadow: none !important; padding: 12px 14px; min-height: 180px; font-family: inherit; font-size: 0.9rem; line-height: 1.6; border-radius: 0; }
.qh-shell-body .md-editor > .md-preview { color: var(--qh-text); }
.qh-shell-body .md-editor > .md-input:focus { outline: 0; }
.qh-shell-body .md-editor .md-footer, .qh-shell-body .md-editor > .md-footer { background: rgba(var(--qh-fg-rgb), 0.03); border-top: 1px solid var(--qh-border); color: var(--qh-faint); font-size: 0.76rem; padding: 6px 12px; margin: 0; }
.qh-shell-body .md-editor .md-footer a { color: var(--qh-muted); }
.qh-shell-body .md-editor .md-fullscreen-controls a { color: var(--qh-muted); }
.qh-shell-body .md-editor.md-fullscreen-mode { background: var(--qh-bg); }
.qh-shell-body .md-editor.md-fullscreen-mode .md-input, .qh-shell-body .md-editor.md-fullscreen-mode .md-preview { color: var(--qh-white); }
.qh-shell-body .markdown-editor-status { color: var(--qh-faint); font-size: 0.76rem; }
.qh-shell-body .custom-file, .qh-shell-body .custom-file-input, .qh-shell-body .custom-file-label { height: auto; }
.qh-shell-body .custom-file-label { background: rgba(var(--qh-fg-rgb), 0.03); border: 1px solid rgba(var(--qh-fg-rgb), 0.12); color: var(--qh-muted); padding: 9px 12px; font-size: 0.86rem; border-radius: var(--qh-radius-sm) 0 0 var(--qh-radius-sm); }
.qh-shell-body .custom-file-label::after { height: auto; padding: 9px 12px; background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-text); border-left: 1px solid rgba(var(--qh-fg-rgb), 0.12); }
.qh-shell-body .custom-file-input:focus ~ .custom-file-label { border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-fg-rgb), 0.10); }
.qh-shell-body .qh-attach-group .input-group-append .btn { border-radius: 0 var(--qh-radius-sm) var(--qh-radius-sm) 0; font-size: 0.82rem; padding: 6px 12px; }
.qh-shell-body .qh-attach-group .custom-file-label { margin: 0; }
.qh-shell-body .qh-attach-group:not(:first-child) .custom-file-label { border-radius: var(--qh-radius-sm); }
.qh-shell-body #fileUploadsContainer .qh-attach-group { margin-top: 6px; }
.qh-shell-body .qh-form .disable-on-click.disabled { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   DOMAIN DETAILS PAGE (clientareadomaindetails.tpl)
   ========================================================================== */
/* hide sidebar domain cards rendered inline on this page */
.qh-page-clientareadomaindetails .qh-sidebar [menuitemname="Domain Details Overview"],
.qh-page-clientareadomaindetails .qh-sidebar [menuitemname="Domain Details Actions"] { display: none !important; }

/* hero chips for lock/autorenew status */
.qh-svc-chip.is-locked { color: var(--qh-green-2); }
.qh-svc-chip.is-unlocked { color: var(--qh-red-2); }

/* quick actions grid */
.qh-dom-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.qh-dom-action {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-radius: var(--qh-radius); border: 1px solid var(--qh-border);
    background: rgba(var(--qh-fg-rgb), 0.02); color: var(--qh-text);
    font-size: 0.86rem; font-weight: 500;
    transition: all 0.2s var(--qh-ease-out); text-decoration: none;
}
.qh-dom-action i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 0.82rem; flex-shrink: 0; }
.qh-dom-action:hover { background: rgba(var(--qh-fg-rgb), 0.05); border-color: rgba(var(--qh-fg-rgb), 0.22); color: var(--qh-white); transform: translateY(-2px); text-decoration: none; }
.qh-shell-body a.qh-dom-action { color: var(--qh-text); }
.qh-shell-body a.qh-dom-action:hover { color: var(--qh-white); }

/* nameserver form */
.qh-dom-ns-options { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.qh-dom-ns-radio { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--qh-text); cursor: pointer; }
.qh-dom-ns-radio input[type="radio"] { accent-color: var(--qh-accent); width: 16px; height: 16px; cursor: pointer; }
.qh-dom-ns-fields { display: grid; gap: 10px; margin-bottom: 16px; }
.qh-dom-ns-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; }
.qh-dom-ns-row label { font-size: 0.82rem; font-weight: 600; color: var(--qh-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.qh-dom-ns-row input { font-size: 0.9rem; }

/* toggle cards (reglock, autorenew) */
.qh-dom-toggle-card { text-align: center; }
.qh-dom-toggle-desc { color: var(--qh-muted); font-size: 0.88rem; line-height: 1.5; margin-bottom: 14px; }
.qh-dom-toggle-status { margin: 18px 0; }
.qh-dom-toggle-status .qh-status-pill { font-size: 0.9rem; padding: 8px 18px; }

/* addon items */
.qh-dom-addon-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--qh-border); }
.qh-dom-addon-item:first-child { border-top: 0; padding-top: 0; }
.qh-dom-addon-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 1.1rem; flex-shrink: 0; }
.qh-dom-addon-info { flex: 1; min-width: 0; }
.qh-dom-addon-info strong { display: block; color: var(--qh-white); font-size: 0.92rem; margin-bottom: 4px; }
.qh-dom-addon-info p { color: var(--qh-muted); font-size: 0.84rem; line-height: 1.4; margin-bottom: 10px; }
.qh-dom-addon-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   PROFILE / ACCOUNT PAGES (clientareadetails, clientareasecurity, clientareaemails)
   ========================================================================== */
.qh-profile-form { }
.qh-profile-form .card { background: var(--qh-surface); border: 1px solid var(--qh-border); border-radius: var(--qh-radius-lg); overflow: hidden; margin-bottom: 16px; }
.qh-profile-form .card .card-body { padding: 20px; }
.qh-profile-form .card .card-title { font-family: var(--qh-font-display); font-weight: 600; font-size: 1.05rem; color: var(--qh-white); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.qh-profile-form .card .card-title i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); font-size: 0.8rem; }
.qh-profile-actions { text-align: center; margin: 20px 0 10px; }
.qh-profile-actions .btn-primary { background: var(--qh-accent); border: 0; color: var(--qh-on-accent); padding: 10px 28px; border-radius: var(--qh-radius); font-weight: 600; font-size: 0.9rem; transition: all 0.25s var(--qh-ease-out); }
.qh-profile-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--qh-glow); }
.qh-profile-actions .btn-default { margin-left: 8px; }

/* ==========================================================================
   KNOWLEDGEBASE PAGES
   ========================================================================== */
.qh-kb-search { margin-bottom: 24px; }
.qh-kb-search .input-group { border-radius: var(--qh-radius-lg); overflow: hidden; border: 1px solid var(--qh-border); background: var(--qh-surface); }
.qh-kb-search .form-control { background: transparent; border: 0; color: var(--qh-text); padding: 14px 18px; font-size: 0.95rem; }
.qh-kb-search .form-control::placeholder { color: var(--qh-faint); }
.qh-kb-search .form-control:focus { box-shadow: none; }
.qh-kb-search .btn { background: var(--qh-accent); border: 0; color: var(--qh-on-accent); padding: 10px 22px; font-weight: 600; font-size: 0.9rem; }
.qh-kb-search .btn:hover { opacity: 0.9; }

.qh-kb-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.qh-kb-cat {
    display: flex; flex-direction: column; gap: 6px; padding: 18px;
    background: var(--qh-card-bg); box-shadow: var(--qh-shadow-card); border: 1px solid var(--qh-border); border-radius: var(--qh-radius-lg);
    text-decoration: none; color: var(--qh-text); transition: all 0.25s var(--qh-ease-out);
}
.qh-kb-cat:hover { border-color: rgba(var(--qh-fg-rgb), 0.22); transform: translateY(-2px); text-decoration: none; color: var(--qh-white); }
.qh-shell-body a.qh-kb-cat { color: var(--qh-text); }
.qh-shell-body a.qh-kb-cat:hover { color: var(--qh-white); }
.qh-kb-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qh-kb-cat-head i { color: var(--qh-white); margin-right: 8px; }
.qh-kb-cat-title { font-weight: 600; font-size: 0.95rem; color: var(--qh-white); }
.qh-kb-cat-count { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-white); }
.qh-kb-cat-desc { font-size: 0.82rem; color: var(--qh-muted); line-height: 1.4; }

.qh-kb-list .qh-card { overflow: hidden; }
.qh-kb-article-item {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 18px;
    border-top: 1px solid var(--qh-border); color: var(--qh-text); text-decoration: none;
    transition: background 0.2s;
}
.qh-kb-article-item:first-child { border-top: 0; }
.qh-kb-article-item:hover { background: rgba(var(--qh-fg-rgb), 0.03); text-decoration: none; }
.qh-shell-body a.qh-kb-article-item { color: var(--qh-text); }
.qh-shell-body a.qh-kb-article-item:hover { color: var(--qh-white); }
.qh-kb-article-item i { color: var(--qh-faint); margin-right: 8px; }
.qh-kb-article-item strong { color: var(--qh-white); font-size: 0.92rem; font-weight: 600; }
.qh-kb-article-item small { color: var(--qh-muted); font-size: 0.8rem; }
.qh-kb-article-item .btn { align-self: flex-start; margin-top: 2px; }

/* KB article detail */
.qh-kb-detail .qh-card-body h1 { font-family: var(--qh-font-display); font-weight: 600; font-size: 1.4rem; color: var(--qh-white); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qh-kb-detail article { color: var(--qh-text); font-size: 0.92rem; line-height: 1.65; }
.qh-kb-detail article img { max-width: 100%; height: auto; border-radius: var(--qh-radius); }
.qh-kb-detail article code { background: rgba(var(--qh-fg-rgb), 0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.qh-kb-detail article pre { background: rgba(var(--qh-fg-rgb), 0.04); padding: 14px; border-radius: var(--qh-radius); overflow-x: auto; }
.qh-kb-detail article a { color: var(--qh-accent-text); }
.qh-kb-detail .qh-kb-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qh-kb-detail .qh-kb-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; padding: 4px 10px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-text); }
.qh-kb-detail .qh-kb-useful { display: flex; align-items: center; gap: 6px; color: var(--qh-muted); font-size: 0.82rem; margin-bottom: 10px; }
.qh-kb-vote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--qh-border); margin-top: 18px; }
.qh-kb-vote h4 { margin: 0; font-size: 0.92rem; color: var(--qh-white); font-weight: 600; }

/* ==========================================================================
   ANNOUNCEMENTS PAGE
   ========================================================================== */
.qh-ann-list { }
.qh-ann-item { background: var(--qh-card-bg); box-shadow: var(--qh-shadow-card); border: 1px solid var(--qh-border); border-radius: var(--qh-radius-lg); padding: 22px; margin-bottom: 14px; transition: border-color 0.2s; }
.qh-ann-item:hover { border-color: rgba(var(--qh-fg-rgb), 0.12); }
.qh-ann-title { margin: 0 0 6px; font-family: var(--qh-font-display); font-weight: 600; font-size: 1.15rem; }
.qh-ann-title a { color: var(--qh-white); text-decoration: none; }
.qh-ann-title a:hover { color: var(--qh-accent-text); }
.qh-shell-body .qh-ann-title a { color: var(--qh-white); }
.qh-shell-body .qh-ann-title a:hover { color: var(--qh-accent-text); }
.qh-ann-date { display: inline-flex; align-items: center; gap: 6px; color: var(--qh-faint); font-size: 0.8rem; margin-bottom: 10px; }
.qh-ann-body { color: var(--qh-muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 12px; }
.qh-ann-body article { color: var(--qh-muted); }
.qh-ann-read { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 991.98px) {
    .qh-shell-body .qh-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .qh-list-head { align-items: stretch; flex-direction: column; }
    .qh-list-head > .qh-btn { justify-content: center; }
    .qh-bulk-actions { gap: 10px; }
    .qh-bulk-group { flex-wrap: wrap; }
    .qh-dt-top { padding: 12px; }
    .qh-dt-top .dataTables_filter label { max-width: none; }
    .qh-dt-bottom { padding: 10px 12px; }
    .qh-dt-bottom .dataTables_info { flex-basis: 100%; font-size: 0.78rem; }
    /* stacked rows */
    .qh-shell-body .qh-list-card .qh-table thead { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; position: relative; padding: 14px 14px 14px; border-top: 1px solid var(--qh-border); }
    .qh-shell-body .qh-list-card .qh-table tbody tr:first-child { border-top: 0; }
    .qh-shell-body .qh-list-card .qh-table tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: 0.86rem; }
    .qh-shell-body .qh-list-card .qh-table tbody td::before { content: attr(data-label); display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); margin-bottom: 3px; }
    .qh-shell-body .qh-list-card .qh-table tbody td:not([data-label])::before, .qh-shell-body .qh-list-card .qh-table tbody td[data-label=""]::before { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-product { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-product::before { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-ssl { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-check { position: absolute; top: 14px; right: 14px; width: auto; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-check::before { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody tr:has(.qh-col-check) td.qh-col-product { padding-right: 32px; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-action { grid-column: 1 / -1; width: auto; text-align: left; margin-top: 2px; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-action::before { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-action .qh-btn { width: 100%; justify-content: center; padding: 9px 12px; }
    .qh-shell-body .qh-list-card .qh-table tbody td.dataTables_empty { grid-column: 1 / -1; text-align: center; }
    .qh-shell-body .qh-list-card .qh-table tbody td.dataTables_empty::before { display: none; }
    .qh-list-main { min-width: 0; }
    .qh-list-main strong, .qh-list-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    /* tickets */
    .qh-dept-grid { grid-template-columns: 1fr; }
    .qh-shell-body a.qh-dept-card { padding: 14px; }
    .qh-ticket-hero { padding: 18px 16px; }
    .qh-ticket-actions { width: 100%; }
    .qh-ticket-actions .qh-btn { flex: 1 1 auto; justify-content: center; }
    .qh-msg { max-width: 100%; gap: 8px; }
    .qh-msg-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 0.78rem; }
    .qh-msg-bubble { padding: 12px 13px; font-size: 0.88rem; }
    .qh-shell-body .qh-grid-3 { grid-template-columns: 1fr; }
    .qh-form-actions { flex-wrap: wrap; }
    .qh-form-actions .qh-btn { flex: 1 1 auto; justify-content: center; }
    /* domain details */
    .qh-dom-quick { grid-template-columns: 1fr; }
    .qh-dom-ns-row { grid-template-columns: 1fr; }
    .qh-dom-ns-row label { margin-bottom: 2px; }
    .qh-dom-addon-item { flex-direction: column; gap: 10px; }
    .qh-dom-addon-icon { width: 36px; height: 36px; font-size: 0.95rem; }
    /* KB */
    .qh-kb-cats { grid-template-columns: 1fr; }
    .qh-kb-detail .qh-card-body h1 { font-size: 1.15rem; }
    /* profile */
    .qh-profile-form .card .card-body { padding: 16px; }
}

/* ============================================================ SPA navigation states (js/qazihost.js) */
/* top progress bar, injected once by the SPA layer */
.qh-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--qh-ease); }
.qh-progress.is-active { opacity: 1; }
.qh-progress.is-done { opacity: 0; transition-delay: 0.15s; }
.qh-progress > span { display: block; height: 100%; width: 0; background: var(--qh-accent); transition: width 0.9s var(--qh-ease); }
.qh-progress.is-done > span { transition-duration: 0.2s; }
/* content dims only when a request takes noticeably long */
.qh-nav-loading #main-body { opacity: 0.55; pointer-events: none; transition: opacity 0.3s var(--qh-ease) 0.05s; }
.qh-nav-loading { cursor: progress; }
#main-body { transition: opacity 0.25s var(--qh-ease); }
#main-body:focus { outline: none; }
/* new content entrance */
@keyframes qhSwapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#main-body.qh-swap-in > .qh-container, #main-body.qh-swap-in > .qh-container-fluid { animation: qhSwapIn 0.4s var(--qh-ease-out) both; }
@media (prefers-reduced-motion: reduce) {
    #main-body.qh-swap-in > .qh-container, #main-body.qh-swap-in > .qh-container-fluid { animation: none; }
    .qh-progress > span { transition: none; }
}

/* notification count = alert (red); cart count stays white */
.qh-bell .qh-count { background: var(--qh-red); color: var(--qh-on-accent); }

/* ============================================================ WHMCS sidebars as tab rows (includes/qh-sidebar-tabs.tpl) */
.qh-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.qh-tabs-row { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--qh-radius); background: var(--qh-surface); border: 1px solid var(--qh-border); box-shadow: var(--qh-shadow-card); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.qh-tabs-row::-webkit-scrollbar { display: none; }
.qh-shell-body .qh-tabs-row .qh-tab {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--qh-radius-sm);
    background: transparent; color: var(--qh-muted); font-size: 0.84rem; font-weight: 600; white-space: nowrap; box-shadow: none; overflow: visible; transition: background 0.15s, color 0.15s;
}
.qh-shell-body .qh-tabs-row .qh-tab i { font-size: 0.45rem; color: var(--qh-faint); }
.qh-shell-body .qh-tabs-row .qh-tab:hover { background: rgba(var(--qh-fg-rgb), 0.05); color: var(--qh-white); }
.qh-shell-body .qh-tabs-row .qh-tab.active { background: var(--qh-accent-soft); color: var(--qh-white); box-shadow: inset 0 0 0 1px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .qh-tabs-row .qh-tab.active i { color: var(--qh-accent-text); }
.qh-shell-body .qh-tabs-row .qh-tab .badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-muted); font-size: 0.7rem; font-weight: 600; line-height: 20px; }
.qh-shell-body .qh-tabs-row .qh-tab.active .badge { background: var(--qh-accent); color: var(--qh-on-accent); }
.qh-shell-body .qh-tabs-row .qh-tab-active i { color: var(--qh-green); }
.qh-shell-body .qh-tabs-row .qh-tab-pending i, .qh-shell-body .qh-tabs-row .qh-tab-suspended i { color: var(--qh-amber); }
.qh-shell-body .qh-tabs-row .qh-tab-terminated i, .qh-shell-body .qh-tabs-row .qh-tab-cancelled i { color: var(--qh-red); }
.qh-list-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767.98px) {
    .qh-list-toolbar { align-items: stretch; }
    .qh-tabs-row { width: 100%; }
    .qh-list-actions .qh-btn { flex: 1 1 auto; justify-content: center; }
}

/* sidebar panels -> rows above the content */
.qh-sidebar-tabs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.qh-sb-tabs { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.qh-sb-title { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-faint); }
.qh-sb-title i { color: var(--qh-faint); font-size: 0.8rem; }
.qh-sb-title .badge { background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-muted); border-radius: 999px; padding: 2px 7px; font-size: 0.66rem; }
.qh-sb-inline-body { flex: 1 1 100%; font-size: 0.86rem; color: var(--qh-muted); }
.qh-shell-body .qh-tabs-row .qh-tab.disabled { opacity: 0.45; pointer-events: none; }
.qh-shell-body .qh-tabs-row .qh-tab-static { cursor: default; }
.qh-shell-body .qh-tabs-row .qh-tab i { font-size: 0.8rem; }
.qh-shell-body .qh-tabs-row .qh-tab i.fa-circle, .qh-shell-body .qh-tabs-row .qh-tab i.fa-dot-circle { font-size: 0.45rem; }
/* info panels (Your Info, Invoices Due, Ticket Information ...) as a compact card grid */
.qh-sidebar-tabs .qh-sb-card { margin: 0; }
.qh-sidebar-tabs .qh-sb-card .card-header { padding: 10px 14px; }
.qh-sidebar-tabs .qh-sb-card .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8rem; }
.qh-sidebar-tabs .qh-sb-card .card-title i { color: var(--qh-faint); font-size: 0.8rem; }
.qh-sidebar-tabs .qh-sb-card .card-body { padding: 12px 14px; font-size: 0.86rem; color: var(--qh-muted); }
.qh-sidebar-tabs .qh-sb-card .card-body p:last-child { margin-bottom: 0; }
.qh-sidebar-tabs .qh-sb-card .card-body .btn { margin-top: 8px; }
.qh-sidebar-tabs { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.qh-sidebar-tabs .qh-sb-tabs { flex: 1 1 100%; }
.qh-sidebar-tabs .qh-sb-card { flex: 1 1 340px; max-width: 560px; }
@media (max-width: 767.98px) {
    .qh-sidebar-tabs .qh-sb-card { max-width: none; }
}

/* ============================================================ side nav: collapsible groups */
.qh-side-link i { width: 22px; }
.qh-side-parent { font-weight: 600; color: var(--qh-text); }
.qh-shell-body .qh-side-parent { color: var(--qh-text); }
.qh-side-chevron { width: 14px !important; margin-left: auto; font-size: 0.6rem !important; color: var(--qh-faint); transition: transform 0.2s var(--qh-ease); }
.qh-side-collapsible.is-open > .qh-side-parent .qh-side-chevron { transform: rotate(180deg); }
.qh-side-collapsible.is-open > .qh-side-parent { color: var(--qh-white); }
.qh-side-sub { display: none; position: relative; margin: 2px 0 4px; padding-left: 12px; }
.qh-side-sub::before { content: ''; position: absolute; left: 20px; top: 4px; bottom: 4px; width: 1px; background: var(--qh-border); }
.qh-side-collapsible.is-open > .qh-side-sub { display: block; animation: qhSubIn 0.18s var(--qh-ease-out); }
@keyframes qhSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qh-side-sub .qh-side-link { height: 34px; padding-left: 20px; font-size: 0.84rem; }
.qh-side-sub .qh-side-link i { font-size: 0.85rem; }
.qh-side-sub .qh-side-link.is-active::before { left: -24px; }
.qh-side-group-title span { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .qh-side-collapsible.is-open > .qh-side-sub { animation: none; } }
/* ============================================================ colour accents (soft, muted) - owner 2026-09-20 "colorful but not sharp" */
:root {
    --qh-c-blue: rgb(var(--qh-c-blue-rgb)); --qh-c-green: rgb(var(--qh-c-green-rgb)); --qh-c-amber: rgb(var(--qh-c-amber-rgb)); --qh-c-violet: rgb(var(--qh-c-violet-rgb)); --qh-c-rose: rgb(var(--qh-c-rose-rgb));
}
/* dashboard tiles: tinted icon + soft top glow per tile */
.qh-tile { --tile: var(--qh-accent-rgb); }
.qh-tile-orange { --tile: var(--qh-accent-rgb); }
.qh-tile-green { --tile: var(--qh-c-green-rgb); }
.qh-tile-blue { --tile: var(--qh-c-blue-rgb); }
.qh-tile-amber { --tile: var(--qh-c-amber-rgb); }
.qh-tile { background: linear-gradient(135deg, rgba(var(--tile), 0.16) 0%, rgba(var(--tile), 0.06) 55%, rgba(var(--tile), 0.03) 100%), var(--qh-surface); border-color: rgba(var(--tile), 0.28); }
.qh-tile::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tile), 0.22) 0%, transparent 70%); pointer-events: none; }
.qh-tile-label { color: rgba(var(--qh-fg-rgb), 0.72); }
.qh-tile:hover { border-color: rgba(var(--tile), 0.55); box-shadow: 0 14px 32px rgba(var(--qh-shade-rgb), calc(0.4 * var(--qh-shade-k))), 0 0 24px rgba(var(--tile), 0.14); transform: translateY(-2px); background: linear-gradient(135deg, rgba(var(--tile), 0.22) 0%, rgba(var(--tile), 0.08) 55%, rgba(var(--tile), 0.04) 100%), var(--qh-surface); }
.qh-tile-ico { background: rgba(var(--tile), 0.22); border-color: rgba(var(--tile), 0.4); color: var(--qh-white); }
.qh-tile-label em { color: rgb(var(--tile)); }
/* dashboard panels: coloured title icon by panel colour (WHMCS panel classes) */
.qh-panel { --panel: var(--qh-accent-rgb); }
.qh-panel-gold, .qh-panel-orange { --panel: var(--qh-c-amber-rgb); }
.qh-panel-blue, .qh-panel-info { --panel: var(--qh-c-blue-rgb); }
.qh-panel-green, .qh-panel-emerald, .qh-panel-success { --panel: var(--qh-c-green-rgb); }
.qh-panel-red, .qh-panel-pomegranate, .qh-panel-danger { --panel: var(--qh-c-rose-rgb); }
.qh-panel-asbestos, .qh-panel-default, .qh-panel-midnight-blue { --panel: var(--qh-c-slate-rgb); }
.qh-panel-purple, .qh-panel-wisteria { --panel: var(--qh-c-violet-rgb); }
.qh-panel-title i { background: rgba(var(--panel), 0.14); color: rgb(var(--panel)); }
.qh-panel { transition: border-color 0.2s, box-shadow 0.2s; }
.qh-panel:hover, .qh-shell-body .card:hover, .qh-card:hover { border-color: rgba(var(--qh-fg-rgb), 0.14); box-shadow: 0 1px 0 rgba(var(--qh-fg-rgb), 0.05) inset, 0 14px 36px rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); }
/* card / hero / list icons */
.qh-card-head h3 i, .qh-profile-form .card .card-title i, .qh-dom-action i, .qh-dept-ico { background: rgba(var(--qh-blue-rgb), 0.14); color: var(--qh-c-blue); }
.qh-svc-ico { background: linear-gradient(135deg, var(--qh-accent), var(--qh-accent-3)); color: var(--qh-on-accent); box-shadow: 0 8px 20px rgba(var(--qh-accent-rgb), 0.3); }
.qh-list-ico { color: var(--qh-c-blue); background: rgba(var(--qh-blue-rgb), 0.10); border-color: rgba(var(--qh-blue-rgb), 0.25); }
.qh-list-ico-unread { background: var(--qh-accent); color: var(--qh-on-accent); border-color: transparent; }
.qh-list-ico-paid { color: var(--qh-c-green); background: rgba(var(--qh-green-rgb), 0.10); border-color: rgba(var(--qh-green-rgb), 0.3); }
.qh-list-ico-unpaid, .qh-list-ico-overdue { color: var(--qh-c-rose); background: rgba(var(--qh-red-rgb), 0.10); border-color: rgba(var(--qh-red-rgb), 0.3); }
.qh-kb-cat-head i { color: var(--qh-c-blue); }
.qh-kb-cat-count { background: rgba(var(--qh-blue-rgb), 0.14); color: var(--qh-c-blue); }
.qh-kb-detail .qh-kb-tag { background: rgba(var(--qh-c-violet-rgb), 0.14); color: var(--qh-c-violet); }
.qh-msg.is-staff .qh-msg-tag { background: rgba(var(--qh-blue-rgb), 0.16); color: var(--qh-c-blue); }
.qh-dom-addon-icon { background: rgba(var(--qh-green-rgb), 0.14); color: var(--qh-c-green); }
/* rings */
.qh-ring-disk { --ring: var(--qh-accent-rgb); }
.qh-ring-bw { --ring: var(--qh-c-blue-rgb); }
.qh-ring { box-shadow: 0 0 0 1px var(--qh-border), 0 0 24px rgba(var(--ring), 0.12); }
/* sidebar: soft coloured group icons + hover */
.qh-shell-body .qh-side-link:hover { background: rgba(var(--qh-fg-rgb), 0.05); transform: translateX(2px); }
.qh-side-link { transition: background 0.15s, color 0.15s, transform 0.15s; }
/* top bar buttons */
.qh-shell-body .qh-top-btn:hover { box-shadow: 0 6px 16px rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); }
.qh-shell-body a.qh-icon-btn.qh-cart-btn:hover { color: var(--qh-c-amber); }
.qh-shell-body .qh-bell:hover { color: var(--qh-c-blue); }
/* buttons: lift + glow */
.qh-shell-body .qh-btn-primary, .qh-shell-body .btn-primary { box-shadow: 0 4px 14px rgba(var(--qh-accent-rgb), 0.25); }
.qh-shell-body .qh-btn-primary:hover, .qh-shell-body .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .qh-btn-ghost:hover, .qh-shell-body .btn-default:hover { border-color: rgba(var(--qh-blue-rgb), 0.5); box-shadow: 0 6px 16px rgba(var(--qh-shade-rgb), calc(0.3 * var(--qh-shade-k))); }
/* tabs rows: coloured dots by status already; hover */
.qh-shell-body .qh-tabs-row .qh-tab:hover { box-shadow: 0 4px 12px rgba(var(--qh-shade-rgb), calc(0.25 * var(--qh-shade-k))); }
/* tables: row hover tint */
.qh-shell-body .qh-list-card tbody tr:hover td { background: rgba(var(--qh-blue-rgb), 0.05); }
/* status pills: small dot */
.qh-shell-body .label, .qh-status-pill { box-shadow: none; }
/* info alerts a soft blue again */
.qh-shell-body .alert-info { background: rgba(var(--qh-blue-rgb), 0.10); border-color: rgba(var(--qh-blue-rgb), 0.35); color: var(--qh-blue-2); }
.qh-shell-body .label-info, .qh-shell-body .badge-info { background: rgba(var(--qh-blue-rgb), 0.16); color: var(--qh-blue-2); }

/* no email hosting: hide WHMCS' webmail SSO entries wherever it renders them */
.qh-shell-body [data-identifier="webmail"], .qh-shell-body li.btn-custom-action[data-identifier="webmail"] { display: none !important; }

/* ============================================================ dashboard cards in the hostify (main theme) style, dark version - owner 2026-09-21
   (2026-09-22: colours = scheme "Slate & Indigo" - indigo / emerald / sky / amber / pink / violet / slate) */
.qh-tile-orange { --tile: var(--qh-accent-rgb); }   /* indigo  */
.qh-tile-green  { --tile: var(--qh-c-green-rgb); }   /* emerald */
.qh-tile-blue   { --tile: var(--qh-c-blue-rgb); }   /* sky     */
.qh-tile-amber  { --tile: var(--qh-c-amber-rgb); }   /* amber   */
.qh-tile, .qh-tile:hover { background: var(--qh-card-bg); border: 1px solid var(--qh-border); border-top: 3px solid rgb(var(--tile)); padding: 16px 20px 16px; gap: 4px; transform: none; box-shadow: var(--qh-shadow-card); }
.qh-tile:hover { border-color: rgba(var(--qh-fg-rgb), 0.16); border-top-color: rgb(var(--tile)); box-shadow: 0 12px 28px rgba(var(--qh-shade-rgb), calc(0.35 * var(--qh-shade-k))); background: var(--qh-surface-2); }
.qh-tile::after { display: none; }
.qh-tile-ico { position: absolute; top: 12px; right: 16px; width: auto; height: auto; border: 0; background: transparent; color: rgba(var(--qh-fg-rgb), 0.07); font-size: 46px; line-height: 1; }
.qh-tile:hover .qh-tile-ico { color: rgba(var(--tile), 0.25); }
.qh-tile-num { order: 1; margin-top: 8px; font-family: var(--qh-font); font-size: 2.5rem; font-weight: 400; line-height: 1; color: rgb(var(--tile)); }
.qh-tile-label { order: 2; padding-right: 60px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qh-muted); }
.qh-tile-label em { color: rgb(var(--tile)); }
.qh-tile.is-attention { border-color: var(--qh-border); border-top-color: rgb(var(--tile)); }
/* panels: 3px coloured top accent + button in the panel colour (hostify panel-accent-* / bg-color-*) */
.qh-panel-gold, .qh-panel-orange { --panel: var(--qh-accent-rgb); }
.qh-panel-blue, .qh-panel-info { --panel: var(--qh-c-blue-rgb); }
.qh-panel-green, .qh-panel-emerald, .qh-panel-success { --panel: var(--qh-c-green-rgb); }
.qh-panel-red, .qh-panel-pomegranate, .qh-panel-danger { --panel: var(--qh-c-rose-rgb); }
.qh-panel-asbestos, .qh-panel-default, .qh-panel-midnight-blue { --panel: var(--qh-c-slate-rgb); }
.qh-panel-purple, .qh-panel-wisteria { --panel: var(--qh-c-violet-rgb); }
.qh-panel { border-top: 3px solid rgb(var(--panel)); }
.qh-panel-title i { background: rgba(var(--panel), 0.16); color: rgb(var(--panel)); }
.qh-shell-body .qh-panel-head .qh-btn { background: rgb(var(--panel)); border-color: transparent; color: var(--qh-on-accent); box-shadow: 0 2px 8px rgba(var(--panel), 0.3); }
.qh-shell-body .qh-panel-head .qh-btn:hover { background: rgb(var(--panel)); filter: brightness(1.1); color: var(--qh-on-accent); box-shadow: 0 6px 16px rgba(var(--panel), 0.35); }
/* Montserrat is wider: slightly lighter headings, hostify weights */
.qh-shell-body h1, .qh-shell-body h2, .qh-shell-body h3, .qh-dash-title, .qh-page-title { font-weight: 600; letter-spacing: -0.01em; }
.qh-dash-title { font-size: 1.5rem; }

/* solid buttons stay pure white on colour */
.qh-shell-body .qh-btn-primary, .qh-shell-body a.qh-btn-primary, .qh-shell-body .btn-primary, .qh-shell-body .qh-panel-head .qh-btn, .qh-shell-body .qh-btn-danger:hover, .qh-shell-body .btn-danger { color: var(--qh-on-accent); }

/* ============================================================ all cards in the hostify style: 3px coloured top accent (dark) - owner 2026-09-21 */
.qh-shell-body .card, .qh-card, .qh-list-card, .qh-sidebar-tabs .qh-sb-card, .qh-ann-item, .qh-kb-cat, .qh-kb-list .qh-card, .qh-ticket-hero, .qh-svc-meta-item, .qh-profile-form .card {
    --card-accent: var(--qh-accent-rgb);               /* indigo */
    border-top: 3px solid rgb(var(--card-accent));
}
.qh-svc-hero, .qh-dom-hero { --card-accent: var(--qh-c-blue-rgb); border-top: 3px solid rgb(var(--card-accent)); }   /* sky = the product */
/* the hero's top line carries the service status (2026-09-22 hero rebuild) */
.qh-svc-hero.qh-svc-status-active { --card-accent: var(--qh-green-rgb); }
.qh-svc-hero.qh-svc-status-pending, .qh-svc-hero.qh-svc-status-suspended { --card-accent: var(--qh-amber-rgb); }
.qh-svc-hero.qh-svc-status-terminated, .qh-svc-hero.qh-svc-status-cancelled, .qh-svc-hero.qh-svc-status-fraud { --card-accent: var(--qh-red-rgb); }
.qh-page-clientareainvoices .qh-list-card, .qh-sidebar-tabs [menuitemname*="Invoices"] { --card-accent: var(--qh-c-amber-rgb); }   /* amber */
.qh-page-supportticketslist .qh-list-card, .qh-ticket-hero, .qh-page-viewticket .qh-card { --card-accent: var(--qh-c-green-rgb); }  /* emerald */
.qh-page-clientareadomains .qh-list-card, .qh-kb-cat, .qh-kb-list .qh-card { --card-accent: var(--qh-c-blue-rgb); }
.qh-ann-item { --card-accent: var(--qh-c-violet-rgb); }                                                                            /* purple */
.qh-sidebar-tabs [menuitemname*="Your Info"], .qh-sidebar-tabs [menuitemname*="Contacts"] { --card-accent: var(--qh-c-slate-rgb); }
.qh-shell-body .card-header, .qh-card-head { border-radius: 0 !important; }
.qh-card-head h3 i, .qh-shell-body .card-header .card-title i { background: rgba(var(--card-accent), 0.16); color: rgb(var(--card-accent)); }
.qh-svc-meta-item { border-top-width: 2px; }

/* ============================================================ side menu: one colour + one weight for every state (owner 2026-09-21) */
.qh-shell-body .qh-side-link, .qh-shell-body a.qh-side-link, .qh-shell-body .qh-side-parent, .qh-shell-body .qh-side-link.is-active, .qh-side-collapsible.is-open > .qh-side-parent, .qh-shell-body .qh-side-link:hover, .qh-shell-body .qh-side-link:focus-visible { color: var(--qh-text); font-weight: 500; }
.qh-side-link i, .qh-side-link:hover i, .qh-side-link.is-active i, .qh-side-parent i, .qh-side-collapsible.is-open > .qh-side-parent i, .qh-side-chevron { color: var(--qh-muted) !important; font-weight: 400 !important; }
.qh-shell-body .qh-side-link:hover { transform: none; background: rgba(var(--qh-fg-rgb), 0.05); }
.qh-shell-body .qh-side-link.is-active { background: rgba(var(--qh-fg-rgb), 0.07); }
.qh-shell-body .qh-side-link.qh-logout, .qh-shell-body .qh-side-link.qh-logout i { color: var(--qh-text); }
.qh-shell-body .qh-side-link.qh-logout i { color: var(--qh-muted) !important; }

/* ============================================================ upgrade / downgrade page (upgrade.tpl) */
.qh-upgrade-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.qh-upgrade-head .qh-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qh-faint); }
.qh-upgrade-current { margin: 4px 0 6px; font-size: 1.2rem; font-weight: 600; }
.qh-upgrade-current small { color: var(--qh-muted); font-size: 0.85rem; font-weight: 500; }
.qh-upgrade-hint { margin: 0; color: var(--qh-muted); font-size: 0.9rem; }
.qh-upgrade .plans-grid-3 { margin-top: 4px; }
.qh-upgrade .qh-upgrade-group { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); margin-bottom: 6px; }
.qh-upgrade form.plan-card { margin: 0; }
.qh-upgrade .qh-upgrade-cycle { max-width: 260px; margin: 0 auto; text-align: center; }
.qh-upgrade .plan-card .plan-pricing { margin-bottom: 18px; }
/* descriptions carry marketing images (app logos etc.) - only the feature rows belong in a card */
.qh-upgrade .qh-plan-html img:not(.ft-img), #order-standard_cart .plan-card .qh-plan-html img:not(.ft-img) { display: none; }
.qh-sb-inline-body .btn-block { display: inline-block; width: auto; }
.qh-page-upgrade .qh-sidebar-tabs { display: none; } /* upgrade.tpl has its own header + back button */
.qh-upgrade .qh-upgrade-cycle { max-width: 100%; width: 100%; font-size: 0.86rem; }
/* upgrade step 2: summary + promo + payment */
.qh-page-upgradesummary .qh-sidebar-tabs { display: none; }
.qh-upgrade-summary { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.qh-upgrade-order { margin: 0; }
.qh-upgrade-table { margin: 0; }
.qh-shell-body .qh-upgrade-table th, .qh-shell-body .qh-upgrade-table td { padding: 12px 16px; }
.qh-shell-body .qh-upgrade-table tfoot td { border-top: 1px solid var(--qh-border); color: var(--qh-muted); font-size: 0.86rem; padding: 8px 16px; }
.qh-shell-body .qh-upgrade-table tfoot tr:first-child td { padding-top: 14px; }
.qh-shell-body .qh-upgrade-table tr.qh-upgrade-total td { color: var(--qh-white); font-weight: 600; font-size: 1rem; padding-bottom: 14px; }
.qh-upgrade-from { color: var(--qh-muted); }
.qh-upgrade-arrow { margin: 0 8px; color: var(--qh-accent-text); }
.qh-upgrade-to { color: var(--qh-white); }
.qh-upgrade-note { font-size: 0.82rem; color: var(--qh-muted); display: flex; gap: 8px; align-items: flex-start; justify-content: flex-start; text-align: left; }
.qh-upgrade-note i { color: var(--qh-c-blue); margin-top: 2px; }
.qh-upgrade-side { display: flex; flex-direction: column; gap: 16px; }
.qh-upgrade-side .qh-card { margin: 0; }
.qh-upgrade-total-box { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding: 12px 14px; border-radius: var(--qh-radius-sm); background: rgba(var(--qh-fg-rgb), 0.04); border: 1px solid var(--qh-border); }
.qh-upgrade-total-box span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); }
.qh-upgrade-total-box strong { font-size: 1.15rem; color: var(--qh-white); }
.qh-btn-block { display: flex; width: 100%; justify-content: center; }
@media (max-width: 991.98px) { .qh-upgrade-summary { grid-template-columns: 1fr; } }

/* ============================================================ dashboard service rows: WHM + cPanel as inline buttons (no dropdown) - owner 2026-09-21 */
.qh-shell-body .div-service-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.qh-shell-body .div-service-buttons .btn-group-secondary { display: none !important; }
.qh-shell-body .div-service-buttons .btn-group-primary { display: flex !important; gap: 8px; }
.qh-shell-body .div-service-buttons .btn-group-primary > .dropdown-toggle { display: none !important; }
.qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu {
    display: flex !important; position: static; float: none; gap: 8px; margin: 0; padding: 0; min-width: 0;
    background: transparent; border: 0; box-shadow: none; transform: none;
}
.qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0; width: auto;
    border-radius: var(--qh-radius-sm); background: var(--qh-accent); color: var(--qh-on-accent); font-size: 0.8rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--qh-accent-rgb), 0.25); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item:hover { background: var(--qh-accent); color: var(--qh-on-accent); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--qh-accent-rgb), 0.35); }
.qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item.disabled { opacity: 0.5; pointer-events: none; }
.qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item .loading { margin-right: 2px; }
.qh-shell-body .div-service-buttons .btn-view-details { height: 32px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 575.98px) { .qh-shell-body .div-service-buttons { justify-content: flex-start; } }

/* service hero action buttons: dark green instead of orange (owner 2026-09-21) */
.qh-shell-body .qh-svc-actions .qh-btn-primary, .qh-shell-body .qh-svc-actions a.qh-btn-primary { background: var(--qh-accent); color: var(--qh-on-accent); box-shadow: 0 4px 14px rgba(var(--qh-accent-rgb), 0.3); }
.qh-shell-body .qh-svc-actions .qh-btn-primary:hover, .qh-shell-body .qh-svc-actions a.qh-btn-primary:hover { background: var(--qh-accent-3); color: var(--qh-on-accent); box-shadow: 0 10px 24px rgba(var(--qh-accent-rgb), 0.38); transform: translateY(-1px); }
.qh-shell-body .qh-svc-actions .qh-btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); }

/* hero actions: all buttons inline (Request Cancellation in the same row, no push-right); same height/alignment */
.qh-svc-actions { align-items: stretch; }
.qh-svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
.qh-svc-btn.qh-btn-danger { margin-left: 0; }
.qh-panel-head .qh-btn, .qh-card-head .qh-btn { white-space: nowrap; }
/* notifications popover: readable hover (twenty-one paints the link bg with the text colour) */
.qh-shell-body .popover-user-notifications .client-alerts li a, .qh-shell-body .client-alerts li a { background: transparent; border-radius: 8px; padding: 8px 10px; transition: background 0.15s, color 0.15s; }
.qh-shell-body .popover-user-notifications .client-alerts li a:hover, .qh-shell-body .client-alerts li a:hover, .qh-shell-body .client-alerts li a:focus { background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-white); text-decoration: none; }
.qh-shell-body .client-alerts li a:hover .message, .qh-shell-body .client-alerts li a:hover i { color: var(--qh-white); }
.qh-shell-body .client-alerts li a i { color: var(--qh-c-amber); margin-top: 2px; }
.qh-shell-body .client-alerts li a .message { color: var(--qh-text); }

/* ============================================================ mobile hardening (owner 2026-09-21: 90% of users are on phones) */
.qh-sidebar-tabs, .qh-sb-tabs, .qh-sb-card, .qh-tabs-row, .qh-content, .qh-main, .qh-container, .qh-frame { min-width: 0; max-width: 100%; }
.qh-sb-tabs { flex-wrap: nowrap; }
.qh-tabs-row { flex: 1 1 auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.qh-tabs-row .qh-tab { flex: none; }
@media (max-width: 767.98px) {
    .qh-sb-tabs { flex-direction: column; align-items: stretch; gap: 6px; }
    .qh-sb-title { padding-left: 2px; }
    .qh-tabs-row { width: 100%; }
}

/* list cards: no dead space above the search box */
.qh-shell-body .qh-dt-top label, .qh-shell-body .dataTables_filter { margin: 0; display: block; }
/* tab rows: fade at the right edge hints that the row scrolls (phones) */
@media (max-width: 767.98px) {
    .qh-tabs-row { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
    /* dashboard service row: three equal buttons with labels */
    .qh-shell-body .div-service-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
    .qh-shell-body .div-service-buttons .btn-group-primary, .qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu { display: contents !important; }
    .qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item, .qh-shell-body .div-service-buttons .btn-view-details { width: 100%; justify-content: center; padding: 0 6px; font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .qh-shell-body .div-service-buttons .btn-view-details > span:last-child { display: inline !important; }
    .qh-shell-body .div-service-buttons .btn-view-details > i { display: none; }
    /* service page meta strip: long values wrap on word boundaries first */
    .qh-svc-meta-item strong { overflow-wrap: break-word; word-break: normal; }
    /* generic: nothing may poke out of the phone viewport */
    .qh-main img, .qh-main table, .qh-main pre, .qh-main iframe, .qh-main video { max-width: 100%; }
    .qh-main pre { overflow-x: auto; }
    .qh-shell-body .qh-card-head, .qh-shell-body .qh-panel-head { flex-wrap: wrap; gap: 8px; }
    .qh-shell-body .qh-card-head small { flex-basis: 100%; }
    .qh-page-title { font-size: 1.15rem; overflow-wrap: anywhere; }
    .qh-shell-body .breadcrumb { font-size: 0.78rem; }
    .qh-shell-body .qh-btn, .qh-shell-body .btn { max-width: 100%; }
    .qh-shell-body .form-control, .qh-shell-body .custom-select, .qh-shell-body .input-group { max-width: 100%; }
    .qh-shell-body .modal-dialog { margin: 12px; }
}
@media (max-width: 400px) {
    .qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item, .qh-shell-body .div-service-buttons .btn-view-details { font-size: 0.7rem; padding: 0 4px; }
}

/* info panels with plain-text children (Ticket Information ...) */
.qh-sb-static-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.qh-sb-static-item { padding: 10px 14px; border-top: 1px solid var(--qh-border); font-size: 0.84rem; color: var(--qh-text); line-height: 1.4; }
.qh-sb-static-item .title { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint); margin-bottom: 2px; }
.qh-sb-static-item br { display: none; }
.qh-sb-static-item .label { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; background: rgba(var(--qh-fg-rgb), 0.08); color: var(--qh-muted); }
.qh-sidebar-tabs .qh-sb-card:has(.qh-sb-static-list) { max-width: none; flex-basis: 100%; }
.qh-page-viewticket .qh-sidebar-tabs [menuitemname="Ticket Information"] { display: none; } /* the ticket hero already shows this */

/* bootstrap-switch (profile / security toggles) - the parent theme ships Bootstrap's own green/grey */
.qh-shell-body .bootstrap-switch { border: 1px solid var(--qh-border); border-radius: 999px; overflow: hidden; }
.qh-shell-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.qh-shell-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--qh-green); color: var(--qh-on-accent); border-color: transparent; }
.qh-shell-body .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.qh-shell-body .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { background: var(--qh-surface-3); color: var(--qh-text); border-color: transparent; }
.qh-shell-body .bootstrap-switch .bootstrap-switch-label { background: var(--qh-surface-2); color: var(--qh-text); border-color: transparent; }
.qh-shell-body .bootstrap-switch.bootstrap-switch-focused { box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); border-color: transparent; }

/* side-nav counters = notification counts: solid red so they are caught at a glance (owner 2026-09-23) */
.qh-shell-body .qh-side-badge {
    background: var(--qh-red); color: var(--qh-on-accent); font-weight: 600;
    box-shadow: 0 0 0 1px rgba(var(--qh-red-rgb), 0.45), 0 2px 6px rgba(var(--qh-red-rgb), 0.35);
}
.qh-shell-body .qh-side-link.is-active .qh-side-badge { background: var(--qh-red); color: var(--qh-on-accent); }
/* the cart counter stays neutral - it is a basket total, not something that needs attention */
.qh-shell-body .qh-side-badge.qh-side-cart-count {
    background: rgba(var(--qh-fg-rgb), 0.10); color: var(--qh-white); box-shadow: none;
}

/* Request Cancellation: solid red with white text on every device (owner 2026-09-23).
   #d0342c keeps 4.99:1 against white, so the label stays readable at button size. */
.qh-shell-body .qh-svc-actions .qh-btn-danger,
.qh-shell-body .qh-svc-actions a.qh-btn-danger,
.qh-shell-body .qh-svc-actions button.qh-btn-danger {
    background: var(--qh-danger-solid); border: 1px solid var(--qh-danger-solid); color: var(--qh-on-accent); font-weight: 600;
}
.qh-shell-body .qh-svc-actions .qh-btn-danger:hover,
.qh-shell-body .qh-svc-actions a.qh-btn-danger:hover,
.qh-shell-body .qh-svc-actions button.qh-btn-danger:hover {
    background: var(--qh-danger-solid-2); border-color: var(--qh-danger-solid-2); color: var(--qh-on-accent);
}
.qh-shell-body .qh-svc-actions .qh-btn-danger i { color: var(--qh-on-accent); }
.qh-shell-body .qh-svc-actions .qh-btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(208, 52, 44, 0.4); }

/* Third-party module client-area output (licensing, backup box, dedicated server, ...) is written for the module's
   own page width and for Bootstrap 3. Keep it inside our content column without restyling the module itself. */
#tabOverview img, .qh-svc-module img { max-width: 100%; height: auto; }
#tabOverview table, .qh-svc-module table { width: 100%; max-width: 100%; }
#tabOverview .lic-wrap, .qh-svc-module .lic-wrap { max-width: 100%; margin-left: 0; margin-right: 0; }
#tabOverview [class*="col-xs-"], .qh-svc-module [class*="col-xs-"] { max-width: 100%; }   /* BS4 has no col-xs-* */
#tabOverview pre, #tabOverview code, .qh-svc-module pre, .qh-svc-module code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
#tabOverview .btn[style*="width"], .qh-svc-module .btn[style*="width"] { max-width: 100%; }

/* sidebar identity: a long client name wraps onto a second line instead of being cut (owner 2026-09-24) */
.qh-shell-body .qh-side-user-text { min-width: 0; }
.qh-shell-body .qh-side-user-text strong {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.25; overflow-wrap: anywhere; word-break: break-word;
}
.qh-shell-body .qh-side-user { align-items: flex-start; }
.qh-shell-body .qh-side-user .qh-avatar { margin-top: 2px; }

/* the licensing module centres its info table in a 920px page column - release it like .lic-wrap */
#tabOverview .lic-infos, .qh-svc-module .lic-infos { max-width: 100%; margin-left: 0; margin-right: 0; }

/* product name + the licence IP on one line (owner 2026-09-24) */
.qh-svc-nameline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.qh-svc-nameline .qh-svc-name { margin: 0; }
.qh-svc-ipchip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    padding: 4px 6px 4px 12px; border: 1px solid var(--qh-border); border-radius: 999px;
    background: rgba(var(--qh-fg-rgb), 0.03); color: var(--qh-text);
    font-family: var(--qh-font-mono); font-size: 0.82rem; font-weight: 500;
}
.qh-svc-ipchip > i { color: var(--qh-muted); font-size: 0.78rem; }   /* no font-family here - it would override Font Awesome */
.qh-svc-ipchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-copy-inline { width: 24px; height: 24px; font-size: 0.72rem; border-color: transparent; background: rgba(var(--qh-fg-rgb), 0.05); }

/* hero buttons that only jump to a section further down */
.qh-shell-body .qh-jump-btn { cursor: pointer; }
.qh-shell-body .qh-jump-btn i { font-size: 0.8rem; }
.qh-flash { animation: qhFieldFlash 1.4s ease; }
@keyframes qhFieldFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--qh-accent-rgb), 0); }
    15%, 60% { box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.45); }
}
@media (prefers-reduced-motion: reduce) { .qh-flash { animation: none; } }
@media (max-width: 575.98px) {
    .qh-svc-nameline { gap: 4px 8px; }
    .qh-svc-ipchip { font-size: 0.76rem; }
}

/* ---- licensing module: the "Change license IP address" form (module markup: #ipchange > form > center >
   input[name=IPc].form-controls + button[type=submit] with inline colours). Restyled to the theme and made
   responsive without touching the module files. */
#ipchange, .lic-wrap.change-ip { max-width: 100%; margin: 0; padding: 0; }
#ipchange form { margin: 0; }
#ipchange center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: left; }
#ipchange center > br { display: none; }
#ipchange input[name="IPc"] {
    flex: 0 1 50%; min-width: 0; width: auto; max-width: 100%;   /* half the container, centred with its button */
    min-height: 42px; padding: 10px 14px;
    background: var(--qh-surface-2); border: 1px solid var(--qh-border); border-radius: var(--qh-radius-sm);
    color: var(--qh-text); font-family: var(--qh-font-mono) !important;   /* the module sets Inter with !important */
    font-size: 0.88rem; letter-spacing: 0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#ipchange input[name="IPc"]::placeholder { color: var(--qh-faint); font-family: var(--qh-font); letter-spacing: 0; }
#ipchange input[name="IPc"]:focus {
    outline: none; border-color: var(--qh-accent); background: var(--qh-surface-2);
    box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.18);
}
#ipchange button[type="submit"] {
    flex: 0 0 auto; width: auto !important; min-height: 42px; padding: 10px 24px;
    background: var(--qh-accent) !important; border: 1px solid transparent !important; color: var(--qh-on-accent) !important;
    border-radius: var(--qh-radius-sm); font-family: var(--qh-font); font-weight: 600; font-size: 0.86rem;
    box-shadow: var(--qh-shadow-btn); transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
#ipchange button[type="submit"]:hover:not(:disabled) { background: var(--qh-accent-3) !important; transform: translateY(-1px); box-shadow: var(--qh-shadow-btn-hover); }
#ipchange button[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.35); }
#ipchange button[type="submit"]:disabled { opacity: 0.5; transform: none; }
@media (max-width: 575.98px) {
    #ipchange center { gap: 8px; }
    #ipchange input[name="IPc"] { flex: 1 1 100%; }
    #ipchange button[type="submit"] { flex: 1 1 100%; width: 100% !important; }
}

/* the tab bar's own .row wrapper (see clientareaproductdetails.tpl) must not inherit Bootstrap's grid geometry,
   and the nav-tabs class must not bring Bootstrap's tab borders back */
.qh-shell-body .qh-tabs-wrap { display: block; margin: 0; }
.qh-shell-body .qh-tabs.nav-tabs { border-bottom: 0; }
.qh-shell-body .qh-tabs.nav-tabs .nav-link { border: 0; }
.qh-shell-body .qh-tabs.nav-tabs .nav-link.active { border: 0; background: var(--qh-accent-soft); }

/* ============================================================ v1.0.0 makeover "Ember" (owner 2026-09-25): brand orange on graphite,
   light / dark mode, professional buttons + hover states, mobile list fixes. Colours come from the tokens in qazihost.css only. */

/* links: brand text colour, a clear hover */
.qh-shell-body a:hover { color: var(--qh-white); }
.qh-shell-body a.qh-btn:hover { text-decoration: none; }

/* ---- buttons: one primary colour, a quiet secondary, a clear pressed + focus state */
.qh-shell-body .qh-btn-primary, .qh-shell-body .btn-primary, .qh-shell-body .btn-success {
    background: var(--qh-accent); border-color: var(--qh-accent); color: var(--qh-on-accent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 8px rgba(var(--qh-accent-rgb), 0.22);
}
.qh-shell-body .qh-btn-primary:hover, .qh-shell-body .btn-primary:hover, .qh-shell-body .btn-success:hover,
.qh-shell-body .qh-btn-primary:focus, .qh-shell-body .btn-primary:focus, .qh-shell-body .btn-success:focus {
    background: var(--qh-accent-3); border-color: var(--qh-accent-3); color: var(--qh-on-accent);
    transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px rgba(var(--qh-accent-rgb), 0.3);
}
.qh-shell-body .qh-btn-primary:active, .qh-shell-body .btn-primary:not(:disabled):not(.disabled):active, .qh-shell-body .btn-success:not(:disabled):not(.disabled):active {
    background: var(--qh-accent-2); border-color: var(--qh-accent-2); transform: translateY(0); box-shadow: 0 1px 2px rgba(var(--qh-shade-rgb), calc(0.3 * var(--qh-shade-k)));
}
.qh-shell-body .btn:focus-visible, .qh-shell-body .qh-btn:focus-visible, .qh-icon-btn:focus-visible, .qh-top-btn:focus-visible {
    outline: 2px solid var(--qh-accent-text); outline-offset: 2px; box-shadow: none;
}
.qh-shell-body .qh-btn-ghost, .qh-shell-body .btn-default, .qh-shell-body .btn-secondary, .qh-shell-body .btn-light,
.qh-shell-body .btn-outline-primary, .qh-shell-body .btn-outline-secondary, .qh-shell-body .btn-info {
    background: var(--qh-surface-2); border: 1px solid var(--qh-border-2); color: var(--qh-text); box-shadow: none;
}
.qh-shell-body .qh-btn-ghost:hover, .qh-shell-body a.qh-btn-ghost:hover, .qh-shell-body .btn-default:hover, .qh-shell-body .btn-secondary:hover, .qh-shell-body .btn-light:hover,
.qh-shell-body .btn-outline-primary:hover, .qh-shell-body .btn-outline-secondary:hover, .qh-shell-body .btn-info:hover {
    background: var(--qh-surface-3); border-color: rgba(var(--qh-accent-rgb), 0.55); color: var(--qh-white);
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--qh-shade-rgb), calc(0.28 * var(--qh-shade-k)));
}
.qh-shell-body .qh-btn-ghost:active, .qh-shell-body .btn-default:active, .qh-shell-body .btn-secondary:active { transform: translateY(0); box-shadow: none; }
/* dashboard panel buttons: neutral, the panel colour stays on the icon + top line */
.qh-shell-body .qh-panel-head .qh-btn, .qh-shell-body .qh-panel-head .qh-btn:hover {
    background: var(--qh-surface-2); border: 1px solid var(--qh-border-2); color: var(--qh-text); box-shadow: none; filter: none;
}
.qh-shell-body .qh-panel-head .qh-btn:hover { background: var(--qh-surface-3); border-color: rgba(var(--panel), 0.6); color: var(--qh-white); }
@media (prefers-reduced-motion: reduce) {
    .qh-shell-body .qh-btn, .qh-shell-body .btn { transition: none; transform: none !important; }
}

/* ---- top bar: light / dark switch; phones keep it in the account menu (no room in a 360px bar) */
.qh-dropdown .qh-theme-item button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
    background: transparent; color: var(--qh-text); font: inherit; font-size: 0.84rem; font-weight: 500; text-align: left; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.qh-dropdown .qh-theme-item button i { width: 18px; text-align: center; color: var(--qh-faint); font-size: 0.85rem; }
.qh-dropdown .qh-theme-item button:hover { background: rgba(var(--qh-fg-rgb), 0.06); color: var(--qh-white); }
.qh-dropdown .qh-theme-item span.qh-ico-moon { display: none; }
html[data-theme="light"] .qh-dropdown .qh-theme-item span.qh-ico-sun { display: none; }
html[data-theme="light"] .qh-dropdown .qh-theme-item span.qh-ico-moon { display: inline; }
@media (max-width: 420px) { .qh-top-theme { display: none; } }

/* ---- dashboard "Your Active Products/Services": desktop keeps WHMCS' order (status on the far left);
   phones: name first, status on the far right of the name row, buttons below (owner 2026-09-25) */
.qh-shell-body .div-service-item .div-service-name > span, .qh-shell-body .div-service-item .div-service-name .font-weight-bold { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .qh-shell-body .div-service-item { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
    .qh-shell-body .div-service-item .div-service-name { order: 1; flex: 1 1 0; min-width: 0; }
    .qh-shell-body .div-service-item .div-service-status { order: 2; flex: 0 0 auto; margin-left: auto; padding-top: 1px; text-align: right; }
    .qh-shell-body .div-service-item .div-service-buttons { order: 3; flex: 1 1 100%; }
}

/* ---- list pages (services / domains / invoices): on phones the status chip sits next to the name, names wrap to 2 lines */
@media (max-width: 767.98px) {
    .qh-shell-body .qh-list-card .qh-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-product { grid-column: 1 / 3; grid-row: 1; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-status { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-status::before { display: none; }
    .qh-shell-body .qh-list-card .qh-table tbody tr:has(.qh-col-check) td.qh-col-status { margin-right: 30px; }
    .qh-shell-body .qh-list-card .qh-table tbody td.qh-col-action { grid-column: 1 / -1; }
    .qh-list-main strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
}
/* only list rows are links */
.qh-shell-body .qh-table tbody tr { cursor: default; }
.qh-shell-body .qh-list-card .qh-table tbody tr { cursor: pointer; }

/* ---- touch: comfortable tap targets on phones */
@media (pointer: coarse) {
    .qh-copy, .qh-reveal { width: 36px; height: 36px; }
    .qh-shell-body .qh-btn-xs { min-height: 36px; }
    .qh-shell-body .qh-tabs-row .qh-tab { min-height: 38px; }
    .qh-shell-body .div-service-buttons .btn-view-details, .qh-shell-body .div-service-buttons .btn-group-primary .dropdown-menu > li.dropdown-item { min-height: 36px; }
}

/* ---- announcement detail title (was an inline white h1) */
.qh-ann-detail .qh-ann-title { font-size: 1.45rem; color: var(--qh-white); margin-bottom: 12px; }

/* ---- light mode: surfaces that were tuned for dark only */
html[data-theme="light"] .qh-side { background: var(--qh-surface); box-shadow: none; }
html[data-theme="light"] .qh-top { background: rgba(255, 255, 255, 0.86); }
html[data-theme="light"] .qh-shell-body .form-control, html[data-theme="light"] .qh-shell-body .custom-select,
html[data-theme="light"] .qh-shell-body .qh-input { background: var(--qh-surface); border-color: var(--qh-border-2); }
html[data-theme="light"] .qh-shell-body .form-control:focus, html[data-theme="light"] .qh-shell-body .custom-select:focus { background: var(--qh-surface); border-color: var(--qh-accent); box-shadow: 0 0 0 3px rgba(var(--qh-accent-rgb), 0.15); }
html[data-theme="light"] .qh-shell-body .form-control:disabled, html[data-theme="light"] .qh-shell-body .form-control[readonly] { background: var(--qh-surface-2); }
html[data-theme="light"] .qh-tile-ico { color: rgba(var(--tile), 0.14); }
html[data-theme="light"] .qh-shell-body .qh-ring { box-shadow: 0 0 0 1px var(--qh-border); }
html[data-theme="light"] .qh-shell-body pre { background: var(--qh-surface-3); color: var(--qh-white); }
html[data-theme="light"] .qh-shell-body .close { color: var(--qh-white); text-shadow: none; }
html { scrollbar-color: rgba(var(--qh-fg-rgb), 0.18) var(--qh-bg); }
/* twenty-one paints the last list-group row with a #ddd bottom border (a bright line on dark) */
.qh-shell-body .list-group-item { border-color: var(--qh-border); }
.qh-shell-body .qh-panel .list-group-item:last-child { border-bottom: 0; }
/* account menu: WHMCS ends the secondary navbar with its own divider - never show two in a row */
.qh-dropdown .qh-dropdown-divider + .qh-dropdown-divider { display: none; }

/* ---- service page tabs (Overview / Details / Addons / Change Password): one line on phones (owner 2026-09-25) */
.qh-shell-body .qh-tabs .qh-tab-short { display: none; }
@media (max-width: 575.98px) {
    .qh-shell-body .qh-tabs { flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .qh-shell-body .qh-tabs::-webkit-scrollbar { display: none; }
    .qh-shell-body .qh-tabs .nav-item { flex: 1 1 auto; min-width: 0; }
    .qh-shell-body .qh-tabs .nav-link { width: 100%; justify-content: center; gap: 5px; padding: 8px 6px; font-size: 0.78rem; white-space: nowrap; }
    .qh-shell-body .qh-tabs .qh-tab-count { margin-left: 0; }
    .qh-shell-body .qh-tabs .qh-tab-long { display: none; }
    .qh-shell-body .qh-tabs .qh-tab-short { display: inline; }
}
@media (max-width: 420px) {
    .qh-shell-body .qh-tabs .nav-link i { display: none; }
}

/* hero "Change Password" etc. scroll to the tab row: keep it clear of the sticky top bar */
.qh-shell-body #qhServiceTabs, .qh-shell-body .qh-tab-content > .tab-pane { scroll-margin-top: calc(var(--qh-top-h) + 12px); }

/* ============================================================ v1.1.0 side menu collapse (owner 2026-09-25)
   Desktop only (>= 992px; phones keep the drawer). Toggle in the top bar, state in cookie qh_side, rendered on
   <html data-side="collapsed">. Collapsed = 72px rail with icons only: a link shows its label as a tooltip on
   hover / keyboard focus, a group opens its links as a flyout; the content column takes the freed width. */
.qh-side-collapse-btn { display: none; margin-left: -6px; }
.qh-side-collapse-btn .qh-ico-expand { display: none; }
html[data-side="collapsed"] .qh-side-collapse-btn .qh-ico-expand { display: inline-block; }
html[data-side="collapsed"] .qh-side-collapse-btn .qh-ico-collapse { display: none; }

@media (min-width: 992px) {
    .qh-side-collapse-btn { display: inline-flex; }
    html.qh-side-animating .qh-side { transition: flex-basis 0.22s var(--qh-ease), width 0.22s var(--qh-ease); }

    html[data-side="collapsed"] .qh-side { flex-basis: var(--qh-side-w-min); width: var(--qh-side-w-min); }
    html[data-side="collapsed"] .qh-side-head { justify-content: center; padding: 0; }
    html[data-side="collapsed"] .qh-brand-full { display: none; }
    html[data-side="collapsed"] .qh-brand-mark { display: inline-flex; }
    html[data-side="collapsed"] .qh-side-user { justify-content: center; padding: 12px 0; }
    html[data-side="collapsed"] .qh-side-user-text { display: none; }
    html[data-side="collapsed"] .qh-side-user .qh-avatar { margin-top: 0; }

    /* the rail never scrolls sideways; tooltips and flyouts must be able to leave it */
    html[data-side="collapsed"] .qh-side-scroll { overflow: visible; padding: 8px 10px 12px; }
    html[data-side="collapsed"] .qh-side-foot { padding: 8px 10px 12px; }
    html[data-side="collapsed"] .qh-side-group { margin-bottom: 2px; }
    html[data-side="collapsed"] .qh-side-group-title { height: 1px; margin: 8px 6px; padding: 0; overflow: hidden; background: var(--qh-border); font-size: 0; }
    html[data-side="collapsed"] .qh-side-group:first-child .qh-side-group-title { display: none; }

    html[data-side="collapsed"] .qh-side-link { justify-content: center; gap: 0; height: 40px; padding: 0; }
    html[data-side="collapsed"] .qh-side-link > i { width: auto; font-size: 1rem; }
    html[data-side="collapsed"] .qh-side-chevron { display: none !important; }
    html[data-side="collapsed"] .qh-side-link.is-active::before { left: -10px; }
    html[data-side="collapsed"] .qh-side-collapsible.is-open > .qh-side-parent,
    html[data-side="collapsed"] .qh-side-collapsible:has(.qh-side-link.is-active) > .qh-side-parent { background: rgba(var(--qh-fg-rgb), 0.07); }

    /* label tooltip */
    html[data-side="collapsed"] .qh-side-link > span:not(.qh-side-badge) {
        position: absolute; left: calc(100% + 14px); top: 50%; z-index: 30;
        transform: translate(-4px, -50%); opacity: 0; visibility: hidden; pointer-events: none;
        padding: 6px 10px; border-radius: var(--qh-radius-sm); white-space: nowrap;
        background: var(--qh-surface-3); color: var(--qh-white); border: 1px solid var(--qh-border-2);
        box-shadow: var(--qh-shadow-pop); font-size: 0.8rem; font-weight: 500;
        transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    }
    html[data-side="collapsed"] .qh-side-link:hover > span:not(.qh-side-badge),
    html[data-side="collapsed"] .qh-side-link:focus-visible > span:not(.qh-side-badge) { opacity: 1; visibility: visible; transform: translate(0, -50%); }
    /* a group's own label is the flyout title instead */
    html[data-side="collapsed"] .qh-side-parent > span:not(.qh-side-badge) { display: none; }

    /* badges become a small counter on the icon */
    html[data-side="collapsed"] .qh-side-link > .qh-side-badge {
        position: absolute; top: 3px; right: 6px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px;
        font-size: 0.6rem; line-height: 16px;
    }

    /* group flyout: hidden until hover / keyboard focus */
    html[data-side="collapsed"] .qh-side-collapsible { position: relative; }
    html[data-side="collapsed"] .qh-side-collapsible > .qh-side-sub,
    html[data-side="collapsed"] .qh-side-collapsible.is-open > .qh-side-sub { display: none; animation: none; }
    html[data-side="collapsed"] .qh-side-collapsible:hover > .qh-side-sub,
    html[data-side="collapsed"] .qh-side-collapsible:focus-within > .qh-side-sub {
        display: block; position: absolute; left: calc(100% + 12px); top: -6px; z-index: 40; min-width: 230px; margin: 0;
        padding: 6px; background: var(--qh-surface); border: 1px solid var(--qh-border-2); border-radius: var(--qh-radius-lg);
        box-shadow: var(--qh-shadow-pop); animation: qhSubIn 0.14s var(--qh-ease-out);
    }
    /* invisible bridge over the 12px gap, so moving the pointer from the icon to the flyout keeps it open */
    html[data-side="collapsed"] .qh-side-collapsible:hover::after {
        content: ''; position: absolute; left: 100%; top: 0; width: 14px; height: 100%; z-index: 39;
    }
    html[data-side="collapsed"] .qh-side-collapsible > .qh-side-sub::before {
        content: attr(data-title); position: static; display: block; width: auto; height: auto; background: none;
        padding: 6px 10px 8px; margin: 0 0 4px; border-bottom: 1px solid var(--qh-border);
        font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qh-faint);
    }
    html[data-side="collapsed"] .qh-side-sub .qh-side-link { justify-content: flex-start; gap: 10px; height: 36px; padding: 0 10px; }
    html[data-side="collapsed"] .qh-side-sub .qh-side-link > i { width: 20px; font-size: 0.85rem; }
    html[data-side="collapsed"] .qh-side-sub .qh-side-link > span:not(.qh-side-badge) {
        position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font-size: 0.84rem;
    }
    html[data-side="collapsed"] .qh-side-sub .qh-side-link > .qh-side-badge { position: static; margin-left: auto; }
    html[data-side="collapsed"] .qh-side-sub .qh-side-link.is-active::before { display: none; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    html.qh-side-animating .qh-side { transition: none; }
}