/* ===========================================================================
   ipxcore // NOC — WHMCS theme overrides
   Layered ON TOP of /index_files/noc.css. This file restyles WHMCS-specific
   widgets (panels, tables, alerts, forms, sidebar, ticket UI, invoice UI)
   to match the NOC aesthetic.
   =========================================================================== */

/* ----- color tokens already defined in noc.css; we just consume them ----- */

/* Force-override the compiled `six` Bootstrap stylesheet which sets
   body{background-color:#fff} and #main-menu{background-color:#006687}.
   Also sets up sticky-footer flexbox so the footer hugs the viewport
   bottom even when content is short. */
html { background: var(--noc-bg) !important; min-height: 100%; }
body {
    background-color: var(--noc-bg) !important;
    color: var(--noc-text) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > .body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body > .body > #main-body {
    flex: 1 0 auto;
}
body > .body > #footer { flex: 0 0 auto; }
#header { background: transparent !important; border-radius: 0 !important; }
#main-menu {
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent), var(--noc-bg-deep) !important;
    border-top: 1px solid var(--noc-border) !important;
    border-bottom: 1px solid var(--noc-border) !important;
}
.navbar-default {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    background: rgba(140,186,83,0.08) !important;
    color: var(--noc-phosphor-bright) !important;
    border-bottom-color: var(--noc-phosphor) !important;
}
.navbar-default .navbar-nav > li > a {
    color: var(--noc-text-dim) !important;
}

/* ── Override the WHMCS-six "Account" parent <li class="dropdown account">.
   six's CSS sets background: #043d5f (dark blue) on the .account class. */
.navbar-nav > li.account,
.navbar-nav > li.dropdown.account,
li.account {
    background: transparent !important;
}
.navbar-default .navbar-nav > li.account > a {
    /* keep the hover/active styling consistent with the rest of the nav */
    background: transparent !important;
}
.navbar-default .navbar-nav > li.account.open > a,
.navbar-default .navbar-nav > li.account > a:hover,
.navbar-default .navbar-nav > li.account > a:focus {
    background: rgba(140,186,83,0.08) !important;
    color: var(--noc-phosphor-bright) !important;
    border-bottom-color: var(--noc-phosphor) !important;
}

/* ── Navbar-context dropdown menu items (six wraps them with extra
   .navbar-default .navbar-nav .open .dropdown-menu ... rules). */
.navbar-default .navbar-nav .open .dropdown-menu,
.navbar-nav .open .dropdown-menu,
.navbar-main .navbar-nav .dropdown-menu {
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border-bright) !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    box-shadow: 0 16px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(140,186,83,0.05) !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu > li > a,
.navbar-main .navbar-nav .dropdown-menu > li > a {
    color: var(--noc-text-dim) !important;
    background: transparent !important;
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 9px 18px !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus {
    background: rgba(140,186,83,0.08) !important;
    color: var(--noc-phosphor-bright) !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    background: rgba(140,186,83,0.12) !important;
    color: var(--noc-phosphor) !important;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a {
    color: var(--noc-text-faint) !important;
    background: transparent !important;
}

/* ── ensure dropdowns are above following sections (overlay) ── */
.navbar .dropdown-menu { z-index: 1050 !important; }
#main-menu, .navbar-main { z-index: 30 !important; }

/* ── Bootstrap-3 mobile-collapsed nav (>= 768px the toggle is hidden) ── */
@media (max-width: 767px) {
    .navbar-collapse {
        background: var(--noc-bg-deep) !important;
        border-top: 1px solid var(--noc-border) !important;
    }
    .navbar-default .navbar-nav .open .dropdown-menu {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}
#footer {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text-faint) !important;
}
.top-nav, .top-nav a { color: var(--noc-text-dim) !important; }

/* ----- main body / page header ----- */

#main-body, section#main-body {
    background: transparent !important;
    padding: 36px 0 64px;
    color: var(--noc-text);
    min-height: 350px;
}
.page-header {
    border-bottom: 1px dashed var(--noc-border-bright);
    padding-bottom: 14px;
    margin: 0 0 24px;
}
.page-header h1, .page-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--noc-text);
    margin: 0;
}
.page-header h1 small, .page-header h2 small {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--noc-text-faint);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin-top: 6px;
}

h1, h2, h3, h4, h5, h6 { color: var(--noc-text); }
h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; }
h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

label, .control-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--noc-text-dim);
    font-weight: 600;
}

/* ----- breadcrumbs ----- */
.breadcrumb {
    background: transparent;
    padding: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--noc-text-faint);
    border-bottom: 0;
}
.breadcrumb > li + li::before { content: "/"; color: var(--noc-text-faint); padding: 0 8px; }
.breadcrumb a { color: var(--noc-text-dim); }
.breadcrumb a:hover { color: var(--noc-phosphor-bright); }
.breadcrumb > .active { color: var(--noc-phosphor); }

/* ----- panels / cards ----- */
.panel, .card {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    border-radius: 0;
    box-shadow: none;
}
.panel-heading, .card-header {
    background: var(--noc-bg-deep);
    border-bottom: 1px solid var(--noc-border);
    border-radius: 0;
    padding: 12px 18px;
    color: var(--noc-text);
}
.panel-heading h3, .panel-title, .card-header h3, .card-header h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--noc-text);
    margin: 0;
}
.panel-body, .card-body {
    padding: 18px;
    color: var(--noc-text-dim);
}
.panel-footer, .card-footer {
    background: var(--noc-bg-deep);
    border-top: 1px solid var(--noc-border);
    color: var(--noc-text-dim);
    border-radius: 0;
}

.panel-primary { border-color: var(--noc-phosphor); }
.panel-primary > .panel-heading { background: var(--noc-phosphor); color: var(--noc-bg); border-color: var(--noc-phosphor); }
.panel-primary > .panel-heading h3 { color: var(--noc-bg); }
.panel-default { border-color: var(--noc-border); }

/* ----- buttons ----- */
.btn {
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 11px 18px;
    border-width: 1px;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.btn-primary, .btn-success {
    background: var(--noc-phosphor);
    color: var(--noc-bg);
    border-color: var(--noc-phosphor);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background: var(--noc-phosphor-bright);
    border-color: var(--noc-phosphor-bright);
    color: var(--noc-bg);
    box-shadow: 0 0 0 4px rgba(140,186,83,0.12), 0 0 32px var(--noc-phosphor-glow);
}
.btn-default {
    background: transparent;
    color: var(--noc-text);
    border-color: var(--noc-border-bright);
}
.btn-default:hover, .btn-default:focus {
    background: var(--noc-surface-2);
    color: var(--noc-phosphor-bright);
    border-color: var(--noc-phosphor);
}
.btn-info {
    background: transparent;
    color: var(--noc-amber);
    border-color: var(--noc-amber);
}
.btn-info:hover, .btn-info:focus {
    background: var(--noc-amber);
    color: var(--noc-bg);
    border-color: var(--noc-amber);
}
.btn-warning {
    background: var(--noc-amber);
    color: var(--noc-bg);
    border-color: var(--noc-amber);
}
.btn-warning:hover, .btn-warning:focus {
    background: var(--noc-bg);
    color: var(--noc-amber);
}
.btn-danger {
    background: transparent;
    color: var(--noc-red);
    border-color: var(--noc-red);
}
.btn-danger:hover, .btn-danger:focus {
    background: var(--noc-red);
    color: var(--noc-bg);
}
.btn-link { color: var(--noc-phosphor-bright); }
.btn-link:hover { color: var(--noc-amber); text-decoration: none; }

/* ----- form controls ----- */
.form-control, .form-select, select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"] {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 12px;
    box-shadow: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* <select> needs explicit height — Martian Mono has tall ascenders/descenders
   and browsers' default select height clips them in the closed state. */
select.form-control,
select {
    height: auto;
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 13px;
    line-height: 1.4;
}
.form-control:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus {
    outline: 0;
    border-color: var(--noc-phosphor);
    box-shadow: 0 0 0 4px rgba(140,186,83,0.10);
    color: var(--noc-text);
    background: var(--noc-bg-deep);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--noc-text-faint); }

