/* ==========================================================================
   ORBIT — Modern WHMCS Client Area Theme
   Author: ModuleCrafter
   Built as a full visual layer on top of the Six template engine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    --ob-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --ob-bg: #f3f5f9;
    --ob-surface: #ffffff;
    --ob-border: #e5e9f2;
    --ob-border-strong: #d6dcea;

    --ob-ink: #16233b;
    --ob-ink-soft: #4a5878;
    --ob-ink-mute: #8a94ad;

    --ob-primary: #0fb493;
    --ob-primary-dark: #0a8f75;
    --ob-primary-deep: #076b58;
    --ob-primary-soft: #e2f8f2;
    --ob-primary-glow: rgba(15, 180, 147, .28);

    --ob-side-bg: #0d1524;
    --ob-side-bg-2: #101b2e;
    --ob-side-line: rgba(255, 255, 255, .06);
    --ob-side-text: #97a3bd;
    --ob-side-text-active: #ffffff;

    --ob-blue: #3b82f6;
    --ob-green: #10b981;
    --ob-red: #ef4444;
    --ob-amber: #f59e0b;
    --ob-violet: #8b5cf6;
    --ob-sky: #0ea5e9;

    --ob-radius: 14px;
    --ob-radius-sm: 10px;
    --ob-radius-xs: 8px;

    --ob-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -6px rgba(16, 24, 40, .08);
    --ob-shadow-lift: 0 4px 10px rgba(16, 24, 40, .06), 0 16px 32px -12px rgba(16, 24, 40, .16);

    --ob-sidebar-w: 264px;
    --ob-topbar-h: 66px;

    --ob-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Base resets over Six / Bootstrap 3
   -------------------------------------------------------------------------- */
html {
    height: 100%;
}

body.orbit {
    font-family: var(--ob-font);
    background: var(--ob-bg);
    color: var(--ob-ink);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.orbit h1, body.orbit h2, body.orbit h3,
body.orbit h4, body.orbit h5, body.orbit h6 {
    font-family: var(--ob-font);
    color: var(--ob-ink);
    font-weight: 700;
}

body.orbit a {
    color: var(--ob-primary-dark);
    transition: color .15s var(--ob-ease);
}

body.orbit a:hover,
body.orbit a:focus {
    color: var(--ob-primary-deep);
    text-decoration: none;
}

body.orbit ::selection {
    background: var(--ob-primary);
    color: #fff;
}

body.orbit *:focus-visible {
    outline: 2px solid var(--ob-primary);
    outline-offset: 2px;
}

/* Neutralise Six's legacy header/menu styling if anything leaks through */
body.orbit #header,
body.orbit #main-menu {
    display: none;
}

/* --------------------------------------------------------------------------
   3. App shell layout
   -------------------------------------------------------------------------- */
.ob-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: var(--ob-sidebar-w);
    transition: padding-left .25s var(--ob-ease);
}

.ob-wrap #main-body {
    flex: 1 0 auto;
    background: transparent;
    padding: 26px 0 40px;
}

.ob-wrap .container {
    width: 100%;
    max-width: 1320px;
    padding-left: 28px;
    padding-right: 28px;
    margin: 0 auto;
}

/* Flip content/side columns: content left, contextual panels right
   (matches the reference layout: Overview / Actions on the right) */
@media (min-width: 992px) {
    body.orbit #main-body .sidebar.pull-md-left { float: right !important; }
    body.orbit #main-body .main-content.pull-md-right,
    body.orbit #main-body .col-md-9.pull-md-right { float: left !important; }
}

/* --------------------------------------------------------------------------
   4. Sidebar (app navigation)
   -------------------------------------------------------------------------- */
.ob-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ob-sidebar-w);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--ob-side-bg-2) 0%, var(--ob-side-bg) 55%);
    border-right: 1px solid rgba(255, 255, 255, .04);
    transform: translateX(0);
    transition: transform .28s var(--ob-ease);
}

.ob-sidebar::after {
    content: '';
    position: absolute;
    top: -120px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(15, 180, 147, .16) 0%, transparent 70%);
    pointer-events: none;
}

.ob-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--ob-topbar-h);
    padding: 0 20px;
    border-bottom: 1px solid var(--ob-side-line);
    position: relative;
    z-index: 1;
}

.ob-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    max-width: 100%;
    overflow: hidden;
}

.ob-logo:hover,
.ob-logo:focus {
    color: #fff;
}

.ob-logo img {
    max-height: 34px;
    max-width: 180px;
    width: auto;
}

.ob-logo-mark {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ob-primary) 0%, #0e8ea9 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 6px 14px -4px var(--ob-primary-glow);
}

.ob-logo-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-sidebar-close {
    background: transparent;
    border: 0;
    color: var(--ob-side-text);
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
}

.ob-sidebar-close:hover { color: #fff; }

.ob-sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 14px 20px;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.14) transparent;
}

.ob-sidebar-scroll::-webkit-scrollbar { width: 5px; }
.ob-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.ob-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

.ob-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(151, 163, 189, .55);
    padding: 0 12px 10px;
}

.ob-nav,
.ob-subnav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ob-nav-item { margin-bottom: 2px; }

.ob-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ob-radius-sm);
    color: var(--ob-side-text);
    font-size: 13.5px;
    font-weight: 600;
    position: relative;
    transition: background .16s var(--ob-ease), color .16s var(--ob-ease);
}

.ob-nav-link:hover,
.ob-nav-link:focus {
    color: var(--ob-side-text-active);
    background: rgba(255, 255, 255, .05);
}

