/*
 * PreBuilt Profit — app theme.
 * Carries the funnel's look (deep ink navy, indigo brand, teal accent, Inter, soft rounded surfaces)
 * into the Velzon-based app. Loaded after the Velzon CSS in layouts/app and layouts/auth.
 */

:root {
  --pp-brand: #4f63b8;
  --pp-brand-hover: #5b70c9;
  --pp-brand-600: #405189;
  --pp-brand-300: #8d9ce0;
  --pp-brand-50: #eef1fb;
  --pp-brand-rgb: 79, 99, 184;
  --pp-teal: #12c2a8;
  --pp-teal-50: #e3f8f4;
  --pp-ink: #0b1020;
  --pp-ink-2: #111832;
  --pp-text: #3b4459;
  --pp-muted: #6b7489;
  --pp-line: #e7e9f0;
  --pp-surface: #f6f7fb;
  --pp-radius: 16px;
  --pp-radius-sm: 10px;
  --pp-shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 8px 24px -14px rgba(11, 16, 32, .14);
  --pp-shadow-lg: 0 24px 60px -20px rgba(11, 16, 32, .35);
  /* Dark hero panel used for banners and modal headers (matches the funnel's dark sections) */
  --pp-hero: radial-gradient(70% 140% at 0% 0%, rgba(111, 127, 214, .55) 0%, rgba(111, 127, 214, 0) 70%), radial-gradient(60% 140% at 100% 100%, rgba(18, 194, 168, .28) 0%, rgba(18, 194, 168, 0) 70%), linear-gradient(160deg, #1a2350 0%, #0b1020 100%);

  /* Velzon variables */
  --vz-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-bg: var(--pp-surface);
  --vz-body-bg-rgb: 246, 247, 251;
  --vz-body-color: var(--pp-text);
  --vz-heading-color: var(--pp-ink);
  --vz-border-color: var(--pp-line);
  --vz-link-color: var(--pp-brand);
  --vz-link-hover-color: var(--pp-brand-600);
  --vz-primary: #4f63b8;
  --vz-primary-rgb: 79, 99, 184;
  --vz-indigo: #4f63b8;

  --vz-vertical-menu-bg-dark: var(--pp-ink);
  --vz-vertical-menu-item-color-dark: rgba(255, 255, 255, .62);
  --vz-vertical-menu-item-hover-color-dark: #fff;
  --vz-vertical-menu-item-active-color-dark: #fff;
  --vz-vertical-menu-sub-item-color-dark: rgba(255, 255, 255, .55);
  --vz-vertical-menu-sub-item-hover-color-dark: #fff;
  --vz-vertical-menu-sub-item-active-color-dark: #fff;
  --vz-vertical-menu-title-color-dark: rgba(255, 255, 255, .36);

  --vz-header-bg: rgba(255, 255, 255, .88);
  --vz-topbar-user-bg: var(--pp-surface);
  --vz-topbar-search-bg: var(--pp-surface);
  --vz-footer-bg: transparent;
  --vz-footer-color: var(--pp-muted);
  --vz-card-cap-bg: transparent;
  --vz-input-border: #dfe2ec;
  --vz-input-focus-border: var(--pp-brand-300);
  --vz-input-group-addon-bg: var(--pp-surface);
  --vz-input-disabled-bg: #f1f2f7;
  --vz-light: #f1f3f9;
  --vz-light-rgb: 241, 243, 249;
  --vz-dropdown-link-hover-bg: var(--pp-surface);
  --vz-list-group-hover-bg: var(--pp-surface);
  --vz-pagination-hover-bg: var(--pp-brand-50);
  --vz-progress-bg: #eceef5;
  --vz-nav-tabs-link-active-bg: #fff;
  --vz-nav-tabs-link-active-color: var(--pp-ink);
  --vz-accordion-button-active-color: var(--pp-brand-600);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--vz-font-sans-serif);
  color: var(--pp-text);
  background: var(--pp-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--vz-font-sans-serif); color: var(--pp-ink); letter-spacing: -0.01em; font-weight: 600; }
.navbar-menu .navbar-nav .nav-link, .ff-secondary { font-family: var(--vz-font-sans-serif); }
a { color: var(--pp-brand); }
a:hover { color: var(--pp-brand-600); }
.text-muted { color: var(--pp-muted) !important; }
.text-body { color: var(--pp-text) !important; }
.text-dark { color: var(--pp-ink) !important; }
::selection { background: rgba(var(--pp-brand-rgb), .18); }

/* ── Sidebar (deep ink, like the funnel's dark sections) ─────────────── */
[data-layout=vertical][data-sidebar=dark] .navbar-menu {
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(79, 99, 184, .28) 0%, rgba(79, 99, 184, 0) 60%),
    radial-gradient(80% 30% at 100% 100%, rgba(18, 194, 168, .10) 0%, rgba(18, 194, 168, 0) 70%),
    var(--pp-ink);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
