/* /Dialogs/BrandingPromptDialog.razor.rz.scp.css */
.bp-body[b-27dywz102v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
}

/* Mirrors the printed block: logo on the left, phone number centred against it. */
.bp-preview[b-27dywz102v] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
}

/* The 1.5" cap at ~64 px/in, so the proportions read like the sheet. Never stretched. */
.bp-logo[b-27dywz102v] {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
}

.bp-phone[b-27dywz102v] {
    font-size: 1rem;
    color: #111;
}

.bp-note[b-27dywz102v] {
    color: #666;
}
/* /Dialogs/CancelSubscriptionDialog.razor.rz.scp.css */
.cd-head[b-fqcrw6rz40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cd-title[b-fqcrw6rz40] {
    font-size: 22px;
    font-weight: 700;
    color: #121217;
}

.cd-close[b-fqcrw6rz40] {
    color: #2563eb;
}

.cd-body[b-fqcrw6rz40] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 340px;
    color: #121217;
    font-size: 14px;
    line-height: 1.45;
}

.cd-text[b-fqcrw6rz40] {
    color: #3a3a45;
}

.cd-muted[b-fqcrw6rz40] {
    color: #6c6c89;
    font-size: 13px;
}

.cd-lines[b-fqcrw6rz40] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-label[b-fqcrw6rz40] {
    font-weight: 700;
}

.cd-error[b-fqcrw6rz40] {
    font-size: 13px;
    color: #b42318;
}

/* ---- Actions: two equal-width buttons spanning the footer ---- */
.cd-actions[b-fqcrw6rz40] {
    display: flex;
    gap: 12px;
    width: 100%;
}

.cd-btn[b-fqcrw6rz40] {
    flex: 1;
    height: 44px;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cd-btn:disabled[b-fqcrw6rz40] {
    opacity: 0.6;
    cursor: default;
}

.cd-btn-outline[b-fqcrw6rz40] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
}

.cd-btn-outline:hover:not(:disabled)[b-fqcrw6rz40] {
    background: #f7f7f8;
}

.cd-btn-dark[b-fqcrw6rz40] {
    background: #1f2430;
    border: 1px solid #1f2430;
    color: #ffffff;
}

.cd-btn-dark:hover:not(:disabled)[b-fqcrw6rz40] {
    background: #11151d;
}
/* /Dialogs/FeatureChangeDialog.razor.rz.scp.css */
.cd-head[b-vrvlmrapv9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cd-title[b-vrvlmrapv9] {
    font-size: 22px;
    font-weight: 700;
    color: #121217;
}

.cd-close[b-vrvlmrapv9] {
    color: #2563eb;
}

.cd-body[b-vrvlmrapv9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 340px;
    color: #121217;
    font-size: 14px;
    line-height: 1.45;
}

.cd-text[b-vrvlmrapv9] {
    color: #3a3a45;
}

.cd-muted[b-vrvlmrapv9] {
    color: #6c6c89;
    font-size: 13px;
}

.cd-lines[b-vrvlmrapv9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-label[b-vrvlmrapv9] {
    font-weight: 700;
}

.cd-error[b-vrvlmrapv9] {
    font-size: 13px;
    color: #b42318;
}

/* ---- Actions: two equal-width buttons spanning the footer ---- */
.cd-actions[b-vrvlmrapv9] {
    display: flex;
    gap: 12px;
    width: 100%;
}

.cd-btn[b-vrvlmrapv9] {
    flex: 1;
    height: 44px;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cd-btn:disabled[b-vrvlmrapv9] {
    opacity: 0.6;
    cursor: default;
}

.cd-btn-outline[b-vrvlmrapv9] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
}

.cd-btn-outline:hover:not(:disabled)[b-vrvlmrapv9] {
    background: #f7f7f8;
}

.cd-btn-dark[b-vrvlmrapv9] {
    background: #1f2430;
    border: 1px solid #1f2430;
    color: #ffffff;
}

.cd-btn-dark:hover:not(:disabled)[b-vrvlmrapv9] {
    background: #11151d;
}
/* /Dialogs/SlopePadDialog.razor.rz.scp.css */
/* Bigger, easier-to-hit spin arrows on the Slope Pad's two numeric fields.

   MudBlazor stacks the two spin buttons in a narrow flex COLUMN absolutely
   positioned inside the input, which caps each arrow at half the field height.
   Laying them out as a ROW instead gives each one the full height of the field
   and a much wider target — roughly 20x20 to 27x38 — while the field itself,
   and therefore the popup, stays exactly as tall as before.

   Reached with ::deep because the buttons belong to MudNumericField's own
   markup, not this component's; the .sp-fields wrapper is what carries the
   scope attribute. */

.sp-fields[b-jsug3gwb3d]  .mud-input-number-control .mud-input-numeric-spin {
    flex-direction: row;
    width: 56px;
    /* Inset by the outlined border so the buttons never sit on top of it. */
    top: 1px;
    right: 1px;
    bottom: 1px;
}

.sp-fields[b-jsug3gwb3d]  .mud-input-number-control .mud-input-numeric-spin button {
    /* Equal halves of the column, each the full height of the input. MudBlazor's
       own rule sizes them intrinsically, which is what made them small. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border-radius: 4px;
}

/* The arrow glyph only inks the middle third of its 24-unit viewBox, so a
   larger icon box is what actually makes the chevron read bigger. */
.sp-fields[b-jsug3gwb3d]  .mud-input-number-control .mud-input-numeric-spin button .mud-icon-root {
    font-size: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

/* Keep the value clear of the now much wider arrow pair (MudBlazor reserves
   only 20px for a dense field). */
.sp-fields[b-jsug3gwb3d]  .mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) input,
.sp-fields[b-jsug3gwb3d]  .mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) input.mud-input-root-margin-dense {
    padding-right: 60px;
    padding-inline-end: 60px;
}
/* /Layout/BlankLayout.razor.rz.scp.css */
.blank-shell[b-p0k7518lwv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: #f3f3f5;
}
/* /Layout/PortalLayout.razor.rz.scp.css */
.app-shell[b-40ia6133on] {
    display: flex;
    gap: 80px;
    min-height: 100vh;
    background: #ffffff;
}

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar[b-40ia6133on] {
    width: 240px;
    flex: 0 0 240px;
    box-sizing: border-box;
    background: #f9f9fa;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 32px;
}

.sidebar-logo[b-40ia6133on] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.logo-circle[b-40ia6133on] {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    background: #eeeeee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}

.sidebar-nav[b-40ia6133on] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.nav-section[b-40ia6133on] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-section-icon[b-40ia6133on] {
    width: 24px;
    height: 24px;
    color: #000000;
}

.nav-section-title[b-40ia6133on] {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-transform: uppercase;
    color: #000000;
}

.nav-links[b-40ia6133on] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 24px;
    width: 100%;
}

.sidebar-nav[b-40ia6133on]  .nav-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #000000;
    text-decoration: none;
}

.sidebar-nav[b-40ia6133on]  .nav-link.active {
    background: #f2f2f2;
}

/* ---- Footer ----------------------------------------------------------- */
.sidebar-footer[b-40ia6133on] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.sidebar-divider[b-40ia6133on] {
    height: 0.5px;
    width: 100%;
    background: #cccccc;
}

.user-row[b-40ia6133on] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.user-info[b-40ia6133on] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
}

