and the modal itself.
While any modal is open, lock the background so only the modal scrolls. */
body:has(.modal.show) { overflow: hidden; }
body:has(.modal.show) main { overflow: hidden !important; }
/* ===== Responsive detail modals (leave + procurement + convey) ===== */
/* .custom-modal is used ONLY by the 8 detail modals (3 leave + 3 procurement + 2 convey);
the create-request modal uses .modal-lg, so it is intentionally unaffected.
!important is REQUIRED here: each page's scoped CSS (.custom-modal[b-xxx] etc.)
carries the isolation attribute, raising its specificity at/above these global
selectors, and App.razor re-links the scoped bundle AFTER shared-ui.css — so
without !important these overrides silently lose the cascade. (Same reason the
responsive data-table rules above use width/min-width !important.) */
@media (max-width: 800px) {
.modal-dialog.custom-modal { max-width: 96% !important; }
.custom-modal .request-details-container { flex-direction: column !important; }
/* procurement scopes .details-column to max-width:33% — full-width when stacked */
.custom-modal .request-details-container > div { max-width: 100% !important; }
}
/* Procurement detail tables → stacked label/value cards on phones.
Mirrors the data-grid card-collapse pattern; needs data-label on every | . */
@media (max-width: 600px) {
.custom-modal .products-table { table-layout: auto !important; min-width: 0 !important; }
.custom-modal .products-table thead { display: none !important; }
.custom-modal .products-table,
.custom-modal .products-table tbody,
.custom-modal .products-table tr { display: block !important; width: 100% !important; }
.custom-modal .products-table tr {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin: 0 0 var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-surface);
}
.custom-modal .products-table td {
display: flex !important;
width: 100% !important;
border: 0 !important;
padding: var(--space-1) 0 !important;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
text-align: right !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.custom-modal .products-table td::before {
content: attr(data-label);
font-weight: var(--weight-semibold);
color: var(--color-muted);
text-align: left;
white-space: nowrap;
margin-right: var(--space-3);
}
.custom-modal .products-table td:empty { display: none !important; }
}
/* ===== Approval / signature "pipeline" tables (detail modals) ==========================
The Procurement, Expense and Convey detail modals each render a pipeline-of-approvals
table (# · Stage · Decision · Approver · Date · Message — or the Convey signature
equivalent). These historically reused .products-table with table-layout:fixed, so every
column inherited a hard percentage borrowed from the 7-column Products grid: the "#"
column ballooned to the Products "Title" width (30 %) while the "Message" header wrapped
letter-by-letter ("Messag e"). .pipeline-table instead sizes each column to its content —
header cells never wrap, so a column is always at least wide enough to show its header
cleanly, and the free-text .pipeline-col-flex column (Message) wraps + soaks up the slack
so the data columns stay compact. Every | carries data-label for the phone card-collapse
below. */
.pipeline-table {
width: 100%;
table-layout: auto; /* content-driven column widths, not fixed percentages */
border-collapse: collapse;
margin-top: 1rem;
}
.pipeline-table th,
.pipeline-table td {
padding: 0.75rem;
text-align: left;
vertical-align: middle;
border: 1px solid #dee2e6;
white-space: nowrap; /* each column hugs its content on a single line */
}
.pipeline-table thead th {
background-color: #f8f9fa;
font-weight: bold;
text-align: center;
white-space: nowrap; /* header never breaks → it sets the column's minimum width */
}
.pipeline-table tbody tr:nth-child(odd) { background-color: #f9f9f9; }
/* Free-text column (Message): wraps and absorbs the remaining width; its header keeps the
nowrap rule above, so the "Message" label itself still never breaks. */
.pipeline-table th.pipeline-col-flex { width: 100%; }
.pipeline-table td.pipeline-col-flex {
width: 100%;
white-space: normal;
word-break: break-word;
}
/* Pipeline tables → stacked label/value cards on phones (mirrors the .products-table
collapse; every | has data-label). Not scoped to .custom-modal so it also covers the
Expense/Convey modals. */
@media (max-width: 600px) {
.pipeline-table thead { display: none; }
.pipeline-table,
.pipeline-table tbody,
.pipeline-table tr { display: block; width: 100%; }
.pipeline-table tr {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin: 0 0 var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-surface);
}
.pipeline-table td {
display: flex;
width: 100% !important;
border: 0;
padding: var(--space-1) 0;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
text-align: right;
white-space: normal;
}
.pipeline-table td::before {
content: attr(data-label);
font-weight: var(--weight-semibold);
color: var(--color-muted);
text-align: left;
white-space: nowrap;
margin-right: var(--space-3);
}
.pipeline-table td:empty { display: none; }
}
/* Procurement CREATE form (CreateProcurementRequestModal) — its product-entry table is an INPUT
grid (class .entry-products-table, unique to that component; it's a .modal-lg, not .custom-modal).
On phones collapse each product row into a stacked block: label above, full-width control below,
so "Unit Price (without VAT)" etc. stop wrapping letter-by-letter in tiny fixed columns.
!important beats the component's scoped per-column nth-child widths + table-layout:fixed. */
@media (max-width: 600px) {
.entry-products-table { display: block !important; table-layout: auto !important; width: 100% !important; }
.entry-products-table thead { display: none !important; }
.entry-products-table tbody,
.entry-products-table tr,
.entry-products-table td { display: block !important; width: 100% !important; }
.entry-products-table tr {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin: 0 0 var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-surface);
}
.entry-products-table td {
border: 0 !important;
padding: var(--space-2) 0 !important;
vertical-align: top;
}
.entry-products-table td[data-label]::before {
content: attr(data-label);
display: block;
font-weight: var(--weight-semibold);
color: var(--color-muted);
font-size: var(--text-xs);
margin-bottom: var(--space-1);
}
/* controls fill the card width */
.entry-products-table td .form-control,
.entry-products-table td .unit-price-wrap { width: 100% !important; }
/* the title field is scoped to 50% — full-width on phones too */
.request-title-input { width: 100% !important; }
}
/* ===== KPI strip: drop secondary tiles on phones =====
A .kpi-strip with many tiles (e.g. Ticket Management's 7) crushes on a phone.
Tag the non-essential tiles .kpi-hide-mobile to keep only the key few visible. */
@media (max-width: 768px) {
.kpi-hide-mobile { display: none !important; }
}
/* Rendered rich-text ticket content + missing-attachment chip */
.rt-rendered { max-width: 100%; overflow-wrap: break-word; }
.rt-rendered img { max-width: 100%; height: auto; border-radius: 4px; }
.rt-rendered p { margin-bottom: 6px; }
.rt-missing-attachment { display: inline-block; background: #f1f3f5; color: #6c757d; font-size: 12px; padding: 2px 10px; border-radius: 12px; border: 1px dashed #ced4da; }
/* ===== Functional-role description tooltip (the grid's trailing i-icon) =====
Hover on desktop; tap works too because tabindex=0 makes the span focusable. */
.role-info {
position: relative;
display: inline-block;
margin-left: 8px;
color: #5b2a86;
font-weight: 700;
cursor: help;
outline: none;
}
.role-info:focus-visible { outline: 2px solid #5b2a86; outline-offset: 2px; border-radius: 3px; }
.role-info::after {
content: attr(data-tip);
position: absolute;
right: 0;
bottom: 125%;
width: max-content;
max-width: 260px;
background: #2d2a33;
color: #fff;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
text-align: left;
white-space: normal;
word-break: break-word;
padding: 6px 10px;
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease;
z-index: 50;
}
.role-info:hover::after,
.role-info:focus::after { opacity: 1; }
/* ── GnΩsis wordmark (GnosisBrand.razor): shrink the capital Ω toward lowercase x-height ── */
.omega-lc { font-size: 0.84em; vertical-align: baseline; }
/* Auto-growing wrapping text fields (textarea) — used app-wide so long values
wrap onto the next line instead of being clipped. Hoisted from the Purchases
create-modal scoped CSS so every subsystem's free-text fields behave the same. */
.auto-grow {
field-sizing: content; /* auto-grow height (Chromium target) */
min-height: calc(1.5em + 0.75rem); /* match single-line .form-control height */
resize: vertical; /* manual fallback where field-sizing is unsupported */
white-space: pre-wrap; /* wrap text and preserve newlines */
overflow-wrap: break-word; /* break long words to prevent overflow */
}
|