:root {
    color-scheme: light;
    --sfa-navy: #003c54;
    --sfa-navy-deep: #002a3c;
    --sfa-blue: #4890cc;
    --sfa-blue-soft: #6faed9;
    --sfa-surface: rgba(255, 255, 255, 0.84);
    --sfa-surface-strong: #ffffff;
    --sfa-border: rgba(16, 43, 58, 0.12);
    --sfa-text: #132b36;
    --sfa-muted: #607786;
    --sfa-shadow: 0 24px 60px rgba(0, 27, 41, 0.14);
    --sfa-radius-xl: 28px;
    --sfa-radius-lg: 22px;
    --sfa-radius-md: 16px;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Segoe UI Variable", "Segoe UI", "Aptos", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(circle at top, rgba(111, 174, 217, 0.18), transparent 35%),
        linear-gradient(180deg, #f7fafc 0%, #edf3f7 100%);
    color: var(--sfa-text);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4, p {
    margin: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
.dx-button:not(.dx-state-disabled),
.workspace-nav__item,
.workspace-nav-group__summary,
.workspace-logout,
.role-permissions-list__item {
    cursor: pointer;
}

.text-muted {
    color: var(--sfa-muted);
}

.surface-card {
    background: var(--sfa-surface);
    border: 1px solid var(--sfa-border);
    box-shadow: var(--sfa-shadow);
    backdrop-filter: blur(18px);
}

.dxbl-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dxbl-grid .dxbl-grid-table,
.dxbl-grid .dxbl-grid-table-layout,
.dxbl-grid .dxbl-grid-content,
.dxbl-grid .dxbl-grid-headers,
.dxbl-grid .dxbl-grid-body,
.dxbl-grid .dxbl-grid-scrollable,
.dxbl-grid .dxbl-grid-scrollable-content,
.dxbl-grid .dxbl-grid-table-container,
.dxbl-grid .dxbl-grid-data-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.72);
    color: #294554;
}

.pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sfa-blue), var(--sfa-navy));
    box-shadow: 0 0 0 6px rgba(72, 144, 204, 0.12);
}

.soft-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: center;
}

.sfa-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.sfa-icon-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3.5V6h-2.5'/%3E%3Cpath d='M13 6A5 5 0 1 0 4.8 11.2'/%3E%3Cpath d='M3 12.5V10h2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3.5V6h-2.5'/%3E%3Cpath d='M13 6A5 5 0 1 0 4.8 11.2'/%3E%3Cpath d='M3 12.5V10h2.5'/%3E%3C/svg%3E");
}

.sfa-icon-arrow-up {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3'/%3E%3Cpath d='M4.5 6.5 8 3l3.5 3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3'/%3E%3Cpath d='M4.5 6.5 8 3l3.5 3.5'/%3E%3C/svg%3E");
}

.sfa-icon-arrow-down {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10'/%3E%3Cpath d='M4.5 9.5 8 13l3.5-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10'/%3E%3Cpath d='M4.5 9.5 8 13l3.5-3.5'/%3E%3C/svg%3E");
}

.sfa-icon-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10'/%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10'/%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
}

.sfa-icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.25'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.25'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
}

.sfa-icon-edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.9 2.8 13.2 5l-7.4 7.4-3 0.8 0.8-3L10.9 2.8z'/%3E%3Cpath d='M9.6 4.1 12 6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.9 2.8 13.2 5l-7.4 7.4-3 0.8 0.8-3L10.9 2.8z'/%3E%3Cpath d='M9.6 4.1 12 6.5'/%3E%3C/svg%3E");
}

.sfa-icon-trash {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5h9'/%3E%3Cpath d='M6.2 2.5h3.6l.6 2H5.6l.6-2z'/%3E%3Cpath d='M5.5 6v6.5h5V6'/%3E%3Cpath d='M7.2 7.2v3.6M8.8 7.2v3.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5h9'/%3E%3Cpath d='M6.2 2.5h3.6l.6 2H5.6l.6-2z'/%3E%3Cpath d='M5.5 6v6.5h5V6'/%3E%3Cpath d='M7.2 7.2v3.6M8.8 7.2v3.6'/%3E%3C/svg%3E");
}

.sfa-icon-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.2 3 3.1 6-6.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.2 3 3.1 6-6.4'/%3E%3C/svg%3E");
}

.sfa-icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4 4 12'/%3E%3C/svg%3E");
}

