/* ============================================================ Project Management — redesigned theme Light is default; dark activates via . Accent: ink blue (#185FA5 light / #4D9BE8 dark). ============================================================ */ :root { --font-sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; /* Surfaces */ --page: #EFEDE8; --bg: #FFFFFF; --surf: #F7F8FA; --surf-2: #F1F3F6; /* Lines */ --line: #E7E5E1; --line-2: #D8D6D1; /* Text */ --ink: #161A22; --mut: #5B6472; --dim: #8A93A2; /* Accent */ --accent: #185FA5; --accent-dim: #2E6DB0; --accent-soft: #E6F1FB; --on-accent: #FFFFFF; /* Health / status */ --green: #1D9E75; --amber: #BA7517; --red: #D6453B; --green-soft: #EAF3DE; --amber-soft: #FAEEDA; --red-soft: #FCEBEB; /* Suppressed findings (human-accepted fail/needs_human) */ --suppress: #7C3AED; --suppress-soft: #F1E9FD; --suppress-text: #6B21A8; /* Inverse pill (primary button uses ink bg) */ --btn-ink-bg: #161A22; --btn-ink-text: #FFFFFF; /* Radii */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; } html[data-theme="dark"] { --page: #0B0D11; --bg: #0F1115; --surf: #161922; --surf-2: #1B1F2A; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.16); --ink: #F2F4F8; --mut: #9AA3B2; --dim: #646C7C; --accent: #4D9BE8; --accent-dim: #2E6DB0; --accent-soft: #16263A; --on-accent: #0F1115; --green: #4FB286; --amber: #E0A33E; --red: #E2685F; --green-soft: #14271F; --amber-soft: #2A2113; --red-soft: #2C1715; --suppress: #A78BFA; --suppress-soft: #251A3A; --suppress-text: #C4B5FD; --btn-ink-bg: #F2F4F8; --btn-ink-text: #0F1115; } * { box-sizing: border-box; } html, body { margin: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); color: var(--ink); background: var(--page); min-height: 100vh; font-variant-numeric: tabular-nums; } body.menu-open { overflow: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dim); } /* ---------------------------------------------------------- App shell */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } /* ---------------------------------------------------------- Top nav */ .topnav { display: flex; align-items: center; gap: 18px; height: 48px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .brand-row { display: flex; align-items: center; gap: 4px; } .brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; } .brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-bottom: -2px; } .brand-role { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); line-height: 1; margin-top: 2px; white-space: nowrap; } .topnav-sep { width: 1px; height: 18px; background: var(--line-2); } .topnav-links { display: flex; gap: 20px; align-self: stretch; align-items: center; } .topnav-link { font-size: 13.5px; color: var(--dim); font-weight: 400; } .topnav-link:hover { color: var(--mut); } .topnav-link.active { color: var(--ink); font-weight: 500; } /* Small round order icons (SO / PO) — full names in the tooltip */ .topnav-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 21px; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--dim); } .topnav-pill:hover { color: var(--mut); background: var(--surf); } .topnav-pill.active { color: var(--accent); border-color: var(--accent); background: var(--surf); } /* Grouped nav item: a top-level link with a hover/focus dropdown. The wrapper stretches to the full navbar height so the hover zone reaches the bar's bottom edge; the menu hangs 6px below it and the ::before bridges that gap so the pointer can cross without the menu closing. */ .topnav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; } .topnav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; } .topnav-caret { font-size: 9px; line-height: 1; } .topnav-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: -10px; min-width: 170px; padding: 6px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 8px 28px rgba(0,0,0,0.10); z-index: 50; } html[data-theme="dark"] .topnav-dropdown-menu { box-shadow: 0 8px 28px rgba(0,0,0,0.45); } .topnav-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .topnav-dropdown:hover .topnav-dropdown-menu, .topnav-dropdown:focus-within .topnav-dropdown-menu { display: block; } .topnav-dropdown-item { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); white-space: nowrap; } .topnav-dropdown-item:hover { background: var(--surf); } .topnav-dropdown-item.active { background: var(--surf); font-weight: 500; } .topnav-spacer { flex: 1; } .topnav-icon-btn { background: none; border: 0; cursor: pointer; color: var(--dim); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); } .topnav-icon-btn:hover { color: var(--mut); background: var(--surf); } .topnav-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Avatar + dropdown */ .account { position: relative; } .avatar-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surf); color: var(--mut); font-size: 11px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; } .avatar-btn:hover { border-color: var(--accent); color: var(--ink); } .account-menu { display: none; position: absolute; top: 42px; right: 0; width: 220px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; z-index: 50; box-shadow: 0 8px 28px rgba(0,0,0,0.10); } html[data-theme="dark"] .account-menu { box-shadow: 0 8px 28px rgba(0,0,0,0.45); } .account-menu.open { display: block; } .account-menu-header { padding: 12px 14px; border-bottom: 1px solid var(--line); } .account-menu-name { font-size: 13px; font-weight: 500; color: var(--ink); } .account-menu-email { font-size: 11.5px; color: var(--dim); margin-top: 1px; word-break: break-all; } .account-menu-section { padding: 6px; } .account-menu-section + .account-menu-section { border-top: 1px solid var(--line); } .account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; } .account-menu-item:hover { background: var(--surf); } .account-menu-item svg { width: 16px; height: 16px; stroke: var(--dim); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .account-menu-item.danger { color: var(--red); } .account-menu-item.danger svg { stroke: var(--red); } /* ---------------------------------------------------------- Main */ .main { padding: 20px; max-width: 1480px; width: 100%; margin: 0 auto; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .page-eyebrow { display: none; /* was: font-size:12px; color:var(--dim); margin-bottom:3px — hidden site-wide as decorative */ } .page-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; } .page-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--dim); } .page-head-actions { display: flex; gap: 8px; align-items: center; } /* ---------------------------------------------------------- Buttons */ .button, .button-secondary, .button-excel, .button-match, .button-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 6px 14px; border-radius: var(--r-pill); min-height: 32px; letter-spacing: -0.01em; transition: background .15s, border-color .15s, color .15s; } .button { background: var(--btn-ink-bg); color: var(--btn-ink-text); border: 1px solid var(--btn-ink-bg); } .button:hover { opacity: 0.92; } .button-secondary, .button-excel, .button-match { background: transparent; color: var(--accent); border: 1px solid var(--accent-dim); } .button-secondary:hover, .button-excel:hover, .button-match:hover { background: var(--accent-soft); } .button-danger { background: transparent; color: var(--red); border: 1px solid var(--red); } .button-danger:hover { background: var(--red-soft); } /* ---------------------------------------------------------- Cards */ .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; } .hero-banner { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px; } .section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; } .section-eyebrow, .hero-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); } .card-title { font-size: 14px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.3px; color: var(--ink); } /* ---------------------------------------------------------- Grid */ .grid { display: grid; gap: 12px; margin-bottom: 12px; } .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .span-2 { grid-column: span 2; } /* ---------------------------------------------------------- KPI strip */ .kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg); margin-bottom: 12px; } .kpi-cell { padding: 12px 14px; border-left: 1px solid var(--line); } .kpi-cell:first-child { border-left: 0; } .kpi-cell-label { font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; } .kpi-cell-value { font-size: 28px; font-weight: 700; letter-spacing: -0.05em; color: var(--ink); line-height: 1.05; margin-top: 4px; } .kpi-cell-value .suffix { font-size: 14px; font-weight: 500; color: var(--dim); letter-spacing: -0.01em; } .kpi-cell a, a.kpi-cell { color: inherit; } /* stat-card fallback (older templates) rendered as KPI cells */ .stat-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; } .stat-label { font-size: 11.5px; color: var(--dim); } .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.05em; color: var(--ink); line-height: 1.05; margin: 6px 0; } .stat-footer { font-size: 11px; color: var(--dim); line-height: 1.4; } .stat-top { display: flex; justify-content: space-between; align-items: center; } .stat-icon { display: none; } /* ---------------------------------------------------------- Tables */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table thead th { text-align: left; padding: 0 8px 10px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); border: none; } .table thead th a { color: var(--dim); } .table tbody td { padding: 12px 8px; vertical-align: middle; border-top: 1px solid var(--line); color: var(--ink); } .table tbody tr:hover { background: var(--surf); } /* ---------------------------------------------------------- Dot badges */ .badge, .count-pill, .ncr-status-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--mut); padding: 0; border: 0; background: none; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex-shrink: 0; } .badge-green::before, .ncr-status-closed::before { background: var(--green); } .badge-amber::before, .ncr-status-awaiting::before, .ncr-status-partial::before { background: var(--amber); } .badge-red::before { background: var(--red); } .badge-blue::before, .ncr-status-open::before { background: var(--accent); } .badge-slate::before { background: var(--dim); } .count-pill { min-width: 28px; justify-content: center; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; color: var(--ink); } .count-pill::before { display: none; } /* ---------------------------------------------------------- Progress */ .progress-wrap { height: 4px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--r-pill); background: var(--accent); } /* ---------------------------------------------------------- Mini chart (Projects by PM) */ .mini-chart { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .mini-chart-row { display: grid; grid-template-columns: minmax(120px, 150px) 1fr 28px; align-items: center; gap: 10px; } .mini-chart-label { font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-chart-label a { color: var(--mut); } .mini-chart-bar-wrap { height: 6px; background: var(--line-2); border-radius: var(--r-pill); overflow: hidden; } .mini-chart-bar { height: 100%; border-radius: var(--r-pill); background: var(--accent); } .mini-chart-value { font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: right; } .mini-chart-empty { color: var(--dim); font-size: 13px; } /* ------------------------------------------- Check-result stats strip The short full-width strip above the AI-check tables: quick stat + stacked status bar (fixed order pass/needs_human/fail/neutral, 2px surface gaps between segments) + labeled count legend (identity is never color-alone) + the issues-only toggle. Status colors come from the theme vars, so dark mode adapts automatically. */ .check-stats-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .verdict-bar { flex: 1 1 200px; display: flex; gap: 2px; height: 12px; min-width: 140px; border-radius: var(--r-pill); overflow: hidden; background: var(--surf-2); } .verdict-bar-seg { display: block; height: 100%; min-width: 3px; } .seg-pass { background: var(--green); } .seg-needs_human { background: var(--amber); } .seg-fail { background: var(--red); } .seg-suppressed { background: var(--suppress); } .seg-neutral { background: var(--dim); } .verdict-bar-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--mut); } .verdict-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .verdict-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; } /* Issues-only filter: hide rows that are neither fail nor needs_human, and collapse section cards left with nothing to show. Suppressed rows are resolved, so they hide under the filter too. */ .flag-only tr.result-row { display: none; } .flag-only tr.result-row.status-fail, .flag-only tr.result-row.status-needs_human { display: table-row; } .flag-only .check-section[data-flagged="0"] { display: none; } /* --------------------------------------------------------- Jobs table Every row wears a light tint of its submission-status color (matching the status badges: pending=amber, needs-editing=red, in-review=indigo, approved=green). Due-date alerts override the tint with the stronger soft colors: due today yellow, overdue red. rgba tints read correctly on both themes. Completed jobs (visible under "Show all jobs") are dimmed. */ tr.job-status-pending_ai_review td { background: rgba(186, 117, 23, 0.07); } tr.job-status-needs_editing td { background: rgba(214, 69, 59, 0.06); } tr.job-status-sent_to_reviewer td { background: rgba(85, 96, 210, 0.08); } tr.job-status-approved td { background: rgba(29, 158, 117, 0.08); } tr.job-due-today td { background: var(--amber-soft); } tr.job-overdue td { background: var(--red-soft); } tr.job-complete td { opacity: 0.6; } .job-edit-form { margin-top: 6px; max-width: 240px; } .job-edit-form p { margin: 0 0 6px; } .job-edit-form label { font-size: 11.5px; color: var(--dim); display: block; } .job-history { margin: 6px 0 0; padding-left: 16px; font-size: 12px; } .job-history li { margin-bottom: 6px; } /* ------------------------------------------------- Suppress row controls */ .verdict-suppressed { background: var(--suppress-soft); color: var(--suppress-text); } .suppress-meta { font-size: 12px; color: var(--suppress-text); background: var(--suppress-soft); border-radius: 8px; padding: 6px 8px; margin-top: 6px; } .suppress-box { margin-top: 6px; } .suppress-box summary { font-size: 12px; cursor: pointer; } .suppress-form { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-width: 340px; } .suppress-form textarea { font-size: 13px; } .suppress-btn { font-size: 12px; padding: 4px 10px; } /* Assembled-product overview grid (complex-MTR detail page) */ .asm-grid { display: flex; flex-wrap: wrap; gap: 3px 18px; margin-top: 6px; } .asm-cell { flex: 1 1 120px; min-width: 100px; display: flex; align-items: baseline; gap: 6px; } .asm-label { font-size: 11px; color: var(--dim); white-space: nowrap; } .asm-value { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 0; } /* ---------------------------------------------------------- Forms */ input, select, textarea { width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surf); color: var(--ink); font-size: 13px; font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--dim); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { min-height: 110px; resize: vertical; } label { display: block; font-size: 9px; color: var(--dim); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; flex: none; accent-color: var(--accent); } /* Label that wraps a checkbox + its text on one line, overriding the tiny uppercase field-label default above. */ label.check-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: normal; } .form-actions, .filter-actions, .list-actions, .detail-action-buttons { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; } .filter-actions { margin-top: 0; } /* ---------------------------------------------------------- Filter bars */ .filter-bar, .filter-bar-ncr { display: grid; gap: 12px; align-items: end; } .filter-bar-ncr { grid-template-columns: minmax(260px,2fr) minmax(170px,1fr) minmax(170px,1fr) auto; } .pm-filter-checkbox { display: flex; align-items: center; gap: 8px; } .pm-filter-checkbox input { width: auto; } .pm-filter-checkbox label { margin-bottom: 0; } /* ---------------------------------------------------------- Alerts */ .alert { padding: 8px 12px; border-radius: var(--r-md); margin-bottom: 12px; background: var(--surf); color: var(--ink); border: 1px solid var(--line); font-size: 13px; font-weight: 400; } .alert-success { border-color: var(--green); background: var(--green-soft); color: var(--green); } .alert-error, .alert-danger { border-color: var(--red); background: var(--red-soft); color: var(--red); } .alert-warning { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); } .alert-info { border-color: var(--accent-dim); background: var(--accent-soft); color: var(--accent); } /* ---------------------------------------------------------- Toolbar / misc */ .pm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .pm-actions-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pm-empty { color: var(--dim); font-size: 13px; padding: 16px; } .pm-small { font-size: 11px; color: var(--dim); } .pm-list-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pm-title-number { font-size: 9.5px; letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase; font-weight: 500; } /* Meta tiles (detail) */ .pm-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .pm-project-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .pm-meta-tile { border-radius: var(--r-md); background: var(--surf); padding: 12px 14px; border: 1px solid var(--line); } .pm-meta-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; } .pm-meta-value { margin-top: 5px; font-weight: 500; color: var(--ink); font-size: 13px; line-height: 1.4; } /* Detail layout */ .pm-card-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 22px; } .pm-project-header { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(360px,.9fr); gap: 20px; align-items: start; } .detail-main-column, .detail-side-column { display: grid; gap: 22px; } .pm-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .pm-comment { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf); margin-bottom: 10px; } .pm-reply { margin-left: 24px; } .pm-comment-author { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; color: var(--ink); } .pm-comment-time { color: var(--dim); font-weight: 400; } .pm-comment-body { margin-top: 8px; color: var(--mut); line-height: 1.6; white-space: pre-wrap; } .pm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .pm-inline-form { margin-top: 16px; display: grid; gap: 12px; } .pm-subproject { padding: 12px; border-radius: var(--r-md); background: var(--surf); border: 1px solid var(--line); margin-bottom: 10px; } .pm-file-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surf); margin-bottom: 10px; } .pm-scroll-panel { max-height: 520px; overflow-y: auto; } /* NCR-style helpers kept for compatibility */ .ncr-muted { color: var(--mut); } .ncr-form-grid-2, .ncr-form-grid-3 { display: grid; gap: 16px; } .ncr-form-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ncr-form-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .ncr-field-span-2 { grid-column: span 2; } .page-panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; } .page-panel-title { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 0; } /* ---------------------------------------------------------- Mobile nav */ .menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-sm); cursor: pointer; flex-direction: column; justify-content: center; gap: 4px; padding: 10px; } .menu-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; } .mobile-overlay { display: none; } @media (max-width: 1100px) { .topnav-links { display: none; } .topnav-links.mobile-open { display: flex; flex-direction: column; gap: 0; position: absolute; top: 48px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px; z-index: 39; } .topnav-links.mobile-open .topnav-link { padding: 12px 14px; border-radius: var(--r-sm); } .topnav-links.mobile-open .topnav-link:hover { background: var(--surf); } /* In the stacked panel the SO/PO pills become ordinary menu rows */ .topnav-links.mobile-open .topnav-pill { min-width: 0; width: auto; height: auto; justify-content: flex-start; border: 0; border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; letter-spacing: normal; } .topnav-links.mobile-open .topnav-pill:hover { background: var(--surf); } /* Stacked panel: show the dropdown items inline beneath the toggle (undo the desktop full-height flex row on the wrapper). */ .topnav-dropdown { display: block; align-self: auto; } .topnav-dropdown-menu { display: block; position: static; top: auto; left: auto; min-width: 0; padding: 0; margin: 0 0 0 12px; border: 0; box-shadow: none; background: none; } .topnav-dropdown-menu::before { display: none; } .topnav-dropdown-item { padding: 12px 14px; } .topnav-caret { display: none; } .topnav-sep { display: none; } .menu-toggle { display: flex; } .grid-2, .grid-3, .grid-4, .filter-bar, .filter-bar-ncr, .pm-card-grid, .pm-project-header, .pm-section-grid, .pm-meta-grid, .pm-form-grid, .ncr-form-grid-2, .ncr-form-grid-3 { grid-template-columns: 1fr; } .kpi-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .kpi-cell:nth-child(3) { border-left: 0; } .kpi-cell { border-top: 1px solid var(--line); } .kpi-cell:nth-child(-n+2) { border-top: 0; } .span-2, .ncr-field-span-2 { grid-column: span 1; } } @media (max-width: 640px) { .main { padding: 12px; } .page-title { font-size: 18px; } .kpi-strip { grid-template-columns: 1fr; } .kpi-cell { border-left: 0; border-top: 1px solid var(--line); } .kpi-cell:first-child { border-top: 0; } .table { display: block; overflow-x: auto; white-space: nowrap; } } /* Compatibility shims for old class names that may remain in templates */ .pm-compact-page .card { padding: 18px; } .dashboard-kpi-grid { display: none; } /* replaced by .kpi-strip on dashboard */ .pm-dashboard-mobile-panel { display: none; } .pm-dashboard-desktop-only { display: block; } .pm-dashboard-table-desktop { overflow-x: auto; } /* Mobile/tablet minimalist dashboard panels */ .pm-mobile-card-list { display: grid; gap: 10px; } .pm-mobile-item { padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); } .pm-mobile-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .pm-mobile-item-title { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; } .pm-mobile-item-meta { margin-top: 6px; color: var(--mut); font-size: 12px; line-height: 1.45; } .pm-mobile-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pm-mobile-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pm-mobile-action-grid .button, .pm-mobile-action-grid .button-secondary { width: 100%; } .pm-mobile-detail-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--mut); font-size: 12px; } .pm-mobile-detail-row strong { color: var(--ink); text-align: right; } @media (max-width: 1100px) { .kpi-strip { display: none; } .pm-dashboard-desktop-only, .pm-dashboard-table-desktop { display: none; } .pm-dashboard-mobile-panel { display: block; margin-bottom: 14px; } .filter-bar, .filter-bar-ncr { grid-template-columns: 1fr; } .section-header, .pm-toolbar { gap: 10px; margin-bottom: 10px; } } @media (max-width: 640px) { .pm-mobile-action-grid { grid-template-columns: 1fr; } .pm-mobile-item { padding: 10px; border-radius: var(--r-md); } } /* Phase 1 workflow updates */ .pm-field-span-2 { grid-column: span 2; } .pm-form-section-card { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surf); } .pm-member-picker-grid, .pm-milestone-create-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(180px, .8fr) auto; gap: 12px; align-items: end; } .pm-member-add-wrap { display: flex; align-items: end; } .pm-selected-pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pm-selected-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font-size: 12px; } .pm-selected-pill button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-weight: 700; padding: 0 2px; } .pm-milestone-create-list { display: grid; gap: 10px; } .pm-mobile-link-card { display: block; color: inherit; } .pm-mobile-link-card:hover { color: inherit; border-color: var(--accent-dim); } .pm-project-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pm-project-summary-grid .pm-meta-tile { padding: 9px 10px; } .pm-project-summary-grid .pm-meta-label { font-size: 7.5px; } .pm-project-summary-grid .pm-meta-value { font-size: 11.5px; line-height: 1.25; } @media (max-width: 1100px) { .pm-field-span-2 { grid-column: span 1; } .pm-member-picker-grid, .pm-milestone-create-row, .pm-project-summary-grid { grid-template-columns: 1fr; } } /* Member picker: dynamic search and selected member list */ .pm-member-search-panel { position: relative; } .pm-member-search-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px); gap: 12px; align-items: end; } .pm-member-results { display: none; margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); } .pm-member-results.is-open { display: grid; } .pm-member-result { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; padding: 10px 12px; cursor: pointer; } /* Member picker filtering fix: class display rules should not override hidden results */ .pm-member-result[hidden] { display: none !important; } .pm-member-result:last-child { border-bottom: 0; } .pm-member-result:hover, .pm-member-result:focus { background: var(--surf); } .pm-member-avatar { width: 34px; height: 34px; min-width: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; } .pm-member-result-text, .pm-selected-member-text { display: grid; gap: 2px; min-width: 0; } .pm-member-result-text strong, .pm-selected-member-text strong { color: var(--ink); font-size: 13px; font-weight: 650; } .pm-member-result-text small, .pm-selected-member-text small { color: var(--mut); font-size: 12px; } .pm-selected-members-wrap { margin-top: 12px; } .pm-selected-members-label { margin-bottom: 8px; } .pm-selected-member-list { display: grid; gap: 8px; } .pm-selected-member { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(150px, 220px) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .pm-selected-member select { min-width: 0; } .pm-selected-member-remove { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--mut); cursor: pointer; font-size: 18px; line-height: 1; } .pm-selected-member-remove:hover { color: var(--red); border-color: var(--red); } /* Project detail mobile containment */ .pm-detail-compact, .pm-detail-compact * { box-sizing: border-box; } .pm-detail-compact { max-width: 100%; } .pm-detail-compact .card, .pm-detail-compact .pm-project-header, .pm-detail-compact .pm-card-grid, .pm-detail-compact .detail-main-column, .pm-detail-compact .detail-side-column { min-width: 0; max-width: 100%; } .pm-detail-compact .section-header, .pm-detail-compact .form-actions, .pm-detail-compact .pm-file-row, .pm-detail-compact .pm-comment-author { flex-wrap: wrap; } .pm-detail-compact .pm-comment, .pm-detail-compact .pm-subproject, .pm-detail-compact .pm-meta-value, .pm-detail-compact .pm-comment-body, .pm-detail-compact .pm-file-name, .pm-detail-compact .pm-file-desc { overflow-wrap: anywhere; } .pm-detail-compact .table { max-width: 100%; } @media (max-width: 1100px) { .pm-member-search-row, .pm-selected-member { grid-template-columns: 1fr; } .pm-selected-member-remove { justify-self: start; } .pm-detail-compact .pm-project-header, .pm-detail-compact .pm-card-grid, .pm-detail-compact .pm-section-grid, .pm-detail-compact .pm-meta-grid, .pm-detail-compact .pm-project-summary-grid { grid-template-columns: minmax(0, 1fr); } .pm-detail-compact .table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } } @media (max-width: 640px) { .pm-detail-compact .card { padding: 14px; } .pm-detail-compact .form-actions { gap: 8px; } .pm-detail-compact .form-actions .button { width: 100%; justify-content: center; } .pm-detail-compact .pm-reply { margin-left: 0; } } .pm-mobile-item-main { display: block; color: inherit; text-decoration: none; } /* ---------------------------------------------------------- Notifications */ .notifications { position: relative; } .notification-bell-btn { position: relative; } .notification-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid var(--bg); } .notification-menu { display: none; position: absolute; top: 42px; right: 0; width: min(360px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 90px)); overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg); z-index: 55; box-shadow: 0 8px 28px rgba(0,0,0,0.10); } html[data-theme="dark"] .notification-menu { box-shadow: 0 8px 28px rgba(0,0,0,0.45); } .notification-menu.open { display: block; } .notification-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; } .notification-menu-header form { margin: 0; } .notification-menu-header button { border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 0; } .notification-list { max-height: 455px; overflow-y: auto; padding: 6px; } .notification-item { display: block; padding: 10px 10px; border-radius: var(--r-sm); color: var(--ink); border-left: 3px solid transparent; } .notification-item:hover { background: var(--surf); } .notification-item.unread { border-left-color: var(--red); background: var(--surf); } .notification-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); } .notification-message { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); line-height: 1.25; } .notification-meta { display: block; margin-top: 5px; font-size: 11px; color: var(--dim); } .notification-empty { padding: 18px 12px; color: var(--dim); font-size: 13px; text-align: center; } @media (max-width: 640px) { .notification-menu { right: -42px; width: calc(100vw - 24px); } } /* CEO role simplified views */ .ceo-page { max-width: 1380px; margin: 0 auto; } .ceo-page-head { margin-bottom: 18px; } .ceo-kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .ceo-kpi-cell { display: block; min-height: 78px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: inherit; } .ceo-kpi-cell:hover { background: var(--surf); } .ceo-kpi-cell span { display: block; color: var(--dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .ceo-kpi-cell strong { display: block; margin-top: 7px; color: var(--ink); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; } .ceo-kpi-cell small { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; } .ceo-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .ceo-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .ceo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); } .ceo-panel-title { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.03em; } .ceo-panel-note { margin-top: 3px; color: var(--dim); font-size: 12px; } .ceo-project-list { display: grid; } .ceo-project-card { display: block; padding: 15px 18px; border-bottom: 1px solid var(--line); color: inherit; } .ceo-project-card:last-child { border-bottom: 0; } .ceo-project-card:hover { background: var(--surf); } .ceo-project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; } .ceo-project-number { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; } .ceo-project-name { margin-top: 2px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; } .ceo-project-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 9px; color: var(--mut); font-size: 12px; line-height: 1.35; } .ceo-project-summary { color: var(--mut); font-size: 12.5px; line-height: 1.45; } .ceo-empty { padding: 16px 18px; color: var(--dim); font-size: 13px; } .ceo-project-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 16px; align-items: start; margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .ceo-project-hero-main h2 { margin: 3px 0 0; color: var(--ink); font-size: 30px; line-height: 1.05; letter-spacing: -0.05em; } .ceo-hero-pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; } .ceo-pill { font-size: 11px; line-height: 1.05; } .ceo-summary-box { margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf); } .ceo-summary-label { margin-bottom: 6px; color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .ceo-summary-box p { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.45; } .ceo-mobile-status-strip { display: none; } .ceo-detail-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ceo-detail-tile { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surf); } .ceo-detail-tile span { display: block; margin-bottom: 3px; color: var(--dim); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; } .ceo-detail-tile strong { display: block; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .ceo-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ceo-mini-list { margin: 0; padding: 0; list-style: none; } .ceo-mini-list li { padding: 13px 18px; border-bottom: 1px solid var(--line); } .ceo-mini-list li:last-child { border-bottom: 0; } .ceo-mini-title { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; } .ceo-mini-meta { margin-top: 4px; color: var(--mut); font-size: 12.5px; line-height: 1.45; } .ceo-full-details-note { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surf); color: var(--mut); font-size: 13px; } .ceo-full-details-note strong { color: var(--ink); } @media (max-width: 1100px) { .ceo-kpi-strip { display: none; } .ceo-section-grid, .ceo-project-hero, .ceo-summary-grid { grid-template-columns: 1fr; } .ceo-detail-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ceo-hero-pills .ceo-status-pill, .ceo-hero-pills .ceo-priority-pill { display: none; } } @media (max-width: 640px) { .ceo-page-head { margin-bottom: 14px; } .ceo-panel-head { padding: 13px 14px; } .ceo-project-card { padding: 14px; } .ceo-project-card-top { display: block; } .ceo-project-card-top .badge { margin-top: 8px; } .ceo-project-name { font-size: 15px; } .ceo-project-hero { padding: 15px; } .ceo-project-hero-main h2 { font-size: 24px; } .ceo-hero-pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; } .ceo-hero-pills .ceo-status-pill, .ceo-hero-pills .ceo-priority-pill { display: inline-flex; } .ceo-hero-pills .ceo-pill { width: auto; min-height: 22px; align-items: center; justify-content: center; padding: 3px 7px; text-align: center; white-space: nowrap; line-height: 1.05; } .ceo-mobile-status-strip { display: none; } .ceo-mobile-status-line { color: var(--mut); font-size: 13px; font-weight: 600; } .ceo-mobile-status-line strong { color: var(--ink); } .ceo-mobile-risk-line { width: fit-content; max-width: 100%; padding: 4px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700; } .ceo-detail-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ceo-full-details-note { display: block; } .ceo-full-details-note .button { margin-top: 12px; } } /* CEO dashboard compact section behavior */ .ceo-collapsible-panel { display: block; } .ceo-section-count { color: var(--dim); font-weight: 600; } .ceo-section-toggle { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surf); color: var(--dim); cursor: pointer; } .ceo-section-toggle:hover { color: var(--ink); border-color: var(--line-2); } .ceo-section-chevron { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid currentColor; transition: transform .15s ease; } @media (min-width: 1101px) { .ceo-collapsible-panel { min-height: 0; } .ceo-collapsible-panel .ceo-panel-head { min-height: 74px; } .ceo-collapsible-panel .ceo-project-list { max-height: 246px !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .ceo-collapsible-panel .ceo-project-list::-webkit-scrollbar { width: 8px; } .ceo-collapsible-panel .ceo-project-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; } .ceo-collapsible-panel .ceo-project-list::-webkit-scrollbar-track { background: transparent; } } @media (max-width: 1100px) { .ceo-collapsible-panel .ceo-panel-head { cursor: default; align-items: center; } .ceo-section-toggle { display: inline-flex; } .ceo-collapsible-panel .ceo-project-list { display: none; max-height: none !important; overflow: visible !important; } .ceo-collapsible-panel.is-open .ceo-project-list { display: grid; } .ceo-collapsible-panel.is-open .ceo-section-chevron { transform: rotate(90deg); } .ceo-collapsible-panel:not(.is-open) .ceo-panel-head { border-bottom: 0; } } /* Executive dashboard compact layout update */ .pm-executive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .pm-executive-card { min-width: 0; } .pm-executive-scroll { overflow-y: auto; overflow-x: auto; border-top: 1px solid var(--line); } .pm-executive-scroll-4 { max-height: 310px; } .pm-executive-scroll-5 { max-height: 365px; } .pm-executive-table { margin: 0; } .pm-executive-table th, .pm-executive-table td { padding-top: 9px; padding-bottom: 9px; } /* Compact action buttons and tighter project detail side cards */ .button-compact { padding: 5px 9px !important; font-size: 11px !important; min-height: 0 !important; line-height: 1.2 !important; } .pm-subproject-compact { padding: 9px 10px; } .pm-subproject-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pm-card-actions-tight { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-left: auto; } .pm-card-actions-tight form { margin: 0; } /* Project manager dynamic picker */ .pm-dynamic-pm-field { position: relative; } .pm-hidden-field select { display: none; } .pm-hidden-field .errorlist { margin-top: 8px; } .pm-selected-pm-list { margin-top: 8px; } .pm-selected-pm { grid-template-columns: auto minmax(180px, 1fr) auto; } .pm-pm-results { position: relative; z-index: 6; } @media (max-width: 1300px) { .pm-executive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .pm-executive-grid { grid-template-columns: 1fr; } .pm-executive-scroll, .pm-executive-scroll-4, .pm-executive-scroll-5 { max-height: none; overflow: visible; } .pm-subproject-main { align-items: flex-start; } .pm-card-actions-tight { flex-wrap: wrap; justify-content: flex-start; } } /* Fix milestone/member inline action buttons so labels do not stack vertically */ .pm-subproject-compact .pm-subproject-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 10px; } .pm-subproject-compact .pm-subproject-main > div:first-child { min-width: 0; } .pm-subproject-compact .pm-subproject-main strong { display: block; overflow-wrap: anywhere; word-break: normal; } .pm-subproject-compact .pm-card-actions-tight { flex: 0 0 auto; flex-wrap: nowrap !important; align-items: flex-start; justify-content: flex-end; min-width: max-content; } .pm-subproject-compact .pm-card-actions-tight .button-compact { white-space: nowrap !important; min-width: 44px; text-align: center; } /* Focused form safeguards */ button.is-submitting, input[type="submit"].is-submitting, .button.is-submitting, button[disabled], input[type="submit"][disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .pm-actual-cost-field[hidden], .pm-actual-cost-field.is-hidden { display: none !important; } /* Current workflow support preserved from latest version */ .pm-decline-form { display: inline-flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; } .pm-decline-reason-wrap { display: none; width: 240px; max-width: 100%; gap: 6px; } .pm-decline-reason-wrap.open { display: grid; } .pm-decline-reason-wrap textarea { min-height: 48px; resize: vertical; } .button-disabled, button:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.45); } /* Latest project manager dynamic picker class names */ .pm-manager-picker-field { position: relative; } .pm-hidden-select { display: none; } .pm-manager-selected { margin-bottom: 8px; } .pm-manager-results { z-index: 40; } .pm-selected-manager { margin-bottom: 0; } /* Focused aesthetic tweaks: task buttons and project detail compact actions */ .pm-task-dashboard-actions { flex-wrap: nowrap; gap: 6px; white-space: nowrap; } .pm-task-dashboard-actions .button, .pm-task-dashboard-actions .button-secondary, .pm-task-dashboard-actions button { padding: 5px 9px; min-height: 28px; font-size: 11px; line-height: 1.2; white-space: nowrap; } .pm-task-dashboard-actions form { margin: 0; } .pm-task-action-cell { white-space: nowrap; } .pm-task-detail-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pm-title-action-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; } .pm-title-action-text { min-width: 0; overflow-wrap: anywhere; word-break: normal; } .pm-task-title-actions { flex-wrap: nowrap !important; justify-content: flex-end; min-width: max-content; } .pm-task-title-actions form { margin: 0; } .pm-project-detail-task-table .button-compact, .pm-file-row .button-compact, .pm-detail-compact .section-header .button-compact { white-space: nowrap !important; } .pm-file-row > div:first-child { min-width: 0; } @media (max-width: 1100px) { .pm-detail-compact .pm-project-summary-grid, .pm-task-detail-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-detail-compact .pm-meta-tile { padding: 10px; } .pm-detail-compact .button-compact, .pm-detail-compact .pm-file-row .button, .pm-detail-compact .pm-file-row .button-secondary, .pm-detail-compact .pm-card-actions-tight .button, .pm-detail-compact .pm-card-actions-tight .button-secondary, .pm-detail-compact .pm-card-actions-tight button { padding: 5px 8px !important; min-height: 28px !important; font-size: 11px !important; line-height: 1.2 !important; white-space: nowrap !important; } .pm-detail-compact .pm-card-actions-tight { flex-wrap: nowrap !important; } } @media (max-width: 640px) { .pm-task-dashboard-actions { flex-wrap: nowrap; overflow-x: auto; } .pm-mobile-item-actions.pm-task-dashboard-actions .button, .pm-mobile-item-actions.pm-task-dashboard-actions .button-secondary, .pm-mobile-item-actions.pm-task-dashboard-actions button { width: auto; flex: 0 0 auto; } .pm-detail-compact .pm-project-summary-grid, .pm-task-detail-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pm-detail-compact .form-actions .button-compact { width: auto; } .pm-title-action-row, .pm-subproject-compact .pm-subproject-main { grid-template-columns: minmax(0, 1fr) auto; } .pm-file-row { align-items: flex-start; flex-wrap: nowrap !important; } } /* Global Chinese / English language switch */ .lang-toggle { border: 1px solid var(--line, #d8dee8); background: var(--card, #ffffff); color: var(--text, #0f172a); border-radius: 999px; height: 34px; padding: 0 13px; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: 0 8px 20px rgba(15, 23, 42, .06); } .lang-toggle:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); } @media (max-width: 720px) { .lang-toggle { height: 32px; padding: 0 10px; font-size: 12px; } } /* ============================================================ MTR portal mobile. Additive on purpose: every rule below sits inside a media query, so desktop rendering cannot change. The ≤1100px hamburger styles already exist above (.menu-toggle, .topnav-links.mobile-open) — base.html now renders the button. ============================================================ */ @media (max-width: 720px) { .topnav { padding: 0 14px; gap: 10px; } .lang-toggle-form { margin-right: 0; } /* Wide tables scroll inside their card instead of pushing the whole page (and its buttons) past the right edge. The min-width stops the browser crushing columns into one-word-per-line strips; narrow tables just get roomier columns and no scrollbar appears. */ .card { overflow-x: auto; } .data-table { min-width: 640px; } /* Comfortable tap targets. */ .button, .button-secondary, .button-danger { min-height: 40px; } } /* ============================================================ Universal search (navbar) + entity overview pages. Additive; uses the existing theme tokens so light/dark both work. ============================================================ */ .topnav-search { /* margin-left:auto keeps the box hugging the language toggle: once the box hits max-width, leftover space lands between the nav tabs and the search instead of after it. */ position: relative; flex: 1; min-width: 0; max-width: 520px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: border-color .15s, background .15s; } .topnav-search:focus-within { border-color: var(--accent); background: var(--bg); } .topnav-search-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--dim); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .topnav-search-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; font-family: inherit; font-size: 13.5px; color: var(--ink); } .topnav-search-input::placeholder { color: var(--dim); } .topnav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .topnav-search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 460px); overflow-y: auto; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 60; padding: 6px; } html[data-theme="dark"] .topnav-search-panel { box-shadow: 0 12px 32px rgba(0,0,0,.5); } .gs-message { padding: 12px 10px; font-size: 13px; color: var(--dim); } .gs-group-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); padding: 10px 10px 4px; } .gs-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .gs-item:hover, .gs-item.active { background: var(--surf); color: var(--ink); } .gs-item-main { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 500; } .gs-item-main, .gs-item-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-item-sub { font-size: 11.5px; font-weight: 400; color: var(--dim); margin-top: 1px; } .gs-item-type { font-size: 10.5px; color: var(--dim); flex-shrink: 0; white-space: nowrap; } /* Overview stat blocks */ .ov-bar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--surf); } .ov-seg { height: 100%; } .ov-seg-pass { background: var(--green); } .ov-seg-amber { background: var(--amber); } .ov-seg-red { background: var(--red); } .ov-seg-neutral { background: var(--dim); } .ov-seg-pending { background: var(--line-2); } .ov-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--mut); } .ov-legend-item { display: inline-flex; align-items: center; gap: 6px; } .ov-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; } .ov-status-list { display: flex; flex-direction: column; gap: 8px; } .ov-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ov-status-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .ov-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ov-chip { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surf); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--accent); text-decoration: none; } .ov-chip:hover { border-color: var(--accent); background: var(--accent-soft); } @media (max-width: 1100px) { /* Nav links collapse into the hamburger here, so let search take the slack. */ .topnav-search { max-width: none; } } @media (max-width: 640px) { /* Mobile uses the hamburger nav; the search box is omitted for v1. With the search (our flex:1 spacer) gone, push the right-hand controls over. */ .topnav-search { display: none; } .lang-toggle-form { margin-left: auto; } } /* Compact overview stats — three side-by-side panels (was a full-width KPI strip + two half-width cards; a third of the footprint, shorter). */ .ov-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; } .ov-stat-panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ov-stat-panel .section-eyebrow { margin-bottom: 2px; } .ov-stat-headline { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .ov-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .ov-mini { display: flex; flex-direction: column; } .ov-mini-val { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; } .ov-mini-suffix { font-size: 12px; font-weight: 500; color: var(--dim); } .ov-mini-lab { font-size: 10.5px; color: var(--dim); margin-top: 1px; line-height: 1.25; } .ov-bar-sm { height: 8px; } .ov-legend-sm { gap: 6px 10px; font-size: 11px; } .ov-status-sm { gap: 5px; } .ov-status-sm .status-badge { font-size: 11px; padding: 1px 8px; } .ov-stat-foot { font-size: 11px; margin-top: auto; } @media (max-width: 900px) { .ov-stats { grid-template-columns: 1fr; } } /* Overview submissions table — newest 25, rest behind an expand toggle. */ .ov-table-wrap:not(.ov-expanded) .ov-row-extra { display: none; } .ov-expand-btn { margin-top: 2px; } /* Shipment serial ranges: 3+ consecutive same-status serials merged into one clickable badge that expands to the individual chips. */ .serial-range > summary { display: inline-flex; align-items: center; gap: 4px; } .serial-chip > summary::-webkit-details-marker, .serial-range > summary::-webkit-details-marker { display: none; } .serial-range-count { font-weight: 400; opacity: .85; } .serial-range-body { margin-top: 6px; }