/* HustlePay identity | November 2026
   This stylesheet loads after both legacy stylesheets to avoid their conflicting
   branding rules. Scope is deliberately limited to identity, never payments. */
:root { --hp-brand-navy:#0b2147; --hp-brand-blue:#1168ff; --hp-brand-orange:#ff8700; }
/* Main navigation: the real horizontal brand asset on a clean light card. */
.sidebar .brand {
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  width:100%; min-width:0; min-height:87px!important; padding:12px!important;
  margin:0 0 10px!important; border:1px solid rgba(255,255,255,.12)!important;
  background:#fff!important; border-radius:14px!important;
  box-shadow:0 6px 22px rgba(0,9,32,.11)!important; overflow:hidden!important;
}
.sidebar .hp-brand-home {display:flex!important;flex:1 1 auto!important;min-width:0;align-items:center!important;justify-content:flex-start!important;text-decoration:none!important;}
.sidebar .hp-brand-full-image {display:block!important;width:100%!important;max-width:218px!important;height:auto!important;max-height:66px!important;object-fit:contain;object-position:left center;flex-shrink:1;}
.sidebar .hp-brand-icon-image {display:none!important;width:44px!important;height:44px!important;object-fit:contain;}
/* Existing sidebar collapse has many old rules; make brand state explicit. */
@media (min-width:1025px) {
  .app-shell.sidebar-collapsed .sidebar .brand {padding:9px 6px!important;min-height:63px!important;justify-content:center!important;}
  .app-shell.sidebar-collapsed .sidebar .hp-brand-home {justify-content:center!important;}
  .app-shell.sidebar-collapsed .sidebar .hp-brand-full-image {display:none!important;}
  .app-shell.sidebar-collapsed .sidebar .hp-brand-icon-image {display:block!important;}
}
.sidebar .nav-menu.hp-navigation a.active {border-left-color:var(--hp-brand-orange)!important;}
.sidebar .nav-menu.hp-navigation a:not(.hp-brand-home) > .nav-label {
  flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:none!important;
  white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important;
}
/* Keep brand visible but avoid duplicating the full wordmark in the topbar. */
.hp-header-brand-icon {display:block;width:30px;height:30px;flex:0 0 30px;object-fit:contain;}
.hp-footer-identity{display:inline-flex!important;align-items:center;gap:7px;white-space:normal!important;}
.hp-footer-identity img{display:inline-block;vertical-align:middle;width:19px;height:19px;object-fit:contain;}
/* Login: recognizable product identity with excellent color contrast. */
.login-brand-panel {background:radial-gradient(90% 72% at 8% 15%,#173c77 0%,#0d2851 50%,#081b37 100%)!important;}
.login-brand-panel:after{border-color:rgba(30,105,238,.13)!important;}
.login-brand-lockup {display:flex;align-items:center;gap:13px;min-width:0;}
.hp-login-hero-icon {display:block;flex:0 0 54px;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 11px rgba(0,0,0,.14));}
.login-brand-lockup strong {font-size:1.45rem!important;color:#fff!important;letter-spacing:-.03em;}
.login-brand-lockup small {font-size:.77rem!important;color:#d6e2f2!important;}
.login-brand-copy .login-kicker {color:#ffbb70!important;}
.login-brand-copy h1 {max-width:600px;color:#fff!important;}
.login-brand-copy>p{color:#d8e2f3!important;}
.login-card-header {display:block!important;}
.login-card-header .hp-login-form-identity {display:grid!important;justify-items:start;gap:8px;width:100%;}
.hp-login-wordmark {display:block;width:min(100%,240px)!important;height:auto!important;max-height:69px!important;object-fit:contain;object-position:left center;margin:0 0 17px;}
.login-card .login-form-eyebrow {color:#3879a9!important;letter-spacing:.1em;}
.login-card .login-submit {background:var(--hp-brand-navy)!important;border-radius:9px!important;min-height:46px!important;}
.login-card .login-submit:hover:not(:disabled) {background:#133869!important;}
.login-card :where(input,select,textarea):focus-visible {outline:2px solid #4b8bff!important;outline-offset:1px;}
/* Initial WebAssembly load and auth restoration share the same visual identity. */
.app-loading.hp-branded-loading {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:100dvh!important;padding:28px!important;background:linear-gradient(180deg,#fff,#f4f7ff)!important;color:#193454!important;text-align:center!important;}
.app-loading.hp-branded-loading:before {content:none!important;display:none!important;}
.hp-branded-loading img {width:74px;height:74px;object-fit:contain;margin:0 0 4px;}
.hp-branded-loading strong {display:block;font-size:1.4rem;font-weight:800;letter-spacing:-.035em;color:#102b52;}
.hp-branded-loading>span:not(.hp-loading-indicator) {display:block;font-size:.8rem;color:#718199;}
.hp-branded-loading>small {display:block;font-size:.82rem;color:#73849a;}
.hp-loading-indicator {display:block;width:54px;height:3px;border-radius:12px;background:linear-gradient(90deg,#ecf2fc 0%,#126afa 45%,#ff8700 70%,#ecf2fc 100%);background-size:200% auto;margin:16px 0 5px;animation:hp-brand-sweep 1.3s ease-in-out infinite;}
@keyframes hp-brand-sweep {to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.hp-loading-indicator{animation:none}}
/* Brand the print output, not the on-screen table layout. */
.hp-print-brand {display:none;}
@media print {
 .hp-print-brand{display:flex!important;justify-content:space-between;align-items:center;gap:20px;margin:0 0 17px;padding:0 0 11px;border-bottom:1px solid #cbd5e1!important;color:#63748a;font-size:11px;}
 .hp-print-brand img{display:block;max-width:220px;width:220px;height:auto;object-fit:contain;}
}
/* Phones: allow brand legibility without increasing the viewport height. */
@media(max-width:1024px){
 .sidebar .brand {min-height:78px!important;}
 .sidebar .hp-brand-full-image {max-width:207px!important;}
}
@media(max-width:780px){
 .login-brand-panel {background:#0b2147!important;}
 .login-brand-content {justify-content:center!important;}
 .login-brand-lockup strong{font-size:1.2rem!important;}
 .hp-login-hero-icon{width:44px;height:44px;flex-basis:44px;}
 .login-brand-lockup small {font-size:.69rem!important;}
 .hp-login-wordmark {width:min(100%,214px)!important;margin-bottom:11px;}
 .hp-header-brand-icon {width:25px;height:25px;flex-basis:25px;}
}

/* One-click, non-disruptive update prompt after a new release is published. */
.hp-release-notice {
  position: fixed; right: 20px; bottom: 20px; z-index: 25000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  max-width: min(570px, calc(100vw - 32px)); padding: 16px 18px;
  background: #fff; color: #0b2147; border: 1px solid #c9d9ee;
  border-left: 4px solid #0061df; border-radius: 14px;
  box-shadow: 0 16px 45px rgba(6,28,60,.22); font: inherit;
}
.hp-release-notice[hidden] { display: none !important; }
.hp-release-notice__copy { min-width: 190px; flex: 1 1 220px; display: grid; gap: 4px; }
.hp-release-notice__copy strong { font-size: 14px; line-height: 1.35; }
.hp-release-notice__copy span { font-size: 12px; line-height: 1.55; color: #49607b; }
.hp-release-notice__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hp-release-notice__button, .hp-release-notice__later {
  border-radius: 9px; padding: 9px 13px; cursor: pointer; font-size: 12px;
  font-weight: 700; line-height: 1.35; border: 1px solid transparent;
}
.hp-release-notice__button { color: #fff; background: #075bb7; }
.hp-release-notice__button:hover, .hp-release-notice__button:focus-visible { background: #06488f; }
.hp-release-notice__later { color: #244263; background: #f4f7fb; border-color: #d8e3f0; }
.hp-release-notice__later:hover, .hp-release-notice__later:focus-visible { background: #e9f0f9; }
@media(max-width:600px){
  .hp-release-notice { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .hp-release-notice__actions { width: 100%; }
  .hp-release-notice__button { flex: 1; }
}