[data-sidebar=dark] .navbar-menu .navbar-brand-box { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.navbar-menu .navbar-nav .menu-title span,
.navbar-menu .navbar-nav .menu-title { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; }
[data-layout=vertical] .navbar-menu .navbar-nav .nav-item { padding: 0 10px; }
[data-layout=vertical] .navbar-menu .navbar-nav .nav-link {
  border-radius: var(--pp-radius-sm);
  margin: 1px 0;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .05); }
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-link.active,
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-link[aria-expanded=true] {
  background: linear-gradient(90deg, rgba(79, 99, 184, .38), rgba(79, 99, 184, .16));
  box-shadow: inset 0 0 0 1px rgba(141, 156, 224, .18);
  color: #fff;
}
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-link.active i,
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-link.active svg { color: var(--pp-teal); }
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link { background: none; box-shadow: none; }
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link.active { color: #fff; }
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link:before { background-color: rgba(255, 255, 255, .3); }
[data-layout=vertical][data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link.active:before { background-color: var(--pp-teal); }
[data-sidebar=dark] .navbar-menu .badge { border-radius: 999px; }

/* Small (icon) sidebar: keep the pill visible around icons */
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item { padding: 0 8px; }
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-link { justify-content: center; }
@media (max-width: 767.98px) {
  .navbar-menu { background: var(--pp-ink) !important; }
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
#page-topbar {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pp-line);
  box-shadow: none;
}
#page-topbar.topbar-shadow { box-shadow: 0 6px 24px -18px rgba(11, 16, 32, .35); }
.header-item.topbar-user { background: transparent; border-left: 1px solid var(--pp-line); }
.topbar-user .user-name-text { color: var(--pp-ink); font-weight: 600; }
.btn-topbar { border-radius: var(--pp-radius-sm); }

/* ── Page heading ────────────────────────────────────────────────────── */
.page-title-box {
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
  padding-top: 22px;
  padding-bottom: 6px;
}
.page-title-box h4 {
  font-size: 1.375rem !important;
  font-weight: 650;
  text-transform: none !important;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
}
.page-title-box .breadcrumb-item, .page-title-box .breadcrumb-item a { color: var(--pp-muted); }
.page-title-box .breadcrumb-item.active { color: var(--pp-ink); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}
.card > .card-header:first-child { border-radius: calc(var(--pp-radius) - 1px) calc(var(--pp-radius) - 1px) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 calc(var(--pp-radius) - 1px) calc(var(--pp-radius) - 1px); }
.card > .list-group:last-child, .card > .table-responsive:last-child, .card > .table:last-child { border-bottom-left-radius: var(--pp-radius); border-bottom-right-radius: var(--pp-radius); }
.card-header { background: transparent; border-bottom: 1px solid var(--pp-line); }
.card-footer { background: transparent; border-top: 1px solid var(--pp-line); }
.card-title, .card-header .card-title { color: var(--pp-ink); font-weight: 600; letter-spacing: -0.01em; }
.card-animate { transition: transform .2s, box-shadow .2s; }
.card-animate:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(11, 16, 32, .25); }
.card.card-bg-fill, .card.border-0 { border: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { border-radius: var(--pp-radius-sm); font-weight: 500; }
.btn-lg { border-radius: 12px; }
.btn-sm, .btn-group-sm > .btn { border-radius: 8px; }
.btn-primary {
  background-color: var(--pp-brand);
  border-color: var(--pp-brand);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(var(--pp-brand-rgb), .65);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--pp-brand-hover); border-color: var(--pp-brand-hover); color: #fff; }
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { background-color: var(--pp-brand-600); border-color: var(--pp-brand-600); color: #fff; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--pp-brand); border-color: var(--pp-brand); box-shadow: none; }
.btn-check:focus + .btn-primary, .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(var(--pp-brand-rgb), .3); }
.btn-outline-primary { color: var(--pp-brand); border-color: rgba(var(--pp-brand-rgb), .55); }
.btn-outline-primary:hover, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary { background-color: var(--pp-brand); border-color: var(--pp-brand); color: #fff; }
.btn-soft-primary { background-color: var(--pp-brand-50); border-color: transparent; color: var(--pp-brand); }
.btn-soft-primary:hover { background-color: var(--pp-brand); color: #fff; }
.btn-ghost-primary { color: var(--pp-brand); }
.btn-ghost-primary:hover { background-color: var(--pp-brand-50); color: var(--pp-brand); }
.btn-light { background-color: #f1f3f9; border-color: #f1f3f9; color: var(--pp-ink); }
.btn-light:hover { background-color: #e6e9f3; border-color: #e6e9f3; color: var(--pp-ink); }
.btn-dark { background-color: var(--pp-ink); border-color: var(--pp-ink); }
.btn-dark:hover { background-color: var(--pp-ink-2); border-color: var(--pp-ink-2); }
.btn-link { color: var(--pp-brand); }
.input-group > .btn { box-shadow: none; }

/* ── Brand colour utilities ──────────────────────────────────────────── */
.bg-primary { background-color: var(--pp-brand) !important; }
.text-primary { color: var(--pp-brand) !important; }
.border-primary { border-color: var(--pp-brand) !important; }
.bg-primary-subtle, .bg-soft-primary { background-color: var(--pp-brand-50) !important; }
.text-primary-emphasis { color: var(--pp-brand-600) !important; }
.link-primary { color: var(--pp-brand) !important; }
.badge.bg-primary, .badge-soft-primary { background-color: var(--pp-brand-50) !important; color: var(--pp-brand) !important; }
.badge.bg-primary.text-white, .badge.bg-primary.text-bg-primary { background-color: var(--pp-brand) !important; color: #fff !important; }
.progress-bar { background-color: var(--pp-brand); }
.progress { border-radius: 999px; }
.progress .progress-bar { border-radius: 999px; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; padding: .36em .7em; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select { border-radius: var(--pp-radius-sm); border-color: var(--vz-input-border); }
.form-control-sm, .form-select-sm { border-radius: 8px; }
.form-control:focus, .form-select:focus {
  border-color: var(--pp-brand-300);
  box-shadow: 0 0 0 3px rgba(var(--pp-brand-rgb), .15);
}
.input-group-text { border-color: var(--vz-input-border); background: var(--pp-surface); color: var(--pp-muted); }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.form-check-input:checked { background-color: var(--pp-brand); border-color: var(--pp-brand); }
.form-check-input:focus { border-color: var(--pp-brand-300); box-shadow: 0 0 0 3px rgba(var(--pp-brand-rgb), .15); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238d9ce0'/%3e%3c/svg%3e"); }
.form-label { color: var(--pp-ink); font-weight: 500; }
.form-range::-webkit-slider-thumb { background-color: var(--pp-brand); }
.form-range::-moz-range-thumb { background-color: var(--pp-brand); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table { --vz-table-hover-bg: #f8f9fc; color: var(--pp-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--pp-line); }
.table thead th, .table .table-light th, .table-light, .table > thead.table-light > tr > th {
  background-color: #f8f9fc !important;
  color: var(--pp-muted) !important;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-color: var(--pp-line) !important;
}
.table-card { margin: -1rem -1rem 0; }
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate { border-top-color: var(--pp-line) !important; }
div.dataTables_wrapper table.dataTable thead th { border-bottom-color: var(--pp-line) !important; }

/* ── Navigation: tabs, pills, pagination, dropdowns ──────────────────── */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--pp-brand); }
.nav-pills .nav-link { border-radius: var(--pp-radius-sm); }
.nav-tabs-custom .nav-item .nav-link.active, .nav-tabs-custom .nav-item .nav-link.active:hover { color: var(--pp-brand); }
.nav-tabs-custom .nav-item .nav-link::after { background: var(--pp-brand); }
.nav-tabs .nav-link.active { color: var(--pp-ink); border-color: var(--pp-line) var(--pp-line) #fff; }
.page-link { color: var(--pp-brand); border-color: var(--pp-line); }
.page-item.active .page-link { background-color: var(--pp-brand); border-color: var(--pp-brand); color: #fff; }
.page-item:first-child .page-link { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.page-item:last-child .page-link { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.dropdown-menu { border: 1px solid var(--pp-line); border-radius: 12px; box-shadow: 0 18px 48px -16px rgba(11, 16, 32, .22); padding: 6px; }
.dropdown-item { border-radius: 8px; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--pp-brand); color: #fff; }
.list-group-item.active { background-color: var(--pp-brand); border-color: var(--pp-brand); }
.accordion-button:not(.collapsed) { background-color: var(--pp-brand-50); color: var(--pp-brand-600); }
.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* ── Feedback ────────────────────────────────────────────────────────── */
.alert { border-radius: 12px; }
.alert-primary { background-color: var(--pp-brand-50); border-color: #dfe4f7; color: var(--pp-brand-600); }
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--pp-shadow-lg); }
.modal-header { border-bottom-color: var(--pp-line); }
.modal-footer { border-top-color: var(--pp-line); }
.toast { border-radius: 12px; }
.avatar-title { border-radius: 12px; }
.rounded-circle .avatar-title, .avatar-title.rounded-circle { border-radius: 50%; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer { background: transparent; border-top: 1px solid var(--pp-line); color: var(--pp-muted); }
.footer a.text-reset:hover { color: var(--pp-brand) !important; }

/* ── Scrollbars ──────────────────────────────────────────────────────── */
.main-content ::-webkit-scrollbar { width: 8px; height: 8px; }
.main-content ::-webkit-scrollbar-thumb { background: #d5d9e6; border-radius: 999px; }

/* ── Auth pages (login, register, password, activation) ──────────────── */
.auth-bg-cover {
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(79, 99, 184, .45) 0%, rgba(79, 99, 184, 0) 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(18, 194, 168, .18) 0%, rgba(18, 194, 168, 0) 70%),
    var(--pp-ink) !important;
}
.auth-bg-cover > .bg-overlay { background: none !important; opacity: 0 !important; }
.auth-page-wrapper .card { border-radius: 24px; box-shadow: var(--pp-shadow-lg) !important; border: 1px solid rgba(255, 255, 255, .06) !important; }
.auth-one-bg {
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(111, 127, 214, .55) 0%, rgba(111, 127, 214, 0) 70%),
    radial-gradient(70% 50% at 100% 100%, rgba(18, 194, 168, .25) 0%, rgba(18, 194, 168, 0) 70%),
    linear-gradient(160deg, #1a2350 0%, var(--pp-ink-2) 100%) !important;
}
.auth-one-bg .bg-overlay { background: none !important; opacity: 0 !important; }
.auth-one-bg .text-white-50 { color: rgba(255, 255, 255, .66) !important; }
.auth-one-bg .avatar-title, .auth-one-bg .bg-soft-light, .auth-one-bg .bg-light-subtle { background: rgba(18, 194, 168, .16) !important; color: var(--pp-teal) !important; }
.auth-page-wrapper .text-primary { color: var(--pp-brand) !important; }
.auth-page-wrapper h5.text-primary, .auth-page-wrapper h4.text-primary { color: var(--pp-ink) !important; }
.auth-page-wrapper .footer, .auth-page-wrapper .footer .text-muted { color: rgba(255, 255, 255, .5) !important; }
.auth-pass-inputgroup .btn { box-shadow: none; }

/* Auth CTAs use the brand colour, like the funnel's primary buttons */
.auth-page-wrapper .btn-success {
  background-color: var(--pp-brand); border-color: var(--pp-brand); color: #fff;
  box-shadow: 0 8px 22px -8px rgba(var(--pp-brand-rgb), .7);
}
.auth-page-wrapper .btn-success:hover, .auth-page-wrapper .btn-success:focus { background-color: var(--pp-brand-hover); border-color: var(--pp-brand-hover); color: #fff; }

/* Billing: the plan you're on gets a teal ring (funnel accent) */
.card.plan-current { box-shadow: 0 0 0 2px var(--pp-teal), var(--pp-shadow); }

/* ── Auth screens: logo centred above the card, centred brand panel ── */
.auth-logo { text-align: center; margin: 0 auto 28px; }
.auth-logo a { display: inline-block; }
.auth-logo img { display: block; height: 60px; width: auto; max-width: 100%; }
@media (max-width: 575.98px) { .auth-logo { margin-bottom: 20px; } .auth-logo img { height: 46px; } }

/* Inside the brand panel (login, register, password pages): large and centred above the headline */
.auth-one-bg .auth-logo { margin: 0 auto 36px; }
.auth-one-bg .auth-logo img { width: 330px; height: auto; max-width: 100%; }
@media (max-width: 991.98px) { .auth-one-bg .auth-logo { margin-bottom: 22px; } .auth-one-bg .auth-logo img { width: 250px; } }

.auth-one-bg > .position-relative { align-items: center; justify-content: center; text-align: center; }
.auth-one-bg .my-auto { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.auth-one-bg .my-auto > .mb-4:first-child { margin-bottom: 28px !important; }
.auth-one-bg .my-auto h3 { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.25 !important; margin-bottom: 0; text-wrap: balance; }
.auth-one-bg .my-auto h3 + p {
  margin: 14px auto 0 !important;
  max-width: 340px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72) !important;
  text-wrap: pretty;
}
.auth-one-bg .my-auto .vstack { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.auth-one-bg .my-auto .rounded { text-align: left; }
.auth-page-content .col-lg-6 > .p-lg-5 > .mb-4:first-child { text-align: center; }
.auth-page-content .col-lg-6 > .p-lg-5 > .mb-4:first-child h5 { font-size: 1.25rem; margin-bottom: 6px; }
@media (max-width: 991.98px) {
  .auth-one-bg .my-auto h3 { font-size: 1.4rem; }
  .auth-one-bg .my-auto > .mb-4:first-child { margin-bottom: 20px !important; }
}