.user-info:hover .user-name[b-40ia6133on] {
    text-decoration: underline;
}

.user-name[b-40ia6133on] {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #121217;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role[b-40ia6133on] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #6c6c89;
}

.logout-btn[b-40ia6133on] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #6c6c89;
    text-decoration: none;
}

.logout-btn:hover[b-40ia6133on] {
    background: #f0f0f5;
    color: #121217;
}

.logout-icon[b-40ia6133on] {
    width: 24px;
    height: 24px;
}

/* ---- Content ---------------------------------------------------------- */
/* Fluid up to the original 1024px (identical on wide screens), but allowed to
   shrink below it so the shell no longer overflows on smaller viewports. */
.content[b-40ia6133on] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 1024px;
    box-sizing: border-box;
    padding: 80px 0;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1200px) {
    .app-shell[b-40ia6133on] { gap: 40px; }
    .content[b-40ia6133on] { padding: 56px 24px 56px 0; }
}

/* Below this the fixed sidebar + content no longer fit side by side, so the
   sidebar becomes a wrapping top bar and the content takes the full width. */
@media (max-width: 860px) {
    .app-shell[b-40ia6133on] { flex-direction: column; gap: 0; }

    .sidebar[b-40ia6133on] {
        width: 100%;
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 20px;
        padding: 16px 20px;
    }

    .sidebar-logo[b-40ia6133on] { width: auto; justify-content: flex-start; margin-right: auto; }
    .sidebar-logo-img[b-40ia6133on] { max-width: 150px !important; }

    .sidebar-nav[b-40ia6133on] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; width: 100%; }
    .nav-section[b-40ia6133on] { gap: 6px; }
    .nav-links[b-40ia6133on] { flex-direction: row; flex-wrap: wrap; padding-left: 0; gap: 6px 8px; width: auto; }

    .sidebar-footer[b-40ia6133on] { margin-top: 0; width: auto; }
    .sidebar-divider[b-40ia6133on] { display: none; }
    .user-row[b-40ia6133on] { width: auto; gap: 8px; }

    .content[b-40ia6133on] { width: 100%; max-width: none; padding: 24px 20px; }
}
/* /Pages/Company.razor.rz.scp.css */
.page[b-jdxfvisb0b] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ---- Header ----------------------------------------------------------- */
.page-header[b-jdxfvisb0b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}

.page-title[b-jdxfvisb0b] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.header-actions[b-jdxfvisb0b] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn[b-jdxfvisb0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn:disabled[b-jdxfvisb0b] {
    opacity: 0.6;
    cursor: default;
}

.btn-outline[b-jdxfvisb0b] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
    box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05);
}

.btn-outline:hover:not(:disabled)[b-jdxfvisb0b] {
    background: #f7f7f8;
}

.btn-dark[b-jdxfvisb0b] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-jdxfvisb0b] {
    background: #000000;
}

.btn-icon[b-jdxfvisb0b] {
    flex-shrink: 0;
}

/* ---- Tabs ------------------------------------------------------------- */
.tabs[b-jdxfvisb0b] {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    border-bottom: 1px solid #e5e5ea;
}

.tab[b-jdxfvisb0b] {
    position: relative;
    padding: 12px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #6c6c89;
    cursor: pointer;
}

.tab:hover[b-jdxfvisb0b] {
    color: #121217;
}

.tab.active[b-jdxfvisb0b] {
    color: #000000;
    font-weight: 700;
}

.tab.active[b-jdxfvisb0b]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #000000;
}

.tab-content[b-jdxfvisb0b] {
    width: 100%;
}

