/* public/app/styles.css Layers on top of /console/styles.css, which owns the brand tokens. Only what the workspace adds lives here, so a brand change stays a one-file edit. */ .view form { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } /* activity timeline */ .timeline { margin: 16px 0 0; padding: 0; list-style: none; } .timeline-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .timeline-item:last-child { border-bottom: 0; } .timeline-item .badge { flex-shrink: 0; margin-top: 2px; } /* ------------------------------------------------------- account profile THE PROFILE LAYOUT IS NOT HERE ANY MORE. .profile-grid, .profile-avatar, .avatar-side and the .kv corrections all live in public/console/styles.css, which both clients load, because the superadmin's own profile page needed the identical treatment and a second copy is how the two drifted apart the first time. Only the note below is workspace-only, because only this panel has one. */ #me-note { margin: 18px 0 0; } /* The identifier list under the profile grid. Plain .kv, so it is NOT reached by the .profile-grid > .kv rules and arrives with the stock 120px column and a value column that takes the rest of the panel: a twelve-digit number in a 1070px input reads as a broken layout rather than a field. 132px matches the label column of the grid above so the two lists share a left edge, and the value column is capped at the width of the longest thing that goes in it, the PF number. */ #account-view .profile-section .kv { margin: 16px 0 0; grid-template-columns: 132px minmax(0, 420px); align-items: baseline; } /* Below this the label column plus a usable input no longer fit side by side, so the pairs stack. Matches what .kv does elsewhere on a narrow screen. */ @media (max-width: 620px) { #account-view .profile-section .kv { grid-template-columns: 1fr; } #account-view .profile-section .kv dt { margin-top: 10px; } } /* ---------------------------------------------------------- documents Four fixed cards. auto-fit rather than a fixed column count, so the grid is 4 across on a desktop, 2 on a tablet and 1 on a phone without a breakpoint for each. minmax's floor is the narrowest a card can be before the status pill and the title collide. */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 18px 0 8px; } .doc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); /* One step inside the panel's own radius. Nested corners that match the parent read as a mistake; the inner radius is the outer minus the padding. */ border-radius: calc(var(--radius) - 4px); background: var(--surface); } .doc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .doc-card-head h4 { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; } /* An approved card is a statement rather than a control surface, so it loses the hover affordance the others keep. */ .doc-card.locked { background: rgba(47, 111, 79, 0.04); border-color: rgba(47, 111, 79, 0.22); } /* aspect-ratio rather than a height: the box is the same size before the image arrives as after, so a slow load does not shove the page down. */ .doc-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease; } .doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .doc-thumb:hover { border-color: var(--gold-deep); transform: translateY(-1px); } .doc-thumb:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; } .doc-thumb.empty { display: grid; place-items: center; cursor: default; border-style: dashed; color: var(--muted); font-size: 0.8125rem; } /* The reason is the whole point of a rejection, so it is type the eye lands on rather than another muted line. Gold, which already means "needs attention" on the badge beside it. */ .doc-reason { margin: 0; padding: 8px 10px; border-left: 3px solid var(--gold-deep); background: rgba(233, 201, 119, 0.14); border-radius: 0 6px 6px 0; font-size: 0.8125rem; color: #6f5716; } .doc-card-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; } .doc-card .muted.small { margin: auto 0 0; } /* The viewer. The image is whatever the employee photographed, so the stage caps it rather than trusting it to be a sensible shape. */ .doc-stage { display: grid; place-items: center; padding: 12px; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; } .doc-stage img { max-width: 100%; max-height: 62vh; width: auto; height: auto; border-radius: 6px; } /* A detail nobody has filled in yet. Inline in the same row as the value it will become, so the list does not reflow when it is saved. */ .fill-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fill-row input { flex: 1 1 180px; min-width: 0; margin: 0; } /* Download sits left, the decisions sit right, so a reviewer cannot hit Approve while reaching for Download. */ .modal-actions-group { display: inline-flex; gap: 8px; margin-left: auto; } /* A link styled as a button, the outline twin of .file-btn in the console sheet. An rather than a