/* VersaPoint reference-one visual refinement. Loaded last to avoid legacy overrides. */
:root{--vp-ref-navy:#081f42;--vp-ref-blue:#1766eb;--vp-ref-ice:#f3f8ff;--vp-ref-stroke:#dce7f7;--vp-ref-muted:#637e9c}
.vp-customer-app{background:#f3f8ff!important;gap:14px!important;font-family:'Cairo','Inter',sans-serif!important}
.vp-customer-app .vp-customer-main{gap:14px!important;align-content:start}
.vp-customer-app .vp-customer-sidebar{background:linear-gradient(180deg,#0b294f,#061a36 72%,#06152d)!important;border-radius:20px!important;padding:22px 15px!important;box-shadow:0 18px 42px rgba(4,21,46,.16)!important}
.vp-customer-app .vp-side-top--brandonly{padding:8px 6px 21px!important}
.vp-customer-app .vp-side-brand-wide{display:block;width:min(180px,96%)!important;height:auto!important;max-height:96px!important;object-fit:contain;margin:0 auto 9px!important}
.vp-customer-app .vp-side-top strong{font-size:16px!important;line-height:1.5}
.vp-customer-app .vp-side-nav a,.vp-customer-app .vp-report-nav-parent{font-size:13px!important;min-height:42px!important;padding:9px 12px!important;border-radius:11px!important}
.vp-customer-app .vp-side-nav>a.active,.vp-customer-app .vp-report-nav-parent.active{background:linear-gradient(110deg,#1557c8,#287dfa)!important}
.vp-customer-app .vp-customer-topbar{min-height:62px!important;border:1px solid var(--vp-ref-stroke)!important;background:linear-gradient(180deg,#fff,#fafcff)!important;border-radius:17px!important;box-shadow:0 5px 14px rgba(4,25,57,.04)!important;padding:9px 18px!important;direction:ltr!important}
.vp-customer-app .vp-topbar-brand img{height:33px!important;width:auto!important;max-width:190px!important;object-fit:contain}
.vp-customer-app .vp-topbar-actions{direction:rtl!important;margin:0!important;gap:10px!important}
.vp-customer-app .vp-top-user strong{font-size:13px!important}
.vp-customer-app .vp-bell{width:39px!important;height:39px!important;border-radius:12px!important}
.vp-customer-app .vp-branch-lang{padding:8px 11px!important}
.vp-customer-app .vp-card,.vp-customer-app .vp-branch-unit,.vp-customer-app .vp-report-data-card,.vp-customer-app .vp-branch-panel{border:1px solid var(--vp-ref-stroke)!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;box-shadow:0 8px 20px rgba(10,44,87,.045)!important;border-radius:17px!important}
.vp-customer-app .vp-hero{box-shadow:none!important;border-radius:17px!important}
.vp-customer-app .vp-hero--without-status{background:#fff!important;color:#0b2249!important;border:1px solid #dce8fa!important;min-height:96px!important;padding:17px 23px!important;grid-template-columns:60px minmax(0,1fr)!important}
.vp-customer-app .vp-hero--without-status::before{display:none}
.vp-customer-app .vp-hero--without-status .vp-hero-art{background:#e7f1ff!important;border:0!important;color:#1665db!important;width:53px!important;height:53px!important;font-size:26px!important}
.vp-customer-app .vp-hero--without-status h1{color:#071b3c!important;font-size:clamp(22px,2.2vw,32px)!important;margin:4px 0!important}
.vp-customer-app .vp-hero--without-status p{color:#627996!important;font-size:12px!important}
.vp-customer-app .vp-hero--without-status .vp-tag{display:none!important}
.vp-customer-app .vp-kpi-row{border:0!important;box-shadow:none!important;background:transparent!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important}
.vp-customer-app .vp-kpi-row article{min-height:98px!important;background:#fff!important;border:1px solid var(--vp-ref-stroke)!important;border-radius:16px!important;box-shadow:0 7px 18px rgba(7,38,80,.04)!important;padding:14px 58px 14px 14px!important;gap:7px!important}
.vp-customer-app .vp-kpi-row article strong{font-size:20px!important}
.vp-customer-app .vp-kpi-row article span{font-size:12px!important;color:#6c7e9b!important}
.vp-customer-app .vp-kpi-row article i{width:34px!important;height:34px!important;border-radius:11px!important;font-size:17px!important;inset-inline-end:12px!important}
/* Compact horizontal branch records on desktop, like the approved first collage. */
.vp-customer-app .vp-branch-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-bottom:14px!important}
.vp-customer-app .vp-branch-metrics article{border-radius:15px!important;padding:15px 18px!important;background:#fff!important;border:1px solid var(--vp-ref-stroke)!important;box-shadow:0 7px 16px rgba(7,38,80,.04)!important}
.vp-customer-app .vp-branch-metrics article strong{font-size:25px!important}
.vp-customer-app .vp-branch-list-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
.vp-customer-app .vp-branch-unit{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(145px,.82fr) minmax(290px,1.55fr) minmax(220px,1fr);gap:15px!important;align-items:center;padding:17px!important;min-width:0}
.vp-customer-app .vp-branch-unit-top{flex-direction:column-reverse!important;align-items:flex-start!important;justify-content:center!important;gap:8px!important;min-width:0}
.vp-customer-app .vp-branch-unit-top h2{font-size:16px!important}
.vp-customer-app .vp-branch-unit-top .vp-branch-status{margin:0!important}
.vp-customer-app .vp-branch-unit-plan{min-width:0;margin:0!important;background:#f0f6ff!important;border:1px solid #e4edfb;border-radius:13px!important;padding:12px!important}
.vp-customer-app .vp-branch-unit-plan strong{font-size:14px!important}
.vp-customer-app .vp-branch-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0!important;gap:6px!important;min-width:0}
.vp-customer-app .vp-branch-facts>div{padding:7px 10px!important;border-radius:10px!important;gap:2px!important;min-width:0}
.vp-customer-app .vp-branch-facts small{font-size:10px!important}
.vp-customer-app .vp-branch-facts strong{font-size:11px!important}
.vp-customer-app .vp-branch-card-actions{min-width:0;gap:7px!important}
.vp-customer-app .vp-branch-unit>.vp-branch-outline{min-width:0;width:100%!important}
.vp-customer-app .vp-branch-expanded{grid-column:1/-1;margin:0!important}
.vp-customer-app .vp-branch-pagehead{margin-bottom:16px!important}
.vp-customer-app .vp-branch-pagehead h1{font-size:29px!important}
/* The approved upgrade cards: symmetric three columns, colored icon, constant rows. */
.vp-upgrade-app--clean .vp-upgrade-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:14px!important}
.vp-upgrade-app--clean .vp-upgrade-choice{height:100%!important;min-width:0!important;gap:10px!important;padding:15px!important}
.vp-upgrade-app--clean .vp-upgrade-choice .vp-card-head{min-height:63px!important}
.vp-upgrade-app--clean .vp-package-icon{width:46px;height:46px;border:0;border-radius:14px;background:#e4efff;color:#246af0;display:grid;place-items:center}
.vp-upgrade-app--clean .vp-package-icon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vp-upgrade-app--clean .vp-upgrade-choice:nth-child(2) .vp-package-icon{background:#fff2dc;color:#df9621}
.vp-upgrade-app--clean .vp-price-grid.compact{gap:5px!important}
.vp-upgrade-app--clean .vp-price-grid.compact>div{border-radius:8px!important;padding:8px 11px!important;min-height:36px!important}
.vp-upgrade-app--clean .vp-price-grid.compact .total{background:linear-gradient(125deg,#071e42,#185ab4)!important;padding:12px!important}
.vp-upgrade-app--clean .vp-upgrade-submit{padding:18px!important}
.vp-upgrade-app--clean .vp-upgrade-submit .vp-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* Compact home dashboard financial chart and branch feed. */
.vp-overview-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.vp-overview-card{padding:19px!important;min-width:0;display:flex;flex-direction:column;gap:12px;min-height:300px}
.vp-overview-card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:54px}
.vp-overview-card-title h2{font-size:18px;font-weight:900;color:#092650;margin:0 0 4px}
.vp-overview-card-title p{font-size:11px;color:#617c9e;font-weight:700;margin:0;line-height:1.8}
.vp-overview-card-title>a,.vp-overview-card-title>span{font-size:11px;font-weight:850;color:#1b64d4;padding:7px 11px;border-radius:9px;border:1px solid #d9e8fd;background:#f4f9ff;white-space:nowrap}
.vp-overview-bar-chart{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;align-items:end;min-height:178px;padding:8px 8px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf2fa 40px);border-radius:11px}
.vp-overview-bar-item{height:178px;display:grid;grid-template-rows:24px 1fr 25px;gap:5px;text-align:center;min-width:0;align-items:end}
.vp-overview-bar-amount{font-size:10px;font-weight:750;color:#597291;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-overview-bar-track{height:100%;display:flex;align-items:flex-end;justify-content:center}
.vp-overview-bar-track i{width:min(64%,45px);min-height:0;background:linear-gradient(180deg,#73b2ff,#2569e8);border-radius:9px 9px 0 0;display:block;box-shadow:0 8px 12px rgba(34,111,233,.1)}
.vp-overview-bar-date{color:#6e83a0;font-size:10px;font-weight:800}
.vp-overview-branch-list{display:grid;gap:8px;flex:1;align-content:start}
.vp-overview-branch-row{display:flex;align-items:center;gap:11px;padding:9px 12px;background:#f7faff;border:1px solid #e5eefb;border-radius:11px;text-decoration:none!important;min-width:0}
.vp-overview-branch-row>div{display:grid;gap:1px;min-width:0;flex:1}
.vp-overview-branch-row strong{font-size:13px;color:#102d57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-overview-branch-row small{font-size:10px;color:#7386a0}
.vp-overview-branch-badge{background:#e5efff;border-radius:10px;color:#2767df;width:32px;height:32px;display:grid;place-items:center}
.vp-overview-active,.vp-overview-pending{font-size:10px;font-weight:850;border-radius:30px;padding:5px 9px;white-space:nowrap}
.vp-overview-active{background:#dff9e8;color:#11804d}.vp-overview-pending{background:#fff3df;color:#9a6616}
.vp-overview-add{width:100%;margin-top:auto;text-decoration:none!important}
.vp-overview-account-details{border:1px solid #dae5f7;border-radius:15px;background:#fff;margin-top:1px;padding:0 15px 15px}
.vp-overview-account-details summary{padding:15px;cursor:pointer;font-size:13px;font-weight:850;color:#1e61c7}
.vp-overview-account-details .vp-subscriber-grid{margin-top:4px}
/* Hub matching the 3x2 report tile arrangement. */
.vp-report-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.vp-report-hub-card{min-height:205px!important;align-items:center!important;text-align:center!important;padding:20px!important;border-radius:16px!important}
.vp-report-hub-icon{width:54px!important;height:54px!important}
.vp-report-intro{padding:20px 24px!important}
.vp-report-section-grid>.vp-card{margin:0!important}
/* Mobile navigation and deliberate stacking, no horizontal card overflow. */
@media (max-width:1280px){
  .vp-customer-app .vp-branch-unit{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-customer-app .vp-branch-expanded{grid-column:1/-1}
}
@media (max-width:1160px){
  .vp-customer-app .vp-side-top{display:none!important}
  .vp-customer-app .vp-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-upgrade-app--clean .vp-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-report-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:780px){
  .vp-customer-app{padding:10px!important;gap:10px!important}
  .vp-customer-app .vp-customer-main{gap:10px!important}
  .vp-customer-app .vp-customer-topbar{padding:8px 12px!important;gap:6px!important;min-height:58px!important}
  .vp-customer-app .vp-topbar-brand img{height:26px!important;max-width:130px!important}
  .vp-customer-app .vp-top-user strong{max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px!important}
  .vp-customer-app .vp-hero--without-status{padding:14px!important;grid-template-columns:1fr!important;min-height:0!important}
  .vp-customer-app .vp-hero--without-status .vp-hero-art{display:none!important}
  .vp-customer-app .vp-hero--without-status h1{font-size:23px!important}
  .vp-overview-cards{grid-template-columns:1fr!important}
  .vp-overview-card{min-height:240px}
  .vp-upgrade-app--clean .vp-upgrade-grid{grid-template-columns:1fr!important}
  .vp-upgrade-app--clean .vp-upgrade-submit .vp-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-customer-app .vp-branch-unit{grid-template-columns:1fr!important;gap:12px!important}
  .vp-customer-app .vp-branch-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-customer-app .vp-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-report-hub-grid{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .vp-customer-app .vp-kpi-row,.vp-customer-app .vp-branch-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vp-customer-app .vp-kpi-row article{padding:10px 40px 10px 8px!important;min-height:75px!important}
  .vp-customer-app .vp-kpi-row article strong{font-size:15px!important}
  .vp-customer-app .vp-kpi-row article i{inset-inline-end:5px!important;width:29px!important;height:29px!important}
  .vp-customer-app .vp-branch-facts{grid-template-columns:1fr!important}
  .vp-upgrade-app--clean .vp-upgrade-submit .vp-mini-grid{grid-template-columns:1fr!important}
  .vp-overview-bar-amount{display:none}
}