/* ========================================================= Zeal Portal — Projects UI (arc D §2–3) The dashboard working surface + the new-project modal, styled to the arc D design authority on portal tokens. Partnered with js/system/components/projects-ui.js. ========================================================= */ /* ── the spreadsheet-as-default table (arc D §2) ── */ .pjx-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pjx-table th { text-align: left; font-family: var(--font-ex); font-size: 10.5px; font-weight: var(--w-bold); letter-spacing: 0.07em; text-transform: lowercase; color: var(--ink-3); padding: 8px 10px; /* table-head underline is structural — ink in the working register */ border-bottom: 1px solid var(--rule-structural, var(--rule-3)); white-space: nowrap; } .pjx-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; } .pjx-table tr:hover td { background: var(--paper-2); } .pjx-table .pjx-projname { font-weight: 600; } .pjx-table .pjx-projname a { color: inherit; text-decoration: none; } .pjx-table .pjx-projname a:hover { color: var(--accent); } .pjx-addclient { color: var(--ink-3); text-decoration: none; font-size: 12.5px; } .pjx-addclient:hover { color: var(--accent); } /* ── zpid copy chip ── */ .pjx-zpid { position: relative; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; background: var(--paper-2); border: 1px solid var(--warm); border-radius: var(--r-soft); padding: 2px 7px; cursor: pointer; white-space: nowrap; } .pjx-zpid:hover { border-color: var(--accent); } .pjx-zpid--none { border-color: transparent; background: none; cursor: default; color: var(--ink-4); } .pjx-zpid__cp { color: var(--ink-3); margin-left: 5px; font-size: 10px; } .pjx-zpid.is-copied::after { content: "copied."; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--font-body, var(--font-std)); font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-soft); white-space: nowrap; z-index: 5; } /* ── phase / status pills ── */ .pjx-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: var(--r-soft); padding: 2px 10px; line-height: 1.5; background: var(--paper-2); color: var(--ink-2); } .pjx-pill--discovery { background: #EEF2FB; color: #2456C8; } .pjx-pill--development { background: var(--green-soft); color: var(--green); } .pjx-pill--preprod { background: #FFF1E8; color: var(--accent); } .pjx-pill--delivery { background: var(--accent); color: var(--paper); } .pjx-pill--debrief { background: #F0EDE9; color: var(--ink-3); } .pjx-pill--active { background: var(--green-soft); color: var(--green); } .pjx-pill--stalled { background: var(--red-soft); color: var(--red-status); } .pjx-pill--complete { background: #F0EDE9; color: var(--ink-3); } /* the quick-added-client onboarding dot (arc D §2) */ .pjx-newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 1px; } /* ── inline cell editing (arc D §2) ── */ .pjx-cellval { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; } .pjx-celledit__root { position: relative; display: inline-block; } .pjx-celledit { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--r-soft); border: 1px dashed transparent; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; } .pjx-celledit:hover, .pjx-celledit.is-open { border-color: var(--warm); background: var(--paper-2); } .pjx-celledit__pen { font-size: 10px; color: var(--ink-3); opacity: 0; transition: opacity 0.1s; } .pjx-celledit:hover .pjx-celledit__pen, .pjx-celledit.is-open .pjx-celledit__pen { opacity: 1; } /* Floating dropdown layer — portalled to , positioned by inline coords, so a dropdown is never clipped by a scrolling container. */ .pjx-floatmenu { } .pjx-cellmenu { background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-soft); box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 12%, transparent); min-width: 180px; max-height: 320px; overflow-y: auto; padding: 6px; font-size: 13px; } .pjx-cellmenu__opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border: none; background: none; border-radius: var(--r-soft); font: inherit; color: inherit; cursor: pointer; text-align: left; } .pjx-cellmenu__opt:hover { background: var(--paper-2); } .pjx-cellmenu__opt.is-sel { background: var(--paper-2); font-weight: 600; } .pjx-cellmenu__opt--clear { color: var(--ink-3); } /* ── the filter row (arc D §2) ── */ .pjx-filterrow { display: flex; gap: 8px; flex-wrap: wrap; } .pjx-filterchip__root { position: relative; display: inline-block; } .pjx-filterchip { font-family: var(--font-cd); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: lowercase; border: 1px solid var(--rule-2); border-radius: var(--r-soft); padding: 5px 13px; color: var(--ink-3); background: var(--paper); cursor: pointer; white-space: nowrap; } .pjx-filterchip:hover { background: var(--paper-2); } .pjx-filterchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* ── the client typeahead + quick-add (arc D §3) ── */ .pjx-ta { position: relative; } .pjx-ta__display { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; font-size: 13.5px; text-align: left; border: 1px solid var(--rule-2); border-radius: var(--r-soft); padding: 8px 10px; background: var(--paper); color: var(--ink); cursor: pointer; } .pjx-ta__display.is-empty { color: var(--ink-4); } .pjx-ta__caret { margin-left: auto; color: var(--ink-3); font-size: 11px; } .pjx-ta__clear { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; } .pjx-ta__input { width: 100%; font: inherit; font-size: 13.5px; border: 1px solid var(--accent); border-radius: var(--r-soft) var(--r-soft) 0 0; padding: 8px 10px; background: var(--paper); color: var(--ink); outline: none; } .pjx-ta__menu { position: absolute; left: 0; right: 0; z-index: 25; border: 1px solid var(--rule-2); border-top: none; border-radius: 0 0 var(--r-soft) var(--r-soft); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 10%, transparent); background: var(--paper); max-height: 260px; overflow-y: auto; font-size: 13px; } .pjx-ta__opt { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; } .pjx-ta__opt:hover { background: var(--paper-2); } .pjx-ta__tag { font-size: 10.5px; color: var(--ink-3); } .pjx-ta__none { padding: 8px 11px; color: var(--ink-4); font-size: 12px; } .pjx-ta__err { padding: 8px 11px; color: var(--red-status); font-size: 12px; } .pjx-ta__addnew { border-top: 1px dashed var(--warm); color: var(--accent); font-weight: 600; } /* ── InlineTypeahead: click-to-reveal, floating popover (cohesion pass) ── */ /* The collapsed cell reads as a borderless value / assign-link affordance. */ .pjx-ta--inline { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; } .pjx-ta--inline .pjx-ta__display { border: 0; background: transparent; padding: 0; width: auto; max-width: 100%; min-width: 0; font: inherit; color: var(--ink); } .pjx-ta--inline .pjx-ta__display.is-empty { color: var(--accent); } /* the value shrinks and ellipses so the caret/clear always stay visible */ .pjx-ta--inline .pjx-ta__val { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pjx-ta--inline .pjx-ta__caret { flex: 0 0 auto; margin-left: 4px; } .pjx-ta--inline .pjx-ta__clear { flex: 0 0 auto; position: static; transform: none; margin-left: 2px; } /* The floating popover: search input on top, results below. */ .pjx-ta__pop { background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-soft); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; } .pjx-ta__pop .pjx-ta__input { width: 100%; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; padding: 9px 11px; } .pjx-ta__pop .pjx-ta__input:focus { outline: none; border-bottom-color: var(--accent); } /* results list is a plain scroll block inside the popover (not absolute) */ .pjx-floatmenu .pjx-ta__menu { position: static; left: auto; right: auto; border: 0; box-shadow: none; border-radius: 0; max-height: 260px; overflow-y: auto; } .pjx-ta__optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pjx-ta__opt { gap: 12px; } .pjx-ta__tag { flex: 0 0 auto; white-space: nowrap; } /* ── the new project modal (arc D §3) ── */ .pjx-modalback { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 35%, transparent); display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px; overflow-y: auto; } .pjx-modal { background: var(--paper); border-radius: var(--r-soft); width: 540px; max-width: 100%; box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 25%, transparent); overflow: hidden; } .pjx-modal__h { padding: 20px 24px 14px; border-bottom: 1px solid var(--rule-2); } .pjx-modal__h h5 { font-family: var(--font-ex); font-weight: var(--w-bold); font-size: 16px; text-transform: lowercase; margin: 0; } .pjx-modal__h h5::after { content: "."; color: var(--accent); } .pjx-modal__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } .pjx-modal__b { padding: 18px 24px 6px; } .pjx-fld { margin-bottom: 14px; min-width: 0; } .pjx-fld > label { display: block; font-family: var(--font-ex); font-size: 10.5px; font-weight: var(--w-bold); letter-spacing: 0.07em; text-transform: lowercase; color: var(--ink-3); margin-bottom: 5px; } .pjx-req { color: var(--accent); } .pjx-input { width: 100%; font-family: var(--font-body, var(--font-std)); font-size: 13.5px; border: 1px solid var(--rule-2); border-radius: var(--r-soft); padding: 8px 10px; color: var(--ink); background: var(--paper); } .pjx-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .pjx-fldrow { display: flex; gap: 12px; } .pjx-fldrow .pjx-fld { flex: 1; } .pjx-svc { display: flex; gap: 10px; } /* service chips are canonical .chip (chips.css) */ .pjx-err { color: var(--red-status); font-size: 12.5px; margin: 0 0 8px; } .pjx-modal__f { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid var(--rule-2); background: var(--paper-2); } .pjx-mint { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; color: var(--ink-3); } .pjx-mint b { color: var(--ink); } .pjx-modal__acts { display: flex; gap: 8px; } /* modal buttons are canonical .btn (buttons.css) since the final cohesion pass */ /* the show-completed toggle (arc D §2) */ .pjx-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-cd); font-size: 12.5px; letter-spacing: 0.03em; text-transform: lowercase; color: var(--ink-3); border: none; background: none; cursor: pointer; padding: 0; } .pjx-toggle__sw { width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--rule-2); position: relative; transition: background 0.15s; } .pjx-toggle__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 20%, transparent); transition: left 0.15s; } .pjx-toggle.is-on .pjx-toggle__sw { background: var(--accent); } .pjx-toggle.is-on .pjx-toggle__sw::after { left: 15px; }