.input-group-addon {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    color: var(--noc-text-dim);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* keep <input> and adjacent <btn>s the same height inside .input-group */
.input-group .form-control,
.input-group-btn > .btn {
    height: 44px !important;
    line-height: 1.4;
    box-sizing: border-box;
}
.input-group-lg .form-control,
.input-group-lg .input-group-btn > .btn {
    height: 52px !important;
    font-size: 14px;
    padding: 14px 20px;
}
.input-group-sm .form-control,
.input-group-sm .input-group-btn > .btn {
    height: 36px !important;
    font-size: 11px;
    padding: 6px 12px;
}
.input-group .input-group-btn > .btn {
    border-radius: 0;
    margin: 0;
}
.help-block { color: var(--noc-text-faint); font-family: var(--font-mono); font-size: 11px; }

/* ----- tables ----- */
.table {
    color: var(--noc-text-dim);
    font-size: 13px;
    border-color: var(--noc-border);
    background: var(--noc-surface-solid);
}
.table > thead > tr > th {
    background: var(--noc-bg-deep);
    color: var(--noc-text);
    border-bottom: 1px solid var(--noc-border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 12px 14px;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-color: var(--noc-border);
    padding: 12px 14px;
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.012);
}
.table-hover > tbody > tr:hover {
    background: rgba(140,186,83,0.04);
    color: var(--noc-text);
}

/* ----- sidebar (account / billing nav) ----- */
.sidebar .panel,
.list-group {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    border-radius: 0;
}
.list-group-item {
    background: transparent;
    border-color: var(--noc-border);
    color: var(--noc-text-dim);
    border-radius: 0 !important;
    padding: 11px 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: color 120ms ease, border-left-color 120ms ease, background 120ms ease;
    border-left: 2px solid transparent;
}
.list-group-item:hover, .list-group-item:focus,
a.list-group-item:hover, a.list-group-item:focus,
button.list-group-item:hover, button.list-group-item:focus {
    background: rgba(140,186,83,0.07) !important;
    color: var(--noc-phosphor-bright) !important;
    border-left-color: var(--noc-phosphor) !important;
    text-decoration: none;
}
a.list-group-item:hover i.fas,
a.list-group-item:hover i.far,
a.list-group-item:hover i.fab,
button.list-group-item:hover i.fas,
button.list-group-item:hover i.far,
button.list-group-item:hover i.fab {
    color: var(--noc-phosphor) !important;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background: rgba(140,186,83,0.08);
    color: var(--noc-phosphor);
    border-color: var(--noc-border);
    border-left-color: var(--noc-phosphor);
}
.list-group-item .badge { background: var(--noc-amber); color: var(--noc-bg); border-radius: 0; font-family: var(--font-mono); }

/* ----- alerts ----- */
.alert {
    border-radius: 0;
    border-width: 1px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    padding: 14px 18px;
}
.alert-success { background: rgba(140,186,83,0.08); border-color: var(--noc-phosphor); color: var(--noc-text); }
.alert-info    { background: rgba(95,209,255,0.06); border-color: var(--noc-cyan); color: var(--noc-text); }
.alert-warning { background: rgba(245,184,0,0.06); border-color: var(--noc-amber); color: var(--noc-text); }
.alert-danger  { background: rgba(232,71,71,0.06); border-color: var(--noc-red); color: var(--noc-text); }

/* ----- badges / labels ----- */
.label, .badge {
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 7px;
    font-weight: 600;
}
.label-success, .badge-success { background: var(--noc-phosphor); color: var(--noc-bg); }
.label-info,    .badge-info    { background: var(--noc-cyan); color: var(--noc-bg); }
.label-warning, .badge-warning { background: var(--noc-amber); color: var(--noc-bg); }
.label-danger,  .badge-danger  { background: var(--noc-red); color: var(--noc-bg); }
.label-default, .badge-default { background: var(--noc-border-bright); color: var(--noc-text); }

/* ----- modal ----- */
.modal-content {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
    color: var(--noc-text);
}
.modal-header { background: var(--noc-bg-deep); border-bottom: 1px solid var(--noc-border); }
.modal-footer { border-top: 1px solid var(--noc-border); background: var(--noc-bg-deep); }
.modal .close { color: var(--noc-text); opacity: .8; text-shadow: none; }
.modal .close:hover { opacity: 1; color: var(--noc-phosphor); }
.modal-backdrop.in { opacity: 0.85; background: var(--noc-bg-deep); }

/* ----- progress / nav-tabs ----- */
.progress {
    background: var(--noc-bg-deep);
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--noc-border);
}
.progress-bar { background: var(--noc-phosphor); }

.nav-tabs {
    border-bottom: 1px solid var(--noc-border-bright);
}
.nav-tabs > li > a {
    border-radius: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 16px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--noc-surface-solid);
    border-color: var(--noc-border-bright);
    border-bottom-color: var(--noc-surface-solid);
    color: var(--noc-phosphor);
}

/* ----- back-to-top ----- */
.back-to-top {
    color: var(--noc-text-dim) !important;
}
.back-to-top:hover { color: var(--noc-phosphor) !important; }

/* ----- pagination ----- */
.pagination > li > a {
    background: var(--noc-surface-solid);
    border-color: var(--noc-border);
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    border-radius: 0 !important;
}
.pagination > li > a:hover { background: rgba(140,186,83,0.06); color: var(--noc-phosphor-bright); border-color: var(--noc-phosphor); }
.pagination > .active > a { background: var(--noc-phosphor) !important; border-color: var(--noc-phosphor) !important; color: var(--noc-bg) !important; }

/* ----- dropdown menu ----- */
.dropdown-menu {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    padding: 6px 0;
}
.dropdown-menu > li > a {
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 9px 16px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: rgba(140,186,83,0.08);
    color: var(--noc-phosphor-bright);
}
.dropdown-menu .divider { background: var(--noc-border); }

/* ----- popovers / tooltips ----- */
.popover, .tooltip-inner {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 11.5px;
}
.popover-title {
    background: var(--noc-bg-deep);
    border-bottom: 1px solid var(--noc-border);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--noc-text);
}

/* ----- ticket / invoice headers ----- */
.invoice-info, .ticket-info {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 18px;
}

/* ----- footer back-to-top arrow override ----- */
#footer .back-to-top {
    position: static;
    background: transparent;
    box-shadow: none;
    color: var(--noc-text-dim);
}

/* ----- captcha block ----- */
.recaptcha-checkbox-wrapper, .g-recaptcha { margin: 12px 0; }

/* ----- product-status pills, etc ----- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.dot.active   { background: var(--noc-phosphor); box-shadow: 0 0 6px var(--noc-phosphor-glow); }
.dot.pending  { background: var(--noc-amber);   box-shadow: 0 0 6px var(--noc-amber-glow); }
.dot.suspended,
.dot.terminated { background: var(--noc-red); }

/* ----- legacy ipxcore brand wordmark — keep working in WHMCS pages ----- */
.ipxcore { font-family: var(--font-brand) !important; }
[style*="color: #8cba53"] { color: var(--noc-phosphor) !important; }

/* ----- ensure links inside main-body inherit the right colors ----- */
#main-body a { color: var(--noc-phosphor-bright); }
#main-body a:hover { color: var(--noc-amber); }

/* ----- containers without a sidebar in shopping cart still need padding ----- */
#order-standard_cart, #order-ipxcore_noc { color: var(--noc-text); }

/* =====================================================================
   FORCED OVERRIDES for compound Bootstrap selectors that win specificity
   battles against our base rules. Anything below uses a selector at
   least as specific as the WHMCS default so we don't need !important.
   ===================================================================== */

/* ---- Panel variants (default / primary / info / success / warning / danger) ---- */
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background-color: var(--noc-bg-deep);
    color: var(--noc-text);
    border-color: var(--noc-border);
}
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
}
.panel-primary { border-color: var(--noc-phosphor); }
.panel-primary > .panel-heading {
    background: var(--noc-phosphor);
    color: var(--noc-bg);
    border-color: var(--noc-phosphor);
}
.panel-success { border-color: var(--noc-phosphor); }
.panel-success > .panel-heading { color: var(--noc-phosphor); }
.panel-info { border-color: var(--noc-cyan); }
.panel-info > .panel-heading { color: var(--noc-cyan); }
.panel-warning { border-color: var(--noc-amber); }
.panel-warning > .panel-heading { color: var(--noc-amber); }
.panel-danger { border-color: var(--noc-red); }
.panel-danger > .panel-heading { color: var(--noc-red); }
.panel > .panel-body { color: var(--noc-text-dim); }
.panel-collapse > .panel-body { border-top-color: var(--noc-border) !important; }

/* sidebar panels (announcements/KB use .panel-sidebar instead of .panel-default) */
.panel.panel-sidebar,
.panel-sidebar {
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border) !important;
    color: var(--noc-text-dim) !important;
}
.panel-sidebar > .panel-heading {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text) !important;
    border-bottom: 1px solid var(--noc-border) !important;
}
.panel-sidebar .panel-title {
    color: var(--noc-text) !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    line-height: 1.4 !important;
}
.panel-sidebar .panel-minimise { color: var(--noc-text-faint) !important; }
.panel-sidebar .panel-minimise:hover { color: var(--noc-phosphor) !important; }
.panel-sidebar .panel-body { background: transparent !important; padding: 14px 18px; }

