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

    Kobault client portal theme — cobalt brand, v3
    Site-native: kobault.com nav/footer, paper hero,
    hard-shadowed boxes, alternating cobalt/ink/paper
    panel header bands. Based on Nexus (WHMCS 9).
    Bricolage Grotesque display, IBM Plex Mono labels.

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

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:ital,opsz,wght@0,12..96,400;0,12..96,500;0,12..96,600;0,12..96,700;0,12..96,800;1,12..96,500&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
    /* Kobault brand tokens (mirrors src/styles/tokens.css on the site) */
    --kb-cobalt: #1B3BBB;
    --kb-cobalt-deep: #0F2E8C;
    --kb-paper: #F2EFE6;
    --kb-paper-dark: #E4E0D2;
    --kb-ink: #14120E;
    --kb-peri: #5E79E8;
    --kb-peri-bright: #AEBDF6;
    --kb-rule: 2px;
    --kb-rule-soft: 1.5px solid rgba(20, 18, 14, 0.18);
    --kb-shadow: 6px 6px 0 var(--kb-ink);
    --kb-shadow-sm: 4px 4px 0 var(--kb-ink);
    --kb-pad: clamp(20px, 3vw, 40px);
    --kb-pad-y: clamp(40px, 5vw, 72px);
    --kb-sans: 'Bricolage Grotesque', -apple-system, 'Segoe UI', Arial, sans-serif;
    --kb-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

    --white: #fff;

    /* Neutrals shifted warm to sit on paper */
    --neutral-50: #faf8f2;
    --neutral-100: #f2efe6;
    --neutral-200: #e4e0d2;
    --neutral-300: #cfcaba;
    --neutral-400: #a29d8f;
    --neutral-500: #767162;
    --neutral-600: #57534a;
    --neutral-700: #3d3a33;
    --neutral-800: #262420;
    --neutral-900: #14120E;
    --neutral-950: #0b0a08;

    /* Primary palette = cobalt */
    --primary-50: #eef1fd;
    --primary-100: #dfe5fb;
    --primary-200: #c3cdf7;
    --primary-300: #AEBDF6;
    --primary-400: #7c92e8;
    --primary-500: #4a63d4;
    --primary-600: #1B3BBB;
    --primary-700: #142C8F;
    --primary-800: #0F2168;
    --primary-900: #0a1745;
    --primary-950: #060e2b;

    --primary: var(--kb-cobalt);
    --primary-lifted: var(--kb-cobalt-deep);
    --primary-accented: #0F2168;

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #1c7c3f;
    --success-lifted: #166332;
    --success-accented: #114d27;

    --info: var(--kb-cobalt);
    --info-lifted: var(--kb-cobalt-deep);
    --info-accented: #0F2168;

    --notice: #6b2fd8;
    --notice-lifted: #5a24bb;
    --notice-accented: #491d97;

    --warning: #c05600;
    --warning-lifted: #9e4700;
    --warning-accented: #7d3800;

    --error: #b3261e;
    --error-lifted: #941f19;
    --error-accented: #771914;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--kb-ink);

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--kb-ink);

    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--kb-ink);

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

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Sharp corners everywhere */
    --rounding-sm: 0;
    --rounding-md: 0;
    --rounding-lg: 0;

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

/* ---------------------------------------------------- base */

body {
    font-family: var(--kb-sans);
    background: var(--kb-paper);
    color: var(--kb-ink);
    /* sticky footer: main content grows, footer pinned to the viewport bottom
       on short pages (fixed/hidden elements are unaffected by the flex flow) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
section#main-body { flex: 1 0 auto; }
.footer.kb-footer { margin-top: auto; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--kb-sans);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
}

a { color: var(--kb-cobalt); }
a:hover { color: var(--kb-cobalt-deep); }

.kb-dot { color: var(--kb-cobalt); }

/* ---------------------------------------------------- nav (cobalt, ruled cells) */

.kb-nav {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--kb-cobalt);
    border-bottom: var(--kb-rule) solid var(--kb-paper);
}

/* floating return-to-admin pill — nexus styles this as a rotated right-edge
   tab (rotate(90deg), top 425px); reset all of that and pin it bottom-right */
.btn-return-to-admin.kb-return-admin {
    position: fixed !important;
    top: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    transform: none !important;
    width: auto;
    height: auto;
    z-index: 500;
    padding: 10px 16px !important;
    background: var(--kb-ink) !important;
    border: 2px solid var(--kb-paper) !important;
    border-radius: 0 !important;
    color: var(--yellow-300) !important;
    font-size: 11px !important;
    box-shadow: var(--kb-shadow-sm);
}
.btn-return-to-admin.kb-return-admin:hover {
    background: var(--kb-cobalt) !important;
    color: var(--white) !important;
}
.kb-nav a { text-decoration: none; }

