/* Apex20 Performance Portal — design system (RED + BLACK; a deliberately distinct identity) */ :root{ --ink:#16181d; --ink-2:#2b2f38; --muted:#6b7280; --line:#e6e8ec; --bg:#f4f5f7; --card:#ffffff; --red:#E1131E; --red-d:#c00f19; --red-l:#EE3E48; --red-bg:#fdecee; --black:#16181d; --black-2:#23262e; --good:#1a7f37; --good-bg:#e7f6ec; --bad:#E1131E; --bad-bg:#fdecee; --home:#E1131E; --home-bg:#fdecee; --key:#fff6d6; --key-line:#e8b800; --shadow:0 1px 3px rgba(16,18,22,.08),0 1px 2px rgba(16,18,22,.05); --shadow-lg:0 12px 34px rgba(16,18,22,.16); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45} a{color:var(--red);text-decoration:none} .app{display:flex;min-height:100vh} /* sidebar hide toggle (state on , persisted in localStorage) — main fills the freed width */ html.sidebar-hidden .sidebar{display:none} /* ---- Sidebar (black) ---- */ .sidebar{width:240px;flex:0 0 240px;background:linear-gradient(180deg,#16181d,#23262e); color:#c7cbd3;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{display:flex;align-items:center;gap:12px;padding:20px 18px 14px} .brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#EE3E48,#E1131E); color:#fff;font-weight:800;font-size:21px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(225,19,30,.5)} .brand-mark.big{width:56px;height:56px;font-size:30px;margin:0 auto 14px;border-radius:14px} .brand-text{display:flex;flex-direction:column;line-height:1.05} .brand-text strong{color:#fff;font-size:16px;letter-spacing:1px} .brand-text span{color:#9aa0ab;font-size:9.5px;text-transform:none;letter-spacing:.2px;line-height:1.15;margin-top:1px} .group-switch{padding:6px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08)} .group-switch label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#8b909b;margin-bottom:5px} .group-switch select{width:100%;background:#2b2f38;color:#fff;border:1px solid #3a3f4a;border-radius:8px;padding:8px 10px;font-size:13px} .nav{display:flex;flex-direction:column;gap:2px;padding:12px;flex:1;overflow-y:auto;min-height:0} .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#bcc2cd;font-weight:500;transition:.15s} .nav-item .ico{width:20px;text-align:center;opacity:.9;font-size:15px} .nav-item .lbl{flex:1} .nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .nav-item.active{background:rgba(225,19,30,.20);color:#fff;box-shadow:inset 3px 0 0 var(--red)} .badge{font-size:9px;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:20px;font-weight:700} .badge.soon{background:#3a3f4a;color:#c7cbd3} .badge.soon.big{display:inline-block;margin-top:14px;background:var(--red-bg);color:var(--red);font-size:11px;padding:5px 12px} .soon-inline{font-size:9px;text-transform:uppercase;background:#eceef1;color:#888;border-radius:10px;padding:2px 6px;margin-left:4px} .sidebar-tools{padding:8px 12px} .dl-excel{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px; color:#bcc2cd;font-weight:600;font-size:13px;border:1px solid rgba(255,255,255,.14);transition:.15s} .dl-excel .ico{font-size:15px} .dl-excel:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)} .sidebar-foot{border-top:1px solid rgba(255,255,255,.09);padding:14px} .who{display:flex;align-items:center;gap:10px;margin-bottom:10px} .avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:grid;place-items:center} .who-text{display:flex;flex-direction:column;line-height:1.2} .who-text strong{color:#fff;font-size:13px} .who-text span{color:#9aa0ab;font-size:11px} .logout{display:block;text-align:center;color:#bcc2cd;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:7px;font-size:12px} .logout:hover{background:rgba(255,255,255,.07);color:#fff} /* ---- Main ---- */ .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{height:60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center; justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20} .topbar-left{display:flex;align-items:center;gap:14px;min-width:0} .sidebar-toggle{flex-shrink:0;width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px; cursor:pointer;font-size:16px;line-height:1;color:var(--ink-2);display:grid;place-items:center;transition:.15s} .sidebar-toggle:hover{background:#f0f1f4;color:var(--ink);border-color:var(--muted)} .topbar-title{font-size:18px;font-weight:700} .topbar-title small{display:block;font-size:12px;font-weight:500;color:var(--muted)} .topbar-right{display:flex;align-items:center;gap:8px} .pill{background:#f0f1f4;color:var(--muted);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600} .pill.warn{background:#fdecb8;color:#7a5a00} .pill.group{background:var(--black);color:#fff} .pill.home{background:var(--red-bg);color:var(--red)} .content{padding:22px 24px 64px} /* ---- buttons / fields ---- */ .btn{background:var(--red);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:.15s} .btn:hover{background:var(--red-d)} .btn.block{display:block;width:100%} .btn.ghost{background:#fff;color:var(--red);border:1px solid var(--line)} .btn.sm{padding:6px 11px;font-size:12px} .btn.dark{background:var(--black)} .btn.dark:hover{background:#000} select,input,textarea{font-family:inherit;font-size:14px} .field label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600} /* ---- login ---- */ .login-split{min-height:100vh;display:flex} .login-hero{flex:1.15;background:radial-gradient(1100px 620px at 28% -10%,#3a0b13,#16181d); color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:center;gap:30px} .hero-logo{width:300px;height:auto;display:block} .login-hero h1{margin:0;font-size:39px;line-height:1.1;font-weight:800;letter-spacing:-.6px;max-width:15ch} .hero-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:470px} .hero-feats li{display:flex;gap:15px;align-items:flex-start} .hf-mark{flex:none;width:36px;height:36px;border-radius:10px;background:var(--red); display:grid;place-items:center;box-shadow:0 0 0 6px rgba(225,19,30,.16)} .hf-mark svg{width:19px;height:19px} .hf-txt b{display:block;font-size:15px;font-weight:700;color:#fff} .hf-txt p{margin:2px 0 0;font-size:13px;line-height:1.45;color:#c2c7d1} .login-panel{flex:.9;background:var(--card);display:flex;align-items:center;justify-content:center;padding:44px 30px} .login-box{width:340px;max-width:100%} .login-box h2{margin:0 0 4px;font-size:22px;color:var(--ink)} .login-box .sub{color:var(--muted);font-size:13px;margin:0 0 22px} .login-box input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;font-size:14px} .login-box input:focus{outline:2px solid var(--red-l);border-color:var(--red)} .login-box .btn.block{width:100%;display:block;margin-top:2px} .gbtn-wrap{margin-top:2px} .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-weight:600;color:#888;cursor:not-allowed} .gbtn .g{font-weight:800;color:#E1131E} .gbtn-on{cursor:pointer;color:var(--ink);border-color:var(--line);text-decoration:none} .gbtn-on:hover{background:#f6f7f9;border-color:var(--muted)} .login-or{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted);font-size:12px} .login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)} .login-flash{background:var(--bad-bg);color:var(--red-d);border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:14px;font-weight:600} .dev-note{font-size:11px;color:var(--muted);margin-top:16px} @media (max-width:860px){ .login-split{flex-direction:column} .login-hero{flex:none;padding:34px 26px 28px;gap:16px;text-align:left} .hero-logo{width:222px} .login-hero h1{font-size:26px;max-width:none} .hero-feats{display:none} .login-panel{flex:none;padding:30px 24px 56px} .login-box{width:360px} } /* ---- placeholder tab ---- */ .placeholder{text-align:center;padding:80px 20px;color:var(--muted)} .placeholder .ph-mark{font-size:50px;color:var(--red-l);margin-bottom:8px} .placeholder h2{color:var(--ink);margin:0 0 6px} .placeholder p{max-width:460px;margin:0 auto} /* ---- shared cards / controls used by tabs ---- */ .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:18px} .controls .field{display:flex;flex-direction:column;gap:4px} .controls select,.controls .input{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 12px;min-width:150px;box-shadow:var(--shadow)} .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:20px} .empty{text-align:center;padding:54px 20px;color:var(--muted)} .empty .big{font-size:42px;margin-bottom:8px;color:var(--red-l)} /* ---- View-As (impersonation) banner ---- */ .viewas-bar{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#7a5a00,#9a7400); color:#fff;font-size:13px;font-weight:600;padding:8px 18px;position:sticky;top:0;z-index:30} .viewas-bar strong{color:#fff} .viewas-ico{font-size:15px;filter:grayscale(1) brightness(3)} .viewas-exit{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4); border-radius:7px;padding:4px 12px;font-weight:700} .viewas-exit:hover{background:rgba(255,255,255,.3);color:#fff} /* ---- Tablet + phone: the sidebar becomes an overlay DRAWER reached via the ☰ hamburger, so the wide composite gets the FULL width. Prioritised for iPad LANDSCAPE (1024px). The drawer + full-width main + dim backdrop apply from 1024px down; phone-only chrome tightens further at 640px. (Breakpoint note: 1024px = standard iPad landscape. If on an iPad Air/Pro that runs wider, bump this.) */ @media (max-width:1024px){ /* never let a tab force the whole PAGE to scroll sideways (the composite scrolls inside its own card) */ html,body{max-width:100%;overflow-x:hidden} /* The sidebar floats OVER the content instead of taking a column, so the main area is full-width. base.html defaults to .sidebar-hidden at this width (starts closed); the ☰ toggle flips the class. We reuse `html.sidebar-hidden .sidebar{display:none}` — here we restyle the OPEN state into a fixed overlay. No transform (avoids the fixed-child containing-block gotcha); display toggling is bulletproof. The 300px cap keeps the drawer tidy on a wide iPad. */ .sidebar{ position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:60; width:82vw;max-width:300px;flex-basis:auto; box-shadow:0 18px 40px rgba(16,18,22,.5) } /* main always fills the full width — the sidebar overlays, never pushes */ .main{width:100%;flex-basis:100%;min-width:0} /* dim the page behind the open drawer; anchored to .main (transform-free). Hidden when closed. */ .main::before{ content:"";position:fixed;inset:0;z-index:50;background:rgba(16,18,22,.45); pointer-events:none } html.sidebar-hidden .main::before{display:none} } /* ---- Phone-only chrome tightening ---- */ @media (max-width:640px){ .topbar{padding:0 14px;height:54px} .topbar-title{font-size:16px} .content{padding:14px 14px 56px} .viewas-bar{padding:8px 14px;font-size:12px} } /* Tab-specific CSS (composite, commitments) is appended by their own stylesheets: composite.css and commitments.css — kept separate so the two build streams don't collide. */