/**
 * Propeller Client Portal — Brand Layer
 * Matches propeller.marketing (Suisse Intl, void / cream / accent).
 * Loaded after theme CSS. Do not remove Perfex features — visual only.
 */

:root {
  --p-void: #050507;
  --p-ink: #0b0b0e;
  --p-lift: #121215;
  --p-lift-2: #1a1a1f;
  --p-text: #ebe9e4;
  --p-muted: #9b9994;
  --p-faint: #85837e;
  --p-accent: #8ec8e8;
  --p-accent-soft: rgba(142, 200, 232, 0.12);
  --p-border: rgba(255, 255, 255, 0.08);
  --p-border-strong: rgba(255, 255, 255, 0.16);
  --p-danger: #f0a8a0;
  --p-success: #9fd4b0;
  --p-warning: #e6c98a;
  --p-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --p-font: "SuisseIntl", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-radius: 12px;
  --p-radius-sm: 8px;
  --p-pill: 999px;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

html {
  background: var(--p-void);
}

body.customers,
body {
  font-family: var(--p-font) !important;
  color: var(--p-text);
  background: var(--p-void) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  position: relative;
}

/* Atmospheric void — not flat black */
body.customers::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(142, 200, 232, 0.09), transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 20%, rgba(235, 233, 228, 0.04), transparent 50%),
    radial-gradient(ellipse 50% 35% at 10% 80%, rgba(142, 200, 232, 0.05), transparent 45%);
}

body.customers > * {
  position: relative;
  z-index: 1;
}

body.customers > *,
body > * {
  font-family: var(--p-font);
}

a {
  color: var(--p-accent);
  transition: color 0.2s var(--p-ease);
}

a:hover,
a:focus,
a:active {
  color: var(--p-text);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--p-font);
  color: var(--p-text);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1, h2 {
  font-weight: 300;
}

p, label, .control-label, .help-block, small, .text-muted {
  color: var(--p-muted);
}

hr {
  border-top-color: var(--p-border);
}

/* Tailwind utility overrides used heavily in client views */
.tw-text-neutral-900,
.tw-text-neutral-800,
.tw-text-neutral-700,
.tw-text-neutral-600 {
  color: var(--p-text) !important;
}

.tw-text-neutral-500,
.tw-text-neutral-400 {
  color: var(--p-muted) !important;
}

.tw-text-neutral-300,
.tw-text-neutral-200 {
  color: var(--p-faint) !important;
}

.tw-bg-white,
.tw-bg-neutral-50,
.tw-bg-neutral-100 {
  background-color: var(--p-lift) !important;
}

.tw-border-neutral-200,
.tw-border-neutral-100,
.tw-divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--p-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Navigation                                                                 */
/* -------------------------------------------------------------------------- */

.navbar.navbar-default.header,
.navbar-default {
  background: rgba(5, 5, 7, 0.86) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--p-border) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  min-height: 68px;
  margin-bottom: 0;
}

.navbar a.navbar-brand {
  padding: 18px 0;
}

.navbar a.navbar-brand img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(0.92);
  opacity: 0.95;
}

.navbar-default .navbar-brand.logo-text {
  color: var(--p-text) !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
}

.navbar-default .navbar-nav > li > a {
  color: var(--p-muted) !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 68px;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--p-text) !important;
  background: transparent !important;
}

.navbar-default .navbar-nav > li.customers-nav-item-login > a,
.navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
.navbar-default .navbar-nav > li.customers-nav-item-login > a:active,
.navbar-default .navbar-nav > li.customers-nav-item-login > a:focus {
  background: var(--p-text) !important;
  color: var(--p-void) !important;
  border-radius: var(--p-pill) !important;
  line-height: 1 !important;
  padding: 10px 18px !important;
  margin-left: 12px !important;
  margin-top: 18px;
  letter-spacing: 0.12em;
  font-size: 10px !important;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--p-text);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: transparent;
}

.navbar-default .navbar-collapse {
  border-color: var(--p-border);
}

.client-profile-image-small {
  border: 1px solid var(--p-border-strong);
}

.dropdown-menu {
  background: var(--p-lift) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius-sm) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45) !important;
  padding: 8px 0 !important;
}

.dropdown-menu > li > a {
  color: var(--p-muted) !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--p-accent-soft) !important;
  color: var(--p-text) !important;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    line-height: 42px !important;
    color: var(--p-muted) !important;
  }

  .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    margin: 8px 15px 16px !important;
    display: inline-block;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--p-muted);
  }
}

/* -------------------------------------------------------------------------- */
/* Submenu / content shell                                                    */
/* -------------------------------------------------------------------------- */

#wrapper,
#content {
  background: transparent !important;
  background-color: transparent !important;
}

.customer-top-submenu {
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 24px;
  padding-bottom: 4px;
}

.customer-top-submenu li a {
  color: var(--p-muted) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.customer-top-submenu li a:hover {
  color: var(--p-text) !important;
}

/* -------------------------------------------------------------------------- */
/* Panels / cards                                                             */
/* -------------------------------------------------------------------------- */

.panel_s,
.panel,
.panel-default {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 24px;
}

.panel_s > .panel-body,
.panel > .panel-body,
.panel-default > .panel-body,
.panel_s .panel-heading,
.panel .panel-heading {
  background: rgba(18, 18, 21, 0.72) !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-text);
  border-radius: 16px;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.panel_s .panel-heading + .panel-body,
.panel .panel-heading + .panel-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
}