.kb-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-right: var(--kb-rule) solid var(--kb-paper);
    color: var(--kb-paper) !important;
}
/* matches the site: cobalt tile, paper border, paper Kb */
.kb-nav-kb {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--kb-paper);
    background: transparent;
    color: var(--kb-paper);
    font-weight: 800;
    font-size: 15px;
    font-family: var(--kb-sans);
}
.kb-nav-wordmark {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.02em;
}
.kb-nav-wordmark em {
    font-style: italic;
    font-weight: 500;
}

.kb-nav-links {
    display: flex;
    align-items: stretch;
    font-family: var(--kb-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
}
.kb-navlink {
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-left: var(--kb-rule) solid var(--kb-paper);
    color: var(--kb-paper) !important;
}
.kb-navlink:hover { background: var(--kb-cobalt-deep); }
.kb-navlink.is-current { background: rgba(255, 255, 255, 0.16); }
.kb-nav-cta {
    background: var(--kb-paper);
    color: var(--kb-cobalt) !important;
    font-weight: 500;
    padding: 0 26px;
}
.kb-nav-cta:hover {
    background: var(--kb-ink);
    color: var(--kb-paper) !important;
}

.kb-burger {
    display: none;
    background: none;
    border: none;
    border-left: var(--kb-rule) solid var(--kb-paper);
    padding: 0 22px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.kb-burger-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--kb-paper);
    transition: transform 0.2s ease;
}

@media (max-width: 991px) {
    .kb-burger { display: flex; }
    .kb-nav-links {
        display: none;
        position: fixed;
        inset: 64px 0 0 0;
        z-index: 60;
        background: var(--kb-cobalt);
        flex-direction: column;
        align-items: stretch;
        font-size: 15px;
        overflow-y: auto;
    }
    .kb-nav-links.open { display: flex; }
    .kb-navlink {
        border-left: none;
        border-bottom: var(--kb-rule) solid var(--kb-paper);
        padding: 22px var(--kb-pad);
    }
    .kb-nav-cta { padding: 22px var(--kb-pad); }
    .kb-nav.menu-open .kb-burger-bar:first-child { transform: translateY(4.5px) rotate(45deg); }
    .kb-nav.menu-open .kb-burger-bar:last-child { transform: translateY(-4.5px) rotate(-45deg); }
}

/* ---------------------------------------------------- hero (paper) */

.kb-hero { background: var(--kb-paper); }
.kb-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: clamp(26px, 3.6vw, 48px) calc(var(--kb-pad) + 15px) clamp(18px, 2.6vw, 34px);
}
.kb-hero-label {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 10px;
}
.kb-hero-label a { color: inherit; }
.kb-hero-label a:hover {
    color: var(--kb-cobalt);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.kb-hero-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--kb-ink);
    margin: 0;
}
.kb-hero-tools { padding-bottom: 8px; }
.kb-hero-search {
    background: transparent;
    border: 2px solid var(--neutral-300);
    color: var(--kb-ink);
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 16px;
    min-width: 300px;
}
.kb-hero-search::placeholder { color: var(--neutral-400); }
.kb-hero-search:focus {
    outline: none;
    border-color: var(--kb-ink);
    background: var(--white);
}

/* ---------------------------------------------------- layout */

section#main-body { padding: 0 var(--kb-pad) var(--kb-pad-y); }
section#main-body > .container {
    max-width: 100%;
    padding: 0 15px;
}

.sidebar { margin-bottom: 0; }

/* ---------------------------------------------------- boxes (shared) */

.sidebar .card,
.primary-content .card {
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    border-radius: 0;
    box-shadow: var(--kb-shadow);
    margin-bottom: 28px;
}

/* ---------------------------------------------------- sidebar boxes */

