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

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

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

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

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


/* ZEROTRACE client area: clean, technical portal styling */
:root {
    --primary: #059669;
    --primary-lifted: #047857;
    --primary-accented: #065f46;
    --success: #059669;
    --success-lifted: #047857;
    --success-accented: #065f46;
    --info: #2563eb;
    --warning: #d97706;
    --error: #dc2626;
    --grayscale: #17251f;
    --grayscale-lifted: #20352c;
    --grayscale-accented: #14231d;
    --text: #17221d;
    --text-accented: #34433b;
    --text-lifted: #5b6b62;
    --text-muted: #849188;
    --border: #dce5df;
    --border-muted: #e8eeea;
    --bg: #ffffff;
    --bg-muted: #f6f9f7;
    --bg-lifted: #edf3ef;
    --bg-accented: #e5ede8;
    --bg-inverted: #17251f;
    --rounding-sm: 5px;
    --rounding-md: 8px;
    --rounding-lg: 12px;
}

body {
    color: var(--text);
    background: #f5f8f6;
    -webkit-font-smoothing: antialiased;
}

a { color: #047857; }
a:hover { color: #065f46; }

header.header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(16, 38, 27, 0.035);
}
header.header .topbar {
    background: #14231d;
    color: rgba(255,255,255,.78);
}
header.header .topbar .btn,
header.header .topbar .active-client .btn { color: #e6f1eb; }
header.header .topbar .active-client .input-group-text { color: #c0d0c7; }
header.header .logo-img {
    display: block;
    width: 224px;
    height: auto;
    max-width: min(224px, 55vw);
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}
header.header .navbar { min-height: 68px; }
header.header .navbar-nav { align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 12px; }
header.header .navbar-nav a {
    color: #34433b;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}
header.header .navbar-nav a:hover,
header.header .navbar-nav .active > a { color: #047857; background: #eff8f3; }
header.header .main-navbar-wrapper { border-top: 1px solid #f0f3f1; background: #fff; }
header.header .toolbar .nav-link { border-color: var(--border); color: #34433b; }
header.header .toolbar .nav-link:hover { color: #047857; border-color: #9bcdb5; }
header.header .search { border-radius: 7px; }
header.header .search:focus-within { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12); }

.master-breadcrumb,
.master-breadcrumb .breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { padding: 16px 0 4px; }
section#main-body { padding-top: 16px; padding-bottom: 42px; }

/* Dashboard summary tiles */
.tiles { margin: 0 -8px 20px; }
.tiles .row > div { padding: 8px; }
.tiles .tile {
    min-height: 126px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(20, 45, 31, .035);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tiles .tile .stat { margin: 10px 0 5px; color: #17251f; font-size: 34px; font-weight: 700; letter-spacing: -.04em; }
.tiles .tile .title { color: #66766c; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.tiles .tile .highlight { height: 3px; margin-top: 10px; border-radius: 99px; background: #91f4c2; }
.tiles .tile i { top: 18px; right: 18px; color: #b9e8cf; font-size: 27px; }
.tiles .tile:hover { transform: translateY(-2px); border-color: #9bcdb5; background: #fff; box-shadow: 0 8px 20px rgba(20, 45, 31, .08); }
.tiles .tile:hover i { color: #059669; font-size: 29px; }
.tiles .row > div:last-child .tile,
.tiles div:nth-child(1) > .tile,
.tiles div:nth-child(2) > .tile { border: 1px solid var(--border); }

/* WHMCS dashboard panels and service/billing cards */
.primary-content .card,
.primary-content .mc-promo-manage,
.primary-content .mc-promo-login {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(20, 45, 31, .035);
}
.primary-content .card-header { padding: 14px 18px; border-bottom: 1px solid #e9efeb; background: #fff; }
.primary-content .card-title { color: #17251f; font-size: 15px; font-weight: 700; }
.primary-content .card-body { background: #fff; }
.primary-content .card-footer { border-top: 1px solid #e9efeb; background: #fbfdfb; }
.primary-content .list-group-item { border-color: #edf1ee; }
.primary-content .list-group-item:hover { background: #f6faf7; }
.primary-content .table thead th { color: #526158; background: #f5f8f6; border-bottom-color: var(--border); font-size: 12px; letter-spacing: .02em; }
.primary-content .table td { vertical-align: middle; }
.primary-content .form-control,
.primary-content select.form-control { border-color: #d5dfd8; border-radius: 6px; }
.primary-content .form-control:focus,
.primary-content select.form-control:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12); }

.btn-primary,
#main-body .btn-primary { color: #fff; background: #059669; border-color: #059669; border-radius: 6px; font-weight: 600; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
#main-body .btn-primary:hover { color: #fff; background: #047857; border-color: #047857; }
.btn-success { background: #059669; border-color: #059669; }
.btn-success:hover { background: #047857; border-color: #047857; }
.btn-default, .btn-secondary { border-radius: 6px; }
.badge-success { background: #e7f7ee; color: #087443; }

.sidebar .panel,
.sidebar .card { border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 6px rgba(20,45,31,.03); }
.sidebar .panel-heading,
.sidebar .card-header { color: #26382e; background: #fff; border-bottom: 1px solid #e9efeb; }
.sidebar .list-group-item.active { color: #087443; background: #eff8f3; border-color: #e1efe7; }

@media (max-width: 767.98px) {
    header.header .navbar .container { justify-content: space-between; }
    header.header .navbar-nav { align-items: stretch; gap: 2px; margin: 8px 0 12px; }
    header.header .navbar-nav a { padding: 10px 12px; }
    .tiles { margin-left: -5px; margin-right: -5px; }
    .tiles .row > div { padding: 5px; }
    .tiles .tile { min-height: 112px; padding: 14px; }
    .tiles .tile .stat { font-size: 30px; }
    .tiles .tile i { top: 14px; right: 14px; font-size: 23px; }
    section#main-body { padding-top: 8px; }
}


/* Full client-portal frame inspired by the supplied dashboard reference */
.zt-topbar {
    min-height: 76px;
    color: #17251f;
    background: #fff;
    border-bottom: 3px solid #91f4c2;
}
.zt-topbar-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zt-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.zt-brand img { display: block; width: 228px; max-width: 38vw; height: auto; max-height: 42px; object-fit: contain; }
.zt-topbar-actions { display: flex; align-items: center; gap: 22px; }
.zt-notifications { position: relative; }
.zt-icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #526158;
    background: #f7faf8;
    border: 1px solid #dce5df;
    border-radius: 8px;
    font-size: 17px;
}
.zt-icon-button:hover { color: #047857; border-color: #91d9af; background: #eff9f3; }
.zt-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    padding: 1px 4px;
    color: #10231a;
    background: #91f4c2;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}
.zt-user-greeting { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.zt-greeting-label { color: #849188; font-size: 11px; }
.zt-user-greeting a { color: #17251f; font-size: 14px; font-weight: 600; }
.zt-user-greeting a:hover { color: #047857; text-decoration: none; }
.zt-user-actions { display: flex; align-items: center; gap: 12px; }
.zt-user-actions > a { color: #53635a; }
.zt-user-actions > a:hover { color: #047857; text-decoration: none; }
.zt-user-nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.zt-user-nav > li { position: relative; }
.zt-user-nav > li > a { padding: 8px; color: #e7efea; font-size: 13px; }
.zt-user-nav .dropdown-menu { right: 0; left: auto; }

.zt-app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.zt-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px 16px 20px;
    background: #fff;
    border-right: 1px solid #dce5df;
}
.zt-sidebar-heading {
    margin: 0 10px 18px;
    color: #8a978f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.zt-sidebar nav { flex: 1 1 auto; }
.zt-sidebar .zt-client-nav { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.zt-sidebar .zt-client-nav > li { display: block; margin: 0; }
.zt-sidebar .zt-client-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 10px 12px;
    color: #53635a;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.zt-sidebar .zt-client-nav > li > a > i { width: 22px; margin-right: 10px; color: #76867c; text-align: center; }
.zt-sidebar .zt-client-nav > li > a:hover,
.zt-sidebar .zt-client-nav > li.active > a,
.zt-sidebar .zt-client-nav > li.current > a {
    color: #087443;
    background: #eaf8f0;
}
.zt-sidebar .zt-client-nav > li.active > a > i,
.zt-sidebar .zt-client-nav > li.current > a > i { color: #059669; }
.zt-sidebar .zt-client-nav .dropdown-menu { position: static; float: none; width: 100%; margin: 3px 0 7px; padding: 4px 0 4px 28px; border: 0; box-shadow: none; }
.zt-sidebar .zt-client-nav .dropdown-item { padding: 0; white-space: normal; }
.zt-sidebar .zt-client-nav .dropdown-item a { display: block; padding: 8px 10px; color: #64736a; font-size: 12px; }
.zt-sidebar .zt-client-nav .collapsable-dropdown { display: none !important; }
.zt-sidebar-account { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e8eeea; }
.zt-sidebar-caption { display: block; margin: 0 10px 10px; color: #8a978f; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.zt-order-link { display: flex; align-items: center; gap: 10px; margin: 14px 6px 0; padding: 11px 12px; color: #087443; background: #eff9f3; border: 1px solid #d8efe1; border-radius: 7px; font-size: 13px; font-weight: 700; }
.zt-order-link:hover { color: #065f46; background: #e4f6eb; text-decoration: none; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main { min-width: 0; padding: 0 28px 34px; background: #f5f8f6; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main .master-breadcrumb .container { max-width: 1480px; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #main-body > .container { max-width: 1480px; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #main-body > .container > .row > .col-lg-4.col-xl-3 { display: none; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #main-body > .container > .row > .primary-content { flex: 0 0 100%; max-width: 100%; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main .master-breadcrumb,
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main .master-breadcrumb .breadcrumb { background: transparent; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main .master-breadcrumb .breadcrumb { padding: 18px 0 6px; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main section#main-body { padding-top: 10px; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer { margin: 0 -28px -34px; padding: 20px 28px; background: #fff; border-top: 1px solid #dce5df; }

/* Account summary and horizontal usage strip on the dashboard */
.zt-profile-summary {
    margin: 0 0 22px;
    padding: 24px 26px 18px;
    background: #fff;
    border: 1px solid #dce5df;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(20,45,31,.035);
}
.zt-profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.zt-profile-heading h1 { margin: 0 0 5px; color: #17251f; font-size: 28px; font-weight: 700; letter-spacing: -.035em; }
.zt-profile-email { color: #059669; font-size: 14px; }
.zt-profile-edit { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: #53635a; background: #f7faf8; border: 1px solid #dce5df; border-radius: 6px; font-size: 12px; font-weight: 600; }
.zt-profile-edit:hover { color: #047857; border-color: #a7d7bb; text-decoration: none; }
.zt-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; padding-top: 18px; border-top: 1px solid #e8eeea; }
.zt-profile-stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 16px; color: #66756c; border-right: 1px solid #e8eeea; }
.zt-profile-stat:first-child { padding-left: 0; }
.zt-profile-stat:last-child { padding-right: 0; border-right: 0; }
.zt-profile-stat:hover { color: #047857; text-decoration: none; }
.zt-stat-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: #059669; background: #eaf8f0; border-radius: 8px; font-size: 16px; }
.zt-stat-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.zt-stat-copy strong { color: #17251f; font-size: 20px; font-weight: 700; line-height: 1.1; }
.zt-stat-copy > span { overflow: hidden; color: #718077; font-size: 11px; font-weight: 700; letter-spacing: .045em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.zt-legacy-tiles { display: none; }
.client-home-cards > .row > div { margin-bottom: 10px; }
.client-home-cards .card-header .card-title { color: #087443; }
.client-home-cards .card-header .btn { color: #047857; background: transparent; border: 0; font-size: 12px; }
.client-home-cards .card-header .btn:hover { color: #065f46; text-decoration: underline; }

@media (min-width: 1500px) {
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main { padding-left: 40px; padding-right: 40px; }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer { margin-left: -40px; margin-right: -40px; }
}
@media (max-width: 991.98px) {
    .zt-app-shell { display: block; min-height: calc(100vh - 68px); }
    .zt-sidebar { padding: 8px 12px; border-right: 0; border-bottom: 1px solid #dce5df; }
    .zt-sidebar-heading, .zt-sidebar-account { display: none; }
    .zt-sidebar nav { overflow-x: auto; }
    .zt-sidebar .zt-client-nav { flex-direction: row; width: max-content; min-width: 100%; gap: 4px; }
    .zt-sidebar .zt-client-nav > li { flex: 0 0 auto; }
    .zt-sidebar .zt-client-nav > li > a { min-height: 40px; padding: 9px 11px; white-space: nowrap; }
    .zt-sidebar .zt-client-nav .dropdown-menu { position: absolute; z-index: 1050; width: 220px; background: #fff; border: 1px solid #dce5df; box-shadow: 0 8px 20px rgba(20,45,31,.12); }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main { padding: 0 18px 28px; }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer { margin: 0 -18px -28px; padding: 18px; }
    .zt-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .zt-profile-stat:nth-child(2) { border-right: 0; }
    .zt-profile-stat:nth-child(3) { padding-left: 0; }
}
@media (max-width: 575.98px) {
    .zt-topbar, .zt-topbar-inner { min-height: 62px; }
    .zt-topbar-inner { padding-left: 15px; padding-right: 15px; }
    .zt-brand img { width: 170px; max-width: 44vw; max-height: 34px; }
    .zt-topbar-actions { gap: 10px; }
    .zt-user-greeting { max-width: 135px; }
    .zt-greeting-label { display: none; }
    .zt-user-greeting a { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .zt-user-actions { gap: 6px; }
    .zt-user-nav { display: none; }
    .zt-icon-button { width: 34px; height: 34px; }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main { padding-left: 12px; padding-right: 12px; }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer { margin-left: -12px; margin-right: -12px; padding: 16px 12px; }
    .zt-profile-summary { padding: 18px 16px 15px; }
    .zt-profile-heading h1 { font-size: 22px; }
    .zt-profile-edit span { display: none; }
    .zt-profile-stats { margin-top: 16px; padding-top: 14px; }
    .zt-profile-stat { gap: 8px; padding: 3px 8px; }
    .zt-stat-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
    .zt-stat-copy strong { font-size: 18px; }
    .zt-stat-copy > span { font-size: 9px; }
}

@media (min-width: 992px) {
    .zt-sidebar {
        position: sticky;
        top: 0;
        height: calc(100vh - 76px);
        overflow-y: auto;
    }
}


.zt-app-shell--guest { display: block; min-height: 0; }
.zt-app-shell--guest .zt-app-main { padding: 0; background: transparent; }

/* Unified component system across the complete client area */
:root {
    --zt-ink: #17251f;
    --zt-muted: #68776e;
    --zt-border: #dce5df;
    --zt-surface: #fff;
    --zt-canvas: #f5f8f6;
    --zt-brand: #059669;
    --zt-brand-dark: #047857;
    --zt-brand-soft: #eaf8f0;
    --zt-radius: 10px;
    --zt-shadow: 0 2px 10px rgba(20, 45, 31, .045);
}

body, body .primary-content {
    color: var(--zt-ink);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}
body .primary-content h1,
body .primary-content h2,
body .primary-content h3,
body .primary-content h4 { color: var(--zt-ink); font-weight: 650; letter-spacing: -.025em; }
body .primary-content h1 { margin-bottom: 20px; font-size: clamp(24px, 2.2vw, 32px); }
body .primary-content h2 { font-size: 22px; }
body .primary-content h3 { font-size: 17px; }
body .primary-content p { color: #4e5e54; }
body .primary-content a:not(.btn):not(.list-group-item) { color: var(--zt-brand-dark); }
body .primary-content a:not(.btn):not(.list-group-item):hover { color: #035d43; }

/* Surface, section, and card hierarchy */
body .primary-content > .card,
body .primary-content .card,
body .primary-content .panel,
body .primary-content .well,
body .primary-content .product-status,
body .primary-content .mc-promo-manage,
body .primary-content .mc-promo-login {
    border: 1px solid var(--zt-border);
    border-radius: var(--zt-radius);
    background: var(--zt-surface);
    box-shadow: var(--zt-shadow);
}
body .primary-content .card { margin-bottom: 18px; }
body .primary-content .card-header,
body .primary-content .panel-heading {
    padding: 15px 20px;
    color: var(--zt-ink);
    background: #fff;
    border-bottom: 1px solid #e9efeb;
}
body .primary-content .card-header:first-child { border-radius: var(--zt-radius) var(--zt-radius) 0 0; }
body .primary-content .card-title,
body .primary-content .panel-title { margin: 0; color: var(--zt-ink); font-size: 15px; font-weight: 650; }
body .primary-content .card-body,
body .primary-content .panel-body { padding: 20px; background: #fff; }
body .primary-content .card-footer,
body .primary-content .panel-footer { padding: 12px 20px; background: #fbfdfb; border-top: 1px solid #e9efeb; }
body .primary-content .list-group-item { padding: 13px 17px; color: #35443b; border-color: #edf1ee; }
body .primary-content .list-group-item:hover { color: #087443; background: #f6faf7; }
body .primary-content .list-group-item.active { color: #087443; background: var(--zt-brand-soft); border-color: #d9eee2; }

/* Data tables, invoices, products, and ticket lists */
body .primary-content .table { margin-bottom: 0; border-color: var(--zt-border); color: #34433b; }
body .primary-content .table thead th {
    padding: 12px 14px;
    color: #65736a;
    background: #f5f8f6;
    border-top: 0;
    border-bottom: 1px solid var(--zt-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}
body .primary-content .table td { padding: 13px 14px; vertical-align: middle; border-color: #edf1ee; }
body .primary-content .table tbody tr:hover { background: #f8fbf9; }
body .primary-content .table-responsive { border: 1px solid var(--zt-border); border-radius: 8px; }
body .primary-content .table-responsive > .table { border: 0; }
body .primary-content .table-responsive > .table thead th:first-child { border-top-left-radius: 8px; }
body .primary-content .table-responsive > .table thead th:last-child { border-top-right-radius: 8px; }
body .primary-content .dataTables_wrapper .dataTables_filter input,
body .primary-content .dataTables_wrapper .dataTables_length select { border: 1px solid var(--zt-border); border-radius: 6px; }

/* Forms and controls */
body .primary-content label,
body .primary-content .col-form-label { color: #425249; font-size: 13px; font-weight: 600; }
body .primary-content .form-control,
body .primary-content select.form-control,
body .primary-content textarea.form-control,
body .primary-content .custom-select {
    min-height: 40px;
    padding: 8px 11px;
    color: #26362d;
    background-color: #fff;
    border: 1px solid #d5dfd8;
    border-radius: 7px;
    box-shadow: none;
    font-size: 14px;
}
body .primary-content textarea.form-control { min-height: 112px; }
body .primary-content .form-control::placeholder { color: #9aa69f; }
body .primary-content .form-control:focus,
body .primary-content select.form-control:focus,
body .primary-content .custom-select:focus {
    border-color: #45b783;
    box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
body .primary-content .input-group-text { color: #607067; background: #f5f8f6; border-color: var(--zt-border); }
body .primary-content .form-group { margin-bottom: 18px; }
body .primary-content .form-check-input { accent-color: var(--zt-brand); }

/* Buttons, chips, statuses, alerts, and paging */
body .primary-content .btn {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
body .primary-content .btn-primary,
body .primary-content #main-body .btn-primary { color: #fff; background: var(--zt-brand); border-color: var(--zt-brand); }
body .primary-content .btn-primary:hover,
body .primary-content .btn-primary:focus,
body .primary-content .btn-primary:active { color: #fff; background: var(--zt-brand-dark); border-color: var(--zt-brand-dark); box-shadow: 0 0 0 3px rgba(5,150,105,.13); }
body .primary-content .btn-default,
body .primary-content .btn-secondary,
body .primary-content .btn-outline-secondary { color: #435249; background: #fff; border-color: #d5dfd8; }
body .primary-content .btn-default:hover,
body .primary-content .btn-secondary:hover,
body .primary-content .btn-outline-secondary:hover { color: #087443; background: #f5faf7; border-color: #b7d9c5; }
body .primary-content .btn-success { color: #fff; background: var(--zt-brand); border-color: var(--zt-brand); }
body .primary-content .btn-link { color: var(--zt-brand-dark); }
body .primary-content .badge { border-radius: 999px; font-weight: 650; }
body .primary-content .badge-success,
body .primary-content .label-success { color: #087443; background: #e5f7ed; }
body .primary-content .badge-warning,
body .primary-content .label-warning { color: #8a5a06; background: #fff4d6; }
body .primary-content .badge-danger,
body .primary-content .label-danger { color: #a52d2d; background: #fde9e8; }
body .primary-content .label { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
body .primary-content .alert { padding: 13px 16px; border: 1px solid transparent; border-radius: 8px; }
body .primary-content .alert-success { color: #086641; background: #eaf8f0; border-color: #ccebd8; }
body .primary-content .alert-info { color: #24577b; background: #eef7fc; border-color: #d5eaf6; }
body .primary-content .alert-warning { color: #81580d; background: #fff8e7; border-color: #f4e6bd; }
body .primary-content .alert-danger { color: #9a3030; background: #fff0ef; border-color: #f5d2d0; }
body .primary-content .pagination .page-link { color: #35604a; border-color: var(--zt-border); }
body .primary-content .pagination .page-item.active .page-link { color: #fff; background: var(--zt-brand); border-color: var(--zt-brand); }

/* Tabs, dropdowns, overlays, and the portal footer */
body .primary-content .nav-tabs { border-bottom-color: var(--zt-border); }
body .primary-content .nav-tabs .nav-link { padding: 10px 14px; color: #627168; border: 0; border-bottom: 2px solid transparent; font-weight: 600; }
body .primary-content .nav-tabs .nav-link.active,
body .primary-content .nav-tabs .nav-link:hover { color: #087443; background: transparent; border-bottom-color: var(--zt-brand); }
body .primary-content .dropdown-menu { padding: 6px; border: 1px solid var(--zt-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(20,45,31,.12); }
body .primary-content .dropdown-item { padding: 8px 10px; border-radius: 5px; }
body .primary-content .dropdown-item:hover,
body .primary-content .dropdown-item:focus { color: #087443; background: #eff8f3; }
body .modal-content { overflow: hidden; border: 1px solid var(--zt-border); border-radius: 11px; box-shadow: 0 20px 60px rgba(13,32,22,.2); }
body .modal-header { padding: 16px 20px; background: #fff; border-bottom-color: #e8eeea; }
body .modal-title { color: var(--zt-ink); font-size: 17px; font-weight: 650; }
body .modal-body { padding: 20px; }
body .modal-footer { padding: 13px 20px; background: #f8fbf9; border-top-color: #e8eeea; }
body .footer { color: #728077; font-size: 12px; }
body .footer a { color: #52645a; }

/* Dense WHMCS pages remain usable at tablet and phone widths */
@media (max-width: 767.98px) {
    body .primary-content .card-body,
    body .primary-content .panel-body { padding: 15px; }
    body .primary-content .card-header,
    body .primary-content .panel-heading { padding: 13px 15px; }
    body .primary-content .table td { padding: 11px 10px; }
    body .primary-content .table thead th { padding: 10px; }
    .zt-profile-heading { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Lagom-inspired left-wide client dashboard composition, recolored for ZEROTRACE */
.zt-app-shell { grid-template-columns: 220px minmax(0, 1fr); }
.zt-sidebar { padding-left: 13px; padding-right: 13px; }
.zt-dashboard-grid { display: grid; grid-template-columns: minmax(205px, 245px) minmax(0, 1fr); align-items: start; gap: 20px; }
.zt-dashboard-account { overflow: hidden; background: #fff; border: 1px solid #dce5df; border-radius: 10px; box-shadow: 0 2px 10px rgba(20,45,31,.045); }
.zt-account-profile { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.zt-avatar { display: grid; width: 48px; height: 48px; margin-bottom: 12px; place-items: center; color: #087443; background: #eaf8f0; border: 1px solid #d8efe1; border-radius: 50%; font-size: 18px; }
.zt-account-profile h2 { margin: 0 0 3px; color: #17251f; font-size: 16px; font-weight: 700; }
.zt-account-email { max-width: 100%; overflow: hidden; color: #75837a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.zt-account-edit { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; color: #087443; font-size: 12px; font-weight: 650; }
.zt-account-links { padding: 14px 12px 12px; border-top: 1px solid #e9efeb; }
.zt-account-links-title { display: block; margin: 0 8px 8px; color: #8a978f; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.zt-account-links a { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 7px 8px; color: #5b6a61 !important; border-radius: 6px; font-size: 12px; font-weight: 550; }
.zt-account-links a i { width: 17px; color: #86948b; text-align: center; }
.zt-account-links a:hover { color: #087443 !important; background: #eff8f3; text-decoration: none; }
.zt-account-links a:hover i { color: #059669; }
.zt-dashboard-main { min-width: 0; }
.zt-dashboard-hero {
    position: relative;
    display: flex;
    min-height: 176px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    margin: 0 0 16px;
    padding: 26px 30px;
    color: #fff;
    background: radial-gradient(circle at 87% 15%, rgba(145,244,194,.32), transparent 26%), linear-gradient(120deg, #064e3b 0%, #087f5b 55%, #059669 100%);
    border: 1px solid rgba(5,150,105,.2);
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(5,91,59,.16);
}
.zt-hero-copy { position: relative; z-index: 1; }
.zt-hero-kicker { display: block; margin-bottom: 7px; color: #c6f4d8; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.zt-dashboard-hero h1 { margin: 0 0 4px; color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.035em; }
.zt-dashboard-hero p { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; }
.zt-hero-action { position: relative; z-index: 1; display: inline-flex; min-height: 39px; align-items: center; gap: 8px; padding: 9px 14px; color: #07583f; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.zt-hero-action:hover { color: #064e3b; background: #eaf8f0; text-decoration: none; }
.zt-hero-orbit { position: absolute; display: block; width: 195px; height: 195px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; pointer-events: none; }
.zt-hero-orbit--one { top: -90px; right: 110px; }
.zt-hero-orbit--two { right: -40px; bottom: -145px; width: 255px; height: 255px; }
.zt-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; border: 0; }
.zt-profile-stat { min-height: 88px; padding: 14px 13px; background: #fff; border: 1px solid #dce5df; border-radius: 9px; box-shadow: 0 2px 8px rgba(20,45,31,.035); }
.zt-profile-stat:first-child { padding-left: 13px; }
.zt-profile-stat:last-child { padding-right: 13px; }
.zt-profile-stat, .zt-profile-stat:hover { color: #607067; }
.zt-profile-stat:hover { transform: translateY(-1px); border-color: #b7d9c5; box-shadow: 0 6px 14px rgba(20,45,31,.07); }
.zt-stat-icon { flex-basis: 36px; width: 36px; height: 36px; color: #078051; background: #eaf8f0; font-size: 14px; }
.zt-stat-copy strong { font-size: 19px; }
.zt-stat-copy > span { font-size: 10px; }
.client-home-cards > .row { margin-right: -8px; margin-left: -8px; }
.client-home-cards > .row > div { padding-right: 8px; padding-left: 8px; }
.client-home-cards .card { border-radius: 9px; }
.client-home-cards .card-header { min-height: 48px; }

@media (max-width: 1199.98px) {
    .zt-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .zt-dashboard-grid { grid-template-columns: 1fr; gap: 14px; }
    .zt-dashboard-account { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .zt-account-links { border-top: 0; border-left: 1px solid #e9efeb; }
    .zt-sidebar { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 575.98px) {
    .zt-dashboard-account { grid-template-columns: 1fr; }
    .zt-account-links { border-top: 1px solid #e9efeb; border-left: 0; }
    .zt-dashboard-hero { min-height: 150px; align-items: flex-start; flex-direction: column; justify-content: center; padding: 22px 20px; }
    .zt-dashboard-hero h1 { font-size: 23px; }
    .zt-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .zt-profile-stat { min-height: 78px; gap: 8px; padding: 10px; }
    .zt-profile-stat:first-child { padding-left: 10px; }
    .zt-profile-stat:last-child { padding-right: 10px; }
    .zt-stat-icon { flex-basis: 32px; width: 32px; height: 32px; }
}

.zt-topbar .zt-topbar-inner { width: 100%; max-width: none; margin: 0; padding-right: 30px; padding-left: 30px; }
@media (max-width: 575.98px) {
    .zt-topbar .zt-topbar-inner { padding-right: 14px; padding-left: 14px; }
}

/* Explicit text/link states inside branded dashboard surfaces */
body .primary-content .zt-dashboard-hero h1 { margin: 0 0 4px; color: #fff; font-size: 27px; }
body .primary-content .zt-dashboard-hero p { margin: 0; color: rgba(255,255,255,.78); }
body .primary-content .zt-account-profile h2 { margin: 0 0 3px; font-size: 16px; }
body .primary-content .zt-account-email { color: #75837a; }
body .primary-content a.zt-hero-action { color: #07583f; }
body .primary-content a.zt-hero-action:hover { color: #064e3b; }
body .primary-content a.zt-profile-stat { color: #607067; text-decoration: none; }
body .primary-content a.zt-profile-stat:hover { color: #087443; }
.zt-profile-stat:last-child { border-right: 1px solid #dce5df; }
.zt-profile-stat { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }


/* Requested typography, footer alignment, and roomier client navigation menus */
body,
body button,
body input,
body select,
body textarea,
body .primary-content {
    font-family: "Poppins", sans-serif !important;
}

.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer {
    width: auto;
    color: #c4d1c9;
    background: #14251e;
}
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer .zt-footer-inner {
    display: flex;
    width: 100%;
    max-width: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}
.zt-footer-links,
.zt-footer-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
}
.zt-footer-links .nav-link { padding: 6px 0; color: #e0e9e3; }
.zt-footer-links .nav-link:hover { color: #91f4c2; }
.zt-footer-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.zt-footer-tools .list-inline-item { margin: 0; }
.zt-footer-tools .btn { white-space: nowrap; }
.zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer .copyright { max-width: none; margin: 0; color: #aabbb0; text-align: right; line-height: 1.5; white-space: normal; }

.zt-sidebar .zt-client-nav .dropdown-menu {
    margin-top: 6px;
    margin-bottom: 9px;
    padding: 7px !important;
    background: #fbfdfb;
    border: 1px solid #e2ebe5;
    border-radius: 8px;
}
.zt-sidebar .zt-client-nav .dropdown-menu > li.dropdown-item { margin: 2px 0; padding: 0; }
.zt-sidebar .zt-client-nav .dropdown-menu > li.dropdown-item > a.dropdown-item {
    display: block;
    min-height: 38px;
    padding: 9px 11px !important;
    color: #53635a;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.55;
    white-space: normal;
}
.zt-sidebar .zt-client-nav .dropdown-menu > li.dropdown-item > a.dropdown-item:hover,
.zt-sidebar .zt-client-nav .dropdown-menu > li.dropdown-item > a.dropdown-item:focus {
    color: #087443;
    background: #eaf8f0;
}
@media (max-width: 991.98px) {
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer .zt-footer-inner { align-items: flex-start; flex-direction: column; }
    .zt-footer-meta { justify-content: flex-start; }
    .zt-app-shell:not(.zt-app-shell--guest) .zt-app-main #footer .copyright { text-align: left; }
    .zt-sidebar .zt-client-nav .dropdown-menu { position: absolute; }
}
@media (max-width: 575.98px) {
    .zt-footer-meta { align-items: flex-start; flex-direction: column; }
    .zt-footer-tools { gap: 4px 8px; }
}


/* Split-screen client login, based on the supplied reference */
body.zt-login-screen { min-height: 100vh; overflow-x: hidden; color: #f6f6f8; background: #111017; }
body.zt-login-screen #header,
body.zt-login-screen .master-breadcrumb,
body.zt-login-screen #footer { display: none !important; }
body.zt-login-screen .zt-app-shell--guest,
body.zt-login-screen .zt-app-shell--guest .zt-app-main { width: 100%; min-height: 100vh; padding: 0; background: #111017; }
body.zt-login-screen .zt-app-shell--guest #main-body { min-height: 100vh; margin: 0; padding: 0; background: #111017; }
body.zt-login-screen .zt-app-shell--guest #main-body > .container,
body.zt-login-screen .zt-app-shell--guest #main-body > .container > .row { width: 100%; max-width: none; margin: 0; padding: 0; }
body.zt-login-screen .zt-app-shell--guest #main-body > .container > .row > .primary-content { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }
.zt-login-layout { display: grid; width: 100%; min-height: 100vh; grid-template-columns: minmax(310px, 30%) minmax(0, 70%); background: #111017; }
.zt-login-brand-panel { position: relative; display: flex; min-height: 100vh; align-items: center; justify-content: center; overflow: hidden; padding: 56px clamp(28px, 6vw, 92px); background: #211d2a; }
.zt-login-brand-content { position: relative; z-index: 1; width: min(100%, 410px); }
.zt-login-logo { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 68px; padding: 10px 16px; background: #fff; border-radius: 8px; }
.zt-login-logo img { display: block; width: min(225px, 55vw); max-height: 58px; object-fit: contain; }
.zt-login-brand-content h2 { margin: 0 0 18px; color: #fff; font-size: clamp(21px, 1.55vw, 29px); font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.zt-login-brand-content p { max-width: 370px; margin: 0; color: #c6c1ce; font-size: 15px; line-height: 1.7; }
.zt-login-glow { position: absolute; display: block; width: 340px; height: 340px; border: 1px solid rgba(145,244,194,.07); border-radius: 50%; pointer-events: none; }
.zt-login-glow--one { top: -230px; left: -170px; }
.zt-login-glow--two { right: -270px; bottom: -230px; width: 440px; height: 440px; }
.zt-login-main { display: flex; min-width: 0; min-height: 100vh; align-items: center; justify-content: center; padding: 56px clamp(30px, 7vw, 110px); background: #111017; }
.zt-login-form-wrap { width: min(100%, 780px); margin: auto; }
.zt-login-heading { margin: 0 0 54px; text-align: center; }
.zt-login-eyebrow { display: block; margin-bottom: 11px; color: #91f4c2; font-size: 11px; font-weight: 600; letter-spacing: .16em; }
body.zt-login-screen .zt-login-heading h1 { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 2.1vw, 36px); font-weight: 600; letter-spacing: -.03em; }
body.zt-login-screen .zt-login-heading p { margin: 0; color: #aaa6b1; font-size: 14px; }
.zt-login-form .form-group { position: relative; margin-bottom: 15px; }
body.zt-login-screen .zt-login-form .form-control { height: 56px; padding: 14px 17px; color: #222; background: #fff; border: 1px solid #dedde2; border-radius: 7px; font-size: 14px; }
body.zt-login-screen .zt-login-form .form-control::placeholder { color: #92909a; opacity: 1; }
body.zt-login-screen .zt-login-form .form-control:focus { border-color: #91f4c2; box-shadow: 0 0 0 3px rgba(145,244,194,.18); }
.zt-login-password-group .form-control { padding-right: 52px !important; }
.zt-login-password-group .btn-reveal-pw { position: absolute; top: 50%; right: 8px; z-index: 3; width: 38px; height: 38px; transform: translateY(-50%); color: #68776e; background: transparent; border: 0; }
.zt-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 17px 0 27px; color: #c6c1ce; font-size: 13px; }
.zt-login-options a { color: #91f4c2; }
.zt-remember-me { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.zt-remember-me input { width: 15px; height: 15px; accent-color: #059669; }
.zt-login-captcha { margin-bottom: 18px; }
body.zt-login-screen .zt-login-form .zt-login-submit { display: flex; min-width: 194px; min-height: 54px; align-items: center; justify-content: center; margin: 0 auto; padding: 13px 30px; color: #062d20; background: #91f4c2; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 25px rgba(5,150,105,.16); }
body.zt-login-screen .zt-login-form .zt-login-submit:hover,
body.zt-login-screen .zt-login-form .zt-login-submit:focus { color: #062d20; background: #71e8ad; }
.zt-login-register { margin-top: 34px; color: #aaa6b1; font-size: 13px; text-align: center; }
.zt-login-register a { margin-left: 6px; color: #91f4c2; font-weight: 600; }
body.zt-login-screen .providerLinkingFeedback { display: none; }
body.zt-login-screen .providerLinkingFeedback:not(:empty) { display: block; }
body.zt-login-screen .login-form .alert { margin-bottom: 18px; }
body.zt-login-screen .login-form .alert a { color: inherit; text-decoration: underline; }
body.zt-login-screen .linked-accounts { margin-top: 24px; color: #aaa6b1; text-align: center; }
body.zt-login-screen .linked-accounts a { color: #91f4c2; }
@media (max-width: 767.98px) {
    .zt-login-layout { grid-template-columns: 1fr; }
    .zt-login-brand-panel { min-height: auto; justify-content: flex-start; padding: 26px 24px; }
    .zt-login-brand-content { display: flex; align-items: center; gap: 18px; }
    .zt-login-logo { flex: 0 0 auto; margin: 0; padding: 7px 10px; }
    .zt-login-logo img { width: 150px; max-width: 34vw; max-height: 42px; }
    .zt-login-brand-content h2 { margin: 0 0 4px; font-size: 17px; }
    .zt-login-brand-content p { font-size: 12px; line-height: 1.45; }
    .zt-login-main { min-height: auto; padding: 50px 24px 64px; }
    .zt-login-heading { margin-bottom: 34px; }
    .zt-login-glow--one { top: -280px; left: auto; right: -100px; }
    .zt-login-glow--two { display: none; }
}
@media (max-width: 480px) {
    .zt-login-brand-content { align-items: flex-start; flex-direction: column; gap: 15px; }
    .zt-login-brand-content p { max-width: 290px; }
    .zt-login-main { padding: 38px 20px 52px; }
    .zt-login-options { font-size: 12px; }
}

/* Light version of the split login keeps the transparent black-and-mint logo visible */
body.zt-login-screen,
body.zt-login-screen .zt-app-shell--guest,
body.zt-login-screen .zt-app-shell--guest .zt-app-main,
body.zt-login-screen .zt-app-shell--guest #main-body,
.zt-login-layout,
.zt-login-main {
    color: #17251f;
    background: #f5f8f6;
}
.zt-login-brand-panel { background: #eaf8f0; }
.zt-login-logo { margin-bottom: 68px; padding: 0; background: transparent; border-radius: 0; }
.zt-login-brand-content h2,
body.zt-login-screen .zt-login-heading h1 { color: #17251f; }
.zt-login-brand-content p,
body.zt-login-screen .zt-login-heading p,
.zt-login-options,
.zt-login-register,
body.zt-login-screen .linked-accounts { color: #68776e; }
.zt-login-eyebrow,
.zt-login-options a,
.zt-login-register a,
body.zt-login-screen .linked-accounts a { color: #047857; }
body.zt-login-screen .zt-login-form .zt-login-submit { color: #fff; background: #059669; }
body.zt-login-screen .zt-login-form .zt-login-submit:hover,
body.zt-login-screen .zt-login-form .zt-login-submit:focus { color: #fff; background: #047857; }
.zt-login-glow { border-color: rgba(5,150,105,.09); }
@media (max-width: 767.98px) {
    .zt-login-logo { margin-bottom: 0; }
}

#footer { display: none !important; }


.client-home-cards [menuItemName="Recent News"] {
    display: none !important;
}

@media (min-width: 992px) {
    .zt-app-shell:not(.zt-app-shell--guest) {
        align-items: stretch;
    }

    .zt-app-shell:not(.zt-app-shell--guest) > .zt-sidebar {
        position: sticky;
        top: 0;
        bottom: 0;
        align-self: start;
        height: calc(100vh - 76px);
        min-height: calc(100vh - 76px);
        background: #fff;
    }
}

@media (min-width: 992px) {
    .zt-app-shell:not(.zt-app-shell--guest) > .zt-sidebar {
        height: 100vh;
        min-height: 100vh;
        background: #fff;
    }
}

/* ZEROTRACE HTML invoice page (viewinvoice.php) */
body.zt-invoice-page-body {
    color: #17251f;
    background: #f2f7f4 !important;
    font-family: "Poppins", Arial, sans-serif;
}
.zt-invoice-page.invoice-container {
    width: calc(100% - 36px);
    max-width: 1120px;
    margin: 36px auto 24px;
    padding: 34px 38px;
    background: #fff;
    border: 1px solid #dfe9e3;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(22, 49, 33, .08);
}
.zt-invoice-page .invoice-header {
    display: flex;
    align-items: center;
    padding: 4px 0 24px;
    border-bottom: 1px solid #e7eee9;
}
.zt-invoice-page .invoice-header img { max-width: 220px; max-height: 70px; object-fit: contain; }
.zt-invoice-page .invoice-header h2 { margin: 4px 0 10px; color: #17251f; font-size: 24px; font-weight: 700; }
.zt-invoice-page .invoice-header h3 { margin: 8px 0 0; color: #68776e; font-size: 15px; font-weight: 500; }
.zt-invoice-page .invoice-status { margin-bottom: 12px; }
.zt-invoice-page .invoice-status span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.zt-invoice-page .invoice-status .paid { color: #087443; background: #e5f7ed; }
.zt-invoice-page .invoice-status .unpaid { color: #a52d2d; background: #fde9e8; }
.zt-invoice-page .invoice-status .draft,
.zt-invoice-page .invoice-status .cancelled { color: #59675f; background: #edf1ee; }
.zt-invoice-page .invoice-status .refunded { color: #24577b; background: #eaf4fb; }
.zt-invoice-page .invoice-status .collections { color: #fff; background: #34433b; }
.zt-invoice-page hr { margin: 20px 0; border-color: #e7eee9; }
.zt-invoice-page .invoice-col { color: #34433b; line-height: 1.65; }
.zt-invoice-page .invoice-col strong { color: #17251f; font-size: 12px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.zt-invoice-page .invoice-col address { margin-top: 7px; color: #68776e; line-height: 1.7; }
.zt-invoice-page .small-text { color: #68776e; font-size: 13px; }
.zt-invoice-page .payment-btn-container { margin: 10px auto 0; }
.zt-invoice-page .payment-btn-container .btn,
.zt-invoice-page #btnInvoiceAddCreditApply { min-height: 42px; padding: 10px 18px; color: #fff; background: #059669; border-color: #059669; border-radius: 7px; font-weight: 650; }
.zt-invoice-page .payment-btn-container .btn:hover,
.zt-invoice-page #btnInvoiceAddCreditApply:hover { background: #047857; border-color: #047857; }
.zt-invoice-page .card { overflow: hidden; border: 1px solid #e1e9e4; border-radius: 11px; box-shadow: 0 4px 16px rgba(20,45,31,.045); }
.zt-invoice-page .card-header { padding: 15px 19px; color: #17251f; background: #fff; border-bottom: 1px solid #e7eee9; }
.zt-invoice-page .card-title { color: #17251f; font-size: 17px; font-weight: 650; }
.zt-invoice-page .table { margin: 0; color: #34433b; }
.zt-invoice-page .table thead { background: #f4f8f5; }
.zt-invoice-page .table thead td { padding: 13px 16px; color: #65736a; border-color: #e7eee9; font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.zt-invoice-page .table tbody td { padding: 13px 16px; border-color: #edf1ee; vertical-align: middle; }
.zt-invoice-page .table tbody tr:last-child td { background: #f4f8f5; font-weight: 700; }
.zt-invoice-page .table-responsive { border: 0; }
.zt-invoice-page .transactions-container .table tbody tr:last-child td { color: #17251f; }
.zt-invoice-page .bg-info { color: #17251f !important; background: #f4f8f5 !important; border-bottom: 1px solid #e7eee9; }
.zt-invoice-page .form-control,
.zt-invoice-page .custom-select { min-height: 40px; border: 1px solid #d5dfd8; border-radius: 7px; box-shadow: none; }
.zt-invoice-page .invoice-qr-wrapper { padding: 15px; background: #f8fbf9; border: 1px solid #e7eee9; border-radius: 9px; }
.zt-invoice-page + .text-center a { color: #047857; font-weight: 600; }
@media (max-width: 767.98px) {
    .zt-invoice-page.invoice-container { width: calc(100% - 20px); margin: 12px auto 18px; padding: 20px 15px; border-radius: 10px; }
    .zt-invoice-page .invoice-header { gap: 14px; }
    .zt-invoice-page .invoice-header img { max-width: 190px; }
    .zt-invoice-page .invoice-header .invoice-col { padding-bottom: 12px; }
    .zt-invoice-page .table thead td,
    .zt-invoice-page .table tbody td { padding: 10px 9px; }
}
@media print {
    body.zt-invoice-page-body { background: #fff !important; }
    .zt-invoice-page.invoice-container { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .zt-invoice-page-body > p, .zt-invoice-page-body .d-print-none { display: none !important; }
}