/* ============================================================ Cases / Deals (desk/staff) list page. Structure in @layer layout, paint in @layer design. Content-named classes only — no legacy/appearance names, no hardcoded color. Reuses .app-screen and .btn/.btn--outline/.btn--primary from elements.css. DESK page: prosecutors / coaches / case managers read this under the default light .app-screen palette. This stylesheet only references --t-* semantic tokens, which app/theme.css rebinds per theme, so the page reskins without any role-specific color rules here. The bulk transition / reassign dialogs carry the .app-screen root class so the same --t-* tokens resolve when they are appended to . See docs/FRONTEND-ARCHITECTURE.md. ============================================================ */ @layer layout { /* Page heading. */ .deals__intro { display: grid; gap: var(--mea-space-1); min-inline-size: 0; } .deals__title, .deals__subtitle { margin: 0; } /* Controls: filter chips on one row, search box beside/below them. */ .deals-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); margin: 0; padding: 0; } .filter-chip { display: inline-flex; align-items: center; gap: var(--mea-space-2); min-height: var(--t-target-min, 44px); padding: var(--mea-space-2) var(--mea-space-4); border: 0; border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; } .filter-chip__count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.5rem; padding-inline: var(--mea-space-2); border-radius: var(--mea-radius-pill); } .search-box { flex: 1; min-inline-size: 12rem; display: flex; align-items: center; gap: var(--mea-space-2); margin: 0; padding: var(--mea-space-2) var(--mea-space-3); border-radius: var(--mea-radius-md); } .search-box__input { flex: 1; min-height: var(--t-target-min, 44px); border: 0; background: transparent; padding: 0; } /* Case queue: an elevated panel wrapping the loading / empty / table body. */ .deals-panel { display: grid; align-content: start; border-radius: var(--mea-radius-xl); overflow: hidden; } .deals-panel__body { display: grid; gap: var(--mea-space-4); min-inline-size: 0; } .deals-table__scroll { overflow-x: auto; } /* The case queue is a real table. */ .deals-table { inline-size: 100%; border-collapse: collapse; } .deals-table__th { text-align: start; padding: var(--mea-space-3) var(--mea-space-5); white-space: nowrap; } .deals-table__th--sortable { cursor: pointer; user-select: none; } .deals-table__th--check { inline-size: 1px; } .deals-table__cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; } .deals-table__cell--check { inline-size: 1px; } .deals-table__cell--case, .deals-table__cell--created, .deals-table__cell--deadline { white-space: nowrap; } .deals-table__cell--charge, .deals-table__cell--participant { min-inline-size: 0; } .deals-row { cursor: pointer; } /* Participant cell: avatar beside name + sub-line. */ .deals-participant { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); align-items: center; min-inline-size: 0; } .deals-participant__avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } .deals-participant__detail { display: grid; gap: var(--mea-space-1); min-inline-size: 0; } .deals-participant__name, .deals-participant__sub { margin: 0; } .deals-participant__name { display: inline-flex; align-items: center; gap: var(--mea-space-2); } .gang-unit-dot { display: inline-block; inline-size: .5rem; block-size: .5rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } /* Charge tag + status pill. */ .deals-charge { display: inline-block; padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill); white-space: nowrap; } .deals-status { display: inline-block; padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill); white-space: nowrap; } /* Program cell: a priority dot beside the program name. */ .deals-program { display: inline-flex; align-items: center; gap: var(--mea-space-2); min-inline-size: 0; } .deals-program__dot { display: inline-block; inline-size: .5rem; block-size: .5rem; flex-shrink: 0; border-radius: var(--mea-radius-circle); } /* List load error fallback (D7). */ .deals-load-error { display: grid; gap: var(--mea-space-3); justify-items: start; padding: var(--mea-space-6); } .deals-load-error__title, .deals-load-error__body { margin: 0; } /* Bulk transition / reassign dialogs. */ .deals-dialog-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--mea-space-4); z-index: 1000; } .deals-dialog { display: grid; gap: 0; inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh; overflow-y: auto; border-radius: var(--mea-radius-xl); } .deals-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); padding: var(--mea-space-5); } .deals-dialog__title { margin: 0; min-inline-size: 0; } .deals-dialog__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; background: transparent; border-radius: var(--mea-radius-md); cursor: pointer; } .deals-dialog__body { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); } .deals-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mea-space-3); padding: var(--mea-space-5); } .deals-field { display: grid; gap: var(--mea-space-2); } .deals-field__label { margin: 0; } .deals-field__control { inline-size: 100%; min-height: var(--t-target-min, 44px); padding: var(--mea-space-2) var(--mea-space-3); border-radius: var(--mea-radius-md); font: inherit; } .deals-dialog__error { margin: 0; padding: var(--mea-space-3); border-radius: var(--mea-radius-md); } .deals-bulk-result { display: grid; gap: var(--mea-space-2); } .deals-bulk-fail-list { margin: 0; padding-inline-start: var(--mea-space-5); display: grid; gap: var(--mea-space-1); } @container (max-width: 32rem) { .deals-dialog__footer { flex-direction: column-reverse; align-items: stretch; } } } @layer design { .deals__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl); font-weight: var(--mea-w-bold); color: var(--t-text); } .deals__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); } /* Filter chips. .is-active is toggled by the controller. */ .filter-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary); font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); transition: background var(--mea-dur-fast), color var(--mea-dur-fast); } .filter-chip:hover { background: var(--t-bg-active); } .filter-chip.is-active { background: var(--t-accent); color: var(--t-accent-text); } .filter-chip__count { background: var(--t-bg-elevated); color: var(--t-text-muted); font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); } .filter-chip.is-active .filter-chip__count { background: var(--t-accent-text); color: var(--t-accent); } .search-box { background: var(--t-bg-elevated); border: 1px solid var(--t-border); } .search-box__icon { color: var(--t-text-muted); } .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); } .search-box__input::placeholder { color: var(--t-text-muted); } .search-box:focus-within { border-color: var(--t-border-focus); } /* Case queue panel + table. */ .deals-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm); } .deals-table__th { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); text-transform: uppercase; letter-spacing: var(--mea-ls-wide); color: var(--t-text-muted); border-block-end: 1px solid var(--t-border); } .deals-table__th--sortable:hover { color: var(--t-text); } .deals-table__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary); border-block-end: 1px solid var(--t-border); } .deals-table__body .deals-row:last-child .deals-table__cell { border-block-end: 0; } .deals-row:hover .deals-table__cell { background: var(--t-bg-recessed); } .deals-row--flagged .deals-table__cell { background: var(--t-warning-bg, var(--t-bg-recessed)); } .deals-table__cell--case, .deals-table__cell--created, .deals-table__cell--deadline { color: var(--t-text-muted); } /* Participant cell. */ .deals-participant__avatar { color: var(--t-accent-text); font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); background: var(--t-bg-active); } .deals-participant__name { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); } .deals-participant__sub { font-size: var(--mea-text-xs); color: var(--t-text-muted); } .gang-unit-dot { background: var(--t-error); } /* Charge tag — category modifiers recolour the tag only. */ .deals-charge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); background: var(--t-bg-recessed); color: var(--t-text-secondary); } .deals-charge--drug { background: var(--t-accent); color: var(--t-accent-text); } .deals-charge--theft { background: var(--t-warning-bg); color: var(--t-warning-text); } .deals-charge--property { background: var(--t-bg-active); color: var(--t-text); } .deals-charge--conduct { background: var(--t-success-bg); color: var(--t-success-text); } .deals-charge--dui { background: var(--t-error-bg); color: var(--t-error-text); } .deals-charge--assault { background: var(--t-error-bg); color: var(--t-error-text); } /* Status pill — status modifiers recolour the pill only. */ .deals-status { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); background: var(--t-bg-recessed); color: var(--t-text-secondary); } .deals-status--offered { background: var(--t-bg-active); color: var(--t-text); } .deals-status--accepted { background: var(--t-accent); color: var(--t-accent-text); } .deals-status--active { background: var(--t-accent); color: var(--t-accent-text); } .deals-status--completed { background: var(--t-success-bg); color: var(--t-success-text); } .deals-status--failed { background: var(--t-error-bg); color: var(--t-error-text); } .deals-status--revoked { background: var(--t-error-bg); color: var(--t-error-text); } .deals-status--expired { background: var(--t-bg-recessed); color: var(--t-text-muted); } /* Program priority dot — proximity modifiers recolour the dot only. */ .deals-program { font-size: var(--mea-text-sm); color: var(--t-text-secondary); } .deals-program__dot { background: var(--t-text-muted); } .deals-program__dot--high { background: var(--t-error); } .deals-program__dot--med { background: var(--t-warning); } .deals-program__dot--low { background: var(--t-success); } /* List load error fallback. */ .deals-load-error { background: var(--t-card-bg); } .deals-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); color: var(--t-error-text); } .deals-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); } /* Bulk transition / reassign dialogs. */ .deals-dialog-overlay { background: var(--t-overlay, var(--t-bg-active)); } .deals-dialog { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-lg); } .deals-dialog__header { border-block-end: 1px solid var(--t-border); } .deals-dialog__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg); font-weight: var(--mea-w-bold); color: var(--t-text); } .deals-dialog__close { color: var(--t-text-muted); font-size: var(--mea-text-xl); transition: background var(--mea-dur-fast), color var(--mea-dur-fast); } .deals-dialog__close:hover { background: var(--t-bg-recessed); color: var(--t-text); } .deals-dialog__footer { border-block-start: 1px solid var(--t-border); } .deals-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); } .deals-field__control { background: var(--t-bg-elevated); color: var(--t-text); border: 1px solid var(--t-border); font-size: var(--mea-text-md); } .deals-field__control:focus { outline: none; border-color: var(--t-border-focus); } .deals-field__control::placeholder { color: var(--t-text-muted); } .deals-dialog__error { background: var(--t-error-bg, var(--t-bg-recessed)); color: var(--t-error-text); font-size: var(--mea-text-sm); } .deals-bulk-result { font-size: var(--mea-text-sm); color: var(--t-text-secondary); } .deals-bulk-fail-list { font-size: var(--mea-text-sm); color: var(--t-error-text); } }