.sidebar .card .card-header {
    background: transparent;
    border: 0;
    padding: 20px 24px 2px;
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kb-cobalt);
}
.sidebar .card .card-header .card-title { font: inherit; color: inherit; margin: 0; }
.sidebar .card .card-header .card-title::after { content: "\00a0—"; }
.sidebar .card .card-header .card-minimise { color: var(--neutral-400); margin-top: 2px; }
.sidebar .card .card-body { padding: 12px 24px 22px; }
.sidebar .card .list-group { padding: 8px 24px 18px; }
.sidebar .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    border-bottom: var(--kb-rule-soft);
    border-radius: 0 !important;
    padding: 13px 0;
    font-family: var(--kb-sans);
    font-weight: 500;
    color: var(--kb-ink);
}
.sidebar .list-group-item:last-child { border-bottom: 0; }
/* no icon column — text aligns flush with the panel heading */
.sidebar .list-group-item .sidebar-menu-item-icon-wrapper,
.sidebar .list-group-item > i.fa-fw,
.sidebar .list-group-item > i.fas,
.sidebar .list-group-item > i.far,
.sidebar .list-group-item > i.fal { display: none; }
.sidebar a.list-group-item::after {
    content: "→";
    font-family: var(--kb-mono);
    color: var(--kb-ink);
}
.sidebar a.list-group-item:hover { background: transparent; color: var(--kb-cobalt); }
.sidebar a.list-group-item:hover::after { color: var(--kb-cobalt); }
.sidebar .list-group-item.active { background: transparent; color: var(--kb-cobalt); font-weight: 700; }

/* status-filter lists (VIEW box on services/invoices/tickets): full-bleed rows,
   count right, active row filled cobalt — no radio icons, no arrows */
.sidebar .view-filter-btns .list-group-item,
.sidebar .list-group.view-filter-btns a.list-group-item {
    margin: 0 -24px;
    padding: 12px 24px;
}
.sidebar .view-filter-btns a.list-group-item::after { content: none; }
.sidebar .view-filter-btns .list-group-item i.far { display: none; }
.sidebar .view-filter-btns .list-group-item .badge {
    border: 0;
    font-family: var(--kb-mono);
    font-size: 12px;
    color: inherit;
    background: transparent;
    padding: 0;
}
.sidebar .view-filter-btns .list-group-item.active {
    background: var(--kb-cobalt);
    color: var(--white);
    border-color: transparent;
    font-weight: 700;
}
.sidebar .view-filter-btns .list-group-item.active:hover { color: var(--white); }
.sidebar .card-footer { background: transparent; border: 0; padding: 0 24px 22px; }
.sidebar .badge { float: none; }

/* ---------------------------------------------------- stats boxes (dashboard) */

.kb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin: 4px 0 clamp(28px, 3.4vw, 44px);
}
.kb-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow-sm);
    padding: 22px 24px;
    color: var(--kb-ink);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kb-stat:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--kb-cobalt);
    color: var(--kb-cobalt);
    text-decoration: none;
}
.kb-stat-num {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: clamp(30px, 2.6vw, 42px);
    line-height: 1;
}
.kb-stat-label {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------------------------------------------------- dashboard panels */

.kb-panel {
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow);
    margin-bottom: clamp(24px, 3vw, 36px);
}
.kb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
}
.kb-panel-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.01em;
    margin: 0;
}
.kb-panel--cobalt .kb-panel-head { background: var(--kb-cobalt); border-bottom: var(--kb-rule) solid var(--kb-ink); }
.kb-panel--cobalt .kb-panel-title { color: var(--white); }
.kb-panel--cobalt .kb-panel-title .kb-dot { color: var(--kb-paper); }
.kb-panel--ink .kb-panel-head { background: var(--kb-ink); border-bottom: var(--kb-rule) solid var(--kb-ink); }
.kb-panel--ink .kb-panel-title { color: var(--kb-paper); }
.kb-panel--ink .kb-panel-title .kb-dot { color: var(--kb-peri); }
.kb-panel--paper .kb-panel-head { border-bottom: var(--kb-rule) solid var(--kb-ink); }

/* head action buttons */
.kb-panel-head .btn {
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
}
.kb-panel--cobalt .kb-panel-head .btn,
.kb-panel--ink .kb-panel-head .btn {
    background: transparent !important;
    border: 2px solid var(--white) !important;
    color: var(--white) !important;
}
.kb-panel--cobalt .kb-panel-head .btn:hover,
.kb-panel--ink .kb-panel-head .btn:hover {
    background: var(--white) !important;
    color: var(--kb-ink) !important;
}