.ob-nav-icon {
    width: 20px;
    min-width: 20px;
    text-align: center;
    font-size: 14.5px;
    opacity: .9;
}

.ob-nav-text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-nav-badge {
    background: var(--ob-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.4;
}

.ob-caret {
    font-size: 10px;
    opacity: .55;
    transition: transform .22s var(--ob-ease);
}

.ob-nav-item.ob-open > .ob-nav-link .ob-caret {
    transform: rotate(180deg);
}

/* Active item */
.ob-nav-item.ob-active > .ob-nav-link,
.ob-nav-item.active > .ob-nav-link {
    color: #fff;
    background: linear-gradient(90deg, rgba(15, 180, 147, .18) 0%, rgba(15, 180, 147, .05) 100%);
}

.ob-nav-item.ob-active > .ob-nav-link::before,
.ob-nav-item.active > .ob-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: var(--ob-primary);
    box-shadow: 0 0 12px var(--ob-primary-glow);
}

/* Sub navigation */
.ob-subnav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s var(--ob-ease);
    margin: 2px 0 4px;
}

.ob-nav-item.ob-open > .ob-subnav {
    max-height: 640px;
}

.ob-subnav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 24px;
    border-radius: var(--ob-radius-xs);
    color: var(--ob-side-text);
    font-size: 13px;
    font-weight: 500;
    transition: background .16s var(--ob-ease), color .16s var(--ob-ease);
}

.ob-subnav-link:hover,
.ob-subnav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.ob-subnav-dot {
    width: 5px;
    height: 5px;
    min-width: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

.ob-subnav li.ob-active > .ob-subnav-link,
.ob-subnav li.active > .ob-subnav-link {
    color: var(--ob-primary);
}

.ob-sidebar-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--ob-side-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.ob-side-logout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ob-side-text);
    font-size: 13px;
    font-weight: 600;
}

.ob-side-logout:hover,
.ob-side-logout:focus { color: #fff; }

.ob-side-admin {
    color: var(--ob-amber);
    font-size: 15px;
}

.ob-side-admin:hover { color: #ffc555; }

/* Mobile backdrop */
.ob-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 21, 36, .55);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ob-ease), visibility .25s var(--ob-ease);
}

body.ob-sidebar-open .ob-backdrop {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.ob-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--ob-topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--ob-border);
}

.ob-burger {
    background: transparent;
    border: 0;
    padding: 10px 8px 10px 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.ob-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ob-ink);
    transition: transform .2s var(--ob-ease);
}

.ob-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.ob-greet {
    font-size: 14px;
    color: var(--ob-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ob-greet strong { color: var(--ob-ink); font-weight: 700; }

.ob-topbar-actions {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ob-top-item { position: relative; }

.ob-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--ob-radius-sm);
    color: var(--ob-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    transition: background .15s var(--ob-ease), color .15s var(--ob-ease);
}

.ob-top-btn:hover,
.ob-top-btn:focus {
    background: #eef1f7;
    color: var(--ob-ink);
}

.ob-top-btn .caret { opacity: .5; }

.ob-top-icon {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    position: relative;
}

.ob-top-btn-solid {
    background: var(--ob-ink);
    color: #fff;
}

.ob-top-btn-solid:hover,
.ob-top-btn-solid:focus {
    background: var(--ob-primary-dark);
    color: #fff;
}

.ob-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--ob-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.ob-dot-alert { background: var(--ob-red); }

/* Secondary (account) navbar rendered via Six navbar.tpl inside topbar */
.ob-user-nav {
    display: flex;
    align-items: center;
    margin: 0;
}

.ob-user-nav > li { position: relative; list-style: none; }

.ob-user-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--ob-radius-sm);
    color: var(--ob-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
}

.ob-user-nav > li > a:hover,
.ob-user-nav > li > a:focus,
.ob-user-nav > li.open > a {
    background: #eef1f7;
    color: var(--ob-ink);
}

.ob-user-nav .badge {
    background: var(--ob-primary);
    border-radius: 20px;
    font-size: 10.5px;
    padding: 3px 7px;
}

.ob-user-nav .dropdown-menu {
    right: 0;
    left: auto;
    margin-top: 8px;
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-sm);
    box-shadow: var(--ob-shadow-lift);
    padding: 6px;
    min-width: 210px;
}

.ob-user-nav .dropdown-menu > li > a {
    border-radius: var(--ob-radius-xs);
    padding: 9px 12px;
    color: var(--ob-ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ob-user-nav .dropdown-menu > li > a:hover,
.ob-user-nav .dropdown-menu > li > a:focus {
    background: var(--ob-primary-soft);
    color: var(--ob-primary-deep);
}

/* Notification / language popovers */
body.orbit .popover {
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-sm);
    box-shadow: var(--ob-shadow-lift);
    font-family: var(--ob-font);
    max-width: 320px;
}

body.orbit .popover-title {
    background: #f8fafc;
    border-bottom: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-sm) var(--ob-radius-sm) 0 0;
    font-weight: 700;
    color: var(--ob-ink);
}

body.orbit .popover .client-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 240px;
}

body.orbit .popover .client-alerts li a {
    display: flex;
    gap: 10px;
    padding: 10px 6px;
    color: var(--ob-ink-soft);
    border-radius: var(--ob-radius-xs);
    align-items: flex-start;
}

