/* ==========================================================================
   KBilling Client & Portal Theme — kb-client.css
   WHMCS Architecture + Custom KPanel Slate/Cobalt Engineering Identity
   ========================================================================== */

:root {
    --kb-navy: #0f172a;
    --kb-navy-mid: #1e293b;
    --kb-navy-light: #334155;
    --kb-primary: #0284c7;
    --kb-primary-dark: #0369a1;
    --kb-primary-light: #f0f9ff;
    --kb-primary-border: #bae6fd;
    --kb-accent: #38bdf8;
    --kb-body-bg: #f4f6f9;
    --kb-surface: #ffffff;
    --kb-border: #e2e8f0;
    --kb-border-light: #f1f5f9;
    --kb-heading-bg: #f8fafc;
    --kb-text: #0f172a;
    --kb-text-secondary: #334155;
    --kb-text-muted: #64748b;
    --kb-success: #059669;
    --kb-success-light: #ecfdf5;
    --kb-warning: #d97706;
    --kb-warning-light: #fffbeb;
    --kb-danger: #dc2626;
    --kb-danger-light: #fef2f2;
    --kb-info: #0284c7;
    --kb-radius: 6px;
    --kb-radius-lg: 8px;
    --kb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --kb-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --kb-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
    --bs-primary: #0284c7;
    --bs-primary-rgb: 2, 132, 199;
    --bs-link-color: #0284c7;
    --bs-link-color-rgb: 2, 132, 199;
    --bs-link-hover-color: #0369a1;
    --bs-link-hover-color-rgb: 3, 105, 161;
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-color: #0f172a;
    --bs-border-color: #e2e8f0;
    --bs-border-radius: 6px;
}

/* ---------- Base ---------- */
html, body { font-size: 14px; }
body.kb-body {
    background: var(--kb-body-bg);
    color: var(--kb-text);
    font-family: var(--bs-body-font-family);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--kb-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--kb-primary-dark); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--kb-text); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 1.65rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; } h5 { font-size: 0.95rem; } h6 { font-size: 0.875rem; }
.small, small { font-size: 12.5px; }
.kb-mono, .font-mono, code, kbd, pre, samp {
    font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
}
code { color: #0369a1; background: #f0f9ff; padding: 2px 5px; border-radius: 4px; font-size: 88%; }
hr { border-color: var(--kb-border); opacity: 1; }

/* ---------- Full-View Fluid Layout (No Boxed Width or Empty Side Margins) ---------- */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.container-fluid,
.kb-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(16px, 2.2vw, 36px) !important;
    padding-right: clamp(16px, 2.2vw, 36px) !important;
}

/* ---------- Header: Top Bar ---------- */
.kb-header {
    background: var(--kb-navy);
    color: #f8fafc;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
    position: relative;
    z-index: 1020;
}
.kb-topbar {
    background: #0b1120;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kb-topbar > .container {
    min-height: 62px;
    gap: 16px;
}
.kb-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    text-decoration: none;
}
.kb-brand:hover { color: #ffffff; text-decoration: none; }
.kb-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}
.kb-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.kb-brand-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.kb-brand-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.kb-topbar-right { gap: 8px; }
.kb-toplinks { align-items: center; margin-right: 6px; gap: 2px; }
.kb-toplinks a {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--kb-radius);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kb-toplinks a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.kb-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    display: inline-block;
}
.kb-cart-link, .kb-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--kb-radius);
    background: rgba(255, 255, 255, 0.05);
    transition: all .15s ease;
}
.kb-cart-link:hover, .kb-account-toggle:hover {
    color: #ffffff;
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(2, 132, 199, 0.18);
    text-decoration: none;
}
.kb-cart-link i, .kb-account-toggle i { font-size: 15px; color: #38bdf8; }
.kb-cart-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    height: 19px;
    line-height: 19px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}