.sfa-icon-save {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2.5h8.5L13 4v9.5H3z'/%3E%3Cpath d='M5 2.5V6h5V2.5'/%3E%3Cpath d='M5 10.8h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2.5h8.5L13 4v9.5H3z'/%3E%3Cpath d='M5 2.5V6h5V2.5'/%3E%3Cpath d='M5 10.8h6'/%3E%3C/svg%3E");
}

.sfa-icon-filter-clear {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3h11L9.2 7.6v3.1L6.8 12V7.6L2.5 3z'/%3E%3Cpath d='M9.8 9.8 13.5 13.5'/%3E%3Cpath d='M13.5 9.8 9.8 13.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3h11L9.2 7.6v3.1L6.8 12V7.6L2.5 3z'/%3E%3Cpath d='M9.8 9.8 13.5 13.5'/%3E%3Cpath d='M13.5 9.8 9.8 13.5'/%3E%3C/svg%3E");
}

.sfa-icon-eye {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z'/%3E%3Ccircle cx='8' cy='8' r='2.25'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z'/%3E%3Ccircle cx='8' cy='8' r='2.25'/%3E%3C/svg%3E");
}

.sfa-icon-eye-off {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l12 12'/%3E%3Cpath d='M3 5.2C4.5 3.7 6.1 3 8 3c4.1 0 6.5 5 6.5 5a11.3 11.3 0 0 1-2.2 3.1'/%3E%3Cpath d='M5.2 12c.8.3 1.7.5 2.8.5 4.1 0 6.5-5.5 6.5-5.5s-.7-1.4-2-2.7'/%3E%3Cpath d='M6.3 6.3A2.25 2.25 0 0 1 8 5.5c1.24 0 2.25 1.01 2.25 2.25 0 .56-.2 1.08-.54 1.48'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l12 12'/%3E%3Cpath d='M3 5.2C4.5 3.7 6.1 3 8 3c4.1 0 6.5 5 6.5 5a11.3 11.3 0 0 1-2.2 3.1'/%3E%3Cpath d='M5.2 12c.8.3 1.7.5 2.8.5 4.1 0 6.5-5.5 6.5-5.5s-.7-1.4-2-2.7'/%3E%3Cpath d='M6.3 6.3A2.25 2.25 0 0 1 8 5.5c1.24 0 2.25 1.01 2.25 2.25 0 .56-.2 1.08-.54 1.48'/%3E%3C/svg%3E");
}

.sfa-icon-lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.25' y='7.2' width='9.5' height='6.55' rx='1.35'/%3E%3Cpath d='M5.2 7.2V5.1A2.8 2.8 0 0 1 8 2.3a2.8 2.8 0 0 1 2.8 2.8v2.1'/%3E%3Cpath d='M8 9.2v2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.25' y='7.2' width='9.5' height='6.55' rx='1.35'/%3E%3Cpath d='M5.2 7.2V5.1A2.8 2.8 0 0 1 8 2.3a2.8 2.8 0 0 1 2.8 2.8v2.1'/%3E%3Cpath d='M8 9.2v2.2'/%3E%3C/svg%3E");
}

.sfa-icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 8 2.8l5.5 4.4'/%3E%3Cpath d='M4.2 6.8V13h7.6V6.8'/%3E%3Cpath d='M6.3 13V9.9h3.4V13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 8 2.8l5.5 4.4'/%3E%3Cpath d='M4.2 6.8V13h7.6V6.8'/%3E%3Cpath d='M6.3 13V9.9h3.4V13'/%3E%3C/svg%3E");
}

.sfa-icon-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.2' r='2.2'/%3E%3Cpath d='M2.8 13a3.5 3.5 0 0 1 6.4 0'/%3E%3Ccircle cx='11.5' cy='6.1' r='1.6'/%3E%3Cpath d='M9.7 13a2.7 2.7 0 0 1 4.8 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.2' r='2.2'/%3E%3Cpath d='M2.8 13a3.5 3.5 0 0 1 6.4 0'/%3E%3Ccircle cx='11.5' cy='6.1' r='1.6'/%3E%3Cpath d='M9.7 13a2.7 2.7 0 0 1 4.8 0'/%3E%3C/svg%3E");
}

.sfa-icon-roles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2 13 5v6l-5 2.8L3 11V5z'/%3E%3Cpath d='M8 4.5v7'/%3E%3Cpath d='M4.1 6.5 8 8.7l3.9-2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.2 13 5v6l-5 2.8L3 11V5z'/%3E%3Cpath d='M8 4.5v7'/%3E%3Cpath d='M4.1 6.5 8 8.7l3.9-2.2'/%3E%3C/svg%3E");
}