.panel_s .panel-heading {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.bgwhite {
  background: var(--p-lift) !important;
  border-color: var(--p-border) !important;
  color: var(--p-text);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
  font-family: var(--p-font);
  border-radius: var(--p-pill) !important;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 10px 20px;
  transition: background 0.25s var(--p-ease), color 0.25s var(--p-ease), border-color 0.25s var(--p-ease), opacity 0.25s var(--p-ease);
  box-shadow: none !important;
}

.btn-primary,
.btn-info,
.btn-success,
.btn.btn-success,
.invoice-html-pay-now-top,
a.invoice-html-pay-now-top {
  background: var(--p-text) !important;
  border-color: var(--p-text) !important;
  color: var(--p-void) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.invoice-html-pay-now-top:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--p-void) !important;
  opacity: 0.92;
}

.btn-default,
.btn-secondary,
.action-button.btn-default {
  background: transparent !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-text) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover {
  background: var(--p-accent-soft) !important;
  border-color: var(--p-accent) !important;
  color: var(--p-text) !important;
}

.btn-danger {
  background: transparent !important;
  border: 1px solid var(--p-danger) !important;
  color: var(--p-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background: rgba(240, 168, 160, 0.12) !important;
  color: var(--p-danger) !important;
}

.btn-warning {
  background: transparent !important;
  border: 1px solid var(--p-warning) !important;
  color: var(--p-warning) !important;
}

.btn-block {
  border-radius: var(--p-pill) !important;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.input-group-addon,
.bootstrap-select .btn,
.bootstrap-select > .dropdown-toggle {
  background: var(--p-ink) !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-text) !important;
  border-radius: var(--p-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--p-font);
}

.form-control:focus,
.bootstrap-select .btn:focus,
.bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--p-accent) !important;
  outline: 0;
  box-shadow: 0 0 0 3px var(--p-accent-soft) !important;
}

.form-control::placeholder {
  color: var(--p-faint);
}

.input-group-addon {
  color: var(--p-muted) !important;
}

.checkbox label,
.radio label {
  color: var(--p-muted);
}

.select2-container--default .select2-selection--single,
.select2-dropdown {
  background: var(--p-lift);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                     */
/* -------------------------------------------------------------------------- */

.table,
table.dataTable {
  color: var(--p-muted);
  background: transparent;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
table.dataTable thead th,
table.dataTable tbody td {
  border-color: var(--p-border) !important;
  color: var(--p-muted);
}

.table > thead > tr > th,
table.dataTable thead th {
  color: var(--p-text) !important;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent !important;
  border-bottom-width: 1px !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background: rgba(255, 255, 255, 0.02) !important;
}

.table-hover > tbody > tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background: var(--p-accent-soft) !important;
}

.table.items {
  border-collapse: separate;
  border-spacing: 0;
}

.table.items thead {
  background: var(--p-ink) !important;
  color: var(--p-text) !important;
}

.table.items thead th,
.table.items > thead:first-child > tr:first-child > th {
  border-color: var(--p-border) !important;
  color: var(--p-text) !important;
}

.table.items tbody > tr > td {
  color: var(--p-muted);
  background: transparent;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  background: var(--p-ink);
  border: 1px solid var(--p-border-strong);
  color: var(--p-text);
  border-radius: var(--p-radius-sm);
}

.dataTables_info,
.dataTables_paginate,
div.dataTables_wrapper div.dataTables_info {
  color: var(--p-faint) !important;
}

.pagination > li > a,
.pagination > li > span,
.dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-muted) !important;
  border-radius: var(--p-pill) !important;
  margin: 0 3px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > li > a:hover,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background: var(--p-text) !important;
  border-color: var(--p-text) !important;
  color: var(--p-void) !important;
}

/* -------------------------------------------------------------------------- */
/* Labels / badges / alerts                                                   */
/* -------------------------------------------------------------------------- */

.label,
.badge {
  border-radius: var(--p-pill);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 5px 10px;
}

.label-success,
.badge-success,
.success-bg {
  background: rgba(159, 212, 176, 0.15) !important;
  color: var(--p-success) !important;
  border: 1px solid rgba(159, 212, 176, 0.35) !important;
}

.label-danger,
.badge-danger,
.danger-bg {
  background: rgba(240, 168, 160, 0.15) !important;
  color: var(--p-danger) !important;
  border: 1px solid rgba(240, 168, 160, 0.35) !important;
}

.label-warning,
.badge-warning,
.warning-bg {
  background: rgba(230, 201, 138, 0.15) !important;
  color: var(--p-warning) !important;
  border: 1px solid rgba(230, 201, 138, 0.35) !important;
}

.label-info,
.badge-info,
.info-bg,
.primary-bg,
.label-primary {
  background: var(--p-accent-soft) !important;
  color: var(--p-accent) !important;
  border: 1px solid rgba(142, 200, 232, 0.35) !important;
}

.label-default {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--p-muted) !important;
  border: 1px solid var(--p-border) !important;
}