.kb-cart-count.has-items {
    background: #0284c7;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

/* ---------- Header: Primary Navbar ---------- */
.kb-navbar {
    background: var(--kb-navy);
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.kb-navbar .navbar-nav .nav-link {
    color: #cbd5e1;
    font-size: 13.5px;
    font-weight: 500;
    padding: 12px 15px;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.kb-navbar .navbar-nav .nav-link i {
    font-size: 14px;
    color: #94a3b8;
    transition: color .15s ease;
}
.kb-navbar .navbar-nav .nav-link:hover,
.kb-navbar .navbar-nav .nav-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}
.kb-navbar .navbar-nav .nav-link:hover i,
.kb-navbar .navbar-nav .nav-link:focus i {
    color: #38bdf8;
}
.kb-navbar .navbar-nav .nav-link.active,
.kb-navbar .navbar-nav .show > .nav-link {
    color: #ffffff;
    background: rgba(2, 132, 199, 0.12);
    border-bottom-color: #38bdf8;
    font-weight: 600;
}
.kb-navbar .navbar-nav .nav-link.active i,
.kb-navbar .navbar-nav .show > .nav-link i {
    color: #38bdf8;
}
.kb-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
    margin: 8px 0;
    padding: 5px 9px;
}
.kb-navbar .navbar-toggler:focus { box-shadow: none; }
.kb-navbar .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
@media (max-width: 991.98px) {
    .kb-navbar .navbar-nav .nav-link { padding: 10px 10px; border-bottom: 0; border-radius: 4px; }
    .kb-navbar .dropdown-menu { background: #1e293b; border-color: rgba(255,255,255,0.1); margin-bottom: 6px; }
    .kb-navbar .dropdown-menu .dropdown-item { color: #e2e8f0; }
    .kb-navbar .dropdown-menu .dropdown-item:hover { background: rgba(2,132,199,0.25); color: #fff; }
    .kb-navbar-secondary { border-top: 1px solid rgba(255,255,255,.12); padding-bottom: 8px; margin-top: 4px; }
}

/* Dropdowns */
.dropdown-menu, .kb-dropdown {
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
    padding: 6px;
    font-size: 13.5px;
    min-width: 225px;
    background: #ffffff;
}
.dropdown-item {
    padding: 8px 12px;
    color: var(--kb-text-secondary);
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dropdown-item i { color: var(--kb-text-muted); font-size: 14px; width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--kb-primary-light);
    color: var(--kb-primary);
}
.dropdown-item:hover i, .dropdown-item:focus i { color: var(--kb-primary); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--kb-primary);
    color: #fff;
}
.dropdown-item.active i, .dropdown-item:active i { color: #fff; }
.dropdown-header { padding: 8px 12px; font-size: 12px; color: var(--kb-text-muted); }
.dropdown-divider { margin: 5px 0; border-top-color: var(--kb-border-light); }

/* ---------- Breadcrumb Strip ---------- */
.kb-breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid var(--kb-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.kb-breadcrumb .breadcrumb {
    padding: 10px 0;
    font-size: 12.5px;
    font-weight: 500;
}
.kb-breadcrumb .breadcrumb-item a { color: var(--kb-text-muted); }
.kb-breadcrumb .breadcrumb-item a:hover { color: var(--kb-primary); }
.kb-breadcrumb .breadcrumb-item.active { color: var(--kb-text); font-weight: 600; }
.kb-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #cbd5e1; content: "/"; }

/* ---------- Main / Flash ---------- */
.kb-main { flex: 1 0 auto; padding: 26px 0 48px; }
.kb-flash .alert {
    margin-bottom: 20px;
    border-left-width: 4px;
    box-shadow: var(--kb-shadow-xs);
}

/* ---------- Footer ---------- */
.kb-footer {
    background: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 36px 0 24px;
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}
.kb-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}
.kb-footer-col h6 {
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.kb-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.kb-footer-nav a {
    color: #94a3b8;
    font-size: 13px;
    transition: color .15s ease;
}
.kb-footer-nav a:hover { color: #38bdf8; }
.kb-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
}
.kb-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.kb-footer-links a { color: #cbd5e1; font-weight: 500; }
.kb-footer-links a:hover { color: #38bdf8; }
.kb-footer-powered {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    color: #64748b;
}
@media (max-width: 991.98px) {
    .kb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .kb-footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Page Header ---------- */
.kb-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kb-border);
}
.kb-page-title, .kb-page-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--kb-text);
    letter-spacing: -0.02em;
}
.kb-page-subtitle {
    color: var(--kb-text-muted);
    margin: 3px 0 0;
    font-size: 13px;
}
.kb-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Panels (WHMCS Cards) ---------- */
.kb-panel {
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    margin-bottom: 16px;
    box-shadow: var(--kb-shadow-xs);
    overflow: hidden;
}
.kb-panel-heading {
    background: var(--kb-heading-bg);
    border-bottom: 1px solid var(--kb-border);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.kb-panel-title, .kb-panel-heading h3, .kb-panel-heading h4 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0;
    color: var(--kb-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kb-panel-title i { color: var(--kb-primary); font-size: 15px; }
.kb-panel-heading .btn { padding: 3px 10px; font-size: 12px; }
.kb-panel-body { padding: 16px; }
.kb-panel-body > :last-child { margin-bottom: 0; }
.kb-panel-footer {
    background: var(--kb-heading-bg);
    border-top: 1px solid var(--kb-border);
    padding: 10px 16px;
    font-size: 13px;
}
.kb-panel-accent-primary { border-top: 3px solid var(--kb-primary); }
.kb-panel-accent-success { border-top: 3px solid var(--kb-success); }
.kb-panel-accent-warning { border-top: 3px solid var(--kb-warning); }
.kb-panel-accent-danger  { border-top: 3px solid var(--kb-danger); }
.kb-panel > .kb-table-wrap { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.kb-panel > .kb-table-wrap .kb-table { margin: 0; }

/* Panel link lists (sidebar menus, recent items) */
.kb-panel-list { list-style: none; margin: 0; padding: 0; }
.kb-panel-list-item, .kb-panel-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    color: var(--kb-text-secondary);
    border-bottom: 1px solid var(--kb-border-light);
    font-size: 13.5px;
    transition: background .12s ease, color .12s ease;
}
.kb-panel-list > :last-child, .kb-panel-list > li:last-child > a { border-bottom: 0; }
a.kb-panel-list-item:hover, .kb-panel-list > li > a:hover {
    background: #f8fafc;
    color: var(--kb-primary);
    text-decoration: none;
}
.kb-panel-list-item.active, .kb-panel-list > li > a.active {
    background: var(--kb-primary-light);
    color: var(--kb-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--kb-primary);
}
.kb-panel-list-item i { width: 18px; color: var(--kb-text-muted); font-size: 14px; }
.kb-panel-list-item.active i { color: var(--kb-primary); }
.kb-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: #f1f5f9;
    color: var(--kb-text-secondary);
}
.kb-panel-list-item.active .kb-count { background: var(--kb-primary); color: #fff; }

/* Sidebar */
.kb-sidebar .kb-panel { margin-bottom: 16px; }
.kb-sidebar .kb-panel-body { font-size: 13px; }
.kb-sidebar-name { font-weight: 700; color: var(--kb-text); font-size: 14.5px; }
.kb-sidebar address { margin: 6px 0 0; color: var(--kb-text-muted); line-height: 1.55; font-size: 12.5px; }
body.kb-body .kb-sidebar-profile-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    align-items: stretch;
    gap: 6px;
    padding: 10px 12px;
}
.kb-sidebar-profile-actions .btn {
    min-width: 0;
    min-height: 38px;
    padding: 6px 9px;
    gap: 4px;
    white-space: nowrap;
}
.kb-sidebar-profile-actions .kb-sidebar-signout {
    display: block;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    margin: 0;
}
.kb-sidebar-profile-actions .kb-sidebar-signout .btn {
    width: 100%;
    padding-inline: 0;
}

/* Shared client-area shell: every page using kb_client_sidebar() gets the
   same deliberate navigation width and the remaining canvas stays fluid. */
@media (min-width: 992px) {
    body.kb-body .kb-client-sidebar-column {
        flex: 0 0 clamp(300px, 19vw, 340px);
        width: clamp(300px, 19vw, 340px);
        max-width: 340px;
    }
    body.kb-body .kb-client-content-column {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}
body.kb-body .kb-sidebar .kb-panel {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
}
body.kb-body .kb-sidebar .kb-panel-heading {
    min-height: 50px;
    padding: 12px 16px;
}
body.kb-body .kb-sidebar .kb-panel-list-item {
    min-height: 54px;
    padding: 10px 14px;
    font-weight: 500;
}
body.kb-body .kb-sidebar .kb-panel-list-item > span:first-child {
    display: flex;
    align-items: center;
    min-width: 0;
}
body.kb-body .kb-sidebar .kb-panel-list-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 9px;
    border-radius: 8px;
    background: #f1f6fb;
    color: #52708d;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body.kb-body .kb-sidebar .kb-panel-list-item:hover i {
    background: #e0f2fe;
    color: #0284c7;
    transform: translateX(1px);
}

/* ---------- Labels / Status Badges ---------- */
.kb-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 4px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}
.kb-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.kb-label-active {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.kb-label-pending {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.kb-label-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.kb-label-muted {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}
.kb-label-info {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}
.kb-label-lg { font-size: 12.5px; padding: 5px 12px; }

/* ---------- Dashboard Stat Tiles ---------- */
.kb-tiles { margin-bottom: 22px; }
.kb-tile {
    position: relative;
    display: block;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: 18px 20px 16px;
    color: var(--kb-text);
    border-top: 3px solid var(--kb-primary);
    box-shadow: var(--kb-shadow-xs);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    height: 100%;
    overflow: hidden;
}
.kb-tile:hover {
    color: var(--kb-text);
    text-decoration: none;
    box-shadow: var(--kb-shadow-md);
    transform: translateY(-2px);
}
.kb-tile-icon {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--kb-primary-light);
    color: var(--kb-primary);
}
.kb-tile-stat {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--kb-text);
    font-variant-numeric: tabular-nums;
}
.kb-tile-title {
    font-size: 12px;
    color: var(--kb-text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.kb-tile-blue   { border-top-color: var(--kb-primary); }
.kb-tile-blue .kb-tile-icon { background: #f0f9ff; color: var(--kb-primary); }
.kb-tile-green  { border-top-color: var(--kb-success); }
.kb-tile-green .kb-tile-icon { background: #ecfdf5; color: var(--kb-success); }
.kb-tile-orange { border-top-color: var(--kb-warning); }
.kb-tile-orange .kb-tile-icon { background: #fffbeb; color: var(--kb-warning); }
.kb-tile-red    { border-top-color: var(--kb-danger); }
.kb-tile-red .kb-tile-icon { background: #fef2f2; color: var(--kb-danger); }

/* ---------- Modern Sidebar Profile Card & Executive Dashboard ---------- */
.kb-sidebar-profile-card {
    border-top: 3px solid var(--kb-primary);
}
.kb-sidebar-profile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    border-bottom: 1px solid var(--kb-border-light);
}
.kb-sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
}

.kb-dash-hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0c4a6e 100%);
    border-radius: 12px;
    padding: 24px 26px;
    color: #f8fafc;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.kb-dash-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 70%);
    pointer-events: none;
}
.kb-dash-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.kb-dash-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #cbd5e1;
}
.kb-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 500;
}
.kb-dash-pill-success {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}
.kb-dash-pill-warning {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}
.kb-dash-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kb-dash-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}
.kb-dash-hero-btn-primary {
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #38bdf8;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}
.kb-dash-hero-btn-primary:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-1px);
}
.kb-dash-hero-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.kb-dash-hero-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    transform: translateY(-1px);
}

.kb-dash-kpi-grid {
    margin-bottom: 20px;
}
.kb-dash-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--kb-border);
    border-radius: 10px;
    padding: 16px 18px 13px;
    height: 100%;
    text-decoration: none;
    color: var(--kb-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: all .18s ease;
    position: relative;
    overflow: hidden;
}
.kb-dash-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--kb-primary);
}
.kb-dash-kpi.kpi-green::before  { background: var(--kb-success); }
.kb-dash-kpi.kpi-orange::before { background: var(--kb-warning); }
.kb-dash-kpi.kpi-red::before    { background: var(--kb-danger); }
.kb-dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.1);
    border-color: #cbd5e1;
    color: var(--kb-text);
    text-decoration: none;
}
.kb-dash-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.kb-dash-kpi-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.kb-dash-kpi-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}
.kb-dash-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    background: #f0f9ff;
    color: var(--kb-primary);
}
.kb-dash-kpi.kpi-green .kb-dash-kpi-icon  { background: #ecfdf5; color: var(--kb-success); }
.kb-dash-kpi.kpi-orange .kb-dash-kpi-icon { background: #fffbeb; color: var(--kb-warning); }
.kb-dash-kpi.kpi-red .kb-dash-kpi-icon    { background: #fef2f2; color: var(--kb-danger); }
.kb-dash-kpi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    border-top: 1px solid #f1f5f9;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}
.kb-dash-kpi:hover .kb-dash-kpi-foot {
    color: var(--kb-primary);
}

/* ---------- Tables ---------- */
.kb-table-wrap {
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    overflow-x: auto;
    margin-bottom: 20px;
    box-shadow: var(--kb-shadow-xs);
}
.kb-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; }
.kb-table thead th {
    background: var(--kb-heading-bg);
    color: var(--kb-text-muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 11px 14px;
    border-bottom: 1px solid var(--kb-border);
    white-space: nowrap;
    text-align: left;
}
.kb-table tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--kb-border-light);
    vertical-align: middle;
    color: var(--kb-text);
}
.kb-table tbody tr:first-child td { border-top: 0; }
.kb-table tbody tr[data-href], .kb-table tbody tr.kb-row-link { cursor: pointer; }
.kb-table tbody tr:hover td { background: #f8fafc; }
.kb-table .kb-cell-sub { display: block; font-size: 12px; color: var(--kb-text-muted); margin-top: 1px; }
.kb-table .text-end { text-align: right; }
.kb-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: 10px 14px;
    box-shadow: var(--kb-shadow-xs);
}
.kb-table-toolbar .kb-search { max-width: 320px; width: 100%; }

/* ---------- Info List ---------- */
.kb-info-list { margin: 0; }
.kb-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--kb-border-light);
    font-size: 13.5px;
}
.kb-info-row:last-child { border-bottom: 0; }
.kb-info-label { color: var(--kb-text-muted); font-weight: 500; }
.kb-info-value { color: var(--kb-text); font-weight: 600; text-align: right; word-break: break-word; }