.sfa-icon-company {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.2V2.8h11v10.4z'/%3E%3Cpath d='M5 13.2v-3.1h2.1v3.1'/%3E%3Cpath d='M5 5.5h1.6'/%3E%3Cpath d='M5 8h1.6'/%3E%3Cpath d='M9 5.5h1.6'/%3E%3Cpath d='M9 8h1.6'/%3E%3Cpath d='M9 10.1h1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 13.2V2.8h11v10.4z'/%3E%3Cpath d='M5 13.2v-3.1h2.1v3.1'/%3E%3Cpath d='M5 5.5h1.6'/%3E%3Cpath d='M5 8h1.6'/%3E%3Cpath d='M9 5.5h1.6'/%3E%3Cpath d='M9 8h1.6'/%3E%3Cpath d='M9 10.1h1.6'/%3E%3C/svg%3E");
}

.sfa-icon-gear {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 1.8h3.2l.4 1.7a5.4 5.4 0 0 1 1.3.8l1.7-.5 1.6 2.8-1.3 1.2a5.1 5.1 0 0 1 0 1.6l1.3 1.2-1.6 2.8-1.7-.5a5.4 5.4 0 0 1-1.3.8l-.4 1.7H6.4l-.4-1.7a5.4 5.4 0 0 1-1.3-.8l-1.7.5-1.6-2.8 1.3-1.2a5.1 5.1 0 0 1 0-1.6L1.4 6.6 3 3.8l1.7.5a5.4 5.4 0 0 1 1.3-.8z'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 1.8h3.2l.4 1.7a5.4 5.4 0 0 1 1.3.8l1.7-.5 1.6 2.8-1.3 1.2a5.1 5.1 0 0 1 0 1.6l1.3 1.2-1.6 2.8-1.7-.5a5.4 5.4 0 0 1-1.3.8l-.4 1.7H6.4l-.4-1.7a5.4 5.4 0 0 1-1.3-.8l-1.7.5-1.6-2.8 1.3-1.2a5.1 5.1 0 0 1 0-1.6L1.4 6.6 3 3.8l1.7.5a5.4 5.4 0 0 1 1.3-.8z'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3C/svg%3E");
}

.sfa-icon-customers {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h10.4v7.6H2.8z'/%3E%3Cpath d='M2.8 6.4h10.4'/%3E%3Cpath d='M5 8.8h2.2'/%3E%3Cpath d='M5 10.8h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h10.4v7.6H2.8z'/%3E%3Cpath d='M2.8 6.4h10.4'/%3E%3Cpath d='M5 8.8h2.2'/%3E%3Cpath d='M5 10.8h6'/%3E%3C/svg%3E");
}

.sfa-icon-box {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 5 5.5-2.8L13.5 5 8 7.8 2.5 5z'/%3E%3Cpath d='M2.5 5v6l5.5 2.8L13.5 11V5'/%3E%3Cpath d='M8 7.8v6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 5 5.5-2.8L13.5 5 8 7.8 2.5 5z'/%3E%3Cpath d='M2.5 5v6l5.5 2.8L13.5 11V5'/%3E%3Cpath d='M8 7.8v6'/%3E%3C/svg%3E");
}

.sfa-icon-map {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3 2.5 4v8l3-1 5 2 3-1V4l-3 1-5-2z'/%3E%3Cpath d='M5.5 3.2v8.2'/%3E%3Cpath d='M10.5 5v8.2'/%3E%3Cpath d='M5 3l5.5 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3 2.5 4v8l3-1 5 2 3-1V4l-3 1-5-2z'/%3E%3Cpath d='M5.5 3.2v8.2'/%3E%3Cpath d='M10.5 5v8.2'/%3E%3Cpath d='M5 3l5.5 2'/%3E%3C/svg%3E");
}

