/*
 * VoiceTracker.net WHMCS Client Area Theme v1.0.0
 * Parent: Twenty-One
 * Mirrors voicetracker.net: compact Arial UI, light gray shell, white panels,
 * black text, blue actions, and red/green/yellow broadcast accents.
 */

:root {
    --vt-bg: #d7d7d7;
    --vt-panel: #ffffff;
    --vt-panel-soft: #efefef;
    --vt-line: #9f9f9f;
    --vt-line-soft: #bcbcbc;
    --vt-text: #111111;
    --vt-muted: #555555;
    --vt-blue: #0b8fca;
    --vt-blue-dark: #0875a4;
    --vt-brand-blue: #0758bd;
    --vt-brand-red: #df101d;
    --vt-red: #ff656b;
    --vt-green: #00e932;
    --vt-yellow: #fff000;
}

html,
body {
    background: var(--vt-bg) !important;
    color: var(--vt-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px;
}

body::before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg,
        var(--vt-red) 0 33.333%,
        var(--vt-green) 33.333% 66.666%,
        var(--vt-yellow) 66.666% 100%);
}

a,
a:hover,
a:focus {
    color: var(--vt-blue-dark);
}

/* Header / brand */
header.header,
.header,
#header {
    background: #fff !important;
    border-bottom: 1px solid #aaa !important;
    box-shadow: none !important;
}

.header .logo-img,
.header img.logo,
.logo img,
.navbar-brand img {
    max-height: 56px !important;
    width: auto !important;
}

