/* STAS ERP v253 - stable full-view weather video, readable glass, content-only scroll */ :root{ --stas-header-h: 88px; --stas-footer-h: 56px; --sa-topbar-h: 72px; --sa-footer-h: 40px; --stas-readable-shadow: none; --stas-readable-shadow-soft: none; --stas-glass-bg: rgba(3,9,22,.86); --stas-glass-bg-strong: rgba(3,9,22,.94); --stas-glass-border: rgba(255,255,255,.22); } html{background:#020617!important;} body.stas-global-weather, body.sa-live-weather-enabled{ background:transparent!important; color:#f8fbff!important; } body.stas-global-weather::before, body.sa-live-weather-enabled::before{display:none!important;} /* One full screen video behind every header/sidebar/footer/card. */ .auth-weather-stage-global, .stas-global-weather-stage{ position:fixed!important; inset:0!important; width:100vw!important; height:100svh!important; overflow:hidden!important; pointer-events:none!important; z-index:0!important; background-color:#020617!important; isolation:isolate!important; } /* Let the inline poster (set per-page in layout_head) show instantly, before the video paints its first frame. */ .auth-weather-stage-global[style*="background"], .stas-global-weather-stage[style*="background"]{ background-color:transparent!important; } .auth-weather-stage-global .auth-weather-video, .stas-global-weather-stage .auth-weather-video, .stas-global-weather-stage video{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:100%!important; min-height:100%!important; object-fit:cover!important; object-position:center center!important; opacity:0!important; visibility:hidden!important; transform:translate3d(0,0,0)!important; backface-visibility:hidden!important; filter:saturate(1.03) contrast(1.04) brightness(.96)!important; will-change:opacity!important; transition:opacity .28s ease!important; } .auth-weather-stage-global .auth-weather-video.is-active, .stas-global-weather-stage .auth-weather-video.is-active, .stas-global-weather-stage video.is-active{ opacity:1!important; visibility:visible!important; } .auth-weather-video-overlay, .stas-global-weather-overlay{ position:absolute!important; inset:0!important; z-index:2!important; pointer-events:none!important; background: radial-gradient(circle at 20% 12%, rgba(255,255,255,.12), transparent 34%), linear-gradient(180deg, rgba(2,6,23,.24), rgba(2,6,23,.18) 44%, rgba(2,6,23,.42))!important; } body[data-video-tone="bright"] .auth-weather-video-overlay, body[data-weather-readable="bright"] .auth-weather-video-overlay, body[data-live-weather="sun"] .auth-weather-video-overlay, body[data-live-weather="sunny"] .auth-weather-video-overlay{ background: radial-gradient(circle at 24% 14%, rgba(255,255,255,.10), transparent 32%), linear-gradient(180deg, rgba(2,6,23,.22), rgba(3,18,39,.15) 48%, rgba(2,6,23,.34))!important; } body[data-video-tone="dark"] .auth-weather-video-overlay, body[data-live-weather="night"] .auth-weather-video-overlay, body[data-live-weather="clear-night"] .auth-weather-video-overlay{ background:linear-gradient(180deg, rgba(2,6,23,.20), rgba(2,6,23,.14) 45%, rgba(2,6,23,.46))!important; } /* Put real UI above the video but keep every surface translucent. Excludes .live-weather-picker: that's a JS-injected position:fixed modal appended directly to , and this rule was overriding its fixed positioning with relative, making it render inline in the page flow instead of as a proper full-screen centered overlay. */ body.stas-global-weather > :not(.stas-global-weather-stage):not(.auth-weather-stage-global):not(.live-weather-picker), body.sa-live-weather-enabled > :not(.stas-global-weather-stage):not(.auth-weather-stage-global):not(.live-weather-picker){ position:relative; z-index:2; } body .live-weather-picker{ position:fixed!important; inset:0!important; z-index:2000!important; } /* Website: content scroll only between header and footer. */ body.stas-weather-site{ height:100svh!important; min-height:100svh!important; overflow:hidden!important; } body.stas-weather-site .stas-site-header{ position:relative!important; z-index:20!important; height:auto!important; background:rgba(2,6,23,.28)!important; border-bottom:1px solid rgba(255,255,255,.14)!important; box-shadow:0 10px 22px rgba(2,6,23,.18)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.stas-weather-site .stas-site-header__inner{height:auto!important;flex-wrap:wrap!important;row-gap:8px!important;padding-top:8px!important;padding-bottom:8px!important;} body.stas-weather-site .stas-site-header__nav{flex-wrap:wrap!important;row-gap:6px!important;} body.stas-weather-site .stas-site-header__actions{flex-wrap:wrap!important;row-gap:8px!important;} body.stas-weather-site .stas-page-scroll{ position:relative!important; z-index:3!important; height:calc(100svh - var(--stas-header-h) - var(--stas-footer-h))!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain!important; background:transparent!important; } body.stas-weather-site footer{ position:relative!important; z-index:20!important; min-height:var(--stas-footer-h)!important; margin-top:0!important; padding-top:.75rem!important; padding-bottom:.75rem!important; background:rgba(2,6,23,.28)!important; border-top:1px solid rgba(255,255,255,.14)!important; box-shadow:0 -10px 22px rgba(2,6,23,.18)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.stas-weather-site .hero-gradient, body.stas-weather-site section, body.stas-weather-site main, body.stas-weather-site .public-page-main, body.stas-weather-site .container, body.stas-weather-site .row{ background:transparent!important; } body.stas-weather-site .hero-gradient{min-height:calc(100svh - var(--stas-header-h) - var(--stas-footer-h))!important;} /* SuperAdmin: topbar/footer fixed in layout, only content scrolls. */ body.stas-weather-superadmin{ height:100svh!important; min-height:100svh!important; overflow:hidden!important; background:transparent!important; } body.stas-weather-superadmin .sa-shell, body.stas-weather-superadmin .sa-main{ height:100svh!important; min-height:0!important; overflow:hidden!important; background:transparent!important; } body.stas-weather-superadmin .sa-main{position:relative!important;z-index:2!important;} body.stas-weather-superadmin .sa-sidebar{ height:100svh!important; min-height:100svh!important; overflow-y:auto!important; overflow-x:hidden!important; background:rgba(2,6,23,.62)!important; border-right:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:10px 0 30px rgba(2,6,23,.12)!important; } body.stas-weather-superadmin .sa-sidebar .brand, body.stas-weather-superadmin .sa-sidebar .brand-link, body.stas-weather-superadmin .sa-sidebar-nav, body.stas-weather-superadmin .sa-sidebar-version-inline, body.stas-weather-superadmin .sa-version-pill{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.stas-weather-superadmin .sa-topbar{ min-height:72px!important; height:auto!important; flex-wrap:wrap!important; row-gap:6px!important; padding-top:8px!important; padding-bottom:8px!important; position:relative!important; z-index:12!important; background:rgba(2,6,23,.62)!important; border-bottom:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 10px 26px rgba(2,6,23,.14)!important; } body.stas-weather-superadmin .sa-content{ height:calc(100svh - var(--sa-topbar-h) - var(--sa-footer-h))!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; background:transparent!important; padding-bottom:18px!important; overscroll-behavior:contain!important; } body.stas-weather-superadmin .portal-footer, body.stas-weather-superadmin .sa-auth-footer{ min-height:var(--sa-footer-h)!important; height:var(--sa-footer-h)!important; position:relative!important; z-index:12!important; background:rgba(2,6,23,.62)!important; border-top:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 -10px 26px rgba(2,6,23,.14)!important; } /* ERP app: same fixed topbar/sidebar/footer + scrolling content pattern as SuperAdmin. */ body.stas-weather-erp{ height:100svh!important; min-height:100svh!important; overflow:hidden!important; background:transparent!important; } body.stas-weather-erp .erp-shell, body.stas-weather-erp .erp-main{ height:100svh!important; min-height:0!important; overflow:hidden!important; background:transparent!important; } body.stas-weather-erp .erp-main{position:relative!important;z-index:2!important;} body.stas-weather-erp .erp-sidebar{ height:100svh!important; min-height:100svh!important; overflow-y:auto!important; overflow-x:hidden!important; background:rgba(2,6,23,.62)!important; border-right:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:10px 0 30px rgba(2,6,23,.12)!important; } body.stas-weather-erp .erp-sidebar .brand{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.stas-weather-erp .erp-topbar{ min-height:58px!important; height:auto!important; flex-wrap:wrap!important; row-gap:6px!important; padding-top:8px!important; padding-bottom:8px!important; position:relative!important; z-index:12!important; background:rgba(2,6,23,.62)!important; border-bottom:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 10px 26px rgba(2,6,23,.14)!important; } body.stas-weather-erp .erp-content{ height:calc(100svh - var(--erp-topbar-h,58px) - 40px)!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; background:transparent!important; padding-bottom:18px!important; overscroll-behavior:contain!important; } body.stas-weather-erp .portal-footer{ min-height:40px!important; height:40px!important; position:relative!important; z-index:12!important; background:rgba(2,6,23,.62)!important; border-top:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 -10px 26px rgba(2,6,23,.14)!important; } @media (max-width:991.98px){ body.stas-weather-erp .erp-content{height:auto!important;overflow:visible!important;} body.stas-weather-erp{overflow:auto!important;height:auto!important;} } /* Scrollbar appears only where the page actually scrolls and only on hover. */ .stas-page-scroll, body.stas-weather-superadmin .sa-content, body.stas-weather-superadmin .sa-sidebar, body.stas-weather-superadmin .sa-sidebar-nav{ scrollbar-width:thin!important; scrollbar-color:transparent transparent!important; scrollbar-gutter:stable!important; } /* v293: width no longer toggles - see stas-ui-stability-v293.css. */ .stas-page-scroll:hover, body.stas-weather-superadmin .sa-content:hover, body.stas-weather-superadmin .sa-sidebar:hover, body.stas-weather-superadmin .sa-sidebar-nav:hover{ scrollbar-width:thin!important; scrollbar-color:rgba(255,255,255,.44) transparent!important; } .stas-page-scroll::-webkit-scrollbar, body.stas-weather-superadmin .sa-content::-webkit-scrollbar, body.stas-weather-superadmin .sa-sidebar::-webkit-scrollbar, body.stas-weather-superadmin .sa-sidebar-nav::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;} .stas-page-scroll::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-content::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-sidebar::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-sidebar-nav::-webkit-scrollbar-thumb{background:transparent!important;border:2px solid transparent!important;background-clip:padding-box!important;border-radius:999px!important;} .stas-page-scroll:hover::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-content:hover::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-sidebar:hover::-webkit-scrollbar-thumb, body.stas-weather-superadmin .sa-sidebar-nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.44)!important;border:2px solid transparent!important;background-clip:padding-box!important;border-radius:999px!important;} .stas-page-scroll:hover::-webkit-scrollbar-track, body.stas-weather-superadmin .sa-content:hover::-webkit-scrollbar-track, body.stas-weather-superadmin .sa-sidebar:hover::-webkit-scrollbar-track, body.stas-weather-superadmin .sa-sidebar-nav:hover::-webkit-scrollbar-track{background:transparent!important;} /* Universal readable translucent surfaces; no white blur. */ body.stas-global-weather .glass, body.stas-global-weather .card, body.stas-global-weather .pricing-card, body.stas-global-weather .feature-card, body.stas-global-weather .support-card, body.stas-global-weather .profile-card, body.stas-global-weather .ticket-card, body.stas-global-weather .list-group-item, body.stas-global-weather .table-responsive, body.stas-global-weather .auth-live-quote-card, body.stas-global-weather .auth-hero-panel, body.stas-global-weather .auth-foundation-card, body.stas-global-weather .auth-foundation-card-panel, body.stas-global-weather .stas-auth-glass, body.stas-global-weather .stas-auth-card, body.stas-global-weather .stas-auth-quote, body.stas-weather-superadmin .sa-page-shell, body.stas-weather-superadmin .sa-content .card, body.stas-weather-superadmin .sa-content .text-bg-dark, body.stas-weather-superadmin .sa-analytics-card, body.stas-weather-superadmin .sa-map-panel, body.stas-weather-superadmin .sa-visitor-globe-card, body.stas-weather-superadmin .stat-card, body.stas-weather-superadmin .metric-card, body.stas-weather-superadmin .dashboard-card, body.stas-weather-superadmin .glass-card, body.stas-weather-superadmin .quick-action-card, body.stas-weather-superadmin .panel, body.stas-weather-superadmin .table-responsive, body.stas-weather-superadmin .list-group-item, body.stas-weather-erp .erp-content .card, body.stas-weather-erp .erp-content .text-bg-dark, body.stas-weather-erp .stat-card, body.stas-weather-erp .metric-card, body.stas-weather-erp .dashboard-card, body.stas-weather-erp .glass-card, body.stas-weather-erp .quick-action-card, body.stas-weather-erp .panel, body.stas-weather-erp .table-responsive, body.stas-weather-erp .list-group-item{ background:var(--stas-glass-bg)!important; border:1px solid var(--stas-glass-border)!important; color:#f8fbff!important; box-shadow:0 18px 42px rgba(2,6,23,.20), inset 0 1px 0 rgba(255,255,255,.08)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Catch-all: every stat/label/value inside a dashboard card must stay light-on-dark, no matter which Bootstrap text-utility or custom class the page markup uses. Excludes our custom-select parts (.stas-select-*), which own their colors. */ body.stas-weather-superadmin .sa-content .card *:not(input):not(select):not(textarea):not(button):not(.btn):not(a.btn):not(.stas-select-btn):not(.stas-select-list):not(.stas-select-opt), body.stas-weather-superadmin .sa-page-shell > *:not(.card) *:not(input):not(select):not(textarea):not(button):not(.btn):not(a.btn):not(.stas-select-btn):not(.stas-select-list):not(.stas-select-opt), body.stas-weather-erp .erp-content .card *:not(input):not(select):not(textarea):not(button):not(.btn):not(a.btn):not(.stas-select-btn):not(.stas-select-list):not(.stas-select-opt){ color:#ffffff!important; font-weight:600!important; text-shadow:none!important; } body.stas-weather-superadmin .sa-content .card h1, body.stas-weather-superadmin .sa-content .card h2, body.stas-weather-superadmin .sa-content .card h3, body.stas-weather-superadmin .sa-content .card h4, body.stas-weather-superadmin .sa-content .card h5, body.stas-weather-superadmin .sa-content .card h6, body.stas-weather-superadmin .sa-content .card .display-1, body.stas-weather-superadmin .sa-content .card .display-2, body.stas-weather-superadmin .sa-content .card .display-3, body.stas-weather-superadmin .sa-content .card .display-4, body.stas-weather-superadmin .sa-content .card .display-5, body.stas-weather-superadmin .sa-content .card .display-6, body.stas-weather-erp .erp-content .card h1, body.stas-weather-erp .erp-content .card h2, body.stas-weather-erp .erp-content .card h3, body.stas-weather-erp .erp-content .card h4, body.stas-weather-erp .erp-content .card h5, body.stas-weather-erp .erp-content .card h6, body.stas-weather-erp .erp-content .card .display-1, body.stas-weather-erp .erp-content .card .display-2, body.stas-weather-erp .erp-content .card .display-3, body.stas-weather-erp .erp-content .card .display-4, body.stas-weather-erp .erp-content .card .display-5, body.stas-weather-erp .erp-content .card .display-6{ color:#ffffff!important; font-weight:800!important; text-shadow:var(--stas-readable-shadow)!important; } body[data-video-tone="bright"] .glass, body[data-video-tone="bright"] .card, body[data-video-tone="bright"] .auth-foundation-card-panel, body[data-video-tone="bright"] .sa-page-shell, body[data-video-tone="bright"] .sa-content .card, body[data-video-tone="bright"] .sa-analytics-card, body[data-weather-readable="bright"] .glass, body[data-weather-readable="bright"] .card, body[data-weather-readable="bright"] .auth-foundation-card-panel, body[data-weather-readable="bright"] .sa-page-shell, body[data-weather-readable="bright"] .sa-content .card, body[data-weather-readable="bright"] .sa-analytics-card{ background:var(--stas-glass-bg-strong)!important; } body.stas-weather-superadmin .sa-content .card-body, body.stas-weather-superadmin .sa-content .card-header, body.stas-weather-superadmin .sa-content .card-footer, body.stas-weather-superadmin .sa-content .table, body.stas-weather-superadmin .sa-content .table-dark, body.stas-weather-superadmin .sa-content thead, body.stas-weather-superadmin .sa-content tbody, body.stas-weather-superadmin .sa-content tr, body.stas-weather-superadmin .sa-content td, body.stas-weather-superadmin .sa-content th, body.stas-weather-erp .erp-content .card-body, body.stas-weather-erp .erp-content .card-header, body.stas-weather-erp .erp-content .card-footer, body.stas-weather-erp .erp-content .table, body.stas-weather-erp .erp-content .table-dark, body.stas-weather-erp .erp-content thead, body.stas-weather-erp .erp-content tbody, body.stas-weather-erp .erp-content tr, body.stas-weather-erp .erp-content td, body.stas-weather-erp .erp-content th{ background:transparent!important; color:#f8fbff!important; border-color:rgba(255,255,255,.16)!important; } body.stas-weather-superadmin .sa-map-grid{opacity:.10!important;} body.stas-weather-superadmin .sa-visitor-globe{background:rgba(5,16,34,.26)!important;border-color:rgba(255,255,255,.18)!important;} /* Text readable against changing video. */ body.stas-global-weather h1, body.stas-global-weather h2, body.stas-global-weather h3, body.stas-global-weather h4, body.stas-global-weather h5, body.stas-global-weather h6, body.stas-global-weather p, body.stas-global-weather li, body.stas-global-weather label, body.stas-global-weather .lead, body.stas-global-weather .small, body.stas-global-weather .muted, body.stas-global-weather .text-secondary, body.stas-global-weather .text-muted, body.stas-global-weather .form-label, body.stas-weather-superadmin .sa-content h1, body.stas-weather-superadmin .sa-content h2, body.stas-weather-superadmin .sa-content h3, body.stas-weather-superadmin .sa-content h4, body.stas-weather-superadmin .sa-content h5, body.stas-weather-superadmin .sa-content h6, body.stas-weather-superadmin .sa-content p, body.stas-weather-superadmin .sa-content li, body.stas-weather-superadmin .sa-content label, body.stas-weather-superadmin .sa-content .small, body.stas-weather-superadmin .sa-content .text-secondary, body.stas-weather-superadmin .sa-content .text-muted, body.stas-weather-superadmin .sa-sidebar, body.stas-weather-superadmin .sa-sidebar a, body.stas-weather-superadmin .sa-sidebar .nav-group-label, body.stas-weather-superadmin .sa-topbar, body.stas-weather-superadmin .portal-footer, body.stas-weather-erp .erp-content h1, body.stas-weather-erp .erp-content h2, body.stas-weather-erp .erp-content h3, body.stas-weather-erp .erp-content h4, body.stas-weather-erp .erp-content h5, body.stas-weather-erp .erp-content h6, body.stas-weather-erp .erp-content p, body.stas-weather-erp .erp-content li, body.stas-weather-erp .erp-content label, body.stas-weather-erp .erp-sidebar, body.stas-weather-erp .erp-sidebar a, body.stas-weather-erp .erp-topbar, body.stas-weather-erp .portal-footer, body.stas-weather-site .stas-site-header, body.stas-weather-site .stas-site-header a, body.stas-weather-site footer, body.stas-weather-site footer a{ color:#f8fbff!important; text-shadow:var(--stas-readable-shadow)!important; } body.stas-global-weather .form-control, body.stas-global-weather .form-select, body.stas-global-weather input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.stas-global-weather textarea, body.stas-weather-superadmin .form-control, body.stas-weather-superadmin .form-select, body.stas-weather-superadmin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.stas-weather-superadmin textarea, body.stas-weather-erp .form-control, body.stas-weather-erp .form-select, body.stas-weather-erp input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.stas-weather-erp textarea{ background:rgba(248,250,252,.96)!important; color:#0f172a!important; text-shadow:none!important; border-color:rgba(255,255,255,.24)!important; } /* Checkboxes, radios and switches keep Bootstrap's own checked/unchecked visual (icon + color swap) -- the rule above was flattening that to one solid color, making every toggle look identical whether on or off. */ body.stas-global-weather .form-check-input, body.stas-weather-superadmin .form-check-input, body.stas-weather-erp .form-check-input{ background-color:rgba(255,255,255,.85)!important; border-color:rgba(15,23,42,.35)!important; } body.stas-global-weather .form-check-input:checked, body.stas-weather-superadmin .form-check-input:checked, body.stas-weather-erp .form-check-input:checked{ background-color:#2563eb!important; border-color:#2563eb!important; } body.stas-global-weather .form-check-input:focus, body.stas-weather-superadmin .form-check-input:focus, body.stas-weather-erp .form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(37,99,235,.35)!important; } body.stas-global-weather .form-check-label, body.stas-weather-superadmin .form-check-label, body.stas-weather-erp .form-check-label{ color:#f8fbff!important; text-shadow:var(--stas-readable-shadow)!important; } body.stas-global-weather .form-control:disabled, body.stas-global-weather .form-control[readonly], body.stas-global-weather .form-select:disabled, body.stas-weather-superadmin .form-control:disabled, body.stas-weather-superadmin .form-control[readonly], body.stas-weather-superadmin .form-select:disabled, body.stas-weather-erp .form-control:disabled, body.stas-weather-erp .form-control[readonly], body.stas-weather-erp .form-select:disabled{ background:rgba(226,232,240,.92)!important; color:#1e293b!important; opacity:1!important; -webkit-text-fill-color:#1e293b!important; } body.stas-global-weather .form-control::placeholder, body.stas-weather-superadmin .form-control::placeholder, body.stas-weather-erp .form-control::placeholder{ color:#64748b!important; opacity:1!important; } /* Native file input: fill its field box like every other input, with a readable "Choose File" button portion + filename text inline. */ body.stas-global-weather input[type="file"], body.stas-weather-superadmin input[type="file"], body.stas-weather-erp input[type="file"]{ display:flex!important; align-items:center!important; width:100%!important; min-height:44px!important; padding:.35rem .6rem!important; } body.stas-global-weather input[type="file"]::file-selector-button, body.stas-weather-superadmin input[type="file"]::file-selector-button, body.stas-weather-erp input[type="file"]::file-selector-button, body.stas-global-weather input[type="file"]::-webkit-file-upload-button, body.stas-weather-superadmin input[type="file"]::-webkit-file-upload-button, body.stas-weather-erp input[type="file"]::-webkit-file-upload-button{ background:#e2e8f0!important; color:#0f172a!important; border:1px solid rgba(15,23,42,.16)!important; border-radius:10px!important; padding:.4rem .8rem!important; font-weight:700!important; margin-right:.6rem!important; cursor:pointer!important; flex:0 0 auto!important; } body.stas-global-weather .btn, body.stas-weather-superadmin .btn, body.stas-weather-erp .btn, body.stas-global-weather .badge, body.stas-weather-superadmin .badge, body.stas-weather-erp .badge, body.stas-global-weather code, body.stas-weather-superadmin code, body.stas-weather-erp code{ text-shadow:none!important; } body.stas-weather-superadmin .live-weather-badge, body.stas-weather-erp .live-weather-badge, body.stas-weather-site .live-weather-badge{ background:rgba(2,6,23,.26)!important; border:1px solid rgba(255,255,255,.22)!important; color:#fff!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Auth pages must fit better; only their page content scrolls if truly needed. */ body.auth-page.stas-weather-site .stas-page-scroll, body.auth-page.stas-weather-superadmin .sa-content{overflow-y:auto!important;} body.auth-website-login .auth-foundation-shell, body.auth-superadmin-login .auth-foundation-shell{min-height:auto!important;margin:10px auto!important;} body.auth-website-login .auth-foundation-grid, body.auth-superadmin-login .auth-foundation-grid{align-items:center!important;} body.auth-website-login .auth-hero-panel, body.auth-superadmin-login .auth-hero-panel{min-height:230px!important;} body.auth-website-login .auth-foundation-title, body.auth-superadmin-login .auth-foundation-title{font-size:clamp(2.1rem,3.5vw,3.2rem)!important;} body.auth-website-login .auth-foundation-card-panel, body.auth-superadmin-login .auth-foundation-card-panel{padding:1.05rem 1.2rem!important;} body.auth-website-login .auth-field-stack, body.auth-superadmin-login .auth-field-stack{gap:.72rem!important;} @media (max-width:991.98px){ body.stas-weather-site{overflow:auto!important;height:auto!important;min-height:100svh!important;} body.stas-weather-site .stas-page-scroll{height:auto!important;min-height:calc(100svh - var(--stas-header-h) - var(--stas-footer-h))!important;overflow:visible!important;} body.stas-weather-superadmin .sa-content{height:calc(100svh - var(--sa-topbar-h) - var(--sa-footer-h))!important;} } /* ===== v258b: readability, video-through-chrome, and password-toggle consistency ===== */ /* Native dropdown popups with light/washed text expecting a dark popup background -- clashing with the white popup background we force above and making option text unreadable (this hits Firefox hardest, since it themes native popups more aggressively than Chrome). Forcing color-scheme:light fixes the native popup contrast in every browser. */ body.stas-global-weather select, body.stas-weather-superadmin select, body.stas-weather-erp select, body.stas-global-weather select option, body.stas-weather-superadmin select option, body.stas-weather-erp select option, body.stas-global-weather input, body.stas-weather-superadmin input, body.stas-weather-erp input{ color-scheme:light!important; } /* ===== Custom dropdown (replaces native is kept for form submission but visually hidden; this button+listbox is what the user actually sees and its colors are 100% under our control, no browser native rendering. ===== */ .stas-select-wrap{position:relative;width:100%;} .stas-select-native{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; opacity:0!important; pointer-events:none!important; z-index:-1!important; } .stas-select-btn{ width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:.5rem .9rem; border-radius:12px; border:1px solid rgba(15,23,42,.18); background:#ffffff; color:#0f172a; font-weight:600; font-size:.95rem; text-align:left; cursor:pointer; } .stas-select-btn::after{ content:""; width:9px;height:9px; border-right:2px solid #64748b; border-bottom:2px solid #64748b; transform:rotate(45deg); margin-left:8px; flex:0 0 auto; } .stas-select-wrap.is-disabled .stas-select-btn{opacity:.6;cursor:not-allowed;} .stas-select-list{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:2000; max-height:260px; overflow-y:auto; border-radius:12px; border:1px solid rgba(15,23,42,.16); background:#ffffff; box-shadow:0 18px 40px rgba(2,6,23,.28); padding:4px; } .stas-select-wrap.is-open .stas-select-list{display:block;} .stas-select-opt{ padding:.55rem .75rem; border-radius:8px; color:#0f172a!important; background:#ffffff!important; -webkit-text-fill-code:#0f172a; font-size:.92rem; font-weight:600; cursor:pointer; } .stas-select-opt:hover{background:#eef2ff!important;} .stas-select-opt.is-selected{background:#2563eb!important;color:#ffffff!important;} .stas-select-opt.is-hidden, .stas-select-opt.is-disabled{display:none!important;} /* ===== Custom-dropdown protection (highest specificity) ===== * Page-level