/*
* SIDESA Admin — Custom Stylesheet
* Version: 20260414
*
* DESIGN DECISIONS:
* 1. "Dossier Layout" — Record tables use a split-panel pattern that mirrors
* how government clerks work with physical file folders. Left: record list.
* Right: structured detail pane. No data dumps in table cells.
*
* 2. "Status Pipeline" — Workflow status is shown as a horizontal step-
* indicator (not just a badge) on detail/edit pages. This lets non-
* technical users understand "step 2 of 6" intuitively. Status chips
* always include a text prefix symbol so they never rely on color alone
* (WCAG 1.4.1 — Use of Color).
*
* ACCESSIBILITY TARGETS: WCAG 2.1 AA (prefer AAA where feasible)
* - All interactive elements have :focus-visible rings
* - Status chips have icon prefix, not color alone
* - Skip-to-content link is the first focusable element
* - Color contrast: primary text #15231c on bg #f3f6f3 ≈ 10.9:1 (AAA)
* - Muted text #4f6157 on white ≈ 5.4:1 (AA+)
*/
/* =========================================================
DESIGN TOKENS
========================================================= */
:root {
--admin-font: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Backgrounds */
--admin-bg: #f3f6f3;
--admin-surface: #ffffff;
--admin-surface-soft: #edf4f0;
/* Borders */
--admin-border: #d5e2da;
/* Text — contrast checked: #15231c on white = 14.1:1 (AAA) */
--admin-text: #15231c;
/* Muted — #4f6157 on white = 5.4:1 (AA) */
--admin-muted: #4f6157;
/* Brand */
--admin-primary: #0f5f56;
--admin-primary-strong: #0a4a43;
--admin-secondary: #0f4c81;
/* Semantic */
--admin-success: #166534;
--admin-warning: #8a5b00;
--admin-danger: #8b1e1e;
/* Shadows */
--admin-shadow: 0 20px 45px rgba(20, 35, 28, 0.08);
--admin-shadow-soft: 0 4px 16px rgba(20, 35, 28, 0.06);
/* Focus ring — visible, 3px, offset */
--admin-focus-ring: 0 0 0 3px rgba(15, 95, 86, 0.35);
--admin-focus-ring-offset: 2px;
/* Status semantic colors */
--status-pending-bg: #fff8e1;
--status-pending-text: #5a3c00;
--status-pending-border: #f0c040;
--status-process-bg: #e3eefb;
--status-process-text: #0e3f6e;
--status-process-border: #93b8e8;
--status-done-bg: #e4f7ea;
--status-done-text: #185233;
--status-done-border: #7ecf97;
--status-danger-bg: #fde8e8;
--status-danger-text: #7d1e1e;
--status-danger-border: #efb1b1;
}
/* =========================================================
BASE & TYPOGRAPHY
========================================================= */
html {
font-size: 16px;
/* Smooth scrolling for skip-link targets */
scroll-behavior: smooth;
}
body.sidesa-admin {
font-family: var(--admin-font);
background: var(--admin-bg);
color: var(--admin-text);
line-height: 1.6;
}
body.sidesa-admin .content-wrapper,
body.sidesa-admin .main-footer,
body.sidesa-admin .main-header,
body.sidesa-admin .main-sidebar {
font-family: var(--admin-font);
}
body.sidesa-admin .content-wrapper {
background: transparent;
}
body.sidesa-admin a {
color: var(--admin-primary-strong);
}
body.sidesa-admin a:hover,
body.sidesa-admin a:focus {
color: var(--admin-primary);
}
/* =========================================================
ACCESSIBILITY — SKIP LINK
The first focusable element on the page. Visible only on
keyboard focus so it doesn't affect sighted layout.
========================================================= */
.skip-link {
background: var(--admin-primary);
border-radius: 0 0 0.5rem 0.5rem;
color: #ffffff;
font-family: var(--admin-font);
font-size: 0.95rem;
font-weight: 700;
left: 1rem;
padding: 0.65rem 1.25rem;
position: absolute;
top: -100%;
z-index: 10000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
outline: 3px solid #ffffff;
outline-offset: 2px;
}
/* =========================================================
ACCESSIBILITY — GLOBAL FOCUS RINGS
Applied via :focus-visible to avoid showing on mouse click
========================================================= */
body.sidesa-admin :focus-visible {
outline: 3px solid rgba(15, 95, 86, 0.5);
outline-offset: var(--admin-focus-ring-offset);
border-radius: 4px;
}
/* Specific overrides for elements that have their own border radius */
body.sidesa-admin .btn:focus-visible {
outline: 3px solid rgba(15, 95, 86, 0.5);
outline-offset: 2px;
}
body.sidesa-admin .form-control:focus,
body.sidesa-admin .custom-select:focus {
border-color: var(--admin-primary);
box-shadow: 0 0 0 3px rgba(15, 95, 86, 0.2);
outline: none;
}
body.sidesa-admin .nav-link:focus-visible,
body.sidesa-admin .dropdown-item:focus-visible {
outline: 3px solid rgba(15, 95, 86, 0.5);
outline-offset: 1px;
}
/* =========================================================
TOPBAR / NAVBAR
========================================================= */
body.sidesa-admin .main-header.admin-topbar {
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid var(--admin-border);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(20, 35, 28, 0.04);
}
body.sidesa-admin .main-header .nav-link {
color: var(--admin-text);
}
body.sidesa-admin .admin-topbar__meta {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.1rem;
padding-left: 0.5rem;
}
body.sidesa-admin .admin-topbar__kicker {
color: var(--admin-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.sidesa-admin .admin-topbar__title {
color: var(--admin-text);
font-size: 0.95rem;
font-weight: 700;
}
body.sidesa-admin .admin-topbar__date {
align-items: center;
background: var(--admin-surface-soft);
border: 1px solid var(--admin-border);
border-radius: 999px;
color: var(--admin-muted);
display: inline-flex;
font-size: 0.85rem;
font-weight: 600;
padding: 0.5rem 0.9rem;
}
/* User Toggle Pill */
body.sidesa-admin .admin-user-toggle {
align-items: center;
background: var(--admin-surface-soft);
border: 1px solid var(--admin-border);
border-radius: 999px;
display: inline-flex;
gap: 0.65rem;
padding: 0.35rem 0.9rem 0.35rem 0.45rem;
transition: background 0.15s ease, border-color 0.15s ease;
}
body.sidesa-admin .admin-user-toggle:hover {
background: var(--admin-surface);
border-color: var(--admin-primary);
}
body.sidesa-admin .admin-user-toggle__avatar {
border: 2px solid rgba(15, 95, 86, 0.14);
border-radius: 50%;
height: 2rem;
object-fit: cover;
width: 2rem;
}
body.sidesa-admin .admin-user-toggle__text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
body.sidesa-admin .admin-user-toggle__name {
color: var(--admin-text);
font-size: 0.84rem;
font-weight: 700;
}
body.sidesa-admin .admin-user-toggle__role {
color: var(--admin-muted);
font-size: 0.74rem;
font-weight: 600;
}
/* Dropdown */
body.sidesa-admin .dropdown-menu {
background: rgba(255, 255, 255, 0.99);
border: 1px solid var(--admin-border);
border-radius: 1rem;
box-shadow: var(--admin-shadow);
padding: 0.65rem;
}
body.sidesa-admin .dropdown-item {
border-radius: 0.8rem;
color: var(--admin-text);
font-weight: 600;
padding: 0.7rem 0.85rem;
}
body.sidesa-admin .dropdown-item:hover,
body.sidesa-admin .dropdown-item:focus {
background: var(--admin-surface-soft);
}
/* =========================================================
SIDEBAR
========================================================= */
body.sidesa-admin .main-sidebar.admin-sidebar {
/*
* Deep forest green — chosen to feel authoritative and governmental,
* distinct from the teal (#0f5f56) accent used in content.
* Contrast of sidebar nav text (#eff7f4 = ~90% white) on this bg ≈ 9.8:1 (AAA)
*/
background: linear-gradient(180deg, #0d1f1a 0%, #152b25 50%, #1c3a33 100%);
box-shadow: 4px 0 20px rgba(16, 36, 31, 0.15);
}
body.sidesa-admin .brand-link {
align-items: center;
border-bottom: 1px solid rgba(234, 244, 240, 0.1);
color: #f0faf6;
display: flex;
gap: 0.9rem;
padding: 1.1rem 1rem;
transition: color 0.15s ease;
}
body.sidesa-admin .brand-link:hover {
color: #ffffff;
}
body.sidesa-admin .brand-image {
background: rgba(255, 255, 255, 0.14);
border-radius: 16px;
box-shadow: none;
height: 2.75rem;
margin-left: 0;
margin-right: 0;
object-fit: cover;
padding: 0.28rem;
width: 2.75rem;
}
body.sidesa-admin .brand-text {
display: inline-flex;
flex-direction: column;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
margin-top: 0;
white-space: normal;
color: #f0faf6;
}
/* Subtitle appears automatically via CSS — no extra markup needed */
body.sidesa-admin .brand-text::after {
color: rgba(239, 247, 244, 0.65);
content: "Ruang administrasi desa";
font-size: 0.7rem;
font-weight: 500;
margin-top: 0.18rem;
}
body.sidesa-admin .sidebar {
padding: 0 0.75rem 1.5rem;
}
/* User panel in sidebar */
body.sidesa-admin .admin-user-panel {
align-items: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(239, 247, 244, 0.08);
border-radius: 1rem;
margin: 0.85rem 0 1rem;
padding: 0.85rem;
}
body.sidesa-admin .admin-user-panel .image img {
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: none;
height: 2.85rem;
object-fit: cover;
width: 2.85rem;
}
body.sidesa-admin .admin-user-panel .info {
overflow: hidden;
padding-left: 0.8rem;
}
body.sidesa-admin .admin-user-panel .info a {
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.sidesa-admin .admin-user-panel__role {
color: rgba(239, 247, 244, 0.72);
display: block;
font-size: 0.78rem;
font-weight: 600;
margin-top: 0.14rem;
}
/* Sidebar search */
body.sidesa-admin .form-control-sidebar {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(239, 247, 244, 0.1);
color: #eef7f3;
}
body.sidesa-admin .form-control-sidebar::placeholder {
color: rgba(239, 247, 244, 0.5);
}
body.sidesa-admin .btn-sidebar {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(239, 247, 244, 0.1);
color: #eef7f3;
}
/* Nav items */
body.sidesa-admin .nav-sidebar > .nav-item {
margin-bottom: 0.15rem;
}
body.sidesa-admin .nav-sidebar .nav-header {
color: rgba(239, 247, 244, 0.5);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
margin-top: 1.25rem;
padding: 0.75rem 0.6rem 0.35rem;
text-transform: uppercase;
}
body.sidesa-admin .nav-sidebar .nav-link {
align-items: center;
border-radius: 0.8rem;
color: rgba(239, 247, 244, 0.9);
display: flex;
font-size: 0.92rem;
font-weight: 600;
gap: 0.7rem;
margin-bottom: 0.1rem;
min-height: 2.75rem;
padding: 0.72rem 0.9rem;
transition: background 0.15s ease, color 0.15s ease;
}
body.sidesa-admin .nav-sidebar .nav-link .nav-icon {
color: rgba(239, 247, 244, 0.7);
font-size: 0.95rem;
margin-right: 0;
text-align: center;
transition: color 0.15s ease;
width: 1.1rem;
}
body.sidesa-admin .nav-sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.09);
color: #ffffff;
}
body.sidesa-admin .nav-sidebar .nav-link:hover .nav-icon {
color: rgba(239, 247, 244, 0.95);
}
body.sidesa-admin .nav-sidebar .nav-link.active {
background: linear-gradient(90deg, #e8f5f0 0%, #d5edea 100%);
color: #0a3d36;
box-shadow: 0 2px 10px rgba(6, 23, 20, 0.12);
}
body.sidesa-admin .nav-sidebar .nav-link.active .nav-icon {
color: var(--admin-primary);
}
body.sidesa-admin .nav-treeview > .nav-item > .nav-link {
color: rgba(239, 247, 244, 0.82);
margin-left: 0.4rem;
min-height: 2.4rem;
padding-left: 1.2rem;
}
/* Sidebar logout separator */
body.sidesa-admin .nav-sidebar .nav-item--logout {
margin-top: 0.5rem;
border-top: 1px solid rgba(239, 247, 244, 0.08);
padding-top: 0.5rem;
}
body.sidesa-admin .nav-sidebar .nav-item--logout .nav-link {
color: rgba(239, 100, 100, 0.85);
}
body.sidesa-admin .nav-sidebar .nav-item--logout .nav-link:hover {
background: rgba(139, 30, 30, 0.2);
color: #ffb3b3;
}
/* =========================================================
CONTENT HEADER (Page title bar)
========================================================= */
body.sidesa-admin .content-header {
padding: 1.1rem 0.75rem 0;
}
body.sidesa-admin .admin-page-shell {
align-items: flex-start;
background: var(--admin-surface);
border: 1px solid var(--admin-border);
border-left: 4px solid var(--admin-primary); /* Distinctive left-border accent */
border-radius: 0 0.75rem 0.75rem 0;
box-shadow: var(--admin-shadow-soft);
display: flex;
gap: 1rem;
justify-content: space-between;
padding: 1.1rem 1.35rem;
}
body.sidesa-admin .admin-page-shell h1 {
color: var(--admin-text);
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 0.3rem;
}
body.sidesa-admin .admin-page-shell p {
color: var(--admin-muted);
font-size: 0.9rem;
margin-bottom: 0;
max-width: 48rem;
}
body.sidesa-admin .admin-page-kicker {
color: var(--admin-primary-strong);
display: inline-flex;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
margin-bottom: 0.35rem;
text-transform: uppercase;
}
/* Breadcrumb */
body.sidesa-admin .admin-breadcrumb {
background: var(--admin-surface-soft);
border: 1px solid var(--admin-border);
border-radius: 999px;
flex-shrink: 0;
margin: 0;
padding: 0.5rem 0.9rem;
}
body.sidesa-admin .admin-breadcrumb .breadcrumb-item,
body.sidesa-admin .admin-breadcrumb .breadcrumb-item a {
color: var(--admin-muted);
font-size: 0.82rem;
font-weight: 600;
}
body.sidesa-admin .admin-breadcrumb .breadcrumb-item.active {
color: var(--admin-text);
}
/* =========================================================
MAIN CONTENT AREA
========================================================= */
body.sidesa-admin .content {
padding: 1rem 0.75rem 2rem;
}
/* =========================================================
CARDS
========================================================= */
body.sidesa-admin .card {
background: var(--admin-surface);
border: 1px solid var(--admin-border);
border-radius: 0.75rem;
box-shadow: var(--admin-shadow-soft);
overflow: hidden;
}
body.sidesa-admin .card-outline {
border-top: 0;
}
body.sidesa-admin .card-header {
align-items: center;
background: transparent;
border-bottom: 1px solid var(--admin-border);
display: flex;
gap: 1rem;
justify-content: space-between;
padding: 0.9rem 1.25rem;
}
body.sidesa-admin .card-title {
color: var(--admin-text);
font-size: 0.95rem;
font-weight: 800;
letter-spacing: -0.015em;
margin-bottom: 0;
}
body.sidesa-admin .card-body,
body.sidesa-admin .card-footer {
padding: 1.2rem 1.25rem;
}
/* =========================================================
TABLES
Structured for readability, not cramming.
"Dossier Layout" principle: less data in cells, more structure.
========================================================= */
body.sidesa-admin .table {
color: var(--admin-text);
font-size: 0.9rem;
margin-bottom: 0;
}
body.sidesa-admin .table thead th {
/*
* Strong uppercase tracks look official/governmental,
* clearly separate from the data below.
*/
border-bottom: 2px solid var(--admin-border);
border-top: 0;
color: var(--admin-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.07em;
padding: 0.75rem 0.85rem;
text-transform: uppercase;
white-space: nowrap;
}
body.sidesa-admin .table tbody tr {
transition: background 0.1s ease;
}
body.sidesa-admin .table tbody tr:hover {
background: var(--admin-surface-soft);
}
body.sidesa-admin .table tbody td {
border-color: var(--admin-border);
padding: 0.9rem 0.85rem;
vertical-align: middle;
}
body.sidesa-admin .table-responsive {
border-radius: 0.5rem;
}
/*
* "Cell Stack" component — replaces
-separated data dumps in cells.
* Use with children inside a
.
* Each span is a distinct data point with clear typographic hierarchy.
*/
body.sidesa-admin .cell-stack {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
body.sidesa-admin .cell-stack__primary {
color: var(--admin-text);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.3;
}
body.sidesa-admin .cell-stack__secondary {
color: var(--admin-muted);
font-size: 0.8rem;
line-height: 1.35;
}
body.sidesa-admin .cell-stack__meta {
color: var(--admin-muted);
font-size: 0.75rem;
font-style: italic;
}
/* =========================================================
BUTTONS
========================================================= */
body.sidesa-admin .btn {
border-radius: 0.6rem;
font-weight: 700;
font-size: 0.875rem;
min-height: 2.4rem;
padding: 0.52rem 0.9rem;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.sidesa-admin .btn-sm {
border-radius: 0.5rem;
font-size: 0.82rem;
min-height: auto;
padding: 0.38rem 0.7rem;
}
body.sidesa-admin .btn-success,
body.sidesa-admin .bg-success {
background: var(--admin-primary) !important;
border-color: var(--admin-primary) !important;
color: #ffffff !important;
}
body.sidesa-admin .btn-success:hover,
body.sidesa-admin .btn-success:focus {
background: var(--admin-primary-strong) !important;
border-color: var(--admin-primary-strong) !important;
}
body.sidesa-admin .btn-primary,
body.sidesa-admin .bg-primary {
background: var(--admin-secondary) !important;
border-color: var(--admin-secondary) !important;
color: #ffffff !important;
}
body.sidesa-admin .btn-primary:hover,
body.sidesa-admin .btn-primary:focus {
background: #0b3f6a !important;
border-color: #0b3f6a !important;
}
body.sidesa-admin .btn-warning,
body.sidesa-admin .bg-warning {
background: var(--admin-warning) !important;
border-color: var(--admin-warning) !important;
color: #ffffff !important;
}
body.sidesa-admin .btn-danger,
body.sidesa-admin .bg-danger {
background: var(--admin-danger) !important;
border-color: var(--admin-danger) !important;
color: #ffffff !important;
}
body.sidesa-admin .btn-light {
background: var(--admin-surface-soft);
border-color: var(--admin-border);
color: var(--admin-text);
}
body.sidesa-admin .btn-light:hover {
background: var(--admin-border);
}
/* =========================================================
BADGES
========================================================= */
body.sidesa-admin .badge {
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.01em;
padding: 0.4rem 0.65rem;
}
body.sidesa-admin .badge-warning {
background: var(--status-pending-bg);
border-color: var(--status-pending-border);
color: var(--status-pending-text);
}
body.sidesa-admin .badge-primary {
background: var(--status-process-bg);
border-color: var(--status-process-border);
color: var(--status-process-text);
}
body.sidesa-admin .badge-success {
background: var(--status-done-bg);
border-color: var(--status-done-border);
color: var(--status-done-text);
}
body.sidesa-admin .badge-danger {
background: var(--status-danger-bg);
border-color: var(--status-danger-border);
color: var(--status-danger-text);
}
/* =========================================================
STATUS CHIPS
WCAG 1.4.1 — Use of Color:
Each status chip has a text prefix symbol (not just a color).
Pending = "⏳", Process = "◎", Done = "✓", Error = "⚠"
========================================================= */
body.sidesa-admin .status-chip {
align-items: center;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
font-size: 0.74rem;
font-weight: 800;
gap: 0.3rem;
padding: 0.38rem 0.7rem;
white-space: nowrap;
}
/* Prefix icon via ::before — this is the WCAG non-color indicator */
body.sidesa-admin .status-chip::before {
font-style: normal;
font-size: 0.7em;
line-height: 1;
}
body.sidesa-admin .status-chip--pending {
background: var(--status-pending-bg);
border-color: var(--status-pending-border);
color: var(--status-pending-text);
}
body.sidesa-admin .status-chip--pending::before {
content: "⏳";
}
body.sidesa-admin .status-chip--process {
background: var(--status-process-bg);
border-color: var(--status-process-border);
color: var(--status-process-text);
}
body.sidesa-admin .status-chip--process::before {
content: "◎";
}
body.sidesa-admin .status-chip--done {
background: var(--status-done-bg);
border-color: var(--status-done-border);
color: var(--status-done-text);
}
body.sidesa-admin .status-chip--done::before {
content: "✓";
}
body.sidesa-admin .status-chip--danger {
background: var(--status-danger-bg);
border-color: var(--status-danger-border);
color: var(--status-danger-text);
}
body.sidesa-admin .status-chip--danger::before {
content: "⚠";
}
/* =========================================================
STATUS PIPELINE
DESIGN DECISION 2: "Status as a Visual Pipeline"
Instead of a single badge, the workflow is shown as a
step-progress indicator. Used on the edit/detail page.
Non-technical users understand "step 2 of 6" immediately.
========================================================= */
.status-pipeline {
background: var(--admin-surface-soft);
border: 1px solid var(--admin-border);
border-radius: 0.75rem;
overflow: hidden;
padding: 0.85rem 0.75rem;
margin-bottom: 1rem;
}
.status-pipeline__label {
color: var(--admin-muted);
display: block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
margin-bottom: 0.65rem;
text-transform: uppercase;
}
.status-pipeline__track {
display: flex;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
/* Connecting line behind the steps */
.status-pipeline__track::before {
background: var(--admin-border);
content: "";
height: 2px;
left: 0;
position: absolute;
right: 0;
top: 0.85rem;
z-index: 0;
}
.status-pipeline__step {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
gap: 0.35rem;
position: relative;
text-align: center;
}
.status-pipeline__dot {
align-items: center;
background: var(--admin-surface);
border: 2px solid var(--admin-border);
border-radius: 50%;
display: flex;
font-size: 0.65rem;
height: 1.7rem;
justify-content: center;
position: relative;
transition: all 0.2s ease;
width: 1.7rem;
z-index: 1;
}
.status-pipeline__text {
color: var(--admin-muted);
font-size: 0.68rem;
font-weight: 600;
line-height: 1.3;
max-width: 5rem;
}
/* Past steps */
.status-pipeline__step--done .status-pipeline__dot {
background: var(--status-done-bg);
border-color: var(--status-done-border);
color: var(--status-done-text);
}
.status-pipeline__step--done .status-pipeline__text {
color: var(--status-done-text);
}
/* Current active step */
.status-pipeline__step--active .status-pipeline__dot {
background: var(--admin-primary);
border-color: var(--admin-primary);
box-shadow: 0 0 0 4px rgba(15, 95, 86, 0.2);
color: #ffffff;
}
.status-pipeline__step--active .status-pipeline__text {
color: var(--admin-primary-strong);
font-weight: 800;
}
/* Future steps */
.status-pipeline__step--future .status-pipeline__dot {
background: var(--admin-surface);
border-color: var(--admin-border);
color: var(--admin-muted);
opacity: 0.6;
}
/* =========================================================
FORMS
Grouped with |