/* ---- Sections / fields ------------------------------------------------ */
.form-section[b-jdxfvisb0b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.section-title[b-jdxfvisb0b] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.field-grid[b-jdxfvisb0b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 381px));
    gap: 12px 24px;
    width: 100%;
    max-width: 786px;
}

.field[b-jdxfvisb0b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field label[b-jdxfvisb0b] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #121217;
}

.page[b-jdxfvisb0b]  .input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 10px 16px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(18, 18, 23, 0.05);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.page[b-jdxfvisb0b]  .input::placeholder {
    color: #6c6c89;
}

.page[b-jdxfvisb0b]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.page[b-jdxfvisb0b]  select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c6c89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
    cursor: pointer;
}

.page[b-jdxfvisb0b]  .input.invalid {
    border-color: #b42318;
}

[b-jdxfvisb0b] .validation-message {
    font-size: 13px;
    color: #b42318;
}

/* ---- Placeholder / messages ------------------------------------------- */
.placeholder[b-jdxfvisb0b] {
    padding: 48px 0;
    font-size: 14px;
    color: #6c6c89;
}

.message[b-jdxfvisb0b] {
    padding: 8px 0;
    font-size: 14px;
    color: #6c6c89;
}

.message-error[b-jdxfvisb0b] {
    color: #b42318;
}

/* ---- Logo picker ------------------------------------------------------ */
.logo-field[b-jdxfvisb0b] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-preview[b-jdxfvisb0b] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid #e5e5ea;
    object-fit: contain;
    background: #ffffff;
    flex-shrink: 0;
}

.logo-empty[b-jdxfvisb0b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6c6c89;
    background: #f7f7f8;
}

.logo-upload[b-jdxfvisb0b] {
    cursor: pointer;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 640px) {
    .page-header[b-jdxfvisb0b] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .header-actions[b-jdxfvisb0b] {
        justify-content: flex-end;
    }

    .page-title[b-jdxfvisb0b] {
        font-size: 26px;
    }

    /* Tabs stay on one line but scroll horizontally instead of overflowing. */
    .tabs[b-jdxfvisb0b] {
        gap: 20px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab[b-jdxfvisb0b] {
        white-space: nowrap;
    }

    /* One field per row on phones. */
    .field-grid[b-jdxfvisb0b] {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }
}

/* Explains what the (White Labeling only) logo is actually for. */
.field-hint[b-jdxfvisb0b] {
    margin-top: 6px;
    font-size: 13px;
    color: #6b6b70;
}
/* /Pages/CompanyUserForm.razor.rz.scp.css */
.page[b-e2zytdrieb] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}

.page-header[b-e2zytdrieb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}

.header-titles[b-e2zytdrieb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-e2zytdrieb] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.page-subtitle[b-e2zytdrieb] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.04em;
    color: #6c6c89;
}

.header-actions[b-e2zytdrieb] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn[b-e2zytdrieb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn:disabled[b-e2zytdrieb] {
    opacity: 0.6;
    cursor: default;
}

.btn-outline[b-e2zytdrieb] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
    box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05);
}

.btn-outline:hover:not(:disabled)[b-e2zytdrieb] {
    background: #f7f7f8;
}

.btn-dark[b-e2zytdrieb] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-e2zytdrieb] {
    background: #000000;
}

.btn-icon[b-e2zytdrieb] {
    flex-shrink: 0;
}

.form-section[b-e2zytdrieb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.section-title[b-e2zytdrieb] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.field-grid[b-e2zytdrieb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 381px));
    gap: 12px 24px;
    width: 100%;
    max-width: 786px;
}

.field[b-e2zytdrieb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field label[b-e2zytdrieb] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #121217;
}

.page[b-e2zytdrieb]  .input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 10px 16px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(18, 18, 23, 0.05);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.page[b-e2zytdrieb]  .input::placeholder {
    color: #6c6c89;
}

.page[b-e2zytdrieb]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.page[b-e2zytdrieb]  select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c6c89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
    cursor: pointer;
}

.page[b-e2zytdrieb]  .input.invalid {
    border-color: #b42318;
}

[b-e2zytdrieb] .validation-message {
    font-size: 13px;
    color: #b42318;
}

.form-message[b-e2zytdrieb] {
    padding: 8px 0;
    font-size: 14px;
    color: #6c6c89;
}

.form-error[b-e2zytdrieb] {
    color: #b42318;
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
.card[b-6hf7b6pe33] {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 18, 23, 0.08);
    padding: 28px;
    box-sizing: border-box;
}

.card-title[b-6hf7b6pe33] {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.field[b-6hf7b6pe33] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field label[b-6hf7b6pe33] {
    font-size: 14px;
    font-weight: 500;
    color: #121217;
}

.card[b-6hf7b6pe33]  .input,
.field .input[b-6hf7b6pe33] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.card[b-6hf7b6pe33]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.card[b-6hf7b6pe33]  .input.invalid {
    border-color: #b42318;
}

.btn[b-6hf7b6pe33] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-dark[b-6hf7b6pe33] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-6hf7b6pe33] {
    background: #000000;
}

.forgot-link[b-6hf7b6pe33] {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #1f1f1f;
    text-decoration: underline;
}

.forgot-link:hover[b-6hf7b6pe33] {
    color: #000000;
}

.btn:disabled[b-6hf7b6pe33] {
    opacity: 0.6;
    cursor: default;
}

.message[b-6hf7b6pe33] {
    font-size: 14px;
    color: #6c6c89;
    margin: 0 0 12px;
}