/* ---------- Empty State ---------- */
.kb-empty { text-align: center; padding: 24px 18px; color: var(--kb-text-muted); }
.kb-empty i {
    font-size: 26px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid var(--kb-border);
    margin: 0 auto 6px;
}
.kb-empty p { margin: 0 0 10px; font-size: 13px; }
.kb-empty > :last-child { margin-bottom: 0; }

/* Safe public error state -------------------------------------------------- */
.kb-not-found {
    min-height: clamp(520px, 68vh, 760px);
    display: grid;
    place-items: center;
    padding: clamp(54px, 9vw, 112px) 20px;
    color: var(--kb-text);
    background:
        radial-gradient(circle at 50% 42%, rgba(14, 165, 233, .09), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 72%);
}
.kb-not-found-shell {
    width: min(100%, 720px);
    text-align: center;
}
.kb-not-found-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 22px);
    color: #0f2742;
    font-size: clamp(88px, 18vw, 168px);
    font-weight: 800;
    line-height: .78;
    letter-spacing: -.04em;
    user-select: none;
}
.kb-not-found-orbit {
    position: relative;
    width: .66em;
    height: .66em;
    border: .055em solid #0ea5e9;
    border-radius: 50%;
    box-shadow: 0 20px 52px rgba(14, 165, 233, .18);
}
.kb-not-found-orbit::before {
    content: '';
    position: absolute;
    inset: -.17em;
    border: 2px solid rgba(14, 165, 233, .22);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    transform: rotate(-24deg);
}
.kb-not-found-core {
    position: absolute;
    width: .13em;
    height: .13em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 0 .075em rgba(14, 165, 233, .14);
}
.kb-not-found-copy { margin: clamp(30px, 5vw, 46px) auto 0; max-width: 620px; }
.kb-not-found-copy h1 {
    margin: 0 0 14px;
    color: #102a43;
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
}
.kb-not-found-copy p {
    max-width: 58ch;
    margin: 0 auto;
    color: #52677d;
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.7;
}
.kb-not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.kb-not-found-actions .btn { min-width: 174px; padding: 11px 18px; }
.kb-not-found-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    font-size: 13px;
}
.kb-not-found-links a { color: #486581; text-underline-offset: 4px; }
.kb-not-found-links a:hover { color: #0369a1; }
.kb-not-found-links span { width: 3px; height: 3px; border-radius: 50%; background: #9fb3c8; }
@media (prefers-reduced-motion: no-preference) {
    .kb-not-found-orbit::before { animation: kb-not-found-drift 9s linear infinite; }
}
@keyframes kb-not-found-drift { to { transform: rotate(336deg); } }
@media (max-width: 480px) {
    .kb-not-found { min-height: 540px; padding-inline: 16px; }
    .kb-not-found-actions { display: grid; }
    .kb-not-found-actions .btn { width: min(100%, 280px); }
    .kb-not-found-links { gap: 9px; }
}

/* ---------- Search ---------- */
.kb-search { position: relative; }
.kb-search i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.kb-search .form-control { padding-left: 34px; }

/* ---------- Auth Cards (Login & Register) ---------- */
.kb-auth-card {
    max-width: 440px;
    margin: 16px auto 32px;
    background: var(--kb-surface);
    border: 1px solid var(--kb-border);
    border-top: 3px solid var(--kb-primary);
    border-radius: var(--kb-radius-lg);
    box-shadow: var(--kb-shadow-md);
}
.kb-auth-card-wide { max-width: 800px; }
.kb-auth-card .kb-auth-header {
    padding: 26px 28px 10px;
    text-align: center;
}
.kb-auth-card .kb-auth-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 5px; }
.kb-auth-card .kb-auth-header p { color: var(--kb-text-muted); margin: 0; font-size: 13.5px; }
.kb-auth-card .kb-auth-body { padding: 20px 28px 26px; }
.kb-auth-card .kb-auth-footer {
    padding: 14px 28px;
    border-top: 1px solid var(--kb-border);
    background: var(--kb-heading-bg);
    text-align: center;
    font-size: 13.5px;
    border-radius: 0 0 var(--kb-radius-lg) var(--kb-radius-lg);
}
.kb-form-section { margin-bottom: 24px; }
.kb-form-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-secondary);
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--kb-border);
    display: flex;
    align-items: center;
    gap: 7px;
}
.kb-form-section-title i { color: var(--kb-primary); }