.sfa-icon-route {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5C4 2.7 4.7 2 5.5 2h1.2c1.1 0 2 .9 2 2s-.9 2-2 2H6.2'/%3E%3Cpath d='M10.5 12h1.2c1 0 1.8-.8 1.8-1.8S12.7 8.4 11.7 8.4H9.6'/%3E%3Cpath d='M6.2 4H4.8c-1 0-1.8.8-1.8 1.8S3.8 7.6 4.8 7.6H7'/%3E%3Cpath d='M8.8 8.4h1.5c1.1 0 2 .9 2 2s-.9 2-2 2H11'/%3E%3Cpath d='M6.2 4v8'/%3E%3Cpath d='M9.7 8.4V12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5C4 2.7 4.7 2 5.5 2h1.2c1.1 0 2 .9 2 2s-.9 2-2 2H6.2'/%3E%3Cpath d='M10.5 12h1.2c1 0 1.8-.8 1.8-1.8S12.7 8.4 11.7 8.4H9.6'/%3E%3Cpath d='M6.2 4H4.8c-1 0-1.8.8-1.8 1.8S3.8 7.6 4.8 7.6H7'/%3E%3Cpath d='M8.8 8.4h1.5c1.1 0 2 .9 2 2s-.9 2-2 2H11'/%3E%3Cpath d='M6.2 4v8'/%3E%3Cpath d='M9.7 8.4V12'/%3E%3C/svg%3E");
}

.sfa-icon-pricing {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 4.8h9.6v6.4H3.2z'/%3E%3Cpath d='M5 7h6'/%3E%3Cpath d='M5 9.2h3.8'/%3E%3Cpath d='M11.2 5.8h1.6v4.4h-1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 4.8h9.6v6.4H3.2z'/%3E%3Cpath d='M5 7h6'/%3E%3Cpath d='M5 9.2h3.8'/%3E%3Cpath d='M11.2 5.8h1.6v4.4h-1.6'/%3E%3C/svg%3E");
}

.sfa-icon-calendar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5h10v9H3z'/%3E%3Cpath d='M5 2.2v2.2M11 2.2v2.2'/%3E%3Cpath d='M3 6.1h10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5h10v9H3z'/%3E%3Cpath d='M5 2.2v2.2M11 2.2v2.2'/%3E%3Cpath d='M3 6.1h10'/%3E%3C/svg%3E");
}

.sfa-icon-clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M8 5v3.2l2 1.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M8 5v3.2l2 1.3'/%3E%3C/svg%3E");
}

.sfa-icon-chart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5h10'/%3E%3Cpath d='M4.5 12V8.7'/%3E%3Cpath d='M8 12V5.5'/%3E%3Cpath d='M11.5 12V3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5h10'/%3E%3Cpath d='M4.5 12V8.7'/%3E%3Cpath d='M8 12V5.5'/%3E%3Cpath d='M11.5 12V3.5'/%3E%3C/svg%3E");
}

.sfa-icon-clipboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.4' width='9.6' height='10' rx='1.6'/%3E%3Cpath d='M5.8 2.4h4.4a.8.8 0 0 1 .8.8v1.1H5v-1.1a.8.8 0 0 1 .8-.8z'/%3E%3Cpath d='M5.2 7h5.6M5.2 9.2h5.6M5.2 11.4h3.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.4' width='9.6' height='10' rx='1.6'/%3E%3Cpath d='M5.8 2.4h4.4a.8.8 0 0 1 .8.8v1.1H5v-1.1a.8.8 0 0 1 .8-.8z'/%3E%3Cpath d='M5.2 7h5.6M5.2 9.2h5.6M5.2 11.4h3.3'/%3E%3C/svg%3E");
}

.sfa-icon-logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.2H3.8v9.6h2.4'/%3E%3Cpath d='M9 5.2 12 8l-3 2.8'/%3E%3Cpath d='M4.8 8h7.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.2H3.8v9.6h2.4'/%3E%3Cpath d='M9 5.2 12 8l-3 2.8'/%3E%3Cpath d='M4.8 8h7.2'/%3E%3C/svg%3E");
}

.role-popup__footer,
.role-confirm__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.role-popup__footer--split {
    justify-content: space-between;
    width: 100%;
}

.role-popup__footer-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.role-popup__footer > .dx-button,
.role-confirm__footer > .dx-button {
    min-width: 140px;
}

.detail-id-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(108, 108, 108, 0.18);
    background: rgba(230, 236, 240, 0.55);
    color: #6c6c6c;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-popup__message {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(0, 27, 41, 0.05);
}

.role-popup__message--success {
    background: rgba(234, 249, 240, 0.96);
    border-color: rgba(178, 226, 199, 0.92);
    color: #135d32;
}

.role-popup__message--error {
    background: rgba(255, 243, 243, 0.94);
    border-color: rgba(231, 194, 197, 0.9);
    color: #8f1825;
}

