/* V15.4 — single source-of-truth theme for the existing functional components.
   No extra page banners, no injected content, no Supabase modifications. */
:root{--bg:#f3f6fb;--sub:#64748b;--line:#dce4ee;--accent:#326a99;--primary:#326a99;--green:#326a99;--brand:#326a99}
html,body{background:#f3f6fb;color:#233448;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.v5-head{background:#24374d!important;color:#fff!important;border-bottom:1px solid #40556b;box-shadow:0 3px 12px #17283c20}
.v5-head .brand{color:#fff!important}.v5-head button{color:#fff!important}
.shell aside{background:linear-gradient(160deg,#233448,#18283a)!important;color:#f5f8fc!important}
.shell aside .nav{color:#e7edf6!important}.shell aside .nav.active{background:#356e9f!important;color:#fff!important}
#mobileNav,.mobile-nav{background:#1c2c40!important;border-top:1px solid #40556b!important}
#mobileNav .mobile-tab,.mobile-nav .mobile-tab{color:#e6edf6!important;background:transparent!important}
#mobileNav .mobile-tab.active,.mobile-nav .mobile-tab.active{background:#356e9f!important;color:#fff!important;border-radius:13px!important}
.mobile-tab .v100-tab-icon svg{width:25px;height:25px;stroke:currentColor}
#main{color:#233448;min-width:0;max-width:none}
/* The original vTitle() now emits ONE native accessible header, not an overlay. */
#main .v5-page-title{display:flex!important;align-items:center!important;gap:15px!important;background:linear-gradient(120deg,#25384d,#354c66)!important;color:#fff!important;padding:21px 23px!important;margin:0 0 21px!important;min-height:100px!important;border-radius:18px!important;box-shadow:0 7px 20px #24374d14!important;overflow:visible!important}
#main .v5-page-title .v5-page-title-icon{width:49px;height:49px;display:grid;place-items:center;flex:none;background:#ffffff16;border:1px solid #ffffff45;border-radius:13px;color:#fff!important}
#main .v5-page-title .v5-page-title-icon svg{width:27px;height:27px;color:#fff!important}
#main .v5-page-title .v5-page-title-text{min-width:0;flex:1}
#main .v5-page-title h1{color:#fff!important;font-size:clamp(23px,3vw,30px)!important;line-height:1.2!important;margin:0 0 5px!important;overflow-wrap:anywhere}
#main .v5-page-title p{color:#d9e6f2!important;font-size:14px!important;line-height:1.4!important;margin:0!important}
/* The legacy green hero is a native component; recolor it rather than layering another header. */
#main .v5-hero{background:linear-gradient(120deg,#25384d,#354c66)!important;color:#fff!important;border:1px solid #405a74!important;border-radius:18px!important;margin:0 0 20px!important;min-height:unset!important;padding:24px!important}
#main .v5-hero:before,#main .v5-hero:after{display:none!important}
#main .v5-hero h1,#main .v5-hero h1 span{color:#fff!important}#main .v5-hero .eyebrow{color:#c8dfef!important}#main .v5-hero p{color:#dce7f1!important}
/* Native content panels: consistent contrast and spacing. */
#main .card,#main .panel,#main .v51-calendar,#main .v5-quick{background:#fff!important;border-color:#d8e1eb!important;border-radius:17px!important;box-shadow:0 5px 18px #2037510a!important}
#main .v5-metric,#main .v5-mission-summary{border-color:#d8e1eb!important;border-radius:15px!important;color:#233448!important}
#main .v5-metric strong{color:#233448!important}
#main .v5-action{background:#f4f7fb!important;color:#233448!important;border:1px solid #d7e2ec!important;border-radius:12px!important}
#main .v5-more-item{background:#fff!important;color:#233448!important;border:1px solid #d8e1eb!important;border-radius:15px!important;min-height:76px!important;padding:17px!important;margin-bottom:12px!important}
#main .v5-more-item strong{color:#233448!important}#main .v5-more-item small{color:#64748b!important}#main .v5-more-item .v5-chevron{color:#326a99!important}
#main .v51-month button{background:#e9f0f7!important;color:#285779!important}
#main input:not([type=checkbox]):not([type=radio]),#main textarea,#main select{background:#fff!important;color:#233448!important;border:1px solid #ccd9e5!important;border-radius:12px!important;max-width:100%}
/* Keep functional status badges (completed/planned/error) colored for meaning. */
#main button:focus-visible,#main input:focus-visible{outline:3px solid #8bbce0!important;outline-offset:2px}
/* Dashboard is already a native renderer of real app data in integration-v150.js. */
#main .px150-dashboard .px150-heading h1{color:#fff!important}
#main .px150-dashboard .px150-greeting h2{color:#203c55!important}
#main .px150-dashboard .px150-job{background:transparent!important}
/* Login: same navy brand, real existing form and event handlers. */
#authPanel,#authPanel .px1261-login-layout,#authPanel .px1261-form-side{background:#f3f6fb!important;color:#233448!important}
#authPanel .px1261-showcase{background:linear-gradient(135deg,#203449,#2b4964 72%,#365f81)!important;color:#fff!important}
#authPanel .px1261-showcase:before,#authPanel .px1261-showcase:after,#authPanel .px1261-showcase-inner:before,#authPanel .px1261-showcase-inner:after{background-image:none!important}
#authPanel .px1261-showcase-copy h2,#authPanel .px1261-showcase-copy p,#authPanel .px1261-brand,#authPanel .px1261-brand strong{color:#fff!important}
#authPanel .px1261-eyebrow{color:#d3e6f8!important}
#authPanel .px1261-accent-line,#authPanel .px1261-heading-line{background:#447ca9!important}
#authPanel #authBox{background:#fff!important;border:1px solid #d7e2ed!important;box-shadow:0 12px 38px #1b30421a!important;color:#233448!important}
#authPanel #authBox h1,#authPanel #authBox h2,#authPanel #authBox label{color:#233448!important}
#authPanel #authBox input{background:#fff!important;color:#203448!important;border:1px solid #cbd8e5!important}
#authPanel #loginForm>button[type=submit],#authPanel #px123SignupForm>button[type=submit]{background:#326a99!important;color:#fff!important}
#authPanel .forgot-link,#authPanel .px123-link{color:#28628d!important}
@media(max-width:800px){body{padding-bottom:88px!important}.shell main#main{padding:17px 14px 35px!important;min-width:0!important;overflow-x:hidden!important}.v5-head{height:63px!important}#main .v5-page-title{padding:18px!important;min-height:88px!important;gap:12px!important}#main .v5-page-title .v5-page-title-icon{width:44px;height:44px}#main .v5-page-title h1{font-size:23px!important}#main .v5-page-title p{font-size:13px!important}#main .v5-hero{padding:22px!important}#authPanel .px1261-showcase{min-height:0!important}#authPanel .px1261-showcase-inner{padding-top:25px!important;padding-bottom:25px!important}}
@media(min-width:801px){.shell main#main{max-width:none!important;width:100%!important;padding:26px 30px!important}.shell{min-width:0!important}.shell aside{flex:0 0 245px!important}}

/* V15.5 — component-level consolidation. Native headers only; no DOM overlay. */
:root{--brand:#326a99!important;--primary:#326a99!important;--accent:#326a99!important;--green:#326a99!important;--emerald:#326a99!important}
#main .v5-page-title,#main .v5-hero{isolation:isolate}
#main .v5-hero,#main .v52-hero,#main .v100-hero,#main .v64-hero{background:linear-gradient(120deg,#25384d,#354c66)!important;color:white!important;border:1px solid #425a74!important;box-shadow:0 8px 22px #20354a12!important}
#main .v5-hero *,#main .v52-hero h1,#main .v52-hero h2,#main .v52-hero p{color:#fff!important}
#main .v5-page-title h1,#main .v5-page-title p{color:#fff!important;text-shadow:none!important}
#main .v5-page-title::before,#main .v5-page-title::after{display:none!important}
#main .v5-tabs button.active,#main .v52-view-btn.active,#main .v51-tab.active,#main .v100-tab.active{background:#326a99!important;color:#fff!important;border-color:#326a99!important}
#main .v52-job,#main .v5-mission-summary,#main .v5-more-item{box-shadow:0 3px 12px #2034480a!important}
#main .v52-job strong,#main .v52-job-info strong,#main .v5-more-item strong{color:#203448!important}
#main .v52-job small,#main .v52-job-info small{color:#64748b!important}
#main button:not(.danger):not(.v52-job):not(.v5-more-item):not(.px150-job):not(.px150-kpi):not(.px150-action){accent-color:#326a99}
#main .px150-dashboard{max-width:1400px!important}
#main .px150-heading{margin:0 0 17px!important;border-radius:17px!important}
#main .px150-kpi{min-width:0!important}
#main .px150-kpi-label{color:#203448!important}
#main .px150-panel-title h2{color:#203448!important}
#main .px150-greeting{background:#e9f1fa!important}
#main .px150-job-status{font-weight:650!important}
#main .px150-job-date{overflow-wrap:anywhere}
#authPanel .px1261-showcase{background:linear-gradient(130deg,#203449,#294963)!important;box-shadow:none!important}
#authPanel .px1261-showcase-copy h2{color:#fff!important}
#authPanel .px1261-showcase-copy p{color:#e0e9f3!important}
#authPanel .px1261-benefits strong{color:#fff!important}
#authPanel .px1261-benefits small{color:#d7e4f1!important}
#authPanel .px1261-benefit-icon{background:#ffffff17!important;color:#e7f3ff!important}
#authPanel .px1261-brand{color:#fff!important}
#authPanel .px1261-form-side{background:#f3f6fb!important}
#authPanel #authBox{border-radius:22px!important}
#authPanel #authBox .v64-auth-intro h1{color:#203448!important}
#authPanel #authBox .v64-auth-intro p{color:#63758a!important}
#authPanel #loginForm>button[type=submit]{background:#326a99!important;box-shadow:0 8px 20px #326a9928!important}
#authPanel #loginForm>button[type=submit]:hover{background:#24557d!important}
#authPanel .px1261-inputwrap{border-color:#cbd8e5!important;background:#fff!important}
#authPanel .px1261-inputwrap:focus-within{border-color:#326a99!important;box-shadow:0 0 0 3px #326a991c!important}
@media(max-width:800px){
 #main .px150-heading{margin:0 0 15px!important;padding:17px!important}
 #main .px150-kpi{padding:12px!important}
 #main .px150-kpi strong{font-size:27px!important}
 #main .px150-panel{padding:16px!important}
 #main .px150-job{gap:8px!important}
 #main .px150-job-date{flex:0 0 66px!important}
 #main .px150-job-desc strong{font-size:13px!important}
 #main .px150-job-status{font-size:11px!important}
 #authPanel .px1261-showcase-inner{padding:28px 22px!important}
 #authPanel .px1261-showcase-copy h2{font-size:clamp(25px,7vw,34px)!important}
 #authPanel .px1261-form-side{padding:16px!important}
 #authPanel #authBox{padding:23px!important}
}