.alert {
  border-radius: var(--p-radius-sm);
  border: 1px solid var(--p-border);
  background: var(--p-lift);
  color: var(--p-text);
}

.alert-danger {
  background: rgba(240, 168, 160, 0.1);
  border-color: rgba(240, 168, 160, 0.3);
  color: var(--p-danger);
}

/* Bootstrap danger text (amount due, etc.) on void */
.text-danger {
  color: var(--p-danger) !important;
}

.alert-success {
  background: rgba(159, 212, 176, 0.1);
  border-color: rgba(159, 212, 176, 0.3);
  color: var(--p-success);
}

.alert-warning {
  background: rgba(230, 201, 138, 0.1);
  border-color: rgba(230, 201, 138, 0.3);
  color: var(--p-warning);
}

.alert-info {
  background: var(--p-accent-soft);
  border-color: rgba(142, 200, 232, 0.3);
  color: var(--p-accent);
}

/* -------------------------------------------------------------------------- */
/* Invoice / estimate / proposal previews                                     */
/* -------------------------------------------------------------------------- */

.preview-top-wrapper {
  margin-top: 8px;
}

.preview-sticky-header,
.top[data-sticky].preview-sticky-header,
.preview-sticky-container {
  background: rgba(5, 5, 7, 0.92) !important;
  border-bottom: 1px solid var(--p-border);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Estimates / proposals / contracts keep soft logo invert; invoices use wordmark */
.estimate-html-logo img,
.proposal-html-logo img,
.contract-html-logo img,
.subscription-html-logo img {
  max-height: 48px;
  width: auto;
  filter: brightness(0) invert(0.92);
}

body.viewestimate .panel_s > .panel-body,
body.viewproposal .panel_s > .panel-body,
body.viewsubscription .panel_s > .panel-body,
.viewestimate .panel_s > .panel-body {
  background: var(--p-lift) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius);
  padding: 36px 28px;
}

.invoice-html-number,
.estimate-html-number,
.tc-content h1,
.tc-content h2,
.tc-content h3 {
  color: var(--p-text) !important;
}

.invoice-html-company-info,
.invoice-html-customer-billing-info,
.estimate-html-company-info,
.estimate-html-customer-billing-info,
address {
  color: var(--p-muted) !important;
  font-style: normal;
  line-height: 1.55;
}

.invoice-total-table tr td,
.table.invoice-items-table td {
  color: var(--p-muted);
}

/* Payment modes / online pay block */
.payment-option,
#online_payment_form,
.online-payment-button {
  border-color: var(--p-border) !important;
}

/* ========================================================================== */
/* Propeller invoice document — pay-worthy client view                        */
/* Beat Perfex theme_style (#eee) the same way login does.                    */
/* ========================================================================== */

html:has(body.viewinvoice),
body.viewinvoice,
body.customers.viewinvoice {
  background: var(--p-void) !important;
  background-color: var(--p-void) !important;
  color: var(--p-text) !important;
  font-family: var(--p-font) !important;
}

body.viewinvoice #wrapper,
body.viewinvoice #content,
body.viewinvoice .footer,
body.viewinvoice .container,
body.viewinvoice .preview-top-wrapper,
body.viewinvoice .preview-sticky-container {
  background: transparent !important;
  background-color: transparent !important;
}

body.viewinvoice #content > .container {
  max-width: 1000px;
  width: 100%;
  padding-left: 28px;
  padding-right: 28px;
}

.propeller-invoice {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 0 72px;
}

.propeller-inv-top {
  margin-top: 0 !important;
  margin-bottom: 20px;
}

/* Sticky toolbar — CSS sticky, same width as document (no Sticky.js ghosts) */
body.viewinvoice .propeller-inv-sticky,
body.viewinvoice .propeller-inv-sticky.preview-sticky-header,
body.viewinvoice .propeller-inv-sticky.top[data-sticky] {
  position: sticky !important;
  top: 0;
  z-index: 40;
  width: 100% !important;
  left: auto !important;
  margin: 0;
  padding: 0 !important;
  background: rgba(5, 5, 7, 0.94) !important;
  border: 1px solid var(--p-border);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
}

body.viewinvoice .propeller-inv-sticky .preview-sticky-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: transparent !important;
}

.propeller-inv-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.propeller-inv-sticky__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 28px;
}

.propeller-inv-wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
}

.propeller-inv-wordmark img {
  display: block;
  height: 13px;
  width: auto;
  max-width: 168px;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

.propeller-inv-sticky__num {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--p-text);
}

.propeller-inv-sticky__due {
  font-size: 13px;
  color: var(--p-accent);
  letter-spacing: -0.01em;
}

.propeller-inv-sticky__actions,
.propeller-inv-hero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.propeller-inv-sticky__actions form,
.propeller-inv-sticky__actions .propeller-inv-action-form,
.propeller-inv-hero__actions form,
.propeller-inv-hero__actions .propeller-inv-action-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  height: 40px;
}

