/* CMMS — plant-floor teal & safety palette */
[x-cloak] { display: none !important; }

:root {
    --cmms-ink: #0F1C2E;
    --cmms-ink-soft: #1A2B42;
    --cmms-steel: #5A6B7F;
    --cmms-surface: #E8EEF4;
    --cmms-surface-mid: #F4F7FA;
    --cmms-panel: #FFFFFF;
    --cmms-accent: #0D8A6A;
    --cmms-accent-hover: #0A6F55;
    --cmms-accent-soft: #E6F7F2;
    --cmms-accent-glow: rgba(13, 138, 106, 0.18);
    --cmms-warn: #C2410C;
    --cmms-warn-soft: #FFF4E5;
    --cmms-danger: #B91C1C;
    --cmms-danger-soft: #FEECEC;
    --cmms-info: #1D4ED8;
    --cmms-info-soft: #E8EFFC;
    --cmms-border: #D0DAE6;
    --cmms-sidebar-width: 268px;
    --cmms-topbar-height: 60px;
    --cmms-radius: 10px;
    --cmms-radius-sm: 7px;
    --cmms-shadow: 0 1px 2px rgba(15, 28, 46, 0.04), 0 4px 12px rgba(15, 28, 46, 0.05);
    --cmms-shadow-lg: 0 8px 28px rgba(15, 28, 46, 0.1);
    --cmms-font: "Segoe UI", system-ui, sans-serif;
    --cmms-font-display: "Segoe UI", system-ui, sans-serif;
    --cmms-brand-font: var(--cmms-font-display);
    --cmms-brand-title-weight: 700;
    --cmms-brand-title-style: normal;
    --cmms-brand-title-size: 1.4rem;
    --cmms-brand-guest-title-size: 1.85rem;
    --cmms-brand-title-color: #FFFFFF;
    --cmms-brand-tagline-color: #9CA8B8;
    --cmms-brand-align-items: flex-start;
    --cmms-brand-text-align: left;
    --cmms-brand-tagline-transform: uppercase;
    --cmms-brand-tagline-tracking: 0.06em;
    --cmms-footer-text-align: left;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.cmms-body {
    font-family: var(--cmms-font);
    background:
        radial-gradient(ellipse 900px 480px at 12% -8%, rgba(13, 138, 106, 0.07), transparent 55%),
        radial-gradient(ellipse 700px 420px at 100% 0%, rgba(29, 78, 216, 0.05), transparent 50%),
        linear-gradient(180deg, var(--cmms-surface-mid) 0%, var(--cmms-surface) 100%);
    background-attachment: fixed;
    color: var(--cmms-ink);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.cmms-body h1,
.cmms-body h2,
.cmms-body h3,
.cmms-body h4,
.cmms-body h5 {
    font-family: var(--cmms-font-display);
    color: var(--cmms-ink);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.text-steel { color: var(--cmms-steel) !important; }
.text-accent { color: var(--cmms-accent) !important; }

/* Layout shell */
.cmms-app {
    display: flex;
    min-height: 100vh;
}

.cmms-sidebar {
    width: var(--cmms-sidebar-width);
    background:
        linear-gradient(165deg, var(--cmms-ink-soft) 0%, var(--cmms-ink) 48%, #0A1524 100%);
    color: #E8ECF1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(15, 28, 46, 0.18);
}

.cmms-sidebar-brand {
    padding: 1.15rem 1.25rem 1.1rem;
    font-family: var(--cmms-brand-font);
    font-weight: var(--cmms-brand-title-weight);
    font-style: var(--cmms-brand-title-style);
    font-size: var(--cmms-brand-title-size);
    letter-spacing: -0.03em;
    color: var(--cmms-brand-title-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: var(--cmms-brand-text-align);
}

.cmms-sidebar-brand--with-logo {
    flex-direction: column;
    align-items: var(--cmms-brand-align-items);
    gap: 0.75rem;
}

.cmms-sidebar-brand--align-center:not(.cmms-sidebar-brand--with-logo),
.cmms-sidebar-brand--align-end:not(.cmms-sidebar-brand--with-logo) {
    justify-content: var(--cmms-brand-align-items);
}

.cmms-sidebar-brand:hover {
    color: var(--cmms-brand-title-color);
}

.cmms-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(145deg, #14B890 0%, var(--cmms-accent) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(13, 138, 106, 0.35);
    flex-shrink: 0;
}

.cmms-brand-logo-row {
    display: flex;
    width: 100%;
    justify-content: var(--cmms-brand-align-items);
}

.cmms-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    background: transparent;
}

.cmms-brand-text {
    min-width: 0;
    line-height: 1.15;
    text-align: var(--cmms-brand-text-align);
}

.cmms-brand-tagline {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: var(--cmms-brand-tagline-tracking);
    text-transform: var(--cmms-brand-tagline-transform);
    color: var(--cmms-brand-tagline-color);
    margin-top: 0.1rem;
}

.cmms-footer {
    margin-top: auto;
    padding: 0.85rem 1.5rem 1.15rem;
    font-size: 0.8rem;
    color: var(--cmms-steel);
    border-top: 1px solid rgba(15, 28, 46, 0.08);
    background: transparent;
    text-align: var(--cmms-footer-text-align);
}

.cmms-brand-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid rgba(15, 28, 46, 0.12);
    border-radius: 10px;
    background: #f8fafc;
}

.cmms-brand-preview img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}

.cmms-brand-preview--favicon img {
    max-height: 32px;
    max-width: 32px;
}

.cmms-brand-style-preview {
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background:
        linear-gradient(165deg, var(--cmms-ink-soft) 0%, var(--cmms-ink) 55%, #0A1524 100%);
    color: #fff;
    padding: 1rem 1.15rem 0.85rem;
    overflow: hidden;
}

.cmms-brand-style-preview-inner {
    display: flex;
    flex-direction: column;
    align-items: var(--cmms-brand-align-items, flex-start);
    gap: 0.65rem;
    text-align: var(--cmms-brand-text-align, left);
}

.cmms-brand-style-preview-logo {
    display: flex;
    width: 100%;
    justify-content: var(--cmms-brand-align-items, flex-start);
}

.cmms-brand-style-preview-logo img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
}

.cmms-brand-style-preview-text {
    width: 100%;
}

.cmms-brand-style-preview-title {
    font-family: var(--cmms-brand-font, var(--cmms-font-display));
    font-weight: var(--cmms-brand-title-weight, 700);
    font-style: var(--cmms-brand-title-style, normal);
    font-size: var(--cmms-brand-title-size, 1.4rem);
    color: var(--cmms-brand-title-color, #FFFFFF);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.cmms-brand-style-preview-tagline {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: var(--cmms-brand-tagline-tracking, 0.06em);
    text-transform: var(--cmms-brand-tagline-transform, uppercase);
    color: var(--cmms-brand-tagline-color, #9CA8B8);
}

.cmms-brand-style-preview-footer {
    margin-top: 0.9rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: var(--cmms-footer-text-align, left);
}

.cmms-sidebar-search {
    padding: 0.75rem 0.85rem 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.cmms-sidebar-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.cmms-sidebar-search-field > i {
    position: absolute;
    left: 0.7rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.cmms-sidebar-search-input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: var(--cmms-radius-sm);
    padding: 0.45rem 0.7rem 0.45rem 2rem;
    font-size: 0.85rem;
    line-height: 1.3;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cmms-sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.cmms-sidebar-search-input:focus {
    border-color: rgba(94, 234, 212, 0.45);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(13, 138, 106, 0.22);
}

.cmms-sidebar-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0.85rem;
    width: 0.85rem;
    background: rgba(255, 255, 255, 0.45);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3.2 3.2a.75.75 0 0 1 1.06 0L8 6.94l3.74-3.74a.75.75 0 1 1 1.06 1.06L9.06 8l3.74 3.74a.75.75 0 1 1-1.06 1.06L8 9.06l-3.74 3.74a.75.75 0 0 1-1.06-1.06L6.94 8 3.2 4.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3.2 3.2a.75.75 0 0 1 1.06 0L8 6.94l3.74-3.74a.75.75 0 1 1 1.06 1.06L9.06 8l3.74 3.74a.75.75 0 1 1-1.06 1.06L8 9.06l-3.74 3.74a.75.75 0 0 1-1.06-1.06L6.94 8 3.2 4.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

.cmms-sidebar-search-empty {
    margin: 0.55rem 0.15rem 0.15rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.cmms-nav-section.is-filtered-out,
.cmms-nav-link.is-filtered-out {
    display: none;
}

.cmms-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 0 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cmms-nav-section {
    padding: 0.85rem 1.25rem 0.35rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
}

.cmms-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.1rem 0.65rem;
    padding: 0.55rem 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--cmms-radius-sm);
    border-left: none;
    transition: background 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.cmms-nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    transform: translateX(3px);
}

.cmms-nav-link.active {
    background: linear-gradient(90deg, rgba(13, 138, 106, 0.35), rgba(13, 138, 106, 0.12));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--cmms-accent);
}

.cmms-nav-link.active:hover {
    transform: none;
}

.cmms-nav-emoji {
    font-size: 1.05rem;
    line-height: 1;
    width: 1.35rem;
    text-align: center;
    flex-shrink: 0;
}

.cmms-nav-link i {
    font-size: 1.05rem;
    opacity: 0.85;
}

.cmms-main {
    flex: 1;
    margin-left: var(--cmms-sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left 0.25s ease;
}

.cmms-topbar {
    height: var(--cmms-topbar-height);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cmms-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.35rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.cmms-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
    color: var(--cmms-steel);
}

.cmms-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
    border-radius: 999px;
    color: var(--cmms-ink);
    font-weight: 500;
    min-width: 0;
}

.cmms-user-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

.cmms-logout-icon {
    display: none;
}

.cmms-content {
    padding: 1.65rem 1.5rem 2.25rem;
    flex: 1;
}

.cmms-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    padding: 0.4rem 0.65rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--cmms-ink);
    box-shadow: var(--cmms-shadow);
    flex-shrink: 0;
}

/* Panels & cards */
.cmms-panel {
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    box-shadow: var(--cmms-shadow);
    overflow: hidden;
}

/* A searchable-select dropdown is absolutely positioned inside the panel, so the
   panel's `overflow: hidden` would clip it at the panel edge and the following
   table panel would paint over it. The recipient picker's result list has exactly
   the same problem. Let those panels stack above their siblings. */
.cmms-panel:has(.cmms-searchable-select),
.cmms-panel:has(.cmms-recipient-picker),
.cmms-panel:has(.cmms-report-export-menu),
.cmms-panel:has(.cmms-datatable-export) {
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* Lift the picker's panel one step further while its result list is open, so no
   neighbouring panel can paint over the list. */
.cmms-panel:has(.cmms-recipient-picker.is-open) {
    z-index: 3;
}

/* `overflow: visible` lets a header background spill past the rounded corners,
   so the first and last children round themselves. */
.cmms-panel:has(.cmms-recipient-picker) > :first-child,
.cmms-panel:has(.cmms-report-export-menu) > :first-child,
.cmms-panel:has(.cmms-datatable-export) > :first-child {
    border-top-left-radius: var(--cmms-radius);
    border-top-right-radius: var(--cmms-radius);
}

.cmms-panel:has(.cmms-recipient-picker) > :last-child,
.cmms-panel:has(.cmms-report-export-menu) > :last-child,
.cmms-panel:has(.cmms-datatable-export) > :last-child {
    border-bottom-left-radius: var(--cmms-radius);
    border-bottom-right-radius: var(--cmms-radius);
}

.cmms-panel-header {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--cmms-border);
    font-weight: 600;
    font-size: 0.95rem;
    background: linear-gradient(180deg, #FAFCFD 0%, #F5F8FB 100%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cmms-panel-body {
    padding: 1.25rem;
}

/* KPI cards */
.cmms-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.cmms-kpi {
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    padding: 1.15rem 1.2rem 1.2rem;
    box-shadow: var(--cmms-shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.cmms-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cmms-accent);
}

.cmms-kpi.kpi-warn::before { background: var(--cmms-warn); }
.cmms-kpi.kpi-danger::before { background: var(--cmms-danger); }
.cmms-kpi.kpi-info::before { background: var(--cmms-info); }

.cmms-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--cmms-shadow-lg);
}

.cmms-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.cmms-kpi-emoji {
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.92;
}

.cmms-kpi-label {
    font-size: 0.78rem;
    color: var(--cmms-steel);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.2rem;
}

.cmms-kpi-value {
    font-family: var(--cmms-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cmms-ink);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.cmms-kpi-value.accent { color: var(--cmms-accent); }
.cmms-kpi-value.warn { color: var(--cmms-warn); }
.cmms-kpi-value.danger { color: var(--cmms-danger); }
.cmms-kpi-value.info { color: var(--cmms-info); }

/* Page header */
.cmms-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cmms-page-header h1 {
    font-size: 1.55rem;
    margin: 0 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cmms-page-header .page-emoji {
    font-size: 1.35rem;
    line-height: 1;
}

.cmms-page-header .subtitle {
    color: var(--cmms-steel);
    font-size: 0.95rem;
    margin: 0;
}

/* Page purpose / outcome strip */
.cmms-page-purpose {
    background: var(--cmms-accent-soft);
    border: 1px solid rgba(13, 138, 106, 0.18);
    border-radius: var(--cmms-radius);
    padding: 0.85rem 1.1rem;
    margin: -0.75rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cmms-page-purpose-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 9.5rem) 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
}

.cmms-page-purpose-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cmms-accent);
    padding-top: 0.1rem;
}

.cmms-page-purpose-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--cmms-ink, #1a2b3c);
    line-height: 1.45;
}

@media (max-width: 576px) {
    .cmms-page-purpose-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* Getting started guide sections */
.cmms-guide-section {
    margin-bottom: 1.5rem;
}

.cmms-guide-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmms-guide-flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cmms-guide-flow-item {
    background: var(--cmms-accent-soft);
    border: 1px solid rgba(13, 138, 106, 0.2);
    border-radius: var(--cmms-radius-sm);
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cmms-accent);
}

.cmms-guide-flow-arrow {
    color: var(--cmms-steel);
    font-size: 0.85rem;
}

.cmms-guide-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.cmms-guide-role {
    background: #f7faf9;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    padding: 0.85rem 1rem;
}

.cmms-guide-role h4 {
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.cmms-guide-role p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cmms-steel);
    line-height: 1.4;
}

.cmms-guide-process-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--cmms-steel);
    font-size: 0.92rem;
}

.cmms-guide-process-list li + li {
    margin-top: 0.35rem;
}

