/* ============================================================ 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; /* 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; --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: 60px; padding: 0 28px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .brand { display: flex; align-items: center; gap: 4px; } .brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); } .brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-bottom: -2px; } .topnav-sep { width: 1px; height: 18px; background: var(--line-2); } .topnav-links { display: flex; gap: 20px; } .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; } .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: 28px; max-width: 1480px; width: 100%; margin: 0 auto; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-eyebrow { font-size: 12px; color: var(--dim); margin-bottom: 6px; } .page-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; } .page-subtitle { margin: 6px 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: 9px 16px; border-radius: var(--r-pill); min-height: 38px; 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: 18px; } .hero-banner { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin-bottom: 22px; } .section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .section-eyebrow, .hero-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); } .card-title { font-size: 15px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.3px; color: var(--ink); } /* ---------------------------------------------------------- Grid */ .grid { display: grid; gap: 16px; margin-bottom: 16px; } .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: 16px 18px; 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; } /* ---------------------------------------------------------- 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; } .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: 12px 16px; border-radius: var(--r-md); margin-bottom: 16px; 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: 22px; } .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: 60px; 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); } .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: 16px; } .page-title { font-size: 22px; } .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; } }