/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


.mc-promo-login body .primary-content .card .content, .mc-promo-manage body .primary-content .card .content, body .primary-content .card .card-body, body .primary-content .mc-promo-login .card-body, body .primary-content .mc-promo-login .content, body .primary-content .mc-promo-manage .card-body, body .primary-content .mc-promo-manage .content {
    padding: 1em!important;
}

header.header .navbar {
    min-height: 45px!important;
}

header.header .navbar-nav {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}

#nav {
    gap: 25px!important;
}

.navbar-nav {
    text-transform: uppercase!important;
    font-weight: 700!important;
}

.div-service-status .label {
    color: #13b370!important;
}

/* ─── Footer — TheHostCare Login style ───────────────────── */

/* ─── Footer — TheHostCare marketing-site style ───────────────────── */
#footer{background:#0c1620;color:rgba(255,255,255,.6);padding:72px 0 0;border-top:none}
#footer .container{max-width:1240px;margin:0 auto;padding:0 24px}
#footer .ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07)}
#footer .ft-brand img{height:34px;width:auto;margin-bottom:16px;display:block}
#footer .ft-brand p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.42);max-width:300px;margin-bottom:22px}
#footer .ft-socials{display:flex;gap:9px}
#footer .ft-soc{width:36px;height:36px;border-radius:5px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;font-size:14px;transition:all .15s;text-decoration:none}
#footer .ft-soc:hover{background:#19c57d;color:#fff;border-color:#19c57d}
#footer .ft-col h4{font-size:12.5px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px}
#footer .ft-links{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
#footer .ft-links a{font-size:14px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .14s}
#footer .ft-links a:hover{color:#19c57d}
#footer .ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 5px;flex-wrap:wrap}
#footer .ft-bottom p,#footer .ft-bottom a{font-size:13px;color:rgba(255,255,255,.3);text-decoration:none;margin:0}
#footer .ft-bottom a:hover{color:#19c57d}
#footer .ft-bottom-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#footer .ft-locale{display:inline-flex;align-items:center;gap:8px}
#footer .ft-locale .iti-flag{display:inline-block}
#footer .ft-vat{padding:0 0 24px;text-align:left}
#footer .ft-vat p{font-size:11.5px;color:rgba(255,255,255,.28);line-height:1.6;margin:0}
@media(max-width:980px){#footer .ft-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:600px){#footer .ft-top{grid-template-columns:1fr;gap:28px}#footer .ft-bottom{flex-direction:column;align-items:flex-start}}

a [href="https://www.whmcs.com/"]:parent {
  display: none;
}

p[style*="text-align:center"]:has(a[href="https://www.whmcs.com/"]) {
    display: none !important;
}

/* =========================================================
   HostCare design system override for Nexus theme
   Brand: TheHostCare-BG (green #19c57d, navy hero, soft cards)
   ========================================================= */
:root {
    /* Brand palette */
    --hc-primary:       #19c57d;
    --hc-primary-dark:  #10a867;
    --hc-primary-dim:   rgba(25,197,125,.12);
    --hc-primary-line:  rgba(25,197,125,.22);
    --hc-navy:    #0c1620;
    --hc-navy-2:  #111e2b;
    --hc-navy-3:  #172535;

    /* Surfaces */
    --hc-bg:      #f6fbff;
    --hc-card:    #ffffff;
    --hc-border:  #e2eef8;
    --hc-text:    #1b1f28;
    --hc-muted:   #64748b;

    /* Radii (matches site) */
    --hc-r-xl:    10px;
    --hc-r-lg:    8px;
    --hc-r-md:    5px;

    /* Shadows */
    --hc-shadow:       0 2px 12px rgba(15,24,40,.06);
    --hc-shadow-md:    0 8px 32px rgba(15,24,40,.09);
    --hc-shadow-lg:    0 20px 60px rgba(15,24,40,.12);
    --hc-shadow-green: 0 8px 28px rgba(25,197,125,.28);

    /* Override Nexus tokens */
    --primary:          var(--hc-primary);
    --primary-lifted:   var(--hc-primary-dark);
    --primary-accented: #0d8a55;
    --success:          var(--hc-primary);
    --success-lifted:   var(--hc-primary-dark);
    --success-accented: #0d8a55;
    --text:             var(--hc-text);
    --text-lifted:      var(--hc-muted);
    --text-accented:    #475569;
    --border-muted:     var(--hc-border);
    --border:           var(--hc-border);
    --bg-muted:         var(--hc-bg);

    --rounding-sm:      var(--hc-r-md);
    --rounding-md:      var(--hc-r-lg);
    --rounding-lg:      var(--hc-r-xl);
}

body.client-area, body { color: var(--hc-text); }

/* ---- Hero header ---- */
.hc-hero {
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(25,197,125,.10) 0%, transparent 60%),
        linear-gradient(160deg, var(--hc-navy) 0%, var(--hc-navy-2) 45%, #0f2235 100%);
    border-radius: var(--hc-r-xl);
    padding: 28px 32px;
    color: #fff;
    box-shadow: var(--hc-shadow-md);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.hc-hero::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 240px; height: 240px; background: rgba(255,255,255,.05); border-radius: 50%;
}
.hc-hero-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; position: relative; z-index: 1;
}
.hc-hero-left { display: flex; align-items: center; gap: 18px; }
.hc-hero-icon {
    width: 60px; height: 60px;
    background: var(--hc-primary-dim);
    border: 1px solid var(--hc-primary-line);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.hc-hero h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: #fff; word-break: break-word; }
.hc-hero .hc-hero-sub { opacity: .8; font-size: 14px; color: rgba(255,255,255,.8); }
.hc-hero .hc-hero-sub a { color: var(--hc-primary); text-decoration: none; }
.hc-hero .hc-hero-sub a:hover { color: #fff; text-decoration: underline; }

/* ---- Status pill ---- */
.hc-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hc-primary-dim);
    border: 1px solid var(--hc-primary-line);
    color: var(--hc-primary);
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .05em;
}
.hc-status-pill .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(25,197,125,.18);
    animation: hc-pulse 2s infinite;
}
@keyframes hc-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(25,197,125,.18); }
    50%     { box-shadow: 0 0 0 8px rgba(25,197,125,.04); }
}

/* Status variants (Active/Completed/Paid green; Pending amber; Suspended/Terminated/Unpaid/Cancelled red; Other neutral) */
.hc-status-pill.status-pending,
.hc-status-pill.status-pendingtransfer,
.hc-status-pill.status-grace,
.hc-status-pill.status-redemption,
.hc-status-pill.status-draft,
.hc-status-pill.status-onhold {
    background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.3);
}
.hc-status-pill.status-pending .dot,
.hc-status-pill.status-onhold .dot { box-shadow: 0 0 0 4px rgba(245,158,11,.18); }

.hc-status-pill.status-suspended,
.hc-status-pill.status-fraud,
.hc-status-pill.status-unpaid,
.hc-status-pill.status-overdue,
.hc-status-pill.status-expired {
    background: rgba(239,68,68,.14); color: #b91c1c; border-color: rgba(239,68,68,.3);
}
.hc-status-pill.status-suspended .dot,
.hc-status-pill.status-unpaid .dot,
.hc-status-pill.status-overdue .dot { box-shadow: 0 0 0 4px rgba(239,68,68,.18); }

.hc-status-pill.status-cancelled,
.hc-status-pill.status-terminated,
.hc-status-pill.status-transferredaway,
.hc-status-pill.status-closed,
.hc-status-pill.status-refunded,
.hc-status-pill.status-collections,
.hc-status-pill.status-dead {
    background: #f1f5f9; color: #64748b; border-color: #e2e8f0;
}
.hc-status-pill.status-cancelled .dot,
.hc-status-pill.status-closed .dot { box-shadow: 0 0 0 4px rgba(100,116,139,.18); }

/* ---- Info cards grid ---- */
.hc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.hc-info-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 18px 20px;
    box-shadow: var(--hc-shadow);
    transition: transform .2s ease;
}
.hc-info-card:hover { transform: translateY(-2px); }
.hc-info-card .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--hc-muted); margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.hc-info-card .label i { color: var(--hc-primary); }
.hc-info-card .value { font-size: 15px; font-weight: 600; color: var(--hc-text); word-break: break-word; }

/* ---- Section card ---- */
.hc-section {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.hc-section-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--hc-border);
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 15px;
}
.hc-section-header i { color: var(--hc-primary); }
.hc-section-body { padding: 22px; }
.hc-section-body > p:last-child,
.hc-section-body > .form-group:last-child { margin-bottom: 0; }