/* ---- Bootstrap utility text colors ---- */
.text-muted   { color: var(--noc-text-faint) !important; }
.text-primary { color: var(--noc-phosphor-bright) !important; }
.text-primary:hover { color: var(--noc-phosphor) !important; }
.text-success { color: var(--noc-phosphor) !important; }
.text-success:hover { color: var(--noc-phosphor-bright) !important; }
.text-info    { color: var(--noc-cyan) !important; }
.text-warning { color: var(--noc-amber) !important; }
.text-danger  { color: var(--noc-red) !important; }

/* ---- Bootstrap utility bg colors ---- */
.bg-primary { background: var(--noc-phosphor) !important; color: var(--noc-bg) !important; }
.bg-primary:hover { background: var(--noc-phosphor-bright) !important; }
.bg-success { background: rgba(140,186,83,0.10) !important; color: var(--noc-text) !important; }
.bg-info    { background: rgba(95,209,255,0.08) !important; color: var(--noc-text) !important; }
.bg-warning { background: rgba(245,184,0,0.08) !important; color: var(--noc-text) !important; }
.bg-danger  { background: rgba(232,71,71,0.08) !important; color: var(--noc-text) !important; }

/* ---- header-lined (page section heading inside main-content) ---- */
.header-lined {
    border-bottom: 1px dashed var(--noc-border-bright) !important;
    margin: 0 0 22px;
    padding-bottom: 10px;
}
.header-lined h1,
.header-lined h2 {
    color: var(--noc-text) !important;
    border: 0 !important;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
    margin: 0 0 6px;
    padding: 0;
}
.header-lined small {
    color: var(--noc-text-faint);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    display: block;
    margin-top: 8px;
}
.header-lined .breadcrumb {
    margin: 8px 0 0 !important;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.header-lined .breadcrumb li a { color: var(--noc-text-dim) !important; }
.header-lined .breadcrumb li a:hover { color: var(--noc-phosphor-bright) !important; }
.header-lined .breadcrumb > .active { color: var(--noc-phosphor) !important; }

/* ---- breadcrumb active everywhere ---- */
.breadcrumb > .active { color: var(--noc-phosphor) !important; }
.breadcrumb > li + li::before { color: var(--noc-text-faint) !important; content: "/" !important; }

/* ---- jumbotron / well ---- */
.jumbotron, .well {
    background: var(--noc-surface-solid) !important;
    color: var(--noc-text);
    border: 1px solid var(--noc-border);
    border-radius: 0;
    padding: 28px 32px;
    box-shadow: none;
}
.jumbotron h1, .jumbotron h2 { color: var(--noc-text); }
.jumbotron > hr { border-top-color: var(--noc-border); }

/* ---- support tickets ---- */
.ticket-info, .ticket-summary, .ticket-replies {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    color: var(--noc-text);
    padding: 18px;
}
.ticket-number { color: var(--noc-phosphor) !important; font-family: var(--font-mono); font-style: normal !important; }

.ticket-reply {
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border) !important;
    color: var(--noc-text-dim);
    margin: 14px 0;
}
.ticket-reply.staff {
    border-color: var(--noc-phosphor) !important;
    background:
        linear-gradient(180deg, rgba(140,186,83,0.05), transparent 12%),
        var(--noc-surface-solid) !important;
}
.ticket-reply .user {
    background: var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-border);
    padding: 10px 16px !important;
    font-family: var(--font-mono);
    font-size: 12px;
}
.ticket-reply.staff .user {
    background: rgba(140,186,83,0.06) !important;
}
.ticket-reply .user .name { color: var(--noc-text); font-weight: 600; }
.ticket-reply .user .type {
    color: var(--noc-phosphor);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10.5px;
    font-weight: 600;
}
.ticket-reply.staff .user .type { color: var(--noc-phosphor-bright); }
.ticket-reply .user i { color: var(--noc-text-faint); }
.ticket-reply .date {
    color: var(--noc-text-faint);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.ticket-reply .message {
    padding: 16px 18px !important;
    color: var(--noc-text);
    line-height: 1.7;
}
.ticket-reply .message a { color: var(--noc-phosphor-bright); }

.ticket-attachments,
.ticket-attachments-message {
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- submit-ticket form specifically ---- */
#frmSubmitTicket .form-group { margin-bottom: 18px; }
#frmSubmitTicket label,
.submitticket-page label,
.submitticket-form label {
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
#frmSubmitTicket .form-control,
.submitticket-page .form-control,
.submitticket-form .form-control {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    color: var(--noc-text);
}

/* ---- markdown editor (bootstrap-markdown — used by submitticket etc.) ---- */
.md-editor {
    background: var(--noc-bg-deep) !important;
    border: 1px solid var(--noc-border-bright) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.md-editor.active {
    border-color: var(--noc-phosphor) !important;
    box-shadow: 0 0 0 4px rgba(140,186,83,0.15) !important;
    outline: 0 !important;
}
.md-editor > .md-header,
.md-editor > .md-footer {
    background: var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-border) !important;
    padding: 8px 6px !important;
    margin: 0 !important;
}
.md-editor > .md-footer { border-top: 1px solid var(--noc-border) !important; border-bottom: 0 !important; }
.md-editor > .md-header .btn,
.md-editor > .md-footer .btn {
    background: transparent !important;
    border: 1px solid var(--noc-border) !important;
    color: var(--noc-text-dim) !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    box-shadow: none !important;
}
.md-editor > .md-header .btn:hover,
.md-editor > .md-footer .btn:hover {
    background: rgba(140,186,83,0.08) !important;
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor-bright) !important;
}
.md-editor > .md-header .btn.active,
.md-editor > .md-footer .btn.active {
    background: rgba(140,186,83,0.12) !important;
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor) !important;
    box-shadow: inset 0 0 0 1px var(--noc-phosphor) !important;
}
.md-editor > textarea,
.md-editor > .md-input,
.md-editor textarea.md-input {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text) !important;
    border: 0 !important;
    padding: 14px 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.md-editor > textarea:focus,
.md-editor > .md-input:focus { background: var(--noc-bg-deep) !important; box-shadow: none !important; }
.md-editor > .md-preview {
    background: var(--noc-surface-solid) !important;
    color: var(--noc-text) !important;
    border-top: 1px dashed var(--noc-border) !important;
    border-bottom: 1px dashed var(--noc-border) !important;
    padding: 14px 16px !important;
    min-height: 60px !important;
}
.md-editor .md-controls .md-control {
    color: var(--noc-text-faint) !important;
}
.md-editor .md-controls .md-control:hover {
    color: var(--noc-phosphor-bright) !important;
}
.md-editor.md-fullscreen-mode {
    background: var(--noc-bg) !important;
    border: 0 !important;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text) !important;
}
.md-editor.md-fullscreen-mode .btn { color: var(--noc-text-dim) !important; }
.md-editor.md-fullscreen-mode .btn:hover { color: var(--noc-phosphor-bright) !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--noc-text-dim) !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { color: var(--noc-phosphor) !important; }

/* ---- legacy support for EasyMDE/CodeMirror, in case any page uses it ---- */
.editor-toolbar,
.CodeMirror {
    background: var(--noc-bg-deep) !important;
    border-color: var(--noc-border-bright) !important;
    color: var(--noc-text) !important;
}
.editor-toolbar a {
    color: var(--noc-text-dim) !important;
    border: 1px solid transparent !important;
}
.editor-toolbar a:hover, .editor-toolbar a.active {
    background: rgba(140,186,83,0.08) !important;
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor) !important;
}
.editor-preview, .editor-preview-side {
    background: var(--noc-surface-solid) !important;
    color: var(--noc-text) !important;
    border-color: var(--noc-border) !important;
}
.CodeMirror-cursor { border-left-color: var(--noc-phosphor) !important; }
.CodeMirror-selected { background: rgba(140,186,83,0.18) !important; }
.CodeMirror-activeline-background { background: rgba(140,186,83,0.04) !important; }
.CodeMirror-gutters {
    background: var(--noc-bg) !important;
    border-right: 1px solid var(--noc-border) !important;
    color: var(--noc-text-faint) !important;
}
.CodeMirror-linenumber { color: var(--noc-text-faint) !important; }

/* ---- file input "choose file" button ---- */
input[type="file"].form-control,
input[type="file"] {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    color: var(--noc-text);
    padding: 6px 10px;
    height: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    cursor: pointer;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: var(--noc-phosphor);
    color: var(--noc-bg);
    border: 0;
    border-right: 1px solid var(--noc-border-bright);
    margin: -6px 12px -6px -10px;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: background 140ms ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--noc-phosphor-bright);
}

/* ---- announcements ---- */
.announcement-item, .announcements-list .item {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 18px 22px;
    margin-bottom: 14px;
    color: var(--noc-text-dim);
}
.announcement-item h3,
.announcements-list .item h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--noc-text);
}