/* portal is billing/support only — no "view more", no cPanel/webmail single sign-on */
.kb-panel-foot { display: none !important; }
/* dashboard service rows carry no actions (cPanel login / view details) */
.kb-panel .list-group-item .btn,
.kb-panel .list-group-item .btn-group,
.kb-panel-body table .btn,
.kb-panel-body .btn-group { display: none !important; }
/* stray RSS links (announcements etc.) */
a[href*="rss.php"] { display: none !important; }
a[href*="dosinglesignon"],
a[href*="ssologin"],
a[href*="app=webmail"],
button[name="dosinglesignon"],
input[name="dosinglesignon"],
.btn-service-sso,
#btnLoginToPanel,
#btnLoginToWebmail,
.btn-group:has(a[href*="dosinglesignon"]) .dropdown-toggle,
.btn-group:has(.btn-service-sso) .dropdown-toggle { display: none !important; }

.kb-panel-badge {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    vertical-align: middle;
    border: 1.5px solid currentColor;
    padding: 2px 8px;
    margin-left: 10px;
}

.kb-panel-body { padding: 18px 24px; }
.kb-panel-body:empty { display: none; }
.kb-panel-body em, .kb-panel-body .text-muted { color: var(--neutral-500); font-style: italic; }
.kb-panel-foot { padding: 0 24px 18px; }
.kb-panel-foot:empty { display: none; }

.kb-panel .list-group,
.kb-panel-list { padding: 6px 24px 14px; }
.kb-panel .list-group-item {
    background: transparent;
    border: 0;
    border-bottom: var(--kb-rule-soft);
    border-radius: 0 !important;
    padding: 15px 0;
    color: var(--kb-ink);
}
.kb-panel .list-group-item:last-child { border-bottom: 0; }
.kb-panel a.list-group-item:hover { background: transparent; color: var(--kb-cobalt); }
.kb-panel .table { margin-bottom: 0; }

/* ---------------------------------------------------- generic content pages */

.primary-content .card .card-header {
    background: var(--kb-cobalt);
    border-bottom: var(--kb-rule) solid var(--kb-ink);
    padding: 14px 24px;
}
.primary-content .card .card-header,
.primary-content .card .card-header .card-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 18px;
    color: var(--white);
    margin: 0;
}
.primary-content .card .card-body { padding: 22px 24px; }
.primary-content .card .card-footer {
    background: transparent;
    border-top: var(--kb-rule-soft);
    padding: 14px 24px;
}

/* ---------------------------------------------------- buttons */

.btn {
    border-radius: 0;
    font-family: var(--kb-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: none;
}
.btn-primary {
    background: var(--kb-cobalt) !important;
    border: 2px solid var(--kb-cobalt) !important;
    color: var(--white) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--kb-cobalt-deep) !important;
    border-color: var(--kb-cobalt-deep) !important;
}
.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background: transparent;
    border: 2px solid var(--kb-ink);
    color: var(--kb-ink);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--kb-ink);
    border-color: var(--kb-ink);
    color: var(--kb-paper);
}
.sidebar .card-body .btn,
.sidebar .card-footer .btn {
    background: var(--kb-ink);
    border: 2px solid var(--kb-ink);
    color: var(--kb-paper);
}
.sidebar .card-body .btn:hover,
.sidebar .card-footer .btn:hover {
    background: var(--kb-cobalt);
    border-color: var(--kb-cobalt);
    color: var(--white);
}

/* ---------------------------------------------------- forms */

.form-control,
.input-group-text,
.custom-select,
select.form-control {
    border: 2px solid var(--kb-ink);
    border-radius: 0;
    font-family: var(--kb-sans);
    background: var(--white);
    color: var(--kb-ink);
}
.form-control:focus {
    border-color: var(--kb-cobalt);
    box-shadow: none;
    outline: 2px solid var(--kb-peri-bright);
}
label, .form-control-label {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kb-ink);
}

/* ---------------------------------------------------- tables, badges, alerts */

.table thead th {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-top: 0;
    border-bottom: var(--kb-rule) solid var(--kb-ink);
    color: var(--kb-ink);
    background: transparent;
}
.table td { border-top: var(--kb-rule-soft); }
.table-hover tbody tr:hover { background: var(--white); }