/* Identical chrome metrics — cream vs ghost colors stay separate */
body.viewinvoice .propeller-inv-sticky__actions .action-button,
body.viewinvoice .propeller-inv-sticky__actions .btn-default,
body.viewinvoice .propeller-inv-sticky__actions .btn-success,
body.viewinvoice .propeller-inv-sticky__actions .propeller-inv-pay,
body.viewinvoice .propeller-inv-sticky__actions .propeller-inv-btn-ghost,
body.viewinvoice .propeller-inv-sticky__actions .invoice-html-pay-now-top,
body.viewinvoice .propeller-inv-sticky__actions a.invoice-html-pay-now-top,
body.viewinvoice .propeller-inv-hero__actions .action-button,
body.viewinvoice .propeller-inv-hero__actions .btn-default,
body.viewinvoice .propeller-inv-hero__actions .btn-success,
body.viewinvoice .propeller-inv-hero__actions .propeller-inv-pay,
body.viewinvoice .propeller-inv-hero__actions .propeller-inv-btn-ghost,
body.viewinvoice .propeller-inv-hero__actions .invoice-html-pay-now-top {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  padding: 0 18px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  vertical-align: middle;
  gap: 6px;
}

body.viewinvoice .propeller-inv-status .label,
body.viewinvoice .invoice-html-status .label {
  border-radius: 999px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  border: 1px solid transparent;
}

body.viewinvoice .label-danger,
body.viewinvoice .invoice-status-1,
body.viewinvoice .invoice-status-4 {
  background: rgba(240, 168, 160, 0.12) !important;
  color: var(--p-danger) !important;
  border-color: rgba(240, 168, 160, 0.28) !important;
}

/* Document shell — one cohesive lift surface, no white scraps */
body.viewinvoice .propeller-inv-doc.panel_s {
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.viewinvoice .propeller-inv-doc > .panel-body,
body.viewinvoice .panel_s.propeller-inv-doc > .panel-body {
  background:
    radial-gradient(ellipse 70% 40% at 100% 0%, rgba(142, 200, 232, 0.06), transparent 55%),
    var(--p-lift) !important;
  background-color: var(--p-lift) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 18px !important;
  padding: 36px 40px 44px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  color: var(--p-text);
}

body.viewinvoice .propeller-inv-doc .tw-bg-white,
body.viewinvoice .propeller-inv-doc .bg-white,
body.viewinvoice .propeller-inv-doc .table > thead > tr > th,
body.viewinvoice .propeller-inv-doc .table > tbody > tr > td,
body.viewinvoice .propeller-inv-doc .table > tbody > tr > th {
  background-color: transparent !important;
  background: transparent !important;
}

/* Overdue — boutique urgency, not Bootstrap brick */
.propeller-inv-overdue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 10px 16px;
  border-radius: var(--p-pill);
  background: rgba(240, 168, 160, 0.1);
  border: 1px solid rgba(240, 168, 160, 0.28);
}

.propeller-inv-overdue__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-danger);
  box-shadow: 0 0 0 4px rgba(240, 168, 160, 0.16);
  flex-shrink: 0;
}

.propeller-inv-overdue__text {
  margin: 0;
  color: var(--p-danger);
  font-family: var(--p-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

/* Hero */
.propeller-inv-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--p-border);
}

.propeller-inv-title {
  font-size: clamp(26px, 3.6vw, 34px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em !important;
  color: var(--p-text) !important;
  margin: 4px 0 0 !important;
  line-height: 1.1;
}

.propeller-inv-hero__right {
  text-align: right;
  min-width: 160px;
}

.propeller-inv-due-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-faint);
  margin: 0 0 6px;
}

.propeller-inv-due-amount {
  font-size: clamp(26px, 3.6vw, 32px);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--p-text);
  margin: 0;
  line-height: 1;
}

.propeller-inv-due-amount.is-paid {
  color: var(--p-success);
}

/* Pay CTAs — cream pill (height/padding unified via sticky/hero action rules) */
.propeller-inv-pay,
a.propeller-inv-pay,
.propeller-inv-pay.btn-success,
body.viewinvoice .invoice-html-pay-now-top,
body.viewinvoice a.invoice-html-pay-now-top,
body.viewinvoice #pay_now.propeller-inv-pay {
  background: var(--p-text) !important;
  border-color: var(--p-text) !important;
  color: var(--p-void) !important;
  border-radius: var(--p-pill) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px !important;
  min-height: 40px;
  height: 40px;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: none;
  transition: background 0.25s var(--p-ease), color 0.25s var(--p-ease), transform 0.25s var(--p-ease);
}

.propeller-inv-pay:hover,
a.propeller-inv-pay:hover,
body.viewinvoice .invoice-html-pay-now-top:hover,
body.viewinvoice #pay_now.propeller-inv-pay:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--p-void) !important;
  transform: translateY(-1px);
  opacity: 1;
}

.propeller-inv-pay--submit {
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
  height: 40px;
  min-height: 40px;
}

.propeller-inv-btn-ghost,
body.viewinvoice .propeller-inv-btn-ghost.btn-default {
  padding: 0 18px !important;
  min-height: 40px;
  height: 40px;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: transparent !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-muted) !important;
  border-radius: var(--p-pill) !important;
}

body.viewinvoice .propeller-inv-btn-ghost.btn-default:hover {
  color: var(--p-text) !important;
  border-color: var(--p-text) !important;
  background: transparent !important;
}