/* ---- order-confirmation, summary tables (clientarea home, services etc.) ---- */
.summary-stat,
.usage-stat {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 14px 18px;
    color: var(--noc-text);
    font-family: var(--font-mono);
}
.usage-bar { background: var(--noc-bg-deep); border: 1px solid var(--noc-border); }
.usage-bar .progress-bar { background: var(--noc-phosphor); }

/* ---- client area top stats / cards on dashboard ---- */
.dashboard-tile,
.client-dashboard-tile,
.tile {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    color: var(--noc-text);
}
.tile .tile-title,
.dashboard-tile .tile-title {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--noc-text-faint);
    font-size: 11px;
}
.tile .tile-value,
.dashboard-tile .tile-value {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--noc-phosphor);
    text-shadow: 0 0 14px var(--noc-phosphor-glow);
}

/* ---- code / pre / kbd ---- */
code, kbd, samp {
    background: var(--noc-bg-deep);
    color: var(--noc-phosphor-bright);
    border: 1px solid var(--noc-border);
    padding: 2px 6px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .92em;
}
pre {
    background: var(--noc-bg-deep);
    color: var(--noc-text);
    border: 1px solid var(--noc-border);
    border-radius: 0;
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
}

/* ---- abbr / hr / mark ---- */
abbr[title] { border-bottom: 1px dotted var(--noc-text-faint); cursor: help; }
hr { border-color: var(--noc-border) !important; }
mark { background: rgba(245,184,0,0.18); color: var(--noc-text); padding: 1px 3px; }

/* ---- tooltip arrow color ---- */
.tooltip-inner { background: var(--noc-surface-solid) !important; color: var(--noc-text) !important; border: 1px solid var(--noc-border-bright) !important; }
.tooltip.top .tooltip-arrow,
.tooltip.bs-tooltip-top .tooltip-arrow { border-top-color: var(--noc-border-bright) !important; }
.tooltip.bottom .tooltip-arrow,
.tooltip.bs-tooltip-bottom .tooltip-arrow { border-bottom-color: var(--noc-border-bright) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--noc-border-bright) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--noc-border-bright) !important; }

/* ---- tag cloud / inline font-size overrides on KB tag cloud ---- */
.panel-body > a[href*="knowledgebase/tag/"][style*="font-size"] {
    font-size: 11px !important;
}

/* ---- "Active products and services" listing on client home ---- */
.product-row, .product-status-row,
.active-products-and-services .item {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    color: var(--noc-text-dim);
}

/* ---- domain rows / TLD search results ---- */
.tld-pricing tbody tr td {
    background: transparent;
    color: var(--noc-text-dim);
}

/* ---- captcha block ---- */
.captcha-container { padding: 12px 0; }

/* ---- notification dropdown content (inside the popover) ---- */
.client-alerts {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 280px;
}
.client-alerts > li {
    border-bottom: 1px solid var(--noc-border);
}
.client-alerts > li:last-child { border-bottom: 0; }
.client-alerts > li > a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: var(--noc-text-dim) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    border-left: 2px solid transparent;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
    text-decoration: none;
}
.client-alerts > li > a:hover {
    background: rgba(140,186,83,0.08) !important;
    color: var(--noc-phosphor-bright) !important;
    border-left-color: var(--noc-phosphor);
}
.client-alerts > li > a > i {
    font-size: 16px;
    color: var(--noc-text-faint);
    flex: 0 0 auto;
    padding-top: 1px;
}
.client-alerts > li > a:hover > i {
    color: var(--noc-phosphor) !important;
}
.client-alerts > li > a > .message {
    flex: 1;
    color: inherit;
}
.client-alerts > li.none {
    padding: 14px 18px;
    color: var(--noc-text-faint);
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
}
/* and lift it visually with a header strip when shown inside a popover */
.popover-content .client-alerts { margin: -9px -14px; }

/* ---- popovers used by language-chooser/notification dropdowns ---- */
.popover { background: var(--noc-surface-solid); border: 1px solid var(--noc-border-bright); color: var(--noc-text); border-radius: 0; }
.popover-title { background: var(--noc-bg-deep); border-bottom: 1px solid var(--noc-border); color: var(--noc-text); }
.popover.bottom > .arrow::after { border-bottom-color: var(--noc-surface-solid) !important; }
.popover.top > .arrow::after    { border-top-color:    var(--noc-surface-solid) !important; }

/* ---- file-upload widgets / drag&drop ---- */
.dropzone, .upload-area, .fileinput-button {
    background: var(--noc-bg-deep) !important;
    border: 1px dashed var(--noc-border-bright) !important;
    color: var(--noc-text-dim) !important;
    border-radius: 0 !important;
}
.dropzone:hover, .upload-area:hover {
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor-bright) !important;
}

/* ---- responsive table on small screens (e.g. invoices listing) ---- */
.table-responsive {
    border: 0;
    background: var(--noc-surface-solid);
}

/* ---- form validation states (has-error / has-warning / has-success) ---- */
.has-success .control-label,
.has-success .help-block,
.has-success .checkbox,
.has-success .radio,
.has-success.checkbox label,
.has-success.radio label { color: var(--noc-phosphor) !important; }
.has-success .form-control { border-color: var(--noc-phosphor) !important; box-shadow: none !important; }
.has-success .form-control:focus { border-color: var(--noc-phosphor-bright) !important; box-shadow: 0 0 0 4px rgba(140,186,83,0.15) !important; }

.has-warning .control-label,
.has-warning .help-block,
.has-warning .checkbox,
.has-warning .radio,
.has-warning.checkbox label,
.has-warning.radio label { color: var(--noc-amber) !important; }
.has-warning .form-control { border-color: var(--noc-amber) !important; box-shadow: none !important; }
.has-warning .form-control:focus { border-color: var(--noc-amber) !important; box-shadow: 0 0 0 4px rgba(245,184,0,0.15) !important; }

.has-error .control-label,
.has-error .help-block,
.has-error .checkbox,
.has-error .radio,
.has-error.checkbox label,
.has-error.radio label { color: var(--noc-red) !important; }
.has-error .form-control { border-color: var(--noc-red) !important; box-shadow: none !important; }
.has-error .form-control:focus { border-color: var(--noc-red) !important; box-shadow: 0 0 0 4px rgba(232,71,71,0.15) !important; }

.has-success .input-group-addon,
.has-warning .input-group-addon,
.has-error .input-group-addon {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text) !important;
    border-color: var(--noc-border-bright) !important;
}

/* ---- nav-pills / nav-tabs deeper variants ---- */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: var(--noc-phosphor) !important;
    color: var(--noc-bg) !important;
}
.nav-pills > li > a {
    color: var(--noc-text-dim);
    border-radius: 0;
}
.nav-pills > li > a:hover { background: rgba(140,186,83,0.06); color: var(--noc-phosphor-bright); }
.nav-tabs > li > a:hover { border-color: var(--noc-border) var(--noc-border) var(--noc-border-bright); background: rgba(140,186,83,0.04); color: var(--noc-phosphor-bright); }
.nav > li.disabled > a, .nav > li.disabled > a:hover { color: var(--noc-text-faint) !important; }

/* ---- pagination active / disabled ---- */
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--noc-phosphor) !important;
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-bg) !important;
}
.pagination > .disabled > a, .pagination > .disabled > span,
.pagination > .disabled > a:hover, .pagination > .disabled > span:hover {
    background: var(--noc-bg-deep) !important;
    border-color: var(--noc-border) !important;
    color: var(--noc-text-faint) !important;
}

/* ---- dropdown menu items (deeper specificity) ---- */
.dropdown-menu > li > a {
    color: var(--noc-text-dim);
    background: transparent;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: rgba(140,186,83,0.08);
    color: var(--noc-phosphor-bright);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--noc-phosphor) !important;
    color: var(--noc-bg) !important;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover {
    color: var(--noc-text-faint) !important;
    background: transparent !important;
}
.dropdown-header {
    color: var(--noc-phosphor);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* ---- progress bar variants ---- */
.progress-bar-success { background: var(--noc-phosphor) !important; }
.progress-bar-info    { background: var(--noc-cyan) !important; }
.progress-bar-warning { background: var(--noc-amber) !important; }
.progress-bar-danger  { background: var(--noc-red) !important; }
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.10) 75%, transparent 75%, transparent) !important;
}

/* ---- list-group-item variants ---- */
.list-group-item-success { background: rgba(140,186,83,0.08) !important; color: var(--noc-text) !important; border-color: var(--noc-phosphor) !important; }
.list-group-item-info    { background: rgba(95,209,255,0.06) !important; color: var(--noc-text) !important; border-color: var(--noc-cyan) !important; }
.list-group-item-warning { background: rgba(245,184,0,0.06) !important; color: var(--noc-text) !important; border-color: var(--noc-amber) !important; }
.list-group-item-danger  { background: rgba(232,71,71,0.06) !important; color: var(--noc-text) !important; border-color: var(--noc-red) !important; }

