/* ============================================================ MSG ERP — VIBRANT GRADIENT THEME Responsive: 360px mobile → 86" 4K TV Dark + Light mode (data-theme="light" on or ) Include AFTER page styles OR anywhere (uses !important on vars) ============================================================ */ /* ---------- 1. CORE PALETTE (DARK — default) ---------- */ :root{ /* gradient stops */ --g-purple:#8b5cf6; --g-pink:#ec4899; --g-orange:#f97316; --g-cyan:#06b6d4; --g-blue:#3b82f6; --g-green:#10b981; --g-yellow:#facc15; --g-red:#f43f5e; --g-teal:#14b8a6; --g-indigo:#6366f1; /* signature gradients */ --grad-hero:linear-gradient(135deg,#8b5cf6 0%,#ec4899 50%,#f97316 100%) !important; --grad-1:linear-gradient(135deg,#8b5cf6,#ec4899) !important; --grad-2:linear-gradient(135deg,#ec4899,#f97316) !important; --grad-3:linear-gradient(135deg,#06b6d4,#3b82f6) !important; --grad-4:linear-gradient(135deg,#10b981,#14b8a6) !important; --grad-5:linear-gradient(135deg,#f97316,#facc15) !important; --grad-6:linear-gradient(135deg,#6366f1,#8b5cf6) !important; /* surfaces — deep violet-navy instead of flat grey */ --bg:#0d0a1f !important; --s1:#171233 !important; --s2:#1e1745 !important; --s3:#2a2159 !important; --panel:#171233 !important; --panel2:#1e1745 !important; --a-panel:#171233 !important; --a-panel2:#1e1745 !important; /* borders */ --bd:rgba(139,92,246,.25) !important; --border:rgba(139,92,246,.25) !important; --a-border:rgba(139,92,246,.25) !important; --t-border:rgba(139,92,246,.25) !important; --s3-border:rgba(139,92,246,.25) !important; /* text */ --tx:#f3f0ff !important; --text:#f3f0ff !important; --mt:#b9aee0 !important; --muted:#b9aee0 !important; --a-muted:#b9aee0 !important; --t-muted:#b9aee0 !important; --s3-muted:#b9aee0 !important; --dm:#7d6fb3 !important; /* accents (shared + module namespaces) */ --blue:#38bdf8 !important; --a-blue:#38bdf8 !important; --t-blue:#38bdf8 !important; --s3-blue:#38bdf8 !important; --green:#34d399 !important; --a-green:#34d399 !important; --t-emerald:#34d399 !important; --s3-emerald:#34d399 !important; --red:#fb7185 !important; --a-red:#fb7185 !important; --t-rose:#fb7185 !important; --purple:#a78bfa !important;--a-purple:#a78bfa !important; --t-indigo:#818cf8 !important; --orange:#fb923c !important;--a-orange:#fb923c !important; --t-orange:#fb923c !important; --a-cyan:#22d3ee !important; --t-teal:#2dd4bf !important; --s3-primary:#a78bfa !important; --t-hover:rgba(139,92,246,.15) !important; --radius:16px !important; --radius2:12px !important; --r:16px !important; --shadow:0 4px 24px rgba(76,29,149,.35) !important; color-scheme:dark; } /* ---------- 2. LIGHT MODE ---------- */ [data-theme="light"],[data-theme="light"]:root{ --bg:#f4f1ff !important; --s1:#ffffff !important; --s2:#f6f3ff !important; --s3:#ede8ff !important; --panel:#ffffff !important; --panel2:#f6f3ff !important; --a-panel:#ffffff !important; --a-panel2:#f6f3ff !important; --bd:rgba(139,92,246,.28) !important; --border:rgba(139,92,246,.28) !important; --a-border:rgba(139,92,246,.28) !important; --t-border:rgba(139,92,246,.28) !important; --s3-border:rgba(139,92,246,.28) !important; --tx:#1e1145 !important; --text:#1e1145 !important; --mt:#5b4a91 !important; --muted:#5b4a91 !important; --a-muted:#5b4a91 !important; --t-muted:#5b4a91 !important; --s3-muted:#5b4a91 !important; --dm:#8b7cc0 !important; --blue:#0284c7 !important; --a-blue:#0284c7 !important; --t-blue:#0284c7 !important; --s3-blue:#0284c7 !important; --green:#059669 !important; --a-green:#059669 !important; --t-emerald:#059669 !important; --s3-emerald:#059669 !important; --red:#e11d48 !important; --a-red:#e11d48 !important; --t-rose:#e11d48 !important; --purple:#7c3aed !important;--a-purple:#7c3aed !important; --t-indigo:#4f46e5 !important; --orange:#ea580c !important;--a-orange:#ea580c !important; --t-orange:#ea580c !important; --a-cyan:#0891b2 !important; --t-teal:#0d9488 !important; --s3-primary:#7c3aed !important; --t-hover:rgba(139,92,246,.10) !important; --shadow:0 4px 20px rgba(124,58,237,.14) !important; color-scheme:light; } /* ---------- 3. FLUID TYPE SCALE (phone → 86" TV) ---------- */ html{ font-size:clamp(14px, 12px + .35vw, 26px); } body{ font-size:1rem !important; background:var(--bg); color:var(--tx); } /* colorful ambient glow behind everything */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(600px 400px at 8% -5%, rgba(139,92,246,.22), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(236,72,153,.16), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(6,182,212,.14), transparent 60%); } [data-theme="light"] body::before{ background: radial-gradient(600px 400px at 8% -5%, rgba(139,92,246,.12), transparent 60%), radial-gradient(700px 500px at 100% 0%, rgba(236,72,153,.09), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(6,182,212,.08), transparent 60%); } /* ---------- 4. COLORFUL COMPONENT SKIN ---------- */ /* gradient top-edge on all card-like blocks */ .cc,.att-card,.chart-card,.a-card,.card,.stat-card,.t-card,.s3-card,.panel, [class*="-card"]{ position:relative; border-radius:var(--radius); } .cc::before,.att-card::before,.chart-card::before,.a-card::before, .stat-card::before,[class*="stat"]::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-hero); border-radius:var(--radius) var(--radius) 0 0; opacity:.9; pointer-events:none; } /* rotate accent colors on sibling stat tiles */ .cc:nth-child(4n+1)::before,.stat-card:nth-child(4n+1)::before{background:var(--grad-1);} .cc:nth-child(4n+2)::before,.stat-card:nth-child(4n+2)::before{background:var(--grad-3);} .cc:nth-child(4n+3)::before,.stat-card:nth-child(4n+3)::before{background:var(--grad-4);} .cc:nth-child(4n+4)::before,.stat-card:nth-child(4n+4)::before{background:var(--grad-5);} /* buttons — gradient primaries */ button[type="submit"],.btn-primary,.btn-a-primary,.qa-btn:hover, input[type="submit"],.t-btn-primary,.s3-btn{ background:var(--grad-1) !important; color:#fff !important; border:none !important; box-shadow:0 4px 14px rgba(139,92,246,.4); transition:transform .15s, box-shadow .15s; } button[type="submit"]:hover,.btn-primary:hover,.btn-a-primary:hover, input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(236,72,153,.45); } /* inputs — glowing focus */ input:focus,select:focus,textarea:focus{ border-color:var(--g-purple) !important; box-shadow:0 0 0 3px rgba(139,92,246,.25) !important; outline:none !important; } /* tables — colorful header + zebra + hover */ table thead th{ background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(236,72,153,.18)) !important; color:var(--tx) !important; } table tbody tr:nth-child(even){background:rgba(139,92,246,.05);} table tbody tr:hover{background:rgba(139,92,246,.12) !important;} /* headings pick up a gradient text treatment */ h1,h2,.d-greet h2,.page-title{ background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; width:fit-content; } /* scrollbars */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8b5cf6,#ec4899);border-radius:8px;} /* selection */ ::selection{background:#8b5cf6;color:#fff;} /* ---------- 5. RESPONSIVE FRAMEWORK ---------- */ img,svg,video,canvas{max-width:100%;height:auto;} /* table pages: allow horizontal scroll instead of breaking layout */ .table-wrap,.a-table-wrap,[class*="table-wrap"]{overflow-x:auto;-webkit-overflow-scrolling:touch;} /* generic auto-fit grid helper (add class .g-grid where needed) */ .g-grid{display:grid;gap:clamp(10px,1vw,28px); grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));} /* --- PHONE ≤ 640px --- */ @media (max-width:640px){ html{font-size:14px;} main,.main,.content{padding:10px !important;} /* stack any inline flex rows */ .d-datenav,.a-filter-bar{flex-wrap:wrap !important;} table{font-size:12px;} th,td{padding:6px 8px !important;white-space:nowrap;} /* every table gets horizontal scroll */ main table,.content table{display:block;overflow-x:auto;} input,select,textarea,button{min-height:42px;} /* touch targets */ } /* --- TABLET 641–1024px --- */ @media (min-width:641px) and (max-width:1024px){ main,.main,.content{padding:16px !important;} } /* --- LARGE DESKTOP / TV 1920px+ --- */ @media (min-width:1920px){ main,.main,.content{max-width:1800px;margin-inline:auto;} } /* --- 4K / 86" TV 2560px+ --- */ @media (min-width:2560px){ html{font-size:clamp(20px,.9vw,30px);} main,.main,.content{max-width:2400px;margin-inline:auto;padding:2vw !important;} :root{--radius:22px !important;--radius2:16px !important;--r:22px !important;} th,td{padding:14px 18px !important;} .cc::before,[class*="stat"]::before{height:5px;} } @media (min-width:3800px){ html{font-size:34px;} main,.main,.content{max-width:3400px;} } /* ---------- 6. PRINT SAFETY (gatepass/letters/ID cards) ---------- */ @media print{ body::before{display:none !important;} :root{--bg:#ffffff !