/* ============================================================ World Gate CRM — visual system. Token layers, in order: 1. Brand/structural — ink/paper/line/muted/card/surfaces/accent. 2. Elevation + glow — panel gradients, --line-lit, --accent-lit, --glow-*. These are what give the UI its depth; in light mode they resolve to soft shadows, in dark mode to luminous edges. 3. Semantic — ok/warn/danger/badge-*. Untouched in meaning: they encode status, not brand, so they stay green/amber/red in both themes rather than being pulled toward blue. Every surface is built from these tokens only — no hard-coded colors outside the :root blocks, so the light/dark toggle stays honest. ============================================================ */ :root{ /* Brand navy (matches the logo mark, #0C1721) drives --accent in light mode; structural neutrals are cool-toned to sit alongside it. */ --ink:#0d1c29; --paper:#eef2f7; --line:#dde5ec; --muted:#5b6b78; --ink-dim:#3d5162; --accent:#0c1721; --accent-hover:#1c2e3f; --ok:#2f6b3e; --warn:#b8860b; --danger:#a12b2b; --card:#ffffff; --surface-hover:#e7edf2; --surface-alt:#eef2f5; --row-hover:#f2f7fb; --input-bg:#ffffff; --overlay-bg:rgba(12,23,33,.45); --shadow:rgba(12,23,33,.10); --highlight-bg:#fdf1d6; --badge-new-bg:#e8e6f7; --badge-new-fg:#4b3fa0; --badge-progress-bg:#e3f0e6; --badge-exit-bg:#f7e3e3; --badge-mid-bg:#fdf1d6; /* Elevation + glow. In light mode the "glow" is a soft ambient shadow rather than a luminous ring — the same tokens, tuned so the visual language reads correctly on a bright ground. */ --accent-lit:#2f7fbc; --line-lit:#c4d3e0; --panel-a:#ffffff; --panel-b:#f7fafc; --rail-a:#ffffff; --rail-b:#f4f8fb; --glow:rgba(47,127,188,.16); --glow-strong:rgba(47,127,188,.24); --elev-1:0 1px 2px rgba(12,23,33,.06), 0 1px 8px rgba(12,23,33,.04); --elev-2:0 2px 6px rgba(12,23,33,.07), 0 12px 28px rgba(12,23,33,.07); --flare-a:rgba(47,127,188,.13); --flare-b:rgba(80,140,200,.10); --grid-line:rgba(30,70,110,.045); --sheen:rgba(255,255,255,.7); /* Indicator tints. On a light ground the "lit" variant is the same saturated hue as its base — the glow effect that separates them in dark mode has nothing to sit on here. */ --ok-lit:#2f6b3e; --warn-lit:#8a6508; --danger-lit:#a12b2b; --new-lit:#4b3fa0; --r-sm:8px; --r:12px; --r-lg:16px; --rail-w:232px; --font:'Inter',system-ui,-apple-system,sans-serif; --display:'Rajdhani','Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace; color-scheme:light; } /* Follows the OS/browser preference by default; an explicit toggle click stamps data-theme on and wins over this. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#eef2f5; --paper:#06101a; --line:#1e3145; --muted:#7e8fa0; --ink-dim:#a9bac8; --accent:#4a90c2; --accent-hover:#5fa3d6; --ok:#4a9c5c; --warn:#d4a017; --danger:#e05252; --card:#0e1f2d; --surface-hover:#16293b; --surface-alt:#0b1a26; --row-hover:#122536; --input-bg:#0b1a26; --overlay-bg:rgba(0,0,0,.66); --shadow:rgba(0,0,0,.5); --highlight-bg:#4a3c1f; --badge-new-bg:#332f52; --badge-new-fg:#b3aeff; --badge-progress-bg:#1f3d28; --badge-exit-bg:#4a2323; --badge-mid-bg:#4a3c1f; --accent-lit:#6fb2e0; --line-lit:#2e4a66; --panel-a:rgba(14,31,45,.92); --panel-b:rgba(9,22,34,.92); --rail-a:rgba(13,28,41,.94); --rail-b:rgba(8,20,32,.94); --glow:rgba(111,178,224,.22); --glow-strong:rgba(111,178,224,.38); --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 8px 30px rgba(0,0,0,.45); --flare-a:rgba(74,144,194,.20); --flare-b:rgba(52,88,140,.20); --grid-line:rgba(120,170,215,.045); --sheen:rgba(111,178,224,.5); --ok-lit:#5fbf74; --warn-lit:#e8b93a; --danger-lit:#f06b6b; --new-lit:#b3aeff; color-scheme:dark; } } :root[data-theme="dark"]{ --ink:#eef2f5; --paper:#06101a; --line:#1e3145; --muted:#7e8fa0; --ink-dim:#a9bac8; --accent:#4a90c2; --accent-hover:#5fa3d6; --ok:#4a9c5c; --warn:#d4a017; --danger:#e05252; --card:#0e1f2d; --surface-hover:#16293b; --surface-alt:#0b1a26; --row-hover:#122536; --input-bg:#0b1a26; --overlay-bg:rgba(0,0,0,.66); --shadow:rgba(0,0,0,.5); --highlight-bg:#4a3c1f; --badge-new-bg:#332f52; --badge-new-fg:#b3aeff; --badge-progress-bg:#1f3d28; --badge-exit-bg:#4a2323; --badge-mid-bg:#4a3c1f; --accent-lit:#6fb2e0; --line-lit:#2e4a66; --panel-a:rgba(14,31,45,.92); --panel-b:rgba(9,22,34,.92); --rail-a:rgba(13,28,41,.94); --rail-b:rgba(8,20,32,.94); --glow:rgba(111,178,224,.22); --glow-strong:rgba(111,178,224,.38); --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 8px 30px rgba(0,0,0,.45); --flare-a:rgba(74,144,194,.20); --flare-b:rgba(52,88,140,.20); --grid-line:rgba(120,170,215,.045); --sheen:rgba(111,178,224,.5); --ok-lit:#5fbf74; --warn-lit:#e8b93a; --danger-lit:#f06b6b; --new-lit:#b3aeff; color-scheme:dark; } *{box-sizing:border-box;} /* The hidden attribute always hides, even on elements whose class sets a display value. */ [hidden]{display:none!important;} body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);} /* Ambient ground — two soft color washes plus a faint grid, masked so it fades out before the page edges. Fixed and pointer-events:none, so it never scrolls with or intercepts content. */ body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;} body::before{ top:-25%;left:-12%;width:72%;height:85%; background:radial-gradient(ellipse at center,var(--flare-a),transparent 62%); filter:blur(30px); } body::after{ bottom:-32%;right:-14%;width:68%;height:85%; background:radial-gradient(ellipse at center,var(--flare-b),transparent 64%); filter:blur(34px); } /* Faint blueprint grid over the flares, masked to fade out before the edges so it reads as texture rather than as a drawn table. On because body's two pseudo-elements are already the colour washes. */ html::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%); mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%); } #login-view,#app-shell{position:relative;z-index:1;} /* ---------- login ---------- */ #login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;} .login-card{ background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r-lg);padding:2.5rem;width:360px;max-width:100%; box-shadow:var(--elev-2);backdrop-filter:blur(8px);position:relative;overflow:hidden; } .login-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--sheen),transparent); } .login-logo{display:block;width:180px;height:auto;margin:0 auto .75rem;} .login-card p{color:var(--muted);font-size:.85rem;margin:0 0 1.5rem;text-align:center;} a{color:var(--accent-lit);text-decoration-color:color-mix(in srgb,var(--accent-lit) 40%,transparent);} a:hover{color:var(--accent-hover);} .password-field{position:relative;} .password-field input{padding-right:2.3rem;} .password-toggle{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);width:1.8rem;height:1.8rem;border:none;background:transparent;color:var(--muted);} .password-toggle:hover{color:var(--ink);background:transparent;} /* ---------- form controls ---------- */ label{display:block;font-size:.78rem;color:var(--muted);margin:.75rem 0 .3rem;font-weight:500;} input,select,textarea{ width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm); font-family:inherit;font-size:.88rem;background:var(--input-bg);color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease; } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent-lit);box-shadow:0 0 0 3px var(--glow); } textarea{resize:vertical;min-height:70px;} button{cursor:pointer;font-family:inherit;} .btn{ background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000)); color:#fff;border:1px solid transparent;padding:.55rem 1rem;border-radius:var(--r-sm); font-size:.85rem;font-weight:500;transition:filter .15s ease,box-shadow .15s ease,background .15s ease; box-shadow:0 0 0 0 transparent; } .btn:hover{background:linear-gradient(150deg,var(--accent-hover),var(--accent));box-shadow:0 0 18px var(--glow);} .btn:active{filter:brightness(.94);} .btn.secondary{background:var(--card);color:var(--ink);border:1px solid var(--line);} .btn.secondary:hover{background:var(--surface-hover);border-color:var(--line-lit);box-shadow:none;} .btn.danger{background:linear-gradient(150deg,var(--danger),color-mix(in srgb,var(--danger) 80%,#000));} .btn.danger:hover{background:var(--danger);filter:brightness(1.05);box-shadow:0 0 18px rgba(224,82,82,.28);} .btn.small{padding:.32rem .62rem;font-size:.78rem;} .icon-btn{ background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm); width:2.1rem;height:2.1rem;display:inline-flex;align-items:center;justify-content:center; font-size:.95rem;line-height:1;transition:all .15s ease; } .icon-btn:hover{background:var(--surface-hover);border-color:var(--line-lit);} .btn:focus-visible,.icon-btn:focus-visible,.subtab:focus-visible,.page-btn:focus-visible,#main-nav button:focus-visible{ outline:2px solid var(--accent-lit);outline-offset:2px; } .error-msg{color:var(--danger);font-size:.8rem;margin-top:.5rem;} /* ---------- app shell: left rail + stage ---------- */ #app-shell{display:none;min-height:100vh;} #app-shell.ready{display:block;} .shell-body{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);align-items:start;} /* --freeze-h is the freeze banner's height (0 when not frozen), kept current by freeze.js, so the rail and top bar sit below the banner instead of the rail's bottom — who is signed in, Sign out — being pushed off the screen. */ .rail{ position:sticky;top:var(--freeze-h,0px);height:calc(100vh - var(--freeze-h,0px)); display:flex;flex-direction:column;gap:1.4rem; padding:1.4rem 0 1.1rem; border-right:1px solid var(--line); background:linear-gradient(180deg,var(--rail-a),var(--rail-b)); backdrop-filter:blur(8px); } .rail-logo{padding:0 1.25rem;} .rail-logo .brand-logo-header{display:block;width:150px;height:auto;} #main-nav{display:flex;flex-direction:column;gap:1.15rem;overflow-y:auto;padding-bottom:.5rem;} .rail-group{display:flex;flex-direction:column;gap:.15rem;padding:0 .7rem;} .rail-label{ font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); padding:0 .55rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.55rem; } .rail-label::after{content:"";flex:1;height:1px;background:var(--line);} #main-nav button{ display:flex;align-items:center;gap:.65rem;width:100%;text-align:left; padding:.52rem .55rem;border-radius:var(--r-sm);border:1px solid transparent; background:transparent;color:var(--ink-dim);font-size:.85rem;font-weight:500; position:relative;transition:background .16s ease,color .16s ease,border-color .16s ease; } #main-nav button svg{flex:none;opacity:.72;} #main-nav button:hover{background:var(--surface-hover);color:var(--ink);} #main-nav button.active{ background:linear-gradient(90deg,var(--glow),transparent); border-color:color-mix(in srgb,var(--accent-lit) 34%,transparent); color:var(--ink);font-weight:600; } #main-nav button.active svg{opacity:1;color:var(--accent-lit);} #main-nav button.active::before{ content:"";position:absolute;left:-.7rem;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0; background:var(--accent-lit);box-shadow:0 0 12px var(--accent-lit); } .rail-foot{margin-top:auto;padding:.9rem 1rem 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.7rem;} .rail-who{ display:flex;align-items:center;gap:.6rem;min-width:0;width:100%;text-align:left; background:transparent;border:1px solid transparent;border-radius:var(--r-sm);padding:.3rem .35rem;margin:-.3rem -.35rem; color:inherit;font:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease; } .rail-who:hover,.rail-who.active{background:var(--surface-hover);border-color:var(--line);} .rail-avatar{overflow:hidden;} .rail-avatar .avatar-img{width:100%;height:100%;object-fit:cover;display:block;} .rail-avatar{ width:32px;height:32px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--accent-lit) 55%,transparent),color-mix(in srgb,var(--accent) 45%,transparent)); border:1px solid color-mix(in srgb,var(--accent-lit) 35%,transparent); font-family:var(--display);font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.02em; } .rail-who-text{min-width:0;} #who-name{display:block;font-size:.79rem;font-weight:600;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #who-role{display:block;font-family:var(--mono);font-size:.58rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;} .rail-foot .btn{width:100%;} /* ---------- stage + top bar ---------- */ .stage{min-width:0;display:flex;flex-direction:column;} .topbar{ display:flex;align-items:center;gap:1rem; padding:.7rem 2rem;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--card) 55%,transparent);backdrop-filter:blur(8px); position:sticky;top:var(--freeze-h,0px);z-index:40; } .topbar::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--sheen),transparent);} .bar-tools{margin-left:auto;display:flex;align-items:center;gap:.5rem;} /* Standing counts for the states someone has to act on. Refreshed on view changes rather than polled — see refreshStatusChips(). */ /* Which branch you are working in. People who belong to one branch see its name; the CEO and the sales director switch between branches and the company view. */ /* Master Analytics: the branches side by side. */ .analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin-bottom:1.5rem;} .analytics-card .panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;} .analytics-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .5rem;} .analytics-figures div{display:flex;flex-direction:column;gap:.15rem;} .analytics-n{font-family:var(--mono);font-size:1.3rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;} .analytics-heading{font-size:.9rem;margin:1.5rem 0 .6rem;} .analytics-total td{border-top:1px solid var(--line);font-variant-numeric:tabular-nums;} /* A programme that has ended: kept as a record, plainly not on offer. */ .program-ended td{opacity:.55;} .check-row{display:flex;align-items:center;gap:.5rem;font-weight:400;} .check-row input{width:auto;margin:0;} .branch-bar{display:flex;align-items:center;gap:.45rem;padding-right:1rem;margin-right:.35rem;border-right:1px solid var(--line);} .branch-bar:empty{display:none;} .branch-tag{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);} .branch-pick{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .branch-select{font-size:.78rem;padding:.25rem 1.5rem .25rem .5rem;width:auto;min-width:9.5rem;margin:0;} .status-row{display:flex;align-items:center;gap:1.05rem;flex-wrap:wrap;} .stat-chip{display:flex;align-items:center;gap:.45rem;font-size:.75rem;color:var(--ink-dim);white-space:nowrap;} .stat-chip b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;} .dot{width:7px;height:7px;border-radius:50%;flex:none;} .dot.new{background:var(--new-lit);box-shadow:0 0 9px var(--new-lit);} .dot.warn{background:var(--warn-lit);box-shadow:0 0 9px var(--warn-lit);} .dot.dan{background:var(--danger-lit);box-shadow:0 0 9px var(--danger-lit);animation:chip-pulse 1.8s ease-in-out infinite;} @keyframes chip-pulse{0%,100%{opacity:1;}50%{opacity:.45;}} main{padding:1.5rem 2rem 2.5rem;max-width:1800px;margin:0 auto;width:100%;} /* ---------- view chrome ---------- */ .view-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.1rem;flex-wrap:wrap;} .view-header h2{margin:0;font-family:var(--display);font-size:2rem;font-weight:700;letter-spacing:.02em;line-height:1.05;} /* Small mono kicker above the page title — set by each view via data-eyebrow so it needs no extra markup in every render function. */ .view-header .eyebrow{ font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent-lit);display:flex;align-items:center;gap:.5rem;margin-bottom:.28rem; } .view-header .eyebrow::before{content:"";width:16px;height:1px;background:var(--accent-lit);box-shadow:0 0 8px var(--accent-lit);} .subtabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.15rem;flex-wrap:wrap;padding:0 .2rem;} .subtab{ background:transparent;border:none;border-bottom:2px solid transparent; padding:.55rem .8rem;font-size:.82rem;color:var(--muted);margin-bottom:-1px; font-weight:500;transition:color .15s ease;display:inline-flex;align-items:center;gap:.4rem; } .subtab:hover{color:var(--ink-dim);} .subtab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent-lit);text-shadow:0 0 18px var(--glow);} .subtab .count{ font-family:var(--mono);font-size:.62rem;padding:.06rem .32rem;border-radius:4px; background:var(--surface-hover);border:1px solid var(--line);color:var(--ink-dim); } .subtab.active .count{background:var(--glow);border-color:color-mix(in srgb,var(--accent-lit) 40%,transparent);color:var(--accent-lit);} .filter-bar{ display:flex;gap:.55rem;margin-bottom:1.1rem;flex-wrap:wrap;padding:.85rem 1rem; background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--elev-1); } .filter-bar input{width:220px;} .filter-bar select{width:auto;min-width:140px;} .filter-bar .btn{white-space:nowrap;} /* Grid, not flex space-between: with 1fr/auto/1fr columns the middle (page-nav) is genuinely centered regardless of how wide the size selector or count text on either side happen to be. */ .pagination{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-top:1.25rem; padding:.75rem 1rem;background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--elev-1); } .page-size-select{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);justify-self:start;} .page-size-select select{width:auto;padding:.3rem .5rem;font-size:.8rem;} .page-size-select label{margin:0;} .page-nav{display:flex;align-items:center;gap:.25rem;justify-self:center;} .page-btn{ min-width:2.1rem;padding:.3rem .5rem;border:1px solid var(--line);background:var(--card); color:var(--ink);border-radius:7px;font-family:var(--mono);font-size:.7rem;line-height:1; display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease; } .page-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--line-lit);} .page-btn:disabled{opacity:.35;cursor:not-allowed;} .page-btn.page-num.active{ background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000)); border-color:color-mix(in srgb,var(--accent-lit) 45%,transparent);color:#fff;font-weight:600; box-shadow:0 0 14px var(--glow); } .page-ellipsis{color:var(--muted);padding:0 .3rem;font-size:.78rem;} .page-count{font-family:var(--mono);font-size:.66rem;color:var(--muted);white-space:nowrap;justify-self:end;} #leads-table-wrap.loading{opacity:.55;pointer-events:none;transition:opacity .1s ease;} /* ---------- notifications ---------- */ .notif-bell-wrap{position:relative;} .notif-bell{position:relative;} .notif-badge{ position:absolute;top:-.3rem;right:-.3rem;min-width:1.1rem;height:1.1rem;padding:0 .25rem; border-radius:999px;background:var(--danger);color:#fff;font-size:.65rem;font-weight:700; display:inline-flex;align-items:center;justify-content:center;line-height:1; border:1px solid var(--paper); } .notif-panel{ position:absolute;top:calc(100% + .5rem);right:0;width:320px;max-height:400px;overflow-y:auto; background:linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--elev-2);z-index:50;backdrop-filter:blur(10px); } .notif-item{padding:.7rem .9rem;border-bottom:1px solid var(--line);cursor:pointer;} .notif-item:last-child{border-bottom:none;} .notif-item:hover{background:var(--surface-hover);} .notif-item.unread{background:var(--highlight-bg);} .notif-item.unread:hover{filter:brightness(0.97);} .notif-item p{margin:0 0 .25rem;font-size:.85rem;} .notif-item .notif-time{font-size:.72rem;color:var(--muted);} /* ---------- panels / cards ---------- */ .panel,.perf-card,.import-progress,.pipeline-detail-card,.dup-pair{ background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--elev-1); } /* Corner brackets — two pseudo-elements drawing an L at opposite corners, so a panel reads as a machined frame rather than a plain rounded box. Not overflow:hidden, or the brackets get clipped. */ .panel{position:relative;} .panel::before,.panel::after{ content:"";position:absolute;width:11px;height:11px;pointer-events:none; border-color:var(--line-lit);border-style:solid; } .panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-radius:var(--r) 0 0 0;} .panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-radius:0 0 var(--r) 0;} .panel-head{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.05rem;border-bottom:1px solid var(--line);} .panel-head h3{margin:0;font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;} .panel-head .panel-meta{margin-left:auto;font-family:var(--mono);font-size:.63rem;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;} .panel-body{padding:1.1rem;} .history-section{margin-top:1rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem;background:var(--surface-alt);} .history-section summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--ink);} .history-section .history-table{margin-top:.6rem;font-size:.8rem;} .history-table th,.history-table td{padding:.4rem .5rem;} .history-current{background:var(--highlight-bg);} .fam-search-result{padding:.55rem .1rem;border-bottom:1px solid var(--line);cursor:pointer;} .fam-search-result:last-child{border-bottom:none;} .fam-search-result:hover{background:var(--surface-hover);} .fam-search-result strong{font-size:.85rem;} /* ---------- performance ---------- */ .perf-card{padding:1.5rem;} /* Section heading with its own action on the right, rather than a button floating loose above the table it acts on. */ .freeze-history-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.75rem 0 .6rem;} .freeze-history-head h3{margin:0;} .perf-card h3{margin:0 0 1rem;font-size:1rem;} .perf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;} .perf-stat{ background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r); padding:.9rem 1rem;display:flex;flex-direction:column;position:relative;overflow:hidden; transition:border-color .18s ease,transform .18s ease; } .perf-stat:hover{border-color:var(--line-lit);transform:translateY(-2px);} .perf-stat-value{font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;} .perf-stat-label{font-family:var(--mono);font-size:.61rem;color:var(--muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.15em;min-height:1.9em;} /* No !important — JS (makeSparkline) sets an explicit pixel width/height after measuring, and !important here would silently win over it and reintroduce the pixelation bug this is sized around. */ .perf-sparkline{display:block;margin-top:.6rem;width:100%;height:28px;} .perf-insights{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem;} .perf-insight{background:var(--highlight-bg);border-left:3px solid var(--accent-lit);border-radius:var(--r-sm);padding:.6rem .85rem;font-size:.83rem;color:var(--ink);} .perf-chart-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .perf-chart-box{ background:linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line); border-radius:var(--r);padding:1.1rem;height:280px;position:relative;box-shadow:var(--elev-1); } .perf-chart-box-lg{height:320px;} th.sortable{cursor:pointer;user-select:none;} th.sortable:hover{color:var(--ink);} .perf-top-row{background:var(--highlight-bg);} .perf-top-row:hover{background:var(--highlight-bg);filter:brightness(0.97);} @media (max-width:900px){ .perf-chart-row{grid-template-columns:1fr;} } .contact-count-cell{display:flex;align-items:center;gap:.5rem;} .contact-count-cell .btn{padding:.15rem .45rem;font-size:.72rem;} .btn:disabled{opacity:.4;cursor:not-allowed;} .btn:disabled:hover{box-shadow:none;filter:none;} .btn.secondary:disabled:hover{background:var(--card);} /* ---------- tables ---------- */ table{ width:100%;border-collapse:separate;border-spacing:0; background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--elev-1); } th,td{text-align:left;padding:.58rem .75rem;border-bottom:1px solid var(--line);font-size:.81rem;} /* Data rows stay on one line and the table scrolls sideways instead — a wrapped phone number over three lines is much harder to scan than a horizontal scrollbar. Editing grids inside modals opt back out below, where wrapping long values is the whole point. */ tbody td{white-space:nowrap;vertical-align:middle;} .merge-table td,.mapping-table td,.module-grid td,.ov-table-wrap td{white-space:normal;} .table-scroll{overflow-x:auto;} /* The leads table has eleven columns and must fit the screen without a sideways scroll, so widths are fixed proportions of the viewport rather than whatever the widest value in each column happens to be. Anything too long for its share is clipped with an ellipsis and carries the full value in a title — a truncated email you can hover beats a column you cannot reach. */ .lead-table-scroll{ overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 23rem);min-height:20rem; border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); box-shadow:var(--elev-1); } /* The scroll box owns the frame. The table keeping its own overflow:hidden would make it the sticky header's scrollport, pinning the header to the table rather than to the top of the visible area — the same as not being sticky at all. */ .lead-table-scroll>table{table-layout:fixed;border:0;border-radius:0;overflow:visible;box-shadow:none;background:none;} .lead-table-scroll thead th{position:sticky;top:0;z-index:3;white-space:normal;} .lead-table-scroll td{overflow:hidden;text-overflow:ellipsis;} .lead-table-scroll th:nth-child(1),.lead-table-scroll td:nth-child(1){width:13%;} .lead-table-scroll th:nth-child(2),.lead-table-scroll td:nth-child(2){width:11%;} .lead-table-scroll th:nth-child(3),.lead-table-scroll td:nth-child(3){width:12%;} .lead-table-scroll th:nth-child(4),.lead-table-scroll td:nth-child(4){width:11%;white-space:normal;} .lead-table-scroll th:nth-child(5),.lead-table-scroll td:nth-child(5){width:8%;} .lead-table-scroll th:nth-child(6),.lead-table-scroll td:nth-child(6){width:8%;} .lead-table-scroll th:nth-child(7),.lead-table-scroll td:nth-child(7){width:8%;} .lead-table-scroll th:nth-child(8),.lead-table-scroll td:nth-child(8){width:9%;} .lead-table-scroll th:nth-child(9),.lead-table-scroll td:nth-child(9){width:5%;} .lead-table-scroll th:nth-child(10),.lead-table-scroll td:nth-child(10){width:7.5%;} .lead-table-scroll th:nth-child(11),.lead-table-scroll td:nth-child(11){width:7.5%;} /* The name sits next to its severity stripe, so the truncation has to happen on the text inside the flex row, not on the cell. */ .lead-table-scroll .lead-cell{min-width:0;} .lead-table-scroll .lead-cell>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lead-table-scroll .status-cell .badge{white-space:normal;} /* Sales list view: thirteen columns fitted to the screen the same way as All Leads — fixed proportions summing to 100%, ellipsis with the full value on hover. Contact stacks phone over email, the latest note clamps to two lines, and the row actions stack rather than forcing a wide last column. */ .pp-list-scroll{ overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 21rem);min-height:20rem; border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); box-shadow:var(--elev-1); } .pp-list-scroll>table{table-layout:fixed;border:0;border-radius:0;overflow:visible;box-shadow:none;background:none;} .pp-list-scroll thead th{position:sticky;top:0;z-index:3;white-space:normal;} .pp-list-scroll td{overflow:hidden;text-overflow:ellipsis;} .pp-list-scroll th:nth-child(1),.pp-list-scroll td:nth-child(1){width:3%;} .pp-list-scroll th:nth-child(2),.pp-list-scroll td:nth-child(2){width:12%;} .pp-list-scroll th:nth-child(3),.pp-list-scroll td:nth-child(3){width:13%;} .pp-list-scroll th:nth-child(4),.pp-list-scroll td:nth-child(4){width:10%;white-space:normal;} .pp-list-scroll th:nth-child(5),.pp-list-scroll td:nth-child(5){width:7%;} .pp-list-scroll th:nth-child(6),.pp-list-scroll td:nth-child(6){width:7%;} .pp-list-scroll th:nth-child(7),.pp-list-scroll td:nth-child(7){width:8%;} .pp-list-scroll th:nth-child(8),.pp-list-scroll td:nth-child(8){width:9%;} .pp-list-scroll th:nth-child(9),.pp-list-scroll td:nth-child(9){width:7%;} .pp-list-scroll th:nth-child(10),.pp-list-scroll td:nth-child(10){width:5%;} .pp-list-scroll th:nth-child(11),.pp-list-scroll td:nth-child(11){width:8%;white-space:normal;} .pp-list-scroll th:nth-child(12),.pp-list-scroll td:nth-child(12){width:7%;white-space:normal;} .pp-list-scroll th:nth-child(13),.pp-list-scroll td:nth-child(13){width:4%;white-space:normal;} .pp-list-scroll .pp-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pp-list-scroll .pp-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;} .pp-list-scroll .status-cell .badge,.pp-list-scroll td:nth-child(4) .badge{white-space:normal;} .pp-list-scroll td:nth-child(13) .btn{display:block;width:100%;margin:0 0 .25rem;padding-left:0;padding-right:0;} .pp-list-scroll td:nth-child(12) .btn{margin-top:.3rem;} /* Scrollbars in the CRM's own palette rather than the browser's grey. Firefox takes the two-value form; Chrome and Safari need the pseudo elements, and the transparent border with background-clip is what gives the thumb its inset without needing a second element. */ *{scrollbar-width:thin;scrollbar-color:var(--line-lit) transparent;} ::-webkit-scrollbar{width:11px;height:11px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{ background:var(--line-lit);border-radius:99px; border:3px solid transparent;background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--accent-lit);border:2px solid transparent;background-clip:padding-box; } ::-webkit-scrollbar-corner{background:transparent;} th{ background:var(--surface-alt);color:var(--muted);font-family:var(--mono);font-weight:500; font-size:.59rem;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap; } /* Figures — phone, email, dates, counts — sit in mono with tabular digits so columns of them line up vertically instead of ragging. */ td.num,.num{font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--ink-dim);} /* Severity stripe: a 3px colour bar at the head of the row's first cell, giving each row a scannable status edge without another column. */ .lead-cell{display:flex;align-items:center;gap:.55rem;} .sev{width:3px;height:24px;border-radius:2px;flex:none;background:var(--muted);} .sev.ok{background:var(--ok-lit);box-shadow:0 0 8px color-mix(in srgb,var(--ok-lit) 50%,transparent);} .sev.info{background:var(--accent-lit);box-shadow:0 0 8px var(--glow);} .sev.warn{background:var(--warn-lit);box-shadow:0 0 8px color-mix(in srgb,var(--warn-lit) 50%,transparent);} .sev.risk{background:var(--danger-lit);box-shadow:0 0 8px color-mix(in srgb,var(--danger-lit) 50%,transparent);} .sev.new{background:var(--new-lit);box-shadow:0 0 8px color-mix(in srgb,var(--new-lit) 50%,transparent);} .status-cell{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;white-space:nowrap;} /* Contact attempts as three segments that fill and turn red at the limit — the same 0–3 information as the old "N/3 attempts" text, but readable at a glance down a column. */ .attempts{display:flex;align-items:center;gap:.35rem;} .meter{display:flex;gap:.14rem;} .att{width:12px;height:3px;border-radius:2px;background:var(--surface-hover);} .att.on{background:var(--accent-lit);box-shadow:0 0 6px var(--glow);} .att.max{background:var(--danger-lit);box-shadow:0 0 6px color-mix(in srgb,var(--danger-lit) 50%,transparent);} tr:last-child td{border-bottom:none;} tr.clickable{transition:background .14s ease;} tr.clickable:hover{background:var(--row-hover);cursor:pointer;} .badge{ display:inline-flex;align-items:center;gap:.32rem;padding:.15rem .44rem;border-radius:5px; font-family:var(--mono);font-size:.61rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;border:1px solid transparent;white-space:nowrap; } .badge.new{background:var(--badge-new-bg);color:var(--badge-new-fg);border-color:color-mix(in srgb,var(--badge-new-fg) 28%,transparent);} .badge.progress{background:var(--badge-progress-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent);} .badge.exit{background:var(--badge-exit-bg);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 32%,transparent);} .badge.mid{background:var(--badge-mid-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 32%,transparent);} /* ---------- modals ---------- */ .overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow:auto;z-index:50;backdrop-filter:blur(3px);} .modal{ background:linear-gradient(165deg,var(--panel-a),var(--panel-b));border:1px solid var(--line); border-radius:var(--r-lg);padding:1.75rem;width:520px;max-width:100%;box-shadow:var(--elev-2); backdrop-filter:blur(10px); } .modal h3{margin-top:0;} .modal .row{display:flex;gap:.75rem;} .modal .row > div{flex:1;} .modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem;} .empty{color:var(--muted);font-size:.85rem;padding:2rem;text-align:center;} /* ---------- duplicates review ---------- */ .dup-pair{display:flex;gap:1rem;padding:1rem;margin-bottom:1rem;} .dup-pair .lead-col{flex:1;padding:.5rem;} .dup-pair .lead-col h4{margin:0 0 .4rem;font-size:.85rem;} .dup-pair .lead-col dl{margin:0;font-size:.8rem;} .dup-pair .lead-col dt{color:var(--muted);display:inline;} .dup-pair .lead-col dd{display:inline;margin:0 0 0 .3rem;} .dup-pair .lead-col p{margin:.15rem 0;} /* The field the pair actually shares, marked on both cards so the match is visible at a glance instead of being hunted for. */ .dup-pair .lead-col .dup-row{margin:.15rem 0;} .dup-pair .lead-col .dup-hit{background:color-mix(in srgb,var(--accent-lit) 16%,transparent);border-left:2px solid var(--accent-lit);margin-left:-.5rem;padding:.05rem .45rem;border-radius:0 4px 4px 0;} /* Master Control → Integrations */ .intake-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;} .intake-head h3{font-size:.95rem;margin-bottom:.35rem;} .intake-head .badge{margin-right:.5rem;} .intake-actions{display:flex;gap:.5rem;} .intake-grid{display:grid;grid-template-columns:minmax(9rem,max-content) 1fr;gap:.45rem 1rem;align-items:center;margin-top:.9rem;} .intake-grid label{margin:0;font-size:.78rem;color:var(--muted);} .intake-copy{display:flex;gap:.4rem;align-items:center;min-width:0;} .intake-copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.72rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--surface-alt);} .intake-copy input{flex:1;min-width:0;} .intake-steps{font-size:.8rem;line-height:1.55;color:var(--ink-dim);} .intake-steps code{font-family:var(--mono);font-size:.72rem;} .dup-pair .dup-match{margin:.5rem 0 0;font-size:.78rem;color:var(--ink-dim);line-height:1.4;} .dup-actions{display:flex;flex-direction:column;gap:.4rem;justify-content:center;} .hint{font-size:.72rem;color:var(--muted);margin-top:.2rem;} .merge-modal{width:820px;max-height:90vh;display:flex;flex-direction:column;} .merge-table-wrap{overflow:auto;flex:1;margin-top:.75rem;} .merge-table{width:100%;border-collapse:collapse;border:none;box-shadow:none;background:transparent;} .merge-table th{position:sticky;top:0;background:var(--surface-alt);text-align:left;padding:.4rem .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);} .merge-table td{padding:.4rem .5rem;border-bottom:1px solid var(--line);font-size:.82rem;vertical-align:top;} .merge-table td:first-child{font-weight:600;white-space:nowrap;} .merge-table tr.differs td:nth-child(2),.merge-table tr.differs td:nth-child(3){background:var(--highlight-bg);} .merge-table td:nth-child(4){min-width:180px;} .merge-table td:nth-child(4) input,.merge-table td:nth-child(4) select,.merge-table td:nth-child(4) textarea{width:100%;padding:.3rem .4rem;font-size:.82rem;} .merge-table td:nth-child(4) textarea{min-height:50px;} /* ---------- import ---------- */ .import-progress{padding:1.1rem;margin-bottom:1rem;} .import-progress .bar{height:8px;border-radius:4px;background:var(--surface-hover);overflow:hidden;margin-top:.5rem;} .import-progress .bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-lit),var(--accent));transition:width .2s;box-shadow:0 0 12px var(--glow);} .mapping-table{width:100%;border-collapse:collapse;margin:.75rem 0;border:none;box-shadow:none;background:transparent;} .mapping-table th,.mapping-table td{padding:.4rem .5rem;border-bottom:1px solid var(--line);font-size:.82rem;text-align:left;} .mapping-table select{width:100%;} .module-grid{width:100%;border-collapse:collapse;margin:.4rem 0 .75rem;border:none;box-shadow:none;background:transparent;} .module-grid th{padding:.3rem .4rem;font-size:.7rem;text-transform:uppercase;color:var(--muted);text-align:left;background:transparent;} .module-grid td{padding:.3rem .4rem;font-size:.83rem;border-bottom:1px solid var(--line);} .module-grid input[type="checkbox"]{width:auto;} .module-grid select{width:auto;min-width:90px;} .module-grid tr:last-child td{border-bottom:none;} /* ---------- feedback ---------- */ .toast{ position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px); background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:var(--r); font-size:.85rem;opacity:0;transition:opacity .2s,transform .2s;z-index:100; box-shadow:var(--elev-2);max-width:80vw; } .toast.error{background:var(--danger);color:#fff;} .toast.visible{opacity:1;transform:translateX(-50%) translateY(0);} .warning-banner{background:var(--highlight-bg);border:1px solid var(--warn);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.82rem;margin-top:1rem;color:var(--ink);} #freeze-banner{ display:none;align-items:center;justify-content:center;gap:.5rem;background:var(--danger); color:#fff;padding:.55rem 1.5rem;font-size:.82rem;text-align:center; position:sticky;top:0;z-index:60; } .btn.small.secondary.active{background:var(--surface-hover);color:var(--ink);border-color:var(--accent-lit);} /* ---------- sales pipeline ---------- */ .pipeline-board{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;} .pipeline-column{flex:0 0 290px;background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r);padding:.75rem;} .pipeline-column h4{margin:0 0 .6rem;font-size:.85rem;} .pipeline-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:.65rem .75rem;margin-bottom:.6rem;font-size:.82rem; transition:border-color .15s ease,transform .15s ease; } .pipeline-card:hover{border-color:var(--line-lit);transform:translateY(-1px);} .pipeline-card:last-child{margin-bottom:0;} /* Generic flex row, usable outside .modal too (.modal .row already covers the modal-scoped case) — Sales Pipeline's filter bar and stats strip use class="row" expecting this. */ .row{display:flex;gap:.75rem;flex-wrap:wrap;} .row > div{flex:1;} .pipeline-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;} .pipeline-detail-card{padding:1.1rem;} .pipeline-detail-card .pdc-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin:.75rem 0;font-size:.82rem;} .pipeline-detail-card .pdc-fields .pdc-label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;} /* ---------- Leads Overview ---------- */ .ov-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;margin-bottom:1.1rem;} .ov-tile{ position:relative;overflow:hidden;padding:.95rem 1.05rem 1.05rem; background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--elev-1); display:flex;flex-direction:column;gap:.15rem; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .ov-tile:hover{border-color:var(--line-lit);transform:translateY(-2px);box-shadow:var(--elev-2);} .ov-tile-stripe{position:absolute;top:0;left:0;right:0;height:2px;} .ov-tile-label{font-family:var(--mono);font-size:.61rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);} .ov-tile-value{font-family:var(--display);font-size:2.15rem;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.5rem;} .ov-tile-note{font-size:.71rem;color:var(--muted);} .ov-delta{font-family:var(--mono);font-size:.67rem;font-weight:500;padding:.1rem .34rem;border-radius:4px;border:1px solid transparent;} .ov-delta.up{background:color-mix(in srgb,var(--ok-lit) 16%,transparent);color:var(--ok-lit);border-color:color-mix(in srgb,var(--ok-lit) 30%,transparent);} .ov-delta.down{background:color-mix(in srgb,var(--danger-lit) 14%,transparent);color:var(--danger-lit);border-color:color-mix(in srgb,var(--danger-lit) 28%,transparent);} .ov-delta.flat{background:color-mix(in srgb,var(--warn-lit) 14%,transparent);color:var(--warn-lit);border-color:color-mix(in srgb,var(--warn-lit) 30%,transparent);} .ov-spark{display:block;width:100%;height:36px;margin-top:.35rem;} .ov-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:.9rem;align-items:start;} .ov-col{display:flex;flex-direction:column;gap:.9rem;min-width:0;} .ov-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;padding:1.05rem;} .ov-status-groups{display:flex;flex-direction:column;gap:1rem;padding:1.05rem;} .ov-group-row{display:grid;grid-template-columns:1fr 2fr 2fr;gap:1rem;} .ov-group-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .55rem;margin-bottom:.5rem;} .ov-group-name{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600;} .ov-group-count{font-family:var(--display);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;} .ov-group-note{font-size:.72rem;color:var(--muted);} .ov-group-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.55rem;} .ov-group-active .ov-group-nodes{grid-template-columns:repeat(6,minmax(0,1fr));} .ov-node{border:1px solid var(--line);border-radius:var(--r-sm);padding:.65rem .7rem;background:var(--surface-alt);display:flex;flex-direction:column;gap:.4rem;} .ov-node-top{display:flex;align-items:center;gap:.4rem;} .ov-dot{width:7px;height:7px;border-radius:50%;flex:none;} .ov-node-name{font-family:var(--mono);font-size:.59rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);line-height:1.3;} .ov-node-value{font-family:var(--display);font-size:1.45rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;} .ov-node-bar{height:3px;border-radius:2px;background:var(--surface-hover);overflow:hidden;} .ov-node-bar span{display:block;height:100%;border-radius:2px;} .ov-node-pct{font-family:var(--mono);font-size:.59rem;color:var(--muted);} .ov-feed{display:flex;flex-direction:column;} .ov-evt{display:flex;gap:.65rem;padding:.6rem 1.1rem;border-bottom:1px solid var(--line);} .ov-evt:last-child{border-bottom:none;} .ov-evt-dot{width:6px;height:6px;border-radius:50%;flex:none;margin-top:.42rem;} .ov-evt-text{font-size:.79rem;line-height:1.45;color:var(--ink-dim);} .ov-evt-text strong{color:var(--ink);font-weight:600;} .ov-evt-time{font-family:var(--mono);font-size:.59rem;letter-spacing:.05em;color:var(--muted);margin-top:.1rem;} .ov-table-wrap{overflow-x:auto;} .ov-table-wrap table{border:none;border-radius:0;box-shadow:none;background:transparent;} @media (max-width:1200px){ .ov-tiles{grid-template-columns:repeat(3,minmax(0,1fr));} .ov-group-active .ov-group-nodes{grid-template-columns:repeat(3,minmax(0,1fr));} .ov-grid{grid-template-columns:minmax(0,1fr);} } /* ---------- reminders ---------- */ .reminder-chip{ display:inline-flex;align-items:center;gap:.3rem;margin-top:.25rem;padding:.1rem .45rem; font-size:.72rem;line-height:1.4;color:var(--ink-dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis; border:1px solid var(--line);border-radius:999px;background:var(--surface-alt); } .reminder-chip svg{flex-shrink:0;} .reminder-chip.due{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--badge-mid-bg);} .pp-remind svg{vertical-align:-2px;} .pp-remind.has-reminder{display:inline-flex;align-items:center;gap:.25rem;color:var(--accent-lit);border-color:color-mix(in srgb,var(--accent-lit) 40%,transparent);} .pp-remind.has-reminder.due{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--badge-mid-bg);} .pipeline-card .pp-remind.has-reminder span{font-size:.72rem;white-space:nowrap;} /* Room for the reminder time on the clock button without the button row wrapping onto a second line. */ .pipeline-card .btn.small{padding-left:.45rem;padding-right:.45rem;} .pp-list-scroll .reminder-chip{white-space:normal;} .subtab .count.due,.subtab.active .count.due{background:var(--badge-mid-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);} .reminder-modal{width:520px;} .rem-item{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line);} .rem-item:last-child{border-bottom:none;} .rem-item.closed{opacity:.72;} .rem-item-main{min-width:0;} .rem-item-when{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.84rem;font-weight:600;} .rem-item.due .rem-item-when{color:var(--warn);} .rem-item-note{font-size:.82rem;color:var(--ink-dim);margin-top:.2rem;white-space:pre-wrap;overflow-wrap:anywhere;} .rem-item-actions{display:flex;gap:.3rem;flex-shrink:0;} .rem-closed-head{margin:.8rem 0 .1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .rem-form{margin-top:1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-alt);} .rem-form-title{font-size:.85rem;font-weight:600;margin-bottom:.5rem;} .rem-form label{margin-top:.6rem;} .rem-presets{display:flex;flex-wrap:wrap;gap:.35rem;} .rem-group-head{margin:1.1rem 0 .5rem;font-size:.85rem;} .rem-group-head:first-child{margin-top:0;} .rem-table-wrap{overflow-x:auto;} .rem-table{table-layout:fixed;} .rem-table th:nth-child(1){width:15%;} .rem-table th:nth-child(2){width:20%;} .rem-table th:nth-child(3){width:12%;} .rem-table th:last-child{width:15rem;} .rem-table td{vertical-align:top;white-space:normal;} .rem-table .rem-note-cell{overflow-wrap:anywhere;} .rem-table .rem-actions-cell{text-align:right;white-space:nowrap;} .rem-table tr.rem-row-due td:first-child{color:var(--warn);font-weight:600;} /* ---------- opportunities ---------- */ .deal-chip{ display:inline-block;margin-top:.25rem;padding:.08rem .45rem;max-width:100%; font-size:.7rem;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle; color:var(--accent-lit);border:1px solid color-mix(in srgb,var(--accent-lit) 35%,transparent);border-radius:999px;background:var(--surface-alt); } .deal-chip.won{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);} .deal-chip.overdue{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent);} .deal-chip.missing{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--badge-mid-bg);} .pp-list-scroll .deal-chip{white-space:normal;} .deal-chip-btn{margin-top:0;font-family:inherit;font-weight:600;cursor:pointer;flex-shrink:0;transition:border-color .15s ease,background .15s ease;} .deal-chip-btn:hover{border-color:currentColor;background:var(--surface-hover);} .deal-chip-btn.missing:hover{background:var(--badge-mid-bg);} .pp-list-scroll .deal-chip-btn{margin-top:.25rem;text-align:left;} .pp-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;} .pp-card-head > .pp-open-lead{min-width:0;overflow-wrap:anywhere;} /* The chip must not make the name line taller, or deal cards stop matching the rest of the board. */ .pp-card-head .deal-chip-btn{padding:0 .45rem;line-height:1.3;margin:0;} .pp-card-head-right{display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;} .status-modal{width:460px;} .deal-modal{width:600px;} .deal-modal-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;} .deal-modal-head h3{margin:0;} .deal-step{margin-top:.9rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-alt);} .deal-note{margin:0 0 .2rem;font-size:.8rem;color:var(--ink-dim);} #pp-deal-row > .deal-note{margin-top:.8rem;} .deal-warning{margin:.6rem 0 0;padding:.5rem .7rem;font-size:.8rem;color:var(--ink);border-left:3px solid var(--warn);background:var(--badge-mid-bg);border-radius:0 var(--r-sm) var(--r-sm) 0;} .deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .75rem;} .deal-grid .span-2{grid-column:span 2;} .deal-grid label{margin-top:.6rem;} .deal-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:.7rem 0 .2rem;} .deal-facts div{padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-alt);} .deal-facts span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .deal-facts strong{display:block;margin-top:.15rem;font-size:.95rem;font-variant-numeric:tabular-nums;} .deal-history-row{display:grid;grid-template-columns:auto minmax(0,1.4fr) auto minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.8rem;} .deal-history-row:last-child{border-bottom:none;} .deal-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.84rem;} .opp-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;} .opp-tile-sub{margin-top:.3rem;font-size:.72rem;color:var(--muted);} .opp-tile-sub.warn{color:var(--warn);} #opp-body.loading{opacity:.55;pointer-events:none;transition:opacity .1s ease;} .opp-table-wrap{overflow-x:auto;} .opp-table td{vertical-align:top;white-space:normal;} .opp-table{table-layout:fixed;min-width:760px;} .opp-table th:nth-child(1){width:21%;} .opp-table th:nth-child(2){width:19%;} .opp-table th:nth-child(3){width:8%;} .opp-table th:nth-child(4){width:12%;} .opp-table th:nth-child(5){width:16%;} .opp-table th:nth-child(6){width:12%;} .opp-table .opp-right{text-align:right;} .opp-table td.deal-overdue{color:var(--danger);} @media (max-width:1200px){ .opp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:700px){ .opp-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} .deal-facts{grid-template-columns:1fr;} } /* ---------- my settings ---------- */ .settings-setup-banner{margin-bottom:1rem;padding:.8rem 1rem;border-left:3px solid var(--accent-lit);background:var(--surface-alt);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.86rem;color:var(--ink-dim);} .settings-setup-banner strong{display:block;color:var(--ink);margin-bottom:.15rem;} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;max-width:72rem;} .settings-col{display:flex;flex-direction:column;gap:1rem;min-width:0;} .settings-card label{margin-top:.8rem;} .settings-avatar-row{display:flex;align-items:center;gap:1rem;} .settings-avatar{ width:84px;height:84px;flex:none;border-radius:var(--r);overflow:hidden;display:grid;place-items:center; background:linear-gradient(150deg,color-mix(in srgb,var(--accent-lit) 55%,transparent),color-mix(in srgb,var(--accent) 45%,transparent)); border:1px solid color-mix(in srgb,var(--accent-lit) 35%,transparent); } .settings-avatar .avatar-img{width:100%;height:100%;object-fit:cover;display:block;} .settings-avatar .avatar-initials{font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--ink);} .settings-avatar-actions{display:flex;gap:.4rem;flex-wrap:wrap;} .settings-avatar-actions label.btn{margin:0;display:inline-flex;align-items:center;color:var(--ink);font-size:.78rem;font-weight:500;cursor:pointer;} .settings-inline{display:flex;gap:.5rem;align-items:center;} .settings-inline input{flex:1;min-width:0;} .settings-inline .btn{flex:none;} .settings-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;} .settings-email-current{margin:0;font-size:.86rem;} .settings-request{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem;padding:.6rem .8rem;font-size:.82rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-alt);} .settings-request.pending{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--badge-mid-bg);} .settings-request.approved{border-color:color-mix(in srgb,var(--ok) 40%,transparent);} .settings-request.rejected{border-color:color-mix(in srgb,var(--danger) 40%,transparent);} .email-requests{margin-bottom:1rem;} .email-request-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);} .email-request-row:last-child{border-bottom:none;} .email-request-actions{display:flex;gap:.4rem;flex:none;} @media (max-width:900px){ .settings-grid{grid-template-columns:1fr;} } /* ---------- onboarding and password recovery ---------- */ #onboarding-view{position:relative;z-index:1;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1.25rem;} .onboarding-logo{width:150px;height:auto;} .onboarding-card{ width:600px;max-width:100%;background:linear-gradient(165deg,var(--panel-a),var(--panel-b)); border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 2.2rem;box-shadow:var(--elev-1); } .onboarding-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;} .onboarding-card h2{margin:0 0 .3rem;font-family:var(--display);font-size:1.5rem;} .onboarding-card h3{margin:0 0 .4rem;font-size:1rem;} .onboarding-steps{display:flex;gap:.4rem;list-style:none;padding:0;margin:1.2rem 0 1.4rem;} .onboarding-steps li{flex:1;display:flex;align-items:center;gap:.45rem;padding:.45rem .6rem;font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-sm);} .onboarding-steps li span{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;font-family:var(--mono);font-size:.66rem;border:1px solid var(--line-lit);} .onboarding-steps li.current{color:var(--ink);border-color:var(--accent-lit);background:var(--surface-alt);} .onboarding-steps li.current span{background:var(--accent-lit);border-color:var(--accent-lit);color:#fff;} .onboarding-steps li.done{color:var(--ink-dim);} .onboarding-steps li.done span{background:var(--ok);border-color:var(--ok);color:#fff;} .onboarding-body label{margin-top:.8rem;} .onboarding-body .settings-avatar-row label.btn{margin:0;display:inline-flex;color:var(--ink);font-size:.78rem;font-weight:500;cursor:pointer;} .onboarding-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;} #recovery-card{width:360px;} .recovery-title{margin:0 0 .6rem;text-align:center;font-size:1rem;} /* ---------- home ---------- */ .home-banner{ position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:1rem;min-height:190px;display:flex; background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 70%,var(--card)),color-mix(in srgb,var(--accent-lit) 45%,var(--card))); } .home-banner.has-image{background:linear-gradient(90deg,rgba(6,16,26,.82) 0%,rgba(6,16,26,.45) 55%,rgba(6,16,26,.15) 100%),var(--home-banner) center/cover no-repeat;} .home-banner-inner{flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.6rem 1.8rem;color:#fff;} .home-date{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;} .home-greeting h1{margin:.25rem 0 0;font-family:var(--display);font-size:2.1rem;font-weight:700;line-height:1.1;color:#fff;} .home-banner-title{margin-top:.5rem;font-size:1rem;font-weight:600;} .home-banner-subtitle{margin-top:.15rem;font-size:.86rem;opacity:.9;max-width:44rem;} .home-clock{font-family:var(--display);font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums;opacity:.95;} .home-edit-banner{position:absolute;top:.8rem;right:.8rem;} /* Two rows — modules beside next holiday, announcements beside birthdays — stretched so each pair lines up whatever its content. */ .home-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;align-items:stretch;} .home-grid > .panel{min-width:0;} .home-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));grid-auto-rows:1fr;gap:.7rem;} .home-tile{ display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;padding:.9rem 1rem;height:100%;min-height:7.6rem;box-sizing:border-box; background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font:inherit;cursor:pointer; transition:border-color .15s ease,transform .15s ease,background .15s ease; } .home-tile:hover{border-color:var(--accent-lit);background:var(--surface-hover);transform:translateY(-1px);} .home-tile-icon{display:inline-grid;place-items:center;width:2rem;height:2rem;margin-bottom:.35rem;border-radius:var(--r-sm);color:var(--accent-lit);background:color-mix(in srgb,var(--accent-lit) 14%,transparent);} .home-tile-icon svg{width:17px;height:17px;} .home-tile-name{font-weight:600;font-size:.92rem;} .home-tile-blurb{font-size:.74rem;color:var(--muted);line-height:1.35;} .home-tile-figure{margin-top:auto;padding-top:.4rem;font-family:var(--mono);font-size:.66rem;color:var(--accent-lit);} .home-tile.soon{opacity:.62;} .home-tile.soon .home-tile-icon{color:var(--muted);background:var(--surface-hover);} .home-announcement{padding:.8rem 0;border-bottom:1px solid var(--line);} .home-announcement:first-child{padding-top:0;} .home-announcement:last-of-type{border-bottom:none;} .home-announcement-head{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;} .home-announcement-head h4{margin:0;font-size:.95rem;} .home-announcement-tools{margin-left:auto;display:flex;gap:.3rem;} .home-announcement-body{margin:.35rem 0 .3rem;font-size:.86rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;} .home-announcement.pinned .home-announcement-head h4::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.45rem;border-radius:50%;background:var(--warn);vertical-align:middle;} .home-holiday-now{margin-bottom:.7rem;padding:.5rem .7rem;border-radius:var(--r-sm);background:var(--badge-progress-bg);color:var(--ink);font-size:.84rem;} .home-holiday-name{font-family:var(--display);font-size:1.2rem;font-weight:700;} .home-countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin:.8rem 0 .4rem;} .home-countdown div{display:flex;flex-direction:column;align-items:center;padding:.5rem .2rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-alt);} .home-countdown strong{font-family:var(--display);font-size:1.45rem;line-height:1;font-variant-numeric:tabular-nums;} .home-countdown span{margin-top:.2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);} .home-subhead{margin:.2rem 0 .35rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .home-holiday-later{margin-top:.9rem;} .home-holiday-row{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;font-size:.82rem;border-bottom:1px solid var(--line);} .home-holiday-row:last-child{border-bottom:none;} .home-today-row{display:flex;gap:.6rem;width:100%;padding:.4rem .2rem;text-align:left;font:inherit;font-size:.82rem;color:var(--ink);background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;} .home-today-row:hover{background:var(--surface-hover);} .home-today-row span:first-child{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--accent-lit);min-width:6.5rem;} .home-today-row span.home-due{color:var(--warn);} .home-alert-row{display:block;width:100%;margin-top:.7rem;padding:.55rem .7rem;text-align:left;font:inherit;font-size:.8rem;color:var(--ink);cursor:pointer;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:var(--r-sm);background:var(--badge-mid-bg);} .home-person{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;font-size:.84rem;} .home-person-avatar{width:32px;height:32px;flex:none;border-radius:var(--r-sm);overflow:hidden;display:grid;place-items:center;background:var(--surface-hover);font-family:var(--display);font-size:.8rem;font-weight:700;} .home-person-avatar .avatar-img{width:100%;height:100%;object-fit:cover;display:block;} .home-guide-link{text-align:right;margin:0;} .home-banner-preview{height:120px;border-radius:var(--r-sm);border:1px dashed var(--line-lit);background:var(--surface-alt) center/cover no-repeat;display:grid;place-items:center;font-size:.8rem;color:var(--muted);} .home-check{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.84rem;color:var(--ink);} .home-check input{width:auto;} .hc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;margin-top:.8rem;} .hc-wide{grid-column:1 / -1;} .hc-holiday-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.2rem;align-items:start;} .hc-holiday-layout .rem-form{margin-top:0;} .hc-holiday-layout .hm-rows{max-height:none;} @media (max-width:1000px){ .hc-holiday-layout{grid-template-columns:minmax(0,1fr);} } .home-announcement.expired{opacity:.55;} @media (max-width:1000px){ .hc-grid{grid-template-columns:minmax(0,1fr);} } .hm-rows{max-height:40vh;overflow:auto;margin-bottom:.4rem;} .hm-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);} .hm-row.past{opacity:.55;} @media (max-width:1100px){ .home-grid{grid-template-columns:minmax(0,1fr);} } @media (max-width:700px){ .home-banner-inner{flex-direction:column;align-items:flex-start;} .home-clock{font-size:1.8rem;} .home-greeting h1{font-size:1.6rem;} } /* ---------- system switch and admin levels ---------- */ .mode-notice{margin-bottom:1rem;padding:.55rem .85rem;font-size:.8rem;color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-left:3px solid var(--warn);border-radius:var(--r-sm);background:var(--badge-mid-bg);} .system-card{margin-bottom:1rem;} .system-card .panel-body{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;} .system-status{display:flex;align-items:flex-start;gap:.8rem;max-width:52rem;} .system-dot{flex:none;width:.85rem;height:.85rem;margin-top:.3rem;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);} .system-card.down .system-dot{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 22%,transparent);} .system-state-label{font-family:var(--display);font-size:1.25rem;font-weight:700;} .system-explain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem;} .system-list{margin:0;padding-left:1.1rem;font-size:.84rem;line-height:1.6;} .system-list li{margin-bottom:.3rem;} @media (max-width:900px){ .system-explain{grid-template-columns:minmax(0,1fr);} } /* ---------- module guide ---------- */ .guide{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.5rem;align-items:start;} .guide-toc{position:sticky;top:calc(4.5rem + var(--freeze-h,0px));display:flex;flex-direction:column;gap:.75rem;max-height:calc(100vh - 6rem - var(--freeze-h,0px));overflow-y:auto;} .guide-toc nav{display:flex;flex-direction:column;border-left:1px solid var(--line);} .guide-toc a{ display:block;padding:.38rem .8rem;margin-left:-1px;border-left:2px solid transparent; font-size:.8rem;color:var(--ink-dim);text-decoration:none;line-height:1.35; } .guide-toc a:hover{color:var(--ink);border-left-color:var(--accent-lit);background:var(--surface-hover);} .guide-body{display:flex;flex-direction:column;gap:1rem;max-width:62rem;} .guide-header h2{margin:0 0 .35rem;font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:.04em;} .guide-header p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-dim);} .guide-section{padding:1.1rem 1.3rem;scroll-margin-top:calc(4.5rem + var(--freeze-h,0px));} .guide-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.6rem;margin-bottom:.8rem;border-bottom:1px solid var(--line);} .guide-section-head h3{margin:0;font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;} .guide-who{flex-shrink:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);} .guide-content{font-size:.86rem;line-height:1.65;color:var(--ink);} .guide-content p{margin:0 0 .7rem;} .guide-content h4{margin:1rem 0 .4rem;font-size:.84rem;font-weight:600;} .guide-content ul,.guide-content ol{margin:0 0 .7rem;padding-left:1.3rem;} .guide-content li{margin-bottom:.3rem;} .guide-content > :last-child{margin-bottom:0;} .guide-steps li::marker{font-family:var(--mono);color:var(--accent-lit);font-weight:600;} .guide-table{width:100%;border-collapse:collapse;margin:0 0 .7rem;font-size:.82rem;background:transparent;border:none;border-radius:0;box-shadow:none;} .guide-table th{text-align:left;padding:.45rem .6rem;background:var(--surface-alt);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);} .guide-table td{padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal;} .guide-table td:first-child{font-weight:600;white-space:nowrap;} .guide-note{margin:.2rem 0 .7rem;padding:.6rem .85rem;border-left:3px solid var(--accent-lit);background:var(--surface-alt);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.82rem;color:var(--ink-dim);} @media (max-width:900px){ .guide{grid-template-columns:minmax(0,1fr);} .guide-toc{position:static;max-height:none;} .guide-table td:first-child{white-space:normal;} } /* ---------- responsive shell ---------- */ @media (max-width:900px){ .shell-body{grid-template-columns:1fr;} .rail{ position:static;height:auto;flex-direction:row;align-items:center;gap:1rem; padding:.7rem 1rem;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto; } .rail-logo{padding:0;} .rail-logo .brand-logo-header{width:110px;} #main-nav{flex-direction:row;gap:.5rem;overflow-x:visible;padding-bottom:0;} .rail-group{flex-direction:row;padding:0;gap:.3rem;} .rail-label{display:none;} #main-nav button{white-space:nowrap;} #main-nav button.active::before{display:none;} .rail-foot{margin-top:0;padding:0 0 0 .75rem;border-top:none;border-left:1px solid var(--line);flex-direction:row;align-items:center;margin-left:auto;} .rail-foot .btn{width:auto;} .rail-who-text{display:none;} .topbar{padding:.6rem 1rem;} main{padding:1rem;} .ov-tiles{grid-template-columns:1fr;} .ov-status{grid-template-columns:repeat(2,minmax(0,1fr));} .ov-group-row{grid-template-columns:1fr;} .ov-group-active .ov-group-nodes{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} } /* Master Control → Staff: access change history */ .access-log{margin-bottom:1rem;} .access-log>summary{cursor:pointer;list-style:none;} .access-log>summary::-webkit-details-marker{display:none;} .access-log>summary h3::before{content:"▸ ";color:var(--muted);} .access-log[open]>summary h3::before{content:"▾ ";} .access-log:not([open])>summary{border-bottom:none;}