/* WEKID Product Suite UI — light navigation + gold primary actions */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Sora:wght@400;500;600;700;800&display=swap'); :root{ --ink:#0E1B2A; --gold:#C2A14D; --gold-hover:#8A6E22; --antique:#8A6E22; --slate:#566472; --paper:#FBFAF7; --white:#FFFFFF; --line:#DED9CF; --soft:#F3F0E9; --gold-soft:#F5EFD9; --shadow:0 8px 24px rgba(14,27,42,.07); } html,body{background:var(--paper)!important;color:var(--ink)!important;font-family:Sora,system-ui,-apple-system,"Segoe UI",sans-serif!important} body{overflow-x:hidden} h1,h2,.sec-title h2{font-family:Fraunces,Georgia,serif!important;color:var(--ink)!important} /* App shell */ .app{grid-template-columns:292px minmax(0,1fr)!important} .sidebar,.nav.wek-fixed-nav,.app>.nav{ width:292px!important; min-width:292px!important; max-width:292px!important; background:var(--paper)!important; color:var(--ink)!important; border-right:1px solid var(--line)!important; box-shadow:none!important; } .sidebar{padding:18px 14px!important} .nav.wek-fixed-nav,.app>.nav{padding-bottom:22px!important;overflow-y:auto!important;overflow-x:visible!important} /* Brand lockup */ .brand{background:transparent!important;border-bottom:1px solid var(--line)!important;padding:18px 18px 20px!important;margin:0 0 10px!important;overflow:visible!important;min-width:0!important} .brand .logo,.brand .wek-wordmark,.wek-wordmark{ display:block!important;width:190px!important;max-width:100%!important;min-width:120px!important; height:auto!important;object-fit:contain!important;object-position:left center!important; margin:0!important;padding:0!important;filter:none!important;overflow:visible!important; } .brand h1{font-family:Sora,system-ui,sans-serif!important;font-size:13px!important;line-height:1.35!important;margin:13px 0 0!important;color:var(--ink)!important;letter-spacing:0!important} .brand .sub{color:var(--slate)!important;font-size:9px!important;line-height:1.5!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin-top:8px!important} /* Sidebar group labels */ .nav .grp,.wek-site-group{color:var(--antique)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:18px 18px 7px!important;margin:0!important;border-color:var(--line)!important} .wek-site-group{margin-top:8px!important;border-top:1px solid var(--line)!important} /* Sidebar links and internal demo controls */ .nav a,.nav button{ color:var(--ink)!important;background:transparent!important;border:1px solid transparent!important; border-left:3px solid transparent!important;border-radius:9px!important; margin:2px 10px!important;padding:10px 12px!important;font-family:Sora,system-ui,sans-serif!important; font-size:12.5px!important;font-weight:500!important;line-height:1.25!important;text-decoration:none!important; transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease!important; } .nav button{display:block!important;width:calc(100% - 20px)!important;box-sizing:border-box!important;text-align:left!important;cursor:pointer!important} /* Nav links must stack as full-width rows (the Simulator builds its whole sidebar from elements, which are inline by default). */ .nav a{display:flex!important;align-items:center!important;gap:9px!important} .nav a .n,.nav button .n{flex:none!important} .nav a:hover,.nav button:hover{background:#F7F3E7!important;color:var(--ink)!important;border-color:#E8D8A8!important;transform:translateX(1px)!important} .nav a.active,.nav button.active{ background:linear-gradient(90deg,#F4E8BE 0%,#FAF6E8 100%)!important;color:var(--ink)!important; border-color:#E4D18F!important;border-left-color:var(--demo-accent,var(--gold))!important;font-weight:700!important; } .nav a .n{background:#EEEAE2!important;color:var(--slate)!important;border:1px solid #E1DDD5!important} .nav a.active .n{background:var(--gold)!important;color:var(--ink)!important;border-color:var(--gold)!important} .wek-site-link{font-size:12px!important} .sidebar-footer{background:#fff!important;border:1px solid var(--line)!important;box-shadow:none!important;color:var(--ink)!important;margin:18px 10px 0!important;padding:14px!important} .sidebar-footer .badge{background:var(--gold-soft)!important;color:var(--antique)!important;border-color:#E4D18F!important} .sidebar-footer .footer-note{color:var(--slate)!important} /* Top bars and content */ .main,main{background:var(--paper)!important} .top,.topbar,.sim-topbar{background:rgba(251,250,247,.97)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important} .card,.panel,.detail-box{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:var(--shadow)!important;border-radius:12px!important} /* Buttons */ .btn,.btn.primary,.btn.gold,.btn-primary,button.primary,input[type=submit],button[type=submit]{ background:var(--gold)!important;color:var(--ink)!important;border:1px solid var(--gold)!important; box-shadow:none!important;border-radius:9px!important;font-weight:700!important; transition:background .15s ease,border-color .15s ease,transform .15s ease!important; } .btn:hover,.btn.primary:hover,.btn.gold:hover,.btn-primary:hover,button.primary:hover,input[type=submit]:hover,button[type=submit]:hover{ background:var(--gold-hover)!important;color:#fff!important;border-color:var(--gold-hover)!important;filter:none!important;transform:translateY(-1px)!important; } .btn.ghost,.btn-secondary,.btn.secondary,.btn:not(.primary):not(.gold):not(.red){ background:#fff!important;color:var(--ink)!important;border-color:#D7C58D!important; } .btn.ghost:hover,.btn-secondary:hover,.btn.secondary:hover,.btn:not(.primary):not(.gold):not(.red):hover{ background:#F8F2DF!important;color:var(--ink)!important;border-color:var(--gold)!important; } .btn.red{background:#fff!important;color:#9C2F2F!important;border-color:#D7A7A7!important}.btn.red:hover{background:#9C2F2F!important;color:#fff!important} /* Inputs and focus */ input,select,textarea{background:#fff!important;color:var(--ink)!important;border-color:#CFC9BD!important} input:focus,select:focus,textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(194,161,77,.18)!important;outline:none!important} /* Tooltips remain legible on the light shell */ .nav a[data-tip]::after,.nav button[data-tip]::after,.btn[data-tip]::after,.field-help[data-tip]::after{background:var(--ink)!important;color:#fff!important;border:0!important} .nav a[data-tip]::before,.nav button[data-tip]::before{border-right-color:var(--ink)!important} .btn[data-tip]::before,.field-help[data-tip]::before{border-bottom-color:var(--ink)!important} /* ============================================================ v4 — deep coverage for the Agent Console & Simulator. These pages have dark components the earlier override missed, which produced dark-on-dark (invisible) text. PRD Builder and Governance don't use these classes, so they're unaffected. ============================================================ */ /* --- Agent Console: