/* =========================================================== ALLTECH PMO — Project Delivery & Governance Platform ALLTECH-inspired: warm copper/orange, light elegant surfaces, dark professional text, subtle green sustainability accents. =========================================================== */ :root{ --nav:#ffffff; --nav-2:#f6efe4; --nav-line:#ece2d4; --nav-ink:#6a5d4c; --nav-ink-soft:#736753; --bg:#f6f1e8; --card:#ffffff; --line:#ece2d4; --line-2:#dccdb8; --ink:#2b2620; --muted:#675d4f; --faint:#766a58; /* darkened to meet WCAG AA (>=4.5:1) on cream/white; --ns/--grey keep the old tone as status colours */ --brand:#bf550f; --brand-2:#e27d24; --grad:linear-gradient(120deg,#e27d24,#bb5210); --copper:#b8530f; --leaf:#5c8a3a; --ns:#a89c8b; --prog:#2563eb; --done:#4f8f3f; --late:#e0921f; --block:#cf3c2e; --hold:#9a6cc0; --green:#4f8f3f; --amber:#e0921f; --red:#cf3c2e; --grey:#a89c8b; --radius-lg:18px; --radius:14px; --radius-sm:9px; --radius-pill:999px; --shadow:0 12px 32px -18px rgba(90,58,18,.34); --shadow-sm:0 2px 8px -4px rgba(90,58,18,.25); --shadow-md:0 8px 22px -12px rgba(90,58,18,.32); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --fh:"Space Grotesk",system-ui,sans-serif; --fb:"Inter",system-ui,-apple-system,sans-serif; --fm:"SFMono-Regular",ui-monospace,"Cascadia Code",Consolas,"Liberation Mono",monospace; --side-w:256px; } *,*::before,*::after{box-sizing:border-box}*{margin:0} [hidden]{display:none!important} /* ---------- Accessibility ---------- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Skip link: hidden until focused, then revealed at top-left */ .skip-link{position:fixed;top:8px;left:8px;z-index:1000;background:var(--brand);color:#fff;padding:9px 14px;border-radius:8px;font:600 14px var(--fb);text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-160%);transition:transform .15s} .skip-link:focus{transform:none} body.modal-open{overflow:hidden} /* scroll-lock the page behind an open modal */ /* Respect users who prefer reduced motion: neutralise transitions/animations */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } html,body{height:100%} body{font-family:var(--fb);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--fh);font-weight:600;line-height:1.15} a{color:var(--brand);text-decoration:none} button{font:inherit;cursor:pointer} ul{list-style:none;padding:0} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .mono{font-variant-numeric:tabular-nums} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px;transition:.15s} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px -8px rgba(191,85,15,.6)} .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)} .btn-primary:disabled{opacity:.5;cursor:default;transform:none;filter:none} .btn-soft{background:#fff;border-color:var(--line-2);color:var(--ink)} .btn-soft:hover{border-color:var(--brand);color:var(--brand)} .btn-soft:disabled{opacity:.55;cursor:default} .btn-block{width:100%;justify-content:center;padding:12px} .btn-sm{padding:5px 12px;font-size:12px} .btn-ghost{background:transparent;border-color:var(--line-2)} .link-btn{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;padding:0} .link-btn:hover{color:var(--brand)} /* ---------- Login gate ---------- */ .gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(1100px 620px at 50% -8%,#fce6cd,#f4ead9 45%,#efe5d6)} .gate-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 34px;width:min(94vw,420px);box-shadow:0 34px 80px -34px rgba(120,70,20,.5);text-align:left;color:var(--ink)} .gate-brand{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:700;font-size:1.05rem;letter-spacing:.01em;margin-bottom:20px;color:var(--ink)} .brand-badge{display:inline-grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--fh);font-weight:700;font-size:13px;padding:5px 9px;border-radius:9px;letter-spacing:.02em;box-shadow:0 6px 14px -7px rgba(191,85,15,.7)} .gate-card h1{font-size:1.4rem;margin-bottom:6px;text-align:center} .gate-sub{color:var(--muted);font-size:13px;margin-bottom:22px;text-align:center} .gate-field{display:block;margin-bottom:14px} .gate-field>span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px;font-weight:600} .gate-card input,.gate-card select{width:100%;padding:12px 14px;border-radius:11px;background:#fdfaf5;border:1px solid var(--line-2);color:var(--ink);font-size:15px;font-family:inherit} .gate-card select{cursor:pointer} .gate-card input:focus,.gate-card select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(191,85,15,.18);background:#fff} .gate-card .btn-block{margin-top:6px} /* SSO sign-in (revealed by app.js when the server has OIDC configured) */ .gate-or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 10px} .gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)} .gate-sso-btn{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;margin-top:0} .gate-sso-btn svg{flex:none} .gate-error{color:var(--red);font-size:13px;min-height:18px;margin-top:10px;text-align:center} .gate-card h1 .brand-arrow{color:var(--brand);font-weight:700} /* Forgot password / Request access links */ .gate-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px} .gate-link{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer} .gate-link:hover{text-decoration:underline} .gate-link-sep{color:var(--faint)} /* Login-page dialogs (rendered above the gate) — compound selector so this z-index beats the later, equal-specificity .modal{z-index:80} rule. */ .modal.gate-modal{z-index:130} .gate-modal-card{width:min(94vw,440px)} .gate-modal-card h2{font-size:1.2rem;margin-bottom:4px} .gate-dlg-field{display:block;margin-bottom:12px} .gate-dlg-field>span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px;font-weight:600} .gate-dlg-field input,.gate-dlg-field textarea{width:100%;padding:11px 13px;border-radius:11px;background:#fdfaf5;border:1px solid var(--line-2);color:var(--ink);font-size:14px;font-family:inherit} .gate-dlg-field textarea{resize:vertical;min-height:64px} .gate-dlg-field input:focus,.gate-dlg-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(191,85,15,.18);background:#fff} .gate-confirm{text-align:center;padding:6px 4px} .gate-confirm-ico{margin:2px auto 10px;width:44px;height:44px} .gate-confirm h2{margin-bottom:8px} .gate-confirm .btn{margin-top:18px} .guinness-note{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:9px 14px;background:#fbf6ee;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink)} .guinness-ico{flex:none;line-height:0} .gate-foot{position:absolute;bottom:22px;color:var(--faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase} /* ---------- App shell ---------- */ /* grid-template-rows:minmax(0,1fr) clamps the single row to the viewport height; without it the row defaults to `auto`, grows to content on short screens, and overflows (clipped) so neither the sidebar nav nor the main view can scroll to the bottom. */ .app{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:minmax(0,1fr);height:100vh;overflow:hidden} .sidebar{background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;border-right:1px solid var(--nav-line);box-shadow:1px 0 0 rgba(0,0,0,.01)} .side-brand{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--nav-line)} .side-brand .brand-mark{display:inline-grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--fh);font-weight:700;font-size:14px;padding:7px 9px;border-radius:10px;letter-spacing:.01em;box-shadow:0 7px 16px -8px rgba(191,85,15,.65)} .side-brand .brand-text{font-family:var(--fh);line-height:1.12;display:flex;flex-direction:column} .brand-line1{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .brand-arrow{color:var(--brand);font-weight:700} .brand-line2{font-size:15px;font-weight:700;color:var(--ink);margin-top:1px} /* grouped, enterprise-style navigation */ .side-nav{flex:1;min-height:0;overflow-y:auto;padding:10px 11px 12px;display:flex;flex-direction:column;gap:9px} .nav-group{background:var(--nav-2);border:1px solid var(--nav-line);border-radius:13px;padding:6px 6px 7px} .nav-group-title{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;font-family:inherit;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--faint);padding:6px 9px 5px;cursor:pointer;text-align:left;border-radius:8px;transition:.12s} .nav-group-title:hover{color:var(--muted);background:rgba(120,70,20,.04)} .nav-group-title .nav-grp-caret{font-size:8px;width:9px;flex:none;transition:.12s} .nav-group-title .nav-grp-name{flex:1;min-width:0} .nav-group.collapsed{padding-bottom:6px} .nav-group.collapsed .nav-btn{display:none} .nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;color:var(--nav-ink);border-radius:9px;font-size:13px;font-weight:500;text-align:left;transition:.12s} .nav-btn .nav-ico{width:18px;text-align:center;opacity:.9;filter:grayscale(.15);flex:none} .nav-btn .nav-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-btn .nav-count{margin-left:auto;font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--nav-line);padding:0 7px;border-radius:999px;flex:none} .nav-btn .nav-count.is-zero{display:none} .nav-btn:hover{background:#fff;color:var(--ink)} .nav-btn.active{background:#fff;color:var(--copper);font-weight:600;box-shadow:inset 2.5px 0 0 var(--brand),0 1px 4px -1px rgba(120,70,20,.18)} .nav-btn.active .nav-count{background:var(--brand);color:#fff;border-color:var(--brand)} .nav-btn.nav-locked{opacity:.55;cursor:not-allowed} .nav-btn.nav-locked:hover{background:none;color:var(--nav-ink)} .nav-btn.nav-locked .nav-lock-tag{margin-left:auto;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--nav-line);border-radius:999px;padding:0 6px;flex:none} /* Localisation lifecycle tabs (Register → Traceability) */ .loc-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px} .loc-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:8px 8px 0 0} .loc-tab:hover{background:var(--hover,#f6f1ea);color:var(--ink)} .loc-tab.on{color:var(--copper,#b8530f);border-bottom-color:var(--copper,#b8530f);background:#fbf3ec} /* preview-as-role banner */ .preview-banner{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#3a2a55;color:#fff;border-radius:10px;padding:9px 14px;margin-bottom:12px;font-size:13px;font-weight:500} .preview-banner .btn{background:#fff;color:#3a2a55} /* Access & Permissions cockpit (.ac-*) */ .ac{display:flex;flex-direction:column;gap:14px} .ac-head{padding:12px 16px} .ac-badge{background:linear-gradient(135deg,#7c5cc4,#4a3a7a);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:6px} .ac-card{padding:14px 16px;display:flex;flex-direction:column;gap:8px} .ac-card-h{font-size:14px;font-weight:700;color:var(--ink)} .ac-radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer} .ac-radio.on{border-color:#7c5cc4;background:#f6f2fc} .ac-radio input{margin-top:3px} .ac-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .ac-f{display:flex;flex-direction:column;gap:3px} .ac-f-l{font-size:11px;font-weight:600;color:var(--muted)} .ac-preview-note{background:#f6f2fc;border:1px solid #d9cdf0;border-radius:8px;padding:8px 12px;font-size:12.5px;color:#4a3a7a} .ac-chip{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:10px;border:1px solid transparent} .ac-chip.ac-none{background:#f1edf0;color:#8a7d8a;border-color:#e0d6dd} .ac-chip.ac-read{background:#eef4fb;color:#2f5d8a;border-color:#cfe0f0} .ac-chip.ac-edit{background:#e8f4e8;color:#2f6f23;border-color:#c4e3c0} .ac-chip.ac-admin{background:#f3ecfb;color:#5b3aa6;border-color:#dccef2} .ac-matrix{width:100%;font-size:12.5px}.ac-matrix th{text-align:left;font-size:11px;color:var(--muted)} .ac-where{border:1px solid var(--line);border-radius:8px;padding:6px 10px} .ac-where summary{cursor:pointer}.ac-where ul{margin:6px 0 2px 18px;font-size:12px;color:var(--ink)} .ac-test-out{margin-top:8px} .ac-test-card{border:1px solid var(--line);border-radius:9px;padding:10px 12px} .ac-test-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px} .ac-test-list li.ok{color:#2f6f23}.ac-test-list li.no{color:#a4332a} .nav-btn.nav-sub{padding-left:32px;font-size:12.5px} .nav-btn.nav-sub .nav-ico{font-size:.85em;opacity:.7} .nav-btn.nav-sub .nav-lbl{color:var(--muted)} .nav-btn.nav-sub.active .nav-lbl{color:var(--copper)} .nav-btn .nav-count.badge-alert{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 0 3px rgba(207,60,46,.18)} /* entity / workspace switcher (top of sidebar) */ .side-entity{position:relative;padding:12px 14px;border-bottom:1px solid var(--nav-line);background:var(--nav)} .ent-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;margin-bottom:6px} .ent-pick{display:flex;align-items:center;gap:9px;width:100%;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:9px 12px;cursor:pointer;text-align:left;box-shadow:0 4px 10px -8px rgba(90,58,18,.4)} .ent-pick:hover{border-color:var(--brand)} .ent-pick.is-pmo{background:linear-gradient(120deg,#fff,#fbf1e6);border-color:var(--brand-2)} .ent-name{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ent-caret{color:var(--brand);font-size:11px;flex:none} .ent-flag-img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none} .ent-flag-ico{font-size:18px;line-height:1;flex:none} .ent-menu{position:absolute;left:14px;right:14px;top:calc(100% - 6px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 30px -8px rgba(40,25,5,.35);overflow:hidden;max-height:330px;overflow-y:auto} .ent-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;text-align:left;font-size:13.5px;font-weight:500;color:var(--ink)} .ent-menu-item+.ent-menu-item{border-top:1px solid var(--line)} .ent-menu-item:hover{background:#fdf6ee} .ent-menu-item.sel{background:#fbf3ea;font-weight:700} .ent-menu-item .ent-name{font-size:13.5px;font-weight:inherit} .ent-check{margin-left:auto;color:var(--brand);font-weight:800;flex:none} /* Training & Testing sandbox entity */ .ent-pick.is-sandbox{border-style:dashed;border-color:#9a6cc0} .ent-menu-item.is-sandbox .ent-name{color:#7c4fa8} .tag-sandbox{background:#efeaf7;color:#7c4fa8} .ent-sandbox-opt{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--muted)} .ent-sbox{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#7c4fa8} .side-foot{padding:10px 11px 12px;border-top:1px solid var(--nav-line);display:flex;flex-direction:column;gap:8px} .foot-user{display:flex;align-items:center;gap:9px;padding:8px 9px;background:var(--nav-2);border:1px solid var(--nav-line);border-radius:11px} .foot-user .avatar{width:30px;height:30px;font-size:12px} .foot-user-meta{display:flex;flex-direction:column;min-width:0;gap:1px;flex:1} .foot-user-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize} .foot-user-role{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700} .foot-status{display:flex;align-items:center;gap:7px;padding:0 5px} .save-dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);flex:none;transition:background .2s} .save-dot.dirty{background:var(--amber)} .save-dot.saved{background:var(--leaf)} .save-state{font-size:11.5px;color:var(--muted)} .save-state.dirty{color:var(--amber)} .save-state.saved{color:#477b30} /* darker leaf so the small "saved" text meets WCAG AA on white */ .foot-actions{display:flex;gap:7px} .foot-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--nav-line);background:#fff;color:var(--nav-ink);border-radius:9px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s} .foot-btn:hover{border-color:var(--brand);color:var(--brand)} .foot-ico{font-size:13px;line-height:1} /* ---------- Topbar ---------- */ .main{display:flex;flex-direction:column;min-width:0;overflow:hidden} .topbar{display:flex;align-items:center;gap:14px;padding:12px 22px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20;flex-wrap:wrap} .topbar-title h2{font-size:1.15rem} .view-sub{font-size:12px;color:var(--faint)} .topbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .export-wrap{position:relative;display:inline-flex} .tool{font-size:13px} .tool.status-date{display:flex;flex-direction:column;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em} .tool.status-date input{font-size:13px;color:var(--ink);border:1px solid var(--line-2);border-radius:8px;padding:5px 8px} .search{border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;width:200px} .search:focus{outline:none;border-color:var(--brand)} .hamburger{display:none;background:none;border:0;font-size:20px} .menu{position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30} .menu button{display:block;width:100%;text-align:left;padding:9px 14px;border:0;background:none;border-radius:8px;font-size:13px} .menu button:hover{background:var(--bg)} /* ---------- View area ---------- */ .view{flex:1;min-height:0;overflow:auto;padding:22px 24px 60px} .view-grid{display:grid;gap:18px} /* ---------- Cards / KPIs ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .card h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;font-family:var(--fb);font-weight:700} .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden} .kpi .v{font-family:var(--fh);font-size:2rem;font-weight:700;line-height:1} .kpi .l{font-size:12px;color:var(--muted);margin-top:6px} .kpi .bar{position:absolute;left:0;bottom:0;height:4px;background:var(--grad)} .kpi.accent .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .kpi.kpi-green{background:#e9f2e2;border-color:#bcd6aa} .kpi.kpi-blue{background:#e3edfb;border-color:#b3cdf2} .kpi.kpi-amber{background:#fdf3da;border-color:#eed398} .kpi.kpi-red{background:#fbe5e1;border-color:#efb0a6} .kpi.kpi-grey{background:#f1ece3;border-color:#dcd2c0} .conf-strip2{position:relative;height:42px;margin-bottom:2px} .conf-strip2 .conf-ms{top:10px;margin-left:-9px} .conf-cap2{position:absolute;top:30px;font-size:9px;color:#6d28d9;font-weight:600;transform:translateX(-50%)} .wk-head h3{font-family:var(--fh);font-size:1.02rem;margin-bottom:2px} .wk-range{font-size:12px;color:var(--muted)} .wk-num{font-size:12px;color:var(--brand);font-weight:600;margin-bottom:10px} /* progress ring */ .ring{--p:0;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),#efe6d6 0);display:grid;place-items:center} .ring::after{content:attr(data-label);width:72px;height:72px;background:#fff;border-radius:50%;display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:1.2rem} /* ---------- Tables ---------- */ .tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto} /* ---------- Detailed Plan tree (collapsible Workstream → Stage → Task) ---------- */ .plan-scroll{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:74vh} .plan-tree{min-width:1300px} /* Bulk edit / multi-select */ .p-sel{flex:none;margin-right:2px;cursor:pointer} .bulk-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff7ec;border:1px solid var(--line-2);border-radius:var(--radius);padding:8px 12px;margin-bottom:8px;box-shadow:var(--shadow-sm)} .bulk-bar .fld{max-width:172px;height:30px;padding:3px 8px} .bulk-count{color:var(--brand);font-size:13px;white-space:nowrap} .bulk-sep{width:1px;align-self:stretch;background:var(--line-2)} .chip-danger{border-color:#e7c3bd;color:var(--red)} .chip-danger:hover{background:#fbe3e0;border-color:var(--red)} .vl-pad{width:100%;pointer-events:none} /* virtual-list spacers: hold off-screen height only */ .vl-pad-row td{padding:0;border:0} /* spacer for virtualised tables */ .cap-vscroll{max-height:60vh;overflow:auto} /* inner scroll container for virtualised heatmaps */ .plan-head,.p-row{display:grid;grid-template-columns:minmax(232px,2.2fr) 124px 124px 74px 78px 124px 104px 120px 120px 108px 92px;align-items:center} .plan-head{position:sticky;top:0;z-index:2;background:#f8f3ea;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)} .plan-head>div{padding:9px 10px} .p-row{border-bottom:1px solid #f5efe5;font-size:13px} .p-row>div{padding:6px 10px;min-width:0} .p-ws{background:#f7ecdd;font-weight:700;border-bottom:1px solid #ecd9bf;box-shadow:inset 3px 0 0 var(--brand-2)} .p-ss{background:#faf6ee;font-weight:600} .p-task:hover{background:#fbf7ef} .p-task.crit>.p-name{box-shadow:inset 3px 0 0 var(--red)} .p-name{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-ws>.p-name,.p-ss>.p-name{cursor:pointer;user-select:none} .p-caret{display:inline-block;width:14px;color:var(--faint);font-size:11px;flex:none} .p-chip{font-size:11px;padding:1px 8px;border-radius:999px;background:#f6e3cc;color:#9a4d0d;font-weight:600;flex:none} .p-prog{display:flex;align-items:center;gap:7px} .p-bar{flex:1;height:7px;min-width:46px;background:#efe6d6;border-radius:999px;overflow:hidden} .p-bar>span{display:block;height:100%;background:var(--grad)} .p-acts{display:flex;align-items:center;gap:5px} .cell-input{width:100%;font-size:12.5px;padding:4px 6px;border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--ink)} .cell-input:focus{outline:none;border-color:var(--brand)} table.grid{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap} table.grid th{position:sticky;top:0;background:#f8f3ea;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);z-index:2;cursor:pointer;user-select:none} table.grid th:hover{color:var(--brand)} table.grid td{padding:9px 12px;border-bottom:1px solid var(--line)} table.grid tr:hover td{background:#fbf7ef} table.grid tr.crit td:first-child{box-shadow:inset 3px 0 0 var(--red)} table.grid tr.chk-hdr td{background:#f3ece0;font-weight:700;font-family:var(--fh);cursor:pointer;user-select:none} table.grid tr.chk-hdr td:hover{background:#ece2d2} .chk-caret{display:inline-block;width:14px;color:var(--faint)} .cell-name{white-space:normal;min-width:240px;max-width:360px;font-weight:500} .cell-desc{white-space:normal;min-width:260px;color:var(--muted);font-size:12px} .editable{cursor:text;border-radius:6px} .editable:hover{box-shadow:inset 0 0 0 1px var(--line-2)} .row-actions{display:flex;gap:6px} .icon-btn{border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;height:26px;display:grid;place-items:center;font-size:13px;color:var(--muted)} .icon-btn:hover{border-color:var(--brand);color:var(--brand)} /* ---------- Pills / badges ---------- */ .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap} .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .st-notstarted{background:#f1ece3;color:#847761} .st-inprogress{background:rgba(37,99,235,.1);color:var(--prog)} .st-complete,.st-completed,.st-done{background:rgba(79,143,63,.14);color:var(--done)} .st-late,.st-delayed,.st-overdue{background:rgba(224,146,31,.16);color:#9a5f08} .st-blocked{background:rgba(207,60,46,.12);color:var(--block)} .st-onhold{background:rgba(154,108,192,.14);color:var(--hold)} .st-na,.st-notapplicable,.st-deferred{background:#ece5d8;color:#8a7d6a} .st-planned{background:#f1ece3;color:#847761} .st-released{background:rgba(79,143,63,.14);color:var(--done)} .st-readyfortesting{background:rgba(224,146,31,.16);color:#9a5f08} .st-readyfordeployment{background:rgba(154,108,192,.14);color:#7c4fa8} .st-ontrack{background:rgba(79,143,63,.14);color:var(--done)} .prio-high{background:#fdeae0;color:#c05621} .prio-medium{background:#fdf3e0;color:#b07a1e} .prio-low{background:#e8f0e3;color:#4f8f3f} .prio-critical{background:#fde0dd;color:#cf3c2e} .rag{display:inline-block;width:12px;height:12px;border-radius:50%} .rag-green{background:var(--green)}.rag-amber{background:var(--amber)}.rag-red{background:var(--red)}.rag-grey{background:var(--grey)} .tag{display:inline-block;padding:1px 8px;border-radius:6px;background:#f1ece1;color:#6c5f4c;font-size:11px;font-weight:500} .tag-cp{background:rgba(207,60,46,.12);color:var(--block)} .tag-gate{background:#f0e7f7;color:#7c4fa8} /* progress mini-bar */ .pbar{height:7px;background:#efe6d6;border-radius:999px;overflow:hidden;min-width:60px} .pbar>span{display:block;height:100%;background:var(--grad);border-radius:999px} /* ---------- Toolbar (filters) ---------- */ .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px} .toolbar select,.toolbar input{border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;font-size:13px;background:#fff} .chip{padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:12.5px;color:var(--muted)} .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)} .spacer{flex:1} .count-note{font-size:12px;color:var(--faint)} /* ---------- Section headings ---------- */ .sec-head{display:flex;align-items:center;gap:10px;margin:6px 0 12px} .sec-head h3{font-size:1.02rem;font-family:var(--fh)} .sec-head .count-note{margin-left:auto} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px} .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px} /* ---------- Gantt ---------- */ .gantt-controls{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap} .gantt-controls .slider{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)} .gantt-controls input[type=range]{width:180px} .gantt{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:70vh} .gantt-inner{position:relative} .g-head{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line)} .g-row{display:flex;align-items:stretch;border-bottom:1px solid #f5efe5} .g-row.ws{background:#f8f3ea;font-weight:600} .g-label{position:sticky;left:0;z-index:4;background:inherit;min-width:260px;max-width:260px;padding:7px 12px;border-right:1px solid var(--line);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .g-row:not(.ws) .g-label{background:#fff} .g-track{position:relative;flex:1} .g-bar{position:absolute;top:6px;height:18px;border-radius:5px;background:var(--brand);opacity:.92;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} .g-bar .g-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.45);border-radius:5px 0 0 5px} .g-bar.cp{background:var(--red)} .g-bar.done{background:var(--done)} .g-bar.prog{background:var(--prog)} .g-bar.hold{background:var(--hold)} .g-bar.na{background:#b9b0a2} .g-bar.late{background:var(--late)} .g-bar.block{background:var(--block)} .g-bar.ns{background:#b3a48d} .g-baseline{position:absolute;height:5px;bottom:2px;background:rgba(138,125,106,.55);border-radius:3px} .g-deadline{position:absolute;top:1px;bottom:1px;width:2px;background:#dc2626;z-index:2} .g-slipline{position:absolute;top:14px;height:0;border-top:2px dashed #dc2626;z-index:2} .g-sliplbl{position:absolute;top:5px;font-size:9px;font-weight:700;color:#dc2626;white-space:nowrap;background:rgba(255,255,255,.75);padding:0 2px;border-radius:3px;z-index:3} .g-sliplbl.ahead{color:#16a34a} .g-deadline.ahead{background:#16a34a} .g-slipline.ahead{border-top-color:#16a34a} .g-milestone{position:absolute;top:8px;width:14px;height:14px;background:var(--red);transform:rotate(45deg);border:1px solid #fff} .g-grid-line{position:absolute;top:0;bottom:0;width:1px;background:#f3ecdf} .g-grid-line.month{background:#e6d9c4} .g-weekend{position:absolute;top:0;bottom:0;background:#f8f3ea} .g-monthend{position:absolute;top:0;bottom:0;background:rgba(245,158,11,.10)} .g-today{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:3} .g-colhead{display:inline-block;text-align:center;font-size:10px;color:var(--muted);border-left:1px solid #f5efe5;padding:3px 0} .g-monthhead{font-size:11px;font-weight:600;color:var(--ink);padding:4px 8px;border-left:1px solid var(--line)} /* ---------- Kanban ---------- */ .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px} .kan-col{background:#f8f3ea;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:120px} .kan-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between} .kan-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(90,58,18,.06);cursor:pointer} .kan-card:hover{border-color:var(--brand)} .kan-card .t{font-weight:600;font-size:13px} .kan-card .m{font-size:11px;color:var(--muted);margin-top:4px} /* ---------- Calendar ---------- */ .cal-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} table.cal{border-collapse:collapse;font-size:11px} table.cal th,table.cal td{border:1px solid var(--line);padding:0;text-align:center;min-width:26px;height:30px} table.cal th.res,table.cal td.res{position:sticky;left:0;background:#f8f3ea;text-align:left;padding:5px 10px;min-width:150px;white-space:nowrap;z-index:2;font-weight:600} table.cal td.role{position:sticky;left:150px;background:#f8f3ea;min-width:120px;text-align:left;padding:5px 8px;color:var(--muted);z-index:2} table.cal th.day.we,table.cal td.we{background:#f3ede1} table.cal td.hol{background:#fdf3d4} table.cal td.abs{font-weight:700;color:#9a5f08;cursor:pointer} table.cal td.av{cursor:pointer} table.cal td.cal-banner{position:sticky;left:0;background:#f7ecdd;color:#9a4d0d;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;text-align:left;padding:7px 10px;z-index:3} /* ---------- Charts / analytics ---------- */ .chart{width:100%;height:auto;display:block;overflow:visible} .chart-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted);margin-top:8px} .chart-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle} .var-row{display:flex;align-items:center;gap:12px;padding:5px 0} .var-label{width:210px;flex:none;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .var-bar{flex:1;height:11px;background:#efe6d6;border-radius:999px;overflow:hidden} .var-bar>span{display:block;height:100%;border-radius:999px} /* ---------- Board pack ---------- */ .board-page{max-width:1000px;margin:0 auto} .board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px} .board-title{font-family:var(--fh);font-size:1.35rem;font-weight:700} .board-rag{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700} .board-print{margin-bottom:12px} /* Overview board-pack header */ .ov-head{align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:0} .ov-head .board-print{margin-bottom:0} .ov-head .board-rag{font-size:13px} /* Export dropdown (PDF print / PowerPoint .pptx) */ .bp-export{position:relative;display:inline-block;margin-bottom:12px} .ov-head .bp-export,.board-head .bp-export{margin-bottom:0} .bp-export-btn{display:inline-flex;align-items:center;gap:6px} .bp-caret{font-size:10px;opacity:.85} .bp-export-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:244px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 36px rgba(43,38,32,.18);padding:6px;display:flex;flex-direction:column;gap:2px} .bp-export-menu[hidden]{display:none} .bp-export-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink)} .bp-export-item:hover{background:var(--bg)} .bp-export-item:disabled{opacity:.6;cursor:default;background:none} .bp-ico{font-size:18px;width:22px;text-align:center;flex:none} .bp-item-t{font-weight:600;font-size:13px;line-height:1.2} .bp-item-s{font-size:11px;color:var(--muted)} /* Trends dashboard grid */ .trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .trend-card{padding:16px 18px} .trend-card h3{margin-bottom:4px} .trend-card .chart{margin-top:6px} .trend-card .sec-head{margin:0 0 4px} .demo-tag{margin-left:auto;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;cursor:help} @media(max-width:1100px){.trend-grid{grid-template-columns:1fr}} /* drag-to-reschedule + kanban drag-and-drop */ .g-bar{cursor:grab} .kan-card{cursor:grab} .kan-card.dragging{opacity:.45} .kan-col.drop-over{outline:2px dashed var(--brand);outline-offset:-3px;background:#fbeede} .kan-st{width:100%;margin-top:8px;font-size:11px;padding:3px 5px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer} .kan-card.kst-done{background:#e8f0e3;border-color:#b7d3a8} .kan-card.kst-in-progress{background:#e3edfb;border-color:#b3cdf2} .kan-card.kst-pending{background:#fdf3d4;border-color:#ecd089} .kan-card.kst-at-risk{background:#ffedd5;border-color:#fdba74} .kan-card.kst-blocked{background:#fbe3e0;border-color:#eba9a1} .kan-card.kst-not-applicable{background:#f1ece3;border-color:#e3d9c8;opacity:.65} /* Build & Release cards (pipeline) */ .build-card{padding:16px 18px} .build-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap} .build-ver{display:flex;align-items:baseline;gap:8px} .build-ver .muted{font-size:11px;letter-spacing:.1em} .build-num{font-family:var(--fh);font-weight:700;font-size:1.6rem;line-height:1} .build-gl{background:var(--grad);color:#fff;font-weight:700;font-size:12px;padding:4px 12px;border-radius:999px} .build-pipe{display:flex;overflow-x:auto;padding:4px 0 2px} .build-step{flex:1 1 0;min-width:94px;text-align:center;position:relative;padding-top:6px} .build-line{position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line-2)} .build-step:first-child .build-line{display:none} .build-step.done .build-line{background:var(--green)} .build-dot{width:11px;height:11px;border-radius:50%;background:#d6c9b4;margin:0 auto;position:relative;z-index:1;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)} .build-step.done .build-dot{background:var(--green);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--green)} .build-step.gl .build-dot{width:14px;height:14px;background:var(--brand);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand)} .build-step.gl.done .build-dot{background:var(--green);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--green)} .build-step-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:8px;font-weight:600} .build-step.gl .build-step-lbl{color:var(--brand)} .build-step-date{font-size:11px;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums} .build-step.empty .build-step-date{color:var(--faint)} .build-foot{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} /* ---------- Build & Release: enterprise release cards ---------- */ .rel-card{padding:18px 20px} .rel-card.rel-collapsed{padding-top:12px;padding-bottom:12px} .rel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} /* header as expand/collapse toggle */ .rel-head-toggle{cursor:pointer;border-radius:10px;margin:-6px -8px 8px;padding:6px 8px;transition:background .12s} .rel-head-toggle:hover{background:#f8f2e8} .rel-head-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .rel-collapsed .rel-head-toggle{margin-bottom:-6px} .rel-caret{font-size:13px;color:var(--muted);align-self:center;line-height:1} .rel-head-toggle:hover .rel-caret{color:var(--brand)} .rel-sum{font-size:12px;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch} .rel-title-wrap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .rel-kicker{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600} .rel-title{font-family:var(--fh);font-weight:700;font-size:1.5rem;line-height:1} .rel-plan{font-size:12px;color:var(--ink);background:#f3eee5;border:1px solid var(--line);padding:2px 10px;border-radius:999px} .rel-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rel-steps{display:flex;margin:4px 0 16px;overflow-x:auto} .rel-step{flex:1 1 0;min-width:88px;text-align:center;position:relative;padding-top:20px} .rel-step::before{content:"";position:absolute;top:6px;left:50%;width:100%;height:2px;background:var(--line-2)} .rel-step:last-child::before{display:none} .rel-step.done::before{background:var(--green)} .rel-step-dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#d6c9b4;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2);z-index:1} .rel-step.done .rel-step-dot{background:var(--green);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--green)} .rel-step.cur .rel-step-dot{background:var(--brand);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand)} .rel-step-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;display:block;padding:0 4px} .rel-step.cur .rel-step-lbl{color:var(--brand)} .rel-content{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rel-col{background:#fbfaf7;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0} .rel-col-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px} .rel-count{background:var(--brand);color:#fff;border-radius:999px;font-size:11px;padding:1px 8px;font-weight:700} .rel-count.is-zero{background:#ece5d8;color:#847761} .rel-chips{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto} .rel-chip{display:flex;align-items:center;gap:7px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rel-chip:hover{background:#fdf6ee} .rel-chip-dot{flex:none;width:8px;height:8px;border-radius:50%} .rel-empty{font-size:12px;color:var(--faint);font-style:italic} .rel-sched{margin-top:14px;border-top:1px solid var(--line);padding-top:8px} .rel-sched summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600} .rel-sched .rel-pipe{margin-top:12px} @media (max-width:820px){.rel-content{grid-template-columns:1fr}} /* Go / No-Go verdict */ .gng-verdict{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:22px} .gng-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .gng-value{font-family:var(--fh);font-weight:700;font-size:2.6rem;line-height:1} .gng-sub{font-size:12px;color:var(--muted)} .gng-go .gng-value{color:#16a34a}.gng-cond .gng-value{color:#b8690a}.gng-nogo .gng-value{color:#dc2626} .gng-go{box-shadow:inset 0 0 0 2px #bbf7d0}.gng-cond{box-shadow:inset 0 0 0 2px #fde68a}.gng-nogo{box-shadow:inset 0 0 0 2px #fecaca} /* Executive highlights */ .hl-row{display:flex;gap:8px;align-items:center;margin-top:7px} .hl-row .rag{flex:none} /* Milestone / stage-gate confidence strip */ .conf-scroll{overflow-x:auto;padding-bottom:4px} .conf-strip{position:relative;height:70px;min-width:100%} .conf-grid{position:absolute;top:0;bottom:18px;width:1px;background:#f0e8da} .conf-week{position:absolute;bottom:0;font-size:9px;color:var(--faint)} .conf-ms{position:absolute;top:12px;width:18px;height:18px;transform:rotate(45deg);background:#fff;border:2px solid #d6c9b4;display:grid;place-items:center} .conf-ms .rag{width:8px;height:8px;transform:rotate(-45deg)} .conf-ms.rag-bd-green{border-color:#16a34a}.conf-ms.rag-bd-amber{border-color:#f59e0b}.conf-ms.rag-bd-red{border-color:#dc2626}.conf-ms.rag-bd-grey{border-color:#d6c9b4} .conf-cap{position:absolute;top:36px;font-size:9px;color:#6d28d9;font-weight:600;transform:translateX(-50%)} /* Gantt day-by-day header (calendar style) */ .g-dayhead{text-align:center;border-left:1px solid #f5efe5;line-height:1.05;padding-top:3px;overflow:hidden} .g-dayhead.we{background:#f3ede1} .g-dnum{font-weight:600;color:var(--ink);font-size:10px} .g-ddow{font-size:8px;color:var(--faint)} /* Absence picker popover + set-absence form */ .abs-pop{position:fixed;z-index:90;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:5px;min-width:185px;max-height:min(70vh,440px);overflow:auto} .abs-opt{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:7px;font-size:12.5px;cursor:pointer} .abs-opt:hover{background:var(--bg)} .abs-opt.sel{background:#fbeede;color:var(--brand);font-weight:600} .abs-form select,.abs-form input{border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font-size:13px} @media print{ .gate,.sidebar,.topbar,.board-print,.bp-export,#export-menu,#modal,.gate-modal,.hamburger,#vne-toasts{display:none!important} .app{display:block!important;height:auto!important} .main{overflow:visible!important} .view{overflow:visible!important;height:auto!important;padding:0!important} body,.app,.main,.view{background:#fff!important} body{-webkit-print-color-adjust:exact;print-color-adjust:exact} /* keep RAG dots, bars & chips in colour */ .card{break-inside:avoid;box-shadow:none} .board-page{max-width:none} /* charts live in a horizontal-scroll wrapper on screen — let them lay flat & fit the page when printed */ .chart-scroll{overflow:visible!important} .chart-scroll .delivery-inner,.chart-scroll svg{min-width:0!important;max-width:100%!important} /* repeat table headers across printed pages and avoid splitting rows */ thead{display:table-header-group} tr,.two-col{break-inside:avoid} @page{margin:14mm} } .cal-legend{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;font-size:12px;color:var(--muted)} .cal-legend span b{display:inline-block;min-width:18px;padding:0 4px;box-sizing:border-box;text-align:center;background:#fdf3d4;border-radius:4px;color:#9a5f08;margin-right:4px} /* ---------- Capacity ---------- */ .cap-bar{height:20px;border-radius:5px;background:#efe6d6;position:relative;overflow:hidden;min-width:120px} .cap-bar>span{display:block;height:100%} .cap-ok>span{background:var(--green)}.cap-warn>span{background:var(--amber)}.cap-over>span{background:var(--red)} /* ---------- Modal ---------- */ .modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center} .modal-backdrop{position:absolute;inset:0;background:rgba(46,36,22,.5)} .modal-card{position:relative;background:#fff;border-radius:16px;width:min(94vw,720px);max-height:90vh;overflow:auto;box-shadow:0 40px 90px -30px #000;padding:26px} .modal-x{position:absolute;top:14px;right:16px;border:0;background:none;font-size:24px;color:var(--muted)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px} .dep-info{margin:8px 2px 4px;font-size:13px;color:var(--ink)} .dep-info a{color:var(--brand);text-decoration:none;font-weight:600} .dep-info a:hover{text-decoration:underline} .form-grid .full{grid-column:1/-1} .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px} .field textarea{min-height:70px;resize:vertical} /* Grouped record editor (Task editor): soft, labelled sections */ .editor-groups{display:flex;flex-direction:column;gap:14px;margin-top:10px} .editor-group{border:1px solid var(--grp-line,#efe6d8);background:var(--grp-bg,#fbf7f1);border-radius:13px;padding:13px 15px 15px} .editor-group .form-grid{margin-top:0} .editor-group.grp-sched{--grp-bg:#f4f6f9;--grp-line:#e3e9f0;--grp-accent:#5b7aa8} .editor-group.grp-own{--grp-bg:#f7f5fb;--grp-line:#e8e2f1;--grp-accent:#7c4fa8} .editor-group.grp-detail{--grp-bg:#f6f8f4;--grp-line:#e3ebde;--grp-accent:#5c8a3a} .editor-group.grp-effort{--grp-bg:#fbf6ee;--grp-line:#efe4d3;--grp-accent:#bf550f} .eg-head{display:flex;align-items:center;gap:8px;margin-bottom:11px} .eg-bar{width:3px;height:15px;border-radius:2px;background:var(--grp-accent,var(--brand-2))} .eg-ico{font-size:13px} .eg-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)} /* Schedule matrix — Planned / Actual / Baseline × Start / Finish */ .sched-matrix{width:100%;border-collapse:separate;border-spacing:0} .sched-matrix th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;text-align:left;padding:0 8px 6px} .sched-matrix td{padding:0 8px 8px;vertical-align:middle} .sched-matrix .rl{font-size:12.5px;font-weight:600;color:#46546b;white-space:nowrap;width:84px;padding-right:6px} .sched-matrix input{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;font:inherit;font-size:13px;background:#fff} .sched-foot{display:flex;align-items:center;gap:12px;margin-top:2px;padding-top:11px;border-top:1px dashed var(--grp-line,#e3e9f0)} .sched-foot .field{margin:0;display:flex;align-items:center;gap:8px} .sched-foot .field label{margin:0;white-space:nowrap} .sched-foot .field input{width:90px} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} /* ---------- Misc ---------- */ .empty{padding:40px;text-align:center;color:var(--faint)} .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);margin-top:10px} .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px} .muted{color:var(--muted)} .right{text-align:right}.center{text-align:center} .scroll-x{overflow-x:auto} /* ---------- Entity Management (settings) ---------- */ .ent-create{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .ent-create .cell-input{padding:8px 10px} .ent-list{display:grid;gap:8px} .ent-row{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:11px;background:#fff} .ent-row.active{border-color:var(--brand-2);background:linear-gradient(120deg,#fff,#fdf4ea)} .ent-row .tag{flex:none} .ent-row .btn{flex:none} .ent-row .btn-soft{margin-left:auto} /* ---------- PMO: entity health cards ---------- */ .ent-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .ent-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--grey);border-radius:var(--radius);padding:15px 16px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:9px} .ent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)} .ent-card.rag-edge-green{border-left-color:var(--green)} .ent-card.rag-edge-amber{border-left-color:var(--amber)} .ent-card.rag-edge-red{border-left-color:var(--red)} .ent-card.rag-edge-grey{border-left-color:var(--grey)} .ent-card-head{display:flex;align-items:center;gap:10px} .ent-card-flag{font-size:24px;line-height:1} .ent-card-name{font-family:var(--fh);font-weight:600;font-size:1.02rem;color:var(--ink)} .ent-card-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .ent-card-head .rag{margin-left:auto} .ent-card-pct{font-family:var(--fh);font-size:1.9rem;font-weight:700;line-height:1;color:var(--copper)} .ent-card-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)} .ent-card-stats .bad{color:var(--red)} .ent-card-stats b{color:var(--ink)} .ent-card-ms{font-size:11.5px;border-top:1px solid var(--line);padding-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* entity chip (in tables) */ .ent-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;white-space:nowrap} /* progress-by-entity bar with planned tick */ .var-bar.tall{height:16px} .var-plan-tick{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink);border-radius:2px;opacity:.65} .var-bar{position:relative} /* ---------- PMO: matrix & heatmap ---------- */ table.matrix th,table.heatmap th{white-space:nowrap} .matrix-cell{font-weight:600;min-width:62px} .heat-cell{min-width:34px;font-size:11px;padding:6px 4px} .rag-bg-green{background:#dcfce7} .rag-bg-amber{background:#fef3c7} .rag-bg-red{background:#fee2e2} .rag-bg-grey{background:#f1ece3;color:var(--muted)} table.matrix td.cell-name,table.heatmap td.cell-name{position:sticky;left:0;background:#fff;z-index:1;font-weight:600} table.matrix tr:hover td.cell-name,table.heatmap tr:hover td.cell-name{background:#fdf6ee} /* ---------- Capacity: drill-down + sparkline ---------- */ .cap-owner-link{cursor:pointer;color:var(--brand);font-weight:600;border-bottom:1px dashed transparent} .cap-owner-link:hover{border-bottom-color:var(--brand)} td.cap-cell{cursor:pointer} td.cap-cell:hover{outline:2px solid #b3a48d;outline-offset:-2px} td.cap-cell-sel{outline:2px solid #0f172a;outline-offset:-2px} tr.cap-row-open td.cell-name{background:#fdf6ee} .cap-drill-stats{margin:4px 0 14px} .cap-spark-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px} tr.cap-task-active td{background:#fff7ed} tr.cap-task-active td:first-child{box-shadow:inset 3px 0 0 var(--brand)} /* resource summary cards */ .cap-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px} .cap-rcard{padding:14px 16px;border-left:4px solid var(--line-2);transition:box-shadow .12s} .cap-rcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)} .cap-rcard.sel{box-shadow:0 0 0 2px var(--brand)} .cap-rcard.rag-edge-green{border-left-color:var(--green)} .cap-rcard.rag-edge-amber{border-left-color:var(--amber)} .cap-rcard.rag-edge-red{border-left-color:var(--red)} .cap-rcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px} .cap-rname{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cap-util{display:flex;align-items:center;gap:8px;margin-bottom:12px} .cap-util-bar{flex:1;height:8px;background:#efe6d6;border-radius:999px;overflow:hidden} .cap-util-fill{height:100%;border-radius:999px;min-width:2px} .cap-util-fill.bg-green{background:var(--green)} .cap-util-fill.bg-amber{background:var(--amber)} .cap-util-fill.bg-red{background:var(--red)} .cap-util-val{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;min-width:42px;text-align:right} .cap-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:6px;margin-bottom:10px} .cap-metric{text-align:center;background:#fbfaf7;border:1px solid var(--line);border-radius:8px;padding:6px 2px} .cap-metric-v{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums} .cap-metric-v.neg{color:var(--red)} .cap-metric-l{font-size:9px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);margin-top:2px} .cap-crit{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;border-top:1px solid var(--line);padding-top:9px} .cap-crit .bad{color:var(--red);font-weight:600} .cap-heat{margin-top:18px;border-top:1px solid var(--line);padding-top:10px} .cap-heat summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)} /* ---------- Defect / Action: priority legend, detail popup ---------- */ .prio-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 2px 14px;font-size:12px} .prio-legend-item{display:flex;align-items:center;gap:6px;color:var(--muted)} .prio-chip{display:inline-block;min-width:26px;text-align:center;font-weight:700;font-size:11px;padding:1px 7px;border-radius:6px;border:1px solid rgba(0,0,0,.07);color:#1f2937} .hist-box{display:flex;flex-direction:column;gap:6px;background:#fbfaf7;border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:170px;overflow:auto} .hist-row{font-size:12px;display:flex;align-items:center;gap:4px} .modal-sub{margin:16px 0 8px;font-size:13px;font-weight:700} /* ---------- Collaboration: comments + attachments ---------- */ .collab-thread{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto;margin-bottom:10px} .collab-c{background:#fbfaf7;border:1px solid var(--line);border-radius:8px;padding:8px 11px} .collab-c-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px} .collab-c-by{font-weight:700;font-size:12px} .collab-c-role{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:#f1ece1;border-radius:4px;padding:0 5px} .collab-c-at{font-size:11px;margin-left:auto} .collab-c-text{font-size:13px;word-wrap:break-word} .mention{color:var(--brand);font-weight:600} .collab-compose{display:flex;flex-direction:column;gap:6px} .collab-compose textarea{min-height:54px} .collab-compose-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end} .collab-file{cursor:pointer} .collab-file input[type=file]{display:none} .collab-sub{margin:14px 0 6px;font-size:12px;font-weight:700;color:var(--muted)} .collab-atts{display:flex;flex-direction:column;gap:5px} .collab-att-row{display:flex;align-items:center;gap:6px} .collab-att{font-size:12px;color:var(--brand);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .collab-att:hover{text-decoration:underline} .avatar{flex:none;width:26px;height:26px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} .collab-c-head{display:flex;align-items:center;gap:8px} .collab-reply{margin:8px 0 0 30px;border-left:2px solid var(--line-2)} .collab-reply-btn{margin-top:6px;background:none;border:0;color:var(--brand);font-size:11.5px;font-weight:600;cursor:pointer;padding:0} .collab-reply-btn:hover{text-decoration:underline} .collab-reply-compose{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0 30px} .collab-reply-box{flex:1;min-height:38px} .collab-att-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer;flex:none} .collab-att-ico{font-size:22px;flex:none;width:40px;text-align:center} .collab-att-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .collab-att-meta .collab-att{font-weight:600} .task-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px} .task-head h2{margin:0} .audit-box{max-height:220px} .audit-box .hist-row{display:block;font-size:12px;padding:2px 0;line-height:1.5} /* ---------- My View ---------- */ .nav-count.badge-alert{background:var(--red);color:#fff} .mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .mv-list{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow-y:auto;padding-right:2px} .mv-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer} .mv-item:hover{background:#fdf6ee} .mv-item .mv-id{font-size:10px;color:var(--muted);font-family:var(--fm,monospace)} .mv-item .mv-ent{font-size:10px;color:var(--muted);margin-left:auto} .mv-week{background:#fbfaf7;border:1px solid var(--line);border-radius:10px;padding:10px 12px} .mv-week h4{font-size:12px;margin-bottom:8px} .mv-empty{color:var(--faint);font-style:italic;font-size:12px;padding:6px} .mv-unread{box-shadow:inset 3px 0 0 var(--red)} .mv-disc .mv-disc-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mv-item.mv-mention{background:rgba(226,125,36,.07);border-color:var(--brand-2)} .mv-mention-tag{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--brand);border-radius:999px;padding:1px 6px;flex:none} /* ---------- Administration: users & people directory ---------- */ .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .card-head h3{margin:0} .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .filter-search{flex:1;min-width:180px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff} .filter-search:focus,.filter-sel:focus{outline:none;border-color:var(--brand)} .filter-sel{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;cursor:pointer} table.admin-grid td{vertical-align:middle} .u-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px} .status-badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:999px;white-space:nowrap} .status-badge.st-active{background:rgba(79,143,63,.14);color:var(--green)} .status-badge.st-disabled{background:rgba(168,156,139,.2);color:var(--muted)} .proj-chips{display:flex;flex-wrap:wrap;gap:4px} .proj-chip{font-size:10.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink)} .row-actions{display:flex;gap:4px;align-items:center} .icon-btn-spacer{display:inline-block;width:26px} .chk-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer} .chk-row input{width:auto;margin:0} /* A checkbox row sits inside a .field wrapper; stop the generic ".field label" (block, uppercase) and ".field input" (full-width) rules from breaking the inline layout. */ .field>label:empty{display:none;margin:0} .field label.chk-row{display:flex;align-items:center;gap:8px;margin-bottom:0;text-transform:none;letter-spacing:normal;font-size:13px;color:var(--ink)} .field .chk-row input{width:16px;height:16px;margin:0;flex:none} /* Project (entity) access picker — clean card rows */ .ws-access .ws-intro{margin:0 0 10px;font-size:12.5px;line-height:1.5} .ws-all{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);cursor:pointer;font-size:13px;margin-bottom:10px} .ws-all .ws-all-name{font-weight:700;color:var(--ink)} .ws-all small{color:var(--muted);font-size:11.5px} .ws-all input,.ws-opt input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--copper);cursor:pointer} .ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .ws-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s} .ws-opt:hover{border-color:var(--line-2)} .ws-opt.sel{border-color:var(--copper);background:#fbf3ea} .ws-opt .ws-opt-name{display:flex;flex-direction:column;line-height:1.25} .ws-opt .ws-opt-name b{font-size:13px;font-weight:600;color:var(--ink)} .ws-opt .ws-opt-name small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .ws-opt.disabled{opacity:.45;cursor:not-allowed;background:var(--bg)} .people-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .people-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .person-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px} .person-card .pc-head{display:flex;align-items:center;gap:10px} .person-card .pc-name{font-weight:600;font-size:14px;line-height:1.2} .person-card .pc-role{font-size:11.5px;color:var(--muted)} .person-card .pc-chips{display:flex;flex-wrap:wrap;gap:5px} .person-card .pc-chip{font-size:10.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--muted)} .person-card .pc-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px;flex-wrap:wrap} .kind-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;margin-left:auto} .kind-badge.k-team{background:rgba(79,143,63,.14);color:var(--green)} .kind-badge.k-stake{background:rgba(226,125,36,.16);color:var(--brand)} .pc-login{font-size:10.5px;font-weight:600;color:var(--green)} .pc-nologin{font-size:10.5px;color:var(--faint)} /* ---------- RAID register ---------- */ .help-i{color:var(--muted);cursor:help;font-size:11px} a.raid-title{color:var(--ink);font-weight:600;text-decoration:none} a.raid-title:hover{color:var(--brand);text-decoration:underline} .cat-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:6px} .cat-badge.cat-risk{background:rgba(207,60,46,.13);color:var(--red)} .cat-badge.cat-assumption{background:rgba(79,143,63,.14);color:var(--green)} .cat-badge.cat-issue{background:rgba(224,146,31,.16);color:#9a5f08} .cat-badge.cat-dependency{background:rgba(91,124,179,.16);color:#3f5e93} .cat-badge.cat-action{background:rgba(37,99,235,.13);color:#2563eb} .cat-badge.cat-decision{background:rgba(154,108,192,.16);color:#7c52a8} .sev-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap} .sev-badge.sev-low{background:rgba(79,143,63,.16);color:var(--green)} .sev-badge.sev-med{background:rgba(224,146,31,.16);color:#9a5f08} .sev-badge.sev-high{background:rgba(226,125,36,.2);color:var(--brand)} .sev-badge.sev-crit{background:rgba(207,60,46,.15);color:var(--red)} /* Risk Matrix (probability × impact heatmap) */ .rm-host{margin-top:4px} .rm-tbl-wrap{overflow:auto} .risk-matrix{border-collapse:collapse;margin:6px 0 8px} .risk-matrix th,.risk-matrix td{border:1px solid var(--line)} .risk-matrix .rm-corner{padding:6px 8px;font-size:10.5px;text-align:center;background:var(--card-2,#faf7f1);color:#6b6354;white-space:nowrap} .risk-matrix .rm-axis{text-align:center;font-weight:700;font-size:12px;padding:5px;background:var(--card-2,#faf7f1)} .risk-matrix .rm-axis-y{width:30px} .rm-cell{width:112px;height:64px;vertical-align:top;padding:4px 5px;position:relative} .rm-cell.rm-low{background:rgba(79,143,63,.16)} .rm-cell.rm-med{background:rgba(224,146,31,.2)} .rm-cell.rm-high{background:rgba(226,125,36,.26)} .rm-cell.rm-crit{background:rgba(207,60,46,.26)} .rm-count{position:absolute;top:3px;right:6px;font-size:10px;font-weight:700;color:#5b5347} .rm-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:15px} .rm-chip{font-size:10px;font-family:var(--mono,ui-monospace,monospace);background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px;cursor:pointer;color:#333;line-height:1.5} .rm-chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .rm-more{font-size:10px;color:#5b5347;align-self:center} .rm-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .seg-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg-btn{border:none;background:#fff;padding:5px 13px;font-size:12px;cursor:pointer;color:#444} .seg-btn.active{background:var(--brand);color:#fff} /* @mention autocomplete dropdown */ .mention-menu{position:fixed;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.16);padding:4px;max-height:210px;overflow:auto} .mention-item{padding:5px 10px;font-size:13px;border-radius:6px;cursor:pointer;white-space:nowrap} .mention-item.active,.mention-item:hover{background:var(--brand);color:#fff} /* Automation rules */ .auto-card{border:1px solid var(--line);border-radius:11px;background:#fff;margin:8px 0;padding:10px 12px} .auto-card.off{opacity:.62} .auto-card-head{display:flex;align-items:center;gap:10px} .auto-card-main{flex:1;min-width:0} .auto-card-name{font-weight:700;font-size:14px} .auto-card-sum{font-size:12px;margin-top:1px} .auto-runs{font-size:11px;font-variant-numeric:tabular-nums} .auto-en{display:inline-flex;align-items:center;gap:5px;font-size:12px} .auto-editor{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px} .auto-h{margin:10px 0 5px;font-size:11px;letter-spacing:.05em;color:#8a8172;text-transform:uppercase} .auto-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end} .auto-rows{display:flex;flex-direction:column;gap:6px} .auto-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:var(--card-2,#faf7f1);border-radius:8px;padding:7px 9px} .auto-row.trig{background:rgba(226,125,36,.08)} .auto-when{font-size:11px;color:#8a8172;align-self:center;min-width:30px} .auto-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end} .auto-f{display:flex;flex-direction:column;gap:2px} .auto-l{font-size:10.5px;color:#8a8172} .auto-row .fld,.auto-grid .fld{min-width:120px} .auto-row textarea.fld{min-width:240px} .empty-card{border:1px dashed var(--line);border-radius:11px;background:#fff;padding:18px;text-align:center} /* Goals / OKRs */ /* Change requests */ .cr-approvals{font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;color:#6b6354} .cr-approvals.ok{color:var(--done,#4f8f3f)} .cr-approvals.rej{color:var(--red,#cf3c2e)} .cr-approvers{display:flex;flex-direction:column;gap:6px} .cr-ap-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:var(--card-2,#faf7f1);border-radius:8px;padding:7px 9px} .cr-ap-actions{display:flex;gap:8px;align-items:center;margin-top:8px} .cr-rollup{font-size:12px;margin:2px 0 8px} /* Custom dashboard */ .dash-palette{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px dashed var(--line);border-radius:11px;background:#fff} .dash-widget .sec-head{display:flex;align-items:center} .dash-ctrls{display:inline-flex;gap:4px;margin-left:6px} /* KPI builder */ .kpi-card-val{min-width:62px;text-align:center;font-family:var(--fh,inherit);font-weight:700;font-size:1.25rem;padding:6px 8px;border-radius:9px;background:var(--card-2,#faf7f1);border:1px solid var(--line)} .kpi-card-val.kpi-green{background:#e9f2e2;border-color:#bcd6aa} .kpi-card-val.kpi-amber{background:#fdf3da;border-color:#eed398} .kpi-card-val.kpi-red{background:#fbe5e1;border-color:#efb0a6} .auto-card-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kpi-chip{font-size:10px;font-weight:600;letter-spacing:.02em;padding:1px 8px;border-radius:999px;background:var(--hover,#f1ebe2);color:var(--muted,#6a5f50);border:1px solid var(--line)} .kpi-chip-ex{background:#eef4fb;color:#2f5d8a;border-color:#cfe0f0} .kpi-card-meta{display:flex;flex-direction:column;gap:5px;margin-top:2px} .kpi-tgt{display:flex;align-items:center;gap:8px} .kpi-bar{flex:0 0 120px;height:8px;background:var(--hover,#f1ebe2);border-radius:5px;overflow:hidden} .kpi-bar-fill{display:block;height:100%;background:var(--brand,#b8530f);border-radius:5px} .kpi-bar-fill.kpi-green{background:#4f8f3f}.kpi-bar-fill.kpi-amber{background:#e0921f}.kpi-bar-fill.kpi-red{background:#cf3c2e} .auto-pill{font-size:10px;font-weight:700;letter-spacing:.03em;padding:1px 8px;border-radius:999px} .auto-pill.auto-on{background:#e8f4e8;color:#2f6f23;border:1px solid #c4e3c0} .auto-pill.auto-off{background:#f1edf0;color:#8a7d8a;border:1px solid #e0d6dd} .kpi-preview{display:flex;align-items:center;gap:12px;margin:10px 0 2px;padding:10px;border:1px dashed var(--line);border-radius:11px;background:#fff} .kpi-preview .kpi{min-width:140px} /* KPI Dashboard Configuration */ .kpicfg-card .sec-head{display:flex;align-items:center;gap:8px} .kpicfg-count{font-size:11px;font-variant-numeric:tabular-nums} .kpicfg-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 18px;margin-top:8px} .kpicfg-row{display:flex;align-items:center;gap:9px;padding:5px 4px;border-radius:7px} .kpicfg-row:hover{background:var(--card-2,#faf7f1)} .kpicfg-row.off{opacity:.55} .kpicfg-val{min-width:46px;text-align:center;font-weight:700;font-size:12px;padding:2px 7px;border-radius:7px;background:var(--card-2,#faf7f1);border:1px solid var(--line);white-space:nowrap} .kpicfg-val.kpi-green{background:#e9f2e2;border-color:#bcd6aa} .kpicfg-val.kpi-amber{background:#fdf3da;border-color:#eed398} .kpicfg-val.kpi-red{background:#fbe5e1;border-color:#efb0a6} .kpicfg-name{flex:1;font-size:13px} .kpicfg-note{font-size:10.5px;font-style:italic} .multi-check{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:140px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff} .multi-check-item{display:flex;align-items:center;gap:4px;font-size:12.5px;cursor:pointer} .multi-check-item input{width:auto;margin:0} /* ---------- Action Log: cards ---------- */ .action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .action-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:118px;transition:box-shadow .12s,border-color .12s} .action-card:hover{border-color:var(--brand);box-shadow:var(--shadow)} .action-card .ac-head{display:flex;align-items:center;gap:8px} .action-card .ac-id{font-size:11px;color:var(--muted)} .action-card .ac-title{font-weight:600;font-size:13.5px;line-height:1.3} .action-card .ac-meta{display:flex;flex-wrap:wrap;gap:5px} .action-card .ac-chip{font-size:10.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--muted)} .action-card .ac-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px} .action-card .ac-due{font-size:11px;color:var(--muted)} .action-card .ac-due.overdue{color:var(--red);font-weight:600} .prio-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;margin-left:auto} .prio-badge.p-low{background:rgba(79,143,63,.16);color:var(--green)} .prio-badge.p-medium{background:rgba(224,146,31,.16);color:#9a5f08} .prio-badge.p-high{background:rgba(226,125,36,.2);color:var(--brand)} .prio-badge.p-critical{background:rgba(207,60,46,.15);color:var(--red)} /* ---------- Go/No-Go readiness dashboard ---------- */ .gng-cat{padding:0;overflow:hidden} .gng-cat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfaf7} .gng-cat-head h3{margin:0;font-size:14px;flex:none} .gng-cat-prog{font-size:11.5px;color:var(--muted);margin-right:auto} table.gng-grid{margin:0} table.gng-grid td{vertical-align:middle} /* ---------- Phase 9: global UX polish ---------- */ /* Accessible keyboard focus ring across all controls */ *:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:4px} /* Custom-styled native dropdowns (consistent chevron, no OS chrome) */ select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c7060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:24px} select::-ms-expand{display:none} /* Global search typeahead */ .search-wrap{position:relative;display:inline-flex} .search-results{position:absolute;top:calc(100% + 6px);right:0;width:min(440px,86vw);max-height:62vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40} .sr-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px} .sr-row:hover{background:var(--bg)} .sr-ico{flex:none} .sr-id{flex:none;font-size:10.5px;color:var(--muted)} .sr-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-kind{flex:none;font-size:10px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px} .sr-empty{padding:12px;color:var(--muted);font-size:13px} /* Small-screen polish: stack modal forms + crowded topbar */ @media(max-width:640px){ .form-grid{grid-template-columns:1fr} .topbar{flex-wrap:wrap;align-items:flex-start} .search{width:100%} .search-wrap{flex:1} .search-wrap.search-field{flex:1;min-width:0} .search-wrap.search-field .search{width:100%} .modal-card{max-width:96vw} } /* ---------- Gantt: delay indicator + critical-path impact ---------- */ .g-sliplbl.crit{color:#fff;background:#cf3c2e;padding:0 4px;border-radius:3px} .g-sliplbl.clickable{cursor:pointer;text-decoration:underline dotted} .g-sliplbl.clickable:hover{filter:brightness(1.08);box-shadow:0 1px 4px rgba(0,0,0,.2)} /* preview: faded current bar + dashed projected ghost bar */ .g-bar.g-faded{opacity:.3;filter:grayscale(.35)} .g-ghost{position:absolute;top:6px;height:18px;border-radius:5px;border:2px dashed;z-index:3} .g-ghost.moved{border-color:#bf550f;background:rgba(191,85,15,.14)} .g-ghost.affected{border-color:#e0921f;background:rgba(224,146,31,.16)} .g-impact-row.moved{background:rgba(191,85,15,.06)} .g-impact-row.affected{background:rgba(224,146,31,.07)} .g-row .g-label.impact-lbl{font-weight:600} .g-impact-row.moved .g-label{box-shadow:inset 3px 0 0 #bf550f} .g-impact-row.affected .g-label{box-shadow:inset 3px 0 0 #e0921f} .impact-arrows{z-index:3} .impact-arrow-path{fill:none;stroke:#c2410c;stroke-width:1.7} .dep-arrows{z-index:2} .dep-arrow-path{fill:none;stroke:#7c8aa0;stroke-width:1.3;opacity:.7} .dep-arrow-path.crit{stroke:#dc2626;stroke-width:1.8;opacity:.95} /* impact summary panel */ .impact-panel{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)} .impact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px} .impact-title{font-family:var(--fh);font-weight:700;font-size:1.05rem;color:var(--copper);display:block} .impact-sub{font-size:12px;color:var(--muted)} .impact-x{border:0;background:none;font-size:16px;color:var(--muted);cursor:pointer;line-height:1} .impact-warn{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:10px} .impact-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px} .impact-stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px} .impact-stat-v{font-family:var(--fh);font-weight:700;font-size:1.3rem;line-height:1} .impact-stat-l{font-size:11px;color:var(--muted);margin-top:3px} .impact-stat.bad .impact-stat-v{color:var(--red)} .impact-stat.warn .impact-stat-v{color:var(--amber)} .impact-stat.ok .impact-stat-v{color:var(--leaf)} .impact-moved{font-size:13px;margin-bottom:10px;padding:8px 10px;background:var(--bg);border-radius:9px} .impact-then{color:var(--brand);font-weight:700} .impact-tbl-wrap{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:12px} .impact-tbl{width:100%;border-collapse:collapse;font-size:12.5px} .impact-tbl th{position:sticky;top:0;background:#f8f5f0;text-align:left;padding:7px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)} .impact-tbl td{padding:6px 10px;border-bottom:1px solid #f1ece4;white-space:nowrap} .impact-tbl tr.cp td:first-child{box-shadow:inset 3px 0 0 var(--red)} .impact-none{color:var(--muted);font-size:13px;margin-bottom:10px} .impact-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* =========================================================== Phase 10 — shared design-system components (additive; adopted by rebuilt modules for a coherent look) =========================================================== */ /* Standard search field: magnifier icon + clear (X) button. Wraps .filter-search. */ .search-field{position:relative;display:inline-flex;align-items:center;flex:1;min-width:200px} .search-field .search-ico{position:absolute;left:11px;display:inline-flex;align-items:center;color:var(--faint);pointer-events:none} .search-field .search-ico svg{width:15px;height:15px;display:block} .search-field .filter-search{flex:1;width:100%;padding-left:33px;padding-right:30px} .search-field .search-clear{position:absolute;right:7px;display:none;align-items:center;justify-content:center;border:0;background:none;color:var(--faint);font-size:17px;line-height:1;width:22px;height:22px;padding:0;cursor:pointer;border-radius:6px} .search-field .search-clear:hover{color:var(--ink);background:rgba(120,70,20,.07)} .search-field.has-val .search-clear{display:inline-flex} .search-field .filter-search::-webkit-search-cancel-button{-webkit-appearance:none;display:none} .search-field .filter-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(191,85,15,.14)} /* global topbar search adopts the same icon+clear treatment */ .search-wrap.search-field{flex:none;min-width:0} .search-wrap.search-field .search{padding-left:33px;padding-right:30px;width:220px} .search-wrap .search::-webkit-search-cancel-button{-webkit-appearance:none;display:none} /* Generic badge primitive — one geometry, tone modifiers. */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.7;padding:1px 9px;border-radius:var(--radius-pill);white-space:nowrap} .badge--neutral{background:var(--bg);border:1px solid var(--line);color:var(--muted)} .badge--green{background:rgba(79,143,63,.16);color:var(--green)} .badge--amber{background:rgba(224,146,31,.16);color:#9a5f08} .badge--red{background:rgba(207,60,46,.15);color:var(--red)} .badge--brand{background:rgba(226,125,36,.2);color:var(--brand)} .badge--blue{background:rgba(91,124,179,.16);color:#3f5e93} .badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} /* Generic responsive card-grid utility (available for card lists). */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .card-grid.cg-wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} /* Expandable record cards (Defects, Decisions, …) — progressive disclosure. */ .rec-list{display:flex;flex-direction:column;gap:10px} .rec-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:box-shadow .12s,border-color .12s} .rec-card:hover{border-color:var(--line-2)} .rec-card[open]{border-color:var(--brand-2);box-shadow:var(--shadow-md)} .rec-card.crit{box-shadow:inset 3px 0 0 var(--red)} .rec-card[open].crit{box-shadow:inset 3px 0 0 var(--red),var(--shadow-md)} .rec-sum{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;user-select:none} .rec-sum::-webkit-details-marker{display:none} .rec-caret{color:var(--faint);font-size:10px;transition:transform .15s;flex:none} .rec-card[open] .rec-caret{transform:rotate(90deg)} .rec-id{font-size:11px;color:var(--muted);font-family:var(--fm);flex:none} .rec-title{font-weight:600;font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rec-sum-badges{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap} .rec-body{padding:14px 16px 16px;border-top:1px solid var(--line);background:#fcfbf9} .rec-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px 20px;margin-bottom:12px} .rec-f{display:flex;flex-direction:column;gap:2px;min-width:0} .rec-f.full{grid-column:1/-1} .rec-f-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700} .rec-f-v{font-size:13px;color:var(--ink);word-wrap:break-word} .rec-f-v.empty{color:var(--faint)} .rec-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;padding-top:10px;border-top:1px dashed var(--line)} .rec-foot .rec-meta{font-size:11px;color:var(--muted);margin-right:auto} /* Go/No-Go: collapsible readiness cards + progressive disclosure */ .gng-cat{padding:0;overflow:hidden} summary.gng-cat-head{cursor:pointer;list-style:none;user-select:none} summary.gng-cat-head::-webkit-details-marker{display:none} .gng-cat:not([open]) .gng-cat-head{border-bottom:none} .gng-cat[open] .rec-caret{transform:rotate(90deg)} .gng-cat-head h3{flex:none;font-size:14px} .gng-cat-head .gng-prog{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none} .gng-prog-bar{width:90px;height:7px;background:#ece2d4;border-radius:999px;overflow:hidden} .gng-prog-fill{display:block;height:100%;border-radius:999px;min-width:2px;background:var(--grey)} .gng-prog-fill.bg-green{background:var(--green)}.gng-prog-fill.bg-amber{background:var(--amber)}.gng-prog-fill.bg-red{background:var(--red)}.gng-prog-fill.bg-grey{background:var(--grey)} .gng-prog-txt{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);min-width:30px;text-align:right} .gng-cat-head .gng-cat-prog{margin:0 0 0 4px;flex:none} .gng-cat-body{padding:12px 14px 14px} .gng-cat-foot{margin-top:10px} .gng-locked{display:flex;align-items:center;gap:6px} .gng-lock{font-size:12px;line-height:1} .gng-row-locked td{background:rgba(79,143,63,.05)} table.gng-grid{table-layout:fixed;width:100%} table.gng-grid th:nth-child(1),table.gng-grid td:nth-child(1){width:25%} table.gng-grid th:nth-child(2),table.gng-grid td:nth-child(2){width:14%} table.gng-grid th:nth-child(3),table.gng-grid td:nth-child(3){width:15%} table.gng-grid th:nth-child(4),table.gng-grid td:nth-child(4){width:15%} table.gng-grid th:nth-child(5),table.gng-grid td:nth-child(5){width:16%} table.gng-grid th:nth-child(6),table.gng-grid td:nth-child(6){width:15%} table.gng-grid td .row-actions{flex-wrap:wrap;gap:3px} /* ---------- Responsive ---------- */ @media(max-width:900px){ .app{grid-template-columns:1fr} .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:60;transform:translateX(-100%);transition:.25s} .sidebar.open{transform:none} .hamburger{display:block} .two-col,.three-col{grid-template-columns:1fr} .search{width:130px} .search-wrap.search-field .search{width:130px} } /* ============================================================ Enterprise form controls — unified dropdowns & inputs Modern borders, consistent spacing, clear hover/focus states. Applied platform-wide so every register, modal & filter matches. (Placed last so it supersedes the older per-context rules above.) ============================================================ */ /* Refined custom chevron on every native