/* ==========================================================================
   Nightgrid - LimeNetwork client area theme (child of WHMCS Twenty-One)
   Dark navy grid + lime accent, with an equivalent light mode.
   ========================================================================== */

/* ---------- Fonts (self-hosted, same families as limenetwork.it: Fontshare ITF free licence) ---------- */
@font-face { font-family: "Satoshi"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/satoshi-400.woff2") format("woff2"); }
@font-face { font-family: "Satoshi"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/satoshi-500.woff2") format("woff2"); }
@font-face { font-family: "Satoshi"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/satoshi-700.woff2") format("woff2"); }
@font-face { font-family: "Cabinet Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cabinet-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Cabinet Grotesk"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/cabinet-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Cabinet Grotesk"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jbmono-500-latin.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
/* Palette = limenetwork.it main.css (--ln-*):
   primary #BDDDDD, primary-dark #7EB8B8, primary-deep #4A8E8E, primary-light #F0F8F8,
   lime #A5E635, lime-dark #84CC16, lime-light #F0FBE0, dark #0D1117 / #161B22 / #1F2937,
   dark-section highlights #87D3DF (teal) and #C8EB7A (lime), gray scale = Tailwind slate.
   --ng-accent  = brand teal (buttons, active nav, links, focus)
   --ng-accent2 = brand lime (secondary highlights, OK states, help/promo cards) */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --ng-bg: #0D1117;
    --ng-grid: rgba(189, 221, 221, .05);
    --ng-sidebar: rgba(22, 27, 34, .84);
    --ng-sidebar-solid: #161B22;
    --ng-line: rgba(189, 221, 221, .12);
    --ng-line-soft: rgba(189, 221, 221, .07);
    --ng-card: rgba(22, 27, 34, .74);
    --ng-card-solid: #161B22;
    --ng-card-border: rgba(189, 221, 221, .13);
    --ng-elev: rgba(22, 27, 34, .94);
    --ng-input: rgba(13, 17, 23, .7);
    --ng-input-border: rgba(189, 221, 221, .2);
    --ng-hover: rgba(189, 221, 221, .07);
    --ng-thead: rgba(189, 221, 221, .04);
    --ng-text: #E6EDF3;
    --ng-text-2: #CBD5E1;
    --ng-head: #FFFFFF;
    --ng-muted: #B4BEC9;
    --ng-label: #94A3B8;
    --ng-accent: #BDDDDD;
    --ng-accent-hover: #7EB8B8;
    --ng-accent-strong: #BDDDDD;
    --ng-link: #87D3DF;
    --ng-link-hover: #BDDDDD;
    --ng-accent-soft: rgba(189, 221, 221, .10);
    --ng-accent-ring: rgba(189, 221, 221, .30);
    --ng-accent-glow: 0 4px 18px rgba(189, 221, 221, .22);
    --ng-on-accent: #0D1117;
    --ng-accent2: #C8EB7A;
    --ng-accent2-strong: #C8EB7A;
    --ng-accent2-solid: #A5E635;
    --ng-accent2-soft: rgba(165, 230, 53, .07);
    --ng-accent2-ring: rgba(165, 230, 53, .26);
    --ng-ok-fg: #C8EB7A;   --ng-ok-bg: rgba(165, 230, 53, .12);  --ng-ok-text: #A5E635;
    --ng-warn-fg: #F3DC8E; --ng-warn-bg: rgba(233, 203, 100, .13); --ng-warn-text: #E9CB64; --ng-warn-ring: rgba(233, 203, 100, .3);
    --ng-bad-fg: #FECACA;  --ng-bad-bg: rgba(248, 113, 113, .12); --ng-bad-ring: rgba(248, 113, 113, .3);
    --ng-info-fg: #87D3DF; --ng-info-bg: rgba(135, 211, 223, .12);
    --ng-off-fg: #CBD5E1;  --ng-off-bg: rgba(148, 163, 184, .14);
    --ng-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    --ng-radius: 14px;
    --ng-radius-sm: 10px;
    --ng-font: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ng-display: "Cabinet Grotesk", "Satoshi", system-ui, sans-serif;
    --ng-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --ng-sidebar-w: 272px;
    --ng-logo-color: #FFFFFF;
}

:root[data-theme="light"] {
    color-scheme: light;
    --ng-bg: #F8FAFC;
    --ng-grid: rgba(13, 17, 23, .05);
    --ng-sidebar: rgba(255, 255, 255, .9);
    --ng-sidebar-solid: #FFFFFF;
    --ng-line: rgba(13, 17, 23, .10);
    --ng-line-soft: rgba(13, 17, 23, .07);
    --ng-card: rgba(255, 255, 255, .94);
    --ng-card-solid: #FFFFFF;
    --ng-card-border: #E2E8F0;
    --ng-elev: #FFFFFF;
    --ng-input: #FFFFFF;
    --ng-input-border: #CBD5E1;
    --ng-hover: #F1F5F9;
    --ng-thead: #F8FAFC;
    --ng-text: #0F172A;
    --ng-text-2: #334155;
    --ng-head: #0D1117;
    --ng-muted: #475569;
    --ng-label: #5B6B80;
    --ng-accent: #BDDDDD;
    --ng-accent-hover: #7EB8B8;
    --ng-accent-strong: #2F6F6F;
    --ng-link: #2F6F6F;
    --ng-link-hover: #1F5252;
    --ng-accent-soft: #F0F8F8;
    --ng-accent-ring: #A9D2D2;
    --ng-accent-glow: 0 4px 12px rgba(126, 184, 184, .35);
    --ng-on-accent: #0D1117;
    --ng-accent2: #4D7C0F;
    --ng-accent2-strong: #3F6212;
    --ng-accent2-solid: #84CC16;
    --ng-accent2-soft: #F0FBE0;
    --ng-accent2-ring: rgba(132, 204, 22, .40);
    --ng-ok-fg: #3F6212;   --ng-ok-bg: #E6F6CC;  --ng-ok-text: #4D7C0F;
    --ng-warn-fg: #854D0E; --ng-warn-bg: #FBF1CF; --ng-warn-text: #A16207; --ng-warn-ring: rgba(202, 138, 4, .35);
    --ng-bad-fg: #991B1B;  --ng-bad-bg: #FDE7E7;  --ng-bad-ring: rgba(220, 38, 38, .3);
    --ng-info-fg: #1F5252; --ng-info-bg: #E3F1F1;
    --ng-off-fg: #475569;  --ng-off-bg: #EEF2F6;
    --ng-shadow: 0 18px 44px rgba(13, 17, 23, .10);
    --ng-logo-color: #303031;
}

/* ---------- Base ---------- */
html { font-size: 15px; }
body.ng-body,
body.ng-body.primary-bg-color {
    margin: 0;
    font-family: var(--ng-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ng-text);
    background-color: var(--ng-bg);
    background-image:
        linear-gradient(var(--ng-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ng-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
.ng-body a { color: var(--ng-link); text-decoration: none; }
.ng-body a:hover, .ng-body a:focus { color: var(--ng-link-hover); text-decoration: none; }
.ng-body h1, .ng-body h2, .ng-body h3, .ng-body h4, .ng-body h5, .ng-body h6,
.ng-body .h1, .ng-body .h2, .ng-body .h3, .ng-body .h4, .ng-body .h5, .ng-body .h6 {
    color: var(--ng-head);
    font-family: var(--ng-display);
    font-weight: 700;
    letter-spacing: -.01em;
}
.ng-body strong, .ng-body b { color: var(--ng-head); }
.ng-body hr { border-color: var(--ng-line); }
.ng-body .text-muted, .ng-body small.text-muted { color: var(--ng-muted) !important; }
.ng-body .text-dark { color: var(--ng-head) !important; }
.ng-body .text-primary { color: var(--ng-link) !important; }
.ng-body .text-info { color: var(--ng-accent2) !important; }
.ng-body .text-success { color: var(--ng-ok-text) !important; }
.ng-body .text-warning { color: var(--ng-warn-text) !important; }
.ng-body .text-danger { color: var(--ng-bad-fg) !important; }
.ng-body .bg-white, .ng-body .bg-light { background-color: var(--ng-card) !important; color: var(--ng-text); }
.ng-body .border, .ng-body .border-top, .ng-body .border-bottom { border-color: var(--ng-line) !important; }
.ng-body code, .ng-body kbd, .ng-body pre, .ng-num, .ng-mono { font-family: var(--ng-mono); }
.ng-body code { color: var(--ng-accent2); background: var(--ng-hover); padding: 1px 6px; border-radius: 6px; }
.ng-body ::selection { background: rgba(189, 221, 221, .35); color: inherit; }
.ng-body :focus-visible { outline: 2px solid var(--ng-accent); outline-offset: 2px; }
:root[data-theme="light"] .ng-body :focus-visible { outline-color: var(--ng-accent-strong); }

.ng-accent { color: var(--ng-accent); }
:root[data-theme="light"] .ng-accent { color: var(--ng-accent-strong); }
.ng-sky { color: var(--ng-accent2); }
.ng-ok-text { color: var(--ng-ok-text); }
.ng-warn-text { color: var(--ng-warn-text); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.ng-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 14px; border-radius: 10px; background: var(--ng-accent); color: var(--ng-on-accent) !important; font-weight: 700; }
.ng-skip:focus { top: 12px; }

/* theme toggle icon visibility */
:root[data-theme="dark"] .ng-show-light, :root[data-theme="light"] .ng-show-dark { display: none; }
.ng-show-dark, .ng-show-light { display: inline-flex; }

/* ---------- Shell ---------- */
.ng-shell { display: flex; min-height: 100vh; }
.ng-sidebar {
    position: sticky; top: 0;
    flex: 0 0 var(--ng-sidebar-w);
    width: var(--ng-sidebar-w);
    height: 100vh;
    box-sizing: border-box;
    padding: 24px 16px;
    display: flex; flex-direction: column; gap: 24px;
    background: var(--ng-sidebar);
    border-right: 1px solid var(--ng-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
    z-index: 1040;
}
.ng-sidebar__head { display: flex; align-items: center; justify-content: space-between; }
.ng-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ng-logo__svg { display: block; height: 30px; width: auto; color: var(--ng-logo-color); }
.ng-logo--lg .ng-logo__svg { height: 40px; }
.ng-logo--top .ng-logo__svg { height: 24px; }
.ng-logo { display: inline-flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 18px; font-weight: 700; color: var(--ng-head) !important; letter-spacing: -.01em; }
.ng-logo--lg { font-size: 20px; padding: 0; }
.ng-logo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ng-accent); box-shadow: 0 0 12px rgba(189, 221, 221, .7); flex: 0 0 auto; }
.ng-logo--top { font-size: 16px; padding: 0; }

/* sidebar nav */
.ng-nav { display: flex; flex-direction: column; gap: 3px; }
.ng-nav__label { padding: 14px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-label); }
.ng-nav__label:first-child { padding-top: 0; }
.ng-nav__item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 10px; background: transparent;
    font: inherit; font-size: 14px; font-weight: 500; text-align: left;
    color: var(--ng-text-2) !important; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ng-nav__item:hover { color: var(--ng-head) !important; background: var(--ng-hover); }
.ng-nav__item .ng-ico { flex: 0 0 auto; opacity: .9; }
.ng-nav__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-nav__item.is-active, .ng-nav__group.is-active > .ng-nav__toggle {
    color: var(--ng-head) !important; font-weight: 600;
    background: var(--ng-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ng-accent-ring);
}
.ng-nav__item.is-active .ng-ico, .ng-nav__group.is-active > .ng-nav__toggle .ng-ico { color: var(--ng-accent); }
:root[data-theme="light"] .ng-nav__item.is-active .ng-ico, :root[data-theme="light"] .ng-nav__group.is-active > .ng-nav__toggle .ng-ico { color: var(--ng-accent-strong); }
.ng-nav__chev { display: inline-flex; margin-left: auto; transition: transform .2s ease; }
.ng-nav__chev .ng-ico { width: 16px; height: 16px; }
.ng-nav__toggle[aria-expanded="true"] .ng-nav__chev { transform: rotate(180deg); }
.ng-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid var(--ng-line); }
.ng-nav__sub[hidden] { display: none; }
.ng-nav__subitem { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: var(--ng-muted) !important; }
.ng-nav__subitem:hover { color: var(--ng-head) !important; background: var(--ng-hover); }
.ng-nav__subitem.is-active { color: var(--ng-head) !important; font-weight: 600; background: var(--ng-accent-soft); }
.ng-nav__divider { display: block; height: 1px; margin: 4px 10px; background: var(--ng-line); }

.ng-help { margin-top: auto; padding: 16px; border-radius: 14px; background: var(--ng-accent2-soft); border: 1px solid var(--ng-accent2-ring); display: flex; flex-direction: column; gap: 8px; }
.ng-help__title { font-size: 13px; font-weight: 600; color: var(--ng-accent2-strong); }
.ng-help__text { font-size: 13px; line-height: 1.5; color: var(--ng-muted); }
.ng-help__cta { font-size: 13px; font-weight: 600; }

/* topbar */
.ng-topbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    padding: 16px 40px;
    background: color-mix(in srgb, var(--ng-bg) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ng-line-soft);
}
.ng-search {
    flex: 1 1 320px; max-width: 520px;
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 14px; margin: 0;
    border-radius: 12px; background: var(--ng-elev); border: 1px solid var(--ng-card-border);
    color: var(--ng-label);
}
.ng-search:focus-within { border-color: var(--ng-accent-ring); box-shadow: 0 0 0 3px var(--ng-accent-soft); }
.ng-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: var(--ng-text); font: inherit; font-size: 14px; }
.ng-search input::placeholder { color: var(--ng-label); opacity: 1; }
.ng-kbd { font-family: var(--ng-mono); font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--ng-card-border); color: var(--ng-label); background: transparent; box-shadow: none; }
.ng-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.ng-iconbtn {
    position: relative;
    width: 44px; height: 44px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--ng-card-border);
    background: var(--ng-elev); color: var(--ng-text-2) !important;
    cursor: pointer; padding: 0;
    transition: border-color .15s ease, color .15s ease;
}
.ng-iconbtn:hover { color: var(--ng-head) !important; border-color: var(--ng-accent-ring); }
.ng-dot-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 11px; font-weight: 700;
    color: var(--ng-on-accent); background: var(--ng-accent2);
}
:root[data-theme="light"] .ng-dot-badge { color: #fff; }
.ng-hide-zero { display: none; }

.ng-user {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 10px 0 6px;
    border-radius: 12px; border: 1px solid var(--ng-card-border);
    background: var(--ng-elev); color: var(--ng-text);
    font: inherit; font-size: 14px; cursor: pointer;
}
.ng-user:hover { border-color: var(--ng-accent-ring); }
.ng-user .ng-ico { width: 16px; height: 16px; color: var(--ng-label); }
.ng-user__name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-avatar { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--ng-on-accent); background: var(--ng-accent); }