/* Parties — Bill To + dates only (From removed) */
.propeller-inv-parties {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px 40px;
  margin-bottom: 28px;
  align-items: start;
}

.propeller-inv-party__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin: 0 0 10px;
}

.propeller-inv-party address {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--p-muted) !important;
}

.propeller-inv-party address b,
.propeller-inv-party address .company-name-formatted,
.propeller-inv-party address [style*="color:black"],
.propeller-inv-party address [style*="color: black"] {
  color: var(--p-text) !important;
}

.propeller-inv-party--meta .propeller-inv-dates {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.propeller-inv-dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.propeller-inv-meta-key {
  display: inline-block;
  min-width: 88px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-faint);
  margin-right: 10px;
}

.propeller-inv-meta-val {
  color: var(--p-text);
  font-size: 14px;
}

/* Line items — hairlines only, no chunky nested frame */
.propeller-inv-items {
  margin-bottom: 4px;
}

.propeller-inv-items .table-responsive {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

body.viewinvoice .propeller-inv-items .table.items,
body.viewinvoice .propeller-inv-items table,
body.viewinvoice .propeller-inv-items .table.items.items-preview {
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.viewinvoice .propeller-inv-items .table.items > thead > tr > th,
body.viewinvoice .propeller-inv-items table > thead > tr > th {
  background: transparent !important;
  color: var(--p-faint) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--p-border) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0 0 12px !important;
}

body.viewinvoice .propeller-inv-items .table.items > tbody > tr > td,
body.viewinvoice .propeller-inv-items table > tbody > tr > td {
  padding: 14px 0 !important;
  color: var(--p-muted) !important;
  border-color: var(--p-border) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  vertical-align: top;
  background: transparent !important;
}

body.viewinvoice .propeller-inv-items .table.items > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

body.viewinvoice .propeller-inv-items .table.items > tbody > tr:hover > td {
  background: transparent !important;
}

/* Kill inline light-theme colors inside item descriptions */
body.viewinvoice .propeller-inv-items [style*="color:#424242"],
body.viewinvoice .propeller-inv-items [style*="color: #424242"],
body.viewinvoice .propeller-inv-items [style*="color:#000"],
body.viewinvoice .propeller-inv-items [style*="color:black"] {
  color: var(--p-muted) !important;
}

/* Totals */
.propeller-inv-totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 4px;
}

.propeller-inv-totals {
  width: 100%;
  max-width: 320px;
  margin-bottom: 0 !important;
  background: transparent !important;
}

.propeller-inv-totals td {
  border-color: var(--p-border) !important;
  padding: 8px 0 !important;
  font-size: 14px;
  background: transparent !important;
  color: var(--p-muted);
}

.propeller-inv-totals__total td {
  padding-top: 14px !important;
  border-top: 1px solid var(--p-border-strong) !important;
  font-size: 15px;
  color: var(--p-text) !important;
}

.propeller-inv-totals__due td {
  padding-top: 12px !important;
  font-size: 16px;
}

.propeller-inv-totals__due .text-danger {
  color: var(--p-accent) !important;
}

.propeller-inv-words {
  text-align: right;
  margin: 8px 0 20px;
  font-size: 13px;
}

/* Sections */
.propeller-inv-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--p-border);
}

.propeller-inv-section__title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin: 0 0 12px;
  font-weight: 400;
}

.propeller-inv-section__body {
  font-size: 14px;
  line-height: 1.6;
}

.propeller-inv-files {
  list-style: none;
  padding: 0;
  margin: 0;
}

.propeller-inv-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--p-border);
  font-size: 14px;
}

.propeller-inv-files li:last-child {
  border-bottom: 0;
}

.propeller-inv-empty {
  margin: 0;
  font-size: 14px;
}

.propeller-inv-payments-table {
  margin-top: 4px !important;
  background: transparent !important;
}

body.viewinvoice .propeller-inv-payments-table > thead > tr > th,
body.viewinvoice .propeller-inv-payments-table > tbody > tr > td {
  background: transparent !important;
  border-color: var(--p-border) !important;
  color: var(--p-muted) !important;
}

/* Pay zone */
.propeller-inv-pay-zone {
  margin-top: 32px;
  padding-top: 4px;
}

.propeller-inv-pay-card,
.propeller-inv-offline-card {
  background: var(--p-ink) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 16px;
  padding: 26px 24px 28px;
  height: 100%;
  margin-bottom: 16px;
}

.propeller-inv-pay-card {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(142, 200, 232, 0.08), transparent 55%),
    var(--p-ink) !important;
  border-color: rgba(142, 200, 232, 0.18) !important;
}

.propeller-inv-pay-card__title {
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em;
  color: var(--p-text) !important;
  margin: 0 0 18px !important;
}

.propeller-inv-pay-card__amount {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--p-text);
  margin: 0 0 8px;
}