/* ---- Quick action buttons ---- */
.hc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.hc-action-btn {
    display: flex; align-items: center; gap: 12px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 16px 18px;
    color: var(--hc-text);
    text-decoration: none;
    font-weight: 600; font-size: 14px;
    transition: all .2s ease;
    box-shadow: var(--hc-shadow);
    cursor: pointer;
    text-align: left;
}
.hc-action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--hc-primary);
    color: var(--hc-primary);
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(25,197,125,.18);
}
.hc-action-btn i {
    width: 38px; height: 38px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.hc-action-btn.hc-success i { background: var(--hc-primary-dim); color: var(--hc-primary); }
.hc-action-btn.hc-success:hover { border-color: var(--hc-primary); color: var(--hc-primary-dark); }
.hc-action-btn.hc-danger  i { background: rgba(239,68,68,.12); color: #ef4444; }
.hc-action-btn.hc-danger:hover  { border-color: #ef4444; color: #ef4444; box-shadow: 0 8px 24px rgba(239,68,68,.15); }
.hc-action-btn.disabled { opacity: .55; pointer-events: none; }

/* ---- Buttons (HostCare style) ---- */
.hc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 22px; min-height: 46px;
    border-radius: var(--hc-r-md);
    font-size: 14.5px; font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    font-family: inherit; transition: all .18s ease;
    white-space: nowrap;
}
.hc-btn-primary { background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%); color: #fff; }
.hc-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--hc-shadow-green); color: #fff; text-decoration: none; }
.hc-btn-success { background: var(--hc-primary); color: #fff; }
.hc-btn-success:hover { background: var(--hc-primary-dark); color: #fff; text-decoration: none; }
.hc-btn-danger  { background: #ef4444; color: #fff; }
.hc-btn-danger:hover  { background: #dc2626; color: #fff; text-decoration: none; }
.hc-btn-outline { background: var(--hc-card); color: var(--hc-text); border-color: var(--hc-border); }
.hc-btn-outline:hover { border-color: var(--hc-primary); color: var(--hc-primary); text-decoration: none; }
.hc-btn-ghost { background: transparent; color: var(--hc-muted); border: none; }
.hc-btn-ghost:hover { color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-btn-lg { min-height: 52px; padding: 0 32px; font-size: 15.5px; border-radius: var(--hc-r-lg); }
.hc-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ---- Modern tabs ---- */
.hc-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    padding: 6px;
    border-radius: var(--hc-r-xl);
    margin-bottom: 16px;
    box-shadow: var(--hc-shadow);
    list-style: none;
}
.hc-tabs .nav-item { flex: 0 0 auto; }
.hc-tabs .nav-link {
    border: none !important;
    background: transparent;
    color: var(--hc-muted);
    padding: 10px 16px;
    border-radius: var(--hc-r-md);
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    transition: all .2s ease;
}
.hc-tabs .nav-link:hover { color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    color: #fff !important;
    box-shadow: var(--hc-shadow-green);
}

/* ---- Data row (key/value) ---- */
.hc-data-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--hc-border);
    gap: 16px;
}
.hc-data-row:last-child { border-bottom: none; }
.hc-data-row .k { font-weight: 600; color: var(--hc-muted); font-size: 14px; }
.hc-data-row .v { color: var(--hc-text); font-size: 14px; text-align: right; word-break: break-word; }

/* ---- Usage cards ---- */
.hc-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 16px;
}
.hc-usage-card {
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 20px;
    text-align: left;
}
.hc-usage-card h5 {
    margin: 0 0 12px; font-size: 14px; font-weight: 700;
    color: var(--hc-text); display: flex; align-items: center; gap: 8px;
}
.hc-usage-card h5 i { color: var(--hc-primary); }
.hc-usage-meta {
    display: flex; justify-content: space-between;
    font-size: 13px; color: var(--hc-muted); margin-bottom: 8px;
}
.hc-usage-meta strong { color: var(--hc-text); font-size: 16px; }
.hc-bar { width: 100%; height: 10px; background: #e8f1f8; border-radius: 999px; overflow: hidden; }
.hc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hc-primary), var(--hc-primary-dark));
    border-radius: 999px; transition: width .8s ease;
}
.hc-bar-fill.warn   { background: linear-gradient(90deg, #f59e0b, #f97316); }
.hc-bar-fill.danger { background: linear-gradient(90deg, #ef4444, #ec4899); }

/* ---- Card grid (downloads, addons, etc.) ---- */
.hc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 16px;
}
.hc-mini-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 20px 20px 0px 20px;
    box-shadow: var(--hc-shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.hc-mini-card:hover { transform: translateY(-2px); border-color: var(--hc-primary-line); }
.hc-mini-card h4 {
    font-size: 15px; font-weight: 700; margin: 0 0 8px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.hc-mini-card p { color: var(--hc-muted); font-size: 14px; margin-bottom: 10px; }

/* ---- Forms ---- */
.hc-form .form-control,
.hc-form input[type="text"],
.hc-form input[type="email"],
.hc-form input[type="password"],
.hc-form input[type="number"],
.hc-form input[type="tel"],
.hc-form input[type="url"],
.hc-form select,
.hc-form textarea {
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 5px 14px;
    font-size: 14px; color: var(--hc-text);
    transition: border-color .15s, box-shadow .15s, background .15s;
    height: auto;
}
.hc-form .form-control:focus,
.hc-form input:focus,
.hc-form select:focus,
.hc-form textarea:focus {
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
    outline: none; background: #fff;
}
.hc-form label,
.hc-form .col-form-label { font-weight: 600; color: var(--hc-text); font-size: 14px; }

/* Radio choice card */
.hc-radio-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    margin-bottom: 10px;
    cursor: pointer; transition: all .15s ease;
    background: var(--hc-card);
}
.hc-radio-card:hover { border-color: var(--hc-primary-line); background: var(--hc-bg); }
.hc-radio-card input[type="radio"],
.hc-radio-card input[type="checkbox"] { margin-top: 3px; accent-color: var(--hc-primary); }
.hc-radio-card.active { border-color: var(--hc-primary); background: var(--hc-primary-dim); }
.hc-radio-card .rc-label { font-weight: 600; color: var(--hc-text); }
.hc-radio-card .rc-desc { font-size: 12.5px; color: var(--hc-muted); margin-top: 2px; }

/* ---- Modern tables ---- */
.hc-table-wrap {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow);
    padding: 6px;
    overflow: hidden;
}
.hc-table-wrap .dataTables_wrapper { padding: 14px 16px 8px; color: var(--hc-text); }
.hc-table-wrap .dataTables_filter,
.hc-table-wrap .dataTables_length { font-size: 13px; color: var(--hc-muted); margin-bottom: 12px; }
.hc-table-wrap .dataTables_filter input,
.hc-table-wrap .dataTables_length select {
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 2px 5px;
    font-size: 13.5px; color: var(--hc-text);
    outline: none; transition: border-color .15s, box-shadow .15s;
    margin-left: 0px;
}
.hc-table-wrap .dataTables_filter input:focus,
.hc-table-wrap .dataTables_length select:focus {
    border-color: var(--hc-primary);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
}
.hc-table-wrap .dataTables_info { font-size: 12.5px; color: var(--hc-muted); padding-top: 14px !important; }
.hc-table-wrap .dataTables_paginate { padding-top: 10px !important; }
.hc-table-wrap .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 34px; height: 34px;
    padding: 0 10px !important; margin: 0 2px !important;
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border) !important;
    border-radius: var(--hc-r-md) !important;
    color: var(--hc-muted) !important;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all .15s ease; box-shadow: none !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button:hover {
    background: var(--hc-primary-dim) !important;
    border-color: var(--hc-primary-line) !important;
    color: var(--hc-primary-dark) !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button.current,
.hc-table-wrap .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%) !important;
    border-color: transparent !important; color: #fff !important;
}
.hc-table-wrap .dataTables_paginate .paginate_button.disabled {
    opacity: .4; cursor: not-allowed;
    background: var(--hc-card) !important; color: var(--hc-muted) !important;
    border-color: var(--hc-border) !important;
}

table.hc-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--hc-card);
    font-size: 14px;
    margin: 0 !important;
}
table.hc-table thead th {
    background: var(--hc-bg);
    color: var(--hc-muted);
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 10px!important;
    border: none !important;
    border-bottom: 1px solid var(--hc-border) !important;
    white-space: nowrap;
}
table.hc-table thead th:first-child { border-top-left-radius: var(--hc-r-lg); }
table.hc-table thead th:last-child  { border-top-right-radius: var(--hc-r-lg); }
table.hc-table tbody tr { transition: background .15s ease; }
table.hc-table tbody tr:hover { background: var(--hc-bg); }
table.hc-table tbody tr.clickable { cursor: pointer; }
table.hc-table tbody tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--hc-primary); }
table.hc-table tbody td {
    padding: 5px 15px !important;
    border: none !important;
    border-bottom: 1px solid var(--hc-border) !important;
    vertical-align: middle !important;
    color: var(--hc-text);
}
table.hc-table tbody tr:last-child td { border-bottom: none !important; }
table.hc-table thead th.sorting,
table.hc-table thead th.sorting_asc,
table.hc-table thead th.sorting_desc {
    cursor: pointer; position: relative; padding-right: 28px !important;
}
table.hc-table thead th.sorting::after,
table.hc-table thead th.sorting_asc::after,
table.hc-table thead th.sorting_desc::after {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900;
    font-size: 10px; opacity: .4;
}
table.hc-table thead th.sorting::after      { content: "\f0dc"; }
table.hc-table thead th.sorting_asc::after  { content: "\f0de"; opacity: 1; color: var(--hc-primary); }
table.hc-table thead th.sorting_desc::after { content: "\f0dd"; opacity: 1; color: var(--hc-primary); }

.hc-checkbox { width: 18px; height: 18px; accent-color: var(--hc-primary); cursor: pointer; }

/* ---- Bulk action toolbar ---- */
.hc-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hc-bulk-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hc-card);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 9px 16px;
    font-size: 13.5px; font-weight: 600; color: var(--hc-text);
    cursor: pointer; transition: all .15s ease;
    font-family: inherit; text-decoration: none;
}
.hc-bulk-btn:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark); text-decoration: none;
}
.hc-bulk-btn i { color: var(--hc-primary); font-size: 13px; }
.hc-dropdown-menu {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 8px 32px rgba(15,24,40,.12);
    padding: 6px; min-width: 220px;
}
.hc-dropdown-menu .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--hc-r-md);
    font-size: 13.5px; font-weight: 600; color: var(--hc-text);
    transition: background .13s, color .13s;
}
.hc-dropdown-menu .dropdown-item:hover {
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
}
.hc-dropdown-menu .dropdown-item i { color: var(--hc-primary); width: 14px; text-align: center; }

/* ---- State display (big pill) ---- */
.hc-state-display { text-align: center; padding: 28px 16px; }
.hc-state-label {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--hc-muted); margin-bottom: 14px; display: block;
}
.hc-state-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px; border-radius: 999px;
    font-size: 15px; font-weight: 700;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
    border: 1.5px solid var(--hc-primary-line);
}
.hc-state-pill.off {
    background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.3);
}
.hc-state-pill i { font-size: 16px; }

/* ---- Addon item (horizontal card) ---- */
.hc-addon {
    display: flex; align-items: center; gap: 20px;
    padding: 20px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    margin-bottom: 12px;
    transition: all .2s ease;
}
.hc-addon:hover { border-color: var(--hc-primary-line); box-shadow: var(--hc-shadow); }
.hc-addon-ico {
    width: 60px; height: 60px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.hc-addon-body { flex: 1; min-width: 0; }
.hc-addon-body strong { font-size: 15px; color: var(--hc-text); display: block; margin-bottom: 4px; }
.hc-addon-body p { color: var(--hc-muted); font-size: 13.5px; margin: 0 0 12px; }
.hc-addon-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hc-addon-actions form { display: inline-flex; gap: 8px; margin: 0; }

/* ---- Todo list ---- */
.hc-todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hc-todo-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-text); text-decoration: none;
    font-weight: 600; transition: all .15s ease;
}
.hc-todo-list a:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark); text-decoration: none;
}
.hc-todo-list a::before {
    content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: var(--hc-primary); font-size: 14px;
}