/* dropdowns */
.ng-dd { position: relative; }
.ng-dd__menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px; padding: 6px;
    display: none; flex-direction: column;
    border-radius: 14px; background: var(--ng-elev); border: 1px solid var(--ng-card-border);
    box-shadow: var(--ng-shadow); z-index: 1060;
    backdrop-filter: blur(14px);
}
.ng-dd.is-open .ng-dd__menu { display: flex; }
.ng-dd__menu--wide { width: 340px; }
.ng-dd__head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px; border-bottom: 1px solid var(--ng-line); margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ng-head); }
.ng-dd__head span { font-weight: 400; color: var(--ng-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.ng-dd__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; color: var(--ng-text-2) !important; }
.ng-dd__item:hover { background: var(--ng-hover); color: var(--ng-head) !important; }
.ng-dd__item--warn { color: var(--ng-warn-text) !important; }
.ng-dd__divider { height: 1px; margin: 4px 6px; background: var(--ng-line); }
.ng-alerts { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.ng-alert { border-radius: 9px; font-size: 13px; }
.ng-alert a, .ng-alert--none { display: block; padding: 10px 12px; color: var(--ng-text-2) !important; border-left: 3px solid var(--ng-accent2); border-radius: 9px; }
.ng-alert a:hover { background: var(--ng-hover); }
.ng-alert--danger a { border-left-color: #F87171; }
.ng-alert--warning a { border-left-color: #E9CB64; }
.ng-alert--success a { border-left-color: var(--ng-accent); }
.ng-alert--none { border-left: 0; color: var(--ng-muted) !important; }

/* content */
.ng-content { flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 1480px; padding: 28px 40px 48px; outline: none; }
.ng-pagehead { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.ng-pagehead__title { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800 !important; letter-spacing: -.02em !important; }
.ng-pagehead__sub { margin: 0; font-size: 15px; color: var(--ng-muted); }
.ng-pagehead .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 13px; }
.ng-pagehead .breadcrumb-item, .ng-pagehead .breadcrumb-item.active { color: var(--ng-label); }
.ng-pagehead .breadcrumb-item a { color: var(--ng-muted); }
.ng-pagehead .breadcrumb-item a:hover { color: var(--ng-head); }
.ng-pagehead .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--ng-label); }

.ng-layout { display: block; }
.ng-layout.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto 1fr;
    gap: 0 24px;
    align-items: start;
}
.ng-layout.has-side .ng-col-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.ng-layout.has-side .ng-side--primary { grid-column: 2; grid-row: 1; }
.ng-layout.has-side .ng-side--secondary { grid-column: 2; grid-row: 2; }
@media (min-width: 992px) { .ng-side .card-sidebar .card-minimise { display: none; } }
.ng-side .card-sidebar .card-minimise { cursor: pointer; color: var(--ng-label); }

.ng-badge { align-self: flex-start; display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ng-accent2-strong); background: var(--ng-accent2-soft); border: 1px solid var(--ng-accent2-ring); }

