*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: #fff; color: #333; min-height: 100vh; } /* ── NAV ── */ .nav { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 0 24px; height: 64px; } .nav-brand { line-height: 1; } .nav-brand .brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; } .nav-brand .brand-sub { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #666; margin-top: 6px; padding-left: 2px; } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-user { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: #ccc; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #555; } .nav-bell { color: #666; cursor: pointer; display: flex; align-items: center; } /* ── VIEW TABS ── */ .view-tabs { display: flex; gap: 16px; padding: 12px 24px 0 48px; background: #fff; border-bottom: 1px solid #e0e0e0; } .view-tab { padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 4px 4px 0 0; border: 1px solid #e0e0e0; color: #666; background: transparent; transition: all 0.15s; } .view-tab:not(.active) { border-bottom: none; } .view-tab.active { background: #717172; color: #fff; border-color: #717172; } /* ── CONTENT LAYOUT ── */ .content-wrap { display: flex; height: calc(100vh - 108px); overflow: hidden; } /* ── SIDEBAR ── (also inlined in index.html / table.html so cards always pick up layout) */ .sidebar { width: 248px; min-width: 248px; background: #f2f2f2; padding: 48px 48px 16px; overflow-y: auto; box-sizing: border-box; } #sidebarProjects { display: flex; flex-direction: column; gap: 34px; width: 100%; padding-top: 0; text-align: center; } /* Scoped to sidebar so font stylesheet (css2) cannot override */ /* text-align on card centers each row; children stay block-level so inheritance works */ #sidebarProjects .project-card-compact { width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px; background: #fff; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 16px; } #sidebarProjects .project-card-compact:hover { border-color: #bdbdbd; } #sidebarProjects .pcc-name { font-size: 16px; font-weight: 600; color: #333; margin: 0; } #sidebarProjects .pcc-hours { font-size: 26px; font-weight: 700; color: #333; line-height: 1.2; margin: 0; } #sidebarProjects .pcc-hours span { font-size: 16px; font-weight: 400; color: #888; } #sidebarProjects .pcc-progress { font-size: 12px; font-weight: 700; color: #555; margin: 0; } /* ── MAIN AREA ── */ .main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* ── WEEK SWITCHER + FILTER ── */ .toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid #e0e0e0; background: #fff; flex-shrink: 0; } .week-tabs { display: flex; gap: 0; } .week-tab { padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer; color: #555; border-bottom: 2px solid transparent; transition: all 0.15s; } .week-tab.active { color: #717172; border-bottom-color: #717172; font-weight: 700; } .week-tab:hover:not(.active) { color: #333; } .filter-row { display: flex; align-items: center; gap: 14px; } .filter-label { font-size: 12px; font-weight: 600; color: #333; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .filter-label:hover, .filter-label.active { background: #eee; } .status-filters { display: flex; align-items: center; gap: 10px; } .status-filter { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #555; cursor: pointer; padding: 4px 8px; border-radius: 4px; border: 1px solid transparent; transition: all 0.15s; } .status-filter:hover, .status-filter.active { background: #eee; } .dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; } .status-filter .dot { width: 16px; height: 16px; } .dot-available { background: #6FCF97; } .dot-near { background: #F2C94C; } .dot-over { background: #F2994A; } .material-icons.status-icon-alert { font-size: 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #EB5757; line-height: 1; } .status-filter .material-icons.status-icon-alert { font-size: 16px; width: 16px; height: 16px; } .view-toggle { display: flex; margin-left: 36px; } .view-btn { width: 32px; height: 28px; border: 1px solid #ccc; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; transition: all 0.15s; } .view-btn:first-child { border-radius: 4px 0 0 4px; } .view-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; } .view-btn.active { background: #717172; color: #fff; border-color: #717172; } .view-btn.active + .view-btn { border-left: 1px solid #ccc; } /* ── GRID ── */ .grid-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* ── TEAM MEMBER CARD ── */ .team-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s; } .team-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; } .card-name-block { display: flex; align-items: center; gap: 8px; } .card-name { font-size: 12px; font-weight: 600; color: #333; line-height: 1.3; } .card-hours-block { text-align: right; } .card-hours-num { font-size: 20px; font-weight: 700; color: #333; line-height: 1; } .card-hours-cap { font-size: 11px; color: #888; } .card-hours-date { font-size: 9px; color: #888; text-align: right; margin-top: 2px; } .card-title { font-size: 11px; color: #666; font-weight: 400; margin-top: -22px; margin-left: 26px; } .card-actions { display: flex; justify-content: flex-end; } .btn-assign { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 600; color: #333; background: #E0E0E0; border: none; border-radius: 4px; padding: 7px 14px; margin-top: 8px; margin-bottom: 16px; cursor: pointer; transition: background 0.15s; } .btn-assign:hover { background: #d0d0d0; } .card-projects { display: flex; flex-wrap: wrap; gap: 5px; } .project-tag { font-size: 9px; font-weight: 500; color: #444; background: transparent; border: 1px solid #e0e0e0; border-radius: 3px; padding: 3px 7px; white-space: nowrap; } /* status border indicator */ .team-card[data-status="near"] { border-left: 3px solid #F2C94C; } .team-card[data-status="over"] { border-left: 3px solid #F2994A; } .team-card[data-status="alert"] { border-left: 3px solid #EB5757; } .team-card.hidden { display: none; } /* ── TABLE (list view) ── */ .table-scroll { flex: 1; overflow-y: auto; padding: 0 20px 20px; } table { width: 100%; border-collapse: collapse; font-size: 12px; } thead th { text-align: left; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; border-bottom: 1px solid #e0e0e0; background: #fff; position: sticky; top: 0; z-index: 1; } thead th[data-sort] { cursor: pointer; user-select: none; transition: color 0.15s; } thead th[data-sort]:hover { color: #333; } thead th[data-sort].th-sorted { color: #111; } thead th[data-sort].th-sorted-asc::after, thead th[data-sort].th-sorted-desc::after { margin-left: 5px; font-size: 0.68em; } thead th[data-sort].th-sorted-asc::after { content: '\25B2'; } thead th[data-sort].th-sorted-desc::after { content: '\25BC'; } tbody tr { transition: background 0.1s; } tbody tr:nth-child(odd) { background: #fff; } tbody tr:nth-child(even) { background: #f7f8fa; } tbody tr:hover { background: #eef0f4; } tbody tr.hidden { display: none; } td { padding: 11px 14px; vertical-align: middle; color: #333; } /* Col: Name */ .td-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; white-space: nowrap; } /* Col: Capacity */ .td-capacity { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; } .cap-available { color: #27AE60; } .cap-near { color: #D4A017; } .cap-over { color: #C0622F; } .cap-alert { color: #C0392B; } /* Col: Projects */ .td-projects { display: flex; flex-wrap: wrap; gap: 4px; } .table-scroll .td-projects .project-tag { padding: 2px 6px; } /* Col: Hours */ .td-hours { font-size: 13px; font-weight: 700; white-space: nowrap; } .td-hours .cap { font-size: 11px; font-weight: 400; color: #888; } /* Col: Assign/Edit */ .td-action a { font-size: 11px; font-weight: 600; color: #2F6FE8; text-decoration: none; cursor: pointer; } .td-action a:hover { text-decoration: underline; } /* ── MODAL ── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 100; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .modal-overlay.open { display: flex; } .modal { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; width: 400px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); position: relative; } .modal-close-row { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; justify-content: flex-end; align-items: flex-start; margin: 0; min-height: 0; } .modal-close { width: 30px; height: 30px; padding: 0; border: none; background: transparent; color: #666; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .modal-close:hover { background: #f0f0f0; color: #333; } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 6px; margin-bottom: 14px; } .modal-name { font-size: 12px; font-weight: 600; color: #333; } .modal-hours-num { font-size: 20px; font-weight: 700; color: #333; line-height: 1; } .modal-hours-cap { font-size: 11px; color: #888; } .modal-date { font-size: 9px; color: #888; margin-top: 2px; text-align: right; } .modal-projects { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .modal-project-row { display: grid; grid-template-columns: 10.75rem 48px 60px; align-items: center; column-gap: 0; } .modal-project-name { font-size: 12px; color: #333; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-hour-input { font-family: 'Plus Jakarta Sans', sans-serif; width: 60px; padding: 5px 8px; font-size: 12px; font-weight: 600; border: 1px solid #ccc; border-radius: 4px; text-align: center; color: #333; background: #fafafa; } .modal-hour-input:focus { outline: none; border-color: #888; background: #fff; } .modal-add-project { margin-bottom: 14px; } .modal-add-project[hidden] { display: none !important; } .modal-add-project-toggle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; color: #1565C0; text-decoration: none; cursor: pointer; display: inline-block; margin-top: 0; } .modal-add-project-panel:not([hidden]) ~ .modal-add-project-toggle { margin-top: 10px; } .modal-add-project-toggle:hover { color: #0D47A1; } .modal-add-project-panel { display: grid; grid-template-columns: 1fr 60px auto; align-items: center; column-gap: 12px; margin-top: 0; } .modal-add-project-panel[hidden] { display: none !important; } .modal-add-project-select { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 500; color: #333; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; background: #fafafa; min-width: 0; } .modal-add-project-save { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; color: #1565C0; text-decoration: none; cursor: pointer; white-space: nowrap; } .modal-add-project-save:hover { color: #0D47A1; } .modal-alert-hint { font-size: 11px; font-weight: 600; color: #C62828; line-height: 1.35; margin: 0 0 12px 0; } .modal-alert-hint[hidden] { display: none !important; } .modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid #eee; } .modal-footer-actions { display: flex; gap: 8px; margin-left: auto; } .btn-flag-manager { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 4px; cursor: pointer; border: 1px solid #C62828; background: transparent; color: #C62828; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .btn-flag-manager:hover:not(.is-flagged) { background: rgba(198, 40, 40, 0.07); } .btn-flag-manager.is-flagged { background: #C62828; color: #fff; border-color: #C62828; cursor: default; pointer-events: none; } .btn-flag-manager[hidden] { display: none !important; } .btn-cancel, .btn-save { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; padding: 7px 16px; border-radius: 4px; cursor: pointer; border: none; transition: background 0.15s; } .btn-cancel { background: #E0E0E0; color: #333; } .btn-cancel:hover { background: #d0d0d0; } .btn-save { background: #333; color: #fff; } .btn-save:hover { background: #111; }