.propeller-inv-pay-desc {
  color: var(--p-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Amount + currency — one integrated control (not a separate boxed addon) */
body.viewinvoice .propeller-inv-pay-card .input-group,
.propeller-inv-pay-card .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: var(--p-void) !important;
  background-color: var(--p-void) !important;
  box-shadow: none !important;
  gap: 0 !important;
}

body.viewinvoice .propeller-inv-pay-card .input-group .form-control,
body.viewinvoice .propeller-inv-pay-card .form-control,
.propeller-inv-pay-card .input-group .form-control,
.propeller-inv-pay-card .form-control {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--p-text) !important;
  height: 46px !important;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin: 0 !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

body.viewinvoice .propeller-inv-pay-card input[type="number"]::-webkit-outer-spin-button,
body.viewinvoice .propeller-inv-pay-card input[type="number"]::-webkit-inner-spin-button,
.propeller-inv-pay-card input[type="number"]::-webkit-outer-spin-button,
.propeller-inv-pay-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.viewinvoice .propeller-inv-pay-card .input-group .form-control:focus,
.propeller-inv-pay-card .input-group .form-control:focus {
  outline: none;
  box-shadow: none !important;
  border: 0 !important;
}

body.viewinvoice .propeller-inv-pay-card .input-group:focus-within,
.propeller-inv-pay-card .input-group:focus-within {
  border-color: rgba(142, 200, 232, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(142, 200, 232, 0.1) !important;
}

body.viewinvoice .propeller-inv-pay-card .input-group-addon,
body.viewinvoice .propeller-inv-pay-card .input-group .input-group-addon,
.propeller-inv-pay-card .input-group-addon,
.propeller-inv-pay-card .input-group .input-group-addon {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  color: var(--p-faint) !important;
  padding: 0 16px 0 4px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  line-height: 1 !important;
  vertical-align: middle;
}

/* Client invoice list */
.propeller-invoices-page {
  padding-bottom: 40px;
}

.propeller-inv-list-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.propeller-inv-list-title {
  font-size: 28px !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em !important;
  color: var(--p-text) !important;
  margin: 0 !important;
}

.propeller-inv-list-panel > .panel-body {
  padding: 28px 24px 32px !important;
}

.propeller-inv-list-table-wrap {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--p-border);
}

.propeller-inv-list-link {
  color: var(--p-text) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--p-ease), border-color 0.2s var(--p-ease);
}

.propeller-inv-list-link:hover {
  color: var(--p-accent) !important;
  border-bottom-color: rgba(142, 200, 232, 0.45);
}