body.orbit .popover .client-alerts li a:hover { background: #f4f6fa; }

body.orbit .popover .client-alerts li.none {
    padding: 8px 6px;
    color: var(--ob-ink-mute);
}

#languageChooserContent ul,
body.orbit .popover ul { list-style: none; padding: 0; margin: 0; }

body.orbit .popover ul li a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--ob-radius-xs);
    color: var(--ob-ink-soft);
}

body.orbit .popover ul li a:hover { background: #f4f6fa; color: var(--ob-ink); }

/* --------------------------------------------------------------------------
   6. Page header, breadcrumb, footer
   -------------------------------------------------------------------------- */
body.orbit .header-lined {
    border-bottom: 0;
    margin: 0 0 22px;
    padding: 0;
}

body.orbit .header-lined h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 4px 0 0;
    border: 0;
    padding: 0;
}

body.orbit .header-lined h1 small {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ob-ink-mute);
    margin-top: 5px;
    line-height: 1.5;
}

body.orbit .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 600;
}

body.orbit .breadcrumb > li + li:before {
    content: "\2192";
    color: var(--ob-ink-mute);
    padding: 0 7px;
}

body.orbit .breadcrumb > li a { color: var(--ob-ink-mute); }
body.orbit .breadcrumb > li a:hover { color: var(--ob-primary-dark); }
body.orbit .breadcrumb > .active { color: var(--ob-primary-dark); }

.ob-footer {
    background: transparent;
    border-top: 1px solid var(--ob-border);
    padding: 18px 0;
    margin-top: auto;
}

.ob-footer p {
    margin: 0;
    color: var(--ob-ink-mute);
    font-size: 12.5px;
    text-align: center;
}

.ob-footer .back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ob-ink);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ob-shadow-lift);
    z-index: 1020;
    transition: background .15s var(--ob-ease), transform .15s var(--ob-ease);
}

.ob-footer .back-to-top:hover {
    background: var(--ob-primary-dark);
    color: #fff;
    transform: translateY(-2px);
}

body.ob-scrolled .ob-footer .back-to-top { display: inline-flex; }

/* --------------------------------------------------------------------------
   7. Cards (panels)
   -------------------------------------------------------------------------- */
body.orbit .panel {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}

body.orbit .panel-heading {
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
    padding: 15px 20px;
    color: var(--ob-ink);
    border-radius: 0;
}

body.orbit .panel-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1px;
    color: var(--ob-ink);
    display: block;
    line-height: 22px;
}

body.orbit .panel-title > i {
    color: var(--ob-primary-dark);
    margin-right: 6px;
    font-size: 13px;
}

body.orbit .panel-body { padding: 20px; }

body.orbit .panel-footer {
    background: #fafbfd;
    border-top: 1px solid var(--ob-border);
    padding: 13px 20px;
    border-radius: 0;
}

/* Colour-accented variants used across Six (panel-primary etc.) */
body.orbit .panel-default > .panel-heading,
body.orbit .panel-primary > .panel-heading,
body.orbit .panel-success > .panel-heading,
body.orbit .panel-info > .panel-heading,
body.orbit .panel-warning > .panel-heading,
body.orbit .panel-danger > .panel-heading {
    background: var(--ob-surface);
    color: var(--ob-ink);
    border-color: var(--ob-border);
}

body.orbit .panel-primary,
body.orbit .panel-success,
body.orbit .panel-info,
body.orbit .panel-warning,
body.orbit .panel-danger { border-color: var(--ob-border); }

body.orbit .panel-primary > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-primary); }
body.orbit .panel-success > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-green); }
body.orbit .panel-info > .panel-heading    { box-shadow: inset 3px 0 0 var(--ob-sky); }
body.orbit .panel-warning > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-amber); }
body.orbit .panel-danger > .panel-heading  { box-shadow: inset 3px 0 0 var(--ob-red); }

/* Home panel accent colours from the menu engine */
body.orbit .panel[class*="panel-accent-"] { border-top: 0; }
body.orbit .panel-accent-blue > .panel-heading   { box-shadow: inset 3px 0 0 var(--ob-blue); }
body.orbit .panel-accent-green > .panel-heading,
body.orbit .panel-accent-emerald > .panel-heading{ box-shadow: inset 3px 0 0 var(--ob-green); }
body.orbit .panel-accent-red > .panel-heading    { box-shadow: inset 3px 0 0 var(--ob-red); }
body.orbit .panel-accent-gold > .panel-heading,
body.orbit .panel-accent-orange > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-amber); }
body.orbit .panel-accent-purple > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-violet); }
body.orbit .panel-accent-turquoise > .panel-heading,
body.orbit .panel-accent-asbestos > .panel-heading,
body.orbit .panel-accent-info > .panel-heading   { box-shadow: inset 3px 0 0 var(--ob-sky); }
body.orbit .panel-accent-pomegranate > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-red); }
body.orbit .panel-accent-midnight-blue > .panel-heading { box-shadow: inset 3px 0 0 var(--ob-ink); }

/* Contextual sidebar panels (Overview / Actions) */
body.orbit .sidebar .panel {
    border-radius: var(--ob-radius);
}

body.orbit .sidebar .panel-heading {
    padding: 13px 18px;
}

body.orbit .sidebar .panel .panel-minimise {
    color: var(--ob-ink-mute);
    font-size: 11px;
    margin-top: 5px;
    cursor: pointer;
}

body.orbit .list-group { margin-bottom: 0; }

body.orbit .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--ob-border);
    padding: 12px 20px;
    color: var(--ob-ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    background: var(--ob-surface);
    transition: background .14s var(--ob-ease), color .14s var(--ob-ease), padding-left .14s var(--ob-ease);
}

