/* ============================================================ APQP Manager Enterprise — premium application theme Inter typography · deep automotive gradients · gradient icon tiles · per-module brand colours · soft depth. ============================================================ */ /* ---- Inter (vendored, offline) ---- */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("../vendor/css/fonts/inter-latin.da03732a27e1.woff2") format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url("../vendor/css/fonts/inter-latin-500.51205681a1ba.woff2") format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url("../vendor/css/fonts/inter-latin-600.2ede57db1a3a.woff2") format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url("../vendor/css/fonts/inter-latin-700.8ca0a5155296.woff2") format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url("../vendor/css/fonts/inter-latin-800.900ae45e40b8.woff2") format('woff2'); } :root { --brand-900: #0a1020; --brand-800: #101c38; --brand-700: #16264c; --accent: #2563eb; --accent-600: #1d4ed8; --accent-soft: #eaf1fe; --sky: #0ea5e9; --indigo: #6366f1; --violet: #8b5cf6; --amber: #f59e0b; --emerald: #10b981; --teal: #14b8a6; --rose: #f43f5e; --ok: #10b981; --ok-soft: #e7f7ef; --warn: #d97706; --warn-soft: #fdf3e3; --danger: #e11d48; --danger-soft: #fdeaef; --ink: #0f172a; --ink-soft: #64748b; --line: #e6eaf1; --bg: #f4f6fb; --card: #ffffff; --radius: 16px; --radius-sm: 12px; --sidebar-w: 256px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 4px 18px rgba(16, 24, 40, 0.07); --shadow: 0 12px 30px rgba(16, 24, 40, 0.13); --shadow-lg: 0 18px 46px rgba(8, 17, 45, 0.30); } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9rem; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold, .page-title, .kpi-value { letter-spacing: -0.02em; } a { text-decoration: none; } /* ============================================================ ProQ top navbar — glassmorphism bar + animated mega-menu ============================================================ */ .proq-body { background: var(--bg); } .proq-nav { background: linear-gradient(120deg, #0e225a 0%, #16308f 38%, #1d4ed8 74%, #2f6bf6 100%) !important; box-shadow: 0 6px 22px rgba(8, 17, 45, .35), inset 0 1px 0 rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .07); padding: .5rem 0; position: sticky; top: 0; z-index: 1030; } /* glossy sheen across the top half + soft accent line at the bottom */ .proq-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); pointer-events: none; } .proq-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(96, 165, 250, .65), rgba(56, 189, 248, 0)); pointer-events: none; } .proq-nav .container-fluid { position: relative; z-index: 1; padding-left: 22px; padding-right: 22px; } /* A light beam that sweeps left→right once every 10s for a subtle live feel. (Disabled automatically under prefers-reduced-motion via the global reset.) */ .proq-nav-beam { position: absolute; top: 0; bottom: 0; left: 0; width: 150px; z-index: 2; pointer-events: none; mix-blend-mode: screen; filter: blur(2px); opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 42%, rgba(173,216,255,.42) 50%, rgba(255,255,255,.16) 58%, rgba(255,255,255,0) 100%); transform: translateX(-180px); animation: proqNavBeam 10s ease-in-out infinite; will-change: transform, opacity; } @keyframes proqNavBeam { 0% { transform: translateX(-180px); opacity: 0; } 3% { opacity: 1; } 22% { transform: translateX(calc(100vw + 40px)); opacity: 1; } 26% { opacity: 0; } 100% { transform: translateX(calc(100vw + 40px)); opacity: 0; } } /* ---- Brand ---- */ .proq-nav .navbar-brand { font-weight: 800; color: #fff; padding-top: 0; padding-bottom: 0; } .brand-badge { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #14b8a6 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; letter-spacing: .5px; box-shadow: 0 6px 16px rgba(37, 99, 235, .5), inset 0 1px 0 rgba(255, 255, 255, .4); } .brand-word { display: inline-flex; flex-direction: column; line-height: 1; font-size: 1.22rem; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .brand-tag { font-size: .5rem; font-weight: 700; letter-spacing: .22em; color: rgba(255, 255, 255, .62); margin-top: 3px; } /* ---- Text nav links: pill hover with glow ---- */ .proq-nav .navbar-nav > .nav-item > .nav-link { color: rgba(255, 255, 255, .84) !important; font-weight: 600; font-size: .86rem; letter-spacing: .1px; padding: .46rem .8rem; margin: 0 .06rem; border-radius: 10px; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; } .proq-nav .navbar-nav > .nav-item > .nav-link:hover, .proq-nav .navbar-nav > .nav-item.show > .nav-link, .proq-nav .navbar-nav > .nav-item > .nav-link.active { color: #fff !important; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 10px rgba(0, 0, 0, .16); } .proq-nav .nav-link i { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .22)); } .proq-nav .dropdown-toggle::after { opacity: .65; margin-left: .4rem; } /* ---- Quick-access icons: 3D glass buttons ---- */ .nav-quick-icon { width: 40px; height: 40px; border-radius: 11px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: rgba(255, 255, 255, .92) !important; background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .045)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .2); transition: transform .14s ease, box-shadow .18s ease, background .18s ease; } .nav-quick-icon:hover { color: #fff !important; transform: translateY(-2px); background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 7px 16px rgba(0, 0, 0, .3); } .nav-quick-icon:active { transform: translateY(0); } .nav-quick-icon.active { color: #fff !important; background: linear-gradient(160deg, rgba(56, 189, 248, .55), rgba(37, 99, 235, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 16px rgba(37, 99, 235, .55); } .nav-quick-icon i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); } /* ---- User chip + avatar ---- */ .user-chip { border-radius: 12px; padding: .28rem .5rem !important; color: #fff !important; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); } .user-chip:hover { background: rgba(255, 255, 255, .2); } .user-chip-name { font-weight: 600; font-size: .82rem; } .avatar-badge { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #6366f1); color: #fff; font-weight: 700; font-size: 0.74rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .35); } /* ---- Notification bell + badge ---- */ .notif-bell { border-radius: 10px; padding: .4rem .55rem !important; transition: background .18s ease; } .notif-bell:hover { background: rgba(255, 255, 255, .14); } .notif-badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(239, 68, 68, .55), 0 0 0 1.5px rgba(255, 255, 255, .9); } /* ---- Premium dropdown menus ---- */ .proq-nav .dropdown-menu { border: 1px solid rgba(15, 23, 42, .06); border-radius: 14px; padding: .4rem; margin-top: .55rem !important; box-shadow: 0 16px 40px rgba(8, 17, 45, .22), 0 2px 8px rgba(8, 17, 45, .1); animation: navDrop .16s ease; } @keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .proq-nav .dropdown-menu .dropdown-item { border-radius: 9px; font-weight: 500; font-size: .85rem; padding: .5rem .7rem; transition: background .14s ease, color .14s ease; } .proq-nav .dropdown-menu .dropdown-item:hover { background: linear-gradient(135deg, #eff4ff, #e6edff); color: #1d4ed8; } .proq-nav .dropdown-menu .dropdown-item i { color: #2563eb; } /* ---- Notification menu rows ---- */ .notif-menu .notif-item { border-radius: 9px; } .notif-title { font-weight: 600; font-size: .82rem; display: flex; align-items: center; gap: 6px; color: var(--ink); } .notif-udot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .notif-msg { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; } .notif-menu .dropdown-item:hover .notif-msg { color: #475569; } /* ============================================================ Quality Tools mega-menu (per-module colored tiles + motion) ============================================================ */ .proq-nav .dropdown-menu.qt-menu { --qt-spring: cubic-bezier(.34, 1.56, .64, 1); --qt-ease: cubic-bezier(.22, .61, .36, 1); width: 328px; padding: .4rem .42rem .5rem; border: 1px solid rgba(15, 23, 42, .07); border-radius: 18px; background: radial-gradient(120% 100% at 0% 0%, rgba(37, 99, 235, .06), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 250, 255, .95)); box-shadow: 0 24px 60px rgba(8, 17, 45, .26), 0 4px 14px rgba(8, 17, 45, .12), inset 0 1px 0 rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); } .proq-nav .dropdown-menu.qt-menu .dropdown-item.qt-item:hover, .proq-nav .dropdown-menu.qt-menu .dropdown-item.qt-item:focus { background: transparent; color: inherit; } .proq-nav .dropdown-menu.qt-menu .dropdown-item.qt-item i { color: inherit; } .qt-menu .qt-head { display: flex; align-items: center; gap: .45rem; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; padding: .4rem .6rem .45rem; margin: 0 0 .25rem; border-bottom: 1px solid rgba(15, 23, 42, .07); } .qt-menu .qt-head-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #2f6bf6, #10b981); box-shadow: 0 0 0 3px rgba(47, 107, 246, .14); } .proq-nav .dropdown-menu.qt-menu .qt-item { position: relative; display: flex; align-items: center; gap: .68rem; padding: .5rem .55rem; border-radius: 12px; color: #0f172a; overflow: hidden; isolation: isolate; transition: transform .26s var(--qt-spring), background-color .2s ease, box-shadow .2s ease; opacity: 0; transform: translateX(-8px); animation: qtRowIn .42s var(--qt-spring) both; } .qt-menu li + li .qt-item::after { content: ""; position: absolute; left: 3rem; right: .55rem; top: -1px; height: 1px; background: rgba(15, 23, 42, .055); z-index: -1; } .qt-menu .qt-item::before { content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--qt-a), var(--qt-b)); transform: translateY(-50%); transition: height .28s var(--qt-spring); z-index: 1; } .qt-menu .qt-tile { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: .98rem; overflow: hidden; background: linear-gradient(140deg, var(--qt-a), var(--qt-b)); box-shadow: 0 3px 9px rgba(var(--qt-glow), .35), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .3s var(--qt-spring), box-shadow .24s ease; } .qt-menu .qt-tile .bi { color: #fff; line-height: 1; transition: transform .3s var(--qt-spring); } .qt-menu .qt-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%); transform: translateX(-130%); opacity: 0; } .qt-menu .qt-body { flex: 1 1 auto; min-width: 0; line-height: 1.18; } .qt-menu .qt-title { display: block; font-weight: 650; font-size: .84rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qt-menu .qt-sub { display: block; font-size: .695rem; font-weight: 500; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; } .qt-menu .qt-pill { display: inline-block; margin-left: .3rem; padding: .03rem .34rem; font-size: .58rem; font-weight: 700; letter-spacing: .03em; color: #475569; background: #f1f5f9; border-radius: 999px; vertical-align: middle; } .qt-menu .qt-go { flex: 0 0 auto; font-size: .72rem; color: #cbd5e1; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .26s var(--qt-spring), color .2s ease; } .proq-nav .dropdown-menu.qt-menu .qt-item:hover, .proq-nav .dropdown-menu.qt-menu .qt-item:focus-visible { transform: translateX(5px); background-color: rgba(var(--qt-glow), .07); } .qt-menu .qt-item:hover::before, .qt-menu .qt-item:focus-visible::before, .qt-menu .qt-item.is-active::before { height: 64%; } .qt-menu .qt-item:hover .qt-tile, .qt-menu .qt-item:focus-visible .qt-tile { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 16px rgba(var(--qt-glow), .5), inset 0 1px 0 rgba(255, 255, 255, .35); } .qt-menu .qt-item:hover .qt-tile .bi, .qt-menu .qt-item:focus-visible .qt-tile .bi { transform: scale(1.04) rotate(-3deg); } .qt-menu .qt-item:hover .qt-tile::before { animation: qtSheen .6s ease forwards; } .qt-menu .qt-item:hover .qt-go, .qt-menu .qt-item:focus-visible .qt-go, .qt-menu .qt-item.is-active .qt-go { opacity: 1; transform: translateX(0); color: var(--qt-a); } .qt-menu .qt-item.is-active { background-color: rgba(var(--qt-glow), .09); } .qt-menu .qt-item:active { transform: translateX(5px) scale(.99); } .proq-nav .dropdown-menu.qt-menu .qt-item:focus-visible { outline: 2px solid var(--qt-a); outline-offset: -2px; } @keyframes qtRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes qtSheen { from { transform: translateX(-130%); opacity: .9; } to { transform: translateX(130%); opacity: 0; } } .qt-menu li:nth-child(2) .qt-item { animation-delay: .03s; } .qt-menu li:nth-child(3) .qt-item { animation-delay: .06s; } .qt-menu li:nth-child(4) .qt-item { animation-delay: .09s; } .qt-menu li:nth-child(5) .qt-item { animation-delay: .12s; } .qt-menu li:nth-child(6) .qt-item { animation-delay: .15s; } .qt-menu li:nth-child(7) .qt-item { animation-delay: .18s; } .qt-menu li:nth-child(8) .qt-item { animation-delay: .21s; } /* ============================================================ Context sub-bar (page title + page actions) ============================================================ */ .subbar { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .subbar-inner { max-width: var(--app-max, none); margin: 0 auto; padding: 9px 24px; min-height: 46px; display: flex; align-items: center; gap: 14px; } .subbar .page-context { font-weight: 700; color: var(--ink); font-size: .95rem; } .btn-icon { border: 1px solid var(--line); background: #fff; border-radius: 11px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); position: relative; transition: all .15s ease; } .btn-icon:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-xs); } /* App width follows the monitor: fluid to the full display by default. Set --app-max (e.g. 1600px) on :root to re-cap the working area if desired. */ .content { padding: 24px; max-width: var(--app-max, none); width: 100%; margin: 0 auto; } .content-plain { padding: 0; max-width: none; } /* A touch more side breathing room on very wide displays */ @media (min-width: 1900px) { .content { padding: 26px 40px; } .subbar-inner { padding: 9px 40px; } } /* ---------- Hero band ---------- */ .hero-band { border-radius: 22px; color: #fff; overflow: hidden; position: relative; margin-bottom: 22px; background: url("../img/hero-automotive.3133761112b9.svg") right -6px bottom -10px / auto 168% no-repeat, radial-gradient(120% 160% at 92% -20%, rgba(56,189,248,0.30) 0%, rgba(56,189,248,0) 55%), linear-gradient(118deg, #0a1020 0%, #122a52 44%, #1b46b0 78%, #2563eb 100%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.06); } .hero-band::before { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(116deg, rgba(255,255,255,.035) 0 1px, transparent 1px 11px); pointer-events:none; } .hero-band::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%), linear-gradient(90deg, rgba(56,189,248,0) 0%, rgba(96,165,250,.55) 50%, rgba(56,189,248,0) 100%) bottom / 100% 2px no-repeat; pointer-events:none; } .hero-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; padding: 26px 32px; position:relative; z-index:1; flex-wrap: wrap; } .hero-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:#93c5fd; margin-bottom:6px; text-shadow:0 1px 6px rgba(37,99,235,.45); } .hero-title { font-size:1.9rem; font-weight:800; margin:0 0 6px; text-shadow:0 2px 10px rgba(0,0,0,.35); } .hero-sub { font-size:.92rem; color:#d4def0; margin:0; } .btn-hero { border-radius:13px; font-weight:700; padding:11px 20px; background:linear-gradient(180deg,#fff,#eef2fb); border:1px solid rgba(255,255,255,.8); color:#15294f; box-shadow:0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9); transition:transform .14s ease, box-shadow .18s ease; } .btn-hero:hover { transform:translateY(-2px); color:#0f2557; box-shadow:0 12px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.9); } .hero-stats { display:flex; gap:26px; flex-wrap:wrap; } .hero-stat .hs-val { font-size:1.5rem; font-weight:800; line-height:1; } .hero-stat .hs-lab { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#9fb4dc; margin-top:3px; } /* ---------- Cards, tables ---------- */ .card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card); } .card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 600; padding: 13px 18px; } .table { --bs-table-hover-bg: #f6f9ff; margin-bottom: 0; } .table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); border-bottom: 1px solid var(--line); background: #fafbff; font-weight: 700; padding: 11px 12px; } .table td { vertical-align: middle; } .table-responsive { border-radius: var(--radius); } /* ---------- Status + phase badges ---------- */ .badge-soft { border-radius: 999px; font-weight: 600; padding: 0.36em 0.75em; font-size: 0.72rem; display: inline-flex; align-items: center; gap: 4px; } .badge-soft.ok { background: var(--ok-soft); color: #047857; } .badge-soft.warn { background: var(--warn-soft); color: #b45309; } /* amber-800: AA on the pale warn tint */ .badge-soft.danger { background: var(--danger-soft); color: var(--danger); } .badge-soft.info { background: var(--accent-soft); color: var(--accent-600); } .badge-soft.muted { background: #eef1f6; color: var(--ink-soft); } .badge-soft.purple { background: #f1e9fe; color: #7c3aed; } /* ---------- Phase stepper ---------- */ .phase-stepper { display: flex; gap: 8px; flex-wrap: wrap; } .phase-step { flex: 1; min-width: 128px; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line); background: #fff; position: relative; box-shadow: var(--shadow-xs); transition: transform .14s ease, box-shadow .16s ease; } .phase-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .phase-step .ph-num { width: 28px; height: 28px; border-radius: 50%; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #eef1f6; color: var(--ink-soft); } .phase-step.done { border-color: rgba(16, 185, 129, .35); background: linear-gradient(180deg,#f4fdf8,#fff); } .phase-step.done .ph-num { background: linear-gradient(135deg,#34d399,#059669); color: #fff; box-shadow: 0 4px 10px rgba(16,185,129,.34); } .phase-step.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .phase-step.active .ph-num { background: linear-gradient(135deg,#38bdf8,#2563eb); color: #fff; box-shadow: 0 4px 10px rgba(37,99,235,.34); } .phase-step .ph-name { font-weight: 600; font-size: 0.8rem; margin-top: 6px; } .phase-step .ph-meta { font-size: 0.72rem; color: var(--ink-soft); } /* scoped-out (not applicable) phase — muted, hatched, dashed border */ .phase-step.na { border-style: dashed; opacity: .78; background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 6px,#f1f5f9 6px,#f1f5f9 12px); } .phase-step.na:hover { transform: none; box-shadow: var(--shadow-xs); } .phase-step.na .ph-num { background: #e2e8f0; color: var(--ink-soft); box-shadow: none; } /* ---------- KPI tiles (premium) ---------- */ .kpi-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 19px; height: 100%; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; position: relative; overflow: hidden; } .kpi-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .kpi-tile .kpi-ic { width: 44px; height: 44px; border-radius: 13px; display: inline-grid; place-items: center; color: #fff; font-size: 1.25rem; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.3); } .kpi-ic.g-blue { background: linear-gradient(135deg,#38bdf8,#2563eb); } .kpi-ic.g-indigo { background: linear-gradient(135deg,#818cf8,#4f46e5); } .kpi-ic.g-emerald { background: linear-gradient(135deg,#34d399,#059669); } .kpi-ic.g-amber { background: linear-gradient(135deg,#fbbf24,#d97706); } .kpi-ic.g-rose { background: linear-gradient(135deg,#fb7185,#e11d48); } .kpi-ic.g-violet { background: linear-gradient(135deg,#a78bfa,#7c3aed); } .kpi-ic.g-teal { background: linear-gradient(135deg,#2dd4bf,#0d9488); } .kpi-tile .kpi-label { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .kpi-tile .kpi-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; } .kpi-tile .kpi-sub { font-size: 0.74rem; color: var(--ink-soft); } .kpi-tile.kpi-ok::after, .kpi-tile.kpi-warn::after, .kpi-tile.kpi-danger::after, .kpi-tile.kpi-info::after { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; } .kpi-tile.kpi-ok::after { background: var(--ok); } .kpi-tile.kpi-warn::after { background: var(--warn); } .kpi-tile.kpi-danger::after { background: var(--danger); } .kpi-tile.kpi-info::after { background: var(--accent); } /* ---------- Progress ---------- */ .progress { height: 8px; border-radius: 6px; background: #eef1f6; } .progress-bar { background: linear-gradient(90deg, #2563eb, #38bdf8); border-radius: 6px; } /* ---------- Forms ---------- */ .form-label { font-weight: 600; font-size: 0.82rem; } .form-control, .form-select { border-color: var(--line); border-radius: 10px; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-control-sm, .form-select-sm { border-radius: 8px; } .btn { border-radius: 11px; font-weight: 600; } .btn-primary { background: linear-gradient(180deg,#2f6bf6,#2054d6); border-color: #2054d6; box-shadow: 0 6px 16px rgba(37,99,235,.28); } .btn-primary:hover { background: linear-gradient(180deg,#2a61e6,#1b49c0); border-color: #1b49c0; } .btn-sm { border-radius: 9px; } /* ---------- Auth pages ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1100px 520px at 85% -10%, rgba(37, 99, 235, 0.16), transparent), radial-gradient(800px 420px at -10% 110%, rgba(20, 184, 166, 0.13), transparent), linear-gradient(180deg, #eef2fb, var(--bg)); padding: 24px; } .auth-card { width: 100%; max-width: 440px; } .auth-card .card { box-shadow: var(--shadow); border-radius: 20px; } .auth-badge { width: 58px; height: 58px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #14b8a6 100%); color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: .5px; box-shadow: 0 12px 28px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255, 255, 255, .45); } /* ---------- Editable grids ---------- */ .grid-table td, .grid-table th { font-size: 0.82rem; } .grid-table .cell-input { border: 1px solid transparent; background: transparent; width: 100%; border-radius: 7px; padding: 3px 6px; font-size: 0.82rem; } .grid-table .cell-input:hover { border-color: var(--line); background: #fff; } .grid-table .cell-input:focus { border-color: var(--accent); background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* Narrow S/O/D rating selects: drop the native dropdown arrow so the 1-2 digit value shows clean and centred (the arrow overlapped the number). */ .grid-table select.cell-input.text-center { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; text-align: center; text-align-last: center; padding-left: 2px; padding-right: 2px; font-weight: 600; } .grid-table select.cell-input.text-center::-ms-expand { display: none; } .sticky-col { position: sticky; left: 0; background: #fff; z-index: 2; } /* ---------- Project risk assessment (APQP §1.17 / App. C) ---------- */ .risk-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; max-width: 340px; } .risk-matrix td, .risk-matrix th { text-align: center; font-variant-numeric: tabular-nums; } .rm-cell { height: 34px; font-weight: 700; color: #1f2937; border-radius: 6px; font-size: .8rem; } .rm-low { background: #d1fae5; } .rm-medium { background: #fde68a; } .rm-high { background: #fecaca; } .rm-unrated { background: #eef1f6; } .rm-axis { font-weight: 700; font-size: .72rem; color: var(--ink-soft); padding-right: 6px; white-space: nowrap; text-align: right; } .rm-axis-lab { display: block; font-weight: 500; font-size: .55rem; color: var(--ink-soft); } .rm-axis-b { font-size: .72rem; color: var(--ink-soft); font-weight: 700; } .rm-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px 0 8px; vertical-align: middle; } .rm-key.rm-low { background: #6ee7b7; } .rm-key.rm-medium { background: #fbbf24; } .rm-key.rm-high { background: #f87171; } .risk-table .cell-input { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 6px; padding: 2px 5px; font-size: .75rem; } .risk-table .cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .risk-table .cell-input.is-required { border-color: #dc2626; background: #fef2f2; } .risk-row.risk-lvl-high > td:first-child { box-shadow: inset 3px 0 0 var(--danger, #dc2626); } .risk-row.risk-lvl-medium > td:first-child { box-shadow: inset 3px 0 0 #d97706; } .risk-guide th { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: #f8fafc; font-weight: 700; vertical-align: middle; } .risk-guide td { font-size: .72rem; vertical-align: top; line-height: 1.32; } /* Project action plan — inline editable table; overdue rows tint red, the days-left badge blinks red (reuses .badge-blink / latepulse). */ .action-table .cell-input { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 6px; padding: 2px 6px; font-size: .78rem; width: 100%; } .action-table .cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .action-table tr.action-overdue > td { background: rgba(220,38,38,.05); } .action-table tr.action-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--danger, #dc2626); } /* Date cell: keep the "CW" (Wnn) week badge to the RIGHT of the date, not beneath it */ .action-date { display: flex; align-items: center; gap: 6px; } .action-date .cell-input { flex: 1 1 auto; min-width: 0; width: auto; } .action-date .wk-badge { flex: 0 0 auto; margin-left: 0; } /* Trial-readiness checklist — fixed 4M+ rows, editable date/status cells */ .readiness-table .cell-input { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 6px; padding: 2px 6px; font-size: .78rem; width: 100%; } .readiness-table .cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .readiness-table td:first-child { color: var(--ink); } .readiness-status { font-weight: 600; } .readiness-status.rs-ok { color: #047857; border-color: rgba(4,120,87,.35); } .readiness-status.rs-info { color: var(--accent-600); border-color: rgba(37,99,235,.35); } .readiness-status.rs-warn { color: #b45309; border-color: rgba(180,83,9,.35); } .readiness-status.rs-danger { color: var(--danger); border-color: rgba(225,29,72,.35); } .readiness-status.rs-muted { color: var(--ink-soft); } /* Escalation ladder — configurable "after N weeks → position → responsible" */ .escalation-table .cell-input { border: 1px solid var(--line, #e5e7eb); background: #fff; border-radius: 6px; padding: 2px 6px; font-size: .78rem; } .escalation-table .cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } .escalation-table select.cell-input { width: 100%; } /* Core Team phase cell — RASIC select + per-person task-load badge */ .ctm-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .ctm-load { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 999px; color: var(--accent-600, #1d4ed8); background: var(--accent-soft, #eaf1fe); border: 1px solid rgba(37,99,235,.22); font-variant-numeric: tabular-nums; } .ctm-load i { font-size: .6rem; opacity: .8; } /* ============ Core Team — premium compact sheet ============ */ /* Slim legend strip */ .ctm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 8px 14px; font-size: .74rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-xs); } .ctm-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; } .ctm-legend .sep { width: 1px; height: 15px; background: var(--line); } .rasic-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; font-weight: 800; font-size: .66rem; line-height: 1; } .rp-R { background: var(--accent-soft); color: var(--accent-600); } .rp-A { background: var(--danger-soft); color: #dc2626; } .rp-S { background: #d9f2ef; color: #0d9488; } .rp-I { background: #eef1f6; color: #64748b; } .rp-C { background: #f1e9fe; color: #7c3aed; } /* Collapsible "add position" */ .ctm-add { border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-xs); overflow: hidden; } .ctm-add > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-weight: 600; font-size: .82rem; color: var(--ink); display: flex; align-items: center; gap: 8px; user-select: none; } .ctm-add > summary::-webkit-details-marker { display: none; } .ctm-add > summary:hover { color: var(--accent); } .ctm-add > summary .chev { margin-left: auto; color: var(--ink-soft); transition: transform .2s ease; } .ctm-add[open] > summary { border-bottom: 1px solid var(--line); } .ctm-add[open] > summary .chev { transform: rotate(180deg); } .ctm-add .ctm-add-body { padding: 13px 14px; } /* The sheet: one continuous premium table with grouped sections */ .ctm-sheet { overflow: hidden; } .ctm-table { border-collapse: separate; border-spacing: 0; } .ctm-table thead th { text-transform: uppercase; letter-spacing: .045em; font-size: .62rem; font-weight: 700; color: var(--ink-soft); background: #fbfcfe; padding: 9px 13px; border-bottom: 1px solid var(--line); } .ctm-table tbody td { padding: 6px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; } .ctm-table tbody tr:not(.ctm-group):hover td { background: #f7f9fd; } .ctm-table tbody tr:last-child td { border-bottom: 0; } .ctm-table tbody td:first-child { font-weight: 600; color: var(--ink); } /* Section group header row */ .ctm-group td { padding: 8px 13px !important; background: #f2f5fb; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ctm-group:first-child td { border-top: 0; } .ctm-group-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 9px; vertical-align: middle; background: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .ctm-group-core .ctm-group-dot { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); } .ctm-group-daci .ctm-group-dot { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.14); } .ctm-group-other .ctm-group-dot { background: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.14); } .ctm-group-count { margin-left: 9px; color: var(--ink-soft); font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: .62rem; letter-spacing: 0; } /* Responsible person — avatar chip + inline select */ .ctm-person { display: flex; align-items: center; gap: 9px; } .ctm-avatar { flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .64rem; letter-spacing: .3px; background: var(--a, #94a3b8); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(16,24,40,.14); } .ctm-avatar.is-empty { background: #eef1f6; color: #94a3b8; box-shadow: inset 0 0 0 1px var(--line); } .ctm-avatar.is-empty i { font-size: .72rem; } .ctm-person select.cell-input { font-weight: 600; } /* RASIC cells rendered as filled pills (still editable selects) */ .ctm-table .ctm-cell { gap: 5px; } .ctm-table select.cell-input.rasic { min-width: 44px; border-radius: 999px; padding: 4px 8px; font-weight: 800; font-size: .74rem; border: 1px solid transparent; background: transparent; color: #cbd5e1; transition: background .12s ease, color .12s ease, box-shadow .12s ease; } .ctm-table select.cell-input.rasic:hover { box-shadow: inset 0 0 0 1px var(--line); } .ctm-table select.cell-input.rasic.rasic-R { background: var(--accent-soft); color: var(--accent-600); } .ctm-table select.cell-input.rasic.rasic-A { background: var(--danger-soft); color: #dc2626; } .ctm-table select.cell-input.rasic.rasic-S { background: #d9f2ef; color: #0d9488; } .ctm-table select.cell-input.rasic.rasic-I { background: #eef1f6; color: #64748b; } .ctm-table select.cell-input.rasic.rasic-C { background: #f1e9fe; color: #7c3aed; } .ctm-table select.cell-input.rasic:focus { box-shadow: 0 0 0 3px var(--accent-soft); } @media (max-width: 640px) { .ctm-table thead th, .ctm-table tbody td { padding-left: 9px; padding-right: 9px; } .ctm-avatar { flex-basis: 24px; width: 24px; height: 24px; } } /* ============ Phase deliverables board — premium compact sheet ============ */ /* Reuses grid-table (.cell-input), .ctm-avatar/.ctm-person, .ctm-add. Everything net-new is scoped under .del-* so it never leaks to other tables. */ .del-sheet { overflow: hidden; } .del-table { border-collapse: separate; border-spacing: 0; } .del-table thead th { text-transform: uppercase; letter-spacing: .045em; font-size: .62rem; font-weight: 700; color: var(--ink-soft); background: #fbfcfe; padding: 9px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; } .del-table tbody td { padding: 6px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .8rem; } .del-table tbody tr:hover td { background: #f7f9fd; } .del-table tbody tr:last-child td { border-bottom: 0; } .del-table td .badge-soft { white-space: nowrap; } /* Overdue → single 3px danger left rail on the code cell */ .del-row.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .del-row.is-overdue .del-due input { color: var(--danger); font-weight: 700; } /* NA → recessed & muted */ .del-row.is-na > td { background: #fbfcfd; color: #94a3b8; } .del-row.is-na:hover > td { background: #f6f8fb; } .del-row.is-na .ctm-avatar { opacity: .6; } .del-code { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .74rem; color: var(--ink-soft); } .del-name { font-weight: 600; color: var(--ink); font-size: .82rem; } .del-name + .badge-soft, .del-code .badge-soft { font-size: .55rem; } /* Secondary/destructive controls: reveal on hover, reachable on focus & touch */ .del-reveal { opacity: 0; transition: opacity .12s ease; } .del-row:hover .del-reveal, .del-reveal:focus-visible, .del-reveal:focus-within { opacity: 1; } @media (hover: none) { .del-reveal { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .del-reveal { transition: none; } } .del-status-cell { display: flex; align-items: center; gap: 6px; min-height: 27px; } /* Status as a filled pill-select: leading currentColor state-dot + faint caret */ .del-table select.del-status { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 22px; font-weight: 700; font-size: .72rem; line-height: 1; cursor: pointer; min-width: 112px; max-width: 138px; font-variant-numeric: tabular-nums; background-repeat: no-repeat, no-repeat; background-position: left 8px center, right 7px center; background-size: 7px 7px, 9px 6px; background-image: radial-gradient(circle at center, currentColor 0 3px, transparent 3.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition: box-shadow .12s ease, background-color .12s ease, color .12s ease; } .del-table select.del-status::-ms-expand { display: none; } .del-table select.del-status:hover { box-shadow: inset 0 0 0 1px var(--line); } .del-table select.del-status:focus, .del-table select.del-status:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .del-table select.del-status:disabled { cursor: default; opacity: .9; padding-right: 12px; background-image: radial-gradient(circle at center, currentColor 0 3px, transparent 3.5px); background-position: left 8px center; } .del-status.st-not_started { background-color: #eef1f6; color: #64748b; } .del-status.st-in_progress { background-color: var(--warn-soft); color: #b45309; } .del-status.st-in_review { background-color: var(--accent-soft); color: var(--accent-600); } .del-status.st-released { background-color: var(--ok-soft); color: #047857; } .del-status.st-na { background-color: #eef1f6; color: #94a3b8; } /* Icon-only submit (send for approval) — always visible */ .del-submit { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(37,99,235,.22); background: var(--accent-soft); color: var(--accent-600); font-size: .8rem; line-height: 1; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease; } .del-submit:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(37,99,235,.28); } .del-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } /* Awaiting chip */ .del-await { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; background: var(--warn-soft); color: #b45309; border: 1px solid rgba(217,119,6,.18); } .del-await i { font-size: .72rem; } /* Primary Approve keeps its label; reject is a coin */ .del-approve { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--ok); background: var(--ok); color: #fff; font-size: .7rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .14s ease, box-shadow .14s ease; } .del-approve:hover { filter: brightness(.96); box-shadow: 0 2px 8px rgba(16,185,129,.3); } .del-approve:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ok-soft); } /* Shared coin button for reject / evidence-remove / custom-delete */ .del-icon { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-size: .8rem; line-height: 1; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease; } .del-icon:hover { box-shadow: var(--shadow-xs); } .del-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .del-icon.reject { color: var(--danger); border-color: rgba(225,29,72,.22); background: var(--danger-soft); } .del-icon.reject:hover { background: var(--danger); border-color: var(--danger); color: #fff; } @media (prefers-reduced-motion: reduce) { .del-submit, .del-icon, .del-approve { transition: none; } .del-submit:hover { transform: none; } } .del-unassigned { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: .64rem; font-weight: 600; color: #b45309; text-decoration: none; } .del-unassigned:hover { text-decoration: underline; } .del-due input { font-variant-numeric: tabular-nums; } /* Legend strip (flush inside the card) */ .del-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; padding: 7px 14px; font-size: .7rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); background: var(--card); } .del-legend .k { display: inline-flex; align-items: center; gap: 6px; } .del-legend .dot { width: 8px; height: 8px; border-radius: 50%; } /* ============ Gate Reviews cockpit ============ */ .gr-sheet { overflow: hidden; } /* Sheet table (mirrors .del-table / .ctm-table) */ .gr-table thead th { text-transform: uppercase; letter-spacing: .045em; font-size: .62rem; font-weight: 700; color: var(--ink-soft); background: #fbfcfe; padding: 9px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; } .gr-table tbody td { padding: 8px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .8rem; } .gr-table tbody tr:hover td { background: #f7f9fd; } .gr-table tbody tr:last-child td { border-bottom: 0; } .gr-row.is-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .gr-row.is-mine > td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .gr-row.is-mine > td { background: rgba(217,119,6,.045); } .gr-row.is-mine:hover > td { background: rgba(217,119,6,.08); } /* Highlighted focus gate — the one gate to approve next in each project */ .gr-focus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); border: 1px solid rgba(37,99,235,.28); color: var(--accent-600); font-weight: 700; font-size: .78rem; text-decoration: none; transition: background .12s ease, box-shadow .12s ease; } .gr-focus:hover { background: #dbe6fe; box-shadow: var(--shadow-xs); } .gr-focus > i { font-size: .72rem; } .gr-focus .gr-focus-code { font-size: .56rem; font-weight: 700; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink-soft); } .gr-focus.is-mine { background: var(--warn-soft); border-color: rgba(217,119,6,.45); color: #92400e; } .gr-focus.is-mine:hover { background: #fbe2c9; } .gr-focus.is-overdue { background: var(--danger-soft); border-color: rgba(225,29,72,.4); color: #dc2626; } .gr-focus.is-overdue:hover { background: #fbd5de; } /* Awaiting-your-signature card accent */ .gr-mine { border-color: rgba(217,119,6,.4); } .gr-mine > .card-header { background: var(--warn-soft); color: #92400e; } /* Portfolio matrix */ .gr-matrix thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .6rem; font-weight: 700; color: var(--ink-soft); background: #fbfcfe; padding: 8px 10px; border-bottom: 1px solid var(--line); } .gr-matrix tbody td { padding: 7px 10px; border-bottom: 1px solid var(--line); } .gr-matrix tbody tr:last-child td { border-bottom: 0; } .gr-matrix tbody tr:hover td { background: #f9fbfe; } .gr-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 34px; border-radius: 9px; font-weight: 800; font-size: .82rem; text-decoration: none; color: #1f2937; border: 1px solid transparent; transition: transform .1s ease, box-shadow .12s ease; } a.gr-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); } .gr-cell.is-current { outline: 2px solid rgba(37,99,235,.55); outline-offset: 1px; } .rag-green { background: var(--ok-soft); color: #047857; } .rag-amber { background: #f1e9fe; color: #7c3aed; } /* conditional = purple/violet */ .rag-red { background: var(--danger-soft); color: #dc2626; } .rag-open { background: var(--accent-soft); color: var(--accent-600); box-shadow: inset 0 0 0 1px rgba(37,99,235,.14); } .rag-grey { background: #eef1f6; color: #94a3b8; } .rag-na { background: repeating-linear-gradient(45deg,#f5f7fa,#f5f7fa 4px,#eef1f6 4px,#eef1f6 8px); color: #cbd5e1; cursor: default; } .gr-missing { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 2px #fff; } .gr-dot { position: absolute; left: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9); } .gr-dot.ok { background: var(--ok); } .gr-dot.warn { background: var(--warn); } .gr-dot.danger { background: var(--danger); } /* Approver avatar stack + signature status rings */ .gr-stack { display: inline-flex; align-items: center; } .gr-stack .gr-sig { width: 24px; height: 24px; font-size: .58rem; margin-left: -6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 2px #fff; } .gr-stack .gr-sig:first-child { margin-left: 0; } .gr-sig--approved { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 2px var(--ok) !important; } .gr-sig--rejected { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 2px var(--danger) !important; } .gr-sig--pending { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 2px var(--warn) !important; } /* Deliverables progress bar */ .gr-prog { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; } .gr-prog > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .gr-prog > span.full { background: var(--ok); } /* Legend */ .gr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .66rem; color: var(--ink-soft); } .gr-legend > span { display: inline-flex; align-items: center; gap: 5px; } .gr-key { width: 13px; height: 13px; border-radius: 4px; display: inline-block; } /* Inline sign buttons (reuse the board's coin language) */ .gr-approve, .gr-reject { width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; cursor: pointer; transition: filter .12s ease, box-shadow .12s ease; } .gr-approve { background: var(--ok); border-color: var(--ok); color: #fff; } .gr-approve:hover { filter: brightness(.96); box-shadow: 0 2px 8px rgba(16,185,129,.3); } .gr-reject { background: var(--danger-soft); border-color: rgba(225,29,72,.22); color: var(--danger); } .gr-reject:hover { background: var(--danger); border-color: var(--danger); color: #fff; } .gr-approve:focus-visible, .gr-reject:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } @media (prefers-reduced-motion: reduce) { a.gr-cell, .gr-approve, .gr-reject { transition: none; } } /* Charter "Needs attention" — pulse red while there are critical items. Falls back to a static red tint when the viewer prefers reduced motion. */ @keyframes attnbg { 0%, 100% { background: rgba(220,38,38,.07); } 50% { background: rgba(220,38,38,.18); } } .cc-head-alert { color: #b02a37; background: rgba(220,38,38,.08); animation: attnbg 1.4s ease-in-out infinite; } .cc-head-alert i { color: var(--danger, #dc2626); } .cc-head-alert .cc-attn-ic { display: inline-block; transform-origin: center; animation: alertpulse 1.15s ease-in-out infinite; } /* ---------- Drag & drop evidence upload ---------- */ .evidence-drop { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border-radius: 9px; cursor: pointer; border: 1px dashed var(--line); background: #fbfcff; color: var(--ink-soft); font-size: .76rem; font-weight: 600; white-space: nowrap; transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease; } .evidence-drop:hover, .evidence-drop:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; } .evidence-drop i { font-size: .95rem; } .evidence-drop.dragging { border-style: solid; border-color: var(--accent); color: var(--accent-600); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-1px); } /* ---------- ISO week badge next to date fields + flatpickr theming ---------- */ .wk-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; vertical-align: middle; color: var(--accent-600); background: var(--accent-soft); } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--accent); border-color: var(--accent); } .flatpickr-day.today { border-color: var(--accent); } .flatpickr-weekwrapper .flatpickr-weekday { color: var(--accent-600); } .flatpickr-weekwrapper span.flatpickr-day { color: var(--ink-soft); font-weight: 700; } .flatpickr-calendar { box-shadow: var(--shadow); border-radius: 12px; } /* ---------- Requirement help "?" icon + popover ---------- */ .help-q { color: var(--ink-faint, #9aa6bd); cursor: pointer; font-size: .92rem; vertical-align: -1px; transition: color .14s ease, transform .12s ease; } .help-q:hover, .help-q:focus-visible { color: var(--accent); transform: scale(1.12); outline: none; } .popover.help-popover { max-width: 340px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .popover.help-popover .popover-header { background: var(--accent-soft); color: var(--accent-600); font-weight: 700; font-size: .8rem; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; } .popover.help-popover .popover-body { font-size: .82rem; color: var(--ink); line-height: 1.5; } /* ---------- Project Charter (premium cockpit) ---------- */ .ch-hero { position:relative; overflow:hidden; border-radius:20px; color:#eef3ff; padding:20px 24px; margin-bottom:14px; background: radial-gradient(120% 130% at 100% 0%, rgba(56,189,248,.20), transparent 55%), radial-gradient(120% 130% at 0% 100%, rgba(139,92,246,.18), transparent 55%), linear-gradient(120deg,#0a1020 0%,#122a52 55%,#1a3a78 100%); border:1px solid rgba(139,92,246,.22); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07); } .ch-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative; z-index:1; } .ch-hero h1 { font-size:1.5rem; font-weight:800; letter-spacing:-.015em; margin:0; color:#fff; } .ch-hero .ch-sub { color:#9fb0da; font-size:.78rem; margin-top:3px; } .ch-hero .ch-tag { font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.12); color:#dfe7fb; padding:3px 8px; border-radius:6px; } .ch-hero .ch-tag.ok{ background:rgba(52,211,153,.2); color:#6ee7b7; } .ch-hero .ch-tag.warn{ background:rgba(251,191,36,.2); color:#fcd34d; } .btn-ghost { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:#dfe7fb; } .btn-ghost:hover { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.28); } .ch-hero-divider { height:1px; margin:16px 0 14px; position:relative; z-index:1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 15%,rgba(255,255,255,.14) 85%,transparent); } .ch-metrics { display:flex; flex-wrap:wrap; gap:14px 0; position:relative; z-index:1; } .ch-metric { flex:1 1 150px; min-width:130px; padding:0 20px; border-left:1px solid rgba(255,255,255,.1); } .ch-metric:first-child { border-left:none; padding-left:0; } .cm-label { font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8fa0c8; } .cm-value { font-size:1.4rem; font-weight:800; line-height:1.1; color:#fff; margin-top:3px; letter-spacing:-.01em; } .cm-sub { font-size:.68rem; color:#9fb0da; margin-top:2px; } .cm-ok{ color:#6ee7b7!important; } .cm-warn{ color:#fcd34d!important; } .cm-danger{ color:#fda4af!important; } .cm-bar { height:4px; border-radius:3px; background:rgba(255,255,255,.14); margin-top:8px; overflow:hidden; } .cm-bar > span { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#38bdf8,#818cf8); } /* ============================================================ PROJECT CHARTER — premium card system Base: "Refined Enterprise" instrument-panel shell (one card language) + grafts: phase-number qt-medallions, gradient progress bars, budget mini-bar, segmented risk strip, severity left-rails, and a single hero-tuned top line on the full-width feature card. DROP-IN: paste this whole block REPLACING the current "compact charter cards" section in static/css/app.css (lines ~598–675, i.e. `.charter-card` … `.cc-row .k`). The qt-* rules are reproduced VERBATIM inside so nothing is lost. Leave the `.cc-head-alert` rules (~519–527) untouched. All 9 header icons are styled IN PLACE via `.cc-head > .bi:first-child` — no span-wrapping required. ============================================================ */ /* ---- shared shell: raised, quietly premium "instrument panel" ---- */ .charter-card{ --cc:var(--accent); --cc-soft:var(--accent-soft); position:relative; background:linear-gradient(180deg,#ffffff 0%, #fbfcfe 100%); border:1px solid var(--line); border-radius:var(--radius); /* 16px, up from flat 14 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), /* 1px top highlight */ 0 1px 2px rgba(16,24,40,.04), /* contact shadow */ 0 8px 20px -12px rgba(16,24,40,.16); /* soft ambient lift */ margin-bottom:14px; overflow:hidden; transition:box-shadow .18s ease, border-color .18s ease; } .charter-card:hover{ border-color:#e0e6f1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -14px rgba(16,24,40,.22); } /* full-width Phase-timeline anchor: one elevation step higher + a single restrained top-accent line tuned to the hero's sky->blue glow */ .charter-card--feature{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.05), 0 16px 34px -16px rgba(16,24,40,.22); } .charter-card--feature::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--sky),var(--accent)); } /* ---- per-card accent (chip hue + hover wash). Darker hues chosen so the small chip icon holds AA contrast on its pale tint ---- */ .cc-accent-blue { --cc:#2563eb; --cc-soft:#eaf1fe; } .cc-accent-sky { --cc:#0284c7; --cc-soft:#e5f4fd; } .cc-accent-indigo { --cc:#6366f1; --cc-soft:#ecedfd; } .cc-accent-violet { --cc:#8b5cf6; --cc-soft:#f1ecfe; } .cc-accent-amber { --cc:#d97706; --cc-soft:#fbeed3; } .cc-accent-emerald { --cc:#059669; --cc-soft:#e2f5ed; } .cc-accent-teal { --cc:#0d9488; --cc-soft:#e0f4f1; } .cc-accent-rose { --cc:#e11d48; --cc-soft:#fce7ec; } .cc-accent-slate { --cc:#5b6b8c; --cc-soft:#edf0f6; } /* ---- header + soft-tinted icon chip (styled in place, no HTML wrap) ---- */ .cc-head{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); } .cc-head:not(.cc-head-alert){ background:linear-gradient(180deg, rgba(248,250,253,.6), rgba(255,255,255,0)); } /* leading icon -> soft chip; (0,3,0) beats legacy `.cc-head-alert i` (0,1,1) and `.cc-attn-ic` display (0,2,0), so the chip wins while the pulse keeps */ .cc-head > .bi:first-child{ width:26px; height:26px; flex:none; border-radius:8px; display:inline-grid; place-items:center; font-size:.9rem; line-height:1; color:var(--cc); background:var(--cc-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(15,23,42,.04), 0 1px 2px rgba(16,24,40,.06); transition:transform .18s cubic-bezier(.2,.75,.3,1.2), box-shadow .18s ease; } .charter-card:hover .cc-head > .bi:first-child{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(15,23,42,.05), 0 3px 7px -1px rgba(16,24,40,.12); } .cc-head .cc-link{ margin-left:auto; font-size:.68rem; text-transform:none; letter-spacing:0; font-weight:600; text-decoration:none; color:var(--cc); } .cc-head .cc-count{ margin-left:auto; } .cc-body{ padding:10px 12px; } /* Notice board — frozen height, scrolls once full (like the project chat) */ .cc-body.notice-scroll{ max-height:360px; overflow-y:auto; } .cc-body.notice-scroll::-webkit-scrollbar{ width:8px; } .cc-body.notice-scroll::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18); border-radius:8px; } /* ============ Project team chat — WhatsApp-style, near-real-time ============ */ .chat-card .cc-head{ } .chat-live{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0d9488; } .chat-live-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:chatLive 1.8s ease-in-out infinite; } @keyframes chatLive{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .chat-scroll{ height:340px; overflow-y:auto; /* frozen size — always scrolls when full */ padding:12px 12px 8px; display:flex; flex-direction:column; gap:6px; background:#ece5dd; /* messenger wallpaper */ background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px), radial-gradient(rgba(15,23,42,.028) 1px, transparent 1px); background-size:22px 22px, 22px 22px; background-position:0 0, 11px 11px; scroll-behavior:smooth; } /* Pin the thread to the bottom (newest visible) while keeping the top fully scrollable — auto margin collapses to 0 once messages overflow the box. */ .chat-scroll > :first-child{ margin-top:auto; } .chat-scroll::-webkit-scrollbar{ width:8px; } .chat-scroll::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18); border-radius:8px; } .chat-msg{ display:flex; gap:7px; max-width:90%; align-items:flex-end; } .chat-msg:not(.me){ align-self:flex-start; } .chat-msg.me{ align-self:flex-end; flex-direction:row-reverse; } .chat-avatar{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.6rem; letter-spacing:.3px; background:var(--a,#94a3b8); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(16,24,40,.18); } .chat-bubble{ position:relative; padding:5px 9px 4px; border-radius:11px; background:#fff; box-shadow:0 1px 1.5px rgba(16,24,40,.14); font-size:.8rem; line-height:1.34; color:var(--ink); min-width:58px; max-width:100%; } .chat-msg:not(.me) .chat-bubble{ border-top-left-radius:3px; } /* tail notch */ .chat-msg.me .chat-bubble{ background:#d9fdd3; border-top-right-radius:3px; } .chat-sender{ font-weight:700; font-size:.66rem; margin-bottom:1px; line-height:1.1; } .chat-text{ white-space:pre-wrap; overflow-wrap:anywhere; } .chat-text a{ color:var(--accent-600); } .chat-time{ font-size:.58rem; color:rgba(15,23,42,.45); text-align:right; margin-top:1px; font-variant-numeric:tabular-nums; user-select:none; } .chat-empty{ margin:auto; text-align:center; color:var(--ink-soft); font-size:.76rem; line-height:1.4; padding:26px 10px; } .chat-empty i{ font-size:1.7rem; display:block; margin-bottom:8px; opacity:.5; } .chat-input{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-top:1px solid var(--line); background:#fff; } .chat-field{ flex:1 1 auto; min-width:0; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:.82rem; background:#f5f7fb; color:var(--ink); outline:none; transition:border-color .14s ease, box-shadow .14s ease, background .14s ease; } .chat-field::placeholder{ color:var(--ink-soft); } .chat-field:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); } .chat-send{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; border:none; display:inline-grid; place-items:center; color:#fff; font-size:.92rem; cursor:pointer; background:linear-gradient(135deg,#25d366,#128c7e); /* WhatsApp green */ box-shadow:0 3px 9px rgba(18,140,126,.38), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .12s ease, filter .12s ease; } .chat-send:hover{ transform:translateY(-1px); filter:brightness(1.06); } .chat-send:active{ transform:translateY(0); } .chat-send:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* critical state: chip follows the red alert header (rule placed AFTER the base chip so it wins on equal specificity); pulse animation still applies */ .cc-head-alert > .bi:first-child{ color:var(--danger); background:var(--danger-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(225,29,72,.18), 0 1px 2px rgba(225,29,72,.14); } /* ---- Needs attention: severity left-rail + ringed icon squares ---- */ .charter-attn{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px; border-radius:10px; text-decoration:none; transition:background .12s ease, transform .12s ease; } .charter-attn::before{ content:""; position:absolute; left:4px; top:8px; bottom:8px; width:3px; border-radius:2px; background:#cbd3e1; } .charter-attn.danger::before{ background:var(--danger); } .charter-attn.warn::before { background:var(--warn); } .charter-attn.info::before { background:var(--accent); } .charter-attn:hover{ background:var(--cc-soft); transform:translateX(2px); } .charter-attn .a-txt{ flex:1 1 auto; color:var(--ink); font-size:.86rem; font-weight:500; } .charter-ico{ width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; font-size:.8rem; } .charter-ico.danger{ background:var(--danger-soft); color:var(--danger); box-shadow:inset 0 0 0 1px rgba(225,29,72,.18); } .charter-ico.warn{ background:var(--warn-soft); color:var(--warn); box-shadow:inset 0 0 0 1px rgba(217,119,6,.18); } .charter-ico.info{ background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(37,99,235,.16); } /* ---- Phase progress: qt-echo medallion number chips + gradient bars ---- */ .charter-phase{ display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:9px; text-decoration:none; transition:background .12s ease; } .charter-phase:hover{ background:var(--cc-soft); } .charter-phase-current{ background:var(--cc-soft); } .charter-phase-n{ width:24px; height:24px; flex:none; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:.72rem; color:#64748b; background:linear-gradient(155deg,#f2f5fa,#dde4ee); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(16,24,40,.09), 0 1px 1px rgba(16,24,40,.05); } .charter-phase-n.current{ color:#fff; background:linear-gradient(155deg,var(--sky) 8%, var(--accent-600) 92%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.22), 0 4px 9px -3px rgba(37,99,235,.55); } .charter-phase-n.done{ color:#fff; background:linear-gradient(155deg,#34d399 8%, #059669 92%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 5px rgba(0,0,0,.22), 0 4px 9px -3px rgba(5,150,105,.5); } .charter-phase .progress{ border-radius:99px; background:#eef1f7; box-shadow:inset 0 1px 1px rgba(16,24,40,.06); overflow:hidden; } .charter-phase .progress-bar{ border-radius:99px; } .charter-phase .progress-bar.bg-primary{ background:linear-gradient(90deg,var(--sky),var(--accent))!important; } .charter-phase .progress-bar.bg-success{ background:linear-gradient(90deg,#34d399,var(--emerald))!important; } .charter-phase .progress-bar.bg-secondary{ background:linear-gradient(90deg,#d3dae6,#aab4c6)!important; } /* ---- Premium Quality-tools tiles — glossy 3D medallions (VERBATIM, kept) ---- */ .qt-tool { display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 4px 10px; border-radius:15px; text-decoration:none; border:1px solid transparent; transition:background .2s ease, border-color .2s ease; } .qt-tool:hover { background:linear-gradient(180deg, rgba(148,163,184,.10), rgba(148,163,184,0)); border-color:var(--line); } .qt-ico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:1.4rem; line-height:1; background:linear-gradient(155deg, var(--qt-c1) 8%, var(--qt-c2) 92%); box-shadow: 0 7px 15px -4px var(--qt-shadow), 0 2px 4px rgba(16,24,40,.14), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.22); transition:transform .22s cubic-bezier(.2,.75,.3,1.45), box-shadow .22s ease; will-change:transform; } .qt-ico i { filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.3)); } .qt-tool:hover .qt-ico { transform:translateY(-4px) scale(1.22) rotate(-4deg); box-shadow: 0 16px 26px -7px var(--qt-shadow), 0 4px 8px rgba(16,24,40,.18), inset 0 2px 0 rgba(255,255,255,.7), inset 0 -4px 8px rgba(0,0,0,.25); } .qt-tool:active .qt-ico { transform:translateY(-1px) scale(1.1); } .qt-count { font-weight:800; font-size:1.15rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .qt-label { font-size:.64rem; color:var(--ink-soft); text-align:center; line-height:1.2; } .qt-tool:hover .qt-count { color:var(--qt-c2); } .qt-fmea { --qt-c1:#fbbf24; --qt-c2:#f59e0b; --qt-shadow:rgba(245,158,11,.55); } .qt-cplan { --qt-c1:#34d399; --qt-c2:#059669; --qt-shadow:rgba(5,150,105,.5); } .qt-ppap { --qt-c1:#60a5fa; --qt-c2:#2563eb; --qt-shadow:rgba(37,99,235,.5); } .qt-msa { --qt-c1:#c084fc; --qt-c2:#7c3aed; --qt-shadow:rgba(124,58,237,.5); } .qt-spc { --qt-c1:#22d3ee; --qt-c2:#0891b2; --qt-shadow:rgba(8,145,178,.5); } @media (prefers-reduced-motion: reduce) { .qt-tool:hover .qt-ico { transform:scale(1.08); } } /* ---- Notice board: accent hover wash + haloed semantic dots ---- */ .charter-notice{ display:flex; gap:10px; text-decoration:none; padding:7px 8px; border-radius:9px; transition:background .12s ease; } .charter-notice:hover{ background:var(--cc-soft); } .charter-notice:hover .cn-title{ color:var(--cc); } .charter-dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:none; background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.14); } .charter-dot-warning{ background:var(--warn); box-shadow:0 0 0 3px rgba(217,119,6,.14); } .charter-dot-success{ background:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.14); } .charter-dot-danger { background:var(--danger); box-shadow:0 0 0 3px rgba(225,29,72,.14); } .charter-dot-info { background:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.14); } .charter-unread::after{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cc); margin-left:6px; vertical-align:middle; } /* ---- Budget mini spend-bar (actual of approved) ---- */ .cc-minibar{ height:7px; border-radius:99px; margin-top:10px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 1px 1px rgba(16,24,40,.06); } .cc-minibar > span{ display:block; height:100%; max-width:100%; border-radius:99px; background:linear-gradient(90deg,#34d399,var(--emerald)); } .cc-minibar.high > span{ background:linear-gradient(90deg,#fbbf24,var(--amber)); } /* ≥90% consumed: caution, not a "good" green */ .cc-minibar.over > span{ background:linear-gradient(90deg,var(--amber),var(--danger)); } /* Amber value text lifted off the white-on-gold ~1.6:1 floor (auditor figures) */ .charter-card .text-warning{ color:#b45309 !important; } /* ---- Risk assessment segmented profile strip (H / M / L) ---- */ .cc-riskbar{ display:flex; gap:2px; height:8px; margin:6px 0 2px; border-radius:99px; overflow:hidden; background:#eef1f7; box-shadow:inset 0 1px 1px rgba(16,24,40,.06); } .cc-riskbar > span{ display:block; min-width:0; } .cc-riskbar .rs-h{ background:linear-gradient(90deg,#fb7185,var(--danger)); } .cc-riskbar .rs-m{ background:linear-gradient(90deg,#fbbf24,var(--amber)); } .cc-riskbar .rs-l{ background:linear-gradient(90deg,#34d399,var(--emerald)); } /* ---- key/value rows + opt-in hairline list (Budget, Key info, Core team) ---- */ .cc-row{ display:flex; justify-content:space-between; align-items:center; font-size:.8rem; padding:3px 0; } .cc-row .k{ color:var(--ink-soft); } .cc-rows .cc-row{ padding:6px 0; border-top:1px solid var(--line); } .cc-rows .cc-row:first-child{ border-top:0; padding-top:2px; } .cc-rows .cc-row .v{ font-weight:600; color:var(--ink); } /* ---- shared focus-visible rings (adopt the card accent) ---- */ .charter-attn:focus-visible, .charter-phase:focus-visible, .charter-notice:focus-visible, .qt-tool:focus-visible{ outline:2px solid var(--cc); outline-offset:2px; border-radius:10px; } /* ---- reduced motion: keep all depth, drop movement ---- */ @media (prefers-reduced-motion: reduce){ .charter-card, .cc-head > .bi:first-child, .charter-attn, .charter-phase, .charter-notice{ transition:none; } .charter-card:hover .cc-head > .bi:first-child{ transform:none; } .charter-attn:hover{ transform:none; } } /* ---------- FMEA AIAG-VDA banded worksheet (premium · frozen header + columns) ---------- */ /* Fixed-viewport grid so the header AND the Op/Step columns stay put through the long horizontal scroll — the single biggest UX win for hours-long editing. */ .fmea-scroll { max-height: calc(100vh - 250px); overflow: auto; border-radius: 0 0 var(--radius) var(--radius); } .fmea-scroll::-webkit-scrollbar { width: 12px; height: 12px; } .fmea-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } .fmea-scroll::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.6); background-clip: content-box; } .fmea-grid { border-collapse: separate; border-spacing: 0; } .fmea-grid > * > tr > td, .fmea-grid > * > tr > th { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* frozen header (two rows) */ .fmea-grid thead th { position: sticky; z-index: 3; } .fmea-groups th { top: 0; height: 30px; color: #fff; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .62rem; text-align: center; padding: .42rem .5rem; } .fmea-cols th { top: 30px; font-weight: 700; vertical-align: bottom; line-height: 1.18; font-size: .6rem; padding: .42rem .5rem; text-transform: uppercase; letter-spacing: .02em; } /* band palette — CSS-var driven so Midnight can retint it */ .fmea-grp-structure { background: var(--fm-struct, #475569); } .fmea-grp-function { background: var(--fm-func, #2563eb); } .fmea-grp-failure { background: var(--fm-fail, #be123c); } .fmea-grp-risk { background: var(--fm-risk, #b45309); } .fmea-grp-opt { background: var(--fm-opt, #047857); } .fmea-cols th.fmea-grp-structure { background: var(--fm-struct-s, #eef2f7); color: #334155; } .fmea-cols th.fmea-grp-function { background: var(--fm-func-s, #eaf1fe); color: #1d4ed8; } .fmea-cols th.fmea-grp-failure { background: var(--fm-fail-s, #fdeaef); color: #be123c; } .fmea-cols th.fmea-grp-risk { background: var(--fm-risk-s, #fdf3e3); color: #92400e; } .fmea-cols th.fmea-grp-opt { background: var(--fm-opt-s, #e7f7ef); color: #047857; } .fmea-op-h { background: #1e293b; color: #fff; } /* frozen first columns: Op (52px) + Process Step */ .fmea-sticky-op { position: sticky; left: 0; z-index: 2; background: var(--card); } .fmea-sticky-step { position: sticky; left: 52px; z-index: 2; background: var(--card); box-shadow: 6px 0 8px -6px rgba(16,24,40,.28); } .fmea-grid thead th.fmea-sticky-op, .fmea-grid thead th.fmea-sticky-step { z-index: 6; } /* active row: light up the whole wide line so you never lose your place */ .fmea-grid tbody tr:hover > td { background: var(--fm-hover, #f4f8ff); } .fmea-grid tbody tr:hover > .fmea-sticky-op, .fmea-grid tbody tr:hover > .fmea-sticky-step { background: #ecf2fe; } .fmea-grid tbody tr:focus-within > td { background: var(--fm-hover, #f4f8ff); } .fmea-grid tbody tr:focus-within > .fmea-sticky-op, .fmea-grid tbody tr:focus-within > .fmea-sticky-step { background: #ecf2fe; } .fmea-grid .cell-input { min-height: 26px; } /* Midnight retint */ :root[data-theme="midnight"]{ --fm-struct:#3a4a68; --fm-func:#1e4fb0; --fm-fail:#8f2540; --fm-risk:#7a4a12; --fm-opt:#0f6b4a; --fm-struct-s:#1c2740; --fm-func-s:#152238; --fm-fail-s:#331821; --fm-risk-s:#33260c; --fm-opt-s:#0f2a20; --fm-hover:#1a2540; } [data-theme="midnight"] .fmea-cols th.fmea-grp-structure { color:#cbd6ea; } [data-theme="midnight"] .fmea-cols th.fmea-grp-function { color:#8fb4ff; } [data-theme="midnight"] .fmea-cols th.fmea-grp-failure { color:#fb7185; } [data-theme="midnight"] .fmea-cols th.fmea-grp-risk { color:#fbbf24; } [data-theme="midnight"] .fmea-cols th.fmea-grp-opt { color:#34d399; } [data-theme="midnight"] .fmea-grid tbody tr:hover > .fmea-sticky-op, [data-theme="midnight"] .fmea-grid tbody tr:hover > .fmea-sticky-step { background:#1e2941; } /* Auto-growing free-text cells: the row height follows the words entered */ .fmea-grid tbody td { vertical-align: top; } textarea.cell-grow { resize: none; overflow: hidden; min-height: 26px; height: 26px; line-height: 1.34; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; display: block; } /* Textarea knowledge-base autocomplete (datalist doesn't bind to