.message-error[b-6hf7b6pe33] {
    color: #b42318;
}

[b-6hf7b6pe33] .validation-message {
    font-size: 13px;
    color: #b42318;
}
/* /Pages/Login.razor.rz.scp.css */
.card[b-km9keomj5l] {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 18, 23, 0.08);
    padding: 28px;
    box-sizing: border-box;
}

.card-title[b-km9keomj5l] {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

/* FocusOnNavigate focuses the first <h1> on load; suppress the focus ring so
   the heading doesn't show a black box until the user interacts with a field. */
.card-title:focus[b-km9keomj5l],
.card-title:focus-visible[b-km9keomj5l] {
    outline: none;
}

.field[b-km9keomj5l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field label[b-km9keomj5l] {
    font-size: 14px;
    font-weight: 500;
    color: #121217;
}

/* InputText renders via a child component, so its <input> doesn't get this
   component's CSS-isolation scope. Reach it with ::deep. */
.card[b-km9keomj5l]  .input,
.field .input[b-km9keomj5l] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.card[b-km9keomj5l]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.card[b-km9keomj5l]  .input.invalid {
    border-color: #b42318;
}

.btn[b-km9keomj5l] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}

.btn-dark[b-km9keomj5l] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-km9keomj5l] {
    background: #000000;
}

.btn:disabled[b-km9keomj5l] {
    opacity: 0.6;
    cursor: default;
}

.forgot-link[b-km9keomj5l] {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #1f1f1f;
    text-decoration: underline;
}

.forgot-link:hover[b-km9keomj5l] {
    color: #000000;
}

.message[b-km9keomj5l] {
    font-size: 14px;
    color: #6c6c89;
    margin: 0 0 12px;
}

.message-error[b-km9keomj5l] {
    color: #b42318;
}

[b-km9keomj5l] .validation-message {
    font-size: 13px;
    color: #b42318;
}
/* /Pages/Otp.razor.rz.scp.css */
.card[b-4avcfckqzs] {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 18, 23, 0.08);
    padding: 28px;
    box-sizing: border-box;
}

.card-title[b-4avcfckqzs] {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.field[b-4avcfckqzs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field label[b-4avcfckqzs] {
    font-size: 14px;
    font-weight: 500;
    color: #121217;
}

.card[b-4avcfckqzs]  .input,
.field .input[b-4avcfckqzs] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.card[b-4avcfckqzs]  .code-input {
    letter-spacing: 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.card[b-4avcfckqzs]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.card[b-4avcfckqzs]  .input.invalid {
    border-color: #b42318;
}

.btn[b-4avcfckqzs] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}

.btn-dark[b-4avcfckqzs] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-4avcfckqzs] {
    background: #000000;
}

.btn:disabled[b-4avcfckqzs] {
    opacity: 0.6;
    cursor: default;
}

/* Matches the "Forgot Password" link on the Login screen. Resets the <button>
   chrome so it reads as a centered, underlined text link. */
.forgot-link[b-4avcfckqzs] {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1f1f1f;
    text-decoration: underline;
    cursor: pointer;
}

.forgot-link:hover:not(:disabled)[b-4avcfckqzs] {
    color: #000000;
}

.forgot-link:disabled[b-4avcfckqzs] {
    opacity: 0.6;
    cursor: default;
}

.message[b-4avcfckqzs] {
    font-size: 14px;
    color: #6c6c89;
    margin: 0 0 12px;
}

.message-error[b-4avcfckqzs] {
    color: #b42318;
}

[b-4avcfckqzs] .validation-message {
    font-size: 13px;
    color: #b42318;
}
/* /Pages/Profile.razor.rz.scp.css */
.page[b-v1ldf1wn4x] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}

.page-header[b-v1ldf1wn4x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}

.header-titles[b-v1ldf1wn4x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-v1ldf1wn4x] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.page-subtitle[b-v1ldf1wn4x] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.04em;
    color: #6c6c89;
}

.header-actions[b-v1ldf1wn4x] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn[b-v1ldf1wn4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn:disabled[b-v1ldf1wn4x] {
    opacity: 0.6;
    cursor: default;
}

.btn-outline[b-v1ldf1wn4x] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
    box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05);
}

.btn-outline:hover:not(:disabled)[b-v1ldf1wn4x] {
    background: #f7f7f8;
}

.btn-dark[b-v1ldf1wn4x] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-v1ldf1wn4x] {
    background: #000000;
}

.btn-icon[b-v1ldf1wn4x] {
    flex-shrink: 0;
}

.form-section[b-v1ldf1wn4x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.section-title[b-v1ldf1wn4x] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.field-grid[b-v1ldf1wn4x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 381px));
    gap: 12px 24px;
    width: 100%;
    max-width: 786px;
}

.field[b-v1ldf1wn4x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field label[b-v1ldf1wn4x] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #121217;
}

.page[b-v1ldf1wn4x]  .input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 10px 16px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(18, 18, 23, 0.05);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.page[b-v1ldf1wn4x]  .input::placeholder {
    color: #6c6c89;
}

.page[b-v1ldf1wn4x]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.page[b-v1ldf1wn4x]  select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c6c89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
    cursor: pointer;
}

.page[b-v1ldf1wn4x]  .input.invalid {
    border-color: #b42318;
}

[b-v1ldf1wn4x] .validation-message {
    font-size: 13px;
    color: #b42318;
}

