/* Client Portal Pro — modern skin for the Perfex client area.
   Cosmetic only: colors, radius, spacing, shadows. No layout or behavior changes. */

body.customers {
    --cpp-bg: #f5f7fb;
    --cpp-surface: #ffffff;
    --cpp-ink: #0f172a;
    --cpp-text: #334155;
    --cpp-muted: #64748b;
    --cpp-line: #e2e8f0;
    --cpp-soft: #f8fafc;
    --cpp-accent: #4f46e5;
    --cpp-accent-hover: #4338ca;
    --cpp-accent-soft: #eef2ff;
    --cpp-ok: #059669;
    --cpp-warn: #d97706;
    --cpp-danger: #dc2626;
    --cpp-radius: 14px;
    --cpp-radius-sm: 10px;
    --cpp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
    --cpp-shadow-hover: 0 12px 32px rgba(15, 23, 42, .08);
    background: var(--cpp-bg);
    color: var(--cpp-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.customers #wrapper,
body.customers #content { background: transparent; }
body.customers #content { padding-top: 28px; padding-bottom: 40px; }

body.customers h1, body.customers h2, body.customers h3, body.customers h4 { color: var(--cpp-ink); letter-spacing: -.01em; }
body.customers a { color: var(--cpp-accent); }
body.customers a:hover, body.customers a:focus { color: var(--cpp-accent-hover); }

/* ── Top navigation ───────────────────────────────────────── */
/* Sticky, frosted bar; pill links with icons; active item highlighted. */
body.customers .navbar.header {
    position: sticky; top: 0; z-index: 1030;
    min-height: 68px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 0;
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 24px rgba(15, 23, 42, .03);
    margin-bottom: 0;
}
body.customers .navbar.header .navbar-brand { display: flex; align-items: center; height: 68px; padding-top: 0; padding-bottom: 0; }
body.customers .navbar.header .navbar-brand img { max-height: 36px; width: auto; }
body.customers .navbar.header .navbar-nav > li > a {
    display: inline-flex; align-items: center; gap: 7px;
    color: #475569;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border-radius: 10px;
    margin: 14px 1px;
    padding: 8px 12px;
    transition: background .15s, color .15s, box-shadow .15s;
}
body.customers .navbar.header .navbar-nav > li > a:hover,
body.customers .navbar.header .navbar-nav > li > a:focus { background: #f1f5f9; color: var(--cpp-ink); }
body.customers .navbar.header .navbar-nav > li.active > a,
body.customers .navbar.header .navbar-nav > li.active > a:hover,
body.customers .navbar.header .navbar-nav > li.active > a:focus {
    background: var(--cpp-accent-soft); color: var(--cpp-accent); font-weight: 600;
    box-shadow: inset 0 0 0 1px #e0e7ff;
}

/* No icons in the top navigation (on request). Covers icons passed by modules too. */
body.customers .navbar.header .navbar-nav > li:not(.customers-nav-item-profile) > a > i,
body.customers .navbar.header .navbar-nav > li:not(.customers-nav-item-profile) > a > svg { display: none !important; }

/* Profile avatar */
body.customers .navbar.header .navbar-nav > li.customers-nav-item-profile > a { padding: 4px; margin-left: 8px; border-radius: 999px; }
body.customers .navbar.header .navbar-nav > li.customers-nav-item-profile > a:hover { background: transparent; }
body.customers .client-profile-image-small {
    width: 36px; height: 36px; object-fit: cover; border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c7d2fe;
    transition: box-shadow .15s;
}
body.customers .customers-nav-item-profile > a:hover .client-profile-image-small,
body.customers .customers-nav-item-profile.open .client-profile-image-small { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cpp-accent); }
body.customers .customers-nav-item-profile .dropdown-menu { min-width: 210px; margin-top: 6px; }

/* Desktop/tablet: logo and menu on one row; the menu wraps on the right only if it must. */
@media (min-width: 768px) {
    body.customers .navbar.header > .container { display: flex; align-items: center; gap: 16px; }
    body.customers .navbar.header > .container::before,
    body.customers .navbar.header > .container::after { display: none; }
    body.customers .navbar.header .navbar-header { float: none; flex-shrink: 0; }
    body.customers .navbar.header .navbar-collapse { flex: 1 1 auto; min-width: 0; padding: 0; display: flex !important; justify-content: flex-end; }
    body.customers .navbar.header .navbar-nav.navbar-right { float: none !important; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin: 0; }
    body.customers .navbar.header .navbar-nav > li { float: none; }
}
/* Medium widths: compact items, no icons, so the whole menu fits on one line. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.customers .navbar.header .navbar-nav > li > a { padding: 7px 9px; font-size: 13px; gap: 0; }
    body.customers .navbar.header .navbar-nav > li > a > i,
    body.customers .navbar.header .navbar-nav > li[class*="customers-nav-item-"] > a::before { display: none; }
    body.customers .navbar.header .navbar-brand img { max-height: 30px; }
}
/* Phones: menu opens as a card list under the bar. */
@media (max-width: 767px) {
    body.customers .navbar.header { min-height: 60px; }
    body.customers .navbar.header .navbar-brand { height: 60px; }
    body.customers .navbar.header .navbar-brand img { max-height: 30px; }
    body.customers .navbar-toggle { margin: 12px 0; padding: 10px; border: 0; border-radius: 12px; background: #f1f5f9; }
    body.customers .navbar-toggle:hover, body.customers .navbar-toggle:focus { background: var(--cpp-accent-soft); }
    body.customers .navbar-toggle .icon-bar { width: 20px; height: 2px; border-radius: 2px; background: var(--cpp-ink); transition: transform .2s, opacity .2s; }
    body.customers .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) { transform: translateY(6px) rotate(45deg); }
    body.customers .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) { opacity: 0; }
    body.customers .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4) { transform: translateY(-6px) rotate(-45deg); }
    body.customers .navbar.header .navbar-collapse { border-top: 1px solid var(--cpp-line); box-shadow: none; padding: 8px 0 12px; max-height: calc(100vh - 60px); }
    body.customers .navbar.header .navbar-nav { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    body.customers .navbar.header .navbar-nav > li > a {
        display: flex; margin: 0; padding: 12px 14px; font-size: 14px;
        background: var(--cpp-soft); border: 1px solid var(--cpp-line); border-radius: 12px;
    }
    body.customers .navbar.header .navbar-nav > li.active > a { border-color: #c7d2fe; }
    body.customers .navbar.header .navbar-nav > li.customers-nav-item-profile { grid-column: 1 / -1; }
    body.customers .navbar.header .navbar-nav > li.customers-nav-item-profile > a { margin: 4px 0 0; background: transparent; border: 0; }
    body.customers .navbar.header .navbar-nav .open .dropdown-menu { position: static; float: none; border: 1px solid var(--cpp-line); box-shadow: none; padding: 4px; margin-top: 6px; background: #fff; }
}

body.customers .dropdown-menu {
    border: 1px solid var(--cpp-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    padding: 6px;
}
body.customers .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; color: var(--cpp-text); }
body.customers .dropdown-menu > li > a:hover { background: var(--cpp-soft); color: var(--cpp-ink); }

/* ── Sub menu (Files / Calendar) ─────────────────────────── */
/* Files and Calendar buttons hidden on request; other modules' items still show. */
body.customers .submenu.customer-top-submenu > li.customers-top-submenu-files,
body.customers .submenu.customer-top-submenu > li.customers-top-submenu-calendar { display: none !important; }
body.customers .submenu.customer-top-submenu:not(:has(> li:not(.customers-top-submenu-files):not(.customers-top-submenu-calendar))) { display: none !important; }
body.customers .submenu.customer-top-submenu { margin: 0 15px 20px; padding: 0; }
body.customers .submenu.customer-top-submenu li a {
    background: var(--cpp-surface);
    border: 1px solid var(--cpp-line);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--cpp-text);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .15s, color .15s;
}
body.customers .submenu.customer-top-submenu li a:hover { border-color: #c7d2fe; color: var(--cpp-accent); text-decoration: none; }

/* ── Panels / cards ──────────────────────────────────────── */
body.customers .panel_s {
    background: var(--cpp-surface);
    border: 1px solid var(--cpp-line);
    border-radius: var(--cpp-radius);
    box-shadow: var(--cpp-shadow);
}
body.customers .panel_s > .panel-body { padding: 22px 24px; background: transparent; }
body.customers .panel_s .panel-heading,
body.customers .panel-heading {
    background: var(--cpp-soft);
    border-bottom: 1px solid var(--cpp-line);
    color: var(--cpp-ink);
    font-weight: 600;
    padding: 14px 24px;
}
body.customers .panel-footer { background: var(--cpp-soft); border-top: 1px solid var(--cpp-line); }
body.customers .section-heading,
body.customers .section-heading-divider { border: 0 !important; }
body.customers hr { border-top-color: var(--cpp-line); }

/* ── Buttons ─────────────────────────────────────────────── */
body.customers .btn {
    border-radius: var(--cpp-radius-sm);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
body.customers .btn-sm, body.customers .btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
body.customers .btn-primary,
body.customers .btn-info { background: var(--cpp-accent); border-color: var(--cpp-accent); color: #fff; }
body.customers .btn-primary:hover, body.customers .btn-primary:focus,
body.customers .btn-info:hover, body.customers .btn-info:focus {
    background: var(--cpp-accent-hover); border-color: var(--cpp-accent-hover); color: #fff;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .25);
}
body.customers .btn-success { background: var(--cpp-ok); border-color: var(--cpp-ok); }
body.customers .btn-danger { background: var(--cpp-danger); border-color: var(--cpp-danger); }
/* Coloured buttons always have white text, also when the button is a link (e.g. Pay Now). */
body.customers a.btn-primary, body.customers a.btn-info, body.customers a.btn-success, body.customers a.btn-danger, body.customers a.btn-warning,
body.customers .btn-success, body.customers .btn-danger, body.customers .btn-warning,
body.customers a.btn-primary:hover, body.customers a.btn-info:hover, body.customers a.btn-success:hover, body.customers a.btn-danger:hover, body.customers a.btn-warning:hover,
body.customers a.btn-primary:focus, body.customers a.btn-info:focus, body.customers a.btn-success:focus, body.customers a.btn-danger:focus, body.customers a.btn-warning:focus,
body.customers .btn-success:hover, body.customers .btn-danger:hover, body.customers .btn-warning:hover { color: #fff; }
body.customers .btn-success:hover, body.customers .btn-success:focus { background: #047857; border-color: #047857; }
body.customers .btn-default { background: #fff; border-color: var(--cpp-line); color: var(--cpp-text); }
body.customers .btn-default:hover, body.customers .btn-default:focus { background: var(--cpp-soft); border-color: #cbd5e1; color: var(--cpp-ink); }
body.customers .btn:active { transform: translateY(1px); box-shadow: none; }

/* ── Forms ───────────────────────────────────────────────── */
body.customers .form-control,
body.customers .bootstrap-select > .dropdown-toggle {
    border: 1px solid var(--cpp-line);
    border-radius: var(--cpp-radius-sm);
    box-shadow: none;
    color: var(--cpp-ink);
    transition: border-color .15s, box-shadow .15s;
}
body.customers input.form-control, body.customers select.form-control { min-height: 40px; }
body.customers .form-control:focus,
body.customers .bootstrap-select.open > .dropdown-toggle {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
    outline: 0;
}
body.customers label,
body.customers .control-label { color: var(--cpp-text); font-weight: 500; font-size: 13px; }
body.customers .input-group-addon { background: var(--cpp-soft); border-color: var(--cpp-line); border-radius: var(--cpp-radius-sm); }

/* ── Tables (incl. DataTables) ───────────────────────────── */
body.customers .table { color: var(--cpp-text); }
body.customers .table > thead > tr > th {
    background: var(--cpp-soft);
    border-bottom: 1px solid var(--cpp-line) !important;
    border-top: 0;
    color: var(--cpp-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 14px;
}
body.customers .table > tbody > tr > td { border-top: 1px solid var(--cpp-line); padding: 13px 14px; vertical-align: middle; }
body.customers .table > tbody > tr:hover > td { background: var(--cpp-soft); }
body.customers .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
body.customers .dataTables_wrapper .dataTables_filter input,
body.customers .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--cpp-line);
    border-radius: var(--cpp-radius-sm);
    padding: 6px 10px;
}
body.customers .dataTables_wrapper .dataTables_info { color: var(--cpp-muted); font-size: 12px; }

/* ── Pagination ──────────────────────────────────────────── */
body.customers .pagination > li > a,
body.customers .pagination > li > span {
    border: 1px solid var(--cpp-line);
    border-radius: 8px !important;
    margin: 0 2px;
    color: var(--cpp-text);
}
body.customers .pagination > .active > a,
body.customers .pagination > .active > a:hover,
body.customers .pagination > .active > span { background: var(--cpp-accent); border-color: var(--cpp-accent); color: #fff; }

/* ── Labels, badges, alerts ──────────────────────────────── */
body.customers .label {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    letter-spacing: .02em;
}
body.customers .badge { border-radius: 999px; font-weight: 600; }
body.customers .alert { border-radius: var(--cpp-radius-sm); border-width: 1px; box-shadow: none; }
body.customers .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
body.customers .alert-info { background: var(--cpp-accent-soft); border-color: #c7d2fe; color: #3730a3; }
body.customers .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.customers .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── Tabs ────────────────────────────────────────────────── */
body.customers .nav-tabs { border-bottom: 1px solid var(--cpp-line); }
body.customers .nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cpp-muted);
    font-weight: 500;
    margin-right: 6px;
}
body.customers .nav-tabs > li > a:hover { background: transparent; color: var(--cpp-ink); border-bottom-color: var(--cpp-line); }
body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li.active > a:hover,
body.customers .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--cpp-accent); color: var(--cpp-accent); background: transparent; }

/* ── Modals ──────────────────────────────────────────────── */
body.customers .modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18); }
body.customers .modal-header { border-bottom: 1px solid var(--cpp-line); padding: 18px 24px; }
body.customers .modal-footer { border-top: 1px solid var(--cpp-line); padding: 14px 24px; }
body.customers .modal-backdrop.in { opacity: .45; }

/* ── Stats widgets that ship with the theme ──────────────── */
body.customers .invoice-quick-info,
body.customers .invoices-stats .panel_s,
body.customers .project-summary .panel_s { border-radius: var(--cpp-radius); }
body.customers .progress { border-radius: 999px; background: #eef2f7; box-shadow: none; }
body.customers .progress-bar { border-radius: 999px; box-shadow: none; }

/* Quick invoices info: bars tall enough for the "0.00%" text printed inside them */
body.customers .invoices-stats .progress { height: 18px; margin-bottom: 0; overflow: hidden; }
body.customers .invoices-stats .progress-bar { height: 18px; line-height: 18px; font-size: 11px; font-weight: 600; white-space: nowrap; }
body.customers .invoices-stats .stats-status a { font-weight: 600; }
body.customers .invoices-stats .stats-numbers { color: var(--cpp-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 991px) {
    /* status name and "0 / 13" on one line, and two statuses per row */
    body.customers .invoices-stats .stats-status { float: left; width: 60%; }
    body.customers .invoices-stats .stats-numbers { float: left; width: 40%; }
    body.customers .invoices-stats > [class*="col-md-3"] { float: left; width: 50%; margin-bottom: 14px; }
    body.customers .invoices-stats > [class*="col-md-3"]:nth-child(odd) { clear: left; }
}
@media (max-width: 359px) {
    body.customers .invoices-stats > [class*="col-md-3"] { float: none; width: 100%; }
}

/* Projects summary (tw-grid-cols-1 on phones): 3 per row instead of one tall stack */
body.customers dl.tw-grid.md\:tw-grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { body.customers dl.tw-grid.md\:tw-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 767px) {
    body.customers dl.tw-grid.md\:tw-grid-cols-5 > a > div { padding: 10px 10px !important; }
    body.customers dl.tw-grid.md\:tw-grid-cols-5 dt { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.customers dl.tw-grid.md\:tw-grid-cols-5 dd > div { font-size: 18px; }
}
body.customers dl.tw-grid.md\:tw-grid-cols-5 > a {
    border-radius: 12px !important;
    border-color: var(--cpp-line) !important;
    background: var(--cpp-surface) !important;
    box-shadow: var(--cpp-shadow);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
body.customers dl.tw-grid.md\:tw-grid-cols-5 > a:hover { border-color: #c7d2fe !important; box-shadow: var(--cpp-shadow-hover); }
body.customers dl.tw-grid.md\:tw-grid-cols-5 > a > div { padding: 12px 14px !important; }
body.customers dl.tw-grid.md\:tw-grid-cols-5 dt { font-size: 13px; }
body.customers dl.tw-grid.md\:tw-grid-cols-5 dd > div { font-size: 20px; color: var(--cpp-ink); }

/* ── Login / register / password pages ───────────────────── */
body.customers .login-heading,
body.customers .register-heading { font-size: 26px; font-weight: 700; color: var(--cpp-ink); }
body.customers .login-form .panel_s,
body.customers .register-form .panel_s,
body.customers form.login-form > .panel_s { box-shadow: 0 20px 50px rgba(15, 23, 42, .08); }

/* ── Footer ──────────────────────────────────────────────── */
body.customers footer,
body.customers .footer { background: transparent; border-top: 1px solid var(--cpp-line); color: var(--cpp-muted); }

/* ═══ Dashboard block (views/dashboard.php) ═══════════════ */
.cpp-dash { margin: 6px 0 28px; }

.cpp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.cpp-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--cpp-surface);
    border: 1px solid var(--cpp-line);
    border-radius: 999px;
    color: var(--cpp-text) !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s, color .15s, box-shadow .15s;
}
.cpp-action i { color: var(--cpp-accent); }
.cpp-action:hover { border-color: #c7d2fe; color: var(--cpp-accent) !important; box-shadow: var(--cpp-shadow); }

/* Flex rows: cards grow to fill each row, so a lone card never leaves a gap. */
.cpp-kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.cpp-kpi {
    flex: 1 1 210px; min-width: 0;
    position: relative; display: block;
    padding: 18px 20px;
    background: var(--cpp-surface);
    border: 1px solid var(--cpp-line);
    border-radius: var(--cpp-radius);
    box-shadow: var(--cpp-shadow);
    color: inherit !important; text-decoration: none !important;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
a.cpp-kpi:hover { border-color: #c7d2fe; box-shadow: var(--cpp-shadow-hover); transform: translateY(-2px); }
.cpp-kpi-icon {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cpp-accent-soft); color: var(--cpp-accent);
}
.cpp-kpi-label { display: block; padding-right: 44px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cpp-muted); }
.cpp-kpi b { display: block; margin-top: 8px; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--cpp-ink); font-variant-numeric: tabular-nums; }
.cpp-kpi small { display: block; margin-top: 6px; font-size: 12px; color: var(--cpp-muted); }
/* Work in progress: projects / tasks / tickets in one card */
.cpp-kpi-work { flex: 1 1 100%; }
.cpp-kpi-work .cpp-kpi-label { padding-right: 0; }
.cpp-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.cpp-work-item {
    display: flex; flex-direction: column; min-width: 0;
    border-radius: 12px; background: var(--cpp-soft); border: 1px solid var(--cpp-line);
    overflow: hidden; transition: border-color .15s;
}
.cpp-work-item:hover { border-color: #c7d2fe; }
.cpp-work-count { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: inherit !important; text-decoration: none !important; }
.cpp-work-count:hover { background: var(--cpp-accent-soft); }
.cpp-work-ico { flex-shrink: 0; display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: var(--cpp-accent-soft); color: var(--cpp-accent); font-size: 13px; }
.cpp-work-count b { font-size: 24px; line-height: 1; font-weight: 700; color: var(--cpp-ink); font-variant-numeric: tabular-nums; }
.cpp-work-name { font-size: 13px; font-weight: 600; color: var(--cpp-ink); }
.cpp-work-name small { font-weight: 400; color: var(--cpp-muted); }
.cpp-work-latest {
    display: block; flex: 1; min-width: 0; padding: 10px 14px 12px;
    background: var(--cpp-surface); border-top: 1px solid var(--cpp-line);
    color: inherit !important; text-decoration: none !important;
}
a.cpp-work-latest:hover { background: #fafbff; }
a.cpp-work-latest:hover strong { color: var(--cpp-accent); }
.cpp-work-latest small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cpp-muted); }
.cpp-work-latest strong { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--cpp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpp-work-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--cpp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpp-work-meta i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.cpp-work-latest.is-empty small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
@media (max-width: 767px) {
    .cpp-work { grid-template-columns: 1fr; gap: 8px; }
    .cpp-work-item { flex-direction: row; }
    .cpp-work-count { flex-shrink: 0; width: 42%; padding: 10px 12px; }
    .cpp-work-count b { font-size: 20px; }
    .cpp-work-latest { border-top: 0; border-left: 1px solid var(--cpp-line); padding: 9px 12px; }
}

/* Spend tier badges: Starter / Power Client / VIP */
.cpp-tier {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 10px; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: middle;
    color: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}
.cpp-tier.is-starter { background: linear-gradient(135deg, #10b981, #059669); }
.cpp-tier.is-power { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.cpp-tier.is-gold { background: linear-gradient(135deg, #f59e0b, #b45309); }
.cpp-tier.is-vip { background: linear-gradient(135deg, #1e293b, #020617); color: #fcd34d; box-shadow: 0 0 0 1px #fbbf24 inset, 0 4px 14px rgba(251, 191, 36, .35); }
.cpp-tier-sm { margin: 8px 0 0; padding: 2px 10px; font-size: 11px; box-shadow: none; }
.cpp-kpi-spend.is-starter { border-color: #a7f3d0; }
.cpp-kpi-spend.is-power { border-color: #c7d2fe; }
.cpp-kpi-spend.is-gold { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff 60%); }
.cpp-kpi-spend.is-vip { border-color: #fbbf24; background: linear-gradient(180deg, #fef9c3, #fff 55%); box-shadow: 0 0 0 1px #fbbf24, 0 10px 30px rgba(251, 191, 36, .18); }
.cpp-kpi-spend.is-starter .cpp-kpi-icon { background: #ecfdf5; color: #059669; }
.cpp-kpi-spend.is-gold .cpp-kpi-icon { background: #fef3c7; color: #b45309; }
.cpp-kpi-spend.is-vip .cpp-kpi-icon { background: #0f172a; color: #fbbf24; }
.cpp-tier-bar { display: block; height: 6px; margin-top: 10px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.cpp-tier-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
@media (max-width: 767px) { #greeting .cpp-tier { margin: 6px 0 0; display: inline-flex; } }
.cpp-tier.is-none { background: #f1f5f9; color: #475569; box-shadow: none; border: 1px dashed #cbd5e1; }
.cpp-tier-info { font-size: 10px; opacity: .75; }

/* ── Level card (game-style tier popover) ────────────────── */
.cpp-tier-wrap { position: relative; display: inline-block; cursor: pointer; outline: 0; vertical-align: middle; }
.cpp-tier-wrap:focus-visible .cpp-tier { box-shadow: 0 0 0 3px rgba(99, 102, 241, .35); }
.cpp-pop {
    position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
    width: 330px; max-width: calc(100vw - 32px);
    display: block; padding: 16px;
    background: radial-gradient(120% 80% at 0% 0%, #312e81 0%, #0f172a 55%);
    color: #e2e8f0; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
    font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
    opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: top left;
    transition: opacity .18s, transform .18s, visibility .18s;
    cursor: default;
}
.cpp-pop::before { content: ''; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px; background: #2a2a6a; transform: rotate(45deg); border-radius: 2px; }
.cpp-pop.is-right { left: auto; right: 0; transform-origin: top right; }
.cpp-pop.is-right::before { left: auto; right: 22px; }
@media (hover: hover) { .cpp-tier-wrap:hover .cpp-pop { opacity: 1; visibility: visible; transform: none; } }
.cpp-tier-wrap.is-open .cpp-pop, .cpp-tier-wrap:focus-visible .cpp-pop { opacity: 1; visibility: visible; transform: none; }

.cpp-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cpp-pop-head b { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.cpp-pop-head em { display: block; font-style: normal; font-size: 12px; color: #a5b4fc; }
.cpp-pop-lv {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #fff; line-height: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 18px rgba(99, 102, 241, .55);
}
.cpp-pop-lv small { font-size: 9px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.cpp-pop-lv.is-starter { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 18px rgba(16,185,129,.55); }
.cpp-pop-lv.is-power { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.cpp-pop-lv.is-gold { background: linear-gradient(135deg, #fbbf24, #b45309); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 22px rgba(251,191,36,.6); }
.cpp-pop-lv.is-vip { background: linear-gradient(135deg, #1e293b, #020617); color: #fcd34d; border: 2px solid #fbbf24; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 22px rgba(251,191,36,.6); }
.cpp-pop-lv.is-none { background: #334155; box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

.cpp-pop-xp { position: relative; display: block; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.cpp-pop-xp i {
    position: relative; display: block; height: 100%; min-width: 6px; border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7);
    box-shadow: 0 0 12px rgba(99, 102, 241, .7);
    overflow: hidden;
}
.cpp-pop-xp i::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-100%); animation: cpp-shimmer 2.2s infinite;
}
@keyframes cpp-shimmer { to { transform: translateX(100%); } }
.cpp-pop-xp-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cpp-pop-goal { display: block; margin: 12px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(99, 102, 241, .16); border: 1px solid rgba(165, 180, 252, .25); color: #e0e7ff; }
.cpp-pop-goal b { color: #fff; }
.cpp-pop-goal.is-max { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); color: #fef3c7; }

.cpp-pop-ladder { display: block; }
.cpp-pop-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cpp-pop-step + .cpp-pop-step::before { content: ''; position: absolute; left: 15px; top: -8px; height: 16px; border-left: 2px dashed rgba(255, 255, 255, .15); }
.cpp-pop-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255, 255, 255, .08); color: #64748b; }
.cpp-pop-step.is-done .cpp-pop-ico, .cpp-pop-step.is-here .cpp-pop-ico { color: #fff; }
.cpp-pop-step.is-starter:not(.is-locked) .cpp-pop-ico { background: linear-gradient(135deg, #10b981, #059669); }
.cpp-pop-step.is-power:not(.is-locked) .cpp-pop-ico { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.cpp-pop-step.is-gold:not(.is-locked) .cpp-pop-ico { background: linear-gradient(135deg, #fbbf24, #b45309); }
.cpp-pop-step.is-vip:not(.is-locked) .cpp-pop-ico { background: linear-gradient(135deg, #1e293b, #020617); color: #fcd34d; box-shadow: inset 0 0 0 1px #fbbf24; }
.cpp-pop-step.is-here .cpp-pop-ico { animation: cpp-glow 1.8s ease-in-out infinite; }
@keyframes cpp-glow { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15), 0 0 16px rgba(165, 180, 252, .8); } }
.cpp-pop-name { flex: 1; min-width: 0; }
.cpp-pop-name b { display: block; font-size: 13px; color: #fff; }
.cpp-pop-name em { display: block; font-style: normal; font-size: 11px; color: #94a3b8; }
.cpp-pop-step.is-locked .cpp-pop-name b { color: #94a3b8; }
.cpp-pop-state { flex-shrink: 0; font-size: 11px; font-weight: 600; color: #64748b; }
.cpp-pop-step.is-done .cpp-pop-state { color: #34d399; }
.cpp-pop-step.is-here .cpp-pop-state { color: #fde68a; }
.cpp-kpi-spend .cpp-tier-wrap { margin-top: 8px; }
.cpp-kpi-spend .cpp-tier-sm { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .cpp-pop-xp i::after, .cpp-pop-step.is-here .cpp-pop-ico { animation: none; }
    .cpp-pop { transition: none; }
}

.cpp-kpi.is-alert .cpp-kpi-icon { background: #fef2f2; color: var(--cpp-danger); }
.cpp-kpi.is-alert small { color: var(--cpp-danger); font-weight: 600; }

.cpp-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.cpp-grid > .cpp-card { flex: 1 1 280px; }
.cpp-card-full { margin-bottom: 14px; }
/* Payments + Top purchases: two columns on tablet/desktop, stacked on phones */
.cpp-grid-duo > .cpp-card { flex: 1 1 360px; }
/* Invoices + Support tickets donuts: always two columns, side by side */
.cpp-grid-pair { flex-wrap: nowrap; }
.cpp-grid-pair > .cpp-card { flex: 1 1 0; }

.cpp-card {
    min-width: 0;
    padding: 18px 20px;
    background: var(--cpp-surface);
    border: 1px solid var(--cpp-line);
    border-radius: var(--cpp-radius);
    box-shadow: var(--cpp-shadow);
}
.cpp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cpp-card-head h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--cpp-ink); }
.cpp-card-head span { font-size: 12px; color: var(--cpp-muted); }

.cpp-chart { position: relative; }
.cpp-chart-lg { height: 280px; }
.cpp-chart-md { height: 240px; }
.cpp-chart-donut { height: 260px; }
.cpp-donut-center {
    position: absolute; left: 0; right: 0; top: 38%;
    transform: translateY(-50%);
    text-align: center; pointer-events: none;
}
.cpp-donut-center b { display: block; font-size: 26px; font-weight: 700; color: var(--cpp-ink); line-height: 1; }
.cpp-donut-center span { font-size: 12px; color: var(--cpp-muted); }

.cpp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 200px; color: var(--cpp-muted); font-size: 13px; text-align: center; }
.cpp-empty i { font-size: 24px; color: #a5b4fc; }

.cpp-upcoming { list-style: none; margin: 0; padding: 0; }
.cpp-upcoming li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cpp-line); }
.cpp-upcoming li:first-child { border-top: 0; padding-top: 0; }
.cpp-date {
    flex-shrink: 0; width: 46px; padding: 5px 0;
    border-radius: 10px; background: var(--cpp-accent-soft); color: var(--cpp-accent);
    text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.cpp-date b { display: block; font-size: 17px; line-height: 1.1; letter-spacing: 0; }
.cpp-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--cpp-ink); }
.cpp-amt { font-size: 13px; font-weight: 600; color: var(--cpp-ink); font-variant-numeric: tabular-nums; }

/* Greeting on the dashboard */
body.customers #greeting { font-size: 26px; font-weight: 700; margin-bottom: 4px; }

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.customers #content { padding-top: 16px; }
    body.customers #greeting { font-size: 22px; }
    body.customers .panel_s > .panel-body { padding: 16px; }
    /* 16px stops iOS zooming into fields on focus */
    body.customers .form-control, body.customers .bootstrap-select > .dropdown-toggle { font-size: 16px; }
    body.customers .submenu.customer-top-submenu { margin: 0 0 14px; text-align: right; }

    /* Wrap inside the page margins; buttons share each row evenly */
    .cpp-actions { gap: 8px; margin-bottom: 14px; }
    .cpp-action { flex: 1 1 auto; justify-content: center; padding: 9px 12px; }
    .cpp-kpis, .cpp-grid { gap: 10px; }
    .cpp-kpi { flex-basis: 150px; padding: 14px 16px; }
    .cpp-kpi b { font-size: 21px; }
    .cpp-kpi-icon { width: 30px; height: 30px; top: 12px; right: 12px; font-size: 13px; }
    .cpp-kpi-label { padding-right: 34px; font-size: 11px; }
    .cpp-card { padding: 16px; }
    .cpp-grid > .cpp-card { flex-basis: 100%; }
    .cpp-grid-pair > .cpp-card { flex: 1 1 0; padding: 12px; }
    .cpp-grid-pair .cpp-card-head { flex-direction: column; gap: 0; margin-bottom: 8px; }
    .cpp-grid-pair .cpp-card-head h4 { font-size: 14px; }
    .cpp-card-full { margin-bottom: 10px; }
    .cpp-chart-lg { height: 230px; }
    .cpp-chart-donut { height: 210px; }
    .cpp-grid-pair .cpp-donut-center b { font-size: 20px; }
    .cpp-grid-pair .cpp-donut-center span { font-size: 11px; }
    .cpp-grid-pair .cpp-empty { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    body.customers *, .cpp-dash * { transition: none !important; }
    a.cpp-kpi:hover { transform: none; }
}