/* ---- Stat cards (for dashboard) ---- */
.hc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.hc-stat-card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    padding: 22px 24px;
    box-shadow: var(--hc-shadow);
    display: flex; align-items: center; gap: 16px;
    transition: all .2s ease;
    text-decoration: none;
    color: var(--hc-text);
}
.hc-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--hc-primary-line);
    box-shadow: 0 8px 24px rgba(25,197,125,.12);
    text-decoration: none; color: var(--hc-text);
}
.hc-stat-ico {
    width: 56px; height: 56px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.hc-stat-ico.warn   { background: rgba(245,158,11,.14); color: #b45309; }
.hc-stat-ico.danger { background: rgba(239,68,68,.14);  color: #b91c1c; }
.hc-stat-ico.info   { background: rgba(99,179,237,.14); color: #2563eb; }
.hc-stat-body { flex: 1; min-width: 0; }
.hc-stat-value { font-size: 28px; font-weight: 800; color: var(--hc-text); line-height: 1.1; }
.hc-stat-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--hc-muted); margin-top: 4px;
}

/* ---- Inline label tags (small pills used inline) ---- */
.hc-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
    text-transform: uppercase; letter-spacing: .04em;
}
.hc-tag.warn   { background: rgba(245,158,11,.14); color: #b45309; }
.hc-tag.danger { background: rgba(239,68,68,.14); color: #b91c1c; }
.hc-tag.muted  { background: #f1f5f9; color: #64748b; }
.hc-tag.info   { background: rgba(99,179,237,.13); color: #2563eb; }

/* ---- Knowledgebase / article list ---- */
.hc-kb-list { display: grid; gap: 10px; }
.hc-kb-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    color: var(--hc-text); text-decoration: none;
    transition: all .15s ease;
}
.hc-kb-item:hover {
    border-color: var(--hc-primary-line);
    background: var(--hc-bg);
    color: var(--hc-primary-dark); text-decoration: none;
    transform: translateX(2px);
}
.hc-kb-item i { color: var(--hc-primary); font-size: 16px; }
.hc-kb-item .kb-title { font-weight: 600; flex: 1; }
.hc-kb-item .kb-meta { font-size: 12px; color: var(--hc-muted); }

/* ---- Ticket thread ---- */
.hc-msg {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: var(--hc-shadow);
}
.hc-msg.staff { background: var(--hc-primary-dim); border-color: var(--hc-primary-line); }
.hc-msg-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--hc-border); gap: 12px;
    font-size: 13px;
}
.hc-msg.staff .hc-msg-head { border-bottom-color: var(--hc-primary-line); }
.hc-msg-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.hc-msg-author .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--hc-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.hc-msg-date { color: var(--hc-muted); font-size: 12px; }
.hc-msg-body { color: var(--hc-text); font-size: 14.5px; line-height: 1.6; }
.hc-msg-body p:last-child { margin-bottom: 0; }

/* ---- Auth (login/register) layout ---- */
.hc-auth-card {
    max-width: 460px; margin: 40px auto;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow-md);
    padding: 36px 32px;
}
.hc-auth-card h1, .hc-auth-card h2, .hc-auth-card h3 {
    text-align: center; margin: 0 0 8px;
    font-weight: 800; color: var(--hc-text);
}
.hc-auth-card .hc-auth-sub {
    text-align: center; color: var(--hc-muted);
    font-size: 14px; margin-bottom: 24px;
}

/* ---- Sidebar tweaks ---- */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .panel .list-group-item.active {
    background: var(--hc-primary-dim) !important;
    color: var(--hc-primary-dark) !important;
    border-color: var(--hc-primary-line) !important;
    border-left: 3px solid var(--hc-primary) !important;
    font-weight: 700;
}
.sidebar .list-group-item:hover { background: var(--hc-bg); }
.sidebar a:hover { color: var(--hc-primary); }

/* ---- Bootstrap overrides for shared widgets ---- */
.alert {
    border-radius: var(--hc-r-lg);
    border: 1px solid transparent;
}
.alert-success { background: var(--hc-primary-dim); color: #0d8a55; border-color: var(--hc-primary-line); }
.alert-info    { background: rgba(99,179,237,.10); color: #1e40af; border-color: rgba(99,179,237,.25); }
.alert-warning { background: rgba(245,158,11,.10); color: #92400e; border-color: rgba(245,158,11,.25); }
.alert-danger, .alert-error { background: rgba(239,68,68,.10); color: #991b1b; border-color: rgba(239,68,68,.25); }

.label.status,
.label-status,
span.label {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--hc-primary-dim); color: var(--hc-primary-dark);
}
.label-success,
.label.status-active,
.label.status-paid,
.label.status-answered,
.label.status-open    { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.label-warning,
.label.status-pending { background: rgba(245,158,11,.14); color: #b45309; }
.label-danger, .label-error,
.label.status-suspended,
.label.status-unpaid,
.label.status-overdue { background: rgba(239,68,68,.14); color: #b91c1c; }
.label-default,
.label.status-cancelled,
.label.status-terminated,
.label.status-closed,
.label.status-refunded { background: #f1f5f9; color: #64748b; }

/* ---- Cards (Bootstrap .card → HostCare look) ---- */
.primary-content .card,
.client-area .card {
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: var(--hc-shadow);
}
.primary-content .card-title,
.client-area .card-title {
    font-weight: 700; color: var(--hc-text);
    display: flex; align-items: center; gap: 10px;
}

/* ---- Page title bar (above tabs) ---- */
.hc-pagebar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.hc-pagebar h1, .hc-pagebar h2 {
    margin: 0; font-size: 22px; font-weight: 800; color: var(--hc-text);
    display: flex; align-items: center; gap: 12px;
}
.hc-pagebar h1 i, .hc-pagebar h2 i { color: var(--hc-primary); }

/* ---- Generic helpers ---- */
.hc-muted   { color: var(--hc-muted) !important; }
.hc-mt-0    { margin-top: 0 !important; }
.hc-mb-0    { margin-bottom: 0 !important; }
.hc-divider { height: 1px; background: var(--hc-border); margin: 18px 0; border: none; }

@media (max-width: 576px) {
    .hc-hero { padding: 22px; }
    .hc-hero h1 { font-size: 19px; }
    .hc-data-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hc-data-row .v { text-align: left; }
    .hc-addon { flex-direction: column; text-align: center; }
    .hc-msg-head { flex-direction: column; align-items: flex-start; }
    table.hc-table.responsive thead { display: none; }
    table.hc-table.responsive tbody tr {
        display: block; padding: 14px;
        border-bottom: 1px solid var(--hc-border);
    }
    table.hc-table.responsive tbody td {
        display: flex; justify-content: space-between; align-items: center;
        border: none !important;
        padding: 6px 0 !important;
        text-align: right !important;
    }
    table.hc-table.responsive tbody td::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; color: var(--hc-muted);
        letter-spacing: .05em; margin-right: 12px;
    }
}

/* =========================================================
   DigitalOcean-style control panel shell
   ========================================================= */

body.do-app {
    background: var(--hc-bg);
    margin: 0;
    min-height: 100vh;
}

/* When logged in we hide the WHMCS default container styling */
body.do-app section#main-body > .container { max-width: none !important; padding: 0 !important; }
body.do-app section#main-body { background: transparent; }
body.do-app .master-breadcrumb { background: transparent; padding: 0; }
body.do-app header#header > .topbar,
body.do-app header#header > .navbar:not(.do-topbar),
body.do-app header#header > .main-navbar-wrapper { display: none !important; }
body.do-app #footer { display: none !important; } /* large marketing footer hidden inside the app shell */

/* ---- Top bar ---- */
.do-topbar {
    height: 60px;
    background: var(--hc-navy);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.do-topbar .do-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 220px;
}
.do-topbar .do-brand img { height: 45px; width: auto; display: block; }
.do-topbar .do-search {
    flex: 1;
    max-width: 540px;
    position: relative;
}
.do-topbar .do-search input {
    width: 100%;
    height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    padding: 0 14px 0 38px;
    color: #fff;
    font-size: 13.5px;
    outline: none;
    transition: background .15s, border-color .15s;
}
.do-topbar .do-search input::placeholder { color: rgba(255,255,255,.4); }
.do-topbar .do-search input:focus {
    background: rgba(255,255,255,.10);
    border-color: var(--hc-primary-line);
}
.do-topbar .do-search i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.5); font-size: 13px;
}
.do-topbar .do-actions {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
}
.do-create-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    color: #fff;
    padding: 0 18px;
    height: 38px;
    border-radius: var(--hc-r-md);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
}
.do-create-btn:hover {
    color: #fff; text-decoration: none;
    box-shadow: var(--hc-shadow-green);
    transform: translateY(-1px);
}
.do-icon-btn {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    color: rgba(255,255,255,.75);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.do-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.do-icon-btn .do-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--hc-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--hc-navy);
}
.do-account {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    padding: 0 12px 0 6px;
    height: 38px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.do-account:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.do-account .do-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hc-primary), var(--hc-primary-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.do-account .do-account-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.do-mobile-toggle {
    display: none;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--hc-r-md);
    color: #fff;
    align-items: center; justify-content: center;
    cursor: pointer;
}

/* ---- Shell layout ---- */
.do-shell {
    display: flex;
    min-height: calc(100vh - 60px);
}
.do-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--hc-card);
    border-right: 1px solid var(--hc-border);
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 50;
}
.do-main {
    flex: 1;
    min-width: 0;
    margin-left: 240px;
    padding: 15px 0px 0px;
}
.do-main-inner { width: 90%; max-width: 1600px; margin: 0 auto; }

/* ---- Sidebar navigation ---- */
.do-nav-group { margin-bottom: 6px; }
.do-nav-group-header {
    padding: 14px 20px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex; align-items: center; gap: 8px;
}
.do-nav-group-header i { color: var(--hc-primary); font-size: 11px; }
.do-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 20px;
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    position: relative;
}
.do-nav-item:hover {
    background: var(--hc-bg);
    color: var(--hc-primary-dark);
    text-decoration: none;
}
.do-nav-item.active {
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    border-left-color: var(--hc-primary);
    font-weight: 700;
}
.do-nav-item i { width: 16px; text-align: center; color: var(--hc-muted); font-size: 14px; }
.do-nav-item.active i,
.do-nav-item:hover i { color: var(--hc-primary); }
.do-nav-item .do-nav-badge {
    margin-left: auto;
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}
.do-nav-item.active .do-nav-badge { background: var(--hc-primary); color: #fff; }

/* Page bar inside main area */
.do-pagebar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hc-border);
}
.do-pagebar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--hc-text);
    display: flex; align-items: center; gap: 12px;
}
.do-pagebar h1 i { color: var(--hc-primary); }
.do-pagebar .do-pagebar-meta { color: var(--hc-muted); font-size: 13px; }