/* footer */
.ng-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 40px 28px; border-top: 1px solid var(--ng-line-soft); font-size: 13px; color: var(--ng-label); }
.ng-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ng-footer__links a, .ng-linkbtn { color: var(--ng-muted) !important; }
.ng-footer__links a:hover, .ng-linkbtn:hover { color: var(--ng-head) !important; }
.ng-footer__copy { margin: 0; }
.ng-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------- Dashboard ---------- */
.ng-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.ng-hero__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.ng-hero__title { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 800 !important; letter-spacing: -.02em !important; }
.ng-hero__sub { margin: 0; font-size: 15px; color: var(--ng-muted); }
.ng-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ng-kpi { padding: 20px; border-radius: var(--ng-radius); background: var(--ng-card); border: 1px solid var(--ng-card-border); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, transform .15s ease; }
.ng-kpi:hover { border-color: var(--ng-accent-ring); transform: translateY(-1px); }
.ng-kpi__label { font-size: 13px; color: var(--ng-muted); }
.ng-kpi__value { font-size: 32px; line-height: 1.1; font-weight: 800; color: var(--ng-head); }
.ng-kpi__value.ng-num { font-family: var(--ng-font); font-variant-numeric: tabular-nums; }
.ng-kpi__hint { font-size: 12px; color: var(--ng-muted); }
.ng-kpi__hint.ng-ok-text { color: var(--ng-ok-text); }
.ng-kpi__hint.ng-warn-text { color: var(--ng-warn-text); }
.ng-kpi__hint.ng-sky { color: var(--ng-accent2); }
.ng-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ng-home-wide { grid-column: 1 / -1; }
.ng-home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ng-home-grid .card { margin-bottom: 0 !important; }
.ng-promo { padding: 20px; border-radius: var(--ng-radius); background: var(--ng-accent2-soft); border: 1px solid var(--ng-accent2-ring); display: flex; gap: 14px; align-items: flex-start; }
.ng-promo__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ng-accent2-soft); color: var(--ng-accent2); }
.ng-promo__body { display: flex; flex-direction: column; gap: 6px; }
.ng-promo__title { font-size: 14px; font-weight: 700; color: var(--ng-head); }
.ng-promo__text { font-size: 13px; line-height: 1.5; color: var(--ng-text-2); }
.ng-promo a { font-size: 13px; font-weight: 600; }
.ng-panel .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ng-panel__link { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- Auth (login) ---------- */
.ng-auth { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ng-auth__hero { flex: 1 1 520px; min-width: 0; box-sizing: border-box; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.ng-auth__copy { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.ng-auth__title { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 800 !important; letter-spacing: -.025em !important; }
.ng-auth__sub { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ng-muted); }
.ng-auth__feature { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: var(--ng-accent2-soft); border: 1px solid var(--ng-accent2-ring); font-size: 15px; color: var(--ng-text); }
.ng-auth__pulse { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ng-accent2-solid); box-shadow: 0 0 0 0 rgba(165, 230, 53, .6); animation: ng-pulse 2.4s ease-out infinite; }
@keyframes ng-pulse { 0% { box-shadow: 0 0 0 0 rgba(165, 230, 53, .55); } 70% { box-shadow: 0 0 0 12px rgba(165, 230, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(165, 230, 53, 0); } }
@media (prefers-reduced-motion: reduce) { .ng-auth__pulse { animation: none; } .ng-kpi:hover { transform: none; } }
.ng-auth__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--ng-label); }
.ng-auth__meta a { color: var(--ng-muted); }
.ng-auth__panel { position: relative; flex: 1 1 420px; min-width: 0; box-sizing: border-box; padding: 56px 40px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--ng-sidebar); border-left: 1px solid var(--ng-line); outline: none; }
.ng-auth__tools { position: absolute; top: 20px; right: 20px; }
.ng-auth__inner { width: 100%; max-width: 420px; }
.ng-auth__copyright { margin: 0; font-size: 12px; color: var(--ng-label); }
.ng-authcard, .ng-auth__inner > .card, .ng-auth__inner form > .card { width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 20px; background: var(--ng-elev) !important; border: 1px solid var(--ng-card-border) !important; box-shadow: var(--ng-shadow); }
.ng-auth__inner .card .card-body { padding: 0 !important; }
.ng-auth__inner .mw-540 { max-width: none; margin: 0 !important; }
.ng-authcard__head { display: flex; flex-direction: column; gap: 6px; }
.ng-authcard__title { margin: 0; font-size: 24px; font-weight: 800 !important; }
.ng-authcard__sub { margin: 0; font-size: 14px; color: var(--ng-muted); }
.ng-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ng-field label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ng-text-2); }
.ng-authcard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.ng-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ng-text-2); cursor: pointer; }
.ng-check input { width: 18px; height: 18px; accent-color: var(--ng-accent); }
.ng-authcard__foot { margin: 0; text-align: center; font-size: 13px; color: var(--ng-muted); }
.ng-btn-lg { min-height: 48px; font-size: 15px !important; }
.ng-pw .form-control { border-right: 0; }