.propeller-inv-list-amount {
  color: var(--p-text) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.propeller-inv-list-table tbody tr {
  transition: background 0.2s var(--p-ease);
}

.propeller-inv-list-table tbody tr:hover td {
  background: rgba(142, 200, 232, 0.05) !important;
}

@media (max-width: 767px) {
  body.viewinvoice #content > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.viewinvoice .propeller-inv-doc > .panel-body {
    padding: 24px 18px 32px !important;
    border-radius: 14px !important;
  }

  .propeller-inv-parties {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .propeller-inv-hero {
    align-items: flex-start;
  }

  .propeller-inv-hero__right {
    text-align: left;
    width: 100%;
  }

  .propeller-inv-sticky__actions {
    width: 100%;
  }

  .propeller-inv-sticky__actions .propeller-inv-pay {
    flex: 1;
    text-align: center;
  }

  body.viewinvoice .propeller-inv-sticky .preview-sticky-container {
    padding: 0 14px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Login / auth                                                               */
/* -------------------------------------------------------------------------- */

/* Perfex bodyclass is customers_login (one token), not customers + login */
body.login_admin,
body.customers_login,
body.customers.login,
.login-form .panel_s > .panel-body,
.login-form .panel-body {
  background: var(--p-lift) !important;
}

.login-heading,
h1.login-heading,
.forgot-password-heading {
  color: var(--p-text) !important;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-size: 28px;
}

.customers .mtop40 .panel_s > .panel-body {
  border-radius: var(--p-radius);
  padding: 32px 28px;
}

/* -------------------------------------------------------------------------- */
/* Modals / tickets / misc widgets                                            */
/* -------------------------------------------------------------------------- */

.modal-content {
  background: var(--p-lift);
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius);
  color: var(--p-text);
}

.modal-header,
.modal-footer {
  border-color: var(--p-border);
}

.modal-title {
  color: var(--p-text);
}

.close {
  color: var(--p-text);
  opacity: 0.6;
  text-shadow: none;
}

.close:hover {
  color: var(--p-text);
  opacity: 1;
}

.client-reply .panel-body {
  background: rgba(230, 201, 138, 0.08) !important;
  color: var(--p-warning) !important;
  border: 1px solid rgba(230, 201, 138, 0.25);
}

.project-info-bg {
  background: var(--p-ink) !important;
  color: var(--p-text) !important;
  border-color: var(--p-border) !important;
}

.progress {
  background: var(--p-ink);
  border-radius: var(--p-pill);
  box-shadow: none;
}

.progress-bar {
  background: var(--p-accent);
}

.nav-tabs {
  border-bottom-color: var(--p-border);
}

.nav-tabs > li > a {
  color: var(--p-muted);
  border-radius: var(--p-radius-sm) var(--p-radius-sm) 0 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li > a:hover {
  background: var(--p-lift);
  border-color: var(--p-border);
  color: var(--p-text);
}

.well,
.list-group-item {
  background: var(--p-lift);
  border-color: var(--p-border);
  color: var(--p-muted);
}

.tooltip-inner {
  background: var(--p-ink);
  color: var(--p-text);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  font-family: var(--p-font);
}

.popover {
  background: var(--p-lift);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}

/* Dropzone */
.dropzone {
  background: var(--p-ink) !important;
  border: 1px dashed var(--p-border-strong) !important;
  border-radius: var(--p-radius) !important;
  color: var(--p-muted);
}

/* Calendar */
.fc-toolbar h2,
.fc th,
.fc td {
  color: var(--p-muted);
}

.fc-unthemed td.fc-today {
  background: var(--p-accent-soft) !important;
}

/* Chart.js text remains canvas-drawn; ensure container is clean */
#client-home-chart {
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

footer,
footer.footer {
  background: transparent !important;
  border-top: 1px solid var(--p-border) !important;
  color: var(--p-faint);
  height: auto;
  min-height: 56px;
  padding: 28px 15px 36px;
  margin-top: 64px;
}

.copyright-footer,
.terms-and-conditions-footer,
.gdpr-footer {
  color: var(--p-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.propeller-footer-sep {
  margin: 0 6px;
  opacity: 0.5;
}

.terms-and-conditions-footer:hover,
.gdpr-footer:hover {
  color: var(--p-text);
}

/* -------------------------------------------------------------------------- */
/* Knowledge base / announcements                                             */
/* -------------------------------------------------------------------------- */

.kb-search,
.kb-article,
.announcement {
  color: var(--p-muted);
}

.announcement small {
  color: var(--p-faint);
}

/* -------------------------------------------------------------------------- */
/* Scrollbar (webkit)                                                         */
/* -------------------------------------------------------------------------- */

body.customers::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.customers::-webkit-scrollbar-track {
  background: var(--p-void);
}

body.customers::-webkit-scrollbar-thumb {
  background: var(--p-lift-2);
  border-radius: var(--p-pill);
  border: 2px solid var(--p-void);
}

/* -------------------------------------------------------------------------- */
/* Wordmark                                                                   */
/* -------------------------------------------------------------------------- */

.propeller-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--p-text);
  line-height: 0;
}

.propeller-wordmark img,
.propeller-wordmark svg {
  display: block;
  width: 132px;
  height: auto;
  color: var(--p-text);
}

.navbar a.navbar-brand.propeller-wordmark,
.navbar a.navbar-brand.propeller-wordmark:hover {
  padding: 26px 0;
  height: auto;
  margin-right: 20px;
  background: transparent !important;
}

.navbar a.navbar-brand.propeller-wordmark img {
  height: 11px;
  width: auto;
  filter: none !important;
  opacity: 0.95;
  transition: opacity 0.25s var(--p-ease), transform 0.35s var(--p-ease);
}

.navbar a.navbar-brand.propeller-wordmark:hover img {
  opacity: 1;
  transform: scale(1.04);
}

.navbar-default .navbar-nav > li > a > i {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Eyebrows / editorial labels                                                */
/* -------------------------------------------------------------------------- */

.propeller-eyebrow {
  font-family: var(--p-font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--p-accent);
  margin: 0 0 14px;
}

.propeller-text-link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-muted) !important;
  white-space: nowrap;
}

.propeller-text-link:hover {
  color: var(--p-text) !important;
}

.propeller-field-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p-faint);
  margin-bottom: 8px;
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Client dashboard                                                           */
/* -------------------------------------------------------------------------- */

.propeller-dashboard {
  padding-top: 28px;
  padding-bottom: 64px;
}

.propeller-dash-hero {
  margin-bottom: 56px;
  max-width: 640px;
}

.propeller-dash-greeting {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--p-text) !important;
  margin: 0 0 12px !important;
}

.propeller-dash-greeting em {
  font-style: italic;
  font-weight: 300;
  color: var(--p-text);
}

.propeller-dash-sub {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--p-muted);
  letter-spacing: -0.01em;
}

.propeller-dash-section {
  margin-bottom: 56px;
}

.propeller-section-head {
  margin-bottom: 22px;
}

.propeller-section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.propeller-section-title {
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em;
  color: var(--p-text) !important;
  margin: 0 !important;
}

.propeller-dash-panel > .panel-body {
  padding: 28px 24px 32px !important;
}

.propeller-stat-grid {
  margin-left: -8px;
  margin-right: -8px;
}

.propeller-stat-grid > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.propeller-stat-card {
  background: var(--p-ink);
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 20px 18px 16px;
  height: 100%;
  transition: border-color 0.25s var(--p-ease), background 0.25s var(--p-ease);
}

.propeller-stat-card:hover {
  border-color: var(--p-border-strong);
  background: var(--p-lift);
}

.propeller-stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.propeller-stat-card__label {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-muted) !important;
  line-height: 1.35;
}

.propeller-stat-card__label:hover {
  color: var(--p-text) !important;
}

.propeller-stat-card__value {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--p-text);
  line-height: 1;
  white-space: nowrap;
}

.propeller-stat-card__of {
  font-size: 13px;
  color: var(--p-faint);
  font-weight: 400;
}

.propeller-stat-card .progress {
  height: 3px;
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--p-pill);
  box-shadow: none;
  overflow: hidden;
}

.propeller-stat-card .progress-bar {
  border-radius: var(--p-pill);
  box-shadow: none;
}