/* ---- alert-link inside variants ---- */
.alert-link { color: inherit !important; text-decoration: underline !important; font-weight: 700; }

/* ---- btn active state inset shadow (Bootstrap default looks bad on dark) ---- */
.btn.active, .btn:active {
    box-shadow: inset 0 0 0 2px rgba(140,186,83,0.45) !important;
}

/* ---- nav-stacked (used in some sidebar contexts) ---- */
.nav-stacked > li > a {
    color: var(--noc-text-dim);
    border-bottom: 1px solid var(--noc-border);
}
.nav-stacked > li > a:hover {
    background: rgba(140,186,83,0.06);
    color: var(--noc-phosphor-bright);
}

/* ---- carousel control / indicators (hosting feature carousels, etc.) ---- */
.carousel-control { color: var(--noc-text) !important; text-shadow: none !important; }
.carousel-control:hover { color: var(--noc-phosphor) !important; }
.carousel-indicators li { background: var(--noc-border-bright); border-color: var(--noc-border); }
.carousel-indicators .active { background: var(--noc-phosphor); border-color: var(--noc-phosphor); }
.carousel-caption { color: var(--noc-text); text-shadow: 0 1px 2px rgba(0,0,0,.7); }

/* ---- close-button affordance (×) used in alerts/modals/popovers ---- */
button.close, .close {
    color: var(--noc-text) !important;
    text-shadow: none !important;
    opacity: .65;
    font-family: var(--font-display);
    font-weight: 700;
}
button.close:hover, .close:hover { color: var(--noc-phosphor) !important; opacity: 1; }

/* ---- glyphicon / fa neutralizer — they render fine but ensure color inherits ---- */
.glyphicon, .fa, .fas, .far, .fab { color: inherit; }

/* ---- caret in dropdowns ---- */
.caret { border-top-color: currentColor; }

/* ---- two-factor auth setup, account security panels ---- */
.qr-code-container,
#twoFactorAuth, #passwordPolicy {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 18px 22px;
    color: var(--noc-text);
}

/* ---- security questions / pwstrength meter ---- */
.password-strength {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    height: 8px;
}
.pwstrength_viewport_progress .progress { height: 8px; }

/* ---- cancellation request, account changes, addons modal forms ---- */
.modal .form-control { background: var(--noc-bg-deep); border-color: var(--noc-border-bright); color: var(--noc-text); }

/* ---- service status pill (active / pending / suspended / terminated) ---- */
.label-active, .label-online, .label-success { background: var(--noc-phosphor) !important; color: var(--noc-bg) !important; }
.label-pending, .label-warning { background: var(--noc-amber) !important; color: var(--noc-bg) !important; }
.label-suspended, .label-terminated, .label-danger, .label-cancelled { background: var(--noc-red) !important; color: var(--noc-bg) !important; }

/* ---- pagination > li > a base color ---- */
.pagination > li > a, .pagination > li > span {
    color: var(--noc-text-dim);
    background: var(--noc-surface-solid);
    border-color: var(--noc-border);
}

/* ---- submit-ticket department picker (col-md-6 + margin-bottom blocks) ---- */
.main-content .col-md-6.margin-bottom {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 22px 22px;
    margin-bottom: 14px !important;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.main-content .col-md-6.margin-bottom:hover {
    border-color: var(--noc-phosphor);
    background: rgba(140,186,83,0.04);
    transform: translateY(-2px);
}
.main-content .col-md-6.margin-bottom > p:first-child {
    margin: 0 0 6px;
}
.main-content .col-md-6.margin-bottom > p > strong > a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--noc-text) !important;
    letter-spacing: 0;
    line-height: 1.05;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.main-content .col-md-6.margin-bottom > p > strong > a:hover {
    color: var(--noc-phosphor-bright) !important;
}
.main-content .col-md-6.margin-bottom > p > strong > a > i {
    color: var(--noc-phosphor);
    font-size: 16px;
}
.main-content .col-md-6.margin-bottom > p:nth-child(2) {
    color: var(--noc-text-dim);
    font-size: 12.5px;
    margin: 0;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .main-content .col-md-6.margin-bottom { width: 100%; }
}

/* ---- announcement view list items ---- */
.main-content > div > h2,
.main-content > h2 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--noc-text);
    letter-spacing: 0;
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--noc-border-bright);
    line-height: 1.05;
}

/* ---- "Most Popular" / "Recent" label-style headings ---- */
.main-content h3 + ul,
.main-content h2 + ul {
    list-style: none;
    padding-left: 0;
}

/* ---- knowledgebase article list inside category page ---- */
.kb-article-list .item {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 14px 18px;
    margin-bottom: 8px;
}

/* ---- contact-form / general .form-horizontal labels ---- */
.form-horizontal .control-label {
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding-top: 11px;
}

/* ---- search results / dropdown autocomplete ---- */
.tt-menu, .typeahead, .dropdown-menu.tt-dropdown-menu {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border-bright);
    color: var(--noc-text);
    border-radius: 0;
}
.tt-suggestion { padding: 8px 14px; color: var(--noc-text-dim); }
.tt-suggestion:hover, .tt-suggestion.tt-cursor {
    background: rgba(140,186,83,0.08);
    color: var(--noc-phosphor-bright);
}

/* ---- contact form layout polish ---- */
#frmContact .control-label,
.contact-form .control-label { padding-top: 11px; }

/* ---- verification banners (top of page when email unverified or
   user-validation needed). Bootstrap default has light gray bg + dark text. */
.verification-banner {
    background: var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-border) !important;
    color: var(--noc-text) !important;
    padding: 12px 0 !important;
    font-family: var(--font-mono);
    font-weight: 400 !important;
    position: relative;
}
.verification-banner.email-verification {
    background:
        linear-gradient(180deg, rgba(245,184,0,0.08), transparent) !important,
        var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-amber) !important;
    box-shadow: inset 3px 0 0 var(--noc-amber);
}
.verification-banner.user-validation {
    background:
        linear-gradient(180deg, rgba(140,186,83,0.08), transparent) !important,
        var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-phosphor) !important;
    box-shadow: inset 3px 0 0 var(--noc-phosphor);
}
.verification-banner .text {
    color: var(--noc-text) !important;
    padding: 9px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.5;
}
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
    float: left;
    padding: 2px 14px 0 0 !important;
    font-size: 22px !important;
}
.verification-banner.email-verification .fas { color: var(--noc-amber) !important; }
.verification-banner.user-validation .fal,
.verification-banner.user-validation .far,
.verification-banner.user-validation .fas { color: var(--noc-phosphor) !important; }
.verification-banner .btn-action,
.verification-banner .btn-resend-verify-email {
    background: transparent !important;
    border: 1px solid var(--noc-amber) !important;
    color: var(--noc-amber) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    transition: background 140ms ease, color 140ms ease;
}
.verification-banner .btn-action:hover,
.verification-banner .btn-resend-verify-email:hover {
    background: var(--noc-amber) !important;
    color: var(--noc-bg) !important;
}
.verification-banner.user-validation .btn-action {
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor) !important;
}
.verification-banner.user-validation .btn-action:hover {
    background: var(--noc-phosphor) !important;
    color: var(--noc-bg) !important;
}
.verification-banner .btn-action[disabled],
.verification-banner .btn-action[disabled]:hover,
.verification-banner.email-verification .btn.btn-action[disabled]:hover,
.verification-banner.user-validation .btn.btn-action[disabled]:hover {
    background: transparent !important;
    border-color: var(--noc-border-bright) !important;
    color: var(--noc-text-faint) !important;
    cursor: not-allowed;
}
.verification-banner .btn.close {
    background: transparent !important;
    color: var(--noc-text-dim) !important;
    opacity: .8 !important;
    font-size: 22px !important;
    text-shadow: none !important;
    line-height: 1;
    padding: 4px 10px !important;
    margin-left: 0 !important;
    border: 0 !important;
    transition: color 140ms ease, opacity 140ms ease;
}
.verification-banner .btn.close:hover {
    color: var(--noc-amber) !important;
    opacity: 1 !important;
}
.verification-banner.user-validation .btn.close:hover {
    color: var(--noc-phosphor) !important;
}

/* ---- announcement single (viewannouncement.tpl) — pasted-from-Google-Docs HTML
   typically has inline style="color:#000000; font-family:Arial; ..." on every
   span. We can't strip those, so we override with !important inside the
   .announcement-body wrapper. This also rationalizes line-height/spacing. */