/* ---------- Shortcuts (cPanel / Control Panel style) ---------- */
.kb-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}
.kb-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    color: var(--kb-text-secondary);
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 92px;
    transition: all .15s ease;
}
.kb-shortcut i {
    font-size: 22px;
    color: var(--kb-primary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--kb-primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kb-shortcut:hover {
    border-color: var(--kb-primary);
    background: #f8fafc;
    color: var(--kb-primary);
    transform: translateY(-1px);
    box-shadow: var(--kb-shadow-xs);
    text-decoration: none;
}

/* ---------- Invoice Document ---------- */
.kb-invoice {
    background: #fff;
    border: 1px solid var(--kb-border);
    border-top: 4px solid var(--kb-navy);
    border-radius: var(--kb-radius-lg);
    padding: 36px 40px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: var(--kb-shadow-sm);
}
.kb-invoice-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--kb-border);
    margin-bottom: 24px;
}
.kb-invoice-company {
    font-size: 22px;
    font-weight: 700;
    color: var(--kb-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.kb-invoice-number { font-size: 20px; font-weight: 700; color: var(--kb-text); margin: 0 0 4px; }
.kb-invoice-stamp {
    display: inline-block;
    padding: 5px 16px;
    border: 2px solid currentColor;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.kb-invoice-stamp.paid { color: var(--kb-success); background: var(--kb-success-light); }
.kb-invoice-stamp.unpaid { color: var(--kb-danger); background: var(--kb-danger-light); }
.kb-invoice-stamp.other { color: #64748b; background: #f1f5f9; }
.kb-invoice-addr h6 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kb-text-muted);
    margin-bottom: 6px;
}
.kb-invoice-addr address { margin: 0; line-height: 1.6; color: var(--kb-text-secondary); }
.kb-invoice-items {
    width: 100%;
    border: 1px solid var(--kb-border);
    border-collapse: collapse;
    margin: 24px 0 0;
    font-size: 13.5px;
}
.kb-invoice-items th {
    background: var(--kb-heading-bg);
    padding: 10px 14px;
    border-bottom: 1px solid var(--kb-border);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kb-text-muted);
}
.kb-invoice-items td { padding: 11px 14px; border-top: 1px solid var(--kb-border-light); }
.kb-invoice-items tfoot td { background: #fafbfc; border-top: 1px solid var(--kb-border-light); }
.kb-invoice-items tfoot tr.kb-total td {
    background: var(--kb-heading-bg);
    font-weight: 700;
    font-size: 15px;
    border-top: 2px solid var(--kb-border);
    color: var(--kb-text);
}
.kb-invoice-pay {
    background: var(--kb-heading-bg);
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    padding: 16px 18px;
}

/* ---------- Bootstrap Refinements ---------- */
.btn {
    border-radius: var(--kb-radius);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 15px;
    box-shadow: none !important;
    background-image: none;
    transition: all .15s ease;
}
.btn-sm { font-size: 12.5px; padding: 5px 11px; }
.btn-lg { font-size: 15px; padding: 10px 22px; }
.btn-primary {
    background: var(--kb-primary);
    border-color: var(--kb-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: var(--kb-primary-dark) !important;
    border-color: var(--kb-primary-dark) !important;
    color: #fff;
}
.btn-outline-primary { color: var(--kb-primary); border-color: var(--kb-primary); }
.btn-outline-primary:hover { background: var(--kb-primary); border-color: var(--kb-primary); color: #fff; }
.btn-default, .btn-outline-secondary {
    background: #fff;
    color: var(--kb-text-secondary);
    border: 1px solid #cbd5e1;
}
.btn-default:hover, .btn-outline-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--kb-text);
}
.btn-success { background: var(--kb-success); border-color: var(--kb-success); color: #fff; }
.btn-success:hover { background: #047857; border-color: #047857; color: #fff; }
.btn-danger { background: var(--kb-danger); border-color: var(--kb-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-warning { background: var(--kb-warning); border-color: var(--kb-warning); color: #fff; }
.btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }
.btn-link { color: var(--kb-primary); }

.form-control, .form-select {
    border-radius: var(--kb-radius);
    border-color: #cbd5e1;
    font-size: 13.5px;
    padding: 8px 12px;
    color: var(--kb-text);
    background-color: #fff;
}
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 5px 10px; }
.form-control:focus, .form-select:focus {
    border-color: var(--kb-primary);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}
.form-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--kb-text-secondary);
    margin-bottom: 5px;
}
.form-text { font-size: 12px; color: var(--kb-text-muted); }
.form-check-input:checked { background-color: var(--kb-primary); border-color: var(--kb-primary); }
.input-group-text {
    background: var(--kb-heading-bg);
    border-color: #cbd5e1;
    color: var(--kb-text-secondary);
    font-size: 13.5px;
}

.card {
    border: 1px solid var(--kb-border);
    border-radius: var(--kb-radius);
    box-shadow: var(--kb-shadow-xs);
}
.card-header {
    background: var(--kb-heading-bg);
    border-bottom: 1px solid var(--kb-border);
    padding: 11px 16px;
    font-weight: 600;
    font-size: 13.5px;
}
.card-footer {
    background: var(--kb-heading-bg);
    border-top: 1px solid var(--kb-border);
}

.alert { border-radius: var(--kb-radius); font-size: 13.5px; padding: 12px 16px; }
.alert-dismissible .btn-close { padding: 14px 16px; }
.badge { font-weight: 600; border-radius: 4px; }
.nav-tabs { border-bottom-color: var(--kb-border); }
.nav-tabs .nav-link {
    color: var(--kb-text-muted);
    border-radius: var(--kb-radius) var(--kb-radius) 0 0;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
}
.nav-tabs .nav-link:hover {
    border-color: var(--kb-border-light) var(--kb-border-light) var(--kb-border);
    color: var(--kb-primary);
}
.nav-tabs .nav-link.active {
    color: var(--kb-primary);
    font-weight: 600;
    border-color: var(--kb-border) var(--kb-border) #fff;
}
.nav-pills .nav-link.active { background: var(--kb-primary); }
.table { font-size: 13.5px; }
.table > thead th {
    background: var(--kb-heading-bg);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kb-text-muted);
}
.pagination .page-link { color: var(--kb-primary); }
.pagination .page-item.active .page-link { background: var(--kb-primary); border-color: var(--kb-primary); }
.text-primary { color: var(--kb-primary) !important; }
.bg-primary { background-color: var(--kb-primary) !important; }

/* ---------- Print (Invoices) ---------- */
@media print {
    .kb-header, .kb-breadcrumb, .kb-footer, .kb-no-print, .kb-flash { display: none !important; }
    body.kb-body { background: #fff; }
    .kb-main { padding: 0; }
    .kb-invoice { border: 0; padding: 0; box-shadow: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .kb-main { padding: 18px 0 32px; }
    .kb-page-title, .kb-page-header h1 { font-size: 19px; }
    .kb-invoice { padding: 20px 16px; }
    .kb-brand-name { font-size: 16px; }
    .kb-footer-inner { flex-direction: column; align-items: flex-start; }
    .kb-footer-powered { margin-left: 0; padding-left: 0; border-left: 0; display: block; }
}