/* ===================================================================== DOITC CRM - the design system ===================================================================== Rewritten as one system rather than a pile of page-specific rules. Three ideas hold it together: 1. TOKENS, not literals. Every colour, radius, shadow and step of spacing is a custom property declared once in :root and re-declared once for dark mode. A screen never picks its own blue. 2. LOGICAL PROPERTIES, not left/right. margin-inline-start, padding-inline, inset-inline, border-inline-start - so the whole interface mirrors itself for Arabic from the single dir="rtl" on , with no mirrored stylesheet and no per-screen exceptions. This is why the sidebar, the workflow strip and every table read correctly in both languages. 3. ONE SET OF COMPONENTS. .card, .btn, table, .badge, .form-grid, .kpi - about a dozen of them, used by all 52 screens. Restyling a component restyles the whole app, which is what makes a change like this one possible at all. Typography: no web fonts. The app is served on an office network that may have no internet at all, and a font that fails to load is a page that reflows in front of the user. The stack below resolves to San Francisco on a Mac, Segoe UI on Windows, and a real Arabic face on both. ===================================================================== */ :root { /* ---- Brand ------------------------------------------------------- Navy is the identity and the "authority" colour: headings, the active item in the sidebar, the sign-in screen. Gold is the action colour and is deliberately DARKER than the logo gold - #b8912b on white is 3.0:1, which fails WCAG AA for button text; #9a7b1e is 4.9:1 and passes while still reading as the same gold. */ --navy: #16294d; --navy-700: #1e3560; --navy-ink: #16294d; /* navy as foreground on a light surface */ --navy-50: #eef1f7; --gold: #9a7b1e; --gold-strong: #866a19; --gold-light: #d4ac4f; --gold-50: #fbf5e7; /* ---- Surfaces ---------------------------------------------------- */ --bg: #f6f7f9; --card: #ffffff; --raised: #fbfbfd; /* sidebar, table headers, subtle fills */ --text: #101828; --muted: #667085; --faint: #98a2b3; --border: #e4e7ec; --border-strong: #d0d5dd; /* ---- Semantic ----------------------------------------------------- */ --green: #12805c; --green-bg: #e7f6ef; --red: #c0392b; --red-bg: #fdecec; --amber: #8a5a12; --amber-bg: #fdf3e2; --blue: #1f5fb0; --blue-bg: #eaf1fb; /* ---- Shape and depth ---------------------------------------------- */ --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 16px 40px rgba(16, 24, 40, .16); --ring: 0 0 0 3px rgba(154, 123, 30, .28); /* ---- Rhythm ------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sidebar-w: 248px; --topbar-h: 60px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Segoe UI Arabic", "Geeza Pro", Tahoma, Arial, sans-serif; --font-num: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", monospace; /* ---- Aliases for the token bridge -------------------------------- pipeline-bridge.css re-points the Sales Pipeline stylesheet's tokens at these. Three of its tokens share a NAME with ours (--border, --radius, --font), and `--border: var(--border)` on .sp-scope is a cycle, which CSS resolves to "invalid" - so every rule over there that said `border: 1px solid var(--border)` silently lost its border: no outline on any pipeline button, select, card or KPI tile. The screenshots that started Round 36 showed exactly that. The bridge now reads these aliases instead; being declared here on :root, they follow the dark-mode values above automatically. */ --ds-border: var(--border); --ds-border-strong: var(--border-strong); --ds-radius: var(--radius); --ds-font: var(--font); } @media (prefers-color-scheme: dark) { :root { --bg: #101216; --card: #181b21; --raised: #1f232b; --text: #e7e9ee; --muted: #9aa3b2; --faint: #7c8494; --border: #2c313b; --border-strong: #3a4049; --navy-50: #1a2436; --navy-ink: #b9c8e4; --gold: #c9a227; --gold-strong: #d9b23a; --gold-50: #2a2415; --green-bg: #102e24; --red: #e06a5f; --red-bg: #331a19; --amber: #d6a75a; --amber-bg: #2e2413; --blue: #7aa9e8; --blue-bg: #16233a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow-md: 0 6px 16px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6); --ring: 0 0 0 3px rgba(201, 162, 39, .3); } } /* ===================================================================== Base ===================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--text); font-weight: 650; letter-spacing: -.01em; } h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 15px; } p { margin: 0 0 var(--sp-3); } a { color: var(--navy-ink); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } .hidden { display: none !important; } [hidden] { display: none !important; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--card); padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .skip-link:focus { inset-inline-start: 12px; top: 12px; } /* ===================================================================== The shell: a fixed sidebar, a slim top bar, and the page between them ===================================================================== */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; } .auth-shell { display: block; } /* ---- Sidebar -------------------------------------------------------- */ .sidebar { grid-area: sidebar; background: var(--raised); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; } .sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-4); height: var(--topbar-h); flex: 0 0 auto; border-bottom: 1px solid var(--border); } .sidebar-brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; } .sidebar-mark { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: 0; } .sidebar-name { font-weight: 700; font-size: 15px; color: var(--text); letter-spacing: -.01em; } .sidebar-close { display: none; } .sidebar-nav { padding: var(--sp-3) var(--sp-3) var(--sp-4); flex: 1 1 auto; } .nav-group { margin-top: var(--sp-5); } .nav-group-title { width: 100%; margin: 0 0 var(--sp-2); padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-family: inherit; text-align: start; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .nav-group-title:hover, .nav-group-title:focus-visible { background: var(--navy-50); color: var(--text); } .nav-group-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .nav-group-chevron { width: 18px; height: 18px; display: grid; place-items: center; transition: transform .2s ease; } .nav-group-chevron .ico { width: 14px; height: 14px; } .nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); } html[dir="rtl"] .nav-group.is-collapsed .nav-group-chevron { transform: rotate(90deg); } .nav-group-items[hidden] { display: none; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 2px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; font-weight: 500; position: relative; transition: background .12s ease, color .12s ease; } .nav-item:hover { background: var(--navy-50); color: var(--text); text-decoration: none; } .nav-item.is-current { background: var(--card); color: var(--navy-ink); font-weight: 650; box-shadow: var(--shadow-xs); } /* The gold marker on the active screen - the one place the brand accent appears in the navigation, so "where am I" is answered at a glance. */ .nav-item.is-current::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold); } .nav-ico { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; color: var(--faint); } /* One size for every icon in the app, inheriting the colour of its row. */ .ico { width: 16px; height: 16px; display: block; } .icon-btn .ico { width: 18px; height: 18px; } .nav-item.is-current .nav-ico { color: var(--gold); } .nav-count { margin-inline-start: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .sidebar-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 0 0 auto; } .sidebar-search-form { display: none; position: relative; margin: var(--sp-3) var(--sp-3) 0; } .sidebar-search-form .nav-search-ico { inset-inline-start: 12px; } .sidebar-search-input { width: 100%; min-height: 42px; padding-inline: 36px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; } .sidebar-primary-action { padding: 12px 14px 0; } .sidebar-quick-action { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:1px solid rgba(228,189,104,.38); border-radius:12px; color:#fff; background:linear-gradient(135deg, rgba(199,153,62,.28), rgba(199,153,62,.12)); font-size:13.5px; font-weight:700; text-decoration:none; transition:transform .17s ease, background .17s ease, border-color .17s ease; } .sidebar-quick-action:hover { color:#fff; text-decoration:none; transform:translateY(-1px); background:rgba(199,153,62,.3); border-color:rgba(228,189,104,.7); } .sidebar-quick-action .nav-ico { color:var(--gold-light); background:rgba(255,255,255,.08); } .sidebar-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 40, .45); } /* ---- Top bar -------------------------------------------------------- */ .topbar { grid-area: topbar; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--border); } .auth-topbar { border-bottom: 1px solid var(--border); } .topbar .brand { font-weight: 700; font-size: 16px; color: var(--text); } .topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { position: relative; border: 1px solid transparent; background: transparent; cursor: pointer; width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 16px; color: var(--muted); } .icon-btn:hover { background: var(--navy-50); color: var(--text); } .icon-btn:focus-visible, .user-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Declared after .icon-btn on purpose: both selectors carry the same specificity, so the later one wins - and the drawer button must stay hidden on a desktop, where the sidebar is always on screen. */ .menu-btn { display: none; } .nav-search-form { position: relative; flex: 0 1 380px; max-width: 380px; } .nav-search-ico { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; display: grid; place-items: center; } .nav-search-ico .ico { width: 15px; height: 15px; } /* Scoped to .topbar so it outranks the generic input[type="search"] rule further down the file - which is an attribute selector, and would otherwise win and put the text back under the magnifier. */ .topbar .nav-search-input { width: 100%; height: 36px; min-height: 36px; padding-inline: 34px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; } .topbar .nav-search-input:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); background: var(--card); } .nav-lang-form { margin: 0; } .nav-lang-btn { height: 36px; padding: 0 12px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; } .nav-lang-btn:hover { background: var(--navy-50); color: var(--text); } .user-wrap { position: relative; } .user-btn { display: flex; align-items: center; gap: 9px; cursor: pointer; height: 40px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: inherit; color: inherit; } .user-btn:hover { background: var(--navy-50); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; } .user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .user-name { font-size: 13px; font-weight: 600; } .user-role { font-size: 11px; color: var(--muted); } .user-chevron { width: 16px; height: 16px; display: grid; place-items: center; color: var(--faint); transition: transform .2s ease; } .user-chevron .ico { width: 13px; height: 13px; } .user-wrap.is-open .user-chevron { transform: rotate(180deg); color: var(--accent); } .user-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50; min-width: 190px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .user-menu a, .user-menu .nav-logout-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; padding: 9px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer; } .user-menu-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--accent); background: var(--accent-soft); transition: transform .18s ease; } .user-menu-icon .ico { width: 15px; height: 15px; } .user-menu a:hover .user-menu-icon, .user-menu button:hover .user-menu-icon { transform: scale(1.08) rotate(-4deg); } .user-menu .nav-logout-btn .user-menu-icon { color: var(--red); background: var(--red-bg); } .user-menu a:hover, .user-menu .nav-logout-btn:hover { background: var(--navy-50); text-decoration: none; } .user-menu .nav-logout-btn { color: var(--red); } .nav-logout-form { margin: 0; } /* ---- Main ----------------------------------------------------------- */ main { grid-area: main; padding: var(--sp-6) var(--sp-6) var(--sp-10); max-width: 1500px; width: 100%; /* A grid item is min-width:auto by default, which means one wide table stretches the whole column and the PAGE scrolls sideways - the header, the sidebar and every other screen going with it. This keeps the scrolling inside the table's own box, where it belongs. */ min-width: 0; } .auth-shell main { padding: var(--sp-8) var(--sp-4); max-width: none; } /* ===================================================================== Page furniture ===================================================================== */ .page-title { font-size: 22px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.02em; } .toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); } .toolbar-technical-upload { display: inline-flex; position: relative; } .toolbar-technical-upload .btn { margin: 0; cursor: pointer; } .toolbar-technical-file { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; } .subhead { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: var(--sp-5) 0 var(--sp-2); } .back-link { display: inline-block; margin-bottom: 2px; color: var(--muted); font-size: 13px; font-weight: 500; } .back-link:hover { color: var(--navy-ink); text-decoration: none; } /* Tabs shared by the opportunity and report hubs. */ .tabs, .page-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); } .tabs a, .page-tabs a { padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13.5px; font-weight: 550; } .tabs a:hover, .page-tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.active, .page-tabs a.active { color: var(--navy-ink); border-bottom-color: var(--gold); font-weight: 650; } .page-tabs[data-workspace-tabs] .page-tab { display:inline-flex; align-items:center; gap:7px; } .page-tabs[data-workspace-tabs] .page-tab .ico { width:16px; height:16px; flex:0 0 auto; } @media (max-width: 720px) { .page-tabs[data-workspace-tabs] { width:100%; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; scroll-snap-type:x proximity; } .page-tabs[data-workspace-tabs] .page-tab { flex:0 0 auto; scroll-snap-align:start; min-height:42px; } } /* The proposal editor's own tab strip is BUTTONS, not links (app.js swaps the panels), so it needs the same treatment as the link tabs above or it falls back to looking like a row of loose form buttons. */ .tabs button { border: 0; background: none; cursor: pointer; font: inherit; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13.5px; font-weight: 550; } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--navy-ink); border-bottom-color: var(--gold); font-weight: 650; } .tab-panel { display: none; } .tab-panel.active { display: block; } .flash-stack { margin-bottom: var(--sp-4); } .flash { margin: 0 0 var(--sp-2); padding: 11px 14px; border: 1px solid var(--border); border-inline-start: 3px solid var(--muted); border-radius: var(--radius-sm); background: var(--card); font-size: 13.5px; } .flash-success { border-inline-start-color: var(--green); background: var(--green-bg); color: var(--green); } .flash-error { border-inline-start-color: var(--red); background: var(--red-bg); color: var(--red); } /* ===================================================================== Cards The old card wore a solid navy header bar. One heavy bar per card, six cards per screen, and the page read as stripes rather than content - so the title is now type, not a block of colour. ===================================================================== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); margin-bottom: var(--sp-5); overflow: hidden; } .card > h2 { margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-3); font-size: 15px; font-weight: 650; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .card > .body { padding: var(--sp-5); } /* Tables are often dropped into a padding-less body with no wrapper of their own (dashboard.html does this twice); this makes that box the scroller rather than the page. */ .card > .body { max-width: 100%; overflow-x: auto; } .card > .body > :first-child { margin-top: 0; } .card > .body > :last-child { margin-bottom: 0; } /* ===================================================================== Buttons ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; } .btn:hover { background: var(--navy-50); text-decoration: none; } .btn:active { transform: translateY(.5px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn.gold { /* the primary action */ background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: var(--shadow-xs); } .btn.gold:hover { background: var(--gold-strong); border-color: var(--gold-strong); } .btn.secondary { background: var(--card); color: var(--text); border-color: var(--border-strong); } .btn.secondary:hover { background: var(--navy-50); } .btn.danger { background: var(--card); color: var(--red); border-color: var(--red); } .btn.danger:hover { background: var(--red-bg); } .btn.small { height: 32px; padding: 0 11px; font-size: 12.5px; } .count-pill { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--navy-50); color: var(--navy-ink); font-size: 11.5px; font-weight: 700; } /* ===================================================================== Forms ===================================================================== */ label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; } textarea { line-height: 1.6; } input:hover, select:hover, textarea:hover { border-color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); } input[type="file"] { width: 100%; padding: 7px 10px; font-size: 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--raised); color: var(--muted); } input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--gold); } select { appearance: none; padding-inline-end: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 13px center, right 8px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } html[dir="rtl"] select { background-position: left 13px center, left 18px center; } .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .form-grid > div > div { font-size: 13.5px; } /* Customer relationship map: compact cards on desktop, touch-friendly stack on phones and iPad. Details keeps editing out of the way until requested. */ .relationship-map { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:14px; } .relationship-person { position:relative; border:1px solid var(--border); border-inline-start:4px solid #94a3b8; border-radius:14px; background:var(--surface,#fff); overflow:hidden; } .relationship-person.relationship-strong { border-inline-start-color:#16a34a; } .relationship-person.relationship-developing { border-inline-start-color:#0891b2; } .relationship-person.relationship-weak { border-inline-start-color:#dc2626; } .relationship-person > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px 10px; align-items:center; min-height:72px; padding:12px; } .relationship-person > summary::-webkit-details-marker,.relationship-add > summary::-webkit-details-marker { display:none; } .relationship-person > summary small { display:block; color:var(--muted,#64748b); margin-top:3px; } .relationship-avatar { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#075985; background:#e0f2fe; font-weight:800; font-size:17px; } .relationship-signal { grid-column:2 / -1; color:var(--muted,#64748b); font-size:12px; } .relationship-edit { border-top:1px solid var(--border); padding:14px; } .relationship-actions { margin-top:10px; } .relationship-delete { position:absolute; inset-inline-end:12px; bottom:14px; } .relationship-add > summary { width:max-content; cursor:pointer; } .account-plan-card textarea { min-height:84px; } @media (max-width:680px) { .relationship-map { grid-template-columns:1fr; } .relationship-person > summary { grid-template-columns:42px minmax(0,1fr); } .relationship-person > summary .badge { justify-self:start; grid-column:2; } .relationship-signal { grid-column:2; } .relationship-delete { position:static; padding:0 14px 14px; } } /* Commercial decision centre and the deliberately minimal customer portal. */ .commercial-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; } .commercial-kpi { padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface,#fff); } .commercial-kpi span,.commercial-kpi small { display:block; color:var(--muted,#64748b); } .commercial-kpi strong { display:block; margin:5px 0; color:var(--navy,#0f2747); font-size:24px; } .commercial-kpi.is-good { border-color:#86efac; background:#f0fdf4; } .commercial-kpi.is-danger { border-color:#fca5a5; background:#fff7f7; } .commercial-columns { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:22px; } .commercial-checks { display:grid; gap:7px; margin-bottom:18px; } .commercial-checks span { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; background:#fff7ed; color:#9a3412; } .commercial-checks span.is-ok { background:#f0fdf4; color:#166534; } .commercial-checks b { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:currentColor; color:white; } .growth-suggestion { display:grid; gap:3px; padding:10px 0; border-bottom:1px solid var(--border); } .portal-create-form,.portal-link-list > div,.portal-copy-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .portal-link-list { display:grid; gap:8px; margin-top:14px; } .portal-link-list > div { padding:10px; border:1px solid var(--border); border-radius:10px; } .portal-copy-row input { flex:1 1 360px; } .customer-portal-page { width:min(820px,calc(100% - 24px)); margin:24px auto; } .portal-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .portal-brand > span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--navy,#16294d); color:white; font-weight:900; font-size:24px; } .portal-brand strong,.portal-brand small { display:block; } .portal-hero h1 { margin:12px 0 4px; } .portal-total { margin-top:22px; padding:18px; border-radius:14px; background:var(--navy,#16294d); color:white; } .portal-total small,.portal-total span,.portal-total strong { display:block; } .portal-total strong { margin:5px 0; font-size:30px; } .portal-file { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px; text-decoration:none; } .portal-expiry { text-align:center; color:var(--muted,#64748b); } @media (max-width:900px) { .commercial-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .commercial-columns { grid-template-columns:1fr; } } @media (max-width:560px) { .commercial-kpis { grid-template-columns:1fr 1fr; } .commercial-kpi { padding:11px; } .commercial-kpi strong { font-size:20px; } .portal-copy-row .btn { width:100%; min-height:44px; } } .required-mark { color: var(--red); font-weight: 700; } .field-error { color: var(--red); font-size: 12px; font-weight: 500; margin: 5px 0 0; } input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--red); background: var(--red-bg); } input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); } .form-error { margin: 0; padding: 11px 14px; border: 1px solid var(--red); border-inline-start-width: 3px; border-radius: var(--radius-sm); background: var(--red-bg); color: var(--red); font-size: 13.5px; } .save-status { font-size: 12.5px; color: var(--muted); } .save-status.saved { color: var(--green); font-weight: 600; } .save-status.error { color: var(--red); font-weight: 600; } .opportunity-form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); } /* A row of labelled fields that must sit SIDE BY SIDE. Inputs are full width by default (that is right for a form column), and a full-width control inside a flex row wraps onto its own line - so the row needs to say so once, here, rather than each template fighting it with inline min-widths. */ .field-row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: var(--sp-1) 0; } .customer-autofill-panel { grid-column: 1 / -1; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--green) 32%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--green-bg) 64%, var(--card)); } .customer-autofill-panel[hidden] { display: none; } .customer-autofill-head { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; } .customer-autofill-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--green); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent); } .customer-autofill-icon .ico { width: 19px; height: 19px; } .customer-autofill-head strong, .customer-autofill-head span { display: block; } .customer-autofill-head strong { color: var(--green); font-size: 13.5px; } .customer-autofill-head span { margin-top: 2px; color: var(--muted); font-size: 12px; } .customer-autofill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .customer-autofill-grid > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); } .customer-autofill-grid span, .customer-autofill-grid strong { display: block; } .customer-autofill-grid span { margin-bottom: 3px; color: var(--faint); font-size: 10.5px; font-weight: 680; } .customer-autofill-grid strong { color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; } .customer-autofill-address { grid-column: span 2; } input.is-customer-autofilled { border-color: color-mix(in srgb, var(--green) 50%, var(--border-strong)) !important; background: color-mix(in srgb, var(--green-bg) 34%, var(--card)) !important; } @media (max-width: 900px) { .customer-autofill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .customer-autofill-panel { padding: 13px; } .customer-autofill-grid { grid-template-columns: 1fr; } .customer-autofill-address { grid-column: auto; } } td.subrow { background: var(--raised); border-top: 0; padding-top: 0; } .inline-search { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .inline-search input[type="search"] { width: auto; flex: 1 1 220px; } .assign-form { margin: 0; } .assign-form select { min-width: 150px; height: 32px; min-height: 32px; padding-block: 4px; font-size: 12.5px; } /* ===================================================================== Tables ===================================================================== */ .table-wrap { width: 100%; overflow-x: auto; } .card > .table-wrap { border-radius: 0; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table th { position: sticky; top: 0; z-index: 1; background: var(--raised); color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; text-align: start; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--border); } table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } table tbody tr:last-child td { border-bottom: 0; } table tbody tr:hover td { background: var(--navy-50); } .num, table td.num, table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Cost Analysis material line items (Solution tabs, table id "sol0-table", "sol1-table", ...): Description is the 3rd column (vendor, part number, description, ...). With every column otherwise sharing the row evenly, a real product description was squeezed into a sliver a couple of words wide - give it a real floor instead. The table already scrolls horizontally inside its own box (.card > .body, above) when its columns don't all fit, so widening this one doesn't crush the others below what they need. */ table[id^="sol"][id$="-table"] th:nth-child(1), table[id^="sol"][id$="-table"] td:nth-child(1) { min-width: 110px; } table[id^="sol"][id$="-table"] th:nth-child(2), table[id^="sol"][id$="-table"] td:nth-child(2) { min-width: 130px; } table[id^="sol"][id$="-table"] th:nth-child(3), table[id^="sol"][id$="-table"] td:nth-child(3) { min-width: 240px; } /* Unit and Qty (4th/5th columns) were left with no floor at all, so on a table now carrying 9 input columns instead of 7 they could shrink to a few pixels - too narrow to read what was typed, let alone click into and edit accurately. These two are short values (a unit label, a number) but still need a usable minimum. */ table[id^="sol"][id$="-table"] th:nth-child(4), table[id^="sol"][id$="-table"] td:nth-child(4) { min-width: 80px; } table[id^="sol"][id$="-table"] th:nth-child(5), table[id^="sol"][id$="-table"] td:nth-child(5) { min-width: 80px; } /* The two new per-item override columns, same reasoning. */ table[id^="sol"][id$="-table"] th:nth-child(8), table[id^="sol"][id$="-table"] td:nth-child(8) { min-width: 100px; } table[id^="sol"][id$="-table"] th:nth-child(9), table[id^="sol"][id$="-table"] td:nth-child(9) { min-width: 100px; } .total-row td { font-weight: 700; background: var(--raised); border-top: 2px solid var(--border-strong); } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .dash-table { min-width: 720px; } .boq-table { min-width: 600px; } .boq-desc-col { min-width: 260px; } .boq-remove-row { color: var(--red); } .opportunity-boq-entry-table { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; } .opportunity-boq-entry-table td { padding: 8px; background: var(--card); } .opportunity-boq-entry-table tbody tr:focus-within td { background: color-mix(in srgb, var(--accent-soft) 52%, var(--card)); } .opportunity-boq-entry-table .boq-entry-input { width: 100%; min-width: 96px; min-height: 44px; padding: 9px 11px; border: 2px solid color-mix(in srgb, var(--text) 30%, var(--border-strong)); border-radius: 9px; background: var(--card); color: var(--text); -webkit-text-fill-color: var(--text); caret-color: var(--accent); font-size: 14px; font-weight: 650; opacity: 1; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); } .opportunity-boq-entry-table .boq-entry-input:hover { border-color: color-mix(in srgb, var(--accent) 58%, var(--border-strong)); } .opportunity-boq-entry-table .boq-entry-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 23%, transparent); } .opportunity-boq-entry-table .boq-description-input { min-width: 250px; } .opportunity-boq-entry-table .boq-quantity-input { min-width: 105px; direction: ltr; text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .version-group-header td { background: var(--raised); font-weight: 650; font-size: 12.5px; } .version-row td { background: transparent; } .dashboard-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); } .dashboard-pagination > :last-child { justify-self: end; } .dashboard-row-actions { text-align: end; } .is-active-row td { background: var(--gold-50); } .is-under { color: var(--red); } .is-estimate { color: var(--muted); font-style: italic; } .remaining-open { color: var(--amber); font-weight: 600; } /* On a phone every table turns into a stack of labelled cards - the header is carried per cell in data-label, so no table needs its own mobile markup. */ @media (max-width: 760px) { .responsive-cards thead { display: none; } .responsive-cards, .responsive-cards tbody, .responsive-cards tr, .responsive-cards td { display: block; width: 100%; } .responsive-cards tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--card); } .responsive-cards td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; gap: var(--sp-3); } .responsive-cards td::before { content: attr(data-label); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); flex: 0 0 40%; } .responsive-cards td.num { text-align: end; } .dashboard-proposals-table .dashboard-row-actions { white-space: normal !important; flex-wrap: wrap; justify-content: flex-end; } .dashboard-proposals-table .dashboard-version-group td { display: none; } .dashboard-proposals-table .dashboard-version-group td[colspan] { display: block; padding: var(--sp-2) 0 !important; } .dashboard-proposals-table .dashboard-version-group td[colspan]::before { content: none; } .dashboard-pagination { padding-inline: 0; } .dash-table, .boq-table { min-width: 0; } .opportunity-boq-entry-table tr { padding: var(--sp-3); } .opportunity-boq-entry-table td { align-items: center; padding: 7px 0; } .opportunity-boq-entry-table td::before { flex-basis: 34%; } .opportunity-boq-entry-table .boq-entry-input, .opportunity-boq-entry-table .boq-description-input, .opportunity-boq-entry-table .boq-quantity-input { min-width: 0; width: 66%; min-height: 48px; font-size: 16px; } .opportunity-boq-entry-table .boq-row-action::before { display: none; } .opportunity-boq-entry-table .boq-row-action, .opportunity-boq-entry-table .boq-remove-row { width: 100%; } .opportunity-boq-entry-table .boq-remove-row { min-height: 44px; } .territories-grid { grid-template-columns: 1fr !important; } } /* ===================================================================== Badges ===================================================================== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--navy-50); color: var(--navy-ink); font-size: 11.5px; font-weight: 650; white-space: nowrap; } .badge-approved, .badge-status-won { background: var(--green-bg); color: var(--green); } .badge-pending, .badge-warn, .badge-status-sent { background: var(--amber-bg); color: var(--amber); } .badge-rejected, .badge-status-lost { background: var(--red-bg); color: var(--red); } .badge-unassigned, .badge-status-draft { background: var(--bg); color: var(--muted); } .basis-tag { background: var(--blue-bg); color: var(--blue); } /* The workflow state badge (see templates/_workflow_strip.html). */ .badge.wf-badge { background: var(--amber-bg); color: var(--amber); } .badge.wf-badge.wf-approved, .badge.wf-badge.wf-delivered { background: var(--green-bg); color: var(--green); } .badge.wf-badge.wf-draft { background: var(--bg); color: var(--muted); } /* ===================================================================== KPIs and stats ===================================================================== */ .kpis { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--sp-5); } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-xs); } .kpi .label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; } .kpi .value { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; } .kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .stat { font-size: 12.5px; color: var(--muted); } .stat b { color: var(--text); font-variant-numeric: tabular-nums; } .muted-stat { color: var(--faint); font-size: 12.5px; } /* The home hub and the "commercial or government" chooser. */ .hub-grid, .type-choice-grid, .customer-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .type-choice-card, .customer-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-xs); color: var(--text); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .type-choice-card:hover, .customer-card:hover { border-color: var(--gold); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); } .type-choice-card .icon { font-size: 26px; margin-bottom: var(--sp-2); } .type-choice-card h3 { margin: 0 0 6px; font-size: 15px; } .type-choice-card p { margin: 0; color: var(--muted); font-size: 13px; } .customer-card { display: flex; align-items: center; gap: var(--sp-3); } .customer-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; background: var(--navy-50); color: var(--navy-ink); display: grid; place-items: center; font-weight: 700; } .customer-body { min-width: 0; flex: 1 1 auto; } .customer-name { font-weight: 650; display: block; } .customer-meta { color: var(--muted); font-size: 12.5px; display: block; } .customer-go { color: var(--faint); } /* ===================================================================== The workflow strip (templates/_workflow_strip.html) ===================================================================== */ .wf-strip { border: 1px solid var(--border); border-radius: var(--radius); background: var(--raised); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); } .wf-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); } .wf-title { font-weight: 650; font-size: 13px; } .wf-step { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .wf-track { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; } .wf-node { flex: 1 1 92px; min-width: 92px; text-align: center; position: relative; padding-top: 18px; font-size: 11px; color: var(--muted); } .wf-node .wf-dot { position: absolute; top: 3px; inset-inline-start: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); border: 2px solid var(--raised); } html[dir="rtl"] .wf-node .wf-dot { transform: translateX(50%); } .wf-node::before { content: ""; position: absolute; top: 8px; inset-inline-start: 0; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; } .wf-node:first-child::before { inset-inline-start: 50%; width: 50%; } .wf-node:last-child::before { width: 50%; } .wf-node.done .wf-dot, .wf-node.done::before { background: var(--gold); } .wf-node.now { color: var(--text); font-weight: 700; } .wf-node.now .wf-dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-50); } .wf-node .wf-label { position: relative; z-index: 1; display: block; } .wf-returned { margin-top: var(--sp-3); padding: 10px 13px; border-radius: var(--radius-sm); background: var(--red-bg); border-inline-start: 3px solid var(--red); } .wf-returned .wf-note { margin-top: 4px; white-space: pre-wrap; } .wf-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-4); } .wf-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; } .wf-inline-label { font-size: 12px; color: var(--muted); margin: 0; } .wf-form select, .wf-note-input { width: auto; min-width: 200px; height: 32px; min-height: 32px; padding-block: 4px; font-size: 13px; } .returned-note { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--red); } /* Engineer -> Account Manager technical-document hand-off. */ .section-title-icon, .technical-file-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--accent); background: var(--accent-soft); } .section-title-icon { width: 30px; height: 30px; border-radius: 9px; } .section-title-icon .ico { width: 17px; height: 17px; } .technical-intro { max-width: 820px; } .technical-upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--raised); } .technical-file-field { min-width: 0; } .technical-file-field .hint { display: block; overflow-wrap: anywhere; } .technical-version-list { display: grid; gap: 10px; margin-top: var(--sp-4); } .technical-version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--raised); } .technical-version.is-sent { border-inline-start: 4px solid var(--green); } .technical-file-icon { width: 38px; height: 38px; border-radius: 11px; } .technical-version-copy { min-width: 0; } .technical-version-copy strong, .technical-version-copy span { display: block; } .technical-version-copy strong { overflow-wrap: anywhere; } .technical-version-copy > span { margin-top: 2px; color: var(--muted); font-size: 12px; } .technical-version-copy .technical-delivery-state { color: var(--green); font-weight: 650; } .technical-version-copy .technical-draft-state { color: var(--amber); font-weight: 650; } .technical-send-form { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); background: var(--green-bg); } .technical-send-form strong, .technical-send-form span { display: block; } .technical-send-form span { margin-top: 2px; color: var(--muted); font-size: 12.5px; } .technical-gate, .technical-empty { margin-top: var(--sp-4); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--amber-bg); color: var(--amber); font-weight: 600; } .received-bundle-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 330px; } .received-bundle-label { color: var(--muted); font-size: 10.5px; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; } .received-bundle-label:not(:first-child) { margin-inline-start: 8px; } .received-technical-files { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .received-technical-files .btn { max-width: 260px; overflow-wrap: anywhere; white-space: normal; } /* ===================================================================== Bulk selection bar ===================================================================== */ /* A row inside the card it belongs to, not a floating bar - it sits directly above the table whose rows it acts on. */ .bulk-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 0 var(--sp-5) var(--sp-3); } /* The delete form's own copy of each row checkbox - a control may belong to only one form, so the second one rides along invisibly. It must stay in the layout (an unrendered control is still submitted, but must exist), so it is hidden by size and opacity rather than display:none. */ .bulk-shadow { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } [data-bulk-action][disabled] { opacity: .45; cursor: not-allowed; } .bulk-count { font-weight: 650; font-variant-numeric: tabular-nums; } /* ===================================================================== Sign-in, set-password, setup, 2FA ===================================================================== */ .auth-wrap { display: grid; place-items: center; min-height: calc(100vh - var(--topbar-h) - 64px); padding: var(--sp-4); } .auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-8); } .auth-card h1 { font-size: 20px; margin: 0 0 6px; } .auth-card > .body { padding: 0; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--sp-5); } .auth-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; } .auth-product { font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .auth-card .auth-title { display: block; /* .card > h2 is a flex row; this is not */ border: 0; padding: 0; margin: 0 0 var(--sp-5); text-align: center; font-size: 15px; color: var(--muted); font-weight: 550; } .auth-card .btn { width: 100%; height: 42px; } .twofa-inline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .twofa-setup { display: grid; gap: var(--sp-5); grid-template-columns: minmax(180px, 220px) 1fr; align-items: start; } .twofa-qr { background: #fff; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); } .twofa-steps { margin: 0; padding-inline-start: 20px; line-height: 1.9; } .twofa-manual { font-size: 12.5px; color: var(--muted); } .twofa-secret { font-family: var(--font-num); background: var(--raised); padding: 3px 7px; border-radius: 5px; letter-spacing: .08em; } .twofa-on { color: var(--green); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; } .twofa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; } .twofa-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); } .recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); font-family: var(--font-num); font-size: 14px; letter-spacing: .06em; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); } .recovery-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); } .role-checks { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .role-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 0; } /* ===================================================================== Reports, targets and the meeting pack ===================================================================== */ .pack-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .pack-kv { margin: 0 0 6px; font-size: 13.5px; } .pack-kv .k { color: var(--muted); margin-inline-end: 6px; } .report-note { color: var(--muted); font-size: 12.5px; margin-top: var(--sp-2); } .report-layout { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .layout-list { display: flex; flex-direction: column; gap: 6px; } .layout-move { display: flex; gap: 4px; } .bar-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr auto; gap: var(--sp-3); align-items: center; margin-bottom: 9px; } .bar-label { font-size: 13px; color: var(--muted); } .bar-track { background: var(--bg); border-radius: var(--radius-pill); height: 10px; overflow: hidden; } .bar-fill { background: var(--gold); height: 100%; border-radius: var(--radius-pill); } .bar-value { font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; } .mini-bar { background: var(--bg); border-radius: var(--radius-pill); height: 6px; overflow: hidden; min-width: 60px; } .mini-bar-text { font-size: 11.5px; color: var(--muted); } .win-prob-factor { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; border-bottom: 1px solid var(--border); } .target-kpis, .target-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .target-tile { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .target-tile-label { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; } .target-tile-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .target-bar { background: var(--bg); border-radius: var(--radius-pill); height: 12px; overflow: hidden; position: relative; } .target-bar-fill { background: var(--green); height: 100%; } .target-bar-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--navy-ink); } .target-live { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); background: var(--card); } .target-live-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: baseline; } .target-live-label { font-size: 12px; color: var(--muted); } .target-people { display: grid; gap: var(--sp-3); } .target-grid { width: 100%; overflow-x: auto; } .target-grid-name { font-weight: 600; } .target-grid-total { font-weight: 700; font-variant-numeric: tabular-nums; } .target-grid-quarters, .target-grid-person, .target-grid-context { font-size: 12.5px; color: var(--muted); } .target-cell input { height: 32px; min-height: 32px; padding: 4px 8px; text-align: end; font-variant-numeric: tabular-nums; } /* The tiles are a grid INSIDE a flex row; without a width of their own they shrank to one column stacked down the side of an empty card. */ .target-compare { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); } .target-compare .target-tiles { flex: 1 1 100%; } .target-tile[data-role="difference-row"].is-under .target-tile-value { color: var(--amber); } .target-tile[data-role="difference-row"].is-over .target-tile-value { color: var(--red); } .target-tile[data-role="difference-row"].is-balanced .target-tile-label { color: var(--green); } /* ---- Set Targets: filters, the manager switch, the row tools ---- */ .target-filters { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; } .target-filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; } .target-filter label { font-size: 12px; font-weight: 600; color: var(--muted); } .target-filters-hint { margin: 0; flex: 1 1 260px; } .manager-switch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); } .manager-switch-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-inline-end: 4px; } .manager-chip { border: 1px solid var(--border-strong); background: var(--card); color: var(--text); border-radius: var(--radius-pill); padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .manager-chip:hover { background: var(--navy-50); } .manager-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .target-tools { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: var(--sp-3); background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); } .target-tools-target { font-size: 13px; color: var(--muted); } .target-tools-target strong { color: var(--navy-ink); } .target-tools-target strong.is-flash { color: var(--red); } .target-tools-sep { width: 1px; height: 22px; background: var(--border); } .target-spread { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .target-spread input { width: 150px; height: 32px; min-height: 32px; padding: 4px 8px; text-align: end; font-variant-numeric: tabular-nums; } .target-spread-label { white-space: nowrap; } .target-cell-wrap { min-width: 118px; } .target-grid th.target-grid-name { min-width: 210px; text-transform: none; letter-spacing: 0; } .target-grid-person { font-weight: 650; font-size: 13.5px; color: var(--navy-ink); display: inline-block; text-transform: none; letter-spacing: 0; } .target-grid-person:hover { text-decoration: underline; } .target-grid-context { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .ctx-chip { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap; } .ctx-chip b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; } .target-savebar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); } .target-unsaved { font-size: 12.5px; font-weight: 600; color: var(--amber); margin-inline-start: auto; } /* ===================================================================== Notifications panel ===================================================================== */ .notif-wrap { position: relative; } .notif-btn { position: relative; } .notif-dot { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; } .notif-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .notif-panel-header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 11px 14px; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 13px; position: sticky; top: 0; background: var(--card); } .notif-mark-all-btn { background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--navy-ink); padding: 2px 4px; } .notif-panel a, .notif-panel .notif-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); } .notif-panel a:hover { background: var(--navy-50); text-decoration: none; } .notif-msg { font-size: 13px; } .notif-meta { font-size: 11.5px; color: var(--faint); margin-top: 3px; } .notif-empty { padding: var(--sp-6); text-align: center; color: var(--muted); font-size: 13px; } .unread { background: var(--gold-50); } /* ===================================================================== Responsive: the sidebar becomes a drawer ===================================================================== */ @media (max-width: 1000px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; inset-inline-start: 0; width: min(84vw, var(--sidebar-w)); transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--shadow-lg); background: var(--card); } html[dir="rtl"] .sidebar { transform: translateX(102%); } .sidebar.is-open, html[dir="rtl"] .sidebar.is-open { transform: translateX(0); } .sidebar-close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; } .menu-btn { display: grid; } main { padding: var(--sp-4) var(--sp-4) var(--sp-8); } .user-text { display: none; } } @media (max-width: 620px) { .nav-search-form { display: none; } .sidebar-search-form { display: block; } .toolbar { align-items: stretch; } .proposal-toolbar-actions { width: 100%; } .proposal-toolbar-actions > .btn, .proposal-toolbar-actions > form { flex: 1 1 145px; } .proposal-toolbar-actions > form > .btn, .proposal-toolbar-actions > form > label.btn { width: 100%; } .card > .body { padding: var(--sp-4); } .kpi .value { font-size: 20px; } /* 16px prevents Safari from zooming the whole page when a field receives focus; full-width controls keep file names and action rows on screen. */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input[type="file"], select, textarea { font-size: 16px; } .technical-upload-form { grid-template-columns: 1fr; } .technical-upload-form .btn { width: 100%; } .technical-version { grid-template-columns: auto minmax(0, 1fr); } .technical-version > .btn { grid-column: 1 / -1; width: 100%; } .technical-send-form { align-items: stretch; flex-direction: column; } .technical-send-form .btn, .opportunity-footer-actions .btn { width: 100%; } .opportunity-form-actions { position: sticky; z-index: 12; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); } .opportunity-form-actions .btn { flex: 1 1 100%; min-height: 46px; } .received-bundles-table .received-bundle-actions { min-width: 0; align-items: stretch; flex-direction: column; } .received-bundles-table .received-bundle-actions .btn { width: 100%; min-height: 44px; } .received-bundle-label:not(:first-child) { margin: 7px 0 0; } .wf-strip { padding: var(--sp-4); } .wf-track { display: grid; grid-template-columns: 1fr; gap: 0; } .wf-node { min-width: 0; text-align: start; padding: 7px 0 7px 30px; } html[dir="rtl"] .wf-node { padding: 7px 30px 7px 0; } .wf-node .wf-dot { top: 11px; inset-inline-start: 7px; transform: none; } html[dir="rtl"] .wf-node .wf-dot { transform: none; } .wf-node::before { top: 0; bottom: 0; inset-inline-start: 12px; width: 2px; height: 100%; } .wf-node:first-child::before { inset-inline-start: 12px; width: 2px; top: 12px; height: calc(100% - 12px); } .wf-node:last-child::before { width: 2px; height: 12px; } .wf-form, .wf-form select, .wf-note-input, .wf-actions .btn { width: 100%; } } @media (hover: none) and (pointer: coarse) { .btn, .btn.small, .icon-btn, .menu-btn, .sidebar-close, .nav-lang-btn { min-height: 44px; } .icon-btn, .menu-btn, .sidebar-close { width: 44px; height: 44px; } .nav-item { min-height: 44px; } } /* "Install app" (PWA) - permanently present so it is reachable on every visit, not only the one visit where the browser happens to fire beforeinstallprompt. The ONLY place it is hidden is inside the already-installed app, where there is nothing left to install. Done in CSS as well as JS so it is right before the script runs, with no flash of an install button inside the installed app. */ @media all and (display-mode: standalone), all and (display-mode: fullscreen), all and (display-mode: minimal-ui) { .pwa-install-btn { display: none !important; } } /* ===================================================================== Print - the meeting pack and the reports are printed ===================================================================== */ @media print { .sidebar, .topbar, .sidebar-scrim, .no-print, .bulk-bar, .btn { display: none !important; } .app-shell { display: block; } main { padding: 0; max-width: none; } .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } body { background: #fff; } } /* The slot the Sales Pipeline views fill with their one primary action (see templates/pipeline_view.html and app.js's setPageActions). It sits in the page's own toolbar, beside the title, so those screens carry their action exactly where every other page in the app carries it. Empty on the views that have no primary action - hence :empty, so it contributes no gap when there is nothing in it. */ .page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .page-actions:empty { display: none; } /* ===================================================================== Experience v3 — premium operations workspace This layer intentionally sits last. It refreshes every shared component while preserving the page-specific layout rules above and both RTL/LTR directions. JavaScript adds only presentation wrappers; form names and values remain untouched. ===================================================================== */ :root[data-theme="light"] { color-scheme: light; --navy: #0a1938; --navy-700: #122a54; --navy-ink: #102d5e; --navy-50: #edf3fb; --gold: #b78328; --gold-strong: #94651d; --gold-light: #e4bd68; --gold-50: #fff8e8; --accent: #168da0; --accent-soft: #e7f7f9; --bg: #f2f5fa; --card: #ffffff; --raised: #f7f9fc; --text: #101828; --muted: #5d6b82; --faint: #8a98ac; --border: #dfe6ef; --border-strong: #c9d4e2; --green: #0f7a59; --green-bg: #e8f7f0; --red: #bd3d45; --red-bg: #fff0f1; --amber: #956017; --amber-bg: #fff5e4; --blue: #275fa8; --blue-bg: #ebf3ff; --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --shadow-xs: 0 1px 2px rgba(10, 25, 56, .04); --shadow-sm: 0 7px 24px rgba(10, 25, 56, .07); --shadow-md: 0 14px 38px rgba(10, 25, 56, .10); --shadow-lg: 0 28px 70px rgba(10, 25, 56, .18); --ring: 0 0 0 4px rgba(22, 141, 160, .15); --sidebar-w: 272px; --topbar-h: 70px; } :root[data-theme="dark"] { color-scheme: dark; --navy: #08142d; --navy-700: #12264c; --navy-ink: #d4e4ff; --navy-50: #17243b; --gold: #d1a34e; --gold-strong: #e0b65e; --gold-light: #f0cb7c; --gold-50: #302712; --accent: #55c8d8; --accent-soft: #122e34; --bg: #0c1220; --card: #121b2a; --raised: #172235; --text: #f0f4fb; --muted: #a4b1c5; --faint: #718198; --border: #253249; --border-strong: #34445f; --green: #64d5ac; --green-bg: #11352b; --red: #f17a82; --red-bg: #3a1d24; --amber: #efbd68; --amber-bg: #392c16; --blue: #8ebcff; --blue-bg: #172b49; --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .24); --shadow-sm: 0 9px 26px rgba(0, 0, 0, .25); --shadow-md: 0 18px 44px rgba(0, 0, 0, .32); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .48); --ring: 0 0 0 4px rgba(85, 200, 216, .16); --sidebar-w: 272px; --topbar-h: 70px; } body { background: radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--accent) 10%, transparent) 0, transparent 32%), radial-gradient(circle at 12% 105%, color-mix(in srgb, var(--gold) 8%, transparent) 0, transparent 28%), var(--bg); letter-spacing: -.005em; } /* Dark navigation rail with a living brand mark. */ .sidebar { background: radial-gradient(circle at 20% 0, rgba(67, 173, 191, .16), transparent 28%), linear-gradient(180deg, #0d2043 0%, #08142d 58%, #071124 100%); border-inline-end: 0; box-shadow: 12px 0 40px rgba(5, 14, 32, .13); color: #fff; } .sidebar-brand { height: var(--topbar-h); border-color: rgba(255,255,255,.09); padding-inline: 20px; } .sidebar-name { color: #fff; font-size: 16px; letter-spacing: .01em; } .sidebar-mark, .auth-mark { position: relative; overflow: visible; background: linear-gradient(145deg, #e2bb67, #a8731e); box-shadow: 0 8px 24px rgba(205, 158, 67, .27), inset 0 1px 0 rgba(255,255,255,.35); } .sidebar-mark::after, .auth-mark::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; inset-inline-end: -2px; bottom: -1px; background: #45d2be; border: 2px solid #0d2043; box-shadow: 0 0 0 3px rgba(69,210,190,.12); } .sidebar-nav { padding: 18px 14px 24px; } .nav-group { margin-top: 18px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.055); } .nav-group-title { min-height: 34px; color: rgba(219,230,247,.58); padding-inline: 12px; font-size: 10px; transition: color .18s ease, background .18s ease; } .nav-group-title:hover, .nav-group-title:focus-visible { color: #fff; background: rgba(255,255,255,.07); } .nav-group.has-current .nav-group-title { color: var(--gold-light); } .nav-group-chevron { color: rgba(228,189,104,.8); } .nav-group:not(.is-collapsed) .nav-group-chevron { transform: rotate(0); } .nav-item { min-height: 44px; padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; color: rgba(233,240,250,.68); font-weight: 560; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .nav-item:hover { background: rgba(255,255,255,.075); color: #fff; transform: translateX(3px); text-decoration: none; } html[dir="rtl"] .nav-item:hover { transform: translateX(-3px); } .nav-item.is-current { background: linear-gradient(110deg, rgba(255,255,255,.16), rgba(255,255,255,.075)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.12); } .nav-item.is-current::before { top: 10px; bottom: 10px; width: 4px; box-shadow: 0 0 16px rgba(228,189,104,.6); } .nav-ico { position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 9px; color: rgba(232,240,252,.52); background: rgba(255,255,255,.045); transition: transform .22s ease, color .22s ease, background .22s ease; } .nav-ico::after { content: ""; position: absolute; inset: 50%; border-radius: inherit; background: rgba(255,255,255,.18); opacity: 0; transform: translate(-50%, -50%) scale(.2); transition: inset .25s ease, opacity .25s ease, transform .25s ease; } .nav-item:hover .nav-ico { transform: scale(1.08) rotate(-3deg); color: #fff; background: rgba(255,255,255,.1); } .nav-item:hover .nav-ico::after { inset: 0; opacity: .45; transform: translate(0, 0) scale(1); } .nav-item:active .nav-ico { transform: scale(.9); } .nav-item.is-current .nav-ico { color: var(--gold-light); background: rgba(228,189,104,.12); } .nav-count { background: #d4a84e; color: #13203a; box-shadow: 0 0 0 3px rgba(212,168,78,.12); } .sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 18px 20px; } .sidebar-foot .btn.secondary { width: 100%; background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); } .sidebar-foot .btn.secondary:hover { background: rgba(255,255,255,.12); } /* Glass top bar and richer identity controls. */ .topbar { height: var(--topbar-h); padding-inline: 26px; background: color-mix(in srgb, var(--card) 86%, transparent); border-bottom-color: color-mix(in srgb, var(--border) 76%, transparent); box-shadow: 0 6px 24px rgba(10,25,56,.035); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); } .icon-btn, .nav-lang-btn, .user-btn { border-color: var(--border); background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: var(--shadow-xs); transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } .icon-btn .ico { transition: transform .22s ease, color .22s ease; } .icon-btn:hover .ico { transform: scale(1.12); } .notif-btn.is-open { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .notif-btn.is-open .ico { animation: doitc-bell-ring .45s ease; } .user-wrap.is-open .user-avatar { box-shadow: 0 0 0 4px var(--accent-soft), 0 7px 18px rgba(22,141,160,.25); transform: scale(1.04); } .user-avatar { transition: transform .2s ease, box-shadow .2s ease; } .icon-btn:hover, .nav-lang-btn:hover, .user-btn:hover { transform: translateY(-2px); background: var(--card); color: var(--navy-ink); box-shadow: var(--shadow-sm); } .icon-btn:active, .nav-lang-btn:active, .user-btn:active { transform: translateY(0) scale(.96); } .theme-toggle .ico { transition: transform .35s ease; } .theme-toggle:hover .ico { transform: rotate(-18deg); } .theme-toggle.is-dark .ico { transform: rotate(-35deg); color: var(--gold-light); } .user-avatar { background: linear-gradient(145deg, var(--navy-700), var(--accent)); box-shadow: 0 5px 14px rgba(22,141,160,.18); } .user-menu, .notif-panel { border-radius: 16px; box-shadow: var(--shadow-lg); transform-origin: top right; } html[dir="rtl"] .user-menu, html[dir="rtl"] .notif-panel { transform-origin: top left; } .user-menu:not(.hidden), .notif-panel:not(.hidden) { animation: doitc-menu-open .18s ease-out; } .topbar .nav-search-input { height: 42px; min-height: 42px; border-radius: 13px; background: var(--raised); } main { max-width: 1680px; padding: 32px 34px 54px; } .page-title { font-size: clamp(24px, 2vw, 31px); font-weight: 760; letter-spacing: -.035em; } .page-title-enhanced { display: flex; align-items: center; gap: 12px; } .page-title-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); } .page-title-icon .ui-icon { width: 21px; height: 21px; } .toolbar { margin-bottom: 26px; align-items: center; } .back-link { padding: 6px 10px; border-radius: 9px; transition: background .15s ease, color .15s ease; } .back-link:hover { background: var(--navy-50); } /* Layered cards and data surfaces. */ .card { border-color: color-mix(in srgb, var(--border) 88%, transparent); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px; background: linear-gradient(155deg, color-mix(in srgb, var(--card) 97%, var(--accent-soft)), var(--card) 45%); } .card > h2 { padding: 18px 22px 15px; font-size: 16px; border-bottom-color: var(--border); } .card > .body { padding: 22px; } .tabs, .page-tabs { gap: 5px; width: fit-content; max-width: 100%; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 72%, transparent); box-shadow: var(--shadow-xs); } .tabs a, .page-tabs a, .tabs button { border: 0; border-radius: 10px; padding: 9px 14px; } .tabs a.active, .page-tabs a.active, .tabs button.active { border: 0; background: var(--card); color: var(--navy-ink); box-shadow: var(--shadow-sm); } .btn { min-height: 40px; height: 40px; padding-inline: 16px; border-radius: 11px; font-weight: 680; box-shadow: var(--shadow-xs); transition: transform .17s ease, box-shadow .17s ease, background .17s ease, border-color .17s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0) scale(.985); } .btn.gold { background: linear-gradient(135deg, #c7993e, #9b691d); border-color: transparent; box-shadow: 0 8px 20px rgba(155,105,29,.2), inset 0 1px 0 rgba(255,255,255,.25); } .btn.gold:hover { background: linear-gradient(135deg, #d4aa53, #a97624); box-shadow: 0 12px 28px rgba(155,105,29,.27); } .btn.secondary { background: color-mix(in srgb, var(--card) 88%, var(--raised)); } .btn.danger { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .btn.small { min-height: 34px; height: 34px; border-radius: 10px; } .button-icon { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .2s ease; } .btn:hover .button-icon { transform: scale(1.13) rotate(-4deg); } html[dir="rtl"] .btn:hover .button-icon { transform: scale(1.13) rotate(4deg); } .btn.danger:hover .button-icon { transform: translateY(-1px) rotate(6deg); } .btn:active .button-icon { transform: scale(.82); } @keyframes doitc-menu-open { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes doitc-bell-ring { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 65% { transform: rotate(13deg); } } /* Context-aware field shells, applied to static and dynamically-added inputs. */ label { color: var(--muted); font-size: 12px; font-weight: 680; letter-spacing: .01em; } .smart-field { position: relative; display: inline-flex; align-items: center; width: 100%; min-width: 0; vertical-align: middle; } .smart-field-control { min-height: 44px !important; padding-inline-start: 47px !important; padding-inline-end: 35px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--card) 94%, var(--raised)) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text); caret-color: var(--accent); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .smart-field-control::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); opacity: 1; } .smart-field-control:hover { background: var(--card) !important; border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); } .smart-field-control:focus { border-color: var(--accent) !important; box-shadow: var(--ring) !important; transform: translateY(-1px); } .smart-field-icon { position: absolute; z-index: 2; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--faint); cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease; } .smart-field-icon .ui-icon { width: 17px; height: 17px; } .smart-field:hover .smart-field-icon { color: var(--muted); background: var(--raised); } .smart-field.is-focused .smart-field-icon { color: var(--accent); background: var(--accent-soft); transform: translateY(-50%) scale(1.04); } .smart-field-state { position: absolute; z-index: 2; inset-inline-end: 10px; top: 50%; transform: translateY(-50%) scale(.7); width: 17px; height: 17px; display: grid; place-items: center; color: var(--green); opacity: 0; transition: opacity .18s ease, transform .18s ease; } .smart-field-state .ui-icon { width: 15px; height: 15px; } .smart-field.has-value:not(.smart-field-lock):not(.smart-field-select):not(.smart-field-upload) .smart-field-state, .smart-field.is-invalid .smart-field-state { opacity: 1; transform: translateY(-50%) scale(1); } .smart-field.is-invalid .smart-field-state { color: var(--red); } .smart-field.is-invalid .smart-field-control { border-color: var(--red) !important; background: var(--red-bg) !important; } .smart-field-textarea { align-items: flex-start; } .smart-field-textarea .smart-field-icon { top: 7px; transform: none; } .smart-field-textarea.is-focused .smart-field-icon { transform: scale(1.04); } .smart-field-textarea .smart-field-state { top: 13px; transform: scale(.7); } .smart-field-mic { position:absolute; z-index:2; inset-inline-end:8px; bottom:8px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:10px; background:var(--raised); color:var(--muted); cursor:pointer; } .smart-field-mic .ui-icon { width:17px; height:17px; } .smart-field-mic.is-listening { color:#fff; background:var(--red); animation:mic-pulse 1s ease-in-out infinite; } .smart-field-textarea:has(.smart-field-mic) .smart-field-control { padding-inline-end:50px !important; } @keyframes mic-pulse { 50% { box-shadow:0 0 0 7px color-mix(in srgb,var(--red) 20%,transparent); } } .smart-field-textarea.has-value .smart-field-state, .smart-field-textarea.is-invalid .smart-field-state { transform: scale(1); } .smart-field-upload .smart-field-control { border-style: dashed; padding-block: 9px; } .smart-field-select .smart-field-state, .smart-field-lock .smart-field-state, .smart-field-upload .smart-field-state { display: none; } :where(.inline-search,.wf-form,.twofa-inline,.assign-form,.target-tools,.target-filters) > .smart-field { width: auto; flex: 1 1 170px; } .assign-form > .smart-field { min-width: 150px; } .interactive-choice { border-radius: 10px; padding: 6px 9px; transition: background .15s ease, color .15s ease; } .interactive-choice:hover { background: var(--navy-50); color: var(--text); } input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; cursor: pointer; } /* KPI tiles become visual instruments instead of plain numbers. */ .kpis { gap: 16px; margin-bottom: 26px; } .kpi { position: relative; min-height: 126px; padding: 21px 22px; overflow: hidden; border-radius: 17px; border-color: var(--border); box-shadow: var(--shadow-sm); background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--accent-soft) 42%, var(--card))); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .kpi::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold-light)); opacity: .8; } .kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } .kpi-icon { position: absolute; inset-inline-end: 17px; top: 17px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); transition: transform .22s ease; } .kpi:hover .kpi-icon { transform: rotate(-6deg) scale(1.08); } .kpi-icon .ui-icon { width: 18px; height: 18px; } .kpi .label { padding-inline-end: 42px; color: var(--muted); } .kpi .value { margin-top: 14px; font-size: clamp(25px, 2vw, 31px); font-weight: 760; color: var(--navy-ink); } table { border-collapse: separate; border-spacing: 0; } table th { background: color-mix(in srgb, var(--raised) 82%, var(--accent-soft)); padding-block: 12px; } table td { padding-block: 13px; transition: background .14s ease; } table tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 58%, var(--card)); } .badge { padding: 4px 10px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); } .wf-strip { border-radius: 17px; background: linear-gradient(120deg, var(--raised), var(--card)); box-shadow: var(--shadow-xs); } /* Home becomes a proper launchpad with scalable SVGs. */ .hub-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 25px; } .type-choice-card, .customer-card { position: relative; overflow: hidden; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-sm); background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--navy-50) 52%, var(--card))); } .type-choice-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; inset-inline-end: -48px; bottom: -58px; background: color-mix(in srgb, var(--accent) 9%, transparent); transition: transform .28s ease; } .type-choice-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); } .type-choice-card:hover::after { transform: scale(1.35); } .type-choice-card .icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); transition: transform .22s ease; } .type-choice-card:hover .icon { transform: rotate(-5deg) scale(1.08); } .type-choice-card .icon .ico { width: 23px; height: 23px; } .type-choice-card h3 { font-size: 16px; font-weight: 720; } .type-choice-card p { line-height: 1.7; } .auth-shell { min-height: 100vh; background: radial-gradient(circle at 20% 20%, rgba(69,210,190,.11), transparent 28%), radial-gradient(circle at 80% 90%, rgba(212,168,78,.13), transparent 30%), linear-gradient(145deg, #071226 0%, #0d2043 46%, var(--bg) 46%, var(--bg) 100%); } .auth-card { max-width: 450px; border-radius: 24px; padding: 36px; box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--border) 70%, transparent); } .auth-brand { margin-bottom: 27px; } .auth-mark { width: 46px; height: 46px; border-radius: 14px; } .auth-product { font-size: 20px; } .auth-card .auth-title { font-size: 17px; } .flash { border-radius: 13px; box-shadow: var(--shadow-xs); } .ui-icon { width: 18px; height: 18px; display: block; } /* Opportunity command centre ----------------------------------------- */ .opportunity-center-heading, .section-heading-row, .weekly-brief-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; } .favorite-button { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--muted); font: inherit; font-weight: 680; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } .favorite-button span { font-size: 21px; color: var(--gold); line-height: 1; } .favorite-button:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-sm); } .favorite-button.is-favorite { color: var(--navy-ink); border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--card)); } .opportunity-center-tabs { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; display: flex; gap: 6px; overflow-x: auto; margin: 20px 0; padding: 6px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); } .opportunity-center-tabs a { flex: 0 0 auto; padding: 9px 13px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 680; } .opportunity-center-tabs a:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; } .readiness-card { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; margin-bottom: 24px; padding: 23px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--accent-soft) 55%, var(--card))); box-shadow: var(--shadow-sm); } .readiness-score { position: relative; width: 124px; height: 124px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle closest-side, var(--card) 77%, transparent 79% 99%), conic-gradient(var(--accent) var(--readiness), var(--border) 0); } .readiness-ready .readiness-score { background: radial-gradient(circle closest-side, var(--card) 77%, transparent 79% 99%), conic-gradient(var(--green) var(--readiness), var(--border) 0); } .readiness-attention .readiness-score { background: radial-gradient(circle closest-side, var(--card) 77%, transparent 79% 99%), conic-gradient(var(--gold) var(--readiness), var(--border) 0); } .readiness-score strong { font-size: 28px; color: var(--navy-ink); line-height: 1; } .readiness-score span { margin-top: 6px; color: var(--muted); font-size: 11px; } .readiness-body h2 { margin: 0 0 5px; font-size: 18px; } .readiness-body > .hint { margin: 0 0 15px; } .readiness-criteria { display: flex; flex-wrap: wrap; gap: 7px; } .readiness-criterion { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; } .readiness-criterion.is-complete { color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, var(--border)); background: var(--green-bg); } .readiness-criterion.is-partial { color: var(--amber); border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); } .tender-checklist-card > h2 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tender-checklist-card > h2 .count-pill { margin-inline-start: auto; } .checklist-progress { height: 7px; margin: -5px 0 18px; overflow: hidden; border-radius: 999px; background: var(--raised); } .checklist-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .25s ease; } .tender-checklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; margin-bottom: 16px; } .checklist-choice { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--raised); color: var(--text); cursor: pointer; } .checklist-choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .checklist-choice.is-checked { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 28%, var(--border)); } .checklist-choice > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--card); color: var(--green); } .checklist-choice input { position: absolute; opacity: 0; pointer-events: none; } .checklist-save-row { grid-column: 1 / -1; } .opportunity-timeline .section-title-icon, .tender-checklist-card .section-title-icon { display: inline-flex; color: var(--accent); } .timeline-list { list-style: none; margin: 18px 0; padding: 0; } .timeline-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding-bottom: 18px; } .timeline-item::before { content: ""; position: absolute; inset-inline-start: 6px; top: 15px; bottom: 0; width: 2px; background: var(--border); } .timeline-item:last-child::before { display: none; } .timeline-dot { width: 14px; height: 14px; margin-top: 3px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--border); } .timeline-task .timeline-dot { background: var(--gold); } .timeline-task_done .timeline-dot { background: var(--green); } .timeline-item strong { font-size: 13px; } .timeline-item p { margin: 3px 0; color: var(--text); font-size: 13px; } .timeline-item small { color: var(--faint); } /* Weekly brief and private quick access on Home. */ .morning-command { position: relative; margin: 24px 0; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--navy-ink) 96%, #000), color-mix(in srgb, var(--accent) 52%, var(--navy-ink))); color: #fff; box-shadow: var(--shadow-md); } .morning-command::after { content:""; position:absolute; inset-inline-end:-75px; top:-90px; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,.07); } .morning-command-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:20px; } .morning-command h2 { margin:4px 0 3px; color:#fff; font-size:22px; } .morning-command p { margin:0; color:rgba(255,255,255,.72); } .command-eyebrow { color:#8ce7dc; font-size:11px; font-weight:800; letter-spacing:.05em; } .command-metrics { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:21px; } .command-metric { min-height:112px; display:flex; flex-direction:column; padding:14px; border:1px solid rgba(255,255,255,.16); border-radius:15px; background:rgba(255,255,255,.1); color:#fff; backdrop-filter:blur(8px); transition:transform .18s ease,background .18s ease; } .command-metric:hover { transform:translateY(-3px); background:rgba(255,255,255,.16); text-decoration:none; } .command-metric strong { font-size:28px; line-height:1; } .command-metric span { margin-top:7px; color:rgba(255,255,255,.9); font-size:12px; font-weight:700; } .command-metric small { margin-top:auto; color:rgba(255,255,255,.58); font-size:10px; } .command-metric.tone-red strong { color:#ff9aa5; }.command-metric.tone-amber strong { color:#ffd77c; } .command-metric.tone-blue strong { color:#91d7ff; }.command-metric.tone-purple strong { color:#d1b6ff; } .weekly-brief, .home-quick-access { margin: 24px 0; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--navy-50) 55%, var(--card))); box-shadow: var(--shadow-sm); } .weekly-brief h2, .home-quick-access h2 { margin: 0; font-size: 18px; } .weekly-brief-head p, .section-heading-row p { margin: 5px 0 0; } .weekly-metrics { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; margin: 19px 0; } .weekly-metrics a { display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); } .weekly-metrics a:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); } .weekly-metrics strong { font-size: 25px; color: var(--navy-ink); } .weekly-metrics span { color: var(--muted); font-size: 12px; } .weekly-metrics .has-alert strong { color: var(--red); } .weekly-upcoming { border-top: 1px solid var(--border); padding-top: 15px; } .weekly-upcoming h3, .quick-access-columns h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); } .weekly-upcoming > a { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid var(--border); } .weekly-upcoming time { color: var(--muted); font-variant-numeric: tabular-nums; } .quick-access-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; } .quick-access-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 11px; border-radius: 10px; } .quick-access-item:hover { background: var(--accent-soft); text-decoration: none; } .quick-access-item strong { color: var(--text); } .quick-access-item span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ctrl/Cmd+K command palette. */ .command-key { align-self: center; margin-inline-end: 6px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--faint); font: inherit; font-size: 10px; cursor: pointer; } .command-mobile-btn { display: none; } .command-palette { position: fixed; inset: 0; z-index: 20000; } .command-palette-backdrop { position: absolute; inset: 0; background: rgba(7,18,38,.62); backdrop-filter: blur(4px); } .command-palette-dialog { position: relative; width: min(680px, calc(100% - 28px)); max-height: min(720px, calc(100vh - 70px)); margin: 8vh auto 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: 0 30px 80px rgba(7,18,38,.3); } .command-palette-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; border-bottom: 1px solid var(--border); } .command-palette-dialog h2 { margin: 0; font-size: 17px; } .command-palette-dialog header span { color: var(--faint); font-size: 11px; } .command-palette-input-wrap { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); color: var(--accent); } .command-palette-input-wrap input { border: 0; min-height: 44px; padding: 0; background: transparent; box-shadow: none !important; font-size: 16px; } .command-palette-results { max-height: 470px; overflow: auto; padding: 9px; color: var(--muted); } .command-results-heading { padding: 10px 11px 5px; color: var(--faint); font-size: 11px; font-weight: 750; text-transform: uppercase; } .command-result { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; padding: 11px; border-radius: 12px; color: var(--text); } .command-result:hover, .command-result.is-active { background: var(--accent-soft); text-decoration: none; } .command-result-type { width: fit-content; padding: 4px 7px; border-radius: 7px; background: var(--raised); color: var(--muted); font-size: 10px; } .command-result > span:last-child { display: flex; min-width: 0; flex-direction: column; } .command-result strong, .command-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-result small { margin-top: 3px; color: var(--muted); } .command-empty { padding: 30px; text-align: center; color: var(--muted); } .command-palette-open { overflow: hidden; } /* Explainable local decision assistant and personal priority radar. */ .smart-advisor { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: stretch; margin-bottom: 24px; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--accent-soft) 46%, var(--card))); box-shadow: var(--shadow-sm); overflow: hidden; } .smart-critical { border-color: color-mix(in srgb, var(--red) 42%, var(--border)); } .smart-warning { border-color: color-mix(in srgb, var(--gold) 48%, var(--border)); } .smart-healthy { border-color: color-mix(in srgb, var(--green) 38%, var(--border)); } .smart-health { min-height: 116px; display: grid; place-content: center; text-align: center; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } .smart-health > span { color: var(--muted); font-size: 11px; } .smart-health strong { margin-top: 7px; color: var(--navy-ink); font-size: 34px; line-height: 1; } .smart-health small { color: var(--faint); } .smart-critical .smart-health strong { color: var(--red); } .smart-warning .smart-health strong { color: var(--amber); } .smart-healthy .smart-health strong { color: var(--green); } .smart-advisor-body { min-width: 0; } .smart-advisor-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; } .smart-advisor-heading h2 { margin: 0 0 5px; font-size: 18px; } .smart-advisor-heading p { max-width: 440px; margin: 0; color: var(--faint); font-size: 11px; text-align: end; } .smart-level, .smart-local-badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: var(--raised); font-size: 10px; font-weight: 750; } .smart-critical .smart-level, .focus-critical .smart-level { color: var(--red); background: var(--red-bg); } .smart-warning .smart-level, .focus-warning .smart-level { color: var(--amber); background: color-mix(in srgb, var(--gold) 13%, var(--card)); } .smart-healthy .smart-level, .focus-healthy .smart-level { color: var(--green); background: var(--green-bg); } .smart-recommendation { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 15px 0 12px; padding: 13px 15px; border-radius: 13px; background: var(--card); border: 1px solid var(--border); } .smart-recommendation > strong { font-size: 15px; } .smart-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; } .smart-actions form { margin: 0; } .smart-signals { display: flex; flex-wrap: wrap; gap: 7px; } .smart-signal { padding: 6px 9px; border-radius: 9px; background: var(--raised); color: var(--muted); font-size: 11px; border: 1px solid var(--border); } .signal-critical { color: var(--red); background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 24%, var(--border)); } .signal-warning { color: var(--amber); background: color-mix(in srgb, var(--gold) 11%, var(--card)); } .signal-healthy { color: var(--green); background: var(--green-bg); } .focus-radar { margin: 24px 0; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--accent-soft) 40%, var(--card))); box-shadow: var(--shadow-sm); } .focus-radar h2 { margin: 0; font-size: 18px; } .smart-local-badge { max-width: 370px; line-height: 1.5; text-align: center; } .focus-radar-list { display: grid; gap: 9px; margin-top: 18px; } .focus-radar-item { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--text); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .focus-radar-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; border-color: var(--accent); } .focus-critical { border-inline-start: 4px solid var(--red); } .focus-warning { border-inline-start: 4px solid var(--gold); } .focus-healthy { border-inline-start: 4px solid var(--green); } .focus-risk { display: grid; text-align: center; } .focus-risk strong { color: var(--navy-ink); font-size: 24px; line-height: 1; } .focus-critical .focus-risk strong { color: var(--red); } .focus-warning .focus-risk strong { color: var(--amber); } .focus-risk small { margin-top: 4px; color: var(--faint); font-size: 9px; text-transform: uppercase; } .focus-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .focus-copy strong, .focus-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .focus-copy small { color: var(--muted); } .focus-reasons { display:flex; gap:5px; flex-wrap:wrap; } .focus-reasons em { padding:3px 6px; border-radius:6px; background:var(--raised); color:var(--faint); font-size:9px; font-style:normal; } .focus-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; } .focus-meta time { color: var(--muted); font-size: 11px; } .health-pill { display:inline-flex; align-items:baseline; gap:2px; min-width:58px; justify-content:center; padding:7px 9px; border-radius:999px; background:var(--raised); border:1px solid var(--border); } .health-pill:hover { text-decoration:none; transform:translateY(-1px); } .health-pill strong { font-size:15px; }.health-pill span { color:var(--faint); font-size:9px; } .health-critical strong { color:var(--red); }.health-warning strong { color:var(--amber); }.health-healthy strong,.health-closed strong { color:var(--green); } /* Admin data-quality control centre. */ .quality-generated { padding:7px 10px; border-radius:999px; background:var(--raised); color:var(--muted); font-size:11px; } .quality-scoreboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0; } .quality-score { display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:12px; padding:18px; border:1px solid var(--border); border-radius:17px; background:var(--card); color:var(--text); box-shadow:var(--shadow-xs); } .quality-score:hover { transform:translateY(-3px); text-decoration:none; box-shadow:var(--shadow-sm); } .quality-score > span { grid-row:1 / 3; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--green-bg); color:var(--green); } .quality-score.has-findings > span { background:color-mix(in srgb,var(--gold) 14%,var(--card)); color:var(--amber); } .quality-score strong { font-size:25px; line-height:1; }.quality-score small { margin-top:5px; color:var(--muted); } .quality-section { scroll-margin-top:calc(var(--topbar-h) + 18px); margin:18px 0; padding:21px; border:1px solid var(--border); border-radius:19px; background:var(--card); box-shadow:var(--shadow-xs); } .quality-section h2 { margin:0; font-size:17px; }.quality-list { display:grid; gap:8px; margin-top:16px; } .quality-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--raised); } .quality-row > div:first-child { display:flex; min-width:0; flex-direction:column; gap:4px; }.quality-row small { color:var(--muted); } .quality-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }.quality-empty { margin:0; padding:18px; border-radius:12px; background:var(--green-bg); color:var(--green); text-align:center; } @media (max-width: 780px) { .morning-command { padding:18px; }.morning-command-head { align-items:stretch; flex-direction:column; }.morning-command-head .btn { width:100%; justify-content:center; } .command-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.command-metric { min-height:105px; } .quality-scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); }.quality-row { align-items:stretch; flex-direction:column; }.quality-row .btn,.quality-actions { width:100%; }.quality-actions .btn { width:100%; justify-content:center; } .opportunity-center-heading, .section-heading-row, .weekly-brief-head { align-items: stretch; flex-direction: column; } .opportunity-center-heading form, .opportunity-center-heading .favorite-button { width: 100%; } .favorite-button { justify-content: center; } .readiness-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .readiness-criteria { justify-content: center; } .weekly-metrics { grid-template-columns: repeat(2, 1fr); } .quick-access-columns { grid-template-columns: 1fr; } .weekly-upcoming > a, .quick-access-item { align-items: flex-start; flex-direction: column; } .command-key { display: none; } .command-mobile-btn { display: grid; } .command-palette-dialog { margin-top: 10px; max-height: calc(100vh - 20px); } .command-palette-results { max-height: calc(100vh - 190px); } .smart-advisor { grid-template-columns: 1fr; } .smart-health { min-height: 92px; } .smart-advisor-heading, .smart-recommendation { align-items: stretch; flex-direction: column; } .smart-advisor-heading p { max-width: none; text-align: start; } .smart-actions, .smart-actions .btn, .smart-actions form { width: 100%; } .smart-actions .btn { justify-content: center; } .focus-radar-item { grid-template-columns: 56px minmax(0, 1fr); } .focus-meta { grid-column: 2; align-items: flex-start; flex-direction: row; } } @media (max-width: 430px) { .command-metrics,.quality-scoreboard { grid-template-columns:1fr; } .command-metric { min-height:88px; } } /* Business Development command centre --------------------------------- These tiles are links, not decoration: their selected state mirrors the server-side filter and each one drills into the exact records behind the number. */ .bd-hero { align-items: flex-end; } .bd-toolbar-actions, .bd-detail-badges { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } .bd-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 22px 0 26px; } .bd-kpi-card { position: relative; min-height: 150px; display: flex; flex-direction: column; padding: 19px; overflow: hidden; color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .bd-kpi-card::after { content: ""; position: absolute; inset-inline-end: -35px; bottom: -45px; width: 110px; height: 110px; border-radius: 50%; background: currentColor; opacity: .055; transition: transform .25s ease; } .bd-kpi-card:hover, .bd-kpi-card.is-selected { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: currentColor; } .bd-kpi-card:hover::after { transform: scale(1.25); } .bd-kpi-icon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 12px; color: currentColor; background: color-mix(in srgb, currentColor 10%, var(--card)); transition: transform .22s ease; } .bd-kpi-card:hover .bd-kpi-icon { transform: rotate(-6deg) scale(1.08); } html[dir="rtl"] .bd-kpi-card:hover .bd-kpi-icon { transform: rotate(6deg) scale(1.08); } .bd-kpi-icon .ico { width: 20px; height: 20px; } .bd-kpi-label { color: var(--muted); font-size: 12px; font-weight: 700; } .bd-kpi-card strong { margin-top: 4px; font-size: 30px; color: currentColor; } .bd-kpi-action { margin-top: auto; color: var(--muted); font-size: 11px; font-weight: 650; } .bd-tone-amber { color: #a66b05; }.bd-tone-red { color: #c43f4a; }.bd-tone-purple { color: #7256c7; } .bd-tone-blue { color: #2474b8; }.bd-tone-green { color: #168365; } [data-theme="dark"] .bd-tone-amber { color: #e3ad50; }[data-theme="dark"] .bd-tone-red { color: #f07982; } [data-theme="dark"] .bd-tone-purple { color: #ad98f2; }[data-theme="dark"] .bd-tone-blue { color: #73b8ef; } [data-theme="dark"] .bd-tone-green { color: #58c7a6; } .bd-filter-bar, .bd-review-form, .bd-action-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 11px; } .bd-filter-search, .bd-review-form > div, .bd-action-title { flex: 1 1 250px; } .bd-empty { text-align: center; color: var(--muted); padding: 30px !important; } .bd-score-pill { display: inline-flex; gap: 5px; align-items: baseline; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; } .bd-score-pill strong { font-size: 14px; } .bd-score-pill.is-hot, .bd-score-orb.is-hot { color: var(--red); background: var(--red-bg); } .bd-score-pill.is-warm, .bd-score-orb.is-warm { color: #a66b05; background: color-mix(in srgb, #e2a52d 14%, var(--card)); } .bd-score-pill.is-cool, .bd-score-orb.is-cool { color: var(--muted); background: var(--raised); } .bd-status-pending { color: #95640c; }.bd-status-approved { color: var(--green); } .bd-status-rejected, .bd-status-expired { color: var(--red); }.bd-status-converted { color: #5d54b5; } .bd-radar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .bd-radar-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 3px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); } .bd-radar-row:last-child { border-bottom: 0; }.bd-radar-row:hover strong { color: var(--accent); } .bd-radar-row span:nth-child(2) { min-width: 0; }.bd-radar-row strong, .bd-radar-row small { display: block; } .bd-radar-row small { margin-top: 3px; color: var(--muted); } .bd-radar-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent); } .bd-radar-dot.is-danger { color: var(--red); background: var(--red); }.bd-radar-dot.is-warning { color: #d39420; background: #d39420; } .bd-form-header { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin: 10px 0 22px; } .bd-form-header > div:first-child { flex: 1 1 360px; }.bd-form-header .page-title { margin: 0 0 4px; } .bd-form-step { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; } .bd-form-step span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); } .bd-conflict-panel { margin: 0 0 20px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--red) 38%, var(--border)); border-radius: 14px; background: var(--red-bg); } .bd-conflict-panel p { margin: 5px 0; }.bd-conflict-panel ul { margin: 8px 0 0; padding-inline-start: 22px; } .bd-decision-note { display: grid; gap: 4px; margin: 0 0 20px; padding: 15px 18px; border-inline-start: 4px solid var(--accent); border-radius: 12px; background: var(--accent-soft); } .bd-decision-note small { color: var(--muted); } .bd-registration-form textarea { width: 100%; } .bd-sticky-submit { position: sticky; z-index: 7; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: -8px; padding: 13px 15px 13px 18px; border: 1px solid var(--border); border-radius: 16px; color: var(--muted); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); } .bd-detail-header { margin-top: 10px; }.bd-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 20px; } .bd-score-orb { width: 74px; height: 74px; display: grid; place-items: center; align-content: center; border-radius: 22px; } .bd-score-orb strong { font-size: 24px; line-height: 1; }.bd-score-orb small { margin-top: 3px; font-size: 10px; } .bd-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; } .bd-snapshot-item span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 680; } .bd-snapshot-item strong { display: block; font-size: 14px; overflow-wrap: anywhere; }.bd-snapshot-item.bd-full { grid-column: 1/-1; } .bd-snapshot-item p { margin: 0; white-space: pre-wrap; } .bd-score-meter { height: 8px; margin-bottom: 18px; overflow: hidden; border-radius: 999px; background: var(--raised); } .bd-score-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold-light)); } .bd-score-line { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .bd-score-line span { color: var(--muted); }.bd-score-card .hint { margin: 14px 0 0; } .bd-action-form { margin-bottom: 18px; }.bd-action-form > div:not(.bd-action-title) { flex: 1 1 145px; } .bd-action-list { display: grid; gap: 10px; } .bd-action-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--raised); } .bd-action-item.is-blocked { border-color: color-mix(in srgb, var(--red) 36%, var(--border)); }.bd-action-item.is-done { opacity: .7; } .bd-action-state { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); border-radius: 10px; background: var(--accent-soft); } .bd-action-state .ico { width: 17px; height: 17px; }.bd-action-copy small, .bd-action-copy p { display: block; margin: 3px 0 0; color: var(--muted); font-size: 11px; } .bd-action-buttons { display: flex; flex-wrap: wrap; gap: 6px; } /* Account Manager's read-only vendor document shelf. Cards keep long filenames usable on phones and make the one permitted action — download — visually distinct without resembling the Business Development editor. */ .partner-lookup-documents { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .partner-lookup-documents > h3 { margin: 0 0 3px; font-size: 14px; } .partner-document-grid { display: grid; gap: 9px; margin-top: 12px; } .partner-document-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--raised) 68%, var(--card)); } .partner-document-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); } .partner-document-icon .ico { width: 19px; height: 19px; } .partner-document-copy { min-width: 0; } .partner-document-copy strong, .partner-document-copy span, .partner-document-copy small { display: block; } .partner-document-copy strong { font-size: 13px; color: var(--text); } .partner-document-copy span { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; } .partner-document-copy small { margin-top: 3px; color: var(--faint); font-variant-numeric: tabular-nums; } /* Cost-centre data entry ------------------------------------------------- These tables deliberately do not use .smart-field: an icon plus status mark consumed most of a narrow price cell and visually covered its value. Inputs here get a dedicated high-contrast, numeric-first treatment. */ body[data-page="proposal_editor"] .cost-grid { width: max-content; min-width: 100%; border: 1px solid var(--border-strong); border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; } body[data-page="proposal_editor"] .cost-grid th { padding: 10px 9px; } body[data-page="proposal_editor"] .cost-grid td { padding: 7px; background: var(--card); } body[data-page="proposal_editor"] .cost-grid tbody tr:focus-within td { background: color-mix(in srgb, var(--accent-soft) 56%, var(--card)); } body[data-page="proposal_editor"] .cost-entry-input { width: 100%; min-width: 112px; min-height: 42px; padding: 8px 10px !important; border: 2px solid color-mix(in srgb, var(--text) 32%, var(--border-strong)) !important; border-radius: 9px !important; background: var(--card) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text); caret-color: var(--accent); font-size: 14px; font-weight: 650; line-height: 1.25; opacity: 1; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } body[data-page="proposal_editor"] .cost-entry-input::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); opacity: 1; font-weight: 500; } body[data-page="proposal_editor"] .cost-entry-input:hover { border-color: color-mix(in srgb, var(--accent) 58%, var(--border-strong)) !important; } body[data-page="proposal_editor"] .cost-entry-input:focus { outline: none; border-color: var(--accent) !important; background: var(--card) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 23%, transparent), inset 0 1px 2px rgba(16,24,40,.05) !important; } body[data-page="proposal_editor"] .cost-number-input { min-width: 128px; direction: ltr; text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; } body[data-page="proposal_editor"] .cost-grid td.readonly { min-width: 142px; background: var(--raised); color: var(--text); font-family: var(--font-num); font-weight: 720; font-variant-numeric: tabular-nums; } body[data-page="proposal_editor"] .cost-materials-grid th:nth-child(6), body[data-page="proposal_editor"] .cost-materials-grid td:nth-child(6), body[data-page="proposal_editor"] .cost-materials-grid th:nth-child(7), body[data-page="proposal_editor"] .cost-materials-grid td:nth-child(7) { min-width: 160px; } body[data-page="proposal_editor"] .cost-materials-grid th:nth-child(8), body[data-page="proposal_editor"] .cost-materials-grid td:nth-child(8), body[data-page="proposal_editor"] .cost-materials-grid th:nth-child(9), body[data-page="proposal_editor"] .cost-materials-grid td:nth-child(9) { min-width: 128px; } body[data-page="proposal_editor"] .cost-services-grid th:nth-child(1), body[data-page="proposal_editor"] .cost-services-grid td:nth-child(1), body[data-page="proposal_editor"] .cost-extra-grid th:nth-child(2), body[data-page="proposal_editor"] .cost-extra-grid td:nth-child(2) { min-width: 230px; } body[data-page="proposal_editor"] .cost-adjustment-row { display: grid; grid-template-columns: minmax(220px, 280px) minmax(145px, 190px) minmax(130px, 1fr); gap: 12px; align-items: center; margin-bottom: 11px; } body[data-page="proposal_editor"] .cost-adjustment-row label { margin: 0; color: var(--text); font-size: 13px; } body[data-page="proposal_editor"] .cost-adjustment-row .hint { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; } @media (max-width: 1000px) { .sidebar { background: linear-gradient(180deg, #0d2043, #071124); } main { padding: 24px 20px 44px; } .bd-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-detail-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { :root[data-theme="light"], :root[data-theme="dark"] { --topbar-h: 62px; } .topbar { padding-inline: 13px; } main { padding: 19px 13px 38px; } .page-title { font-size: 24px; } .page-title-icon { width: 38px; height: 38px; } .card > .body { padding: 17px; } .auth-card { padding: 25px 20px; } .hub-grid { grid-template-columns: 1fr; } .smart-field-control { min-height: 46px !important; } .bd-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bd-kpi-card { min-height: 132px; padding: 15px; } .bd-radar-grid, .bd-snapshot-grid { grid-template-columns: 1fr; } .bd-snapshot-item.bd-full { grid-column: auto; } .bd-action-item { grid-template-columns: auto minmax(0, 1fr); } .bd-action-item > .badge, .bd-action-buttons { grid-column: 2; } .bd-sticky-submit { align-items: flex-start; flex-direction: column; bottom: 8px; } .bd-sticky-submit .btn { width: 100%; } .partner-document-card { grid-template-columns: 38px minmax(0, 1fr); } .partner-document-card .btn { grid-column: 1 / -1; width: 100%; min-height: 44px; } body[data-page="proposal_editor"] .cost-entry-input { min-height: 48px; font-size: 16px; } body[data-page="proposal_editor"] .cost-adjustment-row { grid-template-columns: 1fr; gap: 6px; } body[data-page="proposal_editor"] .cost-adjustment-row .cost-entry-input { max-width: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { .sidebar, .topbar, .sidebar-scrim, .no-print, .bulk-bar, .btn, .smart-field-icon, .smart-field-state { display: none !important; } .app-shell { display: block; } main { padding: 0; max-width: none; } .card, .kpi { border: 1px solid #ccc; box-shadow: none; background: #fff; break-inside: avoid; } body { background: #fff; color: #111; } .smart-field-control { padding-inline: 8px !important; } } /* Role-aware welcome guide and the Admin's isolated Demo Lab. */ .role-guide-welcome { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:18px; background:rgba(7,18,38,.66); backdrop-filter:blur(5px); } .role-guide-welcome-card { width:min(660px,100%); display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px; border:1px solid var(--border); border-radius:24px; background:var(--card); box-shadow:0 32px 90px rgba(0,0,0,.34); } .role-guide-welcome-mark { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:var(--gold); background:color-mix(in srgb,var(--gold) 13%,transparent); } .role-guide-welcome-mark .ico { width:30px; height:30px; } .role-guide-welcome-card h2 { margin:3px 0 8px; font-size:clamp(23px,4vw,32px); } .role-guide-welcome-card p { margin:0; line-height:1.75; color:var(--muted); } .role-guide-welcome-actions { grid-column:1/-1; display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; } .role-guide-welcome-actions form { margin:0; } .role-guide-role-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .role-guide-role-pills span { padding:5px 10px; border-radius:999px; background:var(--navy-50); color:var(--navy-ink); font-size:12px; font-weight:700; } .eyebrow { margin:0 0 5px!important; color:var(--gold)!important; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .guide-page,.demo-lab-page { max-width:1120px; margin:0 auto; } .guide-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; padding:24px 0 6px; } .guide-hero h1 { margin:0 0 7px; font-size:clamp(27px,4vw,40px); letter-spacing:-.025em; } .guide-hero p:not(.eyebrow) { max-width:760px; margin:0; color:var(--muted); line-height:1.75; } .guide-flow { border-inline-start:4px solid var(--gold); } .guide-toc { position:sticky; top:66px; z-index:20; display:flex; gap:8px; margin:16px 0; padding:9px; overflow-x:auto; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb,var(--card) 94%,transparent); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px); } .guide-toc a { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:8px 12px; border-radius:10px; color:var(--text); font-size:13px; font-weight:750; text-decoration:none; } .guide-toc a:hover,.guide-toc a:focus-visible { background:var(--navy-50); color:var(--navy-ink); } .guide-toc .ico { width:17px; height:17px; color:var(--gold); } .guide-role-grid { display:grid; grid-template-columns:1fr; gap:22px; margin:18px 0; } .guide-role-card { position:relative; padding:24px; border:1px solid var(--border); border-radius:22px; background:var(--card); box-shadow:var(--shadow-sm); overflow:hidden; scroll-margin-top:130px; } .guide-role-card h2 { margin:0 0 4px; font-size:22px; } .guide-step-number { position:absolute; inset-block-start:18px; inset-inline-end:18px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--navy-50); color:var(--navy-ink); font-weight:800; } .guide-role-heading { display:flex; align-items:center; gap:12px; padding-inline-end:48px; } .guide-role-icon { flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,transparent); } .guide-role-icon .ico { width:25px; height:25px; } /* Screenshot-like guide illustration. It is made from CSS/SVG instead of a bitmap so Arabic/English labels stay crisp on phones, print and saved PDF. */ .guide-screen { margin:20px 0; overflow:hidden; border:1px solid color-mix(in srgb,var(--navy) 20%,var(--border)); border-radius:18px; background:var(--bg); box-shadow:0 14px 36px rgba(17,35,65,.10); } .guide-screen-bar { display:flex; align-items:center; gap:6px; min-height:35px; padding:0 12px; color:#dce7fb; background:#16294d; } .guide-screen-bar i { width:8px; height:8px; border-radius:50%; background:#6c81a5; } .guide-screen-bar i:first-child { background:#d4a72c; } .guide-screen-bar strong { margin-inline-start:auto; font-size:10px; letter-spacing:.06em; } .guide-screen-body { display:grid; grid-template-columns:185px 1fr; min-height:250px; } .guide-screen-nav { display:flex; flex-direction:column; gap:12px; padding:20px 15px; color:#dce7fb; background:#203a66; } .guide-screen-nav>span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#ffe19a; background:rgba(255,255,255,.09); } .guide-screen-nav .ico { width:20px; height:20px; } .guide-screen-nav b { font-size:12px; line-height:1.5; } .guide-screen-nav-line { display:block; width:100%; height:7px; border-radius:9px; background:rgba(255,255,255,.15); } .guide-screen-nav-line.short { width:68%; } .guide-screen-main { position:relative; padding:20px; background:linear-gradient(140deg,color-mix(in srgb,var(--navy-50) 45%,var(--card)),var(--card)); } .guide-screen-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; } .guide-screen-title b { font-size:17px; } .guide-screen-title span { padding:4px 8px; border-radius:999px; color:#77570b; background:#fff1bf; font-size:10px; font-weight:750; } .guide-screen-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .guide-screen-cards>span { display:flex; align-items:center; gap:7px; min-height:53px; padding:9px; border:1px solid var(--border); border-radius:11px; background:var(--card); font-size:11px; font-weight:700; } .guide-screen-cards i { display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; border-radius:7px; color:#fff; background:var(--navy); font-style:normal; font-size:10px; } .guide-screen-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .guide-screen-form span { display:block; height:28px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg,var(--card)); } .guide-screen-form .wide { grid-column:1/-1; height:38px; } .guide-screen-action { width:max-content; margin:12px 0 0 auto; padding:8px 12px; border-radius:9px; color:#fff; background:var(--gold); font-size:11px; font-weight:800; } [dir="rtl"] .guide-screen-action { margin:12px auto 0 0; } .guide-screen figcaption { padding:9px 13px; border-top:1px solid var(--border); color:var(--muted); background:var(--card); font-size:11px; line-height:1.6; } .guide-tasks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .guide-task { padding:17px; border:1px solid var(--border); border-radius:15px; background:color-mix(in srgb,var(--card) 94%,var(--navy-50)); } .guide-task-head { display:flex; gap:10px; align-items:flex-start; } .guide-task-head>span { display:grid; place-items:center; width:29px; height:29px; flex:0 0 auto; border-radius:9px; color:#fff; background:var(--navy); font-size:12px; font-weight:850; } .guide-task h3 { margin:1px 0 4px; font-size:16px; } .guide-task-head p { display:flex; align-items:center; gap:5px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; } .guide-task-head .ico { width:13px; height:13px; flex:0 0 auto; } .guide-task ol { display:grid; gap:9px; margin:15px 0; padding:0; list-style:none; } .guide-task li { display:flex; gap:8px; align-items:flex-start; } .guide-task li>span { display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--gold) 55%,var(--border)); border-radius:50%; color:var(--gold); font-size:10px; font-weight:850; } .guide-task li p { margin:0; font-size:13px; line-height:1.65; } .guide-done { display:flex; gap:8px; align-items:flex-start; padding:10px; border-radius:11px; color:#155c45; background:color-mix(in srgb,#22a879 12%,transparent); } .guide-done>.ico { width:18px; height:18px; flex:0 0 auto; } .guide-done b { display:block; font-size:11px; } .guide-done p { margin:2px 0 0; font-size:12px; line-height:1.55; } [data-theme="dark"] .guide-done { color:#86e0be; } .guide-security { display:flex; gap:15px; padding:20px; border:1px solid color-mix(in srgb,var(--gold) 38%,var(--border)); border-radius:18px; background:color-mix(in srgb,var(--gold) 7%,var(--card)); } .guide-security>span { color:var(--gold); } .guide-security .ico { width:27px; height:27px; } .guide-security h2,.guide-security p { margin:0; } .guide-security p { margin-top:5px; color:var(--muted); line-height:1.7; } .demo-lab-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-bottom:18px; } .demo-checklist { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .demo-checklist li { position:relative; padding-inline-start:28px; line-height:1.6; } .demo-checklist li::before { content:"✓"; position:absolute; inset-inline-start:0; color:#16835f; font-weight:900; } .demo-secret-warning { padding:12px 14px; border-radius:12px; background:#fff7dc; color:#6b5312; font-weight:700; } [data-theme="dark"] .demo-secret-warning { background:#3b3219; color:#f2d676; } .demo-credentials code { user-select:all; font-size:13px; color:var(--text); } .demo-result-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .demo-walkthrough { margin-bottom:18px; } .demo-role-scenarios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .demo-role-scenario { min-width:0; padding:18px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(145deg,var(--card),var(--raised)); } .demo-role-scenario:first-child { grid-column:1 / -1; } .demo-role-scenario h3 { display:flex; align-items:center; gap:9px; margin:0 0 12px; } .demo-role-scenario h3 .icon { color:var(--cyan); } .demo-role-scenario ol { margin:0; padding-inline-start:22px; display:grid; gap:9px; line-height:1.65; } .demo-role-scenario li::marker { color:var(--gold); font-weight:800; } .demo-step-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .demo-step-links a { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); font-weight:700; text-decoration:none; } .demo-step-links a:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px); } @media (max-width:720px) { .role-guide-welcome-card { grid-template-columns:1fr; padding:20px; max-height:calc(100vh - 28px); overflow:auto; } .role-guide-welcome-mark { width:48px; height:48px; } .role-guide-welcome-actions { justify-content:stretch; } .role-guide-welcome-actions .btn,.role-guide-welcome-actions form,.role-guide-welcome-actions button { width:100%; } .guide-hero { flex-direction:column; } .guide-role-grid,.demo-lab-grid,.guide-tasks { grid-template-columns:1fr; } .demo-role-scenarios { grid-template-columns:1fr; } .demo-role-scenario:first-child { grid-column:auto; } .guide-role-card { padding:18px; } .guide-screen-body { grid-template-columns:1fr; } .guide-screen-nav { display:grid; grid-template-columns:auto 1fr; align-items:center; padding:11px 13px; } .guide-screen-nav-line { display:none; } .guide-screen-main { padding:14px; } .guide-screen-cards { grid-template-columns:1fr; } } @media print { .role-guide-welcome { display:none!important; } .guide-page { max-width:none; } .guide-role-card,.guide-flow,.guide-security,.guide-task,.guide-screen { break-inside:avoid; box-shadow:none; } .guide-role-card { page-break-before:auto; } .guide-tasks { grid-template-columns:1fr 1fr; } } /* Phase 22: customer matching, technical versions, forecasting and archive. */ .duplicate-candidates { display:grid; gap:10px; margin:12px 0; } .duplicate-candidate { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--card); } .duplicate-candidate .hint { display:block; } .technical-version-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .technical-version-actions form { margin:0; } .technical-reject-form { display:flex; gap:6px; align-items:center; } .technical-reject-form input { min-width:190px; } .technical-review-note { padding:7px 9px; border-inline-start:3px solid var(--gold); border-radius:5px; background:color-mix(in srgb,var(--gold) 8%,var(--card)); } .technical-status-draft { color:var(--muted); } .technical-status-sent { color:#77570b; background:#fff1bf; } .technical-status-approved { color:#116648; background:#dff7ed; } .technical-status-rejected { color:#9a2d2d; background:#fde7e7; } [data-theme="dark"] .technical-status-sent { color:#f1d47c; background:#403719; } [data-theme="dark"] .technical-status-approved { color:#8ce0c2; background:#183b31; } [data-theme="dark"] .technical-status-rejected { color:#ffaaaa; background:#442525; } .forecast-kpis { margin:12px 0 20px; } .forecast-kpis .value { font-size:clamp(18px,2vw,27px); } .forecast-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr); gap:18px; } .forecast-grid h3,.forecast-card h3 { margin:0 0 10px; } .stage-delay-list { display:grid; gap:8px; } .stage-delay-row { display:grid; gap:3px; padding:11px 12px; border:1px solid var(--border); border-radius:11px; } .stage-delay-row.has-delay { border-color:#efb04c; background:color-mix(in srgb,#efb04c 8%,var(--card)); } .loss-reason-list { display:flex; gap:8px; flex-wrap:wrap; } .loss-reason-chip { padding:8px 11px; border:1px solid var(--border); border-radius:999px; background:var(--card); } .archive-filters { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } .archive-filters>div { min-width:220px; flex:1; } @media (max-width:760px) { .duplicate-candidate,.forecast-grid { grid-template-columns:1fr; } .technical-version-actions,.technical-reject-form { width:100%; justify-content:stretch; } .technical-version-actions .btn,.technical-version-actions form,.technical-reject-form input { width:100%; } .technical-reject-form { flex-direction:column; } .archive-filters>div,.archive-filters .btn { width:100%; } }