.announcement-body {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 28px 32px;
    color: var(--noc-text);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 24px;
}
.announcement-body p,
.announcement-body div,
.announcement-body span,
.announcement-body li {
    color: var(--noc-text) !important;
    background-color: transparent !important;
    font-family: inherit !important;
}
.announcement-body span[style*="font-weight: bold"],
.announcement-body span[style*="font-weight:bold"],
.announcement-body span[style*="font-weight: 700"] {
    color: var(--noc-text) !important;
    font-weight: 700 !important;
}
.announcement-body p {
    margin: 0 0 14px !important;
    line-height: 1.75 !important;
}
.announcement-body p:empty { display: none; }
.announcement-body p[style*="margin-top: 0pt"][style*="margin-bottom: 0pt"] {
    margin: 0 0 4px !important;
}
.announcement-body a,
.announcement-body a span {
    color: var(--noc-phosphor-bright) !important;
    text-decoration: none;
}
.announcement-body a:hover,
.announcement-body a:hover span {
    color: var(--noc-amber) !important;
    text-decoration: underline;
}
.announcement-body h1, .announcement-body h2, .announcement-body h3,
.announcement-body h4, .announcement-body h5, .announcement-body h6 {
    color: var(--noc-text) !important;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 22px 0 10px;
    line-height: 1.1;
}
.announcement-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--noc-border);
    margin: 10px 0;
}
.announcement-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
}
.announcement-body table td,
.announcement-body table th {
    border: 1px solid var(--noc-border) !important;
    padding: 8px 12px !important;
    color: var(--noc-text) !important;
    background: transparent !important;
}
.announcement-body table th {
    background: var(--noc-bg) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.announcement-body hr {
    border: 0;
    border-top: 1px dashed var(--noc-border) !important;
    margin: 18px 0;
}
.announcement-body ul, .announcement-body ol {
    padding-left: 24px;
    margin: 12px 0;
}
.announcement-body code, .announcement-body pre {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-phosphor-bright) !important;
    border: 1px solid var(--noc-border) !important;
    font-family: var(--font-mono) !important;
}

/* ---- announcements ---- */
.announcement-single {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 22px 26px;
    margin-bottom: 16px;
    color: var(--noc-text-dim);
}
.announcement-single h3,
.announcement-single h2 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--noc-text);
    margin: 0 0 8px;
    line-height: 1.05;
}
.announcement-single small {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--noc-text-faint);
}
.article-items > div,
.article-items > p {
    border-bottom: 1px dashed var(--noc-border);
    padding: 14px 0;
}
.article-items a {
    color: var(--noc-text);
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 13px;
}
.article-items a:hover { color: var(--noc-phosphor-bright); }

/* ---- social-login buttons (register page) ---- */
.btn-social {
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--noc-border-bright);
    background: var(--noc-bg-deep);
    color: var(--noc-text);
}
.btn-social:hover {
    border-color: var(--noc-phosphor);
    color: var(--noc-phosphor-bright);
    background: rgba(140,186,83,0.04);
}
.btn-facebook { background: #1877f2 !important; color: #fff !important; border-color: #1877f2 !important; }
.btn-facebook:hover { background: #145dbf !important; border-color: #145dbf !important; color: #fff !important; }
.btn-twitter { background: #1da1f2 !important; color: #fff !important; border-color: #1da1f2 !important; }
.btn-twitter:hover { background: #178cd6 !important; border-color: #178cd6 !important; color: #fff !important; }
.fb-login-button { border-radius: 0 !important; }

/* ---- register page: prepend-icon form fields ---- */
input.field,
select.field,
textarea.field {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 11px 12px 11px 44px; /* left padding for icon */
    width: 100%;
    height: 44px;
    box-shadow: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
input.field:focus,
select.field:focus,
textarea.field:focus {
    outline: 0;
    border-color: var(--noc-phosphor);
    box-shadow: 0 0 0 4px rgba(140,186,83,0.10);
    background: var(--noc-bg-deep);
}
input.field::placeholder,
textarea.field::placeholder {
    color: var(--noc-text-faint);
}

.form-group.prepend-icon {
    position: relative;
    margin-bottom: 14px;
}
.form-group.prepend-icon > .field-icon {
    position: absolute;
    top: 0; left: 0;
    width: 36px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--noc-text-faint);
    background: transparent;
    margin: 0;
    pointer-events: none;
    z-index: 2;
    border-right: 1px solid var(--noc-border);
}
.form-group.prepend-icon > .field-icon > i {
    font-size: 14px;
    color: var(--noc-phosphor-dim);
}
.form-group.prepend-icon:focus-within > .field-icon > i {
    color: var(--noc-phosphor);
}
.form-group.prepend-icon > .field {
    padding-left: 50px;
}
.form-group.prepend-icon > .form-control:not(.field) {
    padding-left: 50px;
}

/* register-form sub-heading bar */
.sub-heading {
    margin: 0 0 18px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--noc-border-bright);
}
.sub-heading > span {
    color: var(--noc-phosphor) !important;
    background: transparent !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    padding: 0 !important;
    font-weight: 700;
}
.sub-heading > span::before {
    content: "// ";
    color: var(--noc-text-faint);
}

/* register-form helper text below inputs */
.field-help-text {
    color: var(--noc-text-faint);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 4px;
}

/* register-form social-signin button row */
.social-signin-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
}
.social-signin-btns > .btn,
.social-signin-btns > div {
    flex: 0 1 auto;
}

/* password strength meter */
.password-strength-meter,
.using-password-strength + .password-strength,
.using-password-strength .password-strength-meter {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
}
.password-strength-meter .password-strength-bar {
    height: 100%;
    transition: width 200ms ease, background 200ms ease;
    background: var(--noc-red);
}
.password-strength-meter .password-strength-bar.medium { background: var(--noc-amber); }
.password-strength-meter .password-strength-bar.strong { background: var(--noc-phosphor); }
.using-password-strength .progress { background: var(--noc-bg-deep) !important; border: 1px solid var(--noc-border); height: 6px; }

/* TOS danger-panel callout (register accept-tos) */
.panel-danger.tospanel,
.tospanel {
    background: rgba(232,71,71,0.04) !important;
    border: 1px solid var(--noc-red) !important;
}
.tospanel .panel-heading,
.panel-danger.tospanel > .panel-heading {
    background: rgba(232,71,71,0.10) !important;
    color: var(--noc-red) !important;
    border-bottom: 1px solid var(--noc-red) !important;
}
.tospanel .panel-body { color: var(--noc-text); }

/* generate-password / copy-to-clipboard inline buttons */
.generate-password, .copy-to-clipboard {
    background: transparent !important;
    border: 1px solid var(--noc-border-bright) !important;
    color: var(--noc-text-dim) !important;
    border-radius: 0 !important;
}
.generate-password:hover, .copy-to-clipboard:hover {
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor-bright) !important;
    background: rgba(140,186,83,0.05) !important;
}

/* g_id_signin (Google sign-in button placeholder) */
.g_id_signin.btn-social {
    background: #ffffff !important;
    color: #1f1f1f !important;
    border: 1px solid #dadce0 !important;
}
.g_id_signin.btn-social:hover {
    background: #f8f9fa !important;
    color: #1f1f1f !important;
    border-color: #d2e3fc !important;
}

/* ---- TOS / consent areas (register, checkout) ---- */
.accepttos, .tos-acceptance, .accept-tos {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    padding: 14px 18px;
    color: var(--noc-text-dim);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    margin: 14px 0;
}
.tosicon {
    color: var(--noc-amber);
    margin-right: 8px;
}

/* ---- "field" / "control" register-form layout (Anything WHMCS uses) ---- */
.field, .control { margin-bottom: 12px; }

/* ---- registered-with-us message and similar callouts ---- */
.alert.text-center { text-align: left; }

/* ---- WHMCS markdown-editor variant ---- */
.form-control.markdown-editor {
    background: var(--noc-bg-deep);
    color: var(--noc-text);
    border-color: var(--noc-border-bright);
    min-height: 180px;
    font-family: var(--font-mono);
    font-size: 13px;
}

/* =====================================================================
   CLIENT-AREA DASHBOARD (clientareahome.tpl)
   - 4 stat tiles (services / domains / tickets / invoices)
   - knowledgebase search bar
   - panels with .panel-accent-* color stripes
   ===================================================================== */

.tiles {
    margin: 0 0 22px !important;
    padding: 0;
}
.tiles .row {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    margin: 0;
}
.tiles .tile {
    position: relative;
    padding: 22px 24px !important;
    background: transparent !important;
    border-right: 1px solid var(--noc-border) !important;
    border-bottom: 0 !important;
    transition: background 160ms ease;
    color: var(--noc-text);
    overflow: hidden;
}
.tiles .tile:last-child { border-right: 0 !important; }
.tiles .tile:hover {
    background: rgba(140,186,83,0.05) !important;
    cursor: pointer;
}
.tiles .tile a { text-decoration: none; color: inherit; display: block; }
.tile .icon {
    color: var(--noc-text-faint) !important;
    font-size: 44px !important;
    top: 16px !important;
    right: 16px !important;
    transition: color 160ms ease;
}
.tiles .tile:hover .icon { color: var(--noc-phosphor) !important; }
.tile .stat {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 44px !important;
    line-height: 1 !important;
    color: var(--noc-phosphor) !important;
    text-shadow: 0 0 14px var(--noc-phosphor-glow);
    margin-top: 0 !important;
}
.tile .title {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--noc-text-dim);
    margin-top: 6px;
}
.tiles .tile .highlight {
    margin-top: 12px !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: var(--noc-phosphor);
    opacity: 0.7;
}