body.orbit .list-group-item:last-child { border-bottom: 0; }

body.orbit a.list-group-item:hover,
body.orbit a.list-group-item:focus {
    background: #f7f9fc;
    color: var(--ob-ink);
    padding-left: 24px;
}

body.orbit .list-group-item.active,
body.orbit .list-group-item.active:hover,
body.orbit .list-group-item.active:focus {
    background: var(--ob-primary-soft);
    color: var(--ob-primary-deep);
    border-color: var(--ob-border);
    box-shadow: inset 3px 0 0 var(--ob-primary);
}

body.orbit .list-group-item .badge {
    background: var(--ob-primary);
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
}

body.orbit .list-group-item.disabled,
body.orbit .list-group-item.disabled:hover {
    background: #fafbfd;
    color: var(--ob-ink-mute);
}

body.orbit .sidebar-menu-item-icon {
    color: var(--ob-primary-dark);
    width: 18px;
    margin-right: 6px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
body.orbit .btn {
    font-family: var(--ob-font);
    font-weight: 600;
    font-size: 13.5px;
    border-radius: var(--ob-radius-sm);
    padding: 8px 16px;
    border: 1px solid transparent;
    transition: background .15s var(--ob-ease), border-color .15s var(--ob-ease),
                color .15s var(--ob-ease), box-shadow .15s var(--ob-ease), transform .1s var(--ob-ease);
}

body.orbit .btn:active { transform: translateY(1px); box-shadow: none; }

body.orbit .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
body.orbit .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--ob-radius-xs); }
body.orbit .btn-xs { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }

body.orbit .btn-primary {
    background: linear-gradient(135deg, var(--ob-primary) 0%, var(--ob-primary-dark) 100%);
    border-color: var(--ob-primary-dark);
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--ob-primary-glow);
}

body.orbit .btn-primary:hover,
body.orbit .btn-primary:focus,
body.orbit .btn-primary:active,
body.orbit .btn-primary:active:hover,
body.orbit .btn-primary.active {
    background: linear-gradient(135deg, var(--ob-primary-dark) 0%, var(--ob-primary-deep) 100%);
    border-color: var(--ob-primary-deep);
    color: #fff;
}

body.orbit .btn-default {
    background: var(--ob-surface);
    border-color: var(--ob-border-strong);
    color: var(--ob-ink-soft);
}

body.orbit .btn-default:hover,
body.orbit .btn-default:focus,
body.orbit .btn-default:active,
body.orbit .btn-default.active {
    background: #f4f6fa;
    border-color: var(--ob-border-strong);
    color: var(--ob-ink);
}

body.orbit .btn-success {
    background: var(--ob-green);
    border-color: #0da271;
    color: #fff;
}

body.orbit .btn-success:hover,
body.orbit .btn-success:focus,
body.orbit .btn-success:active {
    background: #0da271;
    border-color: #0b8f64;
    color: #fff;
}

body.orbit .btn-info {
    background: var(--ob-sky);
    border-color: #0891cc;
    color: #fff;
}

body.orbit .btn-info:hover,
body.orbit .btn-info:focus,
body.orbit .btn-info:active {
    background: #0891cc;
    color: #fff;
}

body.orbit .btn-warning {
    background: var(--ob-amber);
    border-color: #dd8f06;
    color: #fff;
}

body.orbit .btn-warning:hover,
body.orbit .btn-warning:focus,
body.orbit .btn-warning:active {
    background: #dd8f06;
    color: #fff;
}

body.orbit .btn-danger {
    background: var(--ob-red);
    border-color: #dc2626;
    color: #fff;
}

body.orbit .btn-danger:hover,
body.orbit .btn-danger:focus,
body.orbit .btn-danger:active {
    background: #dc2626;
    color: #fff;
}

body.orbit .btn-link {
    color: var(--ob-primary-dark);
    box-shadow: none;
}

body.orbit .btn.disabled,
body.orbit .btn[disabled] {
    opacity: .55;
    box-shadow: none;
}

/* Six colour helper buttons used on home panels (bg-color-*) */
body.orbit .btn[class*="bg-color-"] {
    color: #fff !important;
    border: 0;
}

body.orbit .bg-color-blue   { background: var(--ob-blue) !important; }
body.orbit .bg-color-green,
body.orbit .bg-color-emerald{ background: var(--ob-green) !important; }
body.orbit .bg-color-red,
body.orbit .bg-color-pomegranate { background: var(--ob-red) !important; }
body.orbit .bg-color-gold,
body.orbit .bg-color-orange { background: var(--ob-amber) !important; }
body.orbit .bg-color-purple { background: var(--ob-violet) !important; }
body.orbit .bg-color-turquoise,
body.orbit .bg-color-info,
body.orbit .bg-color-asbestos { background: var(--ob-sky) !important; }
body.orbit .bg-color-midnight-blue { background: var(--ob-ink) !important; }

body.orbit .btn-group .btn { border-radius: var(--ob-radius-sm); }
body.orbit .btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.orbit .btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
body.orbit label {
    font-weight: 600;
    color: var(--ob-ink);
    font-size: 13px;
    margin-bottom: 6px;
}

body.orbit .form-control {
    font-family: var(--ob-font);
    height: 42px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--ob-ink);
    background: var(--ob-surface);
    border: 1px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-sm);
    box-shadow: none;
    transition: border-color .15s var(--ob-ease), box-shadow .15s var(--ob-ease);
}

body.orbit textarea.form-control { height: auto; }