.badge, .label, .status {
    border-radius: 0;
    font-family: var(--kb-mono);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.badge { border: 1.5px solid currentColor; background: transparent; }

.alert { border-radius: 0; border-width: 2px; font-family: var(--kb-sans); }

/* ---------------------------------------------------- list pages (DataTables: invoices, tickets, services) */

/* banded list box (services / tickets) */
.kb-listbox {
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow);
    margin-bottom: 28px;
}
.kb-listbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--kb-cobalt);
    border-bottom: var(--kb-rule) solid var(--kb-ink);
    padding: 16px 24px;
}
.kb-listbox--ink .kb-listbox-head { background: var(--kb-ink); }
.kb-listbox-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--white);
    margin: 0;
}
.kb-listbox-title .kb-dot { color: var(--kb-paper); }
.kb-listbox--ink .kb-listbox-title .kb-dot { color: var(--kb-peri); }
.kb-listbox-meta {
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.kb-listbox .table-container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
/* flush table: rows span the box, edge cells carry the gutter */
.kb-listbox table.table-list thead th:first-child,
.kb-listbox table.table-list tbody td:first-child { padding-left: 24px; }
.kb-listbox table.table-list thead th:last-child,
.kb-listbox table.table-list tbody td:last-child { padding-right: 24px; }
.kb-listbox table.table-list tbody tr:last-child td { border-bottom: 0; }
/* no counts, no pagination, no page-length controls inside list boxes */
.kb-listbox .dataTables_length,
.kb-listbox .dataTables_info,
.kb-listbox .dataTables_paginate { display: none !important; }

/* everything in tables reads left-aligned */
.primary-content .table th,
.primary-content .table td { text-align: left !important; }

/* all data cells in list boxes read in mono — titles (product names, ticket
   and email subjects) stay in the display face */
.kb-listbox table.table-list tbody td {
    font-family: var(--kb-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
.kb-listbox table.table-list tbody td strong,
.kb-listbox .kb-svc-name strong,
.kb-listbox .kb-ticket-subject {
    font-family: var(--kb-sans);
    font-size: 15px;
    letter-spacing: -0.01em;
}

/* paged boxes (email history) keep the full DataTables chrome, styled */
.kb-listbox--paged .dataTables_info {
    display: block !important;
    padding: 14px 24px 2px;
}
.kb-listbox--paged .dataTables_length {
    display: block !important;
    float: left;
    padding: 16px 24px 20px;
}
.kb-listbox--paged .dataTables_paginate {
    display: block !important;
    float: right;
    padding: 16px 24px 20px;
}
/* and no gap above/below the table — the box bands are the frame */
.kb-listbox .dataTables_wrapper,
.kb-listbox .listtable { padding: 0; margin: 0; }
.kb-listbox table.table-list { margin: 0 !important; }
.kb-listbox table.table-list thead th { padding-top: 14px; padding-bottom: 12px; }

/* service cell: element tile + name + domain */
.kb-svc { display: flex; align-items: center; gap: 16px; }
.kb-svc-tile {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--white);
    border: 2px solid var(--kb-ink);
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 17px;
    color: var(--kb-cobalt);
}
.kb-svc-name strong { font-family: var(--kb-sans); font-size: 15px; }
.kb-svc-domain {
    display: block;
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--neutral-500);
}
.kb-price { font-weight: 700; }
.kb-price-cycle {
    display: block;
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.kb-mono-cell {
    font-family: var(--kb-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.kb-ticket-num { font-family: var(--kb-mono); font-size: 12px; color: var(--neutral-500); }
.kb-ticket-sep { color: var(--neutral-400); padding: 0 2px; }
.kb-ticket-subject { font-weight: 700; color: var(--kb-ink); }
.kb-ticket-subject.unread { color: var(--kb-cobalt); }

.table-container {
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow);
    padding: 18px 24px 22px;
    margin-bottom: 28px;
}
.table-container table.table-list { margin: 0; }
.table-container table.table-list thead th {
    background: transparent;
    border-bottom: var(--kb-rule) solid var(--kb-ink);
    padding: 12px 14px;
}
.table-container table.table-list tbody td {
    padding: 16px 14px;
    border-top: var(--kb-rule-soft);
    vertical-align: middle;
}
.table-container table.table-list tbody tr:hover { background: var(--white); }

/* DataTables chrome — the hero search drives filtering, so the built-in box goes */
.dataTables_wrapper .dataTables_filter { display: none; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-500);
    padding-top: 14px;
}
.dataTables_wrapper .dataTables_length select {
    border: 2px solid var(--kb-ink);
    background: var(--white);
    font-family: var(--kb-mono);
    padding: 4px 8px;
    margin: 0 6px;
}
.dataTables_wrapper .dataTables_paginate {
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-top: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 2px solid var(--kb-ink) !important;
    border-radius: 0 !important;
    background: var(--white) !important;
    color: var(--kb-ink) !important;
    margin-left: 6px;
    padding: 5px 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--kb-paper-dark) !important;
    color: var(--kb-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--kb-cobalt) !important;
    border-color: var(--kb-cobalt) !important;
    color: var(--white) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* status chips — outlined mono; nexus paints these white-on-colour, so the
   colour overrides need to win */
.table-list .label.status,
.label.status {
    display: inline-block;
    background: transparent !important;
    border: 1.5px solid currentColor;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--kb-ink);
}
.label.status-active, .label.status-paid, .label.status-open, .label.status-accepted { color: var(--success) !important; }
.label.status-answered, .label.status-delivered, .label.status-inprogress, .label.status-in-progress { color: var(--kb-cobalt) !important; }
.label.status-pending, .label.status-unpaid, .label.status-customerreply, .label.status-customer-reply,
.label.status-onhold, .label.status-on-hold, .label.status-payment-pending { color: var(--warning) !important; }
.label.status-suspended, .label.status-overdue, .label.status-collections { color: var(--error) !important; }
.label.status-cancelled, .label.status-terminated, .label.status-fraud, .label.status-closed,
.label.status-refunded, .label.status-draft, .label.status-lost, .label.status-dead { color: var(--neutral-500) !important; }

.kb-invoice-num { font-family: var(--kb-mono); font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------- login page ("Enter the lab.") */

/* full-bleed cobalt blueprint section — negative margins undo the
   main-body/container/col gutters (kb-pad + 15px each side) */
.kb-login-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 6vw, 120px);
    flex-wrap: wrap;
    margin: 0 calc(-1 * (var(--kb-pad) + 15px)) calc(-1 * var(--kb-pad-y));
    padding: clamp(48px, 9vh, 110px) var(--kb-pad) clamp(56px, 10vh, 130px);
    min-height: calc(100vh - 72px);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 56px),
        var(--kb-cobalt);
    color: var(--white);
}
.kb-login-left { max-width: 520px; }
.kb-login-label {
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--kb-peri-bright);
    margin-bottom: 18px;
}
.kb-login-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: clamp(52px, 6.4vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 22px;
}
.kb-login-title em { font-style: italic; font-weight: 500; }
.kb-login-sub {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 40px;
}
.kb-login-sub a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.kb-login-tile {
    position: relative;
    width: 170px;
    height: 195px;
    background: var(--kb-paper);
    border: 2px solid var(--kb-ink);
    box-shadow: 10px 10px 0 var(--kb-ink);
    transform: rotate(-2deg);
    animation: kbFloat 4s ease-in-out infinite;
}
.kb-login-tile .num,
.kb-login-tile .mass {
    position: absolute;
    top: 10px;
    font-family: var(--kb-mono);
    font-size: 11px;
    color: var(--kb-cobalt);
}
.kb-login-tile .num { left: 14px; }
.kb-login-tile .mass { right: 14px; }
.kb-login-tile .sym {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    color: var(--kb-cobalt);
}
.kb-login-tile .caption {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--kb-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--kb-cobalt);
}
@keyframes kbFloat {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(-1.2deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
    .kb-login-tile { animation: none; }
}

.kb-login-card {
    flex: 0 1 480px;
    background: var(--neutral-50);
    border: 2px solid var(--kb-ink);
    box-shadow: 10px 10px 0 var(--kb-ink);
    padding: clamp(24px, 3vw, 40px);
}
.kb-login-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
}
.kb-login-card-title {
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 26px;
    margin: 0;
}
.kb-login-secure {
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--neutral-500);
}
.kb-login-card .form-control { font-family: var(--kb-mono); font-size: 13px; }
.kb-login-card .form-control::placeholder {
    font-family: var(--kb-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--neutral-400);
    text-transform: uppercase;
}
.kb-login-forgot {
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--kb-cobalt);
    margin-bottom: 8px;
}
.kb-login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    margin: 18px 0 22px;
    cursor: pointer;
}
.kb-login-remember .form-check-input { position: static; margin: 0; }
.kb-login-submit {
    padding: 14px;
    font-size: 13px;
    border: 2px solid var(--kb-ink) !important;
    box-shadow: 4px 4px 0 var(--kb-ink);
}
.kb-login-submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--kb-ink); }
.kb-login-new {
    text-align: center;
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--neutral-500);
    margin-top: 20px;
}
.kb-login-new a { color: var(--kb-cobalt); font-weight: 600; }