.role-popup__loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(0, 60, 84, 0.12);
    color: var(--sfa-navy-deep);
}

.users-toolbar-btn,
.roles-toolbar-btn,
.users-action-btn,
.roles-action-btn,
.users-filter-clear-btn,
.roles-filter-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 12px !important;
    min-height: 36px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.users-toolbar-btn:hover,
.roles-toolbar-btn:hover,
.users-action-btn:hover,
.roles-action-btn:hover,
.users-filter-clear-btn:hover,
.roles-filter-clear-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(0, 27, 41, 0.08);
}

.users-toolbar-btn--primary,
.roles-toolbar-btn--primary {
    background: linear-gradient(135deg, var(--sfa-navy) 0%, var(--sfa-navy-deep) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 42, 60, 0.18) !important;
}

.users-toolbar-btn--accent,
.roles-toolbar-btn--accent {
    background: linear-gradient(135deg, #1f789f 0%, var(--sfa-blue) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(72, 144, 204, 0.18) !important;
}

.users-toolbar-btn--neutral,
.roles-toolbar-btn--neutral {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--sfa-navy-deep) !important;
    border: 1px solid rgba(16, 43, 58, 0.14) !important;
}

.users-action-btn,
.roles-action-btn {
    min-height: 30px;
    padding-inline: 0.55rem !important;
    font-size: 0.82rem;
}

.users-action-btn--icon-only,
.roles-action-btn--icon-only {
    width: 32px;
    min-width: 32px;
    padding-inline: 0 !important;
    gap: 0;
}

.users-action-btn--icon-only .dx-button-content,
.roles-action-btn--icon-only .dx-button-content {
    padding-inline: 0 !important;
}

.users-action-btn--view {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--sfa-navy) !important;
    border: 1px solid rgba(0, 60, 84, 0.16) !important;
}

.users-action-btn--edit {
    background: rgba(72, 144, 204, 0.1) !important;
    color: #0d5f88 !important;
    border: 1px solid rgba(72, 144, 204, 0.24) !important;
}

.users-action-btn--danger {
    background: rgba(232, 17, 35, 0.08) !important;
    color: #9d1f2c !important;
    border: 1px solid rgba(232, 17, 35, 0.18) !important;
}

.users-action-btn--success {
    background: rgba(16, 137, 62, 0.1) !important;
    color: #0f7a36 !important;
    border: 1px solid rgba(16, 137, 62, 0.2) !important;
}

.users-filter-clear-btn {
    min-height: 36px;
    padding-inline: 0.9rem !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--sfa-navy) !important;
    border: 1px solid rgba(0, 60, 84, 0.16) !important;
}

.roles-filter-clear-btn {
    min-height: 36px;
    padding-inline: 0.9rem !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--sfa-navy) !important;
    border: 1px solid rgba(0, 60, 84, 0.22) !important;
    box-shadow: 0 6px 16px rgba(0, 27, 41, 0.06);
}

.users-action-btn--icon-only .sfa-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.users-filter-editor {
    width: 100%;
    min-width: 0;
}

.user-popup__tabs {
    margin-top: 8px;
}

.user-popup__footer--split {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.customers-popup .role-popup__footer,
.customers-popup .role-confirm__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.customers-popup .role-popup__footer--split {
    justify-content: space-between;
    width: 100%;
}

.customers-popup .role-popup__footer-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.customers-popup .role-popup__footer > .dx-button,
.customers-popup .role-confirm__footer > .dx-button {
    min-width: 140px;
}

.user-password-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.password-field {
    position: relative;
    min-width: 0;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(72, 144, 204, 0.2) !important;
    box-shadow: 0 6px 16px rgba(0, 27, 41, 0.08);
    z-index: 2;
}

.password-field__toggle .dx-button-content {
    padding: 0 !important;
}

.password-field .user-input input {
    padding-right: 2.85rem;
}

.user-input input {
    min-height: 44px;
    box-sizing: border-box;
}

.user-input .dx-texteditor-input {
    min-height: 44px;
    box-sizing: border-box;
}

.user-password-panel .user-field--password-narrow {
    width: 100%;
}

.user-popup__message {
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    line-height: 1.5;
}

.user-popup__message--success {
    background: rgba(234, 249, 240, 0.96);
    border-color: rgba(178, 226, 199, 0.92);
    color: #135d32;
}

.user-popup__message--error {
    background: rgba(255, 243, 243, 0.96);
    border-color: rgba(231, 194, 197, 0.9);
    color: #8f1825;
}

.confirm-popup {
    display: grid;
    gap: 20px;
    padding: 4px 0 2px;
}

.confirm-popup__intro {
    color: var(--sfa-muted);
    line-height: 1.6;
}

.confirm-popup__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.user-password-panel,
.user-device-panel {
    display: grid;
    gap: 18px;
    padding-top: 8px;
}

.user-password-panel__intro h4 {
    margin: 0 0 6px;
    color: var(--sfa-navy-deep);
    font-size: 1.05rem;
}

.user-password-panel__intro p {
    color: var(--sfa-muted);
    line-height: 1.5;
}

.user-password-panel__hint {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(72, 144, 204, 0.08);
    border: 1px solid rgba(72, 144, 204, 0.16);
    color: var(--sfa-navy-deep);
}

.user-device-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.user-device-summary article {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(72, 144, 204, 0.16);
}

.user-device-summary span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #667987;
}