body.orbit .form-control:focus {
    border-color: var(--ob-primary);
    box-shadow: 0 0 0 3px rgba(15, 180, 147, .16);
    outline: none;
}

body.orbit .form-control::placeholder { color: var(--ob-ink-mute); opacity: 1; }

body.orbit .form-control[disabled],
body.orbit .form-control[readonly] {
    background: #f4f6fa;
    color: var(--ob-ink-mute);
}

body.orbit .input-group-addon {
    background: #f4f6fa;
    border: 1px solid var(--ob-border-strong);
    color: var(--ob-ink-soft);
    border-radius: var(--ob-radius-sm);
    font-size: 13px;
}

body.orbit .input-group .form-control:first-child,
body.orbit .input-group-addon:first-child,
body.orbit .input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.orbit .input-group .form-control:last-child,
body.orbit .input-group-addon:last-child,
body.orbit .input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.orbit .input-group-lg > .form-control { height: 48px; border-radius: 12px; }

body.orbit .help-block { color: var(--ob-ink-mute); font-size: 12.5px; }

body.orbit .has-error .form-control { border-color: var(--ob-red); }
body.orbit .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
body.orbit .has-error .help-block,
body.orbit .has-error .control-label { color: var(--ob-red); }

body.orbit .has-success .form-control { border-color: var(--ob-green); }
body.orbit .has-success .help-block,
body.orbit .has-success .control-label { color: var(--ob-green); }

body.orbit .checkbox label,
body.orbit .radio label {
    font-weight: 500;
    color: var(--ob-ink-soft);
}

body.orbit input[type="checkbox"],
body.orbit input[type="radio"] {
    accent-color: var(--ob-primary);
}

body.orbit select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a94ad' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

body.orbit select[multiple].form-control { background-image: none; padding-right: 14px; }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
body.orbit .table {
    color: var(--ob-ink-soft);
    font-size: 13.5px;
    margin-bottom: 0;
}

body.orbit .table > thead > tr > th {
    background: #f8fafc;
    color: var(--ob-ink-mute);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-bottom: 1px solid var(--ob-border);
    padding: 12px 16px;
    vertical-align: middle;
    white-space: nowrap;
}

body.orbit .table > tbody > tr > td {
    padding: 13px 16px;
    border-top: 1px solid var(--ob-border);
    vertical-align: middle;
}