/* Breadcrumb tweak inside shell */
.do-breadcrumb {
    background: transparent;
    padding: 0 0 14px;
    font-size: 13px;
    color: var(--hc-muted);
}
.do-breadcrumb .breadcrumb {
    background: transparent; padding: 0; margin: 0;
    display: flex; gap: 6px;
    list-style: none;
}
.do-breadcrumb .breadcrumb-item a { color: var(--hc-muted); text-decoration: none; }
.do-breadcrumb .breadcrumb-item a:hover { color: var(--hc-primary); }
.do-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--hc-border); padding: 0 4px; }
.do-breadcrumb .breadcrumb-item.active { color: var(--hc-text); font-weight: 600; }

/* Footer inside shell */
.do-footer {
    border-top: 1px solid var(--hc-border);
    padding: 20px 32px;
    color: var(--hc-muted);
    font-size: 12.5px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: var(--hc-card);
}
.do-footer a { color: var(--hc-muted); text-decoration: none; }
.do-footer a:hover { color: var(--hc-primary); }
.do-footer .do-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Notifications dropdown */
.do-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 12px 40px rgba(15,24,40,.18);
    padding: 8px;
    z-index: 200;
    display: none;
}
.do-dropdown.show { display: block; }
.do-dropdown .do-dd-head {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--hc-border);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hc-muted);
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.do-dropdown a, .do-dropdown .do-dd-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    text-decoration: none;
    font-size: 13px;
    transition: background .12s;
}
.do-dropdown a:hover { background: var(--hc-bg); color: var(--hc-primary-dark); text-decoration: none; }
.do-dropdown a i { color: var(--hc-primary); width: 16px; text-align: center; margin-top: 2px; }
.do-dropdown a.danger i { color: #ef4444; }
.do-dropdown a.warn i { color: #f59e0b; }
.do-dropdown .do-dd-empty { padding: 16px; text-align: center; color: var(--hc-muted); font-size: 13px; }

/* Mobile */
@media (max-width: 900px) {
    .do-topbar { padding: 0 14px; gap: 10px; }
    .do-topbar .do-brand { min-width: 0; }
    .do-topbar .do-brand img { height: 24px; }
    .do-topbar .do-search { display: none; }
    .do-topbar .do-create-btn { padding: 0 12px; font-size: 12.5px; }
    .do-topbar .do-create-btn .do-create-label { display: none; }
    .do-account .do-account-label { display: none; }
    .do-mobile-toggle { display: inline-flex; }
    .do-sidebar {
        position: fixed; top: 60px; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 90;
        box-shadow: 4px 0 20px rgba(15,24,40,.12);
        height: calc(100vh - 60px);
    }
    body.do-sidebar-open .do-sidebar { transform: translateX(0); }
    body.do-sidebar-open::after {
        content: ""; position: fixed; inset: 60px 0 0 0;
        background: rgba(15,24,40,.5); z-index: 80;
    }
    .do-main { padding: 18px; margin-left: 0; }
}

/* When NOT logged in (auth pages), restore some breathing room */
body:not(.do-app) section#main-body { padding-top: 24px; padding-bottom: 24px; }

/* ---- Hide WHMCS-injected stray system footer (GMT time + copyright) inside DO shell ---- */
body.do-app > p.text-center.text-muted,
body.do-app > p.text-center.small,
body.do-app > .text-center.text-muted.small,
body.do-app > p:last-of-type:not(:has(*)),
body.do-app .do-main > p.text-center.text-muted,
body.do-app .do-main > p.text-center.small {
    display: none !important;
}
/* Any element flagged by our JS cleanup below */
body.do-app .do-strip-system-footer { display: none !important; }

/* ---- Footer stickiness + background fixes for DO shell ---- */
html, body { background: var(--hc-bg); }
body.do-app { display: flex; flex-direction: column; min-height: 100vh; }
body.do-app .do-shell { flex: 1; align-items: stretch; }
body.do-app .do-main {
    display: flex;
    flex-direction: column;
    background: var(--hc-bg);
}
body.do-app .do-main-inner { flex: 1; }

/* Kill the dark marketing footer + WHMCS section bg whenever the DO topbar is present */
body:has(.do-topbar) #footer,
body:has(.do-topbar) section#main-body { display: none !important; background: transparent !important; }
body.do-app section#main-body { background: transparent !important; padding: 0 !important; }

/* Footer pinned to bottom of main column, full width of main */
body.do-app .do-footer {
    margin-top: auto;
    background: var(--hc-card);
    border-top: 1px solid var(--hc-border);
}

/* Make sure the cart/order-form content sits on the same light bg */
body.do-app .container,
body.do-app .container-fluid { background: transparent; }

/* ---- Standalone auth page (login / password reset) ---- */
html:has(body.hc-auth-page) { background-color: rgb(11, 15, 22); }
body.hc-auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-index.jpg) center top / cover no-repeat fixed rgb(11, 15, 22);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 24px 16px;
}
body.hc-auth-page .hc-auth-brand {
    display: inline-block;
    margin-bottom: 26px;
    text-decoration: none;
}
body.hc-auth-page .hc-auth-brand img {
    height: 75px;
    width: auto;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
body.hc-auth-page .hc-auth-shell {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
}
body.hc-auth-page .hc-auth-content {
    width: 100%;
}
body.hc-auth-page .hc-auth-card {
    background: #fff;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    padding: 36px 32px;
    margin: 0;
    color: var(--hc-text);
}
body.hc-auth-page .hc-auth-card h1,
body.hc-auth-page .hc-auth-card h2,
body.hc-auth-page .hc-auth-card h3 { color: var(--hc-text); }

/* Hide stray WHMCS overlays/modals that don't belong on a clean auth page */
body.hc-auth-page #fullpage-overlay,
body.hc-auth-page #modalAjax,
body.hc-auth-page #modalChooseLanguage,
body.hc-auth-page header#header,
body.hc-auth-page #footer,
body.hc-auth-page .master-breadcrumb,
body.hc-auth-page section#main-body { display: none !important; }

@media (max-width: 480px) {
    body.hc-auth-page { padding: 16px; }
    body.hc-auth-page .hc-auth-card { padding: 28px 22px; }
    body.hc-auth-page .hc-auth-brand img { height: 32px; }
}

/* ---- Language switcher on auth pages ---- */
body.hc-auth-page .hc-auth-lang {
    position: fixed;
    top: 24px;
    right: 20px;
    z-index: 50;
    margin: 0;
}
.hc-auth-lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 0 14px;
    height: 38px;
    border-radius: var(--hc-r-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.hc-auth-lang-btn:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.3);
}
.hc-auth-lang-btn i.fa-globe { color: var(--hc-primary); }

.hc-auth-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    padding: 6px;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
.hc-auth-lang-menu.show { display: block; }
.hc-auth-lang-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.hc-auth-lang-item:hover { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.hc-auth-lang-item.active { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.hc-auth-lang-item .fa-check { margin-left: auto; color: var(--hc-primary); font-size: 11px; }
.hc-auth-lang-item .iti-flag { flex: 0 0 auto; }

@media (max-width: 480px) {
    body.hc-auth-page .hc-auth-lang { top: 14px; right: 14px; }
    .hc-auth-lang-btn { padding: 0 10px; height: 34px; font-size: 12.5px; }
    .hc-auth-lang-btn span:not(.iti-flag) { display: none; }
}

/* ---- Wide auth shell (register page) ---- */
body.hc-auth-page-wide .hc-auth-shell { max-width: 820px; }
body.hc-auth-page-wide .hc-auth-card { padding: 32px 30px; }

/* "Back to login" link on auth pages */
.hc-auth-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px;
    color: rgba(255,255,255,.85);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--hc-r-md);
    transition: background .15s;
}
.hc-auth-back:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.hc-auth-back i { font-size: 11px; }

/* Center the back link under the card */
.hc-auth-shell .hc-auth-back-wrap { text-align: center; }

/* ---- Wide auth shell: bump up for register form ---- */
body.hc-auth-page-wide { padding: 60px 24px 40px; align-items: center; }
body.hc-auth-page-wide .hc-auth-shell {
    max-width: 960px;
    width: 100%;
}
body.hc-auth-page-wide .hc-auth-card { padding: 36px 36px; }

/* Within the wide register card, drop the inner hc-section bg back to white card */
body.hc-auth-page-wide .hc-auth-card .hc-section {
    box-shadow: none;
    background: var(--hc-bg);
}
body.hc-auth-page-wide .hc-auth-card .hc-section .hc-section-header {
    background: transparent;
}

/* Make the brand stand near the top, card right under */
body.hc-auth-page-wide .hc-auth-brand { margin-bottom: 22px; }

@media (max-width: 720px) {
    body.hc-auth-page-wide { padding: 24px 14px; }
    body.hc-auth-page-wide .hc-auth-card { padding: 26px 20px; }
}