/* Buttons */
.btn-cmms {
    background: linear-gradient(180deg, #109872 0%, var(--cmms-accent) 100%);
    border-color: var(--cmms-accent);
    color: #fff;
    font-weight: 600;
    border-radius: var(--cmms-radius-sm);
    box-shadow: 0 2px 6px var(--cmms-accent-glow);
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-cmms:hover,
.btn-cmms:focus {
    background: var(--cmms-accent-hover);
    border-color: var(--cmms-accent-hover);
    color: #fff;
    box-shadow: 0 3px 10px rgba(13, 138, 106, 0.28);
    transform: translateY(-1px);
}

.btn-outline-cmms {
    color: var(--cmms-accent);
    border-color: #9AD4C4;
    background: var(--cmms-accent-soft);
    font-weight: 600;
    border-radius: var(--cmms-radius-sm);
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-outline-cmms:hover {
    background: var(--cmms-accent);
    border-color: var(--cmms-accent);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border-radius: var(--cmms-radius-sm);
}

/* Compact icon actions (tables + toolbars) */
.cmms-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.cmms-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
}

.cmms-action-icon .bi {
    font-size: 1rem;
    line-height: 1;
}

.cmms-action-group > form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 575.98px) {
    .cmms-action-icon {
        width: 2.375rem;
        height: 2.375rem;
    }

    .cmms-action-icon .bi {
        font-size: 1.05rem;
    }

    .cmms-table th.text-end,
    .cmms-table td.text-end {
        width: 1%;
        white-space: nowrap;
    }
}

/* Status pills */
.cmms-badge {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    background: #E8ECF1;
    color: var(--cmms-steel);
}

.cmms-badge-admin { background: #EDE9FE; color: #6D28D9; }
.cmms-badge-manager { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-technician { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-requester { background: #F3F4F6; color: #4B5563; }
.cmms-badge-viewer { background: #E0F2FE; color: #0369A1; }
.cmms-badge-in { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-out { background: var(--cmms-danger-soft); color: #991B1B; }
.cmms-badge-adjustment { background: var(--cmms-warn-soft); color: var(--cmms-warn); }
.cmms-badge-create { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-update { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-delete { background: var(--cmms-danger-soft); color: #991B1B; }

.cmms-badge-open { background: #E0F2FE; color: #0369A1; }
.cmms-badge-assigned { background: #EDE9FE; color: #6D28D9; }
.cmms-badge-in_progress { background: var(--cmms-warn-soft); color: #9A3412; }
.cmms-badge-on_hold { background: #F3F4F6; color: #4B5563; }
.cmms-badge-completed { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-cancelled { background: var(--cmms-danger-soft); color: #991B1B; }

.cmms-badge-low { background: #F0F3F7; color: var(--cmms-steel); }
.cmms-badge-medium { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-high { background: var(--cmms-warn-soft); color: var(--cmms-warn); }
.cmms-badge-urgent { background: var(--cmms-danger-soft); color: var(--cmms-danger); }
.cmms-badge-critical { background: var(--cmms-danger-soft); color: var(--cmms-danger); }

.cmms-badge-active { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-inactive { background: #F3F4F6; color: #4B5563; }
.cmms-badge-under_maintenance { background: var(--cmms-warn-soft); color: var(--cmms-warn); }
.cmms-badge-retired { background: var(--cmms-danger-soft); color: #991B1B; }

.cmms-badge-expired { background: var(--cmms-danger-soft); color: #991B1B; }
.cmms-badge-expiring { background: var(--cmms-warn-soft); color: var(--cmms-warn); }
.cmms-badge-biomedical { background: #FCE7F3; color: #9D174D; }
.cmms-badge-manual,
.cmms-badge-warranty,
.cmms-badge-drawing,
.cmms-badge-certificate,
.cmms-badge-photo,
.cmms-badge-video,
.cmms-badge-procedure,
.cmms-badge-other {
    background: #E8ECF1;
    color: var(--cmms-steel);
}

.cmms-asset-photo {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.cmms-asset-video {
    display: block;
    width: 100%;
    max-height: 280px;
    background: #000;
}

.cmms-asset-photo-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--cmms-radius-sm);
    border: 1px solid var(--cmms-border);
}

.cmms-badge-draft { background: #F3F4F6; color: #4B5563; }
.cmms-badge-sent { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-received { background: var(--cmms-accent-soft); color: #065F46; }

.cmms-badge-corrective,
.cmms-badge-preventive,
.cmms-badge-predictive,
.cmms-badge-emergency,
.cmms-badge-inspection {
    background: #E8ECF1;
    color: var(--cmms-steel);
}

/* Report category tones (Reports index "Categories" view) */
.cmms-badge-cat-regions { background: #EDE9FE; color: #6D28D9; }
.cmms-badge-cat-assets { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-cat-locations { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-cat-reliability { background: var(--cmms-warn-soft); color: var(--cmms-warn); }
.cmms-badge-cat-alerts { background: var(--cmms-danger-soft); color: var(--cmms-danger); }
.cmms-badge-cat-planning { background: #FCE7F3; color: #9D174D; }
.cmms-badge-cat-parts { background: #E0F2FE; color: #0369A1; }
.cmms-badge-cat-compliance { background: #CCFBF1; color: #0F766E; }
.cmms-badge-cat-resources { background: #F3F4F6; color: #4B5563; }
.cmms-badge-cat-custom { background: #E0E7FF; color: #4338CA; }
.cmms-badge-cat-default { background: #E8ECF1; color: var(--cmms-steel); }

.cmms-report-card { position: relative; overflow: hidden; }
.cmms-report-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--cmms-cat-color, var(--cmms-steel));
}
.cmms-report-card-cat-regions { --cmms-cat-color: #6D28D9; }
.cmms-report-card-cat-assets { --cmms-cat-color: var(--cmms-accent); }
.cmms-report-card-cat-locations { --cmms-cat-color: var(--cmms-info); }
.cmms-report-card-cat-reliability { --cmms-cat-color: var(--cmms-warn); }
.cmms-report-card-cat-alerts { --cmms-cat-color: var(--cmms-danger); }
.cmms-report-card-cat-planning { --cmms-cat-color: #9D174D; }
.cmms-report-card-cat-parts { --cmms-cat-color: #0369A1; }
.cmms-report-card-cat-compliance { --cmms-cat-color: #0F766E; }
.cmms-report-card-cat-resources { --cmms-cat-color: #4B5563; }
.cmms-report-card-cat-custom { --cmms-cat-color: #4338CA; }

.cmms-report-category-tabs .nav-link.cat-active-regions.active { color: #6D28D9; border-color: #6D28D9 #6D28D9 #fff; }
.cmms-report-category-tabs .nav-link.cat-active-assets.active { color: var(--cmms-accent); border-color: var(--cmms-accent) var(--cmms-accent) #fff; }
.cmms-report-category-tabs .nav-link.cat-active-locations.active { color: var(--cmms-info); border-color: var(--cmms-info) var(--cmms-info) #fff; }
.cmms-report-category-tabs .nav-link.cat-active-reliability.active { color: var(--cmms-warn); border-color: var(--cmms-warn) var(--cmms-warn) #fff; }
.cmms-report-category-tabs .nav-link.cat-active-alerts.active { color: var(--cmms-danger); border-color: var(--cmms-danger) var(--cmms-danger) #fff; }
.cmms-report-category-tabs .nav-link.cat-active-planning.active { color: #9D174D; border-color: #9D174D #9D174D #fff; }
.cmms-report-category-tabs .nav-link.cat-active-parts.active { color: #0369A1; border-color: #0369A1 #0369A1 #fff; }
.cmms-report-category-tabs .nav-link.cat-active-compliance.active { color: #0F766E; border-color: #0F766E #0F766E #fff; }
.cmms-report-category-tabs .nav-link.cat-active-resources.active { color: #4B5563; border-color: #4B5563 #4B5563 #fff; }
.cmms-report-category-tabs .nav-link.cat-active-custom.active { color: #4338CA; border-color: #4338CA #4338CA #fff; }

/* Tables */
.cmms-table {
    margin-bottom: 0;
    --cmms-table-row-num: #0B7A5E;
    --cmms-table-row-num-bg: linear-gradient(180deg, #E8F8F3 0%, #D8F1E9 100%);
    border-collapse: separate;
    border-spacing: 0;
}

.cmms-table thead th {
    background: linear-gradient(180deg, #F7FAFC 0%, #EEF3F8 100%);
    color: var(--cmms-ink-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-weight: 650;
    border-bottom: 2px solid rgba(13, 138, 106, 0.28);
    white-space: nowrap;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: middle;
}

.cmms-table tbody td {
    vertical-align: middle;
    font-size: 0.925rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom-color: #E4EBF3;
}

.cmms-table tbody tr {
    transition: background 0.12s ease;
}

.cmms-table tbody tr:nth-child(even) {
    background: rgba(15, 28, 46, 0.018);
}

.cmms-table tbody tr:hover {
    background: rgba(13, 138, 106, 0.07);
}

.cmms-table a {
    color: var(--cmms-accent);
    font-weight: 600;
    text-decoration: none;
}

.cmms-table a:hover {
    text-decoration: underline;
}

.cmms-table thead th.cmms-sortable-th {
    padding: 0;
}

.cmms-sortable-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.85rem 0.75rem;
    color: inherit !important;
    font-weight: inherit;
    text-decoration: none !important;
}

.cmms-sortable-link:hover {
    color: var(--cmms-accent) !important;
    text-decoration: none !important;
    background: rgba(13, 138, 106, 0.06);
}

.cmms-sortable-th.is-sorted .cmms-sortable-link {
    color: var(--cmms-accent) !important;
    background: rgba(13, 138, 106, 0.08);
}

.cmms-sortable-hint {
    opacity: 0.35;
    font-size: 0.7rem;
}

.cmms-sortable-link:hover .cmms-sortable-hint {
    opacity: 0.7;
}

.cmms-th-emoji {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 0.15rem;
    filter: saturate(1.05);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.cmms-row-num-th {
    width: 3.1rem;
    min-width: 3.1rem;
    text-align: center !important;
    background: var(--cmms-table-row-num-bg) !important;
    color: var(--cmms-table-row-num) !important;
    border-right: 1px solid rgba(13, 138, 106, 0.18);
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

.cmms-row-num-th .cmms-row-num-label {
    font-variant-numeric: tabular-nums;
}

.cmms-row-num {
    width: 3.1rem;
    min-width: 3.1rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--cmms-table-row-num);
    background: var(--cmms-table-row-num-bg);
    border-right: 1px solid rgba(13, 138, 106, 0.14);
    letter-spacing: 0.02em;
}

.cmms-table tbody tr:hover .cmms-row-num {
    background: linear-gradient(180deg, #D5F0E7 0%, #C5E8DC 100%);
}

.cmms-table-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--cmms-border);
    background: linear-gradient(180deg, #F8FBFD 0%, #F2F6FA 100%);
    color: var(--cmms-steel);
    font-size: 0.82rem;
}

.cmms-table-total {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent-hover);
    border: 1px solid rgba(13, 138, 106, 0.18);
    font-weight: 600;
}

.cmms-table-total strong {
    color: var(--cmms-ink);
    font-variant-numeric: tabular-nums;
}

.cmms-table-total-icon {
    line-height: 1;
}

.cmms-table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--cmms-border);
    background: linear-gradient(180deg, #F8FBFD 0%, #F2F6FA 100%);
}

.cmms-table-page-size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.cmms-table-page-size-label {
    margin-bottom: 0;
    font-size: 0.82rem;
    color: var(--cmms-steel);
    white-space: nowrap;
}

.cmms-table-page-size-select {
    width: auto;
    min-width: 4.75rem;
}

.cmms-table-pagination-links {
    flex: 1 1 20rem;
    display: flex;
    justify-content: flex-end;
}

.cmms-table-pagination-links > nav {
    width: 100%;
    margin-bottom: 0;
}

/* Client-side report tables (public/js/cmms-datatable.js) */
.cmms-sortable-link.cmms-datatable-sort {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cmms-table thead th.text-end .cmms-sortable-link.cmms-datatable-sort {
    justify-content: flex-end;
    text-align: right;
}

.cmms-sortable-link.cmms-datatable-sort:focus-visible {
    outline: 2px solid var(--cmms-accent);
    outline-offset: -2px;
}

.cmms-table thead tr.cmms-table-filter-row th {
    padding: 0.3rem 0.4rem;
    background: rgba(13, 138, 106, 0.05);
    border-bottom: 1px solid rgba(13, 138, 106, 0.16);
}

.cmms-table-filter-row .form-control,
.cmms-table-filter-row .form-select {
    min-height: 1.85rem;
    height: auto;
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
}

.cmms-table-filter-row .cmms-datatable-filter-input::placeholder {
    color: rgba(90, 107, 127, 0.55);
}

.cmms-table thead tr.cmms-table-filter-row th.text-end .form-control,
.cmms-table thead tr.cmms-table-filter-row th.text-end .form-select {
    text-align: right;
}

.cmms-table-filter-input {
    width: 100%;
}

.cmms-table-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.cmms-table-filter-actions .btn {
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
}

.cmms-datatable-footer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
}

.cmms-datatable-range {
    font-size: 0.82rem;
    color: var(--cmms-steel);
    font-variant-numeric: tabular-nums;
}

.cmms-datatable-clear {
    white-space: nowrap;
}

.cmms-datatable-footer .pagination {
    margin-bottom: 0;
}

.cmms-table-enhanced thead th:not(.cmms-row-num-th) {
    box-shadow: inset 0 -1px 0 rgba(13, 138, 106, 0.04);
}

/* Forms */
.cmms-form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--cmms-ink);
    margin-bottom: 0.35rem;
}

.cmms-field-required {
    color: #c0392b;
    font-weight: 700;
    margin-left: 0.15rem;
}

.cmms-field-optional {
    color: var(--cmms-muted, #6c757d);
    font-weight: 400;
    font-size: 0.8em;
}

.cmms-form-hint {
    font-size: 0.8rem;
    color: var(--cmms-steel);
    margin-top: 0.25rem;
}

.form-control,
.form-select {
    border-color: var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 0.2rem var(--cmms-accent-glow);
}

/* Searchable select: once a value is chosen the field shows it as a value, not a hint. */
.cmms-searchable-select.is-selected .form-control::placeholder {
    color: var(--cmms-ink);
    opacity: 1;
}

/* Recipient picker: the result list is a floating layer above the surrounding
   form, so it needs an opaque background, its own stacking level and a height
   that still fits on a short screen. */
.cmms-recipient-picker .cmms-recipient-results {
    z-index: 1085;
    max-height: min(260px, 45vh);
    overflow-y: auto;
    background: var(--cmms-panel);
    box-shadow: 0 12px 28px rgba(15, 28, 46, 0.18);
}

/* Not enough room below the field: the list opens upwards instead of being cut
   off by the bottom of the viewport. */
.cmms-recipient-picker .cmms-recipient-results--up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.cmms-recipient-picker .cmms-recipient-results .list-group-item {
    border-left: 0;
    border-right: 0;
}

.cmms-recipient-picker .cmms-recipient-results .list-group-item:first-child {
    border-top-left-radius: var(--cmms-radius-sm);
    border-top-right-radius: var(--cmms-radius-sm);
}

.cmms-recipient-picker .cmms-recipient-results .list-group-item:last-child {
    border-bottom-left-radius: var(--cmms-radius-sm);
    border-bottom-right-radius: var(--cmms-radius-sm);
}

.cmms-recipient-picker .cmms-recipient-chip {
    font-weight: 500;
}

/* Empty state */
.cmms-empty {
    text-align: center;
    padding: 3.25rem 1.5rem;
}

.cmms-empty-icon {
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 1rem;
    filter: grayscale(0.15);
}

.cmms-empty h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.cmms-empty p {
    color: var(--cmms-steel);
    max-width: 420px;
    margin: 0 auto 1.25rem;
}

/* Demo banner */
.cmms-demo-banner {
    background: linear-gradient(90deg, #FFF7ED, #FEF3C7);
    border-bottom: 1px solid #FCD34D;
    color: #9A3412;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
}

/* Instance type pill inside the demo/instance banner (Settings → Display options) */
.cmms-instance-badge {
    display: inline-block;
    margin-right: 0.55rem;
    padding: 0.05rem 0.6rem;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-warn);
    border-radius: 999px;
    color: #9A3412;
    font-weight: 600;
}

/* Alerts */
.alert-cmms-success {
    background: var(--cmms-accent-soft);
    border-color: #6EE7B7;
    color: #065F46;
    border-radius: var(--cmms-radius-sm);
}

.alert-cmms-error {
    background: var(--cmms-danger-soft);
    border-color: #FCA5A5;
    color: #991B1B;
    border-radius: var(--cmms-radius-sm);
}

.cmms-attention-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmms-attention-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .cmms-attention-title,
    .cmms-attention-detail {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }
}

/* Attention list */
.cmms-attention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--cmms-border);
}

.cmms-attention-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cmms-attention-item:first-child {
    padding-top: 0;
}

/* Getting started checklist */
.cmms-checklist-step {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--cmms-border);
}

.cmms-checklist-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cmms-checklist-step:first-child {
    padding-top: 0;
}

.cmms-step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, #109872, var(--cmms-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--cmms-accent-glow);
}

.cmms-step-number.done {
    background: #065F46;
}

/* Guest layout */
.cmms-guest-body {
    font-family: var(--cmms-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(25deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        radial-gradient(ellipse 800px 500px at 12% 18%, rgba(20, 184, 144, 0.34), transparent 55%),
        radial-gradient(ellipse 650px 500px at 92% 84%, rgba(29, 78, 216, 0.2), transparent 52%),
        linear-gradient(145deg, #081827 0%, #142C42 48%, #0B4038 100%);
    background-size: 44px 44px, 68px 68px, auto, auto, auto;
    -webkit-font-smoothing: antialiased;
}

.cmms-guest-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 468px;
    background: var(--cmms-panel);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), 0 0 0 8px rgba(255, 255, 255, 0.06);
    padding: 2.4rem 2.35rem 2.15rem;
    overflow: hidden;
}

.cmms-guest-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #14B890 0%, #0EA5E9 52%, #F59E0B 100%);
    z-index: -1;
}

.cmms-guest-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -125px;
    right: -90px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.12);
    filter: blur(2px);
    z-index: -1;
}

.cmms-guest-brand {
    text-align: var(--cmms-brand-text-align);
    margin: -0.15rem 0 1.8rem;
    padding-bottom: 1.45rem;
    border-bottom: 1px solid var(--cmms-border);
    display: flex;
    flex-direction: column;
    align-items: var(--cmms-brand-align-items);
}

.cmms-guest-brand-mark {
    width: 52px;
    height: 52px;
    margin: 0 0 0.85rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #14B890 0%, var(--cmms-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: 0 10px 24px rgba(13, 138, 106, 0.38), 0 0 0 6px rgba(13, 138, 106, 0.08);
}

.cmms-guest-brand-logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 72px;
    margin: 0;
    object-fit: contain;
    background: transparent;
}

.cmms-guest-brand-logo-row {
    margin: 0 0 0.85rem;
    display: flex;
    width: 100%;
    justify-content: var(--cmms-brand-align-items);
}

.cmms-guest-brand h1 {
    font-family: var(--cmms-brand-font);
    font-weight: var(--cmms-brand-title-weight);
    font-style: var(--cmms-brand-title-style);
    font-size: var(--cmms-brand-guest-title-size);
    margin: 0;
    color: var(--cmms-brand-guest-title-color, var(--cmms-brand-title-color));
    letter-spacing: -0.03em;
    text-align: var(--cmms-brand-text-align);
    width: 100%;
}

.cmms-guest-brand-tagline {
    width: 100%;
    text-align: var(--cmms-brand-text-align);
    letter-spacing: var(--cmms-brand-tagline-tracking);
    text-transform: var(--cmms-brand-tagline-transform);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cmms-brand-guest-tagline-color, var(--cmms-brand-tagline-color));
}

.cmms-guest-footer {
    margin: 1.25rem 0 0;
    text-align: var(--cmms-footer-text-align);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    width: min(440px, 100%);
}

/* Work order show tabs */
.cmms-wo-tabs .nav-link {
    color: var(--cmms-steel);
    font-weight: 500;
}

.cmms-wo-tabs .nav-link.active {
    color: var(--cmms-accent);
    border-color: var(--cmms-border) var(--cmms-border) var(--cmms-panel);
}

/* Quick action chips */
.cmms-quick-actions .btn {
    border-radius: var(--cmms-radius-sm);
}

/* Compact dashboard */
.cmms-dashboard .cmms-dashboard-header {
    margin-bottom: 0.65rem;
}

.cmms-dashboard .cmms-dashboard-header h1 {
    font-size: 1.25rem;
    margin-bottom: 0.1rem;
}

.cmms-dashboard .cmms-dashboard-header .subtitle {
    font-size: 0.8rem;
}

.cmms-dashboard-kpis {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.6rem;
}

.cmms-dashboard-kpis .cmms-kpi {
    padding: 0.55rem 0.75rem 0.6rem;
}

.cmms-dashboard-kpis .cmms-kpi.is-muted {
    opacity: 0.72;
}

.cmms-dashboard-kpis .cmms-kpi.is-muted .cmms-kpi-value {
    color: var(--cmms-steel, #5A6B7F);
}

.cmms-dashboard-kpis .cmms-kpi-top {
    margin-bottom: 0.1rem;
}

.cmms-dashboard-kpis .cmms-kpi-label {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.cmms-dashboard-kpis .cmms-kpi-emoji {
    font-size: 0.95rem;
}

.cmms-dashboard-kpis .cmms-kpi-value {
    font-size: 1.3rem;
}

/* Customizable dashboard grid (masonry-packed via JS row spans) */
.cmms-dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: start;
}

.cmms-dash-grid.is-packed {
    grid-auto-rows: 8px;
    grid-auto-flow: dense;
}

.cmms-dash-card {
    min-width: 0;
    align-self: start;
}

.cmms-dash-card.cmms-dash-span-2 {
    grid-column: span 2;
}

.cmms-dash-card.is-hidden {
    display: none;
}

.cmms-dashboard.is-customizing .cmms-dash-grid {
    grid-auto-rows: auto;
    grid-auto-flow: row;
}

.cmms-dashboard.is-customizing .cmms-dash-card.is-hidden {
    display: block;
    opacity: 0.55;
}

.cmms-dashboard.is-customizing .cmms-dash-card {
    outline: 1px dashed var(--cmms-border, #D0D7DE);
    border-radius: var(--cmms-radius-sm, 0.4rem);
    grid-row-end: auto !important;
}

.cmms-dash-card-toolbar {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--cmms-mist, #F4F6F8);
    border-radius: var(--cmms-radius-sm, 0.4rem) var(--cmms-radius-sm, 0.4rem) 0 0;
}

.cmms-dashboard.is-customizing .cmms-dash-card-toolbar {
    display: flex;
}

.cmms-dash-drag-handle {
    border: 0;
    background: transparent;
    cursor: grab;
    color: var(--cmms-steel, #5A6B7F);
    line-height: 1;
    padding: 0.15rem 0.35rem;
    font-size: 1rem;
}

.cmms-dash-drag-handle:active {
    cursor: grabbing;
}

.cmms-dash-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cmms-ink, #1A2332);
    flex: 1;
    min-width: 0;
}

.cmms-dash-card-tools {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cmms-dash-span-control .form-select {
    width: auto;
    min-width: 4.5rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.75rem;
}

.cmms-dash-card-body > .cmms-panel,
.cmms-dash-card-body > .cmms-kpi-row {
    height: auto;
}

.cmms-dash-ghost {
    opacity: 0.4;
}

.cmms-dash-chosen {
    box-shadow: 0 0 0 2px var(--cmms-accent, #0D8A6A);
}

.cmms-dash-customize-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: var(--cmms-panel, #fff);
    border: 1px solid var(--cmms-border, #D0D7DE);
    border-radius: var(--cmms-radius-sm, 0.4rem);
}

.cmms-dash-drawer {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: var(--cmms-panel, #fff);
    border: 1px solid var(--cmms-border, #D0D7DE);
    border-radius: var(--cmms-radius-sm, 0.4rem);
    max-height: 14rem;
    overflow: auto;
}

.cmms-dash-drawer-header {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cmms-dash-drawer-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.cmms-dash-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    cursor: pointer;
}

.cmms-dash-toggle .form-check-input {
    margin-top: 0.2rem;
}

.cmms-dash-severity {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.4rem;
    background: var(--cmms-info, #1D4ED8);
}

.cmms-dash-severity-danger { background: var(--cmms-danger, #B91C1C); }
.cmms-dash-severity-warn { background: var(--cmms-warn, #C2410C); }
.cmms-dash-severity-info { background: var(--cmms-info, #1D4ED8); }

.cmms-dash-aging {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.cmms-dash-aging-item {
    min-width: 4.5rem;
}

.cmms-dash-aging-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cmms-ink, #1A2332);
}

.cmms-dash-aging-label {
    font-size: 0.72rem;
    color: var(--cmms-steel, #5A6B7F);
}

.cmms-dash-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cmms-dash-save-status {
    color: var(--cmms-accent, #0D8A6A);
    font-weight: 600;
}

.cmms-dashboard .cmms-panel-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
}

.cmms-dashboard .cmms-panel-body {
    padding: 0.55rem 0.75rem;
}

.cmms-dashboard .cmms-attention-item {
    padding: 0.4rem 0;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.cmms-dashboard .cmms-attention-item > .min-w-0 {
    flex: 1 1 auto;
    min-width: 0;
}

.cmms-dashboard .cmms-attention-item .cmms-dash-severity {
    margin-top: 0.45rem;
}

.cmms-dashboard .cmms-attention-item .btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    margin-left: auto;
    align-self: center;
}

.cmms-dashboard .row > [class*="col-"] > .cmms-panel.h-100 {
    display: flex;
    flex-direction: column;
}

.cmms-dashboard .row > [class*="col-"] > .cmms-panel.h-100 .cmms-panel-body:not(.cmms-dashboard-chart) {
    flex: 1;
    min-height: 0;
}

.cmms-dashboard-chart {
    height: 140px;
    min-height: 140px;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.cmms-table-compact thead th {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.cmms-table-compact tbody td {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.82rem;
}

.cmms-table-compact .cmms-priority-cell {
    padding-left: 2.2rem !important;
}

.cmms-table-compact .cmms-row-num-th,
.cmms-table-compact .cmms-row-num {
    width: 2.5rem;
    min-width: 2.5rem;
    font-size: 0.72rem;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.cmms-table-compact + .cmms-table-meta,
.table-responsive:has(.cmms-table-compact) + .cmms-table-meta {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.75rem;
}

.cmms-report-compact .table > :not(caption) > * > * {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

@media (max-width: 991.98px) {
    .cmms-dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .cmms-dash-grid {
        grid-template-columns: 1fr;
    }

    .cmms-dash-card.cmms-dash-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .cmms-dashboard-kpis {
        grid-template-columns: 1fr 1fr;
    }
}

/* Print styles for work orders */
@media print {
    .cmms-sidebar,
    .cmms-topbar,
    .cmms-sidebar-toggle,
    .no-print,
    .cmms-demo-banner {
        display: none !important;
    }

    .cmms-main {
        margin-left: 0 !important;
    }

    .cmms-content {
        padding: 0;
    }

    .cmms-panel {
        border: none;
        box-shadow: none;
    }

    .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    .cmms-wo-tabs {
        display: none;
    }
}

/* Mobile */
@media (min-width: 992px) {
    .cmms-app.sidebar-collapsed .cmms-sidebar {
        transform: translateX(-100%);
    }

    .cmms-app.sidebar-collapsed .cmms-main {
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .cmms-sidebar {
        transform: translateX(-100%);
    }

    .cmms-sidebar.show {
        transform: translateX(0);
    }

    .cmms-main {
        margin-left: 0;
    }

    .cmms-sidebar-toggle {
        padding: 0.5rem;
    }

    .cmms-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 28, 46, 0.55);
        z-index: 1035;
    }

    .cmms-sidebar-backdrop.show {
        display: block;
    }

    .cmms-topbar {
        height: auto;
        min-height: var(--cmms-topbar-height);
        padding: 0.45rem 0.75rem;
        gap: 0.5rem;
    }

    .cmms-topbar-user {
        gap: 0.45rem;
        min-width: 0;
    }

    .cmms-user-chip {
        padding: 0.3rem 0.55rem;
        gap: 0.35rem;
        font-size: 0.82rem;
    }

    .cmms-user-chip-name {
        display: none;
    }

    .cmms-content {
        padding: 1rem 0.85rem 1.5rem;
    }

    .cmms-page-header {
        margin-bottom: 1rem;
        gap: 0.75rem;
    }

    .cmms-page-header h1 {
        font-size: 1.3rem;
    }

    .cmms-attention-item .text-truncate,
    .cmms-attention-item strong.text-truncate,
    .cmms-attention-item .small.text-truncate {
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    .cmms-attention-item {
        align-items: flex-start;
    }

    .cmms-wo-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: thin;
    }

    .cmms-wo-tabs .nav-item {
        flex: 0 0 auto;
    }

    .cmms-wo-tabs .nav-link {
        white-space: nowrap;
        padding: 0.65rem 0.9rem;
    }

    .cmms-filter-form > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .cmms-filter-form .btn,
    .cmms-filter-form .btn.w-100 {
        width: 100%;
    }

    .cmms-dashboard-chart {
        height: 220px;
        min-height: 220px;
    }

    .cmms-dashboard-kpis .cmms-kpi {
        padding: 0.7rem 0.8rem 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .cmms-page-header > .d-flex {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .cmms-page-header > .d-flex > .btn,
    .cmms-page-header > .d-flex > a.btn,
    .cmms-page-header > .d-flex > form {
        width: 100%;
        margin: 0;
    }

    .cmms-page-header > .d-flex > form .btn {
        width: 100%;
    }

    .cmms-page-header > .d-flex > .btn:only-child,
    .cmms-page-header > .d-flex > a.btn:only-child,
    .cmms-page-header > .d-flex > *:only-child {
        grid-column: 1 / -1;
    }

    .cmms-logout-label {
        display: none;
    }

    .cmms-logout-icon {
        display: inline-block;
        font-size: 1.1rem;
        line-height: 1;
    }

    .cmms-logout-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.55rem;
    }

    .cmms-page-header > .d-flex:has(> :nth-child(odd):last-child) > :last-child {
        grid-column: 1 / -1;
    }
}

/* Auth login tabs */
.cmms-auth-tabs .nav-link {
    color: var(--cmms-steel);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-weight: 500;
}

.cmms-auth-tabs .nav-link.active {
    background: var(--cmms-accent);
    color: #fff;
}

.cmms-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    background: var(--cmms-ink);
    color: #E8EEF4;
    border-radius: var(--cmms-radius-sm);
    padding: 0.9rem 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.cmms-token-once {
    background: var(--cmms-warn-soft);
    border: 1px solid #F6C389;
    border-radius: var(--cmms-radius);
    padding: 1rem 1.15rem;
}

.cmms-token-value {
    display: block;
    flex: 1 1 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
    background: #fff;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    padding: 0.45rem 0.65rem;
}

.cmms-webhook-events {
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: #fff;
}

.cmms-webhook-events .form-check {
    margin-bottom: 0.35rem;
}

.cmms-webhook-events .form-check:last-child {
    margin-bottom: 0;
}

/* Row-selection column on tables that offer bulk actions (Settings → API). */
.cmms-select-th,
.cmms-select-cell {
    width: 2.75rem;
    text-align: center;
}

.cmms-select-th .form-check-input,
.cmms-select-cell .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

/* Chosen page animations (tile-anim-*) — stagger cards, keep hover transforms. */
.cmms-kpi-row > *[class*="tile-anim-"],
.row > [class*="col-"] > .cmms-panel.h-100[class*="tile-anim-"],
.cmms-content > .cmms-panel[class*="tile-anim-"],
.cmms-empty[class*="tile-anim-"],
.cmms-dash-grid > .cmms-dash-card[class*="tile-anim-"] {
    animation-fill-mode: backwards;
}

.cmms-kpi-row > *:nth-child(1) { animation-delay: 0.03s; }
.cmms-kpi-row > *:nth-child(2) { animation-delay: 0.07s; }
.cmms-kpi-row > *:nth-child(3) { animation-delay: 0.11s; }
.cmms-kpi-row > *:nth-child(4) { animation-delay: 0.15s; }
.cmms-kpi-row > *:nth-child(5) { animation-delay: 0.19s; }
.cmms-kpi-row > *:nth-child(n+6) { animation-delay: 0.23s; }

.row > [class*="col-"]:nth-child(1) > .cmms-panel.h-100 { animation-delay: 0.05s; }
.row > [class*="col-"]:nth-child(2) > .cmms-panel.h-100 { animation-delay: 0.10s; }
.row > [class*="col-"]:nth-child(3) > .cmms-panel.h-100 { animation-delay: 0.15s; }
.row > [class*="col-"]:nth-child(n+4) > .cmms-panel.h-100 { animation-delay: 0.20s; }

.cmms-dash-grid > .cmms-dash-card:nth-child(1) { animation-delay: 0.03s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(2) { animation-delay: 0.07s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(3) { animation-delay: 0.11s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(4) { animation-delay: 0.15s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(5) { animation-delay: 0.19s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(6) { animation-delay: 0.23s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(7) { animation-delay: 0.27s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(8) { animation-delay: 0.31s; }
.cmms-dash-grid > .cmms-dash-card:nth-child(n+9) { animation-delay: 0.35s; }

.alert-cmms-success {
    animation: tileAnimSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.alert-cmms-error {
    animation: tileAnimShake 0.6s ease-in-out both;
}

.cmms-demo-banner {
    animation: tileAnimSlideDown 0.3s ease-out both;
}

.cmms-guest-card {
    animation: authModalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.cmms-guest-brand-mark {
    animation: authFloat 3.5s ease-in-out infinite;
}

.cmms-sidebar-backdrop.show {
    animation: authBackdropIn 0.25s ease-out;
}

/* Page animation picker */
.cmms-anim-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: 999px;
    color: var(--cmms-ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
}

.cmms-anim-trigger:hover,
.cmms-anim-trigger[aria-expanded="true"] {
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 3px var(--cmms-accent-glow);
}

.cmms-anim-trigger-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cmms-anim-trigger-kicker {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmms-steel);
}

.cmms-anim-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 28, 46, 0.28);
    z-index: 1080;
}

.cmms-anim-dialog {
    position: fixed;
    top: 72px;
    right: 1.25rem;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: 14px;
    box-shadow: var(--cmms-shadow-lg);
    z-index: 1085;
    overflow: hidden;
}

.cmms-anim-dialog[hidden],
.cmms-anim-backdrop[hidden] {
    display: none !important;
}

.cmms-anim-dialog.is-dragging {
    cursor: grabbing;
}

.cmms-anim-dialog-tabs {
    display: flex;
    border-bottom: 1px solid var(--cmms-border);
    flex-shrink: 0;
}

.cmms-anim-dialog-tab {
    flex: 1;
    padding: 0.75rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmms-accent);
    background: var(--cmms-accent-soft);
    border-bottom: 2px solid var(--cmms-accent);
}

.cmms-anim-dialog-head {
    padding: 0.75rem 0.85rem 0.7rem;
    background: var(--cmms-surface-mid);
    border-bottom: 1px solid var(--cmms-border);
    cursor: grab;
    user-select: none;
}

.cmms-anim-dialog-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmms-accent);
}

.cmms-anim-chip {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cmms-steel);
    background: #E8ECF1;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.cmms-anim-page-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cmms-steel);
    margin-bottom: 0.25rem;
}

.cmms-anim-page-select,
.cmms-anim-search input {
    width: 100%;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: #fff;
    color: var(--cmms-ink);
    font-size: 0.82rem;
}

.cmms-anim-page-select {
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.55rem;
}

.cmms-anim-search {
    position: relative;
}

.cmms-anim-search-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    pointer-events: none;
}

.cmms-anim-search input {
    padding: 0.4rem 0.55rem 0.4rem 1.7rem;
}

.cmms-anim-search input:focus,
.cmms-anim-page-select:focus {
    outline: none;
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 0.15rem var(--cmms-accent-glow);
}

.cmms-anim-preview-wrap {
    margin-top: 0.6rem;
    padding: 0.5rem;
    border: 1px dashed var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    min-height: 4.5rem;
}

.cmms-anim-preview-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmms-steel);
    margin-bottom: 0.4rem;
}

.cmms-anim-preview-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: #fff;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    box-shadow: var(--cmms-shadow);
    overflow: hidden;
}

.cmms-anim-preview-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--cmms-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cmms-anim-preview-card strong {
    display: block;
    font-size: 0.8rem;
}

.cmms-anim-preview-card small {
    display: block;
    color: var(--cmms-steel);
    font-size: 0.7rem;
}

.cmms-anim-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.55rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-content: start;
}

.cmms-anim-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
    padding: 0.65rem 0.55rem 0.55rem;
    border: 2px solid transparent;
    border-radius: var(--cmms-radius);
    background: var(--cmms-surface-mid);
    cursor: pointer;
}

.cmms-anim-option:hover {
    border-color: var(--cmms-border);
}

.cmms-anim-option.is-selected {
    background: var(--cmms-accent-soft);
    border-color: var(--cmms-accent);
    box-shadow: var(--cmms-shadow);
}

.cmms-anim-option-index {
    position: absolute;
    top: 0.2rem;
    right: 0.35rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--cmms-steel);
}

.cmms-anim-option-icon {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.cmms-anim-option-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--cmms-ink);
}

.cmms-anim-option-desc {
    display: block;
    font-size: 0.65rem;
    color: var(--cmms-steel);
    margin-top: 0.1rem;
}

.cmms-anim-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--cmms-border);
    background: var(--cmms-surface-mid);
    flex-shrink: 0;
}

.cmms-anim-foot-kicker {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmms-steel);
}

.cmms-anim-foot-name {
    font-size: 0.72rem;
    color: var(--cmms-ink);
}

.cmms-anim-foot-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cmms-anim-text-btn {
    border: 0;
    background: transparent;
    color: var(--cmms-accent);
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.3rem 0.45rem;
    border-radius: var(--cmms-radius-sm);
    cursor: pointer;
}

.cmms-anim-text-btn:hover {
    background: var(--cmms-accent-soft);
}

@media (max-width: 991.98px) {
    .cmms-anim-trigger-copy {
        display: none;
    }

    .cmms-anim-dialog {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: 68px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmms-kpi,
    .cmms-nav-link,
    .cmms-sidebar,
    .cmms-kpi-row > *,
    .row > [class*="col-"] > .cmms-panel.h-100,
    .cmms-content > .cmms-panel,
    .cmms-empty,
    .cmms-dash-grid > .cmms-dash-card,
    .cmms-anim-preview-card,
    [class*="tile-anim-"],
    .alert-cmms-success,
    .alert-cmms-error,
    .cmms-demo-banner,
    .cmms-guest-card,
    .cmms-guest-brand-mark,
    .cmms-sidebar-backdrop.show,
    .btn-cmms,
    .btn-outline-cmms {
        animation: none !important;
        transition: none;
    }

    .cmms-kpi:hover,
    .cmms-nav-link:hover,
    .btn-cmms:hover,
    .btn-outline-cmms:hover {
        transform: none;
    }
}

.cmms-map,
.cmms-map-picker {
    border: 1px solid var(--cmms-border);
    background: #eef2f6;
}

.cmms-map {
    overflow: hidden;
}

.cmms-map iframe,
.cmms-map-canvas,
.cmms-map-picker {
    display: block;
    width: 100%;
    height: 240px;
    border: 0;
}

.cmms-map-picker {
    height: 280px;
    border-radius: var(--cmms-radius);
    z-index: 1;
}

.cmms-map-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.7rem 0.95rem;
    border-top: 1px solid var(--cmms-border);
    background: #fafcfd;
}

.cmms-map-coords {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--cmms-steel);
}

.cmms-report-chart {
    position: relative;
    min-height: 240px;
}

.cmms-report-chart-lg {
    min-height: 300px;
}

.cmms-report-meter {
    height: 0.4rem;
    background: var(--cmms-border);
    border-radius: 99px;
    overflow: hidden;
    max-width: 12rem;
}

.cmms-report-meter-fill {
    height: 100%;
    background: var(--cmms-accent);
    border-radius: 99px;
}

.cmms-report-hot td:first-child {
    box-shadow: inset 3px 0 0 var(--cmms-danger);
}

.cmms-trend-up {
    color: var(--cmms-danger);
    font-weight: 600;
}

.cmms-trend-down {
    color: var(--cmms-accent);
    font-weight: 600;
}

.cmms-preset-groups {
    display: grid;
    gap: 1.15rem;
}

.cmms-preset-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cmms-steel);
    margin-bottom: 0.45rem;
}

.cmms-preset-chip {
    font-weight: 600;
}

.cmms-preset-chip.is-existing {
    opacity: 0.62;
    cursor: default;
}

/* Workload board */
.cmms-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-panel);
    color: var(--cmms-ink);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cmms-icon-link i {
    font-size: 1.05rem;
    color: var(--cmms-accent);
}

.cmms-icon-link:hover {
    border-color: var(--cmms-accent);
    background: var(--cmms-accent-soft);
    color: var(--cmms-ink);
}

.cmms-workload-card {
    position: relative;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: var(--cmms-panel);
    box-shadow: var(--cmms-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cmms-workload-card.is-active {
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 2px var(--cmms-accent-glow), var(--cmms-shadow);
}

.cmms-workload-card.is-over {
    border-color: #f0c4c4;
}

.cmms-workload-card-top {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.cmms-workload-gauge {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.cmms-workload-gauge-canvas {
    display: block;
}

.cmms-workload-gauge-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1.1;
}

.cmms-workload-gauge-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-workload-gauge-cap {
    font-size: 0.65rem;
    color: var(--cmms-steel);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cmms-workload-card-name {
    font-size: 1rem;
    margin: 0 0 0.45rem;
    font-weight: 650;
}

.cmms-workload-meter {
    height: 0.4rem;
    background: var(--cmms-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.cmms-workload-meter-fill {
    height: 100%;
    background: var(--cmms-accent);
    border-radius: 99px;
}

.cmms-workload-meter-fill.is-over {
    background: var(--cmms-danger);
}

.cmms-workload-hours {
    font-size: 0.82rem;
    color: var(--cmms-steel);
}

.cmms-workload-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.cmms-workload-stat {
    text-align: center;
    padding: 0.45rem 0.25rem;
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
}

.cmms-workload-stat.is-warn {
    background: var(--cmms-danger-soft);
}

.cmms-workload-stat-icon {
    display: block;
    color: var(--cmms-steel);
    font-size: 0.9rem;
    line-height: 1;
    margin-bottom: 0.15rem;
}

.cmms-workload-stat.is-warn .cmms-workload-stat-icon {
    color: var(--cmms-danger);
}

.cmms-workload-stat-value {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cmms-ink);
}

.cmms-workload-stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cmms-steel);
}

.cmms-workload-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.cmms-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid var(--cmms-border);
    background: var(--cmms-panel);
    color: var(--cmms-steel);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cmms-icon-action:hover,
.cmms-icon-action.is-active {
    border-color: var(--cmms-accent);
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent);
}

.cmms-icon-action.accent {
    border-color: var(--cmms-accent);
    background: var(--cmms-accent);
    color: #fff;
}

.cmms-icon-action.accent:hover {
    background: var(--cmms-accent-hover);
    border-color: var(--cmms-accent-hover);
    color: #fff;
}

@media (max-width: 575.98px) {
    .cmms-icon-link-label {
        display: none;
    }

    .cmms-workload-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Page "How to use" card: collapsed by default, remembered per page. */
.cmms-howto {
    border-left: 4px solid var(--cmms-accent);
}

.cmms-howto > .cmms-howto-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 0.7rem;
    transition: background 0.15s ease;
}

.cmms-howto > .cmms-howto-toggle:hover {
    background: linear-gradient(180deg, var(--cmms-accent-soft) 0%, #F5F8FB 100%);
}

/* The chevron replaced the native disclosure triangle. */
.cmms-howto > .cmms-howto-toggle::-webkit-details-marker {
    display: none;
}

.cmms-howto > .cmms-howto-toggle::marker {
    content: "";
}

.cmms-howto > .cmms-howto-toggle:focus-visible {
    outline: 2px solid var(--cmms-accent);
    outline-offset: -2px;
}

.cmms-howto-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: var(--cmms-accent-soft);
    border: 1px solid rgba(13, 138, 106, 0.22);
    font-size: 1.05rem;
    line-height: 1;
}

.cmms-howto-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.cmms-howto-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cmms-ink);
}

.cmms-howto-sub {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--cmms-steel);
}

.cmms-howto-hint {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmms-accent);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cmms-howto > .cmms-howto-toggle:hover .cmms-howto-hint {
    border-color: var(--cmms-accent);
}

.cmms-howto[open] .cmms-howto-hint--collapsed,
.cmms-howto:not([open]) .cmms-howto-hint--expanded {
    display: none;
}

.cmms-howto-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent);
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 0.22s ease, background 0.15s ease;
}

.cmms-howto[open] .cmms-howto-chevron {
    transform: rotate(180deg);
    background: var(--cmms-accent);
    color: #fff;
}

.cmms-howto-body {
    padding-top: 1rem;
    animation: cmms-howto-reveal 0.2s ease;
}

@keyframes cmms-howto-reveal {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cmms-howto-steps {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
}

.cmms-howto-steps > li {
    line-height: 1.5;
}

/* Emoji (or step number) chip plus its copy. */
.cmms-howto-step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.cmms-howto-step--plain {
    padding: 0.55rem 0.75rem;
    border-radius: var(--cmms-radius-sm);
    background: linear-gradient(135deg, #F7FBF9 0%, #F4F7FB 100%);
    border: 1px solid var(--cmms-border);
}

.cmms-howto-step-copy {
    min-width: 0;
}

/* Longer, task-shaped steps that carry their own title. */
.cmms-howto-steps--titled {
    gap: 0.85rem;
}

.cmms-howto-steps--titled > .cmms-howto-step {
    padding: 0.75rem 0.9rem;
    border-radius: var(--cmms-radius-sm);
    background: linear-gradient(135deg, #f7fbf9 0%, #f4f7fb 100%);
    border: 1px solid var(--cmms-border);
}

.cmms-howto-steps--titled > .cmms-howto-step:nth-child(1) { border-left: 3px solid var(--cmms-accent); }
.cmms-howto-steps--titled > .cmms-howto-step:nth-child(2) { border-left: 3px solid #059669; }
.cmms-howto-steps--titled > .cmms-howto-step:nth-child(3) { border-left: 3px solid var(--cmms-info); }
.cmms-howto-steps--titled > .cmms-howto-step:nth-child(4) { border-left: 3px solid #D97706; }
.cmms-howto-steps--titled > .cmms-howto-step:nth-child(5) { border-left: 3px solid #7C3AED; }

.cmms-howto-step-emoji {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    background: var(--cmms-panel);
    border: 1px solid rgba(15, 28, 46, 0.07);
    box-shadow: 0 1px 2px rgba(15, 28, 46, 0.05);
    font-size: 1.05rem;
    line-height: 1;
}

/* Steps that carry no emoji fall back to their number, which needs its own weight. */
.cmms-howto-step-emoji--number {
    background: var(--cmms-accent-soft);
    border-color: rgba(13, 138, 106, 0.22);
    color: var(--cmms-accent);
    font-size: 0.8rem;
    font-weight: 700;
}

.cmms-howto-steps--titled .cmms-howto-step-emoji {
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
}

.cmms-howto-step-title {
    display: block;
    color: var(--cmms-ink);
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.cmms-howto-step-text {
    margin: 0;
    color: var(--cmms-steel);
    font-size: 0.86rem;
    line-height: 1.45;
}

.cmms-howto-step--plain .cmms-howto-step-text {
    color: var(--cmms-ink-soft);
    font-size: 0.875rem;
}

/* A small collapsible aside (search tips and friends): the same chevron
   language as the "How to use" card, so every disclosure on a page reads the
   same way and the reader only has to learn the gesture once. */
.cmms-disclosure-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    color: var(--cmms-ink);
}

.cmms-disclosure-toggle::-webkit-details-marker {
    display: none;
}

.cmms-disclosure-toggle::marker {
    content: "";
}

.cmms-disclosure-toggle:focus-visible {
    outline: 2px solid var(--cmms-accent);
    outline-offset: 2px;
}

.cmms-disclosure-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 7px;
    background: var(--cmms-accent-soft);
    border: 1px solid rgba(13, 138, 106, 0.2);
    font-size: 0.85rem;
    line-height: 1;
}

.cmms-disclosure-hint {
    margin-left: auto;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmms-accent);
}

.cmms-disclosure[open] .cmms-disclosure-hint--collapsed,
.cmms-disclosure:not([open]) .cmms-disclosure-hint--expanded {
    display: none;
}

.cmms-disclosure-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent);
    font-size: 0.72rem;
    line-height: 1;
    transition: transform 0.22s ease, background 0.15s ease;
}

.cmms-disclosure[open] .cmms-disclosure-chevron {
    transform: rotate(180deg);
    background: var(--cmms-accent);
    color: #fff;
}

/* Resource Manager */

.cmms-rm-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.cmms-rm-section-title h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-rm-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--cmms-accent-soft);
    color: #065F46;
    font-size: 0.78rem;
    font-weight: 700;
}

.cmms-rm-card {
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.cmms-rm-card:has(.cmms-rm-field-locations input:focus) {
    overflow: visible;
    position: relative;
    z-index: 3;
}

.cmms-rm-card.is-available {
    border-color: rgba(13, 138, 106, 0.35);
}

.cmms-rm-card.is-unavailable {
    opacity: 0.96;
}

.cmms-rm-card:hover {
    box-shadow: var(--cmms-shadow-lg);
}

.cmms-rm-coverage-map {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cmms-border);
}

.cmms-rm-coverage-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--cmms-ink);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.cmms-rm-coverage-count {
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--cmms-border);
    border-radius: 999px;
    background: var(--cmms-surface-mid);
    color: var(--cmms-steel);
    font-size: 0.78rem;
    font-weight: 600;
}

.cmms-rm-coverage-map[open] > .cmms-rm-coverage-summary {
    margin-bottom: 0.75rem;
}

.cmms-rm-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1.15rem;
    background: linear-gradient(135deg, #E8F8F3 0%, #EEF4FF 55%, #F8FAFC 100%);
    border-bottom: 1px solid var(--cmms-border);
}

.cmms-rm-card.is-unavailable .cmms-rm-card-header {
    background: linear-gradient(135deg, #F3F4F6 0%, #EEF2F7 100%);
}

.cmms-rm-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.cmms-rm-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(15, 28, 46, 0.08);
}

.cmms-rm-avatar.is-on {
    background: linear-gradient(145deg, #109872, var(--cmms-accent));
    color: #fff;
}

.cmms-rm-avatar.is-off {
    background: #E5E7EB;
    color: #4B5563;
}

/* Shared user avatar: profile photo (img) or initials fallback (span), used across nav, WO/PM lists and Resource Manager. */
.cmms-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
    object-fit: cover;
    vertical-align: middle;
}

.cmms-avatar-initials {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cmms-avatar-sm {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.65rem;
    border-radius: 0.5rem;
}

.cmms-avatar-xs {
    width: 1rem;
    height: 1rem;
    font-size: 0.5rem;
    border-radius: 0.3rem;
}

.cmms-avatar-md {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.8rem;
}

.cmms-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(15, 28, 46, 0.08);
}

.cmms-avatar-xl {
    width: 6rem;
    height: 6rem;
    font-size: 1.9rem;
    box-shadow: 0 2px 8px rgba(15, 28, 46, 0.08);
}

.cmms-avatar-preview-trigger {
    cursor: zoom-in;
}

.cmms-avatar-preview-trigger:focus-visible {
    outline: 2px solid var(--cmms-accent, #109872);
    outline-offset: 2px;
}

.cmms-avatar-preview-modal {
    background: var(--cmms-surface, #fff);
}

.cmms-avatar-preview-image {
    display: block;
    width: min(100%, 360px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 0.75rem;
    box-shadow: 0 6px 24px rgba(15, 28, 46, 0.16);
}

.cmms-avatar.is-on {
    box-shadow: 0 0 0 2px var(--cmms-accent, #109872);
}

.cmms-avatar.is-off {
    box-shadow: 0 0 0 2px #E5E7EB;
    filter: grayscale(0.4);
}

.cmms-avatar-cropper-canvas {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    background: #F3F4F6;
    box-shadow: 0 0 0 1px var(--cmms-border);
}

.cmms-avatar-cropper-canvas:active {
    cursor: grabbing;
}

.cmms-rm-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cmms-ink);
    line-height: 1.2;
}

.cmms-rm-email {
    font-size: 0.82rem;
    color: var(--cmms-steel);
    word-break: break-all;
}

.cmms-rm-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cmms-rm-cap-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: #EFF6FF;
    color: var(--cmms-info);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(29, 78, 216, 0.18);
}

.cmms-rm-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1.25rem;
    padding: 0.85rem 1.15rem;
    background: #FBFDFF;
    border-bottom: 1px solid var(--cmms-border);
}

.cmms-rm-preview-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cmms-steel);
    margin-bottom: 0.4rem;
}

.cmms-rm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cmms-rm-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.cmms-rm-chip-skill {
    background: var(--cmms-accent-soft);
    color: #065F46;
    border: 1px solid rgba(13, 138, 106, 0.22);
}

.cmms-rm-chip-location {
    background: var(--cmms-info-soft);
    color: var(--cmms-info);
    border: 1px solid rgba(29, 78, 216, 0.18);
}

.cmms-rm-chip-anywhere {
    background: #F5F3FF;
    color: #6D28D9;
    border: 1px solid rgba(109, 40, 217, 0.18);
}

.cmms-rm-chip-empty {
    background: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.cmms-rm-field-card {
    height: 100%;
    padding: 0.85rem 0.95rem;
    border-radius: var(--cmms-radius-sm);
    border: 1px solid var(--cmms-border);
    background: #fff;
}

.cmms-rm-field-avail { background: linear-gradient(180deg, #F0FDF8 0%, #fff 55%); border-color: rgba(13, 138, 106, 0.22); }
.cmms-rm-field-cap { background: linear-gradient(180deg, #EFF6FF 0%, #fff 55%); border-color: rgba(29, 78, 216, 0.18); }
.cmms-rm-field-skills { background: linear-gradient(180deg, #ECFDF5 0%, #fff 45%); border-color: rgba(5, 150, 105, 0.2); }
.cmms-rm-field-locations { background: linear-gradient(180deg, #EEF2FF 0%, #fff 45%); border-color: rgba(79, 70, 229, 0.18); }
.cmms-rm-field-children { background: linear-gradient(180deg, #FFF7ED 0%, #fff 55%); border-color: rgba(217, 119, 6, 0.22); gap: 0.75rem; }

.cmms-rm-field-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-rm-readonly {
    display: grid;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--cmms-ink);
}

@media (max-width: 575.98px) {
    .cmms-rm-card-header {
        align-items: flex-start;
    }

    .cmms-howto-steps--titled > .cmms-howto-step {
        padding: 0.65rem 0.75rem;
    }

    /* The subtitle and the pill would squeeze the title on a phone, so the
       header keeps just the badge, the title and the arrow. The arrow takes
       over pushing itself to the right edge. */
    .cmms-howto-sub,
    .cmms-howto-hint {
        display: none;
    }

    .cmms-howto > .cmms-howto-toggle {
        gap: 0.55rem;
    }

    .cmms-howto-chevron {
        margin-left: auto;
    }

    .cmms-disclosure-hint {
        display: none;
    }

    .cmms-disclosure-chevron {
        margin-left: auto;
    }
}

/* Auth providers � LinkNest-style LDAP chrome */
.cmms-auth-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.ldap-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-radius: var(--cmms-radius);
    border: 1px solid rgba(14, 165, 233, 0.28);
    background:
        linear-gradient(135deg, rgba(240, 249, 255, 0.95) 0%, rgba(204, 251, 241, 0.55) 55%, rgba(236, 254, 255, 0.9) 100%);
    box-shadow: 0 1px 2px rgba(14, 165, 233, 0.06);
}

.ldap-hero-title {
    margin: 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ldap-hero-sub {
    margin-top: 0.25rem;
    color: #0c4a6e;
    font-size: 0.9rem;
    opacity: 0.85;
}

.ldap-hero-toggles {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: var(--cmms-radius-sm);
    padding: 0.75rem 1rem;
    min-width: 220px;
}

.ldap-section {
    border-radius: var(--cmms-radius);
    border: 1px solid var(--cmms-border);
    padding: 1rem 1.15rem 1.15rem;
    background: #fff;
}

.ldap-section-title {
    margin: 0 0 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(15, 28, 46, 0.08);
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ldap-section-sky {
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.7) 0%, #fff 42%);
    border-color: rgba(14, 165, 233, 0.22);
}
.ldap-section-sky .ldap-section-title { color: #075985; border-color: rgba(14, 165, 233, 0.2); }

.ldap-section-teal {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.75) 0%, #fff 42%);
    border-color: rgba(13, 148, 136, 0.22);
}
.ldap-section-teal .ldap-section-title { color: #115e59; border-color: rgba(13, 148, 136, 0.2); }

.ldap-section-amber {
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.8) 0%, #fff 42%);
    border-color: rgba(217, 119, 6, 0.22);
}
.ldap-section-amber .ldap-section-title { color: #9a3412; border-color: rgba(217, 119, 6, 0.2); }

.ldap-section-blue {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.8) 0%, #fff 42%);
    border-color: rgba(37, 99, 235, 0.2);
}
.ldap-section-blue .ldap-section-title { color: #1e40af; border-color: rgba(37, 99, 235, 0.18); }

.ldap-section-indigo {
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.85) 0%, #fff 42%);
    border-color: rgba(79, 70, 229, 0.2);
}
.ldap-section-indigo .ldap-section-title { color: #3730a3; border-color: rgba(79, 70, 229, 0.18); }

.ldap-section-slate {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #fff 45%);
    border-color: rgba(100, 116, 139, 0.22);
}
.ldap-section-slate .ldap-section-title { color: #334155; }

.ldap-denied-field {
    border-color: rgba(185, 28, 28, 0.28) !important;
}

.ldap-settings--ldap .ldap-hero {
    align-items: flex-start;
    padding: 1.25rem;
    border-color: #cbded8;
    border-radius: 8px;
    background: linear-gradient(120deg, #f4faf6 0%, #edf4f7 100%);
    box-shadow: 0 4px 16px rgba(20, 50, 44, 0.06);
}

.ldap-settings--ldap .ldap-hero-copy {
    flex: 1 1 22rem;
}

.ldap-settings--ldap .ldap-hero-eyebrow {
    margin-bottom: 0.25rem;
    color: #147761;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ldap-settings--ldap .ldap-hero-title {
    gap: 0.55rem;
    color: #172d39;
    font-size: 1.35rem;
}

.ldap-settings--ldap .ldap-hero-title i {
    color: #087f70;
}

.ldap-settings--ldap .ldap-hero-sub {
    margin-top: 0.35rem;
    color: #526671;
}

.ldap-settings--ldap .ldap-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.ldap-settings--ldap .ldap-status-indicator,
.ldap-settings--ldap .ldap-hero-meta-item,
.ldap-settings--ldap .ldap-transport-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid #d2dedb;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.7);
    color: #40535c;
    font-size: 0.78rem;
    line-height: 1.25;
}

.ldap-settings--ldap .ldap-status-indicator {
    font-weight: 700;
}

.ldap-settings--ldap .ldap-status-indicator.is-enabled {
    border-color: #9ad9c2;
    background: #e6f6ef;
    color: #17634e;
}

.ldap-settings--ldap .ldap-status-indicator.is-disabled {
    background: #f2f4f5;
}

.ldap-settings--ldap .ldap-status-dot {
    width: 0.45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #7b8790;
}

.ldap-settings--ldap .ldap-status-indicator.is-enabled .ldap-status-dot {
    background: #15966d;
}

.ldap-settings--ldap .ldap-hero-toggles {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20, 50, 44, 0.04);
}

.ldap-settings--ldap .ldap-section {
    border: 1px solid #d9e1e3;
    border-left: 3px solid var(--ldap-section-accent, #087f70);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(30, 48, 56, 0.035);
}

.ldap-settings--ldap .ldap-section-sky { --ldap-section-accent: #16849a; }
.ldap-settings--ldap .ldap-section-teal { --ldap-section-accent: #087f70; }
.ldap-settings--ldap .ldap-section-amber { --ldap-section-accent: #b46914; }
.ldap-settings--ldap .ldap-section-blue { --ldap-section-accent: #3d73b9; }
.ldap-settings--ldap .ldap-section-indigo { --ldap-section-accent: #5e62a8; }
.ldap-settings--ldap .ldap-section-slate { --ldap-section-accent: #647986; }

.ldap-settings--ldap .ldap-section-title {
    gap: 0.55rem;
    color: #203741;
    font-size: 1rem;
}

.ldap-settings--ldap .ldap-section-title i {
    color: var(--ldap-section-accent, #087f70);
}

.ldap-settings--ldap .cmms-form-hint {
    color: #5c6e77;
}

.ldap-settings--ldap .ldap-transport-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #ead5a7;
    border-radius: 6px;
    background: #fff8e8;
    color: #6e5018;
    font-size: 0.88rem;
}

.ldap-settings--ldap .ldap-transport-warning i {
    margin-top: 0.1rem;
    color: #aa7515;
}

.ldap-settings--ldap .ldap-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cmms-border);
}

.ldap-settings--ldap .ldap-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.55rem;
}

.ldap-settings--ldap .ldap-section .form-control,
.ldap-settings--ldap .ldap-section .form-select {
    border-radius: 6px;
}

.saml-test-status {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.saml-test-status-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.28);
    color: #065f46;
}
.saml-test-status-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}
.saml-test-status-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
    color: #991b1b;
}
.saml-test-results-title {
    font-size: 0.95rem;
    font-weight: 650;
    margin-bottom: 0.65rem;
    color: #312e81;
}
.saml-test-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
}
.saml-test-item {
    display: grid;
    grid-template-columns: 1.5rem 10rem 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    background: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}
.saml-test-name { font-weight: 600; color: #1e1b4b; }
.saml-test-msg { color: #475569; }
.saml-test-pass { border-color: rgba(16, 185, 129, 0.25); }
.saml-test-warning { border-color: rgba(245, 158, 11, 0.3); }
.saml-test-fail { border-color: rgba(239, 68, 68, 0.28); }
.saml-test-tips {
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: rgba(224, 242, 254, 0.55);
    border: 1px solid rgba(14, 165, 233, 0.22);
    color: #0c4a6e;
}

@media (max-width: 767.98px) {
    .ldap-hero { align-items: stretch; }
    .ldap-hero-toggles { width: 100%; }
    .ldap-settings--ldap .ldap-hero-copy { flex-basis: 100%; }
    .ldap-settings--ldap .ldap-form-actions .btn { flex: 1 1 100%; }
    .saml-test-item { grid-template-columns: 1.25rem 1fr; }
    .saml-test-msg { grid-column: 2 / -1; }
}

/* App updates (settings/updates) — status KPIs, tab accents and colour-coded
   prerequisite groups. */
.cmms-updater-kpi-sub {
    margin-top: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--cmms-steel);
}

.cmms-kpi-top .cmms-kpi-label {
    margin-bottom: 0;
}

.cmms-updater-tabs {
    gap: 0.4rem;
    border-bottom: 1px solid var(--cmms-border);
    padding-bottom: 0.5rem;
}

.cmms-updater-tabs .nav-link {
    border: 1px solid transparent;
    background: var(--cmms-surface-mid);
}

.cmms-updater-tabs .nav-link:hover {
    border-color: var(--cmms-border);
    color: var(--cmms-ink);
}

.cmms-updater-tabs .nav-link[data-updater-tab="prerequisites"].active {
    background: linear-gradient(135deg, #0E7490 0%, #0891B2 100%);
    box-shadow: 0 6px 16px rgba(8, 145, 178, 0.28);
}

.cmms-updater-tabs .nav-link[data-updater-tab="updates"].active {
    background: linear-gradient(135deg, var(--cmms-accent) 0%, #14B890 100%);
    box-shadow: 0 6px 16px var(--cmms-accent-glow);
}

.cmms-updater-tabs .nav-link[data-updater-tab="framework"].active {
    background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.26);
}

.cmms-updater-tabs .nav-link .badge {
    font-size: 0.68rem;
    font-weight: 700;
}

.cmms-updater-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* One card per prerequisite group, colour-coded by area. */
.cmms-updater-group {
    border: 1px solid var(--cmms-border);
    border-top: 3px solid var(--cmms-accent);
    border-radius: var(--cmms-radius);
    background: var(--cmms-panel);
    box-shadow: var(--cmms-shadow);
    overflow: hidden;
}

.cmms-updater-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--cmms-border);
    background: linear-gradient(180deg, #FAFCFD 0%, #F5F8FB 100%);
}

.cmms-updater-group-emoji {
    font-size: 1.1rem;
    line-height: 1;
}

.cmms-updater-group-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--cmms-ink);
}

.cmms-updater-group-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cmms-steel);
}

.cmms-updater-group-blurb {
    margin: 0;
    padding: 0.6rem 0.95rem 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--cmms-steel);
}

.cmms-updater-group-body {
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem 0.95rem 0.95rem;
}

.cmms-updater-group.tone-runtime { border-top-color: #0D9488; }
.cmms-updater-group.tone-runtime .cmms-updater-group-head { background: linear-gradient(180deg, rgba(240, 253, 250, 0.95) 0%, transparent 100%); }
.cmms-updater-group.tone-runtime .cmms-updater-group-title { color: #115E59; }

.cmms-updater-group.tone-dependencies { border-top-color: #4F46E5; }
.cmms-updater-group.tone-dependencies .cmms-updater-group-head { background: linear-gradient(180deg, rgba(238, 242, 255, 0.95) 0%, transparent 100%); }
.cmms-updater-group.tone-dependencies .cmms-updater-group-title { color: #3730A3; }

.cmms-updater-group.tone-tooling { border-top-color: #D97706; }
.cmms-updater-group.tone-tooling .cmms-updater-group-head { background: linear-gradient(180deg, rgba(255, 251, 235, 0.95) 0%, transparent 100%); }
.cmms-updater-group.tone-tooling .cmms-updater-group-title { color: #9A3412; }

.cmms-updater-group.tone-storage { border-top-color: #0284C7; }
.cmms-updater-group.tone-storage .cmms-updater-group-head { background: linear-gradient(180deg, rgba(240, 249, 255, 0.95) 0%, transparent 100%); }
.cmms-updater-group.tone-storage .cmms-updater-group-title { color: #075985; }

.cmms-updater-group.tone-connectivity { border-top-color: #7C3AED; }
.cmms-updater-group.tone-connectivity .cmms-updater-group-head { background: linear-gradient(180deg, rgba(245, 243, 255, 0.95) 0%, transparent 100%); }
.cmms-updater-group.tone-connectivity .cmms-updater-group-title { color: #5B21B6; }

/* A single prerequisite result. */
.cmms-updater-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--cmms-border);
    border-left: 3px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
}

.cmms-updater-check.is-ok {
    border-left-color: #0D9488;
}

.cmms-updater-check.is-warning {
    border-left-color: var(--cmms-warn);
    background: var(--cmms-warn-soft);
}

.cmms-updater-check.is-missing {
    border-left-color: var(--cmms-danger);
    background: var(--cmms-danger-soft);
}

.cmms-updater-check-emoji {
    font-size: 1rem;
    line-height: 1.4;
}

.cmms-updater-check-label {
    font-weight: 650;
    font-size: 0.88rem;
    color: var(--cmms-ink);
}

.cmms-updater-check-flag {
    margin-left: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cmms-steel);
}

.cmms-updater-check-detail {
    font-size: 0.82rem;
    color: var(--cmms-ink-soft);
    overflow-wrap: anywhere;
}

.cmms-updater-check-hint {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--cmms-steel);
}

.cmms-updater-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cmms-updater-pill.pill-ok { background: var(--cmms-accent-soft); color: #065F46; border-color: rgba(13, 138, 106, 0.28); }
.cmms-updater-pill.pill-warning { background: var(--cmms-warn-soft); color: #9A3412; border-color: rgba(194, 65, 12, 0.25); }
.cmms-updater-pill.pill-missing { background: var(--cmms-danger-soft); color: #991B1B; border-color: rgba(185, 28, 28, 0.25); }
.cmms-updater-pill.pill-info { background: var(--cmms-info-soft); color: var(--cmms-info); border-color: rgba(29, 78, 216, 0.22); }
.cmms-updater-pill.pill-muted { background: #F0F3F7; color: var(--cmms-steel); border-color: var(--cmms-border); }

/* Available commit / release rows inside the Updates tab. */
.cmms-updater-listitem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
}

.cmms-updater-listitem-meta {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--cmms-steel);
}

.cmms-updater-cmd {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--cmms-ink);
    color: #E8EEF4;
    border-radius: var(--cmms-radius-sm);
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.cmms-updater-cmd code {
    color: inherit;
    background: none;
}

.cmms-updater-note {
    font-size: 0.78rem;
    color: var(--cmms-steel);
}

@media (max-width: 575.98px) {
    .cmms-updater-check {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cmms-updater-check-action {
        grid-column: 2 / -1;
        justify-self: start;
    }
}


/* Help & About two-pane */
.cmms-help-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.cmms-help-toc {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    margin-bottom: 0;
}

.cmms-help-toc-body {
    padding: 0.75rem 0.85rem 1rem;
}

.cmms-help-toc-group + .cmms-help-toc-group {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(61, 79, 102, 0.12);
}

.cmms-help-toc-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cmms-steel, #3D4F66);
    margin-bottom: 0.35rem;
    padding: 0 0.35rem;
}

.cmms-help-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.cmms-help-toc-link {
    display: block;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    color: var(--cmms-ink, #1A2332);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.35;
    border: 1px solid transparent;
}

.cmms-help-toc-link:hover {
    background: rgba(15, 110, 86, 0.08);
    color: var(--cmms-accent, #0F6E56);
}

.cmms-help-toc-link.is-active,
.cmms-help-toc-link[aria-current="true"] {
    background: rgba(15, 110, 86, 0.12);
    border-color: rgba(15, 110, 86, 0.22);
    color: var(--cmms-accent, #0F6E56);
    font-weight: 600;
}

.cmms-help-articles {
    min-width: 0;
}

.cmms-help-article {
    margin-bottom: 0;
}

.cmms-help-article .cmms-panel-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.cmms-help-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cmms-accent, #0F6E56);
    background: rgba(15, 110, 86, 0.1);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.cmms-help-article-title {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--cmms-ink, #1A2332);
}

.cmms-help-article-body {
    width: 100%;
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--cmms-ink, #1A2332);
}

.cmms-help-article-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.25rem 0 0.55rem;
    color: var(--cmms-ink, #1A2332);
}

.cmms-help-article-body h4 {
    font-size: 0.98rem;
    font-weight: 650;
    margin: 1rem 0 0.4rem;
}

.cmms-help-article-body p {
    margin-bottom: 0.9rem;
}

.cmms-help-article-body p:last-child,
.cmms-help-article-body ul:last-child,
.cmms-help-article-body ol:last-child {
    margin-bottom: 0;
}

.cmms-help-article-body ul,
.cmms-help-article-body ol {
    margin-bottom: 0.9rem;
    padding-left: 1.25rem;
}

.cmms-help-article-body li + li {
    margin-top: 0.4rem;
}

.cmms-help-article-body code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.88em;
    background: rgba(61, 79, 102, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    overflow-wrap: break-word;
}

.cmms-help-article-body a {
    color: var(--cmms-accent, #0F6E56);
    font-weight: 600;
}

.cmms-help-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1rem;
    font-size: 0.92rem;
}

.cmms-help-article-body th,
.cmms-help-article-body td {
    border: 1px solid rgba(61, 79, 102, 0.16);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.cmms-help-article-body th {
    background: rgba(15, 110, 86, 0.08);
    font-weight: 650;
}

.cmms-help-article-body pre {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: rgba(26, 35, 50, 0.04);
    border: 1px solid rgba(61, 79, 102, 0.12);
    overflow-x: auto;
    font-size: 0.86rem;
}

.cmms-help-mermaid {
    margin: 1rem 0 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(61, 79, 102, 0.14);
    background: linear-gradient(180deg, rgba(240, 243, 247, 0.9) 0%, #fff 52%);
    overflow-x: auto;
    box-shadow: 0 1px 0 rgba(26, 35, 50, 0.04);
}

.cmms-help-mermaid pre.mermaid {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: center;
}

.cmms-help-mermaid svg {
    max-width: 100%;
    height: auto;
}

.cmms-help-caption {
    margin: 0 0 1.15rem !important;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cmms-steel, #3D4F66);
    font-style: italic;
    padding-left: 0.15rem;
}

.cmms-help-callout {
    margin: 1rem 0 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(61, 79, 102, 0.14);
    background: #fff;
}

.cmms-help-callout-title {
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.cmms-help-callout-body p {
    margin-bottom: 0.55rem;
}

.cmms-help-callout-body p:last-child {
    margin-bottom: 0;
}

.cmms-help-callout--tip {
    border-color: rgba(15, 110, 86, 0.28);
    background: linear-gradient(180deg, rgba(15, 110, 86, 0.08) 0%, #fff 55%);
}
.cmms-help-callout--tip .cmms-help-callout-title { color: var(--cmms-accent, #0F6E56); }

.cmms-help-callout--try {
    border-color: rgba(23, 92, 211, 0.28);
    background: linear-gradient(180deg, rgba(23, 92, 211, 0.08) 0%, #fff 55%);
}
.cmms-help-callout--try .cmms-help-callout-title { color: #175CD3; }

.cmms-help-callout--story {
    border-color: rgba(180, 83, 9, 0.28);
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.08) 0%, #fff 55%);
}
.cmms-help-callout--story .cmms-help-callout-title { color: #B45309; }

.cmms-help-callout--warn {
    border-color: rgba(180, 35, 24, 0.28);
    background: linear-gradient(180deg, rgba(180, 35, 24, 0.07) 0%, #fff 55%);
}
.cmms-help-callout--warn .cmms-help-callout-title { color: #B42318; }

/* Help & About: generated API reference and unit testing sections */
.cmms-help-article-actions {
    margin-top: 0.15rem;
}

.cmms-help-inline-link {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--cmms-accent, #0F6E56);
    text-decoration: none;
}

.cmms-help-inline-link:hover {
    text-decoration: underline;
}

.cmms-help-article-body h3 {
    scroll-margin-top: 5rem;
}

.cmms-api-method {
    display: inline-block;
    min-width: 3.6rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #175CD3;
    background: rgba(23, 92, 211, 0.1);
    border-radius: 6px;
}

.cmms-help-article-body th {
    text-align: left;
}

.cmms-help-article-body tr.is-jump-target,
.cmms-help-article-body h3.is-jump-target,
.cmms-help-article-body li.is-jump-target {
    background: rgba(15, 110, 86, 0.12);
    border-radius: 8px;
    transition: background 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Help & About menu: colour-coded emoji topics
   Each group sets --cmms-help-accent / --cmms-help-soft inline, so the menu
   heading, the hover tint and the article header all wear the group colour.
   --------------------------------------------------------------------------- */
.cmms-help-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-bottom: 1.15rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--cmms-surface-mid) 100%);
    box-shadow: var(--cmms-shadow);
    font-size: 0.84rem;
    color: var(--cmms-steel);
}

.cmms-help-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--cmms-ink);
}

.cmms-help-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--cmms-border);
    border-radius: 999px;
    background: var(--cmms-panel);
    color: var(--cmms-ink);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cmms-help-summary-link:hover,
.cmms-help-summary-link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cmms-accent);
    color: var(--cmms-accent);
}

.cmms-help-toc-filter {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 0.55rem;
    background: var(--cmms-panel);
}

.cmms-help-toc-filter-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-panel);
    color: var(--cmms-ink);
    font-size: 0.86rem;
}

.cmms-help-toc-filter-input:focus {
    border-color: var(--cmms-accent);
    outline: 3px solid var(--cmms-accent-glow);
    outline-offset: 1px;
}

.cmms-help-toc-empty {
    margin: 0 0 0.6rem;
    padding: 0 0.35rem;
    font-size: 0.8rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--cmms-steel);
}

.cmms-help-toc-group.is-filtered-out {
    display: none;
}

.cmms-help-toc-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cmms-help-accent, var(--cmms-accent));
}

.cmms-help-toc-group-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 7px;
    background: var(--cmms-help-soft, var(--cmms-accent-soft));
    font-size: 0.85rem;
    line-height: 1;
}

.cmms-help-toc-group-blurb {
    margin: 0.2rem 0 0.5rem;
    padding: 0 0.35rem;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--cmms-steel);
}

.cmms-help-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cmms-help-toc-link:hover {
    background: var(--cmms-help-soft, rgba(15, 110, 86, 0.08));
    color: var(--cmms-help-accent, var(--cmms-accent));
}

.cmms-help-toc-link.is-active,
.cmms-help-toc-link[aria-current="true"] {
    background: var(--cmms-help-soft, rgba(15, 110, 86, 0.12));
    border-color: var(--cmms-help-accent, var(--cmms-accent));
    color: var(--cmms-help-accent, var(--cmms-accent));
    box-shadow: inset 3px 0 0 var(--cmms-help-accent, var(--cmms-accent));
}

.cmms-help-toc-emoji {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.05rem;
    border: 1px solid rgba(15, 28, 46, 0.07);
    border-radius: 7px;
    background: var(--cmms-help-soft, var(--cmms-accent-soft));
    font-size: 0.85rem;
    line-height: 1;
}

.cmms-help-toc-text {
    min-width: 0;
}

.cmms-help-toc-title {
    display: block;
    font-size: 0.9rem;
    line-height: 1.35;
}

.cmms-help-toc-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.12rem;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--cmms-steel);
}

/* Help & About article header: the group colour carries through to the panel. */
.cmms-help-article .cmms-panel-header {
    border-left: 4px solid var(--cmms-help-accent, var(--cmms-accent));
    background: linear-gradient(180deg, var(--cmms-help-soft, var(--cmms-accent-soft)) 0%, var(--cmms-panel) 100%);
}

.cmms-help-article-emoji {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(15, 28, 46, 0.08);
    border-radius: 9px;
    background: var(--cmms-panel);
    box-shadow: 0 1px 3px rgba(15, 28, 46, 0.08);
    font-size: 1.05rem;
    line-height: 1;
}

.cmms-help-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--cmms-help-accent, var(--cmms-accent));
    background: var(--cmms-help-soft, rgba(15, 110, 86, 0.1));
}

.cmms-help-article-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.cmms-help-lead {
    margin: 0.45rem 0 0;
    max-width: 72ch;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cmms-steel);
}

.cmms-help-example {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.75rem;
    max-width: 72ch;
    border: 1px dashed var(--cmms-help-accent, var(--cmms-accent));
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-help-soft, var(--cmms-accent-soft));
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--cmms-ink);
}

.cmms-help-example-label {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cmms-help-accent, var(--cmms-accent));
}

.cmms-help-partof {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    font-style: italic;
    color: var(--cmms-steel);
}

.cmms-swagger {
    margin: 1rem 0 1.5rem;
    padding: 0.5rem 1rem 1.25rem;
    border: 1px solid rgba(61, 79, 102, 0.16);
    border-radius: 12px;
    background: #fff;
    overflow-x: auto;
}

.cmms-swagger .swagger-ui {
    font-family: var(--cmms-font);
}

.cmms-swagger .swagger-ui .info {
    margin: 1rem 0;
}

.cmms-swagger .swagger-ui .topbar {
    display: none;
}

/* —— Instance status landing (/status) —— */
.cmms-status-body {
    /* Auto-fit tokens: one max width and one gutter drive every status
       container, so the page scales from a 320px phone to a 4K display
       without per-breakpoint duplication. */
    --cmms-status-max: 1120px;
    --cmms-status-gutter: clamp(0.85rem, 2.4vw, 1.25rem);
    --cmms-status-gap: clamp(0.75rem, 1.4vw, 1rem);
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
        linear-gradient(25deg, rgba(13, 138, 106, 0.035) 1px, transparent 1px),
        radial-gradient(ellipse 70% 45% at 8% -8%, rgba(13, 138, 106, 0.24), transparent 55%),
        radial-gradient(ellipse 55% 35% at 100% 0%, rgba(29, 78, 216, 0.14), transparent 52%),
        linear-gradient(180deg, #DCE8F0 0%, #F4F8FA 38%, #E5EFEA 100%);
    background-size: 46px 46px, 72px 72px, auto, auto, auto;
    color: var(--cmms-ink);
    font-family: var(--cmms-font);
}

.cmms-status-body.is-degraded {
    background:
        radial-gradient(ellipse 70% 45% at 8% -8%, rgba(194, 65, 12, 0.14), transparent 55%),
        radial-gradient(ellipse 55% 35% at 100% 0%, rgba(29, 78, 216, 0.06), transparent 52%),
        linear-gradient(180deg, #F5EFE6 0%, #F7F4EF 38%, #EEE8E0 100%);
}

/* —— Alert preferences (/notification-preferences) —— */
.cmms-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.cmms-alert-status-card {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    padding: 1.05rem 1.2rem;
    border-radius: var(--cmms-radius);
    border: 1px solid rgba(13, 138, 106, 0.24);
    background: linear-gradient(135deg, #E8F8F3 0%, #EEF4FF 58%, #F8FAFC 100%);
    box-shadow: var(--cmms-shadow);
}

.cmms-alert-status-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.cmms-alert-status-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 0.85rem;
    font-size: 1.6rem;
    line-height: 1;
    background: #fff;
    border: 1px solid rgba(13, 138, 106, 0.22);
    box-shadow: var(--cmms-shadow);
}

.cmms-alert-status-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #065F46;
}

.cmms-alert-status-sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--cmms-steel);
}

.cmms-alert-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.cmms-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--cmms-border);
    background: #fff;
    color: var(--cmms-steel);
}

.cmms-alert-chip.is-on {
    border-color: rgba(13, 138, 106, 0.3);
    color: #065F46;
}

.cmms-alert-chip.is-off {
    background: #F3F4F6;
    border-color: #E5E7EB;
    color: #6B7280;
}

.cmms-alert-status-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #14B890 0%, var(--cmms-accent) 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px var(--cmms-accent-glow);
}

.cmms-alert-status-count.is-off {
    background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%);
    color: #6B7280;
    box-shadow: none;
}

.cmms-alert-channel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.05rem 1.1rem 1.1rem;
    border-radius: var(--cmms-radius);
    border: 1px solid var(--cmms-border);
    background: #fff;
    box-shadow: var(--cmms-shadow);
    transition: transform 0.16s ease, box-shadow 0.18s ease;
}

.cmms-alert-channel:hover {
    transform: translateY(-2px);
    box-shadow: var(--cmms-shadow-lg);
}

.cmms-alert-channel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--cmms-accent), #2BB89A);
}

.cmms-alert-channel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.cmms-alert-channel-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    font-size: 1.4rem;
    line-height: 1;
    background: #fff;
    border: 1px solid var(--cmms-border);
}

.cmms-alert-channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cmms-alert-channel-pill.is-on {
    border-color: rgba(13, 138, 106, 0.28);
    background: var(--cmms-accent-soft);
    color: #065F46;
}

.cmms-alert-channel-pill.is-warn {
    border-color: rgba(217, 119, 6, 0.3);
    background: #FEF3C7;
    color: #92400E;
}

.cmms-alert-channel-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-alert-channel-note {
    margin: 0;
    font-size: 0.81rem;
    line-height: 1.4;
    color: var(--cmms-steel);
}

.cmms-alert-channel--email {
    background: linear-gradient(180deg, #EFF6FF 0%, #fff 45%);
    border-color: rgba(29, 78, 216, 0.2);
}

.cmms-alert-channel--email::before {
    background: linear-gradient(90deg, var(--cmms-info), #3B82F6);
}

.cmms-alert-channel--email .cmms-alert-channel-title { color: var(--cmms-info); }
.cmms-alert-channel--email .cmms-alert-channel-emoji { border-color: rgba(29, 78, 216, 0.24); }

.cmms-alert-channel--sms {
    background: linear-gradient(180deg, #F5F3FF 0%, #fff 45%);
    border-color: rgba(109, 40, 217, 0.2);
}

.cmms-alert-channel--sms::before {
    background: linear-gradient(90deg, #7C3AED, #A78BFA);
}

.cmms-alert-channel--sms .cmms-alert-channel-title { color: #6D28D9; }
.cmms-alert-channel--sms .cmms-alert-channel-emoji { border-color: rgba(109, 40, 217, 0.24); }

.cmms-alert-channel--news {
    background: linear-gradient(180deg, #FFF7ED 0%, #fff 45%);
    border-color: rgba(217, 119, 6, 0.22);
}

.cmms-alert-channel--news::before {
    background: linear-gradient(90deg, #D97706, #FBBF24);
}

.cmms-alert-channel--news .cmms-alert-channel-title { color: #B45309; }
.cmms-alert-channel--news .cmms-alert-channel-emoji { border-color: rgba(217, 119, 6, 0.26); }

.cmms-alert-section {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: var(--cmms-radius);
    border: 1px solid var(--cmms-border);
    background: #fff;
}

.cmms-alert-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.cmms-alert-section-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.7rem;
    font-size: 1.4rem;
    line-height: 1;
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
}

.cmms-alert-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-alert-section-note {
    margin: 0.15rem 0 0;
    font-size: 0.79rem;
    color: var(--cmms-steel);
}

.cmms-alert-section--iot {
    background: linear-gradient(160deg, #ECFDF5 0%, #ECFEFF 55%, #fff 100%);
    border-color: rgba(13, 138, 106, 0.24);
}

.cmms-alert-section--iot .cmms-alert-section-emoji {
    background: #D3F3E9;
    border-color: rgba(13, 138, 106, 0.28);
}

.cmms-alert-section--iot .cmms-alert-section-title { color: #0B6B52; }

.cmms-alert-section--pm {
    background: linear-gradient(160deg, #FFF7ED 0%, #FFFBEB 55%, #fff 100%);
    border-color: rgba(217, 119, 6, 0.26);
}

.cmms-alert-section--pm .cmms-alert-section-emoji {
    background: #FDE9C9;
    border-color: rgba(217, 119, 6, 0.3);
}

.cmms-alert-section--pm .cmms-alert-section-title { color: #92400E; }

.cmms-alert-section--news {
    background: linear-gradient(160deg, #EEF2FF 0%, #F5F3FF 55%, #fff 100%);
    border-color: rgba(79, 70, 229, 0.24);
}

.cmms-alert-section--news .cmms-alert-section-emoji {
    background: #E0E7FF;
    border-color: rgba(79, 70, 229, 0.28);
}

.cmms-alert-section--news .cmms-alert-section-title { color: #4338CA; }

.cmms-alert-switch {
    height: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: var(--cmms-radius-sm);
    border: 1px solid var(--cmms-border);
    background: rgba(255, 255, 255, 0.88);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cmms-alert-switch:hover {
    box-shadow: var(--cmms-shadow);
}

.cmms-alert-switch .form-check {
    margin-bottom: 0.35rem;
}

.cmms-alert-switch .form-check-input {
    cursor: pointer;
}

.cmms-alert-switch .form-check-label {
    font-weight: 600;
    cursor: pointer;
}

.cmms-alert-switch .cmms-form-hint {
    margin-top: 0;
}

.cmms-alert-switch--email {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.9) 0%, #fff 60%);
    border-color: rgba(29, 78, 216, 0.2);
}

.cmms-alert-switch--email .form-check-input:checked {
    background-color: var(--cmms-info);
    border-color: var(--cmms-info);
}

.cmms-alert-switch--sms {
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.9) 0%, #fff 60%);
    border-color: rgba(109, 40, 217, 0.2);
}

.cmms-alert-switch--sms .form-check-input:checked {
    background-color: #6D28D9;
    border-color: #6D28D9;
}

.cmms-alert-switch--news {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.9) 0%, #fff 60%);
    border-color: rgba(217, 119, 6, 0.22);
}

.cmms-alert-switch--news .form-check-input:checked {
    background-color: #D97706;
    border-color: #D97706;
}

.cmms-alert-switch:has(.form-check-input:checked) {
    border-color: rgba(13, 138, 106, 0.45);
    box-shadow: 0 0 0 3px var(--cmms-accent-glow);
}

@media (max-width: 575.98px) {
    .cmms-alert-status-card,
    .cmms-alert-section-head {
        align-items: flex-start;
    }

    .cmms-alert-status-count {
        align-self: flex-start;
    }
}

.cmms-status-body.is-down {
    background:
        radial-gradient(ellipse 70% 45% at 8% -8%, rgba(185, 28, 28, 0.14), transparent 55%),
        radial-gradient(ellipse 55% 35% at 100% 0%, rgba(15, 28, 46, 0.06), transparent 52%),
        linear-gradient(180deg, #F3E8E8 0%, #F7F2F2 38%, #EEE6E6 100%);
}

.cmms-status-hero {
    position: relative;
    width: 100%;
    max-width: var(--cmms-status-max);
    margin: 0 auto;
    padding: clamp(0.75rem, 1.8vw, 1.15rem) var(--cmms-status-gutter) 0.6rem;
}

.cmms-status-hero-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1.25fr) minmax(20rem, 1.15fr);
    gap: clamp(0.85rem, 1.8vw, 1.5rem);
    align-items: center;
    padding: clamp(0.9rem, 1.6vw, 1.25rem);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 251, 249, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15, 28, 46, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    animation: cmmsStatusFadeUp 0.45s ease both;
}

.cmms-status-hero-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--cmms-accent) 0%, #0EA5E9 56%, #F59E0B 100%);
}

.cmms-status-hero-card::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    top: -155px;
    right: -90px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.1);
    pointer-events: none;
}

.cmms-status-hero-copy {
    min-width: 0;
}

.cmms-status-logo {
    display: block;
    width: auto;
    max-width: min(220px, 100%);
    max-height: 52px;
    margin: 0 0 0.85rem;
    object-fit: contain;
    object-position: left center;
}

.cmms-status-hero-copy h1,
.cmms-status-hero-copy .cmms-status-tagline,
.cmms-status-hero-copy .cmms-status-meta {
    overflow-wrap: anywhere;
}

.cmms-status-signal {
    position: relative;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cmms-status-signal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(13, 138, 106, 0.35);
    animation: cmmsStatusPulse 2.4s ease-out infinite;
}

.cmms-status-body.is-degraded .cmms-status-signal-ring {
    border-color: rgba(194, 65, 12, 0.4);
}

.cmms-status-body.is-down .cmms-status-signal-ring {
    border-color: rgba(185, 28, 28, 0.4);
    animation: none;
}

.cmms-status-signal-core {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cmms-accent);
    color: #fff;
    font-size: 1.55rem;
    box-shadow: 0 10px 24px rgba(13, 138, 106, 0.32), 0 0 0 7px rgba(13, 138, 106, 0.08);
}

.cmms-status-body.is-degraded .cmms-status-signal-core {
    background: var(--cmms-warn);
    box-shadow: 0 8px 20px rgba(194, 65, 12, 0.28);
}

.cmms-status-body.is-down .cmms-status-signal-core {
    background: var(--cmms-danger);
    box-shadow: 0 8px 20px rgba(185, 28, 28, 0.28);
}

.cmms-status-kicker {
    letter-spacing: 0.06em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--cmms-accent-hover);
    margin-bottom: 0.3rem;
}

.cmms-status-hero h1 {
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    font-weight: 750;
    margin: 0;
    color: var(--cmms-ink);
    line-height: 1.15;
}

.cmms-status-tagline {
    margin: 0.3rem 0 0;
    color: var(--cmms-steel);
}

.cmms-status-meta {
    font-size: 0.82rem;
    color: var(--cmms-steel);
    margin-top: 0.35rem;
}

.cmms-status-meta code {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.cmms-status-mode-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.6rem;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(13, 138, 106, 0.22);
    border-left: 3px solid var(--cmms-accent);
    border-radius: 10px;
    background: rgba(230, 247, 242, 0.72);
}

.cmms-status-mode-strip.is-windows-single {
    border-color: rgba(194, 65, 12, 0.24);
    border-left-color: var(--cmms-warn);
    background: rgba(255, 244, 229, 0.82);
}

.cmms-status-mode-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
}

.cmms-status-mode-title i {
    color: var(--cmms-accent-hover);
}

.cmms-status-mode-strip.is-windows-single .cmms-status-mode-title i {
    color: var(--cmms-warn);
}

.cmms-status-mode-strip p {
    grid-column: 2;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--cmms-steel);
}

.cmms-status-mode-features {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.cmms-status-mode-features span {
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(13, 138, 106, 0.18);
    color: var(--cmms-accent-hover);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.cmms-status-mode-strip.is-windows-single .cmms-status-mode-features span {
    border-color: rgba(194, 65, 12, 0.18);
    color: var(--cmms-warn);
}

.cmms-status-badge {
    display: inline-block;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.cmms-status-badge--ok {
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent-hover);
}

.cmms-status-badge--warn {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
}

.cmms-status-badge--down {
    background: var(--cmms-danger-soft);
    color: var(--cmms-danger);
}

.cmms-status-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.cmms-status-hero-stats {
    display: grid;
    grid-column: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.45rem, 1vw, 0.65rem);
    min-width: 0;
}

.cmms-status-theme-toggle {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
}

.cmms-status-stat {
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(208, 218, 230, 0.9);
    box-shadow: 0 3px 10px rgba(15, 28, 46, 0.04);
}

.cmms-status-stat-value {
    display: block;
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.2rem);
    font-weight: 750;
    color: var(--cmms-ink);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.cmms-status-stat-value small {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--cmms-steel);
    margin-left: 0.15rem;
}

.cmms-status-stat-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--cmms-steel);
}

.cmms-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.cmms-status-actions .btn {
    border-radius: 999px;
    padding-inline: 1rem;
}

.cmms-status-main {
    width: 100%;
    max-width: var(--cmms-status-max);
    margin: 0 auto;
    padding: 0 var(--cmms-status-gutter) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--cmms-status-gap);
}

/* Grid/flex children default to min-content width, which lets long hostnames,
   URLs and probe details push the layout wider than the viewport. */
.cmms-status-main > *,
.cmms-status-grid > *,
.cmms-status-replica-grid > *,
.cmms-status-probe-grid > * {
    min-width: 0;
}

.cmms-status-section .cmms-panel-header {
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, #F3FBF8 0%, #F5F8FC 100%);
    border-bottom-color: rgba(13, 138, 106, 0.18);
}

.cmms-status-section {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 28, 46, 0.07);
}

.cmms-status-section-meta {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cmms-steel);
}

.cmms-status-grid {
    display: grid;
    /* Two cards side by side (26rem floor keeps a half-width card readable and
       caps the track count at two); the media queries collapse it to one. */
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: var(--cmms-status-gap);
}

.cmms-status-replica-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: clamp(0.6rem, 1.2vw, 0.85rem);
}

.cmms-status-replica {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--cmms-border);
    background: linear-gradient(145deg, #FFFFFF 0%, #F4F9FC 100%);
    box-shadow: 0 3px 10px rgba(15, 28, 46, 0.035);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cmms-status-replica:hover {
    transform: translateY(-1px);
    box-shadow: var(--cmms-shadow);
}

.cmms-status-replica.is-self {
    border-color: rgba(13, 138, 106, 0.35);
    background: linear-gradient(180deg, #F3FBF8 0%, #EAF8F3 100%);
}

.cmms-status-replica.is-bad {
    border-color: rgba(185, 28, 28, 0.28);
    background: linear-gradient(180deg, #FFF8F8 0%, #FCEEEE 100%);
}

.cmms-status-replica-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cmms-status-replica-top h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cmms-status-replica-facts {
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.cmms-status-replica-facts > div {
    display: grid;
    grid-template-columns: minmax(4.4rem, 5.4rem) minmax(0, 1fr);
    gap: 0.4rem;
    align-items: baseline;
}

.cmms-status-replica-facts dt {
    margin: 0;
    font-size: 0.72rem;
    color: var(--cmms-steel);
    font-weight: 650;
}

.cmms-status-replica-facts dd {
    margin: 0;
    font-size: 0.86rem;
    word-break: break-word;
}

.cmms-status-replica-detail {
    margin: 0.75rem 0 0.55rem;
    font-size: 0.8rem;
    color: var(--cmms-steel);
    line-height: 1.35;
}

.cmms-status-bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(208, 218, 230, 0.85);
    overflow: hidden;
}

.cmms-status-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cmms-accent), #2BB89A);
}

.cmms-status-replica.is-bad .cmms-status-bar > span {
    background: linear-gradient(90deg, var(--cmms-danger), #E35B5B);
}

.cmms-status-capacity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
}

.cmms-status-capacity-head > div {
    min-width: min(14rem, 100%);
}

.cmms-status-capacity-gauge {
    height: 10px;
    border-radius: 999px;
    background: rgba(208, 218, 230, 0.85);
    overflow: hidden;
}

.cmms-status-capacity-gauge > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cmms-accent), #2BB89A);
    transition: width 0.3s ease;
}

.cmms-status-capacity-gauge.is-watch > span {
    background: linear-gradient(90deg, var(--cmms-warn), #E0A22C);
}

.cmms-status-capacity-gauge.is-over > span {
    background: linear-gradient(90deg, var(--cmms-danger), #E35B5B);
}

.cmms-status-capacity-gauge.is-unknown > span {
    background: linear-gradient(90deg, var(--cmms-steel), #A9B6C6);
}

.cmms-status-capacity-message {
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--cmms-ink-soft);
    line-height: 1.4;
}

.cmms-status-capacity-nodes {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
}

.cmms-status-capacity-nodes li {
    display: grid;
    grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cmms-border);
    font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.85rem);
}

.cmms-status-capacity-nodes li:last-child {
    border-bottom: 0;
}

.cmms-status-capacity-node-name {
    font-weight: 700;
    color: var(--cmms-ink);
    overflow-wrap: anywhere;
}

.cmms-status-capacity-node-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: rgba(208, 218, 230, 0.85);
    overflow: hidden;
}

.cmms-status-capacity-node-bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cmms-accent), #2BB89A);
}

.cmms-status-capacity-nodes li.is-watch .cmms-status-capacity-node-bar > i {
    background: linear-gradient(90deg, var(--cmms-warn), #E0A22C);
}

.cmms-status-capacity-nodes li.is-over .cmms-status-capacity-node-bar > i,
.cmms-status-capacity-nodes li.is-down .cmms-status-capacity-node-bar > i {
    background: linear-gradient(90deg, var(--cmms-danger), #E35B5B);
}

.cmms-status-capacity-node-load {
    color: var(--cmms-steel);
    font-size: 0.8rem;
    white-space: nowrap;
}

.cmms-status-probe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: clamp(0.55rem, 1.1vw, 0.7rem);
}

.cmms-status-probe {
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--cmms-border);
    background: #FBFDFF;
}

.cmms-status-probe.is-ok {
    border-left: 3px solid var(--cmms-accent);
}

.cmms-status-probe.is-bad {
    border-left: 3px solid var(--cmms-danger);
    background: #FFF8F8;
}

.cmms-status-probe-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.cmms-status-probe-top strong {
    font-size: 0.9rem;
}

.cmms-status-probe-latency {
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--cmms-ink);
    margin-bottom: 0.25rem;
}

.cmms-status-probe-detail {
    margin: 0;
    font-size: 0.76rem;
    color: var(--cmms-steel);
    line-height: 1.35;
    word-break: break-word;
}

.cmms-status-ha-mode {
    margin-bottom: 0.85rem;
    color: var(--cmms-ink-soft);
    font-size: 0.92rem;
}

.cmms-status-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.cmms-status-pill--ok {
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent-hover);
}

.cmms-status-pill--warn {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
}

.cmms-status-pill--down {
    background: var(--cmms-danger-soft);
    color: var(--cmms-danger);
}

.cmms-status-checklist {
    list-style: none;

/* ---------------------------------------------------------------------------
   Notification centre: topbar bell, sidebar badge and the notification list.
   --------------------------------------------------------------------------- */

.cmms-notification-bell .btn {
    line-height: 1;
}

.cmms-notification-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.15rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--cmms-danger, #dc3545);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.cmms-nav-badge {
    margin-left: auto;
    font-size: 0.68rem;
}

.cmms-notification-menu {
    min-width: 20rem;
    max-width: 24rem;
    padding-bottom: 0;
}

.cmms-notification-item {
    border-left: 3px solid transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.cmms-notification-item.is-unread {
    border-left-color: var(--cmms-teal, #0f766e);
    background: rgba(15, 118, 110, 0.06);
}

.cmms-notification-item-title,
.cmms-notification-item-body,
.cmms-notification-item-time {
    display: block;
}

.cmms-notification-item-title {
    font-weight: 600;
}

.cmms-notification-item-body {
    color: #6c757d;
    font-size: 0.82rem;
    white-space: normal;
}

.cmms-notification-item-time {
    color: #adb5bd;
    font-size: 0.72rem;
}

/* Footer link of the bell menu: sits flush with the menu edges (padding-bottom: 0
   on .cmms-notification-menu), so it carries the blue call-to-action fill and the
   matching bottom corners. */
.cmms-notification-footer {
    background: var(--cmms-info, #1D4ED8);
    color: #fff;
    font-weight: 600;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-bottom-left-radius: var(--bs-dropdown-border-radius, 0.375rem);
    border-bottom-right-radius: var(--bs-dropdown-border-radius, 0.375rem);
}

.cmms-notification-footer:hover,
.cmms-notification-footer:focus,
.cmms-notification-footer:active {
    background: #1740B6;
    color: #fff;
}

.cmms-notification-row--unread > td:first-child {
    box-shadow: inset 3px 0 0 var(--cmms-teal, #0f766e);
}

.cmms-notification-channel {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.1rem 0.45rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Broadcasts: the must-see stack at the top of every page.
   --------------------------------------------------------------------------- */

.cmms-broadcast-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cmms-broadcast {
    margin-bottom: 0;
    border-left: 5px solid currentColor;
}

.cmms-broadcast-title {
    font-weight: 700;
}

    margin: 0;
    padding: 0;
}

.cmms-status-checklist li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cmms-border);
    font-size: 0.9rem;
}

.cmms-status-checklist li:last-child {
    border-bottom: 0;
}

.cmms-status-checklist li.is-ok strong::before {
    content: "✓ ";
    color: var(--cmms-accent);
}

.cmms-status-checklist li.is-bad strong::before {
    content: "✗ ";
    color: var(--cmms-danger);
}

.cmms-status-checklist span {
    color: var(--cmms-steel);
    font-size: 0.82rem;
}

.cmms-status-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: clamp(0.6rem, 1.3vw, 0.85rem);
}

.cmms-status-metric-value {
    font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.4rem);
    font-weight: 750;
    color: var(--cmms-ink);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.cmms-status-metric-value small {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--cmms-steel);
}

.cmms-status-metric-label {
    font-size: 0.78rem;
    color: var(--cmms-steel);
    margin-top: 0.2rem;
}

.cmms-status-dl {
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.cmms-status-dl > div {
    display: grid;
    grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
    gap: 0.35rem 0.5rem;
    align-items: baseline;
}

.cmms-status-dl dt {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cmms-steel);
    font-weight: 700;
}

.cmms-status-dl dd {
    margin: 0;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.cmms-status-urls {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmms-status-urls li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--cmms-border);
    font-size: 0.88rem;
    min-width: 0;
}

.cmms-status-urls a {
    overflow-wrap: anywhere;
}

.cmms-status-urls li:last-child {
    border-bottom: 0;
}

.cmms-status-urls span {
    text-transform: capitalize;
    color: var(--cmms-steel);
    font-size: 0.75rem;
    font-weight: 700;
}

.cmms-status-footer {
    width: 100%;
    max-width: var(--cmms-status-max);
    margin: 0 auto;
    padding: 0 var(--cmms-status-gutter) clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--cmms-steel);
}

@keyframes cmmsStatusPulse {
    0% { transform: scale(0.92); opacity: 0.85; }
    70% { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

@keyframes cmmsStatusFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cmms-status-signal-ring,
    .cmms-status-hero-card,
    .cmms-status-replica {
        animation: none !important;
        transition: none !important;
    }
}

/* Auto-fit breakpoints for the ops page. Layout is fluid by default (clamp()
   gutters and type, minmax(auto-fit) grids, min-width: 0 children); these
   blocks only adjust the structure at the edges of the range, from a 320px
   phone to a 4K display. */

@media (min-width: 1500px) {
    .cmms-status-body {
        --cmms-status-max: 1280px;
    }

    .cmms-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cmms-status-replica-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    }

    .cmms-status-probe-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    }
}

@media (min-width: 1900px) {
    /* 4K / ultra-wide: use more of the canvas and scale the whole page up
       instead of leaving a large empty gutter on the right. */
    .cmms-status-body {
        --cmms-status-max: 1600px;
        font-size: 1.05rem;
    }

    .cmms-status-replica-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    }
}

@media (min-width: 2500px) {
    .cmms-status-body {
        --cmms-status-max: 1800px;
        font-size: 1.1rem;
    }
}

@media (max-width: 1024px) {
    .cmms-status-hero-card {
        gap: 1rem 1.1rem;
    }

    .cmms-status-capacity-nodes li {
        grid-template-columns: minmax(4rem, 5rem) minmax(0, 1fr) auto auto;
    }
}

@media (max-width: 900px) {
    .cmms-status-hero-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cmms-status-hero-stats {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    .cmms-status-signal {
        width: 60px;
        height: 60px;
    }

    .cmms-status-signal-core {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
    }
}

@media (max-width: 800px) {
    .cmms-status-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-dl > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-capacity-nodes li {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.35rem;
    }

    .cmms-status-capacity-node-bar {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .cmms-status-section .cmms-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cmms-status-replica-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .cmms-status-capacity-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cmms-status-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cmms-status-body {
        --cmms-status-gutter: 0.85rem;
    }

    .cmms-status-hero-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .cmms-status-mode-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-mode-strip p,
    .cmms-status-mode-features {
        grid-column: auto;
    }

    .cmms-status-mode-features {
        flex-wrap: wrap;
        overflow: visible;
    }

    .cmms-status-theme-toggle .cmms-theme-toggle-label {
        display: none;
    }

    .cmms-status-hero-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-actions .btn {
        flex: 1 1 9rem;
        text-align: center;
    }

    .cmms-status-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .cmms-status-body {
        --cmms-status-gutter: 0.7rem;
    }

    .cmms-status-hero h1 {
        font-size: 1.35rem;
    }

    .cmms-status-badge,
    .cmms-status-pill {
        font-size: 0.7rem;
    }

    .cmms-status-replica-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cmms-status-capacity-nodes li {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .cmms-status-capacity-node-bar {
        width: 100%;
    }

    .cmms-status-capacity-node-load {
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .cmms-help-layout {
        grid-template-columns: 1fr;
    }

    .cmms-help-toc {
        position: static;
        max-height: none;
    }

    .cmms-help-toc-filter {
        position: static;
    }
}

/* The article pane fills all remaining width, so scale content up on wide screens
   instead of leaving a large empty gutter on the right. */
@media (min-width: 1400px) {
    .cmms-help-article-body {
        font-size: 1.08rem;
        line-height: 1.68;
    }

    .cmms-help-article-body table,
    .cmms-help-article-body pre {
        font-size: 0.95rem;
    }

    .cmms-help-article .cmms-panel-body {
        padding: 1.5rem 1.65rem 1.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Settings workspace (Settings → company branding & defaults)
   Colour-coded sections with emoji headings, jump chips, and a sticky save bar.
   --------------------------------------------------------------------------- */
.cmms-settings-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.cmms-settings-chip {
    --cmms-settings-chip-accent: var(--cmms-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--cmms-border);
    border-radius: 999px;
    background: var(--cmms-panel);
    color: var(--cmms-ink);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--cmms-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cmms-settings-chip:hover,
.cmms-settings-chip:focus-visible {
    transform: translateY(-1px);
    border-color: var(--cmms-settings-chip-accent);
    color: var(--cmms-settings-chip-accent);
    box-shadow: var(--cmms-shadow-lg);
}

.cmms-settings-section {
    --cmms-settings-accent: var(--cmms-accent);
    --cmms-settings-soft: var(--cmms-accent-soft);
    margin-bottom: 1.25rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: var(--cmms-panel);
    box-shadow: var(--cmms-shadow);
    overflow: hidden;
    scroll-margin-top: 1rem;
}

.cmms-settings-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.95rem 1.25rem;
    border-left: 4px solid var(--cmms-settings-accent);
    border-bottom: 1px solid var(--cmms-border);
    background: linear-gradient(180deg, var(--cmms-settings-soft) 0%, var(--cmms-panel) 100%);
}

.cmms-settings-emoji {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--cmms-panel);
    border: 1px solid rgba(15, 28, 46, 0.08);
    box-shadow: 0 1px 3px rgba(15, 28, 46, 0.08);
    font-size: 1.15rem;
    line-height: 1;
}

.cmms-settings-title {
    margin: 0;
    font-family: var(--cmms-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cmms-ink);
}

.cmms-settings-sub {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--cmms-steel);
}

.cmms-settings-body {
    padding: 1.25rem;
}

.cmms-settings-subgroup {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px dashed var(--cmms-border);
}

.cmms-settings-subgroup-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmms-settings-accent, var(--cmms-accent));
}

.cmms-settings-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--cmms-border);
    border-left: 3px solid var(--cmms-settings-accent, var(--cmms-accent));
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--cmms-steel);
}

.cmms-settings-card {
    height: 100%;
    padding: 1rem 1.05rem 1.1rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
}

.cmms-settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cmms-ink);
}

.cmms-settings-card .form-control,
.cmms-settings-card .form-select {
    background-color: var(--cmms-panel);
}

.cmms-settings-savebar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #FFFFFF 100%);
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 18px rgba(15, 28, 46, 0.08);
}

.cmms-settings-savebar-hint {
    font-size: 0.82rem;
    color: var(--cmms-steel);
}

.cmms-settings-section--org { --cmms-settings-accent: #0F766E; --cmms-settings-soft: #E4F5F3; }
.cmms-settings-section--brand { --cmms-settings-accent: #0D8A6A; --cmms-settings-soft: #E6F7F2; }
.cmms-settings-section--type { --cmms-settings-accent: #6D28D9; --cmms-settings-soft: #F1EBFE; }
.cmms-settings-section--media { --cmms-settings-accent: #B45309; --cmms-settings-soft: #FEF3E2; }
.cmms-settings-section--regional { --cmms-settings-accent: #1D4ED8; --cmms-settings-soft: #E8EFFC; }
.cmms-settings-section--units { --cmms-settings-accent: #7C3AED; --cmms-settings-soft: #F3EEFE; }
.cmms-settings-section--cost { --cmms-settings-accent: #B91C1C; --cmms-settings-soft: #FDECEC; }
.cmms-settings-section--display { --cmms-settings-accent: #0E7490; --cmms-settings-soft: #E3F6FB; }
.cmms-settings-section--fields { --cmms-settings-accent: #6D28D9; --cmms-settings-soft: #F1EBFE; }

.cmms-settings-chip--org { --cmms-settings-chip-accent: #0F766E; }
.cmms-settings-chip--brand { --cmms-settings-chip-accent: #0D8A6A; }
.cmms-settings-chip--type { --cmms-settings-chip-accent: #6D28D9; }
.cmms-settings-chip--media { --cmms-settings-chip-accent: #B45309; }
.cmms-settings-chip--regional { --cmms-settings-chip-accent: #1D4ED8; }
.cmms-settings-chip--units { --cmms-settings-chip-accent: #7C3AED; }
.cmms-settings-chip--cost { --cmms-settings-chip-accent: #B91C1C; }
.cmms-settings-chip--display { --cmms-settings-chip-accent: #0E7490; }
.cmms-settings-chip--fields { --cmms-settings-chip-accent: #6D28D9; }

/* The chip that represents the section you are already on reads as selected
   rather than merely hovered, so the active record type is never ambiguous. */
.cmms-settings-chip.is-active,
.cmms-settings-chip.is-active:hover,
.cmms-settings-chip.is-active:focus-visible {
    border-color: var(--cmms-settings-chip-accent);
    background: var(--cmms-settings-chip-accent);
    color: #fff;
    box-shadow: var(--cmms-shadow-lg);
}

/* Live sample of the chosen date, time, number and currency formats. */
.cmms-settings-sample {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
    font-size: 0.85rem;
}

.cmms-settings-sample dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmms-steel);
}

.cmms-settings-sample dd {
    margin: 0;
    font-weight: 600;
    font-family: var(--cmms-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

@media (max-width: 640px) {
    .cmms-settings-body {
        padding: 1rem;
    }

    .cmms-settings-section-head {
        padding: 0.85rem 1rem;
    }

    .cmms-settings-savebar {
        position: static;
    }

    .cmms-settings-savebar .btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Settings → Custom fields ("Expansion" fieldsets)
   One section per fieldset, a themed field table, and disclosures that reuse
   the chevron language of the "How to use" card.
   --------------------------------------------------------------------------- */
.cmms-fieldset-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-left: 4px solid var(--cmms-settings-accent);
    border-bottom: 1px solid var(--cmms-border);
    background: linear-gradient(180deg, var(--cmms-settings-soft) 0%, var(--cmms-panel) 100%);
}

.cmms-fieldset-head-main {
    flex: 1 1 14rem;
    min-width: 0;
}

.cmms-fieldset-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--cmms-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cmms-ink);
    overflow-wrap: anywhere;
}

.cmms-fieldset-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.cmms-fieldset-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--cmms-border);
    background: var(--cmms-panel);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cmms-steel);
    white-space: nowrap;
}

/* A disclosure that belongs to a panel rather than standing on its own: it
   keeps the shared chevron behaviour but reads as a dashed, inset block. */
.cmms-disclosure {
    border: 1px dashed var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
    padding: 0.7rem 0.9rem;
    margin-top: 0.6rem;
}

.cmms-disclosure[open] {
    background: var(--cmms-panel);
    border-style: solid;
}

.cmms-disclosure-body {
    margin-top: 0.85rem;
}

.cmms-field-status-yes {
    background: var(--cmms-accent-soft);
    color: #065F46;
}

.cmms-field-status-no {
    background: #F3F4F6;
    color: #6B7280;
}

.cmms-fieldset-table th {
    white-space: nowrap;
}

.cmms-fieldset-table td {
    vertical-align: top;
}

@media (max-width: 640px) {
    .cmms-fieldset-head {
        align-items: flex-start;
        padding: 0.85rem 1rem;
    }

    .cmms-fieldset-actions {
        width: 100%;
    }
}

/* Docker fleet management panel on /status (admins only) */
.cmms-status-fleet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cmms-status-fleet-note {
    font-size: 0.8rem;
    color: var(--cmms-steel);
    min-width: 0;
    flex: 1 1 16rem;
}

.cmms-status-fleet-runner {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cmms-status-fleet-runner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cmms-status-fleet-runner-row select {
    max-width: 24rem;
    flex: 0 1 auto;
}

.cmms-status-fleet-output {
    margin: 0;
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--cmms-border);
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.76rem;
    line-height: 1.45;
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Session manager panel on /status (admins only) */
.cmms-status-sessions {
    width: 100%;
}

.cmms-status-sessions th {
    white-space: nowrap;
}

.cmms-status-sessions tbody tr.is-current {
    background: rgba(16, 185, 129, 0.08);
}

.cmms-status-sessions-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.cmms-status-sessions-role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cmms-steel);
}

.cmms-status-sessions-ip,
.cmms-status-sessions-client,
.cmms-status-sessions-page,
.cmms-status-sessions-id {
    display: block;
}

.cmms-status-sessions-client {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmms-status-sessions-page {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmms-status-sessions-id {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.cmms-status-sessions-empty {
    text-align: center;
    color: var(--cmms-steel);
}

/* Session table tools: search, per-column filters, row limit and pager */
.cmms-status-sessions-tools {
    row-gap: 0.5rem;
}

.cmms-status-sessions-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 18rem;
    max-width: 26rem;
}

.cmms-status-sessions-search > .bi {
    color: var(--cmms-steel);
    font-size: 0.9rem;
}

.cmms-status-sessions-search .form-control {
    min-width: 0;
}

.cmms-status-sessions thead tr:first-child th {
    border-bottom: 1px solid var(--cmms-border);
}

.cmms-status-sessions-filters th {
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
    background: linear-gradient(180deg, #F3F7FB 0%, #E9F0F7 100%);
}

.cmms-status-sessions-filters .form-control {
    min-width: 7rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.78rem;
    /* The header cell uppercases its content; a typed filter must not inherit that. */
    text-transform: none;
    letter-spacing: normal;
}

.cmms-status-sessions-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cmms-border);
}

.cmms-status-sessions-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}

.cmms-status-sessions-range {
    font-size: 0.8rem;
    color: var(--cmms-steel);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .cmms-status-sessions-search {
        max-width: none;
    }

    .cmms-status-sessions-pager {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------------
   Phase 7: alert-fatigue controls
   The event x channel preference matrix and the admin delivery-log health
   strip. Both are plain tables/cards so they stay readable on a phone.
   --------------------------------------------------------------------------- */

.cmms-pref-matrix thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5b6b7c;
    vertical-align: top;
    white-space: nowrap;
}

.cmms-pref-matrix .cmms-pref-matrix-group td {
    background: #f1f5f9;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #334155;
}

.cmms-pref-matrix td {
    vertical-align: middle;
}

.cmms-pref-matrix .form-check-input {
    cursor: pointer;
    width: 1.15rem;
    height: 1.15rem;
}

.cmms-health-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.cmms-health-card {
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #ffffff;
}

.cmms-health-card.is-ok {
    border-left-color: #16a34a;
}

.cmms-health-card.is-trouble {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.cmms-health-card.is-idle {
    border-left-color: #cbd5e1;
}

.cmms-health-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cmms-health-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.cmms-health-pill {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6b7c;
}

.cmms-health-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: #334155;
}

.cmms-health-error {
    margin: 0.45rem 0 0 0;
    font-size: 0.78rem;
    color: #b91c1c;
    word-break: break-word;
}


/* ---------------------------------------------------------------------------
   Phase 8: field-level help pills and coloured form cues
   The ⓘ pill explains a field on hover; the note/severity classes give every
   new form a consistent colour language (blue = information, amber = careful,
   red = urgent, green = done).
   --------------------------------------------------------------------------- */

.cmms-help-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
}

.cmms-help-pill:hover,
.cmms-help-pill:focus {
    background: #c7d2fe;
    outline: none;
}

.cmms-field-note {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid #6366f1;
    border-radius: 0 8px 8px 0;
    background: #f8fafc;
    font-size: 0.8rem;
    color: #475569;
}

.cmms-field-note--info {
    border-left-color: #2563eb;
    background: #eff6ff;
}

.cmms-field-note--warn {
    border-left-color: #d97706;
    background: #fffbeb;
}

.cmms-field-note--danger {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.cmms-field-note--success {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.cmms-form-cue {
    margin: 0 0 0.75rem 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    background: #f1f5f9;
    color: #334155;
}

.cmms-form-cue--info {
    background: #eff6ff;
    color: #1e3a8a;
}

.cmms-form-cue--warn {
    background: #fffbeb;
    color: #92400e;
}

.cmms-form-cue--danger {
    background: #fef2f2;
    color: #991b1b;
}

.cmms-severity-key {
    display: grid;
    gap: 0.35rem;
    margin: 0.5rem 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
}

.cmms-severity-key li {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
}

.cmms-receipt-row--waiting {
    background: #fffbeb;
}

.cmms-receipt-row--waiting td:first-child {
    border-left: 3px solid #d97706;
}

/* ---------------------------------------------------------------------------
   /status — App node layouts. The App replicas panel renders six layouts of the
   same node list (cards, tiles, compact rows, table, latency bars and load
   rings). The switcher unhides one layout and hides the rest through the hidden
   attribute, so exactly one of them is in the accessibility tree at a time and
   the panel still renders server-side before (and without) JavaScript.
   --------------------------------------------------------------------------- */

.cmms-status-nodes-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}

.cmms-status-nodes-toolbar .btn-group {
    flex-wrap: wrap;
}

.cmms-status-nodes-toolbar .btn-group .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cmms-status-nodes-view {
    display: none;
}

.cmms-status-nodes-view:not([hidden]) {
    display: block;
}

/* The cards layout is the replica grid it replaced, so it keeps that grid. */
.cmms-status-nodes-view.cmms-status-replica-grid:not([hidden]) {
    display: grid;
}

.cmms-status-nodes-view--tiles:not([hidden]),
.cmms-status-nodes-view--compact:not([hidden]),
.cmms-status-nodes-view--rings:not([hidden]) {
    display: grid;
}

.cmms-status-nodes-view--tiles:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: clamp(0.5rem, 1vw, 0.7rem);
}

.cmms-status-nodes-view--compact:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
    gap: 0.4rem;
}

.cmms-status-nodes-view--rings:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(0.55rem, 1.1vw, 0.8rem);
}

/* Grid children default to min-content width, which lets a long hostname push
   the layout wider than the viewport. */
.cmms-status-nodes-view--tiles > *,
.cmms-status-nodes-view--compact > *,
.cmms-status-nodes-view--rings > * {
    min-width: 0;
}

.cmms-status-node-dot {
    width: 0.62rem;
    height: 0.62rem;
    flex: none;
    border-radius: 999px;
    background: var(--cmms-accent);
    box-shadow: 0 0 0 3px var(--cmms-accent-glow);
}

.is-bad .cmms-status-node-dot {
    background: var(--cmms-danger);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.14);
}

/* Small tiles: state, latency and session count at a glance. */
.cmms-status-node-tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--cmms-border);
    border-radius: 10px;
    background: linear-gradient(180deg, #FBFDFF 0%, #F7FAFC 100%);
}

.cmms-status-node-tile.is-self {
    border-color: rgba(13, 138, 106, 0.35);
}

.cmms-status-node-tile.is-bad {
    border-color: rgba(185, 28, 28, 0.28);
    background: linear-gradient(180deg, #FFF8F8 0%, #FCEEEE 100%);
}

.cmms-status-node-tile-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cmms-status-node-tile-top h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cmms-status-node-tile-top .cmms-status-pill {
    margin-left: auto;
}

.cmms-status-node-tile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.cmms-status-node-tile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--cmms-border);
    border-radius: 8px;
    background: rgba(244, 247, 250, 0.95);
}

.cmms-status-node-tile-stat strong {
    font-size: 1rem;
    font-weight: 750;
    color: var(--cmms-ink);
    line-height: 1.1;
}

.cmms-status-node-tile-stat small {
    font-size: 0.68rem;
    color: var(--cmms-steel);
}

.cmms-status-node-tile-host {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.72rem;
    color: var(--cmms-steel);
}

.cmms-status-node-tile-host code {
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

/* Compact one-line rows, for a long fleet. */
.cmms-status-node-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cmms-border);
    border-radius: 9px;
    background: #FBFDFF;
    font-size: clamp(0.76rem, 0.7rem + 0.2vw, 0.82rem);
}

.cmms-status-node-row.is-self {
    border-color: rgba(13, 138, 106, 0.35);
}

.cmms-status-node-row.is-bad {
    border-color: rgba(185, 28, 28, 0.28);
    background: #FFF8F8;
}

.cmms-status-node-row-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cmms-status-node-chip {
    max-width: 100%;
    overflow: hidden;
    color: var(--cmms-steel);
    font-size: 0.94em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cmms-status-node-row .cmms-status-pill {
    margin-left: auto;
}

/* Table: every node fact, one row each. */
.cmms-status-nodes-table code {
    overflow-wrap: anywhere;
}

.cmms-status-nodes-table {
    width: 100%;
}

.cmms-status-nodes-table tbody tr.is-bad td:first-child {
    border-left: 3px solid var(--cmms-danger);
}

.cmms-status-nodes-table-detail {
    max-width: 24rem;
    color: var(--cmms-steel);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Latency graph: one bar per node, scaled to the slowest node. */
.cmms-status-node-bars-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem 0.75rem;
    margin-bottom: 0.7rem;
    font-size: 0.78rem;
    color: var(--cmms-steel);
}

.cmms-status-node-bar-row,
.cmms-status-node-bars-axis {
    display: grid;
    grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr) minmax(4.5rem, auto);
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.cmms-status-node-bar-row {
    padding: 0.28rem 0;
    font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.86rem);
}

.cmms-status-node-bar-row.is-self .cmms-status-node-bar-name {
    color: var(--cmms-accent-hover);
}

.cmms-status-node-bar-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cmms-status-node-bar-track {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: rgba(208, 218, 230, 0.7);
    overflow: hidden;
}

.cmms-status-node-bar-track > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cmms-accent), #2BB89A);
    transition: width 0.3s ease;
}

.cmms-status-node-bar-row.is-bad .cmms-status-node-bar-track > i {
    background: linear-gradient(90deg, var(--cmms-danger), #E35B5B);
}

.cmms-status-node-bar-value {
    color: var(--cmms-ink);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cmms-status-node-bars-axis {
    margin-top: 0.2rem;
    color: var(--cmms-steel);
    font-size: 0.68rem;
}

.cmms-status-node-bars-ticks {
    display: flex;
    justify-content: space-between;
}

.cmms-status-node-bars-ticks i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

/* Load graph: one ring per node, sessions against the per-node ceiling. */
.cmms-status-node-ring-card {
    --cmms-node-ring-color: var(--cmms-accent);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--cmms-border);
    border-radius: 11px;
    background: linear-gradient(180deg, #FBFDFF 0%, #F7FAFC 100%);
}

.cmms-status-node-ring-card.is-self {
    border-color: rgba(13, 138, 106, 0.35);
}

.cmms-status-node-ring-card.is-watch {
    --cmms-node-ring-color: var(--cmms-warn);
}

.cmms-status-node-ring-card.is-over,
.cmms-status-node-ring-card.is-bad {
    --cmms-node-ring-color: var(--cmms-danger);
}

.cmms-status-node-ring-card.is-unknown {
    --cmms-node-ring-color: var(--cmms-steel);
}

.cmms-status-node-ring-card.is-bad {
    background: linear-gradient(180deg, #FFF8F8 0%, #FCEEEE 100%);
}

/* r=15.9155 gives the circle a circumference of 100, so the dash array is a
   straight percentage; the rotation starts every ring at 12 o'clock. */
.cmms-status-node-ring {
    width: 68px;
    height: 68px;
    flex: none;
    transform: rotate(-90deg);
}

.cmms-status-node-ring circle {
    fill: none;
    stroke-width: 4.6;
}

.cmms-status-node-ring-track {
    stroke: rgba(208, 218, 230, 0.9);
}

.cmms-status-node-ring-fill {
    stroke: var(--cmms-node-ring-color);
    transition: stroke-dasharray 0.3s ease;
}

.cmms-status-node-ring-copy {
    min-width: 0;
}

.cmms-status-node-ring-copy h2 {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cmms-status-node-ring-copy-value {
    margin: 0;
    color: var(--cmms-ink);
    font-size: 0.82rem;
    font-weight: 650;
}

.cmms-status-node-ring-copy-value small {
    display: block;
    color: var(--cmms-steel);
    font-size: 0.7rem;
    font-weight: 500;
}

.cmms-status-node-ring-note {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0;
    color: var(--cmms-steel);
    font-size: 0.76rem;
    line-height: 1.35;
}

@media (max-width: 720px) {
    .cmms-status-nodes-view--tiles:not([hidden]) {
        grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    }

    .cmms-status-nodes-view--compact:not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmms-status-node-bar-row,
    .cmms-status-node-bars-axis {
        grid-template-columns: minmax(3.5rem, 5rem) minmax(0, 1fr) auto;
    }
}

@media (max-width: 560px) {
    /* Six labels do not fit a phone; the icons stay, with the label as the
       button's accessible name (aria-label) and tooltip (title). */
    .cmms-status-nodes-toolbar-label {
        display: none;
    }

    .cmms-status-nodes-toolbar .btn-group {
        width: 100%;
    }

    .cmms-status-node-bar-value {
        font-size: 0.72rem;
    }
}

/* Notification pipeline panel (/status): the delivery counters reuse the metrics
   grid and the dashboard KPI tones, and the job table and run badges reuse the
   shared table and pill styles so the panel matches the node and session tables
   on the same page instead of falling back to Bootstrap defaults. */
.cmms-status-metric-value.accent {
    color: var(--cmms-accent);
}

.cmms-status-metric-value.warn {
    color: var(--cmms-warn);
}

.cmms-status-metric-value.danger {
    color: var(--cmms-danger);
}

.cmms-status-jobs {
    width: 100%;
}

.cmms-status-jobs-when {
    font-variant-numeric: tabular-nums;
    color: var(--cmms-ink);
}

.cmms-status-jobs .cmms-status-pill {
    margin-left: 0.4rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Add asset wizard (/assets/create/wizard) — one step at a time, colour coded.
   Each step owns an accent colour through --wizard-accent on its tab and panel.
   --------------------------------------------------------------------------- */
.cmms-wizard {
    margin-bottom: 1.5rem;
}

.cmms-wizard-step[data-step-theme="identity"],
.cmms-wizard-panel[data-step-theme="identity"] {
    --wizard-accent: #0D8A6A;
    --wizard-accent-soft: #E6F7F2;
    --wizard-accent-ink: #0A6F55;
}

.cmms-wizard-step[data-step-theme="placement"],
.cmms-wizard-panel[data-step-theme="placement"] {
    --wizard-accent: #1D4ED8;
    --wizard-accent-soft: #E8EFFC;
    --wizard-accent-ink: #1E40AF;
}

.cmms-wizard-step[data-step-theme="details"],
.cmms-wizard-panel[data-step-theme="details"] {
    --wizard-accent: #B45309;
    --wizard-accent-soft: #FFF4E5;
    --wizard-accent-ink: #92400E;
}

.cmms-wizard-step[data-step-theme="media"],
.cmms-wizard-panel[data-step-theme="media"] {
    --wizard-accent: #6D28D9;
    --wizard-accent-soft: #F1EBFE;
    --wizard-accent-ink: #5B21B6;
}

.cmms-wizard-step[data-step-theme="review"],
.cmms-wizard-panel[data-step-theme="review"] {
    --wizard-accent: #15803D;
    --wizard-accent-soft: #E7F6EC;
    --wizard-accent-ink: #166534;
}

.cmms-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.cmms-wizard-step {
    flex: 1 1 0;
    min-width: 8.75rem;
}

.cmms-wizard-step-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-panel);
    color: var(--cmms-steel);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cmms-wizard-step-btn:hover,
.cmms-wizard-step-btn:focus-visible {
    border-color: var(--wizard-accent, var(--cmms-accent));
    box-shadow: 0 0 0 2px var(--cmms-accent-glow);
    color: var(--cmms-ink);
}

.cmms-wizard-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--cmms-surface);
    color: var(--cmms-steel);
    font-size: 0.72rem;
    font-weight: 700;
}

.cmms-wizard-step-emoji {
    font-size: 1.05rem;
    line-height: 1;
}

.cmms-wizard-step-label {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.15;
}

.cmms-wizard-step.is-current .cmms-wizard-step-btn {
    border-color: var(--wizard-accent, var(--cmms-accent));
    background: var(--wizard-accent-soft, var(--cmms-accent-soft));
    color: var(--wizard-accent-ink, var(--cmms-accent-hover));
    box-shadow: 0 0 0 2px var(--cmms-accent-glow);
}

.cmms-wizard-step.is-done .cmms-wizard-step-btn {
    border-color: var(--wizard-accent, var(--cmms-accent));
    color: var(--wizard-accent-ink, var(--cmms-accent-hover));
}

.cmms-wizard-step.is-current .cmms-wizard-step-index,
.cmms-wizard-step.is-done .cmms-wizard-step-index {
    background: var(--wizard-accent, var(--cmms-accent));
    color: #FFFFFF;
}

.cmms-wizard-progress {
    height: 6px;
    margin: 0 0 1rem;
    border-radius: 999px;
    background: var(--cmms-surface);
    overflow: hidden;
}

.cmms-wizard-progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cmms-accent), var(--cmms-info) 55%, #6D28D9);
    transition: width 0.25s ease;
}

.cmms-wizard-panel {
    border: 1px solid var(--cmms-border);
    border-left: 4px solid var(--wizard-accent, var(--cmms-accent));
    border-radius: var(--cmms-radius);
    background: var(--cmms-panel);
    box-shadow: var(--cmms-shadow);
}

.cmms-wizard-panel + .cmms-wizard-panel {
    margin-top: 1rem;
}

.cmms-wizard-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius) var(--cmms-radius) 0 0;
    background: linear-gradient(180deg, var(--wizard-accent-soft, var(--cmms-accent-soft)), var(--cmms-panel));
}

.cmms-wizard-panel-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.cmms-wizard-panel-title {
    margin: 0;
    font-size: 1.05rem;
}

.cmms-wizard-panel-sub {
    margin: 0.15rem 0 0;
    color: var(--cmms-steel);
    font-size: 0.85rem;
}

.cmms-wizard-panel-body {
    padding: 1.15rem;
}

.cmms-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    background: var(--cmms-surface-mid);
}

.cmms-wizard-nav-status {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}

.cmms-wizard-nav-step {
    color: var(--cmms-ink);
    font-size: 0.85rem;
    font-weight: 700;
}

.cmms-wizard-nav-hint {
    color: var(--cmms-steel);
    font-size: 0.78rem;
}

.cmms-wizard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem;
}

.cmms-wizard-summary-item {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cmms-border);
    border-left: 3px solid var(--wizard-accent, var(--cmms-accent));
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-surface-mid);
}

.cmms-wizard-summary-item.is-empty {
    border-left-color: var(--cmms-border);
    background: var(--cmms-panel);
}

.cmms-wizard-summary-label {
    color: var(--cmms-steel);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cmms-wizard-summary-value {
    color: var(--cmms-ink);
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cmms-wizard-summary-item.is-empty .cmms-wizard-summary-value {
    color: var(--cmms-steel);
    font-style: italic;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .cmms-wizard-steps {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.3rem;
    }

    .cmms-wizard-step {
        flex: 0 0 auto;
    }

    .cmms-wizard-step-btn {
        padding: 0.45rem 0.6rem;
    }

    .cmms-wizard-step-label {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .cmms-wizard-panel-body {
        padding: 0.9rem;
    }

    .cmms-wizard-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .cmms-wizard-nav .btn {
        width: 100%;
    }

    .cmms-wizard-nav-status {
        order: -1;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
   Technician task organizer (my-schedule)
   A 7-day board: the Late, No date yet and Later lanes feed seven day columns
   a job can be dragged onto. Cards carry the priority colour, the PM due date
   and the day's load measured against the technician's own daily capacity.
   --------------------------------------------------------------------------- */

.cmms-sched {
    margin-bottom: 1.5rem;
}

.cmms-sched-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--cmms-steel);
    font-size: 0.85rem;
}

.cmms-sched-hint-text i {
    color: var(--cmms-accent);
}

.cmms-sched-status {
    font-weight: 600;
    min-height: 1.2rem;
}

.cmms-sched-status.is-ok {
    color: var(--cmms-accent);
}

.cmms-sched-status.is-error {
    color: var(--cmms-danger);
}

.cmms-sched-board {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-auto-columns: minmax(240px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.cmms-sched-lane {
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    box-shadow: var(--cmms-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 220px;
    padding: 0.6rem;
}

.cmms-sched-lane.is-today {
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 1px var(--cmms-accent), var(--cmms-shadow);
}

.cmms-sched-lane.is-past,
.cmms-sched-lane.is-weekend {
    background: var(--cmms-surface-mid);
}

.cmms-sched-lane.is-past .cmms-sched-lane-body {
    opacity: 0.7;
}

.cmms-sched-lane.is-alert {
    border-color: var(--cmms-danger);
}

.cmms-sched-lane.is-source {
    background: var(--cmms-surface-mid);
}

.cmms-sched-lane-head {
    align-items: center;
    border-bottom: 1px solid var(--cmms-border);
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    padding-bottom: 0.4rem;
}

.cmms-sched-lane-day {
    font-size: 0.85rem;
    font-weight: 700;
}

.cmms-sched-lane-date {
    color: var(--cmms-steel);
    display: block;
    font-size: 0.72rem;
}

.cmms-sched-lane-count {
    background: var(--cmms-surface);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 1.8rem;
    padding: 0.1rem 0.45rem;
    text-align: center;
}

.cmms-sched-lane-count.is-over {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
}

.cmms-sched-load {
    background: var(--cmms-surface);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.cmms-sched-load-fill {
    background: var(--cmms-accent);
    height: 100%;
}

.cmms-sched-load-fill.is-over {
    background: var(--cmms-warn);
}

.cmms-sched-lane-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 3rem;
}

.cmms-sched-empty {
    color: var(--cmms-steel);
    font-size: 0.78rem;
    margin: 0;
    padding: 0.75rem 0;
    text-align: center;
}

.cmms-sched-card {
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-left: 4px solid var(--cmms-steel);
    border-radius: var(--cmms-radius-sm);
    box-shadow: var(--cmms-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
}

.cmms-sched-card.is-urgent {
    border-left-color: var(--cmms-danger);
}

.cmms-sched-card.is-high {
    border-left-color: var(--cmms-warn);
}

.cmms-sched-card.is-medium {
    border-left-color: var(--cmms-info);
}

.cmms-sched-card.is-low {
    border-left-color: var(--cmms-steel);
}

.cmms-sched-card.is-pm {
    background: linear-gradient(180deg, var(--cmms-info-soft) 0%, var(--cmms-panel) 45%);
}

.cmms-sched-card.is-late {
    box-shadow: 0 0 0 1px var(--cmms-danger-soft), var(--cmms-shadow);
}

.cmms-sched-card.is-saving {
    opacity: 0.55;
}

.cmms-sched-card-top {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.cmms-sched-card-handle {
    background: transparent;
    border: 0;
    color: var(--cmms-steel);
    cursor: grab;
    line-height: 1;
    padding: 0.1rem 0.15rem;
}

.cmms-sched-card-handle:hover {
    color: var(--cmms-accent);
}

.cmms-sched-card-handle:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--cmms-accent);
}

.cmms-sched-card-number {
    font-size: 0.8rem;
    font-weight: 700;
}

.cmms-sched-card-time {
    color: var(--cmms-steel);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.cmms-sched-card-time.is-empty {
    opacity: 0.6;
}

.cmms-sched-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.cmms-sched-card-meta {
    color: var(--cmms-steel);
    display: flex;
    flex-direction: column;
    font-size: 0.73rem;
    gap: 0.1rem;
    margin: 0;
}

.cmms-sched-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cmms-sched-card-move {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: var(--cmms-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
}

.cmms-sched-card-form {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: 1fr 1fr;
}

.cmms-sched-card-form .btn {
    grid-column: 1 / -1;
}

.cmms-sched-chip {
    background: var(--cmms-surface);
    border-radius: 999px;
    color: var(--cmms-ink-soft);
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
}

.cmms-sched-chip.is-pm {
    background: var(--cmms-info-soft);
    color: var(--cmms-info);
    font-weight: 700;
}

.cmms-sched-chip.is-warn {
    background: var(--cmms-danger-soft);
    color: var(--cmms-danger);
    font-weight: 700;
}

/* The type chip names what kind of work the card is: emoji plus label on a full
   card, the emoji alone on a month chip where space is counted in characters. */
.cmms-sched-chip.is-type {
    background: var(--cmms-surface-mid);
    color: var(--cmms-ink-soft);
    font-weight: 600;
}

/* A booked job that is already closed: the board still counts it (that is why a
   day can say "1 booked" and hold no open work), so it is drawn as history —
   muted, not draggable, with a chip naming the status. */
.cmms-sched-chip.is-closed {
    background: var(--cmms-surface-mid);
    border: 1px dashed var(--cmms-border);
    color: var(--cmms-steel);
    font-weight: 700;
}

.cmms-sched-card.is-closed {
    background: var(--cmms-surface-mid);
    border-left-color: var(--cmms-steel);
    box-shadow: none;
    opacity: 0.85;
}

.cmms-sched-card.is-closed:hover {
    opacity: 1;
}

.cmms-sched-card.is-closed .cmms-sched-card-title {
    color: var(--cmms-ink-soft);
    font-weight: 600;
}

.cmms-sched-card-title-link {
    color: inherit;
    text-decoration: none;
}

.cmms-sched-card-title-link:hover {
    text-decoration: underline;
}

.cmms-sched-sub-title {
    color: var(--cmms-steel);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cmms-sched-sub-list {
    font-size: 0.72rem;
    list-style: none;
    padding: 0;
}

.cmms-sched-sub-list li {
    color: var(--cmms-ink-soft);
}

.cmms-sched-pm {
    border-top: 1px dashed var(--cmms-border);
    padding-top: 0.4rem;
}

.cmms-sched-done {
    border-top: 1px dashed var(--cmms-border);
    opacity: 0.75;
    padding-top: 0.4rem;
}

.cmms-sched-done .bi-check2 {
    color: var(--cmms-accent);
}

.cmms-sched-ghost {
    border-style: dashed;
    opacity: 0.45;
}

.cmms-sched-chosen {
    cursor: grabbing;
}

.cmms-sched-dragging {
    transform: rotate(1.5deg);
}

@media (max-width: 991.98px) {
    .cmms-sched-board {
        grid-auto-columns: minmax(210px, 85vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmms-sched-ghost,
    .cmms-sched-chosen,
    .cmms-sched-dragging,
    .cmms-sched-card.is-compact:hover {
        transform: none;
        transition: none;
    }
}

/* An empty lane keeps its hint until a card lands on it; the script toggles
   is-empty as cards come and go. Month cells carry the same hint in a smaller
   body, so both containers are covered. */
.cmms-sched-lane:not(.is-empty) > .cmms-sched-lane-body > .cmms-sched-empty,
.cmms-sched-cell:not(.is-empty) > .cmms-sched-cell-body > .cmms-sched-empty {
    display: none;
}

/* --- Week / month / year switcher, quick jumps, counters ------------------ */

.cmms-sched-viewswitch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cmms-sched-viewswitch .btn {
    flex: 1 1 auto;
}

.cmms-sched-quicklinks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.cmms-sched-quicklinks-label {
    color: var(--cmms-steel);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cmms-kpi-sub {
    color: var(--cmms-steel);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
}

.cmms-sched-legend {
    align-items: center;
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    color: var(--cmms-steel);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    gap: 0.35rem 0.9rem;
    margin-bottom: 0.9rem;
    padding: 0.5rem 0.7rem;
}

.cmms-sched-legend-item {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.cmms-sched-counter {
    background: var(--cmms-surface);
    border-radius: 999px;
    color: var(--cmms-ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

.cmms-sched-counter.is-assigned {
    background: var(--cmms-info-soft);
    color: var(--cmms-info);
}

.cmms-sched-counter.is-done {
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent-hover);
}

/* A completion count mixes this technician's finishes with a colleague's: the
   chip keeps the "done" colour but carries a ring, and its hover text spells the
   split out. `is-mixed` is the same idea on the year grid's smaller chip. */
.cmms-sched-counter.is-done.has-other {
    box-shadow: inset 0 0 0 1px var(--cmms-warn);
}

.cmms-sched-counter.is-done.has-own.has-other {
    background: linear-gradient(90deg, var(--cmms-accent-soft) 50%, var(--cmms-warn-soft) 50%);
}

.cmms-sched-counter-plus {
    color: var(--cmms-warn);
    font-weight: 700;
    margin-left: 0.15rem;
}

.cmms-sched-year-done.is-mixed {
    color: var(--cmms-warn);
}

/* The "Done" list on a day rail: the job, when it ended, and who closed it. */
.cmms-sched-done-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmms-sched-done-time {
    color: var(--cmms-steel);
    font-variant-numeric: tabular-nums;
}

.cmms-sched-done-rating {
    color: var(--cmms-warn);
    font-weight: 700;
}

.cmms-sched-chip.is-done-by {
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent-hover);
    font-weight: 700;
}

.cmms-sched-chip.is-done-other {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
    font-weight: 700;
}

.cmms-sched-chip.is-done-unknown {
    background: var(--cmms-surface);
    color: var(--cmms-steel);
    font-style: italic;
}

/* The own-completions switch sits on its own line under the toolbar so its
   explanation has room to be read. */
.cmms-sched-ownfilter {
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    margin-top: 0.55rem;
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
}

.cmms-sched-ownfilter-hint {
    color: var(--cmms-steel);
    display: block;
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

/* The type filter stays visible beneath the completions switch. */
.cmms-sched-typefilter {
    margin-top: 0.4rem;
}

.cmms-sched-type-options {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.cmms-sched-type-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cmms-sched-typedrop-hint {
    color: var(--cmms-steel);
    font-size: 0.72rem;
}

.cmms-sched-type-option {
    align-items: center;
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    cursor: pointer;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
    min-height: 2.4rem;
    padding: 0.35rem 0.65rem;
}

.cmms-sched-type-option:hover {
    background: var(--cmms-surface);
}

.cmms-sched-type-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.cmms-sched-typefilter-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.cmms-sched-hint-text--filter {
    color: var(--cmms-accent-hover);
    font-weight: 600;
    margin-top: 0.35rem;
}

.cmms-sched-counter.is-rating {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
}

.cmms-sched-lane-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0;
}

/* Month view: the calendar comes first, and the waiting work sits beside it in a
   sticky column that scrolls, so a long backlog can never push the grid down.
   The column width is the reader's: dragged with the splitter, remembered in the
   browser, and the whole panel can be hidden for a full-width calendar. */
.cmms-sched-month-layout {
    align-items: start;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr) 12px var(--cmms-sched-side-width, 340px);
}

.cmms-sched-month-layout.is-side-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.cmms-sched-month-layout.is-side-hidden .cmms-sched-splitter,
.cmms-sched-month-layout.is-side-hidden .cmms-sched-month-side {
    display: none;
}

.cmms-sched-splitter {
    align-self: stretch;
    cursor: col-resize;
    margin: 0 -0.55rem;
    min-height: 4rem;
    position: relative;
    z-index: 2;
}

.cmms-sched-splitter-grip {
    background: var(--cmms-border);
    border-radius: 2px;
    bottom: 0;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
}

.cmms-sched-splitter:hover .cmms-sched-splitter-grip,
.cmms-sched-splitter:focus-visible .cmms-sched-splitter-grip {
    background: var(--cmms-accent);
    width: 3px;
}

.cmms-sched-splitter:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--cmms-accent);
    outline-offset: 2px;
}

body.is-resizing-sched {
    cursor: col-resize;
    user-select: none;
}

.cmms-sched-month-main {
    min-width: 0;
}

.cmms-sched-month-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    position: sticky;
    scrollbar-width: thin;
    top: 1rem;
}

.cmms-sched-side-head {
    background: var(--cmms-surface-mid);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    padding: 0.5rem 0.6rem;
}

.cmms-sched-side-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.cmms-sched-side-title-row {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
}

.cmms-sched-side-actions {
    display: inline-flex;
    gap: 0.2rem;
}

.cmms-sched-side-btn {
    background: transparent;
    border: 1px solid var(--cmms-border);
    border-radius: 5px;
    color: var(--cmms-steel);
    line-height: 1;
    padding: 0.15rem 0.3rem;
}

.cmms-sched-side-btn:hover {
    border-color: var(--cmms-accent);
    color: var(--cmms-accent);
}

.cmms-sched-side-btn:focus-visible {
    outline: 2px solid var(--cmms-accent);
    outline-offset: 1px;
}

.cmms-sched-side-hint {
    color: var(--cmms-steel);
    font-size: 0.72rem;
}

/* A lane inside the side panel shares the panel height and scrolls on its own,
   so all three lane headers stay on screen while a long backlog scrolls. */
.cmms-sched-lane.is-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 5rem;
    padding: 0.5rem;
}

.cmms-sched-lane.is-panel .cmms-sched-lane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
}

/* --- Month grid ----------------------------------------------------------- */

.cmms-sched-month {
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    display: flex;
    flex-direction: column;
}

.cmms-sched-month-head,
.cmms-sched-month-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Sticky weekday labels: the grid grows with its cells, so the days of the week
   stay named while the month scrolls under the top bar. */
.cmms-sched-month-head {
    background: var(--cmms-surface-mid);
    border-bottom: 1px solid var(--cmms-border);
    border-top-left-radius: var(--cmms-radius);
    border-top-right-radius: var(--cmms-radius);
    position: sticky;
    top: var(--cmms-topbar-height);
    z-index: 5;
}

.cmms-sched-month-row:last-child .cmms-sched-cell:first-child {
    border-bottom-left-radius: var(--cmms-radius);
}

.cmms-sched-month-row:last-child .cmms-sched-cell:last-child {
    border-bottom-right-radius: var(--cmms-radius);
}

.cmms-sched-month-weekday {
    color: var(--cmms-steel);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.5rem;
    text-transform: uppercase;
}

.cmms-sched-month-row + .cmms-sched-month-row {
    border-top: 1px solid var(--cmms-border);
}

.cmms-sched-cell {
    background: var(--cmms-panel);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 6.4rem;
    padding: 0.35rem 0.4rem;
    transition: background 0.12s ease;
}

.cmms-sched-cell[data-droppable="1"]:hover {
    background: var(--cmms-accent-soft);
}

.cmms-sched-cell + .cmms-sched-cell {
    border-left: 1px solid var(--cmms-border);
}

.cmms-sched-cell.is-outside {
    background: var(--cmms-surface-mid);
    opacity: 0.65;
}

.cmms-sched-cell.is-weekend {
    background: var(--cmms-surface-mid);
}

.cmms-sched-cell.is-past .cmms-sched-cell-body {
    opacity: 0.75;
}

/* A day that is behind us and still carries open work: the one thing the counts
   alone cannot say, so the cell marks itself. */
.cmms-sched-cell.is-overdue {
    background: linear-gradient(180deg, var(--cmms-warn-soft) 0%, var(--cmms-panel) 60%);
}

.cmms-sched-cell.is-overdue .cmms-sched-cell-day {
    background: var(--cmms-warn);
    color: #FFFFFF;
}

.cmms-sched-cell.is-today {
    background: linear-gradient(180deg, var(--cmms-accent-soft) 0%, var(--cmms-panel) 55%);
    box-shadow: inset 0 0 0 2px var(--cmms-accent);
}

.cmms-sched-cell-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: space-between;
}

.cmms-sched-cell-day {
    align-items: center;
    background: var(--cmms-surface);
    border-radius: 999px;
    color: var(--cmms-ink);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    height: 1.45rem;
    justify-content: center;
    min-width: 1.45rem;
    text-decoration: none;
}

.cmms-sched-cell-day:hover {
    background: var(--cmms-accent);
    color: #FFFFFF;
    text-decoration: none;
}

.cmms-sched-cell-day.is-today {
    background: var(--cmms-accent);
    box-shadow: 0 0 0 2px var(--cmms-accent-soft);
    color: #FFFFFF;
}

.cmms-sched-cell .cmms-sched-empty {
    font-size: 0.7rem;
    opacity: 0.45;
    padding: 0.3rem 0;
}

.cmms-sched-month-caption {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.cmms-sched-month-label {
    font-size: 1rem;
    font-weight: 700;
}

.cmms-sched-lane-head-actions {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
}

.cmms-sched-lane-toggle {
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--cmms-steel);
    line-height: 1;
    padding: 0.1rem 0.2rem;
}

.cmms-sched-lane-toggle:hover {
    color: var(--cmms-accent);
}

.cmms-sched-lane-toggle:focus-visible {
    outline: 2px solid var(--cmms-accent);
}

/* A collapsed lane keeps its header and count, and in the sticky panel hands its
   space back to the lists that are still open. */
.cmms-sched-lane.is-collapsed {
    min-height: 0;
}

.cmms-sched-lane.is-panel.is-collapsed {
    flex: 0 0 auto;
}

.cmms-sched-lane.is-collapsed .cmms-sched-lane-body,
.cmms-sched-lane.is-collapsed .cmms-sched-pm,
.cmms-sched-lane.is-collapsed .cmms-sched-done {
    display: none;
}

.cmms-sched-month-caption .btn {
    flex: 0 0 auto;
}

.cmms-sched-month-legend {
    color: var(--cmms-steel);
    font-size: 0.74rem;
    margin-right: auto;
}


.cmms-sched-cell-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* The day's booked hours as a chip, and the same number as a thin load bar under
   the day head: amber the moment the day is over the technician's capacity, so
   a heavy day is visible before a job is dropped on it. */
.cmms-sched-counter.is-hours {
    background: var(--cmms-surface);
    color: var(--cmms-steel);
}

.cmms-sched-counter.is-over {
    background: var(--cmms-warn-soft);
    color: var(--cmms-warn);
}

.cmms-sched-load--cell {
    border-radius: 999px;
    height: 4px;
}

/* While a card is in the air the days that will take it come forward and the
   read-only lanes step back, so the drop target is never a guess. */
.cmms-sched.is-dragging .cmms-sched-cell[data-droppable="1"] {
    background: var(--cmms-accent-soft);
}

.cmms-sched.is-dragging .cmms-sched-cell[data-droppable="0"],
.cmms-sched.is-dragging .cmms-sched-lane[data-droppable="0"] {
    opacity: 0.55;
}

.cmms-sched-cell.is-drop-hover {
    background: var(--cmms-accent-soft);
    box-shadow: inset 0 0 0 2px var(--cmms-accent);
}

.cmms-sched-cell-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cmms-sched-lane.is-panel .cmms-sched-lane-body::-webkit-scrollbar,
.cmms-sched-month-side::-webkit-scrollbar {
    width: 6px;
}

.cmms-sched-lane.is-panel .cmms-sched-lane-body::-webkit-scrollbar-thumb,
.cmms-sched-month-side::-webkit-scrollbar-thumb {
    background: var(--cmms-border);
    border-radius: 3px;
}

.cmms-sched-cell-pm {
    color: var(--cmms-steel);
    font-size: 0.72rem;
}

/* A preventive schedule that falls due on a day but is not a work order yet sits
   in the month cell as the chip a job gets, so a day whose only work is
   preventive names the schedule instead of showing a bare count. It is not
   draggable (there is nothing to reschedule), but it links to the schedule for a
   reader who may open the catalog — hence the pointer and the hover lift. */
.cmms-sched-card.is-pm.is-clickable {
    cursor: pointer;
}

.cmms-sched-card.is-pm.is-clickable:hover {
    border-left-color: var(--cmms-info);
}

.cmms-sched-card-text-link {
    color: var(--cmms-info);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

.cmms-sched-card-text-link:hover {
    text-decoration: underline;
}

.cmms-sched-more {
    color: var(--cmms-accent);
    font-size: 0.72rem;
    font-weight: 600;
}

/* The compact card is the month-grid chip: one line of facts, one line of title,
   so a day shows its whole list without an inner scrollbar. */
.cmms-sched-card.is-compact {
    gap: 0.12rem;
    padding: 0.28rem 0.4rem;
}

.cmms-sched-card.is-compact:hover {
    box-shadow: 0 2px 8px rgba(15, 28, 46, 0.12);
    transform: translateY(-1px);
}

.cmms-sched-card.is-compact .cmms-sched-card-top {
    gap: 0.25rem;
}

.cmms-sched-card.is-compact .cmms-sched-card-handle {
    padding: 0 0.1rem;
}

.cmms-sched-card.is-compact .cmms-sched-card-time {
    font-size: 0.68rem;
    margin-left: 0;
    min-width: 2.1rem;
}

.cmms-sched-card-title.is-tight {
    align-items: baseline;
    display: flex;
    font-size: 0.72rem;
    gap: 0.25rem;
    margin: 0;
    min-width: 0;
}

.cmms-sched-card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmms-sched-card.is-compact .cmms-sched-card-number {
    flex: 0 0 auto;
    font-size: 0.68rem;
}

.cmms-sched-chip.is-tight {
    font-size: 0.58rem;
    line-height: 1.3;
    padding: 0 0.28rem;
}

.cmms-sched-card-move.is-icon {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--cmms-steel);
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    padding: 0.05rem 0.2rem;
}

.cmms-sched-card-move.is-icon:hover {
    background: var(--cmms-accent-soft);
    color: var(--cmms-accent);
}

/* --- Year calendar: twelve month tiles with day counters ------------------ */

.cmms-sched-year {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cmms-sched-year-month {
    background: var(--cmms-panel);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius);
    box-shadow: var(--cmms-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
}

.cmms-sched-year-month.is-current {
    border-color: var(--cmms-accent);
    box-shadow: 0 0 0 1px var(--cmms-accent), var(--cmms-shadow);
}

.cmms-sched-year-head {
    align-items: center;
    border-bottom: 1px solid var(--cmms-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: space-between;
    padding-bottom: 0.35rem;
}

.cmms-sched-year-label {
    font-size: 0.85rem;
    font-weight: 700;
}

.cmms-sched-year-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.cmms-sched-year-weekdays,
.cmms-sched-year-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cmms-sched-year-weekdays span {
    color: var(--cmms-steel);
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.cmms-sched-year-day {
    align-items: center;
    border-radius: 5px;
    color: var(--cmms-ink-soft);
    display: flex;
    flex-direction: column;
    font-size: 0.65rem;
    gap: 0.05rem;
    line-height: 1.1;
    min-height: 2.1rem;
    padding: 0.15rem 0.05rem;
    position: relative;
    text-decoration: none;
}

.cmms-sched-year-day:hover {
    box-shadow: inset 0 0 0 2px var(--cmms-accent);
    text-decoration: none;
}

.cmms-sched-year-day.is-outside {
    opacity: 0.35;
}

.cmms-sched-year-day.is-future {
    border: 1px dashed var(--cmms-border);
}

.cmms-sched-year-day.is-today {
    box-shadow: inset 0 0 0 2px var(--cmms-accent);
    font-weight: 700;
}

.cmms-sched-year-daynum {
    font-weight: 600;
}

/* Heat map: how much work was booked on the day, 0 (nothing) to 4 (busiest). */
.cmms-sched-year-day.is-level-0 {
    background: transparent;
}

.cmms-sched-year-day.is-level-1 {
    background: rgba(13, 138, 106, 0.12);
}

.cmms-sched-year-day.is-level-2 {
    background: rgba(13, 138, 106, 0.26);
}

.cmms-sched-year-day.is-level-3 {
    background: rgba(13, 138, 106, 0.42);
    color: #FFFFFF;
}

.cmms-sched-year-day.is-level-4 {
    background: rgba(13, 138, 106, 0.62);
    color: #FFFFFF;
}

.cmms-sched-year-count {
    font-size: 0.72rem;
    font-weight: 700;
}

.cmms-sched-year-done {
    color: var(--cmms-accent-hover);
    font-size: 0.58rem;
}

.cmms-sched-year-day.is-level-3 .cmms-sched-year-done,
.cmms-sched-year-day.is-level-4 .cmms-sched-year-done {
    color: #E6F7F2;
}

.cmms-sched-year-star {
    font-size: 0.55rem;
    line-height: 1;
}

.cmms-sched-year-star.is-good {
    color: #0A6F55;
}

.cmms-sched-year-star.is-ok {
    color: var(--cmms-warn);
}

.cmms-sched-year-star.is-poor {
    color: var(--cmms-danger);
}

.cmms-sched-year-day.is-level-3 .cmms-sched-year-star,
.cmms-sched-year-day.is-level-4 .cmms-sched-year-star {
    color: #FFE9C9;
}

@media (max-width: 1199.98px) {
    .cmms-sched-year {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Narrow screens keep the calendar on top and let the waiting work follow it. */
    .cmms-sched-month-layout,
    .cmms-sched-month-layout.is-side-hidden {
        grid-template-columns: 1fr;
    }

    .cmms-sched-splitter {
        display: none;
    }

    .cmms-sched-month-side {
        max-height: none;
        overflow: visible;
        position: static;
    }
}

@media (max-width: 991.98px) {
    .cmms-sched-month-head,
    .cmms-sched-month-row {
        min-width: 720px;
    }

    .cmms-sched-month {
        overflow-x: auto;
    }

    .cmms-sched-year {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .cmms-sched-year {
        grid-template-columns: 1fr;
    }
}

.pmcal-mode-switch,
.pmcal-view-switch {
    align-items: center;
    background: var(--cmms-surface);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-sm);
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
}

.pmcal-mode-switch a,
.pmcal-view-switch a {
    align-items: center;
    border-radius: var(--cmms-radius-sm);
    color: var(--cmms-steel);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 650;
    gap: 0.45rem;
    padding: 0.48rem 0.8rem;
    text-decoration: none;
}

.pmcal-mode-switch a.is-active,
.pmcal-view-switch a.is-active {
    background: var(--cmms-accent);
    color: #fff;
}

.pmcal-dashboard {
    --pmcal-line: var(--cmms-border);
    --pmcal-muted: var(--cmms-steel);
    color: var(--cmms-ink);
}

.pmcal-toolbar,
.pmcal-period-nav,
.pmcal-queue > header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.pmcal-toolbar {
    margin-bottom: 0.9rem;
}

.pmcal-period-nav {
    justify-content: flex-end;
}

.pmcal-period-nav h2 {
    font-size: 1.1rem;
    font-weight: 750;
    margin: 0 0.25rem;
    min-width: 9rem;
    text-align: center;
}

.pmcal-filters {
    padding: 0.9rem;
}

.pmcal-filter-fields {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.2fr) minmax(170px, 1.2fr) minmax(155px, 1fr) auto;
}

.pmcal-kpis .cmms-kpi {
    min-width: 150px;
}

.pmcal-kpis .cmms-kpi-value {
    font-size: 1.25rem;
}

.pmcal-legend {
    align-items: center;
    color: var(--pmcal-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 0.6rem 1.1rem;
    margin: 0.6rem 0;
}

.pmcal-legend > span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.pmcal-legend-dot {
    background: var(--cmms-info);
    border-radius: 50%;
    height: 0.55rem;
    width: 0.55rem;
}

.pmcal-legend-dot.is-projected {
    background: var(--cmms-accent);
}

.pmcal-legend-dot.is-overdue {
    background: var(--cmms-danger);
}

.pmcal-calendar-scroll {
    overflow-x: auto;
}

.pmcal-calendar-scroll.is-month {
    border: 1px solid var(--pmcal-line);
    border-radius: var(--cmms-radius-sm);
}

.pmcal-month-weekdays,
.pmcal-calendar.is-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 760px;
}

.pmcal-month-weekdays {
    background: var(--cmms-surface-muted);
    color: var(--pmcal-muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
}

.pmcal-month-weekdays span {
    padding: 0.55rem 0.65rem;
}

.pmcal-day {
    background: var(--cmms-surface);
    border-bottom: 1px solid var(--pmcal-line);
    border-right: 1px solid var(--pmcal-line);
    min-height: 8.5rem;
    min-width: 0;
    padding: 0.55rem;
}

.pmcal-calendar.is-month .pmcal-day:nth-child(7n) {
    border-right: 0;
}

.pmcal-day.is-weekend,
.pmcal-day.is-outside {
    background: var(--cmms-surface-muted);
}

.pmcal-day.is-outside {
    color: var(--pmcal-muted);
    opacity: 0.76;
}

.pmcal-day.is-today {
    box-shadow: inset 0 3px 0 var(--cmms-accent);
}

.pmcal-day > header {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-bottom: 0.45rem;
}

.pmcal-day > header > span:first-child:not(:last-child) {
    color: var(--pmcal-muted);
    font-size: 0.72rem;
    margin-right: auto;
    text-transform: uppercase;
}

.pmcal-day time {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 750;
    height: 1.7rem;
    justify-content: center;
    width: 1.7rem;
}

.pmcal-day.is-today time {
    background: var(--cmms-accent);
    color: #fff;
}

.pmcal-day-count {
    color: var(--pmcal-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.pmcal-day-events {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 14rem;
    overflow-y: auto;
}

.pmcal-event {
    background: var(--cmms-info-soft);
    border: 0;
    border-left: 3px solid var(--cmms-info);
    border-radius: 3px;
    color: var(--cmms-ink);
    cursor: pointer;
    display: block;
    min-width: 0;
    padding: 0.34rem 0.42rem;
    text-align: left;
    width: 100%;
}

.pmcal-event.is-schedule {
    background: var(--cmms-accent-soft);
    border-left-color: var(--cmms-accent);
}

.pmcal-event.status-overdue {
    background: var(--cmms-danger-soft);
    border-left-color: var(--cmms-danger);
}

.pmcal-event:hover,
.pmcal-event:focus-visible {
    filter: brightness(0.96);
    outline: 2px solid var(--cmms-info);
    outline-offset: 1px;
}

.pmcal-event-title,
.pmcal-event-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmcal-event-title {
    font-size: 0.74rem;
    font-weight: 750;
}

.pmcal-event-meta {
    color: var(--pmcal-muted);
    font-size: 0.66rem;
}

.pmcal-empty {
    color: var(--pmcal-muted);
    font-size: 0.7rem;
    padding: 0.35rem 0.1rem;
}

.pmcal-calendar.is-week {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pmcal-calendar.is-week .pmcal-day {
    border: 1px solid var(--pmcal-line);
    border-radius: var(--cmms-radius-sm);
    min-height: 18rem;
}

.pmcal-calendar.is-week .pmcal-day > header {
    justify-content: flex-start;
}

.pmcal-calendar.is-week .pmcal-day-count {
    margin-left: auto;
}

.pmcal-year {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pmcal-year-month {
    border: 1px solid var(--pmcal-line);
    border-radius: var(--cmms-radius-sm);
    min-width: 0;
    padding: 0.65rem;
}

.pmcal-year-month > header {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.pmcal-year-month > header a {
    color: var(--cmms-ink);
    font-weight: 750;
    text-decoration: none;
}

.pmcal-year-month > header span {
    color: var(--pmcal-muted);
    font-size: 0.68rem;
}

.pmcal-year-weekdays,
.pmcal-year-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pmcal-year-weekdays span {
    color: var(--pmcal-muted);
    font-size: 0.6rem;
    font-weight: 750;
    padding: 0.2rem 0;
    text-align: center;
}

.pmcal-year-day {
    align-items: center;
    aspect-ratio: 1;
    border-radius: 3px;
    color: var(--cmms-ink);
    display: flex;
    font-size: 0.66rem;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.pmcal-year-day.is-outside {
    color: var(--pmcal-muted);
    opacity: 0.42;
}

.pmcal-year-day.has-events {
    background: var(--cmms-accent-soft);
    font-weight: 750;
}

.pmcal-year-day.is-today {
    box-shadow: inset 0 0 0 1px var(--cmms-accent);
}

.pmcal-year-day small {
    background: var(--cmms-accent);
    border-radius: 50%;
    color: #fff;
    font-size: 0.48rem;
    line-height: 1;
    min-width: 0.8rem;
    padding: 0.13rem;
    position: absolute;
    right: 0;
    top: 0;
}

.pmcal-queue {
    overflow: hidden;
}

.pmcal-queue > header {
    border-bottom: 1px solid var(--pmcal-line);
    padding: 0.8rem 1rem;
}

.pmcal-queue > header h2 {
    font-size: 0.92rem;
    font-weight: 750;
    margin: 0;
}

.pmcal-queue > header > span {
    background: var(--cmms-info-soft);
    border-radius: 999px;
    color: var(--cmms-info);
    font-size: 0.72rem;
    font-weight: 750;
    padding: 0.12rem 0.48rem;
}

.pmcal-queue-list {
    max-height: 18rem;
    overflow-y: auto;
}

.pmcal-queue-row {
    align-items: center;
    border-bottom: 1px solid var(--pmcal-line);
    color: var(--cmms-ink);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    text-decoration: none;
}

.pmcal-queue-row:last-child {
    border-bottom: 0;
}

.pmcal-queue-row:hover {
    background: var(--cmms-surface-muted);
}

.pmcal-queue-row strong,
.pmcal-queue-row small {
    display: block;
}

.pmcal-queue-row strong {
    font-size: 0.8rem;
}

.pmcal-queue-row small,
.pmcal-queue-assignee,
.pmcal-meter-value small {
    color: var(--pmcal-muted);
    font-size: 0.7rem;
}

.pmcal-queue-assignee,
.pmcal-meter-value {
    flex-shrink: 0;
    text-align: right;
}

.pmcal-meter-value {
    font-size: 0.78rem;
    font-weight: 750;
}

.pmcal-meter-value small {
    display: block;
    font-weight: 500;
}

.pmcal-meter-value.is-due {
    color: var(--cmms-danger);
}

.pmcal-modal-eyebrow {
    color: var(--cmms-accent-hover);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
}

@media (max-width: 1199.98px) {
    .pmcal-year {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .pmcal-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pmcal-filter-fields > button {
        grid-column: 2;
    }

    .pmcal-year {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pmcal-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .pmcal-calendar.is-week {
        grid-template-columns: 1fr;
    }

    .pmcal-calendar.is-week .pmcal-day {
        min-height: 8rem;
    }

    .pmcal-calendar.is-week .pmcal-day-events {
        max-height: none;
    }

    .pmcal-year {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pmcal-mode-switch {
        display: flex;
        width: 100%;
    }

    .pmcal-mode-switch a {
        flex: 1;
        justify-content: center;
    }

    .pmcal-period-nav {
        justify-content: flex-start;
    }

    .pmcal-filter-fields {
        grid-template-columns: 1fr;
    }

    .pmcal-filter-fields > button {
        grid-column: auto;
    }

    .pmcal-year {
        grid-template-columns: 1fr;
    }
}

body[data-cmms-page="org-chart"] .org-chart-tree {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

body[data-cmms-page="org-chart"] .org-chart-branches .org-chart-card::before {
    left: calc(50% - 1.5px);
}

/* Product feedback board: one stacked column, emoji-led headers. */
.cmms-fb {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cmms-fb-head {
    gap: 0.85rem;
    border-left: 4px solid var(--cmms-fb-accent, var(--cmms-accent));
    background: linear-gradient(180deg, var(--cmms-fb-soft, var(--cmms-accent-soft)) 0%, var(--cmms-panel) 100%);
}

.cmms-fb-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(15, 28, 46, 0.08);
    border-radius: 12px;
    background: var(--cmms-panel);
    box-shadow: 0 1px 3px rgba(15, 28, 46, 0.08);
    font-size: 1.15rem;
    line-height: 1;
}

.cmms-fb-title {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cmms-fb-sub {
    color: var(--cmms-steel);
    font-size: 0.82rem;
}

.cmms-fb-sort {
    margin-left: auto;
    flex-shrink: 0;
}

.cmms-fb-compose {
    --cmms-fb-accent: var(--cmms-accent);
    --cmms-fb-soft: var(--cmms-accent-soft);
}

.cmms-fb-compose .cmms-panel-body {
    padding: 1.35rem 1.5rem 1.6rem;
}

.cmms-fb-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
}

.cmms-fb-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--cmms-border);
    border-left: 4px solid var(--cmms-fb-accent, var(--cmms-accent));
    border-radius: var(--cmms-radius-sm);
    background: var(--cmms-panel);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cmms-fb-item--feature {
    --cmms-fb-accent: var(--cmms-info);
}

.cmms-fb-item--bug {
    --cmms-fb-accent: var(--cmms-warn);
}

.cmms-fb-item:hover {
    border-color: var(--cmms-fb-accent, var(--cmms-accent));
    box-shadow: 0 2px 8px rgba(15, 28, 46, 0.08);
}

.cmms-fb-vote {
    flex-shrink: 0;
}

.cmms-fb-vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 3.25rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid #9AD4C4;
    border-radius: var(--cmms-radius-sm);
    background: transparent;
    color: var(--cmms-accent);
    line-height: 1.1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cmms-fb-vote-btn:hover {
    background: var(--cmms-accent);
    border-color: var(--cmms-accent);
    color: #fff;
}

.cmms-fb-vote-btn.is-on {
    background: linear-gradient(180deg, #109872 0%, var(--cmms-accent) 100%);
    border-color: var(--cmms-accent);
    color: #fff;
}

.cmms-fb-vote-emoji {
    font-size: 1.05rem;
    line-height: 1;
}

.cmms-fb-vote-count {
    font-size: 0.92rem;
    font-weight: 700;
}

.cmms-fb-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.cmms-fb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.cmms-fb-item-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

.cmms-fb-item-title a {
    color: var(--cmms-ink);
    text-decoration: none;
}

.cmms-fb-item-title a:hover {
    color: var(--cmms-accent);
    text-decoration: underline;
}

.cmms-fb-item-text {
    color: var(--cmms-steel);
    font-size: 0.88rem;
    margin: 0 0 0.45rem;
}

.cmms-fb-item-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--cmms-steel);
    font-size: 0.78rem;
}

.cmms-fb-avatar {
    margin-right: 0.1rem;
}

.cmms-fb-empty {
    padding: 0.5rem 0;
}

.cmms-fb-pagination {
    padding: 0 1rem 1rem;
}

@media (max-width: 575.98px) {
    .cmms-fb-head {
        flex-wrap: wrap;
    }

    .cmms-fb-sort {
        width: 100%;
        margin-left: 0;
    }

    .cmms-fb-sort .btn {
        flex: 1 1 0;
    }

    .cmms-fb-item {
        flex-wrap: wrap;
    }
}

/* Request-type pills on the feedback board. */
.cmms-badge-feature { background: var(--cmms-info-soft); color: var(--cmms-info); }
.cmms-badge-bug { background: var(--cmms-warn-soft); color: #9A3412; }

/* The feature-request ladder, so each stage reads as its own step. */
.cmms-badge-submitted { background: #F3F4F6; color: #4B5563; }
.cmms-badge-under_review { background: #E0F2FE; color: #0369A1; }
.cmms-badge-planned { background: #EDE9FE; color: #6D28D9; }
.cmms-badge-demo_ready { background: var(--cmms-warn-soft); color: #9A3412; }
.cmms-badge-production_approved { background: var(--cmms-accent-soft); color: #065F46; }
.cmms-badge-production { background: var(--cmms-accent); color: #FFFFFF; }