body.orbit .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
body.orbit .table-hover > tbody > tr:hover,
body.orbit .table-striped > tbody > tr:hover { background: #f7f9fc; }

body.orbit .table-container {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    overflow: hidden;
    margin-bottom: 22px;
}

body.orbit .table-container .table { margin: 0; }

/* DataTables chrome (Six list pages) */
body.orbit .dataTables_wrapper { padding: 6px 0; }

body.orbit .dataTables_filter input,
body.orbit .dataTables_length select {
    border: 1px solid var(--ob-border-strong);
    border-radius: var(--ob-radius-xs);
    padding: 6px 10px;
    height: 36px;
    background: var(--ob-surface);
}

body.orbit .dataTables_info {
    color: var(--ob-ink-mute);
    font-size: 12.5px;
}

body.orbit table.dataTable thead .sorting:after,
body.orbit table.dataTable thead .sorting_asc:after,
body.orbit table.dataTable thead .sorting_desc:after {
    color: var(--ob-primary-dark);
}

/* --------------------------------------------------------------------------
   11. Labels, badges, statuses
   -------------------------------------------------------------------------- */
body.orbit .label {
    font-family: var(--ob-font);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 4px 10px;
    display: inline-block;
    line-height: 1.4;
}

body.orbit .label-success { background: #e7f8f1; color: #0b8f64; }
body.orbit .label-info    { background: #e3f3fd; color: #0369a1; }
body.orbit .label-warning { background: #fef3e0; color: #b45309; }
body.orbit .label-danger  { background: #fdeaea; color: #b91c1c; }
body.orbit .label-default { background: #eef1f7; color: var(--ob-ink-soft); }
body.orbit .label-primary { background: var(--ob-primary-soft); color: var(--ob-primary-deep); }

/* WHMCS status helpers (invoices, tickets, domains, services) */
body.orbit .status-active,   body.orbit .label.status-active   { background: #e7f8f1; color: #0b8f64; }
body.orbit .status-pending,  body.orbit .label.status-pending  { background: #fef3e0; color: #b45309; }
body.orbit .status-suspended { background: #fdeaea; color: #b91c1c; }
body.orbit .status-terminated,
body.orbit .status-cancelled { background: #eef1f7; color: var(--ob-ink-soft); }

body.orbit .badge {
    background: var(--ob-primary);
    border-radius: 20px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */
body.orbit .alert {
    border: 1px solid transparent;
    border-radius: var(--ob-radius-sm);
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 500;
}

body.orbit .alert-success { background: #e7f8f1; border-color: #bfeeda; color: #0b6e4f; }
body.orbit .alert-info    { background: #e9f4fd; border-color: #c8e4fa; color: #075985; }
body.orbit .alert-warning { background: #fef6e7; border-color: #fbe3b5; color: #92600a; }
body.orbit .alert-danger  { background: #fdeeee; border-color: #f8caca; color: #a11616; }

body.orbit .alert .alert-link { font-weight: 700; color: inherit; text-decoration: underline; }
body.orbit .alert .close { text-shadow: none; opacity: .45; }
body.orbit .alert .close:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   13. Nav tabs & pills
   -------------------------------------------------------------------------- */
body.orbit .nav-tabs {
    border-bottom: 1px solid var(--ob-border);
    margin-bottom: 20px;
}

body.orbit .nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ob-ink-mute);
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 16px;
    margin-right: 4px;
}

body.orbit .nav-tabs > li > a:hover,
body.orbit .nav-tabs > li > a:focus {
    background: transparent;
    color: var(--ob-ink);
    border-color: var(--ob-border-strong);
}

body.orbit .nav-tabs > li.active > a,
body.orbit .nav-tabs > li.active > a:hover,
body.orbit .nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 2px solid var(--ob-primary);
    color: var(--ob-primary-deep);
    background: transparent;
    font-weight: 700;
}

body.orbit .nav-pills > li > a {
    border-radius: var(--ob-radius-sm);
    color: var(--ob-ink-soft);
    font-weight: 600;
}

body.orbit .nav-pills > li.active > a,
body.orbit .nav-pills > li.active > a:hover,
body.orbit .nav-pills > li.active > a:focus {
    background: var(--ob-primary-soft);
    color: var(--ob-primary-deep);
}

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */
body.orbit .pagination > li > a,
body.orbit .pagination > li > span {
    border: 1px solid var(--ob-border);
    color: var(--ob-ink-soft);
    font-weight: 600;
    padding: 7px 13px;
    margin: 0 3px;
    border-radius: var(--ob-radius-xs) !important;
    background: var(--ob-surface);
    transition: background .14s var(--ob-ease), color .14s var(--ob-ease);
}

body.orbit .pagination > li > a:hover,
body.orbit .pagination > li > a:focus {
    background: #f4f6fa;
    color: var(--ob-ink);
    border-color: var(--ob-border-strong);
}

body.orbit .pagination > .active > a,
body.orbit .pagination > .active > a:hover,
body.orbit .pagination > .active > span {
    background: var(--ob-primary);
    border-color: var(--ob-primary);
    color: #fff;
}

body.orbit .pagination > .disabled > a,
body.orbit .pagination > .disabled > span {
    color: var(--ob-ink-mute);
    background: #fafbfd;
}

/* --------------------------------------------------------------------------
   15. Modals
   -------------------------------------------------------------------------- */
body.orbit .modal-content {
    border: 0;
    border-radius: var(--ob-radius);
    box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .3);
    overflow: hidden;
}

body.orbit .modal-header {
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
    padding: 16px 22px;
}

body.orbit .modal-header .modal-title {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ob-ink);
}

body.orbit .modal-header .close {
    color: var(--ob-ink-mute);
    opacity: 1;
    text-shadow: none;
    font-size: 22px;
    margin-top: -1px;
}

body.orbit .modal-header .close:hover { color: var(--ob-ink); }

body.orbit .modal-body { padding: 22px; }

body.orbit .modal-footer {
    background: #fafbfd;
    border-top: 1px solid var(--ob-border);
    padding: 14px 22px;
}

body.orbit .modal-backdrop.in { opacity: .55; }

/* Keep system modal (which reuses panel classes) clean */
body.orbit .modal .modal-content.panel-primary .modal-header {
    background: var(--ob-surface);
    color: var(--ob-ink);
}

/* --------------------------------------------------------------------------
   16. Progress bars & misc widgets
   -------------------------------------------------------------------------- */
body.orbit .progress {
    height: 9px;
    border-radius: 20px;
    background: #e9edf5;
    box-shadow: none;
    overflow: hidden;
}

body.orbit .progress-bar {
    background: linear-gradient(90deg, var(--ob-primary) 0%, var(--ob-primary-dark) 100%);
    box-shadow: none;
    border-radius: 20px;
}

body.orbit .progress-bar-success { background: var(--ob-green); }
body.orbit .progress-bar-info    { background: var(--ob-sky); }
body.orbit .progress-bar-warning { background: var(--ob-amber); }
body.orbit .progress-bar-danger  { background: var(--ob-red); }

body.orbit .well {
    background: #f8fafc;
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: none;
}

body.orbit hr { border-color: var(--ob-border); }

body.orbit .text-muted { color: var(--ob-ink-mute); }

body.orbit .tooltip-inner {
    background: var(--ob-ink);
    border-radius: 7px;
    font-family: var(--ob-font);
    font-size: 12px;
    padding: 6px 10px;
}

body.orbit .tooltip.top .tooltip-arrow { border-top-color: var(--ob-ink); }
body.orbit .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--ob-ink); }
body.orbit .tooltip.left .tooltip-arrow { border-left-color: var(--ob-ink); }
body.orbit .tooltip.right .tooltip-arrow { border-right-color: var(--ob-ink); }

/* --------------------------------------------------------------------------
   17. Dashboard: stat cards + KB search
   -------------------------------------------------------------------------- */
.ob-stats { margin-bottom: 4px; }

.ob-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    padding: 18px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ob-ease), box-shadow .18s var(--ob-ease), border-color .18s var(--ob-ease);
}

.ob-stat::after {
    content: '';
    position: absolute;
    right: -34px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: .1;
    transition: transform .25s var(--ob-ease);
}

.ob-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--ob-shadow-lift);
}

.ob-stat:hover::after { transform: scale(1.25); }

.ob-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    position: relative;
    z-index: 1;
}

.ob-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.ob-stat-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ob-ink);
    letter-spacing: -.4px;
}

.ob-stat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ob-ink-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-stat-go {
    margin-left: auto;
    color: var(--ob-ink-mute);
    font-size: 13px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s var(--ob-ease), transform .18s var(--ob-ease);
    position: relative;
    z-index: 1;
}

.ob-stat:hover .ob-stat-go { opacity: 1; transform: translateX(0); }

.ob-stat-blue .ob-stat-icon   { background: linear-gradient(135deg, #60a5fa, var(--ob-blue)); }
.ob-stat-blue::after          { background: var(--ob-blue); }
.ob-stat-green .ob-stat-icon  { background: linear-gradient(135deg, #34d399, var(--ob-green)); }
.ob-stat-green::after         { background: var(--ob-green); }
.ob-stat-violet .ob-stat-icon { background: linear-gradient(135deg, #a78bfa, var(--ob-violet)); }
.ob-stat-violet::after        { background: var(--ob-violet); }
.ob-stat-red .ob-stat-icon    { background: linear-gradient(135deg, #f87171, var(--ob-red)); }
.ob-stat-red::after           { background: var(--ob-red); }

body.orbit .home-kb-search { position: relative; margin-bottom: 24px; }

body.orbit .home-kb-search i {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ob-ink-mute);
    font-size: 15px;
    z-index: 2;
}

body.orbit .home-kb-search .form-control {
    height: 52px;
    border-radius: var(--ob-radius);
    padding-left: 48px;
    font-size: 14.5px;
    box-shadow: var(--ob-shadow);
    border-color: var(--ob-border);
}

body.orbit .home-kb-search .form-control:focus {
    border-color: var(--ob-primary);
    box-shadow: 0 0 0 3px rgba(15, 180, 147, .16);
}

/* Home panels grid */
body.orbit .client-home-panels .panel { margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   18. Homepage hero + shortcuts (logged-out portal home)
   -------------------------------------------------------------------------- */
body.orbit .ob-hero {
    background:
        radial-gradient(1000px 420px at 85% -10%, rgba(15, 180, 147, .22) 0%, transparent 60%),
        radial-gradient(700px 380px at 0% 120%, rgba(14, 165, 233, .18) 0%, transparent 60%),
        linear-gradient(160deg, #0f1a2e 0%, #0d1524 100%);
    padding: 74px 0 84px;
    position: relative;
}

body.orbit .ob-hero h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 0 0 28px;
}

body.orbit .ob-hero .input-group .form-control,
body.orbit .ob-hero textarea {
    height: 54px;
    border: 0;
    border-radius: 14px 0 0 14px;
    font-size: 15px;
    padding-left: 20px;
}

body.orbit .ob-hero .input-group-btn .btn {
    height: 54px;
    border: 0;
    font-weight: 700;
    padding: 0 24px;
}

body.orbit .ob-hero .btn.search {
    background: linear-gradient(135deg, var(--ob-primary), var(--ob-primary-dark));
    color: #fff;
}

body.orbit .ob-hero .btn.transfer {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 0 14px 14px 0;
}

body.orbit .ob-hero .btn.search:hover { background: var(--ob-primary-dark); }
body.orbit .ob-hero .btn.transfer:hover { background: rgba(255, 255, 255, .2); }

body.orbit .home-shortcuts {
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
    box-shadow: var(--ob-shadow);
}

body.orbit .home-shortcuts .lead {
    color: var(--ob-ink-soft);
    font-size: 15px;
    font-weight: 600;
    margin: 24px 0;
}

body.orbit .home-shortcuts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

body.orbit .home-shortcuts ul li { flex: 1 1 0; min-width: 130px; }

body.orbit .home-shortcuts ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    color: var(--ob-ink-soft);
    font-weight: 600;
    font-size: 13px;
    border-left: 1px solid var(--ob-border);
    transition: background .15s var(--ob-ease), color .15s var(--ob-ease);
}

body.orbit .home-shortcuts ul li:last-child a { border-right: 1px solid var(--ob-border); }

body.orbit .home-shortcuts ul li a:hover {
    background: var(--ob-primary-soft);
    color: var(--ob-primary-deep);
}

body.orbit .home-shortcuts ul li a i {
    font-size: 20px;
    color: var(--ob-primary-dark);
}

body.orbit .home-shortcuts ul li a p { margin: 0; }

/* --------------------------------------------------------------------------
   19. Auth pages (login / register)
   -------------------------------------------------------------------------- */
body.ob-auth-page .ob-sidebar,
body.ob-auth-page .ob-backdrop { display: none; }

body.ob-auth-page .ob-wrap { padding-left: 0; }

body.ob-auth-page #main-body { padding: 0; }

body.ob-auth-page .ob-wrap .container {
    max-width: none;
    padding: 0;
}

body.ob-auth-page #main-body .row { margin: 0; }
body.ob-auth-page #main-body .main-content { padding: 0; float: none !important; width: 100%; }

.ob-auth {
    display: flex;
    min-height: calc(100vh - var(--ob-topbar-h));
    background: var(--ob-bg);
}

.ob-auth-side {
    flex: 0 0 44%;
    max-width: 560px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(800px 500px at 110% -20%, rgba(15, 180, 147, .28) 0%, transparent 60%),
        radial-gradient(600px 420px at -20% 120%, rgba(14, 165, 233, .2) 0%, transparent 60%),
        linear-gradient(165deg, #101c31 0%, #0d1524 100%);
    color: #cbd5e5;
    padding: 60px 56px;
}

.ob-auth-side-inner { position: relative; z-index: 1; }

.ob-auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 19px;
    margin-bottom: 44px;
}

.ob-auth-brand img { max-height: 40px; }

.ob-auth-headline {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.6px;
    margin: 0 0 12px;
}

.ob-auth-sub {
    font-size: 15px;
    color: #93a1bd;
    margin-bottom: 34px;
    max-width: 380px;
}

.ob-auth-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ob-auth-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #b8c4da;
}

.ob-auth-points li i {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    background: rgba(15, 180, 147, .18);
    color: var(--ob-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.ob-auth-orbits span {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.ob-auth-orbits span:nth-child(1) { width: 420px; height: 420px; right: -160px; bottom: -160px; }
.ob-auth-orbits span:nth-child(2) { width: 560px; height: 560px; right: -230px; bottom: -230px; }
.ob-auth-orbits span:nth-child(3) { width: 700px; height: 700px; right: -300px; bottom: -300px; }

.ob-auth-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
}

.ob-auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: 18px;
    box-shadow: var(--ob-shadow-lift);
    padding: 36px 34px;
}

.ob-auth-card .header-lined { margin-bottom: 22px; }
.ob-auth-card .header-lined h1 { font-size: 22px; }

.ob-auth-card.with-social .row { margin-left: -10px; margin-right: -10px; }

.ob-input-icon { position: relative; }

.ob-input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ob-ink-mute);
    font-size: 13.5px;
    pointer-events: none;
}

.ob-input-icon .form-control { padding-left: 40px; }

.ob-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}

.ob-auth-row .checkbox { margin: 0; }

.ob-auth-forgot {
    font-size: 13px;
    font-weight: 600;
}

.ob-auth-actions { margin-bottom: 4px; }

.ob-auth-alt {
    text-align: center;
    color: var(--ob-ink-mute);
    font-size: 13px;
    margin: 16px 0 0;
}

/* Register page: keep the standard flow but give it a clean card */
body.orbit #registration {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    padding: 28px;
}

/* --------------------------------------------------------------------------
   20. Product details / clientarea specifics
   -------------------------------------------------------------------------- */
/* Quick shortcuts grid on product details */
body.orbit .product-details-tab-container { border: 0; }

body.orbit .tab-content {
    background: transparent;
    border: 0;
}

body.orbit #tabOverview .row > div { margin-bottom: 8px; }

/* Usage stats circles keep their plugin styling; tidy captions */
body.orbit .usage-stats .description,
body.orbit .stat-description {
    color: var(--ob-ink-mute);
    font-size: 12.5px;
}

/* Domain checker results */
body.orbit .domain-checker-container {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    padding: 24px;
}

body.orbit .domain-checker-bg { background: transparent; padding: 0; }

/* Ticket list severity strip */
body.orbit tr.ticket-status-customer-reply td:first-child { box-shadow: inset 3px 0 0 var(--ob-amber); }
body.orbit tr.ticket-status-open td:first-child { box-shadow: inset 3px 0 0 var(--ob-green); }
body.orbit tr.ticket-status-answered td:first-child { box-shadow: inset 3px 0 0 var(--ob-sky); }

/* Invoice view */
body.orbit .invoice-container {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
}

/* Knowledgebase */
body.orbit .kb-article-title { font-weight: 800; }

/* Six "logincontainer" fallback for password reset etc. */
body.orbit .logincontainer:not(.ob-auth) {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    box-shadow: var(--ob-shadow);
    padding: 30px;
    max-width: 560px;
    margin: 30px auto;
}

/* --------------------------------------------------------------------------
   21. Responsive behaviour
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ob-wrap .container { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 991px) {
    .ob-wrap { padding-left: 0; }

    .ob-sidebar { transform: translateX(-104%); box-shadow: none; }

    body.ob-sidebar-open .ob-sidebar {
        transform: translateX(0);
        box-shadow: 24px 0 60px -20px rgba(13, 21, 36, .45);
    }

    body.ob-sidebar-open { overflow: hidden; }

    .ob-topbar { padding: 0 18px; }

    .ob-auth-side { display: none; }
}

@media (max-width: 767px) {
    .ob-wrap .container { padding-left: 16px; padding-right: 16px; }

    .ob-wrap #main-body { padding: 18px 0 30px; }

    body.orbit .header-lined h1 { font-size: 20px; }

    .ob-stat { padding: 15px; margin-bottom: 14px; }
    .ob-stat-num { font-size: 20px; }
    .ob-stat-icon { width: 42px; height: 42px; min-width: 42px; font-size: 16px; }

    body.orbit .panel-body { padding: 16px; }

    body.orbit .home-shortcuts ul { flex-wrap: wrap; }
    body.orbit .home-shortcuts ul li { flex: 1 1 50%; }
    body.orbit .home-shortcuts ul li a { border: 0; border-top: 1px solid var(--ob-border); }
    body.orbit .home-shortcuts ul li:last-child a { border-right: 0; }

    body.orbit .ob-hero { padding: 44px 0 52px; }
    body.orbit .ob-hero h2 { font-size: 22px; }

    .ob-auth-main { padding: 24px 14px; }
    .ob-auth-card { padding: 26px 20px; }

    /* Make wide tables scroll instead of breaking layout */
    body.orbit .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    body.orbit .modal-dialog { margin: 12px; }
}

@media (max-width: 480px) {
    .ob-topbar-actions { gap: 2px; }
    .ob-top-btn { padding: 8px 9px; }
    .ob-greet { display: none; }
}

/* --------------------------------------------------------------------------
   22. Accessibility & motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
    .ob-sidebar, .ob-topbar, .ob-footer, .ob-backdrop { display: none !important; }
    .ob-wrap { padding-left: 0; }
    body.orbit { background: #fff; }
    body.orbit .panel { box-shadow: none; }
}