.user-device-summary strong {
    color: var(--sfa-navy-deep);
}

.user-device-grid {
    min-width: 0;
}

.user-popup__footer--split {
    display: flex;
    flex-wrap: wrap;
}

.billing-shell {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.billing-hero,
.billing-actions,
.billing-filters,
.billing-grid,
.billing-tabs-card {
    border-radius: var(--sfa-radius-xl);
    min-width: 0;
}

.billing-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
}

.billing-hero__copy {
    display: grid;
    gap: 14px;
    max-width: 72ch;
}

.billing-hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 12px;
}

.billing-hero__metrics article,
.billing-summary-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 60, 84, 0.08);
}

.billing-hero__metrics strong,
.billing-summary-card strong {
    display: block;
    color: var(--sfa-navy-deep);
    font-size: 1.1rem;
}

.billing-hero__metrics span,
.billing-summary-card span {
    color: var(--sfa-muted);
    font-size: 0.88rem;
}

.billing-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
}

.billing-actions__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.billing-actions__status {
    color: var(--sfa-muted);
}

.billing-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 14px;
    padding: 18px 22px;
    align-items: end;
}

.billing-filter {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.billing-filter--action {
    align-self: end;
}

.billing-filter--full {
    grid-column: 1 / -1;
}

.billing-input {
    width: 100%;
    min-width: 0;
}

.billing-grid {
    padding: 18px;
    min-width: 0;
    overflow: visible;
}

.billing-grid__scroller {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.billing-grid__table {
    width: 100%;
    min-width: 0;
}

.billing-grid__table--compact {
    margin-top: 16px;
}

.billing-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.billing-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
}

.billing-status.issued {
    background: rgba(16, 137, 62, 0.12);
    color: #0f7a36;
}

.billing-status.pending,
.billing-status.contingency {
    background: rgba(72, 144, 204, 0.12);
    color: var(--sfa-navy);
}

.billing-status.rejected,
.billing-status.cancelled {
    background: rgba(232, 17, 35, 0.08);
    color: #9d1f2c;
}

.billing-status.draft {
    background: rgba(96, 119, 134, 0.12);
    color: #4e6270;
}

.billing-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 240px;
    text-align: center;
    color: var(--sfa-muted);
}

.billing-empty strong {
    color: var(--sfa-navy-deep);
    font-size: 1.05rem;
}

.billing-tabs-card {
    padding: 18px;
}

.billing-tab {
    display: grid;
    gap: 18px;
}

.billing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.billing-summary-grid--compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.billing-customer-panel {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
}

.billing-customer-panel__form {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.billing-detail-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.billing-detail-status article {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 60, 84, 0.08);
    display: grid;
    gap: 6px;
}

.billing-detail-status span {
    color: var(--sfa-muted);
    font-size: 0.88rem;
}

.billing-detail-status strong {
    color: var(--sfa-navy-deep);
}

.billing-credit-note {
    display: grid;
    gap: 16px;
}

.billing-help {
    color: var(--sfa-muted);
}

@media (max-width: 1200px) {
    .billing-hero,
    .billing-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .billing-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-summary-grid,
    .billing-summary-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-customer-panel__form {
        grid-template-columns: 1fr;
    }

    .billing-detail-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .billing-hero__metrics,
    .billing-summary-grid,
    .billing-summary-grid--compact,
    .billing-detail-status {
        grid-template-columns: 1fr;
    }

    .billing-filters {
        grid-template-columns: 1fr;
    }
}

#blazor-error-ui {
    display: none;
}