/* ============================================================================
ABMS design tokens — navy / royal-blue / indigo identity (Stage A)
Introduced 2026-07-11. Replaces the previous teal scheme. Component styling
below is routed through these variables. Layout tokens (width/height) are
defined here but NOT yet applied to layout (that is Stage B).
============================================================================ */
:root {
--brand-primary: #1769c2;
--brand-primary-hover: #1258a5;
--brand-primary-active: #0f4b8e;
--brand-primary-soft: #eaf3ff;
--brand-primary-border: #bfd9f5;
--brand-secondary: #5267d8;
--brand-secondary-hover: #4053bd;
--brand-secondary-soft: #eef0ff;
--sidebar-background: #061a33;
--sidebar-background-end: #081f3c;
--sidebar-surface: #132d4b;
--sidebar-surface-hover: #183858;
--sidebar-active: #1d4166;
--sidebar-active-indicator: #4d9df7;
--sidebar-text: #e5edf7;
--sidebar-text-muted: #91a5bc;
--sidebar-border: rgba(255, 255, 255, 0.08);
--background-page: #f5f7fa;
--background-surface: #ffffff;
--background-muted: #f0f3f7;
--background-subtle: #fafbfc;
--text-primary: #142033;
--text-secondary: #526071;
/* Darkened from #8490a0 (3.24:1, failed WCAG AA). This one token drives table
headers, badge-light, .lvl-muted, .num-muted and all 368 .text-muted sites,
so it is the single biggest readability fix in the file. */
--text-muted: #5f6b7a;
--text-inverse: #ffffff;
/* Both lifted: at #e1e6ed (1.25:1) every card border and row rule was
effectively invisible and box-shadows did all the structural work. */
--border-default: #d4dbe4;
--border-strong: #aab4c1;
--success: #287a3e;
--success-soft: #edf7ef;
--success-border: #c9e5cf;
--success-deep: #1d5c2e;
--warning: #986400;
--warning-soft: #fff7e5;
--warning-border: #efdba8;
/* For white-on-fill use (KPI gradients); --warning itself is only 3.63:1 there. */
--warning-strong: #8a5a00;
--warning-deep: #6d4700;
--danger: #b4232d;
--danger-soft: #fff0f1;
--danger-border: #f0c5c9;
--danger-deep: #8f1a22;
/* Indigo, not a clone of --brand-primary. These were byte-identical to the
brand blue, so badge-info and badge-primary were indistinguishable. Indigo
also unifies them with .lvl-info / .num-info, which already use it. */
--info: #5140b5;
--info-soft: #efedfd;
--info-border: #cbc6f0;
--info-deep: #3b2f8f;
/* "Stopped" — cancelled, voided, inactive. Deliberate, not an error, so it
must not be red; red stays reserved for genuine problems. */
--slate: #33475c;
--slate-deep: #222f40;
--radius-small: 8px;
--radius-medium: 12px;
--radius-large: 16px;
--shadow-small: 0 1px 3px rgba(15, 31, 50, 0.06);
--shadow-medium: 0 10px 30px rgba(15, 31, 50, 0.09);
--control-height: 44px;
--sidebar-width: 270px;
--header-height: 68px;
--page-spacing: 28px;
--focus-ring: 0 0 0 3px rgba(23, 105, 194, 0.18);
--transition-fast: 180ms ease;
}
/* ABMS premium global shell */
body {
background: var(--background-page);
color: var(--text-primary);
font-size: 16px;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
#wrapper {
background: var(--background-page);
}
.navbar-custom {
display: none;
}
.left-side-menu {
background: linear-gradient(180deg, var(--sidebar-background) 0%, var(--sidebar-background-end) 100%) !important;
box-shadow: 12px 0 30px rgba(15, 31, 50, 0.2);
width: var(--sidebar-width);
display: flex !important;
flex-direction: column;
}
/* Neutralise jQuery slimscroll; native flex scrolling for the menu region only */
.left-side-menu > .slimScrollDiv,
.left-side-menu > .slimscroll-menu {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
overflow: hidden !important;
}
.left-side-menu .slimscroll-menu {
height: auto !important;
max-height: 100%;
overflow-y: auto !important;
overflow-x: hidden;
}
.slimScrollBar,
.slimScrollRail { display: none !important; }
.left-side-menu .slimscroll-menu::-webkit-scrollbar { width: 6px; }
.left-side-menu .slimscroll-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
/* Brand */
.abms-sidebar-brand {
display: flex;
align-items: center;
gap: 11px;
padding: 17px 18px 15px;
border-bottom: 1px solid var(--sidebar-border);
flex: 0 0 auto;
text-decoration: none;
}
.abms-brand-mark {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
overflow: hidden;
}
.abms-brand-mark img { max-width: 30px; max-height: 30px; }
.abms-brand-text strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.1;
}
.abms-workspace-status {
display: flex;
align-items: center;
gap: 6px;
color: var(--sidebar-text-muted);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 4px;
}
.abms-workspace-status .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #3ddc84;
box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.16);
}
/* E-invoicing pointed at the MyInvois sandbox. Amber, not red: nothing is
broken, but every submission from here is practice. --warning (#986400) is
tuned for white cards and goes muddy on the navy sidebar, so this uses a
lighter amber — 8.9:1 on --sidebar-background. */
.abms-workspace-status--sandbox {
color: #ffc857;
}
.abms-workspace-status--sandbox .dot {
background: #ffc857;
box-shadow: 0 0 0 3px rgba(255, 200, 87, 0.18);
}
/* Section labels */
#side-menu .menu-title {
color: var(--sidebar-text-muted);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 15px 22px 6px;
pointer-events: none;
}
#sidebar-menu { padding-top: 4px; }
/* Menu items */
#side-menu li a {
border-radius: 9px;
margin: 1px 12px;
padding: 0 12px;
color: var(--sidebar-text) !important;
font-size: 14px;
font-weight: 600;
min-height: 42px;
display: flex;
align-items: center;
gap: 11px;
transition: background var(--transition-fast), color var(--transition-fast);
}
.abms-nav-icon { width: 19px; height: 19px; flex: 0 0 auto; opacity: 0.82; }
#side-menu li a:hover { background: var(--sidebar-surface-hover); color: #fff !important; }
#side-menu li a:hover .abms-nav-icon { opacity: 1; }
#side-menu li.mm-active > a {
background: var(--sidebar-active);
color: #fff !important;
position: relative;
}
#side-menu li.mm-active > a .abms-nav-icon { opacity: 1; color: var(--sidebar-active-indicator); }
#side-menu li.mm-active > a::before {
content: "";
position: absolute;
left: -12px;
top: 9px;
bottom: 9px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--sidebar-active-indicator);
}
#side-menu .menu-arrow { margin-left: auto; }
/* Second-level (submenus) */
.nav-second-level li a {
font-size: 13px;
font-weight: 500;
min-height: 36px;
padding-left: 42px !important;
margin: 1px 12px;
color: var(--sidebar-text-muted) !important;
}
.nav-second-level li a:hover { background: var(--sidebar-surface-hover); color: #fff !important; }
.nav-second-level li.mm-active > a,
.nav-second-level li.active > a { color: #fff !important; }
/* User profile (bottom of sidebar) */
.abms-sidebar-user { flex: 0 0 auto; border-top: 1px solid var(--sidebar-border); padding: 10px; }
.abms-sidebar-user-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
color: var(--sidebar-text);
text-decoration: none;
}
.abms-sidebar-user-toggle:hover { background: var(--sidebar-surface-hover); color: #fff; }
.abms-sidebar-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex: 0 0 auto;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--brand-primary);
color: #fff;
font-weight: 700;
font-size: 14px;
}
.abms-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.abms-sidebar-user-meta { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.abms-sidebar-user-meta strong {
display: block;
color: #fff;
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.abms-sidebar-user-meta small {
display: block;
color: var(--sidebar-text-muted);
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.abms-user-caret { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sidebar-text-muted); }
.abms-sidebar-user-menu {
border: 1px solid var(--border-default);
box-shadow: var(--shadow-medium);
border-radius: 10px;
}
.content-page {
margin-left: var(--sidebar-width);
background: var(--background-page);
}
.abms-content-wrap {
padding: 18px 18px 22px;
}
.abms-main-shell {
display: flex;
flex-direction: column;
gap: 12px;
}
.abms-premium-header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
padding: 14px 16px;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 31, 50, 0.08);
}
.abms-header-search-wrap {
flex: 1;
min-width: 260px;
max-width: 520px;
}
.abms-header-search {
border-radius: 12px;
border: 1px solid var(--border-default);
background: var(--background-subtle);
min-height: 40px;
font-size: 14px;
}
.abms-premium-header-left,
.abms-premium-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.abms-menu-btn {
border: 0;
background: var(--background-muted);
color: var(--brand-primary);
width: 38px;
height: 38px;
border-radius: 10px;
display: none;
align-items: center;
justify-content: center;
}
.abms-greeting-title {
margin: 0;
font-size: 30px;
color: var(--text-primary);
font-weight: 800;
opacity: 0;
animation: abmsFadeIn 0.5s ease-out forwards;
}
.abms-greeting-subtitle {
margin: 1px 0 0;
color: var(--text-muted);
font-size: 14px;
}
.abms-icon-btn {
border: 0;
background: var(--background-muted);
width: 36px;
height: 36px;
border-radius: 10px;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
}
.abms-user-chip {
display: flex;
align-items: center;
gap: 10px;
background: var(--background-subtle);
border: 1px solid var(--border-default);
border-radius: 999px;
padding: 4px 12px 4px 4px;
}
.abms-user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--brand-primary-active);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
overflow: hidden;
}
.abms-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.abms-user-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.abms-user-meta strong {
font-size: 13px;
color: var(--text-primary);
}
.abms-user-meta small {
color: var(--text-muted);
font-size: 11px;
}
.abms-main-canvas {
background: #ffffff;
border-radius: 18px;
padding: 18px;
box-shadow: 0 14px 32px rgba(15, 31, 50, 0.09);
min-height: calc(100vh - 128px);
}
.abms-main-canvas .container-fluid {
padding-left: 0;
padding-right: 0;
}
.abms-main-canvas .card,
.abms-main-canvas .card-box {
border: 1px solid var(--border-default);
border-radius: 14px;
box-shadow: 0 8px 20px rgba(15, 31, 50, 0.05);
}
.abms-main-canvas .card-header {
background: var(--background-subtle);
border-bottom: 1px solid var(--border-default);
border-top-left-radius: 14px !important;
border-top-right-radius: 14px !important;
}
.abms-main-canvas .btn-primary {
background: var(--brand-primary);
border-color: var(--brand-primary);
font-weight: 600;
}
.abms-main-canvas .btn-outline-primary {
color: var(--brand-primary);
border-color: var(--brand-primary);
font-weight: 600;
}
.abms-main-canvas .btn-outline-secondary,
.abms-main-canvas .btn-outline-info,
.abms-main-canvas .btn-outline-success,
.abms-main-canvas .btn-outline-danger,
.abms-main-canvas .btn-outline-dark {
font-weight: 600;
}
/* (The .table thead th rule lives in the Stage C component block below — an
older copy here was shadowed at equal specificity and has been removed.) */
.abms-main-canvas .table td {
font-size: 15px;
color: var(--text-primary);
}
.abms-main-canvas .table {
border-collapse: separate;
border-spacing: 0;
}
.abms-main-canvas .table tbody tr {
background: #ffffff;
}
.abms-main-canvas .table tbody tr td {
border-top: 1px solid var(--border-default);
padding-top: 13px;
padding-bottom: 13px;
}
.abms-dash-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.abms-kpi-card {
background: linear-gradient(140deg, var(--brand-primary) 0%, var(--brand-primary-active) 100%);
border-radius: 16px;
padding: 18px;
color: #ffffff;
box-shadow: 0 12px 26px rgba(15, 31, 50, 0.22);
}
.abms-kpi-label {
display: block;
opacity: 1;
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
}
.abms-kpi-value {
margin: 0;
font-size: 25px;
font-weight: 800;
letter-spacing: 0.2px;
color: #ffffff !important;
}
.abms-dash-meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.abms-card-lite {
border: 1px solid var(--border-default);
background: #ffffff;
border-radius: 14px;
padding: 14px;
box-shadow: 0 8px 18px rgba(15, 31, 50, 0.06);
}
.abms-meta-title {
display: block;
text-transform: uppercase;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
margin-bottom: 8px;
}
.abms-meta-value,
.abms-meta-day {
margin: 0;
color: var(--text-primary);
font-size: 30px;
font-weight: 800;
}
.abms-meta-date {
color: var(--text-secondary);
font-size: 14px;
}
.abms-meta-clock {
color: var(--brand-primary);
font-weight: 700;
font-size: 16px;
margin-top: 2px;
}
.abms-card-premium {
border-radius: 16px;
padding: 16px;
border: 1px solid var(--border-default);
box-shadow: 0 10px 24px rgba(15, 31, 50, 0.06);
}
.abms-table-card {
border: 1px solid var(--border-default);
border-radius: 12px;
padding: 10px;
background: var(--background-subtle);
}
.abms-chart-wrap {
border: 1px solid var(--border-default);
border-radius: 12px;
background: var(--background-subtle);
padding: 10px;
}
.abms-doc-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.abms-doc-stat-item {
border: 1px solid var(--border-default);
border-radius: 12px;
padding: 10px;
background: var(--background-subtle);
}
.abms-doc-stat-item span {
display: block;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
margin-bottom: 4px;
}
.abms-doc-stat-item strong {
color: var(--text-primary);
font-size: 22px;
font-weight: 800;
}
.abms-main-canvas .card-body {
padding: 1rem 1rem;
}
/* (The badge palette lives in the Stage C component block below — an older,
partial copy here was shadowed at equal specificity and has been removed.
Its .badge-primary even named --brand-primary-hover, a colour the browser
never painted.) */
.abms-main-canvas .form-control,
.abms-main-canvas .custom-select,
.abms-main-canvas .select2-selection {
border-radius: 10px !important;
border-color: var(--border-strong) !important;
min-height: 40px;
}
.abms-main-canvas .form-control:focus,
.abms-main-canvas .custom-select:focus {
border-color: var(--brand-primary-border);
box-shadow: 0 0 0 0.12rem rgba(23, 105, 194, 0.12);
}
.abms-main-canvas .page-item .page-link {
border-radius: 10px;
margin: 0 3px;
color: var(--text-secondary);
border-color: var(--border-strong);
}
.abms-main-canvas .page-item.active .page-link {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: #ffffff;
}
.abms-main-canvas .modal-content {
border-radius: 16px;
border: 1px solid var(--border-strong);
box-shadow: 0 16px 34px rgba(15, 31, 50, 0.16);
}
.abms-main-canvas .alert {
border-radius: 12px;
border: 1px solid var(--border-default);
}
.abms-main-canvas h1,
.abms-main-canvas h2,
.abms-main-canvas h3,
.abms-main-canvas h4,
.abms-main-canvas h5 {
color: var(--text-primary);
font-weight: 700;
}
.footer {
background: transparent;
margin-top: 10px;
}
@keyframes abmsFadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ABMS premium quotation list interactions */
.abms-quote-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.abms-quote-head-card,
.abms-quote-filter-card,
.abms-quote-table-card {
background: #ffffff;
border: 1px solid var(--border-default);
border-radius: 14px;
box-shadow: 0 10px 22px rgba(15, 31, 50, 0.06);
}
.abms-quote-head-card {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.abms-quote-title {
margin: 0;
color: var(--text-primary);
font-size: 30px;
font-weight: 800;
}
.abms-quote-subtitle {
margin: 4px 0 0;
color: var(--text-muted);
font-size: 14px;
}
.abms-quote-filter-card {
padding: 12px 14px;
}
.abms-compact-btn {
min-height: 36px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
padding: 7px 12px;
}
.abms-quote-actionbar {
display: block;
margin-bottom: 8px;
padding: 14px 16px;
border-radius: 16px;
background: #ffffff;
border: 1px solid var(--border-default);
box-shadow: 0 16px 30px rgba(15, 31, 50, 0.12);
position: sticky;
top: 10px;
z-index: 8;
}
.abms-quote-actionbar.is-idle {
box-shadow: 0 8px 20px rgba(15, 31, 50, 0.08);
}
.abms-action-bar {
border-left: 5px solid var(--brand-primary);
}
.abms-quote-actionbar-top {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
flex-wrap: wrap;
}
.abms-quote-meta {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 8px 16px;
}
.selected-quote {
align-items: center;
}
.abms-quote-meta-item {
font-size: 14px;
color: var(--text-secondary);
}
.abms-quote-meta-item strong {
color: var(--text-primary);
margin-right: 6px;
}
.abms-quote-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.abms-quote-actions .btn {
font-weight: 700;
}
.abms-action-btn {
min-height: 44px;
border-radius: 12px;
font-size: 14px;
letter-spacing: 0.1px;
padding: 10px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(15, 31, 50, 0.08);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.abms-action-btn:hover,
.abms-action-btn:focus {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(15, 31, 50, 0.14);
}
.abms-quote-empty-note {
margin-top: 8px;
font-size: 13px;
color: var(--text-muted);
}
.abms-quote-table-card {
padding: 10px 12px;
}
.abms-quote-table thead th {
border-top: 0;
border-bottom: 1px solid var(--border-default);
color: var(--text-secondary);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.abms-quote-table tbody td {
color: var(--text-primary);
font-size: 15px;
font-weight: 500;
}
.abms-quote-row {
cursor: pointer;
-webkit-tap-highlight-color: rgba(23, 105, 194, 0.12);
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.quote-row {
cursor: pointer;
}
.abms-quote-row td {
vertical-align: middle;
padding-top: 12px;
padding-bottom: 12px;
}
.abms-quote-row:hover {
background: linear-gradient(90deg, var(--background-subtle) 0%, var(--background-subtle) 100%);
}
/* The `.abms-main-canvas .table tbody tr` rule above forces a white row
background at specificity (0,2,2). `.abms-quote-row.is-selected` is only
(0,2,0), so the selected tint never painted — while
`.abms-quote-row.is-selected:hover` at (0,3,0) did, which is why the row lit
up on hover but looked unselected at rest. Qualify with tbody tr to win. */
tbody tr.abms-quote-row.is-selected {
background: linear-gradient(90deg, var(--brand-primary-soft) 0%, #eef4fd 55%, #f6f9fe 100%);
box-shadow: inset 4px 0 0 var(--brand-primary), inset 0 0 0 1px rgba(23, 105, 194, 0.25);
animation: abms-row-select 0.34s ease-out;
}
tbody tr.abms-quote-row.is-selected:hover {
background: linear-gradient(90deg, var(--brand-primary-border) 0%, var(--brand-primary-soft) 60%, #f2f7fe 100%);
}
/* Brief flash on selection so the eye is drawn to the row that just changed. */
@keyframes abms-row-select {
0% {
background-color: rgba(23, 105, 194, 0.19);
box-shadow: inset 0 0 0 0 var(--brand-primary), inset 0 0 0 1px rgba(23, 105, 194, 0.25);
}
100% {
background-color: transparent;
box-shadow: inset 4px 0 0 var(--brand-primary), inset 0 0 0 1px rgba(23, 105, 194, 0.25);
}
}
@media (prefers-reduced-motion: reduce) {
tbody tr.abms-quote-row.is-selected {
animation: none;
}
}
.abms-row-menu {
position: relative;
display: inline-flex;
justify-content: flex-end;
}
.abms-row-menu-btn {
/* Sits beside the 30px inline icons, so match their height rather than
standing a row taller. */
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border-strong);
background: var(--background-subtle);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.abms-row-menu-btn:hover,
.abms-row-menu-btn:focus {
background: var(--background-muted);
border-color: var(--brand-primary-border);
}
.abms-row-menu-dots {
/* Vertical ellipsis (⋮) — needs no letter-spacing, and reads as
"more actions" next to the inline icons rather than as a third action. */
font-size: 17px;
line-height: 1;
font-weight: 700;
}
.abms-row-menu-list {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
/* The Actions cell is .text-right; without this the menu items inherit it and
the labels sit against the right edge instead of reading as a normal menu. */
text-align: left;
min-width: 152px;
background: #ffffff;
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 14px 28px rgba(15, 31, 50, 0.18);
padding: 6px;
z-index: 15;
}
/* Open state is position:fixed, not absolute, and JS supplies top/left from the
button's viewport rect. The row menu lives inside `.table-responsive`, which
Bootstrap gives `overflow-x:auto` — an overflow ancestor clips *and* scrolls
absolutely-positioned descendants, so the last items of a bottom-row menu
were being cut off at the edge of the table box. A fixed element is laid out
against the viewport instead, escaping every overflow ancestor on the way up.
z-index must clear the sticky table header and the row-hover layers. */
.abms-row-menu-list.is-open {
display: block;
position: fixed;
top: auto;
right: auto;
bottom: auto;
z-index: 1080;
}
.abms-row-menu-list a {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 9px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
/* Fixed width so the labels line up in a column regardless of glyph width. */
.abms-row-menu-list a > .fa {
width: 15px;
text-align: center;
font-size: 12.5px;
opacity: 0.75;
}
.abms-row-menu-list a:hover > .fa,
.abms-row-menu-list a:focus > .fa {
opacity: 1;
}
.abms-row-menu-list a:hover,
.abms-row-menu-list a:focus {
background: var(--background-muted);
color: var(--brand-primary-active);
}
.abms-row-menu-list a.is-danger {
color: var(--danger);
}
.abms-row-menu-list a.is-danger:hover,
.abms-row-menu-list a.is-danger:focus {
background: var(--danger-soft);
color: var(--danger);
}
.abms-flow-modal {
position: fixed;
inset: 0;
background: rgba(15, 31, 50, 0.58);
z-index: 1050;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.abms-flow-modal.is-open {
display: flex;
}
.abms-flow-modal-dialog {
width: min(1150px, 100%);
background: linear-gradient(160deg, var(--background-subtle) 0%, var(--background-muted) 42%, var(--background-subtle) 100%);
border-radius: 20px;
border: 1px solid var(--brand-primary-border);
box-shadow: 0 30px 60px rgba(15, 31, 50, 0.28);
padding: 18px 20px 22px;
}
.abms-flow-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.abms-flow-modal-header h3 {
margin: 0;
font-size: 26px;
font-weight: 800;
color: var(--text-primary);
}
.abms-flow-modal-subtitle {
margin: 3px 0 0;
font-size: 14px;
color: var(--text-secondary);
}
.abms-flow-close-btn {
min-width: 40px;
min-height: 40px;
border-radius: 12px;
font-size: 24px;
line-height: 1;
padding: 2px 10px;
}
.abms-flowchart-wrap {
overflow-x: auto;
padding-bottom: 4px;
}
.abms-flowchart-track {
display: grid;
grid-template-columns: repeat(5, minmax(180px, 1fr));
gap: 22px;
min-width: 980px;
position: relative;
}
.abms-flow-step {
position: relative;
background: #ffffff;
border: 1px solid var(--border-strong);
border-radius: 18px;
padding: 14px 14px 12px;
box-shadow: 0 10px 22px rgba(15, 31, 50, 0.11);
}
.abms-flow-step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -20px;
width: 20px;
height: 3px;
transform: translateY(-50%);
background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
border-radius: 99px;
}
.abms-flow-step:not(:last-child)::before {
content: '';
position: absolute;
top: calc(50% - 5px);
right: -23px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--brand-secondary);
}
.abms-flow-step-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.abms-flow-step-title {
font-size: 16px;
font-weight: 800;
color: var(--text-primary);
}
.abms-flow-step-badge {
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
background: var(--border-default);
color: var(--text-secondary);
}
.abms-flow-step-detail,
.abms-flow-step-link {
display: block;
margin-top: 10px;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.35;
}
.abms-flow-step-link {
text-decoration: none;
font-weight: 600;
}
.abms-flow-step.is-current {
border-color: var(--brand-primary-border);
background: linear-gradient(160deg, var(--brand-primary-soft) 0%, var(--background-subtle) 100%);
}
.abms-flow-step.is-current .abms-flow-step-badge {
background: var(--brand-primary);
color: #ffffff;
}
.abms-flow-step.is-completed {
border-color: var(--success-border);
background: linear-gradient(160deg, var(--success-soft) 0%, var(--background-subtle) 100%);
}
.abms-flow-step.is-completed .abms-flow-step-badge {
background: var(--success);
color: #ffffff;
}
.abms-flow-step.is-pending {
border-color: var(--border-strong);
background: var(--background-subtle);
}
.abms-flow-step.is-pending .abms-flow-step-badge {
background: var(--background-muted);
color: var(--text-muted);
}
.abms-flow-step-link[aria-disabled='true'] {
pointer-events: none;
color: var(--text-muted);
}
.abms-flow-step-link[aria-disabled='false'] {
color: var(--brand-primary-active);
}
.abms-flow-step-link[aria-disabled='false']:hover,
.abms-flow-step-link[aria-disabled='false']:focus {
color: var(--brand-primary-active);
text-decoration: underline;
}
@media (max-width: 767px) {
.left-side-menu {
transform: translateX(-100%);
transition: transform 0.2s ease;
z-index: 1005;
}
body.abms-sidebar-open .left-side-menu {
transform: translateX(0);
}
.content-page {
margin-left: 0 !important;
}
.abms-content-wrap {
padding: 10px;
}
.abms-premium-header {
padding: 10px 12px;
align-items: flex-start;
flex-direction: column;
}
.abms-premium-header-left,
.abms-premium-header-right {
width: 100%;
justify-content: space-between;
}
.abms-header-search-wrap {
min-width: 100%;
max-width: 100%;
}
.abms-menu-btn {
display: inline-flex;
}
.abms-user-chip {
flex: 1;
justify-content: flex-start;
}
.abms-main-canvas {
border-radius: 14px;
padding: 10px;
min-height: auto;
}
.abms-dash-summary-grid,
.abms-dash-meta-grid {
grid-template-columns: 1fr;
}
.abms-doc-stats-grid {
grid-template-columns: 1fr;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.abms-quote-actionbar {
padding: 12px;
position: static;
}
.abms-quote-meta {
grid-template-columns: 1fr;
}
.abms-quote-actions .btn {
flex: 1 1 calc(50% - 10px);
min-height: 46px;
}
.abms-quote-head-card {
flex-direction: column;
align-items: flex-start;
}
.abms-quote-title {
font-size: 25px;
}
.abms-flow-modal {
padding: 12px;
}
.abms-flow-modal-dialog {
width: 100%;
max-height: calc(100vh - 24px);
overflow: auto;
padding: 14px;
}
.abms-flow-modal-header h3 {
font-size: 22px;
}
.abms-flowchart-track {
min-width: 100%;
grid-template-columns: 1fr;
gap: 12px;
}
.abms-flow-step:not(:last-child)::after {
top: auto;
bottom: -10px;
left: 50%;
right: auto;
width: 3px;
height: 10px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}
.abms-flow-step:not(:last-child)::before {
top: auto;
bottom: -17px;
left: calc(50% - 5px);
right: auto;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid var(--brand-secondary);
border-bottom: 0;
}
}
@media (max-width: 991px) {
.abms-menu-btn {
display: inline-flex;
}
.abms-premium-header {
flex-wrap: wrap;
}
.abms-header-search-wrap {
order: 3;
width: 100%;
max-width: 100%;
}
.content-page {
margin-left: 0;
}
.left-side-menu {
display: block;
}
.abms-dash-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.abms-dash-meta-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.abms-quote-table tbody td {
font-size: 14px;
}
}
/* ============================================================================
Stage C — component design system (buttons, dot-status badges, tables,
tinted alert banners, pagination). Routed through the design tokens.
Buttons are global (the shell uses its own .abms-* classes; login is separate);
badges/tables/alerts are scoped to page content (.abms-main-canvas).
============================================================================ */
/* --- Bootstrap .text-* utilities, routed through the tokens ---------------
Bootstrap ships these !important and wildly off-system: .text-muted #98a6ad
(2.50:1), .text-success #10c469 (2.30:1, neon), .text-warning #f9c851
(1.57:1), .text-danger #ff5b5b (3.04:1), and .text-primary #004AAD which is
not even the brand blue. 368 .text-muted uses across 95 templates inherited
all of that.
Scoped to .abms-main-canvas on purpose. The sidebar sits OUTSIDE it and is
already healthy (14.78:1 on navy); so do the two topbar badges in base.html.
.text-light and .text-white are deliberately ABSENT. They do double duty —
~40 sidebar submenu links on navy AND ~20 solid buttons inside the canvas
(btn-primary text-light). Overriding either would break one of the two.
Do not "complete the set". */
.abms-main-canvas .text-muted { color: var(--text-muted) !important; }
.abms-main-canvas .text-secondary { color: var(--text-secondary) !important; }
.abms-main-canvas .text-dark { color: var(--text-primary) !important; }
.abms-main-canvas .text-primary { color: var(--brand-primary) !important; }
.abms-main-canvas .text-info { color: var(--info) !important; }
.abms-main-canvas .text-success { color: var(--success) !important; }
.abms-main-canvas .text-warning { color: var(--warning) !important; }
.abms-main-canvas .text-danger { color: var(--danger) !important; }
/* Bootstrap's anchor variants are a.text-danger:hover — (0,2,1) — which
OUTRANKS the (0,2,0) block above. Without this tier every coloured link
snaps back to the neon palette the moment it is hovered or focused. */
.abms-main-canvas a.text-muted:hover, .abms-main-canvas a.text-muted:focus { color: var(--text-secondary) !important; }
.abms-main-canvas a.text-secondary:hover, .abms-main-canvas a.text-secondary:focus { color: var(--text-primary) !important; }
.abms-main-canvas a.text-dark:hover, .abms-main-canvas a.text-dark:focus { color: var(--text-primary) !important; }
.abms-main-canvas a.text-primary:hover, .abms-main-canvas a.text-primary:focus { color: var(--brand-primary-hover) !important; }
.abms-main-canvas a.text-info:hover, .abms-main-canvas a.text-info:focus { color: var(--info-deep) !important; }
.abms-main-canvas a.text-success:hover, .abms-main-canvas a.text-success:focus { color: var(--success-deep) !important; }
.abms-main-canvas a.text-warning:hover, .abms-main-canvas a.text-warning:focus { color: var(--warning-deep) !important; }
.abms-main-canvas a.text-danger:hover, .abms-main-canvas a.text-danger:focus { color: var(--danger-deep) !important; }
/* --- Row action icons ------------------------------------------------------
Edit pencils and delete bins were spending green and red on row chrome, so a
real status badge had nothing left to stand out against. Neutral at rest,
intent on hover.
Keyed on the ICON, never the anchor: ~40 of the 76 .text-danger uses in
templates are required-field asterisks (*),
some of them inside a | via includes/_void_reopen.html. An anchor-level
or cell-level selector would grey those out.
:not(.btn) is load-bearing. Four tables (staff users, vendors, companies,
roles) wrap these same icons in a solid .btn-primary / .btn-danger. Without
the exclusion this rule repainted those icons --text-muted on top of the
button's own fill, which measured 1.01:1 against --brand-primary and 1.20:1
against --danger — the glyph was effectively invisible. A bare icon link is
still neutral at rest; an icon inside a button now keeps the button's white. */
.abms-main-canvas td a:not(.btn) > i.fa-trash,
.abms-main-canvas td a:not(.btn) > i.fa-trash-o,
.abms-main-canvas td a:not(.btn) > i.fa-pencil,
.abms-main-canvas td a:not(.btn) > i.fa-pencil-alt,
.abms-main-canvas td a:not(.btn) > i.fas.fa-pencil-alt,
.abms-main-canvas td a:not(.btn) > i.fa-eye,
.abms-main-canvas td a:not(.btn) > i.fas.fa-eye,
.abms-main-canvas td a:not(.btn) > i.fa-download {
color: var(--text-muted);
transition: color var(--transition-fast);
}
.abms-main-canvas td a:not(.btn):hover > i.fa-trash,
.abms-main-canvas td a:not(.btn):hover > i.fa-trash-o { color: var(--danger); }
.abms-main-canvas td a:not(.btn):hover > i.fa-pencil,
.abms-main-canvas td a:not(.btn):hover > i.fa-pencil-alt,
.abms-main-canvas td a:not(.btn):hover > i.fas.fa-pencil-alt,
.abms-main-canvas td a:not(.btn):hover > i.fa-eye,
.abms-main-canvas td a:not(.btn):hover > i.fas.fa-eye,
.abms-main-canvas td a:not(.btn):hover > i.fa-download { color: var(--brand-primary); }
/* An icon inside a button is part of the button's label, so it takes the
button's colour — never its own. Backstop so no future icon-keyed rule can
dim a glyph sitting on a filled background again. */
.abms-main-canvas .btn > i,
.abms-main-canvas .btn > svg { color: inherit; }
/* --- Buttons ------------------------------------------------------------- */
.btn {
border-radius: var(--radius-small);
font-weight: 600;
font-size: 14px;
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-sm { font-size: 13px; }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: #fff; }
.btn-primary:focus, .btn-primary:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background: var(--brand-primary-active); border-color: var(--brand-primary-active); }
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary-border); background: transparent; }
.btn-outline-primary:hover { background: var(--brand-primary-soft); color: var(--brand-primary-hover); border-color: var(--brand-primary); }
.btn-secondary { background: var(--background-muted); border-color: var(--border-strong); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--border-default); border-color: var(--border-strong); color: var(--text-primary); }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); background: transparent; }
.btn-outline-secondary:hover { background: var(--background-muted); color: var(--text-primary); border-color: var(--border-strong); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: var(--success); border-color: var(--success); color: #fff; filter: brightness(0.93); }
.btn-outline-success { color: var(--success); border-color: var(--success-border); background: transparent; }
.btn-outline-success:hover { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; filter: brightness(0.93); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger-border); background: transparent; }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { background: var(--warning); color: #fff; filter: brightness(0.93); }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background: var(--info); color: #fff; filter: brightness(0.93); }
/* Was the only outline variant with no token treatment, so it fell through to
Bootstrap's #17a2b8 — off-palette next to the brand blue, and 3.04:1 on white
(fails). The --info family matches its siblings above and measures 7.64:1. */
.btn-outline-info { color: var(--info); border-color: var(--info-border); background: transparent; }
.btn-outline-info:hover { background: var(--info-soft); color: var(--info-deep); border-color: var(--info); }
.btn-light { background: var(--background-muted); border-color: var(--border-default); color: var(--text-secondary); }
.btn-light:hover { background: var(--border-default); color: var(--text-primary); }
.btn-dark { background: var(--sidebar-active); border-color: var(--sidebar-active); color: #fff; }
.btn-link { color: var(--brand-primary); }
.btn.disabled, .btn:disabled { opacity: 0.55; box-shadow: none; }
/* --- Dot-status badges (page content) ------------------------------------ */
/* The background/color pair is a FLOOR, not decoration: without it an unmatched
suffix (a typo, or a new role added to Python before CSS) inherits the cell's
colour on a transparent background and renders as unstyled text. With it, the
worst case degrades to a readable neutral pill. */
.abms-main-canvas .badge {
background: var(--background-muted);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.01em;
padding: 4px 10px;
line-height: 1.4;
vertical-align: middle;
}
.abms-main-canvas .badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
opacity: 0.9;
}
/* Semantic roles (see crm/status_colours.py — one Python map decides which of
these a status gets; templates never choose a colour by hand):
ready primary waiting info todo warning good success
problem danger neutral secondary stopped slate na light
The three neutrals stay distinguishable by TREATMENT, not hue, so they
survive greyscale: filled+dot / solid / outline. */
.abms-main-canvas .badge-primary { background: var(--brand-primary-soft); color: var(--brand-primary); }
.abms-main-canvas .badge-info { background: var(--info-soft); color: var(--info); }
.abms-main-canvas .badge-success { background: var(--success-soft); color: var(--success); }
.abms-main-canvas .badge-warning { background: var(--warning-soft); color: var(--warning); }
.abms-main-canvas .badge-danger { background: var(--danger-soft); color: var(--danger); }
.abms-main-canvas .badge-secondary { background: var(--background-muted); color: var(--text-secondary); }
.abms-main-canvas .badge-dark { background: #e6eaf0; color: var(--text-primary); }
/* stopped — cancelled / voided / inactive. Solid, no dot: a deliberate full
stop reads differently from every in-flight state without using red. */
.abms-main-canvas .badge-slate { background: var(--slate); color: #ffffff; }
.abms-main-canvas .badge-slate::before { display: none; }
/* na — not required / no items. Ghost outline, no dot: present but out of
scope, and clearly not the same thing as "draft". */
.abms-main-canvas .badge-light {
background: var(--background-surface);
color: var(--text-secondary);
box-shadow: inset 0 0 0 1px #8490a0;
}
.abms-main-canvas .badge-light::before { display: none; }
/* Non-status chrome (numbering prefixes, currency BASE, category labels, the
Rev R{n} chip). Same pill, no dot — a dot implies a state, and these carried
the same visual weight as real statuses. */
.abms-main-canvas .badge-chip {
background: var(--background-muted);
color: var(--text-secondary);
font-weight: 600;
}
.abms-main-canvas .badge-chip::before { display: none; }
.abms-main-canvas a.badge:hover { text-decoration: none; filter: brightness(0.97); }
/* --- Tables (page content) ----------------------------------------------- */
.abms-main-canvas .table { color: var(--text-primary); margin-bottom: 0; }
/* Column headers on ~86 pages. --text-muted at 11.5px uppercase was 3.24:1 —
the largest single source of the "everything is grey" impression.
Background stays transparent on purpose: the colour alone carries the fix and
a muted band would change the layout feel.
This (0,2,2) rule intentionally outranks Bootstrap's .thead-light (0,1,1),
which 33 templates set. .thead-inverse (26 templates) is a Bootstrap-4-ALPHA
class that does not exist in this build — it is inert, and deliberately not
defined here. */
.abms-main-canvas .table thead th {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-secondary);
background: transparent;
border-top: 0;
border-bottom: 1px solid var(--border-strong);
padding: 12px 14px;
white-space: nowrap;
}
.abms-main-canvas .table tbody td {
padding: 13px 14px;
border-top: 1px solid var(--border-default);
vertical-align: middle;
font-size: 13.5px;
}
.abms-main-canvas .table tbody tr:hover > td { background: var(--background-subtle); }
.abms-main-canvas .table-sm td, .abms-main-canvas .table-sm th { padding: 9px 12px; }
.abms-main-canvas .table-bordered,
.abms-main-canvas .table-bordered td,
.abms-main-canvas .table-bordered th { border-color: var(--border-default); }
/* --- Tinted alert banners (page content) --------------------------------- */
.abms-main-canvas .alert {
border-radius: var(--radius-medium);
border: 1px solid transparent;
padding: 13px 16px;
font-size: 14px;
}
.abms-main-canvas .alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.abms-main-canvas .alert-danger, .abms-main-canvas .alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.abms-main-canvas .alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
/* Split deliberately: these shared one declaration only because --info used to
be a literal alias of --brand-primary. Now that --info is indigo, leaving
them joined would silently turn every alert-primary violet. */
.abms-main-canvas .alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.abms-main-canvas .alert-primary { background: var(--brand-primary-soft); border-color: var(--brand-primary-border); color: var(--brand-primary); }
.abms-main-canvas .alert strong { color: inherit; }
/* --- Pagination (page content) ------------------------------------------- */
.abms-main-canvas .pagination .page-link { color: var(--brand-primary); border-color: var(--border-default); border-radius: var(--radius-small); margin: 0 2px; }
.abms-main-canvas .pagination .page-item.active .page-link { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.abms-main-canvas .pagination .page-link:hover { background: var(--brand-primary-soft); border-color: var(--brand-primary-border); }
/* --- Shared partials: page header, empty state, alert banner -------------- */
.abms-page-header-card { margin-bottom: 0; }
.abms-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.abms-page-header-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.abms-page-header-icon {
width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-primary-soft); color: var(--brand-primary); font-size: 20px;
}
.abms-page-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.abms-page-desc { margin: 3px 0 0; font-size: 14px; color: var(--text-secondary); }
.abms-page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.abms-empty-state { text-align: center; padding: 48px 20px; }
.abms-empty-state-icon {
width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
background: var(--background-muted); color: var(--text-muted); font-size: 24px;
}
.abms-empty-state h4 { font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 0 0 5px; }
.abms-empty-state p { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; }
.abms-alert-banner {
display: flex; align-items: flex-start; gap: 12px;
border-radius: var(--radius-medium); border: 1px solid transparent; padding: 14px 16px;
}
.abms-alert-banner .abms-alert-icon { flex: 0 0 auto; margin-top: 1px; }
.abms-alert-banner .abms-alert-body { flex: 1 1 auto; min-width: 0; }
.abms-alert-banner .abms-alert-heading { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.abms-alert-banner .abms-alert-text { font-size: 13.5px; margin: 0; opacity: 0.92; }
.abms-alert-banner .close { opacity: 0.5; font-size: 20px; line-height: 1; }
.abms-alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.abms-alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.abms-alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.abms-alert-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
/* Sidebar footer credit */
.abms-sidebar-credit {
flex: 0 0 auto;
padding: 9px 14px 12px;
text-align: center;
font-size: 11px;
color: var(--sidebar-text-muted);
}
.abms-sidebar-credit a {
color: var(--sidebar-text);
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
}
.abms-sidebar-credit a:hover { color: var(--sidebar-active-indicator); text-decoration: none; }
/* Fix: the theme reserved 70px at the top for its (now-hidden) .navbar-custom
topbar via .left-side-menu{top:70px} and .content-page{margin-top:70px},
leaving an empty band above the sidebar + workspace. Reclaim it. */
.left-side-menu { top: 0; }
.content-page { margin-top: 0; }
/* Keep long menu labels (e.g. "Purchase / Creditor") from colliding with the caret */
#side-menu li a { font-size: 13.5px; }
#side-menu > li > a > .side-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#side-menu .menu-arrow { flex: 0 0 auto; margin-left: 6px; }
#side-menu li a { padding-right: 36px; position: relative; }
/* Win the theme's higher-specificity menu rules so long labels clear the caret */
#side-menu li a { font-size: 13.5px !important; padding-right: 34px !important; }
/* ============================================================
Dashboard v2 — operational panels (AR/AP aging, e-invoice,
cash, cheque pipeline, payroll, projects, activity)
============================================================ */
.abms-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
a.abms-kpi-card { text-decoration: none; display: block; transition: transform .15s ease, box-shadow .15s ease; }
a.abms-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(15, 31, 50, .28); }
/* Bootstrap's `a:hover` (0,1,1) outranks `.abms-kpi-card` (0,1,0), so hovering a
KPI card turned its label link-blue on the dark gradient — the value and sub
stayed white, so the card half-faded mid-hover. Keep the whole card white. */
a.abms-kpi-card:hover, a.abms-kpi-card:focus,
a.abms-kpi-card:hover .abms-kpi-label, a.abms-kpi-card:focus .abms-kpi-label { color: #fff; }
/* opacity was .85, which alpha-composites the text toward the fill and left the
sub-label at 4.41:1 even on the default blue. */
.abms-kpi-sub { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #fff; opacity: .95; }
/* Tokenised. tone-warn started at #b07d17 (white text = 3.63:1, failed AA);
--warning-strong takes it to 5.93:1. */
.abms-kpi-card.tone-danger { background: linear-gradient(140deg, var(--danger) 0%, var(--danger-deep) 100%); }
.abms-kpi-card.tone-warn { background: linear-gradient(140deg, var(--warning-strong) 0%, var(--warning-deep) 100%); }
.abms-kpi-card.tone-success { background: linear-gradient(140deg, var(--success) 0%, var(--success-deep) 100%); }
.abms-kpi-card.tone-neutral { background: linear-gradient(140deg, var(--slate) 0%, var(--slate-deep) 100%); }
.abms-dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.abms-dash-toolbar h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-primary); }
.abms-dash-toolbar .sub { color: var(--text-muted); font-size: 13px; }
.abms-year-select { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.abms-year-select select { border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 12px; font-weight: 700; color: var(--text-primary); background: var(--background-surface); }
.abms-panel-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.abms-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.abms-panel-head h4 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.abms-panel-note { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.abms-panel-link { font-size: 12px; font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.abms-panel-link:hover { text-decoration: underline; }
/* Action center */
.abms-action-list { display: flex; flex-direction: column; gap: 8px; }
.abms-action-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--background-subtle); color: var(--text-primary); text-decoration: none; transition: background .12s ease; }
.abms-action-item:hover { background: var(--background-muted); color: var(--text-primary); text-decoration: none; }
.abms-action-item .label { flex: 1; font-size: 13.5px; font-weight: 600; }
.abms-action-empty { padding: 26px; text-align: center; color: var(--text-muted); font-weight: 600; }
/* level pills + dots */
.abms-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.lvl-ok, .lvl-success { background: var(--success); }
.lvl-info { background: var(--brand-secondary); }
.lvl-warn, .lvl-warning { background: var(--warning); }
.lvl-danger { background: var(--danger); }
.lvl-muted { background: var(--text-muted); }
.lvl-slate { background: var(--slate); }
.abms-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
/* aging bar */
.abms-aging-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--background-muted); margin: 12px 0; }
.abms-aging-seg { height: 100%; }
.abms-aging-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.abms-aging-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.abms-aging-legend-item strong { color: var(--text-primary); }
/* mini stat trio */
.abms-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abms-mini-stat { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 8px; background: var(--background-subtle); text-align: center; }
.abms-mini-stat .num { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.abms-mini-stat .lbl { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.num-danger { color: var(--danger) !important; }
.num-warn { color: var(--warning) !important; }
.num-ok { color: var(--success) !important; }
.num-info { color: var(--brand-secondary) !important; }
.num-muted { color: var(--text-muted) !important; }
/* key-value rows */
.abms-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-default); }
.abms-kv-row:last-child { border-bottom: 0; }
.abms-kv-row .k { color: var(--text-secondary); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.abms-kv-row .v { font-weight: 700; color: var(--text-primary); }
.abms-kv-row.strong .v { font-size: 17px; }
.abms-kv-row.strong .k { font-weight: 700; color: var(--text-primary); }
/* activity feed */
.abms-feed-item { display: flex; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border-default); font-size: 13px; align-items: baseline; }
.abms-feed-item:last-child { border-bottom: 0; }
.abms-feed-when { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; min-width: 88px; }
.abms-feed-actor { color: var(--text-muted); }
@media (max-width: 991px) {
.abms-panel-grid-2 { grid-template-columns: 1fr; }
}
/* ===================================================================== */
/* Asia Group Project Tracker + Daily Project Update */
/* ===================================================================== */
.abms-tracker-card {
border: 1px solid var(--border-default, #e1e6ed);
border-left: 4px solid var(--border-strong, #cfd6df);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 12px;
background: var(--background-surface, #fff);
transition: box-shadow .15s ease;
}
.abms-tracker-card:hover { box-shadow: 0 6px 18px rgba(15, 31, 50, .08); }
.abms-tracker-card.is-overdue { border-left-color: #b4232d; }
.abms-tracker-card.is-stale { border-left-color: #33475c; }
.abms-tracker-card.is-due-soon { border-left-color: #b07d17; }
.abms-indicators .badge { margin-right: 4px; letter-spacing: .02em; }
/* Tracker listing typography.
The listing is read at a glance across ~60 cards, so nothing in it is set in
a muted grey: every value carries its own weight and full-contrast colour.
Hierarchy is company -> project -> facts -> notes, expressed by size and
colour rather than by fading the lower tiers out. */
/* Company is the primary identifier here — highlighted, not just bold. */
.abms-tracker-ident { min-width: 0; }
.abms-tracker-company {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
margin-bottom: 5px;
padding: 3px 10px;
border: 1px solid var(--brand-primary-border, #bfd9f5);
border-radius: 6px;
background: var(--brand-primary-soft, #eaf3ff);
color: var(--brand-primary-active, #0f4b8e);
font-size: 14.5px;
font-weight: 800;
letter-spacing: .01em;
line-height: 1.35;
}
.abms-tracker-company i { font-size: 12px; flex: none; }
.abms-tracker-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.35;
color: var(--text-primary, #142033);
}
.abms-tracker-num {
margin-right: 7px;
font-weight: 800;
color: var(--brand-primary-active, #0f4b8e);
}
.abms-tracker-tags { margin-top: 4px; }
.abms-tracker-tag {
display: inline-block;
margin: 2px 5px 0 0;
padding: 1px 7px;
border: 1px solid var(--border-strong, #cfd6df);
border-radius: 4px;
background: var(--background-subtle, #fafbfc);
color: var(--text-primary, #142033);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
}
.abms-tracker-badges { flex: none; padding-left: 10px; }
.abms-tracker-count {
font-size: 13px;
font-weight: 700;
color: var(--text-primary, #142033);
}
/* Facts grid — label and value are visually distinct, both fully legible. */
.abms-tracker-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 18px;
margin-top: 8px;
}
.abms-tracker-meta > div {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
font-size: 12.5px;
line-height: 1.5;
}
.abms-tracker-meta i {
flex: none;
width: 13px;
text-align: center;
color: var(--brand-primary, #1769c2);
}
.abms-tracker-meta .k {
flex: none;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-secondary, #526071);
}
.abms-tracker-meta .v {
font-weight: 700;
color: var(--text-primary, #142033);
}
.abms-tracker-meta .v.is-bad { color: var(--danger, #b4232d); }
.abms-tracker-meta .v.is-warn { color: var(--warning-strong, #8a5a00); }
/* Free-text notes — each on its own line, label in caps, body at full contrast. */
.abms-tracker-note {
margin-top: 5px;
padding-left: 9px;
border-left: 3px solid var(--border-strong, #cfd6df);
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
color: var(--text-primary, #142033);
}
.abms-tracker-note.is-pending { border-left-color: var(--warning-strong, #8a5a00); }
.abms-tracker-note.is-next { border-left-color: var(--brand-primary, #1769c2); }
.abms-field-label {
display: block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-secondary, #526071);
}
.abms-tracker-owner {
display: inline-block;
padding: 0 6px;
border-radius: 4px;
background: var(--brand-primary-soft, #eaf3ff);
color: var(--brand-primary-active, #0f4b8e);
font-weight: 800;
}
/* Status / priority pills inside the tracker are solid rather than the soft
app-wide fill: this list is scanned at a distance, and the soft treatment read
as washed out here. Scoped to the tracker on purpose — the semantic roles and
the soft fill stay exactly as they are everywhere else in the app. */
.abms-tracker-card .badge,
.abms-reminder .badge {
font-weight: 700;
color: #fff;
}
.abms-tracker-card .badge-primary, .abms-reminder .badge-primary { background: var(--brand-primary, #1769c2); }
.abms-tracker-card .badge-info, .abms-reminder .badge-info { background: var(--info, #5140b5); }
.abms-tracker-card .badge-success, .abms-reminder .badge-success { background: var(--success, #287a3e); }
.abms-tracker-card .badge-warning, .abms-reminder .badge-warning { background: var(--warning-strong, #8a5a00); }
.abms-tracker-card .badge-danger, .abms-reminder .badge-danger { background: var(--danger, #b4232d); }
.abms-tracker-card .badge-secondary, .abms-reminder .badge-secondary { background: var(--slate, #33475c); }
.abms-tracker-card .badge-dark, .abms-reminder .badge-dark { background: var(--text-primary, #142033); }
.abms-tracker-card .badge-light, .abms-reminder .badge-light {
background: var(--background-surface, #fff);
color: var(--text-primary, #142033);
box-shadow: inset 0 0 0 1px var(--border-strong, #aab4c1);
}
/* The neutral chips are chrome, not state — keep them un-dotted and quiet. */
.abms-tracker-card .abms-tracker-tag { color: var(--text-primary, #142033); }
@media (max-width: 575px) {
.abms-tracker-meta { grid-template-columns: 1fr; }
}
.abms-update-form {
background: var(--background-subtle, #fafbfc);
border: 1px solid var(--border-default, #e1e6ed);
border-radius: 8px;
padding: 12px;
}
.abms-reminder {
border: 1px solid var(--border-default, #e1e6ed);
border-left: 3px solid var(--border-strong, #cfd6df);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 8px;
}
.abms-reminder.is-overdue { border-left-color: #b4232d; background: #fdf3f3; }
.abms-reminder-title {
font-size: 13.5px;
font-weight: 800;
line-height: 1.35;
color: var(--text-primary, #142033);
}
.abms-reminder-detail {
margin-top: 2px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
color: var(--text-primary, #142033);
}
.abms-reminder-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin-top: 4px;
font-size: 11.5px;
font-weight: 700;
color: var(--text-primary, #142033);
}
.abms-reminder-meta .is-bad { color: var(--danger, #b4232d); font-weight: 800; }
.abms-report-text {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.5;
white-space: pre;
background: var(--background-subtle, #fafbfc);
color: var(--text-primary, #142033);
}
/* Bootstrap 4 dropped btn-xs; the tracker uses tiny inline action buttons. */
.btn-xs {
padding: .1rem .4rem;
font-size: .72rem;
line-height: 1.4;
border-radius: .2rem;
}
|