.form-message[b-v1ldf1wn4x] {
    padding: 8px 0;
    font-size: 14px;
    color: #6c6c89;
}

.form-error[b-v1ldf1wn4x] {
    color: #b42318;
}
/* /Pages/SetPassword.razor.rz.scp.css */
.card[b-7a8oecaa90] {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 18, 23, 0.08);
    padding: 28px;
    box-sizing: border-box;
}

.card-title[b-7a8oecaa90] {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
}

.field[b-7a8oecaa90] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field label[b-7a8oecaa90] {
    font-size: 14px;
    font-weight: 500;
    color: #121217;
}

/* InputText renders via a child component, so its <input> doesn't get this
   component's CSS-isolation scope. Reach it (and the plain email input) with ::deep. */
.card[b-7a8oecaa90]  .input,
.field .input[b-7a8oecaa90] {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #121217;
    appearance: none;
    -webkit-appearance: none;
}

.card[b-7a8oecaa90]  .input:focus {
    outline: none;
    border-color: #7047eb;
    box-shadow: 0 0 0 3px rgba(112, 71, 235, 0.15);
}

.field .input:disabled[b-7a8oecaa90] {
    background: #f7f7f8;
    color: #6c6c89;
    cursor: not-allowed;
}

.card[b-7a8oecaa90]  .input.invalid {
    border-color: #b42318;
}

.btn[b-7a8oecaa90] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
}

.btn-dark[b-7a8oecaa90] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-7a8oecaa90] {
    background: #000000;
}

.btn:disabled[b-7a8oecaa90] {
    opacity: 0.6;
    cursor: default;
}

.message[b-7a8oecaa90] {
    font-size: 14px;
    color: #6c6c89;
    margin: 0 0 12px;
}

.message-error[b-7a8oecaa90] {
    color: #b42318;
}

[b-7a8oecaa90] .validation-message {
    font-size: 13px;
    color: #b42318;
}
/* /Shared/CompanyPermissionsView.razor.rz.scp.css */
.perm[b-e7stsqr8ui] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.perm-toolbar[b-e7stsqr8ui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section-title[b-e7stsqr8ui] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

/* ---- Controls (role select + save) ------------------------------------ */
.perm-controls[b-e7stsqr8ui] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.field[b-e7stsqr8ui] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 320px;
    max-width: 100%;
}

.field label[b-e7stsqr8ui] {
    font-size: 14px;
    font-weight: 500;
    color: #121217;
}

.input[b-e7stsqr8ui] {
    box-sizing: border-box;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
}