/* ---- Self-contained wide auth card (works regardless of body class) ---- */
body.hc-auth-page .hc-auth-shell { max-width: none !important; width: 100%; align-items: center; }
body.hc-auth-page .hc-auth-content { display: flex; justify-content: center; }
.hc-auth-card { width: 100%; max-width: 460px; }
.hc-auth-card.wide { max-width: 960px; padding: 36px 36px; }
.hc-auth-card.wide .hc-section { box-shadow: none; background: var(--hc-bg); }
.hc-auth-card.wide .hc-section .hc-section-header { background: transparent; }

@media (max-width: 720px) {
    .hc-auth-card.wide { padding: 26px 20px; }
}

/* ---- Wide auth page: top-align so long forms (register) can scroll ---- */
body.hc-auth-page.hc-auth-page-wide {
    justify-content: flex-start !important;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ---- Make login auth card a bit wider so the form doesn't look pinched ---- */
body.hc-auth-page .hc-auth-shell { max-width: 540px !important; }
.hc-auth-card { max-width: 540px; padding: 40px 38px; }
.hc-auth-card .hc-form .form-group { margin-bottom: 18px; }

/* ---- Match login card width to password-reset (full width inputs) ---- */
body.hc-auth-page .hc-auth-shell { max-width: 540px !important; width: 100% !important; }
body.hc-auth-page .hc-auth-content { width: 100%; display: block; }
.hc-auth-card { width: 100% !important; max-width: 100% !important; padding: 40px 38px; box-sizing: border-box; }
.hc-auth-card form,
.hc-auth-card .hc-form,
.hc-auth-card .form-group,
.hc-auth-card .input-group,
.hc-auth-card .input-group .form-control { width: 100%; box-sizing: border-box; }
.hc-auth-card .input-group-merge { display: flex; flex-wrap: nowrap; width: 100%; }
.hc-auth-card .input-group-merge .form-control { flex: 1 1 auto; min-width: 0; }

/* ---- Register: wide auth card with same hero bg, top-aligned (so long form scrolls) ---- */
body.hc-auth-page.hc-auth-page-wide {
    justify-content: flex-start !important;
    padding: 40px 16px;
}
body.hc-auth-page.hc-auth-page-wide .hc-auth-shell { max-width: 960px !important; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { max-width: 100% !important; padding: 36px 36px; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide .hc-section {
    box-shadow: none;
    background: var(--hc-bg);
}
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide .hc-section .hc-section-header {
    background: transparent;
}
@media (max-width: 720px) {
    body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { padding: 26px 20px; }
}

/* ---- Register: 900px max-width on desktop ---- */
body.hc-auth-page.hc-auth-page-wide .hc-auth-shell { max-width: 900px !important; }
body.hc-auth-page.hc-auth-page-wide .hc-auth-card.wide { max-width: 900px !important; }

/* ---- Prominent "Back to login" button for register & password-reset ---- */
.hc-back-to-login {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    min-height: 48px;
    border-radius: var(--hc-r-md);
    background: var(--hc-primary-dim);
    border: 1.5px solid var(--hc-primary-line);
    color: var(--hc-primary-dark) !important;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    transition: all .18s ease;
}
.hc-back-to-login:hover {
    background: var(--hc-primary);
    border-color: var(--hc-primary);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--hc-shadow-green);
}
.hc-back-to-login i { font-size: 12px; transition: transform .18s; }
.hc-back-to-login:hover i { transform: translateX(-3px); }

/* ---- Final footer/background nail-down for DO shell ---- */
html:has(body.do-app),
body.do-app { background-color: var(--hc-bg) !important; }
body.do-app .do-shell,
body.do-app .do-main { background-color: var(--hc-bg); }
body.do-app .do-footer { flex-shrink: 0; }

/* Hide any stray text/paragraphs/centers that WHMCS $footeroutput may emit after the shell */
body.do-app > p,
body.do-app > center,
body.do-app > .text-center.text-muted,
body.do-app > .text-center.small,
body.do-app > div:not([class]):not([id]) { display: none !important; }

/* Modals & overlays must not take flow space */
body.do-app .modal:not(.show),
body.do-app #fullpage-overlay:not(.show),
body.do-app .system-modal:not(.show) { display: none !important; }

/* Bare script-only outputs get clamped to zero */
body.do-app form > .modal { position: absolute; }

/* ---- Sidebar bottom: balance + user identity card ---- */
.do-sidebar { display: flex; flex-direction: column; }
.do-sidebar > .do-nav-group:last-of-type { margin-bottom: 0; }
.do-sidebar-profile {
    margin-top: auto;
    padding: 0px 5px 0px;
    flex-shrink: 0;
}

/* Balance line */
.do-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
}
.do-balance-icon {
    width: 36px; height: 36px;
    background: var(--hc-primary-dim);
    color: var(--hc-primary);
    border-radius: var(--hc-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.do-balance-text { min-width: 0; flex: 1; }
.do-balance-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.do-balance-amount {
    font-size: 15px;
    font-weight: 800;
    color: var(--hc-text);
    margin-top: 3px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.do-profile-divider {
    height: 1px;
    background: var(--hc-border);
    margin: 8px 4px;
}

/* Identity row */
.do-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: var(--hc-r-md);
}
.do-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    color: var(--hc-text);
    text-decoration: none;
    padding: 4px;
    border-radius: var(--hc-r-md);
    transition: background .15s;
}
.do-profile-info:hover {
    background: var(--hc-primary-dim);
    color: var(--hc-text);
    text-decoration: none;
}
.do-profile-avatar {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    border-radius: var(--hc-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}
.do-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}
.do-profile-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.do-profile-email {
    font-size: 11.5px;
    color: var(--hc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.do-profile-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hc-r-md);
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    color: var(--hc-muted);
    text-decoration: none;
    transition: all .15s;
    flex-shrink: 0;
}
.do-profile-btn:hover {
    background: var(--hc-card);
    transform: translateY(-1px);
    text-decoration: none;
}
.do-profile-btn.settings:hover { border-color: var(--hc-primary-line); color: var(--hc-primary-dark); }
.do-profile-btn.logout { color: var(--hc-danger); border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }
.do-profile-btn.logout:hover,
.do-profile-btn.logout:focus {
    background: var(--hc-danger) !important;
    color: #fff !important;
    border-color: var(--hc-danger) !important;
    box-shadow: 0 6px 18px rgba(239,68,68,.35);
}
.do-profile-btn.logout:hover i,
.do-profile-btn.logout:focus i { color: #fff !important; }
.do-profile-btn i { font-size: 13px; transition: color .15s; }

/* ---- Cart button on auth pages (login/register/reset) ---- */
body.hc-auth-page .hc-auth-cart {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius: var(--hc-r-md);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    z-index: 30;
}
body.hc-auth-page .hc-auth-cart:hover {
    background: var(--hc-primary);
    border-color: var(--hc-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--hc-shadow-green);
}
body.hc-auth-page .hc-auth-cart i { font-size: 14px; }
body.hc-auth-page .hc-auth-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: var(--hc-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--hc-navy);
    line-height: 1;
}

/* Push the language switcher left of the cart */
body.hc-auth-page .hc-auth-lang { right: 74px; }

@media (max-width: 480px) {
    body.hc-auth-page .hc-auth-cart { top: 16px; right: 16px; }
    body.hc-auth-page .hc-auth-lang { right: 62px; }
}

/* ---- Top-bar: "Order New Service" dropdown ---- */
.do-order-dd-wrap { position: relative; }
.do-order-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    border: none;
    color: #fff;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--hc-r-md);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.do-order-btn:hover {
    box-shadow: var(--hc-shadow-green);
    transform: translateY(-1px);
}
.do-order-btn > i:first-child { font-size: 12px; }
.do-order-dd {
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
}
.do-order-section {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.do-order-section:first-of-type { padding-top: 4px; }
.do-order-dd a { padding: 9px 12px !important; }
.do-order-dd a i { width: 16px; text-align: center; }
@media (max-width: 720px) {
    .do-order-btn > span { display: none; }
    .do-order-btn { padding: 0 12px; }
}

/* ---- Footer lang flag button ---- */
.do-footer-lang { position: relative; display: inline-block; margin: 0; padding: 0; }
.do-footer-lang-btn {
    padding: 0;
    background: transparent;
    border: 0px solid var(--hc-border);
    border-radius: 0px;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    transition: border-color .15s, transform .15s;
}
.do-footer-lang-btn:hover { border-color: var(--hc-primary); transform: scale(1.05); }
.do-footer-lang-btn .iti-flag { width: 26px; height: 20px; background-size: cover; background-position: center; }
.do-footer-lang-menu {
    bottom: calc(100% + 8px);
    top: auto;
    right: 0;
    left: auto;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.do-footer-lang-menu::-webkit-scrollbar { width: 8px; }
.do-footer-lang-menu::-webkit-scrollbar-track { background: transparent; }
.do-footer-lang-menu::-webkit-scrollbar-thumb { background: var(--hc-border); border-radius: 999px; }
.do-footer-lang-menu::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }
.do-footer-lang-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 9px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.do-footer-lang-item:hover { background: var(--hc-primary-dim); color: var(--hc-primary-dark); }
.do-footer-lang-item.active { background: var(--hc-primary-dim); color: var(--hc-primary-dark); font-weight: 800; }
.do-footer-lang-item .iti-flag { width: 22px; height: 16px; background-size: cover; flex-shrink: 0; border-radius: 2px; }
.do-footer-lang-item i.fa-check { margin-left: auto; color: var(--hc-primary); font-size: 11px; }

/* ---- Auth page lang button: flag-only (override the textual style) ---- */
body.hc-auth-page .hc-auth-lang-btn-icon {
    padding: 0;
    width: 38px;
    height: 38px;
    justify-content: center;
}
body.hc-auth-page .hc-auth-lang-btn-icon .iti-flag {
    width: 22px; height: 16px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
}

/* ---- Clean flag images (replaces iti-flag sprite which we were stretching) ---- */
.hc-flag-img {
    display: inline-block;
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.08);
    vertical-align: middle;
    flex-shrink: 0;
}
.do-footer-lang-btn .hc-flag-img { width: 24px; height: 18px; border-radius: 2px; }
body.hc-auth-page .hc-auth-lang-btn-icon .hc-flag-img { width: 22px; height: 16px; }
.do-footer-lang-item .hc-flag-img,
.hc-auth-lang-item .hc-flag-img { width: 22px; height: 16px; }

/* Strip the old iti-flag overrides that were stretching the sprite */
.do-footer-lang-btn .iti-flag,
.do-footer-lang-item .iti-flag,
body.hc-auth-page .hc-auth-lang-btn-icon .iti-flag { background-size: auto; }

/* ============================================================
   Theme toggle button + DARK theme overrides
   ============================================================ */

/* Sun/moon icon swap */
.do-theme-toggle .hc-theme-sun  { display: none; }
.do-theme-toggle .hc-theme-moon { display: inline-block; }
html[data-theme="dark"] .do-theme-toggle .hc-theme-sun  { display: inline-block; }
html[data-theme="dark"] .do-theme-toggle .hc-theme-moon { display: none; }
.do-theme-toggle i { font-size: 14px; }

/* ---- DARK THEME ---- */
html[data-theme="dark"] {
    --hc-bg:      #0c1620;
    --hc-card:    #111e2b;
    --hc-border:  rgba(255,255,255,.08);
    --hc-text:    #e5edf6;
    --hc-muted:   #94a3b8;
    --hc-shadow:       0 2px 12px rgba(0,0,0,.35);
    --hc-shadow-md:    0 8px 32px rgba(0,0,0,.45);
    --hc-shadow-lg:    0 20px 60px rgba(0,0,0,.55);
}

html[data-theme="dark"] body { background: var(--hc-bg); color: var(--hc-text); }
html[data-theme="dark"] body.do-app { background-color: var(--hc-bg) !important; }
html[data-theme="dark"] .do-shell,
html[data-theme="dark"] .do-main,
html[data-theme="dark"] body.do-app section#main-body { background: var(--hc-bg) !important; }

/* Top bar slightly darker so it still stands out */
html[data-theme="dark"] .do-topbar { background: #08121b; border-bottom-color: rgba(255,255,255,.06); }

/* Sidebar */
html[data-theme="dark"] .do-sidebar { background: var(--hc-card); border-right-color: var(--hc-border); }
html[data-theme="dark"] .do-nav-group-header { color: var(--hc-muted); }
html[data-theme="dark"] .do-nav-item { color: var(--hc-text); }
html[data-theme="dark"] .do-nav-item:hover { background: rgba(25,197,125,.10); }
html[data-theme="dark"] .do-nav-item.active { background: rgba(25,197,125,.18); color: var(--hc-primary); }

/* Sidebar profile card */
html[data-theme="dark"] .do-balance-label,
html[data-theme="dark"] .do-profile-email { color: var(--hc-muted); }
html[data-theme="dark"] .do-balance-amount,
html[data-theme="dark"] .do-profile-name { color: var(--hc-text); }
html[data-theme="dark"] .do-profile-divider { background: var(--hc-border); }
html[data-theme="dark"] .do-profile-btn { background: rgba(255,255,255,.04); border-color: var(--hc-border); color: var(--hc-muted); }
html[data-theme="dark"] .do-profile-info:hover { background: rgba(25,197,125,.12); }

/* Cards everywhere */
html[data-theme="dark"] .hc-section,
html[data-theme="dark"] .hc-info-card,
html[data-theme="dark"] .hc-stat-card,
html[data-theme="dark"] .hc-mini-card,
html[data-theme="dark"] .hc-addon,
html[data-theme="dark"] .hc-table-wrap,
html[data-theme="dark"] .hc-auth-card,
html[data-theme="dark"] .hc-msg,
html[data-theme="dark"] .hc-kb-item,
html[data-theme="dark"] .hc-section-header,
html[data-theme="dark"] .primary-content .card {
    background: var(--hc-card) !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-text);
}

html[data-theme="dark"] .hc-section-header { background: rgba(255,255,255,.02); color: var(--hc-text); }
html[data-theme="dark"] .hc-data-row { border-bottom-color: var(--hc-border); }
html[data-theme="dark"] .hc-data-row .k { color: var(--hc-muted); }
html[data-theme="dark"] .hc-data-row .v { color: var(--hc-text); }

/* Inputs */
html[data-theme="dark"] .hc-form .form-control,
html[data-theme="dark"] .hc-form input,
html[data-theme="dark"] .hc-form select,
html[data-theme="dark"] .hc-form textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    background: #0a1622 !important;
    border-color: var(--hc-border) !important;
    color: var(--hc-text) !important;
}
html[data-theme="dark"] .hc-form input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,.35); }
html[data-theme="dark"] .hc-form input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { background: #0c1929 !important; border-color: var(--hc-primary) !important; }

/* Tables */
html[data-theme="dark"] table.hc-table,
html[data-theme="dark"] table.hc-table tbody td { background: var(--hc-card) !important; color: var(--hc-text) !important; }
html[data-theme="dark"] table.hc-table thead th { background: rgba(255,255,255,.03) !important; color: var(--hc-muted) !important; border-bottom-color: var(--hc-border) !important; }
html[data-theme="dark"] table.hc-table tbody tr:hover { background: rgba(25,197,125,.06) !important; }
html[data-theme="dark"] table.hc-table tbody td { border-bottom-color: var(--hc-border) !important; }

/* Buttons */
html[data-theme="dark"] .hc-btn-outline { background: rgba(255,255,255,.04); color: var(--hc-text); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-btn-outline:hover { background: rgba(25,197,125,.12); border-color: var(--hc-primary); color: var(--hc-primary); }

/* Status pills — keep green for active, just darken neutral */
html[data-theme="dark"] .hc-status-pill.status-cancelled,
html[data-theme="dark"] .hc-status-pill.status-terminated,
html[data-theme="dark"] .hc-status-pill.status-closed,
html[data-theme="dark"] .hc-status-pill.status-refunded { background: rgba(255,255,255,.06); color: var(--hc-muted); border-color: var(--hc-border); }

/* Hc-tags */
html[data-theme="dark"] .hc-tag.muted { background: rgba(255,255,255,.06); color: var(--hc-muted); }
html[data-theme="dark"] .hc-tag.info { background: rgba(99,179,237,.12); color: #93c5fd; }

/* Alerts */
html[data-theme="dark"] .alert-info { background: rgba(99,179,237,.10); color: #93c5fd; }
html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.12); color: #fbbf24; }
html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: rgba(239,68,68,.12); color: #fca5a5; }

/* Footer */
html[data-theme="dark"] .do-footer { background: var(--hc-card); border-top-color: var(--hc-border); color: var(--hc-muted); }
html[data-theme="dark"] .do-footer a { color: var(--hc-muted); }
html[data-theme="dark"] .do-footer a:hover { color: var(--hc-primary); }

/* Footer lang dropdown */
html[data-theme="dark"] .do-footer-lang-menu,
html[data-theme="dark"] .do-dropdown { background: var(--hc-card); border-color: var(--hc-border); color: var(--hc-text); }
html[data-theme="dark"] .do-footer-lang-item,
html[data-theme="dark"] .do-dropdown a { color: var(--hc-text); }
html[data-theme="dark"] .do-footer-lang-item:hover,
html[data-theme="dark"] .do-dropdown a:hover { background: rgba(25,197,125,.12); }
html[data-theme="dark"] .do-footer-lang-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* Breadcrumb */
html[data-theme="dark"] .do-breadcrumb .breadcrumb-item.active { color: var(--hc-text); }

/* Hero header stays dark in both modes — no override needed */

/* Page bar title */
html[data-theme="dark"] .hc-pagebar h1,
html[data-theme="dark"] .hc-pagebar h2,
html[data-theme="dark"] .do-pagebar h1,
html[data-theme="dark"] .do-pagebar h2 { color: var(--hc-text); }
html[data-theme="dark"] .hc-pagebar { border-bottom-color: var(--hc-border); }

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--hc-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* Ticket timeline tweaks for dark */
html[data-theme="dark"] .hc-timeline::before { background: var(--hc-border); }
html[data-theme="dark"] .hc-timeline-dot { box-shadow: 0 0 0 4px var(--hc-card); }
html[data-theme="dark"] .hc-timeline-event { background: rgba(255,255,255,.03); border-color: var(--hc-border); color: var(--hc-text); }
html[data-theme="dark"] .hc-timeline .hc-msg.staff { background: rgba(25,197,125,.10); border-color: rgba(25,197,125,.22); }

/* Detail row icons */
html[data-theme="dark"] .hc-detail-ico { background: rgba(255,255,255,.04); border-color: var(--hc-border); }

/* Ticket filter chips */
html[data-theme="dark"] .hc-ticket-filter { background: var(--hc-card); color: var(--hc-muted); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-ticket-filter:hover { color: var(--hc-primary); }

/* ============================================================
   Auth pages: keep hero bg + light card regardless of theme
   ============================================================ */
html[data-theme="dark"] body.hc-auth-page {
    /* Re-apply the light-mode auth bg shorthand at higher specificity */
    background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%),
                radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%),
                url(https://static.thehostcare.com/cdn/images/backgrounds/hero-index.jpg) center top / cover no-repeat fixed rgb(11, 15, 22) !important;
    color: #fff !important;
}
html[data-theme="dark"] body.hc-auth-page .hc-auth-card,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card * {
    --hc-bg:     #f6fbff;
    --hc-card:   #ffffff;
    --hc-border: #e2eef8;
    --hc-text:   #1b1f28;
    --hc-muted:  #64748b;
}
html[data-theme="dark"] body.hc-auth-page .hc-auth-card {
    background: #fff !important;
    color: #1b1f28 !important;
    border-color: #e2eef8 !important;
}
html[data-theme="dark"] body.hc-auth-page .hc-auth-card input,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card select,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card textarea,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .form-control {
    background: #f6fbff !important;
    color: #1b1f28 !important;
    border-color: #e2eef8 !important;
}
html[data-theme="dark"] body.hc-auth-page .hc-auth-card input:focus,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .form-control:focus { background: #fff !important; }
html[data-theme="dark"] body.hc-auth-page .hc-auth-card label,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .col-form-label,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card h1,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card h2,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card h3,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .hc-auth-sub { color: #1b1f28 !important; }
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .hc-auth-sub,
html[data-theme="dark"] body.hc-auth-page .hc-auth-card .hc-muted { color: #64748b !important; }

/* ============================================================
   Mobile polish
   ============================================================ */
@media (max-width: 900px) {
    /* Top bar: ensure visibility of the most important controls */
    .do-topbar { padding: 0 10px; gap: 6px; }
    .do-topbar .do-brand { min-width: 0; flex-shrink: 1; }
    .do-topbar .do-brand img { height: 22px; }
    .do-topbar .do-actions { gap: 6px; }

    /* Order button: shrink to icon */
    .do-order-btn { padding: 0 10px; }
    .do-order-btn > span { display: none; }
    .do-order-btn > i:last-child { display: none; }

    /* Account button: just the avatar */
    .do-account { padding: 0 6px; }
    .do-account .do-account-label,
    .do-account > i.fa-chevron-down { display: none; }

    /* Theme toggle keeps its 38px square */

    /* Order dropdown anchored to top edge */
    .do-order-dd {
        position: fixed;
        top: 64px;
        right: 6px;
        left: 6px;
        min-width: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .do-dropdown { right: 6px !important; left: auto !important; min-width: 0; max-width: calc(100vw - 12px); }

    /* Page bar stacks */
    .hc-pagebar { flex-direction: column; align-items: stretch; gap: 10px; }
    .hc-pagebar h1, .hc-pagebar h2 { font-size: 18px; }
    .hc-pagebar > a, .hc-pagebar > button, .hc-pagebar > .hc-btn { width: 100%; justify-content: center; }
    .hc-pagebar > div { display: flex; gap: 8px; flex-wrap: wrap; }

    /* Tables: shrink padding */
    table.hc-table thead th,
    table.hc-table tbody td { padding: 12px 10px !important; font-size: 13px; }
    .hc-status-pill { padding: 4px 10px; font-size: 11px; }

    /* Cards more breathing room */
    .hc-section-body { padding: 18px; }

    /* Footer collapses cleanly */
    .do-footer { flex-direction: column; align-items: flex-start; padding: 16px 18px; gap: 12px; }
    .do-footer-links { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .do-footer-lang-menu { right: 0; left: auto; max-width: calc(100vw - 24px); }

    /* Sidebar profile block tightens */
    .do-sidebar-profile { padding: 12px; }
    .do-balance-amount { font-size: 14px; }
    .do-profile-name { font-size: 13px; }
    .do-profile-email { font-size: 11px; }

    /* Form rows stack */
    .hc-form .row > [class*="col-"] { margin-bottom: 8px; }

    /* Ticket layout already stacks at 1024 */
}

@media (max-width: 600px) {
    .do-topbar .do-brand img { height: 20px; }
    .do-icon-btn, .do-theme-toggle, .do-order-btn, .do-account { height: 36px; }
    .do-icon-btn { width: 36px; }
    .do-main { padding: 14px; }
    .hc-info-grid, .hc-stat-grid, .hc-usage-grid, .hc-card-grid { grid-template-columns: 1fr; gap: 12px; }
    .hc-info-card { padding: 14px 16px; }
    .hc-stat-card { padding: 16px 18px; }
    .hc-stat-value { font-size: 22px; }
    .hc-stat-ico { width: 44px; height: 44px; font-size: 18px; }

    .hc-tabs { padding: 4px; gap: 4px; }
    .hc-tabs .nav-link { padding: 8px 12px; font-size: 13px; }

    .hc-data-row { padding: 10px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
    .hc-data-row .v { text-align: left; }

    /* Tables on smallest: convert sortable hc-table to card rows where data-label is set */
    table.hc-table.responsive thead { display: none; }
    table.hc-table.responsive tbody tr {
        display: block; padding: 12px;
        border-bottom: 1px solid var(--hc-border);
    }
    table.hc-table.responsive tbody td {
        display: flex; justify-content: space-between; align-items: center;
        border: none !important;
        padding: 6px 0 !important;
        text-align: right !important;
    }
    table.hc-table.responsive tbody td::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 700;
        text-transform: uppercase; color: var(--hc-muted);
        letter-spacing: .05em; margin-right: 12px;
    }

    /* Hero shrinks */
    .hc-hero { padding: 22px 20px; }
    .hc-hero h1 { font-size: 18px; }
    .hc-hero-icon { width: 48px; height: 48px; font-size: 22px; }
    .hc-hero-inner { gap: 12px; }
}

@media (max-width: 420px) {
    /* Pack the topbar to fit everything */
    .do-topbar { padding: 0 8px; gap: 4px; }
    .do-mobile-toggle { width: 34px; height: 34px; }
    .do-icon-btn { width: 34px; height: 34px; }
    .do-account { padding: 0 4px; height: 34px; }
    .do-order-btn { padding: 0 8px; height: 34px; }
    .do-topbar .do-brand img { height: 18px; }

    /* Auth card padding tightens */
    body.hc-auth-page .hc-auth-card { padding: 24px 18px; }

    /* Page bar */
    .hc-pagebar h1 { font-size: 16px; gap: 8px; }
}

/* ============================================================
   Tables: make horizontally scrollable on small screens
   ============================================================ */
.hc-table-wrap > .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hc-table-wrap > .table-container::-webkit-scrollbar { height: 8px; }
.hc-table-wrap > .table-container::-webkit-scrollbar-track { background: transparent; }
.hc-table-wrap > .table-container::-webkit-scrollbar-thumb { background: var(--hc-border); border-radius: 999px; }
.hc-table-wrap > .table-container::-webkit-scrollbar-thumb:hover { background: var(--hc-muted); }
table.hc-table { min-width: 600px; } /* let it scroll horizontally below 600px viewport */

@media (max-width: 700px) {
    .hc-table-wrap { padding: 4px; }
    .hc-table-wrap .dataTables_wrapper { padding: 10px 10px 6px; }
    .hc-table-wrap .dataTables_filter,
    .hc-table-wrap .dataTables_length { float: none !important; display: block; text-align: center; }
    .hc-table-wrap .dataTables_filter input { width: 100%; margin: 6px 0 0; }
    table.hc-table thead th { padding: 10px 12px !important; }
    table.hc-table tbody td { padding: 12px 12px !important; }
    .hc-table-wrap .dataTables_paginate .paginate_button { min-width: 30px; height: 30px; padding: 0 8px !important; }
    .hc-table-wrap .dataTables_info { text-align: center; }
}

/* ============================================================
   Language modal (replaces footer dropdown)
   ============================================================ */
body.hc-modal-open { overflow: hidden; }

.hc-lang-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.hc-lang-modal.show { display: flex; }

.hc-lang-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,15,22,.65);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.hc-lang-modal-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-xl);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: hcLangIn .2s ease-out;
}
@keyframes hcLangIn {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.hc-lang-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hc-border);
    flex-shrink: 0;
}
.hc-lang-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--hc-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hc-lang-modal-head h3 i { color: var(--hc-primary); }

.hc-lang-modal-close {
    width: 36px; height: 36px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.hc-lang-modal-close:hover { background: var(--hc-danger); color: #fff; border-color: var(--hc-danger); }

.hc-lang-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hc-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.hc-lang-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--hc-bg);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
    font-family: inherit;
}
.hc-lang-tile:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
    transform: translateY(-1px);
}
.hc-lang-tile.active {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary);
    color: var(--hc-primary-dark);
    box-shadow: 0 0 0 3px var(--hc-primary-dim);
}
.hc-lang-tile .hc-flag-img-lg {
    width: 30px;
    height: 22px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}
.hc-lang-tile .hc-lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-lang-tile .hc-lang-check {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--hc-primary);
    font-size: 13px;
}

/* Dark theme adjustments */
html[data-theme="dark"] .hc-lang-modal-card { background: var(--hc-card); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-lang-tile { background: rgba(255,255,255,.03); border-color: var(--hc-border); color: var(--hc-text); }
html[data-theme="dark"] .hc-lang-tile:hover { background: rgba(25,197,125,.10); border-color: rgba(25,197,125,.30); }
html[data-theme="dark"] .hc-lang-tile.active { background: rgba(25,197,125,.15); border-color: var(--hc-primary); }
html[data-theme="dark"] .hc-lang-modal-close { background: rgba(255,255,255,.04); color: var(--hc-muted); }

/* Mobile: full-screen modal */
@media (max-width: 600px) {
    .hc-lang-modal { padding: 0; align-items: stretch; }
    .hc-lang-modal-card { max-width: 100%; max-height: 100%; border-radius: 0; border: none; }
    .hc-lang-grid { grid-template-columns: 1fr 1fr; }
    .hc-lang-tile { padding: 14px; }
}
@media (max-width: 380px) {
    .hc-lang-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dark theme — fix list-group panels and status badges
   ============================================================ */

/* List groups (used in home dashboard panels, sidebars, etc.) */
html[data-theme="dark"] .list-group { background: transparent; }
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item-action {
    background: var(--hc-card) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item-action.active {
    background: rgba(25,197,125,.14) !important;
    color: var(--hc-primary) !important;
    border-color: var(--hc-primary-line) !important;
}
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item-action:hover {
    background: rgba(25,197,125,.08) !important;
    color: var(--hc-text) !important;
}
html[data-theme="dark"] .list-group-flush .list-group-item { border-color: var(--hc-border) !important; }

/* Bootstrap labels / status pills emitted by WHMCS — make text readable in dark */
html[data-theme="dark"] .label.status,
html[data-theme="dark"] .label-status,
html[data-theme="dark"] span.label,
html[data-theme="dark"] .badge {
    background: rgba(25,197,125,.16) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(25,197,125,.30) !important;
}
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .label.status-active,
html[data-theme="dark"] .label.status-paid,
html[data-theme="dark"] .label.status-answered,
html[data-theme="dark"] .label.status-open,
html[data-theme="dark"] .badge-success {
    background: rgba(25,197,125,.18) !important;
    color: #4ade80 !important;
    border-color: rgba(25,197,125,.35) !important;
}
html[data-theme="dark"] .label-warning,
html[data-theme="dark"] .label.status-pending,
html[data-theme="dark"] .label.status-onhold,
html[data-theme="dark"] .badge-warning {
    background: rgba(245,158,11,.18) !important;
    color: #fbbf24 !important;
    border-color: rgba(245,158,11,.35) !important;
}
html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .label-error,
html[data-theme="dark"] .label.status-suspended,
html[data-theme="dark"] .label.status-unpaid,
html[data-theme="dark"] .label.status-overdue,
html[data-theme="dark"] .label.status-fraud,
html[data-theme="dark"] .badge-danger {
    background: rgba(239,68,68,.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,.35) !important;
}
html[data-theme="dark"] .label-default,
html[data-theme="dark"] .label.status-cancelled,
html[data-theme="dark"] .label.status-terminated,
html[data-theme="dark"] .label.status-closed,
html[data-theme="dark"] .label.status-refunded {
    background: rgba(255,255,255,.08) !important;
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* hc-status-pill statuses in dark mode (status-active default = green, ensure text contrast) */
html[data-theme="dark"] .hc-status-pill {
    background: rgba(25,197,125,.16);
    color: #4ade80;
    border-color: rgba(25,197,125,.30);
}
html[data-theme="dark"] .hc-status-pill.status-pending,
html[data-theme="dark"] .hc-status-pill.status-pendingtransfer,
html[data-theme="dark"] .hc-status-pill.status-grace,
html[data-theme="dark"] .hc-status-pill.status-redemption,
html[data-theme="dark"] .hc-status-pill.status-draft,
html[data-theme="dark"] .hc-status-pill.status-onhold {
    background: rgba(245,158,11,.18);
    color: #fbbf24;
    border-color: rgba(245,158,11,.35);
}
html[data-theme="dark"] .hc-status-pill.status-suspended,
html[data-theme="dark"] .hc-status-pill.status-fraud,
html[data-theme="dark"] .hc-status-pill.status-unpaid,
html[data-theme="dark"] .hc-status-pill.status-overdue,
html[data-theme="dark"] .hc-status-pill.status-expired {
    background: rgba(239,68,68,.18);
    color: #fca5a5;
    border-color: rgba(239,68,68,.35);
}
html[data-theme="dark"] .hc-status-pill.status-cancelled,
html[data-theme="dark"] .hc-status-pill.status-terminated,
html[data-theme="dark"] .hc-status-pill.status-transferredaway,
html[data-theme="dark"] .hc-status-pill.status-closed,
html[data-theme="dark"] .hc-status-pill.status-refunded {
    background: rgba(255,255,255,.08);
    color: #94a3b8;
    border-color: rgba(255,255,255,.12);
}

/* hc-tag in dark mode */
html[data-theme="dark"] .hc-tag {
    background: rgba(25,197,125,.16);
    color: #4ade80;
}
html[data-theme="dark"] .hc-tag.warn { background: rgba(245,158,11,.18); color: #fbbf24; }
html[data-theme="dark"] .hc-tag.danger { background: rgba(239,68,68,.18); color: #fca5a5; }
html[data-theme="dark"] .hc-tag.muted { background: rgba(255,255,255,.06); color: #94a3b8; }
html[data-theme="dark"] .hc-tag.info { background: rgba(99,179,237,.14); color: #93c5fd; }

/* ============================================================
   Domain row actions dropdown
   ============================================================ */
.hc-domain-actions-btn {
    width: 32px; height: 32px;
    background: var(--hc-bg);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    color: var(--hc-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.hc-domain-actions-btn:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
}
.hc-domain-actions-menu {
    position: fixed;
    min-width: 260px;
    width: 260px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-lg);
    box-shadow: 0 12px 40px rgba(15,24,40,.18);
    padding: 6px;
    z-index: 9999;
    display: none;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
}
.hc-domain-actions-menu.show { display: block; }
.hc-domain-actions-menu .hc-dd-head {
    padding: 8px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hc-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hc-domain-actions-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--hc-r-md);
    color: var(--hc-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .12s, color .12s;
}
.hc-domain-actions-menu a:hover {
    background: var(--hc-primary-dim);
    color: var(--hc-primary-dark);
    text-decoration: none;
}
.hc-domain-actions-menu a i { width: 16px; text-align: center; color: var(--hc-primary); font-size: 12.5px; }
.hc-domain-actions-menu a.danger { color: #b91c1c; }
.hc-domain-actions-menu a.danger i { color: var(--hc-danger); }
.hc-domain-actions-menu a.danger:hover { background: rgba(239,68,68,.10); color: var(--hc-danger); }

/* Dark theme */
html[data-theme="dark"] .hc-domain-actions-btn { background: rgba(255,255,255,.04); border-color: var(--hc-border); color: var(--hc-muted); }
html[data-theme="dark"] .hc-domain-actions-btn:hover { background: rgba(25,197,125,.10); color: var(--hc-primary); }
html[data-theme="dark"] .hc-domain-actions-menu { background: var(--hc-card); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-domain-actions-menu a { color: var(--hc-text); }
html[data-theme="dark"] .hc-domain-actions-menu a:hover { background: rgba(25,197,125,.10); color: var(--hc-primary); }

/* Mobile: shift dropdown right edge so it doesn't overflow */
@media (max-width: 700px) {
    .hc-domain-actions-menu { right: 0; min-width: 220px; }
}

/* ============================================================
   Active products/services panel — buttons + new due-date line
   ============================================================ */

/* New due-date line under the product name */
.div-service-name .text-due {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--hc-muted);
    font-weight: 500;
}
.div-service-name .text-due i {
    color: var(--hc-primary);
    margin-right: 6px;
    font-size: 12px;
}
.div-service-name .text-due strong {
    color: var(--hc-text);
    font-weight: 700;
}

/* Buttons inside the panel: clean light-mode look */
.div-service-buttons .btn.btn-default,
.div-service-buttons .btn.btn-sm.btn-default {
    background: var(--hc-card);
    color: var(--hc-text);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    font-weight: 600;
    padding: 6px 14px;
    transition: all .15s;
}
.div-service-buttons .btn.btn-default:hover {
    background: var(--hc-primary-dim);
    border-color: var(--hc-primary-line);
    color: var(--hc-primary-dark);
}
.div-service-buttons .btn.btn-primary {
    background: linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary));
    border: none;
    color: #fff;
    border-radius: var(--hc-r-md);
    font-weight: 700;
}

/* DARK THEME — service items panel */
html[data-theme="dark"] .div-service-item { color: var(--hc-text); }
html[data-theme="dark"] .div-service-name .text-domain { color: var(--hc-muted); }
html[data-theme="dark"] .div-service-name .text-due { color: var(--hc-muted); }
html[data-theme="dark"] .div-service-name .text-due strong { color: var(--hc-text); }

html[data-theme="dark"] .div-service-buttons .btn.btn-default,
html[data-theme="dark"] .div-service-buttons .btn.btn-sm.btn-default,
html[data-theme="dark"] .div-service-buttons .btn-view-details {
    background: rgba(255,255,255,.04) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
html[data-theme="dark"] .div-service-buttons .btn.btn-default:hover,
html[data-theme="dark"] .div-service-buttons .btn-view-details:hover {
    background: rgba(25,197,125,.12) !important;
    border-color: rgba(25,197,125,.30) !important;
    color: var(--hc-primary) !important;
}
html[data-theme="dark"] .div-service-buttons .btn.btn-primary {
    background: linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary)) !important;
    color: #fff !important;
    border: none !important;
}

html[data-theme="dark"] .div-service-buttons .btn-group .dropdown-toggle {
    background: rgba(255,255,255,.04) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}
html[data-theme="dark"] .div-service-buttons .btn-group .dropdown-toggle:hover {
    background: rgba(25,197,125,.12) !important;
    color: var(--hc-primary) !important;
}
html[data-theme="dark"] .div-service-buttons .dropdown-menu {
    background: var(--hc-card) !important;
    border: 1px solid var(--hc-border) !important;
}
html[data-theme="dark"] .div-service-buttons .dropdown-item { color: var(--hc-text) !important; }
html[data-theme="dark"] .div-service-buttons .dropdown-item:hover {
    background: rgba(25,197,125,.12) !important;
    color: var(--hc-primary) !important;
}

/* ============================================================
   Services list: show-terminated toggle filter
   ============================================================ */
.hc-service-filters {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.hc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--hc-card);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 8px 16px 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
    font-family: inherit;
}
.hc-toggle:hover { border-color: var(--hc-primary-line); }
.hc-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.hc-toggle-track {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.hc-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    transition: transform .2s;
}
.hc-toggle input:checked + .hc-toggle-track { background: var(--hc-primary); }
.hc-toggle input:checked + .hc-toggle-track .hc-toggle-thumb { transform: translateX(16px); }
.hc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hc-text);
    white-space: nowrap;
}
.hc-toggle-label i { color: var(--hc-muted); font-size: 12px; }
.hc-toggle input:checked ~ .hc-toggle-label i { color: var(--hc-primary); }
.hc-toggle .hc-tag { padding: 2px 8px; font-size: 10.5px; }

/* Dark mode */
html[data-theme="dark"] .hc-toggle { background: var(--hc-card); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-toggle-track { background: rgba(255,255,255,.15); }

/* ============================================================
   Services list filter chips (mirrors ticket filter style)
   ============================================================ */
#hcServiceFiltersBar { margin-bottom: 14px; padding-bottom: 0; border-bottom: none; }
.hc-service-filters {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hc-service-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hc-card);
    border: 1.5px solid var(--hc-border);
    border-radius: var(--hc-r-md);
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hc-muted);
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}
.hc-service-filter:hover { border-color: var(--hc-primary-line); color: var(--hc-primary-dark); }
.hc-service-filter.active {
    background: linear-gradient(135deg, var(--hc-primary-dark) 0%, var(--hc-primary) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--hc-shadow-green);
}
.hc-service-filter i { font-size: 11px; }
.hc-service-filter.active .hc-tag.muted { background: rgba(255,255,255,.2); color: #fff; }

html[data-theme="dark"] .hc-service-filter { background: var(--hc-card); color: var(--hc-muted); border-color: var(--hc-border); }
html[data-theme="dark"] .hc-service-filter:hover { color: var(--hc-primary); }

/* Services list: hide-inactive toggle bar */
.hc-service-filters-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
@media (max-width: 600px) { .hc-service-filters-bar { justify-content: stretch; } .hc-service-filters-bar .hc-toggle { width: 100%; justify-content: space-between; } }