/* ---------- Bootstrap / Twenty-One surface overrides ---------- */
.ng-body .card,
.ng-body .panel,
.ng-body .tiles .tile,
.ng-body .table-container,
.ng-body .dataTables_wrapper .listtable {
    background: var(--ng-card);
    border: 1px solid var(--ng-card-border);
    border-radius: var(--ng-radius);
    color: var(--ng-text);
    box-shadow: none;
}
.ng-body .card { margin-bottom: 20px; overflow: hidden; }
.ng-body .card-header, .ng-body .card-footer { background: transparent; border-color: var(--ng-line); color: var(--ng-head); padding: 16px 20px; }
.ng-body .card-footer:empty { display: none; }
.ng-body .card-body { padding: 20px; }
.ng-body .card-title, .ng-body .card-header h3, .ng-body .card-header .card-title { font-size: 15px !important; font-weight: 700; color: var(--ng-head); }
.ng-body .card-header .card-title i { color: var(--ng-accent2); }
.ng-body .card[class*="card-accent-"] { border-top: 1px solid var(--ng-card-border); }
.ng-body .card-sidebar .card-header { padding: 14px 18px; }
.ng-body .card-sidebar .card-title { font-size: 12px !important; text-transform: uppercase; letter-spacing: .1em; color: var(--ng-label); }
.ng-body .card-sidebar .card-title i:not(.card-minimise) { color: var(--ng-label); }

.ng-body .list-group-item {
    background: transparent;
    border-color: var(--ng-line-soft);
    color: var(--ng-text-2);
    padding: 12px 18px;
}
.ng-body .list-group-flush > .list-group-item { border-left: 0; border-right: 0; }
.ng-body a.list-group-item:hover, .ng-body .list-group-item-action:hover, .ng-body .list-group-item-action:focus { background: var(--ng-hover); color: var(--ng-head); }
.ng-body .list-group-item.active, .ng-body .list-group-item.active:hover {
    background: var(--ng-accent-soft); color: var(--ng-head); border-color: var(--ng-line-soft);
    box-shadow: inset 3px 0 0 var(--ng-accent);
}
.ng-body .list-group-item.disabled { color: var(--ng-label); background: transparent; opacity: .7; }
.ng-body .list-group-item i { color: var(--ng-label); }
.ng-body .list-group-item.active i { color: var(--ng-accent); }
:root[data-theme="light"] .ng-body .list-group-item.active i { color: var(--ng-accent-strong); }
.ng-body .sidebar-menu-item-icon-wrapper { color: var(--ng-label); }
.ng-body .sidebar .list-group-item[menuItemName="lu-unblock"],
.ng-body .sidebar .list-group-item[menuitemname="lu-unblock"] { color: var(--ng-link); font-weight: 600; }
.ng-body .sidebar .list-group-item[menuitemname="lu-unblock"] i { color: var(--ng-link); }

/* tables */
.ng-body .table { color: var(--ng-text); margin-bottom: 0; background: transparent; }
.ng-body .table th, .ng-body .table td { border-color: var(--ng-line-soft); vertical-align: middle; padding: 13px 14px; }
.ng-body .table thead th {
    border-bottom: 1px solid var(--ng-line);
    border-top: 0;
    background: var(--ng-thead);
    color: var(--ng-label);
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ng-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.ng-body .table-hover tbody tr:hover, .ng-body .table-list tbody tr:hover { background: var(--ng-hover); color: var(--ng-head); }
.ng-body .table-list > tbody > tr > td { background: transparent; border-color: var(--ng-line-soft); }
.ng-body .table-list > thead > tr > th { background: var(--ng-thead); }
.ng-body .table-list > thead > tr > th.sorting_asc, .ng-body .table-list > thead > tr > th.sorting_desc { color: var(--ng-head); }
.ng-body .table-container { padding: 0; overflow: hidden; }
.ng-body .dataTables_wrapper { color: var(--ng-text-2); }
.ng-body .dataTables_wrapper .dataTables_info, .ng-body .dataTables_wrapper .dataTables_length { color: var(--ng-muted); font-size: 13px; padding: 14px 18px; }
.ng-body .dataTables_wrapper .dataTables_filter { padding: 12px 18px 0; }
.ng-body .dataTables_wrapper .dataTables_paginate { padding: 10px 18px; }
.ng-body .dataTables_wrapper .dataTables_filter input, .ng-body .dataTables_wrapper .dataTables_length select { background: var(--ng-input); border: 1px solid var(--ng-input-border); color: var(--ng-text); border-radius: 10px; }
.ng-body .table td .text-domain, .ng-body .text-domain { color: var(--ng-label); font-size: 13px; }
.ng-body td.ng-mono, .ng-body .table-list td:first-child { font-variant-numeric: tabular-nums; }

/* status labels / pills */
.ng-body .label, .ng-body .badge, .ng-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
    color: var(--ng-off-fg); background: var(--ng-off-bg); border: 0; text-shadow: none;
}
.ng-pill--sky, .ng-body .badge-info { color: var(--ng-on-accent); background: var(--ng-accent2); }
:root[data-theme="light"] .ng-pill--sky, :root[data-theme="light"] .ng-body .badge-info { color: #fff; background: #2F6F6F; }
.ng-body .label-success, .ng-body .badge-success,
.ng-body .status-active, .ng-body .status-paid, .ng-body .status-completed, .ng-body .status-accepted, .ng-body .status-answered, .ng-body .status-delivered {
    color: var(--ng-ok-fg) !important; background: var(--ng-ok-bg) !important;
}
.ng-body .label-warning, .ng-body .badge-warning,
.ng-body .status-pending, .ng-body .status-unpaid, .ng-body .status-customer-reply, .ng-body .status-in-progress, .ng-body .status-onhold, .ng-body .status-on-hold, .ng-body .status-pending-transfer, .ng-body .status-pending-registration, .ng-body .status-grace, .ng-body .status-draft, .ng-body .status-sent {
    color: var(--ng-warn-fg) !important; background: var(--ng-warn-bg) !important;
}
.ng-body .label-danger, .ng-body .badge-danger,
.ng-body .status-overdue, .ng-body .status-suspended, .ng-body .status-fraud, .ng-body .status-expired, .ng-body .status-redemption, .ng-body .status-dead {
    color: var(--ng-bad-fg) !important; background: var(--ng-bad-bg) !important;
}
.ng-body .label-info, .ng-body .status-open, .ng-body .status-refunded, .ng-body .status-collections, .ng-body .status-payment-pending, .ng-body .status-transferred-away {
    color: var(--ng-info-fg) !important; background: var(--ng-info-bg) !important;
}
.ng-body .label-default, .ng-body .badge-secondary, .ng-body .badge-light,
.ng-body .status-terminated, .ng-body .status-cancelled, .ng-body .status-closed, .ng-body .status-inactive, .ng-body .status-dead, .ng-body .status-lost {
    color: var(--ng-off-fg) !important; background: var(--ng-off-bg) !important;
}
.ng-body .badge-primary { color: var(--ng-on-accent); background: var(--ng-accent); }
.ng-body .card-header .badge, .ng-body .list-group-item .badge { padding: 2px 8px; }

/* buttons */
.ng-body .btn { border-radius: var(--ng-radius-sm); font-weight: 600; font-size: 14px; padding: 9px 16px; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ng-body .btn-sm, .ng-body .btn-group-sm > .btn { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.ng-body .btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 8px; }
.ng-body .btn-lg { padding: 12px 22px; font-size: 15px; }
.ng-body .btn-primary, .ng-body .btn-success, .ng-body .btn-order-now, .ng-body .btn-checkout, .ng-btn--primary {
    color: var(--ng-on-accent) !important; background: var(--ng-accent) !important; border: 1px solid var(--ng-accent) !important; box-shadow: var(--ng-accent-glow);
}
.ng-body .btn-primary:hover, .ng-body .btn-success:hover, .ng-body .btn-primary:focus, .ng-body .btn-success:focus, .ng-btn--primary:hover {
    color: var(--ng-on-accent) !important; background: var(--ng-accent-hover) !important; border-color: var(--ng-accent-hover) !important;
}
.ng-body .btn-primary:disabled, .ng-body .btn-primary.disabled { opacity: .55; }
.ng-body .btn-default, .ng-body .btn-secondary, .ng-body .btn-light, .ng-body .btn-outline-primary, .ng-body .btn-outline-secondary, .ng-body .btn-outline-default, .ng-btn--ghost {
    color: var(--ng-text) !important; background: transparent !important; border: 1px solid var(--ng-input-border) !important;
}
.ng-body .btn-default:hover, .ng-body .btn-secondary:hover, .ng-body .btn-light:hover, .ng-body .btn-outline-primary:hover, .ng-body .btn-outline-secondary:hover, .ng-btn--ghost:hover {
    color: var(--ng-head) !important; background: var(--ng-hover) !important; border-color: var(--ng-accent-ring) !important;
}
.ng-body .btn-info { color: var(--ng-on-accent) !important; background: var(--ng-accent2) !important; border-color: var(--ng-accent2) !important; }
:root[data-theme="light"] .ng-body .btn-info { color: #fff !important; background: #2F6F6F !important; border-color: #2F6F6F !important; }
.ng-body .btn-danger { color: #fff !important; background: #DC2626 !important; border-color: #DC2626 !important; }
.ng-body .btn-warning { color: #0D1117 !important; background: #E9CB64 !important; border-color: #E9CB64 !important; }
.ng-body .btn-link { color: var(--ng-link) !important; background: transparent !important; border-color: transparent !important; }
.ng-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ng-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; }

/* forms */
.ng-body .form-control, .ng-body .custom-select, .ng-body select.form-control, .ng-body textarea.form-control, .ng-body .input-group-text,
.ng-body input[type="text"], .ng-body input[type="email"], .ng-body input[type="password"], .ng-body input[type="number"], .ng-body input[type="tel"], .ng-body input[type="url"], .ng-body select, .ng-body textarea {
    background-color: var(--ng-input);
    border: 1px solid var(--ng-input-border);
    color: var(--ng-text);
    border-radius: var(--ng-radius-sm);
}
.ng-body .form-control, .ng-body .custom-select { min-height: 44px; font-size: 14px; }
.ng-body textarea.form-control { min-height: 120px; }
.ng-body .form-control::placeholder { color: var(--ng-label); opacity: 1; }
.ng-body .form-control:focus, .ng-body .custom-select:focus, .ng-body select:focus, .ng-body textarea:focus {
    background-color: var(--ng-input); color: var(--ng-text);
    border-color: var(--ng-accent-ring); box-shadow: 0 0 0 3px var(--ng-accent-soft);
}
.ng-body .form-control:disabled, .ng-body .form-control[readonly] { background-color: var(--ng-hover); color: var(--ng-muted); }
.ng-body .input-group-text { color: var(--ng-label); }
.ng-body .input-group > .form-control:not(:last-child), .ng-body .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ng-body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ng-body .input-group-append .btn, .ng-body .input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ng-body .input-group-prepend .btn, .ng-body .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ng-body label, .ng-body .form-control-label, .ng-body .col-form-label { color: var(--ng-text-2); font-weight: 600; font-size: 13px; }
.ng-body .form-text { color: var(--ng-muted); }
.ng-body .custom-control-label::before { background-color: var(--ng-input); border-color: var(--ng-input-border); }
.ng-body .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ng-accent); border-color: var(--ng-accent); }
.ng-body input[type="checkbox"], .ng-body input[type="radio"] { accent-color: var(--ng-accent); }
.ng-body .iti__country-list { background: var(--ng-elev); color: var(--ng-text); border-color: var(--ng-card-border); }
.ng-body .bootstrap-switch { border-color: var(--ng-input-border); }
.ng-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .ng-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--ng-accent); color: var(--ng-on-accent); }
.ng-body .bootstrap-switch .bootstrap-switch-label { background: var(--ng-card-solid); }

