@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Layout/AsidePanel.razor.rz.scp.css */
.aside-panel[b-6ogoqcl09g] {
    padding: 16px;
}

.aside-header[b-6ogoqcl09g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

    .aside-header h4[b-6ogoqcl09g] {
        margin: 0;
        font-size: var(--fontSizeBase400);
        font-weight: var(--fontWeightSemibold);
    }

.aside-loading[b-6ogoqcl09g] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.aside-empty[b-6ogoqcl09g] {
    color: var(--colorNeutralForeground3);
    font-size: 0.85rem;
}

.activity-list[b-6ogoqcl09g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-item[b-6ogoqcl09g] {
    display: flex;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

    .activity-item:hover[b-6ogoqcl09g] {
        background-color: var(--colorNeutralBackground2);
    }

.activity-dot[b-6ogoqcl09g] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    background-color: var(--colorPaletteBlueForeground2);
}

.activity-dot-created[b-6ogoqcl09g] {
    background-color: var(--colorPaletteGreenForeground1);
}

.activity-dot-deleted[b-6ogoqcl09g] {
    background-color: var(--colorPaletteRedForeground1);
}

.activity-content[b-6ogoqcl09g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-desc[b-6ogoqcl09g] {
    font-size: 0.85rem;
    line-height: 1.3;
}

.activity-meta[b-6ogoqcl09g] {
    font-size: 0.72rem;
    color: var(--colorNeutralForeground3);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Intentionally empty.

   This file previously carried a .demo-home rule inherited from the FluentUI
   demo template. That class appears nowhere in this app's markup, so the rule
   never matched anything. Layout styling lives in wwwroot/app.css under
   .app-header / .app-nav / .app-content / .app-footer. */
/* /Components/Masters/Shared/BarList.razor.rz.scp.css */
.bar-list[b-w69w2ps13f] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bar-list-row[b-w69w2ps13f] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 5.5em;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 6px 0;
    border-top: 1px solid var(--colorNeutralStroke3);
}

    .bar-list-row:first-child[b-w69w2ps13f] {
        border-top: none;
    }

.bar-list-name[b-w69w2ps13f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-list-track[b-w69w2ps13f] {
    height: 8px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground3);
    overflow: hidden;
}

.bar-list-bar[b-w69w2ps13f] {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandBackground);
}

.bar-list-bar-negative[b-w69w2ps13f] {
    background: var(--colorPaletteRedBackground3);
}

.bar-list-value[b-w69w2ps13f] {
    color: var(--colorNeutralForeground1);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
/* /Components/Masters/Shared/TrendBars.razor.rz.scp.css */
.trend-bars[b-m2gy1vjq2o] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    height: 180px;
    overflow-x: auto;
    padding-top: 4px;
}

.trend-bar-col[b-m2gy1vjq2o] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 28px;
    height: 100%;
}

.trend-bar-track[b-m2gy1vjq2o] {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    width: 100%;
    max-width: 40px;
}

.trend-bar[b-m2gy1vjq2o] {
    width: 100%;
    min-height: 2px;
    border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
    background: var(--colorBrandBackground);
    transition: background 0.15s ease;
}

.trend-bar-col:hover .trend-bar[b-m2gy1vjq2o] {
    background: var(--colorBrandBackgroundHover);
}

.trend-bar-value[b-m2gy1vjq2o] {
    min-height: 1em;
    color: var(--colorNeutralForeground2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.trend-bar-label[b-m2gy1vjq2o] {
    color: var(--colorNeutralForeground3);
    font-size: 0.75rem;
}
/* /Components/Pages/Commercial/Leads/LeadEnquiryForm.razor.rz.scp.css */
/* ==========================================================
   Opportunity form — matches Quotation form chrome
   ========================================================== */

.master-grid-card[b-o787ob1xfy] {
    border-radius: 14px;
    border: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.field-row[b-o787ob1xfy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px 10px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

    .field-row > *[b-o787ob1xfy] {
        min-width: 0;
    }

    .field-row[b-o787ob1xfy]  fluent-field,
    .field-row[b-o787ob1xfy]  fluent-text-input,
    .field-row[b-o787ob1xfy]  fluent-textarea,
    .field-row[b-o787ob1xfy]  fluent-dropdown {
        width: 100%;
        min-width: 0;
    }

    .field-row[b-o787ob1xfy]  fluent-button {
        width: max-content;
    }

.field-row.cols-4[b-o787ob1xfy] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-row.cols-3[b-o787ob1xfy] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .field-row.cols-4[b-o787ob1xfy],
    .field-row.cols-3[b-o787ob1xfy] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.quotation-icon-btn[b-o787ob1xfy] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 9px;
    flex-shrink: 0;
    color: var(--colorBrandForeground1);
    background: color-mix(in srgb, var(--colorBrandBackground2, var(--colorBrandBackground)) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--colorBrandBackground) 34%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

    .quotation-icon-btn:hover[b-o787ob1xfy] {
        color: var(--colorBrandForeground1);
        background: color-mix(in srgb, var(--colorBrandBackground2, var(--colorBrandBackground)) 36%, transparent);
        border-color: color-mix(in srgb, var(--colorBrandBackground) 48%, transparent);
        transform: translateY(-1px);
    }

    .quotation-icon-btn:focus-visible[b-o787ob1xfy] {
        outline: 2px solid var(--colorBrandStroke1, var(--colorBrandBackground));
        outline-offset: 2px;
    }

    .quotation-icon-btn[b-o787ob1xfy]  svg {
        margin: 0;
    }

.quotation-tabs[b-o787ob1xfy]  fluent-tab[aria-selected="true"] fluent-text {
    color: var(--colorBrandForeground1);
    font-weight: 600;
}

.quotation-tabs[b-o787ob1xfy]  fluent-tab:not([aria-selected="true"]) fluent-text {
    color: var(--colorNeutralForeground3);
    font-weight: 500;
}
/* /Components/Pages/Commercial/Opportunities/OpportunityForm.razor.rz.scp.css */
/* ==========================================================
   Opportunity form — matches Quotation form chrome
   ========================================================== */

.master-grid-card[b-vpvejm9hlu] {
    border-radius: 14px;
    border: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.field-row[b-vpvejm9hlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px 10px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

    .field-row > *[b-vpvejm9hlu] {
        min-width: 0;
    }

    .field-row[b-vpvejm9hlu]  fluent-field,
    .field-row[b-vpvejm9hlu]  fluent-text-input,
    .field-row[b-vpvejm9hlu]  fluent-textarea,
    .field-row[b-vpvejm9hlu]  fluent-dropdown {
        width: 100%;
        min-width: 0;
    }

    .field-row[b-vpvejm9hlu]  fluent-button {
        width: max-content;
    }

.field-row.cols-4[b-vpvejm9hlu] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-row.cols-3[b-vpvejm9hlu] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .field-row.cols-4[b-vpvejm9hlu],
    .field-row.cols-3[b-vpvejm9hlu] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.quotation-icon-btn[b-vpvejm9hlu] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 9px;
    flex-shrink: 0;
    color: var(--colorBrandForeground1);
    background: color-mix(in srgb, var(--colorBrandBackground2, var(--colorBrandBackground)) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--colorBrandBackground) 34%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

    .quotation-icon-btn:hover[b-vpvejm9hlu] {
        color: var(--colorBrandForeground1);
        background: color-mix(in srgb, var(--colorBrandBackground2, var(--colorBrandBackground)) 36%, transparent);
        border-color: color-mix(in srgb, var(--colorBrandBackground) 48%, transparent);
        transform: translateY(-1px);
    }

    .quotation-icon-btn:focus-visible[b-vpvejm9hlu] {
        outline: 2px solid var(--colorBrandStroke1, var(--colorBrandBackground));
        outline-offset: 2px;
    }

    .quotation-icon-btn[b-vpvejm9hlu]  svg {
        margin: 0;
    }

.quotation-tabs[b-vpvejm9hlu]  fluent-tab[aria-selected="true"] fluent-text {
    color: var(--colorBrandForeground1);
    font-weight: 600;
}

.quotation-tabs[b-vpvejm9hlu]  fluent-tab:not([aria-selected="true"]) fluent-text {
    color: var(--colorNeutralForeground3);
    font-weight: 500;
}
/* /Components/Pages/Commercial/SalesOrders/SalesOrderForm.razor.rz.scp.css */
/* ==========================================================
   Opportunity form — matches Quotation form chrome
   ========================================================== */

.master-grid-card[b-nmhzydqh8b] {
    border-radius: 14px;
    border: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.field-row[b-nmhzydqh8b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px 10px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

    .field-row > *[b-nmhzydqh8b] {
        min-width: 0;
    }

    .field-row[b-nmhzydqh8b]  fluent-field,
    .field-row[b-nmhzydqh8b]  fluent-text-input,
    .field-row[b-nmhzydqh8b]  fluent-textarea,
    .field-row[b-nmhzydqh8b]  fluent-dropdown {
        width: 100%;
        min-width: 0;
    }

    .field-row[b-nmhzydqh8b]  fluent-button {
        width: max-content;
    }

.field-row.cols-4[b-nmhzydqh8b] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-row.cols-3[b-nmhzydqh8b] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .field-row.cols-4[b-nmhzydqh8b],
    .field-row.cols-3[b-nmhzydqh8b] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-find[b-0s3yld2r04] {
    position: relative;
    width: 100%;
    max-width: 640px;
}

.home-find-results[b-0s3yld2r04] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.home-find-result[b-0s3yld2r04] {
    padding: 4px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase200);
    text-decoration: none;
}

    .home-find-result:hover[b-0s3yld2r04],
    .home-find-result:focus-visible[b-0s3yld2r04] {
        border-color: var(--colorBrandStroke1);
        color: var(--colorBrandForegroundLink);
    }

.home-section-sub[b-0s3yld2r04] {
    margin-left: 6px;
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase300);
    font-weight: 400;
}

.home-table-scroll[b-0s3yld2r04] {
    width: 100%;
    overflow-x: auto;
}

.home-table[b-0s3yld2r04] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

    .home-table th[b-0s3yld2r04],
    .home-table td[b-0s3yld2r04] {
        padding: 8px 10px;
        border-top: 1px solid var(--colorNeutralStroke3);
        text-align: left;
    }

    .home-table thead th[b-0s3yld2r04] {
        border-top: none;
        color: var(--colorNeutralForeground3);
        font-size: var(--fontSizeBase200);
        font-weight: 600;
    }

.home-num[b-0s3yld2r04] {
    color: var(--colorNeutralForeground2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-due[b-0s3yld2r04] {
    display: inline-block;
    min-width: 52px;
    padding: 2px 8px;
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase200);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.home-due-urgent[b-0s3yld2r04] {
    background: var(--colorPaletteRedBackground2);
    color: var(--colorPaletteRedForeground2);
}

.home-due-soon[b-0s3yld2r04] {
    background: var(--colorPaletteMarigoldBackground2);
    color: var(--colorPaletteMarigoldForeground2);
}

.home-due-later[b-0s3yld2r04] {
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground2);
}

.home-sailings[b-0s3yld2r04] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .home-sailings li[b-0s3yld2r04] {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
        gap: 8px;
        align-items: baseline;
        padding: 6px 0;
        border-top: 1px solid var(--colorNeutralStroke3);
    }

        .home-sailings li:first-child[b-0s3yld2r04] {
            border-top: none;
        }

.home-sailing-port[b-0s3yld2r04] {
    overflow: hidden;
    color: var(--colorNeutralForeground3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .home-sailings li[b-0s3yld2r04] {
        grid-template-columns: 1fr auto;
    }

    .home-sailing-port[b-0s3yld2r04] {
        display: none;
    }
}
/* /Components/Pages/Identity/UserForm.razor.rz.scp.css */
.user-form-grid[b-f07x1r2cvz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
}

.user-form-section[b-f07x1r2cvz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .user-form-section h3[b-f07x1r2cvz] {
        margin: 0 0 8px;
        font-size: var(--fontSizeBase400);
    }

.user-form-hint[b-f07x1r2cvz] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}

.user-role-list[b-f07x1r2cvz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-role-option[b-f07x1r2cvz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    cursor: pointer;
}

    .user-role-option:hover[b-f07x1r2cvz] {
        background: var(--colorSubtleBackgroundHover);
    }

.user-role-on[b-f07x1r2cvz] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorBrandBackground2);
}

.user-role-name[b-f07x1r2cvz] {
    display: block;
    font-weight: 600;
}

.user-role-sub[b-f07x1r2cvz] {
    display: block;
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}

.user-effective[b-f07x1r2cvz] {
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground2);
}

    .user-effective h4[b-f07x1r2cvz] {
        margin: 0 0 8px;
    }

    .user-effective p[b-f07x1r2cvz] {
        margin: 0;
    }

.user-effective-list[b-f07x1r2cvz] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .user-effective-list li[b-f07x1r2cvz] {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 3px 0;
        border-top: 1px solid var(--colorNeutralStroke3);
    }

        .user-effective-list li:first-child[b-f07x1r2cvz] {
            border-top: none;
        }

.user-effective-value[b-f07x1r2cvz] {
    color: var(--colorNeutralForeground2);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Operations/Rates/RateForm.razor.rz.scp.css */
/* ==========================================================
   Opportunity form — matches Quotation form chrome
   ========================================================== */

.master-grid-card[b-w763oyp6oz] {
    border-radius: 14px;
    border: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.field-row[b-w763oyp6oz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px 10px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

    .field-row > *[b-w763oyp6oz] {
        min-width: 0;
    }

    .field-row[b-w763oyp6oz]  fluent-field,
    .field-row[b-w763oyp6oz]  fluent-text-input,
    .field-row[b-w763oyp6oz]  fluent-textarea,
    .field-row[b-w763oyp6oz]  fluent-dropdown {
        width: 100%;
        min-width: 0;
    }

    .field-row[b-w763oyp6oz]  fluent-button {
        width: max-content;
    }

.field-row.cols-4[b-w763oyp6oz] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field-row.cols-3[b-w763oyp6oz] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .field-row.cols-4[b-w763oyp6oz],
    .field-row.cols-3[b-w763oyp6oz] {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}
/* /Components/Pages/Security/Permissions/PermissionsList.razor.rz.scp.css */
.perm-area-title[b-co0c9frxq4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--fontSizeBase500);
    font-weight: 600;
}

.perm-area-count[b-co0c9frxq4] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
    font-weight: 400;
}

.perm-table-scroll[b-co0c9frxq4] {
    width: 100%;
    overflow-x: auto;
}

.perm-table[b-co0c9frxq4] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

    .perm-table th[b-co0c9frxq4],
    .perm-table td[b-co0c9frxq4] {
        padding: 6px 10px;
        text-align: left;
        vertical-align: top;
    }

    .perm-table thead th[b-co0c9frxq4] {
        color: var(--colorNeutralForeground3);
        font-size: var(--fontSizeBase200);
        font-weight: 600;
    }

    .perm-table tbody th[b-co0c9frxq4] {
        width: 22%;
        font-weight: 600;
    }

    .perm-table tr.perm-first th[b-co0c9frxq4],
    .perm-table tr.perm-first td[b-co0c9frxq4] {
        border-top: 1px solid var(--colorNeutralStroke2);
    }

.perm-name[b-co0c9frxq4] {
    padding: 1px 6px;
    border-radius: var(--borderRadiusSmall);
    background: var(--colorNeutralBackground3);
    font-size: var(--fontSizeBase200);
}

.perm-missing[b-co0c9frxq4] {
    margin-left: 6px;
    color: var(--colorPaletteDarkOrangeForeground1);
    font-size: var(--fontSizeBase100);
}

.perm-roles[b-co0c9frxq4] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.perm-role[b-co0c9frxq4] {
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase100);
    line-height: 18px;
}

.perm-role-admin[b-co0c9frxq4] {
    border-color: var(--colorBrandStroke2);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}
/* /Components/Pages/Security/Roles/RoleForm.razor.rz.scp.css */
.role-header[b-cu0onb7sw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.role-summary[b-cu0onb7sw9] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.role-summary-value[b-cu0onb7sw9] {
    color: var(--colorBrandForeground1);
    font-size: var(--fontSizeHero700);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.role-summary-label[b-cu0onb7sw9] {
    color: var(--colorNeutralForeground3);
}

.role-toolbar[b-cu0onb7sw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 12px 0 4px;
}

.role-search[b-cu0onb7sw9] {
    flex: 1 1 240px;
    max-width: 360px;
}

.role-area[b-cu0onb7sw9] {
    width: 100%;
    margin-top: 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    overflow: hidden;
}

.role-area-header[b-cu0onb7sw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--colorNeutralBackground2);
}

.role-area-toggle[b-cu0onb7sw9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: var(--colorNeutralForeground1);
    font: inherit;
    cursor: pointer;
}

.role-area-title[b-cu0onb7sw9] {
    font-weight: 600;
}

.role-area-count[b-cu0onb7sw9] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
    font-variant-numeric: tabular-nums;
}

.role-area-actions[b-cu0onb7sw9] {
    display: inline-flex;
    gap: 12px;
}

.role-link[b-cu0onb7sw9] {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--colorBrandForegroundLink);
    font: inherit;
    font-size: var(--fontSizeBase200);
    cursor: pointer;
}

    .role-link:hover[b-cu0onb7sw9] {
        text-decoration: underline;
    }

.role-matrix-scroll[b-cu0onb7sw9] {
    width: 100%;
    overflow-x: auto;
}

/* Fixed layout so View/Manage line up across every area's table. */
.role-matrix[b-cu0onb7sw9] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .role-matrix th:first-child[b-cu0onb7sw9] {
        width: 34%;
    }

    .role-matrix th[b-cu0onb7sw9],
    .role-matrix td[b-cu0onb7sw9] {
        padding: 6px 12px;
        border-top: 1px solid var(--colorNeutralStroke3);
        text-align: left;
        vertical-align: middle;
    }

    .role-matrix thead th[b-cu0onb7sw9] {
        border-top: none;
        color: var(--colorNeutralForeground3);
        font-size: var(--fontSizeBase200);
        font-weight: 600;
    }

    .role-matrix tbody th[b-cu0onb7sw9] {
        font-weight: 400;
    }

    .role-matrix tbody tr:hover[b-cu0onb7sw9] {
        background: var(--colorSubtleBackgroundHover);
    }

.role-matrix tbody tr.role-row-on th[b-cu0onb7sw9] {
    font-weight: 600;
}

.role-matrix .role-col-check[b-cu0onb7sw9] {
    width: 84px;
    text-align: center;
}

.role-actions[b-cu0onb7sw9] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
/* /Components/Pages/Security/Roles/RolesList.razor.rz.scp.css */
.role-card-grid[b-0ei7k8z1uc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
}

.role-card[b-0ei7k8z1uc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    box-shadow: var(--shadow2);
    transition: box-shadow 0.15s ease;
}

    .role-card:hover[b-0ei7k8z1uc] {
        box-shadow: var(--shadow8);
    }

.role-card-head[b-0ei7k8z1uc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-card-name[b-0ei7k8z1uc] {
    flex: 1 1 auto;
    color: var(--colorNeutralForeground1);
    font-size: var(--fontSizeBase400);
    font-weight: 600;
    text-decoration: none;
}

    .role-card-name:hover[b-0ei7k8z1uc] {
        color: var(--colorBrandForegroundLink);
        text-decoration: underline;
    }

.role-card-stats[b-0ei7k8z1uc] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--colorNeutralForeground2);
    font-size: var(--fontSizeBase200);
    font-variant-numeric: tabular-nums;
}

.role-card-areas[b-0ei7k8z1uc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.role-chip[b-0ei7k8z1uc] {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase100);
    line-height: 16px;
}

.role-chip-write[b-0ei7k8z1uc] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

.role-chip-view[b-0ei7k8z1uc] {
    border-color: var(--colorBrandStroke2);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}

.role-chip-none[b-0ei7k8z1uc] {
    border-color: var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground4, var(--colorNeutralForeground3));
}

.role-card-actions[b-0ei7k8z1uc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--colorNeutralStroke3);
}

.role-legend[b-0ei7k8z1uc] {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
}

@media (max-width: 600px) {
    .role-card-grid[b-0ei7k8z1uc] {
        grid-template-columns: 1fr;
    }
}