.input-scope[b-e7stsqr8ui] {
    height: 32px;
    padding: 4px 8px;
    width: 140px;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn[b-e7stsqr8ui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-dark[b-e7stsqr8ui] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover[b-e7stsqr8ui] {
    background: #000000;
}

.btn-dark:disabled[b-e7stsqr8ui] {
    opacity: 0.6;
    cursor: default;
}

.btn-icon[b-e7stsqr8ui] {
    flex-shrink: 0;
}

/* ---- Matrix table ----------------------------------------------------- */
.table[b-e7stsqr8ui] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-header[b-e7stsqr8ui],
.table-row[b-e7stsqr8ui] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
}

.table-header[b-e7stsqr8ui] {
    border-bottom: 1px solid #000000;
}

.table-row[b-e7stsqr8ui] {
    border-bottom: 1px solid #eeeeee;
}

.table-header span[b-e7stsqr8ui] {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.table-row span[b-e7stsqr8ui] {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

.row-locked .col-module[b-e7stsqr8ui] {
    color: #6c6c89;
}

.col-module[b-e7stsqr8ui] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lock-note[b-e7stsqr8ui] {
    font-size: 12px;
    color: #b98900;
    background: #fff7e6;
    padding: 1px 8px;
    border-radius: 999px;
}

.col-perm[b-e7stsqr8ui] {
    width: 110px;
    flex: 0 0 110px;
}

.col-scope[b-e7stsqr8ui] {
    width: 180px;
    flex: 0 0 180px;
    display: flex;
    justify-content: flex-end;
}

/* ---- States ----------------------------------------------------------- */
.table-message[b-e7stsqr8ui] {
    padding: 24px 0;
    font-size: 14px;
    color: #6c6c89;
}

.perm-hint[b-e7stsqr8ui] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6c6c89;
    line-height: 20px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
    .col-perm[b-e7stsqr8ui] {
        width: 72px;
        flex: 0 0 72px;
    }

    .col-scope[b-e7stsqr8ui] {
        width: 120px;
        flex: 0 0 120px;
    }
}
/* /Shared/CompanyRolesView.razor.rz.scp.css */
.team[b-00hpwygopt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.team-toolbar[b-00hpwygopt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section-title[b-00hpwygopt] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.toolbar-actions[b-00hpwygopt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn[b-00hpwygopt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-dark[b-00hpwygopt] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover[b-00hpwygopt] {
    background: #000000;
}

.btn-icon[b-00hpwygopt] {
    flex-shrink: 0;
}

/* ---- Search ----------------------------------------------------------- */
.search-input[b-00hpwygopt] {
    width: 280px;
}

.search-input input[b-00hpwygopt] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(18, 18, 23, 0.05);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
}

.search-input input[b-00hpwygopt]::placeholder {
    color: #6c6c89;
}

/* ---- Table ------------------------------------------------------------ */
.table[b-00hpwygopt] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-header[b-00hpwygopt],
.table-row[b-00hpwygopt] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
}

.table-header[b-00hpwygopt] {
    border-bottom: 1px solid #000000;
}

.table-row[b-00hpwygopt] {
    border-bottom: 1px solid #eeeeee;
}

.table-header span[b-00hpwygopt] {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.table-row span[b-00hpwygopt] {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

.col-name[b-00hpwygopt] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.col-status[b-00hpwygopt] {
    width: 200px;
    flex: 0 0 200px;
}

.col-actions[b-00hpwygopt] {
    width: 40px;
    flex: 0 0 40px;
    display: flex;
    justify-content: flex-end;
}

/* ---- Badges ----------------------------------------------------------- */
.badge[b-00hpwygopt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

.badge-active[b-00hpwygopt] {
    background: #e7f6ec;
    color: #1a7f37;
}

.badge-inactive[b-00hpwygopt] {
    background: #f2f2f4;
    color: #6c6c89;
}

.badge-system[b-00hpwygopt] {
    background: #eef4fb;
    color: #3a8dbc;
}

/* ---- States ----------------------------------------------------------- */
.table-message[b-00hpwygopt] {
    padding: 24px 0;
    font-size: 14px;
    color: #6c6c89;
}

.table-error[b-00hpwygopt] {
    color: #b42318;
}

/* ---- Pagination ------------------------------------------------------- */
.pagination[b-00hpwygopt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 40px;
}

.pagination-info[b-00hpwygopt] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #6c6c89;
}

.pagination-controls[b-00hpwygopt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn[b-00hpwygopt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: #f7f7f8;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #121217;
    cursor: pointer;
}

.page-btn.active[b-00hpwygopt] {
    background: #3A8DBC;
    color: #ffffff;
}

.page-btn:disabled[b-00hpwygopt] {
    opacity: 0.5;
    cursor: default;
}

.page-nav[b-00hpwygopt] {
    width: 32px;
    padding: 0;
}

.page-icon[b-00hpwygopt] {
    width: 20px;
    height: 20px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
    .team-toolbar[b-00hpwygopt] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .toolbar-actions[b-00hpwygopt] {
        width: 100%;
    }

    .search-input[b-00hpwygopt] {
        width: 100%;
        flex: 1 1 auto;
    }

    .col-status[b-00hpwygopt] {
        width: 120px;
        flex: 0 0 120px;
    }
}
/* /Shared/CompanyTeamView.razor.rz.scp.css */
.team[b-oli0woalq2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.team-toolbar[b-oli0woalq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.section-title[b-oli0woalq2] {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
}

.toolbar-actions[b-oli0woalq2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn[b-oli0woalq2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-dark[b-oli0woalq2] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover[b-oli0woalq2] {
    background: #000000;
}

.btn-icon[b-oli0woalq2] {
    flex-shrink: 0;
}

/* ---- Search ----------------------------------------------------------- */
.search-input[b-oli0woalq2] {
    width: 280px;
}

.search-input input[b-oli0woalq2] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #d1d1db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 1px rgba(18, 18, 23, 0.05);
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #121217;
}

.search-input input[b-oli0woalq2]::placeholder {
    color: #6c6c89;
}

/* ---- Table ------------------------------------------------------------ */
.table[b-oli0woalq2] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-header[b-oli0woalq2],
.table-row[b-oli0woalq2] {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
}

.table-header[b-oli0woalq2] {
    border-bottom: 1px solid #000000;
}

.table-row[b-oli0woalq2] {
    border-bottom: 1px solid #eeeeee;
}

.table-header span[b-oli0woalq2] {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.table-row span[b-oli0woalq2] {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}

.col-name[b-oli0woalq2] {
    flex: 1 1 0;
    min-width: 0;
}

.col-role[b-oli0woalq2] {
    width: 200px;
    flex: 0 0 200px;
}

.col-phone[b-oli0woalq2] {
    width: 200px;
    flex: 0 0 200px;
}

.col-updated[b-oli0woalq2] {
    width: 200px;
    flex: 0 0 200px;
}

.col-actions[b-oli0woalq2] {
    width: 40px;
    flex: 0 0 40px;
    display: flex;
    justify-content: flex-end;
}

/* ---- States ----------------------------------------------------------- */
.table-message[b-oli0woalq2] {
    padding: 24px 0;
    font-size: 14px;
    color: #6c6c89;
}

.table-error[b-oli0woalq2] {
    color: #b42318;
}

/* ---- Pagination ------------------------------------------------------- */
.pagination[b-oli0woalq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 40px;
}

.pagination-info[b-oli0woalq2] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #6c6c89;
}

.pagination-controls[b-oli0woalq2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn[b-oli0woalq2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: #f7f7f8;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #121217;
    cursor: pointer;
}

.page-btn.active[b-oli0woalq2] {
    background: #3A8DBC;
    color: #ffffff;
}

.page-btn:disabled[b-oli0woalq2] {
    opacity: 0.5;
    cursor: default;
}

.page-nav[b-oli0woalq2] {
    width: 32px;
    padding: 0;
}

.page-icon[b-oli0woalq2] {
    width: 20px;
    height: 20px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
    /* Stack the title above a full-width search + action row. */
    .team-toolbar[b-oli0woalq2] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .toolbar-actions[b-oli0woalq2] {
        width: 100%;
    }

    .search-input[b-oli0woalq2] {
        width: 100%;
        flex: 1 1 auto;
    }

    /* Drop the lower-priority columns so the row fits without horizontal scroll. */
    .col-phone[b-oli0woalq2],
    .col-updated[b-oli0woalq2] {
        display: none;
    }

    .col-role[b-oli0woalq2] {
        width: 120px;
        flex: 0 0 120px;
    }
}

@media (max-width: 480px) {
    .col-role[b-oli0woalq2] {
        display: none;
    }

    .pagination[b-oli0woalq2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        padding-top: 24px;
    }

    .pagination-controls[b-oli0woalq2] {
        justify-content: center;
    }
}
/* /Shared/SubscriptionView.razor.rz.scp.css */
.sub[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: #121217;
}

/* ---- Buttons ----
   Scoped CSS does not cascade from the parent (Company) component into this child,
   so the shared .btn family is redefined here to match the rest of the portal. */
.btn[b-v6zrq3afk4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 79px;
    height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    cursor: pointer;
}

.btn:disabled[b-v6zrq3afk4] {
    opacity: 0.6;
    cursor: default;
}

.btn-outline[b-v6zrq3afk4] {
    background: #ffffff;
    border: 1px solid #d1d1db;
    color: #121217;
    box-shadow: 0 1px 2px rgba(18, 18, 23, 0.05);
}

.btn-outline:hover:not(:disabled)[b-v6zrq3afk4] {
    background: #f7f7f8;
}

.btn-dark[b-v6zrq3afk4] {
    background: #333333;
    color: #ffffff;
}

.btn-dark:hover:not(:disabled)[b-v6zrq3afk4] {
    background: #000000;
}

.btn-icon[b-v6zrq3afk4] {
    flex-shrink: 0;
}

.sub-head[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-title[b-v6zrq3afk4] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.sub-subtitle[b-v6zrq3afk4] {
    font-size: 13px;
    color: #8a8a9e;
    margin: 0;
}

.muted[b-v6zrq3afk4] {
    color: #8a8a9e;
    font-size: 13px;
    margin: 4px 0;
}

/* ---- Two-column layout: selections on the left, summary card on the right ---- */
.sub-layout[b-v6zrq3afk4] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .sub-layout[b-v6zrq3afk4] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.sub-main[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.group-label[b-v6zrq3afk4] {
    font-size: 13px;
    font-weight: 600;
    color: #6c6c89;
    margin-bottom: 10px;
}

/* ---- Plans (radio) ---- */
.plan-row[b-v6zrq3afk4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    cursor: pointer;
}

.plan-row input[type="radio"][b-v6zrq3afk4] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    flex: 0 0 auto;
}

.plan-info[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.plan-name[b-v6zrq3afk4] {
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.plan-price[b-v6zrq3afk4],
.plan-sub[b-v6zrq3afk4] {
    font-size: 12px;
    color: #8a8a9e;
}

/* ---- Bundles ---- */
.bundle[b-v6zrq3afk4] {
    margin-bottom: 14px;
}

.bundle-head[b-v6zrq3afk4] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.bundle-head.locked[b-v6zrq3afk4] {
    cursor: default;
}

.bundle-head input[type="checkbox"][b-v6zrq3afk4] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.bundle-name[b-v6zrq3afk4] {
    font-weight: 600;
    font-size: 14px;
}

.bundle-includes[b-v6zrq3afk4] {
    list-style: none;
    margin: 6px 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bundle-includes li[b-v6zrq3afk4] {
    font-size: 13px;
    color: #6c6c89;
    position: relative;
    padding-left: 18px;
}

.bundle-includes li[b-v6zrq3afk4]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}

/* ---- Add-ons ---- */
.addon-row[b-v6zrq3afk4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
}

.addon-row.locked[b-v6zrq3afk4] {
    cursor: default;
}

.addon-row input[type="checkbox"][b-v6zrq3afk4] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.addon-name[b-v6zrq3afk4] {
    font-size: 14px;
}

.addon-row.locked .addon-name[b-v6zrq3afk4] {
    color: #6c6c89;
}

/* ---- info dot ---- */
.info-dot[b-v6zrq3afk4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e4e4ee;
    color: #8a8a9e;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    cursor: help;
}

/* ---- Current Subscription card ---- */
.sub-aside[b-v6zrq3afk4] {
    position: sticky;
    top: 16px;
}

.current-card[b-v6zrq3afk4] {
    background: #f7f7fb;
    border: 1px solid #ececf3;
    border-radius: 12px;
    padding: 22px;
}

.card-head[b-v6zrq3afk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.card-title[b-v6zrq3afk4] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.cancel-link[b-v6zrq3afk4] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #6c6c89;
    text-decoration: underline;
    cursor: pointer;
}

.cancel-link:hover[b-v6zrq3afk4] {
    color: #b42318;
}

.resume-link[b-v6zrq3afk4] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
    text-decoration: underline;
    cursor: pointer;
}

.resume-link:hover:not(:disabled)[b-v6zrq3afk4] {
    color: #15803d;
}

.resume-link:disabled[b-v6zrq3afk4] {
    opacity: 0.6;
    cursor: default;
}

.card-notice[b-v6zrq3afk4] {
    text-align: right;
    font-size: 12px;
    color: #6c6c89;
    margin-top: 6px;
}

.card-notice-warn[b-v6zrq3afk4] {
    color: #b42318;
}

.card-line[b-v6zrq3afk4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.card-line-main[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-line-name[b-v6zrq3afk4] {
    font-size: 14px;
    font-weight: 500;
}

.card-line-sub[b-v6zrq3afk4] {
    font-size: 12px;
    color: #8a8a9e;
}

.card-line-price[b-v6zrq3afk4] {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.card-empty-title[b-v6zrq3afk4] {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.card-empty-text[b-v6zrq3afk4] {
    font-size: 13px;
    color: #8a8a9e;
    margin: 0 0 18px;
    line-height: 1.4;
}

.card-total[b-v6zrq3afk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e0e0ea;
    padding-top: 16px;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
}

.card-total-empty[b-v6zrq3afk4] {
    color: #8a8a9e;
}

.card-next[b-v6zrq3afk4] {
    text-align: right;
    font-size: 12px;
    color: #8a8a9e;
    margin-top: 8px;
}

.card-cta[b-v6zrq3afk4],
.card-actions[b-v6zrq3afk4] {
    margin-top: 18px;
    width: 100%;
}

.card-cta[b-v6zrq3afk4] {
    justify-content: center;
}

.card-actions[b-v6zrq3afk4] {
    display: flex;
    gap: 10px;
}

.card-actions .btn[b-v6zrq3afk4] {
    flex: 1;
    justify-content: center;
}

.card-msg[b-v6zrq3afk4] {
    margin-top: 14px;
}

/* ---- Checkout button (bottom of the Current Subscription card, first purchase) ---- */
.checkout-btn[b-v6zrq3afk4] {
    min-width: 160px;
    justify-content: center;
}

.card-checkout[b-v6zrq3afk4] {
    width: 100%;
    margin-top: 18px;
}

.payment-element[b-v6zrq3afk4] {
    margin: 16px 0 6px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card fields fill the card width so they line up with the Cancel / Pay buttons below. */
.payment-element .stripe-input[b-v6zrq3afk4] {
    max-width: none;
}

.pm-row2[b-v6zrq3afk4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ---- Credits ---- */
.credits-row[b-v6zrq3afk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.credits-count[b-v6zrq3afk4] {
    font-weight: 600;
    font-size: 15px;
}

/* ---- Billing Settings ---- */
.billing-grid[b-v6zrq3afk4] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 640px) {
    .billing-grid[b-v6zrq3afk4] {
        grid-template-columns: 1fr;
    }
}

.billing-label[b-v6zrq3afk4] {
    font-size: 14px;
    color: #6c6c89;
}

.billing-value[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pm-head[b-v6zrq3afk4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    max-width: 360px;
}

.brands[b-v6zrq3afk4] {
    display: inline-flex;
    gap: 4px;
}

.brand[b-v6zrq3afk4] {
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    border-radius: 3px;
    padding: 3px 5px;
    letter-spacing: .3px;
}

.brand-visa[b-v6zrq3afk4] { background: #1a1f71; }
.brand-mc[b-v6zrq3afk4] { background: #eb001b; }
.brand-amex[b-v6zrq3afk4] { background: #2e77bc; }
.brand-disc[b-v6zrq3afk4] { background: #f76d1f; }

.pm-field label[b-v6zrq3afk4] {
    display: block;
    font-size: 12px;
    color: #8a8a9e;
    margin-bottom: 2px;
}

.pm-text[b-v6zrq3afk4] {
    font-size: 14px;
    color: #6c6c89;
}

/* Stripe Elements card-entry boxes (styled to look like our inputs) */
.stripe-input[b-v6zrq3afk4] {
    border: 1px solid #d8d8e3;
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
    max-width: 360px;
}

.pm-row3[b-v6zrq3afk4] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    max-width: 360px;
}

.pm-row3 .stripe-input[b-v6zrq3afk4],
.pm-row3 .zip-input[b-v6zrq3afk4] {
    max-width: none;
}

.zip-input[b-v6zrq3afk4] {
    width: 100%;
}

.manage-billing[b-v6zrq3afk4] {
    width: 100%;
    max-width: 360px;
    /* Align under the Payment Method value column (180px label + 12px gap). */
    margin: 22px 0 0 192px;
    justify-content: center;
    background: #f0f0f5;
    border: 1px solid #e0e0ea;
    color: #121217;
}

.manage-billing:hover:not(:disabled)[b-v6zrq3afk4] {
    background: #e7e7ef;
}

@media (max-width: 640px) {
    .manage-billing[b-v6zrq3afk4] {
        margin-left: 0;
        max-width: none;
    }

    /* Checkout / credits rows stack so the buttons get full width. */
    .checkout-bar[b-v6zrq3afk4] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .checkout-btn[b-v6zrq3afk4] {
        width: 100%;
    }

    .credits-row[b-v6zrq3afk4] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pm-row3[b-v6zrq3afk4] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Billing history ---- */
.history[b-v6zrq3afk4] {
    display: flex;
    flex-direction: column;
}

.history-head[b-v6zrq3afk4],
.history-row[b-v6zrq3afk4] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    align-items: center;
    gap: 16px;
}

.history-head[b-v6zrq3afk4] {
    padding: 0 0 12px;
    border-bottom: 1px solid #c9c9d6;
}

.history-head span[b-v6zrq3afk4] {
    font-size: 13px;
    font-weight: 600;
    color: #121217;
}

.history-row[b-v6zrq3afk4] {
    padding: 14px 0;
    border-bottom: 1px solid #ececf3;
    font-size: 14px;
    color: #3a3a45;
}

.history-row:last-child[b-v6zrq3afk4] {
    border-bottom: none;
}

.history-col-desc[b-v6zrq3afk4] {
    color: #3a3a45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-col-status[b-v6zrq3afk4] {
    color: #6c6c89;
}