;
* widths are inline %s; the row is a flex container so segments line up
* and overflow-x:hidden on the row clips the rounded ends cleanly. */
.admin-on-theme__progress-bar-split{
display: flex;
height: 8px;
width: 100%;
background: rgba(0, 0, 0, 0.06);
border-radius: 4px;
overflow: hidden;
min-width: 0;
}
.app-page .admin-on-theme__progress-segment{
height: 100%;
flex: 0 0 auto; /* width comes from inline style */
transition: width 0.3s ease;
}
.app-page .admin-on-theme__progress-segment--new{
background: #f59e0b;
}
.app-page /* In-progress = cyan,
.app-page Waiting = saturated purple. Previously both sat in
* the same mid-blue/purple range and read as the same colour on small
* bars / low-quality screens. Cyan vs purple is unambiguous on white and
* dark backgrounds. */
.admin-on-theme__progress-segment--progress{
background: #06b6d4;
}
.app-page .admin-on-theme__progress-segment--waiting{
background: #a855f7;
}
.app-page .admin-on-theme__progress-segment--blocked{
background: #ef4444;
}
.app-page .admin-on-theme__progress-segment--done{
background: #10b981;
}
.app-page .admin-on-theme__progress-legend{
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
font-size: 0.75rem;
color: var(--muted);
margin-top: 0.6rem;
}
.app-page .admin-on-theme__progress-legend span{
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.app-page /* =============================================================================
* Open Bugs — stacked rows (replaces an earlier table that didn't fit on mobile)
* Left border = priority colour,
.app-page title wraps freely,
.app-page meta line shows
* status pill + date + priority label. Whole row is clickable,
.app-page the
* trailing icon button just opens the Leantime ticket in a new tab.
* ============================================================================= */
.admin-on-theme__bug-list{
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 340px;
overflow-y: auto;
padding-right: 0.25rem; /* room for the scrollbar */
}
.app-page .admin-on-theme__bug-row{
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.55rem 0.7rem 0.55rem 0.6rem;
background: var(--ase-bg-surface, rgba(0, 0, 0, 0.02));
border-radius: 6px;
border-left: 3px solid #6b7280;
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.app-page .admin-on-theme__bug-row:hover{
background: rgba(0, 0, 0, 0.05);
}
.app-page .admin-on-theme__bug-row--prio-high{
border-left-color: #ef4444;
}
.app-page .admin-on-theme__bug-row--prio-medium{
border-left-color: #f59e0b;
}
.app-page .admin-on-theme__bug-row--prio-low{
border-left-color: #6b7280;
}
.app-page .admin-on-theme__bug-body{
flex: 1;
min-width: 0; /* let the title wrap, not push the row */
}
.app-page .admin-on-theme__bug-title{
font-size: 0.825rem;
font-weight: 600;
color: var(--ase-text, #111827);
text-decoration: none;
/* ponytail: titles vary wildly in length (single words vs full sentences) —
* `break-word` + `overflow-wrap:anywhere` ensures even unbroken strings
* wrap inside the card instead of forcing a page-wide horizontal scroll. */
word-wrap: break-word;
overflow-wrap: anywhere;
line-height: 1.35;
display: block;
}
.app-page .admin-on-theme__bug-title:hover{
text-decoration: underline;
}
.app-page .admin-on-theme__bug-meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.6rem;
margin-top: 0.3rem;
font-size: 0.7rem;
color: var(--muted);
}
.app-page .admin-on-theme__bug-meta-sep{
color: var(--ase-outline, #c0c9bb);
}
/* Warning variant of card header (admin overrides block) */
.admin-on-theme__card-header--warning{
background: #fef3c7;
color: #92400e;
border-bottom-color: #f59e0b;
}
.app-page /* Banner info variant (signed-in notice) */
.admin-on-theme__banner--info{
background: var(--ase-primary-container, #dcfce7);
color: var(--forest-900);
border: 1px solid var(--ase-primary, #228B22);
padding: 0.6rem 0.9rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.app-page /* ============================================================
Roles & Permissions admin page (admin/user-roles.php) — Layout A
- Card-header row layout (title on left,
.app-page actions on right)
- Role tile grid (existing pattern,
.app-page reused)
- Effective-permissions list: one row per permission,
.app-page status
icon,
.app-page name + key + source,
.app-page inline grant + expiry controls
============================================================ */
.admin-on-theme__card-header--row{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.app-page .admin-on-theme__card-header--row .admin-on-theme__card-title{
margin: 0;
}
.app-page .admin-on-theme__card-header--row .admin-on-theme__card-sub{
margin: .25rem 0 0;
}
.app-page .admin-on-theme__card-footer{
padding: 1rem 1.25rem;
border-top: 1px solid var(--line);
background: var(--ase-surface-low, #fafafa);
border-bottom-left-radius: var(--ase-radius-lg, 12px);
border-bottom-right-radius: var(--ase-radius-lg, 12px);
}
.app-page .admin-on-theme__card-footer--row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.app-page .admin-on-theme__card-footer--row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
/* Decorative hero glow stays inside its hero (was bleeding past the viewport) */
.app-page .admin-on-theme__hero{overflow:hidden}
/* ---------- Dashboard primitives (logged-in shell) ----------
Used by dashboard/customer.php, dashboard/index.php, and admin pages.
Shared with the approved admin-dashboard-mockup.html design. */
.dash-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}
.dash-grid>div{display:flex;flex-direction:column;gap:28px;min-width:0}
@media(max-width:1080px){.dash-grid{grid-template-columns:1fr}}
/* Page wrapper: same flex-column rhythm as .content-pad (kills ad-hoc margins).
`.app-page` is the generic logged-in-shell wrapper (any role can use it);
the `.customer-*` ones stay for now for pages that lean on per-domain chrome. */
.customer-dashboard,.customer-quotes-page,.customer-stock-page,.app-page{display:flex;flex-direction:column;gap:28px}
/* dashboard/index.php wraps all role sections in .container (plain block) —
without this the section rhythm breaks at every .container child boundary
(e.g. .customer-dashboard → Security Overview card rendered with no gap). */
.content-pad .container{display:flex;flex-direction:column;gap:28px}
/* In-card row that acts like a link (used in KB category lists, item listings) */
.card-link-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.card-link-row:hover{border-color:var(--forest);box-shadow:0 4px 12px rgba(34,139,34,.06)}
.card-link-row.is-active{border-color:var(--forest);background:var(--mint-2)}
.card-link-row .icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--mint-2);color:var(--forest)}
.card-link-row > span:not(.icon):not(.badge){flex:1;min-width:0}
.card-link-row b{display:block;font-family:var(--font-display);font-size:15px;color:var(--forest)}
.card-link-row small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.card-head h3{font-size:17px;font-family:var(--font-display)}
.card-head .card-link{margin-top:0}
.card-head .badge .material-symbols-rounded{font-size:16px}
.attention-item,.application-item{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.attention-item:last-child,.application-item:last-child{border-bottom:0}
.attention-item>.material-symbols-rounded,.application-item>.material-symbols-rounded{font-size:22px;color:var(--forest);flex-shrink:0}
.attention-item b,.application-item b{display:block;font-size:14px;font-family:var(--font-display);color:var(--ink)}
.attention-item small,.application-item small{color:var(--muted);font-size:12.5px}
.attention-item .badge,.application-item .badge{margin-left:auto;flex-shrink:0}
.card-link{font-size:13.5px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:4px;margin-top:16px}
.card-link .material-symbols-rounded{font-size:17px;transition:transform .2s}
.card-link:hover .material-symbols-rounded{transform:translateX(3px)}
/* In-card pagination row (used by components/action-required.php + stock listing) */
.card-pagination{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card-pagination .btn{flex-shrink:0}
.card-pagination-info{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
@media(max-width:480px){
.card-pagination-info{flex:0 1 auto;white-space:normal;text-align:center}
.card-pagination{flex-wrap:wrap;justify-content:space-between;row-gap:6px;column-gap:8px}
}
.card-pagination .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
/* Table flush inside a card (card chrome is enough).
Tables in narrow dashboard cards must shrink to fit their container —
full-page tables keep min-width:760px for readability. */
.card-flush{border:0;border-radius:0}
.card-flush .table{min-width:0}
.card-flush .table th,
.card-flush .table td{padding:10px 12px}
.card-flush .table th{font-size:11px}
/* Muted footnotes inside cards (empty states, helper text) */
.card-note{font-size:13px;color:var(--muted);margin:0}
.card .card-note{margin-top:14px}
/* Empty-state card (nothing matches the current filter) */
.card.is-empty{text-align:center;max-width:520px;margin-inline:auto}
.card.is-empty .icon{margin-inline:auto}
/* Sub-label under a .ref in a table cell ("Quote" / "Job") */
.ref-sub{display:block;font-size:12px;color:var(--muted)}
/* Monospace identifier chip (container codes, invoice ids) */
.code-chip{background:var(--mint);padding:2px 8px;border-radius:6px;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--forest-800)}
/* Vertical button stack inside cards (Quick Actions) */
.btn-stack{display:flex;flex-direction:column;gap:8px}
/* ---------- Detail grid — label/value tiles inside cards ----------
Markup:
LabelValue
…full-width row (notes, addresses)…
*/
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.detail-grid>.detail{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;min-width:0}
.detail-grid>.detail--wide{grid-column:1/-1}
.detail-grid .detail-label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.detail-grid .detail-value{display:block;font-size:14px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.detail-grid .detail-value small{color:var(--muted);font-weight:400}
/* Content that follows a detail grid inside a card (notes link, locked-account alert). */
.card .detail-grid + .card-note,
.card .detail-grid + .alert{margin-top:12px}
/* ---------- Help card — collapsible
explainer ----------
info Title
…