/* password reset & other logged-out cards keep the boxed look */
.login-form .card,
.mw-540 {
    border: 2px solid var(--kb-ink);
    border-radius: 0;
    box-shadow: 8px 8px 0 rgba(20, 18, 14, 0.85);
    background: var(--white);
}

/* ---------------------------------------------------- ticket view */

.kb-ticket-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #C05600;
    color: var(--white);
    border-bottom: var(--kb-rule) solid var(--kb-ink);
    padding: 10px calc(var(--kb-pad) + 15px);
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.kb-ticket-banner-chip {
    border: 1.5px solid var(--white);
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.15);
}

.kb-ticket-actions { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.kb-status-chip {
    display: inline-block;
    font-family: var(--kb-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid currentColor;
    padding: 9px 16px;
}
.kb-status-chip--closed { color: #C05600; }

.kb-ticket-meta .kb-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: var(--kb-rule-soft);
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kb-ticket-meta .kb-meta-row:last-child { border-bottom: 0; }
.kb-ticket-meta .kb-meta-row span:first-child { color: var(--neutral-500); }
.kb-ticket-meta .kb-meta-row span:last-child { text-align: right; }

.kb-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: var(--kb-rule-soft);
    font-family: var(--kb-mono);
    font-size: 12px;
    color: var(--kb-ink);
}
.kb-file-row:last-child { border-bottom: 0; }
.kb-file-row:hover { color: var(--kb-cobalt); text-decoration: none; }

/* ticket sidebar: Ticket Information panel — mono label left, value right */
.sidebar [menuitemname*="Information"] .list-group-item {
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px 12px;
    flex-wrap: nowrap;
    font-family: var(--kb-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}
/* WHMCS renders these rows as "<span class=title>Label</span><br>Value" —
   drop the <br> and the value text node becomes a flex item on the same line */
.sidebar .ticket-details-children br { display: none; }
.sidebar [menuitemname*="Information"] .list-group-item > * { min-width: 0; }
.sidebar [menuitemname*="Information"] .list-group-item > :not(:first-child) { text-align: right; }
.sidebar [menuitemname*="Information"] .list-group-item > :first-child {
    margin-right: auto;
    flex-shrink: 0;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.sidebar [menuitemname*="Information"] .badge,
.sidebar [menuitemname*="Information"] .label {
    background: transparent !important;
    border: 1.5px solid var(--kb-ink);
    color: var(--kb-ink) !important;
    font-size: 10px;
    padding: 2px 8px;
}
.sidebar [menuitemname*="Information"] .card-footer { display: flex; gap: 10px; }
.sidebar [menuitemname*="Information"] .card-footer .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* ticket sidebar: CC Recipients panel — tidy rows, kill ghost markup.
   :empty misses whitespace-only nodes, so also hide element-less divs and
   the wrapper of the templated no-email row (source of the gap above the input) */
.sidebar [menuitemname*="Recipients"] .card-body > div:empty,
.sidebar [menuitemname*="Recipients"] .card-body > div:not(:has(*)),
.sidebar [menuitemname*="Recipients"] .card-body > div:has(.delete-cc-email[data-email=""]),
.sidebar [menuitemname*="Recipients"] .card-body > br,
.sidebar [menuitemname*="Recipients"] .alert:empty { display: none; margin: 0; padding: 0; }
.sidebar [menuitemname*="Recipients"] .ticket-cc-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: var(--kb-rule-soft);
    font-family: var(--kb-mono);
    font-size: 12px;
    word-break: break-all;
}
.sidebar [menuitemname*="Recipients"] .delete-cc-email { color: var(--error); font-size: 15px; line-height: 1; }
/* a recipient row with no email is template scaffolding — hide it */
.sidebar [menuitemname*="Recipients"] .delete-cc-email[data-email=""],
.sidebar [menuitemname*="Recipients"] .ticket-cc-email:has(.delete-cc-email[data-email=""]) { display: none; }
.sidebar [menuitemname*="Recipients"] .input-group { margin-top: 10px; }
.sidebar [menuitemname*="Recipients"] .input-group .form-control {
    font-family: var(--kb-mono);
    font-size: 12px;
}
.sidebar [menuitemname*="Recipients"] .input-group .btn {
    background: var(--kb-ink);
    border: 2px solid var(--kb-ink);
    color: var(--kb-paper);
}
.sidebar [menuitemname*="Recipients"] .input-group .btn:hover { background: var(--kb-cobalt); border-color: var(--kb-cobalt); }

/* message boxes */
.kb-msg {
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow);
    margin-bottom: clamp(24px, 3vw, 36px);
}
.kb-msg-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--kb-ink);
    color: var(--kb-paper);
    border-bottom: var(--kb-rule) solid var(--kb-ink);
}
.kb-msg--operator .kb-msg-head { background: var(--kb-cobalt); color: var(--white); }
.kb-msg-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--white);
    border: 2px solid var(--kb-ink);
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 14px;
    color: var(--kb-cobalt);
    text-transform: uppercase;
}
.kb-msg-who { display: flex; flex-direction: column; }
.kb-msg-who strong { font-family: var(--kb-sans); font-size: 15px; line-height: 1.2; }
.kb-msg-date {
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}
.kb-msg-badge {
    margin-left: auto;
    font-family: var(--kb-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    padding: 3px 10px;
}
.kb-msg-body { padding: 22px 24px; background: var(--white); }
.kb-msg-body p:last-child { margin-bottom: 0; }
.kb-msg-ip {
    margin-top: 18px;
    padding-top: 12px;
    border-top: var(--kb-rule-soft);
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--neutral-500);
}
.kb-msg-attachments { padding: 14px 24px 18px; border-top: var(--kb-rule-soft); background: var(--white); }
.kb-msg-attachments-label {
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.kb-msg .attachment-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 0; }
.kb-msg .attachment-list li a > span,
.kb-msg .attachment-list li > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 118px;
    padding: 16px 8px 12px;
    background: var(--neutral-50);
    border: 2px solid var(--kb-ink);
    color: var(--kb-ink);
}
.kb-msg .attachment-list li a:hover > span { border-color: var(--kb-cobalt); color: var(--kb-cobalt); text-decoration: none; }
.kb-msg .attachment-list figure { margin: 0; font-size: 20px; }
.kb-msg .attachment-list .caption {
    font-family: var(--kb-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    word-break: break-all;
    text-align: center;
}

/* reply box */
.kb-reply-head { justify-content: space-between; background: var(--kb-cobalt); color: var(--white); }
.kb-reply-title { font-family: var(--kb-sans); font-weight: 800; font-size: 22px; margin: 0; color: var(--white); }
.kb-reply-title .kb-dot { color: var(--kb-paper); }
.kb-reply-note {
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0.9;
}
.kb-reply-body { padding: 22px 24px; }
.kb-reply-body textarea.form-control { font-family: var(--kb-mono); font-size: 13px; }
.kb-reply-filetypes {
    margin-top: 8px;
    font-family: var(--kb-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-400);
}
.kb-reply-actions { display: flex; gap: 12px; margin-bottom: 0; }
.kb-reply-actions .btn-primary { box-shadow: 4px 4px 0 var(--kb-ink); border-color: var(--kb-ink) !important; }
.custom-file-label { border: 2px dashed var(--neutral-300); border-radius: 0; font-family: var(--kb-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; background: var(--white); }
.custom-file-label::after { display: none; }

/* ---------------------------------------------------- footer (ink) */

.footer.kb-footer {
    background: var(--kb-ink);
    color: var(--kb-paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
    padding: 20px calc(var(--kb-pad) + 15px);
    font-family: var(--kb-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.kb-footer-co { display: flex; align-items: center; gap: 12px; }
.kb-footer-kb {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--kb-paper);
    font-family: var(--kb-sans);
    font-weight: 800;
    font-size: 12px;
}
.kb-footer-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.kb-footer-links a,
.kb-footer-nap a { color: var(--kb-paper); }
.kb-footer-links a:hover,
.kb-footer-nap a:hover { color: var(--kb-peri-bright); text-decoration: none; }
.kb-footer-locale {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: rgba(242, 239, 230, 0.65);
    cursor: pointer;
}
.kb-footer-locale:hover { color: var(--kb-peri-bright); }
.kb-footer-nap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    color: rgba(242, 239, 230, 0.55);
    text-align: center;
}
.kb-sep { opacity: 0.5; }

/* ---------------------------------------------------- logged-out homepage */

.kb-home-intro {
    font-size: 17px;
    color: var(--neutral-500);
    margin: -6px 0 26px;
}
.action-icon-btns a {
    display: block;
    background: var(--neutral-50);
    border: var(--kb-rule) solid var(--kb-ink);
    box-shadow: var(--kb-shadow-sm);
    font-family: var(--kb-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kb-ink);
    text-align: center;
    padding: 8px 8px 20px;
    margin-bottom: 24px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.action-icon-btns a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--kb-cobalt);
    text-decoration: none;
    color: var(--kb-cobalt);
}
.action-icon-btns a i { color: var(--kb-cobalt) !important; }

/* ---------------------------------------------------- misc */

.cart-btn { display: none !important; }

::selection { background: var(--kb-peri-bright); color: var(--kb-ink); }