/* ============================================================ ECG GroupSync — shared stylesheet Design tokens + component polish ported from the ECG Feedback app, mapped onto GroupSync's existing class names so no markup edits were needed. ============================================================ */ /* ── DESIGN TOKENS ──────────────────────────────────────────── */ :root { /* Brand (matches feedback app) */ --brand: #1a9bd8; --brand-dark: #13264a; --brand-soft: #e8f4fc; --brand-hover: #1886bd; --brand-ring: rgba(26,155,216,.35); /* Status */ --red: #ef4444; --green: #10b981; --amber: #f59e0b; /* Text scale */ --text: #13264a; --text-mid: #4b5563; --text-muted: #6b7280; --text-light: #9ca3af; /* Surfaces */ --surface: #ffffff; --surface-alt: #fafbfc; --surface-hover: #f5f5f5; --surface-subtle: #f4f5f7; --body-bg: #f5f7fa; --header-bg: #f8f9fb; /* Borders */ --border: #e0e0e0; --border-soft: #e5e7eb; --border-softer: #eef0f2; /* Shadows */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --shadow-md: 0 4px 14px rgba(16,24,40,.08); --shadow-lg: 0 12px 32px rgba(16,24,40,.12); /* Geometry */ --radius: 10px; --radius-sm: 6px; --nav-h: 56px; --sidebar-w: 230px; /* Legacy aliases — keep inline styles in existing HTML working. Any rule using --bg/--line/--accent/--accent-h/--accent-bg/--accent-fg/--muted/ --hover/--danger/--success continues to resolve. */ --bg: var(--body-bg); --line: var(--border-soft); --hover: var(--surface-hover); --muted: var(--text-muted); --accent: var(--brand); --accent-h: var(--brand-hover); --accent-bg: var(--brand-soft); --accent-fg: var(--brand); --danger: var(--red); --success: var(--green); } /* Dark mode: system preference. Also honours an explicit [data-theme="dark"] on or so a future theme-toggle button can flip it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #3b7dff; --brand-dark: #0b0e14; --brand-soft: #1c2a49; --brand-hover: #5a90ff; --brand-ring: rgba(59,125,255,.45); --red: #f87171; --green: #34d399; --amber: #fbbf24; --text: #f2f4f7; --text-mid: #c3c8d0; --text-muted: #8a9099; --text-light: #616770; --surface: #24272d; --surface-alt: #1f2226; --surface-hover: #31353c; --surface-subtle: #1f2226; --body-bg: #1a1c20; --header-bg: #24272d; --border: #363b43; --border-soft: #2c3037; --border-softer: #23272d; --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.28); --shadow-md: 0 4px 14px rgba(0,0,0,.40); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --accent-fg: var(--brand); } } [data-theme="dark"] { --brand:#3b7dff; --brand-dark:#0b0e14; --brand-soft:#1c2a49; --brand-hover:#5a90ff; --brand-ring:rgba(59,125,255,.45); --red:#f87171; --green:#34d399; --amber:#fbbf24; --text:#f2f4f7; --text-mid:#c3c8d0; --text-muted:#8a9099; --text-light:#616770; --surface:#24272d; --surface-alt:#1f2226; --surface-hover:#31353c; --surface-subtle:#1f2226; --body-bg:#1a1c20; --header-bg:#24272d; --border:#363b43; --border-soft:#2c3037; --border-softer:#23272d; --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.28); --shadow-md:0 4px 14px rgba(0,0,0,.40); --shadow-lg:0 12px 32px rgba(0,0,0,.55); } /* ── BASE ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--body-bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand); } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } ::selection { background: var(--brand-soft); color: var(--brand-dark); } /* ── SHELL (topbar + fixed left sidebar) ───────────────────── Body gets a top padding for the fixed topbar and a left padding for the fixed sidebar. The existing .page-wrap flows inside that inset area, so no page-level HTML changes are needed. */ body { padding-top: var(--nav-h); padding-left: var(--sidebar-w); min-height: 100vh; } /* Login / reset-password pages have no sidebar — flagged by nav.js. */ body.no-sidebar { padding-left: 0; } /* Anonymous pages also skip the topbar — collapse the top inset too. */ body.no-topbar { padding-top: 0; } /* Viewers are read-only — disable text selection and copy across the app so they can't easily drag-select member data out of the page. Inputs/textareas stay selectable so their own profile form keeps working. This is a soft deterrent only (it doesn't stop screenshots, DevTools, or view-source); real protection lives in the API role checks. */ body.role-viewer { -webkit-user-select: none; -moz-user-select: none; user-select: none; } body.role-viewer input, body.role-viewer textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; } /* Asterisk marker next to required field labels. */ .req { color: #dc2626; font-weight: 700; margin-left: 2px; } [data-theme="dark"] .req, :root:not([data-theme="light"]) .req { color: #fca5a5; } /* ── TOPBAR ────────────────────────────────────────────────── */ .app-nav { display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: 0 18px; height: var(--nav-h); position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: var(--shadow-sm); } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; letter-spacing: .2px; } .nav-logo img { width: 26px; height: 26px; object-fit: contain; display: block; } /* ── SIDEBAR ───────────────────────────────────────────────── */ .app-sidebar { position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border-soft); overflow-y: auto; padding: 14px 10px 24px; z-index: 90; } .app-sidebar.empty { display: none; } .side-section { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text); padding: 14px 12px 8px 12px; margin-top: 10px; border-top: 1px solid var(--border-soft); background: var(--surface-alt, var(--hover, #f5f7fa)); border-radius: var(--radius-sm); } .side-section:first-child { padding-top: 8px; margin-top: 0; border-top: none; } :root:not([data-theme="light"]) .side-section, [data-theme="dark"] .side-section { background: rgba(255,255,255,.04); color: var(--text); } .side-link { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-mid); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s, color .12s; } .side-link:hover { background: var(--surface-hover); color: var(--text); } .side-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .side-link-badge { display: inline-block; margin-left: 8px; min-width: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; background: var(--surface-hover, #e5e7eb); color: var(--text-muted, #6b7280); border-radius: 999px; vertical-align: 1px; } .side-link-badge.has-pending { background: #f59e0b; color: #fff; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.40); z-index: 89; } .sidebar-backdrop.open { display: block; } /* Right side of topbar */ .nav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } .nav-user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--surface-subtle); border: 1px solid var(--border-softer); text-decoration: none; color: var(--text-mid); font-size: 14px; font-weight: 500; transition: all .12s; } .nav-user-btn:hover { background: var(--brand-soft); border-color: var(--brand-ring); color: var(--brand); } .nav-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .nav-logout-btn { background: transparent; border: none; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s; } .nav-logout-btn:hover { background: var(--surface-hover); color: var(--text); } .nav-login-btn { background: var(--brand); color: #fff; border: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s; } .nav-login-btn:hover { background: var(--brand-hover); } .nav-hamburger { display: none; /* shown only on small screens, see media query below */ width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; } .nav-hamburger:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } @media (max-width: 760px) { /* On mobile the body gives up its sidebar inset; sidebar becomes a slide-in drawer toggled by the hamburger button. */ body { padding-left: 0; } .nav-hamburger { display: flex; } .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } .app-sidebar.open { transform: translateX(0); } .nav-user-btn span:not(.nav-avatar) { display: none; } /* avatar only */ } /* ── PAGE LAYOUT ──────────────────────────────────────────── */ .page-wrap { max-width: 1600px; margin: 0 auto; padding: 24px 28px 64px; } .page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } .page-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -.01em; } .page-sub { color: var(--text-muted); font-size: 14px; margin: -12px 0 20px; } .spacer { flex: 1; } /* ── CARD ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .card h2 { font-size: 16px; font-weight: 700; margin: 0 0 16px; color: var(--text); letter-spacing: -.01em; } /* ── FORM ──────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 600; color: var(--text-mid); } .field input, .field select, .field textarea { appearance: none; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; transition: border-color .12s, box-shadow .12s; outline: none; } .field select { padding-right: 30px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field textarea { resize: vertical; min-height: 84px; } .field input::placeholder, .field textarea::placeholder { color: var(--text-light); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; cursor: not-allowed; } /* ── BUTTONS ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; white-space: nowrap; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--sm { padding: 6px 12px; font-size: 13px; } .btn--primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(26,155,216,.18); } .btn--primary:hover:not(:disabled) { background: var(--brand-hover); box-shadow: 0 2px 6px rgba(26,155,216,.28); } .btn--ghost { background: var(--surface); color: var(--text-mid); border-color: var(--border-soft); } .btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: var(--border); } .btn--danger { background: rgba(239,68,68,.10); color: #b91c1c; border-color: rgba(239,68,68,.30); } .btn--danger:hover:not(:disabled) { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); } [data-theme="dark"] .btn--danger, @media (prefers-color-scheme: dark) { /* Lighter danger text in dark mode so it reads against the dark surface */ } /* ── FORM MESSAGES ────────────────────────────────────────── */ .form-msg { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; line-height: 1.45; } .form-msg--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .form-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .muted-text { color: var(--text-muted); font-size: 14px; } /* Credit footer (rendered by nav.js into ). */ #app-credit { text-align: center; font-size: 11px; color: var(--text-light); padding: 32px 16px 24px; letter-spacing: .03em; line-height: 1.7; } #app-credit a { color: inherit; text-decoration: underline; } /* ── TOOLBAR / SEARCH / FILTERS ───────────────────────────── */ .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .search-box { position: relative; flex: 1; min-width: 220px; } .search-box input { width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; } .search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .search-box svg { position: absolute; left: 13px; top: 12px; color: var(--text-muted); } .toolbar select { height: 40px; padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; outline: none; transition: border-color .12s; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; } .toolbar select:hover { border-color: var(--border); } .toolbar select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .btn-group { display: flex; gap: 6px; align-items: center; } /* Sticky page header — pins title/toolbar/hint below the topbar so only the member rows scroll. The table's thead is sticky too, docked just below this block via the --thead-top variable JS measures and sets on render. padding-bottom keeps the children's bottom margins inside our offsetHeight, otherwise the thead docks too high and slips behind us (we have higher z-index than the thead so the overlap would hide it). */ .sticky-head { position: sticky; top: var(--nav-h); z-index: 6; background: var(--body-bg); padding-top: 24px; margin-top: -24px; /* reclaim the page-wrap top padding */ padding-bottom: 4px; } .sticky-head .toolbar { margin-bottom: 0; } .sticky-head #mine-hint { margin-bottom: 0 !important; } /* ── TABLE ────────────────────────────────────────────────── */ /* IMPORTANT: no `overflow` here — overflow-x: auto would make .table-wrap the sticky containing block for the thead, so `top: var(--thead-top)` would be measured from this element's top instead of the viewport, and the column header would dock somewhere in the middle of the page. If horizontal scroll is ever needed on narrow viewports, add it via a media query on a wrapper that doesn't contain the sticky element. */ .table-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); } table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; } table.tbl thead th { text-align: left; padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--header-bg); border-bottom: 1px solid var(--border-soft); white-space: nowrap; position: sticky; /* Default: dock flush against the topbar. Pages with a full sticky-head (Members) override --thead-top via JS so the column header sits below their filter bar instead. */ top: var(--thead-top, var(--nav-h)); z-index: 5; /* Subtle shadow on the bottom edge so the stuck header looks anchored to the rows beneath it rather than floating loose. Only visible once stuck because rows above scroll past. */ box-shadow: 0 1px 0 var(--border-soft); } /* Match the rounded top corners of the .table-wrap card so the sticky head doesn't look like a flat bar laid over a rounded surface. */ table.tbl thead tr:first-child th:first-child { border-top-left-radius: var(--radius); } table.tbl thead tr:first-child th:last-child { border-top-right-radius: var(--radius); } table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-softer); vertical-align: middle; color: var(--text-mid); } table.tbl tbody tr:last-child td { border-bottom: none; } table.tbl tbody tr:hover { background: var(--surface-alt); } .cell-name { font-weight: 600; color: var(--text); } .cell-actions { text-align: right; white-space: nowrap; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .12s; margin-left: 4px; } .icon-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-ring); } .icon-btn--danger:hover { color: #b91c1c; border-color: rgba(239,68,68,.40); background: rgba(239,68,68,.08); } .empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); } .empty-state svg { opacity: .4; margin-bottom: 12px; } /* ── CHIPS / BADGES ───────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 5px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--brand-soft); color: var(--brand); } .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip--select { cursor: pointer; border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted); user-select: none; transition: all .12s; } .chip--select:hover { border-color: var(--brand-ring); color: var(--brand); } .chip--select.on { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 700; } .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; } .badge--admin { background: #fae8ff; color: #86198f; } .badge--it_admin { background: #fee2e2; color: #991b1b; } .badge--manager { background: #dbeafe; color: #1e40af; } .badge--viewer { background: var(--surface-hover); color: var(--text-muted); } /* ── MODAL ────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 400; overflow-y: auto; backdrop-filter: blur(2px); } .modal-overlay.open { display: flex; } /* Neutral (not navy) dim behind dialogs in dark mode — the default overlay is a blue-navy tint that clashes with the charcoal theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-overlay { background: rgba(0,0,0,.6); } } [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.6); } .modal { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; } .modal-head { display: flex; align-items: center; margin-bottom: 18px; } .modal-head h2 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; } .modal-close { margin-left: auto; width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: var(--surface-subtle); color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; transition: all .12s; } .modal-close:hover { background: var(--surface-hover); color: var(--text); } .modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } /* ── DARK-MODE TWEAKS for components that need extra contrast ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) .nav-logo img { filter: invert(1) brightness(1.2); } :root:not([data-theme="light"]) .form-msg--success { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.30); } :root:not([data-theme="light"]) .form-msg--error { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.35); } :root:not([data-theme="light"]) .btn--danger { background: rgba(239,68,68,.18); color: #fecaca; border-color: rgba(239,68,68,.45); } :root:not([data-theme="light"]) .badge--admin { background: rgba(168,85,247,.20); color: #e9d5ff; } :root:not([data-theme="light"]) .badge--it_admin { background: rgba(239,68,68,.20); color: #fecaca; } :root:not([data-theme="light"]) .badge--manager { background: rgba(59,130,246,.20); color: #bfdbfe; } } [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] .nav-logo img { filter: invert(1) brightness(1.2); } [data-theme="dark"] .form-msg--success { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.30); } [data-theme="dark"] .form-msg--error { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.35); } [data-theme="dark"] .btn--danger { background: rgba(239,68,68,.18); color: #fecaca; border-color: rgba(239,68,68,.45); } [data-theme="dark"] .badge--admin { background: rgba(168,85,247,.20); color: #e9d5ff; } [data-theme="dark"] .badge--it_admin { background: rgba(239,68,68,.20); color: #fecaca; } [data-theme="dark"] .badge--manager { background: rgba(59,130,246,.20); color: #bfdbfe; }