never needed. */
#cashup-wizard-steps .dashboard-promo-card {
text-align: left;
font: inherit;
cursor: pointer;
width: 100%;
}
#cashup-wizard-steps .dashboard-promo-card[aria-current="true"] {
border-color: var(--rowb-primary);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
#cashup-wizard-steps .dashboard-promo-card[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.workspace-section.wizard-hidden {
display: none;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ors-border);
}
.tab-content {
display: none;
padding-top: 8px;
}
.tab-content.active {
display: flex;
flex-direction: column;
gap: 10px;
}
.sx-inline-status {
display: none;
margin-top: 12px;
border: 1px solid var(--ors-border);
background: #f9f8f7;
color: var(--ors-text);
}
.sx-inline-status.is-visible {
display: block;
}
.rowb-status-relocated-source {
display: none !important;
}
.sx-inline-status.is-success {
border-color: #bddbc0;
background: var(--ors-success-bg);
color: var(--ors-success);
}
.sx-inline-status.is-warning {
border-color: #ffdf99;
background: var(--ors-warning-bg);
color: var(--ors-warning);
}
.sx-error-window {
display: flex;
gap: 8px;
max-width: 760px;
margin: 0 auto 12px;
}
.sx-error-window::before {
content: "!";
font-weight: 700;
}
form button[type="submit"] {
align-self: flex-start;
}
.dashboard-section,
.workspace-section,
.dashboard-header {
width: 100%;
}
.workspace-section,
.dashboard-section {
background: var(--ors-surface-grad);
}
body.theme-roster .console-hero {
background: linear-gradient(180deg, rgba(255, 244, 234, 0.72) 0%, rgba(239, 216, 192, 0.54) 100%);
}
body.theme-roster .console-hero__badge {
background: linear-gradient(90deg, #552f22 0%, #7b4631 100%);
}
body.theme-roster .menu-card {
border-top-color: #b7632f;
}
body.theme-hr .console-hero {
background: linear-gradient(180deg, rgba(249, 247, 240, 0.72) 0%, rgba(232, 223, 207, 0.54) 100%);
}
body.theme-hr .console-hero__badge {
background: linear-gradient(90deg, #2e3124 0%, #4e5537 100%);
}
body.theme-hr .menu-card {
border-top-color: #728146;
}
body.theme-hr .status-chip {
background: #f0f4e5;
}
body.theme-suppliers .console-hero {
background: linear-gradient(180deg, rgba(255, 243, 231, 0.72) 0%, rgba(240, 221, 203, 0.54) 100%);
}
body.theme-suppliers .console-hero__badge {
background: linear-gradient(90deg, #3b2731 0%, #5a3645 100%);
}
body.theme-suppliers .menu-card {
border-top-color: #9a5a3d;
}
body.theme-suppliers .status-chip {
background: #fbece3;
}
.dashboard-ops-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dashboard-ops-card {
border: 1px solid var(--ors-border);
background: var(--ors-panel-soft);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dashboard-ops-card__count {
font-weight: 700;
color: var(--ors-ink-soft);
}
.dashboard-metric-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.dashboard-demand-controls {
align-items: end;
flex-wrap: wrap;
}
.dashboard-demand-controls .inline-field {
min-width: 220px;
}
.dashboard-metric-chip {
border: 1px solid var(--ors-border);
border-radius: 12px;
background: var(--rowb-surface);
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dashboard-metric-chip span {
color: var(--ors-muted);
font-size: 0.74rem;
}
.dashboard-metric-chip strong {
color: var(--ors-text);
font-size: 1rem;
}
.dashboard-metric-chip--highlight {
background: var(--rowb-primary-light);
border-color: rgba(34, 26, 21, 0.24);
}
.dashboard-metric-chip--highlight strong {
color: var(--rowb-primary-dark);
}
.dashboard-metric-chip--discount {
background: var(--rowb-danger-bg);
border-color: var(--rowb-danger-border);
}
.dashboard-metric-chip--discount strong {
color: var(--rowb-danger);
}
.dashboard-metric-chip--warn {
background: var(--rowb-warning-bg);
border-color: rgba(232, 93, 4, 0.35);
}
.dashboard-metric-chip--warn strong {
color: var(--rowb-warning);
}
.rowb-visual-dashboard {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
gap: 14px;
align-items: stretch;
margin-bottom: 14px;
}
.rowb-visual-dashboard__main {
display: grid;
gap: 12px;
min-width: 0;
}
.rowb-dial-grid,
.rowb-knob-grid {
display: grid;
gap: 12px;
}
.rowb-dial-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rowb-knob-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rowb-dial-card,
.rowb-knob-card,
.rowb-insight-rail,
.dashboard-detail-panel {
border: 1px solid var(--ors-border);
border-radius: 12px;
background: rgba(250, 246, 240, 0.78);
box-shadow: 0 10px 24px rgba(34, 26, 21, 0.08);
}
.rowb-dial-card,
.rowb-knob-card {
--dial-tone: var(--ors-warning);
--dial-bg: rgba(255, 186, 8, 0.18);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: center;
min-height: 112px;
padding: 12px;
}
.rowb-dial-card__gauge {
position: relative;
width: 64px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(var(--dial-tone) calc(var(--dial-value) * 1%), var(--dial-bg) 0);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px rgba(34, 26, 21, 0.08);
}
.rowb-knob-card .rowb-dial-card__gauge {
width: 64px;
}
.rowb-dial-card__gauge::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(34, 26, 21, 0.08);
}
.rowb-knob-card .rowb-dial-card__gauge::before {
inset: 8px;
}
.rowb-dial-card__gauge span {
position: relative;
width: 6px;
height: 20px;
border-radius: 999px;
background: var(--dial-tone);
transform-origin: center calc(100% - 4px);
transform: rotate(calc((var(--dial-value) - 50) * 1.8deg));
box-shadow: 0 2px 5px rgba(34, 26, 21, 0.18);
}
.rowb-knob-card .rowb-dial-card__gauge span {
width: 6px;
height: 20px;
}
.rowb-dial-card__body {
display: flex;
min-width: 0;
flex-direction: column;
gap: 4px;
}
.rowb-dial-card__label {
color: var(--ors-muted);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
}
.rowb-dial-card__value {
color: var(--ors-text);
font-size: 1rem;
line-height: 1.05;
}
.rowb-knob-card .rowb-dial-card__value {
font-size: 1rem;
}
.rowb-dial-card__status {
width: fit-content;
border-radius: 999px;
background: var(--dial-bg);
color: var(--dial-tone);
font-size: 0.72rem;
font-weight: 800;
padding: 2px 8px;
}
.rowb-dial-card__note {
color: var(--ors-muted);
font-size: 0.78rem;
}
.rowb-insight-rail {
padding: 14px;
}
.rowb-insight-list {
display: grid;
gap: 8px;
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.rowb-insight-list__item {
border-left: 4px solid var(--ors-warning);
border-radius: 8px;
background: rgba(255, 243, 211, 0.78);
padding: 8px 10px;
}
.rowb-insight-list__item strong,
.rowb-insight-list__item span {
display: block;
}
.rowb-insight-list__item strong {
font-size: 0.86rem;
}
.rowb-insight-list__item span {
color: var(--ors-muted);
font-size: 0.78rem;
}
.dashboard-detail-panel {
margin-bottom: 14px;
padding: 12px;
}
.dashboard-detail-panel summary {
cursor: pointer;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: baseline;
}
.dashboard-detail-panel summary span {
color: var(--ors-muted);
font-size: 0.8rem;
}
.dashboard-detail-panel .dashboard-metric-chips {
margin-top: 12px;
}
/* ── Dial group section heading ─────────────────────────────────────── */
.dashboard-table-group {
border: 1px solid var(--ors-border);
border-radius: 12px;
background: rgba(250, 246, 240, 0.78);
box-shadow: 0 10px 24px rgba(34, 26, 21, 0.08);
padding: 4px 14px 0;
margin-bottom: 14px;
}
.dashboard-table-group > summary {
cursor: pointer;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
align-items: baseline;
padding: 12px 0;
font-size: 1.02rem;
}
.dashboard-table-group > summary::-webkit-details-marker {
display: none;
}
.dashboard-table-group > summary::before {
content: "\25B8";
color: var(--ors-muted);
font-size: 0.85rem;
transition: transform 0.15s ease;
}
.dashboard-table-group[open] > summary::before {
transform: rotate(90deg);
}
.dashboard-table-group > summary strong {
color: var(--ors-text);
}
.dashboard-table-group > summary span {
color: var(--ors-muted);
font-size: 0.8rem;
}
.dashboard-table-group[open] > summary {
border-bottom: 1px solid var(--ors-border);
margin-bottom: 12px;
}
.dashboard-table-group > .table-wrapper:last-child,
.dashboard-table-group > .demand-graph-card:last-child {
margin-bottom: 14px;
}
.employee-list-toolbar {
align-items: end;
justify-content: flex-start;
margin-bottom: 12px;
}
.employee-list-toolbar .inline-field {
min-width: 220px;
}
.demand-graph-card {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
.demand-graph-card__header h4 {
margin: 0;
}
.demand-graph-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.demand-graph-legend__item {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ors-ink-soft);
font-size: 0.78rem;
font-weight: 600;
}
.demand-graph-legend__swatch {
width: 18px;
height: 4px;
border-radius: 999px;
display: inline-block;
}
.demand-graph-legend__swatch--guest {
background: repeating-linear-gradient(
90deg,
#cf5a2b 0 12px,
#cf5a2b 12px 16px
);
}
.demand-graph-legend__swatch--required {
background: repeating-linear-gradient(
90deg,
#8f5bd6 0 8px,
transparent 8px 11px,
#8f5bd6 11px 14px,
transparent 14px 17px
);
}
.demand-graph-legend__swatch--foh {
background: repeating-linear-gradient(
90deg,
#1f6aa5 0 8px,
transparent 8px 12px
);
}
.demand-graph-legend__swatch--boh {
background: repeating-linear-gradient(
90deg,
#218a5a 0 3px,
transparent 3px 7px
);
}
.demand-graph-legend__swatch--day {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.demand-graph-legend__swatch--day-mon { background: #e07a5f; }
.demand-graph-legend__swatch--day-tue { background: #3d5a80; }
.demand-graph-legend__swatch--day-wed { background: #81b29a; }
.demand-graph-legend__swatch--day-thu { background: #d9a441; }
.demand-graph-legend__swatch--day-fri { background: #9b5de5; }
.demand-graph-legend__swatch--day-sat { background: #ef476f; }
.demand-graph-legend__swatch--day-sun { background: #06a77d; }
.demand-line-chart-wrap {
padding: 12px;
border: 1px solid var(--ors-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
}
.demand-line-chart {
width: 100%;
height: auto;
display: block;
}
.demand-line-chart__grid {
stroke: rgba(34, 26, 21, 0.15);
stroke-width: 1;
shape-rendering: crispEdges;
}
.demand-line-chart__baseline {
stroke: rgba(34, 26, 21, 0.4);
stroke-width: 1.5;
}
.demand-line-chart__series {
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.demand-line-chart__series--guest {
stroke: #cf5a2b;
stroke-dasharray: none;
}
.demand-line-chart__series--required {
stroke: #8f5bd6;
stroke-dasharray: 10 4 2 4;
}
.demand-line-chart__series--foh {
stroke: #1f6aa5;
stroke-dasharray: 8 4;
}
.demand-line-chart__series--boh {
stroke: #218a5a;
stroke-dasharray: 2 4;
}
.demand-line-chart__series--day {
stroke-width: 1.5;
}
.demand-line-chart__series--day-mon { stroke: #e07a5f; }
.demand-line-chart__series--day-tue { stroke: #3d5a80; }
.demand-line-chart__series--day-wed { stroke: #81b29a; }
.demand-line-chart__series--day-thu { stroke: #d9a441; }
.demand-line-chart__series--day-fri { stroke: #9b5de5; }
.demand-line-chart__series--day-sat { stroke: #ef476f; }
.demand-line-chart__series--day-sun { stroke: #06a77d; }
.demand-line-chart__dot {
stroke-width: 1.4;
fill: #fffdf7;
}
.demand-line-chart__dot--guest {
stroke: #cf5a2b;
}
.demand-line-chart__dot--required {
stroke: #8f5bd6;
}
.demand-line-chart__dot--foh {
stroke: #1f6aa5;
}
.demand-line-chart__dot--boh {
stroke: #218a5a;
}
.demand-line-chart__dot--day {
stroke-width: 1.2;
}
.demand-line-chart__dot--day-mon { stroke: #e07a5f; }
.demand-line-chart__dot--day-tue { stroke: #3d5a80; }
.demand-line-chart__dot--day-wed { stroke: #81b29a; }
.demand-line-chart__dot--day-thu { stroke: #d9a441; }
.demand-line-chart__dot--day-fri { stroke: #9b5de5; }
.demand-line-chart__dot--day-sat { stroke: #ef476f; }
.demand-line-chart__dot--day-sun { stroke: #06a77d; }
.demand-line-chart__axis {
fill: var(--ors-muted);
font-size: 12px;
font-family: var(--font-sans);
}
.demand-line-chart__axis--left {
text-anchor: end;
}
.demand-line-chart__axis--right {
text-anchor: start;
}
.demand-line-chart__axis--x {
text-anchor: middle;
}
.demand-coverage {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-weight: 600;
}
.demand-coverage--ok {
background: var(--rowb-success-bg);
color: var(--rowb-success);
}
.demand-coverage--short {
background: var(--rowb-danger-bg);
color: var(--rowb-danger);
}
.demand-coverage--idle {
background: var(--rowb-surface-soft);
color: var(--rowb-muted);
}
.demand-hourly-table td,
.demand-hourly-table th {
white-space: nowrap;
}
.demand-hourly-table--aligned {
table-layout: fixed;
}
.variance-cell {
display: inline-block;
padding: 2px 6px;
border-radius: 6px;
font-weight: 600;
}
.variance-cell--ok {
background: var(--rowb-success-bg);
color: var(--rowb-success);
}
.variance-cell--pos {
background: var(--rowb-primary-light);
color: var(--rowb-primary-dark);
}
.variance-cell--neg {
background: var(--rowb-danger-bg);
color: var(--rowb-danger);
}
#attendance-variance-review {
padding: 14px;
}
#attendance-variance-review .section-heading {
margin-bottom: 8px;
}
#attendance-variance-review #attendance-variance-form {
margin-bottom: 10px;
}
#attendance-variance-result.table-wrapper {
max-height: none;
overflow-x: auto;
overflow-y: visible;
padding: 6px;
}
.variance-grid-table {
min-width: 2360px;
table-layout: fixed;
}
.variance-grid-table th,
.variance-grid-table td {
min-width: 150px;
padding: 5px 7px;
vertical-align: middle;
}
.variance-grid-table thead th {
position: sticky;
top: 0;
z-index: 3;
}
.variance-grid-table .variance-grid-employee {
position: sticky;
left: 0;
z-index: 4;
min-width: 300px;
background: var(--rowb-surface-soft);
box-shadow: 1px 0 0 var(--rowb-border);
}
.variance-grid-table thead .variance-grid-employee {
z-index: 5;
background: var(--rowb-surface-hover);
}
.variance-grid-table .employee-section-divider th,
.attendance-run-matrix-table .employee-section-divider th {
position: sticky;
left: 0;
z-index: 4;
min-width: 300px;
padding: 7px 10px;
background: var(--rowb-surface-hover);
color: var(--ors-ink);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
text-align: left;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(34, 26, 21, 0.14), inset 0 -1px 0 rgba(34, 26, 21, 0.2);
}
.variance-grid-date {
white-space: normal;
}
.variance-grid-cell {
font-size: 0.82rem;
text-align: center;
}
.variance-alert {
display: block;
width: fit-content;
max-width: 100%;
margin: 4px auto 0;
padding: 2px 6px;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
white-space: normal;
}
.variance-alert--review {
background: var(--rowb-warning-bg);
color: var(--rowb-warning);
}
.variance-alert--no-show {
background: var(--rowb-danger-bg);
color: var(--rowb-danger);
}
.variance-grid-cell--empty {
background: var(--rowb-surface-soft);
text-align: center;
}
.variance-grid-cell--ok {
background: var(--rowb-success-bg);
}
.variance-grid-cell--pos {
background: var(--rowb-primary-light);
}
.variance-grid-cell--neg {
background: var(--rowb-danger-bg);
}
.variance-grid-total {
font-weight: 600;
white-space: nowrap;
}
.attendance-run-toolbar {
margin-bottom: 10px;
}
.attendance-run-list-table th:first-child,
.attendance-run-list-table td:first-child {
width: 72px;
text-align: center;
}
#attendance-runs-table.table-wrapper {
max-height: none;
overflow-x: auto;
overflow-y: visible;
}
.attendance-final-period-selector {
display: grid;
grid-template-columns: minmax(220px, 360px);
gap: 6px;
margin-bottom: 10px;
}
#attendance-accuracy-review {
padding: 14px;
}
#attendance-accuracy-review .section-heading {
margin-bottom: 8px;
}
#attendance-review-detail.table-wrapper {
max-height: none;
overflow-x: auto;
overflow-y: visible;
padding: 8px;
}
#attendance-review-detail .fact-review-layout > .table-wrapper {
max-height: none;
overflow-x: auto;
overflow-y: visible;
padding: 8px;
}
.attendance-run-matrix-table {
min-width: 2400px;
table-layout: fixed;
}
.attendance-run-matrix-table th,
.attendance-run-matrix-table td {
min-width: 150px;
padding: 9px;
vertical-align: middle;
}
.attendance-run-matrix-table thead th {
position: sticky;
top: 0;
z-index: 3;
}
.attendance-run-matrix-table .attendance-run-employee {
position: sticky;
left: 0;
z-index: 4;
min-width: 300px;
background: var(--rowb-surface-soft);
box-shadow: 1px 0 0 var(--rowb-border);
}
.attendance-run-matrix-table thead .attendance-run-employee {
z-index: 5;
background: var(--rowb-surface-hover);
}
.attendance-run-date {
white-space: normal;
}
.attendance-run-cell {
border-left: 4px solid transparent;
font-size: 0.88rem;
text-align: center;
}
.attendance-run-cell--empty {
background: #f7f3ee;
text-align: center;
}
.attendance-run-cell__hours {
color: var(--ors-text);
font-size: 0.95rem;
font-weight: 800;
}
.attendance-run-cell__adjust {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
margin-top: 4px;
}
.attendance-run-cell__adjust input {
width: 58px;
min-width: 58px;
padding: 3px 4px;
font-size: 0.75rem;
text-align: right;
}
.btn.btn-xs {
min-height: 24px;
padding: 3px 7px;
font-size: 0.72rem;
line-height: 1.1;
}
.attendance-run-total {
font-weight: 700;
white-space: nowrap;
}
.attendance-run-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
color: var(--ors-muted);
font-size: 0.78rem;
}
.attendance-run-legend span {
display: inline-flex;
gap: 6px;
align-items: center;
}
.attendance-run-legend__swatch {
width: 14px;
height: 14px;
border: 1px solid var(--ors-border);
border-left-width: 4px;
border-radius: 3px;
}
.attendance-run-legend__swatch--ok {
background: var(--rowb-success-bg);
border-left-color: var(--rowb-success);
}
.attendance-run-legend__swatch--warn {
background: var(--rowb-warning-bg);
border-left-color: var(--rowb-warning);
}
.attendance-run-legend__swatch--danger {
background: var(--rowb-danger-bg);
border-left-color: var(--rowb-danger);
}
.attendance-run-legend__swatch--empty {
background: var(--rowb-surface-soft);
border-left-color: var(--rowb-muted-light);
}
@keyframes rowb-fade-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.console-hero,
.card,
.console-frame,
.btn,
.menu-card {
animation: none !important;
transition: none !important;
}
}
@media (max-width: 720px) {
.console-hero,
.console-shell {
width: min(100% - 20px, 1120px);
}
body.login-page .console-shell,
body.login-page .console-hero {
width: min(100% - 20px, 760px);
}
body.login-page .console-frame--auth {
width: 100%;
padding: 22px 18px 20px;
}
body.login-page .form-actions {
flex-wrap: wrap;
}
body.login-page .form-actions .btn {
flex: 1 1 100%;
}
.console-shell {
grid-template-columns: 1fr;
}
.app-nav-shell {
position: static;
top: auto;
}
.console-hero__actions {
padding: 0 20px 12px;
}
.section-heading {
align-items: stretch;
}
#app-nav-logout {
width: 100%;
justify-content: center;
}
.btn,
form button[type="submit"] {
width: 100%;
}
.single-row-actions .btn,
.single-row-actions a.btn {
width: auto;
}
.dashboard-metric-chip strong {
font-size: 0.95rem;
}
.rowb-visual-dashboard {
grid-template-columns: 1fr;
}
.rowb-dial-grid,
.rowb-knob-grid {
grid-template-columns: 1fr;
}
.rowb-dial-card,
.rowb-knob-card {
grid-template-columns: 72px minmax(0, 1fr);
min-height: 0;
}
.rowb-dial-card__gauge,
.rowb-knob-card .rowb-dial-card__gauge {
width: 64px;
}
}
/* ==========================================================================
ROWB Design System v2 — authoritative EOF override layer
All rules here win the cascade unconditionally.
========================================================================== */
/* ── Topbar ─────────────────────────────────────────────────────── */
.rowb-topbar__breadcrumb {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 0.8rem;
color: var(--rowb-muted);
}
.rowb-topbar__crumb-link {
color: var(--rowb-muted);
text-decoration: none;
}
.rowb-topbar__crumb-link:hover,
.rowb-topbar__crumb-link:focus-visible {
color: var(--rowb-accent);
text-decoration: underline;
}
.rowb-topbar__crumb-current {
font-weight: 600;
color: var(--rowb-text);
}
.rowb-topbar__crumb-sep {
color: var(--rowb-muted);
padding: 0 2px;
}
.rowb-topbar__search {
position: relative;
flex: 1 1 auto;
max-width: 420px;
margin: 0 var(--sp-4);
}
.rowb-topbar__search-input {
width: 100%;
padding: 6px 12px;
border-radius: var(--rowb-radius-md);
border: 1px solid var(--rowb-border);
background: var(--rowb-surface-soft);
color: var(--rowb-text);
font-size: 0.85rem;
}
.rowb-topbar__search-input:focus {
outline: 2px solid var(--rowb-primary-hover);
outline-offset: 1px;
}
.rowb-topbar__search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 60vh;
overflow-y: auto;
background: var(--rowb-surface);
border: 1px solid var(--rowb-border);
border-radius: var(--rowb-radius-md);
box-shadow: var(--rowb-shadow-md, var(--rowb-shadow-xs));
z-index: 60;
padding: var(--sp-2) 0;
}
.rowb-topbar__search-group-label {
margin: 0;
padding: 4px 12px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rowb-muted);
}
.rowb-topbar__search-result {
display: flex;
flex-direction: column;
padding: 6px 12px;
text-decoration: none;
color: inherit;
}
.rowb-topbar__search-result:hover,
.rowb-topbar__search-result:focus-visible {
background: var(--rowb-surface-soft);
}
.rowb-topbar__search-result-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--rowb-text);
}
.rowb-topbar__search-result-sub {
font-size: 0.75rem;
color: var(--rowb-muted);
}
.rowb-topbar__search-empty {
margin: 0;
padding: 8px 12px;
font-size: 0.8rem;
color: var(--rowb-muted);
}
@media (max-width: 900px) {
.rowb-topbar__search {
display: none;
}
}
.rowb-topbar__actions {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.rowb-topbar__alerts {
position: relative;
}
.rowb-topbar__alerts-bell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--rowb-radius-md);
border: 1px solid var(--rowb-border);
background: var(--rowb-surface-soft);
cursor: pointer;
font-size: 1rem;
}
.rowb-topbar__alerts-bell:hover,
.rowb-topbar__alerts-bell:focus-visible {
border-color: var(--rowb-primary);
}
.rowb-topbar__alerts-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--rowb-danger, #d00000);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.rowb-topbar__alerts-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 280px;
max-height: 60vh;
overflow-y: auto;
background: var(--rowb-surface);
border: 1px solid var(--rowb-border);
border-radius: var(--rowb-radius-md);
box-shadow: var(--rowb-shadow-md, var(--rowb-shadow-xs));
z-index: 60;
padding: var(--sp-2) 0;
}
.rowb-topbar__alerts-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 8px 12px;
text-decoration: none;
color: var(--rowb-text);
}
.rowb-topbar__alerts-item:hover,
.rowb-topbar__alerts-item:focus-visible {
background: var(--rowb-surface-soft);
}
.rowb-topbar__alerts-item-count {
min-width: 24px;
padding: 1px 6px;
border-radius: 999px;
background: var(--rowb-surface-soft);
font-weight: 700;
font-size: 0.75rem;
text-align: center;
}
.rowb-topbar__alerts-item-label {
font-size: 0.82rem;
}
.rowb-topbar__alerts-empty {
margin: 0;
padding: 8px 12px;
font-size: 0.8rem;
color: var(--rowb-muted);
}
.rowb-topbar__profile {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--rowb-border);
background: var(--rowb-surface-soft);
cursor: default;
transition: background var(--rowb-ease);
font-size: 0.78rem;
line-height: 1;
}
.rowb-topbar__profile:hover {
background: var(--rowb-surface-hover);
}
.rowb-topbar__avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--rowb-primary);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rowb-topbar__name {
font-weight: 600;
color: var(--rowb-text);
}
.rowb-topbar__role {
color: var(--rowb-text-soft);
font-size: 0.72rem;
padding: 2px 6px;
background: var(--rowb-primary-light);
border-radius: 999px;
font-weight: 500;
}
/* ── App shell layout ───────────────────────────────────────────── */
html, body {
font-family: var(--rowb-font) !important;
font-size: 14px;
background: var(--rowb-bg) !important;
color: var(--rowb-text) !important;
}
body::before, body::after { display: none !important; }
.console-shell {
display: grid;
align-items: start;
min-height: calc(100vh - var(--rowb-topbar-h));
}
.app-nav-shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.app-nav-shell:empty {
visibility: hidden !important;
}
.dashboard-container,
/* Grid items default to min-width:auto, so a wide table (e.g. the hourly
demand coverage table's inline min-width) would stretch the whole card past
the clipped container edge instead of scrolling inside its .table-wrapper. */
.dashboard-container > .dashboard-section,
.dashboard-container > .dashboard-header,
.workspace-container > .workspace-section,
.workspace-container > .workspace-header {
min-width: 0;
max-width: 100%;
}
/* ============================================================
App Rail Navigation (Phase 2 redesign)
A persistent icon rail (subject badges only -- 10 items max, never
needs its own scrolling) plus an on-demand slide-out panel for
whichever subject is currently selected. Replaces the old
always-mounted 3-level accordion sidebar (subject > topic > function
all expanded inline), which is what made navigation tall, scroll-
heavy, and hard to scan. One fixed rail width at every breakpoint --
no separate expanded/collapsed/mobile-rail modes to keep in sync.
============================================================ */
.app-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
width: 100%;
height: 100%;
min-height: 0;
}
.app-rail__logo {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--rowb-radius-sm);
background: var(--rowb-primary);
color: #fff;
font-weight: 800;
font-size: 0.85rem;
text-decoration: none;
flex-shrink: 0;
}
.app-rail__subjects {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 2px 0;
}
.app-rail__subjects::-webkit-scrollbar { width: 3px; }
.app-rail__subjects::-webkit-scrollbar-track { background: transparent; }
.app-rail__subjects::-webkit-scrollbar-thumb { background: var(--rowb-border-strong); border-radius: 9px; }
.app-rail__item {
display: flex;
align-items: center;
justify-content: center;
width: 92px;
min-height: 44px;
flex-shrink: 0;
border: 1px solid transparent;
border-radius: var(--rowb-radius-sm);
background: transparent;
color: var(--rowb-muted);
font: inherit;
padding: 6px 4px;
cursor: pointer;
transition: background var(--rowb-ease), color var(--rowb-ease), border-color var(--rowb-ease);
}
.app-rail__item:hover {
background: var(--rowb-surface-hover);
color: var(--rowb-text);
}
.app-rail__item.is-current {
color: var(--rowb-primary-hover);
}
.app-rail__item[aria-expanded="true"] {
background: var(--rowb-primary-light);
border-color: var(--rowb-primary-soft);
color: var(--rowb-primary-hover);
}
.app-rail__badge {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
text-align: center;
padding: 0 2px;
overflow-wrap: break-word;
}
.app-rail__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
flex-shrink: 0;
padding-top: var(--sp-2);
border-top: 1px solid var(--rowb-border);
}
/* Slide-out panel: absolutely positioned so it overlays page content
rather than pushing it (the rail's own width never changes). */
.app-nav-panel {
position: absolute;
left: calc(var(--rowb-rail-w) + 8px);
top: 0;
width: var(--rowb-panel-w);
max-width: calc(100vw - var(--rowb-rail-w) - 32px);
height: 100%;
display: flex;
flex-direction: column;
/* Was --rowb-glass-bg (0.66 alpha) -- too translucent for a panel that
overlays live, scrolling dashboard content (gauges, numbers, tables)
rather than the flat page background every other glass surface sits
on; the underlying content bled through and collided with the panel's
own nav text. --rowb-glass-bg-solid keeps the frosted-edge look via
backdrop-filter while staying reliably readable. */
background: var(--rowb-glass-bg-solid);
backdrop-filter: blur(var(--rowb-glass-blur));
-webkit-backdrop-filter: blur(var(--rowb-glass-blur));
border: 1px solid var(--rowb-glass-border);
border-radius: var(--rowb-radius-lg);
box-shadow: var(--rowb-shadow-lg);
z-index: 40;
overflow: hidden;
}
.app-nav-panel[hidden] { display: none; }
.app-nav-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-3) var(--sp-2);
border-bottom: 1px solid var(--rowb-border);
flex-shrink: 0;
}
.app-nav-panel__title {
font-weight: 700;
font-size: 0.9rem;
color: var(--rowb-text);
}
.app-nav-panel__close {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: var(--rowb-muted);
cursor: pointer;
border-radius: var(--rowb-radius-sm);
padding: 0;
}
.app-nav-panel__close:hover {
background: var(--rowb-surface-hover);
color: var(--rowb-text);
}
.app-nav-panel__search-wrap {
padding: 0 var(--sp-3) var(--sp-2);
flex-shrink: 0;
}
.app-nav-panel__search {
display: flex;
align-items: center;
gap: var(--sp-2);
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
border-radius: var(--rowb-radius-sm);
padding: 0 var(--sp-2);
color: var(--rowb-muted);
}
.app-nav-panel__search input {
border: 0 !important;
background: transparent !important;
min-height: 30px !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 0.78rem !important;
color: var(--rowb-text) !important;
width: 100%;
}
.app-nav-panel__body {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.app-nav-panel__body::-webkit-scrollbar { width: 3px; }
.app-nav-panel__body::-webkit-scrollbar-track { background: transparent; }
.app-nav-panel__body::-webkit-scrollbar-thumb { background: var(--rowb-border-strong); border-radius: 9px; }
.app-nav-panel__subject-content { display: none; }
.app-nav-panel__subject-content.is-active { display: block; }
.app-nav-panel__topic { margin-bottom: var(--sp-2); }
.app-nav-panel__topic-link {
display: flex;
padding: 6px 8px;
border-radius: var(--rowb-radius-sm);
font-weight: 600;
font-size: 0.8rem;
color: var(--rowb-text-soft);
text-decoration: none;
}
.app-nav-panel__topic-link:hover {
background: var(--rowb-surface-hover);
color: var(--rowb-text);
}
.app-nav-panel__topic-link.is-active {
color: var(--rowb-primary-hover);
background: var(--rowb-primary-light);
}
.app-nav-panel__functions {
display: flex;
flex-direction: column;
}
.app-nav-panel__function {
display: flex;
padding: 5px 8px 5px 22px;
border-radius: var(--rowb-radius-sm);
font-size: 0.76rem;
color: var(--rowb-text-soft);
text-decoration: none;
border-left: 2px solid transparent;
}
.app-nav-panel__function:hover {
background: var(--rowb-surface-hover);
color: var(--rowb-text);
}
.app-nav-panel__function.is-active {
color: var(--rowb-primary-hover);
font-weight: 600;
border-left-color: var(--rowb-primary);
background: var(--rowb-primary-light);
}
@media (max-width: 640px) {
.app-sidebar { padding: 6px !important; }
.app-rail__item { width: 76px; padding: 4px 2px; }
.app-rail__badge { font-size: 0.6rem; }
}
/* ── Console hero ───────────────────────────────────────────────── */
.console-hero {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
animation: rowb-fade-rise 0.48s ease-out both;
margin: 40px auto 0 !important;
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
border: 1px solid var(--rowb-glass-border) !important;
border-bottom: 2px solid var(--rowb-primary) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: var(--rowb-shadow-xs) !important;
padding: 0 !important;
}
/* Kill ornate glow overlay */
.console-hero::after { display: none !important; }
.console-hero__badge {
display: block !important;
width: 100% !important;
padding: 7px 16px !important;
background: var(--rowb-primary) !important;
color: #fff !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.console-hero__subtitle {
padding: 0 16px 8px !important;
color: var(--rowb-text-soft) !important;
font-size: 0.82rem !important;
}
.console-hero__meta {
padding: 0 16px 12px !important;
}
.console-hero__meta span {
font-size: 0.75rem !important;
}
.console-hero__actions {
padding: 0 16px 10px !important;
}
/* Theme variants — strip custom colours, use primary */
body[class*="theme-"] .console-hero,
body.theme-roster .console-hero,
body.theme-hr .console-hero,
body.theme-suppliers .console-hero {
border-bottom-color: var(--rowb-primary) !important;
background: var(--rowb-surface) !important;
}
body[class*="theme-"] .console-hero__badge,
body.theme-roster .console-hero__badge,
body.theme-hr .console-hero__badge,
body.theme-suppliers .console-hero__badge {
background: var(--rowb-primary) !important;
color: #fff !important;
}
.eyebrow {
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--rowb-text-soft) !important;
}
/* ── Cards ──────────────────────────────────────────────────────── */
.card, .card-muted,
.dashboard-section, .workspace-section,
.dashboard-header, .workspace-header {
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250, 246, 240,0.98) 100%) !important;
border: 1px solid rgba(232, 221, 203,0.96) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: 0 10px 24px rgba(34, 26, 21, 0.04) !important;
}
.dashboard-section, .workspace-section,
.card, .card-muted {
padding: 18px 20px !important;
}
.dashboard-header, .workspace-header {
padding: var(--sp-3) var(--sp-4) !important;
min-height: 54px;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--sp-3) !important;
flex-wrap: wrap;
}
.section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
padding-bottom: var(--sp-3) !important;
margin-bottom: var(--sp-3) !important;
border-bottom: 1px solid var(--rowb-border) !important;
}
.section-heading > * {
min-width: 0;
}
.section-heading .section-support {
max-width: 44rem;
line-height: 1.5;
}
.dashboard-ops-strip {
display: grid;
gap: 16px;
margin-bottom: 18px;
padding: 18px 20px;
border: 1px solid rgba(232, 221, 203, 0.95);
border-radius: 18px;
background: linear-gradient(135deg, rgba(250, 246, 240, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
box-shadow: 0 14px 30px rgba(34, 26, 21, 0.04);
}
.dashboard-ops-strip__intro {
display: flex;
align-items: start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 2px;
}
.dashboard-ops-strip__intro h2 {
margin: 4px 0 0;
font-size: 1rem;
line-height: 1.3;
color: var(--rowb-text);
}
.dashboard-ops-strip__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.dashboard-promo-card {
display: grid;
gap: 6px;
padding: 12px 13px;
border: 1px solid rgba(232, 221, 203, 0.95);
border-radius: 12px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 16px rgba(34, 26, 21, 0.03);
}
.dashboard-promo-card__eyebrow {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rowb-primary-hover);
}
.dashboard-promo-card strong {
font-size: 0.92rem;
color: var(--rowb-text);
}
.dashboard-promo-card p,
.dashboard-promo-card .dashboard-promo-card__desc {
display: block;
margin: 0;
font-size: 0.78rem;
line-height: 1.45;
color: var(--rowb-muted);
}
/* 2026-09-02: Cash Control Dashboard balance cards -- a negative balance is
allowed by design (never floored/blocked, see
docs/AUDITED_ACCOUNTS_AUTHORITATIVE.md) but must never look like any other
figure. Card-level border/background highlight; the figure itself already
gets .variance-cell--neg's red text via loadCashControlDashboard(). */
.dashboard-promo-card--negative {
border-color: var(--rowb-danger);
background: var(--rowb-danger-bg);
}
.dashboard-ops-strip .dashboard-promo-card:hover {
border-color: rgba(168, 148, 120, 0.45);
box-shadow: 0 10px 20px rgba(34, 26, 21, 0.05);
}
.user-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: var(--rowb-primary-light);
border: 1px solid rgba(34, 26, 21, 0.16);
color: var(--rowb-primary-dark);
font-size: 0.78rem;
font-weight: 600;
}
.section-support,
.muted,
.card-muted,
.sx-inline-status {
color: var(--rowb-text-soft) !important;
font-size: 0.82rem !important;
line-height: 1.5 !important;
}
.dashboard-header h1,
.workspace-header h1,
.dashboard-section h2,
.workspace-section h2,
.workspace-section h3 {
margin: 0 !important;
line-height: 1.22 !important;
}
/* ── Menu grid cards ────────────────────────────────────────────── */
/* 2026-08-23 design-system audit note: .menu-card and .dashboard-ops-card
share border/background/radius/shadow/hover here (and elsewhere in the
file, several of these properties are further reinforced with
!important against other card-like selectors, e.g. .kpi-gauge-card) --
several near-identical "card" variants exist across this file
(.dashboard-ops-card, .dashboard-promo-card, .kpi-gauge-card,
.opex-ref-card, .menu-card) with real, non-trivial differences in
padding/alignment that make a blind full merge unsafe without a browser
to verify. If consolidating further, extend THIS shared block rather
than starting a sixth parallel card system. */
.menu-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
gap: var(--sp-3) !important;
align-items: stretch !important;
width: 100% !important;
}
.menu-card, .dashboard-ops-card {
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250, 246, 240,0.98) 100%) !important;
border: 1px solid rgba(232, 221, 203,0.96) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: 0 8px 18px rgba(34, 26, 21, 0.035) !important;
transition: transform var(--rowb-ease), box-shadow var(--rowb-ease), border-color var(--rowb-ease) !important;
}
.menu-card:hover, .dashboard-ops-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(34, 26, 21, 0.06) !important;
border-color: rgba(168, 148, 120, 0.55) !important;
}
.menu-card__title { font-size: 0.82rem; font-weight: 600; color: var(--rowb-text); }
.menu-card__summary, .menu-card__meta { font-size: 0.76rem !important; color: var(--rowb-text-soft) !important; }
/* ── Buttons ────────────────────────────────────────────────────── */
.btn, form button[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: var(--rowb-radius-sm) !important;
min-height: 34px !important;
padding: 6px 15px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
font-family: var(--rowb-font) !important;
line-height: 1 !important;
cursor: pointer !important;
transition: transform var(--rowb-ease), box-shadow var(--rowb-ease), background var(--rowb-ease), border-color var(--rowb-ease), color var(--rowb-ease) !important;
white-space: nowrap !important;
text-decoration: none !important;
box-shadow: 0 2px 8px rgba(34, 26, 21, 0.04) !important;
}
.btn:hover, form button[type="submit"]:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 14px rgba(34, 26, 21, 0.08) !important;
}
.btn-small { min-height: 26px !important; padding: 3px 10px !important; font-size: 0.72rem !important; }
.btn.btn-xs { min-height: 22px !important; padding: 2px 8px !important; font-size: 0.68rem !important; }
/* Danger / ghost */
/* Cards that also carry .btn/.btn-primary must remain cards, not blue inline buttons. */
.menu-grid > .menu-card,
/* Compatibility net (2026-08-05): every .menu-card in html/ now ships without
.btn/.btn-primary/.btn-secondary — the markup states the component it is, and
"primary button" is reserved for the one primary action on a page again.
This block is kept so a reintroduced .btn class cannot repaint a card as a
filled CTA. Four such blocks exist across the override layers; this is the
first. */
.menu-card.btn,
.menu-card.btn-primary,
.menu-card.btn-secondary,
.dashboard-ops-card.btn,
.dashboard-ops-card.btn-primary,
.dashboard-ops-card.btn-secondary {
display: grid !important;
align-items: start !important;
justify-content: start !important;
gap: 8px !important;
width: 100% !important;
min-height: 104px !important;
padding: 14px 16px !important;
background: var(--rowb-surface) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
color: var(--rowb-text) !important;
text-align: left !important;
line-height: 1.4 !important;
white-space: normal !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.menu-grid > .menu-card:hover,
.menu-card.btn:hover,
.menu-card.btn-primary:hover,
.menu-card.btn-secondary:hover,
.dashboard-ops-card.btn:hover,
.dashboard-ops-card.btn-primary:hover,
.dashboard-ops-card.btn-secondary:hover {
background: var(--rowb-surface-soft) !important;
border-color: var(--rowb-border-strong) !important;
color: var(--rowb-text) !important;
}
.menu-card .menu-card__summary,
.menu-card .menu-card__meta,
.dashboard-ops-card .menu-card__summary,
.dashboard-ops-card .menu-card__meta {
display: block !important;
color: var(--rowb-text-soft) !important;
font-size: 0.76rem !important;
font-weight: 500 !important;
line-height: 1.45 !important;
white-space: normal !important;
}
.menu-card > strong,
.menu-card > span,
.dashboard-ops-card > strong,
.dashboard-ops-card > span {
min-width: 0;
overflow-wrap: anywhere;
}
/* ── Inputs / Forms ─────────────────────────────────────────────── */
.form-field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
input, select, textarea {
border: 1px solid rgba(214, 199, 175, 0.95) !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 2px rgba(34, 26, 21, 0.03) !important;
background: rgba(255,255,255,0.98) !important;
transition: border-color var(--rowb-ease), box-shadow var(--rowb-ease), background var(--rowb-ease) !important;
}
input:hover, select:hover, textarea:hover {
border-color: rgba(168, 148, 120, 0.8) !important;
}
.form-field > label,
.form-field > span:first-child {
font-size: 0.72rem !important;
font-weight: 600 !important;
color: var(--rowb-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.form-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-3) !important;
}
/* ── Tables ─────────────────────────────────────────────────────── */
.hr-table {
width: 100%;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
border-radius: 12px;
}
.hr-table td {
padding: 9px 12px !important;
font-size: 0.8rem !important;
border-bottom: 1px solid var(--rowb-border) !important;
color: var(--rowb-text-soft);
vertical-align: middle;
}
.hr-table tbody tr:last-child td { border-bottom: 0 !important; }
.hr-table tbody tr:nth-child(even) td { background: var(--rowb-surface-soft) !important; }
.hr-table tbody tr:hover td {
background: linear-gradient(90deg, rgba(250, 240, 220, 0.85) 0%, rgba(246, 231, 202, 0.85) 100%) !important;
transition: background var(--rowb-ease);
}
/* ── Status chips ───────────────────────────────────────────────── */
.status-chip {
line-height: 1.4;
}
/* ── Dial / metrics cards ───────────────────────────────────────── */
.rowb-visual-dashboard {
background: var(--rowb-surface) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.rowb-dial-card, .rowb-knob-card {
background: var(--rowb-surface) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-md) !important;
}
/* ── Focus ring — accessibility ─────────────────────────────────── */
.btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible,
button:focus-visible, textarea:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.22) !important;
}
/* ── Scope panel (sidebar) ──────────────────────────────────────── */
.app-scope-panel {
background: var(--rowb-surface-soft) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-md) !important;
padding: var(--sp-3) !important;
margin-bottom: var(--sp-3) !important;
}
/* ── Micro-animations ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.app-sidebar { animation: rowbSlideInLeft 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.rowb-topbar { animation: rowbFadeDown 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.dashboard-header, .workspace-header,
.console-hero { animation: rowbFadeUp 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.card, .dashboard-section, .workspace-section { animation: rowbFadeUp 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.menu-card:nth-child(1) { animation-delay: 0ms; }
.menu-card:nth-child(2) { animation-delay: 35ms; }
.menu-card:nth-child(3) { animation-delay: 70ms; }
.menu-card:nth-child(4) { animation-delay: 105ms; }
}
@keyframes rowbFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes rowbSlideInLeft {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes rowbFadeDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── App footer — modernised ────────────────────────────────────── */
.app-footer__links a,
.app-footer__copy {
color: rgba(250, 246, 240, 0.8) !important;
}
.app-footer__links a:hover {
color: #ffffff !important;
}
/* ── Responsive breakpoints ─────────────────────────────────────── */
@media (max-width: 1200px) {
.console-shell {
grid-template-columns: 220px minmax(0, 1fr) !important;
}
}
@media (max-width: 900px) {
.console-shell {
grid-template-columns: 1fr !important;
width: min(100% - 24px, 1748px) !important;
padding: var(--sp-3) 0 !important;
}
.app-sidebar {
position: static !important;
max-height: none !important;
width: 100% !important;
}
.rowb-topbar__name { display: none; }
}
@media (max-width: 600px) {
.rowb-topbar { padding: 0 var(--sp-3); }
.console-hero, .dashboard-section, .workspace-section, .card {
border-radius: var(--rowb-radius-md) !important;
padding: var(--sp-3) !important;
}
.btn, form button[type="submit"] { min-height: 34px !important; }
.rowb-topbar__role { display: none; }
}
.app-footer {
width: 100%;
font-family: var(--font-sans);
letter-spacing: 0.01em;
background: linear-gradient(180deg, var(--rowb-primary-dark) 0%, var(--public-ink-soft) 100%);
border-top: 1px solid rgba(168, 148, 120, 0.2);
}
.app-footer__inner {
max-width: 1280px;
margin: 0 auto;
padding: 14px 28px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.app-footer__brand {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
opacity: 0.92;
transition: opacity 0.18s, transform 0.18s;
}
.app-footer__brand:hover {
opacity: 1;
text-decoration: none;
transform: translateY(-1px);
}
.app-footer__logo {
height: 28px;
width: auto;
display: block;
filter: none;
mix-blend-mode: normal;
}
.app-footer__links {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
.app-footer__links a {
color: rgba(240, 231, 216, 0.65);
text-decoration: none;
padding: 2px 12px;
border-right: 1px solid rgba(181, 163, 138, 0.3);
transition: color 0.18s;
white-space: nowrap;
}
.app-footer__links a:last-child {
border-right: none;
}
.app-footer__links a:hover {
color: rgba(240, 231, 216, 1);
}
.app-footer__copy {
margin: 0 0 0 auto;
color: rgba(240, 231, 216, 0.50);
white-space: nowrap;
}
@media (max-width: 640px) {
.app-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
}
.app-footer__copy {
margin-left: 0;
}
.app-footer__links a:first-child {
padding-left: 0;
}
}
/* ------------------------------------------------------------------ *
* Progressive-disclosure layers: signal strip + detail drawer
* (shared via js/ui_layers.js)
* ------------------------------------------------------------------ */
.rowb-signal-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
margin: 4px 0 12px;
}
.rowb-tabpanel-support {
margin: 0 0 10px;
color: var(--ors-muted, #69717a);
font-size: 0.82rem;
}
.rowb-drawer {
position: fixed;
inset: 0;
z-index: 1200;
}
.rowb-drawer[hidden] {
display: none;
}
.rowb-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(20, 18, 30, 0.46);
opacity: 0;
transition: opacity 0.2s ease;
}
.rowb-drawer.is-open .rowb-drawer__overlay {
opacity: 1;
}
.rowb-drawer__panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(720px, 94vw);
background: var(--rowb-surface);
border-left: 1px solid var(--rowb-border);
box-shadow: var(--rowb-shadow-md);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rowb-drawer.is-open .rowb-drawer__panel {
transform: translateX(0);
}
.rowb-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--rowb-border);
background: var(--rowb-surface-soft);
}
.rowb-drawer__title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--rowb-text);
}
.rowb-drawer__body {
padding: 16px 18px;
overflow-y: auto;
flex: 1;
}
body.rowb-drawer-open {
overflow: hidden;
}
@media (max-width: 720px) {
.rowb-drawer__panel {
width: 100vw;
}
}
@media (prefers-reduced-motion: reduce) {
.rowb-drawer__overlay,
.rowb-drawer__panel {
transition: none;
}
}
/* ── Login page ─────────────────────────────────────────────────── */
body.login-page {
background: var(--rowb-bg) !important;
background-image: none !important;
}
body.login-page::before,
body.login-page::after { display: none !important; }
body.login-page .console-hero {
background: var(--rowb-surface) !important;
border-color: var(--rowb-border) !important;
border-bottom-color: var(--rowb-primary) !important;
border-bottom-width: 2px !important;
box-shadow: var(--rowb-shadow-sm) !important;
}
body.login-page .console-hero__badge {
background: var(--rowb-primary) !important;
color: #fff !important;
font-size: 0.72rem !important;
letter-spacing: 0.06em;
padding: 8px 16px !important;
}
body.login-page .console-frame--auth {
background: var(--rowb-surface) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: var(--rowb-shadow-sm) !important;
}
/* ==========================================================================
ROWB Clarity Elevation Layer — quieter, more precise executive UI
========================================================================== */
body:not(.login-page) {
background:
radial-gradient(900px 320px at 50% -160px, rgba(255, 255, 255, 0.95), rgba(250, 246, 240, 0) 70%),
linear-gradient(180deg, #ffffff 0, #f8fafc 360px, #f8fafc 100%) !important;
}
.rowb-topbar__page {
font-size: 0.82rem !important;
}
.console-hero,
.console-shell {
width: min(var(--rowb-page-max), calc(100% - 64px)) !important;
}
.console-hero__badge {
margin-bottom: 12px !important;
color: var(--rowb-muted) !important;
font-size: 0.7rem !important;
font-weight: 680 !important;
}
.console-hero__title {
grid-column: 1;
padding: 12px 16px 4px;
max-width: 920px;
font-size: clamp(1.85rem, 1.35rem + 1.45vw, 2.75rem) !important;
line-height: 1.03 !important;
font-weight: 760 !important;
color: var(--rowb-text) !important;
}
.console-hero__meta {
grid-column: 2;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-self: end;
margin-top: 18px !important;
gap: 10px 20px !important;
}
.console-hero__meta span {
color: var(--rowb-muted) !important;
}
.console-shell {
grid-template-columns: var(--rowb-rail-w) minmax(0, 1fr) !important;
gap: 40px !important;
margin: 16px auto 36px !important;
padding: 40px 0 64px !important;
}
.app-sidebar:hover,
.app-sidebar:focus-within {
box-shadow: 0 28px 84px rgba(34, 26, 21, 0.075) !important;
}
.dashboard-header h1,
.workspace-header h1 {
font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2rem) !important;
line-height: 1.08 !important;
font-weight: 740 !important;
color: var(--rowb-text) !important;
}
.dashboard-section,
.workspace-section,
.card,
.card-muted,
.rowb-visual-dashboard,
.rowb-dial-card,
.rowb-knob-card {
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
border: 1px solid var(--rowb-glass-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.dashboard-section,
.workspace-section,
.card,
.card-muted {
padding: 32px !important;
}
.section-heading {
gap: 24px 40px !important;
padding-bottom: 24px !important;
margin-bottom: 28px !important;
border-bottom-color: rgba(243, 236, 225, 0.98) !important;
}
.dashboard-section h2,
.workspace-section h2 {
font-size: 1.12rem !important;
line-height: 1.25 !important;
font-weight: 680 !important;
color: var(--rowb-text) !important;
}
.workspace-section h3 {
font-size: 1rem !important;
line-height: 1.25 !important;
font-weight: 650 !important;
}
.section-heading .section-support,
.section-support,
.muted,
.card-muted,
.sx-inline-status,
.menu-card__summary,
.menu-card__meta {
color: var(--rowb-muted) !important;
font-size: 0.84rem !important;
line-height: 1.6 !important;
}
.eyebrow,
.form-field > label,
.form-field > span:first-child {
color: var(--rowb-muted) !important;
font-size: 0.7rem !important;
font-weight: 680 !important;
letter-spacing: 0.04em !important;
}
.menu-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
gap: 12px !important;
}
.menu-grid > .menu-card,
.menu-card.btn,
.menu-card.btn-primary,
.menu-card.btn-secondary,
.dashboard-ops-card.btn,
.dashboard-ops-card.btn-primary,
.dashboard-ops-card.btn-secondary {
min-height: 0 !important;
padding: 12px 14px !important;
border-color: rgba(243, 236, 225, 0.98) !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: none !important;
}
.menu-grid > .menu-card:hover,
.menu-card.btn:hover,
.menu-card.btn-primary:hover,
.menu-card.btn-secondary:hover,
.dashboard-ops-card.btn:hover,
.dashboard-ops-card.btn-primary:hover,
.dashboard-ops-card.btn-secondary:hover {
transform: translateY(-2px) !important;
border-color: rgba(34, 26, 21, 0.18) !important;
box-shadow: 0 26px 60px rgba(34, 26, 21, 0.055) !important;
}
.btn,
form button[type="submit"] {
min-height: 38px !important;
padding: 0 18px !important;
border-radius: 999px !important;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease !important;
}
.btn:hover,
form button[type="submit"]:hover {
transform: translateY(-1px);
}
.hr-table tbody tr:nth-child(even) td {
background: #fbfdff !important;
}
.app-footer {
margin-top: 32px;
}
@media (max-width: 900px) {
.rowb-topbar {
padding: 8px 20px !important;
}
.console-hero,
.console-shell {
width: min(100% - 32px, var(--rowb-page-max)) !important;
}
.console-shell {
gap: 24px !important;
padding: 32px 0 48px !important;
}
.dashboard-section,
.workspace-section,
.card,
.card-muted {
padding: 24px !important;
}
}
@media (max-width: 640px) {
.console-hero,
.console-shell {
width: min(100% - 24px, var(--rowb-page-max)) !important;
}
.console-hero {
margin-top: 28px !important;
}
.dashboard-section,
.workspace-section,
.card,
.card-muted,
.menu-grid > .menu-card,
.menu-card.btn {
padding: 20px !important;
}
}
/* ==========================================================================
ROWB Plane Layout Refinement — fewer boxes, clearer hierarchy
========================================================================== */
.dashboard-container,
.workspace-container {
position: relative;
z-index: 1;
display: grid;
align-content: start;
min-width: 0;
width: 100%;
overflow: hidden;
gap: 14px !important;
padding: 28px !important;
background: rgba(255, 255, 255, 0.82) !important;
border: 1px solid rgba(243, 236, 225, 0.98) !important;
border-radius: 20px !important;
box-shadow: 0 24px 72px rgba(34, 26, 21, 0.04) !important;
}
.dashboard-header.card,
.workspace-header.card {
padding: 0 0 20px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(243, 236, 225, 0.98) !important;
}
.dashboard-section.card,
.workspace-section.card {
padding: 22px 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(243, 236, 225, 0.98) !important;
}
.dashboard-section.card:last-child,
.workspace-section.card:last-child {
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.dashboard-section.card:hover,
.workspace-section.card:hover {
box-shadow: none !important;
}
.section-heading {
padding-bottom: 0 !important;
margin-bottom: 18px !important;
border-bottom: 0 !important;
}
.section-heading > div {
display: grid;
gap: 4px;
}
.section-heading .section-support {
align-self: end;
max-width: 36rem !important;
}
.menu-grid > .menu-card,
.menu-card.btn,
.menu-card.btn-primary,
.menu-card.btn-secondary,
.dashboard-ops-card.btn,
.dashboard-ops-card.btn-primary,
.dashboard-ops-card.btn-secondary {
border-color: rgba(232, 221, 203, 0.86) !important;
background: rgba(255, 255, 255, 0.92) !important;
}
.table-scroll {
width: 100%;
overflow: auto;
border: 1px solid rgba(243, 236, 225, 0.98) !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: none !important;
}
@media (max-width: 900px) {
.dashboard-container,
.workspace-container {
padding: 28px !important;
border-radius: 18px !important;
}
.dashboard-section.card,
.workspace-section.card {
padding: 28px 0 !important;
}
}
@media (max-width: 640px) {
.dashboard-container,
.workspace-container {
padding: 22px !important;
border-radius: 16px !important;
}
}
/* ==========================================================================
ROWB Production Render Correction — align shell from /error screenshots
========================================================================== */
body:not(.login-page) .console-hero {
padding-left: calc(var(--rowb-rail-w) + 22px) !important;
padding-right: 24px !important;
}
body:not(.login-page) .console-hero__actions,
body:not(.login-page) #app-hero-logout {
display: none !important;
}
body:not(.login-page) .console-shell {
align-items: start !important;
grid-template-columns: var(--rowb-rail-w) minmax(0, 1fr) !important;
gap: 20px !important;
}
body:not(.login-page) .app-nav-shell {
align-self: start !important;
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body:not(.login-page) .app-sidebar,
body:not(.login-page) .app-sidebar:hover,
body:not(.login-page) .app-sidebar:focus-within {
width: var(--rowb-rail-w) !important;
max-width: var(--rowb-rail-w) !important;
background: rgba(255,255,255,0.92) !important;
}
.payroll-attendance-toolbar {
margin-bottom: 1rem !important;
}
.payroll-period-field {
max-width: 340px !important;
}
body:not(.login-page) .menu-grid,
body:not(.login-page) .menu-card,
body:not(.login-page) .dashboard-ops-card {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body:not(.login-page) .menu-card,
body:not(.login-page) .dashboard-ops-card {
overflow: hidden !important;
white-space: normal !important;
}
body:not(.login-page) .menu-card *,
body:not(.login-page) .dashboard-ops-card * {
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}
@media (max-width: 900px) {
/* The rail stays visible and narrow at every width (see "App Rail
Navigation" below), so unlike the old sidebar there's no reason to
collapse the grid to one column or hide the nav shell here. */
body:not(.login-page) .console-shell {
width: min(100% - 24px, var(--rowb-page-max)) !important;
gap: 16px !important;
}
body:not(.login-page) .dashboard-container,
body:not(.login-page) .workspace-container {
max-width: 100% !important;
overflow: hidden !important;
}
}
@media (max-width: 600px) {
body:not(.login-page) .console-hero,
body:not(.login-page) .console-shell {
width: min(100% - 20px, var(--rowb-page-max)) !important;
}
body:not(.login-page) .dashboard-container,
body:not(.login-page) .workspace-container {
padding: 18px !important;
}
}
/* ==========================================================================
ROWB Skin Stabilization — shared login, imagery, and navigation behavior
========================================================================== */
body.login-page {
min-height: 100svh;
background:
linear-gradient(180deg, rgba(7, 12, 21, 0.32), rgba(7, 12, 21, 0.5)),
var(--ors-hero-image),
var(--rowb-text) !important;
background-size: auto, cover, auto !important;
background-position: center, center, center !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-attachment: scroll, fixed, scroll !important;
}
body.login-page:not(.login-page--entry) .console-shell {
display: block !important;
grid-template-columns: none !important;
width: min(560px, calc(100% - 24px)) !important;
min-height: 0 !important;
margin: 20px auto 36px !important;
padding: 0 !important;
}
body.login-page:not(.login-page--entry) .console-frame--auth {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 24px !important;
background: rgba(255, 255, 255, 0.96) !important;
border: 1px solid rgba(232, 221, 203, 0.92) !important;
box-shadow: 0 24px 60px rgba(7, 12, 21, 0.28) !important;
backdrop-filter: blur(14px);
}
[hidden] {
display: none !important;
}
body:not(.login-page) {
background:
linear-gradient(180deg, rgba(250, 246, 240, 0.9), rgba(250, 246, 240, 0.94)),
var(--ors-hero-image),
#f8fafc !important;
background-size: auto, cover, auto !important;
background-position: center, center, center !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-attachment: scroll, fixed, scroll !important;
}
body:not(.login-page) .console-hero {
min-height: 154px;
width: min(1120px, calc(100% - 48px)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-top: 28px !important;
padding-right: 32px !important;
padding-bottom: 24px !important;
text-align: center;
border-radius: 0 0 18px 18px !important;
background:
linear-gradient(90deg, rgba(250, 246, 240, 0.98) 0%, rgba(250, 246, 240, 0.92) 58%, rgba(250, 246, 240, 0.56) 78%, rgba(250, 246, 240, 0.16) 100%),
var(--ors-hero-image) right 44% center / min(42vw, 620px) auto no-repeat !important;
}
body:not(.login-page) .console-hero__title {
max-width: none;
}
body:not(.login-page) .console-hero__meta {
justify-content: center;
}
body:not(.login-page) .app-sidebar {
position: sticky !important;
top: calc(var(--rowb-topbar-h) + 16px) !important;
align-self: start !important;
box-sizing: border-box;
gap: 12px;
/* Sized directly from the sticky offset above (topbar + 16px) plus a
16px bottom margin -- once stuck, that offset is constant, so this
needs no scroll/resize-driven JS recalculation. */
height: calc(100dvh - (var(--rowb-topbar-h) + 16px) - 16px) !important;
min-height: min(420px, calc(100dvh - (var(--rowb-topbar-h) + 16px) - 16px)) !important;
max-height: none !important;
/* visible, not hidden: .app-nav-panel is an absolutely-positioned child
that intentionally renders outside the narrow rail's own box. The
rail's own scrolling (if the subject list ever grows) is handled by
.app-rail__subjects's own overflow, independent of this. */
overflow: visible !important;
}
body:not(.login-page) .app-scope-panel {
flex: 0 0 auto;
}
@media (max-width: 920px) {
body:not(.login-page) .console-hero {
background:
linear-gradient(90deg, rgba(250, 246, 240, 0.97), rgba(250, 246, 240, 0.82)),
var(--ors-hero-image) center / cover no-repeat !important;
}
}
/* ── Banner–Workspace Edge Alignment (2026-06-13) ───────────────── *
* Force the console-hero to share the same max-width and horizontal
* margins as the console-shell so its right edge is flush with the
* workspace / dashboard card column.
* ------------------------------------------------------------------ */
body:not(.login-page) .console-hero {
width: min(1748px, calc(100% - 32px)) !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: left !important;
border-radius: var(--rowb-radius-lg) !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: unset !important;
}
/* ── HR workspace horizontal-overflow containment (2026-06-13) ───── *
* Keep the employee workspace inside the viewport without forcing *
* a page-level horizontal scroll. *
* ------------------------------------------------------------------ */
body.theme-hr .workspace-container {
overflow-x: hidden !important;
min-width: 0 !important;
}
body.theme-hr .workspace-section.card,
body.theme-hr .workspace-container .table-wrapper,
body.theme-hr .workspace-container .table-scroll {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.theme-hr .workspace-section.card {
overflow: hidden !important;
}
body.theme-hr .workspace-container .hr-table {
table-layout: fixed !important;
width: 100% !important;
}
body.theme-hr .workspace-container .hr-table thead th,
body.theme-hr .workspace-container .hr-table td {
overflow-wrap: anywhere !important;
word-break: break-word !important;
white-space: normal !important;
}
/* ── Invoice drawer — workspace-only overlay (2026-06-13) ────────── *
* The backdrop and sliding panel float only over the workspace *
* column; the sidebar remains visible and unobstructed. *
* ------------------------------------------------------------------ */
.rowb-drawer {
/* Offset past the nav rail (--rowb-rail-w, fixed at every breakpoint
since Phase 2's redesign -- no more expanded/collapsed/mobile-rail
modes to track here) + grid gap + shell margin. */
left: calc(var(--rowb-rail-w) + var(--sp-4, 16px)) !important;
}
.rowb-drawer__panel {
overflow-x: hidden !important;
max-width: 100% !important;
}
.rowb-drawer__body {
overflow-x: hidden !important;
}
/* Mobile: drawer goes full-screen rather than floating next to the rail */
@media (max-width: 640px) {
.rowb-drawer {
left: 0 !important;
}
}
/* ── Operational Excellence ─────────────────────────────────────────────── */
.opex-section-block {
margin-bottom: 24px;
}
.opex-section-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rowb-muted);
margin: 12px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--rowb-border);
}
.opex-count-table,
.opex-history-table,
.opex-view-table {
width: 100%;
border-collapse: collapse;
}
.opex-count-table th,
.opex-count-table td {
padding: 6px 8px;
vertical-align: middle;
}
.opex-item-col { width: 40%; }
.opex-qty-col { width: 12%; min-width: 72px; }
.opex-unit-col { width: 10%; color: var(--rowb-muted); font-size: 0.8rem; }
.opex-note-col { width: 26%; }
.opex-qty-input {
width: 100%;
padding: 4px 6px;
border: 1px solid var(--rowb-border);
border-radius: 4px;
font-size: 0.875rem;
text-align: right;
}
.opex-note-input {
width: 100%;
padding: 4px 6px;
border: 1px solid var(--rowb-border);
border-radius: 4px;
font-size: 0.8rem;
}
.opex-item-code {
font-size: 0.7rem;
margin-right: 4px;
}
.opex-unit-label {
font-size: 0.78rem;
color: var(--rowb-muted);
}
.opex-run-meta-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Checklist items */
.opex-checklist-item {
border-bottom: 1px solid var(--rowb-border);
padding: 8px 0;
}
.opex-cl-item-row {
display: flex;
align-items: flex-start;
gap: 10px;
}
.opex-item-number {
flex-shrink: 0;
min-width: 28px;
font-size: 0.75rem;
color: var(--rowb-muted);
padding-top: 2px;
}
.opex-cl-description {
flex: 1;
font-size: 0.88rem;
line-height: 1.45;
}
.opex-cl-buttons {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.opex-cl-btn {
padding: 3px 10px;
border-radius: 4px;
border: 1px solid var(--rowb-border);
background: transparent;
font-size: 0.78rem;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.opex-cl-btn--active.opex-cl-btn--yes { background: var(--rowb-success); color: #fff; border-color: var(--rowb-success); }
.opex-cl-btn--active.opex-cl-btn--no { background: var(--rowb-danger); color: #fff; border-color: var(--rowb-danger); }
.opex-cl-btn--active.opex-cl-btn--na { background: var(--rowb-muted); color: #fff; border-color: var(--rowb-muted); }
.opex-cl-numeric {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.opex-numeric-input {
width: 72px;
padding: 3px 8px;
border: 1px solid var(--rowb-border);
border-radius: 4px;
font-size: 0.85rem;
text-align: right;
}
.opex-numeric-input--out-of-range {
border-color: var(--rowb-danger);
background: var(--rowb-danger-bg);
color: var(--rowb-danger);
font-weight: 600;
}
.opex-numeric-unit {
font-size: 0.78rem;
color: var(--rowb-muted);
}
.opex-cl-comment {
margin-top: 4px;
padding-left: 38px;
}
.opex-cl-comment--hidden {
display: none;
}
.opex-comment-input {
width: 100%;
max-width: 480px;
padding: 3px 6px;
border: 1px solid var(--rowb-border);
border-radius: 4px;
font-size: 0.8rem;
}
/* Score badge */
.opex-score-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 600;
background: var(--rowb-surface-soft);
color: var(--rowb-text);
}
.opex-score--good { background: var(--rowb-success-bg); color: var(--rowb-success); }
.opex-score--warn { background: var(--rowb-warning-bg); color: var(--rowb-warning); }
.opex-score--fail { background: var(--rowb-danger-bg); color: var(--rowb-danger); }
/* Shared modal shell. Every `.modal-overlay` in html/ (OpEx count run detail,
IR written warning, checklist run detail) used to have NO styling at all --
only `.opex-history-modal` below carried position:fixed -- so an unstyled
overlay rendered as a plain block at the very bottom of the page instead of
as a pop-up. */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 20, 28, 0.72);
padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
display: flex;
flex-direction: column;
width: min(640px, 100%);
max-height: min(88vh, 900px);
overflow: hidden;
background: var(--rowb-surface, #fff);
color: var(--rowb-text, #17212b);
border: 1px solid var(--rowb-border, #d7dee5);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}
.modal-box--wide { width: min(900px, 100%); }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--rowb-border, #d7dee5);
}
.modal-title { margin: 0; font-size: 1.1rem; }
.modal-close {
flex: 0 0 auto;
padding: 0 8px;
border: 0;
background: none;
color: inherit;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.modal-body {
overflow-y: auto;
padding: 24px;
}
.modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 14px 24px;
border-top: 1px solid var(--rowb-border, #d7dee5);
}
.modal-footer__status { margin-right: auto; }
.opex-history-actions {
display: flex;
gap: 6px;
white-space: nowrap;
}
/* A capture section hosted inside the modal (Edit) already sits on the modal's
own surface -- drop the standalone card chrome so it does not read as a card
inside a card. */
.modal-body > .workspace-section.card {
margin: 0;
border: 0;
box-shadow: none;
background: transparent;
padding: 0;
}
@media (max-width: 640px) {
.modal-overlay { padding: 10px; }
.modal-body { padding: 16px; }
.modal-footer { padding: 12px 16px; }
}
/* View modal responses */
.opex-history-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(12, 20, 28, 0.72);
padding: 24px;
}
.opex-history-modal[hidden] { display: none; }
.opex-history-modal__box {
display: flex;
flex-direction: column;
width: min(900px, 100%);
max-height: min(88vh, 900px);
overflow: hidden;
background: var(--rowb-surface, #fff);
color: var(--rowb-text, #17212b);
border: 1px solid var(--rowb-border, #d7dee5);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}
.opex-history-modal__box .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--rowb-border, #d7dee5);
}
.opex-history-modal__box .modal-title { margin: 0; font-size: 1.1rem; }
.opex-history-modal__box .modal-close { flex: 0 0 auto; }
.opex-history-modal__box .modal-body {
overflow-y: auto;
max-height: calc(min(88vh, 900px) - 76px);
padding: 24px;
}
.opex-history-detail__heading {
padding-bottom: 18px;
border-bottom: 1px solid var(--rowb-border, #d7dee5);
}
.opex-history-detail__heading h3 {
margin: 4px 0 6px;
font-size: 1.35rem;
}
.opex-history-detail__meta {
margin: 0;
color: var(--rowb-muted, #5d6b78);
}
.opex-history-detail__summary {
display: grid;
grid-template-columns: repeat(4, minmax(72px, 1fr));
gap: 10px;
margin: 18px 0 22px;
}
.opex-history-detail__summary div {
padding: 12px 14px;
border: 1px solid var(--rowb-border, #d7dee5);
border-radius: 6px;
background: var(--rowb-surface-soft, #f4f7f9);
}
.opex-history-detail__summary strong,
.opex-history-detail__summary span {
display: block;
}
.opex-history-detail__summary strong { font-size: 1.15rem; }
.opex-history-detail__summary span { margin-top: 2px; color: var(--rowb-muted, #5d6b78); font-size: 0.76rem; }
.opex-history-detail__notes {
margin: 0 0 20px;
padding: 12px 14px;
border-left: 3px solid var(--rowb-warning, #b36b00);
background: var(--rowb-warning-bg, #fff4db);
}
.opex-history-detail__notes p { margin: 4px 0 0; }
.opex-view-responses { margin-top: 12px; }
.opex-history-detail__section {
margin: 22px 0 8px;
padding-bottom: 6px;
border-bottom: 2px solid var(--rowb-border, #d7dee5);
color: var(--rowb-text, #17212b);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.opex-view-item {
padding: 11px 0;
border-bottom: 1px solid var(--rowb-border);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
font-size: 0.9rem;
}
.opex-view-item__text {
min-width: 0;
flex: 1 1 70%;
line-height: 1.45;
}
.opex-resp-badge {
padding: 1px 8px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
flex-shrink: 0;
}
.opex-resp--yes { background: var(--rowb-success-bg); color: var(--rowb-success); }
.opex-resp--no { background: var(--rowb-danger-bg); color: var(--rowb-danger); }
.opex-resp--na { background: var(--rowb-surface-soft); color: var(--rowb-muted); }
.opex-resp-comment { flex: 1 1 100%; margin: 0; padding-left: 12px; color: var(--rowb-muted); font-size: 0.82rem; }
@media (max-width: 640px) {
.opex-history-modal { padding: 10px; }
.opex-history-modal__box .modal-body { padding: 16px; }
.opex-history-detail__summary { gap: 6px; }
.opex-history-detail__summary div { padding: 10px 8px; }
.opex-view-item { gap: 8px; }
}
.opex-section-divider td {
background: var(--rowb-surface-soft);
padding: 4px 8px;
}
.opex-count-grid {
overflow-x: auto;
}
.opex-history-table th,
.opex-history-table td {
padding: 6px 8px;
}
/* Two-column prose on about page */
.two-col-prose {
column-count: 2;
column-gap: 32px;
font-size: 0.88rem;
line-height: 1.6;
}
/* ── OPEX Reference Library ───────────────────────────────────────────────── */
.opex-ref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.opex-ref-section-group {
grid-column: 1 / -1;
}
.opex-ref-section-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rowb-muted);
margin: 0 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--rowb-border);
}
.opex-ref-section-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.opex-ref-card {
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: box-shadow 0.15s;
}
.opex-ref-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.opex-ref-card__dept {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rowb-primary-hover);
}
.opex-ref-card__title {
font-size: 0.95rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.opex-ref-card__desc {
font-size: 0.8rem;
color: var(--rowb-muted);
line-height: 1.5;
flex: 1;
margin: 0;
}
.opex-ref-dept-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--rowb-primary-light);
color: var(--rowb-primary-hover);
border-radius: 4px;
padding: 2px 8px;
}
.opex-ref-card--link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.opex-ref-card--link:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: var(--rowb-primary);
}
.opex-ref-card__cta {
margin-top: auto;
padding-top: 10px;
font-size: 0.78rem;
font-weight: 600;
color: var(--rowb-primary-hover);
}
/* Detail pages */
.opex-ref-detail-content {
max-width: 860px;
}
.opex-ref-detail-intro {
font-size: 1rem;
line-height: 1.65;
color: var(--rowb-text-soft);
margin-bottom: 20px;
}
.opex-ref-meta-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 20px;
}
.opex-ref-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.85rem;
}
.opex-ref-meta-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rowb-muted);
}
.opex-ref-content-block {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--rowb-border);
}
.opex-ref-content-block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.opex-ref-content-block h3 {
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rowb-text);
margin: 0 0 8px;
}
.opex-ref-content-block p {
font-size: 0.88rem;
line-height: 1.65;
margin: 0;
}
.opex-ref-content-block ul {
margin: 0;
padding-left: 20px;
}
.opex-ref-content-block li {
font-size: 0.88rem;
line-height: 1.65;
margin-bottom: 4px;
}
.opex-ref-content-block--purpose {
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
border-radius: 6px;
padding: 14px 16px;
}
.back-link {
font-size: 0.82rem;
color: var(--rowb-accent);
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.two-col-prose { column-count: 1; }
.opex-cl-buttons { flex-direction: column; }
.opex-item-col { width: 55%; }
.opex-ref-section-cards { grid-template-columns: 1fr; }
.opex-ref-meta-row { flex-direction: column; }
}
/* ============================================================
Restaurant Performance KPI gauges (Admin / Manager Operations
dashboards) — circular "knob and dial" widgets driven by a
--gauge-pct (0-100) and --gauge-color custom property per card.
============================================================ */
.kpi-gauge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-6);
}
.kpi-gauge-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-2);
padding: var(--sp-4);
border-radius: var(--rowb-radius-lg);
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
}
.kpi-gauge {
position: relative;
width: 128px;
height: 128px;
border-radius: 50%;
background: conic-gradient(var(--gauge-color, var(--rowb-primary)) calc(var(--gauge-pct, 0) * 1%), var(--rowb-border) 0);
}
.kpi-gauge::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: var(--rowb-surface);
box-shadow: var(--rowb-shadow-xs);
}
.kpi-gauge__needle {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 44px;
background: var(--rowb-text);
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(calc(var(--gauge-pct, 0) * 3.6deg));
border-radius: 2px;
z-index: 2;
}
.kpi-gauge__hub {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: var(--rowb-text);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.kpi-gauge-card__title {
font-size: 0.78rem;
font-weight: 600;
color: var(--rowb-text-soft);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.kpi-gauge-card__value {
font-size: 1.3rem;
font-weight: 700;
color: var(--rowb-text);
}
.kpi-gauge-card__sub {
font-size: 0.78rem;
color: var(--rowb-muted-light);
}
.kpi-gauge-gap-note {
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--rowb-radius-md);
background: var(--rowb-warning-bg);
border: 1px solid var(--rowb-border-strong);
font-size: 0.85rem;
color: var(--rowb-text-soft);
}
.kpi-breakdown-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-6);
margin-top: var(--sp-6);
align-items: start;
}
@media (max-width: 860px) {
.kpi-breakdown-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.kpi-breakdown-section--wide {
margin-top: var(--sp-6);
}
.kpi-breakdown-table {
min-width: 0;
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
gap: var(--sp-2);
border: 1px solid var(--rowb-border);
border-radius: var(--rowb-radius-md);
background: var(--rowb-surface-soft);
padding: var(--sp-3);
}
.kpi-breakdown-table__scroller {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.kpi-breakdown-table__scroller .hr-table {
min-width: 0;
table-layout: fixed;
}
.kpi-breakdown-table__scroller .hr-table th,
.kpi-breakdown-table__scroller .hr-table td {
white-space: normal;
overflow-wrap: anywhere;
}
.kpi-breakdown-table h3 {
font-size: 0.85rem;
font-weight: 600;
margin: 0 0 var(--sp-2) 0;
}
.kpi-breakdown-note {
margin-top: var(--sp-2);
font-size: 0.8rem;
}
/* Void/Discount Breakdown fraud follow-up detail (2026-08-24) -- expandable
per-reason transaction list (date/time, Guest Check #). */
.kpi-breakdown-table__note {
margin-top: var(--sp-2);
font-size: 0.78rem;
}
.kpi-breakdown-table__toggle {
background: none;
border: none;
padding: 0;
margin-right: 0.35em;
cursor: pointer;
font-size: 0.85em;
color: var(--color-primary, #2563eb);
}
.kpi-breakdown-table__toggle:hover {
text-decoration: underline;
}
.kpi-breakdown-table__detail {
margin: var(--sp-2) 0;
font-size: 0.85em;
}
.kpi-breakdown-table__detail th,
.kpi-breakdown-table__detail td {
padding: 0.3em 0.6em;
}
.kpi-breakdown-table__toolbar {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.kpi-breakdown-table__toolbar label {
font-size: 0.8rem;
font-weight: 600;
color: var(--rowb-text-soft);
}
.channel-other-toggle {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--rowb-accent);
text-decoration: underline;
cursor: pointer;
}
.kpi-breakdown-other-detail {
margin-top: var(--sp-2);
}
.kpi-breakdown-other-detail[hidden] {
display: none;
}
/* Nav rail is a fixed width at every breakpoint (see "App Rail Navigation"
section below), so unlike the old sidebar there is no separate
mobile/touch rail mode to maintain here -- just a narrower shell gutter
on small screens. */
@media (max-width: 640px) {
body:not(.login-page) .console-shell {
width: calc(100% - 10px) !important;
gap: 8px !important;
}
}
/* ---- Weekly Sales workspace ---- */
.weekly-sales-month-header td {
background: #f0f4f8;
color: #1a3a5c;
font-weight: 700;
font-size: 0.82em;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 12px;
border-top: 2px solid var(--rowb-border-strong);
}
.weekly-sales-month-total td {
background: #f7f9fc;
border-top: 1px solid var(--rowb-border-strong);
border-bottom: 2px solid var(--rowb-border-strong);
}
.weekly-sales-current-week td {
background: #fffbe6;
}
.text-right {
text-align: right !important;
}
/* ==========================================================================
ROWB Design System v3 — Infinivate skin (authoritative)
Everything below wins the cascade. Structural/behavioral rules are carried
above this block; this block owns the look: dark navy gradient hero, teal
accent, tinted brand shadows, sentence-case dense tables, token-mapped
status colors, hover lifts reserved for clickable tiles.
========================================================================== */
/* ── Base ────────────────────────────────────────────────────────── */
body {
font-family: var(--rowb-font);
color: var(--rowb-text);
-webkit-font-smoothing: antialiased;
}
body:not(.login-page) {
background:
radial-gradient(1200px 500px at 85% -10%, rgba(34, 26, 21, 0.05), transparent 60%),
linear-gradient(180deg, #fbfdff 0%, var(--rowb-bg) 240px) !important;
}
h1, h2, h3, h4 {
letter-spacing: -0.02em;
text-wrap: balance;
}
a { color: var(--rowb-accent); }
a:hover { color: var(--rowb-accent-hover); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 1.5px solid rgba(34, 26, 21, 0.55);
outline-offset: 1px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Console hero — dark navy gradient card (signature) ─────────── */
body:not(.login-page) .console-hero {
position: relative;
background:
var(--rowb-hero-gradient),
var(--ors-hero-image) center / cover no-repeat,
var(--rowb-text) !important;
border: 0 !important;
border-top: 3px solid var(--ws-accent) !important;
border-radius: var(--rowb-radius-xl) !important;
box-shadow: var(--rowb-shadow-md) !important;
overflow: hidden !important;
padding-top: 26px !important;
padding-right: 32px !important;
padding-bottom: 26px !important;
color: rgba(255, 255, 255, 0.85);
}
body:not(.login-page) .console-hero::before,
body:not(.login-page) .console-hero::after {
display: none !important;
}
body:not(.login-page) .console-hero__badge {
display: inline-block !important;
width: auto !important;
min-height: 0 !important;
margin: 0 0 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--rowb-hero-eyebrow) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
body:not(.login-page) .console-hero__title,
body:not(.login-page) .console-hero h1 {
color: #ffffff !important;
font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem) !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.08 !important;
margin: 0 !important;
}
body:not(.login-page) .console-hero__subtitle,
body:not(.login-page) .console-hero p {
color: rgba(255, 255, 255, 0.8) !important;
max-width: 580px;
line-height: 1.7;
}
body:not(.login-page) .console-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px !important;
}
body:not(.login-page) .console-hero__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: var(--rowb-radius-md) !important;
background: rgba(255, 255, 255, 0.1) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.78) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
}
body:not(.login-page) .console-hero__meta span strong,
body:not(.login-page) .console-hero__meta .status-chip {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
}
/* ── Topbar polish ───────────────────────────────────────────────── */
.rowb-topbar {
position: sticky;
top: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
height: var(--rowb-topbar-h);
padding: 0 32px !important;
background: rgba(255, 255, 255, 0.78) !important;
backdrop-filter: blur(22px) saturate(1.2);
border-bottom: 1px solid var(--rowb-border) !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.rowb-topbar__page {
color: var(--rowb-text) !important;
font-weight: 600 !important;
}
/* ── Sidebar active-state clarity ────────────────────────────────── */
.app-sidebar {
position: sticky !important;
top: 72px !important;
height: calc(100dvh - var(--rowb-topbar-h) - var(--sp-8));
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--sp-3);
width: var(--rowb-rail-w);
box-sizing: border-box;
padding: 10px !important;
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-xl) !important;
box-shadow: var(--rowb-shadow-sm) !important;
}
/* ── Buttons — tinted brand shadow (signature) ───────────────────── */
.btn,
button.btn,
a.btn {
min-height: 36px;
padding: 7px 16px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
border-radius: var(--rowb-radius-md) !important;
border-width: 1.5px !important;
border-style: solid;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background var(--rowb-ease), border-color var(--rowb-ease), box-shadow var(--rowb-ease), color var(--rowb-ease);
}
.btn-primary,
form button[type="submit"]:not(.btn-secondary):not(.btn-danger) {
/* Gold is too light for white text (see the design-system comment at the
top of this file) -- dark ink text instead, matching css/public.css's
own .btn-primary treatment. */
background: var(--rowb-primary) !important;
border-color: var(--rowb-primary) !important;
color: var(--public-ink) !important;
box-shadow: var(--rowb-shadow-brand) !important;
}
.btn-primary:hover,
form button[type="submit"]:not(.btn-secondary):not(.btn-danger):hover {
background: var(--rowb-primary-hover) !important;
border-color: var(--rowb-primary-hover) !important;
color: var(--public-ink) !important;
box-shadow: var(--rowb-shadow-brand-hover) !important;
transform: translateY(-1px);
}
.btn-secondary {
font-weight: 600;
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
border: 1.5px solid var(--rowb-glass-border) !important;
color: var(--rowb-text) !important;
box-shadow: none !important;
}
.btn-secondary:hover {
background: var(--rowb-glass-hover) !important;
border-color: var(--rowb-primary) !important;
color: var(--rowb-accent) !important;
}
.btn-danger {
background: var(--rowb-danger-bg) !important;
border: 1.5px solid var(--rowb-danger-border) !important;
color: var(--rowb-danger) !important;
}
.btn-ghost {
background: transparent !important;
border-color: transparent !important;
color: var(--rowb-text-soft) !important;
}
.btn-ghost:hover {
background: var(--rowb-glass-hover) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
}
.btn-small,
.btn.btn-small {
min-height: 28px !important;
padding: 4px 10px !important;
font-size: 0.72rem !important;
}
.btn-xs { min-height: 22px !important; font-size: 0.68rem !important; }
.btn:disabled,
button:disabled {
opacity: 0.5;
box-shadow: none !important;
cursor: not-allowed;
}
/* ── Forms ───────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
width: 100%;
margin-top: 6px;
font: inherit;
min-height: 42px !important;
padding: 6px 10px !important;
border: 1px solid var(--rowb-border-strong) !important;
border-radius: var(--rowb-radius-sm) !important;
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
color: var(--rowb-text) !important;
font-size: 0.82rem !important;
font-family: var(--rowb-font) !important;
transition: border-color var(--rowb-ease), box-shadow var(--rowb-ease), background var(--rowb-ease) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
outline: none !important;
background: #ffffff !important;
border-color: var(--rowb-primary) !important;
box-shadow: 0 0 0 3px rgba(34, 26, 21, 0.1) !important;
}
label {
color: var(--rowb-text-soft);
}
/* ── Cards & sections — lifts only on clickable tiles ────────────── */
.card,
.console-frame,
.dashboard-section,
.workspace-section,
.dashboard-header,
.workspace-header {
width: 100%;
min-height: 0;
}
.dashboard-section:hover,
.workspace-section:hover {
background: var(--rowb-glass-hover) !important;
box-shadow: var(--rowb-shadow-xs), var(--rowb-shadow-glow) !important;
transform: none !important;
transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease, background 220ms ease;
}
.eyebrow,
.dashboard-group-heading {
margin: var(--sp-5) 0 var(--sp-2);
padding-left: 2px;
color: var(--rowb-primary-hover) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
.dashboard-section h2,
.workspace-section h2 {
position: relative;
font-size: 1.12rem !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
color: var(--rowb-text) !important;
padding-bottom: 10px !important;
margin-bottom: 8px !important;
}
/* Gold underline accent, mirroring css/public.css's .public-section h2::after */
.dashboard-section h2::after,
.workspace-section h2::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 3px;
border-radius: 999px;
background: var(--rowb-primary);
}
.section-support { color: var(--rowb-muted) !important; }
/* Interactive tiles: menu cards, ops cards, gauges, dials */
.menu-card,
.dashboard-ops-card,
.kpi-gauge-card,
.rowb-dial-card,
.rowb-knob-card {
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
transition: border-color var(--rowb-ease-lift), box-shadow var(--rowb-ease-lift), transform var(--rowb-ease-lift) !important;
}
.menu-card,
.dashboard-ops-card,
.kpi-gauge-card {
background: #ffffff !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.rowb-dial-card,
.rowb-knob-card {
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.menu-card:hover,
.dashboard-ops-card:hover,
a.dashboard-ops-card:hover,
.kpi-gauge-card:hover {
border-color: var(--rowb-primary-soft) !important;
box-shadow: var(--rowb-shadow-md) !important;
transform: translateY(-2px) !important;
}
.menu-card__summary { color: var(--rowb-muted) !important; }
/* ── Tables — sentence-case dense headers ────────────────────────── */
.table-wrapper {
padding: 10px;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
background: #ffffff !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
table thead th,
.hr-table thead th {
text-align: left;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 1;
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
color: var(--rowb-muted) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 8px 12px !important;
border-bottom: 1px solid var(--rowb-border) !important;
}
table tbody td,
.hr-table tbody td {
font-size: 0.8rem !important;
padding: 9px 12px !important;
color: var(--rowb-text-soft) !important;
border-bottom: 1px solid var(--rowb-border) !important;
}
table tbody tr:nth-child(even),
.hr-table tbody tr:nth-child(even) {
background: var(--rowb-surface-soft);
}
table tbody tr:hover,
.hr-table tbody tr:hover {
background: linear-gradient(90deg, rgba(250, 240, 220, 0.85) 0%, rgba(246, 231, 202, 0.85) 100%) !important;
}
tbody tr[data-href],
tbody tr.is-clickable,
tbody tr[data-candidate-id] {
cursor: pointer;
}
/* ── Status system — token-mapped (chips, pills, inline status) ──── */
/* This is the ONE canonical status-badge system going forward -- .status-chip
is used 200+ times across the app. The !important here isn't fighting a
legacy system; it's beating the generic `table tbody td { ... !important }`
rule just above, since chips/pills are frequently rendered inside a | .
.badge/.badge-ok/.badge-warn below is a separate, older, still-live
parallel system (2026-08-23 design-system audit) -- its colors/spacing
don't match this one 1:1 (e.g. .badge-ok resolves to a teal that doesn't
exist in this palette's .status-chip tokens), so it hasn't been merged in;
don't assume the two are interchangeable or blind-alias one to the other. */
.status-chip,
.stat-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px !important;
border-radius: 999px !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
background: var(--rowb-bg) !important;
color: var(--rowb-muted) !important;
border: 1px solid var(--rowb-border) !important;
}
/* .stat-pill-only spacing -- kept separate from .status-chip above since
.status-chip is used inline within running text/labels in many places
and doesn't want an unconditional right margin. */
.stat-pill {
margin-right: 6px;
}
.status-chip--info,
.status-chip.info {
background: var(--rowb-primary-light) !important;
color: var(--rowb-primary-hover) !important;
border-color: var(--rowb-primary-soft) !important;
}
.status-chip--green,
.status-chip.success {
background: var(--rowb-accent-soft) !important;
color: var(--rowb-accent) !important;
border-color: var(--rowb-accent-border) !important;
}
.status-chip--warn,
.status-chip--warning,
.status-chip--yellow,
.status-chip.warning {
background: var(--rowb-warning-bg) !important;
color: var(--rowb-warning) !important;
border-color: rgba(232, 93, 4, 0.35) !important;
}
.status-chip--red,
.status-chip.danger {
background: var(--rowb-danger-bg) !important;
color: var(--rowb-danger) !important;
border-color: var(--rowb-danger-border) !important;
}
.dashboard-freshness-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sx-inline-status {
color: var(--rowb-muted);
font-size: 0.84rem;
}
/* 2026-08-24: this was overriding the success bar's text color to
--rowb-accent (steel blue, #3f88c5) instead of --rowb-success (teal-green,
#0f766e) -- the earlier, correct .sx-inline-status.is-success rule already
sets the green color/border/background, but this later !important rule in
the "canonical status system" pass (2026-08-23) always won the cascade.
Every "saved" confirmation bar across the app (Waiter/Retail Cashup, Day
Start/End, Handover, Payouts, etc. -- all driven by setCashupStatus()) was
rendering with blue text on a pale-green background instead of the
intended all-green treatment. Found while carrying that bar forward to
other Operations tabs -- fixing the shared rule here is what actually
makes it "the green line" everywhere it already fires. */
.sx-inline-status.is-success { color: var(--rowb-success) !important; }
.sx-inline-status.is-warning { color: var(--rowb-warning) !important; }
.sx-inline-status.is-error,
.sx-inline-status.is-danger { color: var(--rowb-danger) !important; }
.sx-inline-status--empty {
display: block;
padding: var(--sp-6);
border: 1px dashed var(--rowb-border-strong);
border-radius: var(--rowb-radius-md);
text-align: center;
}
.user-pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-size: 0.72rem;
font-weight: 600 !important;
border-radius: 999px !important;
background: var(--rowb-primary-light) !important;
border: 1px solid var(--rowb-primary-soft) !important;
color: var(--rowb-primary-hover) !important;
}
/* ── Dashboard metrics — stat-number hierarchy ───────────────────── */
.dashboard-metric-chip {
background: #ffffff !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: var(--rowb-shadow-xs) !important;
}
.dashboard-metric-chip strong {
font-size: 1.3rem !important;
font-weight: 800 !important;
color: var(--rowb-primary-hover) !important;
line-height: 1.1 !important;
}
.dashboard-metric-chip span { font-size: 0.72rem !important; color: var(--rowb-muted) !important; }
.dashboard-metric-chip--highlight {
background: var(--rowb-primary-light) !important;
border-color: rgba(34, 26, 21, 0.24) !important;
}
.dashboard-metric-chip--warn {
background: var(--rowb-warning-bg) !important;
border-color: rgba(232, 93, 4, 0.35) !important;
}
.dashboard-metric-chip--warn strong { color: var(--rowb-warning) !important; }
.dashboard-metric-chip--discount {
background: var(--rowb-danger-bg) !important;
border-color: var(--rowb-danger-border) !important;
}
.dashboard-metric-chip--discount strong { color: var(--rowb-danger) !important; }
.dashboard-ops-card__count {
font-weight: 800 !important;
color: var(--rowb-primary-hover) !important;
}
.rowb-dial-card__value,
.kpi-gauge-card__value {
font-weight: 800 !important;
color: var(--rowb-text) !important;
}
.rowb-insight-list__item--good { color: var(--rowb-accent) !important; }
.rowb-insight-list__item--critical { color: var(--rowb-danger) !important; }
/* ── Accordions (invoice-date-group / dashboard-table-group) ─────── */
.invoice-date-group,
.dashboard-table-group {
background: #ffffff !important;
border: 1px solid var(--rowb-border) !important;
border-radius: var(--rowb-radius-lg) !important;
box-shadow: none !important;
}
.invoice-date-group__summary,
.dashboard-table-group > summary {
transition: background var(--rowb-ease);
border-radius: var(--rowb-radius-lg);
}
.invoice-date-group__summary:hover,
.dashboard-table-group > summary:hover {
background: var(--rowb-surface-hover) !important;
}
.invoice-date-group__body--nested {
background: var(--rowb-bg) !important;
}
/* ── Footer ──────────────────────────────────────────────────────── */
.app-footer {
color: rgba(250, 246, 240, 0.8) !important;
font-size: 0.75rem !important;
background: linear-gradient(180deg, var(--rowb-primary-dark) 0%, var(--public-ink-soft) 100%) !important;
border: 0 !important;
border-top: 1px solid rgba(168, 148, 120, 0.2) !important;
box-shadow: none !important;
}
.app-footer__inner { color: rgba(250, 246, 240, 0.8) !important; font-size: 0.75rem; }
.app-footer a { color: rgba(250, 246, 240, 0.8) !important; }
.app-footer a:hover { color: #ffffff !important; }
/* ── Per-workspace accents (scoped to hero border + sidebar) ─────── */
body.theme-hr { --ws-accent: #0f766e; --ws-accent-soft: #ccfbf1; }
body.theme-roster { --ws-accent: #7c3aed; --ws-accent-soft: #ede9fe; }
body.theme-suppliers { --ws-accent: #b45309; --ws-accent-soft: #fef3c7; }
/* Neutralize legacy theme-* component colouring outside the sanctioned scope */
body[class*="theme-"] .status-chip:not([class*="--"]):not(.danger) {
background: var(--rowb-bg) !important;
color: var(--rowb-muted) !important;
border-color: var(--rowb-border) !important;
}
body[class*="theme-"] .menu-card {
border-top: 1px solid var(--rowb-border) !important;
}
/* ── Login-family pages — gradient scrim + dark hero card ─────────
Applies to every body.login-page surface: the entry login, password
reset/change, and the public candidate interview-response page. */
body.login-page {
background:
var(--rowb-hero-gradient),
var(--ors-hero-image),
var(--rowb-text) !important;
background-size: auto, cover, auto !important;
background-position: center, center, center !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-attachment: scroll, fixed, scroll !important;
}
body.login-page .console-hero {
background:
var(--rowb-hero-gradient),
var(--ors-hero-image) center / cover no-repeat,
var(--rowb-text) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: var(--rowb-radius-xl) !important;
box-shadow: var(--rowb-shadow-lg) !important;
overflow: hidden !important;
}
body.login-page .console-hero__badge {
display: inline-block !important;
width: auto !important;
min-height: 0 !important;
margin: 26px 38px 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
color: var(--rowb-hero-eyebrow) !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
body.login-page .console-hero__title {
color: #ffffff !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
padding-top: 8px !important;
}
body.login-page .console-hero__subtitle,
body.login-page .console-hero p {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Non-entry login pages (reset/change password, interview response):
contain the hero to the same centered column as their content card. */
body.login-page:not(.login-page--entry) .console-hero {
width: min(calc(100% - 32px), 640px) !important;
margin: 42px auto 0 !important;
padding: 0 38px 26px !important;
}
body.login-page:not(.login-page--entry) .console-hero__badge {
margin-left: 0 !important;
}
body.login-page:not(.login-page--entry) .console-shell,
body.login-page:not(.login-page--entry) .console-frame {
position: relative;
z-index: 2;
}
body.login-page .console-frame--auth {
border-radius: var(--rowb-radius-xl) !important;
box-shadow: var(--rowb-shadow-lg) !important;
border: 1px solid var(--rowb-border) !important;
}
/* ── Responsive hero adjustments ─────────────────────────────────── */
@media (max-width: 900px) {
body:not(.login-page) .console-hero {
padding-left: 24px !important;
}
body:not(.login-page) .console-hero__meta span {
font-size: 0.64rem !important;
padding: 4px 9px !important;
}
}
/* Buttons: defeat the legacy pill radius on high-specificity selectors
(form button[type=submit] outranks a bare .btn among !important rules) */
form button[type="submit"],
.form-actions .btn,
.form-actions button,
body.login-page .form-actions .btn {
border-radius: var(--rowb-radius-md) !important;
min-height: 36px !important;
padding: 7px 16px !important;
}
/* Upload dropzones: warm dashed legacy → token colors */
.rowb-file-dropzone {
border: 1px dashed var(--rowb-border-strong) !important;
background: var(--rowb-bg) !important;
border-radius: var(--rowb-radius-md) !important;
}
.rowb-file-dropzone:hover,
.rowb-file-dropzone:focus-within,
.rowb-file-dropzone.is-dragover {
border-color: var(--rowb-primary) !important;
background: var(--rowb-primary-light) !important;
}
/* Hide the user pill until JS fills it (avoids an empty blue blob) */
.user-pill:empty {
display: none !important;
}
/* Hero meta inner values: no leftover pill chrome on themed pages */
body:not(.login-page) .console-hero__meta span strong,
body:not(.login-page) .console-hero__meta .status-chip {
border-radius: 0 !important;
box-shadow: none !important;
min-height: 0 !important;
line-height: 1.4 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 18ch;
}
body:not(.login-page) .console-hero__meta span {
max-width: 100%;
}
/* Selected table rows: legacy warm outline → brand tokens */
.hr-table--selectable tbody tr.is-selected,
table tbody tr.is-selected {
outline: 2px solid var(--rowb-primary-hover) !important;
outline-offset: -2px !important;
background: var(--rowb-primary-light) !important;
}
/* Active/current rows (reporting week, IR employee): warm → brand */
.is-active-row,
tr.is-active-row,
table tbody tr.is-active-row {
background: var(--rowb-primary-light) !important;
box-shadow: inset 3px 0 0 var(--rowb-primary);
}
/* Matrix tables (attendance run, variance grid, time-off month): warm
sticky first-column headers → neutral tokens */
.attendance-run-matrix-table thead .attendance-run-employee,
.attendance-run-matrix-table .employee-section-divider th,
.variance-grid-table thead .variance-grid-employee,
.variance-grid-table .employee-section-divider th,
.timeoff-month-table thead .timeoff-month-employee {
background: var(--rowb-bg) !important;
color: var(--rowb-text-soft) !important;
border-color: var(--rowb-border) !important;
}
/* Stat tiles (card-muted > strong pattern shared by reviews / reporting /
roster): NHL stat-number hierarchy — bigger, heavier value on top.
Colors stay with the semantic score classes where present. */
.card-muted > strong {
display: block;
font-size: 1.35rem !important;
font-weight: 800 !important;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* Dial gauge inner face + roster week separators: warm → neutral */
.rowb-dial-card__gauge::before {
background: var(--rowb-surface) !important;
}
.roster-week-block + .roster-week-block {
border-top: 1px solid var(--rowb-border) !important;
}
/* Menu-card alias badges (ENT/SYS/HR/…): warm brown → navy */
.menu-grid > .menu-card[data-alias]::after,
.menu-card[data-alias]::after {
background: var(--rowb-primary-dark) !important;
color: #ffffff !important;
box-shadow: none !important;
}
.menu-card__badge {
background: var(--rowb-primary-light) !important;
color: var(--rowb-primary-hover) !important;
border: 1px solid var(--rowb-primary-soft) !important;
box-shadow: none !important;
}
/* Grid blowout guard: long unbreakable strings (paths, URLs, emails)
in menu tiles must wrap instead of forcing their grid column wider
than the container (visible as clipped tiles on System Settings). */
.menu-grid > *,
.form-grid > *,
.dashboard-ops-grid > * {
min-width: 0;
}
.menu-card,
.menu-card__summary,
.menu-card__meta {
overflow-wrap: anywhere;
}
/* ── Redesign alignment: login-family + legal static pages (2026-07-06) ──
Login-family pages keep the full-bleed restaurant photo behind the page
(with a light scrim so the hero card and auth card carry the contrast);
the hero card keeps its darker photo scrim on top. */
body.login-page {
background:
linear-gradient(180deg, rgba(6, 10, 18, 0.5) 0%, rgba(34, 26, 21, 0.42) 100%),
var(--ors-hero-image),
var(--rowb-text) !important;
background-size: auto, cover, auto !important;
background-position: center, center, center !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
background-attachment: scroll, fixed, scroll !important;
}
/* html carries its own --rowb-bg (app shell layout rule), so the hero's
top margin collapsing through body would expose a light strip above the
photo backdrop. flow-root contains the margin. (The entry login is
already display:grid, which has the same effect — don't override it.) */
body.login-page:not(.login-page--entry) {
display: flow-root;
}
/* Footer sits on the dark photo backdrop (entry login additionally paints
a dark rounded bar) — the flat-chrome grey text tokens are unreadable
there, so use light text within the login family only. */
body.login-page .app-footer,
body.login-page .app-footer__inner {
color: rgba(255, 255, 255, 0.88) !important;
}
body.login-page .app-footer__links a {
color: rgba(255, 255, 255, 0.82) !important;
border-right-color: rgba(255, 255, 255, 0.28);
}
body.login-page .app-footer__links a:hover {
color: #ffffff !important;
}
body.login-page .app-footer__copy {
color: rgba(255, 255, 255, 0.68) !important;
}
/* ── Mobile conformance (2026-07-06, patterns borrowed from NHL_HOME) ──
1. The hero is a 1fr/auto grid with the meta chips right-aligned in the
second column; on phones the columns can't coexist and the chips get
clipped by the hero's overflow:hidden. Stack the hero to one column
and let the chips wrap under the title. */
@media (max-width: 700px) {
body:not(.login-page) .console-hero {
grid-template-columns: minmax(0, 1fr) !important;
padding-right: 20px !important;
}
body:not(.login-page) .console-hero__meta {
grid-column: 1 !important;
justify-content: flex-start !important;
align-self: auto !important;
padding: 0 20px 4px !important;
margin-top: 12px !important;
}
}
/* 2. Touch targets: NHL_HOME holds interactive elements at a 44px minimum
on small screens; ROWB compacted buttons to 34px there. Restore the
44px floor for buttons, form fields, and footer links on phones. */
@media (max-width: 640px) {
.btn,
form button[type="submit"] {
min-height: 44px !important;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
.console-form input {
min-height: 44px;
}
.app-footer__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
/* 3. Operating Scope panel inside the 86px phone rail: the full-size
chip/selects/button clip against the sidebar's overflow:hidden.
Stack and shrink the controls to the rail width — tiny selects are
fine on touch because tapping opens the OS picker full-screen. */
@media (max-width: 640px) {
body:not(.login-page) .app-scope-panel {
padding: 8px 6px !important;
gap: 8px;
}
body:not(.login-page) .app-scope-panel__header,
body:not(.login-page) .app-scope-panel__actions {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
body:not(.login-page) .app-scope-panel__label {
font-size: 0.56rem;
letter-spacing: 0.04em;
}
body:not(.login-page) .app-scope-panel__group {
display: block;
max-width: 100%;
padding: 3px 6px;
font-size: 0.62rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.login-page) .app-scope-panel__field span,
body:not(.login-page) .app-scope-panel__status {
font-size: 0.6rem;
}
body:not(.login-page) .app-scope-panel select,
body:not(.login-page) .app-scope-panel .btn {
width: 100% !important;
min-width: 0 !important;
padding-left: 4px !important;
padding-right: 4px !important;
font-size: 0.62rem !important;
}
}
/* ── UI cleanup pass 1 (2026-07-06) ──────────────────────────────── */
/* Themed pages (theme-hr / theme-roster / theme-suppliers): the legacy
status-chip neutralization repaints hero meta chip values with a light
--rowb-bg box, which reads as selected/highlighted text on the dark
hero. Hero chips carry their own translucent pill — keep the inner
value transparent. */
body[class*="theme-"] .console-hero .console-hero__meta span strong,
body[class*="theme-"] .console-hero .console-hero__meta .status-chip:not(.danger):not([class*="--"]) {
background: transparent !important;
border: 0 !important;
color: #ffffff !important;
}
/* Footer brand logo is a PNG with a baked-in white box; blend it into
the light app footer. Login-family footers are dark — there the white
box reads as a badge, so leave them untouched. */
body:not(.login-page) .app-footer__logo {
mix-blend-mode: multiply;
}
/* ── UI cleanup pass 3 (2026-07-06) ──────────────────────────────── */
/* Menu cards with an alias badge (HR/SYS/ENT…): the badge is absolutely
positioned in the top-right corner and mid-width cards run the title
underneath it. Reserve the corner. */
.menu-grid > .menu-card[data-alias],
.menu-card[data-alias] {
padding-right: 56px !important;
}
/* Legal static pages have no sidebar, but the rowb shell grid forces the
sidebar + content columns with !important, squeezing all content into
the ~300px sidebar track. Restore the single centered column. */
body.legal-static-page .console-shell {
display: block !important;
grid-template-columns: none !important;
width: min(1120px, calc(100% - 40px)) !important;
}
/* ==========================================================================
ROWB Design System v4 — component review layer (2026-07-11)
Findings from a rendered-screenshot audit of all role dashboards and
workspaces. Everything below wins the cascade over v3.
========================================================================== */
/* ── Stage tabs (ui_layers.js .tabs/.tab) — real active state ─────
The legacy tab was a white box whose active state was a near-invisible
grey fill. Modern underline tabs: quiet at rest, accent-underlined and
brand-coloured when active. Also covers the dashboard To Do/Metrics
group and the invoice drawer tabs. */
.tabs {
gap: 2px;
padding-bottom: 0;
border-bottom: 1px solid var(--rowb-border);
}
.tab {
border: 0;
background: transparent;
color: var(--rowb-text-soft);
font-family: var(--rowb-font);
font-size: 0.8rem;
font-weight: 600;
padding: 9px 14px;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
border-radius: var(--rowb-radius-sm) var(--rowb-radius-sm) 0 0;
cursor: pointer;
transition: color var(--rowb-ease), background var(--rowb-ease), border-color var(--rowb-ease);
}
.tab:hover {
background: var(--rowb-surface-hover);
color: var(--rowb-text);
}
.tab.active {
background: transparent;
color: var(--rowb-primary-hover);
border-bottom-color: var(--ws-accent);
}
.tab-content.active {
padding-top: 14px;
}
/* ── Empty states — stop dressing them as disabled inputs ─────────
Table wrappers and card grids waiting for data held a bare left-aligned
paragraph in an input-like box. Read as a quiet empty state instead:
dashed container, centered muted text, breathing room. */
.muted {
color: var(--rowb-muted);
}
.table-wrapper > p.muted:only-child,
.menu-grid > p.muted:only-child {
margin: 0;
padding: 16px 18px;
text-align: center;
font-size: 0.8rem;
color: var(--rowb-muted);
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
}
.table-wrapper:not(:has(table)) {
border-style: dashed !important;
background: var(--rowb-surface-soft) !important;
box-shadow: none !important;
}
/* JS-injected table headings (e.g. "Banking Totals") sat flush against
the wrapper edge. */
.table-wrapper > h3 {
margin: 0;
padding: 10px 12px 8px;
font-size: 0.78rem;
color: var(--rowb-text-soft);
}
/* ── Form action rows — breathing room before follow-on content ──── */
.form-actions {
align-items: center;
gap: 10px;
margin-top: 2px;
}
.form-actions ~ .menu-grid,
.form-actions ~ .table-wrapper,
form ~ .menu-grid,
form ~ .table-wrapper {
margin-top: 12px;
}
/* An "Actions" form-grid cell stretched its button into a giant
full-column CTA (Reporting refresh). Buttons in grid cells keep
natural width. */
.form-field--actions .btn,
.form-grid .form-field--actions button {
width: auto;
align-self: flex-start;
justify-self: start;
}
/* ── Focus visibility — stronger, token-consistent ring ──────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--rowb-primary-hover) !important;
outline-offset: 2px;
border-radius: var(--rowb-radius-sm);
}
/* ── Buttons — tactile press state ───────────────────────────────── */
.btn:active:not(:disabled),
button:active:not(:disabled) {
transform: translateY(1px);
}
/* ── Hero notice strip — glass treatment matching the meta chips ───
The white banner bar inside the dark hero read as a foreign element. */
body:not(.login-page) .console-hero .rowb-banner-status {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: var(--rowb-radius-md) !important;
color: rgba(255, 255, 255, 0.92) !important;
padding: 10px 14px !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-weight: 500 !important;
font-size: 0.8rem !important;
}
/* ── v4.1 — data-state component fixes (gallery-audited) ─────────── */
/* Accordions: the disclosure marker was a near-invisible default dot.
Custom chevron that rotates open, heavier summary, hover affordance. */
.dashboard-table-group > summary,
.invoice-date-group__summary {
list-style: none;
position: relative;
padding: 12px 14px 12px 34px !important;
font-weight: 600;
font-size: 0.84rem;
color: var(--rowb-text);
cursor: pointer;
}
/* Font-size parity with the accordion header above: "Key Numbers"
(.dashboard-detail-panel, js/dashboard_tiles.js) and the " Hourly
Demand and Staffing Pattern" panel (a bare details.table-wrapper,
js/dashboard_tiles.js) never had their own font-size rule at all, so they
inherited whatever the ancestor container's font-size happened to be --
harmless while that was the normal body size, but it ballooned to ~2rem
while the .dashboard-container stray-selector bug was in place (see the
.dashboard-header h1 / .workspace-header h1 rule above) and still
wouldn't match .dashboard-table-group's 0.84rem sibling headers now that
that bug is fixed. Targets the wrapper specifically so it
doesn't also resize the "Open full numeric breakdown" sub-label span,
which already has its own 0.8rem rule (.dashboard-detail-panel summary
span above). Deliberately a separate rule rather than joining the
selector list above -- that rule also sets padding/position for a
chevron pseudo-element these two panels don't have. */
.dashboard-detail-panel > summary strong,
details.table-wrapper > summary strong {
font-weight: 600;
font-size: 0.84rem;
color: var(--rowb-text);
}
.dashboard-table-group > summary::-webkit-details-marker,
.invoice-date-group__summary::-webkit-details-marker {
display: none;
}
.dashboard-table-group > summary::before,
.invoice-date-group__summary::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 7px;
height: 7px;
border-right: 2px solid var(--rowb-muted);
border-bottom: 2px solid var(--rowb-muted);
transform: translateY(-60%) rotate(-45deg);
transition: transform var(--rowb-ease);
}
details[open] > summary::before {
transform: translateY(-70%) rotate(45deg) !important;
}
/* Destructive button needed a committed hover state. */
.btn-danger:hover:not(:disabled) {
background: var(--rowb-danger) !important;
border-color: var(--rowb-danger) !important;
color: #ffffff !important;
}
/* Inline status banners: token radius (legacy square corners). */
.sx-inline-status {
border-radius: var(--rowb-radius-md);
}
/* Wide tables: thin styled scrollbar instead of the OS default bar. */
.table-wrapper {
overflow-x: auto;
}
.table-wrapper::-webkit-scrollbar { height: 6px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--rowb-border-strong); border-radius: 9px; }
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
/* In-page anchor jumps (System Settings section nav, workspace section
links) landed underneath the sticky topbar. */
body.rowb-workspace [id],
body.rowb-dashboard [id] {
scroll-margin-top: calc(var(--rowb-topbar-h) + 20px);
}
/* Phones: stage tabs wrapped into ragged rows. Keep one scrollable row
with momentum scrolling; the underline stays attached. */
@media (max-width: 640px) {
.tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: 0 0 auto; }
}
/* ── v4.2 — page-audit fixes (2026-07-11, round 3) ───────────────── */
/* Section-heading toolbars (Time Off month controls): the plane-layout
layer's `.section-heading > div { display: grid }` (aimed at the
eyebrow+title block) also catches this toolbar and stacks every
control full-width. Re-assert an inline toolbar on its own row. */
.section-heading > .section-actions,
.section-heading .section-actions {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
align-items: flex-end;
gap: 8px;
}
.section-actions label {
flex: 0 1 auto;
width: auto;
}
.section-actions label input,
.section-actions label select {
width: auto;
min-width: 160px;
}
.section-actions .btn {
flex: 0 0 auto;
}
/* .btn-tertiary appears in markup but was never defined — pin it to the
secondary look rather than whatever the cascade guesses. */
.btn-tertiary {
background: var(--rowb-glass-bg) !important;
backdrop-filter: blur(var(--rowb-glass-blur)) !important;
-webkit-backdrop-filter: blur(var(--rowb-glass-blur)) !important;
border: 1.5px solid var(--rowb-glass-border) !important;
color: var(--rowb-text) !important;
box-shadow: none !important;
}
.btn-tertiary:hover {
background: var(--rowb-glass-hover) !important;
border-color: var(--rowb-primary) !important;
color: var(--rowb-accent) !important;
}
/* Legal/static document pages: restore document rhythm killed by the
global p{margin:0} reset. */
body.legal-static-page .console-frame p {
margin: 0 0 10px;
}
body.legal-static-page .console-frame h2,
body.legal-static-page .console-frame h3,
body.legal-static-page .console-frame h4 {
margin: 22px 0 8px;
}
body.legal-static-page .console-frame ul,
body.legal-static-page .console-frame ol {
margin: 0 0 12px;
}
/* Long tables: cap the wrapper so it scrolls internally — this is what
finally lets the sticky thead earn its keep (stuck to the wrapper,
not lost under the topbar during page scroll). Short tables are
unaffected. */
.table-wrapper {
max-height: min(72vh, 720px);
overflow-y: auto;
}
/* ── v4.3 — populated-dashboard fixes (2026-07-11, round 4) ──────── */
/* KPI gauges: the full-circle design mapped 100% to a whole turn, so a
96% needle sat at 12 o'clock — visually identical to 4%. Convert to a
270° speedometer: fill and needle sweep -135°..+135°, bottom notch
open, values clamped at 100. */
.kpi-gauge {
background: conic-gradient(
from -135deg,
var(--gauge-color, var(--rowb-primary)) calc(min(var(--gauge-pct, 0), 100) * 0.75%),
var(--rowb-border) 0 75%,
transparent 75%
);
}
.kpi-gauge__needle {
transform: translate(-50%, -100%) rotate(calc(min(var(--gauge-pct, 0), 100) * 2.7deg - 135deg));
}
/* KPI breakdown tables: table-layout:fixed + overflow-wrap:anywhere
split currency values mid-number ("R 52,180.4 / 0"). Numbers never
break; numeric columns read right-aligned; the scroller absorbs any
overflow. First column (names) keeps wrapping. */
.kpi-breakdown-table__scroller .hr-table {
table-layout: auto;
}
.kpi-breakdown-table__scroller .hr-table th:not(:first-child),
.kpi-breakdown-table__scroller .hr-table td:not(:first-child) {
white-space: nowrap;
overflow-wrap: normal;
text-align: right;
}
/* Buttons dropped directly into a form-grid (Reviews feed "Search")
floated mid-cell; align them with the bottoms of sibling fields. */
.form-grid > .btn,
.form-grid > button {
align-self: end;
justify-self: start;
}
/* ...and the name column must not get starved by those nowrap numeric
columns: floor its width and wrap at word boundaries only (the
inherited overflow-wrap:anywhere was breaking letter-by-letter). */
.kpi-breakdown-table__scroller .hr-table th:first-child,
.kpi-breakdown-table__scroller .hr-table td:first-child {
min-width: 11ch;
overflow-wrap: normal;
word-break: normal;
}
/* Compact padding inside the narrow breakdown cards so the trailing
"% of Sales" column fits without horizontal scrolling. */
.kpi-breakdown-table__scroller .hr-table thead th,
.kpi-breakdown-table__scroller .hr-table tbody td {
padding: 8px 8px !important;
}
/* ── UX polish pass (2026-07-21) ──────────────────────────────────── */
/* HR compliance column: raw emoji (⚠️/✔️) + inline hex (#b26a00/#2e7d32)
bypassed the token system entirely — swap for the app's own inline-SVG
icon set (rowbIcon(), navigation.js) coloured with the same warning/
accent tokens used everywhere else a status needs to read at a glance. */
.compliance-warning,
.compliance-ok {
display: inline-flex;
align-items: center;
}
.compliance-warning {
color: var(--rowb-warning);
cursor: pointer;
}
.compliance-warning:hover {
opacity: 0.75;
}
.compliance-ok {
color: var(--rowb-accent);
}
/* File inputs: the native "Choose File" button was the one remaining
unstyled browser control in an otherwise fully token-driven button
system (upload forms across Payroll/Attendance/Suppliers/HR). Style
its ::file-selector-button to match .btn-outline. */
input[type="file"] {
font-family: var(--rowb-font);
font-size: 0.85rem;
color: var(--rowb-text-soft);
}
input[type="file"]::file-selector-button {
margin-right: 10px;
padding: 7px 14px;
border: 1.5px solid var(--rowb-border-strong);
border-radius: var(--rowb-radius-md);
background: var(--rowb-surface);
color: var(--rowb-text);
font-family: var(--rowb-font);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background var(--rowb-ease), border-color var(--rowb-ease), color var(--rowb-ease);
}
input[type="file"]::file-selector-button:hover {
background: var(--rowb-surface-hover);
border-color: var(--rowb-primary);
color: var(--rowb-accent);
}
/* ── Form field alignment ──────────────────────────────────────────
Consolidated, authoritative layout for every .form-grid across the
app (60+ pages: cashups, HR, payroll, system settings, invoices...).
Supersedes the two earlier conflicting .form-grid definitions above
and the legacy ORS-era plain `label { display: block }` layout,
which let a field's label-text length change how far down its input
sat -- rows never lined up when labels in the same row wrapped
differently. Fix: give every label/.form-field a fixed two-line-tall
"caption row" via CSS grid (works on bare ``
markup too -- text nodes are valid implicit grid items, no wrapper
span required), so every input/select/button in a row starts at the
same y-offset regardless of caption length. */
.form-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: var(--sp-4) var(--sp-3) !important;
align-items: start;
}
.form-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
gap: var(--sp-3) !important;
}
.form-grid > label,
.form-grid .form-field {
display: grid !important;
grid-template-rows: minmax(2.7em, auto) auto;
row-gap: 6px;
align-items: end;
min-width: 0;
}
.form-grid > label > span:first-child,
.form-grid .form-field > span:first-child {
align-self: end;
}
.form-grid .form-field--actions {
justify-content: initial;
}
/* ==========================================================================
ROWB Design System v5 — shared UX layer (2026-08-05)
Companion stylesheet for js/rowb_ux.js. Everything here is additive and
namespaced under .rowb-* so it cannot disturb the six earlier override
layers above. Sections:
A. Accessibility primitives (skip link, sr-only, focus ring)
B. Toasts
C. Modal dialog
D. Empty states and skeleton loaders
E. Topbar refinements (search combobox, profile menu)
F. Table scroll regions
G. Unsaved-changes affordance
H. Print stylesheet
========================================================================== */
/* --- A. Accessibility primitives ---------------------------------------- */
.rowb-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rowb-skip-link {
position: absolute;
top: -100px;
left: var(--sp-4);
z-index: 2000;
padding: var(--sp-3) var(--sp-5);
background: var(--rowb-primary);
color: #fff;
font: 600 14px/1.2 var(--rowb-font);
border-radius: 0 0 var(--rowb-radius-md) var(--rowb-radius-md);
box-shadow: var(--rowb-shadow-md);
text-decoration: none;
transition: top var(--rowb-ease);
}
.rowb-skip-link:focus,
.rowb-skip-link:focus-visible {
top: 0;
outline: 3px solid var(--rowb-hero-eyebrow);
outline-offset: 2px;
}
/* A visible, consistent focus ring everywhere. The earlier layers style
:focus-visible on 20 individual selectors; this is the floor for the rest. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--rowb-primary-hover);
outline-offset: 2px;
border-radius: var(--rowb-radius-sm);
}
/* --- B. Toasts ---------------------------------------------------------- */
.rowb-toast-host {
position: fixed;
right: var(--sp-5);
bottom: var(--sp-5);
z-index: 1600;
display: flex;
flex-direction: column;
gap: var(--sp-2);
width: min(400px, calc(100vw - var(--sp-8)));
pointer-events: none;
}
.rowb-toast {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: start;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: linear-gradient(180deg, rgba(255,253,249,0.98) 0%, rgba(250,246,240,0.98) 100%);
border: 1px solid rgba(34, 26, 21, 0.10);
border-left: 4px solid var(--rowb-muted);
border-radius: 12px;
box-shadow: 0 16px 32px rgba(34, 26, 21, 0.14);
color: var(--rowb-text);
font: 400 14px/1.45 var(--rowb-font);
pointer-events: auto;
animation: rowb-toast-in 180ms ease;
}
.rowb-toast.is-leaving { animation: rowb-toast-out 180ms ease forwards; }
.rowb-toast--success { border-left-color: var(--rowb-success); }
.rowb-toast--warning { border-left-color: var(--rowb-warning); }
.rowb-toast--error { border-left-color: var(--rowb-danger); }
.rowb-toast--info { border-left-color: var(--rowb-primary); }
.rowb-toast__body { min-width: 0; overflow-wrap: anywhere; }
.rowb-toast__action {
background: none;
border: 0;
padding: 0;
color: var(--rowb-accent);
font: 600 14px/1.45 var(--rowb-font);
cursor: pointer;
white-space: nowrap;
}
.rowb-toast__action:hover { text-decoration: underline; }
.rowb-toast__close {
background: none;
border: 0;
padding: 0 var(--sp-1);
color: var(--rowb-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.rowb-toast__close:hover { color: var(--rowb-text); }
@keyframes rowb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rowb-toast-out { to { opacity: 0; transform: translateY(6px); } }
/* --- C. Modal dialog ---------------------------------------------------- */
body.rowb-modal-open { overflow: hidden; }
.rowb-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1700;
display: grid;
place-items: center;
padding: var(--sp-5);
background: rgba(34, 20, 12, 0.55);
animation: rowb-fade-in 140ms ease;
}
.rowb-modal {
width: min(480px, 100%);
max-height: calc(100vh - var(--sp-10));
overflow: auto;
padding: var(--sp-6);
background: linear-gradient(180deg, rgba(255,253,249,0.99) 0%, rgba(250,246,240,0.98) 100%);
border: 1px solid rgba(34, 26, 21, 0.10);
border-radius: 16px;
box-shadow: 0 20px 48px rgba(34, 26, 21, 0.20);
animation: rowb-modal-in 160ms ease;
}
.rowb-modal--wide { width: min(760px, 100%); }
.rowb-modal__title {
margin: 0 0 var(--sp-3);
font: 700 19px/1.3 var(--rowb-font);
color: var(--rowb-text);
}
.rowb-modal__message {
margin: 0 0 var(--sp-3);
font: 400 15px/1.55 var(--rowb-font);
color: var(--rowb-text-soft);
}
.rowb-modal__message--muted { color: var(--rowb-muted); font-size: 14px; }
.rowb-modal__actions {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
margin-top: var(--sp-5);
flex-wrap: wrap;
}
@keyframes rowb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rowb-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
/* --- D. Empty states and skeletons -------------------------------------- */
.rowb-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-10) var(--sp-5);
text-align: center;
border: 1px dashed rgba(168, 148, 120, 0.6);
border-radius: 14px;
background: linear-gradient(180deg, rgba(250, 246, 240,0.95) 0%, rgba(255,255,255,0.95) 100%);
}
.rowb-empty__icon { font-size: 26px; color: var(--rowb-muted-light); line-height: 1; }
.rowb-empty__title { margin: 0; font: 600 15px/1.4 var(--rowb-font); color: var(--rowb-text); }
.rowb-empty__message {
margin: 0;
max-width: 46ch;
font: 400 14px/1.55 var(--rowb-font);
color: var(--rowb-muted);
}
.rowb-empty__action { margin-top: var(--sp-2); }
.rowb-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); }
.rowb-skeleton__row {
display: block;
height: 14px;
border-radius: var(--rowb-radius-sm);
background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
background-size: 400% 100%;
animation: rowb-shimmer 1.4s ease infinite;
}
.rowb-skeleton--table .rowb-skeleton__row { height: 38px; }
.rowb-skeleton--card .rowb-skeleton__row { height: 96px; }
.rowb-skeleton__row:nth-child(odd) { width: 100%; }
.rowb-skeleton--text .rowb-skeleton__row:last-child { width: 62%; }
@keyframes rowb-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
.rowb-skeleton__row,
.rowb-toast,
.rowb-modal,
.rowb-modal-backdrop { animation: none; }
.rowb-skeleton__row { background: #eef2f7; }
}
/* --- E. Topbar refinements ---------------------------------------------- */
.rowb-topbar__search { position: relative; }
.rowb-topbar__search-hint {
position: absolute;
right: var(--sp-3);
top: 50%;
transform: translateY(-50%);
padding: 2px 6px;
font: 500 11px/1.4 var(--rowb-font-mono);
color: var(--rowb-muted);
background: var(--rowb-surface-hover);
border: 1px solid var(--rowb-border);
border-radius: var(--rowb-radius-sm);
pointer-events: none;
}
.rowb-topbar__search-input:focus + .rowb-topbar__search-hint { opacity: 0; }
.rowb-topbar__search-result.is-active,
.rowb-topbar__search-result:hover {
background: var(--rowb-primary-light);
outline: none;
}
.rowb-topbar__search-results.is-loading::before {
content: "Searching…";
display: block;
padding: var(--sp-3) var(--sp-4);
font: 400 13px/1.4 var(--rowb-font);
color: var(--rowb-muted);
}
.rowb-topbar__profile { position: relative; }
.rowb-topbar__profile-trigger {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
background: rgba(255,255,255,0.72);
border: 1px solid rgba(232, 221, 203,0.9);
border-radius: 999px;
cursor: pointer;
color: inherit;
font: inherit;
}
.rowb-topbar__profile-trigger:hover { background: rgba(250, 246, 240,0.96); border-color: rgba(168, 148, 120,0.45); }
.rowb-topbar__profile-chevron { font-size: 10px; color: var(--rowb-muted); }
.rowb-topbar__profile-menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 1200;
min-width: 208px;
padding: var(--sp-1);
background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(250, 246, 240,0.98) 100%);
border: 1px solid rgba(232, 221, 203,0.96);
border-radius: 12px;
box-shadow: 0 16px 32px rgba(34, 26, 21, 0.12);
}
.rowb-topbar__profile-menu-head {
margin: 0;
padding: var(--sp-2) var(--sp-3);
font: 600 12px/1.3 var(--rowb-font);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--rowb-muted);
border-bottom: 1px solid var(--rowb-border);
}
.rowb-topbar__profile-menu [role="menuitem"] {
display: block;
width: 100%;
padding: var(--sp-2) var(--sp-3);
background: none;
border: 0;
border-radius: var(--rowb-radius-sm);
text-align: left;
text-decoration: none;
color: var(--rowb-text);
font: 400 14px/1.4 var(--rowb-font);
cursor: pointer;
}
.rowb-topbar__profile-menu [role="menuitem"]:hover { background: var(--rowb-surface-hover); }
.rowb-topbar__profile-signout { color: var(--rowb-danger) !important; }
.rowb-topbar__alerts-item:focus-visible { background: var(--rowb-primary-light); }
/* --- F. Table scroll regions -------------------------------------------- */
.table-wrapper[role="region"]:focus-visible {
outline: 2px solid var(--rowb-primary-hover);
outline-offset: 2px;
}
/* --- G. Unsaved-changes affordance -------------------------------------- */
form.is-dirty [type="submit"]::after {
content: " •";
color: var(--rowb-warning);
font-weight: 700;
}
/* --- H. Print stylesheet ------------------------------------------------
Cashup reports, rosters, payroll runs and invoices are printed daily. Until
now they printed with the full app chrome: nav rail, topbar, hero, footer. */
@media print {
.rowb-topbar,
.app-rail,
.app-nav-shell,
#app-shell-nav,
.console-hero,
.app-footer,
.rowb-toast-host,
.rowb-skip-link,
.rowb-modal-backdrop,
.rowb-topbar__search,
.workspace-subnav,
.btn,
button,
[role="tablist"] { display: none !important; }
/* A tab panel hidden on screen is still hidden in print; but the active one
must not be clipped by the workspace's scroll containers. */
.tab-content.active { display: block !important; }
html, body {
background: #fff !important;
color: #000 !important;
font-size: 11pt;
}
main.console-shell,
.dashboard-container,
.card,
.dashboard-section,
section {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border: 0 !important;
background: #fff !important;
max-width: none !important;
width: auto !important;
}
.table-wrapper,
[class*="table-wrapper"] {
overflow: visible !important;
max-height: none !important;
}
table { border-collapse: collapse !important; width: 100% !important; page-break-inside: auto; }
thead { display: table-header-group; } /* repeat headers across pages */
tfoot { display: table-footer-group; }
tr { page-break-inside: avoid; }
th, td {
border: 1px solid #999 !important;
padding: 4px 6px !important;
background: #fff !important;
color: #000 !important;
}
th { background: #eee !important; font-weight: 700; }
h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
/* Print the destination of any link that survives into the printout. */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
@page { margin: 14mm; }
}
/* 2026-09-04: rows in the Cashup Report sourced from the legacy MagicBox
archive (data_source='magicbox', see php/cashup.php's
cashup_fetch_magicbox_waiter_rows()/cashup_fetch_magicbox_retail_rows())
-- muted + italic so a pre-cutover period reads as clearly historical at
a glance, not just via the "Legacy Archive" status-column text. */
.cashup-legacy-row {
font-style: italic;
color: var(--rowb-muted);
}
/* 2026-09-07: whole-response "historical window" banner -- the
informational counterpart to .cashup-legacy-row above, for panels that
can't badge individual rows (either the read is a blend with no rows to
badge in the shown period, or there's no MagicBox mapping at all so the
only signal is this note). See renderHistoricalWindowBanner() in
js/daily_cashups_workspace.js. Muted/informational, not the warning-red
treatment .sx-inline-status.is-warning uses elsewhere. */
.cashup-historical-banner {
background: var(--rowb-surface-soft);
border: 1px solid var(--rowb-border);
border-radius: 6px;
color: var(--rowb-muted);
font-size: 0.9em;
padding: 0.5em 0.75em;
margin-bottom: 0.75em;
}
/* 2026-08-24 (silent-submit-failure fix): the HTML `hidden` attribute must
always win. `[hidden] { display: none !important }` is declared earlier in
this file (~line 4683), but `.form-grid { display: grid !important }`
(~line 6969) is declared LATER at equal specificity, so any element
carrying both -- notably #cashup-cash-retained-fields, which is
`class="form-grid" hidden` -- stayed visible despite being marked hidden.
Re-declaring the rule last restores the intended precedence for every
`[hidden]` element app-wide. Related to, but independent of, the
cash_retained_amount constraint-validation bug fixed in
js/daily_cashups_workspace.js -- that one silently blocked Retail Cashup
submission entirely; this one merely made a collapsed section render. */
[hidden] {
display: none !important;
}
|