/* Navigation */
.navbar,
.navbar-main,
#main-menu,
.primary-navbar {
    background: linear-gradient(#fafafa, #e3e3e3) !important;
    border: 0 !important;
    border-bottom: 1px solid #aaa !important;
    box-shadow: none !important;
}

.navbar .nav-link,
.navbar-main .nav-link,
.navbar-main .navbar-nav > li > a,
.primary-navbar a {
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 600;
    border-radius: 0 !important;
}

.navbar .nav-link:hover,
.navbar-main .nav-link:hover,
.navbar-main .navbar-nav > li > a:hover,
.navbar .active > .nav-link,
.navbar-main .active > a {
    background: #fff !important;
    color: #006eaa !important;
}

.dropdown-menu {
    border: 1px solid var(--vt-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    font-size: 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #edf7fc !important;
    color: #005f8d !important;
}

/* v1.3.11 – center the shared WHMCS page grid and its sidebar together.
   Works with normal and skipMainBodyContainer Twenty-One layouts. */
section#main-body {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 12px !important;
}
section#main-body > div {
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    float: none !important;
}
/* The content column must retain its grid width alongside the sidebar. */
section#main-body .primary-content,
section#main-body .main-content {
    max-width: none;
}
@media (max-width: 767.98px) {
    section#main-body > div {
        width: calc(100% - 24px) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Page headers */
.page-header,
.master-breadcrumb,
.breadcrumb {
    border-radius: 0 !important;
}

.breadcrumb {
    background: #efefef !important;
    border: 1px solid #b3b3b3 !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.panel-title {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #111 !important;
}

h1 { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.5px; }
h2 { font-size: 22px !important; font-weight: 800 !important; }
h3 { font-size: 17px !important; font-weight: 700 !important; }

/* Panels / cards */
.card,
.panel,
.client-home-cards .card,
.logincontainer,
.domain-checker-container,
.tiles .tile,
.home-shortcuts,
.product-details,
.invoice-container {
    background: var(--vt-panel) !important;
    border: 1px solid var(--vt-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.card-header,
.panel-heading,
.modal-header,
.home-shortcuts .lead,
.product-details .product-header {
    background: linear-gradient(#fff, #e7e7e7) !important;
    border-bottom: 1px solid var(--vt-line) !important;
    color: #111 !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}

.card-body,
.panel-body {
    color: #222;
}

.card-footer,
.panel-footer,
.modal-footer {
    background: #efefef !important;
    border-top: 1px solid #bbb !important;
    border-radius: 0 !important;
}

/* Broadcast accent cards */
.client-home-cards .card:nth-child(3n+1) { border-top: 5px solid var(--vt-red) !important; }
.client-home-cards .card:nth-child(3n+2) { border-top: 5px solid var(--vt-green) !important; }
.client-home-cards .card:nth-child(3n+3) { border-top: 5px solid var(--vt-yellow) !important; }

/* Buttons */
.btn {
    border-radius: 0 !important;
    min-height: 34px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-success.checkout,
.btn-success[type="submit"] {
    background: var(--vt-blue) !important;
    border-color: var(--vt-blue-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #087eaf !important;
    border-color: #06678f !important;
}

.btn-default,
.btn-secondary,
.btn-light {
    background: linear-gradient(#fff, #e6e6e6) !important;
    border-color: #888 !important;
    color: #111 !important;
}

.btn-danger {
    background: #e94d55 !important;
    border-color: #b9353c !important;
}

.btn-success {
    background: #17a83a !important;
    border-color: #11812c !important;
}

/* Forms */
.form-control,
.custom-select,
select.form-control,
.input-group-text {
    border-radius: 0 !important;
    border-color: #999 !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    min-height: 35px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--vt-blue) !important;
    box-shadow: 0 0 0 2px rgba(11,143,202,.15) !important;
}

label {
    color: #111;
    font-weight: 700;
    font-size: 12px;
}

/* Tables */
.table,
table.table-list {
    background: #fff;
    border: 1px solid #aaa;
}

.table thead th,
table.table-list thead th {
    background: linear-gradient(#fff, #e5e5e5) !important;
    color: #111 !important;
    border-color: #aaa !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

.table td,
.table th,
table.table-list td {
    border-color: #ccc !important;
}

.table-hover tbody tr:hover {
    background: #eef8fd !important;
}

/* Alerts */
.alert {
    border-radius: 0 !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

.alert-info { background: #d8ecff !important; border-color: #7fb9df !important; color: #173b5c !important; }
.alert-success { background: #caffd6 !important; border-color: #77cd89 !important; color: #155e27 !important; }
.alert-warning { background: #fff9a8 !important; border-color: #d7c840 !important; color: #5a5100 !important; }
.alert-danger { background: #ffd8db !important; border-color: #d98b91 !important; color: #731e25 !important; }

/* Sidebar */
.sidebar .card,
.sidebar .panel,
.sidebar-menu .list-group {
    border-radius: 0 !important;
}

.sidebar .list-group-item,
.list-group-item {
    border-color: #bbb !important;
    border-radius: 0 !important;
}

.list-group-item.active,
.list-group-item.active:hover {
    background: var(--vt-blue) !important;
    border-color: var(--vt-blue-dark) !important;
}

/* Dashboard tiles */
.tiles .tile,
.client-home-cards .card {
    min-height: 110px;
}

.tiles .tile .stat,
.client-home-cards .card .card-body strong {
    color: #111 !important;
}

/* Login/Register */
.logincontainer,
.login-wrapper .card,
.register-page .card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.logincontainer::before,
.login-wrapper .card::before,
.register-page .card::before {
    content: "";
    display: block;
    height: 7px;
    margin: -1px -1px 12px;
    background: linear-gradient(90deg,
        var(--vt-red) 0 33.333%,
        var(--vt-green) 33.333% 66.666%,
        var(--vt-yellow) 66.666% 100%);
}

/* Pagination */
.page-link {
    border-radius: 0 !important;
    color: #066d9b !important;
    border-color: #aaa !important;
}

.page-item.active .page-link {
    background: var(--vt-blue) !important;
    border-color: var(--vt-blue-dark) !important;
    color: #fff !important;
}

/* Modal */
.modal-content {
    border-radius: 0 !important;
    border: 1px solid #888 !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.24) !important;
}

/* Footer */
footer.footer,
.footer {
    background: #fff !important;
    border-top: 1px solid #aaa !important;
    color: #666 !important;
    font-size: 11px !important;
}

/* Compact overall spacing */
.card { margin-bottom: 12px !important; }
.card-header { padding: 8px 10px !important; }
.card-body { padding: 14px !important; }
.table td, .table th { padding: .55rem .65rem !important; }

/* Hide excessive rounding from Bootstrap utilities */
.rounded,
.rounded-lg,
.rounded-pill,
.badge-pill { border-radius: 2px !important; }

.badge-primary { background: var(--vt-blue) !important; }
.badge-success { background: #16a43a !important; }
.badge-warning { background: var(--vt-yellow) !important; color: #111 !important; }
.badge-danger { background: #e94d55 !important; }

/* Mobile */
@media (max-width: 767.98px) {
    #main-body > div:first-child { padding-left: 15px !important; padding-right: 15px !important; }
    body { font-size: 13px; }
    h1 { font-size: 24px !important; }
    .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
    .card-body { padding: 11px !important; }
    .btn { min-height: 36px; }
    .navbar-collapse { background: #f2f2f2 !important; border-top: 1px solid #bbb; }
}


/* v1.3 – exact-style VoiceTracker.net public-site header */
body::before { display: none !important; }
.vt-site-header {background:#fff;border-bottom:1px solid #aaa;font-family:Arial,Helvetica,sans-serif;color:#111;position:relative;z-index:10}
.vt-site-inner {max-width:1180px;margin:0 auto;padding:0 8px;display:flex;align-items:center;gap:10px;min-height:78px;flex-wrap:wrap}
.vt-site-logo {display:inline-block;flex:none;font-size:46px;font-weight:900;font-style:italic;letter-spacing:-2.5px;line-height:1.05;white-space:nowrap;text-decoration:none!important}
.vt-site-logo .vt-voice {color:#0758bd}
.vt-site-logo .vt-tracker {color:#e10920}
.vt-site-tagline {font-size:17px;line-height:1.2;font-weight:700;color:#111;white-space:nowrap}
.vt-site-navigation {background:linear-gradient(to bottom,#f9f9f9,#e0e0e0);border-bottom:1px solid #aaa;font:12px Arial,Helvetica,sans-serif;position:relative;z-index:10}
.vt-site-menu {max-width:1180px;margin:0 auto;padding:0 8px;display:flex;align-items:stretch;flex-wrap:wrap}
/* The WHMCS top-level nav is handled by the branded-header hook.
   Never apply .vt-site-menu link borders to nested dropdown menu links. */
/* Retain WHMCS's account/billing navigation but remove duplicate logo. */
body.vt-site-installed header.header .logo-img,body.vt-site-installed header.header img.logo,
body.vt-site-installed header.header .logo,body.vt-site-installed #header .logo {display:none!important}
@media(max-width:760px){.vt-site-inner{min-height:0;padding:12px 14px;gap:5px}.vt-site-logo{font-size:clamp(27px,7vw,46px);letter-spacing:-1.6px}.vt-site-tagline{width:100%;font-size:13px;white-space:normal}.vt-site-menu{padding:0 5px}/* Menu and submenu spacing are handled by the WHMCS nav hook. */}

/* v1.3: The top gray bar contains the live WHMCS nav, not website links. */
body.vt-site-installed header.header {display:none!important}
body.vt-site-installed .vt-site-menu {max-width:1180px;margin:0 auto;padding:0 8px;display:block}
body.vt-site-installed .vt-site-navigation .navbar-main {width:100%;background:transparent!important;border:0!important;margin:0!important;padding:0!important;box-shadow:none!important}
body.vt-site-installed .vt-site-navigation .navbar-main .navbar-nav>li>a {font-weight:400!important}
@media(max-width:760px){body.vt-site-installed .vt-site-menu{padding:0 5px}body.vt-site-installed .vt-site-navigation .navbar-main .navbar-nav>li>a{min-height:38px!important;padding:0 10px!important;font-size:11px!important}}