/* alerts */
.ng-body .alert { border-radius: var(--ng-radius-sm); border: 1px solid var(--ng-accent2-ring); background: var(--ng-accent2-soft); color: var(--ng-text); }
.ng-body .alert a, .ng-body .alert .alert-link { color: var(--ng-link); font-weight: 600; }
.ng-body .alert-success { border-color: var(--ng-accent-ring); background: var(--ng-ok-bg); }
.ng-body .alert-warning { border-color: var(--ng-warn-ring); background: var(--ng-warn-bg); }
.ng-body .alert-danger { border-color: var(--ng-bad-ring); background: var(--ng-bad-bg); }
.ng-body .alert-info { border-color: var(--ng-accent2-ring); background: var(--ng-info-bg); }
.ng-body .network-issue-alert { border-radius: 0; border-width: 0 0 1px; }
.ng-body .network-issue-alert .container { max-width: none; padding: 0 40px; }

/* dropdowns, modals, popovers, tabs, pagination */
.ng-body .dropdown-menu { background: var(--ng-elev); border: 1px solid var(--ng-card-border); border-radius: 12px; box-shadow: var(--ng-shadow); padding: 6px; color: var(--ng-text); }
.ng-body .dropdown-item, .ng-body .dropdown-menu > li > a { color: var(--ng-text-2); border-radius: 8px; }
.ng-body .dropdown-item:hover, .ng-body .dropdown-item:focus { background: var(--ng-hover); color: var(--ng-head); }
.ng-body .dropdown-item.disabled { color: var(--ng-label); }
.ng-body .dropdown-divider { border-color: var(--ng-line); }
.ng-body .modal-content { background: var(--ng-card-solid); border: 1px solid var(--ng-card-border); border-radius: 18px; color: var(--ng-text); }
.ng-body .modal-header, .ng-body .modal-footer { border-color: var(--ng-line); }
.ng-body .modal-backdrop.show { opacity: .7; }
.ng-body .close { color: var(--ng-text); text-shadow: none; opacity: .7; }
.ng-body .modal-localisation .modal-content { background: var(--ng-card-solid); }
.ng-body .modal-localisation .item-selector .item { color: var(--ng-text-2); border-radius: 10px; }
.ng-body .modal-localisation .item-selector .item.active { background: var(--ng-accent-soft); color: var(--ng-head); }
.ng-body .popover { background: var(--ng-elev); border-color: var(--ng-card-border); }
.ng-body .popover-body { color: var(--ng-text); }
.ng-body .popover-header { background: transparent; color: var(--ng-head); border-color: var(--ng-line); }
.ng-body .tooltip-inner { background: var(--ng-card-solid); color: var(--ng-text); border: 1px solid var(--ng-card-border); }
.ng-body .nav-tabs { border-color: var(--ng-line); gap: 4px; }
.ng-body .nav-tabs .nav-link { color: var(--ng-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-weight: 600; }
.ng-body .nav-tabs .nav-link:hover { color: var(--ng-head); }
.ng-body .nav-tabs .nav-link.active, .ng-body .nav-tabs .nav-item.show .nav-link { color: var(--ng-head); background: transparent; border-bottom-color: var(--ng-accent); }
.ng-body .nav-pills .nav-link { color: var(--ng-muted); border-radius: 10px; }
.ng-body .nav-pills .nav-link.active { background: var(--ng-accent); color: var(--ng-on-accent); }
.ng-body .tab-content { color: var(--ng-text); }
.ng-body .pagination .page-link { background: transparent; border-color: var(--ng-line); color: var(--ng-text-2); }
.ng-body .pagination .page-item.active .page-link { background: var(--ng-accent); border-color: var(--ng-accent); color: var(--ng-on-accent); }
.ng-body .pagination .page-item.disabled .page-link { background: transparent; color: var(--ng-label); border-color: var(--ng-line); }
.ng-body .progress { background: var(--ng-hover); border-radius: 999px; }
.ng-body .progress-bar { background: var(--ng-accent); color: var(--ng-on-accent); }
.ng-body .jumbotron { background: var(--ng-card); color: var(--ng-text); border-radius: var(--ng-radius); }

/* twenty-one specific blocks */
.ng-body .tiles .tile { color: var(--ng-text); }
.ng-body .tiles .tile .stat { color: var(--ng-head); }
.ng-body .div-service-item, .ng-body .div-service-item:hover { background: transparent; border-color: var(--ng-line-soft); color: var(--ng-text); }
.ng-body .div-service-item:hover { background: var(--ng-hover); }
.ng-body .product-details .product-status { border-radius: var(--ng-radius); }
.ng-body .product-details .product-icon { border-radius: var(--ng-radius) var(--ng-radius) 0 0; background: var(--ng-accent-soft) !important; color: var(--ng-head); }
.ng-body .product-details .product-icon h3, .ng-body .product-details .product-icon h4 { color: var(--ng-head); }
.ng-body .product-details .product-icon .fa-stack .fa-circle { color: var(--ng-accent); }
.ng-body .product-details .product-icon .fa-stack .fa-inverse { color: var(--ng-on-accent); }
.ng-body .product-details .product-status-text { border-radius: 0 0 var(--ng-radius) var(--ng-radius); font-weight: 700; letter-spacing: .06em; }
.ng-body .product-status-active .product-status-text { background: var(--ng-ok-bg); color: var(--ng-ok-fg); }
.ng-body .product-status-suspended .product-status-text, .ng-body .product-status-fraud .product-status-text { background: var(--ng-bad-bg); color: var(--ng-bad-fg); }
.ng-body .product-status-pending .product-status-text { background: var(--ng-warn-bg); color: var(--ng-warn-fg); }
.ng-body .product-status-terminated .product-status-text, .ng-body .product-status-cancelled .product-status-text { background: var(--ng-off-bg); color: var(--ng-off-fg); }
.ng-body .lu-unblock-panel { border-color: var(--ng-accent-ring) !important; background: var(--ng-accent-soft) !important; }
.ng-body .lu-unblock-panel strong { color: var(--ng-head); }
.ng-body .ticket-reply, .ng-body .ticket-reply.staff, .ng-body .ticket-reply .posted-by { background: transparent; border-color: var(--ng-line); color: var(--ng-text); }
.ng-body .ticket-reply.staff { box-shadow: inset 3px 0 0 var(--ng-accent2); }
.ng-body .ticket-reply .message { color: var(--ng-text); }
.ng-body .ticket-reply .posted-by .requestor-type-operator, .ng-body .ticket-reply .requestor-badge { background: var(--ng-accent2-soft); color: var(--ng-accent2); }
.ng-body .markdown-editor, .ng-body .md-editor, .ng-body .editor-toolbar, .ng-body .CodeMirror { background: var(--ng-input) !important; color: var(--ng-text) !important; border-color: var(--ng-input-border) !important; }
.ng-body .editor-toolbar a, .ng-body .editor-toolbar button { color: var(--ng-text-2) !important; }
.ng-body .editor-toolbar a:hover, .ng-body .editor-toolbar a.active, .ng-body .editor-toolbar button:hover { background: var(--ng-hover) !important; border-color: transparent !important; }
.ng-body .CodeMirror-cursor { border-color: var(--ng-text) !important; }
.ng-body .editor-statusbar { color: var(--ng-label); }
.ng-body .kb-search, .ng-body .home-domain-search, .ng-body .domain-search, .ng-body .domain-checker-container { background: var(--ng-card) !important; border-radius: var(--ng-radius); color: var(--ng-text); }
.ng-body .home-domain-search .p-5, .ng-body .domain-checker-bg { background: transparent !important; }
.ng-body .domain-checker-container .input-group-box { background: var(--ng-input); border-radius: var(--ng-radius-sm); }
.ng-body .announcement-single, .ng-body .kb-article-item { border-color: var(--ng-line); }
.ng-body .well { background: var(--ng-card); border-color: var(--ng-card-border); color: var(--ng-text); }
.ng-body .header-lined h1, .ng-body .header-lined { color: var(--ng-head); border-color: var(--ng-line); }

/* ---------- Order form / cart (standard_cart & lagom2 orderform) ---------- */
.ng-in-cart #order-standard_cart, .ng-in-cart #order-lagom, .ng-in-cart .main-content, .ng-in-cart #order-standard_cart .cart-body { color: var(--ng-text); }
.ng-in-cart #order-standard_cart .header-lined h1, .ng-in-cart #order-standard_cart h1, .ng-in-cart #order-standard_cart h2, .ng-in-cart #order-standard_cart h3 { color: var(--ng-head); }
.ng-in-cart #order-standard_cart .products .product,
.ng-in-cart #order-standard_cart .view-cart-items,
.ng-in-cart #order-standard_cart .summary-container,
.ng-in-cart #order-standard_cart .order-summary,
.ng-in-cart #order-standard_cart .field-container,
.ng-in-cart #order-standard_cart .sub-heading,
.ng-in-cart #order-standard_cart .domain-checker-container,
.ng-in-cart #order-standard_cart .panel,
.ng-in-cart #order-standard_cart .product-info,
.ng-in-cart #order-standard_cart .secondary-cart-body,
.ng-in-cart #order-standard_cart .account-select-container .account {
    background: var(--ng-card) !important; border: 1px solid var(--ng-card-border) !important; border-radius: var(--ng-radius) !important; color: var(--ng-text) !important;
}
.ng-in-cart #order-standard_cart .products .product header { background: transparent; border-color: var(--ng-line); color: var(--ng-head); }
.ng-in-cart #order-standard_cart .products .product header span { color: var(--ng-head); }
.ng-in-cart #order-standard_cart .products .product div.product-desc { color: var(--ng-text-2); }
.ng-in-cart #order-standard_cart .products .product div.product-pricing span.price { color: var(--ng-head); }
.ng-in-cart #order-standard_cart .view-cart-items-header { background: var(--ng-thead) !important; color: var(--ng-label) !important; border-color: var(--ng-line) !important; border-radius: var(--ng-radius) var(--ng-radius) 0 0; }
.ng-in-cart #order-standard_cart .view-cart-items .item { background: transparent !important; border-color: var(--ng-line-soft) !important; color: var(--ng-text); }
.ng-in-cart #order-standard_cart .view-cart-items .item .item-title, .ng-in-cart #order-standard_cart .view-cart-items .item .item-price span:first-child { color: var(--ng-head); }
.ng-in-cart #order-standard_cart .order-summary h2 { background: var(--ng-accent) !important; color: var(--ng-on-accent) !important; border-radius: var(--ng-radius) var(--ng-radius) 0 0; }
.ng-in-cart #order-standard_cart .summary-container { border-radius: 0 0 var(--ng-radius) var(--ng-radius) !important; }
.ng-in-cart #order-standard_cart .order-summary .total-due-today .amt { color: var(--ng-head); }
.ng-in-cart #order-standard_cart .sub-heading span, .ng-in-cart #order-standard_cart .sub-heading .primary-bg-color { background: var(--ng-bg) !important; color: var(--ng-label) !important; }
.ng-in-cart #order-standard_cart .sub-heading { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ng-line) !important; border-radius: 0 !important; }
.ng-in-cart #order-standard_cart .cart-sidebar .card, .ng-in-cart .cart-sidebar .list-group-item { background: var(--ng-card); }
.ng-in-cart #order-standard_cart .btn-checkout, .ng-in-cart #order-standard_cart .btn-order-now { color: var(--ng-on-accent) !important; background: var(--ng-accent) !important; border-color: var(--ng-accent) !important; }
.ng-in-cart #order-standard_cart .empty-cart .btn, .ng-in-cart #order-standard_cart .btn-link { color: var(--ng-link) !important; }
.ng-in-cart #order-standard_cart .prepend-icon .field-icon { color: var(--ng-label); }
.ng-in-cart #order-standard_cart .payment-methods .radio-inline, .ng-in-cart #order-standard_cart label.radio-inline { color: var(--ng-text-2); }
.ng-in-cart #order-standard_cart .domain-selection-options .option { background: var(--ng-card); border-color: var(--ng-card-border); color: var(--ng-text); border-radius: var(--ng-radius-sm); }
.ng-in-cart #order-standard_cart .domain-selection-options .option-selected { background: var(--ng-accent-soft); border-color: var(--ng-accent-ring); }
.ng-in-cart #order-standard_cart .domain-checker-result-headline .domain-available, .ng-in-cart #order-standard_cart .domain-available { color: var(--ng-ok-text); }
.ng-in-cart #order-standard_cart .domain-unavailable { color: var(--ng-bad-fg); }
.ng-in-cart #order-standard_cart .spotlight-tlds .spotlight-tld, .ng-in-cart #order-standard_cart .suggested-domains .panel-heading { background: var(--ng-card); color: var(--ng-text); border-color: var(--ng-card-border); }
.ng-in-cart #order-standard_cart .suggested-domains .list-group-item { background: transparent; color: var(--ng-text); }
.ng-in-cart #order-standard_cart .checkout-security-msg, .ng-in-cart #order-standard_cart .alert-info { background: var(--ng-info-bg); color: var(--ng-text); border-color: var(--ng-accent2-ring); }
.ng-in-cart #order-standard_cart .promo { background: transparent; }
.ng-in-cart #order-standard_cart .order-summary .loader { background: var(--ng-card-solid); }
.ng-in-cart .cart-sidebar .card-sidebar .list-group-item.active { box-shadow: inset 3px 0 0 var(--ng-accent); }