/* mobile stack */
@media (max-width: 768px) {
    .tiles .tile {
        border-right: 0 !important;
        border-bottom: 1px solid var(--noc-border) !important;
    }
    .tiles .tile:last-child { border-bottom: 0 !important; }
}

/* knowledge-base search at top of dashboard */
.home-kb-search {
    margin-bottom: 22px !important;
    position: relative;
}
.home-kb-search .form-control {
    background: var(--noc-bg-deep) !important;
    border: 1px solid var(--noc-border-bright) !important;
    color: var(--noc-text) !important;
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 14px 16px 14px 50px !important;
    height: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.home-kb-search .form-control::placeholder { color: var(--noc-text-faint); }
.home-kb-search .form-control:focus {
    border-color: var(--noc-phosphor) !important;
    box-shadow: 0 0 0 4px rgba(140,186,83,0.10) !important;
}
.home-kb-search > .fas, .home-kb-search > .fa-search {
    position: absolute;
    top: 50%; left: 18px;
    transform: translateY(-50%);
    color: var(--noc-phosphor);
    font-size: 14px;
    pointer-events: none;
}

/* dashboard panels */
.client-home-panels { margin-top: 8px; }
.client-home-panels .panel {
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border) !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}
.client-home-panels .panel > .panel-heading {
    background: var(--noc-bg-deep) !important;
    border-bottom: 1px solid var(--noc-border) !important;
    padding: 12px 18px !important;
}
.client-home-panels .panel > .panel-heading .panel-title {
    color: var(--noc-text) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1.4;
}
.client-home-panels .panel > .panel-heading .panel-title .btn {
    background: transparent !important;
    border: 1px solid var(--noc-border-bright) !important;
    color: var(--noc-text-dim) !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em;
}
.client-home-panels .panel > .panel-heading .panel-title .btn:hover {
    background: rgba(140,186,83,0.08) !important;
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor-bright) !important;
}
.client-home-panels .panel > .panel-body {
    background: transparent !important;
    color: var(--noc-text-dim) !important;
}
.client-home-panels .panel > .panel-body p { padding: 12px 18px !important; }
.client-home-panels .panel small { color: var(--noc-text-faint) !important; }
.client-home-panels .panel > .list-group {
    border-top: 1px solid var(--noc-border) !important;
    border-bottom: 1px solid var(--noc-border) !important;
    background: transparent !important;
}
.client-home-panels .panel > .list-group .list-group-item {
    padding: 10px 18px !important;
    background: transparent !important;
    border-color: var(--noc-border) !important;
    color: var(--noc-text-dim) !important;
}
.client-home-panels .panel > .list-group .list-group-item:hover {
    background: rgba(140,186,83,0.05) !important;
    color: var(--noc-phosphor-bright) !important;
}
.client-home-panels .panel > .panel-footer {
    background: var(--noc-bg-deep) !important;
    border-top: 1px solid var(--noc-border) !important;
    color: var(--noc-text-faint) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

/* panel-accent-* color stripes — map all to NOC accents.
   The default Bootstrap colors clash; we use phosphor / amber / cyan / red */
.panel-accent-blue,
.panel-accent-turquoise,
.panel-accent-teal           { border-top: 3px solid var(--noc-cyan) !important; }
.panel-accent-green,
.panel-accent-lime,
.panel-accent-emerald        { border-top: 3px solid var(--noc-phosphor) !important; }
.panel-accent-gold,
.panel-accent-orange,
.panel-accent-sun-flower     { border-top: 3px solid var(--noc-amber) !important; }
.panel-accent-red,
.panel-accent-pomegranate    { border-top: 3px solid var(--noc-red) !important; }
.panel-accent-pink,
.panel-accent-magenta,
.panel-accent-purple,
.panel-accent-amethyst       { border-top: 3px solid var(--noc-phosphor) !important; }
.panel-accent-silver,
.panel-accent-asbestos,
.panel-accent-wet-asphalt,
.panel-accent-midnight-blue  { border-top: 3px solid var(--noc-border-bright) !important; }

/* bg-color-* utility classes — these get applied to btn elements inside
   panel headings; remap to NOC accents */
.bg-color-blue,    .bg-color-turquoise, .bg-color-teal           { background: var(--noc-cyan) !important; color: var(--noc-bg) !important; }
.bg-color-green,   .bg-color-lime,      .bg-color-emerald        { background: var(--noc-phosphor) !important; color: var(--noc-bg) !important; }
.bg-color-gold,    .bg-color-orange,    .bg-color-sun-flower     { background: var(--noc-amber) !important; color: var(--noc-bg) !important; }
.bg-color-red,     .bg-color-pomegranate                          { background: var(--noc-red) !important; color: var(--noc-bg) !important; }
.bg-color-pink,    .bg-color-magenta,
.bg-color-purple,  .bg-color-amethyst                             { background: var(--noc-phosphor) !important; color: var(--noc-bg) !important; }
.bg-color-silver,  .bg-color-asbestos,
.bg-color-wet-asphalt, .bg-color-midnight-blue                    { background: var(--noc-border-bright) !important; color: var(--noc-text) !important; }

/* button shapes inherit theme button styling */
.client-home-panels .btn.bg-color-blue,
.client-home-panels .btn.bg-color-green,
.client-home-panels .btn.bg-color-gold,
.client-home-panels .btn.bg-color-red {
    border: 0 !important;
    color: var(--noc-bg) !important;
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ---- Active Products/Services list-item rendered via active-products-services-item.tpl ---- */
.div-service-item {
    padding: 10px 4px !important;
    color: var(--noc-text) !important;
}
.div-service-status { padding-right: 6px; }
.div-service-status .label {
    background: var(--noc-bg-deep) !important;
    color: var(--noc-text) !important;
    border: 1px solid var(--noc-border) !important;
    font-family: var(--font-mono);
    font-size: 9.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 4px 6px !important;
    border-radius: 0 !important;
}
.div-service-status .label-success { background: var(--noc-phosphor) !important; color: var(--noc-bg) !important; border-color: var(--noc-phosphor) !important; }
.div-service-status .label-info,
.div-service-status .label-primary { background: var(--noc-cyan) !important; color: var(--noc-bg) !important; border-color: var(--noc-cyan) !important; }
.div-service-status .label-warning { background: var(--noc-amber) !important; color: var(--noc-bg) !important; border-color: var(--noc-amber) !important; }
.div-service-status .label-danger  { background: var(--noc-red) !important; color: var(--noc-bg) !important; border-color: var(--noc-red) !important; }
.div-service-status .label-default { background: var(--noc-border-bright) !important; color: var(--noc-text) !important; border-color: var(--noc-border-bright) !important; }

.div-service-name {
    color: var(--noc-text) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}
.div-service-name > span {
    color: var(--noc-text) !important;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.45;
}
.div-service-name > span.font-weight-bold,
.div-service-name > span:first-child {
    color: var(--noc-text) !important;
    font-weight: 600 !important;
    font-size: 13px;
}
.div-service-name > .text-domain,
.text-domain {
    color: var(--noc-phosphor-bright) !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
}

.div-service-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.div-service-buttons .btn-group-primary,
.div-service-buttons .btn-group-secondary {
    margin-left: 0;
}
.div-service-buttons .btn-sm {
    padding: 0 !important;
    font-size: 0 !important;     /* hide visible label text */
    height: 32px !important;
    width: 32px !important;
    min-height: 0;
    min-width: 32px;
    line-height: 32px !important;
    text-align: center;
    border-radius: 0 !important;
    border: 1px solid var(--noc-border-bright) !important;
    background: transparent !important;
    color: var(--noc-text-dim) !important;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.div-service-buttons .btn-sm:hover,
.div-service-buttons .btn-sm:focus {
    border-color: var(--noc-phosphor) !important;
    color: var(--noc-phosphor-bright) !important;
    background: rgba(140,186,83,0.08) !important;
}
.div-service-buttons .btn-sm.btn-primary {
    border-color: var(--noc-phosphor) !important;
    background: rgba(140,186,83,0.10) !important;
    color: var(--noc-phosphor) !important;
}
.div-service-buttons .btn-sm.btn-primary:hover {
    background: var(--noc-phosphor) !important;
    color: var(--noc-bg) !important;
}
/* always-on icon for the visible button surface */
.div-service-buttons .btn-sm::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, sans-serif;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 13px;
    line-height: 32px;
    display: inline-block;
    width: 32px;
    text-align: center;
    content: "\f013"; /* fa-cog default */
}
/* override default cog with action-specific icons by data-identifier */
.div-service-buttons .btn-custom-action[data-identifier*="View" i]::before,
.div-service-buttons .btn-custom-action[data-identifier*="Detail" i]::before { content: "\f06e"; } /* fa-eye */
.div-service-buttons .btn-custom-action[data-identifier*="Login" i]::before,
.div-service-buttons .btn-custom-action[data-identifier*="LoginLink" i]::before { content: "\f2f6"; } /* fa-sign-in-alt */
.div-service-buttons .btn-custom-action[data-identifier*="Manage" i]::before  { content: "\f085"; } /* fa-cogs */
.div-service-buttons .btn-custom-action[data-identifier*="Upgrade" i]::before { content: "\f102"; } /* fa-angle-double-up */
.div-service-buttons .btn-custom-action[data-identifier*="Renew" i]::before   { content: "\f021"; } /* fa-sync */
.div-service-buttons .btn-custom-action[data-identifier*="Cancel" i]::before  { content: "\f00d"; } /* fa-times */
.div-service-buttons .btn-custom-action[data-identifier*="Password" i]::before,
.div-service-buttons .btn-custom-action[data-identifier*="Reset" i]::before   { content: "\f084"; } /* fa-key */
.div-service-buttons .btn-custom-action[data-identifier*="Suspend" i]::before { content: "\f04c"; } /* fa-pause */
.div-service-buttons .btn-custom-action[data-identifier*="Reboot" i]::before,
.div-service-buttons .btn-custom-action[data-identifier*="Restart" i]::before { content: "\f021"; } /* fa-sync */
.div-service-buttons .btn-custom-action[data-identifier*="Email" i]::before   { content: "\f0e0"; } /* fa-envelope */
.div-service-buttons .btn-custom-action[data-identifier*="DNS" i]::before     { content: "\f0ac"; } /* fa-globe */

/* the dropdown-toggle caret button: keep the caret visible, no FA */
.div-service-buttons .btn-group-primary > .dropdown-toggle::before,
.div-service-buttons .btn-group-secondary .dropdown-toggle::before {
    content: "" !important;
}
.div-service-buttons .dropdown-toggle .caret {
    display: inline-block !important;
    border-top-color: currentColor;
}

/* the always-rendered View Details button (uses .btn-view-details class) */
.div-service-buttons .btn-view-details::before {
    content: "" !important;
}
.div-service-buttons .btn-view-details > i {
    font-size: 13px !important;
    line-height: 32px !important;
}

/* tooltip-on-hover via title attribute already exists via WHMCS markup */
.div-service-buttons .btn-sm[disabled],
.div-service-buttons .btn-sm.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* dropdown items inside service-buttons keep their full text labels (only the
   compact buttons in the toolbar are icon-only) */
.div-service-item .dropdown-menu li {
    font-size: 11px !important;  /* re-enable text in the dropdown */
    width: auto !important;
    height: auto !important;
}
.div-service-item .dropdown-menu li::before { content: none !important; }
.div-service-item .dropdown-menu {
    background: var(--noc-surface-solid) !important;
    border: 1px solid var(--noc-border-bright) !important;
}
.div-service-item .dropdown-menu li {
    color: var(--noc-text-dim) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 8px 16px !important;
}
.div-service-item .dropdown-menu > li:hover {
    color: var(--noc-phosphor-bright) !important;
    background: rgba(140,186,83,0.08) !important;
}
.div-service-item .dropdown-menu > li:active {
    color: var(--noc-bg) !important;
    background: var(--noc-phosphor) !important;
}
.div-service-item .dropdown-menu > li.disabled {
    color: var(--noc-text-faint) !important;
    cursor: not-allowed;
}

/* ---- pageheader (used inside main-content for page titles) ---- */
.pageheader {
    border-bottom: 1px dashed var(--noc-border-bright) !important;
    margin: 0 0 26px !important;
    padding-bottom: 14px !important;
}
.pageheader h1, .pageheader h2 {
    color: var(--noc-text) !important;
    border: 0 !important;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1;
}

/* =====================================================================
   KNOWLEDGEBASE — restyle the categories grid, article list,
   search input and tag cloud to the NOC look.
   ===================================================================== */

/* Search bar at the top of /knowledgebase */
.kb-search {
    margin: 4px 0 28px;
}
.kb-search .form-control {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border-bright);
    border-radius: 0;
    color: var(--noc-text);
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 14px 16px;
    height: auto;
}
.kb-search .form-control:focus {
    border-color: var(--noc-phosphor);
    box-shadow: 0 0 0 4px rgba(140,186,83,0.10);
}
.kb-search .form-control::placeholder { color: var(--noc-text-faint); }
.kb-search .input-group-btn .btn {
    border-radius: 0;
    padding: 14px 22px;
    height: auto;
}

/* "Categories" grid — each col-sm-4 inside .kbcategories becomes a tile */
.row.kbcategories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 4px 0 36px;
}
.row.kbcategories > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.row.kbcategories > [class*="col-"] > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px;
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    color: var(--noc-text) !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.05;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    text-decoration: none;
}
.row.kbcategories > [class*="col-"] > a:hover {
    border-color: var(--noc-phosphor);
    background: rgba(140,186,83,0.04);
    color: var(--noc-phosphor-bright) !important;
    transform: translateY(-2px);
}
.row.kbcategories > [class*="col-"] > a > i {
    font-size: 22px;
    color: var(--noc-phosphor);
    flex: 0 0 auto;
}
.row.kbcategories > [class*="col-"] > p {
    display: none; /* the empty <p> WHMCS injects between cards */
}