.propeller-stat-card .progress-bar-danger {
  background: var(--p-danger) !important;
}

.propeller-stat-card .progress-bar-success {
  background: var(--p-success) !important;
}

.propeller-stat-card .progress-bar-warning {
  background: var(--p-warning) !important;
}

.propeller-project-grid {
  gap: 12px !important;
}

.propeller-project-card {
  background: var(--p-ink) !important;
  border-color: var(--p-border) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: border-color 0.25s var(--p-ease), background 0.25s var(--p-ease), transform 0.35s var(--p-ease);
}

.propeller-project-card:hover {
  background: var(--p-lift) !important;
  border-color: var(--p-border-strong) !important;
  transform: translateY(-2px);
}

.propeller-project-card__label {
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400 !important;
}

.propeller-project-card__value {
  font-size: 28px !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em;
  color: var(--p-text) !important;
}

.propeller-chart-toolbar {
  margin: 28px 0 18px;
  padding-top: 22px;
  border-top: 1px solid var(--p-border);
}

.propeller-chart-frame {
  background: var(--p-ink);
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 20px 16px 8px;
}

/* -------------------------------------------------------------------------- */
/* Client login composition                                                   */
/* Beat Perfex theme_style custom CSS (#eee + Circular) — login/forgot only.  */
/* Solid void on #wrapper/footer (transparent still shows theme_style #eee).  */
/* -------------------------------------------------------------------------- */

html:has(body.customers_login),
html:has(.propeller-login-page),
body.customers_login,
body.customers:has(.propeller-login-page) {
  background: #050507 !important;
  background-color: #050507 !important;
  font-family: var(--p-font) !important;
  color: var(--p-text) !important;
}

body.customers_login #wrapper,
body.customers_login #content,
body.customers:has(.propeller-login-page) #wrapper,
body.customers:has(.propeller-login-page) #content,
body.customers_login footer,
body.customers_login footer.footer,
body.customers_login .footer,
body.customers:has(.propeller-login-page) footer,
body.customers:has(.propeller-login-page) .footer,
body.customers_login .container,
body.customers:has(.propeller-login-page) .container {
  background: #050507 !important;
  background-color: #050507 !important;
}

body.customers_login .footer,
body.customers_login footer,
body.customers:has(.propeller-login-page) .footer,
body.customers:has(.propeller-login-page) footer {
  border-top: 0 !important;
  color: var(--p-faint);
}

body.customers_login .copyright-footer,
body.customers:has(.propeller-login-page) .copyright-footer {
  color: var(--p-faint);
}

.propeller-login-page {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 48px;
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
  clear: both;
}

/* Escape Bootstrap .row negative margins / column float traps */
.row > .propeller-login-page {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.propeller-login-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(142, 200, 232, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(235, 233, 228, 0.05), transparent 50%);
}

.propeller-login-compose {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.propeller-wordmark--login {
  display: inline-flex;
  justify-content: center;
  margin: 0 auto 32px;
  line-height: 0;
}

.propeller-wordmark--login img {
  width: 168px;
  height: auto;
  filter: none !important;
  opacity: 1;
}

.propeller-login-eyebrow {
  margin-bottom: 10px;
  color: var(--p-accent) !important;
}

.propeller-login-heading,
.propeller-login-page .login-heading,
.propeller-login-page .forgot-password-heading {
  font-family: var(--p-font) !important;
  font-size: clamp(26px, 3.6vw, 34px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em;
  margin: 0 0 28px !important;
  color: var(--p-text) !important;
  line-height: 1.15;
}

.propeller-login-form .panel_s,
.propeller-login-page .panel_s {
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.propeller-login-form .panel_s > .panel-body,
.propeller-login-page .panel_s > .panel-body {
  text-align: left;
  padding: 28px 26px !important;
  border-radius: 16px !important;
  background: rgba(18, 18, 21, 0.88) !important;
  border: 1px solid var(--p-border) !important;
}

.propeller-login-page label,
.propeller-login-page .control-label {
  font-family: var(--p-font) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-muted) !important;
  font-weight: 400 !important;
}

.propeller-login-page .form-control {
  height: 44px;
  font-family: var(--p-font) !important;
}

.propeller-login-page .checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px !important;
  color: var(--p-muted) !important;
}

.propeller-login-page .btn-primary {
  background: var(--p-text) !important;
  border-color: var(--p-text) !important;
  color: var(--p-void) !important;
  font-family: var(--p-font) !important;
  margin-top: 8px;
  padding: 12px 20px;
}

.propeller-login-page .btn-primary:hover,
.propeller-login-page .btn-primary:focus {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--p-void) !important;
}

.propeller-login-footer-link {
  margin-top: 22px;
}

.propeller-login-footer-link a {
  font-family: var(--p-font) !important;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-muted) !important;
}

.propeller-login-footer-link a:hover {
  color: var(--p-text) !important;
}

@media (max-width: 767px) {
  .propeller-login-page {
    min-height: calc(100vh - 88px);
    padding: 40px 16px 32px;
  }

  .propeller-dash-hero {
    margin-bottom: 40px;
  }

  .propeller-dash-section {
    margin-bottom: 40px;
  }

  .propeller-stat-card__value {
    font-size: 18px;
  }
}