.ng-auth .providerLinkingFeedback:empty { display: none; }
.ng-auth .social-signin-btns, .ng-auth .linked-accounts, .ng-auth .sub-heading, .ng-auth .sub-heading span { background: transparent !important; color: var(--ng-label); border: 0; }
.ng-auth__inner > .providerLinkingFeedback + form + div, .ng-auth__inner .social-signin-btns { margin-top: 16px; text-align: center; }

/* ---------- Mobile ---------- */
.ng-only-mobile { display: none !important; }
@media (max-width: 1199.98px) {
    .ng-layout.has-side { display: flex; flex-direction: column; gap: 0; }
    .ng-layout.has-side .ng-side, .ng-layout.has-side .ng-col-main { width: 100%; }
}
@media (max-width: 991.98px) {
    .ng-only-mobile { display: inline-flex !important; }
    .ng-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        height: 100%; width: min(86vw, 300px);
        transform: translateX(-104%);
        transition: transform .25s ease;
        background: var(--ng-sidebar-solid);
        box-shadow: var(--ng-shadow);
        visibility: hidden;
    }
    .ng-body.ng-drawer-open .ng-sidebar { transform: translateX(0); visibility: visible; }
    .ng-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(2, 6, 23, .6); }
    .ng-backdrop[hidden] { display: none; }
    .ng-body.ng-drawer-open { overflow: hidden; }
    .ng-topbar { padding: 12px 16px; flex-wrap: wrap; }
    .ng-search { order: 10; flex: 1 1 100%; max-width: none; }
    .ng-content { padding: 20px 16px 40px; }
    .ng-footer { padding: 18px 16px 24px; }
    .ng-user__name { display: none; }
    .ng-user .ng-ico { display: none; }
    .ng-user { padding: 0 6px; }
    .ng-home-grid { grid-template-columns: minmax(0, 1fr); }
    .ng-hero__title { font-size: 30px; }
    .ng-pagehead__title { font-size: 26px; }
    .ng-auth__hero { padding: 32px 20px 8px; gap: 28px; }
    .ng-auth__title { font-size: 34px; }
    .ng-auth__sub { font-size: 15px; }
    .ng-auth__meta { display: none; }
    .ng-auth__panel { padding: 24px 16px 28px; border-left: 0; border-top: 1px solid var(--ng-line); }
    .ng-auth__tools { top: 12px; right: 12px; }
    .ng-authcard { padding: 24px 20px; }
    .ng-dd__menu--wide { width: min(340px, calc(100vw - 32px)); right: -96px; }
    .ng-body .network-issue-alert .container { padding: 0 16px; }
}
@media (max-width: 575.98px) {
    .ng-hide-xs { display: none !important; }
    .ng-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ng-kpi { padding: 16px; }
    .ng-kpi__value { font-size: 24px; }
    .ng-topbar__actions { gap: 8px; }
    .ng-topbar .ng-iconbtn { width: 40px; height: 40px; }
    .ng-logo--top { font-size: 15px; }
    .ng-body .table-container, .ng-body .dataTables_wrapper { overflow-x: auto; }
}
@media (min-width: 992px) {
    .ng-backdrop { display: none !important; }
}
@media print {
    .ng-sidebar, .ng-topbar, .ng-footer { display: none !important; }
    body.ng-body { background: #fff; color: #000; }
}

/* ---------- Invoice view (standalone page) ---------- */
.ng-invoice { padding: 32px 16px; }
.ng-invoice .invoice-container {
    max-width: 960px; margin: 0 auto; padding: 40px;
    background: var(--ng-card); border: 1px solid var(--ng-card-border); border-radius: 20px; color: var(--ng-text);
    box-shadow: var(--ng-shadow);
}
.ng-invoice .invoice-header { border-bottom: 1px solid var(--ng-line); padding-bottom: 20px; margin-bottom: 20px; }
.ng-invoice .invoice-header h3, .ng-invoice .invoice-container h3, .ng-invoice .invoice-container h2 { color: var(--ng-head); }
.ng-invoice .invoice-header img { max-height: 48px; width: auto; }
:root[data-theme="dark"] .ng-invoice .ng-show-light-logo, :root[data-theme="light"] .ng-invoice .ng-show-dark-logo { display: none; }
.ng-invoice .ng-invoice-logo img { height: 44px; width: auto; }
.ng-invoice .invoice-status span { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ng-invoice .invoice-status .paid { color: var(--ng-ok-fg); background: var(--ng-ok-bg); }
.ng-invoice .invoice-status .unpaid, .ng-invoice .invoice-status .draft { color: var(--ng-warn-fg); background: var(--ng-warn-bg); }
.ng-invoice .invoice-status .cancelled, .ng-invoice .invoice-status .refunded { color: var(--ng-off-fg); background: var(--ng-off-bg); }
.ng-invoice .invoice-status .collections { color: var(--ng-bad-fg); background: var(--ng-bad-bg); }
.ng-invoice .small-text, .ng-invoice address { color: var(--ng-text-2); }
.ng-invoice .card-header.bg-success { background: var(--ng-ok-bg) !important; color: var(--ng-head) !important; }
.ng-invoice .table td.total-row, .ng-invoice .table .total-row { background: var(--ng-thead); color: var(--ng-head); font-weight: 600; }
.ng-invoice .table td { font-variant-numeric: tabular-nums; }
.ng-invoice .pull-down a, .ng-invoice .invoice-container + .pull-down a { color: var(--ng-link); }
.ng-invoice .payment-btn-container .btn, .ng-invoice .payment-btn-container input[type="submit"], .ng-invoice .payment-btn-container button {
    color: var(--ng-on-accent); background: var(--ng-accent); border: 1px solid var(--ng-accent); border-radius: 12px; font-weight: 700; padding: 10px 18px;
}
@media (max-width: 575.98px) { .ng-invoice .invoice-container { padding: 22px 16px; } }
@media print {
    .ng-invoice { padding: 0; background: #fff !important; }
    .ng-invoice .invoice-container { background: #fff !important; color: #000 !important; border: 0; box-shadow: none; }
    .ng-invoice .invoice-container * { color: #000 !important; }
    .ng-invoice .ng-show-dark-logo { display: none !important; }
    .ng-invoice .ng-show-light-logo { display: inline !important; }
}

/* ---------- Fixes after first visual pass ---------- */
.ng-body .dataTables_wrapper table.table-list { border: 0 !important; margin: 0 !important; border-radius: 0; }
.ng-body .dataTables_wrapper table.table-list thead th,
.ng-body table.table-list thead th,
.ng-body .dataTables_wrapper table.table-list thead th.sorting_asc,
.ng-body .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--ng-thead) !important; color: var(--ng-label); border-bottom: 1px solid var(--ng-line) !important;
}
.ng-body .dataTables_wrapper table.table-list thead th.sorting_asc,
.ng-body .dataTables_wrapper table.table-list thead th.sorting_desc { color: var(--ng-head); }
.ng-body table.table-list tbody td { font-size: 13.5px; }
.ng-body .table-list > tbody > tr > td a.border-left { border-left-color: var(--ng-line) !important; }
.ng-body td.sorting_1 { background: transparent !important; }
.ng-kpi__value.ng-num { font-size: clamp(22px, 2.1vw, 30px); white-space: nowrap; }
.ng-body .md-editor { border-color: var(--ng-input-border); border-radius: var(--ng-radius-sm); overflow: hidden; background: var(--ng-input); }
.ng-body .md-editor .md-footer, .ng-body .md-editor > .md-header { background: var(--ng-thead); }
.ng-body .md-editor > textarea, .ng-body .md-editor > textarea:focus, .ng-body .md-editor > .md-preview {
    background: var(--ng-input) !important; color: var(--ng-text); border-color: var(--ng-line); font-family: var(--ng-font); padding: 12px;
}
.ng-body .md-editor .btn-default, .ng-body .md-editor .btn { color: var(--ng-text-2) !important; background: transparent !important; border-color: transparent !important; box-shadow: none; }
.ng-body .md-editor .btn-primary { color: var(--ng-on-accent) !important; background: var(--ng-accent) !important; }
.ng-body .custom-file-label { background: var(--ng-input); color: var(--ng-label); border-color: var(--ng-input-border); border-radius: var(--ng-radius-sm); }
.ng-body .custom-file-label::after { background: var(--ng-thead); color: var(--ng-text-2); border-color: var(--ng-input-border); }
.ng-in-cart #order-standard_cart .view-cart-tabs .nav-tabs { border-color: var(--ng-line); }
.ng-in-cart #order-standard_cart .view-cart-tabs .nav-tabs .nav-link,
.ng-in-cart #order-standard_cart .view-cart-tabs .nav-tabs a { background: transparent !important; color: var(--ng-muted) !important; border: 0 !important; border-bottom: 2px solid transparent !important; }
.ng-in-cart #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
.ng-in-cart #order-standard_cart .view-cart-tabs .nav-tabs .active a { color: var(--ng-head) !important; border-bottom-color: var(--ng-accent) !important; }
.ng-in-cart #order-standard_cart .view-cart-tabs .tab-content { background: transparent !important; border: 0 !important; color: var(--ng-text); padding: 14px 0; }
.ng-in-cart #order-standard_cart .view-cart-tabs .btn-default, .ng-in-cart #order-standard_cart .view-cart-tabs .btn-block { color: var(--ng-text) !important; }
.ng-in-cart #order-standard_cart .empty-cart { color: var(--ng-text); }
.ng-in-cart #order-standard_cart .view-cart-empty { background: transparent !important; color: var(--ng-muted); border-color: var(--ng-line) !important; }
.ng-invoice .card-header.bg-info, .ng-invoice .card-header.bg-primary, .ng-invoice .card-header.bg-dark { background: var(--ng-thead) !important; color: var(--ng-head) !important; border-bottom: 1px solid var(--ng-line); }
.ng-invoice .card-header .card-title, .ng-invoice .card-header h3 { color: var(--ng-head) !important; }
.ng-in-cart #order-standard_cart .mc-promo, .ng-body .mc-promo { background: var(--ng-card) !important; border: 1px solid var(--ng-card-border) !important; border-radius: var(--ng-radius-sm); color: var(--ng-text); overflow: hidden; margin-bottom: 12px; }
.ng-body .mc-promo .header, .ng-body .mc-promo .body, .ng-body .mc-promo .footer { background: transparent !important; color: var(--ng-text) !important; }
.ng-body .mc-promo .headline, .ng-body .mc-promo .tagline { color: var(--ng-head) !important; }
.ng-body .mc-promo .tagline, .ng-body .mc-promo .features li { color: var(--ng-text-2) !important; }
.ng-in-cart #order-standard_cart .field, .ng-in-cart #order-standard_cart input.field, .ng-in-cart #order-standard_cart .prepend-icon .field { background: var(--ng-input) !important; color: var(--ng-text) !important; border-color: var(--ng-input-border) !important; border-radius: var(--ng-radius-sm); }
.ng-in-cart #order-standard_cart .mc-promo .header { border-bottom: 1px solid var(--ng-line) !important; }
.ng-in-cart #order-standard_cart .order-summary h2, .ng-in-cart #order-standard_cart .view-cart-items, .ng-in-cart #order-standard_cart .view-cart-items .item .item-title { font-family: var(--ng-font); }
.ng-body .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* WHMCS ticket statuses carry inline admin colours: keep the hue, force readable text */
.ng-body .label[style*="background"], .ng-body span.label[style*="color"] { color: #0D1117 !important; font-weight: 700; }
@media (max-width: 575.98px) {
    .ng-topbar .ng-cart-empty { display: none; }
    .ng-topbar { gap: 8px; }
}
.ng-body .card-sidebar .badge, .ng-body .sidebar .badge { background: var(--ng-off-bg) !important; color: var(--ng-off-fg) !important; }
.ng-body .card-sidebar .list-group-item.active .badge { background: var(--ng-accent) !important; color: var(--ng-on-accent) !important; }
@media (max-width: 420px) {
    .ng-topbar .ng-iconbtn { width: 36px; height: 36px; border-radius: 10px; }
    .ng-topbar .ng-user { height: 36px; padding: 0 3px; }
    .ng-topbar .ng-avatar { width: 28px; height: 28px; font-size: 12px; }
    .ng-topbar__actions { gap: 6px; }
    .ng-logo--top { font-size: 14px; gap: 7px; }
}
.ng-invoice .card-title.bg-info { background: var(--ng-thead) !important; color: var(--ng-head) !important; border-bottom: 1px solid var(--ng-line); padding: 12px 16px !important; }