/* Article list — each <a><span class=glyphicon> .. </a><p> is a row */
.kbarticles {
    border-top: 1px solid var(--noc-border);
}
.kbarticles > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 4px 8px;
    color: var(--noc-text) !important;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px dashed var(--noc-border);
    transition: color 140ms ease, padding-left 140ms ease;
    text-decoration: none;
}
.kbarticles > a:hover {
    color: var(--noc-phosphor-bright) !important;
    padding-left: 12px;
}
.kbarticles > a:hover::before {
    color: var(--noc-phosphor);
}
.kbarticles > a .glyphicon,
.kbarticles > a .fas,
.kbarticles > a .far {
    color: var(--noc-text-faint);
    font-size: 13px;
}
.kbarticles > a:hover .glyphicon,
.kbarticles > a:hover .fas,
.kbarticles > a:hover .far {
    color: var(--noc-phosphor);
}
.kbarticles > p {
    color: var(--noc-text-dim);
    font-size: 12.5px;
    line-height: 1.65;
    padding: 0 4px 18px;
    border-bottom: 1px solid var(--noc-border);
    margin: 0 0 0;
}
.kbarticles > p:last-of-type { border-bottom: 0; }

/* When the user is browsing INSIDE a category, the article list also lives in
   a panel-body. Same look applies. */
.kbarticles a + a + p { margin-top: -8px; } /* tighten when adjacent */

/* Tag cloud panel — the inline font-size:12px styles get overridden by us */
.panel-sidebar .panel-body > a[href*="knowledgebase/tag/"] {
    display: inline-block;
    margin: 3px 4px 3px 0;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--noc-text-dim) !important;
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
    text-decoration: none;
}
.panel-sidebar .panel-body > a[href*="knowledgebase/tag/"]:hover {
    color: var(--noc-phosphor-bright) !important;
    border-color: var(--noc-phosphor);
    background: rgba(140,186,83,0.06);
}

/* Article view — the actual article body */
.kb-article-content,
.kb-article {
    background: var(--noc-surface-solid);
    border: 1px solid var(--noc-border);
    padding: 26px 30px;
    color: var(--noc-text);
    font-size: 14px;
    line-height: 1.75;
}
.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article h1,
.kb-article h2,
.kb-article h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--noc-text);
    margin: 24px 0 12px;
    line-height: 1.05;
}
.kb-article-content pre,
.kb-article pre,
.kb-article-content code,
.kb-article code {
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    color: var(--noc-phosphor-bright);
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 2px 6px;
    border-radius: 0;
}
.kb-article-content pre,
.kb-article pre {
    padding: 14px 16px;
    overflow-x: auto;
    line-height: 1.55;
}
.kb-article-content blockquote,
.kb-article blockquote {
    border-left: 3px solid var(--noc-phosphor);
    padding: 4px 16px;
    color: var(--noc-text-dim);
    margin: 16px 0;
}

/* "X out of Y people found this helpful" rating block */
.kbrating, .kb-rating {
    margin-top: 26px;
    padding: 18px 22px;
    background: var(--noc-bg-deep);
    border: 1px solid var(--noc-border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--noc-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.kbrating .rating-bar,
.kb-rating .rating-bar {
    color: var(--noc-phosphor);
}